[2790] Increase node resizer size

Bug: #2790 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
eclipse-sirius · Dec 19, 2023 · 72b9e9a · 72b9e9a
1 parent bcb7f2f
commit 72b9e9a
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 1 deletion.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -66,6 +66,7 @@ const nodeTypeRegistry: NodeTypeRegistry = {
   <DiagramRepresentationConfiguration nodeTypeRegistry={nodeTypeRegistry} />
 </SiriusWebApplication>
 ```
+- https://github.com/eclipse-sirius/sirius-web/issues/2790[#2790] [diagram] All handles used to resize a node have been updated to be wider, you can update your custom nodes in the same way it's done in the EllipseNode example.
 
 
 === Dependency update
@@ -106,7 +107,10 @@ It is the responsibility of the drop targets (e.g. a diagram) to validate the dr
 - https://github.com/eclipse-sirius/sirius-web/issues/2718[#2718] Replacing useNodes and useEdges by useReactFlow to imporove performances.
 - https://github.com/eclipse-sirius/sirius-web/issues/2787[#2787] [view] Add the ability to customize the icons of the node tools and edge tools in the View DSL.
 - https://github.com/eclipse-sirius/sirius-web/issues/2784[#2784] [performance] Expand monitoring capabilities.
-
+- https://github.com/eclipse-sirius/sirius-web/issues/2790[#2790] [diagram] Increase the size of the handles used to resize a node.
++
+.Old resize handles vs new ones
+image:doc/screenshots/biggerResizeHandles.png[Compartment with header without separator,70%]
 
 == v2023.12.0
 

diff --git a/doc/screenshots/biggerResizeHandles.png b/doc/screenshots/biggerResizeHandles.png
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
@@ -50,6 +50,13 @@ const imageNodeStyle = (
   return imageNodeStyle;
 };
 
+const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    width: theme.spacing(0.75),
+    height: theme.spacing(0.75),
+  };
+};
+
 const computeBorderRotation = (data: ImageNodeData): string | undefined => {
   if (data?.isBorderNode && data.positionDependentRotation) {
     switch (data.borderNodePosition) {
@@ -78,6 +85,7 @@ export const ImageNode = memo(({ data, id, selected }: NodeProps<ImageNodeData>)
   return (
     <>
       <NodeResizer
+        handleStyle={{ ...resizeHandleStyle(theme) }}
         color={theme.palette.selected}
         isVisible={selected && !data.isBorderNode}
         shouldResize={() => !data.isBorderNode}

diff --git a/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx b/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx
@@ -53,6 +53,13 @@ const listNodeStyle = (
   return listNodeStyle;
 };
 
+const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    width: theme.spacing(0.75),
+    height: theme.spacing(0.75),
+  };
+};
+
 export const ListNode = memo(({ data, id, selected }: NodeProps<ListNodeData>) => {
   const theme = useTheme();
   const { onDrop, onDragOver } = useDrop();
@@ -69,6 +76,7 @@ export const ListNode = memo(({ data, id, selected }: NodeProps<ListNodeData>) =
     <>
       {data.nodeDescription?.userResizable && (
         <NodeResizer
+          handleStyle={{ ...resizeHandleStyle(theme) }}
           color={theme.palette.primary.main}
           isVisible={selected}
           shouldResize={() => !data.isBorderNode}

diff --git a/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx b/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx
@@ -48,6 +48,13 @@ const rectangularNodeStyle = (
   return rectangularNodeStyle;
 };
 
+const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    width: theme.spacing(0.75),
+    height: theme.spacing(0.75),
+  };
+};
+
 export const RectangularNode = memo(({ data, id, selected }: NodeProps<RectangularNodeData>) => {
   const theme = useTheme();
   const { onDrop, onDragOver } = useDrop();
@@ -64,6 +71,7 @@ export const RectangularNode = memo(({ data, id, selected }: NodeProps<Rectangul
     <>
       {data.nodeDescription?.userResizable && (
         <NodeResizer
+          handleStyle={{ ...resizeHandleStyle(theme) }}
           color={theme.palette.selected}
           isVisible={selected}
           shouldResize={() => !data.isBorderNode}

diff --git a/packages/sirius-web/frontend/sirius-web/src/nodes/EllipseNode.tsx b/packages/sirius-web/frontend/sirius-web/src/nodes/EllipseNode.tsx
@@ -56,6 +56,13 @@ const ellipseNodeStyle = (
   return ellipseNodeStyle;
 };
 
+const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    width: theme.spacing(0.75),
+    height: theme.spacing(0.75),
+  };
+};
+
 export const EllipseNode = memo(({ data, id, selected }: NodeProps<EllipseNodeData>) => {
   const theme = useTheme();
   const { onDrop, onDragOver } = useDrop();
@@ -72,6 +79,7 @@ export const EllipseNode = memo(({ data, id, selected }: NodeProps<EllipseNodeDa
   return (
     <>
       <NodeResizer
+        handleStyle={{ ...resizeHandleStyle(theme) }}
         color={theme.palette.primary.main}
         isVisible={selected}
         shouldResize={() => !data.isBorderNode}