pweety tables

2023-09-19 15:48:59 +03:00 · 2023-09-19 15:48:59 +03:00 · b590236811
commit b590236811
parent 246aad77d0
6 changed files with 119 additions and 54 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "java.project.explorer.showNonJavaResources": false
+}
--- 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) {
        <div className="text-gray-900 absolute top-2 left-3 select-none">
          {props.areaData.name}
        </div>
+        {hovered && (
+          <div className="absolute top-2 right-3">
+            <Button
+              icon={<IconEdit />}
+              size="small"
+              theme="solid"
+              style={{
+                backgroundColor: "#2f68ad",
+                opacity: "0.7",
+              }}
+              onClick={() => {
+                if (layout.sidebar) {
+                  setTab(Tab.subject_areas);
+                  if (tab !== Tab.subject_areas) return;
+                  document
+                    .getElementById(`scroll_area_${props.areaData.id}`)
+                    .scrollIntoView({ behavior: "smooth" });
+                }
+              }}
+            ></Button>
+          </div>
+        )}
      </foreignObject>
      {hovered && (
        <>
--- 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(),
--- 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 (
    <div
      ref={drag}
-      style={{
-        opacity: isDragging ? 0.5 : 1,
-        cursor: "move",
-        width: "150px",
-        height: "65px",
-      }}
+      className={`${
+        isDragging ? "opacity-50" : ""
+      } bg-gray-100 cursor-move w-[150px] h-[72px]`}
    >
      <svg
        style={{
@ -33,25 +32,27 @@ export default function Shape() {
            height: "100%",
          }}
        >
-          <div className="border border-gray-600 w-full rounded h-full text-xs border-collapse">
-            <div className="px-3 py-0.5 border-b border-gray-600">Table</div>
-            <div className="px-1 py-0.5 border-b border-gray-600 flex items-center justify-between">
+          <div className="border border-gray-400 w-full rounded-md h-full text-xs border-collapse">
+            <div
+              className={`h-[7px] w-full rounded-t`}
+              style={{ backgroundColor: defaultTableTheme }}
+            />
+            <div className="px-3 py-0.5 border-b border-gray-400 bg-gray-200">
+              Table
+            </div>
+            <div className="px-1 py-0.5 border-b border-gray-400 flex items-center justify-between">
              <div className="flex items-center">
-                <div className="w-[6px] h-[5px] bg-green-600 me-1 rounded-full" />
+                <div className="w-[6px] h-[5px] bg-[#2f68ad] opacity-80 me-1 rounded-full" />
                <div>id</div>
              </div>
-              <div>
-                UUID
-              </div>
+              <div className="text-slate-400">UUID</div>
            </div>
            <div className="px-1 py-0.5 flex items-center justify-between">
              <div className="flex items-center">
-                <div className="w-[6px] h-[5px] bg-green-600 me-1 rounded-full" />
+                <div className="w-[6px] h-[5px] bg-[#2f68ad] opacity-80 me-1 rounded-full" />
                <div>name</div>
              </div>
-              <div>
-                VARCHAR
-              </div>
+              <div className="text-slate-400">VARCHAR</div>
            </div>
          </div>
        </foreignObject>
--- 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" });
--- 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
 };