colors yey

2023-09-19 15:47:54 +03:00 · 2023-09-19 15:47:54 +03:00 · de529fa402
commit de529fa402
parent 249435f696
5 changed files with 192 additions and 107 deletions
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import Table from "./table";
+import { defaultTableTheme } from "../data/data";

 export default function Canvas(props) {
  const [dragging, setDragging] = useState(-1);
@ -86,14 +87,14 @@ export default function Canvas(props) {
      });
      props.setTables(updatedTables);
      const updatedRelationShips = relationships.map((r) => {
-        if (r.startTableId === dragging - 1) {
+        if (r.startTableId === dragging) {
          return {
            ...r,
            startX: props.tables[r.startTableId].x + 15,
            startY:
              props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19,
          };
-        } else if (r.endTableId === dragging - 1) {
+        } else if (r.endTableId === dragging) {
          return {
            ...r,
            endX: props.tables[r.endTableId].x + 15,
@ -160,8 +161,8 @@ export default function Canvas(props) {
        const x = offset.x - canvasRect.left - 100 * 0.5;
        const y = offset.y - canvasRect.top - 100 * 0.5;
        const newTable = {
-          id: props.tables.length + 1,
-          name: `Table ${props.tables.length + 1}`,
+          id: props.tables.length,
+          name: `Table ${props.tables.length}`,
          x: x,
          y: y,
          fields: [
@ -178,6 +179,7 @@ export default function Canvas(props) {
          ],
          comment: "",
          indices: [],
+          color: defaultTableTheme,
        };
        props.setTables((prev) => [...prev, newTable]);
        props.setCode((prev) =>
@ -235,7 +237,7 @@ export default function Canvas(props) {
          {props.tables.map((table, i) => (
            <Table
              key={table.id}
-              id={i}
+              id={table.id}
              tableData={table}
              tables={props.tables}
              setTables={props.setTables}
--- a/src/components/diagram_overview.jsx
+++ b/src/components/diagram_overview.jsx
@ -1,5 +1,5 @@
 import { React } from "react";
-import { sqlDataTypes } from "../data/data";
+import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
 import {
  Collapse,
  Input,
@ -17,9 +17,16 @@ import {
  IconKeyStroked,
  IconColorPalette,
  IconDeleteStroked,
+  IconCheckboxTick,
 } from "@douyinfe/semi-icons";

 export default function DiagramOverview(props) {
+  const updateColor = (id, c) => {
+    const updatedTables = [...props.tables];
+    updatedTables[id] = { ...updatedTables[id], color: c };
+    props.setTables(updatedTables);
+  };
+
  return (
    <Collapse>
      {props.tables.map((t, i) => (
@ -33,8 +40,8 @@ export default function DiagramOverview(props) {
          itemKey={`${i}`}
        >
          {t.fields.map((f, j) => (
-            <Form>
-              <div key={j}>
+            <Form key={j}>
+              <div>
                <Row
                  type="flex"
                  justify="start"
@ -101,16 +108,15 @@ export default function DiagramOverview(props) {
                                defaultChecked={f.increment}
                              ></Checkbox>
                            </div>
-                            <label htmlFor="comment" className="font-medium">
-                              Comment
-                            </label>
                            <Form.TextArea
+                              field="comment"
+                              label="Comment"
                              initValue={f.comment}
                              autosize
                              rows={2}
                            />
                          </Form>
-                          <div className="flex justify-end">
+                          <div className="flex justify-end mt-2">
                            <Button icon={<IconDeleteStroked />} type="danger">
                              Delete
                            </Button>
@ -152,7 +158,66 @@ export default function DiagramOverview(props) {
          </Card>
          <Row gutter={6} className="mt-2">
            <Col span={8}>
-              <Button type="tertiary" icon={<IconColorPalette />}></Button>
+              <Popover
+                content={
+                  <div>
+                    <div className="flex justify-between items-center p-2">
+                      <div className="font-medium">Theme</div>
+                      <Button
+                        type="tertiary"
+                        size="small"
+                        onClick={() => updateColor(i, defaultTableTheme)}
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                    <hr />
+                    <div className="py-3">
+                      <div>
+                        {tableThemes
+                          .slice(0, Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() => updateColor(i, c)}
+                            >
+                              {t.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                      </div>
+                      <div className="mt-3">
+                        {tableThemes
+                          .slice(Math.ceil(tableThemes.length / 2))
+                          .map((c) => (
+                            <button
+                              key={c}
+                              style={{ backgroundColor: c }}
+                              className="p-3 rounded-full mx-1"
+                              onClick={() => updateColor(i, c)}
+                            >
+                              {t.color === c ? (
+                                <IconCheckboxTick style={{ color: "white" }} />
+                              ) : (
+                                <IconCheckboxTick style={{ color: c }} />
+                              )}
+                            </button>
+                          ))}
+                      </div>
+                    </div>
+                  </div>
+                }
+                trigger="click"
+                position="bottomLeft"
+                showArrow
+              >
+                <Button type="tertiary" icon={<IconColorPalette />}></Button>
+              </Popover>
            </Col>
            <Col span={8}>
              <Button block>Add index</Button>
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@ -11,6 +11,7 @@ import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
 import DiagramOverview from "./diagram_overview";
+import { defaultTableTheme } from "../data/data";

 const myTheme = createTheme({
  dark: "light",
@ -37,7 +38,7 @@ export default function EditorPanel(props) {
  ];
  const contentList = [
    <div>
-      <DiagramOverview tables={props.tables} />
+      <DiagramOverview tables={props.tables} setTables={props.setTables} />
    </div>,
    <div>
      <Shape />
@ -79,8 +80,8 @@ export default function EditorPanel(props) {
        <button
          onClick={() => {
            const newTable = {
-              id: props.tables.length + 1,
-              name: `Table ${props.tables.length + 1}`,
+              id: props.tables.length,
+              name: `Table ${props.tables.length}`,
              x: 0,
              y: 0,
              fields: [
@ -97,6 +98,7 @@ export default function EditorPanel(props) {
              ],
              comment: "",
              indices: [],
+              color: defaultTableTheme,
            };
            props.setTables((prev) => {
              const updatedTables = [...prev, newTable];
@ -137,8 +139,8 @@ export default function EditorPanel(props) {
                  }
                  map.current.set(t.table, t);
                  const newTable = {
-                    id: props.tables.length + 1,
-                    name: `Table ${props.tables.length + 1}`,
+                    id: props.tables.length,
+                    name: `Table ${props.tables.length}`,
                    x: 0,
                    y: 0,
                    fields: [
@ -155,6 +157,7 @@ export default function EditorPanel(props) {
                    ],
                    comment: "",
                    indices: [],
+                    color: defaultTableTheme,
                  };
                  props.setTables((prev) => [...prev, newTable]);
                });
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@ -113,7 +113,10 @@ export default function Table(props) {
            isHovered ? "border-sky-500" : "border-gray-500"
          } bg-gray-300 select-none rounded-md`}
        >
-          <div className="p-3 font-bold text-slate-800 h-[40px] bg-gray-400 rounded-t-md flex justify-between items-center">
+          <div
+            style={{ backgroundColor: props.tableData.color }}
+            className={`p-3 font-bold text-slate-800 h-[40px] rounded-t-md flex justify-between items-center`}
+          >
            {
              <form
                onSubmit={(e) => e.preventDefault()}
@ -138,10 +141,7 @@ export default function Table(props) {
            }
            {isHovered && (
              <div className="flex justify-end items-center">
-                <button
-                  className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
-                  // onClick={() => setSideSheetOn(true)}
-                >
+                <button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
                  <IconEdit />
                </button>
                <button
--- a/src/data/data.js
+++ b/src/data/data.js
@ -1,87 +1,102 @@
 const menu = {
-    File: {
-      New: [],
-      "New window": [],
-      Save: [],
-      "Save as": [],
-      Share: [],
-      Rename: [],
-      Import: [],
-      "Export as": [".png", ".jpg", ".pdf", ".xml"],
-      "Export source": ["MySQL", "PostgreSQL", "DBML"],
-      Properties: [],
-      Close: [],
-    },
-    Edit: {
-      Undo: [],
-      Redo: [],
-      Cut: [],
-      Copy: [],
-      "Copy as image": [],
-      Paste: [],
-      Delete: [],
-      "Edit table": [],
-    },
-    View: {
-      Toolbar: [],
-      Grid: [],
-      Sidebar: [],
-      Editor: [],
-      "Reset view": [],
-      "View schema": [],
-      Theme: ["Light", "Dark"],
-      "Zoom in": [],
-      "Zoom out": [],
-      Fullscreen: [],
-    },
-    Insert: {
-      "New table": [],
-      "New relationship": [],
-      Note: [],
-      Image: [],
-      Textbox: [],
-      Shape: ["Rhombus", "Rectangle"],
-    },
-    Logs: {
-      "Open logs": [],
-      "Commit changes": [],
-      "Revert changes": [],
-      "View commits": [],
-    },
-    Help: {
-      Shortcuts: [],
-      "Ask us on discord": [],
-      "Tweet us": [],
-      "Found a bug": [],
-    },
+  File: {
+    New: [],
+    "New window": [],
+    Save: [],
+    "Save as": [],
+    Share: [],
+    Rename: [],
+    Import: [],
+    "Export as": [".png", ".jpg", ".pdf", ".xml"],
+    "Export source": ["MySQL", "PostgreSQL", "DBML"],
+    Properties: [],
+    Close: [],
+  },
+  Edit: {
+    Undo: [],
+    Redo: [],
+    Cut: [],
+    Copy: [],
+    "Copy as image": [],
+    Paste: [],
+    Delete: [],
+    "Edit table": [],
+  },
+  View: {
+    Toolbar: [],
+    Grid: [],
+    Sidebar: [],
+    Editor: [],
+    "Reset view": [],
+    "View schema": [],
+    Theme: ["Light", "Dark"],
+    "Zoom in": [],
+    "Zoom out": [],
+    Fullscreen: [],
+  },
+  Insert: {
+    "New table": [],
+    "New relationship": [],
+    Note: [],
+    Image: [],
+    Textbox: [],
+    Shape: ["Rhombus", "Rectangle"],
+  },
+  Logs: {
+    "Open logs": [],
+    "Commit changes": [],
+    "Revert changes": [],
+    "View commits": [],
+  },
+  Help: {
+    Shortcuts: [],
+    "Ask us on discord": [],
+    "Tweet us": [],
+    "Found a bug": [],
+  },
 };
-  
-const sqlDataTypes = [
-    "INT",
-    "SMALLINT",
-    "BIGINT",
-    "DECIMAL",
-    "NUMERIC",
-    "FLOAT",
-    "REAL",
-    "DOUBLE PRECISION",
-    "CHAR",
-    "VARCHAR",
-    "TEXT",
-    "DATE",
-    "TIME",
-    "TIMESTAMP",
-    "INTERVAL",
-    "BOOLEAN",
-    "BINARY",
-    "VARBINARY",
-    "BLOB",
-    "CLOB",
-    "UUID",
-    "XML",
-    "JSON",
-  ];

-  
-export {menu, sqlDataTypes};
-  
+const sqlDataTypes = [
+  "INT",
+  "SMALLINT",
+  "BIGINT",
+  "DECIMAL",
+  "NUMERIC",
+  "FLOAT",
+  "REAL",
+  "DOUBLE PRECISION",
+  "CHAR",
+  "VARCHAR",
+  "TEXT",
+  "DATE",
+  "TIME",
+  "TIMESTAMP",
+  "INTERVAL",
+  "BOOLEAN",
+  "BINARY",
+  "VARBINARY",
+  "BLOB",
+  "CLOB",
+  "UUID",
+  "XML",
+  "JSON",
+];
+
+const tableThemes = [
+  "#f03c3c",
+  "#ff4f81",
+  "#bc49c4",
+  "#a751e8",
+  "#7c4af0",
+  "#6360f7",
+  "#7d9dff",
+  "#32c9b0",
+  "#3cde7d",
+  "#89e667",
+  "#ffe159",
+  "#ff9159",
+];
+
+const defaultTableTheme = "#9e9e9e"
+
+export { menu, sqlDataTypes, tableThemes, defaultTableTheme };