stinky poopy working code to add shapes

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 Diagram from "../components/diagram";
+import { React, useState, useRef, useEffect, useMemo } from "react";
+// 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,18 +139,53 @@ export default function Editor(props) {
           axis="x"
         >
           <div className="overflow-auto h-full">
-            <CodeMirror
-              height="100%"
-              theme={myTheme}
-              extensions={[sql()]}
-              onChange={(value, viewUpdate) => {
-                console.log("value:", value);
+            <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}
+                extensions={[sql()]}
+                onChange={(value, viewUpdate) => {
+                  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;
+}