From 72b9e9a4beb548b140599f174b8c995fe0e9dace Mon Sep 17 00:00:00 2001 From: Michael Charfadi Date: Mon, 18 Dec 2023 10:23:03 +0100 Subject: [PATCH] [2790] Increase node resizer size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/2790 Signed-off-by: Michaël Charfadi --- CHANGELOG.adoc | 6 +++++- doc/screenshots/biggerResizeHandles.png | Bin 0 -> 9255 bytes .../src/renderer/node/ImageNode.tsx | 8 ++++++++ .../src/renderer/node/ListNode.tsx | 8 ++++++++ .../src/renderer/node/RectangularNode.tsx | 8 ++++++++ .../sirius-web/src/nodes/EllipseNode.tsx | 8 ++++++++ 6 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 doc/screenshots/biggerResizeHandles.png 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 0000000000000000000000000000000000000000..a3498800cbc9f4cee58f604a6643dcedca48ff90 GIT binary patch literal 9255 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 O2{YqM=Zg(*Kl~4#L^AsT literal 0 HcmV?d00001 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}