void>,
required: true,
},
+ dragLineElement: {
+ type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateLineHandler) => void>,
+ required: true,
+ },
},
setup(props) {
const store = useStore
()
@@ -82,6 +88,7 @@ export default defineComponent({
'image': ImageElementOperate,
'text': TextElementOperate,
'shape': ShapeElementOperate,
+ 'line': LineElementOperate,
}
return elementTypeMap[props.elementInfo.type] || null
})
diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
new file mode 100644
index 00000000..7d4bb51f
--- /dev/null
+++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
@@ -0,0 +1,169 @@
+import { Ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import { State, MutationTypes } from '@/store'
+import { PPTElement, PPTLineElement } from '@/types/slides'
+import { OperateLineHandler, OperateLineHandlers } from '@/types/edit'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+interface AdsorptionPoint {
+ x: number;
+ y: number;
+}
+
+export default (elementList: Ref) => {
+ const store = useStore()
+ const canvasScale = computed(() => store.state.canvasScale)
+
+ const { addHistorySnapshot } = useHistorySnapshot()
+
+ const dragLineElement = (e: MouseEvent, element: PPTLineElement, command: OperateLineHandler) => {
+ let isMouseDown = true
+
+ const sorptionRange = 10
+
+ const startPageX = e.pageX
+ const startPageY = e.pageY
+
+ const adsorptionPoints: AdsorptionPoint[] = []
+
+ // ่ทๅๅ
จ้จ้็บฟๆกไธๆชๆ่ฝฌๅ
็ด ็8ไธช็นไฝไธบๅธ้็น
+ for(let i = 0; i < elementList.value.length; i++) {
+ const _element = elementList.value[i]
+ if(_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
+
+ const left = _element.left
+ const top = _element.top
+ const width = _element.width
+ const height = _element.height
+
+ const right = left + width
+ const bottom = top + height
+ const centerX = top + height / 2
+ const centerY = left + width / 2
+
+ const topPoint = { x: centerY, y: top }
+ const bottomPoint = { x: centerY, y: bottom }
+ const leftPoint = { x: left, y: centerX }
+ const rightPoint = { x: right, y: centerX }
+
+ const leftTopPoint = { x: left, y: top }
+ const rightTopPoint = { x: right, y: top }
+ const leftBottomPoint = { x: left, y: bottom }
+ const rightBottomPoint = { x: right, y: bottom }
+
+ adsorptionPoints.push(
+ topPoint,
+ bottomPoint,
+ leftPoint,
+ rightPoint,
+ leftTopPoint,
+ rightTopPoint,
+ leftBottomPoint,
+ rightBottomPoint,
+ )
+ }
+
+ document.onmousemove = e => {
+ if(!isMouseDown) return
+
+ const currentPageX = e.pageX
+ const currentPageY = e.pageY
+
+ // ้ผ ๆ ๆไธๅ็งปๅจ็่ท็ฆป
+ const moveX = (currentPageX - startPageX) / canvasScale.value
+ const moveY = (currentPageY - startPageY) / canvasScale.value
+
+ // ็บฟๆกไธคไธช็ซฏ็น๏ผ่ตท็นๅ็ป็น๏ผๅบไบ็ผ่พๅบๅ็ไฝ็ฝฎ
+ let startX = element.left + element.start[0]
+ let startY = element.top + element.start[1]
+ let endX = element.left + element.end[0]
+ let endY = element.top + element.end[1]
+
+ // ๆ นๆฎๆๆฝ็็น๏ผ้ๆฉไฟฎๆน่ตท็นๆ็ป็น็ไฝ็ฝฎ
+ // ไธค็นๅจๆฐดๅนณๅๅ็ดๆนๅไธๆๅฏน้ฝๅธ้
+ // ้ ่ฟๅ
ถไปๅ
็ด ็ๅธ้็นๆๅฏน้ฝๅธ้
+ if(command === OperateLineHandlers.START) {
+ startX = startX + moveX
+ startY = startY + moveY
+
+ if(Math.abs(startX - endX) < sorptionRange) startX = endX
+ if(Math.abs(startY - endY) < sorptionRange) startY = endY
+
+ for(const adsorptionPoint of adsorptionPoints) {
+ const { x, y } = adsorptionPoint
+ if(Math.abs(x - startX) < sorptionRange && Math.abs(y - startY) < sorptionRange) {
+ startX = x
+ startY = y
+ break
+ }
+ }
+ }
+ else {
+ endX = endX + moveX
+ endY = endY + moveY
+
+ if(Math.abs(startX - endX) < sorptionRange) endX = startX
+ if(Math.abs(startY - endY) < sorptionRange) endY = startY
+
+ for(const adsorptionPoint of adsorptionPoints) {
+ const { x, y } = adsorptionPoint
+ if(Math.abs(x - endX) < sorptionRange && Math.abs(y - endY) < sorptionRange) {
+ endX = x
+ endY = y
+ break
+ }
+ }
+ }
+
+ // ่ฎก็ฎไธคไธช็ซฏ็นๅบไบ่ช่บซๅ
็ด ไฝ็ฝฎ็ๅๆ
+ const minX = Math.min(startX, endX)
+ const minY = Math.min(startY, endY)
+ const maxX = Math.max(startX, endX)
+ const maxY = Math.max(startY, endY)
+
+ const start: [number, number] = [0, 0]
+ const end: [number, number] = [maxX - minX, maxY - minY]
+ if(startX > endX) {
+ start[0] = maxX - minX
+ end[0] = 0
+ }
+ if(startY > endY) {
+ start[1] = maxY - minY
+ end[1] = 0
+ }
+
+ // ไฟฎๆน็บฟๆก็ไฝ็ฝฎๅไธค็น็ๅๆ
+ elementList.value = elementList.value.map(el => {
+ if(el.id === element.id) {
+ return {
+ ...el,
+ left: minX,
+ top: minY,
+ start: start,
+ end: end,
+ }
+ }
+ return el
+ })
+ }
+
+ document.onmouseup = e => {
+ isMouseDown = false
+ document.onmousemove = null
+ document.onmouseup = null
+
+ const currentPageX = e.pageX
+ const currentPageY = e.pageY
+
+ // ๅฏนๆฏๅๅง้ผ ๆ ไฝ็ฝฎ๏ผๆฒกๆๅฎ้
็ไฝ็งปไธๆดๆฐๆฐๆฎ
+ if(startPageX === currentPageX && startPageY === currentPageY) return
+
+ store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
+ addHistorySnapshot()
+ }
+ }
+
+ return {
+ dragLineElement,
+ }
+}
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 67eedfb0..72625561 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -39,6 +39,7 @@
:isMultiSelect="activeElementIdList.length > 1"
:rotateElement="rotateElement"
:scaleElement="scaleElement"
+ :dragLineElement="dragLineElement"
/>