bit clean up
This commit is contained in:
1ilit
parent
60193c33b8
commit
614e2ed24b
@ -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 (
|
||||
<div>
|
||||
<Row gutter={6}>
|
||||
@ -134,7 +120,6 @@ export default function AreaOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
@ -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 });
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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,17 +241,14 @@ 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,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}
|
||||
|
||||
@ -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
|
||||
),
|
||||
};
|
||||
updateTable(a.tid, {
|
||||
indices: tables[a.tid].indices.map((index) =>
|
||||
index.id === a.iid
|
||||
? {
|
||||
...index,
|
||||
...a.undo,
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
: 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,39 +310,20 @@ 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,
|
||||
updateTable(a.tid, {
|
||||
fields: [
|
||||
...t.fields,
|
||||
...tables[a.tid].fields,
|
||||
{
|
||||
name: "",
|
||||
type: "",
|
||||
@ -375,26 +334,12 @@ export default function ControlPanel(props) {
|
||||
notNull: false,
|
||||
increment: false,
|
||||
comment: "",
|
||||
id: t.fields.length,
|
||||
id: tables[a.tid].fields.length,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
});
|
||||
} 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
|
||||
),
|
||||
};
|
||||
updateTable(a.tid, {
|
||||
indices: tables[a.tid].indices.map((index) =>
|
||||
index.id === a.iid
|
||||
? {
|
||||
...index,
|
||||
...a.redo,
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
: index
|
||||
),
|
||||
});
|
||||
} else if (a.component === "index_delete") {
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (table.id === a.tid) {
|
||||
return {
|
||||
...table,
|
||||
indices: table.indices
|
||||
updateTable(a.tid, {
|
||||
indices: tables[a.tid].indices
|
||||
.filter((e) => e.id !== a.data.id)
|
||||
.map((t, i) => ({ ...t, id: i })),
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
});
|
||||
} 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]);
|
||||
}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 (
|
||||
<div>
|
||||
<Row gutter={6}>
|
||||
@ -145,7 +134,6 @@ export default function NotesOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
rows={3}
|
||||
/>
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<Row gutter={6}>
|
||||
@ -82,7 +68,6 @@ export default function TableOverview(props) {
|
||||
showClear
|
||||
prefix={<IconSearch />}
|
||||
placeholder="Search..."
|
||||
emptyContent={<div className="p-3">No tables found</div>}
|
||||
onSearch={(v) => handleStringSearch(v)}
|
||||
onChange={(v) => setValue(v)}
|
||||
onSelect={(v) => {
|
||||
@ -138,16 +123,9 @@ export default function TableOverview(props) {
|
||||
<Input
|
||||
field="name"
|
||||
value={f.name}
|
||||
className="m-0"
|
||||
placeholder="Name"
|
||||
onChange={(value) => 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 },
|
||||
},
|
||||
},
|
||||
undo: editField,
|
||||
redo: { name: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
@ -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 },
|
||||
},
|
||||
},
|
||||
undo: { type: f.type },
|
||||
redo: { type: value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
updateField(i, j, { type: value });
|
||||
}}
|
||||
></Select>
|
||||
@ -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 },
|
||||
},
|
||||
},
|
||||
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 },
|
||||
},
|
||||
},
|
||||
undo: { primary: f.primary },
|
||||
redo: { primary: !f.primary },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
updateField(i, j, { primary: !f.primary });
|
||||
}}
|
||||
icon={<IconKeyStroked />}
|
||||
@ -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 },
|
||||
},
|
||||
},
|
||||
undo: editField,
|
||||
redo: { default: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
<div className="font-semibold">
|
||||
@ -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 },
|
||||
},
|
||||
},
|
||||
undo: editField,
|
||||
redo: { check: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between items-center my-3">
|
||||
@ -371,28 +299,19 @@ export default function TableOverview(props) {
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
data: {
|
||||
undo: {
|
||||
tid: i,
|
||||
fid: j,
|
||||
values: {
|
||||
undo: {
|
||||
[checkedValues.target.value]:
|
||||
!checkedValues.target.checked,
|
||||
},
|
||||
},
|
||||
redo: {
|
||||
tid: i,
|
||||
fid: j,
|
||||
values: {
|
||||
[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: {
|
||||
undo: {
|
||||
[checkedValues.target.value]:
|
||||
!checkedValues.target.checked,
|
||||
},
|
||||
},
|
||||
redo: {
|
||||
tid: i,
|
||||
fid: j,
|
||||
values: {
|
||||
[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 },
|
||||
},
|
||||
},
|
||||
undo: editField,
|
||||
redo: { comment: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
@ -498,19 +399,11 @@ export default function TableOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setTables((prev) =>
|
||||
prev.map((table) => {
|
||||
if (table.id === i) {
|
||||
return {
|
||||
...table,
|
||||
fields: table.fields.filter(
|
||||
(field, k) => k !== j
|
||||
),
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
updateTable(i, {
|
||||
fields: t.fields
|
||||
.filter((field) => field.id !== j)
|
||||
.map((e, i) => ({ ...e, id: i })),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete field
|
||||
@ -562,42 +455,27 @@ export default function TableOverview(props) {
|
||||
tid: i,
|
||||
iid: k,
|
||||
undo: {
|
||||
values: {
|
||||
fields: [...idx.fields],
|
||||
name: `${idx.fields.join("_")}_index`,
|
||||
},
|
||||
},
|
||||
redo: {
|
||||
values: {
|
||||
fields: [...value],
|
||||
name: `${value.join("_")}_index`,
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (table.id === i) {
|
||||
return {
|
||||
...table,
|
||||
indices: table.indices.map((index) =>
|
||||
updateTable(i, {
|
||||
indices: t.indices.map((index) =>
|
||||
index.id === k
|
||||
? {
|
||||
...index,
|
||||
fields: [...value],
|
||||
name: `${value.join(
|
||||
"_"
|
||||
)}_index`,
|
||||
name: `${value.join("_")}_index`,
|
||||
}
|
||||
: index
|
||||
),
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
@ -625,24 +503,14 @@ export default function TableOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setTables((prev) =>
|
||||
prev.map((table) => {
|
||||
if (table.id === i) {
|
||||
return {
|
||||
...table,
|
||||
indices: table.indices
|
||||
.filter(
|
||||
(index) => index.id !== idx.id
|
||||
)
|
||||
updateTable(i, {
|
||||
indices: t.indices
|
||||
.filter((e) => e.id !== k)
|
||||
.map((e, j) => ({
|
||||
...e,
|
||||
id: j,
|
||||
})),
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
@ -674,18 +542,15 @@ export default function TableOverview(props) {
|
||||
<Collapse.Panel header="Comment" itemKey="1">
|
||||
<TextArea
|
||||
field="comment"
|
||||
showClear
|
||||
onClear={() => updateTable(i, { comment: "" })}
|
||||
value={t.comment}
|
||||
autosize
|
||||
placeholder="Add comment"
|
||||
rows={1}
|
||||
onChange={(value) => updateTable(i, { comment: value })}
|
||||
onChange={(value) =>
|
||||
updateTable(i, { comment: value }, false)
|
||||
}
|
||||
onFocus={(e) =>
|
||||
setEditField({
|
||||
tid: t.id,
|
||||
values: { comment: e.target.value },
|
||||
})
|
||||
setEditField({ comment: e.target.value })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.comment) return;
|
||||
@ -695,17 +560,12 @@ export default function TableOverview(props) {
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "comment",
|
||||
data: {
|
||||
undo: editField,
|
||||
redo: {
|
||||
tid: i,
|
||||
values: { comment: e.target.value },
|
||||
},
|
||||
},
|
||||
undo: editField,
|
||||
redo: { comment: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setEditField({});
|
||||
}}
|
||||
/>
|
||||
</Collapse.Panel>
|
||||
@ -836,24 +696,16 @@ export default function TableOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setTables((prev) =>
|
||||
prev.map((table) => {
|
||||
if (table.id === i) {
|
||||
return {
|
||||
...table,
|
||||
updateTable(i, {
|
||||
indices: [
|
||||
...table.indices,
|
||||
...t.indices,
|
||||
{
|
||||
id: table.indices.length,
|
||||
name: `index_${table.indices.length}`,
|
||||
id: t.indices.length,
|
||||
name: `index_${t.indices.length}`,
|
||||
fields: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add index
|
||||
@ -872,13 +724,9 @@ export default function TableOverview(props) {
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setTables((prev) =>
|
||||
prev.map((table) => {
|
||||
if (table.id === i) {
|
||||
return {
|
||||
...table,
|
||||
updateTable(i, {
|
||||
fields: [
|
||||
...table.fields,
|
||||
...t.fields,
|
||||
{
|
||||
name: "",
|
||||
type: "",
|
||||
@ -889,14 +737,10 @@ export default function TableOverview(props) {
|
||||
notNull: false,
|
||||
increment: false,
|
||||
comment: "",
|
||||
id: table.fields.length,
|
||||
id: t.fields.length,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
block
|
||||
>
|
||||
|
||||
@ -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) => {
|
||||
if (addToHistory) {
|
||||
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) =>
|
||||
prev.map((t) => {
|
||||
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(() => {
|
||||
document.title = "Editor - drawDB";
|
||||
}, []);
|
||||
@ -367,7 +352,7 @@ export default function Editor(props) {
|
||||
tables,
|
||||
setTables,
|
||||
addTable,
|
||||
moveTable,
|
||||
updateTable,
|
||||
updateField,
|
||||
deleteTable,
|
||||
relationships,
|
||||
@ -377,10 +362,10 @@ export default function Editor(props) {
|
||||
}}
|
||||
>
|
||||
<AreaContext.Provider
|
||||
value={{ areas, setAreas, moveArea, addArea, deleteArea }}
|
||||
value={{ areas, setAreas, updateArea, addArea, deleteArea }}
|
||||
>
|
||||
<NoteContext.Provider
|
||||
value={{ notes, setNotes, moveNote, addNote, deleteNote, editNote }}
|
||||
value={{ notes, setNotes, updateNote, addNote, deleteNote }}
|
||||
>
|
||||
<TabContext.Provider value={{ tab, setTab }}>
|
||||
<SettingsContext.Provider value={{ settings, setSettings }}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user