diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index bb758ee47c..a8ee0b4b04 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -130,6 +130,7 @@ It uses our algorithm instead of elk.js to perform the arrange-all. Make some border node transparent when the node is in a list node in the convert engine. - https://github.com/eclipse-sirius/sirius-web/issues/2646[#2646] [diagram] Fix an issue where the palette was re rendering too much. - https://github.com/eclipse-sirius/sirius-web/issues/2685[#2685] [diagram] Fix direct edit of edge labels with F2. +- https://github.com/eclipse-sirius/sirius-web/issues/2689[#2689] [diagram] Fix the borderNode moves that is no longer anchored to its parent. === New Features diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts index 638da7a89e..2294426f06 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts @@ -26,6 +26,7 @@ import { IconLabelNodeConverterHandler } from './IconLabelNodeConverterHandler'; import { ImageNodeConverterHandler } from './ImageNodeConverterHandler'; import { ListNodeConverterHandler } from './ListNodeConverterHandler'; import { RectangleNodeConverterHandler } from './RectangleNodeConverterHandler'; +import { computeBorderNodeExtents } from '../renderer/layout/layoutBorderNodes'; const nodeDepth = (nodeId2node: Map, nodeId: string): number => { const node = nodeId2node.get(nodeId); @@ -218,6 +219,7 @@ export const convertDiagram = ( edges, }; layoutHandles(rawDiagram); + computeBorderNodeExtents(rawDiagram.nodes); return { metadata: { diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layoutBorderNodes.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layoutBorderNodes.ts index 885dee9ca8..d970f27e7f 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layoutBorderNodes.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layoutBorderNodes.ts @@ -13,6 +13,7 @@ import { CoordinateExtent, Node } from 'reactflow'; import { BorderNodePositon, NodeData } from '../DiagramRenderer.types'; import { borderNodeOffset } from './layoutParams'; +import { DiagramNodeType } from '../node/NodeTypes.types'; export const isEastBorderNode = (borderNode: Node): boolean => { return borderNode.data.isBorderNode && borderNode.data.borderNodePosition === BorderNodePositon.EAST; @@ -28,15 +29,26 @@ export const isSouthBorderNode = (borderNode: Node): boolean => { }; export const getBorderNodeExtent = ( - nodeParent: Node, - borderNorde: Node + parentNode: Node, + borderNode: Node ): CoordinateExtent | 'parent' => { let coordinateExtent: CoordinateExtent | 'parent' = 'parent'; - if (nodeParent.width && nodeParent.height && borderNorde.height && borderNorde.width) { + if (parentNode.width && parentNode.height && borderNode.height && borderNode.width) { coordinateExtent = [ - [0 - borderNorde.width + borderNodeOffset, 0 - borderNorde.height + borderNodeOffset], - [nodeParent.width - borderNodeOffset, nodeParent.height - borderNodeOffset], + [0 - borderNode.width + borderNodeOffset, 0 - borderNode.height + borderNodeOffset], + [parentNode.width - borderNodeOffset, parentNode.height - borderNodeOffset], ]; } return coordinateExtent; }; + +export const computeBorderNodeExtents = (nodes: Node[]): void => { + nodes + .filter((node) => node.data.isBorderNode) + .forEach((borderNode) => { + const parentNode = nodes.find((node) => node.id === borderNode.parentNode); + if (parentNode) { + borderNode.extent = getBorderNodeExtent(parentNode, borderNode); + } + }); +};