mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
78 lines
1.7 KiB
Vue
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> |