From 5bf84f8b7f83bb35b2d710eaba18fc8f64e0c356 Mon Sep 17 00:00:00 2001 From: Guillaume Coutable Date: Mon, 30 Oct 2023 19:56:04 +0100 Subject: [PATCH] [2483] Take the header into account in the reactflow layout Bug: https://github.com/eclipse-sirius/sirius-web/issues/2483 Signed-off-by: Guillaume Coutable --- .../src/converter/convertDiagram.ts | 12 +++++++++++- .../src/renderer/DiagramRenderer.types.ts | 1 + .../src/renderer/layout/ListNodeLayoutHandler.ts | 6 +++--- .../renderer/layout/RectangleNodeLayoutHandler.ts | 12 ++++++++++-- .../src/renderer/layout/layoutNode.ts | 11 +++++------ .../src/renderer/node/RectangularNode.tsx | 1 - .../CDPackageNodeDescriptionProvider.java | 1 + .../ClassNodeDescriptionProvider.java | 4 ++-- .../ComponentNodeDescriptionProvider.java | 1 + .../PackageNodeDescriptionProvider.java | 1 + .../OperationalActorNodeDescriptionProvider.java | 1 + .../OperationalEntityNodeDescriptionProvider.java | 1 + .../OperationalPerimeterNodeDescriptionProvider.java | 1 + 13 files changed, 38 insertions(+), 15 deletions(-) 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 65dd80f1c9..7a4868a133 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 @@ -75,7 +75,13 @@ const toRectangularNode = ( data.label = { id: insideLabel.id, text: insideLabel.text, + isHeader: insideLabel.isHeader, style: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + padding: '8px 16px', textAlign: 'center', ...convertLabelStyle(labelStyle), }, @@ -85,6 +91,9 @@ const toRectangularNode = ( const alignement = AlignmentMap[insideLabel.insideLabelLocation]; if (alignement.isPrimaryVerticalAlignment) { if (alignement.primaryAlignment === 'TOP') { + if (data.label.isHeader) { + data.label.style.borderBottom = `${style.borderSize}px ${style.borderStyle} ${style.borderColor}`; + } data.style = { ...data.style, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }; } if (alignement.secondaryAlignment === 'CENTER') { @@ -212,6 +221,7 @@ const toListNode = ( id: insideLabel.id, text: insideLabel.text, iconURL: labelStyle.iconURL, + isHeader: insideLabel.isHeader, style: { display: 'flex', flexDirection: 'row', @@ -226,7 +236,7 @@ const toListNode = ( const alignement = AlignmentMap[insideLabel.insideLabelLocation]; if (alignement.isPrimaryVerticalAlignment) { if (alignement.primaryAlignment === 'TOP') { - if (insideLabel.isHeader) { + if (data.label.isHeader) { data.label.style.borderBottom = `${style.borderSize}px ${style.borderStyle} ${style.borderColor}`; } data.style = { ...data.style, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }; diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts index 7c7e3aef98..e2545d5305 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts @@ -82,4 +82,5 @@ export interface Label { text: string; iconURL: string[]; style: React.CSSProperties; + isHeader?: boolean; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts index 7fd61cc064..0ede5c5a59 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts @@ -81,6 +81,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler { const nodeIndex = findNodeIndex(visibleNodes, node.id); const labelElement = document.getElementById(`${node.id}-label-${nodeIndex}`); + const withHeader = node.data.label?.isHeader; const borderNodes = directChildren.filter((node) => node.data.isBorderNode); const directNodesChildren = directChildren.filter((child) => !child.data.isBorderNode); @@ -103,7 +104,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler { directNodesChildren.forEach((child, index) => { child.position = { x: borderWidth, - y: borderWidth + (labelElement?.getBoundingClientRect().height ?? 0), + y: borderWidth + (withHeader ? labelElement?.getBoundingClientRect().height ?? 0 : 0), }; const previousSibling = directNodesChildren[index - 1]; if (previousSibling) { @@ -116,8 +117,7 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler { const labelOnlyWidth = labelElement?.getBoundingClientRect().width ?? 0; const nodeWidth = Math.max(childrenContentBox.width, labelOnlyWidth) + borderWidth * 2; - const directChildrenAwareNodeHeight = - (labelElement?.getBoundingClientRect().height ?? 0) + childrenContentBox.height + borderWidth * 2; + const directChildrenAwareNodeHeight = childrenContentBox.y + childrenContentBox.height + borderWidth; const eastBorderNodeFootprintHeight = getEastBorderNodeFootprintHeight(visibleNodes, borderNodes, previousDiagram); const westBorderNodeFootprintHeight = getWestBorderNodeFootprintHeight(visibleNodes, borderNodes, previousDiagram); diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/RectangleNodeLayoutHandler.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/RectangleNodeLayoutHandler.ts index 66a5b46ea0..68f86b544a 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/RectangleNodeLayoutHandler.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/RectangleNodeLayoutHandler.ts @@ -68,6 +68,7 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler node.data.isBorderNode); const directNodesChildren = directChildren.filter((child) => !child.data.isBorderNode); @@ -79,10 +80,17 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler { return Math.max(nodeHeight ?? -Infinity, defaultHeight); }; +// WARN: should be moved in RectangularNodeLayoutHandler.ts export const getChildNodePosition = ( allVisibleNodes: Node[], child: Node, labelElement: HTMLElement | null, + withHeader: boolean, borderWidth: number, previousSibling?: Node ) => { @@ -85,14 +87,11 @@ export const getChildNodePosition = ( .reduce((a, b) => Math.max(a, b), 0); if (!previousSibling) { + const headerFootprint = withHeader ? labelElement?.getBoundingClientRect().height ?? 0 : 0; + return { x: rectangularNodePadding + borderWidth + maxWestBorderNodeWidth, - y: - borderWidth + - rectangularNodePadding + - maxNorthBorderNodeHeight + - (labelElement?.getBoundingClientRect().height ?? 0) + - rectangularNodePadding, + y: borderWidth + headerFootprint + rectangularNodePadding + maxNorthBorderNodeHeight, }; } else { const previousSiblingsMaxEastBorderNodeWidth = getChildren(previousSibling, allVisibleNodes) diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx index 0ffe81543f..12ed210967 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx @@ -29,7 +29,6 @@ const rectangularNodeStyle = ( faded: boolean ): React.CSSProperties => { const rectangularNodeStyle: React.CSSProperties = { - padding: '8px', width: '100%', height: '100%', opacity: faded ? '0.4' : '', diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/classdiagram/CDPackageNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/classdiagram/CDPackageNodeDescriptionProvider.java index 67ebf8c861..888515ca77 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/classdiagram/CDPackageNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/classdiagram/CDPackageNodeDescriptionProvider.java @@ -45,6 +45,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_blue_7")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_blue_3")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + nodeStyle.setWithHeader(true); var builder = new PapayaViewBuilder(); var domainType = builder.domainType(builder.entity("Package")); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ClassNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ClassNodeDescriptionProvider.java index 44a0d9fdae..2795f534dd 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ClassNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ClassNodeDescriptionProvider.java @@ -47,7 +47,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_blue")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_blue")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_white")); - nodeStyle.setWithHeader(false); + nodeStyle.setWithHeader(true); var nodeDescription = new PapayaViewBuilder().createNodeDescription("Class"); nodeDescription.setSemanticCandidatesExpression("aql:self.types"); @@ -70,7 +70,7 @@ public NodeDescription create() { abstractNodeStyle.setColor(this.colorProvider.getColor("color_green")); abstractNodeStyle.setBorderColor(this.colorProvider.getColor("border_green")); abstractNodeStyle.setLabelColor(this.colorProvider.getColor("label_white")); - abstractNodeStyle.setWithHeader(false); + abstractNodeStyle.setWithHeader(true); var abstractConditionalNodeStyle = DiagramFactory.eINSTANCE.createConditionalNodeStyle(); abstractConditionalNodeStyle.setCondition("aql:self.abstract"); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ComponentNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ComponentNodeDescriptionProvider.java index d51e9e555a..9279db0d98 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ComponentNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/ComponentNodeDescriptionProvider.java @@ -43,6 +43,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_blue_4")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_blue_4")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + nodeStyle.setWithHeader(true); var nodeDescription = new PapayaViewBuilder().createNodeDescription("Component"); nodeDescription.setSemanticCandidatesExpression("aql:self.components"); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/PackageNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/PackageNodeDescriptionProvider.java index abe6a75215..9e8011abc4 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/PackageNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/logicalarchitecture/PackageNodeDescriptionProvider.java @@ -45,6 +45,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_blue_7")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_blue_3")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + nodeStyle.setWithHeader(true); var nodeDescription = new PapayaViewBuilder().createNodeDescription("Package"); nodeDescription.setSemanticCandidatesExpression("aql:self.eContents()"); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalActorNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalActorNodeDescriptionProvider.java index 780ad8376d..1dc4675062 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalActorNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalActorNodeDescriptionProvider.java @@ -42,6 +42,7 @@ public NodeDescription create() { operationalActorNodeStyle.setColor(this.colorProvider.getColor("color_gray")); operationalActorNodeStyle.setBorderColor(this.colorProvider.getColor("border_gray")); operationalActorNodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + operationalActorNodeStyle.setWithHeader(true); var operationalActorEmptyNodeStyle = DiagramFactory.eINSTANCE.createImageNodeStyleDescription(); operationalActorEmptyNodeStyle.setShape("4d9a22c0-dc36-31c9-bb6a-c18c66b51d93"); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalEntityNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalEntityNodeDescriptionProvider.java index adb3782260..69ad31fa7a 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalEntityNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalEntityNodeDescriptionProvider.java @@ -42,6 +42,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_gray")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_gray")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + nodeStyle.setWithHeader(true); var builder = new PapayaViewBuilder(); diff --git a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalPerimeterNodeDescriptionProvider.java b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalPerimeterNodeDescriptionProvider.java index 798db54213..eaa25397ac 100644 --- a/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalPerimeterNodeDescriptionProvider.java +++ b/packages/sirius-web/backend/sirius-web-sample-application/src/main/java/org/eclipse/sirius/web/sample/papaya/view/operationalanalysis/OperationalPerimeterNodeDescriptionProvider.java @@ -43,6 +43,7 @@ public NodeDescription create() { nodeStyle.setColor(this.colorProvider.getColor("color_gray_2")); nodeStyle.setBorderColor(this.colorProvider.getColor("border_gray_2")); nodeStyle.setLabelColor(this.colorProvider.getColor("label_black")); + nodeStyle.setWithHeader(true); var nodeDescription = new PapayaViewBuilder().createNodeDescription("OperationalPerimeter"); nodeDescription.setSemanticCandidatesExpression("aql:self.operationalPerimeters");