From c54871ce528ae02c93823f9af12e3c09ffd3835a Mon Sep 17 00:00:00 2001 From: Laurent Fasani Date: Fri, 25 Feb 2022 12:48:08 +0100 Subject: [PATCH] [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: https://github.com/eclipse-sirius/sirius-components/issues/781 Signed-off-by: Laurent Fasani --- CHANGELOG.adoc | 2 ++ .../diagrams/layout/ELKLayoutedDiagramProvider.java | 10 ++++++++-- .../provider/NodeLabelPositionProvider.java | 6 ++++-- .../components/diagrams/components/LabelType.java | 3 ++- .../components/diagrams/components/NodeComponent.java | 6 ++++-- frontend/src/diagram/sprotty/DependencyInjection.ts | 2 ++ frontend/src/diagram/sprotty/views/LabelView.tsx | 4 ++++ 7 files changed, 26 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8b3887303d9..96a38c0c2e9 100644 --- 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/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/ELKLayoutedDiagramProvider.java b/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/ELKLayoutedDiagramProvider.java index b55fafba69b..db43704b99c 100644 --- a/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/ELKLayoutedDiagramProvider.java +++ b/backend/sirius-components-diagrams-layout/src/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 childNodes = this.getLayoutedNodes(node.getChildNodes(), id2ElkGraphElements); List borderNodes = this.getLayoutedNodes(node.getBorderNodes(), id2ElkGraphElements); + // @formatter:off return Node.newNode(node) .label(label) .size(size) diff --git a/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/incremental/provider/NodeLabelPositionProvider.java b/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/incremental/provider/NodeLabelPositionProvider.java index 59d71555e9a..ab34a46cefe 100644 --- a/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/incremental/provider/NodeLabelPositionProvider.java +++ b/backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/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/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/LabelType.java b/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/LabelType.java index 45ea94141f5..8a7323a86d1 100644 --- a/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/LabelType.java +++ b/backend/sirius-components-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/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/NodeComponent.java b/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/NodeComponent.java index fa64a054f87..24747a8bfd1 100644 --- a/backend/sirius-components-diagrams/src/main/java/org/eclipse/sirius/components/diagrams/components/NodeComponent.java +++ b/backend/sirius-components-diagrams/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 index 62a079a7fb3..0c92ab45ddf 100644 --- 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 index c88768680db..862012bb590 100644 --- 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 = (