stinky poopy working code to drop shapes

src/components/diagram/index.jsx

@@ -1,39 +1,48 @@
 import React, { useEffect, useRef } from "react";
 import { dia, shapes } from "jointjs";
+import { useDrop } from "react-dnd";
 
 function Diagram(props) {
   const canvas = useRef(null);
 
-  useEffect(() => {
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept: "CARD",
+    drop: (item, monitor) => {
+      const offset = monitor.getClientOffset();
+      const canvasRect = canvas.current.getBoundingClientRect();
+      const x = offset.x - canvasRect.left - item.size.width * 0.5;
+      const y = offset.y - canvasRect.top - item.size.height * 0.5;
+      if (item.type === "rect") {
+        const rect = new shapes.standard.Rectangle();
+        rect.position(x, y);
+        rect.resize(item.size.width, item.size.height);
+        rect.attr(item.attrs);
+        rect.addTo(props.graph);
+        props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
+      }
+    },
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver(),
+    }),
+  }));
 
+  useEffect(() => {
     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);
   }, [props.graph]);
 
-  return <div id="canvas" ref={canvas} />;
+  return (
+    <div ref={drop} className="flex-grow">
+      <div id="canvas" ref={canvas}></div>
+    </div>
+  );
 }
-
 export default Diagram;

src/editor/index.jsx

@@ -1,5 +1,5 @@
-import { React, useState, useRef, useEffect, useMemo } from "react";
-// import Diagram from "../components/diagram";
+import { React, useState, useEffect, useMemo } from "react";
+import Diagram from "../components/diagram";
 import Header from "../components/header";
 import Sidebar from "../components/sidebar";
 import { ResizableBox } from "react-resizable";
@@ -26,48 +26,31 @@ const myTheme = createTheme({
     { tag: t.tagName, color: "#008a02" },
   ],
 });
-
 const Shape = () => {
+  const rectData = {
+    type: "rect",
+    position: { x: 100, y: 100 },
+    size: { width: 100, height: 40 },
+    attrs: {
+      body: {
+        fill: "#7039FF",
+      },
+      label: {
+        text: "hi",
+        fill: "white",
+      },
+    },
+  };
+
   const [{ isDragging }, drag] = useDrag(() => ({
     type: "CARD",
+    item: rectData,
     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={{
@@ -77,46 +60,15 @@ const Shape = () => {
         cursor: "move",
       }}
     >
-        <table>
-          <tr>hi</tr>
-        </table>
-        {/* <div id="canvas" ref={canvas} /> */}
+      rect
     </div>
-    </>
   );
 };
 
-function Diagram(props) {
-  const canvas = useRef(null);
-
-  useEffect(() => {
-    new dia.Paper({
-      el: document.getElementById("canvas"),
-      background: {
-        color: "#aec3b0",
-      },
-      model: props.graph,
-      height: "100%",
-      width: "100%",
-      gridSize: 1,
-      interactive: true,
-    });
-  });
-
-  return <div id="canvas" ref={canvas} />;
-}
-
-export default function Editor(props) {
-  const graph = useMemo(() => new dia.Graph(), []);
+const Window = (props) => {
   const [editor, setEditor] = useState(true);
-  const [code, setCode] = useState("");
 
-  useEffect(() => {}, [graph]);
   return (
-    <>
-      <Header name={props.name} />
-      <ControlPanel />
-      <div className="flex h-full">
     <ResizableBox
       width={window.innerWidth * 0.2}
       height={window.innerHeight}
@@ -148,34 +100,43 @@ export default function Editor(props) {
                 fill: "white",
               },
             });
-                rect.addTo(graph);
-                setCode(`${code}\n\ncreate table hi`);
+            rect.addTo(props.graph);
+            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
           }}
         >
           add
         </button>
         {editor ? (
           <CodeMirror
-                value={code}
+            value={props.code}
             height="100%"
             theme={myTheme}
             extensions={[sql()]}
-                onChange={(value, viewUpdate) => {
-                  console.log("value:", value);
-                }}
+            onChange={() => {}}
           />
         ) : (
-              <div>
-                <DndProvider backend={HTML5Backend}>
           <Shape />
-                </DndProvider>
-              </div>
         )}
       </div>
     </ResizableBox>
-        <div className="flex-grow">
-          <Diagram graph={graph} />
-        </div>
+  );
+};
+
+export default function Editor(props) {
+  const graph = useMemo(() => new dia.Graph(), []);
+  const [code, setCode] = useState("");
+
+  useEffect(() => {}, [graph]);
+
+  return (
+    <>
+      <Header name={props.name} />
+      <ControlPanel />
+      <div className="flex h-full">
+        <DndProvider backend={HTML5Backend}>
+          <Window graph={graph} code={code} setCode={setCode}/>
+          <Diagram graph={graph} code={code} setCode={setCode}/>
+        </DndProvider>
         <Sidebar />
       </div>
     </>