refactor: remove focusNode feature

packages/core/src/effects/useDragDropEffect.ts

@@ -16,21 +16,20 @@ export const useDragDropEffect = (engine: Engine) => {
        *[${engine.props.sourceIdAttrName}],
        *[${engine.props.outlineNodeIdAttrName}]
       `)
-    if (!el?.getAttribute) return
+    const handler = target?.closest(
+      `*[${engine.props.nodeDragHandlerAttrName}]`
+    )
+    const helper = handler?.closest(`*[${engine.props.nodeHelpersIdAttrName}]`)
+    if (!el?.getAttribute && !handler) return
     const sourceId = el?.getAttribute(engine.props.sourceIdAttrName)
     const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
+    const handlerId = helper?.getAttribute(engine.props.nodeHelpersIdAttrName)
     const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
     engine.workbench.eachWorkspace((currentWorkspace) => {
       const operation = currentWorkspace.operation
 
-      if (nodeId || outlineId) {
-        const node = engine.findNodeById(outlineId || nodeId)
-        if (operation.focusNode && operation.focusNode.contains(node)) {
-          operation.setDragNodes([operation.focusNode])
-          return
-        } else {
-          operation.focusClean()
-        }
+      if (nodeId || outlineId || handlerId) {
+        const node = engine.findNodeById(outlineId || nodeId || handlerId)
         if (node) {
           if (!node.allowDrag()) return
           if (node === node.root) return

packages/core/src/effects/useSelectionEffect.ts

@@ -58,9 +58,6 @@ export const useSelectionEffect = (engine: Engine) => {
           selection.crossAddTo(node)
         }
       } else {
-        if (operation.focusNode !== node) {
-          operation.focusClean()
-        }
         selection.select(node, true)
       }
     } else {

packages/core/src/models/Engine.ts

@@ -98,6 +98,7 @@ export class Engine extends Event {
     contentEditableNodeIdAttrName: 'data-content-editable-node-id',
     clickStopPropagationAttrName: 'data-click-stop-propagation',
     nodeHelpersIdAttrName: 'data-designer-node-helpers-id',
+    nodeDragHandlerAttrName: 'data-designer-node-handler',
     outlineNodeIdAttrName: 'data-designer-outline-node-id',
     defaultScreenType: ScreenType.PC,
   }

packages/core/src/models/Operation.ts

@@ -26,8 +26,6 @@ export class Operation {
 
   tree: TreeNode
 
-  focusNode: TreeNode
-
   selection: Selection
 
   viewportDragon: Dragon
@@ -77,18 +75,6 @@ export class Operation {
     return this.selection.selected.map((id) => this.tree.findById(id))
   }
 
-  switchFocusNode(node: TreeNode) {
-    if (this.focusNode === node) {
-      this.focusNode = null
-    } else {
-      this.focusNode = node
-    }
-  }
-
-  focusClean() {
-    this.focusNode = null
-  }
-
   setDragNodes(nodes: TreeNode[]) {
     const dragNodes = nodes.reduce((buf, node) => {
       if (isFn(node?.designerProps?.getDragNodes)) {
@@ -261,7 +247,6 @@ export class Operation {
 
   makeObservable() {
     define(this, {
-      focusNode: observable.ref,
       hover: observable.ref,
       removeNodes: action,
       cloneNodes: action,

packages/core/src/types.ts

@@ -20,6 +20,7 @@ export type IEngineProps<T = Event> = IEventProps<T> & {
   clickStopPropagationAttrName?: string //点击阻止冒泡属性
   outlineNodeIdAttrName?: string //大纲树节点ID的dom属性名
   nodeHelpersIdAttrName?: string //节点工具栏属性名
+  nodeDragHandlerAttrName?: string //节点拖拽手柄属性名
   defaultComponentTree?: ITreeNode //默认组件树
   defaultScreenType?: ScreenType
   rootComponentName?: string

packages/react/src/widgets/AuxToolWidget/DragHandler.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { TreeNode } from '@designable/core'
+import { observer } from '@formily/reactive-react'
+import { IconWidget } from '../IconWidget'
+import { useDesigner, usePrefix } from '../../hooks'
+import { Button } from 'antd'
+
+export interface IDragHandlerProps {
+  node: TreeNode
+  style?: React.CSSProperties
+}
+
+export const DragHandler: React.FC<IDragHandlerProps> = observer(
+  ({ node, style }) => {
+    const designer = useDesigner()
+    const prefix = usePrefix('aux-drag-handler')
+    if (node === node.root || node.designerProps.draggable === false)
+      return null
+    const handlerProps = {
+      [designer.props.nodeDragHandlerAttrName]: 'true',
+    }
+    return (
+      <Button {...handlerProps} className={prefix} style={style} type="primary">
+        <IconWidget infer="Move" />
+      </Button>
+    )
+  }
+)
+
+DragHandler.displayName = 'DragHandler'

packages/react/src/widgets/AuxToolWidget/Helpers.tsx

@@ -6,7 +6,7 @@ import { useDesigner, usePrefix, useViewport } from '../../hooks'
 import { Selector } from './Selector'
 import { Copy } from './Copy'
 import { Delete } from './Delete'
-import { DragFocus } from './DragFocus'
+import { DragHandler } from './DragHandler'
 
 const HELPER_DEBOUNCE_TIMEOUT = 100
 
@@ -29,7 +29,7 @@ export const Helpers: React.FC<IHelpersProps> = ({ node, nodeRect }) => {
   const viewport = useViewport()
   const unmountRef = useRef(false)
   const ref = useRef<HTMLDivElement>()
-  const [position, setPositin] = useState('top-right')
+  const [position, setPosition] = useState('top-right')
 
   useLayoutEffect(() => {
     let request = null
@@ -70,7 +70,7 @@ export const Helpers: React.FC<IHelpersProps> = ({ node, nodeRect }) => {
       const helpersRect = ref.current?.getBoundingClientRect()
       if (!helpersRect || !nodeRect) return
       if (unmountRef.current) return
-      setPositin(
+      setPosition(
         getYInViewport(nodeRect, helpersRect) +
           '-' +
           getXInViewport(nodeRect, helpersRect)
@@ -111,7 +111,7 @@ export const Helpers: React.FC<IHelpersProps> = ({ node, nodeRect }) => {
       <div className={cls(prefix + '-content')}>
         <Selector node={node} />
         {node?.allowClone() === false ? null : <Copy node={node} />}
-        {node?.allowDrag() === false ? null : <DragFocus node={node} />}
+        {node?.allowDrag() === false ? null : <DragHandler node={node} />}
         {node?.allowDelete() === false ? null : <Delete node={node} />}
       </div>
     </div>