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

bit clean up

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:15 +03:00
parent 60193c33b8
commit 614e2ed24b
7 changed files with 243 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/area_overview.jsx
View File

@ -28,7 +28,7 @@ import {
import { AreaContext, UndoRedoContext } from "../pages/editor"; import { AreaContext, UndoRedoContext } from "../pages/editor";
export default function AreaOverview(props) { 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 { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
const [value, setValue] = 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 ( return (
<div> <div>
<Row gutter={6}> <Row gutter={6}>
@ -134,7 +120,6 @@ export default function AreaOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
</Col> </Col>
@ -176,7 +161,6 @@ export default function AreaOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateArea(i, { color: c }); updateArea(i, { color: c });
}} }}
> >
@ -210,7 +194,6 @@ export default function AreaOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateArea(i, { color: c }); updateArea(i, { color: c });
}} }}
> >

19
src/components/canvas.jsx
View File

@ -13,10 +13,10 @@ import {
import Note from "./note"; import Note from "./note";
export default function Canvas(props) { export default function Canvas(props) {
const { tables, moveTable, relationships, addRelationship } = const { tables, updateTable, relationships, addRelationship } =
useContext(TableContext); useContext(TableContext);
const { areas, setAreas, moveArea } = useContext(AreaContext); const { areas, setAreas, updateArea } = useContext(AreaContext);
const { notes, moveNote } = useContext(NoteContext); const { notes, updateNote } = useContext(NoteContext);
const { settings, setSettings } = useContext(SettingsContext); const { settings, setSettings } = useContext(SettingsContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [dragging, setDragging] = useState({ const [dragging, setDragging] = useState({
@ -128,7 +128,7 @@ export default function Canvas(props) {
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) { } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
const dx = e.clientX / settings.zoom - offset.x; const dx = e.clientX / settings.zoom - offset.x;
const dy = e.clientY / settings.zoom - offset.y; const dy = e.clientY / settings.zoom - offset.y;
moveTable(dragging.id, dx, dy); updateTable(dragging.id, { x: dx, y: dy }, true);
} else if ( } else if (
dragging.element === ObjectType.AREA && dragging.element === ObjectType.AREA &&
dragging.id >= 0 && dragging.id >= 0 &&
@ -136,11 +136,11 @@ export default function Canvas(props) {
) { ) {
const dx = e.clientX / settings.zoom - offset.x; const dx = e.clientX / settings.zoom - offset.x;
const dy = e.clientY / settings.zoom - offset.y; 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) { } else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) {
const dx = e.clientX / settings.zoom - offset.x; const dx = e.clientX / settings.zoom - offset.x;
const dy = e.clientY / settings.zoom - offset.y; 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) { } else if (areaResize.id !== -1) {
if (areaResize.dir === "none") return; if (areaResize.dir === "none") return;
@ -241,16 +241,13 @@ export default function Canvas(props) {
setRedoStack([]); setRedoStack([]);
} }
setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 }); 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()) { if (panning.state && didPan()) {
setUndoStack((prev) => [ setUndoStack((prev) => [
...prev, ...prev,
{ {
action: Action.PAN, action: Action.PAN,
data: { undo: { x: panning.x, y: panning.y },
undo: { x: panning.x, y: panning.y }, redo: settings.pan,
redo: settings.pan,
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);

200
src/components/control_panel.jsx
View File

@ -81,16 +81,16 @@ export default function ControlPanel(props) {
tables, tables,
setTables, setTables,
addTable, addTable,
moveTable, updateTable,
deleteTable, deleteTable,
updateField, updateField,
setRelationships, setRelationships,
addRelationship, addRelationship,
deleteRelationship, deleteRelationship,
} = useContext(TableContext); } = useContext(TableContext);
const { notes, setNotes, moveNote, addNote, deleteNote } = const { notes, setNotes, updateNote, addNote, deleteNote } =
useContext(NoteContext); useContext(NoteContext);
const { areas, setAreas, moveArea, addArea, deleteArea } = const { areas, setAreas, updateArea, addArea, deleteArea } =
useContext(AreaContext); useContext(AreaContext);
const { undoStack, redoStack, setUndoStack, setRedoStack } = const { undoStack, redoStack, setUndoStack, setRedoStack } =
useContext(UndoRedoContext); useContext(UndoRedoContext);
@ -134,19 +134,19 @@ export default function ControlPanel(props) {
...prev, ...prev,
{ ...a, x: tables[a.id].x, y: tables[a.id].y }, { ...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) { } else if (a.element === ObjectType.AREA) {
setRedoStack((prev) => [ setRedoStack((prev) => [
...prev, ...prev,
{ ...a, x: areas[a.id].x, y: areas[a.id].y }, { ...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) { } else if (a.element === ObjectType.NOTE) {
setRedoStack((prev) => [ setRedoStack((prev) => [
...prev, ...prev,
{ ...a, x: notes[a.id].x, y: notes[a.id].y }, { ...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) { } else if (a.action === Action.DELETE) {
if (a.element === ObjectType.TABLE) { if (a.element === ObjectType.TABLE) {
@ -170,17 +170,10 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.element === ObjectType.NOTE) { } else if (a.element === ObjectType.NOTE) {
setNotes((prev) => updateNote(a.nid, a.undo);
prev.map((n) => {
if (n.id === a.nid) {
return { ...n, ...a.undo };
}
return n;
})
);
} else if (a.element === ObjectType.TABLE) { } else if (a.element === ObjectType.TABLE) {
if (a.component === "field") { 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") { } else if (a.component === "field_delete") {
setTables((prev) => setTables((prev) =>
prev.map((t, i) => { prev.map((t, i) => {
@ -207,17 +200,7 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.component === "comment") { } else if (a.component === "comment") {
setTables((prev) => updateTable(a.tid, a.undo, false);
prev.map((t, i) => {
if (t.id === a.data.undo.tid) {
return {
...t,
...a.data.undo.values,
};
}
return t;
})
);
} else if (a.component === "index_add") { } else if (a.component === "index_add") {
setTables((prev) => setTables((prev) =>
prev.map((table, i) => { prev.map((table, i) => {
@ -233,19 +216,16 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.component === "index") { } else if (a.component === "index") {
setTables((prev) => updateTable(a.tid, {
prev.map((table, i) => { indices: tables[a.tid].indices.map((index) =>
if (a.tid === i) { index.id === a.iid
return { ? {
...table, ...index,
indices: table.indices.map((idx) => ...a.undo,
idx.id === a.iid ? { ...idx, ...a.undo.values } : idx }
), : index
}; ),
} });
return table;
})
);
} else if (a.component === "index_delete") { } else if (a.component === "index_delete") {
setTables((prev) => setTables((prev) =>
prev.map((table, i) => { prev.map((table, i) => {
@ -261,16 +241,14 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.component === "self") { } else if (a.component === "self") {
setTables((prev) => updateTable(a.tid, a.undo);
prev.map((t) => (t.id === a.tid ? { ...t, ...a.undo } : t))
);
} }
} }
setRedoStack((prev) => [...prev, a]); setRedoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) { } else if (a.action === Action.PAN) {
setSettings((prev) => ({ setSettings((prev) => ({
...prev, ...prev,
pan: a.data.undo, pan: a.undo,
})); }));
setRedoStack((prev) => [...prev, a]); setRedoStack((prev) => [...prev, a]);
} }
@ -296,19 +274,19 @@ export default function ControlPanel(props) {
...prev, ...prev,
{ ...a, x: tables[a.id].x, y: tables[a.id].y }, { ...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) { } else if (a.element === ObjectType.AREA) {
setUndoStack((prev) => [ setUndoStack((prev) => [
...prev, ...prev,
{ ...a, x: areas[a.id].x, y: areas[a.id].y }, { ...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) { } else if (a.element === ObjectType.NOTE) {
setUndoStack((prev) => [ setUndoStack((prev) => [
...prev, ...prev,
{ ...a, x: notes[a.id].x, y: notes[a.id].y }, { ...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) { } else if (a.action === Action.DELETE) {
if (a.element === ObjectType.TABLE) { if (a.element === ObjectType.TABLE) {
@ -332,69 +310,36 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.element === ObjectType.NOTE) { } else if (a.element === ObjectType.NOTE) {
setNotes((prev) => updateNote(a.nid, a.redo);
prev.map((n) => {
if (n.id === a.nid) {
return { ...n, ...a.redo };
}
return n;
})
);
} else if (a.element === ObjectType.TABLE) { } else if (a.element === ObjectType.TABLE) {
if (a.component === "field") { 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") { } else if (a.component === "field_delete") {
setTables((prev) => updateTable(a.tid, {
prev.map((t, i) => { fields: tables[a.tid].fields
if (t.id === a.tid) { .filter((field) => field.id !== a.data.id)
return { .map((e, i) => ({ ...e, id: i })),
...t, });
fields: t.fields
.filter((e) => e.id !== a.data.id)
.map((t, i) => ({ ...t, id: i })),
};
}
return t;
})
);
} else if (a.component === "field_add") { } else if (a.component === "field_add") {
setTables((prev) => updateTable(a.tid, {
prev.map((t, i) => { fields: [
if (t.id === a.tid) { ...tables[a.tid].fields,
return { {
...t, name: "",
fields: [ type: "",
...t.fields, default: "",
{ check: "",
name: "", primary: false,
type: "", unique: false,
default: "", notNull: false,
check: "", increment: false,
primary: false, comment: "",
unique: false, id: tables[a.tid].fields.length,
notNull: false, },
increment: false, ],
comment: "", });
id: t.fields.length,
},
],
};
}
return t;
})
);
} else if (a.component === "comment") { } else if (a.component === "comment") {
setTables((prev) => updateTable(a.tid, a.redo, false);
prev.map((t, i) => {
if (t.id === a.data.redo.tid) {
return {
...t,
...a.data.redo.values,
};
}
return t;
})
);
} else if (a.component === "index_add") { } else if (a.component === "index_add") {
setTables((prev) => setTables((prev) =>
prev.map((table) => { prev.map((table) => {
@ -415,44 +360,31 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.component === "index") { } else if (a.component === "index") {
setTables((prev) => updateTable(a.tid, {
prev.map((table, i) => { indices: tables[a.tid].indices.map((index) =>
if (a.tid === i) { index.id === a.iid
return { ? {
...table, ...index,
indices: table.indices.map((idx) => ...a.redo,
idx.id === a.iid ? { ...idx, ...a.redo.values } : idx }
), : index
}; ),
} });
return table;
})
);
} else if (a.component === "index_delete") { } else if (a.component === "index_delete") {
setTables((prev) => updateTable(a.tid, {
prev.map((table, i) => { indices: tables[a.tid].indices
if (table.id === a.tid) { .filter((e) => e.id !== a.data.id)
return { .map((t, i) => ({ ...t, id: i })),
...table, });
indices: table.indices
.filter((e) => e.id !== a.data.id)
.map((t, i) => ({ ...t, id: i })),
};
}
return table;
})
);
} else if (a.component === "self") { } else if (a.component === "self") {
setTables((prev) => updateTable(a.tid, a.redo);
prev.map((t) => (t.id === a.tid ? { ...t, ...a.redo } : t))
);
} }
} }
setUndoStack((prev) => [...prev, a]); setUndoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) { } else if (a.action === Action.PAN) {
setSettings((prev) => ({ setSettings((prev) => ({
...prev, ...prev,
pan: a.data.redo, pan: a.redo,
})); }));
setUndoStack((prev) => [...prev, a]); setUndoStack((prev) => [...prev, a]);
} }

12
src/components/note.jsx
View File

@ -3,7 +3,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor";
import { Action, ObjectType } from "../data/data"; import { Action, ObjectType } from "../data/data";
export default function Note(props) { export default function Note(props) {
const { setNotes } = useContext(NoteContext); const { updateNote } = useContext(NoteContext);
const w = 180; const w = 180;
const r = 3; const r = 3;
const fold = 24; const fold = 24;
@ -14,14 +14,7 @@ export default function Note(props) {
textarea.style.height = "0"; textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px"; textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 41; const newHeight = textarea.scrollHeight + 41;
setNotes((prev) => updateNote(props.data.id, { content: e.target.value, height: newHeight });
prev.map((n) => {
if (n.id === props.data.id) {
return { ...n, content: e.target.value, height: newHeight };
}
return n;
})
);
}; };
return ( return (
@ -94,7 +87,6 @@ export default function Note(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
className="w-full resize-none outline-none overflow-y-hidden border-none select-none" className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
style={{ backgroundColor: props.data.color }} style={{ backgroundColor: props.data.color }}

14
src/components/notes_overview.jsx
View File

@ -24,7 +24,7 @@ import { NoteContext, UndoRedoContext } from "../pages/editor";
import { noteThemes, Action, ObjectType } from "../data/data"; import { noteThemes, Action, ObjectType } from "../data/data";
export default function NotesOverview(props) { 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 { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [editField, setEditField] = 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 ( return (
<div> <div>
<Row gutter={6}> <Row gutter={6}>
@ -145,7 +134,6 @@ export default function NotesOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
rows={3} rows={3}
/> />

382
src/components/table_overview.jsx
View File

@ -38,7 +38,7 @@ import { TableContext, UndoRedoContext } from "../pages/editor";
export default function TableOverview(props) { export default function TableOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState(""); const [indexActiveKey, setIndexActiveKey] = useState("");
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const { tables, setTables, addTable, deleteTable, updateField } = const { tables, addTable, deleteTable, updateField, updateTable } =
useContext(TableContext); useContext(TableContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({}); 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 ( return (
<> <>
<Row gutter={6}> <Row gutter={6}>
@ -82,7 +68,6 @@ export default function TableOverview(props) {
showClear showClear
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder="Search..." placeholder="Search..."
emptyContent={<div className="p-3">No tables found</div>}
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
@ -138,16 +123,9 @@ export default function TableOverview(props) {
<Input <Input
field="name" field="name"
value={f.name} value={f.name}
className="m-0"
placeholder="Name" placeholder="Name"
onChange={(value) => updateField(i, j, { name: value })} onChange={(value) => updateField(i, j, { name: value })}
onFocus={(e) => onFocus={(e) => setEditField({ name: e.target.value })}
setEditField({
tid: i,
fid: j,
values: { name: e.target.value },
})
}
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === editField.name) return; if (e.target.value === editField.name) return;
setUndoStack((prev) => [ setUndoStack((prev) => [
@ -156,18 +134,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: editField, fid: j,
redo: { undo: editField,
tid: i, redo: { name: e.target.value },
fid: j,
values: { name: e.target.value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
</Col> </Col>
@ -191,22 +164,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: { fid: j,
tid: i, undo: { type: f.type },
fid: j, redo: { type: value },
values: { type: f.type },
},
redo: {
tid: i,
fid: j,
values: { type: value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateField(i, j, { type: value }); updateField(i, j, { type: value });
}} }}
></Select> ></Select>
@ -223,22 +187,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: { fid: j,
tid: i, undo: { notNull: f.notNull },
fid: j, redo: { notNull: !f.notNull },
values: { notNull: f.notNull },
},
redo: {
tid: i,
fid: j,
values: { notNull: !f.notNull },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateField(i, j, { notNull: !f.notNull }); updateField(i, j, { notNull: !f.notNull });
}} }}
> >
@ -257,22 +212,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: { fid: j,
tid: i, undo: { primary: f.primary },
fid: j, redo: { primary: !f.primary },
values: { primary: f.primary },
},
redo: {
tid: i,
fid: j,
values: { primary: !f.primary },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateField(i, j, { primary: !f.primary }); updateField(i, j, { primary: !f.primary });
}} }}
icon={<IconKeyStroked />} icon={<IconKeyStroked />}
@ -291,11 +237,7 @@ export default function TableOverview(props) {
updateField(i, j, { default: value }) updateField(i, j, { default: value })
} }
onFocus={(e) => onFocus={(e) =>
setEditField({ setEditField({ default: e.target.value })
tid: i,
fid: j,
values: { default: e.target.value },
})
} }
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === editField.default) if (e.target.value === editField.default)
@ -306,18 +248,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: editField, fid: j,
redo: { undo: editField,
tid: i, redo: { default: e.target.value },
fid: j,
values: { default: e.target.value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
<div className="font-semibold"> <div className="font-semibold">
@ -331,11 +268,7 @@ export default function TableOverview(props) {
updateField(i, j, { check: value }) updateField(i, j, { check: value })
} }
onFocus={(e) => onFocus={(e) =>
setEditField({ setEditField({ check: e.target.value })
tid: i,
fid: j,
values: { check: e.target.value },
})
} }
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === editField.check) return; if (e.target.value === editField.check) return;
@ -345,18 +278,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: editField, fid: j,
redo: { undo: editField,
tid: i, redo: { check: e.target.value },
fid: j,
values: { check: e.target.value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
<div className="flex justify-between items-center my-3"> <div className="flex justify-between items-center my-3">
@ -371,28 +299,19 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: { fid: j,
tid: i, undo: {
fid: j, [checkedValues.target.value]:
values: { !checkedValues.target.checked,
[checkedValues.target.value]: },
!checkedValues.target.checked, redo: {
}, [checkedValues.target.value]:
}, checkedValues.target.checked,
redo: {
tid: i,
fid: j,
values: {
[checkedValues.target.value]:
checkedValues.target.checked,
},
},
}, },
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateField(i, j, { updateField(i, j, {
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
@ -412,28 +331,19 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: { fid: j,
tid: i, undo: {
fid: j, [checkedValues.target.value]:
values: { !checkedValues.target.checked,
[checkedValues.target.value]: },
!checkedValues.target.checked, redo: {
}, [checkedValues.target.value]:
}, checkedValues.target.checked,
redo: {
tid: i,
fid: j,
values: {
[checkedValues.target.value]:
checkedValues.target.checked,
},
},
}, },
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
updateField(i, j, { updateField(i, j, {
[checkedValues.target.value]: [checkedValues.target.value]:
checkedValues.target.checked, checkedValues.target.checked,
@ -453,11 +363,7 @@ export default function TableOverview(props) {
updateField(i, j, { comment: value }) updateField(i, j, { comment: value })
} }
onFocus={(e) => onFocus={(e) =>
setEditField({ setEditField({ comment: e.target.value })
tid: i,
fid: j,
values: { comment: e.target.value },
})
} }
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === editField.comment) if (e.target.value === editField.comment)
@ -468,18 +374,13 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "field", component: "field",
data: { tid: i,
undo: editField, fid: j,
redo: { undo: editField,
tid: i, redo: { comment: e.target.value },
fid: j,
values: { comment: e.target.value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
<Button <Button
@ -498,19 +399,11 @@ export default function TableOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setTables((prev) => updateTable(i, {
prev.map((table) => { fields: t.fields
if (table.id === i) { .filter((field) => field.id !== j)
return { .map((e, i) => ({ ...e, id: i })),
...table, });
fields: table.fields.filter(
(field, k) => k !== j
),
};
}
return table;
})
);
}} }}
> >
Delete field Delete field
@ -562,42 +455,27 @@ export default function TableOverview(props) {
tid: i, tid: i,
iid: k, iid: k,
undo: { undo: {
values: { fields: [...idx.fields],
fields: [...idx.fields], name: `${idx.fields.join("_")}_index`,
name: `${idx.fields.join("_")}_index`,
},
}, },
redo: { redo: {
values: { fields: [...value],
fields: [...value], name: `${value.join("_")}_index`,
name: `${value.join("_")}_index`,
},
}, },
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({}); updateTable(i, {
setTables((prev) => indices: t.indices.map((index) =>
prev.map((table, i) => { index.id === k
if (table.id === i) { ? {
return { ...index,
...table, fields: [...value],
indices: table.indices.map((index) => name: `${value.join("_")}_index`,
index.id === k }
? { : index
...index, ),
fields: [...value], });
name: `${value.join(
"_"
)}_index`,
}
: index
),
};
}
return table;
})
);
}} }}
/> />
<Popover <Popover
@ -625,24 +503,14 @@ export default function TableOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setTables((prev) => updateTable(i, {
prev.map((table) => { indices: t.indices
if (table.id === i) { .filter((e) => e.id !== k)
return { .map((e, j) => ({
...table, ...e,
indices: table.indices id: j,
.filter( })),
(index) => index.id !== idx.id });
)
.map((e, j) => ({
...e,
id: j,
})),
};
}
return table;
})
);
}} }}
> >
Delete Delete
@ -674,18 +542,15 @@ export default function TableOverview(props) {
<Collapse.Panel header="Comment" itemKey="1"> <Collapse.Panel header="Comment" itemKey="1">
<TextArea <TextArea
field="comment" field="comment"
showClear
onClear={() => updateTable(i, { comment: "" })}
value={t.comment} value={t.comment}
autosize autosize
placeholder="Add comment" placeholder="Add comment"
rows={1} rows={1}
onChange={(value) => updateTable(i, { comment: value })} onChange={(value) =>
updateTable(i, { comment: value }, false)
}
onFocus={(e) => onFocus={(e) =>
setEditField({ setEditField({ comment: e.target.value })
tid: t.id,
values: { comment: e.target.value },
})
} }
onBlur={(e) => { onBlur={(e) => {
if (e.target.value === editField.comment) return; if (e.target.value === editField.comment) return;
@ -695,17 +560,12 @@ export default function TableOverview(props) {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.TABLE, element: ObjectType.TABLE,
component: "comment", component: "comment",
data: { tid: i,
undo: editField, undo: editField,
redo: { redo: { comment: e.target.value },
tid: i,
values: { comment: e.target.value },
},
},
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setEditField({});
}} }}
/> />
</Collapse.Panel> </Collapse.Panel>
@ -836,24 +696,16 @@ export default function TableOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setTables((prev) => updateTable(i, {
prev.map((table) => { indices: [
if (table.id === i) { ...t.indices,
return { {
...table, id: t.indices.length,
indices: [ name: `index_${t.indices.length}`,
...table.indices, fields: [],
{ },
id: table.indices.length, ],
name: `index_${table.indices.length}`, });
fields: [],
},
],
};
}
return table;
})
);
}} }}
> >
Add index Add index
@ -872,31 +724,23 @@ export default function TableOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
setTables((prev) => updateTable(i, {
prev.map((table) => { fields: [
if (table.id === i) { ...t.fields,
return { {
...table, name: "",
fields: [ type: "",
...table.fields, default: "",
{ check: "",
name: "", primary: false,
type: "", unique: false,
default: "", notNull: false,
check: "", increment: false,
primary: false, comment: "",
unique: false, id: t.fields.length,
notNull: false, },
increment: false, ],
comment: "", });
id: table.fields.length,
},
],
};
}
return table;
})
);
}} }}
block block
> >

119
src/pages/editor.jsx
View File

@ -211,69 +211,6 @@ export default function Editor(props) {
} }
}; };
const moveTable = (id, x, y) => {
setTables((prev) =>
prev.map((t) => {
if (t.id === id) {
setRelationships((prev) =>
prev.map((r) => {
if (r.startTableId === id) {
return {
...r,
startX: x + 15,
startY: y + r.startFieldId * 36 + 69,
};
} else if (r.endTableId === id) {
return {
...r,
endX: x + 15,
endY: y + r.endFieldId * 36 + 69,
};
}
return r;
})
);
return {
...t,
x: x,
y: y,
};
}
return t;
})
);
};
const moveArea = (id, x, y) => {
setAreas((prev) =>
prev.map((t) => {
if (t.id === id) {
return {
...t,
x: x,
y: y,
};
}
return t;
})
);
};
const moveNote = (id, x, y) => {
setNotes((prev) =>
prev.map((t) => {
if (t.id === id) {
return {
...t,
x: x,
y: y,
};
}
return t;
})
);
};
const deleteTable = (id, addToHistory = true) => { const deleteTable = (id, addToHistory = true) => {
if (addToHistory) { if (addToHistory) {
setUndoStack((prev) => [ setUndoStack((prev) => [
@ -342,7 +279,21 @@ export default function Editor(props) {
); );
}; };
const editNote = (id, values, addToHistory = true) => { const updateArea = (id, values) => {
setAreas((prev) =>
prev.map((t) => {
if (t.id === id) {
return {
...t,
...values,
};
}
return t;
})
);
};
const updateNote = (id, values, addToHistory = true) => {
setNotes((prev) => setNotes((prev) =>
prev.map((t) => { prev.map((t) => {
if (t.id === id) { if (t.id === id) {
@ -356,6 +307,40 @@ export default function Editor(props) {
); );
}; };
const updateTable = (id, updatedValues, updateRelationships = false) => {
setTables((prev) =>
prev.map((table) => {
if (table.id === id) {
if (updateRelationships) {
setRelationships((prev) =>
prev.map((r) => {
if (r.startTableId === id) {
return {
...r,
startX: updatedValues.x + 15,
startY: updatedValues.y + r.startFieldId * 36 + 69,
};
} else if (r.endTableId === id) {
return {
...r,
endX: updatedValues.x + 15,
endY: updatedValues.y + r.endFieldId * 36 + 69,
};
}
return r;
})
);
}
return {
...table,
...updatedValues,
};
}
return table;
})
);
};
useEffect(() => { useEffect(() => {
document.title = "Editor - drawDB"; document.title = "Editor - drawDB";
}, []); }, []);
@ -367,7 +352,7 @@ export default function Editor(props) {
tables, tables,
setTables, setTables,
addTable, addTable,
moveTable, updateTable,
updateField, updateField,
deleteTable, deleteTable,
relationships, relationships,
@ -377,10 +362,10 @@ export default function Editor(props) {
}} }}
> >
<AreaContext.Provider <AreaContext.Provider
value={{ areas, setAreas, moveArea, addArea, deleteArea }} value={{ areas, setAreas, updateArea, addArea, deleteArea }}
> >
<NoteContext.Provider <NoteContext.Provider
value={{ notes, setNotes, moveNote, addNote, deleteNote, editNote }} value={{ notes, setNotes, updateNote, addNote, deleteNote }}
> >
<TabContext.Provider value={{ tab, setTab }}> <TabContext.Provider value={{ tab, setTab }}>
<SettingsContext.Provider value={{ settings, setSettings }}> <SettingsContext.Provider value={{ settings, setSettings }}>