[1071] Support the border node resize with the label update

Bug: #1071
Signed-off-by: Laurent Fasani <[email protected]>

CHANGELOG.adoc

@@ -59,7 +59,8 @@
 - https://github.com/eclipse-sirius/sirius-components/issues/1081[#1081] [workbench] It is now possible to specify the component to display in the main area when no representation is open instead of the `OnboardArea` (which is still the default when there is no override)
 - https://github.com/eclipse-sirius/sirius-components/issues/1070[#1070] [explorer] When selecting an element or opening a representation (for example from its URL or from the onboard area), it is automatically made visible and selected in the explorer.
 - https://github.com/eclipse-sirius/sirius-components/issues/919[#919] [diagram] Support the parent container resize for the border nodes on back-end
-- https://github.com/eclipse-sirius/sirius-components/issues/1071[#1071] [diagram] Add a label for the border nodes.
+- https://github.com/eclipse-sirius/sirius-components/issues/1071[#1071] [diagram] Add a label for the border nodes
+- https://github.com/eclipse-sirius/sirius-components/issues/1071[#1071] [diagram] Improve the resizing of the border nodes
 
 === New features
 

backend/sirius-components-diagrams-layout/src/main/java/org/eclipse/sirius/components/diagrams/layout/incremental/provider/BorderNodeLabelPositionProvider.java

@@ -17,6 +17,7 @@
 import org.eclipse.sirius.components.diagrams.Position;
 import org.eclipse.sirius.components.diagrams.events.IDiagramEvent;
 import org.eclipse.sirius.components.diagrams.events.MoveEvent;
+import org.eclipse.sirius.components.diagrams.events.ResizeEvent;
 import org.eclipse.sirius.components.diagrams.layout.incremental.data.LabelLayoutData;
 import org.eclipse.sirius.components.diagrams.layout.incremental.data.NodeLayoutData;
 import org.eclipse.sirius.components.diagrams.layout.incremental.utils.RectangleSide;
@@ -32,15 +33,22 @@ public void updateLabelPosition(Optional<IDiagramEvent> optionalDiagramElementEv
         LabelLayoutData label = borderNodeLayoutData.getLabel();
         if (label != null) {
             // @formatter:off
-            Boolean isBorderNodeMoved = optionalDiagramElementEvent
+            boolean isBorderNodeMoved = optionalDiagramElementEvent
                     .filter(MoveEvent.class::isInstance)
                     .map(MoveEvent.class::cast)
                     .map(MoveEvent::getNodeId)
                     .filter(borderNodeLayoutData.getId()::equals)
                     .isPresent();
+
+            boolean isBorderNodeResized = optionalDiagramElementEvent
+                    .filter(ResizeEvent.class::isInstance)
+                    .map(ResizeEvent.class::cast)
+                    .map(ResizeEvent::getNodeId)
+                    .filter(borderNodeLayoutData.getId()::equals)
+                    .isPresent();
             // @formatter:on
 
-            if (borderNodeLayoutData.getLabel().getPosition().getX() == -1 || Boolean.TRUE.equals(isBorderNodeMoved)) {
+            if (borderNodeLayoutData.getLabel().getPosition().getX() == -1 || isBorderNodeMoved || isBorderNodeResized) {
                 if (RectangleSide.NORTH.equals(side)) {
                     label.setPosition(Position.at(-label.getTextBounds().getSize().getWidth(), -label.getTextBounds().getSize().getHeight()));
                 } else if (RectangleSide.EAST.equals(side)) {

backend/sirius-components-diagrams-layout/src/test/java/org/eclipse/sirius/components/diagrams/layout/incremental/BorderNodePositionTests.java

@@ -176,6 +176,30 @@ public void testResizeParentNodeSouthEastEvent() {
         this.checkBorderNodeLabel(borderNodes.get(0).getLabel(), BORDER_NODE_LABEL_TEXT_POSITION, BORDER_NODE_LABEL_TEXT_BOUNDS);
     }
 
+    @Test
+    public void testResizeBorderNodeEvent() {
+        DiagramLayoutData initializeDiagram = this.initializeDiagram();
+        List<NodeLayoutData> borderNodes = initializeDiagram.getChildrenNodes().get(0).getBorderNodes();
+
+        NodeSizeProvider nodeSizeProvider = new NodeSizeProvider(new ImageSizeProvider());
+        IncrementalLayoutEngine incrementalLayoutEngine = new IncrementalLayoutEngine(nodeSizeProvider);
+
+        // decrease the height of the west border node
+        NodeLayoutData westBorderNode = borderNodes.get(6);
+        Optional<IDiagramEvent> resizeEvent = Optional
+                .of(new ResizeEvent(westBorderNode.getId(), ZERO_POSITION, Size.of(DEFAULT_BORDER_NODE_SIZE.getWidth(), DEFAULT_BORDER_NODE_SIZE.getHeight() / 2)));
+        incrementalLayoutEngine.layout(resizeEvent, initializeDiagram, new LayoutConfiguratorRegistry(List.of()).getDefaultLayoutConfigurator());
+
+        this.checkBorderNodeLabel(westBorderNode.getLabel(), Position.at(BORDER_NODE_LABEL_TEXT_POSITION.getX(), BORDER_NODE_LABEL_TEXT_POSITION.getY() / 2), BORDER_NODE_LABEL_TEXT_BOUNDS);
+
+        // increase the width and the height of the east border node
+        NodeLayoutData eastBorderNode = borderNodes.get(3);
+        resizeEvent = Optional.of(new ResizeEvent(eastBorderNode.getId(), ZERO_POSITION, Size.of(DEFAULT_BORDER_NODE_SIZE.getWidth() + 10, DEFAULT_BORDER_NODE_SIZE.getHeight() + 10)));
+        incrementalLayoutEngine.layout(resizeEvent, initializeDiagram, new LayoutConfiguratorRegistry(List.of()).getDefaultLayoutConfigurator());
+
+        this.checkBorderNodeLabel(eastBorderNode.getLabel(), Position.at(eastBorderNode.getSize().getWidth(), eastBorderNode.getSize().getHeight()), BORDER_NODE_LABEL_TEXT_BOUNDS);
+    }
+
     @Test
     public void testResizeParentNodeNorthWestEvent() {
         DiagramLayoutData initializeDiagram = this.initializeDiagram();

frontend/src/diagram/sprotty/resize/siriusResize.ts

@@ -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
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { decorate, inject } from 'inversify';
-import { Command, CommandExecutionContext, CommandReturn, SModelElement, SNode, TYPES } from 'sprotty';
+import { Command, CommandExecutionContext, CommandReturn, SModelElement, SNode, SPort, TYPES } from 'sprotty';
 import { Action, Dimension, Point } from 'sprotty-protocol';
 
 export class ResizeAction implements Action {
@@ -34,7 +34,7 @@ export class SiriusResizeCommand extends Command {
     const index = context.root.index;
     const elementResize: ElementResize = this.action.resize;
     const element: SModelElement = index.getById(elementResize.elementId);
-    if (this.isNode(element)) {
+    if (this.isNode(element) || this.isPort(element)) {
       const positionDelta: Point = {
         x: elementResize.newPosition.x - element.position.x,
         y: elementResize.newPosition.y - element.position.y,
@@ -47,35 +47,37 @@ export class SiriusResizeCommand extends Command {
       let validSize = elementResize.newSize;
       let validPosition = elementResize.newPosition;
 
-      //If the element size is decreased, we compute a valid size and position to make sure that all children are still within the new bounds.
-      if (
-        element.children.filter((child) => this.isNode(child)).length > 0 &&
-        this.sizeDecreased(sizeDelta, positionDelta)
-      ) {
-        const [minTopLeft, maxBottomRight] = this.getChildrenLimits(element);
-        //A positive position delta means that the resize from the NW has been done toward the center of the figure (the size is decreased)
-        if (positionDelta.x > 0 || positionDelta.y > 0) {
-          const previousValidPositionDelta = validPositionDelta;
-          validPositionDelta = this.computeValidPositionDelta(validPositionDelta, minTopLeft);
-          validPosition = {
-            x: element.position.x + validPositionDelta.x,
-            y: element.position.y + validPositionDelta.y,
-          };
-          //If the valid position has been modified, we need to modify the size
-          const positionCorrection = {
-            x: previousValidPositionDelta.x - validPositionDelta.x,
-            y: previousValidPositionDelta.y - validPositionDelta.y,
-          };
-          validSize = {
-            width: validSize.width + positionCorrection.x,
-            height: validSize.height + positionCorrection.y,
-          };
-        }
-        if (sizeDelta.x < 0 || sizeDelta.y < 0) {
-          validSize = this.computeValidSize(validSize, maxBottomRight);
+      if (this.isNode(element)) {
+        //If the element size is decreased, we compute a valid size and position to make sure that all children are still within the new bounds.
+        if (
+          element.children.filter((child) => this.isNode(child)).length > 0 &&
+          this.sizeDecreased(sizeDelta, positionDelta)
+        ) {
+          const [minTopLeft, maxBottomRight] = this.getChildrenLimits(element);
+          //A positive position delta means that the resize from the NW has been done toward the center of the figure (the size is decreased)
+          if (positionDelta.x > 0 || positionDelta.y > 0) {
+            const previousValidPositionDelta = validPositionDelta;
+            validPositionDelta = this.computeValidPositionDelta(validPositionDelta, minTopLeft);
+            validPosition = {
+              x: element.position.x + validPositionDelta.x,
+              y: element.position.y + validPositionDelta.y,
+            };
+            //If the valid position has been modified, we need to modify the size
+            const positionCorrection = {
+              x: previousValidPositionDelta.x - validPositionDelta.x,
+              y: previousValidPositionDelta.y - validPositionDelta.y,
+            };
+            validSize = {
+              width: validSize.width + positionCorrection.x,
+              height: validSize.height + positionCorrection.y,
+            };
+          }
+          if (sizeDelta.x < 0 || sizeDelta.y < 0) {
+            validSize = this.computeValidSize(validSize, maxBottomRight);
+          }
         }
+        this.updateChildrenRelativePosition(element, validPositionDelta);
       }
-      this.updateChildrenRelativePosition(element, validPositionDelta);
       element.size = validSize;
       element.position = validPosition;
     }
@@ -139,6 +141,9 @@ export class SiriusResizeCommand extends Command {
   private isNode(element: SModelElement): element is SNode {
     return element instanceof SNode;
   }
+  private isPort(element: SModelElement): element is SPort {
+    return element instanceof SPort;
+  }
   undo(context: CommandExecutionContext): CommandReturn {
     return context.root;
   }

frontend/src/diagram/sprotty/siriusDragAndDropMouseListener.ts

@@ -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
@@ -10,7 +10,15 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { findParentByFeature, isViewport, MoveMouseListener, SModelElement, SNode, SPort } from 'sprotty';
+import {
+  findParentByFeature,
+  isViewport,
+  MoveMouseListener,
+  SConnectableElement,
+  SModelElement,
+  SNode,
+  SPort,
+} from 'sprotty';
 import { Action, Dimension, Point } from 'sprotty-protocol';
 import { Bounds } from 'sprotty-protocol/';
 import { ElementResize, ResizeAction } from './resize/siriusResize';
@@ -28,7 +36,7 @@ const PORT_OFFSET = 8;
 export class SiriusDragAndDropMouseListener extends MoveMouseListener {
   startResizePosition: Point | undefined;
   selector: String;
-  intialTarget: SNode;
+  intialTarget: SConnectableElement;
   startingPosition: Point;
   startingSize: Dimension;
 
@@ -39,7 +47,7 @@ export class SiriusDragAndDropMouseListener extends MoveMouseListener {
       //if the click is perfomed on a resize selector, we switch from the move mode to resize mode.
       const selector = this.isResizeSelector(event);
       if (selector) {
-        if (this.isSNode(target)) {
+        if (this.isSNode(target) || this.isSPort(target)) {
           this.selector = selector;
           this.startResizePosition = this.startDragPosition;
           //Deactivate the move