From 03b751d232f1aa12821efbff455d467356d4bedb Mon Sep 17 00:00:00 2001 From: wzw Date: Wed, 13 Nov 2024 14:23:12 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(extension):=20=E3=80=90dynamic-group?= =?UTF-8?q?=E3=80=91DynamicGroup=20=E4=BD=BF=E7=94=A8=20moveNode=20?= =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E7=A7=BB=E5=8A=A8=E6=97=B6=E5=AD=90=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E6=B2=A1=E6=9C=89=E8=B7=9F=E9=9A=8F=E7=A7=BB=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 之前的修改中，跟随移动的逻辑被放在了 node:mousemove 事件监听中，导致只有拖拽才会触发，现改到 getMoveDistance 中，拖拽和使用方法进行移动均会执行 --- .../pages/extension/dynamic-group/index.tsx | 18 ++++++++ packages/extension/src/dynamic-group/model.ts | 41 +++++++++++++++++++ packages/extension/src/dynamic-group/node.ts | 37 +++++++++-------- 3 files changed, 79 insertions(+), 17 deletions(-) diff --git a/examples/engine-browser-examples/src/pages/extension/dynamic-group/index.tsx b/examples/engine-browser-examples/src/pages/extension/dynamic-group/index.tsx index 8d37d6ca3..5250d0812 100644 --- a/examples/engine-browser-examples/src/pages/extension/dynamic-group/index.tsx +++ b/examples/engine-browser-examples/src/pages/extension/dynamic-group/index.tsx @@ -87,6 +87,24 @@ export default function DynamicGroupDemo() { ...config, container: containerRef.current as HTMLElement, }) + ;(lf.extension.control as Control).addItem({ + key: 'move-group', + iconClass: 'custom-minimap', + title: '', + text: '右移分组', + onClick: (lf) => { + const { nodes } = lf.getSelectElements() + const selectedNode = nodes[0] + if (!selectedNode) { + return + } + const isGroup = lf.getModelById(selectedNode.id)?.isGroup + if (!isGroup) { + return + } + lf.graphModel.moveNode(selectedNode.id, 10, 0) + }, + }) const dndPanelConfig = getDndPanelConfig(lf) lf.setPatternItems(dndPanelConfig) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index c38fbfbb2..5de76b622 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -181,6 +181,47 @@ export class DynamicGroupNodeModel extends RectNodeModel { return data } + /** + * 获取分组内的节点 + * @param groupModel + */ + getNodesInGroup( + groupModel: DynamicGroupNodeModel, + graphModel: GraphModel, + ): string[] { + let nodeIds: string[] = [] + if (groupModel.isGroup) { + forEach(Array.from(groupModel.children), (nodeId: string) => { + nodeIds.push(nodeId) + + const nodeModel = graphModel.getNodeModelById(nodeId) + if (nodeModel?.isGroup) { + nodeIds = nodeIds.concat( + this.getNodesInGroup( + nodeModel as DynamicGroupNodeModel, + graphModel, + ), + ) + } + }) + } + return nodeIds + } + getMoveDistance( + deltaX: number, + deltaY: number, + isIgnoreRule = false, + ): [number, number] { + const [moveDeltaX, moveDeltaY] = super.getMoveDistance( + deltaX, + deltaY, + isIgnoreRule, + ) + const nodeIds = this.getNodesInGroup(this, this.graphModel) + this.graphModel.moveNodes(nodeIds, deltaX, deltaY, isIgnoreRule) + return [moveDeltaX, moveDeltaY] + } + /** * 重写 getHistoryData 方法 */ diff --git a/packages/extension/src/dynamic-group/node.ts b/packages/extension/src/dynamic-group/node.ts index 477bcbe17..8d7f517f0 100644 --- a/packages/extension/src/dynamic-group/node.ts +++ b/packages/extension/src/dynamic-group/node.ts @@ -106,24 +106,27 @@ export class DynamicGroupNode< } } - onNodeMouseMove = ({ - deltaX, - deltaY, - data, - }: Omit, 'e' | 'position'>) => { - const { model: curGroup, graphModel } = this.props - const { transformModel } = graphModel - const { SCALE_X, SCALE_Y } = transformModel - if (data.id === curGroup.id) { - const nodeIds = this.getNodesInGroup(curGroup, graphModel) - // https://github.com/didi/LogicFlow/issues/1914 - // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y - // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理 - // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标 - // 因此这里需要增加SCALE的处理 - graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true) + onNodeMouseMove = () => + // { + // deltaX, + // deltaY, + // data, + // }: Omit, 'e' | 'position'> + { + // console.log(data,deltaX,deltaY,'111') + // const { model: curGroup, graphModel } = this.props + // const { transformModel } = graphModel + // const { SCALE_X, SCALE_Y } = transformModel + // if (data.id === curGroup.id) { + // const nodeIds = this.getNodesInGroup(curGroup, graphModel) + // // https://github.com/didi/LogicFlow/issues/1914 + // // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y + // // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理 + // // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标 + // // 因此这里需要增加SCALE的处理 + // graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true) + // } } - } graphRendered = () => { const { model } = this.props From 350269ad6c6afc6662e7658b2b6fc517f9611978 Mon Sep 17 00:00:00 2001 From: wzw Date: Wed, 13 Nov 2024 14:40:33 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(extension):=20=E3=80=90dynamic-group?= =?UTF-8?q?=E3=80=91DynamicGroup=20=E5=B5=8C=E5=A5=97=E6=97=B6=E5=AD=90?= =?UTF-8?q?=E5=88=86=E7=BB=84=E5=86=85=E5=85=83=E7=B4=A0=E8=A2=AB=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E7=A7=BB=E5=8A=A8=20n=20=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DynamicGroup 的子元素跟随移动逻辑中，获取了所有子元素，导致多次触发移动逻辑 --- packages/extension/src/dynamic-group/model.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index 5de76b622..b745a403f 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -185,24 +185,11 @@ export class DynamicGroupNodeModel extends RectNodeModel { * 获取分组内的节点 * @param groupModel */ - getNodesInGroup( - groupModel: DynamicGroupNodeModel, - graphModel: GraphModel, - ): string[] { - let nodeIds: string[] = [] + getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] { + const nodeIds: string[] = [] if (groupModel.isGroup) { forEach(Array.from(groupModel.children), (nodeId: string) => { nodeIds.push(nodeId) - - const nodeModel = graphModel.getNodeModelById(nodeId) - if (nodeModel?.isGroup) { - nodeIds = nodeIds.concat( - this.getNodesInGroup( - nodeModel as DynamicGroupNodeModel, - graphModel, - ), - ) - } }) } return nodeIds @@ -217,7 +204,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { deltaY, isIgnoreRule, ) - const nodeIds = this.getNodesInGroup(this, this.graphModel) + const nodeIds = this.getNodesInGroup(this) this.graphModel.moveNodes(nodeIds, deltaX, deltaY, isIgnoreRule) return [moveDeltaX, moveDeltaY] } From d014b7126dd0bc6d799817f89568ad57d8dfa426 Mon Sep 17 00:00:00 2001 From: wzw Date: Thu, 14 Nov 2024 09:35:33 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(extension):=20=E3=80=90selection-select?= =?UTF-8?q?=E3=80=91=E4=BF=AE=E5=A4=8D=E6=A1=86=E9=80=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E4=B8=8D=E9=80=89=E4=B8=AD=E5=88=86=E7=BB=84=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E5=86=85=E9=83=A8=E5=85=83=E7=B4=A0=E7=9A=84=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E9=81=BF=E5=85=8D=E5=9C=A8=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=90=8E=E6=8B=96=E6=8B=BD=E6=97=B6=EF=BC=8C=E4=B8=8E=E5=88=86?= =?UTF-8?q?=E7=BB=84=E7=A7=BB=E5=8A=A8=E9=80=BB=E8=BE=91=E9=87=8D=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 之前的框选组件中，不选中分组节点的 if 逻辑有问题，在使用单个分组插件时，if (!group) 这样的判断会一直触发，导致会选中所有节点 --- .../src/components/selection-select/index.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/extension/src/components/selection-select/index.ts b/packages/extension/src/components/selection-select/index.ts index 286ecb26c..2ece6436c 100644 --- a/packages/extension/src/components/selection-select/index.ts +++ b/packages/extension/src/components/selection-select/index.ts @@ -166,18 +166,20 @@ export class SelectionSelect { true, ) const { dynamicGroup, group } = this.lf.graphModel + const nonGroupedElements: typeof elements = [] elements.forEach((element) => { // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件 - if (!group || !group.getNodeGroup(element.id)) { - this.lf.selectElementById(element.id, true) + if (group && group.getNodeGroup(element.id)) { + return } - // 如果节点属于动态分组，则不不选中节点 - if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) { - this.lf.selectElementById(element.id, true) + if (dynamicGroup && dynamicGroup.getGroupByNodeId(element.id)) { + return } + this.lf.selectElementById(element.id, true) + nonGroupedElements.push(element) }) this.lf.emit('selection:selected', { - elements, + elements: nonGroupedElements, leftTopPoint: lt, rightBottomPoint: rb, }) From 2830f78a416b7a30f73e75b02979ebcb9cb2d05b Mon Sep 17 00:00:00 2001 From: boyongjiong Date: Thu, 12 Dec 2024 14:47:20 +0800 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E4=BF=AE=E5=A4=8D=20jsdoc=20?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E7=BC=BA=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/extension/src/dynamic-group/model.ts | 1 + packages/extension/src/dynamic-group/node.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index b745a403f..7f00f9103 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -194,6 +194,7 @@ export class DynamicGroupNodeModel extends RectNodeModel { } return nodeIds } + getMoveDistance( deltaX: number, deltaY: number, diff --git a/packages/extension/src/dynamic-group/node.ts b/packages/extension/src/dynamic-group/node.ts index 8d7f517f0..656531606 100644 --- a/packages/extension/src/dynamic-group/node.ts +++ b/packages/extension/src/dynamic-group/node.ts @@ -172,6 +172,7 @@ export class DynamicGroupNode< /** * 获取分组内的节点 * @param groupModel + * @param graphModel */ getNodesInGroup( groupModel: DynamicGroupNodeModel,