[2087] Add support for snap to grid

Bug: #2087 Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>
eclipse-sirius · Jun 26, 2023 · 090f904 · 090f904
1 parent 59810cf
commit 090f904
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -65,6 +65,7 @@ The help text can include multiple lines (separated by `\n`), but no text format
 - https://github.com/eclipse-sirius/sirius-components/issues/1618[#1618] [view] Split the view metamodel into dedicated subpackages.
 - https://github.com/eclipse-sirius/sirius-components/issues/2083[#2083] [diagram] Add support for edge markers
 - https://github.com/eclipse-sirius/sirius-components/issues/2086[#2086] [diagram] Add a panel with the default diagram actions
+- https://github.com/eclipse-sirius/sirius-components/issues/2087[#2087] [diagram] Add support for snap to grid
 
 == v2023.6.0
 

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramPanel.tsx b/...ages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramPanel.tsx
@@ -16,6 +16,8 @@ import Paper from '@material-ui/core/Paper';
 import AspectRatioIcon from '@material-ui/icons/AspectRatio';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
+import GridOffIcon from '@material-ui/icons/GridOff';
+import GridOnIcon from '@material-ui/icons/GridOn';
 import ShareIcon from '@material-ui/icons/Share';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
@@ -24,7 +26,15 @@ import { Panel } from 'reactflow';
 import { DiagramPanelProps, DiagramPanelState } from './DiagramPanel.types';
 import { ShareDiagramDialog } from './ShareDiagramDialog';
 
-export const DiagramPanel = ({ fullscreen, onFullscreen, onFitToScreen, onZoomIn, onZoomOut }: DiagramPanelProps) => {
+export const DiagramPanel = ({
+  fullscreen,
+  onFullscreen,
+  onFitToScreen,
+  onZoomIn,
+  onZoomOut,
+  snapToGrid,
+  onSnapToGrid,
+}: DiagramPanelProps) => {
   const [state, setState] = useState<DiagramPanelState>({
     dialogOpen: null,
   });
@@ -57,6 +67,15 @@ export const DiagramPanel = ({ fullscreen, onFullscreen, onFitToScreen, onZoomIn
           <IconButton size="small" onClick={() => onShare()}>
             <ShareIcon />
           </IconButton>
+          {snapToGrid ? (
+            <IconButton size="small" onClick={() => onSnapToGrid(false)}>
+              <GridOffIcon />
+            </IconButton>
+          ) : (
+            <IconButton size="small" onClick={() => onSnapToGrid(true)}>
+              <GridOnIcon />
+            </IconButton>
+          )}
         </Paper>
       </Panel>
       {state.dialogOpen === 'Share' ? <ShareDiagramDialog onClose={onCloseDialog} /> : null}

diff --git a/...diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramPanel.types.ts b/...diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramPanel.types.ts
@@ -17,6 +17,8 @@ export interface DiagramPanelProps {
   onFitToScreen: () => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
+  snapToGrid: boolean;
+  onSnapToGrid: (snapToGrid: boolean) => void;
 }
 
 export interface DiagramPanelState {

diff --git a/...s/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx b/...s/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
@@ -15,6 +15,7 @@ import { Selection, SelectionEntry } from '@eclipse-sirius/sirius-components-cor
 import { useEffect, useRef, useState } from 'react';
 import {
   Background,
+  BackgroundVariant,
   EdgeChange,
   NodeChange,
   NodeSelectionChange,
@@ -49,6 +50,7 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
   const ref = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<DiagramRendererState>({
     fullscreen: false,
+    snapToGrid: false,
   });
   const [nodes, setNodes, onNodesChange] = useNodesState(diagram.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(diagram.edges);
@@ -134,6 +136,7 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
   const handleFitToScreen = () => reactFlow.fitView({ duration: 200 });
   const handleZoomIn = () => reactFlow.zoomIn({ duration: 200 });
   const handleZoomOut = () => reactFlow.zoomOut({ duration: 200 });
+  const handleSnapToGrid = (snapToGrid: boolean) => setState((prevState) => ({ ...prevState, snapToGrid }));
 
   return (
     <ReactFlow
@@ -145,14 +148,31 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
       onPaneClick={handlePaneClick}
       maxZoom={40}
       minZoom={0.1}
+      snapToGrid={state.snapToGrid}
+      snapGrid={[10, 10]}
       ref={ref}>
-      <Background style={{ backgroundColor: '#ffffff' }} color="#ffffff" />
+      {state.snapToGrid ? (
+        <>
+          <Background
+            id="small-grid"
+            style={{ backgroundColor: '#ffffff' }}
+            variant={BackgroundVariant.Lines}
+            gap={10}
+            color="#f1f1f1"
+          />
+          <Background id="large-grid" variant={BackgroundVariant.Lines} gap={100} offset={1} color="#cccccc" />
+        </>
+      ) : (
+        <Background style={{ backgroundColor: '#ffffff' }} variant={BackgroundVariant.Lines} color="#ffffff" />
+      )}
       <DiagramPanel
         fullscreen={state.fullscreen}
         onFullscreen={handleFullscreen}
         onFitToScreen={handleFitToScreen}
         onZoomIn={handleZoomIn}
         onZoomOut={handleZoomOut}
+        snapToGrid={state.snapToGrid}
+        onSnapToGrid={handleSnapToGrid}
       />
     </ReactFlow>
   );

diff --git a/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts b/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts
@@ -22,6 +22,7 @@ export interface DiagramRendererProps {
 
 export interface DiagramRendererState {
   fullscreen: boolean;
+  snapToGrid: boolean;
 }
 
 export interface Diagram {