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

added timeline

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:52 +03:00
parent d61a90530f
commit 7426012154
22 changed files with 267 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/blank_pfp.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/bot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/calendar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/chat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/assets/group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/icon_136.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/icon_64.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/logo_36.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/logo_48.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/logo_80.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
src/assets/process.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

4
src/components/area.jsx
View File

@ -118,6 +118,7 @@ export default function Area(props) {
aid: props.areaData.id,
undo: editField,
redo: { name: e.target.value },
message: `Edit area name to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -159,6 +160,7 @@ export default function Area(props) {
aid: props.areaData.id,
undo: { color: props.areaData.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);
@ -194,6 +196,7 @@ export default function Area(props) {
aid: props.areaData.id,
undo: { color: props.areaData.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);
@ -251,6 +254,7 @@ export default function Area(props) {
aid: props.areaData.id,
undo: editField,
redo: { name: props.areaData.name },
message: `Edit area name to ${props.areaData.name}`,
},
]);
setRedoStack([]);

3
src/components/area_overview.jsx
View File

@ -117,6 +117,7 @@ export default function AreaOverview(props) {
aid: i,
undo: editField,
redo: { name: e.target.value },
message: `Edit area name to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -158,6 +159,7 @@ export default function AreaOverview(props) {
aid: i,
undo: { color: a.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);
@ -191,6 +193,7 @@ export default function AreaOverview(props) {
aid: i,
undo: { color: a.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);

29
src/components/canvas.jsx
View File

@ -226,8 +226,34 @@ export default function Canvas(props) {
const didPan = () =>
!(settings.pan.x === panning.x && settings.pan.y === panning.y);
const getMoveInfo = () => {
switch (dragging.element) {
case ObjectType.TABLE:
return {
name: "table",
x: tables[dragging.id].x,
y: tables[dragging.id].y,
};
case ObjectType.AREA:
return {
name: "area",
x: areas[dragging.id].x,
y: areas[dragging.id].y,
};
case ObjectType.NOTE:
return {
name: "note",
x: notes[dragging.id].x,
y: notes[dragging.id].y,
};
default:
return false;
}
};
const handleMouseUp = (e) => {
if (coordsDidUpdate(dragging.element)) {
const info = getMoveInfo();
setUndoStack((prev) => [
...prev,
{
@ -236,6 +262,7 @@ export default function Canvas(props) {
x: dragging.prevX,
y: dragging.prevY,
id: dragging.id,
message: `Move ${info.name} to (${info.x}, ${info.y})`,
},
]);
setRedoStack([]);
@ -248,6 +275,7 @@ export default function Canvas(props) {
action: Action.PAN,
undo: { x: panning.x, y: panning.y },
redo: settings.pan,
message: `Move diagram to (${settings.pan.x}, ${settings.pan.y})`,
},
]);
setRedoStack([]);
@ -272,6 +300,7 @@ export default function Canvas(props) {
height: initCoords.height,
},
redo: areas[areaResize.id],
message: `Resize area`,
},
]);
setRedoStack([]);

6
src/components/control_panel.jsx
View File

@ -192,8 +192,6 @@ export default function ControlPanel(props) {
.filter((e) => e.id !== tables[a.tid].fields.length - 1)
.map((t, i) => ({ ...t, id: i })),
});
} else if (a.component === "comment") {
updateTable(a.tid, a.undo, false);
} else if (a.component === "index_add") {
updateTable(a.tid, {
indices: tables[a.tid].indices
@ -320,8 +318,6 @@ export default function ControlPanel(props) {
},
],
});
} else if (a.component === "comment") {
updateTable(a.tid, a.redo, false);
} else if (a.component === "index_add") {
setTables((prev) =>
prev.map((table) => {
@ -359,7 +355,7 @@ export default function ControlPanel(props) {
.map((t, i) => ({ ...t, id: i })),
});
} else if (a.component === "self") {
updateTable(a.tid, a.redo);
updateTable(a.tid, a.redo, false);
}
} else if (a.element === ObjectType.RELATIONSHIP) {
setRelationships((prev) =>

4
src/components/note.jsx
View File

@ -105,6 +105,7 @@ export default function Note(props) {
nid: props.data.id,
undo: editField,
redo: { content: e.target.value, height: newHeight },
message: `Edit note content to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -155,6 +156,7 @@ export default function Note(props) {
nid: props.data.id,
undo: editField,
redo: { title: e.target.value },
message: `Edit note title to "${e.target.name}"`,
},
]);
setRedoStack([]);
@ -180,6 +182,7 @@ export default function Note(props) {
nid: props.data.id,
undo: { color: props.data.color },
redo: { color: c },
message: `Edit note color to ${c}`,
},
]);
setRedoStack([]);
@ -233,6 +236,7 @@ export default function Note(props) {
aid: props.data.id,
undo: editField,
redo: { title: props.data.title },
message: `Edit note title to "${props.data.title}"`,
},
]);
setRedoStack([]);

2
src/components/notes_overview.jsx
View File

@ -129,6 +129,7 @@ export default function NotesOverview(props) {
nid: i,
undo: editField,
redo: { content: e.target.value, height: newHeight },
message: `Edit note content to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -156,6 +157,7 @@ export default function NotesOverview(props) {
nid: i,
undo: { color: n.color },
redo: { color: c },
message: `Edit note color to ${c}`,
},
]);
setRedoStack([]);

5
src/components/reference_overview.jsx
View File

@ -153,6 +153,7 @@ export default function ReferenceOverview(props) {
endTableId: r.startTableId,
endFieldId: r.startFieldId,
},
message: `Swap primary and foreign tables`,
},
]);
setRedoStack([]);
@ -201,6 +202,7 @@ export default function ReferenceOverview(props) {
rid: i,
undo: { cardinality: r.cardinality },
redo: { cardinality: value },
message: `Edit relationship cardinality`,
},
]);
setRedoStack([]);
@ -230,6 +232,7 @@ export default function ReferenceOverview(props) {
rid: i,
undo: { updateConstraint: r.updateConstraint },
redo: { updateConstraint: value },
message: `Edit relationship update constraint`,
},
]);
setRedoStack([]);
@ -259,6 +262,7 @@ export default function ReferenceOverview(props) {
rid: i,
undo: { deleteConstraint: r.deleteConstraint },
redo: { deleteConstraint: value },
message: `Edit relationship delete constraint`,
},
]);
setRedoStack([]);
@ -291,6 +295,7 @@ export default function ReferenceOverview(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Make foreign key mandetory`,
},
]);
setRedoStack([]);

145
src/components/sidebar.jsx
View File

@ -1,12 +1,143 @@
import React from "react";
import React, { useContext, useState } from "react";
import chatIcon from "../assets/chat.png";
import botIcon from "../assets/bot.png";
import teamIcon from "../assets/group.png";
import timeLine from "../assets/process.png";
import todo from "../assets/calendar.png";
import { Tooltip, SideSheet } from "@douyinfe/semi-ui";
import { UndoRedoContext } from "../pages/editor";
// import {
// IllustrationNoContent,
// IllustrationNoContentDark,
// } from "@douyinfe/semi-illustrations";
export default function Sidebar() {
const SidesheetType = {
NONE: 0,
CHAT: 1,
TEAM: 2,
TODO: 3,
TIMELINE: 4,
BOT: 5,
};
const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
const { undoStack } = useContext(UndoRedoContext);
const getTitle = (type) => {
switch (type) {
case SidesheetType.TIMELINE:
return (
<div className="flex items-center">
<img src={timeLine} className="w-7" alt="chat icon" />
<div className="ms-3">Timeline</div>
</div>
);
case SidesheetType.CHAT:
return (
<div className="flex items-center">
<img src={chatIcon} className="w-7" alt="chat icon" />
<div className="ms-3">Chat</div>
</div>
);
case SidesheetType.TEAM:
return (
<div className="flex items-center">
<img src={teamIcon} className="w-7" alt="chat icon" />
<div className="ms-3">Your team</div>
</div>
);
default:
break;
}
};
const getContent = (type) => {
switch (type) {
case SidesheetType.TIMELINE:
return getTimeline();
default:
break;
}
};
return (
<div className="px-3 right-0 bg-white h-full">
<div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
<div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
<div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
<div className="w-12 h-12 bg-blue-200 rounded-full mb-4"></div>
</div>
<>
<div className="px-3 py-3 shadow-lg h-full select-none">
<Tooltip content="Chat">
<button
className="block"
onClick={() => setSidesheet(SidesheetType.CHAT)}
>
<img src={chatIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
<Tooltip content="Team">
<button className="block">
<img src={teamIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
<Tooltip content="To-do">
<button className="block">
<img src={todo} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
<Tooltip content="Timeline">
<button
className="block"
onClick={() => setSidesheet(SidesheetType.TIMELINE)}
>
<img src={timeLine} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
<Tooltip content="Botle">
<button className="block">
<img src={botIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
</div>
<SideSheet
visible={sidesheet !== SidesheetType.NONE}
onCancel={() => setSidesheet(SidesheetType.NONE)}
width={340}
title={getTitle(sidesheet)}
style={{ paddingBottom: "16px" }}
>
{getContent(sidesheet)}
</SideSheet>
</>
);
function getTimeline() {
if (undoStack.length > 0) {
return (
<div>
<hr />
{[...undoStack].reverse().map((e) => (
<>
<div className="flex items-center py-1">
<i className="block fa-regular fa-circle fa-xs"></i>
<div className="ms-2">{e.message}</div>
</div>
<hr />
</>
))}
</div>
);
} else {
return (
<div className="mt-4">
You havent added anything to your diagram yet.
</div>
// <Empty
// className="mt-5"
// image={<IllustrationNoContent style={{ width: 160, height: 160 }} />}
// darkModeImage={
// <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
// }
// title="No activity"
// description="You have not added anything to your diagram yet."
// />
);
}
}
}

39
src/components/table.jsx
View File

@ -289,6 +289,7 @@ export default function Table(props) {
tid: props.tableData.id,
undo: editField,
redo: { name: e.target.value },
message: `Edit table name to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -318,6 +319,7 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { name: e.target.value },
message: `Edit table field name to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -348,6 +350,7 @@ export default function Table(props) {
fid: j,
undo: { type: f.type },
redo: { type: value },
message: `Edit table field type to "${value}"`,
},
]);
setRedoStack([]);
@ -380,6 +383,9 @@ export default function Table(props) {
fid: j,
undo: { notNull: f.notNull },
redo: { notNull: !f.notNull },
message: `Edit table field to${
f.notNull ? "" : " not"
} null`,
},
]);
setRedoStack([]);
@ -405,6 +411,9 @@ export default function Table(props) {
fid: j,
undo: { primary: f.primary },
redo: { primary: !f.primary },
message: `Edit table field to${
f.primary ? " not" : ""
} primary`,
},
]);
setRedoStack([]);
@ -447,6 +456,7 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { default: e.target.value },
message: `Edit table field default to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -484,6 +494,9 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { values: f.values },
message: `Edit table field values to "${JSON.stringify(
f.values
)}"`,
},
]);
setRedoStack([]);
@ -518,6 +531,7 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { length: e.target.value },
message: `Edit table field length to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -547,6 +561,7 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { check: e.target.value },
message: `Edit table field check expression to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -574,6 +589,9 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
f.unique ? " not" : ""
} unique`,
},
]);
setRedoStack([]);
@ -613,6 +631,9 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
f.primary ? " not" : ""
} auto increment`,
},
]);
setRedoStack([]);
@ -649,6 +670,7 @@ export default function Table(props) {
fid: j,
undo: editField,
redo: { comment: e.target.value },
message: `Edit table field comment to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -667,6 +689,7 @@ export default function Table(props) {
component: "field_delete",
tid: props.tableData.id,
data: f,
message: `Delete field`,
},
]);
setRedoStack([]);
@ -738,6 +761,9 @@ export default function Table(props) {
fields: [...value],
name: `${value.join("_")}_index`,
},
message: `Edit index fields to "${JSON.stringify(
value
)}"`,
},
]);
setRedoStack([]);
@ -785,6 +811,9 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
idx.unique ? " not" : ""
} unique`,
},
]);
setRedoStack([]);
@ -815,6 +844,7 @@ export default function Table(props) {
component: "index_delete",
tid: props.tableData.id,
data: idx,
message: `Delete index`,
},
]);
setRedoStack([]);
@ -868,10 +898,11 @@ export default function Table(props) {
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "comment",
component: "self",
tid: props.tableData.id,
undo: editField,
redo: { comment: e.target.value },
message: `Edit table comment to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -898,6 +929,7 @@ export default function Table(props) {
tid: props.tableData.id,
undo: { color: props.tableData.color },
redo: { color: defaultTableTheme },
message: `Edit table color to default`,
},
]);
setRedoStack([]);
@ -929,6 +961,7 @@ export default function Table(props) {
tid: props.tableData.id,
undo: { color: props.tableData.color },
redo: { color: c },
message: `Edit table color to ${c}`,
},
]);
setRedoStack([]);
@ -961,6 +994,7 @@ export default function Table(props) {
tid: props.tableData.id,
undo: { color: props.tableData.color },
redo: { color: c },
message: `Edit table color to ${c}`,
},
]);
setRedoStack([]);
@ -997,6 +1031,7 @@ export default function Table(props) {
element: ObjectType.TABLE,
component: "index_add",
tid: props.tableData.id,
message: `Add index`,
},
]);
setRedoStack([]);
@ -1026,6 +1061,7 @@ export default function Table(props) {
element: ObjectType.TABLE,
component: "field_add",
tid: props.tableData.id,
message: `Add field`,
},
]);
setRedoStack([]);
@ -1120,6 +1156,7 @@ export default function Table(props) {
component: "field_delete",
tid: props.tableData.id,
data: fieldData,
message: `Delete field`,
},
]);
setRedoStack([]);

35
src/components/table_overview.jsx
View File

@ -150,6 +150,7 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { name: e.target.value },
message: `Edit table field name to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -180,10 +181,10 @@ export default function TableOverview(props) {
fid: j,
undo: { type: f.type },
redo: { type: value },
message: `Edit table field type to ${value}`,
},
]);
setRedoStack([]);
const incr =
f.increment &&
(value === "INT" ||
@ -213,6 +214,9 @@ export default function TableOverview(props) {
fid: j,
undo: { notNull: f.notNull },
redo: { notNull: !f.notNull },
message: `Edit table field to${
f.notNull ? "" : " not"
} null`,
},
]);
setRedoStack([]);
@ -238,6 +242,9 @@ export default function TableOverview(props) {
fid: j,
undo: { primary: f.primary },
redo: { primary: !f.primary },
message: `Edit table field to${
f.primary ? " not" : ""
} primary`,
},
]);
setRedoStack([]);
@ -281,6 +288,7 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { default: e.target.value },
message: `Edit table field default to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -318,6 +326,9 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { values: f.values },
message: `Edit table field values to "${JSON.stringify(
f.values
)}"`,
},
]);
setRedoStack([]);
@ -351,6 +362,7 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { length: e.target.value },
message: `Edit table field length to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -384,6 +396,7 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { check: e.target.value },
message: `Edit table field check expression to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -450,6 +463,9 @@ export default function TableOverview(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
f.increment ? " not" : ""
} auto increment`,
},
]);
setRedoStack([]);
@ -487,6 +503,7 @@ export default function TableOverview(props) {
fid: j,
undo: editField,
redo: { comment: e.target.value },
message: `Edit field comment to "${e.target.value}"`,
},
]);
setRedoStack([]);
@ -505,6 +522,7 @@ export default function TableOverview(props) {
component: "field_delete",
tid: t.id,
data: f,
message: `Delete field`,
},
]);
setRedoStack([]);
@ -586,6 +604,9 @@ export default function TableOverview(props) {
fields: [...value],
name: `${value.join("_")}_index`,
},
message: `Edit index fields to "${JSON.stringify(
value
)}"`,
},
]);
setRedoStack([]);
@ -635,6 +656,9 @@ export default function TableOverview(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${
idx.unique ? " not" : ""
} unique`,
},
]);
setRedoStack([]);
@ -666,6 +690,7 @@ export default function TableOverview(props) {
component: "index_delete",
tid: t.id,
data: idx,
message: `Delete index`,
},
]);
setRedoStack([]);
@ -725,10 +750,11 @@ export default function TableOverview(props) {
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "comment",
component: "self",
tid: i,
undo: editField,
redo: { comment: e.target.value },
message: `Edit table comment to ${e.target.value}`,
},
]);
setRedoStack([]);
@ -757,6 +783,7 @@ export default function TableOverview(props) {
tid: i,
undo: { color: t.color },
redo: { color: defaultTableTheme },
message: `Edit table color to default`,
},
]);
setRedoStack([]);
@ -786,6 +813,7 @@ export default function TableOverview(props) {
tid: i,
undo: { color: t.color },
redo: { color: c },
message: `Edit table color to ${c}`,
},
]);
setRedoStack([]);
@ -820,6 +848,7 @@ export default function TableOverview(props) {
tid: i,
undo: { color: t.color },
redo: { color: c },
message: `Edit table color to ${c}`,
},
]);
setRedoStack([]);
@ -859,6 +888,7 @@ export default function TableOverview(props) {
element: ObjectType.TABLE,
component: "index_add",
tid: t.id,
message: `Add index`,
},
]);
setRedoStack([]);
@ -888,6 +918,7 @@ export default function TableOverview(props) {
element: ObjectType.TABLE,
component: "field_add",
tid: t.id,
message: `Add field`,
},
]);
setRedoStack([]);

12
src/pages/editor.jsx
View File

@ -104,6 +104,7 @@ export default function Editor(props) {
{
action: Action.ADD,
element: ObjectType.TABLE,
message: `Add new table`,
},
]);
setRedoStack([]);
@ -153,6 +154,7 @@ export default function Editor(props) {
{
action: Action.ADD,
element: ObjectType.AREA,
message: `Add new subject area`,
},
]);
setRedoStack([]);
@ -186,6 +188,7 @@ export default function Editor(props) {
{
action: Action.ADD,
element: ObjectType.NOTE,
message: `Add new note`,
},
]);
setRedoStack([]);
@ -201,6 +204,7 @@ export default function Editor(props) {
action: Action.ADD,
element: ObjectType.RELATIONSHIP,
data: data,
message: `Add new relationship`,
},
]);
setRedoStack([]);
@ -223,6 +227,7 @@ export default function Editor(props) {
action: Action.DELETE,
element: ObjectType.TABLE,
data: tables[id],
message: `Delete table`,
},
]);
setRedoStack([]);
@ -253,6 +258,7 @@ export default function Editor(props) {
action: Action.DELETE,
element: ObjectType.AREA,
data: areas[id],
message: `Delete subject area`,
},
]);
setRedoStack([]);
@ -278,6 +284,7 @@ export default function Editor(props) {
action: Action.DELETE,
element: ObjectType.NOTE,
data: notes[id],
message: `Delete note`,
},
]);
setRedoStack([]);
@ -303,6 +310,7 @@ export default function Editor(props) {
action: Action.DELETE,
element: ObjectType.RELATIONSHIP,
data: relationships[id],
message: `Delete relationship`,
},
]);
setRedoStack([]);
@ -417,8 +425,8 @@ export default function Editor(props) {
<div
className={
layout.header
? `flex h-[calc(100vh-123.93px)]`
: `flex h-[calc(100vh-51.97px)]`
? `flex h-[calc(100vh-120px)]`
: `flex h-[calc(100vh-52px)]`
}
onMouseUp={() => setResize(false)}
onMouseMove={dragHandler}