feat: Add ability to move, to zoom svg (#68)

Jira: EPMDEDP-12724 Related: #68 Change-Id: Icca09d5c48a09d526dad838dcb8888f9660df3ca
epam · Oct 9, 2023 · c6bdd55 · c6bdd55
1 parent 4d19fed
commit c6bdd55
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
+    "react-zoom-pan-pinch": "^3.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
@@ -3,9 +3,11 @@ import { ArrowRightMarker } from '@carbon/charts-react/diagrams/Marker';
 import { ElkNode } from 'elkjs';
 import ELK from 'elkjs/lib/elk.bundled';
 import React, { useEffect, useState } from 'react';
+import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { Edge } from './components/Edge';
 import { Node } from './components/Node';
 import { GraphProps } from './components/types';
+
 export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed' }: GraphProps) => {
     const elk = React.useMemo(
         () =>
@@ -45,6 +47,8 @@ export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed'
             .catch(console.error);
     }, [direction, elk, graph]);
 
+    const transformComponentRef = React.useRef<ReactZoomPanPinchRef | null>(null);
+
     if (!positions) return null;
 
     const {
@@ -55,19 +59,31 @@ export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed'
     } = positions;
 
     return (
-        <div className="tkn--pipeline-graph">
-            <svg style={{ height: graphHeight, width: graphWidth }}>
-                <defs>
-                    <ArrowRightMarker id="arrowRight" />
-                </defs>
-                {graphEdges.map((edge, i) => {
-                    return <Edge direction={direction} key={`edge_${i}`} {...edge} />;
-                })}
-                {graphNodes.map((node, i) => {
-                    //@ts-ignore
-                    return <Node key={`node_${i}`} {...node} />;
-                })}
-            </svg>
-        </div>
+        <TransformWrapper
+            initialScale={1}
+            minScale={0.8}
+            initialPositionX={0}
+            initialPositionY={0}
+            ref={transformComponentRef}
+        >
+            <TransformComponent>
+                <svg
+                    style={{ height: graphHeight + 100, width: graphWidth }}
+                    viewBox={`0 0 ${graphWidth} ${graphHeight + 100 - graphHeight / 2}`}
+                    id="graph-svg"
+                >
+                    <defs>
+                        <ArrowRightMarker id="arrowRight" />
+                    </defs>
+                    {graphEdges.map((edge, i) => {
+                        return <Edge direction={direction} key={`edge_${i}`} {...edge} />;
+                    })}
+                    {graphNodes.map((node, i) => {
+                        //@ts-ignore
+                        return <Node key={`node_${i}`} {...node} />;
+                    })}
+                </svg>
+            </TransformComponent>
+        </TransformWrapper>
     );
 };
diff --git a/src/override.css b/src/override.css
@@ -24,3 +24,8 @@ div[class*="SnackbarItem-variantWarning"] {
     color: #000;
 }
 
+.react-transform-wrapper {
+    width: auto !important;
+    height: auto !important;
+}
+