diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx index a73d6e0..d4f457d 100644 --- a/src/components/canvas.jsx +++ b/src/components/canvas.jsx @@ -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 (
@@ -259,7 +288,7 @@ export default function Canvas(props) { strokeDasharray="5,5" /> )} - {relationships.map((e, i) => ( + {props.relationships.map((e, i) => ( {}} /> ))} diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx index 1d51bbd..aae419d 100644 --- a/src/components/editor_panel.jsx +++ b/src/components/editor_panel.jsx @@ -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 = [
- + +
, +
+
,
@@ -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: [ diff --git a/src/components/reference_overview.jsx b/src/components/reference_overview.jsx new file mode 100644 index 0000000..48183ed --- /dev/null +++ b/src/components/reference_overview.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Collapse, Input } from "@douyinfe/semi-ui"; + +export default function ReferenceOverview(props) { + return ( + + {props.relationships.map((r, i) => ( + + +
+ } + itemKey={`${i}`} + > + {r.name} + + ))} + + ); +} diff --git a/src/components/table.jsx b/src/components/table.jsx index 4db8dc0..4190b58 100644 --- a/src/components/table.jsx +++ b/src/components/table.jsx @@ -205,7 +205,7 @@ export default function Table(props) {

Comment :{" "} - {e.default === "" ? "Not comment" : e.comment} + {e.comment === "" ? "Not comment" : e.comment}

} diff --git a/src/components/diagram_overview.jsx b/src/components/table_overview.jsx similarity index 99% rename from src/components/diagram_overview.jsx rename to src/components/table_overview.jsx index 184ead0..a60aeaf 100644 --- a/src/components/diagram_overview.jsx +++ b/src/components/table_overview.jsx @@ -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) => { diff --git a/src/data/data.js b/src/data/data.js index e90de98..66c336d 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -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 }; diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx index bf81822..e95b822 100644 --- a/src/pages/editor.jsx +++ b/src/pages/editor.jsx @@ -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} />