Merge branch 'alibaba:main' into main

package.json

@@ -134,7 +134,7 @@
     "ts-jest": "^26.0.0",
     "ts-loader": "^7.0.4",
     "ts-node": "^9.1.1",
-    "typescript": "4.1.5",
+    "typescript": "^4.1.5",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1",

packages/.eslintrc

@@ -42,7 +42,7 @@
     "@typescript-eslint/array-type": 0,
     "@typescript-eslint/no-object-literal-type-assertion": 0,
     "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/no-unused-vars": 0,
+    "@typescript-eslint/no-unused-vars": 1,
     "@typescript-eslint/no-namespace": 0,
     "@typescript-eslint/ban-types": 0,
     "@typescript-eslint/adjacent-overload-signatures": 0,

packages/core/src/effects/useDragDropEffect.ts

@@ -1,4 +1,10 @@
-import { Engine, ClosestPosition, CursorType, CursorDragType } from '../models'
+import {
+  Engine,
+  ClosestPosition,
+  CursorType,
+  CursorDragType,
+  TreeNode,
+} from '../models'
 import {
   DragStartEvent,
   DragMoveEvent,
@@ -29,7 +35,7 @@ export const useDragDropEffect = (engine: Engine) => {
     const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
     engine.workbench.eachWorkspace((currentWorkspace) => {
       const operation = currentWorkspace.operation
-
+      const moveHelper = operation.moveHelper
       if (nodeId || outlineId || handlerId) {
         const node = engine.findNodeById(outlineId || nodeId || handlerId)
         if (node) {
@@ -39,16 +45,15 @@ export const useDragDropEffect = (engine: Engine) => {
             .getAllSelectedNodes()
             .filter((node) => node.allowDrag())
           if (validSelected.some((selectNode) => selectNode === node)) {
-            operation.setDragNodes(operation.sortNodes(validSelected))
+            moveHelper.dragStart(TreeNode.sort(validSelected))
           } else {
-            operation.setDragNodes([node])
+            moveHelper.dragStart([node])
           }
         }
       } else if (sourceId) {
         const sourceNode = engine.findNodeById(sourceId)
         if (sourceNode) {
-          if (!sourceNode.allowDrag()) return
-          operation.setDragNodes([sourceNode])
+          moveHelper.dragStart([sourceNode])
         }
       }
     })
@@ -57,36 +62,42 @@ export const useDragDropEffect = (engine: Engine) => {
 
   engine.subscribeTo(DragMoveEvent, (event) => {
     if (engine.cursor.type !== CursorType.Normal) return
-    if (engine.cursor.dragType !== CursorDragType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
     const target = event.data.target as HTMLElement
     const el = target?.closest(`
       *[${engine.props.nodeIdAttrName}],
       *[${engine.props.outlineNodeIdAttrName}]
     `)
+    const point = new Point(event.data.topClientX, event.data.topClientY)
     const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
     const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
     engine.workbench.eachWorkspace((currentWorkspace) => {
       const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
       const tree = operation.tree
-      const point = new Point(event.data.topClientX, event.data.topClientY)
-      const dragNodes = operation.getDragNodes()
       if (!dragNodes.length) return
       const touchNode = tree.findById(outlineId || nodeId)
-      operation.dragMove(point, touchNode)
+      moveHelper.dragMove({
+        point,
+        touchNode,
+      })
     })
   })
 
   engine.subscribeTo(ViewportScrollEvent, (event) => {
     if (engine.cursor.type !== CursorType.Normal) return
-    if (engine.cursor.dragType !== CursorDragType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
     const point = new Point(
       engine.cursor.position.topClientX,
       engine.cursor.position.topClientY
     )
-    const currentWorkspace = event?.context?.workspace
+    const currentWorkspace =
+      event?.context?.workspace ?? engine.workbench.activeWorkspace
     if (!currentWorkspace) return
     const operation = currentWorkspace.operation
-    if (!operation.getDragNodes()?.length) return
+    const moveHelper = operation.moveHelper
+    if (!moveHelper.dragNodes.length) return
     const tree = operation.tree
     const viewport = currentWorkspace.viewport
     const outline = currentWorkspace.outline
@@ -107,17 +118,18 @@ export const useDragDropEffect = (engine: Engine) => {
       engine.props.outlineNodeIdAttrName
     )
     const touchNode = tree.findById(outlineNodeId || nodeId)
-    operation.dragMove(point, touchNode)
+    moveHelper.dragMove({ point, touchNode })
   })
 
   engine.subscribeTo(DragStopEvent, () => {
     if (engine.cursor.type !== CursorType.Normal) return
-    if (engine.cursor.dragType !== CursorDragType.Normal) return
+    if (engine.cursor.dragType !== CursorDragType.Move) return
     engine.workbench.eachWorkspace((currentWorkspace) => {
       const operation = currentWorkspace.operation
-      const dragNodes = operation.getDragNodes()
-      const closestNode = operation.getClosestNode()
-      const closestDirection = operation.getClosestPosition()
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
+      const closestNode = moveHelper.closestNode
+      const closestDirection = moveHelper.closestDirection
       const selection = operation.selection
       if (!dragNodes.length) return
       if (dragNodes.length && closestNode && closestDirection) {
@@ -128,7 +140,7 @@ export const useDragDropEffect = (engine: Engine) => {
           if (closestNode.allowSibling(dragNodes)) {
             selection.batchSafeSelect(
               closestNode.insertAfter(
-                ...operation.getDropNodes(closestNode.parent)
+                ...TreeNode.filterDroppable(dragNodes, closestNode.parent)
               )
             )
           }
@@ -139,7 +151,7 @@ export const useDragDropEffect = (engine: Engine) => {
           if (closestNode.allowSibling(dragNodes)) {
             selection.batchSafeSelect(
               closestNode.insertBefore(
-                ...operation.getDropNodes(closestNode.parent)
+                ...TreeNode.filterDroppable(dragNodes, closestNode.parent)
               )
             )
           }
@@ -149,20 +161,24 @@ export const useDragDropEffect = (engine: Engine) => {
         ) {
           if (closestNode.allowAppend(dragNodes)) {
             selection.batchSafeSelect(
-              closestNode.append(...operation.getDropNodes(closestNode))
+              closestNode.append(
+                ...TreeNode.filterDroppable(dragNodes, closestNode)
+              )
             )
-            operation.setDropNode(closestNode)
+            moveHelper.dropping(closestNode)
           }
         } else if (closestDirection === ClosestPosition.InnerBefore) {
           if (closestNode.allowAppend(dragNodes)) {
             selection.batchSafeSelect(
-              closestNode.prepend(...operation.getDropNodes(closestNode))
+              closestNode.prepend(
+                ...TreeNode.filterDroppable(dragNodes, closestNode)
+              )
             )
-            operation.setDropNode(closestNode)
+            moveHelper.dropping(closestNode)
           }
         }
       }
-      operation.dragClean()
+      moveHelper.dragEnd()
     })
     engine.cursor.setStyle('')
   })

packages/core/src/effects/useFreeSelectionEffect.ts

@@ -9,7 +9,7 @@ import {
 
 export const useFreeSelectionEffect = (engine: Engine) => {
   engine.subscribeTo(DragStopEvent, (event) => {
-    if (engine.cursor.dragType !== CursorDragType.Normal) {
+    if (engine.cursor.dragType !== CursorDragType.Move) {
       return
     }
     engine.workbench.eachWorkspace((workspace) => {

packages/core/src/effects/useResizeEffect.ts

@@ -115,7 +115,7 @@ export const useResizeEffect = (engine: Engine) => {
     if (engine.cursor.type !== CursorType.Normal) return
     if (store.value) {
       store.value = null
-      engine.cursor.setDragType(CursorDragType.Normal)
+      engine.cursor.setDragType(CursorDragType.Move)
       engine.cursor.setStyle('')
     }
   })

packages/core/src/effects/useTranslateEffect.ts

@@ -1,34 +1,11 @@
 import { Engine, CursorDragType } from '../models'
 import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events'
-import { TreeNode } from '../models'
-import { IPoint, Point } from '@designable/shared'
-
-type TranslateData = {
-  startPoint?: IPoint
-  node?: TreeNode
-}
-
-type TranslateStore = {
-  value?: TranslateData
-}
-
-const parseTranslatePoint = (element: HTMLElement) => {
-  const transform = element?.style?.transform
-  if (transform) {
-    const [x, y] = transform
-      .match(
-        /translate(?:3d)?\(\s*([-\d.]+)[a-z]+?[\s,]+([-\d.]+)[a-z]+?(?:[\s,]+([-\d.]+))?[a-z]+?\s*\)/
-      )
-      ?.slice(1, 3) ?? [0, 0]
-
-    return new Point(Number(x), Number(y))
-  } else {
-    return new Point(Number(element.offsetLeft), Number(element.offsetTop))
-  }
-}
 
 export const useTranslateEffect = (engine: Engine) => {
-  const findStartNodeHandler = (target: HTMLElement): TranslateData => {
+  engine.subscribeTo(DragStartEvent, (event) => {
+    const target = event.data.target as HTMLElement
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
     const handler = target?.closest(`*[${engine.props.nodeTranslateAttrName}]`)
     if (handler) {
       const type = handler.getAttribute(engine.props.nodeTranslateAttrName)
@@ -43,64 +20,38 @@ export const useTranslateEffect = (engine: Engine) => {
           if (nodeId) {
             const node = engine.findNodeById(nodeId)
             if (node) {
-              const element = node.getElement()
-              node.markCursorOffset()
-              return {
-                node,
-                startPoint: parseTranslatePoint(element),
-              }
+              currentWorkspace?.operation.translateHelper.dragStart([node])
             }
           }
         }
       }
     }
-    return
-  }
-
-  const store: TranslateStore = {}
-
-  engine.subscribeTo(DragStartEvent, (event) => {
-    const target = event.data.target as HTMLElement
-    const data = findStartNodeHandler(target)
-    if (data) {
-      store.value = data
-      engine.cursor.setDragType(CursorDragType.Translate)
-    }
   })
-
-  engine.subscribeTo(DragMoveEvent, () => {
+  engine.subscribeTo(DragMoveEvent, (event) => {
     if (engine.cursor.dragType !== CursorDragType.Translate) return
-    if (store.value) {
-      const { node, startPoint } = store.value
-      const allowTranslate = node.allowTranslate()
-      if (!allowTranslate) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const translateHelper = currentWorkspace?.operation.translateHelper
+    const dragNodes = translateHelper.dragNodes
+    const allowTranslate = dragNodes.every((node) => node.allowTranslate())
+    if (!dragNodes.length || !allowTranslate) return
+    translateHelper.dragMove()
+    dragNodes.forEach((node) => {
       const element = node.getElement()
-      const deltaX = engine.cursor.dragStartToCurrentDelta.clientX
-      const deltaY = engine.cursor.dragStartToCurrentDelta.clientY
-      const dragLine = node.operation.dragLine
-      const closestSnapLines = dragLine.closestSnapLines
-      let translateX = startPoint.x + deltaX,
-        translateY = startPoint.y + deltaY
-      dragLine.calcDragLine([node])
-      closestSnapLines.forEach((line) => {
-        if (line.direction === 'h') {
-          translateY = line.relativeFromNodeVertex?.start?.y
-        } else {
-          translateX = line.relativeFromNodeVertex?.start?.x
-        }
+      translateHelper.translate(node, (translate) => {
+        element.style.position = 'absolute'
+        element.style.left = '0px'
+        element.style.top = '0px'
+        element.style.transform = `translate3d(${translate.x}px,${translate.y}px,0)`
       })
-      element.style.position = 'absolute'
-      element.style.left = '0px'
-      element.style.top = '0px'
-      element.style.transform = `translate3d(${translateX}px,${translateY}px,0)`
-    }
+    })
   })
-
-  engine.subscribeTo(DragStopEvent, () => {
-    if (store.value) {
-      store.value.node.operation.dragLine.cleanDragLine()
-      store.value = null
-      engine.cursor.setDragType(CursorDragType.Normal)
+  engine.subscribeTo(DragStopEvent, (event) => {
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const translateHelper = currentWorkspace?.operation.translateHelper
+    if (translateHelper) {
+      translateHelper.dragEnd()
     }
   })
 }

packages/core/src/externals.ts

@@ -1,4 +1,4 @@
-import { isFn, isArr } from '@designable/shared'
+import { isArr } from '@designable/shared'
 import { untracked } from '@formily/reactive'
 import { DEFAULT_DRIVERS, DEFAULT_EFFECTS, DEFAULT_SHORTCUTS } from './presets'
 import { Engine, TreeNode } from './models'

packages/core/src/models/Cursor.ts

@@ -10,7 +10,7 @@ export enum CursorStatus {
 }
 
 export enum CursorDragType {
-  Normal = 'NORMAL',
+  Move = 'MOVE',
   Resize = 'RESIZE',
   Rotate = 'ROTATE',
   Translate = 'TRANSLATE',
@@ -94,7 +94,7 @@ export class Cursor {
 
   type: CursorType | string = CursorType.Normal
 
-  dragType: CursorDragType | string = CursorDragType.Normal
+  dragType: CursorDragType | string = CursorDragType.Move
 
   status: CursorStatus = CursorStatus.Normal
 
@@ -136,6 +136,13 @@ export class Cursor {
     })
   }
 
+  get speed() {
+    return Math.sqrt(
+      Math.pow(this.dragAtomDelta.clientX, 2) +
+        Math.pow(this.dragAtomDelta.clientY, 2)
+    )
+  }
+
   setStatus(status: CursorStatus) {
     this.status = status
   }