From c6c24d02b99eed0490712248447beec2dbbc6920 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 13:22:04 +0400
Subject: [PATCH 08/14] Load diagram from gist
---
src/components/Workspace.jsx | 27 +++++++++++++++++++++++++--
1 file changed, 25 insertions(+), 2 deletions(-)
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index a845b51..af1c321 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -331,12 +331,35 @@ export default function WorkSpace() {
},
});
const diagramSrc = res.data.files["share.json"].content;
- console.log(diagramSrc);
+ const d = JSON.parse(diagramSrc);
+ console.log(d);
+ window.name = "";
+ setDatabase(d.database);
+ setTitle(d.title);
+ setTables(d.tables);
+ setRelationships(d.relationships);
+ setNotes(d.notes);
+ setAreas(d.subjectAreas);
+ if (databases[d.database].hasTypes) {
+ setTypes(d.types ?? []);
+ }
+ if (databases[d.database].hasEnums) {
+ setEnums(d.enums ?? []);
+ }
} catch (e) {
console.log(e);
}
},
- [octokit],
+ [
+ octokit,
+ setAreas,
+ setDatabase,
+ setEnums,
+ setNotes,
+ setRelationships,
+ setTables,
+ setTypes,
+ ],
);
useEffect(() => {
From 9aec2f02d042848b58ae228cf407a1a650f80905 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 19:15:58 +0400
Subject: [PATCH 09/14] Prevent creating duplicates when loading from gist
---
src/components/EditorHeader/Modal/Modal.jsx | 2 ++
src/components/EditorHeader/Modal/Share.jsx | 15 +++++++++++++-
src/components/Workspace.jsx | 22 +++++++++++++++++++--
src/data/db.js | 4 ++--
4 files changed, 38 insertions(+), 5 deletions(-)
diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index a550753..d187929 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -388,7 +388,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
index c776576..35260d1 100644
--- a/src/components/EditorHeader/Modal/Share.jsx
+++ b/src/components/EditorHeader/Modal/Share.jsx
@@ -9,6 +9,7 @@ import {
useDiagram,
useEnums,
useNotes,
+ useTransform,
useTypes,
} from "../../../hooks";
import { databases } from "../../../data/databases";
@@ -22,6 +23,7 @@ export default function Share({ title }) {
const { areas } = useAreas();
const { types } = useTypes();
const { enums } = useEnums();
+ const { transform } = useTransform();
const userToken = localStorage.getItem("github_token");
const octokit = useMemo(() => {
@@ -44,8 +46,19 @@ export default function Share({ title }) {
...(databases[database].hasTypes && { types: types }),
...(databases[database].hasEnums && { enums: enums }),
title: title,
+ transform: transform,
});
- }, [areas, notes, tables, relationships, database, title, enums, types]);
+ }, [
+ areas,
+ notes,
+ tables,
+ relationships,
+ database,
+ title,
+ enums,
+ types,
+ transform,
+ ]);
const updateGist = useCallback(async () => {
setLoading(true);
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index af1c321..30e1734 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -37,6 +37,7 @@ 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);
@@ -98,6 +99,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 }),
})
@@ -121,6 +123,7 @@ export default function WorkSpace() {
gistId: gistId ?? "",
pan: transform.pan,
zoom: transform.zoom,
+ loadedFromGistId: loadedFromGistId,
...(databases[database].hasEnums && { enums: enums }),
...(databases[database].hasTypes && { types: types }),
})
@@ -166,6 +169,7 @@ export default function WorkSpace() {
database,
enums,
gistId,
+ loadedFromGistId,
]);
const load = useCallback(async () => {
@@ -182,6 +186,7 @@ export default function WorkSpace() {
}
setId(d.id);
setGistId(d.gistId);
+ setLoadedFromGistId(d.loadedFromGistId);
setTitle(d.name);
setTables(d.tables);
setRelationships(d.references);
@@ -218,6 +223,7 @@ export default function WorkSpace() {
}
setId(diagram.id);
setGistId(diagram.gistId);
+ setLoadedFromGistId(diagram.loadedFromGistId);
setTitle(diagram.name);
setTables(diagram.tables);
setRelationships(diagram.references);
@@ -323,6 +329,13 @@ export default function WorkSpace() {
const loadFromGist = useCallback(
async (shareId) => {
+ const d = await db.diagrams.get({ loadedFromGistId: shareId });
+ if (d) {
+ window.name = "d " + d.id;
+ } else {
+ window.name = "";
+ }
+
try {
const res = await octokit.request(`GET /gists/${shareId}`, {
gist_id: shareId,
@@ -332,14 +345,16 @@ export default function WorkSpace() {
});
const diagramSrc = res.data.files["share.json"].content;
const d = JSON.parse(diagramSrc);
- console.log(d);
- window.name = "";
+ 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 ?? []);
}
@@ -359,6 +374,9 @@ export default function WorkSpace() {
setRelationships,
setTables,
setTypes,
+ setTransform,
+ setRedoStack,
+ setUndoStack,
],
);
diff --git a/src/data/db.js b/src/data/db.js
index 8355a5c..c9ef3af 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",
});
From 59a388f44c30dee801083301c145a936e53b3146 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 19:52:23 +0400
Subject: [PATCH 10/14] Fix wrong url being generated for shared diagrams
---
src/components/EditorHeader/Modal/Share.jsx | 21 ++++++---------------
src/components/Workspace.jsx | 19 +++----------------
src/data/db.js | 2 +-
src/data/octokit.js | 5 +++++
4 files changed, 15 insertions(+), 32 deletions(-)
create mode 100644 src/data/octokit.js
diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx
index 35260d1..420ff41 100644
--- a/src/components/EditorHeader/Modal/Share.jsx
+++ b/src/components/EditorHeader/Modal/Share.jsx
@@ -1,7 +1,6 @@
import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
-import { useCallback, useContext, useEffect, useState, useMemo } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
-import { Octokit } from "octokit";
import { IdContext } from "../../Workspace";
import { IconLink } from "@douyinfe/semi-icons";
import {
@@ -13,6 +12,7 @@ import {
useTypes,
} from "../../../hooks";
import { databases } from "../../../data/databases";
+import { octokit } from "../../../data/octokit";
export default function Share({ title }) {
const { t } = useTranslation();
@@ -24,17 +24,8 @@ export default function Share({ title }) {
const { types } = useTypes();
const { enums } = useEnums();
const { transform } = useTransform();
-
- const userToken = localStorage.getItem("github_token");
- const octokit = useMemo(() => {
- return new Octokit({
- auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
- });
- }, [userToken]);
- const url = useMemo(
- () => window.location.href + "?shareId=" + gistId,
- [gistId],
- );
+ const url =
+ window.location.origin + window.location.pathname + "?shareId=" + gistId;
const diagramToString = useCallback(() => {
return JSON.stringify({
@@ -80,7 +71,7 @@ export default function Share({ title }) {
} finally {
setLoading(false);
}
- }, [gistId, octokit, diagramToString]);
+ }, [gistId, diagramToString]);
const generateLink = useCallback(async () => {
setLoading(true);
@@ -103,7 +94,7 @@ export default function Share({ title }) {
} finally {
setLoading(false);
}
- }, [octokit, setGistId, diagramToString]);
+ }, [setGistId, diagramToString]);
useEffect(() => {
const updateOrGenerateLink = async () => {
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index 30e1734..0ecbb20 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -1,10 +1,4 @@
-import {
- useState,
- useEffect,
- useCallback,
- createContext,
- useMemo,
-} from "react";
+import { useState, useEffect, useCallback, createContext } from "react";
import ControlPanel from "./EditorHeader/ControlPanel";
import Canvas from "./EditorCanvas/Canvas";
import { CanvasContextProvider } from "../context/CanvasContext";
@@ -30,7 +24,7 @@ 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 "octokit";
+import { octokit } from "../data/octokit";
export const IdContext = createContext({ gistId: "" });
@@ -64,12 +58,6 @@ export default function WorkSpace() {
const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
const { t, i18n } = useTranslation();
let [searchParams] = useSearchParams();
- const userToken = localStorage.getItem("github_token");
- const octokit = useMemo(() => {
- return new Octokit({
- auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
- });
- }, [userToken]);
const handleResize = (e) => {
if (!resize) return;
const w = isRtl(i18n.language) ? window.innerWidth - e.clientX : e.clientX;
@@ -335,7 +323,6 @@ export default function WorkSpace() {
} else {
window.name = "";
}
-
try {
const res = await octokit.request(`GET /gists/${shareId}`, {
gist_id: shareId,
@@ -345,6 +332,7 @@ export default function WorkSpace() {
});
const diagramSrc = res.data.files["share.json"].content;
const d = JSON.parse(diagramSrc);
+ setGistId("")
setUndoStack([]);
setRedoStack([]);
setLoadedFromGistId(shareId);
@@ -366,7 +354,6 @@ export default function WorkSpace() {
}
},
[
- octokit,
setAreas,
setDatabase,
setEnums,
diff --git a/src/data/db.js b/src/data/db.js
index c9ef3af..adddd91 100644
--- a/src/data/db.js
+++ b/src/data/db.js
@@ -4,7 +4,7 @@ import { templateSeeds } from "./seeds";
export const db = new Dexie("drawDB");
db.version(6).stores({
- diagrams: "++id, lastModified, &loadedFromGistId",
+ 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,
+});
From 85cf795fc968d8ced3267e7b503f035ef1a823a0 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 20:24:09 +0400
Subject: [PATCH 11/14] Prevent the diagram from getting overwritten when
reloaded
---
src/components/Workspace.jsx | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index 0ecbb20..ed06ae5 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -57,7 +57,7 @@ export default function WorkSpace() {
} = useDiagram();
const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
const { t, i18n } = useTranslation();
- let [searchParams] = useSearchParams();
+ let [searchParams, setSearchParams] = useSearchParams();
const handleResize = (e) => {
if (!resize) return;
const w = isRtl(i18n.language) ? window.innerWidth - e.clientX : e.clientX;
@@ -70,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"
@@ -144,6 +146,8 @@ export default function WorkSpace() {
});
}
}, [
+ searchParams,
+ setSearchParams,
tables,
relationships,
notes,
@@ -317,9 +321,11 @@ export default function WorkSpace() {
const loadFromGist = useCallback(
async (shareId) => {
- const d = await db.diagrams.get({ loadedFromGistId: shareId });
- if (d) {
- window.name = "d " + d.id;
+ const existingDiagram = await db.diagrams.get({
+ loadedFromGistId: shareId,
+ });
+ if (existingDiagram) {
+ window.name = "d " + existingDiagram.id;
} else {
window.name = "";
}
@@ -332,7 +338,7 @@ export default function WorkSpace() {
});
const diagramSrc = res.data.files["share.json"].content;
const d = JSON.parse(diagramSrc);
- setGistId("")
+ setGistId("");
setUndoStack([]);
setRedoStack([]);
setLoadedFromGistId(shareId);
From 6eddfd983f9a5d221cead1efdced6c7a1139966c Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 20:36:20 +0400
Subject: [PATCH 12/14] Remove github token modal
---
src/components/EditorHeader/ControlPanel.jsx | 3 --
.../EditorHeader/Modal/GithubToken.jsx | 43 -------------------
src/components/EditorHeader/Modal/Modal.jsx | 14 ------
src/components/Workspace.jsx | 1 -
src/data/constants.js | 1 -
src/i18n/locales/en.js | 1 -
src/utils/modalData.js | 2 -
7 files changed, 65 deletions(-)
delete mode 100644 src/components/EditorHeader/Modal/GithubToken.jsx
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 834a4de..7eb3cc1 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1293,9 +1293,6 @@ export default function ControlPanel({
language: {
function: () => setModal(MODAL.LANGUAGE),
},
- github_token: {
- function: () => setModal(MODAL.GITHUB_TOKEN),
- },
flush_storage: {
warning: {
title: t("flush_storage"),
diff --git a/src/components/EditorHeader/Modal/GithubToken.jsx b/src/components/EditorHeader/Modal/GithubToken.jsx
deleted file mode 100644
index 56ac2d4..0000000
--- a/src/components/EditorHeader/Modal/GithubToken.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Button, Input } from "@douyinfe/semi-ui";
-import { useTranslation } from "react-i18next";
-
-export default function GithubToken({ token, setToken }) {
- const { t } = useTranslation();
-
- const clearToken = () => {
- localStorage.removeItem("github_token");
- setToken("");
- };
-
- return (
-
-
-
- setToken(v)}
- />
- }
- type="danger"
- title={t("clear")}
- onClick={clearToken}
- />
-
-
- *This will be stored in the local storage
-
-
- );
-}
diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index d187929..009b689 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/src/components/EditorHeader/Modal/Modal.jsx
@@ -43,7 +43,6 @@ import { useTranslation } from "react-i18next";
import { importSQL } from "../../../utils/importSQL";
import { databases } from "../../../data/databases";
import { isRtl } from "../../../i18n/utils/rtl";
-import GithubToken from "./GithubToken";
const languageExtension = {
sql: [sql()],
@@ -83,9 +82,6 @@ export default function Modal({
const [selectedTemplateId, setSelectedTemplateId] = useState(-1);
const [selectedDiagramId, setSelectedDiagramId] = useState(0);
const [saveAsTitle, setSaveAsTitle] = useState(title);
- const [token, setToken] = useState(
- localStorage.getItem("github_token") ?? "",
- );
const overwriteDiagram = () => {
setTables(importData.tables);
@@ -242,14 +238,6 @@ export default function Modal({
setModal(MODAL.NONE);
createNewDiagram(selectedTemplateId);
return;
- case MODAL.GITHUB_TOKEN:
- setModal(MODAL.NONE);
- if (token !== "") {
- localStorage.setItem("github_token", token);
- } else {
- localStorage.removeItem("github_token");
- }
- return;
default:
setModal(MODAL.NONE);
return;
@@ -343,8 +331,6 @@ export default function Modal({
return
;
case MODAL.SHARE:
return
;
- case MODAL.GITHUB_TOKEN:
- return
;
default:
return <>;
}
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index ed06ae5..77436f0 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -338,7 +338,6 @@ export default function WorkSpace() {
});
const diagramSrc = res.data.files["share.json"].content;
const d = JSON.parse(diagramSrc);
- setGistId("");
setUndoStack([]);
setRedoStack([]);
setLoadedFromGistId(shareId);
diff --git a/src/data/constants.js b/src/data/constants.js
index 69e9d33..59bd4ff 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -92,7 +92,6 @@ export const MODAL = {
TABLE_WIDTH: 9,
LANGUAGE: 10,
SHARE: 11,
- GITHUB_TOKEN: 12,
};
export const STATUS = {
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 7053848..1c0898d 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -238,7 +238,6 @@ const en = {
unsigned: "Unsigned",
share: "Share",
copy_link: "Copy link",
- github_token: "GitHub Token",
},
};
diff --git a/src/utils/modalData.js b/src/utils/modalData.js
index 2b996c9..f4fbf45 100644
--- a/src/utils/modalData.js
+++ b/src/utils/modalData.js
@@ -25,8 +25,6 @@ export const getModalTitle = (modal) => {
return i18n.t("language");
case MODAL.SHARE:
return i18n.t("share");
- case MODAL.GITHUB_TOKEN:
- return i18n.t("github_token");
default:
return "";
}
From 877ec72e03defb8aabc1b7ab91e4561dfa0f0547 Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 20:40:48 +0400
Subject: [PATCH 13/14] Disable sharing for templates
---
src/components/EditorHeader/ControlPanel.jsx | 20 +++++++++++---------
1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 7eb3cc1..f175e78 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1363,15 +1363,17 @@ export default function ControlPanel({
{layout.header && (
{header()}
- }
- onClick={() => setModal(MODAL.SHARE)}
- >
- {t("share")}
-
+ {window.name.split(" ")[0] !== "t" && (
+ }
+ onClick={() => setModal(MODAL.SHARE)}
+ >
+ {t("share")}
+
+ )}
)}
{layout.toolbar && toolbar()}
From fcf2251e9bfef0a64bdcb477a937a49269cd266b Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Sun, 1 Sep 2024 21:14:18 +0400
Subject: [PATCH 14/14] Handle incorrect links and corrupted files
---
src/components/EditorHeader/ControlPanel.jsx | 4 +++-
src/components/EditorHeader/Modal/Share.jsx | 5 +----
src/components/Workspace.jsx | 2 ++
src/data/constants.js | 1 +
src/i18n/locales/en.js | 3 +++
5 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index dbd5c64..593e69d 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1084,7 +1084,7 @@ export default function ControlPanel({
data: result,
extension: "md",
}));
- }
+ },
},
],
function: () => {},
@@ -1604,6 +1604,8 @@ export default function ControlPanel({
return t("saving");
case State.ERROR:
return t("failed_to_save");
+ case State.FAILED_TO_LOAD:
+ return t("failed_to_load");
default:
return "";
}
diff --git a/src/components/EditorHeader/Modal/Share.jsx b/src/components/EditorHeader/Modal/Share.jsx
index 420ff41..3731a3e 100644
--- a/src/components/EditorHeader/Modal/Share.jsx
+++ b/src/components/EditorHeader/Modal/Share.jsx
@@ -146,10 +146,7 @@ export default function Share({ title }) {
- * Sharing this link will not create a live real-time collaboration
- session
-
+