implement dynamic canvas size

src/containers/LiveEditor/index.tsx

@@ -5,15 +5,13 @@ import {
   TransformComponent,
   ReactZoomPanPinchRef,
 } from "react-zoom-pan-pinch";
-import { Canvas } from "reaflow";
+import { Canvas, CanvasPosition } from "reaflow";
 
 import { getEdgeNodes } from "./helpers";
 import { CustomNode } from "../../components/CustomNode";
-import { useLoading } from "src/hooks/useLoading";
 import { useConfig } from "src/hocs/config";
 import { Tools } from "../Editor/Tools";
 import { ConfigActionType } from "src/reducer/reducer";
-import { useFocusNode } from "src/hooks/useFocusNode";
 
 const StyledLiveEditor = styled.div`
   position: relative;
@@ -21,6 +19,8 @@ const StyledLiveEditor = styled.div`
 
 const StyledEditorWrapper = styled.div`
   position: absolute;
+  width: 100%;
+  height: calc(100vh - 36px);
 
   :active {
     cursor: move;
@@ -40,11 +40,14 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
     states: { json, settings },
     dispatch,
   } = useConfig();
-  const pageLoaded = useLoading();
   const [data, setData] = React.useState({
     nodes: [],
     edges: [],
   });
+  const [size, setSize] = React.useState({
+    width: 20000,
+    height: 20000,
+  });
 
   React.useEffect(() => {
     const { nodes, edges } = getEdgeNodes(json, settings.expand);
@@ -63,39 +66,45 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
       payload: ref,
     });
 
-  if (pageLoaded)
-    return (
-      <StyledLiveEditor>
-        <Tools />
-        <StyledEditorWrapper>
-          <TransformWrapper
-            maxScale={1.8}
-            minScale={0.4}
-            initialScale={0.8}
-            limitToBounds={false}
-            wheel={wheelOptions}
-            onInit={onInit}
+  return (
+    <StyledLiveEditor>
+      <Tools />
+      <StyledEditorWrapper>
+        <TransformWrapper
+          maxScale={1.8}
+          minScale={0.4}
+          initialScale={0.8}
+          limitToBounds={false}
+          wheel={wheelOptions}
+          onInit={onInit}
+        >
+          <TransformComponent
+            wrapperStyle={{
+              width: "100%",
+              height: "100%",
+            }}
           >
-            <TransformComponent>
-              <Canvas
-                nodes={data.nodes}
-                node={(props) => <CustomNode {...props} />}
-                edges={data.edges}
-                maxWidth={20000}
-                maxHeight={20000}
-                center={false}
-                zoomable={false}
-                fit={true}
-                direction={settings.layout}
-                readonly
-                key={settings.layout}
-                onCanvasClick={onCanvasClick}
-              />
-            </TransformComponent>
-          </TransformWrapper>
-        </StyledEditorWrapper>
-      </StyledLiveEditor>
-    );
-
-  return null;
+            <Canvas
+              nodes={data.nodes}
+              node={(props) => <CustomNode {...props} />}
+              edges={data.edges}
+              maxWidth={size.width}
+              maxHeight={size.height}
+              zoomable={false}
+              fit={true}
+              direction={settings.layout}
+              defaultPosition={CanvasPosition.CENTER}
+              readonly
+              key={settings.layout}
+              onCanvasClick={onCanvasClick}
+              onLayoutChange={(lay) => {
+                if (lay.width && lay.height)
+                  setSize({ width: lay.width, height: lay.height });
+              }}
+            />
+          </TransformComponent>
+        </TransformWrapper>
+      </StyledEditorWrapper>
+    </StyledLiveEditor>
+  );
 });