drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-10-13 05:35:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Diagram versioning (#560)

Browse Source 
* clean up sidesheet

* clean up sharing

* add revisions sidesheet

* update getCommits and clean up

* update date localization

* load diagram in read only mode from previous version

* disable input from control panel and popovers

* add restore warning modal

* separate share and versions

* update versions

* finalize versioning implementation, add pagination

* fix package-lock.json

* clear versions cache on flush storgae

* disable menubar items when in read only mode

* disable remaining fields in readonlt

* suppress eslint only-export-components rule

* show loading version progress
This commit is contained in:
1ilit
2025-08-24 22:06:58 +04:00
committed by GitHub
parent 1eb4e298e9
commit da7ccee51c
42 changed files with 3219 additions and 1713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.cjs
View File

@@ -6,7 +6,7 @@ module.exports = {
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
@@ -18,5 +18,6 @@ module.exports = {
{ allowConstantExport: true },
],
"react/prop-types": 0,
"react-refresh/only-export-components": "off",
},
};

3967
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "client-vite",
"name": "drawdb",
"private": true,
"version": "0.0.0",
"type": "module",
@@ -32,6 +32,8 @@
"jspdf": "^3.0.1",
"jszip": "^3.10.1",
"lexical": "^0.12.5",
"lodash": "^4.17.21",
"luxon": "^3.7.1",
"nanoid": "^5.1.5",
"node-sql-parser": "^5.3.11",
"oracle-sql-parser": "^0.1.0",

49
src/api/gists.js
View File

@@ -1,11 +1,12 @@
import axios from "axios";
const filename = "share.json";
const description = "drawDB diagram";
export const SHARE_FILENAME = "share.json";
export const VERSION_FILENAME = "versionned.json";
const description = "drawDB diagram";
const baseUrl = import.meta.env.VITE_BACKEND_URL;
export async function create(content) {
export async function create(filename, content) {
const res = await axios.post(`${baseUrl}/gists`, {
public: false,
filename,
@@ -16,11 +17,13 @@ export async function create(content) {
return res.data.data.id;
}
export async function patch(gistId, content) {
await axios.patch(`${baseUrl}/gists/${gistId}`, {
export async function patch(gistId, filename, content) {
const { deleted } = await axios.patch(`${baseUrl}/gists/${gistId}`, {
filename,
content,
});
return deleted;
}
export async function del(gistId) {
@@ -32,3 +35,39 @@ export async function get(gistId) {
return res.data;
}
export async function getCommits(gistId, perPage = 20, page = 1) {
const res = await axios.get(`${baseUrl}/gists/${gistId}/commits`, {
params: {
per_page: perPage,
page,
},
});
return res.data;
}
export async function getVersion(gistId, sha) {
const res = await axios.get(`${baseUrl}/gists/${gistId}/${sha}`);
return res.data;
}
export async function getCommitsWithFile(
gistId,
file,
limit = 10,
cursor = null,
) {
const res = await axios.get(
`${baseUrl}/gists/${gistId}/file-versions/${file}`,
{
params: {
limit,
cursor,
},
},
);
return res.data;
}

BIN
src/assets/calendar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/process.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/process_dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

5
src/components/EditorCanvas/Area.jsx
View File

@@ -179,6 +179,7 @@ export default function Area({
backgroundColor: "#2F68ADB3",
}}
onClick={lockUnlockArea}
disabled={layout.readOnly}
/>
<Popover
visible={areaIsOpen() && !layout.sidebar}
@@ -257,6 +258,7 @@ function EditPopoverContent({ data }) {
const { updateArea, deleteArea } = useAreas();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { t } = useTranslation();
const { layout } = useLayout();
const initialColorRef = useRef(data.color);
const handleColorPick = (color) => {
@@ -302,6 +304,7 @@ function EditPopoverContent({ data }) {
value={data.name}
placeholder={t("name")}
className="me-2"
readonly={layout.readOnly}
onChange={(value) => updateArea(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
@@ -325,6 +328,7 @@ function EditPopoverContent({ data }) {
/>
<ColorPicker
usePopover={true}
readOnly={layout.readOnly}
value={data.color}
onChange={(color) => updateArea(data.id, { color })}
onColorPick={(color) => handleColorPick(color)}
@@ -336,6 +340,7 @@ function EditPopoverContent({ data }) {
type="danger"
block
onClick={() => deleteArea(data.id, true)}
disabled={layout.readOnly}
>
{t("delete")}
</Button>

11
src/components/EditorCanvas/Canvas.jsx
View File

@@ -279,21 +279,24 @@ export default function Canvas() {
if (!e.isPrimary) return;
if (panning.isPanning) {
setTransform((prev) => ({
...prev,
pan: {
x:
panning.panStart.x +
(panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
panning.panStart.x +
(panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
y:
panning.panStart.y +
(panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
panning.panStart.y +
(panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
},
}));
return;
}
if(layout.readOnly) return;
if (linking) {
setLinkingLine({
...linkingLine,

9
src/components/EditorCanvas/Note.jsx
View File

@@ -249,6 +249,7 @@ export default function Note({ data, onPointerDown }) {
backgroundColor: "#2F68ADB3",
}}
onClick={lockUnlockNote}
disabled={layout.readOnly}
/>
<Popover
visible={
@@ -280,6 +281,7 @@ export default function Note({ data, onPointerDown }) {
value={data.title}
placeholder={t("title")}
className="me-2"
readonly={layout.readOnly}
onChange={(value) =>
updateNote(data.id, { title: value })
}
@@ -307,6 +309,7 @@ export default function Note({ data, onPointerDown }) {
/>
<ColorPicker
usePopover={true}
readOnly={layout.readOnly}
value={data.color}
onChange={(color) => updateNote(data.id, { color })}
onColorPick={(color) => handleColorPick(color)}
@@ -314,9 +317,10 @@ export default function Note({ data, onPointerDown }) {
</div>
<div className="flex">
<Button
icon={<IconDeleteStroked />}
type="danger"
block
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteNote(data.id, true)}
>
{t("delete")}
@@ -343,6 +347,7 @@ export default function Note({ data, onPointerDown }) {
</div>
<textarea
id={`note_${data.id}`}
readOnly={layout.readOnly}
value={data.content}
onChange={handleChange}
onFocus={(e) =>

2
src/components/EditorCanvas/Table.jsx
View File

@@ -171,6 +171,7 @@ export default function Table({
style={{
backgroundColor: "#2f68adb3",
}}
disabled={layout.readOnly}
onClick={lockUnlockTable}
/>
<Button
@@ -234,6 +235,7 @@ export default function Table({
block
style={{ marginTop: "8px" }}
onClick={() => deleteTable(tableData.id)}
disabled={layout.readOnly}
>
{t("delete")}
</Button>

124
src/components/EditorHeader/ControlPanel.jsx
View File

@@ -126,7 +126,7 @@ export default function ControlPanel({
const { selectedElement, setSelectedElement } = useSelect();
const { transform, setTransform } = useTransform();
const { t, i18n } = useTranslation();
const { setGistId } = useContext(IdContext);
const { version, setGistId } = useContext(IdContext);
const navigate = useNavigate();
const invertLayout = (component) =>
@@ -615,6 +615,9 @@ export default function ControlPanel({
}
};
const del = () => {
if (layout.readonly) {
return;
}
switch (selectedElement.element) {
case ObjectType.TABLE:
deleteTable(selectedElement.id);
@@ -630,6 +633,9 @@ export default function ControlPanel({
}
};
const duplicate = () => {
if (layout.readonly) {
return;
}
switch (selectedElement.element) {
case ObjectType.TABLE: {
const copiedTable = tables.find((t) => t.id === selectedElement.id);
@@ -685,6 +691,9 @@ export default function ControlPanel({
}
};
const paste = () => {
if (layout.readonly) {
return;
}
navigator.clipboard.readText().then((text) => {
let obj = null;
try {
@@ -718,6 +727,9 @@ export default function ControlPanel({
});
};
const cut = () => {
if (layout.readonly) {
return;
}
copy();
del();
};
@@ -747,10 +759,12 @@ export default function ControlPanel({
save: {
function: save,
shortcut: "Ctrl+S",
disabled: layout.readOnly,
},
save_as: {
function: saveDiagramAs,
shortcut: "Ctrl+Shift+S",
disabled: layout.readOnly,
},
save_as_template: {
function: () => {
@@ -775,6 +789,7 @@ export default function ControlPanel({
function: () => {
setModal(MODAL.RENAME);
},
disabled: layout.readOnly,
},
delete_diagram: {
warning: {
@@ -805,6 +820,7 @@ export default function ControlPanel({
{
function: fileImport,
name: "JSON",
disabled: layout.readOnly,
},
{
function: () => {
@@ -812,6 +828,7 @@ export default function ControlPanel({
setImportFrom(IMPORT_FROM.DBML);
},
name: "DBML",
disabled: layout.readOnly,
},
],
},
@@ -824,6 +841,7 @@ export default function ControlPanel({
setImportDb(DB.MYSQL);
},
name: "MySQL",
disabled: layout.readOnly,
},
{
function: () => {
@@ -831,6 +849,7 @@ export default function ControlPanel({
setImportDb(DB.POSTGRES);
},
name: "PostgreSQL",
disabled: layout.readOnly,
},
{
function: () => {
@@ -838,6 +857,7 @@ export default function ControlPanel({
setImportDb(DB.SQLITE);
},
name: "SQLite",
disabled: layout.readOnly,
},
{
function: () => {
@@ -845,6 +865,7 @@ export default function ControlPanel({
setImportDb(DB.MARIADB);
},
name: "MariaDB",
disabled: layout.readOnly,
},
{
function: () => {
@@ -852,6 +873,7 @@ export default function ControlPanel({
setImportDb(DB.MSSQL);
},
name: "MSSQL",
disabled: layout.readOnly,
},
{
function: () => {
@@ -860,6 +882,7 @@ export default function ControlPanel({
},
name: "Oracle",
label: "Beta",
disabled: layout.readOnly,
},
],
}),
@@ -868,6 +891,7 @@ export default function ControlPanel({
setModal(MODAL.IMPORT_SRC);
},
disabled: layout.readOnly,
},
export_source: {
...(database === DB.GENERIC && {
@@ -1159,10 +1183,12 @@ export default function ControlPanel({
undo: {
function: undo,
shortcut: "Ctrl+Z",
disabled: layout.readOnly || undoStack.length === 0,
},
redo: {
function: redo,
shortcut: "Ctrl+Y",
disabled: layout.readOnly || redoStack.length === 0,
},
clear: {
warning: {
@@ -1194,14 +1220,17 @@ export default function ControlPanel({
);
});
},
disabled: layout.readOnly,
},
edit: {
function: edit,
shortcut: "Ctrl+E",
disabled: layout.readOnly,
},
cut: {
function: cut,
shortcut: "Ctrl+X",
disabled: layout.readOnly,
},
copy: {
function: copy,
@@ -1210,14 +1239,17 @@ export default function ControlPanel({
paste: {
function: paste,
shortcut: "Ctrl+V",
disabled: layout.readOnly,
},
duplicate: {
function: duplicate,
shortcut: "Ctrl+D",
disabled: layout.readOnly,
},
delete: {
function: del,
shortcut: "Del",
disabled: layout.readOnly,
},
copy_as_image: {
function: copyAsImage,
@@ -1404,6 +1436,7 @@ export default function ControlPanel({
},
table_width: {
function: () => setModal(MODAL.TABLE_WIDTH),
disabled: layout.readOnly,
},
language: {
function: () => setModal(MODAL.LANGUAGE),
@@ -1417,6 +1450,7 @@ export default function ControlPanel({
message: t("are_you_sure_flush_storage"),
},
function: async () => {
localStorage.removeItem("versions_cache");
db.delete()
.then(() => {
Toast.success(t("storage_flushed"));
@@ -1513,6 +1547,8 @@ export default function ControlPanel({
/>
<Sidesheet
type={sidesheet}
title={title}
setTitle={setTitle}
onClose={() => setSidesheet(SIDESHEET.NONE)}
/>
</>
@@ -1603,47 +1639,46 @@ export default function ControlPanel({
<Divider layout="vertical" margin="8px" />
<Tooltip content={t("undo")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm flex items-center"
className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
disabled={undoStack.length === 0 || layout.readOnly}
onClick={undo}
>
<IconUndo
size="large"
style={{ color: undoStack.length === 0 ? "#9598a6" : "" }}
/>
<IconUndo size="large" />
</button>
</Tooltip>
<Tooltip content={t("redo")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm flex items-center"
className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
disabled={redoStack.length === 0 || layout.readOnly}
onClick={redo}
>
<IconRedo
size="large"
style={{ color: redoStack.length === 0 ? "#9598a6" : "" }}
/>
<IconRedo size="large" />
</button>
</Tooltip>
<Divider layout="vertical" margin="8px" />
<Tooltip content={t("add_table")} position="bottom">
<button
className="flex items-center py-1 px-2 hover-2 rounded-sm"
className="flex items-center py-1 px-2 hover-2 rounded-sm disabled:opacity-50"
onClick={() => addTable()}
disabled={layout.readOnly}
>
<IconAddTable />
</button>
</Tooltip>
<Tooltip content={t("add_area")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm flex items-center"
className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
onClick={() => addArea()}
disabled={layout.readOnly}
>
<IconAddArea />
</button>
</Tooltip>
<Tooltip content={t("add_note")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm flex items-center"
className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
onClick={() => addNote()}
disabled={layout.readOnly}
>
<IconAddNote />
</button>
@@ -1651,12 +1686,21 @@ export default function ControlPanel({
<Divider layout="vertical" margin="8px" />
<Tooltip content={t("save")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm flex items-center"
className="py-1 px-2 hover-2 rounded-sm flex items-center disabled:opacity-50"
onClick={save}
disabled={layout.readOnly}
>
<IconSaveStroked size="extra-large" />
</button>
</Tooltip>
<Tooltip content={t("versions")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
onClick={() => setSidesheet(SIDESHEET.VERSIONS)}
>
<i className="fa-solid fa-code-branch" />{" "}
</button>
</Tooltip>
<Tooltip content={t("to_do")} position="bottom">
<button
className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
@@ -1743,7 +1787,7 @@ export default function ControlPanel({
/>
)}
<div
className="text-xl me-1"
className="text-xl flex items-center gap-1 me-1"
onPointerEnter={(e) => e.isPrimary && setShowEditName(true)}
onPointerLeave={(e) => e.isPrimary && setShowEditName(false)}
onPointerDown={(e) => {
@@ -1751,14 +1795,24 @@ export default function ControlPanel({
// https://stackoverflow.com/a/70976017/1137077
e.target.releasePointerCapture(e.pointerId);
}}
onClick={() => setModal(MODAL.RENAME)}
onClick={!layout.readOnly && (() => setModal(MODAL.RENAME))}
>
{window.name.split(" ")[0] === "t" ? "Templates/" : "Diagrams/"}
{title}
<span>
{(window.name.split(" ")[0] === "t"
? "Templates/"
: "Diagrams/") + title}
</span>
{version && (
<Tag className="mt-1" color="blue" size="small">
{version.substring(0, 7)}
</Tag>
)}
</div>
{(showEditName || modal === MODAL.RENAME) && <IconEdit />}
{(showEditName || modal === MODAL.RENAME) && !layout.readOnly && (
<IconEdit />
)}
</div>
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className="flex justify-start text-md select-none me-2">
{Object.keys(menu).map((category) => (
<Dropdown
@@ -1785,6 +1839,7 @@ export default function ControlPanel({
key={i}
onClick={e.function}
className="flex justify-between"
disabled={e.disabled}
>
<span>{e.name}</span>
{e.label && (
@@ -1838,6 +1893,7 @@ export default function ControlPanel({
return (
<Dropdown.Item
key={index}
disabled={menu[category][item].disabled}
onClick={menu[category][item].function}
style={
menu[category][item].shortcut && {
@@ -1871,17 +1927,21 @@ export default function ControlPanel({
</Dropdown>
))}
</div>
<Button
size="small"
type="tertiary"
icon={
saveState === State.LOADING || saveState === State.SAVING ? (
<Spin size="small" />
) : null
}
>
{getState()}
</Button>
{layout.readOnly && <Tag size="small">{t("read_only")}</Tag>}
{!layout.readOnly && (
<Tag
size="small"
type="light"
prefixIcon={
saveState === State.LOADING ||
saveState === State.SAVING ? (
<Spin size="small" />
) : null
}
>
{getState()}
</Tag>
)}
</div>
</div>
</div>

3
src/components/EditorHeader/Modal/Rename.jsx
View File

@@ -1,14 +1,17 @@
import { Input } from "@douyinfe/semi-ui";
import { useTranslation } from "react-i18next";
import { useLayout } from "../../../hooks";
export default function Rename({ title, setTitle }) {
const { t } = useTranslation();
const { layout } = useLayout();
return (
<Input
placeholder={t("name")}
defaultValue={title}
onChange={(v) => setTitle(v)}
readonly={layout.readOnly}
/>
);
}

4
src/components/EditorHeader/Modal/SetTableWidth.jsx
View File

@@ -1,13 +1,15 @@
import { InputNumber } from "@douyinfe/semi-ui";
import { useSettings } from "../../../hooks";
import { useLayout, useSettings } from "../../../hooks";
export default function SetTableWidth() {
const { layout } = useLayout();
const { settings, setSettings } = useSettings();
return (
<InputNumber
className="w-full"
value={settings.tableWidth}
readonly={layout.readOnly}
onChange={(c) => {
if (c < 180) return;
setSettings((prev) => ({ ...prev, tableWidth: c }));

16
src/components/EditorHeader/Modal/Share.jsx
View File

@@ -13,7 +13,7 @@ import {
} from "../../../hooks";
import { databases } from "../../../data/databases";
import { MODAL } from "../../../data/constants";
import { create, del, patch } from "../../../api/gists";
import { create, patch, SHARE_FILENAME } from "../../../api/gists";
export default function Share({ title, setModal }) {
const { t } = useTranslation();
@@ -55,24 +55,26 @@ export default function Share({ title, setModal }) {
const unshare = useCallback(async () => {
try {
await del(gistId);
setGistId("");
const deleted = await patch(gistId, SHARE_FILENAME, undefined);
if (deleted) {
setGistId("");
}
setModal(MODAL.NONE);
} catch (e) {
console.error(e);
setError(e);
}
}, [gistId, setGistId, setModal]);
}, [gistId, setModal, setGistId]);
useEffect(() => {
const updateOrGenerateLink = async () => {
try {
setLoading(true);
if (!gistId || gistId === "") {
const id = await create(diagramToString());
const id = await create(SHARE_FILENAME, diagramToString());
setGistId(id);
} else {
await patch(gistId, diagramToString());
await patch(gistId, SHARE_FILENAME, diagramToString());
}
} catch (e) {
console.error(e);
@@ -116,7 +118,7 @@ export default function Share({ title, setModal }) {
{!error && (
<>
<div className="flex gap-3">
<Input value={url} size="large" />
<Input value={url} size="large" readonly />
</div>
<div className="text-xs mt-2">{t("share_info")}</div>
<div className="flex gap-2 mt-3">

42
src/components/EditorHeader/SideSheet/Sidesheet.jsx
View File

@@ -1,37 +1,21 @@
import { SideSheet as SemiUISideSheet } from "@douyinfe/semi-ui";
import { SIDESHEET } from "../../../data/constants";
import { useSettings } from "../../../hooks";
import timeLine from "../../../assets/process.png";
import timeLineDark from "../../../assets/process_dark.png";
import todo from "../../../assets/calendar.png";
import Timeline from "./Timeline";
import Todo from "./Todo";
import Versions from "./Versions";
import { useTranslation } from "react-i18next";
export default function Sidesheet({ type, onClose }) {
export default function Sidesheet({ type, title, setTitle, onClose }) {
const { t } = useTranslation();
const { settings } = useSettings();
function getTitle(type) {
switch (type) {
case SIDESHEET.TIMELINE:
return (
<div className="flex items-center">
<img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-7"
alt="chat icon"
/>
<div className="ms-3 text-lg">{t("timeline")}</div>
</div>
);
return t("timeline");
case SIDESHEET.TODO:
return (
<div className="flex items-center">
<img src={todo} className="w-7" alt="todo icon" />
<div className="ms-3 text-lg">{t("to_do")}</div>
</div>
);
return t("to_do");
case SIDESHEET.VERSIONS:
return t("versions");
default:
break;
}
@@ -43,6 +27,14 @@ export default function Sidesheet({ type, onClose }) {
return <Timeline />;
case SIDESHEET.TODO:
return <Todo />;
case SIDESHEET.VERSIONS:
return (
<Versions
open={type !== SIDESHEET.NONE}
title={title}
setTitle={setTitle}
/>
);
default:
break;
}
@@ -52,12 +44,12 @@ export default function Sidesheet({ type, onClose }) {
<SemiUISideSheet
visible={type !== SIDESHEET.NONE}
onCancel={onClose}
width={340}
title={getTitle(type)}
width={420}
title={<div className="text-lg">{getTitle(type)}</div>}
style={{ paddingBottom: "16px" }}
bodyStyle={{ padding: "0px" }}
>
{getContent(type)}
<div className="sidesheet-theme">{getContent(type)}</div>
</SemiUISideSheet>
);
}

4
src/components/EditorHeader/SideSheet/Timeline.jsx
View File

@@ -8,7 +8,7 @@ export default function Timeline() {
if (undoStack.length > 0) {
return (
<List className="sidesheet-theme">
<List>
{[...undoStack].reverse().map((e, i) => (
<List.Item
key={i}
@@ -24,6 +24,6 @@ export default function Timeline() {
</List>
);
} else {
return <div className="m-5 sidesheet-theme">{t("no_activity")}</div>;
return <div className="m-5">{t("no_activity")}</div>;
}
}

6
src/components/EditorHeader/SideSheet/Todo.jsx
View File

@@ -106,7 +106,7 @@ export default function Todo() {
return (
<>
<div className="flex justify-between items-center mx-5 mb-2 sidesheet-theme">
<div className="flex justify-between items-center mx-5 mb-2">
<Dropdown
render={
<Dropdown.Menu>
@@ -153,7 +153,7 @@ export default function Todo() {
</Button>
</div>
{tasks.length > 0 ? (
<List className="sidesheet-theme">
<List>
{tasks.map((task, i) => (
<List.Item
key={i}
@@ -267,7 +267,7 @@ export default function Todo() {
))}
</List>
) : (
<div className="m-5 sidesheet-theme">{t("no_tasks")}</div>
<div className="m-5">{t("no_tasks")}</div>
)}
</>
);

320
src/components/EditorHeader/SideSheet/Versions.jsx Normal file
View File

@@ -0,0 +1,320 @@
import { useCallback, useContext, useEffect, useState, useMemo } from "react";
import { IdContext } from "../../Workspace";
import { useTranslation } from "react-i18next";
import { Button, Spin, Steps, Tag, Toast } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons";
import {
create,
getCommitsWithFile,
getVersion,
patch,
get,
VERSION_FILENAME,
} from "../../../api/gists";
import _ from "lodash";
import { DateTime } from "luxon";
import {
useAreas,
useDiagram,
useEnums,
useLayout,
useNotes,
useTransform,
useTypes,
} from "../../../hooks";
import { databases } from "../../../data/databases";
const LIMIT = 10;
const STORAGE_KEY = "versions_cache";
function loadCache() {
try {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : {};
} catch {
return {};
}
}
function saveCache(cache) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
}
export default function Versions({ open, title, setTitle }) {
const { gistId, setGistId, version, setVersion } = useContext(IdContext);
const { areas, setAreas } = useAreas();
const { setLayout } = useLayout();
const { database, tables, relationships, setTables, setRelationships } =
useDiagram();
const { notes, setNotes } = useNotes();
const { types, setTypes } = useTypes();
const { enums, setEnums } = useEnums();
const { transform } = useTransform();
const { t, i18n } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
const [versions, setVersions] = useState([]);
const [hasMore, setHasMore] = useState(false);
const [cursor, setCursor] = useState(null);
const [isRecording, setIsRecording] = useState(false);
const [loadingVersion, setLoadingVersion] = useState(null);
const cacheRef = useMemo(() => loadCache(), []);
const diagramToString = useCallback(() => {
return JSON.stringify({
title,
tables,
relationships: relationships,
notes: notes,
subjectAreas: areas,
database: database,
...(databases[database].hasTypes && { types: types }),
...(databases[database].hasEnums && { enums: enums }),
transform: transform,
});
}, [
areas,
notes,
tables,
relationships,
database,
title,
enums,
types,
transform,
]);
const currentStep = useMemo(() => {
if (!version) return 0;
return versions.findIndex((v) => v.version === version);
}, [version, versions]);
const loadVersion = useCallback(
async (sha) => {
try {
setLoadingVersion(sha);
const version = await getVersion(gistId, sha);
setVersion(sha);
setLayout((prev) => ({ ...prev, readOnly: true }));
if (!version.data.files[VERSION_FILENAME]) {
return;
}
const content = version.data.files[VERSION_FILENAME].content;
const parsedDiagram = JSON.parse(content);
setTables(parsedDiagram.tables);
setRelationships(parsedDiagram.relationships);
setAreas(parsedDiagram.subjectAreas);
setNotes(parsedDiagram.notes);
setTitle(parsedDiagram.title);
if (databases[database].hasTypes) {
setTypes(parsedDiagram.types);
}
if (databases[database].hasEnums) {
setEnums(parsedDiagram.enums);
}
} catch (e) {
Toast.error(t("failed_to_load_diagram"));
} finally {
setLoadingVersion(null);
}
},
[
t,
gistId,
setTables,
setRelationships,
setAreas,
setVersion,
setLayout,
database,
setNotes,
setTypes,
setEnums,
setTitle,
],
);
const getRevisions = useCallback(
async (cursorParam) => {
try {
if (!gistId) return;
setIsLoading(true);
const cached = cacheRef[gistId];
if (cached && !cursorParam) {
setVersions(cached.versions);
setCursor(cached.cursor);
setHasMore(cached.hasMore);
setIsLoading(false);
return;
}
const res = await getCommitsWithFile(
gistId,
VERSION_FILENAME,
LIMIT,
cursorParam,
);
const newVersions = cursorParam ? [...versions, ...res.data] : res.data;
setVersions(newVersions);
setHasMore(res.pagination.hasMore);
setCursor(res.pagination.cursor);
cacheRef[gistId] = {
versions: newVersions,
cursor: res.pagination.cursor,
hasMore: res.pagination.hasMore,
};
saveCache(cacheRef);
} catch (e) {
Toast.error(t("oops_smth_went_wrong"));
} finally {
setIsLoading(false);
}
},
[gistId, versions, t, cacheRef],
);
const hasDiagramChanged = async () => {
if (!gistId) return true;
const previousVersion = await get(gistId);
if (!previousVersion.data.files[VERSION_FILENAME]) {
return true;
}
const previousDiagram = JSON.parse(
previousVersion.data.files[VERSION_FILENAME]?.content,
);
const currentDiagram = {
title,
tables,
relationships: relationships,
notes: notes,
subjectAreas: areas,
database: database,
...(databases[database].hasTypes && { types: types }),
...(databases[database].hasEnums && { enums: enums }),
transform: transform,
};
return !_.isEqual(previousDiagram, currentDiagram);
};
const recordVersion = async () => {
try {
setIsRecording(true);
const hasChanges = await hasDiagramChanged();
if (!hasChanges) {
Toast.info(t("no_changes_to_record"));
return;
}
if (gistId) {
await patch(gistId, VERSION_FILENAME, diagramToString());
} else {
const id = await create(VERSION_FILENAME, diagramToString());
setGistId(id);
}
delete cacheRef[gistId];
saveCache(cacheRef);
await getRevisions();
} catch (e) {
Toast.error(t("failed_to_record_version"));
} finally {
setIsRecording(false);
}
};
const onClearCache = () => {
delete cacheRef[gistId];
saveCache(cacheRef);
Toast.success(t("cache_cleared"));
};
useEffect(() => {
if (gistId && open) {
getRevisions();
}
}, [gistId, open, getRevisions]);
return (
<div className="mx-5 relative h-full">
<div className="sticky top-0 z-10 sidesheet-theme pb-2 grid grid-cols-3 gap-2">
<Button
className={cacheRef[gistId] ? "col-span-2" : "col-span-3"}
block
icon={isRecording ? <Spin /> : <IconPlus />}
disabled={isLoading || isRecording}
onClick={recordVersion}
>
{t("record_version")}
</Button>
{cacheRef[gistId] && (
<Button block type="danger" onClick={onClearCache}>
{t("clear_cache")}
</Button>
)}
</div>
{(!gistId || !versions.length) && !isLoading && (
<div className="my-3">{t("no_saved_versions")}</div>
)}
{gistId && (
<div className="my-3 overflow-y-auto">
<Steps direction="vertical" type="basic" current={currentStep}>
{versions.map((r) => (
<Steps.Step
key={r.version}
onClick={() => loadVersion(r.version)}
className="group"
title={
<div className="flex justify-between items-center w-full">
<Tag>{r.version.substring(0, 7)}</Tag>
<span className="text-xs hidden group-hover:inline-block">
{t("click_to_view")}
</span>
</div>
}
description={`${t("commited_at")} ${DateTime.fromISO(
r.committed_at,
)
.setLocale(i18n.language)
.toLocaleString(DateTime.DATETIME_MED)}`}
icon={
r.version === loadingVersion ? (
<Spin size="small" />
) : (
<i className="text-sm fa-solid fa-asterisk ms-1" />
)
}
/>
))}
</Steps>
</div>
)}
{isLoading && !isRecording && (
<div className="text-blue-500 text-center my-3">
<Spin size="middle" />
<div>{t("loading")}</div>
</div>
)}
{hasMore && !isLoading && (
<div className="text-center">
<Button onClick={() => getRevisions(cursor)}>{t("load_more")}</Button>
</div>
)}
</div>
);
}

8
src/components/EditorSidePanel/AreasTab/AreaDetails.jsx
View File

@@ -2,12 +2,13 @@ import { useState, useRef } from "react";
import { Button, Input } from "@douyinfe/semi-ui";
import ColorPicker from "../ColorPicker";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useAreas, useUndoRedo } from "../../../hooks";
import { useAreas, useLayout, useUndoRedo } from "../../../hooks";
import { Action, ObjectType } from "../../../data/constants";
import { useTranslation } from "react-i18next";
export default function AreaInfo({ data, i }) {
const { t } = useTranslation();
const { layout } = useLayout();
const { deleteArea, updateArea } = useAreas();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
@@ -53,6 +54,7 @@ export default function AreaInfo({ data, i }) {
<Input
value={data.name}
placeholder={t("name")}
readonly={layout.readOnly}
onChange={(value) => updateArea(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
@@ -77,12 +79,14 @@ export default function AreaInfo({ data, i }) {
<ColorPicker
usePopover={true}
value={data.color}
readOnly={layout.readOnly}
onChange={(color) => updateArea(i, { color })}
onColorPick={(color) => handleColorPick(color)}
/>
<Button
icon={<IconDeleteStroked />}
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteArea(i, true)}
/>
</div>

10
src/components/EditorSidePanel/AreasTab/AreasTab.jsx
View File

@@ -1,13 +1,14 @@
import { Button } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons";
import Empty from "../Empty";
import { useAreas } from "../../../hooks";
import { useAreas, useLayout } from "../../../hooks";
import SearchBar from "./SearchBar";
import AreaInfo from "./AreaDetails";
import { useTranslation } from "react-i18next";
export default function AreasTab() {
const { areas, addArea } = useAreas();
const { layout } = useLayout();
const { t } = useTranslation();
return (
@@ -15,7 +16,12 @@ export default function AreasTab() {
<div className="flex gap-2">
<SearchBar />
<div>
<Button icon={<IconPlus />} block onClick={() => addArea()}>
<Button
icon={<IconPlus />}
block
onClick={() => addArea()}
disabled={layout.readOnly}
>
{t("add_area")}
</Button>
</div>

4
src/components/EditorSidePanel/ColorPicker.jsx
View File

@@ -2,8 +2,9 @@ import { ColorPicker as SemiColorPicker } from "@douyinfe/semi-ui";
import { useState } from "react";
export default function ColorPicker({
children,
value,
readOnly,
children,
onChange,
onColorPick,
...props
@@ -25,6 +26,7 @@ export default function ColorPicker({
{...props}
value={SemiColorPicker.colorStringToValue(value)}
onChange={({ hex: color }) => {
if (readOnly) return;
setPickedColor(color);
onChange(color);
}}

13
src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx
View File

@@ -1,12 +1,13 @@
import { useState } from "react";
import { Button, Input, TagInput } from "@douyinfe/semi-ui";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useDiagram, useEnums, useUndoRedo } from "../../../hooks";
import { useDiagram, useEnums, useLayout, useUndoRedo } from "../../../hooks";
import { Action, ObjectType } from "../../../data/constants";
import { useTranslation } from "react-i18next";
export default function EnumDetails({ data, i }) {
const { t } = useTranslation();
const { layout } = useLayout();
const { deleteEnum, updateEnum } = useEnums();
const { tables, updateField } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -18,6 +19,7 @@ export default function EnumDetails({ data, i }) {
<div className="font-semibold">{t("Name")}: </div>
<Input
value={data.name}
readonly={layout.readOnly}
placeholder={t("name")}
validateStatus={data.name.trim() === "" ? "error" : "default"}
onChange={(value) => {
@@ -71,7 +73,11 @@ export default function EnumDetails({ data, i }) {
className="my-2"
placeholder={t("values")}
validateStatus={data.values.length === 0 ? "error" : "default"}
onChange={(v) => updateEnum(i, { values: v })}
onChange={(v) => {
if (layout.readOnly) return;
updateEnum(i, { values: v });
}}
onFocus={() => setEditField({ values: data.values })}
onBlur={() => {
if (JSON.stringify(editField.values) === JSON.stringify(data.values))
@@ -95,8 +101,9 @@ export default function EnumDetails({ data, i }) {
/>
<Button
block
icon={<IconDeleteStroked />}
type="danger"
icon={<IconDeleteStroked />}
disabled={layout.readOnly}
onClick={() => deleteEnum(i, true)}
>
{t("delete")}

10
src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx
View File

@@ -1,5 +1,5 @@
import { Button, Collapse } from "@douyinfe/semi-ui";
import { useEnums } from "../../../hooks";
import { useEnums, useLayout } from "../../../hooks";
import { IconPlus } from "@douyinfe/semi-icons";
import { useTranslation } from "react-i18next";
import SearchBar from "./SearchBar";
@@ -8,6 +8,7 @@ import Empty from "../Empty";
export default function EnumsTab() {
const { enums, addEnum } = useEnums();
const { layout } = useLayout();
const { t } = useTranslation();
return (
@@ -15,7 +16,12 @@ export default function EnumsTab() {
<div className="flex gap-2">
<SearchBar />
<div>
<Button icon={<IconPlus />} block onClick={() => addEnum()}>
<Button
block
icon={<IconPlus />}
onClick={() => addEnum()}
disabled={layout.readOnly}
>
{t("add_enum")}
</Button>
</div>

9
src/components/EditorSidePanel/NotesTab/NoteInfo.jsx
View File

@@ -3,10 +3,11 @@ import { Button, Collapse, TextArea, Input } from "@douyinfe/semi-ui";
import ColorPicker from "../ColorPicker";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { Action, ObjectType } from "../../../data/constants";
import { useNotes, useUndoRedo } from "../../../hooks";
import { useLayout, useNotes, useUndoRedo } from "../../../hooks";
import { useTranslation } from "react-i18next";
export default function NoteInfo({ data, nid }) {
const { layout } = useLayout();
const { updateNote, deleteNote } = useNotes();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
@@ -62,6 +63,7 @@ export default function NoteInfo({ data, nid }) {
<div className="font-semibold me-2 break-keep">{t("title")}:</div>
<Input
value={data.title}
readonly={layout.readOnly}
placeholder={t("title")}
onChange={(value) => updateNote(data.id, { title: value })}
onFocus={(e) => setEditField({ title: e.target.value })}
@@ -90,6 +92,7 @@ export default function NoteInfo({ data, nid }) {
placeholder={t("content")}
value={data.content}
autosize
readonly={layout.readOnly}
onChange={(value) => {
const textarea = document.getElementById(`note_${data.id}`);
textarea.style.height = "0";
@@ -127,13 +130,15 @@ export default function NoteInfo({ data, nid }) {
<div className="ms-2 flex flex-col gap-2">
<ColorPicker
usePopover={true}
readOnly={layout.readOnly}
value={data.color}
onChange={(color) => updateNote(data.id, { color })}
onColorPick={(color) => handleColorPick(color)}
/>
<Button
icon={<IconDeleteStroked />}
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteNote(nid, true)}
/>
</div>

10
src/components/EditorSidePanel/NotesTab/NotesTab.jsx
View File

@@ -1,6 +1,6 @@
import { Button, Collapse } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons";
import { useNotes, useSelect } from "../../../hooks";
import { useLayout, useNotes, useSelect } from "../../../hooks";
import Empty from "../Empty";
import SearchBar from "./SearchBar";
import NoteInfo from "./NoteInfo";
@@ -10,6 +10,7 @@ export default function NotesTab() {
const { notes, addNote } = useNotes();
const { selectedElement, setSelectedElement } = useSelect();
const { t } = useTranslation();
const { layout } = useLayout();
return (
<>
@@ -23,7 +24,12 @@ export default function NotesTab() {
}
/>
<div>
<Button icon={<IconPlus />} block onClick={() => addNote()}>
<Button
block
icon={<IconPlus />}
onClick={() => addNote()}
disabled={layout.readOnly}
>
{t("add_note")}
</Button>
</div>

16
src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx
View File

@@ -18,7 +18,7 @@ import {
Action,
ObjectType,
} from "../../../data/constants";
import { useDiagram, useUndoRedo } from "../../../hooks";
import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
import i18n from "../../../i18n/i18n";
import { useTranslation } from "react-i18next";
import { useMemo, useState } from "react";
@@ -38,6 +38,7 @@ export default function RelationshipInfo({ data }) {
const { setUndoStack, setRedoStack } = useUndoRedo();
const { tables, deleteRelationship, updateRelationship } = useDiagram();
const { t } = useTranslation();
const { layout } = useLayout();
const [editField, setEditField] = useState({});
const relValues = useMemo(() => {
@@ -98,6 +99,8 @@ export default function RelationshipInfo({ data }) {
};
const changeCardinality = (value) => {
if (layout.readOnly) return;
setUndoStack((prev) => [
...prev,
{
@@ -117,6 +120,8 @@ export default function RelationshipInfo({ data }) {
};
const changeConstraint = (key, value) => {
if (layout.readOnly) return;
const undoKey = `${key}Constraint`;
setUndoStack((prev) => [
...prev,
@@ -145,6 +150,7 @@ export default function RelationshipInfo({ data }) {
validateStatus={data.name.trim() === "" ? "error" : "default"}
placeholder={t("name")}
className="ms-2"
readonly={layout.readOnly}
onChange={(value) => updateRelationship(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
@@ -196,9 +202,10 @@ export default function RelationshipInfo({ data }) {
/>
<div className="mt-2">
<Button
icon={<IconLoopTextStroked />}
block
icon={<IconLoopTextStroked />}
onClick={swapKeys}
disabled={layout.readOnly}
>
{t("swap")}
</Button>
@@ -234,7 +241,7 @@ export default function RelationshipInfo({ data }) {
placeholder={t("label")}
onChange={(value) => updateRelationship(data.id, { manyLabel: value })}
onFocus={(e) => setEditField({ manyLabel: e.target.value })}
defaultValue="n"
readonly={layout.readOnly}
onBlur={(e) => {
if (e.target.value === editField.manyLabel) return;
setUndoStack((prev) => [
@@ -285,9 +292,10 @@ export default function RelationshipInfo({ data }) {
</Col>
</Row>
<Button
icon={<IconDeleteStroked />}
block
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteRelationship(data.id)}
>
{t("delete")}

19
src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
View File

@@ -9,13 +9,14 @@ import {
} from "@douyinfe/semi-ui";
import { Action, ObjectType } from "../../../data/constants";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useDiagram, useUndoRedo } from "../../../hooks";
import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
import { useTranslation } from "react-i18next";
import { dbToTypes } from "../../../data/datatypes";
import { databases } from "../../../data/databases";
export default function FieldDetails({ data, tid }) {
const { t } = useTranslation();
const { layout } = useLayout();
const { tables, database } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { updateField, deleteField } = useDiagram();
@@ -29,6 +30,7 @@ export default function FieldDetails({ data, tid }) {
className="my-2"
placeholder={t("default_value")}
value={data.default}
readonly={layout.readOnly}
disabled={dbToTypes[database][data.type].noDefault || data.increment}
onChange={(value) => updateField(tid, data.id, { default: value })}
onFocus={(e) => setEditField({ default: e.target.value })}
@@ -67,7 +69,10 @@ export default function FieldDetails({ data, tid }) {
addOnBlur
className="my-2"
placeholder={t("use_for_batch_input")}
onChange={(v) => updateField(tid, data.id, { values: v })}
onChange={(v) => {
if (layout.readOnly) return;
updateField(tid, data.id, { values: v });
}}
onFocus={() => setEditField({ values: data.values })}
onBlur={() => {
if (
@@ -102,6 +107,7 @@ export default function FieldDetails({ data, tid }) {
className="my-2 w-full"
placeholder={t("size")}
value={data.size}
readonly={layout.readOnly}
onChange={(value) => updateField(tid, data.id, { size: value })}
onFocus={(e) => setEditField({ size: e.target.value })}
onBlur={(e) => {
@@ -138,6 +144,7 @@ export default function FieldDetails({ data, tid }) {
? "default"
: "error"
}
readonly={layout.readOnly}
value={data.size}
onChange={(value) => updateField(tid, data.id, { size: value })}
onFocus={(e) => setEditField({ size: e.target.value })}
@@ -172,6 +179,7 @@ export default function FieldDetails({ data, tid }) {
placeholder={t("check")}
value={data.check}
disabled={data.increment}
readonly={layout.readOnly}
onChange={(value) => updateField(tid, data.id, { check: value })}
onFocus={(e) => setEditField({ check: e.target.value })}
onBlur={(e) => {
@@ -203,6 +211,7 @@ export default function FieldDetails({ data, tid }) {
<Checkbox
value="unique"
checked={data.unique}
disabled={layout.readOnly}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@@ -233,7 +242,7 @@ export default function FieldDetails({ data, tid }) {
value="increment"
checked={data.increment}
disabled={
!dbToTypes[database][data.type].canIncrement || data.isArray
!dbToTypes[database][data.type].canIncrement || data.isArray || layout.readOnly
}
onChange={(checkedValues) => {
setUndoStack((prev) => [
@@ -270,6 +279,7 @@ export default function FieldDetails({ data, tid }) {
<Checkbox
value="isArray"
checked={data.isArray}
disabled={layout.readOnly}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@@ -307,6 +317,7 @@ export default function FieldDetails({ data, tid }) {
<Checkbox
value="unsigned"
checked={data.unsigned}
disabled={layout.readOnly}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@@ -343,6 +354,7 @@ export default function FieldDetails({ data, tid }) {
className="my-2"
placeholder={t("comment")}
value={data.comment}
readonly={layout.readOnly}
autosize
rows={2}
onChange={(value) => updateField(tid, data.id, { comment: value })}
@@ -372,6 +384,7 @@ export default function FieldDetails({ data, tid }) {
icon={<IconDeleteStroked />}
type="danger"
block
disabled={layout.readOnly}
onClick={() => deleteField(data, tid)}
>
{t("delete")}

12
src/components/EditorSidePanel/TablesTab/IndexDetails.jsx
View File

@@ -1,12 +1,13 @@
import { Action, ObjectType } from "../../../data/constants";
import { Input, Button, Popover, Checkbox, Select } from "@douyinfe/semi-ui";
import { IconMore, IconDeleteStroked } from "@douyinfe/semi-icons";
import { useDiagram, useUndoRedo } from "../../../hooks";
import { useDiagram, useLayout, useUndoRedo } from "../../../hooks";
import { useTranslation } from "react-i18next";
import { useMemo, useState } from "react";
export default function IndexDetails({ data, fields, iid, tid }) {
const { t } = useTranslation();
const { layout } = useLayout();
const { tables, updateTable } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
@@ -22,6 +23,8 @@ export default function IndexDetails({ data, fields, iid, tid }) {
className="w-full"
value={data.fields}
onChange={(value) => {
if (layout.readOnly) return;
setUndoStack((prev) => [
...prev,
{
@@ -62,6 +65,7 @@ export default function IndexDetails({ data, fields, iid, tid }) {
<Input
value={data.name}
placeholder={t("name")}
readonly={layout.readOnly}
validateStatus={data.name.trim() === "" ? "error" : "default"}
onFocus={() =>
setEditField({
@@ -106,6 +110,7 @@ export default function IndexDetails({ data, fields, iid, tid }) {
<Checkbox
value="unique"
checked={data.unique}
disabled={layout.readOnly}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@@ -145,9 +150,10 @@ export default function IndexDetails({ data, fields, iid, tid }) {
></Checkbox>
</div>
<Button
icon={<IconDeleteStroked />}
type="danger"
block
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => {
setUndoStack((prev) => [
...prev,

22
src/components/EditorSidePanel/TablesTab/TableField.jsx
View File

@@ -2,7 +2,13 @@ import { useMemo, useState } from "react";
import { Action, ObjectType } from "../../../data/constants";
import { Input, Button, Popover, Select } from "@douyinfe/semi-ui";
import { IconMore, IconKeyStroked } from "@douyinfe/semi-icons";
import { useEnums, useDiagram, useTypes, useUndoRedo } from "../../../hooks";
import {
useEnums,
useDiagram,
useTypes,
useUndoRedo,
useLayout,
} from "../../../hooks";
import { useTranslation } from "react-i18next";
import { dbToTypes } from "../../../data/datatypes";
import { DragHandle } from "../../SortableList/DragHandle";
@@ -12,6 +18,7 @@ export default function TableField({ data, tid, index, inherited }) {
const { updateField } = useDiagram();
const { types } = useTypes();
const { enums } = useEnums();
const { layout } = useLayout();
const { tables, database } = useDiagram();
const { t } = useTranslation();
const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -20,7 +27,7 @@ export default function TableField({ data, tid, index, inherited }) {
return (
<div className="hover-1 my-2 flex gap-2 items-center">
<DragHandle id={data.id} />
<DragHandle readOnly={layout.readOnly} id={data.id} />
<div className="min-w-20 flex-1/3">
<Input
@@ -29,6 +36,7 @@ export default function TableField({ data, tid, index, inherited }) {
validateStatus={
data.name.trim() === "" || inherited ? "error" : "default"
}
readonly={layout.readOnly}
placeholder={t("name")}
onChange={(value) => updateField(tid, data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
@@ -77,6 +85,8 @@ export default function TableField({ data, tid, index, inherited }) {
validateStatus={data.type === "" ? "error" : "default"}
placeholder={t("type")}
onChange={(value) => {
if (layout.readOnly) return;
if (value === data.type) return;
setUndoStack((prev) => [
...prev,
@@ -142,10 +152,12 @@ export default function TableField({ data, tid, index, inherited }) {
<div>
<Button
type={data.notNull ? "tertiary" : "primary"}
title={t("nullable")}
type={data.notNull ? "tertiary" : "primary"}
theme={data.notNull ? "light" : "solid"}
onClick={() => {
if (layout.readOnly) return;
setUndoStack((prev) => [
...prev,
{
@@ -172,11 +184,13 @@ export default function TableField({ data, tid, index, inherited }) {
<div>
<Button
type={data.primary ? "primary" : "tertiary"}
title={t("primary")}
theme={data.primary ? "solid" : "light"}
type={data.primary ? "primary" : "tertiary"}
icon={<IconKeyStroked />}
onClick={() => {
if (layout.readOnly) return;
setUndoStack((prev) => [
...prev,
{

20
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
View File

@@ -9,7 +9,12 @@ import {
} from "@douyinfe/semi-ui";
import ColorPicker from "../ColorPicker";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useDiagram, useSaveState, useUndoRedo } from "../../../hooks";
import {
useDiagram,
useLayout,
useSaveState,
useUndoRedo,
} from "../../../hooks";
import { Action, ObjectType, State, DB } from "../../../data/constants";
import TableField from "./TableField";
import IndexDetails from "./IndexDetails";
@@ -21,6 +26,7 @@ export default function TableInfo({ data }) {
const { tables, database } = useDiagram();
const { t } = useTranslation();
const [indexActiveKey, setIndexActiveKey] = useState("");
const { layout } = useLayout();
const { deleteTable, updateTable, setTables } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { setSaveState } = useSaveState();
@@ -82,6 +88,7 @@ export default function TableInfo({ data }) {
validateStatus={data.name.trim() === "" ? "error" : "default"}
placeholder={t("name")}
className="ms-2"
readonly={layout.readOnly}
onChange={(value) => updateTable(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
@@ -139,6 +146,8 @@ export default function TableInfo({ data }) {
.filter((t) => t.id !== data.id)
.map((t) => ({ label: t.name, value: t.name }))}
onChange={(value) => {
if (layout.readOnly) return;
setUndoStack((prev) => [
...prev,
{
@@ -204,6 +213,7 @@ export default function TableInfo({ data }) {
<TextArea
field="comment"
value={data.comment}
readonly={layout.readOnly}
autosize
placeholder={t("comment")}
rows={1}
@@ -238,6 +248,7 @@ export default function TableInfo({ data }) {
<div className="flex justify-between items-center gap-1 mb-2">
<ColorPicker
usePopover={true}
readOnly={layout.readOnly}
value={data.color}
onChange={(color) => updateTable(data.id, { color })}
onColorPick={(color) => handleColorPick(color)}
@@ -245,6 +256,7 @@ export default function TableInfo({ data }) {
<div className="flex gap-1">
<Button
block
disabled={layout.readOnly}
onClick={() => {
setIndexActiveKey("1");
setUndoStack((prev) => [
@@ -277,6 +289,8 @@ export default function TableInfo({ data }) {
{t("add_index")}
</Button>
<Button
block
disabled={layout.readOnly}
onClick={() => {
const id = nanoid();
setUndoStack((prev) => [
@@ -312,13 +326,13 @@ export default function TableInfo({ data }) {
],
});
}}
block
>
{t("add_field")}
</Button>
<Button
icon={<IconDeleteStroked />}
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteTable(data.id)}
/>
</div>

14
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
View File

@@ -1,6 +1,6 @@
import { Collapse, Button } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons";
import { useSelect, useDiagram, useSaveState } from "../../../hooks";
import { useSelect, useDiagram, useSaveState, useLayout } from "../../../hooks";
import { ObjectType, State } from "../../../data/constants";
import { useTranslation } from "react-i18next";
import { DragHandle } from "../../SortableList/DragHandle";
@@ -13,6 +13,7 @@ export default function TablesTab() {
const { tables, addTable, setTables } = useDiagram();
const { selectedElement, setSelectedElement } = useSelect();
const { t } = useTranslation();
const { layout } = useLayout();
const { setSaveState } = useSaveState();
return (
@@ -20,7 +21,12 @@ export default function TablesTab() {
<div className="flex gap-2">
<SearchBar tables={tables} />
<div>
<Button icon={<IconPlus />} block onClick={() => addTable()}>
<Button
block
icon={<IconPlus />}
onClick={() => addTable()}
disabled={layout.readOnly}
>
{t("add_table")}
</Button>
</div>
@@ -60,6 +66,8 @@ export default function TablesTab() {
}
function TableListItem({ table }) {
const { layout } = useLayout();
return (
<div id={`scroll_table_${table.id}`}>
<Collapse.Panel
@@ -67,7 +75,7 @@ function TableListItem({ table }) {
header={
<>
<div className="flex items-center gap-2">
<DragHandle id={table.id} />
<DragHandle readOnly={layout.readOnly} id={table.id} />
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
{table.name}
</div>

23
src/components/EditorSidePanel/TypesTab/TypeField.jsx
View File

@@ -11,13 +11,20 @@ import {
Popover,
} from "@douyinfe/semi-ui";
import { IconDeleteStroked, IconMore } from "@douyinfe/semi-icons";
import { useUndoRedo, useTypes, useDiagram, useEnums } from "../../../hooks";
import {
useUndoRedo,
useTypes,
useDiagram,
useEnums,
useLayout,
} from "../../../hooks";
import { useTranslation } from "react-i18next";
import { dbToTypes } from "../../../data/datatypes";
export default function TypeField({ data, tid, fid }) {
const { types, updateType } = useTypes();
const { enums } = useEnums();
const { layout } = useLayout();
const { database } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
@@ -28,6 +35,7 @@ export default function TypeField({ data, tid, fid }) {
<Col span={10}>
<Input
value={data.name}
readonly={layout.readOnly}
validateStatus={data.name === "" ? "error" : "default"}
placeholder={t("name")}
onChange={(value) =>
@@ -86,6 +94,7 @@ export default function TypeField({ data, tid, fid }) {
validateStatus={data.type === "" ? "error" : "default"}
placeholder={t("type")}
onChange={(value) => {
if (layout.readOnly) return;
if (value === data.type) return;
setUndoStack((prev) => [
...prev,
@@ -160,13 +169,14 @@ export default function TypeField({ data, tid, fid }) {
}
className="my-2"
placeholder={t("use_for_batch_input")}
onChange={(v) =>
onChange={(v) => {
if (layout.readOnly) return;
updateType(tid, {
fields: types[tid].fields.map((e, id) =>
id === fid ? { ...data, values: v } : e,
),
})
}
});
}}
onFocus={() => setEditField({ values: data.values })}
onBlur={() => {
if (
@@ -202,6 +212,7 @@ export default function TypeField({ data, tid, fid }) {
className="my-2 w-full"
placeholder={t("size")}
value={data.size}
readonly={layout.readOnly}
onChange={(value) =>
updateType(tid, {
fields: types[tid].fields.map((e, id) =>
@@ -239,6 +250,7 @@ export default function TypeField({ data, tid, fid }) {
<Input
className="my-2 w-full"
placeholder={t("set_precision")}
readonly={layout.readOnly}
validateStatus={
/^\(\d+,\s*\d+\)$|^$/.test(data.size)
? "default"
@@ -277,9 +289,10 @@ export default function TypeField({ data, tid, fid }) {
</>
)}
<Button
icon={<IconDeleteStroked />}
block
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => {
setUndoStack((prev) => [
...prev,

13
src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
View File

@@ -10,11 +10,12 @@ import {
Card,
} from "@douyinfe/semi-ui";
import { IconDeleteStroked, IconPlus } from "@douyinfe/semi-icons";
import { useUndoRedo, useTypes, useDiagram } from "../../../hooks";
import { useUndoRedo, useTypes, useDiagram, useLayout } from "../../../hooks";
import TypeField from "./TypeField";
import { useTranslation } from "react-i18next";
export default function TypeInfo({ index, data }) {
const { layout } = useLayout();
const { deleteType, updateType } = useTypes();
const { tables, updateField } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -35,6 +36,7 @@ export default function TypeInfo({ index, data }) {
<div className="text-md font-semibold break-keep">{t("name")}: </div>
<Input
value={data.name}
readonly={layout.readOnly}
validateStatus={data.name === "" ? "error" : "default"}
placeholder={t("name")}
className="ms-2"
@@ -97,6 +99,7 @@ export default function TypeInfo({ index, data }) {
field="comment"
value={data.comment}
autosize
readonly={layout.readOnly}
placeholder={t("comment")}
rows={1}
onChange={(value) =>
@@ -130,6 +133,7 @@ export default function TypeInfo({ index, data }) {
<Col span={12}>
<Button
icon={<IconPlus />}
disabled={layout.readOnly}
onClick={() => {
setUndoStack((prev) => [
...prev,
@@ -162,10 +166,11 @@ export default function TypeInfo({ index, data }) {
</Col>
<Col span={12}>
<Button
icon={<IconDeleteStroked />}
type="danger"
onClick={() => deleteType(index)}
block
type="danger"
disabled={layout.readOnly}
icon={<IconDeleteStroked />}
onClick={() => deleteType(index)}
>
{t("delete")}
</Button>

10
src/components/EditorSidePanel/TypesTab/TypesTab.jsx
View File

@@ -1,6 +1,6 @@
import { Collapse, Button, Popover } from "@douyinfe/semi-ui";
import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
import { useSelect, useDiagram, useTypes } from "../../../hooks";
import { useSelect, useDiagram, useTypes, useLayout } from "../../../hooks";
import { DB, ObjectType } from "../../../data/constants";
import Searchbar from "./SearchBar";
import Empty from "../Empty";
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
export default function TypesTab() {
const { types, addType } = useTypes();
const { selectedElement, setSelectedElement } = useSelect();
const { layout } = useLayout();
const { database } = useDiagram();
const { t } = useTranslation();
@@ -18,7 +19,12 @@ export default function TypesTab() {
<div className="flex gap-2">
<Searchbar />
<div>
<Button icon={<IconPlus />} block onClick={() => addType()}>
<Button
block
icon={<IconPlus />}
onClick={() => addType()}
disabled={layout.readOnly}
>
{t("add_type")}
</Button>
</div>

7
src/components/SortableList/DragHandle.jsx
View File

@@ -1,12 +1,13 @@
import { IconHandle } from "@douyinfe/semi-icons";
import { useSortable } from "@dnd-kit/sortable";
export function DragHandle({ id }) {
export function DragHandle({ id, readOnly }) {
const { listeners } = useSortable({ id });
return (
<div
className="flex cursor-move items-center justify-center opacity-50 mt-0.5"
{...listeners}
className={`opacity-50 mt-0.5 ${readOnly ? "cursor-not-allowed" : "cursor-move"}`}
{...(!readOnly && listeners)}
>
<IconHandle />
</div>

100
src/components/Workspace.jsx
View File

@@ -19,28 +19,36 @@ import {
useEnums,
} from "../hooks";
import FloatingControls from "./FloatingControls";
import { Modal, Tag } from "@douyinfe/semi-ui";
import { Button, Modal, Tag } from "@douyinfe/semi-ui";
import { IconAlertTriangle } from "@douyinfe/semi-icons";
import { useTranslation } from "react-i18next";
import { databases } from "../data/databases";
import { isRtl } from "../i18n/utils/rtl";
import { useSearchParams } from "react-router-dom";
import { get } from "../api/gists";
import { get, SHARE_FILENAME } from "../api/gists";
export const IdContext = createContext({ gistId: "", setGistId: () => {} });
export const IdContext = createContext({
gistId: "",
setGistId: () => {},
version: "",
setVersion: () => {},
});
const SIDEPANEL_MIN_WIDTH = 384;
export default function WorkSpace() {
const [id, setId] = useState(0);
const [gistId, setGistId] = useState("");
const [version, setVersion] = useState("");
const [loadedFromGistId, setLoadedFromGistId] = useState("");
const [title, setTitle] = useState("Untitled Diagram");
const [resize, setResize] = useState(false);
const [width, setWidth] = useState(SIDEPANEL_MIN_WIDTH);
const [lastSaved, setLastSaved] = useState("");
const [showSelectDbModal, setShowSelectDbModal] = useState(false);
const [showRestoreModal, setShowRestoreModal] = useState(false);
const [selectedDb, setSelectedDb] = useState("");
const { layout } = useLayout();
const { layout, setLayout } = useLayout();
const { settings } = useSettings();
const { types, setTypes } = useTypes();
const { areas, setAreas } = useAreas();
@@ -67,8 +75,6 @@ export default function WorkSpace() {
};
const save = useCallback(async () => {
if (saveState !== State.SAVING) return;
const name = window.name.split(" ");
const op = name[0];
const saveAsDiagram = window.name === "" || op === "d" || op === "lt";
@@ -163,7 +169,6 @@ export default function WorkSpace() {
enums,
gistId,
loadedFromGistId,
saveState,
]);
const load = useCallback(async () => {
@@ -287,25 +292,24 @@ export default function WorkSpace() {
const loadFromGist = async (shareId) => {
try {
const res = await get(shareId);
const diagramSrc = res.data.files["share.json"].content;
const d = JSON.parse(diagramSrc);
setGistId(shareId);
const { data } = await get(shareId);
const parsedDiagram = JSON.parse(data.files[SHARE_FILENAME].content);
setUndoStack([]);
setRedoStack([]);
setGistId(shareId);
setLoadedFromGistId(shareId);
setDatabase(d.database);
setTitle(d.title);
setTables(d.tables);
setRelationships(d.relationships);
setNotes(d.notes);
setAreas(d.subjectAreas);
setTransform(d.transform);
if (databases[d.database].hasTypes) {
setTypes(d.types ?? []);
setDatabase(parsedDiagram.database);
setTitle(parsedDiagram.title);
setTables(parsedDiagram.tables);
setRelationships(parsedDiagram.relationships);
setNotes(parsedDiagram.notes);
setAreas(parsedDiagram.subjectAreas);
setTransform(parsedDiagram.transform);
if (databases[parsedDiagram.database].hasTypes) {
setTypes(parsedDiagram.types ?? []);
}
if (databases[d.database].hasEnums) {
setEnums(d.enums ?? []);
if (databases[parsedDiagram.database].hasEnums) {
setEnums(parsedDiagram.enums ?? []);
}
} catch (e) {
console.log(e);
@@ -368,6 +372,12 @@ export default function WorkSpace() {
searchParams,
]);
const returnToCurrentDiagram = async () => {
await load();
setLayout((prev) => ({ ...prev, readOnly: false }));
setVersion(null);
};
useEffect(() => {
if (
tables?.length === 0 &&
@@ -398,8 +408,12 @@ export default function WorkSpace() {
]);
useEffect(() => {
if (layout.readOnly) return;
if (saveState !== State.SAVING) return;
save();
}, [saveState, save]);
}, [saveState, layout, save]);
useEffect(() => {
document.title = "Editor | drawDB";
@@ -409,7 +423,7 @@ export default function WorkSpace() {
return (
<div className="h-full flex flex-col overflow-hidden theme">
<IdContext.Provider value={{ gistId, setGistId }}>
<IdContext.Provider value={{ gistId, setGistId, version, setVersion }}>
<ControlPanel
diagramId={id}
setDiagramId={setId}
@@ -438,6 +452,23 @@ export default function WorkSpace() {
<CanvasContextProvider className="h-full w-full">
<Canvas saveState={saveState} setSaveState={setSaveState} />
</CanvasContextProvider>
{version && (
<div className="absolute right-8 top-2 space-x-2">
<Button
icon={<i className="fa-solid fa-rotate-right mt-0.5"></i>}
onClick={() => setShowRestoreModal(true)}
>
{t("restore_version")}
</Button>
<Button
type="tertiary"
onClick={returnToCurrentDiagram}
icon={<i className="bi bi-arrow-return-right mt-1"></i>}
>
{t("return_to_current")}
</Button>
</div>
)}
{!(layout.sidebar || layout.toolbar || layout.header) && (
<div className="fixed right-5 bottom-4">
<FloatingControls />
@@ -494,6 +525,27 @@ export default function WorkSpace() {
))}
</div>
</Modal>
<Modal
visible={showRestoreModal}
centered
closable
onCancel={() => setShowRestoreModal(false)}
title={
<span className="flex items-center gap-2">
<IconAlertTriangle className="text-amber-400" size="extra-large" />{" "}
{t("restore_version")}
</span>
}
okText={t("continue")}
cancelText={t("cancel")}
onOk={() => {
setLayout((prev) => ({ ...prev, readOnly: false }));
setShowRestoreModal(false);
setVersion(null);
}}
>
{t("restore_warning")}
</Modal>
</div>
);
}

1
src/context/LayoutContext.jsx
View File

@@ -9,6 +9,7 @@ export default function LayoutContextProvider({ children }) {
issues: true,
toolbar: true,
dbmlEditor: false,
readOnly: false,
});
return (

1
src/data/constants.js
View File

@@ -99,6 +99,7 @@ export const SIDESHEET = {
NONE: 0,
TODO: 1,
TIMELINE: 2,
VERSIONS: 3,
};
export const DB = {

14
src/i18n/i18n.js
View File

@@ -35,10 +35,10 @@ import { pl, polish } from "./locales/pl";
import { no, norwegian } from "./locales/no";
import { sv, swedish } from "./locales/sv-se";
import { ur, urdu } from "./locales/ur";
import { jp, japanese} from "./locales/jp"
import {ne, nepali} from "./locales/ne"
import {ug, uyghur} from "./locales/ug";
import {pa_pk,punjabipk } from "./locales/pa-pk";
import { jp, japanese } from "./locales/jp";
import { ne, nepali } from "./locales/ne";
import { ug, uyghur } from "./locales/ug";
import { pa_pk, punjabipk } from "./locales/pa-pk";
import { cz, czech } from "./locales/cz";
export const languages = [
@@ -80,7 +80,7 @@ export const languages = [
nepali,
uyghur,
punjabipk,
czech
czech,
].sort((a, b) => a.name.localeCompare(b.name));
i18n
@@ -130,8 +130,8 @@ i18n
jp,
ne,
ug,
"pa-PK":pa_pk,
cz
"pa-PK": pa_pk,
cz,
},
});

20
src/i18n/locales/en.js
View File

@@ -9,7 +9,8 @@ const en = {
report_bug: "Report a bug",
import: "Import",
inherits: "Inherits",
merging_column_w_inherited_definition: "Column '{{fieldName}}' in table '{{tableName}}' with inherited definition will be merged",
merging_column_w_inherited_definition:
"Column '{{fieldName}}' in table '{{tableName}}' with inherited definition will be merged",
import_from: "Import from",
file: "File",
new: "New",
@@ -258,6 +259,23 @@ const en = {
tab_view: "Tab view",
label: "Label",
many_side_label: "Many(n) side label",
version: "Version",
versions: "Versions",
no_saved_versions: "No saved versions",
record_version: "Record version",
commited_at: "Commited at",
read_only: "Read only",
continue: "Continue",
restore_version: "Restore version",
restore_warning: "Loading another version will overwrite any changes.",
return_to_current: "Return to diagram",
no_changes_to_record: "No changes to record",
click_to_view: "Click to view",
load_more: "Load more",
clear_cache: "Clear cache",
cache_cleared: "Cache cleared",
failed_to_record_version: "Failed to record version",
failed_to_load_diagram: "Failed to load diagram",
},
};

7
src/index.css
View File

@@ -67,7 +67,12 @@
background-color: rgba(var(--semi-blue-6), 1);
}
.semi-spin-wrapper {
.semi-steps-item-content,
.semi-steps-item-title {
width: 100% !important;
}
.semi-spin-wrapper {
color: inherit;
}