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 { React, useState, 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";
@@ -26,156 +26,117 @@ 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
-      <div
+      ref={drag}
-        ref={drag}
+      style={{
-        style={{
+        opacity: isDragging ? 0.5 : 1,
-          opacity: isDragging ? 0.5 : 1,
+        fontSize: 25,
-          fontSize: 25,
+        fontWeight: "bold",
-          fontWeight: "bold",
+        cursor: "move",
-          cursor: "move",
+      }}
-        }}
+    >
-      >
+      rect
-        <table>
+    </div>
-          <tr>hi</tr>
-        </table>
-        {/* <div id="canvas" ref={canvas} /> */}
-      </div>
-    </>
   );
 };
 
-function Diagram(props) {
+const Window = (props) => {
-  const canvas = useRef(null);
+  const [editor, setEditor] = useState(true);
 
-  useEffect(() => {
+  return (
-    new dia.Paper({
+    <ResizableBox
-      el: document.getElementById("canvas"),
+      width={window.innerWidth * 0.2}
-      background: {
+      height={window.innerHeight}
-        color: "#aec3b0",
+      resizeHandles={["e"]}
-      },
+      minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
-      model: props.graph,
+      maxConstraints={[Infinity, Infinity]}
-      height: "100%",
+      axis="x"
-      width: "100%",
+    >
-      gridSize: 1,
+      <div className="overflow-auto h-full">
-      interactive: true,
+        <button
-    });
+          onClick={() => {
-  });
+            setEditor(!editor);
-
+          }}
-  return <div id="canvas" ref={canvas} />;
+        >
-}
+          change view
+        </button>
+        <br />
+        <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(props.graph);
+            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
+          }}
+        >
+          add
+        </button>
+        {editor ? (
+          <CodeMirror
+            value={props.code}
+            height="100%"
+            theme={myTheme}
+            extensions={[sql()]}
+            onChange={() => {}}
+          />
+        ) : (
+          <Shape />
+        )}
+      </div>
+    </ResizableBox>
+  );
+};
 
 export default function Editor(props) {
   const graph = useMemo(() => new dia.Graph(), []);
-  const [editor, setEditor] = useState(true);
   const [code, setCode] = useState("");
 
   useEffect(() => {}, [graph]);
+
   return (
     <>
       <Header name={props.name} />
       <ControlPanel />
       <div className="flex h-full">
-        <ResizableBox
+        <DndProvider backend={HTML5Backend}>
-          width={window.innerWidth * 0.2}
+          <Window graph={graph} code={code} setCode={setCode}/>
-          height={window.innerHeight}
+          <Diagram graph={graph} code={code} setCode={setCode}/>
-          resizeHandles={["e"]}
+        </DndProvider>
-          minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
-          maxConstraints={[Infinity, Infinity]}
-          axis="x"
-        >
-          <div className="overflow-auto h-full">
-            <button
-              onClick={() => {
-                setEditor(!editor);
-              }}
-            >
-              change view
-            </button>
-            <br />
-            <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);
-                setCode(`${code}\n\ncreate table hi`);
-              }}
-            >
-              add
-            </button>
-            {editor ? (
-              <CodeMirror
-                value={code}
-                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 graph={graph} />
-        </div>
         <Sidebar />
       </div>
     </>