PPTist/src/views/Editor/Canvas/AlignmentLine.vue

<template>
  <div class="alignment-line" :style="{ left, top }">
    <div :class="['line', type]" :style="sizeStyle"></div>
  </div>
</template>

<script lang="ts">
import { computed, PropType, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { State } from '@/store'
import { AlignmentLineAxis } from '@/types/edit'

export default defineComponent({
  name: 'alignment-line',
  props: {
    type: {
      type: String as PropType<'vertical' | 'horizontal'>,
      required: true,
    },
    axis: {
      type: Object as PropType<AlignmentLineAxis>,
      required: true,
    },
    length: {
      type: Number,
      required: true,
    },
    offsetX: {
      type: Number,
      required: true,
    },
    offsetY: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const store = useStore<State>()
    const canvasScale = computed(() => store.state.canvasScale)

    const left = computed(() => props.axis.x * canvasScale.value + props.offsetX + 'px')
    const top = computed(() => props.axis.y * canvasScale.value + props.offsetY + 'px')

    const sizeStyle = computed(() => {
      if(props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
      return { width: props.length * canvasScale.value + 'px' }
    })

    return {
      left,
      top,
      sizeStyle,
    }
  },
})
</script>

<style lang="scss" scoped>
.alignment-line {
  position: absolute;
  z-index: 100;

  .line {
    width: 0;
    height: 0;
    border: 0 dashed $themeColor;

    &.vertical {
      margin-left: -0.5px;
      border-left-width: 1px;
    }
    &.horizontal {
      margin-top: -0.5px;
      border-top-width: 1px;
    }
  }
}
</style>