From 2d46b94cde79aeb5c8c9443d940ebe40dab73056 Mon Sep 17 00:00:00 2001 From: "zhili.wzl" Date: Tue, 30 Nov 2021 22:28:13 +0800 Subject: [PATCH] refactor: remove focusNode feature --- .../core/src/effects/useDragDropEffect.ts | 17 +++++----- .../core/src/effects/useSelectionEffect.ts | 3 -- packages/core/src/models/Engine.ts | 1 + packages/core/src/models/Operation.ts | 15 --------- packages/core/src/types.ts | 1 + .../src/widgets/AuxToolWidget/DragFocus.tsx | 33 ------------------- .../src/widgets/AuxToolWidget/DragHandler.tsx | 30 +++++++++++++++++ .../src/widgets/AuxToolWidget/Helpers.tsx | 8 ++--- 8 files changed, 44 insertions(+), 64 deletions(-) delete mode 100644 packages/react/src/widgets/AuxToolWidget/DragFocus.tsx create mode 100644 packages/react/src/widgets/AuxToolWidget/DragHandler.tsx diff --git a/packages/core/src/effects/useDragDropEffect.ts b/packages/core/src/effects/useDragDropEffect.ts index e03634023..ddc8b4444 100644 --- a/packages/core/src/effects/useDragDropEffect.ts +++ b/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 diff --git a/packages/core/src/effects/useSelectionEffect.ts b/packages/core/src/effects/useSelectionEffect.ts index 2a5c5b60b..9c41176ea 100644 --- a/packages/core/src/effects/useSelectionEffect.ts +++ b/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 { diff --git a/packages/core/src/models/Engine.ts b/packages/core/src/models/Engine.ts index 0986b5d70..f2e0e7863 100644 --- a/packages/core/src/models/Engine.ts +++ b/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, } diff --git a/packages/core/src/models/Operation.ts b/packages/core/src/models/Operation.ts index 7ebff9f61..783f784fa 100644 --- a/packages/core/src/models/Operation.ts +++ b/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, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 9d078c840..cb2ae2c38 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -20,6 +20,7 @@ export type IEngineProps = IEventProps & { clickStopPropagationAttrName?: string //点击阻止冒泡属性 outlineNodeIdAttrName?: string //大纲树节点ID的dom属性名 nodeHelpersIdAttrName?: string //节点工具栏属性名 + nodeDragHandlerAttrName?: string //节点拖拽手柄属性名 defaultComponentTree?: ITreeNode //默认组件树 defaultScreenType?: ScreenType rootComponentName?: string diff --git a/packages/react/src/widgets/AuxToolWidget/DragFocus.tsx b/packages/react/src/widgets/AuxToolWidget/DragFocus.tsx deleted file mode 100644 index 428dd67d4..000000000 --- a/packages/react/src/widgets/AuxToolWidget/DragFocus.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import { TreeNode } from '@designable/core' -import { observer } from '@formily/reactive-react' -import { IconWidget } from '../IconWidget' -import { useOperation, usePrefix } from '../../hooks' -import { Button } from 'antd' - -export interface IDragFocusProps { - node: TreeNode - style?: React.CSSProperties -} - -export const DragFocus: React.FC = observer( - ({ node, style }) => { - const operation = useOperation() - const prefix = usePrefix('aux-focus') - if (node === node.root) return null - return ( - - ) - } -) - -DragFocus.displayName = 'DragFocus' diff --git a/packages/react/src/widgets/AuxToolWidget/DragHandler.tsx b/packages/react/src/widgets/AuxToolWidget/DragHandler.tsx new file mode 100644 index 000000000..cdbce4b7c --- /dev/null +++ b/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 = 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 ( + + ) + } +) + +DragHandler.displayName = 'DragHandler' diff --git a/packages/react/src/widgets/AuxToolWidget/Helpers.tsx b/packages/react/src/widgets/AuxToolWidget/Helpers.tsx index 832e3b27b..dd9da1e29 100644 --- a/packages/react/src/widgets/AuxToolWidget/Helpers.tsx +++ b/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 = ({ node, nodeRect }) => { const viewport = useViewport() const unmountRef = useRef(false) const ref = useRef() - 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 = ({ 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 = ({ node, nodeRect }) => {
{node?.allowClone() === false ? null : } - {node?.allowDrag() === false ? null : } + {node?.allowDrag() === false ? null : } {node?.allowDelete() === false ? null : }