[781] Update the way the centered node label position is done

The changes are about the node label center position. There is in fact no visible change but there are technical changes to prepare the following commits when we will have a label on many lines: * the label position given by the server is the horizontal center of the node instead of the left position of the label * consequently the LabelView is updated to display the text with 'text-anchor': 'middle' instead of the default 'text-anchor': 'start' Bug: #781 Signed-off-by: Laurent Fasani <[email protected]>
eclipse-sirius · Mar 2, 2022 · c54871c · c54871c
1 parent c4ebc5e
commit c54871c
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -64,6 +64,8 @@
 - https://github.com/eclipse-sirius/sirius-components/issues/1018[#1018] [compatibility] Add support for the `Navigation` model operation from Sirius RCP
 - https://github.com/eclipse-sirius/sirius-components/issues/1026[#1026] [compatibility] Add support for `OperationAction`. The action are converted to regular tools available in the palette of the frontend
 - https://github.com/eclipse-sirius/sirius-components/issues/937[#937] [diagram] Add the ability to export diagram as SVG images
+- https://github.com/eclipse-sirius/sirius-components/issues/781[#781] [diagram] Add support for multiline labels
+
 
 
 == v2022.01.0

diff --git a/...c/main/java/org/eclipse/sirius/components/diagrams/layout/ELKLayoutedDiagramProvider.java b/...c/main/java/org/eclipse/sirius/components/diagrams/layout/ELKLayoutedDiagramProvider.java
@@ -76,11 +76,17 @@ private Node getLayoutedNode(Node node, ElkConnectableShape elkConnectableShape,
         Size size = Size.of(elkConnectableShape.getWidth(), elkConnectableShape.getHeight());
         Position position = Position.at(elkConnectableShape.getX(), elkConnectableShape.getY());
 
-        // @formatter:off
-        Label label = this.getLayoutedLabel(node.getLabel(), id2ElkGraphElements, 0, 0);
+        double xOffSet = 0;
+        if (!node.isBorderNode()) {
+            // The label is positioned at the center of the node and the front-end will apply a "'text-anchor':
+            // 'middle'" property.
+            xOffSet = node.getLabel().getSize().getWidth() / 2;
+        }
+        Label label = this.getLayoutedLabel(node.getLabel(), id2ElkGraphElements, xOffSet, 0);
 
         List<Node> childNodes = this.getLayoutedNodes(node.getChildNodes(), id2ElkGraphElements);
         List<Node> borderNodes = this.getLayoutedNodes(node.getBorderNodes(), id2ElkGraphElements);
+        // @formatter:off
         return Node.newNode(node)
                 .label(label)
                 .size(size)

diff --git a/...pse/sirius/components/diagrams/layout/incremental/provider/NodeLabelPositionProvider.java b/...pse/sirius/components/diagrams/layout/incremental/provider/NodeLabelPositionProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021 THALES GLOBAL SERVICES.
+ * Copyright (c) 2021, 2022 THALES GLOBAL SERVICES.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -79,7 +79,9 @@ private double getHorizontalPosition(NodeLayoutData node, LabelLayoutData label)
                 }
                 break;
             case H_CENTER:
-                x = (node.getSize().getWidth() - label.getTextBounds().getSize().getWidth()) / 2;
+                // The label is positioned at the center of the node and the front-end will apply a "'text-anchor':
+                // 'middle'" property.
+                x = node.getSize().getWidth() / 2;
                 break;
             case H_RIGHT:
                 if (outside) {

diff --git a/...s-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/LabelType.java b/...s-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/LabelType.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021 Obeo.
+ * Copyright (c) 2021,2022 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -19,6 +19,7 @@
  */
 public enum LabelType {
 
+    OUTSIDE("label:outside"), //$NON-NLS-1$
     INSIDE_CENTER("label:inside-center"), //$NON-NLS-1$
     OUTSIDE_CENTER("label:outside-center"), //$NON-NLS-1$
     EDGE_BEGIN("label:edge-begin"), //$NON-NLS-1$

diff --git a/...agrams/src/main/java/org/eclipse/sirius/components/diagrams/components/NodeComponent.java b/...agrams/src/main/java/org/eclipse/sirius/components/diagrams/components/NodeComponent.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2021 Obeo and others.
+ * Copyright (c) 2019, 2022 Obeo and others.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -136,7 +136,9 @@ private Element doRender(VariableManager nodeVariableManager, String targetObjec
         nodeVariableManager.put(LabelDescription.OWNER_ID, nodeId);
 
         LabelType nodeLabelType = LabelType.INSIDE_CENTER;
-        if (NodeType.NODE_IMAGE.equals(type)) {
+        if (containmentKind == NodeContainmentKind.BORDER_NODE) {
+            nodeLabelType = LabelType.OUTSIDE;
+        } else if (NodeType.NODE_IMAGE.equals(type)) {
             nodeLabelType = LabelType.OUTSIDE_CENTER;
         }
 

diff --git a/frontend/src/diagram/sprotty/DependencyInjection.ts b/frontend/src/diagram/sprotty/DependencyInjection.ts
@@ -128,6 +128,8 @@ const siriusWebContainerModule = new ContainerModule((bind, unbind, isBound, reb
   // @ts-ignore
   configureModelElement(context, 'label:outside-center', SEditableLabel, LabelView);
   // @ts-ignore
+  configureModelElement(context, 'label:outside', SEditableLabel, LabelView);
+  // @ts-ignore
   configureModelElement(context, 'label:edge-begin', SEditableLabel, LabelView);
   // @ts-ignore
   configureModelElement(context, 'label:edge-center', SEditableLabel, LabelView);

diff --git a/frontend/src/diagram/sprotty/views/LabelView.tsx b/frontend/src/diagram/sprotty/views/LabelView.tsx
@@ -31,6 +31,7 @@ export class LabelView extends SLabelView {
       'font-weight': 'normal',
       'font-style': 'normal',
       'text-decoration': 'none',
+      'text-anchor': 'start',
     };
     if (bold) {
       styleObject['font-weight'] = 'bold';
@@ -48,6 +49,9 @@ export class LabelView extends SLabelView {
         styleObject['text-decoration'] += ' line-through';
       }
     }
+    if (label.type?.includes('center')) {
+      styleObject['text-anchor'] = 'middle';
+    }
     const iconVerticalOffset = -12;
     const vnode = (
       <g attrs-data-testid={`Label - ${label.text}`}>