remove nodes and links
This commit is contained in:
1ilit
parent
b0a5098926
commit
a5ffee462d
@ -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,46 +46,6 @@ export default function Canvas(props) {
|
||||
x: clientX - offset.x,
|
||||
y: clientY - offset.y,
|
||||
};
|
||||
const updatedLinks = links.map((link) => {
|
||||
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}
|
||||
setLinks={setLinks}
|
||||
// links={links}
|
||||
// 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>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
const Node = {
|
||||
NONE: "NONE",
|
||||
TOP: "TOP",
|
||||
LEFT: "LEFT",
|
||||
RIGHT: "RIGHT",
|
||||
BOTTOM: "BOTTOM",
|
||||
};
|
||||
|
||||
export default Node;
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user