diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index d8acd8f..009b689 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -33,6 +33,7 @@ import ImportDiagram from "./ImportDiagram";
import ImportSource from "./ImportSource";
import SetTableWidth from "./SetTableWidth";
import Language from "./Language";
+import Share from "./Share";
import CodeMirror from "@uiw/react-codemirror";
import { sql } from "@codemirror/lang-sql";
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
@@ -319,7 +320,7 @@ export default function Modal({
);
} else {
return (
-
+
);
@@ -328,6 +329,8 @@ export default function Modal({
return
;
case MODAL.LANGUAGE:
return
;
+ case MODAL.SHARE:
+ return
;
default:
return <>;
}
@@ -371,7 +374,9 @@ export default function Modal({
((modal === MODAL.IMG || modal === MODAL.CODE) && !exportData.data) ||
(modal === MODAL.SAVEAS && saveAsTitle === "") ||
(modal === MODAL.IMPORT_SRC && importSource.src === ""),
+ hidden: modal === MODAL.SHARE,
}}
+ hasCancel={modal !== MODAL.SHARE}
cancelText={t("cancel")}
width={getModalWidth(modal)}
bodyStyle={{
diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx
new file mode 100644
index 0000000..3731a3e
--- /dev/null
+++ b/src/components/EditorHeader/Modal/Share.jsx
@@ -0,0 +1,152 @@
+import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IdContext } from "../../Workspace";
+import { IconLink } from "@douyinfe/semi-icons";
+import {
+ useAreas,
+ useDiagram,
+ useEnums,
+ useNotes,
+ useTransform,
+ useTypes,
+} from "../../../hooks";
+import { databases } from "../../../data/databases";
+import { octokit } from "../../../data/octokit";
+
+export default function Share({ title }) {
+ const { t } = useTranslation();
+ const { gistId, setGistId } = useContext(IdContext);
+ const [loading, setLoading] = useState(true);
+ const { tables, relationships, database } = useDiagram();
+ const { notes } = useNotes();
+ const { areas } = useAreas();
+ const { types } = useTypes();
+ const { enums } = useEnums();
+ const { transform } = useTransform();
+ const url =
+ window.location.origin + window.location.pathname + "?shareId=" + gistId;
+
+ const diagramToString = useCallback(() => {
+ return JSON.stringify({
+ tables: tables,
+ relationships: relationships,
+ notes: notes,
+ subjectAreas: areas,
+ database: database,
+ ...(databases[database].hasTypes && { types: types }),
+ ...(databases[database].hasEnums && { enums: enums }),
+ title: title,
+ transform: transform,
+ });
+ }, [
+ areas,
+ notes,
+ tables,
+ relationships,
+ database,
+ title,
+ enums,
+ types,
+ transform,
+ ]);
+
+ const updateGist = useCallback(async () => {
+ setLoading(true);
+ try {
+ await octokit.request(`PATCH /gists/${gistId}`, {
+ gist_id: gistId,
+ description: "drawDB diagram",
+ files: {
+ "share.json": {
+ content: diagramToString(),
+ },
+ },
+ headers: {
+ "X-GitHub-Api-Version": "2022-11-28",
+ },
+ });
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setLoading(false);
+ }
+ }, [gistId, diagramToString]);
+
+ const generateLink = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await octokit.request("POST /gists", {
+ description: "drawDB diagram",
+ public: false,
+ files: {
+ "share.json": {
+ content: diagramToString(),
+ },
+ },
+ headers: {
+ "X-GitHub-Api-Version": "2022-11-28",
+ },
+ });
+ setGistId(res.data.id);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setLoading(false);
+ }
+ }, [setGistId, diagramToString]);
+
+ useEffect(() => {
+ const updateOrGenerateLink = async () => {
+ try {
+ if (!gistId || gistId === "") {
+ await generateLink();
+ } else {
+ await updateGist();
+ }
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setLoading(false);
+ }
+ };
+ updateOrGenerateLink();
+ }, [gistId, generateLink, updateGist]);
+
+ const copyLink = () => {
+ navigator.clipboard
+ .writeText(url)
+ .then(() => {
+ Toast.success(t("copied_to_clipboard"));
+ })
+ .catch(() => {
+ Toast.error(t("oops_smth_went_wrong"));
+ });
+ };
+
+ if (loading)
+ return (
+
+ );
+
+ return (
+
+
+
+ }
+ onClick={copyLink}
+ >
+ {t("copy_link")}
+
+
+
+
{t("share_info")}
+
+ );
+}
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index 4d8c803..ce9a4f6 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, createContext } from "react";
import ControlPanel from "./EditorHeader/ControlPanel";
import Canvas from "./EditorCanvas/Canvas";
import { CanvasContextProvider } from "../context/CanvasContext";
@@ -23,9 +23,15 @@ import { Modal } from "@douyinfe/semi-ui";
import { useTranslation } from "react-i18next";
import { databases } from "../data/databases";
import { isRtl } from "../i18n/utils/rtl";
+import { useSearchParams } from "react-router-dom";
+import { octokit } from "../data/octokit";
+
+export const IdContext = createContext({ gistId: "" });
export default function WorkSpace() {
const [id, setId] = useState(0);
+ const [gistId, setGistId] = useState("");
+ const [loadedFromGistId, setLoadedFromGistId] = useState("");
const [title, setTitle] = useState("Untitled Diagram");
const [resize, setResize] = useState(false);
const [width, setWidth] = useState(340);
@@ -51,7 +57,7 @@ export default function WorkSpace() {
} = useDiagram();
const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
const { t, i18n } = useTranslation();
-
+ let [searchParams, setSearchParams] = useSearchParams();
const handleResize = (e) => {
if (!resize) return;
const w = isRtl(i18n.language) ? window.innerWidth - e.clientX : e.clientX;
@@ -64,6 +70,8 @@ export default function WorkSpace() {
const saveAsDiagram = window.name === "" || op === "d" || op === "lt";
if (saveAsDiagram) {
+ searchParams.delete("shareId");
+ setSearchParams(searchParams);
if (
(id === 0 && window.name === "") ||
window.name.split(" ")[0] === "lt"
@@ -72,6 +80,7 @@ export default function WorkSpace() {
.add({
database: database,
name: title,
+ gistId: gistId ?? "",
lastModified: new Date(),
tables: tables,
references: relationships,
@@ -80,6 +89,7 @@ export default function WorkSpace() {
todos: tasks,
pan: transform.pan,
zoom: transform.zoom,
+ loadedFromGistId: loadedFromGistId,
...(databases[database].hasEnums && { enums: enums }),
...(databases[database].hasTypes && { types: types }),
})
@@ -100,8 +110,10 @@ export default function WorkSpace() {
notes: notes,
areas: areas,
todos: tasks,
+ gistId: gistId ?? "",
pan: transform.pan,
zoom: transform.zoom,
+ loadedFromGistId: loadedFromGistId,
...(databases[database].hasEnums && { enums: enums }),
...(databases[database].hasTypes && { types: types }),
})
@@ -134,6 +146,8 @@ export default function WorkSpace() {
});
}
}, [
+ searchParams,
+ setSearchParams,
tables,
relationships,
notes,
@@ -146,6 +160,8 @@ export default function WorkSpace() {
setSaveState,
database,
enums,
+ gistId,
+ loadedFromGistId,
]);
const load = useCallback(async () => {
@@ -161,6 +177,8 @@ export default function WorkSpace() {
setDatabase(DB.GENERIC);
}
setId(d.id);
+ setGistId(d.gistId);
+ setLoadedFromGistId(d.loadedFromGistId);
setTitle(d.name);
setTables(d.tables);
setRelationships(d.references);
@@ -196,6 +214,8 @@ export default function WorkSpace() {
setDatabase(DB.GENERIC);
}
setId(diagram.id);
+ setGistId(diagram.gistId);
+ setLoadedFromGistId(diagram.loadedFromGistId);
setTitle(diagram.name);
setTables(diagram.tables);
setRelationships(diagram.references);
@@ -299,6 +319,61 @@ export default function WorkSpace() {
selectedDb,
]);
+ const loadFromGist = useCallback(
+ async (shareId) => {
+ const existingDiagram = await db.diagrams.get({
+ loadedFromGistId: shareId,
+ });
+ if (existingDiagram) {
+ window.name = "d " + existingDiagram.id;
+ } else {
+ window.name = "";
+ }
+ try {
+ const res = await octokit.request(`GET /gists/${shareId}`, {
+ gist_id: shareId,
+ headers: {
+ "X-GitHub-Api-Version": "2022-11-28",
+ },
+ });
+ const diagramSrc = res.data.files["share.json"].content;
+ const d = JSON.parse(diagramSrc);
+ setUndoStack([]);
+ setRedoStack([]);
+ 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 ?? []);
+ }
+ if (databases[d.database].hasEnums) {
+ setEnums(d.enums ?? []);
+ }
+ } catch (e) {
+ console.log(e);
+ setSaveState(State.FAILED_TO_LOAD);
+ }
+ },
+ [
+ setAreas,
+ setDatabase,
+ setEnums,
+ setNotes,
+ setRelationships,
+ setTables,
+ setTypes,
+ setTransform,
+ setRedoStack,
+ setUndoStack,
+ setSaveState,
+ ],
+ );
+
useEffect(() => {
if (
tables?.length === 0 &&
@@ -327,28 +402,41 @@ export default function WorkSpace() {
setSaveState,
]);
+ useEffect(() => {
+ if (gistId && gistId !== "") {
+ setSaveState(State.SAVING);
+ }
+ }, [gistId, setSaveState]);
+
useEffect(() => {
if (saveState !== State.SAVING) return;
save();
- }, [id, saveState, save]);
+ }, [id, gistId, saveState, save]);
useEffect(() => {
document.title = "Editor | drawDB";
- load();
- }, [load]);
+ const shareId = searchParams.get("shareId");
+ if (shareId) {
+ loadFromGist(shareId);
+ } else {
+ load();
+ }
+ }, [load, searchParams, loadFromGist]);
return (
-
+
+
+
e.isPrimary && setResize(false)}
diff --git a/src/data/constants.js b/src/data/constants.js
index 6ffb577..e17b7d1 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -77,6 +77,7 @@ export const State = {
SAVED: 2,
LOADING: 3,
ERROR: 4,
+ FAILED_TO_LOAD: 5,
};
export const MODAL = {
@@ -91,6 +92,7 @@ export const MODAL = {
IMPORT_SRC: 8,
TABLE_WIDTH: 9,
LANGUAGE: 10,
+ SHARE: 11,
};
export const STATUS = {
diff --git a/src/data/db.js b/src/data/db.js
index 8355a5c..adddd91 100644
--- a/src/data/db.js
+++ b/src/data/db.js
@@ -3,8 +3,8 @@ import { templateSeeds } from "./seeds";
export const db = new Dexie("drawDB");
-db.version(5).stores({
- diagrams: "++id, lastModified",
+db.version(6).stores({
+ diagrams: "++id, lastModified, loadedFromGistId",
templates: "++id, custom",
});
diff --git a/src/data/octokit.js b/src/data/octokit.js
new file mode 100644
index 0000000..d922073
--- /dev/null
+++ b/src/data/octokit.js
@@ -0,0 +1,5 @@
+import { Octokit } from "octokit";
+
+export const octokit = new Octokit({
+ auth: import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+});
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 5ee193a..cebfac6 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -236,7 +236,12 @@ const en = {
empty_index_name: "Declared an index with no name in table '{{tableName}}'",
didnt_find_diagram: "Oops! Didn't find the diagram.",
unsigned: "Unsigned",
+ share: "Share",
+ copy_link: "Copy link",
readme: "README",
+ failed_to_load: "Failed to load. Make sure the link is correct.",
+ share_info:
+ "* Sharing this link will not create a live real-time collaboration session.",
},
};
diff --git a/src/index.css b/src/index.css
index 11a352b..62a845d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -58,6 +58,10 @@
background-color: rgba(var(--semi-blue-6), 1);
}
+.semi-spin-wrapper{
+ color: inherit;
+}
+
::-webkit-scrollbar {
width: 8px;
height: 8px;
diff --git a/src/utils/modalData.js b/src/utils/modalData.js
index d72ba6e..f4fbf45 100644
--- a/src/utils/modalData.js
+++ b/src/utils/modalData.js
@@ -23,6 +23,8 @@ export const getModalTitle = (modal) => {
return i18n.t("table_width");
case MODAL.LANGUAGE:
return i18n.t("language");
+ case MODAL.SHARE:
+ return i18n.t("share");
default:
return "";
}
@@ -55,6 +57,8 @@ export const getOkText = (modal) => {
return i18n.t("save_as");
case MODAL.NEW:
return i18n.t("create");
+ case MODAL.SHARE:
+ return i18n.t("share");
default:
return i18n.t("confirm");
}