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}