pweety tables

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.project.explorer.showNonJavaResources": false
+}

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 && (
         <>

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 = {
+        switch (item.type) {
-          id: tables.length,
+          case ObjectType.TABLE:
-          name: `table_${tables.length}`,
+            addTable(x, y);
-          x: x,
+            break;
-          y: y,
+          case ObjectType.AREA:
-          fields: [
+            addArea(x, y);
-            {
+            break;
-              name: "id",
+          default:
-              type: "UUID",
+            break;
-              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}\`;`
-        );
       },
       collect: (monitor) => ({
         isOver: !!monitor.isOver(),

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={{
+      className={`${
-        opacity: isDragging ? 0.5 : 1,
+        isDragging ? "opacity-50" : ""
-        cursor: "move",
+      } bg-gray-100 cursor-move w-[150px] h-[72px]`}
-        width: "150px",
-        height: "65px",
-      }}
     >
       <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="border border-gray-400 w-full rounded-md h-full text-xs border-collapse">
-            <div className="px-3 py-0.5 border-b border-gray-600">Table</div>
+            <div
-            <div className="px-1 py-0.5 border-b border-gray-600 flex items-center justify-between">
+              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>
+              <div className="text-slate-400">UUID</div>
-                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>
+              <div className="text-slate-400">VARCHAR</div>
-                VARCHAR
-              </div>
             </div>
           </div>
         </foreignObject>

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" });

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
 };