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

Merge pull request #2 from drawdb-io/mvp

Browse Source 
Mvp
This commit is contained in:
1ilit 2024-01-14 02:45:03 +02:00 committed by GitHub
commit 42ffc246af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/ControlPanel.jsx
View File

@ -64,7 +64,6 @@ import { areaSchema, noteSchema, tableSchema } from "../data/schemas";
import { Editor } from "@monaco-editor/react";
import { db } from "../data/db";
import { useLiveQuery } from "dexie-react-hooks";
import { socket } from "../data/socket";
import Todo from "./Todo";
export default function ControlPanel({
@ -135,7 +134,7 @@ export default function ControlPanel({
useContext(NoteContext);
const { areas, setAreas, updateArea, addArea, deleteArea } =
useContext(AreaContext);
const { undoStack, redoStack, setUndoStack, setRedoStack, setHistoryCount } =
const { undoStack, redoStack, setUndoStack, setRedoStack } =
useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { tab, setTab } = useContext(TabContext);
@ -161,10 +160,7 @@ export default function ControlPanel({
const undo = () => {
if (undoStack.length === 0) return;
setHistoryCount(undoStack.length)
const a = undoStack[undoStack.length - 1];
if (socket && a)
socket.emit("send-reversed-changes", a);
setUndoStack(prev => prev.filter((e, i) => i !== prev.length - 1));
if (a.action === Action.ADD) {
if (a.element === ObjectType.TABLE) {
@ -514,7 +510,6 @@ export default function ControlPanel({
}));
setUndoStack((prev) => [...prev, a]);
}
setHistoryCount(undoStack.length)
};
const fileImport = () => setVisible(MODAL.IMPORT);
@ -977,38 +972,7 @@ export default function ControlPanel({
],
function: () => { },
},
Settings: {
children: [
{
Autosave: () =>
setSettings((prev) => {
Toast.success(
`Autosave is ${settings.autosave ? "off" : "on"}`
);
return { ...prev, autosave: !prev.autosave };
}),
},
{
Panning: () =>
setSettings((prev) => {
Toast.success(`Panning is ${settings.panning ? "off" : "on"}`);
return { ...prev, panning: !prev.panning };
}),
},
{
"Flush storage": async () => {
db.delete()
.then(() => {
Toast.success("Storage flushed");
window.location.reload(false);
})
.catch(() => {
Toast.error("Oops! Something went wrong.");
});
},
},
],
},
Exit: {
function: () => { },
},
@ -1134,6 +1098,30 @@ export default function ControlPanel({
function: enterFullscreen,
},
},
Settings: {
Autosave: () =>
setSettings((prev) => {
Toast.success(
`Autosave is ${settings.autosave ? "off" : "on"}`
);
return { ...prev, autosave: !prev.autosave };
}),
Panning: () =>
setSettings((prev) => {
Toast.success(`Panning is ${settings.panning ? "off" : "on"}`);
return { ...prev, panning: !prev.panning };
}),
"Flush storage": async () => {
db.delete()
.then(() => {
Toast.success("Storage flushed");
window.location.reload(false);
})
.catch(() => {
Toast.error("Oops! Something went wrong.");
});
},
},
Help: {
Shortcuts: {
function: () => window.open("/shortcuts", "_blank"),
@ -1142,9 +1130,6 @@ export default function ControlPanel({
"Ask us on discord": {
function: () => { },
},
"Tweet us": {
function: () => { },
},
"Report a bug": {
function: () => window.open("/bug_report", "_blank"),
},

490
src/pages/editor.jsx
View File

@ -1,5 +1,4 @@
import { useState, createContext, useEffect } from "react";
import ControlPanel from "../components/ControlPanel";
import Canvas from "../components/Canvas";
import SidePanel from "../components/SidePanel";
@ -7,15 +6,11 @@ import {
Tab,
defaultTableTheme,
defaultNoteTheme,
// avatarThemes,
Action,
ObjectType,
State,
} from "../data/data";
import { socket } from "../data/socket";
import { db } from "../data/db";
// import { flipAction } from "../utils";
// import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
export const LayoutContext = createContext();
export const TableContext = createContext();
@ -69,7 +64,6 @@ export default function Editor() {
const [tasks, setTasks] = useState([]);
const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [historyCount, setHistoryCount] = useState(0);
const [selectedElement, setSelectedElement] = useState({
element: ObjectType.NONE,
id: -1,
@ -551,14 +545,6 @@ export default function Editor() {
save(diagram);
}, [tables, relationships, notes, areas, types, title, id, state]);
useEffect(() => {
if (socket) {
if (historyCount < undoStack.length) {
socket.emit("send-changes", undoStack[undoStack.length - 1]);
}
}
}, [undoStack, historyCount]);
useEffect(() => {
document.title = "Editor | drawDB";
@ -668,480 +654,6 @@ export default function Editor() {
body.setAttribute("theme-mode", "light");
}
}
socket.connect();
// const onConnect = () => {
// const name = uniqueNamesGenerator({
// dictionaries: [colors, animals],
// separator: " ",
// style: "capital",
// });
// const color =
// avatarThemes[Math.floor(Math.random() * avatarThemes.length)];
// socket.emit("new-user", name, color);
// setMessages((prev) => [
// ...prev,
// { message: `You joined as ${name}`, type: "note", action: "join" },
// ]);
// };
// const onRecieve = (value) =>
// setMessages((prev) => [{ ...value, type: "message" }, ...prev]);
// const onUserConnected = (name) =>
// setMessages((prev) => [
// { message: `${name} just joined`, type: "note", action: "join" },
// ...prev,
// ]);
// const onUserDisconnected = (name) =>
// setMessages((prev) => [
// { message: `${name} left`, type: "note", action: "leave" },
// ...prev,
// ]);
// socket.on("connect", onConnect);
// socket.on("recieve-message", onRecieve);
// socket.on("user-connected", onUserConnected);
// socket.on("user-disconnected", onUserDisconnected);
const applyChange = (delta) => {
// console.log("apply: ", delta)
if (!delta) return;
if (delta.action === Action.ADD) {
switch (delta.element) {
case ObjectType.TABLE:
addTable(false);
return;
case ObjectType.AREA:
addArea(false);
return;
case ObjectType.NOTE:
addNote(false);
return;
case ObjectType.RELATIONSHIP:
addRelationship(false, delta.data);
return;
case ObjectType.TYPE:
addType(false);
return;
}
} else if (delta.action === Action.MOVE) {
switch (delta.element) {
case ObjectType.TABLE:
updateTable(delta.id, { x: delta.toX, y: delta.toY }, true);
return;
case ObjectType.AREA:
updateArea(delta.id, { x: delta.toX, y: delta.toY });
return;
case ObjectType.NOTE:
updateNote(delta.id, { x: delta.toX, y: delta.toY });
return;
}
} else if (delta.action === Action.DELETE) {
switch (delta.element) {
case ObjectType.TABLE:
deleteTable(delta.data.id, false);
return;
case ObjectType.RELATIONSHIP:
deleteRelationship(delta.data.id, false);
return;
case ObjectType.AREA:
deleteArea(delta.data.id, false);
return;
case ObjectType.NOTE:
deleteNote(delta.data.id, false);
return;
case ObjectType.TYPE:
deleteType(delta.id, false);
return;
}
} else if (delta.action === Action.EDIT) {
switch (delta.element) {
case ObjectType.AREA:
updateArea(delta.aid, delta.redo);
return;
case ObjectType.RELATIONSHIP:
setRelationships((prev) =>
prev.map((e, idx) =>
idx === delta.rid ? { ...e, ...delta.redo } : e
)
);
return;
case ObjectType.NOTE:
updateNote(delta.nid, delta.redo);
return;
case ObjectType.TABLE:
if (delta.component === "field") {
updateField(delta.tid, delta.fid, delta.redo);
} else if (delta.component === "field_delete") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
setRelationships((prev) => {
return prev.map((e) => {
if (
e.startTableId === delta.tid &&
e.startFieldId > delta.data.id
) {
return {
...e,
startFieldId: e.startFieldId - 1,
startX: t.x + 15,
startY: t.y + (e.startFieldId - 1) * 36 + 50 + 19,
};
}
if (
e.endTableId === delta.tid &&
e.endFieldId > delta.data.id
) {
return {
...e,
endFieldId: e.endFieldId - 1,
endX: t.x + 15,
endY: t.y + (e.endFieldId - 1) * 36 + 50 + 19,
};
}
return e;
});
});
return {
...t,
fields: t.fields
.filter((field) => field.id !== delta.data.id)
.map((e, i) => ({ ...e, id: i })),
};
}
return t;
})
);
} else if (delta.component === "field_add") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
fields: [
...t.fields,
{
name: "",
type: "",
default: "",
check: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
id: t.fields.length,
},
],
};
}
return t;
})
);
} else if (delta.component === "index_add") {
setTables((prev) =>
prev.map((table) => {
if (table.id === delta.tid) {
return {
...table,
indices: [
...table.indices,
{
id: table.indices.length,
name: `index_${table.indices.length}`,
fields: [],
},
],
};
}
return table;
})
);
} else if (delta.component === "index") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
indices: t.indices.map((index) =>
index.id === delta.iid
? {
...index,
...delta.redo,
}
: index
),
};
}
return t;
})
);
} else if (delta.component === "index_delete") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
indices: t.indices
.filter((e) => e.id !== delta.data.id)
.map((x, i) => ({ ...x, id: i })),
};
}
return t;
})
);
} else if (delta.component === "self") {
updateTable(delta.tid, delta.redo, false);
}
return;
case ObjectType.TYPE:
if (delta.component === "field") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
return {
...t,
fields: t.fields.map((e, j) =>
j === delta.fid ? { ...e, ...delta.redo } : e
),
};
}
return t;
})
);
} else if (delta.component === "field_add") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
return {
...t,
fields: [...t.fields, { name: "", type: "" }],
};
}
return t;
})
);
} else if (delta.component === "field_delete") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
return {
...t,
fields: t.fields.filter((field, j) => j !== delta.fid),
};
}
return t;
})
);
} else if (delta.component === "self") {
updateType(delta.tid, delta.redo);
}
return;
}
}
};
const reverseChange = (delta) => {
// console.log("reverse: ", delta);
if (delta.action === Action.ADD) {
switch (delta.element) {
case ObjectType.TABLE:
setTables(prev => prev.filter((e, i) => i !== prev.length - 1));
return;
case ObjectType.RELATIONSHIP:
setRelationships(prev => prev.filter((e, i) => i !== prev.length - 1));
return;
case ObjectType.AREA:
setAreas(prev => prev.filter((e, i) => i !== prev.length - 1));
return;
case ObjectType.NOTE:
setNotes(prev => prev.filter((e, i) => i !== prev.length - 1));
return;
case ObjectType.TYPE:
setTypes(prev => prev.filter((e, i) => i !== prev.length - 1));
return;
}
} else if (delta.action === Action.MOVE) {
switch (delta.element) {
case ObjectType.TABLE:
updateTable(delta.id, { x: delta.x, y: delta.y }, true);
return;
case ObjectType.AREA:
updateArea(delta.id, { x: delta.x, y: delta.y });
return;
case ObjectType.NOTE:
updateNote(delta.id, { x: delta.x, y: delta.y });
return;
}
} else if (delta.action === Action.DELETE) {
switch (delta.element) {
case ObjectType.TABLE:
addTable(false, delta.data);
return;
case ObjectType.AREA:
addArea(false, delta.data);
return;
case ObjectType.NOTE:
addNote(false, delta.data);
return;
case ObjectType.RELATIONSHIP:
addRelationship(false, delta.data);
return;
case ObjectType.TYPE:
addType(false, delta.data);
return;
}
} else if (delta.action === Action.EDIT) {
switch (delta.element) {
case ObjectType.AREA:
updateArea(delta.aid, delta.undo);
return;
case ObjectType.RELATIONSHIP:
setRelationships((prev) =>
prev.map((e, idx) =>
idx === delta.rid ? { ...e, ...delta.undo } : e
)
);
return;
case ObjectType.NOTE:
updateNote(delta.nid, delta.undo);
return;
case ObjectType.TABLE:
if (delta.component === "field") {
updateField(delta.tid, delta.fid, delta.undo);
} else if (delta.component === "field_delete") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
const temp = t.fields.slice();
temp.splice(delta.data.id, 0, delta.data);
return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
}
return t;
})
);
} else if (delta.component === "field_add") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
fields: t.fields.filter((f) => f.id !== t.fields.length - 1).map((f, i) => ({ ...f, id: i })),
};
}
return t;
})
);
} else if (delta.component === "index_add") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
indices: t.indices.filter((f) => f.id !== t.indices.length - 1).map((f, i) => ({ ...f, id: i })),
};
}
return t;
})
);
} else if (delta.component === "index") {
setTables((prev) =>
prev.map((t) => {
if (t.id === delta.tid) {
return {
...t,
indices: t.indices.map((index) =>
index.id === delta.iid
? {
...index,
...delta.undo,
}
: index
),
};
}
return t;
})
);
} else if (delta.component === "index_delete") {
setTables((prev) =>
prev.map((table) => {
if (table.id === delta.tid) {
const temp = table.indices.slice();
temp.splice(delta.data.id, 0, delta.data);
return {
...table,
indices: temp.map((t, i) => ({ ...t, id: i })),
};
}
return table;
})
);
} else if (delta.component === "self") {
updateTable(delta.tid, delta.undo, false);
}
return;
case ObjectType.TYPE:
if (delta.component === "field") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
return {
...t,
fields: t.fields.map((e, j) =>
j === delta.fid ? { ...e, ...delta.undo } : e
),
};
}
return t;
})
);
} else if (delta.component === "field_add") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
return {
...t,
fields: t.fields.filter(
(e, i) => i !== t.fields.length - 1
),
};
}
return t;
})
);
} else if (delta.component === "field_delete") {
setTypes((prev) =>
prev.map((t, i) => {
if (i === delta.tid) {
const temp = t.fields.slice();
temp.splice(delta.fid, 0, delta.data);
return { ...t, fields: temp };
}
return t;
})
);
} else if (delta.component === "self") {
updateType(delta.tid, delta.undo);
}
return;
}
}
};
socket.on("recieve-changes", (delta) => applyChange(delta));
socket.on("recieve-reversed-changes", (delta) => reverseChange(delta));
return () => {
// socket.off("connect", onConnect);
// socket.off("recieve-message", onRecieve);
// socket.off("user-connected", onUserConnected);
// socket.off("user-disconnected", onUserDisconnected);
socket.off("recieve-reversed-changes", reverseChange);
socket.off("recieve-changes", applyChange);
socket.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
@ -1169,7 +681,7 @@ export default function Editor() {
<TabContext.Provider value={{ tab, setTab }}>
<SettingsContext.Provider value={{ settings, setSettings }}>
<UndoRedoContext.Provider
value={{ undoStack, redoStack, setUndoStack, setRedoStack, setHistoryCount }}
value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
>
<SelectContext.Provider
value={{ selectedElement, setSelectedElement }}