diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..38c7634 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "java.project.explorer.showNonJavaResources": false +} \ No newline at end of file diff --git a/src/components/area.jsx b/src/components/area.jsx index 0cf4d6c..232f72c 100644 --- a/src/components/area.jsx +++ b/src/components/area.jsx @@ -1,7 +1,13 @@ -import { React, useState } from "react"; +import { React, useContext, useState } from "react"; +import { Button } from "@douyinfe/semi-ui"; +import { IconEdit } from "@douyinfe/semi-icons"; +import { Tab } from "../data/data"; +import { LayoutContext, TabContext } from "../pages/editor"; export default function Area(props) { const [hovered, setHovered] = useState(false); + const { layout } = useContext(LayoutContext); + const { tab, setTab } = useContext(TabContext); const handleMouseDown = (e, dir) => { props.setResize({ id: props.areaData.id, dir: dir }); @@ -43,6 +49,28 @@ export default function Area(props) {
{props.areaData.name}
+ {hovered && ( +
+ +
+ )} {hovered && ( <> diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx index bc2a92a..d4c09bd 100644 --- a/src/components/canvas.jsx +++ b/src/components/canvas.jsx @@ -1,7 +1,12 @@ import React, { useContext, useRef, useState } from "react"; import { useDrop } from "react-dnd"; import Table from "./table"; -import { defaultTableTheme, Cardinality, Constraint } from "../data/data"; +import { + defaultTableTheme, + Cardinality, + Constraint, + ObjectType, +} from "../data/data"; import Area from "./area"; import Relationship from "./relationship"; import { AreaContext, TableContext } from "../pages/editor"; @@ -10,11 +15,6 @@ export default function Canvas(props) { const { tables, setTables, relationships, setRelationships } = useContext(TableContext); const { areas, setAreas } = useContext(AreaContext); - const ObjectType = { - NONE: 0, - TABLE: 1, - AREA: 2, - }; const [dragging, setDragging] = useState([ObjectType.NONE, -1]); const [linking, setLinking] = useState(false); const [line, setLine] = useState({ @@ -259,6 +259,50 @@ export default function Canvas(props) { ]); }; + const addTable = (x, y) => { + const newTable = { + id: tables.length, + name: `table_${tables.length}`, + x: x, + y: y, + fields: [ + { + name: "id", + type: "UUID", + check: "", + default: "", + primary: true, + unique: true, + notNull: true, + increment: true, + comment: "", + }, + ], + comment: "", + indices: [], + color: defaultTableTheme, + }; + setTables((prev) => [...prev, newTable]); + props.setCode((prev) => + prev === "" + ? `CREATE TABLE \`${newTable.name}\`;` + : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;` + ); + }; + + const addArea = (x, y) => { + const newArea = { + id: areas.length, + name: `area_${areas.length}`, + x: x, + y: y, + width: 200, + height: 200, + color: defaultTableTheme, + }; + setAreas((prev) => [...prev, newArea]); + }; + const [, drop] = useDrop( () => ({ accept: "CARD", @@ -267,34 +311,16 @@ export default function Canvas(props) { const canvasRect = canvas.current.getBoundingClientRect(); const x = offset.x - canvasRect.left - 100 * 0.5; const y = offset.y - canvasRect.top - 100 * 0.5; - const newTable = { - id: tables.length, - name: `table_${tables.length}`, - x: x, - y: y, - fields: [ - { - name: "id", - type: "UUID", - check: "", - default: "", - primary: true, - unique: true, - notNull: true, - increment: true, - comment: "", - }, - ], - comment: "", - indices: [], - color: defaultTableTheme, - }; - setTables((prev) => [...prev, newTable]); - props.setCode((prev) => - prev === "" - ? `CREATE TABLE \`${newTable.name}\`;` - : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;` - ); + switch (item.type) { + case ObjectType.TABLE: + addTable(x, y); + break; + case ObjectType.AREA: + addArea(x, y); + break; + default: + break; + } }, collect: (monitor) => ({ isOver: !!monitor.isOver(), diff --git a/src/components/shape.jsx b/src/components/shape.jsx index 52beca0..9714f81 100644 --- a/src/components/shape.jsx +++ b/src/components/shape.jsx @@ -1,9 +1,11 @@ import { React } from "react"; import { useDrag } from "react-dnd"; +import { ObjectType, defaultTableTheme } from "../data/data"; export default function Shape() { const [{ isDragging }, drag] = useDrag(() => ({ type: "CARD", + item: { type: ObjectType.TABLE }, collect: (monitor) => ({ isDragging: !!monitor.isDragging(), }), @@ -12,12 +14,9 @@ export default function Shape() { return (
-
-
Table
-
+
+
+
+ Table +
+
-
+
id
-
- UUID -
+
UUID
-
+
name
-
- VARCHAR -
+
VARCHAR
diff --git a/src/components/table.jsx b/src/components/table.jsx index 451acb2..0babc2b 100644 --- a/src/components/table.jsx +++ b/src/components/table.jsx @@ -119,8 +119,8 @@ export default function Table(props) { setVisible(true); } else { setTab(Tab.tables); - if (tab !== Tab.tables) return; props.setSelectedTable(`${props.tableData.id}`); + if (tab !== Tab.tables) return; document .getElementById(`scroll_table_${props.tableData.id}`) .scrollIntoView({ behavior: "smooth" }); diff --git a/src/data/data.js b/src/data/data.js index 8e207d5..5ee4370 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -65,6 +65,12 @@ const Tab = { editor: "5", }; +const ObjectType = { + NONE: 0, + TABLE: 1, + AREA: 2, +}; + export { bgBlue, sqlDataTypes, @@ -72,5 +78,6 @@ export { defaultTableTheme, Cardinality, Constraint, - Tab + Tab, + ObjectType };