add simple table design

src/components/control_panel.jsx

@@ -35,9 +35,11 @@ export default function ControlPanel() {
         break;
       case Tool.ZOOM:
         setOpenZoom((prev) => !prev);
+        setOpenAdd(false);
         break;
       case Tool.ADD:
         setOpenAdd((prev) => !prev);
+        setOpenZoom(false);
         break;
       default:
         break;
@@ -143,7 +145,7 @@ export default function ControlPanel() {
           <button className="py-1 px-2 hover:bg-gray-300" title="Zoom out">
             <i className="fa-solid fa-magnifying-glass-minus"></i>
           </button>
-          <button className="py-1 px-2 hover:bg-gray-300" title="Undi">
+          <button className="py-1 px-2 hover:bg-gray-300" title="Undo">
             <i className="fa-solid fa-rotate-left "></i>
           </button>
           <button className="py-1 px-2 hover:bg-gray-300" title="Redo">

src/components/draw_area.jsx

@@ -124,19 +124,19 @@ export default function Canvas(props) {
         const canvasRect = canvas.current.getBoundingClientRect();
         const x = offset.x - canvasRect.left - 100 * 0.5;
         const y = offset.y - canvasRect.top - 100 * 0.5;
-        const newRectangle = {
+        const d = {
           id: props.rectangles.length + 1,
           x,
           y,
-          width: 100,
+          width: 240,
           height: 100,
           label: `rect ${props.rectangles.length + 1}`,
         };
-        props.setRectangles([...props.rectangles, newRectangle]);
+        props.setRectangles([...props.rectangles, d]);
         props.setCode((prev) =>
           prev === ""
-            ? `CREATE TABLE \`${newRectangle.label}\`;`
-            : `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
+            ? `CREATE TABLE \`${d.label}\`;`
+            : `${prev}\n\nCREATE TABLE \`${d.label}\`;`
         );
       },
       collect: (monitor) => ({

src/components/editor_panel.jsx

@@ -52,7 +52,7 @@ export default function EditorPanel(props) {
               id: props.rectangles.length + 1,
               x: 0,
               y: 0,
-              width: 100,
+              width: 240,
               height: 100,
               label: `rect ${props.rectangles.length + 1}`,
             };
@@ -95,7 +95,7 @@ export default function EditorPanel(props) {
                     id: props.rectangles.length + 1,
                     x: 0,
                     y: 0,
-                    width: 100,
+                    width: 240,
                     height: 100,
                     label: `rect ${props.rectangles.length + 1}`,
                   };

src/components/rect.jsx

@@ -6,6 +6,33 @@ const Rect = (props) => {
   const [isHovered, setIsHovered] = useState(false);
   const [node, setNode] = useState(Node.NONE);
 
+  const table = {
+    name: "Students",
+    fields: [
+      {
+        name: "id",
+        type: "uuid",
+        default: "",
+        primary: true,
+        unique: true,
+        notNull: true,
+        increment: false,
+      },
+      {
+        name: "name",
+        type: "varchar(20)",
+        default: "n/a",
+        primary: false,
+        unique: false,
+        notNull: true,
+        increment: false,
+      },
+    ],
+  };
+
+  const height =
+    table.fields.length * 36 + (table.fields.length - 1) * 2 + 40 + 4;
+
   return (
     <g>
       <foreignObject
@@ -13,7 +40,7 @@ const Rect = (props) => {
         x={props.x}
         y={props.y}
         width={props.width}
-        height={props.height}
+        height={height}
         style={{ cursor: "move" }}
         onMouseDown={props.onMouseDown}
         onMouseEnter={() => {
@@ -26,15 +53,27 @@ const Rect = (props) => {
         }}
       >
         <div
-          className={`${isHovered ? "ring-2 ring-blue-400 ring-inset" : ""} bg-gray-600 p-3 select-none rounded-md`}
+          className={`border-2 ${
+            isHovered ? "border-sky-500" : "border-gray-500"
+          } bg-gray-300 select-none rounded-md`}
         >
-          <div className="text-white">{props.label}</div>
-          <form onSubmit={(e) => e.preventDefault()}>
-            <input type="text" className="w-full" />
-          </form>
-          <Button type="secondary" onClick={(e) => console.log("sup")}>
-            sup
-          </Button>
+          <div className="p-3 font-bold text-slate-800 h-[40px] bg-gray-400 rounded-t-md">
+            {table.name}
+          </div>
+          {table.fields.map((e, i) => {
+            return (
+              <div
+                className={`${
+                  i === table.fields.length - 1
+                    ? ""
+                    : "border-b-2 border-gray-400"
+                } h-[36px] p-2 flex justify-between`}
+              >
+                <div>{e.name}</div>
+                <div className="text-slate-600">{e.type}</div>
+              </div>
+            );
+          })}
         </div>
       </foreignObject>
       <circle
@@ -59,7 +98,7 @@ const Rect = (props) => {
       <circle
         id="LEFT"
         cx={props.x}
-        cy={props.y + props.height / 2}
+        cy={props.y + height / 2}
         r={5}
         onClick={(e) => {
           setNode(Node.LEFT);
@@ -69,7 +108,7 @@ const Rect = (props) => {
               rect: props.id,
               node: Node.LEFT,
               x: props.x,
-              y: props.y + props.height / 2,
+              y: props.y + height / 2,
             },
           ]);
         }}
@@ -78,7 +117,7 @@ const Rect = (props) => {
       <circle
         id="RIGHT"
         cx={props.x + props.width}
-        cy={props.y + props.height / 2}
+        cy={props.y + height / 2}
         r={5}
         onClick={(e) => {
           setNode(Node.RIGHT);
@@ -88,7 +127,7 @@ const Rect = (props) => {
               rect: props.id,
               node: Node.RIGHT,
               x: props.x + props.width,
-              y: props.y + props.height / 2,
+              y: props.y + height / 2,
             },
           ]);
         }}
@@ -97,7 +136,7 @@ const Rect = (props) => {
       <circle
         id="BOTTOM"
         cx={props.x + props.width / 2}
-        cy={props.y + props.height}
+        cy={props.y + height}
         r={5}
         onClick={(e) => {
           setNode(Node.BOTTOM);
@@ -107,7 +146,7 @@ const Rect = (props) => {
               rect: props.id,
               node: Node.BOTTOM,
               x: props.x + props.width / 2,
-              y: props.y + props.height,
+              y: props.y + height,
             },
           ]);
         }}