From 614e2ed24bb1ecfc1a28e2ac10cea2da2b09fa6d Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:50:15 +0300 Subject: [PATCH] bit clean up --- src/components/area_overview.jsx | 19 +- src/components/canvas.jsx | 19 +- src/components/control_panel.jsx | 200 ++++++---------- src/components/note.jsx | 12 +- src/components/notes_overview.jsx | 14 +- src/components/table_overview.jsx | 382 +++++++++--------------------- src/pages/editor.jsx | 119 ++++------ 7 files changed, 243 insertions(+), 522 deletions(-) diff --git a/src/components/area_overview.jsx b/src/components/area_overview.jsx index bd66a46..0c2e0a0 100644 --- a/src/components/area_overview.jsx +++ b/src/components/area_overview.jsx @@ -28,7 +28,7 @@ import { import { AreaContext, UndoRedoContext } from "../pages/editor"; export default function AreaOverview(props) { - const { areas, setAreas, addArea, deleteArea } = useContext(AreaContext); + const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const [editField, setEditField] = useState({}); const [value, setValue] = useState(""); @@ -48,20 +48,6 @@ export default function AreaOverview(props) { ); }; - const updateArea = (aid, updatedValues) => { - setAreas((prev) => - prev.map((a, i) => { - if (aid === i) { - return { - ...a, - ...updatedValues, - }; - } - return a; - }) - ); - }; - return (
@@ -134,7 +120,6 @@ export default function AreaOverview(props) { }, ]); setRedoStack([]); - setEditField({}); }} /> @@ -176,7 +161,6 @@ export default function AreaOverview(props) { }, ]); setRedoStack([]); - setEditField({}); updateArea(i, { color: c }); }} > @@ -210,7 +194,6 @@ export default function AreaOverview(props) { }, ]); setRedoStack([]); - setEditField({}); updateArea(i, { color: c }); }} > diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx index 0034a52..189fd9d 100644 --- a/src/components/canvas.jsx +++ b/src/components/canvas.jsx @@ -13,10 +13,10 @@ import { import Note from "./note"; export default function Canvas(props) { - const { tables, moveTable, relationships, addRelationship } = + const { tables, updateTable, relationships, addRelationship } = useContext(TableContext); - const { areas, setAreas, moveArea } = useContext(AreaContext); - const { notes, moveNote } = useContext(NoteContext); + const { areas, setAreas, updateArea } = useContext(AreaContext); + const { notes, updateNote } = useContext(NoteContext); const { settings, setSettings } = useContext(SettingsContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const [dragging, setDragging] = useState({ @@ -128,7 +128,7 @@ export default function Canvas(props) { } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) { const dx = e.clientX / settings.zoom - offset.x; const dy = e.clientY / settings.zoom - offset.y; - moveTable(dragging.id, dx, dy); + updateTable(dragging.id, { x: dx, y: dy }, true); } else if ( dragging.element === ObjectType.AREA && dragging.id >= 0 && @@ -136,11 +136,11 @@ export default function Canvas(props) { ) { const dx = e.clientX / settings.zoom - offset.x; const dy = e.clientY / settings.zoom - offset.y; - moveArea(dragging.id, dx, dy); + updateArea(dragging.id, { x: dx, y: dy }); } else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) { const dx = e.clientX / settings.zoom - offset.x; const dy = e.clientY / settings.zoom - offset.y; - moveNote(dragging.id, dx, dy); + updateNote(dragging.id, { x: dx, y: dy }); } else if (areaResize.id !== -1) { if (areaResize.dir === "none") return; @@ -241,16 +241,13 @@ export default function Canvas(props) { setRedoStack([]); } setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 }); - // NOTE: consider just saving the offset to sub and add in undo redo if (panning.state && didPan()) { setUndoStack((prev) => [ ...prev, { action: Action.PAN, - data: { - undo: { x: panning.x, y: panning.y }, - redo: settings.pan, - }, + undo: { x: panning.x, y: panning.y }, + redo: settings.pan, }, ]); setRedoStack([]); diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index 6f899bc..83a6d25 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -81,16 +81,16 @@ export default function ControlPanel(props) { tables, setTables, addTable, - moveTable, + updateTable, deleteTable, updateField, setRelationships, addRelationship, deleteRelationship, } = useContext(TableContext); - const { notes, setNotes, moveNote, addNote, deleteNote } = + const { notes, setNotes, updateNote, addNote, deleteNote } = useContext(NoteContext); - const { areas, setAreas, moveArea, addArea, deleteArea } = + const { areas, setAreas, updateArea, addArea, deleteArea } = useContext(AreaContext); const { undoStack, redoStack, setUndoStack, setRedoStack } = useContext(UndoRedoContext); @@ -134,19 +134,19 @@ export default function ControlPanel(props) { ...prev, { ...a, x: tables[a.id].x, y: tables[a.id].y }, ]); - moveTable(a.id, a.x, a.y); + updateTable(a.id, { x: a.x, y: a.y }, true); } else if (a.element === ObjectType.AREA) { setRedoStack((prev) => [ ...prev, { ...a, x: areas[a.id].x, y: areas[a.id].y }, ]); - moveArea(a.id, a.x, a.y); + updateArea(a.id, { x: a.x, y: a.y }); } else if (a.element === ObjectType.NOTE) { setRedoStack((prev) => [ ...prev, { ...a, x: notes[a.id].x, y: notes[a.id].y }, ]); - moveNote(a.id, a.x, a.y); + updateNote(a.id, { x: a.x, y: a.y }); } } else if (a.action === Action.DELETE) { if (a.element === ObjectType.TABLE) { @@ -170,17 +170,10 @@ export default function ControlPanel(props) { }) ); } else if (a.element === ObjectType.NOTE) { - setNotes((prev) => - prev.map((n) => { - if (n.id === a.nid) { - return { ...n, ...a.undo }; - } - return n; - }) - ); + updateNote(a.nid, a.undo); } else if (a.element === ObjectType.TABLE) { if (a.component === "field") { - updateField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values); + updateField(a.tid, a.fid, a.undo); } else if (a.component === "field_delete") { setTables((prev) => prev.map((t, i) => { @@ -207,17 +200,7 @@ export default function ControlPanel(props) { }) ); } else if (a.component === "comment") { - setTables((prev) => - prev.map((t, i) => { - if (t.id === a.data.undo.tid) { - return { - ...t, - ...a.data.undo.values, - }; - } - return t; - }) - ); + updateTable(a.tid, a.undo, false); } else if (a.component === "index_add") { setTables((prev) => prev.map((table, i) => { @@ -233,19 +216,16 @@ export default function ControlPanel(props) { }) ); } else if (a.component === "index") { - setTables((prev) => - prev.map((table, i) => { - if (a.tid === i) { - return { - ...table, - indices: table.indices.map((idx) => - idx.id === a.iid ? { ...idx, ...a.undo.values } : idx - ), - }; - } - return table; - }) - ); + updateTable(a.tid, { + indices: tables[a.tid].indices.map((index) => + index.id === a.iid + ? { + ...index, + ...a.undo, + } + : index + ), + }); } else if (a.component === "index_delete") { setTables((prev) => prev.map((table, i) => { @@ -261,16 +241,14 @@ export default function ControlPanel(props) { }) ); } else if (a.component === "self") { - setTables((prev) => - prev.map((t) => (t.id === a.tid ? { ...t, ...a.undo } : t)) - ); + updateTable(a.tid, a.undo); } } setRedoStack((prev) => [...prev, a]); } else if (a.action === Action.PAN) { setSettings((prev) => ({ ...prev, - pan: a.data.undo, + pan: a.undo, })); setRedoStack((prev) => [...prev, a]); } @@ -296,19 +274,19 @@ export default function ControlPanel(props) { ...prev, { ...a, x: tables[a.id].x, y: tables[a.id].y }, ]); - moveTable(a.id, a.x, a.y); + updateTable(a.id, { x: a.x, y: a.y }, true); } else if (a.element === ObjectType.AREA) { setUndoStack((prev) => [ ...prev, { ...a, x: areas[a.id].x, y: areas[a.id].y }, ]); - moveArea(a.id, a.x, a.y); + updateArea(a.id, { x: a.x, y: a.y }); } else if (a.element === ObjectType.NOTE) { setUndoStack((prev) => [ ...prev, { ...a, x: notes[a.id].x, y: notes[a.id].y }, ]); - moveNote(a.id, a.x, a.y); + updateNote(a.id, { x: a.x, y: a.y }); } } else if (a.action === Action.DELETE) { if (a.element === ObjectType.TABLE) { @@ -332,69 +310,36 @@ export default function ControlPanel(props) { }) ); } else if (a.element === ObjectType.NOTE) { - setNotes((prev) => - prev.map((n) => { - if (n.id === a.nid) { - return { ...n, ...a.redo }; - } - return n; - }) - ); + updateNote(a.nid, a.redo); } else if (a.element === ObjectType.TABLE) { if (a.component === "field") { - updateField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values); + updateField(a.tid, a.fid, a.redo); } else if (a.component === "field_delete") { - setTables((prev) => - prev.map((t, i) => { - if (t.id === a.tid) { - return { - ...t, - fields: t.fields - .filter((e) => e.id !== a.data.id) - .map((t, i) => ({ ...t, id: i })), - }; - } - return t; - }) - ); + updateTable(a.tid, { + fields: tables[a.tid].fields + .filter((field) => field.id !== a.data.id) + .map((e, i) => ({ ...e, id: i })), + }); } else if (a.component === "field_add") { - setTables((prev) => - prev.map((t, i) => { - if (t.id === a.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; - }) - ); + updateTable(a.tid, { + fields: [ + ...tables[a.tid].fields, + { + name: "", + type: "", + default: "", + check: "", + primary: false, + unique: false, + notNull: false, + increment: false, + comment: "", + id: tables[a.tid].fields.length, + }, + ], + }); } else if (a.component === "comment") { - setTables((prev) => - prev.map((t, i) => { - if (t.id === a.data.redo.tid) { - return { - ...t, - ...a.data.redo.values, - }; - } - return t; - }) - ); + updateTable(a.tid, a.redo, false); } else if (a.component === "index_add") { setTables((prev) => prev.map((table) => { @@ -415,44 +360,31 @@ export default function ControlPanel(props) { }) ); } else if (a.component === "index") { - setTables((prev) => - prev.map((table, i) => { - if (a.tid === i) { - return { - ...table, - indices: table.indices.map((idx) => - idx.id === a.iid ? { ...idx, ...a.redo.values } : idx - ), - }; - } - return table; - }) - ); + updateTable(a.tid, { + indices: tables[a.tid].indices.map((index) => + index.id === a.iid + ? { + ...index, + ...a.redo, + } + : index + ), + }); } else if (a.component === "index_delete") { - setTables((prev) => - prev.map((table, i) => { - if (table.id === a.tid) { - return { - ...table, - indices: table.indices - .filter((e) => e.id !== a.data.id) - .map((t, i) => ({ ...t, id: i })), - }; - } - return table; - }) - ); + updateTable(a.tid, { + indices: tables[a.tid].indices + .filter((e) => e.id !== a.data.id) + .map((t, i) => ({ ...t, id: i })), + }); } else if (a.component === "self") { - setTables((prev) => - prev.map((t) => (t.id === a.tid ? { ...t, ...a.redo } : t)) - ); + updateTable(a.tid, a.redo); } } setUndoStack((prev) => [...prev, a]); } else if (a.action === Action.PAN) { setSettings((prev) => ({ ...prev, - pan: a.data.redo, + pan: a.redo, })); setUndoStack((prev) => [...prev, a]); } diff --git a/src/components/note.jsx b/src/components/note.jsx index 7d149cf..25c2dfa 100644 --- a/src/components/note.jsx +++ b/src/components/note.jsx @@ -3,7 +3,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor"; import { Action, ObjectType } from "../data/data"; export default function Note(props) { - const { setNotes } = useContext(NoteContext); + const { updateNote } = useContext(NoteContext); const w = 180; const r = 3; const fold = 24; @@ -14,14 +14,7 @@ export default function Note(props) { textarea.style.height = "0"; textarea.style.height = textarea.scrollHeight + "px"; const newHeight = textarea.scrollHeight + 41; - setNotes((prev) => - prev.map((n) => { - if (n.id === props.data.id) { - return { ...n, content: e.target.value, height: newHeight }; - } - return n; - }) - ); + updateNote(props.data.id, { content: e.target.value, height: newHeight }); }; return ( @@ -94,7 +87,6 @@ export default function Note(props) { }, ]); setRedoStack([]); - setEditField({}); }} className="w-full resize-none outline-none overflow-y-hidden border-none select-none" style={{ backgroundColor: props.data.color }} diff --git a/src/components/notes_overview.jsx b/src/components/notes_overview.jsx index bda90df..61e01cb 100644 --- a/src/components/notes_overview.jsx +++ b/src/components/notes_overview.jsx @@ -24,7 +24,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor"; import { noteThemes, Action, ObjectType } from "../data/data"; export default function NotesOverview(props) { - const { notes, setNotes, addNote, deleteNote } = useContext(NoteContext); + const { notes, updateNote, addNote, deleteNote } = useContext(NoteContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const [value, setValue] = useState(""); const [editField, setEditField] = useState({}); @@ -45,17 +45,6 @@ export default function NotesOverview(props) { ); }; - const updateNote = (id, values) => { - setNotes((prev) => - prev.map((note) => { - if (note.id === id) { - return { ...note, ...values }; - } - return note; - }) - ); - }; - return (
@@ -145,7 +134,6 @@ export default function NotesOverview(props) { }, ]); setRedoStack([]); - setEditField({}); }} rows={3} /> diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx index 852200a..516dd9e 100644 --- a/src/components/table_overview.jsx +++ b/src/components/table_overview.jsx @@ -38,7 +38,7 @@ import { TableContext, UndoRedoContext } from "../pages/editor"; export default function TableOverview(props) { const [indexActiveKey, setIndexActiveKey] = useState(""); const [value, setValue] = useState(""); - const { tables, setTables, addTable, deleteTable, updateField } = + const { tables, addTable, deleteTable, updateField, updateTable } = useContext(TableContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const [editField, setEditField] = useState({}); @@ -58,20 +58,6 @@ export default function TableOverview(props) { ); }; - const updateTable = (tid, updatedValues) => { - setTables((prev) => - prev.map((table, i) => { - if (tid === i) { - return { - ...table, - ...updatedValues, - }; - } - return table; - }) - ); - }; - return ( <> @@ -82,7 +68,6 @@ export default function TableOverview(props) { showClear prefix={} placeholder="Search..." - emptyContent={
No tables found
} onSearch={(v) => handleStringSearch(v)} onChange={(v) => setValue(v)} onSelect={(v) => { @@ -138,16 +123,9 @@ export default function TableOverview(props) { updateField(i, j, { name: value })} - onFocus={(e) => - setEditField({ - tid: i, - fid: j, - values: { name: e.target.value }, - }) - } + onFocus={(e) => setEditField({ name: e.target.value })} onBlur={(e) => { if (e.target.value === editField.name) return; setUndoStack((prev) => [ @@ -156,18 +134,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: editField, - redo: { - tid: i, - fid: j, - values: { name: e.target.value }, - }, - }, + tid: i, + fid: j, + undo: editField, + redo: { name: e.target.value }, }, ]); setRedoStack([]); - setEditField({}); }} /> @@ -191,22 +164,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: { - tid: i, - fid: j, - values: { type: f.type }, - }, - redo: { - tid: i, - fid: j, - values: { type: value }, - }, - }, + tid: i, + fid: j, + undo: { type: f.type }, + redo: { type: value }, }, ]); setRedoStack([]); - setEditField({}); updateField(i, j, { type: value }); }} > @@ -223,22 +187,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: { - tid: i, - fid: j, - values: { notNull: f.notNull }, - }, - redo: { - tid: i, - fid: j, - values: { notNull: !f.notNull }, - }, - }, + tid: i, + fid: j, + undo: { notNull: f.notNull }, + redo: { notNull: !f.notNull }, }, ]); setRedoStack([]); - setEditField({}); updateField(i, j, { notNull: !f.notNull }); }} > @@ -257,22 +212,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: { - tid: i, - fid: j, - values: { primary: f.primary }, - }, - redo: { - tid: i, - fid: j, - values: { primary: !f.primary }, - }, - }, + tid: i, + fid: j, + undo: { primary: f.primary }, + redo: { primary: !f.primary }, }, ]); setRedoStack([]); - setEditField({}); updateField(i, j, { primary: !f.primary }); }} icon={} @@ -291,11 +237,7 @@ export default function TableOverview(props) { updateField(i, j, { default: value }) } onFocus={(e) => - setEditField({ - tid: i, - fid: j, - values: { default: e.target.value }, - }) + setEditField({ default: e.target.value }) } onBlur={(e) => { if (e.target.value === editField.default) @@ -306,18 +248,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: editField, - redo: { - tid: i, - fid: j, - values: { default: e.target.value }, - }, - }, + tid: i, + fid: j, + undo: editField, + redo: { default: e.target.value }, }, ]); setRedoStack([]); - setEditField({}); }} />
@@ -331,11 +268,7 @@ export default function TableOverview(props) { updateField(i, j, { check: value }) } onFocus={(e) => - setEditField({ - tid: i, - fid: j, - values: { check: e.target.value }, - }) + setEditField({ check: e.target.value }) } onBlur={(e) => { if (e.target.value === editField.check) return; @@ -345,18 +278,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: editField, - redo: { - tid: i, - fid: j, - values: { check: e.target.value }, - }, - }, + tid: i, + fid: j, + undo: editField, + redo: { check: e.target.value }, }, ]); setRedoStack([]); - setEditField({}); }} />
@@ -371,28 +299,19 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: { - tid: i, - fid: j, - values: { - [checkedValues.target.value]: - !checkedValues.target.checked, - }, - }, - redo: { - tid: i, - fid: j, - values: { - [checkedValues.target.value]: - checkedValues.target.checked, - }, - }, + tid: i, + fid: j, + undo: { + [checkedValues.target.value]: + !checkedValues.target.checked, + }, + redo: { + [checkedValues.target.value]: + checkedValues.target.checked, }, }, ]); setRedoStack([]); - setEditField({}); updateField(i, j, { [checkedValues.target.value]: checkedValues.target.checked, @@ -412,28 +331,19 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: { - tid: i, - fid: j, - values: { - [checkedValues.target.value]: - !checkedValues.target.checked, - }, - }, - redo: { - tid: i, - fid: j, - values: { - [checkedValues.target.value]: - checkedValues.target.checked, - }, - }, + tid: i, + fid: j, + undo: { + [checkedValues.target.value]: + !checkedValues.target.checked, + }, + redo: { + [checkedValues.target.value]: + checkedValues.target.checked, }, }, ]); setRedoStack([]); - setEditField({}); updateField(i, j, { [checkedValues.target.value]: checkedValues.target.checked, @@ -453,11 +363,7 @@ export default function TableOverview(props) { updateField(i, j, { comment: value }) } onFocus={(e) => - setEditField({ - tid: i, - fid: j, - values: { comment: e.target.value }, - }) + setEditField({ comment: e.target.value }) } onBlur={(e) => { if (e.target.value === editField.comment) @@ -468,18 +374,13 @@ export default function TableOverview(props) { action: Action.EDIT, element: ObjectType.TABLE, component: "field", - data: { - undo: editField, - redo: { - tid: i, - fid: j, - values: { comment: e.target.value }, - }, - }, + tid: i, + fid: j, + undo: editField, + redo: { comment: e.target.value }, }, ]); setRedoStack([]); - setEditField({}); }} />