[2480] Merge Rectangle and Image nodes into FreeFormNode

Bug: #2480
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -51,6 +51,7 @@ Its body operations are now bind on set/add instead of click.
 - https://github.com/eclipse-sirius/sirius-web/issues/2975[#2975] [diagram] Fix issues with ReactFlow pane events that were slowing down the application.
 - https://github.com/eclipse-sirius/sirius-web/issues/2988[#2988] [diagram] Fix an issue with ReactFlow OnNodesChange event that were slowing down the application.
 - https://github.com/eclipse-sirius/sirius-web/issues/2978[#2978] [diagram] Fix issues with ReactFlow edge and drag events that were slowing down the application.
+- https://github.com/eclipse-sirius/sirius-web/issues/2480[#2480] [diagram] Merge the rectangle node and the image node into FreeFormNode.
 
 == v2024.1.0
 
@@ -204,7 +205,7 @@ The size of nodes that do not have been resized manually tries to fit the node d
 - https://github.com/eclipse-sirius/sirius-web/issues/2644[#2644] [diagram] Highlight nodes on hover in React Flow diagrams
 - https://github.com/eclipse-sirius/sirius-web/issues/2766[#2766] [tree] Tree representations (including the explorer) now support dragging any kind of element (not just semantic elements).
 It is the responsibility of the drop targets (e.g. a diagram) to validate the dropped element(s) type and ignore the one it does not support.
-- https://github.com/eclipse-sirius/sirius-web/issues/2772[#2772] Improve performance of the Palette
+- https://github.com/eclipse-sirius/sirius-web/issues/2772[#2772] [diagram] Improve the Palette performance.
 - https://github.com/eclipse-sirius/sirius-web/issues/2679[#2679] [diagram] When editing a label, place input element closer to the label's location (centered).
 - https://github.com/eclipse-sirius/sirius-web/issues/2804[#2804] [sirius-web] Add the ability to declare custom nodes while using the `sirius-web-application` frontend package.
 - https://github.com/eclipse-sirius/sirius-web/issues/2718[#2718] Replacing useNodes and useEdges by useReactFlow to improve performances.

packages/diagrams/frontend/sirius-components-diagrams/src/converter/ImageNodeConverter.ts

@@ -17,12 +17,12 @@ import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
 import { GQLImageNodeStyle, GQLNode, GQLNodeStyle, GQLViewModifier } from '../graphql/subscription/nodeFragment.types';
 import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
-import { ImageNodeData } from '../renderer/node/ImageNode.types';
+import { FreeFormNodeData } from '../renderer/node/FreeFormNode.types';
 import { GQLDiagramDescription } from '../representation/DiagramRepresentation.types';
 import { IConvertEngine, INodeConverter } from './ConvertEngine.types';
-import { AlignmentMap } from './convertDiagram.types';
 import { convertHandles } from './convertHandles';
 import { convertLabelStyle, convertOutsideLabels } from './convertLabel';
+import { convertLineStyle } from './convertDiagram';
 
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
@@ -33,7 +33,7 @@ const toImageNode = (
   nodeDescription: GQLNodeDescription | undefined,
   isBorderNode: boolean,
   gqlEdges: GQLEdge[]
-): Node<ImageNodeData> => {
+): Node<FreeFormNodeData> => {
   const {
     targetObjectId,
     targetObjectLabel,
@@ -55,15 +55,20 @@ const toImageNode = (
   const isNew = gqlNodeLayoutData === undefined;
   const resizedByUser = gqlNodeLayoutData?.resizedByUser ?? false;
 
-  const data: ImageNodeData = {
+  const data: FreeFormNodeData = {
     targetObjectId,
     targetObjectLabel,
     targetObjectKind,
     descriptionId,
     insideLabel: null,
     outsideLabels: convertOutsideLabels(outsideLabels),
     imageURL: style.imageURL,
-    style: {},
+    style: {
+      borderColor: style.borderColor,
+      borderRadius: style.borderRadius,
+      borderWidth: style.borderSize,
+      borderStyle: convertLineStyle(style.borderStyle),
+    },
     faded: state === GQLViewModifier.Faded,
     pinned,
     nodeDescription,
@@ -79,39 +84,29 @@ const toImageNode = (
   };
 
   if (insideLabel) {
-    const labelStyle = insideLabel.style;
-    data.insideLabel = {
-      id: insideLabel.id,
-      text: insideLabel.text,
-      iconURL: labelStyle.iconURL,
-      style: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '8px 16px',
-        textAlign: 'center',
-        ...convertLabelStyle(labelStyle),
+    const {
+      id,
+      text,
+      style: labelStyle,
+      style: { iconURL },
+    } = insideLabel;
+    data.outsideLabels = {
+      BOTTOM_MIDDLE: {
+        id,
+        text,
+        iconURL,
+        style: {
+          ...convertLabelStyle(labelStyle),
+          justifyContent: 'center',
+          padding: '8px 16px',
+        },
       },
-      isHeader: insideLabel.isHeader,
-      displayHeaderSeparator: insideLabel.displayHeaderSeparator,
     };
-
-    const alignement = AlignmentMap[insideLabel.insideLabelLocation];
-    if (alignement.isPrimaryVerticalAlignment) {
-      if (alignement.primaryAlignment === 'TOP') {
-        data.style = { ...data.style, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' };
-      }
-      if (alignement.secondaryAlignment === 'CENTER') {
-        data.style = { ...data.style, alignItems: 'stretch' };
-        data.insideLabel.style = { ...data.insideLabel.style, justifyContent: 'center' };
-      }
-    }
   }
 
-  const node: Node<ImageNodeData> = {
+  const node: Node<FreeFormNodeData> = {
     id,
-    type: 'imageNode',
+    type: 'freeFormNode',
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,

packages/diagrams/frontend/sirius-components-diagrams/src/converter/RectangleNodeConverter.ts

@@ -22,7 +22,7 @@ import {
 } from '../graphql/subscription/nodeFragment.types';
 import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
-import { RectangularNodeData } from '../renderer/node/RectangularNode.types';
+import { FreeFormNodeData } from '../renderer/node/FreeFormNode.types';
 import { GQLDiagramDescription } from '../representation/DiagramRepresentation.types';
 import { IConvertEngine, INodeConverter } from './ConvertEngine.types';
 import { convertLineStyle } from './convertDiagram';
@@ -39,7 +39,7 @@ const toRectangularNode = (
   nodeDescription: GQLNodeDescription | undefined,
   isBorderNode: boolean,
   gqlEdges: GQLEdge[]
-): Node<RectangularNodeData> => {
+): Node<FreeFormNodeData> => {
   const {
     targetObjectId,
     targetObjectLabel,
@@ -61,7 +61,7 @@ const toRectangularNode = (
   const isNew = gqlNodeLayoutData === undefined;
   const resizedByUser = gqlNodeLayoutData?.resizedByUser ?? false;
 
-  const data: RectangularNodeData = {
+  const data: FreeFormNodeData = {
     targetObjectId,
     targetObjectLabel,
     targetObjectKind,
@@ -76,6 +76,7 @@ const toRectangularNode = (
     },
     insideLabel: null,
     outsideLabels: convertOutsideLabels(outsideLabels),
+    imageURL: null,
     faded: state === GQLViewModifier.Faded,
     pinned,
     nodeDescription,
@@ -84,6 +85,7 @@ const toRectangularNode = (
     isBorderNode: isBorderNode,
     borderNodePosition: isBorderNode ? BorderNodePosition.EAST : null,
     labelEditable,
+    positionDependentRotation: false,
     connectionHandles,
     isNew,
     resizedByUser,
@@ -123,9 +125,9 @@ const toRectangularNode = (
     }
   }
 
-  const node: Node<RectangularNodeData> = {
+  const node: Node<FreeFormNodeData> = {
     id,
-    type: 'rectangularNode',
+    type: 'freeFormNode',
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,

packages/diagrams/frontend/sirius-components-diagrams/src/graphql/subscription/nodeFragment.types.ts

@@ -78,6 +78,10 @@ export interface GQLRectangularNodeStyle extends GQLNodeStyle {
 
 export interface GQLImageNodeStyle extends GQLNodeStyle {
   imageURL: string;
+  borderColor: string;
+  borderStyle: string;
+  borderSize: string;
+  borderRadius: number;
   positionDependentRotation: boolean;
 }
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx

@@ -32,7 +32,7 @@ const labelStyle = (
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    whiteSpace: 'pre-line',
+    whiteSpace: 'nowrap',
     ...style,
     color: style.color ? getCSSColor(String(style.color), theme) : undefined,
   };

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/RectangleNodeLayoutHandler.ts → packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/FreeFormNodeLayoutHandler.ts

@@ -13,8 +13,8 @@
 
 import { Node } from 'reactflow';
 import { NodeData } from '../DiagramRenderer.types';
+import { FreeFormNodeData } from '../node/FreeFormNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { RectangularNodeData } from '../node/RectangularNode.types';
 import { ILayoutEngine, INodeLayoutHandler } from './LayoutEngine.types';
 import { computePreviousPosition, computePreviousSize } from './bounds';
 import { RawDiagram } from './layout.types';
@@ -35,22 +35,22 @@ import {
 } from './layoutNode';
 import { rectangularNodePadding } from './layoutParams';
 
-export class RectangleNodeLayoutHandler implements INodeLayoutHandler<RectangularNodeData> {
+export class FreeFormNodeLayoutHandler implements INodeLayoutHandler<FreeFormNodeData> {
   public canHandle(node: Node<NodeData, DiagramNodeType>) {
-    return node.type === 'rectangularNode';
+    return node.type === 'freeFormNode';
   }
 
   public handle(
     layoutEngine: ILayoutEngine,
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<FreeFormNodeData, 'freeFormNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     directChildren: Node<NodeData, DiagramNodeType>[],
     newlyAddedNode: Node<NodeData, DiagramNodeType> | undefined,
     forceWidth?: number
   ) {
     const nodeIndex = findNodeIndex(visibleNodes, node.id);
-    const nodeElement = document.getElementById(`${node.id}-rectangularNode-${nodeIndex}`)?.children[0];
+    const nodeElement = document.getElementById(`${node.id}-freeFormNode-${nodeIndex}`)?.children[0];
     const borderWidth = nodeElement ? parseFloat(window.getComputedStyle(nodeElement).borderWidth) : 0;
 
     if (directChildren.length > 0) {
@@ -72,7 +72,7 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler<Rectangula
   private handleParentNode(
     layoutEngine: ILayoutEngine,
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<FreeFormNodeData, 'freeFormNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     directChildren: Node<NodeData, DiagramNodeType>[],
     newlyAddedNode: Node<NodeData, DiagramNodeType> | undefined,
@@ -201,7 +201,7 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler<Rectangula
 
   private handleLeafNode(
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<FreeFormNodeData, 'freeFormNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     borderWidth: number,
     forceWidth?: number