Make windows

package-lock.json

@@ -14,6 +14,7 @@
         "jointjs": "^3.7.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -5789,6 +5790,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14388,6 +14397,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -14406,6 +14428,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "jointjs": "^3.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,9 +1,27 @@
-import './App.css';
+import Diagram from "./diagram";
-import Diagram from './diagram';
+import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
 
 function App() {
   return (
+    <div className="flex">
+      <ResizableBox
+        width={window.innerWidth * 0.2}
+        height={window.innerHeight}
+        resizeHandles={["e"]}
+        minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+        axis="x"
+      >
+        <span className="text">window 1</span>
+      </ResizableBox>
+      <ResizableBox
+        width={window.innerWidth * 0.8}
+        height={window.innerHeight}
+        resizeHandles={[]}
+      >
         <Diagram />
+      </ResizableBox>
+    </div>
   );
 }
 

src/diagram/index.jsx

@@ -13,8 +13,8 @@ function Diagram() {
         color: "#F1F92A",
       },
       model: graph,
-      height: window.height,
+      height: window.innerHeight,
-      width: window.width,
+      width: "100%",
       gridSize: 1,
       interactive: true,
     });
@@ -36,7 +36,7 @@ function Diagram() {
 
   return (
     <>
-      <div id="canvas" className="h-screen w-screen" ref={canvas} />
+      <div id="canvas" className="max-w-full h-full" ref={canvas} />
     </>
   );
 }