seperate canvas

src/components/Graph/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Canvas } from "reaflow";
+import { CustomNode } from "src/components/CustomNode";
+import { useConfig } from "src/hocs/config";
+import { getEdgeNodes } from "src/containers/LiveEditor/helpers";
+
+export const Graph = () => {
+  const [nodes, setNodes] = React.useState([]);
+  const [edges, setEdges] = React.useState([]);
+  const [size, setSize] = React.useState({
+    width: 2000,
+    height: 2000,
+  });
+
+  const {
+    states: { json, settings },
+  } = useConfig();
+
+  React.useEffect(() => {
+    const { nodes, edges } = getEdgeNodes(json, settings.expand);
+
+    setNodes(nodes);
+    setEdges(edges);
+  }, [json, settings.expand]);
+
+  const onCanvasClick = () => {
+    const input = document.querySelector("input:focus") as HTMLInputElement;
+    if (input) input.blur();
+  };
+
+  return (
+    <Canvas
+      nodes={nodes}
+      node={(props) => <CustomNode {...props} />}
+      edges={edges}
+      maxWidth={size.width}
+      maxHeight={size.height}
+      zoomable={false}
+      direction={settings.layout}
+      readonly
+      key={settings.layout}
+      onCanvasClick={onCanvasClick}
+      onLayoutChange={(lay) => {
+        if (lay.width && lay.height)
+          setSize({ width: lay.width, height: lay.height });
+      }}
+    />
+  );
+};

src/containers/LiveEditor/index.tsx

@@ -6,12 +6,10 @@ import {
   ReactZoomPanPinchRef,
 } from "react-zoom-pan-pinch";
 
-import { getEdgeNodes } from "./helpers";
-import { CustomNode } from "../../components/CustomNode";
 import { useConfig } from "src/hocs/config";
-import { Tools } from "../Editor/Tools";
+import { Tools } from "src/containers/Editor/Tools";
 import { ConfigActionType } from "src/reducer/reducer";
-import { Canvas } from "reaflow";
+import { Graph } from "src/components/Graph";
 
 const StyledLiveEditor = styled.div`
   position: relative;
@@ -36,29 +34,7 @@ const wheelOptions = {
 };
 
 export const LiveEditor: React.FC = React.memo(function LiveEditor() {
-  const {
-    states: { json, settings },
-    dispatch,
-  } = useConfig();
-  const [data, setData] = React.useState({
-    nodes: [],
-    edges: [],
-  });
-  const [size, setSize] = React.useState({
-    width: 2000,
-    height: 2000,
-  });
-
-  React.useEffect(() => {
-    const { nodes, edges } = getEdgeNodes(json, settings.expand);
-
-    setData({ nodes, edges });
-  }, [json, settings.expand]);
-
-  const onCanvasClick = () => {
-    const input = document.querySelector("input:focus") as HTMLInputElement;
-    if (input) input.blur();
-  };
+  const { dispatch } = useConfig();
 
   const onInit = (ref: ReactZoomPanPinchRef) =>
     dispatch({
@@ -81,24 +57,10 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
             wrapperStyle={{
               width: "100%",
               height: "100%",
+              overflow: "hidden",
             }}
           >
-            <Canvas
-              nodes={data.nodes}
-              node={(props) => <CustomNode {...props} />}
-              edges={data.edges}
-              maxWidth={size.width}
-              maxHeight={size.height}
-              zoomable={false}
-              direction={settings.layout}
-              readonly
-              key={settings.layout}
-              onCanvasClick={onCanvasClick}
-              onLayoutChange={(lay) => {
-                if (lay.width && lay.height)
-                  setSize({ width: lay.width, height: lay.height });
-              }}
-            />
+            <Graph />
           </TransformComponent>
         </TransformWrapper>
       </StyledEditorWrapper>