colors yey

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,
+          id: props.tables.length,
-          name: `Table ${props.tables.length + 1}`,
+          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}

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>
+            <Form key={j}>
-              <div 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}>
+              <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>

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,
+              id: props.tables.length,
-              name: `Table ${props.tables.length + 1}`,
+              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,
+                    id: props.tables.length,
-                    name: `Table ${props.tables.length + 1}`,
+                    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]);
                 });

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
+                <button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80">
-                  className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
-                  // onClick={() => setSideSheetOn(true)}
-                >
                   <IconEdit />
                 </button>
                 <button

src/data/data.js

@@ -82,6 +82,21 @@ const sqlDataTypes = [
   "JSON",
 ];
 
+const tableThemes = [
+  "#f03c3c",
+  "#ff4f81",
+  "#bc49c4",
+  "#a751e8",
+  "#7c4af0",
+  "#6360f7",
+  "#7d9dff",
+  "#32c9b0",
+  "#3cde7d",
+  "#89e667",
+  "#ffe159",
+  "#ff9159",
+];
 
-export {menu, sqlDataTypes};
+const defaultTableTheme = "#9e9e9e"
 
+export { menu, sqlDataTypes, tableThemes, defaultTableTheme };