[2480] Merge Rectangle and Image layout handling together

Bug: #2480
eclipse-sirius · Dec 13, 2023 · f4e9dc3 · f4e9dc3
1 parent 8ef2e77
commit f4e9dc3
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 197 deletions.
diff --git a/.../frontend/sirius-components-diagrams-reactflow/src/converter/ImageNodeConverterHandler.ts b/.../frontend/sirius-components-diagrams-reactflow/src/converter/ImageNodeConverterHandler.ts
@@ -19,7 +19,6 @@ import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
 import { ImageNodeData } from '../renderer/node/ImageNode.types';
 import { IConvertEngine, INodeConverterHandler } from './ConvertEngine.types';
-import { AlignmentMap } from './convertDiagram.types';
 import { convertHandles } from './convertHandles';
 import { convertLabelStyle, convertOutsideLabels } from './convertLabel';
 
@@ -71,34 +70,22 @@ 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),
+        },
       },
-      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> = {

diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx
@@ -35,7 +35,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,
   };

diff --git a/...erer/layout/RectangleNodeLayoutHandler.ts → ...derer/layout/FreeFormNodeLayoutHandler.ts b/...erer/layout/RectangleNodeLayoutHandler.ts → ...derer/layout/FreeFormNodeLayoutHandler.ts
@@ -13,6 +13,7 @@
 
 import { Node } from 'reactflow';
 import { NodeData } from '../DiagramRenderer.types';
+import { ImageNodeData } from '../node/ImageNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
 import { RectangularNodeData } from '../node/RectangularNode.types';
 import { ILayoutEngine, INodeLayoutHandler } from './LayoutEngine.types';
@@ -35,15 +36,15 @@ import {
 } from './layoutNode';
 import { rectangularNodePadding } from './layoutParams';
 
-export class RectangleNodeLayoutHandler implements INodeLayoutHandler<RectangularNodeData> {
+export class FreeFormNodeLayoutHandler implements INodeLayoutHandler<RectangularNodeData | ImageNodeData> {
   public canHandle(node: Node<NodeData, DiagramNodeType>) {
-    return node.type === 'rectangularNode';
+    return node.type === 'rectangularNode' || node.type === 'imageNode';
   }
 
   public handle(
     layoutEngine: ILayoutEngine,
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<RectangularNodeData | ImageNodeData, 'rectangularNode' | 'imageNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     directChildren: Node<NodeData, DiagramNodeType>[],
     newlyAddedNode: Node<NodeData, DiagramNodeType> | undefined,
@@ -72,7 +73,7 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler<Rectangula
   private handleParentNode(
     layoutEngine: ILayoutEngine,
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<RectangularNodeData | ImageNodeData, 'rectangularNode' | 'imageNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     directChildren: Node<NodeData, DiagramNodeType>[],
     newlyAddedNode: Node<NodeData, DiagramNodeType> | undefined,
@@ -201,7 +202,7 @@ export class RectangleNodeLayoutHandler implements INodeLayoutHandler<Rectangula
 
   private handleLeafNode(
     previousDiagram: RawDiagram | null,
-    node: Node<RectangularNodeData, 'rectangularNode'>,
+    node: Node<RectangularNodeData | ImageNodeData, 'rectangularNode' | 'imageNode'>,
     visibleNodes: Node<NodeData, DiagramNodeType>[],
     borderWidth: number,
     forceWidth?: number

diff --git a/...ontend/sirius-components-diagrams-reactflow/src/renderer/layout/ImageNodeLayoutHandler.ts b/...ontend/sirius-components-diagrams-reactflow/src/renderer/layout/ImageNodeLayoutHandler.ts
diff --git a/...iagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/LayoutEngine.ts b/...iagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/LayoutEngine.ts
@@ -14,18 +14,16 @@
 import { Node } from 'reactflow';
 import { NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
+import { FreeFormNodeLayoutHandler } from './FreeFormNodeLayoutHandler';
 import { IconLabelNodeLayoutHandler } from './IconLabelNodeLayoutHandler';
-import { ImageNodeLayoutHandler } from './ImageNodeLayoutHandler';
 import { ILayoutEngine, INodeLayoutHandler } from './LayoutEngine.types';
 import { ListNodeLayoutHandler } from './ListNodeLayoutHandler';
-import { RectangleNodeLayoutHandler } from './RectangleNodeLayoutHandler';
 import { RawDiagram } from './layout.types';
 
 export class LayoutEngine implements ILayoutEngine {
   nodeLayoutHandlers: INodeLayoutHandler<NodeData>[] = [
-    new RectangleNodeLayoutHandler(),
+    new FreeFormNodeLayoutHandler(),
     new ListNodeLayoutHandler(),
-    new ImageNodeLayoutHandler(),
     new IconLabelNodeLayoutHandler(),
   ];
 

diff --git a/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx b/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx
@@ -66,6 +66,17 @@ const computeBorderRotation = (data: ImageNodeData): string | undefined => {
   return undefined;
 };
 
+const outsideBottomLabelAreaStyle = (): React.CSSProperties => {
+  return {
+    display: 'grid',
+    gridTemplateColumns: `1fr 1fr 1fr`,
+    gridTemplateRows: `min-content`,
+    gridTemplateAreas: `
+    'BOTTOM_BEGIN   BOTTOM_MIDDLE   BOTTOM_END'
+    `,
+  };
+};
+
 export const ImageNode = memo(({ data, id, selected }: NodeProps<ImageNodeData>) => {
   const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
   const theme = useTheme();
@@ -75,6 +86,21 @@ export const ImageNode = memo(({ data, id, selected }: NodeProps<ImageNodeData>)
   const rotation = computeBorderRotation(data);
 
   useRefreshConnectionHandles(id, data.connectionHandles);
+
+  const outsideBottomlabels: JSX.Element[] = [];
+  if (data.outsideLabels.BOTTOM_MIDDLE) {
+    const outsideLabel = data.outsideLabels.BOTTOM_MIDDLE;
+    outsideBottomlabels.push(
+      <Label
+        diagramElementId={id}
+        label={outsideLabel}
+        faded={data.faded}
+        transform=""
+        gridArea="BOTTOM_MIDDLE"
+        key={outsideLabel.id}
+      />
+    );
+  }
   return (
     <>
       <NodeResizer
@@ -83,24 +109,27 @@ export const ImageNode = memo(({ data, id, selected }: NodeProps<ImageNodeData>)
         shouldResize={() => !data.isBorderNode}
         keepAspectRatio={data.nodeDescription?.keepAspectRatio}
       />
-      <img
-        src={httpOrigin + data.imageURL}
+      <div
         style={{
           ...imageNodeStyle(theme, data.style, selected, hoveredNode?.id === id, data.faded, rotation),
           ...newConnectionStyleProvider.getNodeStyle(id, data.descriptionId),
           ...dropFeedbackStyle,
+          backgroundImage: `url(${httpOrigin + data.imageURL})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% 100%',
         }}
-        data-testid={`Image - ${data?.targetObjectLabel}`}
-      />
-      {data.insideLabel ? (
-        <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" gridArea="" />
-      ) : null}
-      {selected ? (
-        <DiagramElementPalette diagramElementId={id} labelId={data.insideLabel ? data.insideLabel.id : null} />
-      ) : null}
-      {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
-      <ConnectionTargetHandle nodeId={id} />
-      <ConnectionHandles connectionHandles={data.connectionHandles} />
+        data-testid={`Image - ${data?.targetObjectLabel}`}>
+        {data.insideLabel ? (
+          <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" gridArea="" />
+        ) : null}
+        {selected ? (
+          <DiagramElementPalette diagramElementId={id} labelId={data.insideLabel ? data.insideLabel.id : null} />
+        ) : null}
+        {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
+        <ConnectionTargetHandle nodeId={id} />
+        <ConnectionHandles connectionHandles={data.connectionHandles} />
+      </div>
+      <div style={{ ...outsideBottomLabelAreaStyle() }}>{outsideBottomlabels}</div>
     </>
   );
 });