delete table

src/components/draw_area.jsx

@@ -116,6 +116,12 @@ export default function Canvas(props) {
     setCursor("default");
   };
 
+  const deleteTable = (id) => {
+    const updatedTables = [...props.rectangles];
+    updatedTables.splice(id, 1);
+    props.setRectangles(updatedTables);
+  };
+
   const [, drop] = useDrop(
     () => ({
       accept: "CARD",
@@ -185,10 +191,10 @@ export default function Canvas(props) {
           </defs>
 
           <rect width="100%" height="100%" fill="url(#grid)" />
-          {props.rectangles.map((rectangle) => (
+          {props.rectangles.map((rectangle, i) => (
             <Rect
               key={rectangle.id}
-              id={rectangle.id}
+              id={i}
               x={rectangle.x}
               y={rectangle.y}
               label={rectangle.label}
@@ -198,6 +204,7 @@ export default function Canvas(props) {
               links={links}
               setLinks={setLinks}
               onMouseDown={(e) => handleMouseDownRect(e, rectangle.id)}
+              onDelete={deleteTable}
             />
           ))}
           {links.map(

src/components/rect.jsx

@@ -125,7 +125,10 @@ const Rect = (props) => {
                 >
                   <IconPlus />
                 </button>
-                <button className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80">
+                <button
+                  className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80"
+                  onClick={(e) => props.onDelete(props.id)}
+                >
                   <IconDelete />
                 </button>
               </div>
@@ -278,6 +281,7 @@ const Rect = (props) => {
                 field="type"
                 label="Type"
                 className="w-full"
+                filter
                 optionList={sqlDataTypes.map((value, index) => {
                   return {
                     label: value,

src/pages/editor.jsx

@@ -7,16 +7,6 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import Canvas from "../components/draw_area";
 import EditorPanel from "../components/editor_panel";
 
-// class Graph {
-//   constructor() {
-//     this.nodes = [];
-//   }
-
-//   setNodes(nodes) {
-//     this.nodes = nodes;
-//   }
-// }
-
 export default function Editor(props) {
   const [code, setCode] = useState("");
   const [rectangles, setRectangles] = useState([]);