diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index a8a2cc5c22..b47e603fc7 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -66,6 +66,7 @@ const nodeTypeRegistry: NodeTypeRegistry = {
```
+- 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
new file mode 100644
index 0000000000..a3498800cb
Binary files /dev/null and b/doc/screenshots/biggerResizeHandles.png differ
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx
index a0e61ca1d3..50df2e5f36 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx
+++ b/packages/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)
return (
<>
!data.isBorderNode}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx
index 94f094663d..12c3a063ca 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx
+++ b/packages/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) => {
const theme = useTheme();
const { onDrop, onDragOver } = useDrop();
@@ -69,6 +76,7 @@ export const ListNode = memo(({ data, id, selected }: NodeProps) =
<>
{data.nodeDescription?.userResizable && (
!data.isBorderNode}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx
index 1c2d9d52d8..12c197fbbe 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx
+++ b/packages/diagrams/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) => {
const theme = useTheme();
const { onDrop, onDragOver } = useDrop();
@@ -64,6 +71,7 @@ export const RectangularNode = memo(({ data, id, selected }: NodeProps
{data.nodeDescription?.userResizable && (
!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
index d71c7b0769..30234043eb 100644
--- 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) => {
const theme = useTheme();
const { onDrop, onDragOver } = useDrop();
@@ -72,6 +79,7 @@ export const EllipseNode = memo(({ data, id, selected }: NodeProps
!data.isBorderNode}