titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors yey

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:54 +03:00
parent 249435f696
commit de529fa402
5 changed files with 192 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/canvas.jsx
View File

@ -1,6 +1,7 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { useDrop } from "react-dnd"; import { useDrop } from "react-dnd";
import Table from "./table"; import Table from "./table";
import { defaultTableTheme } from "../data/data";
export default function Canvas(props) { export default function Canvas(props) {
const [dragging, setDragging] = useState(-1); const [dragging, setDragging] = useState(-1);
@ -86,14 +87,14 @@ export default function Canvas(props) {
}); });
props.setTables(updatedTables); props.setTables(updatedTables);
const updatedRelationShips = relationships.map((r) => { const updatedRelationShips = relationships.map((r) => {
if (r.startTableId === dragging - 1) { if (r.startTableId === dragging) {
return { return {
...r, ...r,
startX: props.tables[r.startTableId].x + 15, startX: props.tables[r.startTableId].x + 15,
startY: startY:
props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19, props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19,
}; };
} else if (r.endTableId === dragging - 1) { } else if (r.endTableId === dragging) {
return { return {
...r, ...r,
endX: props.tables[r.endTableId].x + 15, 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 x = offset.x - canvasRect.left - 100 * 0.5;
const y = offset.y - canvasRect.top - 100 * 0.5; const y = offset.y - canvasRect.top - 100 * 0.5;
const newTable = { const newTable = {
id: props.tables.length + 1, id: props.tables.length,
name: `Table ${props.tables.length + 1}`, name: `Table ${props.tables.length}`,
x: x, x: x,
y: y, y: y,
fields: [ fields: [
@ -178,6 +179,7 @@ export default function Canvas(props) {
], ],
comment: "", comment: "",
indices: [], indices: [],
color: defaultTableTheme,
}; };
props.setTables((prev) => [...prev, newTable]); props.setTables((prev) => [...prev, newTable]);
props.setCode((prev) => props.setCode((prev) =>
@ -235,7 +237,7 @@ export default function Canvas(props) {
{props.tables.map((table, i) => ( {props.tables.map((table, i) => (
<Table <Table
key={table.id} key={table.id}
id={i} id={table.id}
tableData={table} tableData={table}
tables={props.tables} tables={props.tables}
setTables={props.setTables} setTables={props.setTables}

81
src/components/diagram_overview.jsx
View File

@ -1,5 +1,5 @@
import { React } from "react"; import { React } from "react";
import { sqlDataTypes } from "../data/data"; import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
import { import {
Collapse, Collapse,
Input, Input,
@ -17,9 +17,16 @@ import {
IconKeyStroked, IconKeyStroked,
IconColorPalette, IconColorPalette,
IconDeleteStroked, IconDeleteStroked,
IconCheckboxTick,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
export default function DiagramOverview(props) { export default function DiagramOverview(props) {
const updateColor = (id, c) => {
const updatedTables = [...props.tables];
updatedTables[id] = { ...updatedTables[id], color: c };
props.setTables(updatedTables);
};
return ( return (
<Collapse> <Collapse>
{props.tables.map((t, i) => ( {props.tables.map((t, i) => (
@ -33,8 +40,8 @@ export default function DiagramOverview(props) {
itemKey={`${i}`} itemKey={`${i}`}
> >
{t.fields.map((f, j) => ( {t.fields.map((f, j) => (
<Form> <Form key={j}>
<div key={j}> <div>
<Row <Row
type="flex" type="flex"
justify="start" justify="start"
@ -101,16 +108,15 @@ export default function DiagramOverview(props) {
defaultChecked={f.increment} defaultChecked={f.increment}
></Checkbox> ></Checkbox>
</div> </div>
<label htmlFor="comment" className="font-medium">
Comment
</label>
<Form.TextArea <Form.TextArea
field="comment"
label="Comment"
initValue={f.comment} initValue={f.comment}
autosize autosize
rows={2} rows={2}
/> />
</Form> </Form>
<div className="flex justify-end"> <div className="flex justify-end mt-2">
<Button icon={<IconDeleteStroked />} type="danger"> <Button icon={<IconDeleteStroked />} type="danger">
Delete Delete
</Button> </Button>
@ -152,7 +158,66 @@ export default function DiagramOverview(props) {
</Card> </Card>
<Row gutter={6} className="mt-2"> <Row gutter={6} className="mt-2">
<Col span={8}> <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>
<Col span={8}> <Col span={8}>
<Button block>Add index</Button> <Button block>Add index</Button>

13
src/components/editor_panel.jsx
View File

@ -11,6 +11,7 @@ import { Parser } from "node-sql-parser";
import { Tabs } from "@douyinfe/semi-ui"; import { Tabs } from "@douyinfe/semi-ui";
import "react-resizable/css/styles.css"; import "react-resizable/css/styles.css";
import DiagramOverview from "./diagram_overview"; import DiagramOverview from "./diagram_overview";
import { defaultTableTheme } from "../data/data";
const myTheme = createTheme({ const myTheme = createTheme({
dark: "light", dark: "light",
@ -37,7 +38,7 @@ export default function EditorPanel(props) {
]; ];
const contentList = [ const contentList = [
<div> <div>
<DiagramOverview tables={props.tables} /> <DiagramOverview tables={props.tables} setTables={props.setTables} />
</div>, </div>,
<div> <div>
<Shape /> <Shape />
@ -79,8 +80,8 @@ export default function EditorPanel(props) {
<button <button
onClick={() => { onClick={() => {
const newTable = { const newTable = {
id: props.tables.length + 1, id: props.tables.length,
name: `Table ${props.tables.length + 1}`, name: `Table ${props.tables.length}`,
x: 0, x: 0,
y: 0, y: 0,
fields: [ fields: [
@ -97,6 +98,7 @@ export default function EditorPanel(props) {
], ],
comment: "", comment: "",
indices: [], indices: [],
color: defaultTableTheme,
}; };
props.setTables((prev) => { props.setTables((prev) => {
const updatedTables = [...prev, newTable]; const updatedTables = [...prev, newTable];
@ -137,8 +139,8 @@ export default function EditorPanel(props) {
} }
map.current.set(t.table, t); map.current.set(t.table, t);
const newTable = { const newTable = {
id: props.tables.length + 1, id: props.tables.length,
name: `Table ${props.tables.length + 1}`, name: `Table ${props.tables.length}`,
x: 0, x: 0,
y: 0, y: 0,
fields: [ fields: [
@ -155,6 +157,7 @@ export default function EditorPanel(props) {
], ],
comment: "", comment: "",
indices: [], indices: [],
color: defaultTableTheme,
}; };
props.setTables((prev) => [...prev, newTable]); props.setTables((prev) => [...prev, newTable]);
}); });

10
src/components/table.jsx
View File

@ -113,7 +113,10 @@ export default function Table(props) {
isHovered ? "border-sky-500" : "border-gray-500" isHovered ? "border-sky-500" : "border-gray-500"
} bg-gray-300 select-none rounded-md`} } 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 <form
onSubmit={(e) => e.preventDefault()} onSubmit={(e) => e.preventDefault()}
@ -138,10 +141,7 @@ export default function Table(props) {
} }
{isHovered && ( {isHovered && (
<div className="flex justify-end items-center"> <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 /> <IconEdit />
</button> </button>
<button <button

175
src/data/data.js
View File

@ -1,87 +1,102 @@
const menu = { const menu = {
File: { File: {
New: [], New: [],
"New window": [], "New window": [],
Save: [], Save: [],
"Save as": [], "Save as": [],
Share: [], Share: [],
Rename: [], Rename: [],
Import: [], Import: [],
"Export as": [".png", ".jpg", ".pdf", ".xml"], "Export as": [".png", ".jpg", ".pdf", ".xml"],
"Export source": ["MySQL", "PostgreSQL", "DBML"], "Export source": ["MySQL", "PostgreSQL", "DBML"],
Properties: [], Properties: [],
Close: [], Close: [],
}, },
Edit: { Edit: {
Undo: [], Undo: [],
Redo: [], Redo: [],
Cut: [], Cut: [],
Copy: [], Copy: [],
"Copy as image": [], "Copy as image": [],
Paste: [], Paste: [],
Delete: [], Delete: [],
"Edit table": [], "Edit table": [],
}, },
View: { View: {
Toolbar: [], Toolbar: [],
Grid: [], Grid: [],
Sidebar: [], Sidebar: [],
Editor: [], Editor: [],
"Reset view": [], "Reset view": [],
"View schema": [], "View schema": [],
Theme: ["Light", "Dark"], Theme: ["Light", "Dark"],
"Zoom in": [], "Zoom in": [],
"Zoom out": [], "Zoom out": [],
Fullscreen: [], Fullscreen: [],
}, },
Insert: { Insert: {
"New table": [], "New table": [],
"New relationship": [], "New relationship": [],
Note: [], Note: [],
Image: [], Image: [],
Textbox: [], Textbox: [],
Shape: ["Rhombus", "Rectangle"], Shape: ["Rhombus", "Rectangle"],
}, },
Logs: { Logs: {
"Open logs": [], "Open logs": [],
"Commit changes": [], "Commit changes": [],
"Revert changes": [], "Revert changes": [],
"View commits": [], "View commits": [],
}, },
Help: { Help: {
Shortcuts: [], Shortcuts: [],
"Ask us on discord": [], "Ask us on discord": [],
"Tweet us": [], "Tweet us": [],
"Found a bug": [], "Found a bug": [],
}, },
}; };
const sqlDataTypes = [ const sqlDataTypes = [
"INT", "INT",
"SMALLINT", "SMALLINT",
"BIGINT", "BIGINT",
"DECIMAL", "DECIMAL",
"NUMERIC", "NUMERIC",
"FLOAT", "FLOAT",
"REAL", "REAL",
"DOUBLE PRECISION", "DOUBLE PRECISION",
"CHAR", "CHAR",
"VARCHAR", "VARCHAR",
"TEXT", "TEXT",
"DATE", "DATE",
"TIME", "TIME",
"TIMESTAMP", "TIMESTAMP",
"INTERVAL", "INTERVAL",
"BOOLEAN", "BOOLEAN",
"BINARY", "BINARY",
"VARBINARY", "VARBINARY",
"BLOB", "BLOB",
"CLOB", "CLOB",
"UUID", "UUID",
"XML", "XML",
"JSON", "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 };