PPTist/src/views/Editor/Canvas/AlignmentLine.vue
pipipi-pikachu ded04bf837 update
2020-12-25 13:02:44 +08:00

78 lines
1.7 KiB
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>