stinky poopy working code to add shapes

package-lock.json

@@ -18,6 +18,8 @@
         "codemirror": "^5.65.13",
         "jointjs": "^3.7.2",
         "react": "^18.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
@@ -3243,6 +3245,21 @@
         }
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -6798,6 +6815,16 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -8859,6 +8886,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14505,6 +14545,43 @@
         "node": ">=8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -14687,6 +14764,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

package.json

@@ -13,6 +13,8 @@
     "codemirror": "^5.65.13",
     "jointjs": "^3.7.2",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",

src/components/diagram/index.jsx

@@ -1,18 +1,17 @@
 import React, { useEffect, useRef } from "react";
 import { dia, shapes } from "jointjs";
 
-function Diagram() {
+function Diagram(props) {
   const canvas = useRef(null);
 
   useEffect(() => {
-    const graph = new dia.Graph();
 
     new dia.Paper({
       el: document.getElementById("canvas"),
       background: {
         color: "#aec3b0",
       },
-      model: graph,
+      model: props.graph,
       height: "100%",
       width: "100%",
       gridSize: 1,
@@ -31,8 +30,8 @@ function Diagram() {
         fill: "white",
       },
     });
-    rect.addTo(graph);
+    rect.addTo(props.graph);
-  }, []);
+  }, [props.graph]);
 
   return <div id="canvas" ref={canvas} />;
 }

src/components/header/index.jsx

@@ -12,7 +12,7 @@ export default function Header(props) {
         <button className="me-6 border px-4 py-1 rounded-xl">
           <i className="fa-solid fa-lock me-2"></i>Share
         </button>
-        <img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
+        <img src={blank_pfp} alt="profile" className="rounded-full h-8 w-8" />
       </div>
     </nav>
   );

src/editor/index.jsx

@@ -1,5 +1,5 @@
-import { React } from "react";
+import { React, useState, useRef, useEffect, useMemo } from "react";
-import Diagram from "../components/diagram";
+// import Diagram from "../components/diagram";
 import Header from "../components/header";
 import Sidebar from "../components/sidebar";
 import { ResizableBox } from "react-resizable";
@@ -9,6 +9,9 @@ import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
 import { tags as t } from "@lezer/highlight";
+import { DndProvider, useDrag } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { dia, shapes } from "jointjs";
 
 const myTheme = createTheme({
   dark: "light",
@@ -24,7 +27,104 @@ const myTheme = createTheme({
   ],
 });
 
+const Shape = () => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "CARD",
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  }));
+
+  //   const canvas = useRef(null);
+
+  //   useEffect(() => {
+  //     const graph = new dia.Graph();
+  //     new dia.Paper({
+  //       el: document.getElementById("canvas"),
+  //       background: {
+  //         color: "#fec3b0",
+  //       },
+  //       model: graph,
+  //       height: "100%",
+  //       width: "100%",
+  //       gridSize: 1,
+  //       interactive: true,
+  //     });
+
+  //     const rect = new shapes.standard.Rectangle();
+  //     rect.position(100, 100);
+  //     rect.resize(100, 40);
+  //     rect.attr({
+  //       body: {
+  //         fill: "#9039FF",
+  //       },
+  //       label: {
+  //         text: "hi",
+  //         fill: "white",
+  //       },
+  //     });
+  //     rect.addTo(graph);
+  //   });
+
+  return (
+    <>
+      <div
+        ref={drag}
+        style={{
+          opacity: isDragging ? 0.5 : 1,
+          fontSize: 25,
+          fontWeight: "bold",
+          cursor: "move",
+        }}
+      >
+        <table>
+          <tr>hi</tr>
+        </table>
+        {/* <div id="canvas" ref={canvas} /> */}
+      </div>
+    </>
+  );
+};
+
+function Diagram(props) {
+  const canvas = useRef(null);
+
+  useEffect(() => {
+    // const graph = new dia.Graph();
+    new dia.Paper({
+      el: document.getElementById("canvas"),
+      background: {
+        color: "#aec3b0",
+      },
+      model: props.graph,
+      height: "100%",
+      width: "100%",
+      gridSize: 1,
+      interactive: true,
+    });
+
+    const rect = new shapes.standard.Rectangle();
+    rect.position(100, 100);
+    rect.resize(100, 40);
+    rect.attr({
+      body: {
+        fill: "#7039FF",
+      },
+      label: {
+        text: "hi",
+        fill: "white",
+      },
+    });
+    rect.addTo(props.graph);
+  });
+
+  return <div id="canvas" ref={canvas} />;
+}
+
 export default function Editor(props) {
+  const graph = useMemo(() => new dia.Graph(), []);
+  const [editor, setEditor] = useState(true);
+  useEffect(() => {}, [graph]);
   return (
     <>
       <Header name={props.name} />
@@ -39,6 +139,34 @@ export default function Editor(props) {
           axis="x"
         >
           <div className="overflow-auto h-full">
+            <button
+              onClick={() => {
+                setEditor(!editor);
+              }}
+            >
+              change view
+            </button>
+
+            <button
+              onClick={() => {
+                const rect = new shapes.standard.Rectangle();
+                rect.position(100, 100);
+                rect.resize(100, 40);
+                rect.attr({
+                  body: {
+                    fill: "#7039FF",
+                  },
+                  label: {
+                    text: "hi",
+                    fill: "white",
+                  },
+                });
+                rect.addTo(graph);
+              }}
+            >
+              add
+            </button>
+            {editor ? (
               <CodeMirror
                 height="100%"
                 theme={myTheme}
@@ -47,10 +175,17 @@ export default function Editor(props) {
                   console.log("value:", value);
                 }}
               />
+            ) : (
+              <div>
+                <DndProvider backend={HTML5Backend}>
+                  <Shape />
+                </DndProvider>
+              </div>
+            )}
           </div>
         </ResizableBox>
         <div className="flex-grow">
-          <Diagram />
+          <Diagram graph={graph} />
         </div>
         <Sidebar />
       </div>

src/index.css

@@ -5,3 +5,7 @@
 .cm-focused {
   outline: none !important;
 }
+
+body{
+  overflow: hidden;
+}