diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx index 11dcb91..86d647a 100644 --- a/src/components/ControlPanel.jsx +++ b/src/components/ControlPanel.jsx @@ -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"), }, diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx index a8eb34e..32eb7e4 100644 --- a/src/pages/editor.jsx +++ b/src/pages/editor.jsx @@ -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() {