[2048] Add the support for node resize with react-flow

Bug: #2048 Signed-off-by: Guillaume Coutable <[email protected]>
eclipse-sirius · Jun 20, 2023 · a878a21 · a878a21
1 parent c372dd1
commit a878a21
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 30 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -52,6 +52,8 @@ Widgets which define such a help text have a new "?" icon next to their labels;
 For View-based widgets, this materializes as an AQL `helpExpression`.
 The help text can include multiple lines (separated by `\n`), but no text formatting.
 :image:doc/images/Widget_Help_Tooltip.png[Example of a help tooltip on a widget]
+- https://github.com/eclipse-sirius/sirius-components/issues/2048[#2048] [diagram] Add a basic support for the resize. It is possible to reduce the size of a node less than the space needed to display all children.
+
 
 == v2023.6.0
 

diff --git a/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
@@ -34,8 +34,6 @@ const toRectangularNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Nod
       borderRadius: style.borderRadius,
       borderWidth: style.borderSize,
       borderStyle: style.borderStyle,
-      width: `${size.width}px`,
-      height: `${size.height}px`,
     },
     label: {
       text: gqlNode.label.text,
@@ -83,6 +81,10 @@ const toRectangularNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Nod
     type: 'rectangularNode',
     data,
     position,
+    style: {
+      width: `${size.width}px`,
+      height: `${size.height}px`,
+    },
   };
 
   if (gqlParentNode) {
@@ -196,17 +198,18 @@ const toImageNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node<Imag
     targetObjectKind,
     targetObjectLabel,
     imageURL: style.imageURL,
-    style: {
-      width: `${size.width}px`,
-      height: `${size.height}px`,
-    },
+    style: {},
   };
 
   const node: Node<ImageNodeData> = {
     id: gqlNode.id,
     type: 'imageNode',
     data,
     position,
+    style: {
+      width: `${size.width}px`,
+      height: `${size.height}px`,
+    },
   };
 
   if (gqlParentNode) {

diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.tsx
@@ -13,12 +13,12 @@
 
 import { ServerContext } from '@eclipse-sirius/sirius-components-core';
 import { memo, useContext } from 'react';
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, NodeResizer, Position } from 'reactflow';
 import { ImageNodeData } from './ImageNode.types';
 import { Palette } from './Palette';
 
 const imageNodeStyle = (style: React.CSSProperties, selected: boolean): React.CSSProperties => {
-  const imageNodeStyle: React.CSSProperties = { ...style };
+  const imageNodeStyle: React.CSSProperties = { width: '100%', height: '100%', ...style };
 
   if (selected) {
     imageNodeStyle.outline = `var(--blue-lagoon) solid 1px`;
@@ -32,6 +32,7 @@ export const ImageNode = memo(({ data, isConnectable, id, selected }: NodeProps<
 
   return (
     <>
+      <NodeResizer color="var(--blue-lagoon)" isVisible={selected} />
       <img src={httpOrigin + data.imageURL} style={imageNodeStyle(data.style, selected)} />
       {selected ? <Palette diagramElementId={id} /> : null}
       <Handle type="source" position={Position.Left} isConnectable={isConnectable} />

diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ListNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ListNode.tsx
@@ -12,7 +12,7 @@
  *******************************************************************************/
 
 import { memo } from 'react';
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, NodeResizer, Position } from 'reactflow';
 import { ListNodeData } from './ListNode.types';
 import { Palette } from './Palette';
 
@@ -21,6 +21,8 @@ const listNodeStyle = (style: React.CSSProperties, selected: boolean): React.CSS
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
+    width: '100%',
+    height: '100%',
     ...style,
   };
   if (selected) {
@@ -56,20 +58,23 @@ const listItemStyle = (style: React.CSSProperties): React.CSSProperties => {
 
 export const ListNode = memo(({ data, isConnectable, id, selected }: NodeProps<ListNodeData>) => {
   return (
-    <div style={listNodeStyle(data.style, selected)}>
-      <div style={listNodeHeaderStyle(data.label.style)}>{data.label.text}</div>
-      <div>
-        {data.listItems.map((listItem) => {
-          return (
-            <div key={listItem.id} style={listItemStyle(listItem.style)}>
-              {listItem.label.text}
-            </div>
-          );
-        })}
+    <>
+      <NodeResizer color="var(--blue-lagoon)" isVisible={selected} />
+      <div style={listNodeStyle(data.style, selected)}>
+        <div style={listNodeHeaderStyle(data.label.style)}>{data.label.text}</div>
+        <div>
+          {data.listItems.map((listItem) => {
+            return (
+              <div key={listItem.id} style={listItemStyle(listItem.style)}>
+                {listItem.label.text}
+              </div>
+            );
+          })}
+        </div>
+        {selected ? <Palette diagramElementId={id} /> : null}
+        <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
+        <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
       </div>
-      {selected ? <Palette diagramElementId={id} /> : null}
-      <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
-    </div>
+    </>
   );
 });
diff --git a/...s/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.tsx b/...s/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.tsx
@@ -12,7 +12,7 @@
  *******************************************************************************/
 
 import { memo } from 'react';
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, NodeResizer, Position } from 'reactflow';
 import { RectangularNodeData } from './RectangularNode.types';
 
 import { Palette } from './Palette';
@@ -21,6 +21,8 @@ const rectangularNodeStyle = (style: React.CSSProperties, selected: boolean): Re
   const rectangularNodeStyle: React.CSSProperties = {
     display: 'flex',
     padding: '8px',
+    width: '100%',
+    height: '100%',
     ...style,
   };
 
@@ -39,11 +41,14 @@ const labelStyle = (style: React.CSSProperties): React.CSSProperties => {
 
 export const RectangularNode = memo(({ data, isConnectable, id, selected }: NodeProps<RectangularNodeData>) => {
   return (
-    <div style={rectangularNodeStyle(data.style, selected)}>
-      <div style={labelStyle(data.label.style)}>{data.label.text}</div>
-      {selected ? <Palette diagramElementId={id} /> : null}
-      <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
-      <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
-    </div>
+    <>
+      <NodeResizer color="var(--blue-lagoon)" isVisible={selected} />
+      <div style={rectangularNodeStyle(data.style, selected)}>
+        <div style={labelStyle(data.label.style)}>{data.label.text}</div>
+        {selected ? <Palette diagramElementId={id} /> : null}
+        <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
+        <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
+      </div>
+    </>
   );
 });