chore(core): improve dnd engine

alibaba · Apr 13, 2022 · 976eb7b · 976eb7b
1 parent 6e054b5
commit 976eb7b
Show file tree

Hide file tree

Showing 10 changed files with 408 additions and 368 deletions.
diff --git a/packages/core/src/effects/useDragDropEffect.ts b/packages/core/src/effects/useDragDropEffect.ts
@@ -78,7 +78,7 @@ export const useDragDropEffect = (engine: Engine) => {
       const tree = operation.tree
       if (!dragNodes.length) return
       const touchNode = tree.findById(outlineId || nodeId)
-      moveHelper.dragging({
+      moveHelper.dragMove({
         point,
         touchNode,
       })
@@ -118,7 +118,7 @@ export const useDragDropEffect = (engine: Engine) => {
       engine.props.outlineNodeIdAttrName
     )
     const touchNode = tree.findById(outlineNodeId || nodeId)
-    moveHelper.dragging({ point, touchNode })
+    moveHelper.dragMove({ point, touchNode })
   })
 
   engine.subscribeTo(DragStopEvent, () => {

diff --git a/packages/core/src/effects/useTranslateEffect.ts b/packages/core/src/effects/useTranslateEffect.ts
@@ -35,7 +35,7 @@ export const useTranslateEffect = (engine: Engine) => {
     const dragNodes = translateHelper.dragNodes
     const allowTranslate = dragNodes.every((node) => node.allowTranslate())
     if (!dragNodes.length || !allowTranslate) return
-    translateHelper.dragging()
+    translateHelper.dragMove()
     dragNodes.forEach((node) => {
       const element = node.getElement()
       translateHelper.translate(node, (translate) => {

diff --git a/packages/core/src/models/MoveHelper.ts b/packages/core/src/models/MoveHelper.ts
@@ -268,7 +268,7 @@ export class MoveHelper {
     this.operation.engine.cursor.setDragType(CursorDragType.Move)
   }
 
-  dragging(props: IMoveHelperDraggingProps) {
+  dragMove(props: IMoveHelperDraggingProps) {
     const { point, touchNode } = props
     if (this.outline.isPointInViewport(point, false)) {
       this.activeViewport = this.outline
@@ -352,7 +352,7 @@ export class MoveHelper {
       viewportClosestOffsetRect: observable.ref,
       viewportClosestRect: observable.ref,
       dragStart: action,
-      dragging: action,
+      dragMove: action,
       dragEnd: action,
     })
   }

diff --git a/packages/core/src/models/SnapLine.ts b/packages/core/src/models/SnapLine.ts
@@ -1,26 +1,32 @@
 import {
   calcRectOfAxisLineSegment,
-  ISnapLineSegment,
+  ILineSegment,
   IPoint,
   calcOffsetOfSnapLineSegmentToEdge,
 } from '@designable/shared'
 import { TreeNode } from './TreeNode'
 import { TranslateHelper } from './TranslateHelper'
 
-export type IDynamicSnapLine = ISnapLineSegment & {
+export type ISnapLineType = 'ruler' | 'space-block' | 'normal'
+
+export type ISnapLine = ILineSegment & {
+  type?: ISnapLineType
+  distance?: number
   id?: string
   refer?: TreeNode
 }
 
 export class SnapLine {
   _id: string
+  type: ISnapLineType
   distance: number
   refer: TreeNode
   start: IPoint
   end: IPoint
   ctx: TranslateHelper
-  constructor(ctx: TranslateHelper, line: IDynamicSnapLine) {
+  constructor(ctx: TranslateHelper, line: ISnapLine) {
     this.ctx = ctx
+    this.type = line.type || 'normal'
     this._id = line.id
     this.refer = line.refer
     this.start = { ...line.start }

diff --git a/packages/core/src/models/SpaceBlock.ts b/packages/core/src/models/SpaceBlock.ts
@@ -1,9 +1,9 @@
 import {
-  isEqualRect,
-  calcSpaceBlockOfRect,
-  IRect,
   calcExtendsLineSegmentOfRect,
+  calcDistanceOfSnapLineToEdges,
+  LineSegment,
 } from '@designable/shared'
+import { SnapLine } from './SnapLine'
 import { TranslateHelper } from './TranslateHelper'
 import { TreeNode } from './TreeNode'
 
@@ -132,4 +132,65 @@ export class SpaceBlock {
     }
     return results
   }
+
+  get snapLine() {
+    if (!this.isometrics.length) return
+    const nextRect = this.next.rect
+    const referRect = this.refer.getValidElementOffsetRect()
+    let line: LineSegment
+    if (this.type === 'top') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.bottom + nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.bottom + nextRect.height,
+        }
+      )
+    } else if (this.type === 'bottom') {
+      line = new LineSegment(
+        {
+          x: nextRect.left,
+          y: referRect.top - nextRect.height,
+        },
+        {
+          x: nextRect.right,
+          y: referRect.top - nextRect.height,
+        }
+      )
+    } else if (this.type === 'left') {
+      line = new LineSegment(
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.right + nextRect.width,
+          y: nextRect.bottom,
+        }
+      )
+    } else {
+      line = new LineSegment(
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.top,
+        },
+        {
+          x: referRect.left - nextRect.width,
+          y: nextRect.bottom,
+        }
+      )
+    }
+    const distance = calcDistanceOfSnapLineToEdges(
+      line,
+      this.ctx.dragNodesEdgeLines
+    )
+    return new SnapLine(this.ctx, {
+      ...line,
+      distance,
+      type: 'space-block',
+    })
+  }
 }