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/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, }) diff --git a/packages/extension/src/dynamic-group/model.ts b/packages/extension/src/dynamic-group/model.ts index c38fbfbb2..7f00f9103 100644 --- a/packages/extension/src/dynamic-group/model.ts +++ b/packages/extension/src/dynamic-group/model.ts @@ -181,6 +181,35 @@ export class DynamicGroupNodeModel extends RectNodeModel { return data } + /** + * 获取分组内的节点 + * @param groupModel + */ + getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] { + const nodeIds: string[] = [] + if (groupModel.isGroup) { + forEach(Array.from(groupModel.children), (nodeId: string) => { + nodeIds.push(nodeId) + }) + } + 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.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..656531606 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 @@ -169,6 +172,7 @@ export class DynamicGroupNode< /** * 获取分组内的节点 * @param groupModel + * @param graphModel */ getNodesInGroup( groupModel: DynamicGroupNodeModel,