remove nodes and links

src/components/draw_area.jsx

@@ -1,12 +1,11 @@
 import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import Rect from "./rect";
-import Node from "./node";
+
 
 export default function Canvas(props) {
   const [dragging, setDragging] = useState(-1);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [links, setLinks] = useState([]);
   const [onRect, setOnRect] = useState(false);
   const [panning, setPanning] = useState(false);
   const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
@@ -37,12 +36,7 @@ export default function Canvas(props) {
       }));
       props.setRectangles(updatedRectangles);
 
-      const updatedLinks = links.map((link) => ({
+     
-        ...link,
-        x: link.x + dx,
-        y: link.y + dy,
-      }));
-      setLinks(updatedLinks);
     } else if (dragging >= 0) {
       const { clientX, clientY } = e;
       const updatedRectangles = props.rectangles.map((rect) => {
@@ -52,47 +46,7 @@ export default function Canvas(props) {
             x: clientX - offset.x,
             y: clientY - offset.y,
           };
-          const updatedLinks = links.map((link) => {
+         return updatedRect;
-            let updatedLink = link;
-            if (link.rect === updatedRect.id) {
-              switch (link.node) {
-                case Node.TOP:
-                  updatedLink = {
-                    ...link,
-                    x: updatedRect.x + updatedRect.width / 2,
-                    y: updatedRect.y,
-                  };
-                  break;
-                case Node.BOTTOM:
-                  updatedLink = {
-                    ...link,
-                    x: updatedRect.x + updatedRect.width / 2,
-                    y: updatedRect.y + updatedRect.height,
-                  };
-                  break;
-                case Node.LEFT:
-                  updatedLink = {
-                    ...link,
-                    x: updatedRect.x,
-                    y: updatedRect.y + updatedRect.height / 2,
-                  };
-                  break;
-                case Node.RIGHT:
-                  updatedLink = {
-                    ...link,
-                    x: updatedRect.x + updatedRect.width,
-                    y: updatedRect.y + updatedRect.height / 2,
-                  };
-                  break;
-                default:
-                  break;
-              }
-            }
-            return updatedLink;
-          });
-
-          setLinks(updatedLinks);
-          return updatedRect;
         }
         return rect;
       });
@@ -201,13 +155,13 @@ export default function Canvas(props) {
               width={rectangle.width}
               height={rectangle.height}
               setOnRect={setOnRect}
-              links={links}
+              // links={links}
-              setLinks={setLinks}
+              // setLinks={setLinks}
               onMouseDown={(e) => handleMouseDownRect(e, rectangle.id)}
               onDelete={deleteTable}
             />
           ))}
-          {links.map(
+          {/* {links.map(
             (link, index) =>
               links.length >= 2 &&
               index % 2 === 0 &&
@@ -222,7 +176,7 @@ export default function Canvas(props) {
                   strokeDasharray="5,5"
                 />
               )
-          )}
+          )} */}
         </svg>
       </div>
     </div>

src/components/node.js

@@ -1,9 +0,0 @@
-const Node = {
-  NONE: "NONE",
-  TOP: "TOP",
-  LEFT: "LEFT",
-  RIGHT: "RIGHT",
-  BOTTOM: "BOTTOM",
-};
-
-export default Node;

src/components/rect.jsx

@@ -1,5 +1,4 @@
 import { React, useState } from "react";
-import Node from "./node";
 import sqlDataTypes from "./sql_types";
 import {
   IconEdit,
@@ -20,7 +19,6 @@ import {
 } from "@douyinfe/semi-ui";
 
 const Rect = (props) => {
-  const [node, setNode] = useState(Node.NONE);
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
   const [name, setName] = useState("New Table");
@@ -207,7 +205,10 @@ const Rect = (props) => {
                     setHoveredField(-1);
                   }}
                 >
-                  <div>{e.name}</div>
+                  <div>
+                    <button className="w-[10px] h-[10px] bg-green-600 rounded-full me-2"></button>
+                    {e.name}
+                  </div>
                   <div className="text-slate-600">
                     {hoveredField === i ? (
                       <div>
@@ -241,82 +242,7 @@ const Rect = (props) => {
           })}
         </div>
       </foreignObject>
-      <circle
+
-        id="TOP"
-        cx={props.x + props.width / 2}
-        cy={props.y}
-        r={5}
-        onClick={(e) => {
-          setNode(Node.TOP);
-          props.setLinks([
-            ...props.links,
-            {
-              rect: props.id,
-              node: Node.TOP,
-              x: props.x + props.width / 2,
-              y: props.y,
-            },
-          ]);
-        }}
-        style={{ fill: node === Node.TOP ? "green" : "black" }}
-      />
-      <circle
-        id="LEFT"
-        cx={props.x}
-        cy={props.y + height / 2}
-        r={5}
-        onClick={(e) => {
-          setNode(Node.LEFT);
-          props.setLinks([
-            ...props.links,
-            {
-              rect: props.id,
-              node: Node.LEFT,
-              x: props.x,
-              y: props.y + height / 2,
-            },
-          ]);
-        }}
-        style={{ fill: node === Node.LEFT ? "green" : "black" }}
-      />
-      <circle
-        id="RIGHT"
-        cx={props.x + props.width}
-        cy={props.y + height / 2}
-        r={5}
-        onClick={(e) => {
-          setNode(Node.RIGHT);
-          props.setLinks([
-            ...props.links,
-            {
-              rect: props.id,
-              node: Node.RIGHT,
-              x: props.x + props.width,
-              y: props.y + height / 2,
-            },
-          ]);
-        }}
-        style={{ fill: node === Node.RIGHT ? "green" : "black" }}
-      />
-      <circle
-        id="BOTTOM"
-        cx={props.x + props.width / 2}
-        cy={props.y + height}
-        r={5}
-        onClick={(e) => {
-          setNode(Node.BOTTOM);
-          props.setLinks([
-            ...props.links,
-            {
-              rect: props.id,
-              node: Node.BOTTOM,
-              x: props.x + props.width / 2,
-              y: props.y + height,
-            },
-          ]);
-        }}
-        style={{ fill: node === Node.BOTTOM ? "green" : "black" }}
-      />
       <Modal
         title="Add new field"
         visible={visible}