titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix linking just click bug and endTableId error

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:59 +03:00
parent 0601f76497
commit c3071ebf13
7 changed files with 87 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/canvas.jsx
View File

@ -4,6 +4,22 @@ import Table from "./table";
import { defaultTableTheme } from "../data/data";
export default function Canvas(props) {
const Cardinality = {
NONE: -1,
ONE_TO_ONE: 0,
ONE_TO_MANY: 1,
MANY_TO_ONE: 2,
MANY_TO_MANY: 3,
};
const Constraint = {
none: "None",
restrict: "Restrict",
cascade: "Cascade",
setNull: "Set null",
setDefault: "Set default",
};
const [dragging, setDragging] = useState(-1);
const [linking, setLinking] = useState(false);
const [line, setLine] = useState({
@ -15,8 +31,12 @@ export default function Canvas(props) {
startY: 0,
endX: 0,
endY: 0,
name: "",
cardinality: Cardinality.NONE,
updateConstraint: Constraint.none,
deleteConstraint: Constraint.none,
mandatory: false,
});
const [relationships, setRelationships] = useState([]);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [onRect, setOnRect] = useState({
tableId: -1,
@ -64,8 +84,8 @@ export default function Canvas(props) {
}))
);
setRelationships(
relationships.map((r) => ({
props.setRelationships(
props.relationships.map((r) => ({
...r,
startX: r.startX + dx,
startY: r.startY + dy,
@ -86,7 +106,7 @@ export default function Canvas(props) {
return t;
});
props.setTables(updatedTables);
const updatedRelationShips = relationships.map((r) => {
const updatedRelationShips = props.relationships.map((r) => {
if (r.startTableId === dragging) {
return {
...r,
@ -103,7 +123,7 @@ export default function Canvas(props) {
}
return r;
});
setRelationships(updatedRelationShips);
props.setRelationships(updatedRelationShips);
}
};
@ -140,14 +160,22 @@ export default function Canvas(props) {
const handleLinking = () => {
if (onRect.tableId < 0) return;
if (onRect.field < 0) return;
setRelationships((prev) => [
if (
line.startTableId === onRect.tableId &&
line.startFieldId === onRect.field
)
return;
props.setRelationships((prev) => [
...prev,
{
...line,
endX: props.tables[onRect.tableId].x + 15,
endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19,
endTableId: onRect.tableId,
endFieldId: onRect.field,
endX: props.tables[onRect.tableId].x + 15,
endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19,
name: `${props.tables[line.startTableId].name}_to_${
props.tables[onRect.tableId].name
}`,
},
]);
};
@ -162,7 +190,7 @@ export default function Canvas(props) {
const y = offset.y - canvasRect.top - 100 * 0.5;
const newTable = {
id: props.tables.length,
name: `Table ${props.tables.length}`,
name: `table_${props.tables.length}`,
x: x,
y: y,
fields: [
@ -195,6 +223,7 @@ export default function Canvas(props) {
}),
[props.tables]
);
return (
<div ref={drop} className="flex-grow" id="canvas">
<div ref={canvas} className="w-full h-screen">
@ -259,7 +288,7 @@ export default function Canvas(props) {
strokeDasharray="5,5"
/>
)}
{relationships.map((e, i) => (
{props.relationships.map((e, i) => (
<line
key={i}
x1={e.startX}
@ -267,6 +296,8 @@ export default function Canvas(props) {
x2={e.endX}
y2={e.endY}
stroke="gray"
strokeWidth={2.5}
onClick={() => {}}
/>
))}
</svg>

22
src/components/editor_panel.jsx
View File

@ -10,7 +10,8 @@ import html2canvas from "html2canvas";
import { Parser } from "node-sql-parser";
import { Tabs } from "@douyinfe/semi-ui";
import "react-resizable/css/styles.css";
import DiagramOverview from "./diagram_overview";
import TableOverview from "./table_overview";
import ReferenceOverview from "./reference_overview";
import { defaultTableTheme } from "../data/data";
const myTheme = createTheme({
@ -32,13 +33,20 @@ export default function EditorPanel(props) {
const map = useRef(new Map());
const tabList = [
{ tab: "Overview", itemKey: "1" },
{ tab: "Shapes", itemKey: "2" },
{ tab: "Editor", itemKey: "3" },
{ tab: "Tables", itemKey: "1" },
{ tab: "References", itemKey: "2" },
{ tab: "Shapes", itemKey: "3" },
{ tab: "Editor", itemKey: "4" },
];
const contentList = [
<div>
<DiagramOverview tables={props.tables} setTables={props.setTables} />
<TableOverview tables={props.tables} setTables={props.setTables} />
</div>,
<div>
<ReferenceOverview
relationships={props.relationships}
tables={props.tables}
/>
</div>,
<div>
<Shape />
@ -81,7 +89,7 @@ export default function EditorPanel(props) {
onClick={() => {
const newTable = {
id: props.tables.length,
name: `Table ${props.tables.length}`,
name: `table_${props.tables.length}`,
x: 0,
y: 0,
fields: [
@ -141,7 +149,7 @@ export default function EditorPanel(props) {
map.current.set(t.table, t);
const newTable = {
id: props.tables.length,
name: `Table ${props.tables.length}`,
name: `table_${props.tables.length}`,
x: 0,
y: 0,
fields: [

22
src/components/reference_overview.jsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { Collapse, Input } from "@douyinfe/semi-ui";
export default function ReferenceOverview(props) {
return (
<Collapse>
{props.relationships.map((r, i) => (
<Collapse.Panel
key={i}
header={
<div>
<Input defaultValue={r.name} borderless />
</div>
}
itemKey={`${i}`}
>
{r.name}
</Collapse.Panel>
))}
</Collapse>
);
}

2
src/components/table.jsx
View File

@ -205,7 +205,7 @@ export default function Table(props) {
</p>
<p className="text-slate-600">
<strong>Comment :</strong>{" "}
{e.default === "" ? "Not comment" : e.comment}
{e.comment === "" ? "Not comment" : e.comment}
</p>
</div>
}

2
src/components/diagram_overview.jsx → src/components/table_overview.jsx
View File

@ -20,7 +20,7 @@ import {
IconCheckboxTick,
} from "@douyinfe/semi-icons";
export default function DiagramOverview(props) {
export default function TableOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState("");
const updateColor = (id, c) => {

3
src/data/data.js
View File

@ -27,6 +27,7 @@ const menu = {
Grid: [],
Sidebar: [],
Editor: [],
"Strict mode": [],
"Reset view": [],
"View schema": [],
Theme: ["Light", "Dark"],
@ -97,6 +98,6 @@ const tableThemes = [
"#ff9159",
];
const defaultTableTheme = "#9e9e9e"
const defaultTableTheme = "#9e9e9e";
export { menu, sqlDataTypes, tableThemes, defaultTableTheme };

5
src/pages/editor.jsx
View File

@ -10,6 +10,7 @@ import EditorPanel from "../components/editor_panel";
export default function Editor(props) {
const [code, setCode] = useState("");
const [tables, setTables] = useState([]);
const [relationships, setRelationships] = useState([]);
return (
<>
@ -22,12 +23,16 @@ export default function Editor(props) {
setTables={setTables}
code={code}
setCode={setCode}
relationships={relationships}
setRelationships={setRelationships}
/>
<Canvas
tables={tables}
setTables={setTables}
code={code}
setCode={setCode}
relationships={relationships}
setRelationships={setRelationships}
/>
</DndProvider>
<Sidebar />