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

hi

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:04 +03:00
parent 44e179f15a
commit 21d01b1fe2
3 changed files with 781 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/control_panel.jsx
View File

@ -83,6 +83,7 @@ export default function ControlPanel(props) {
addTable, addTable,
moveTable, moveTable,
deleteTable, deleteTable,
updateField,
setRelationships, setRelationships,
addRelationship, addRelationship,
deleteRelationship, deleteRelationship,
@ -113,22 +114,6 @@ export default function ControlPanel(props) {
setNotes(data.notes); setNotes(data.notes);
}; };
const updatedField = (tid, fid, updatedValues) => {
setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
fields: table.fields.map((field, j) =>
fid === j ? { ...field, ...updatedValues } : field
),
};
}
return table;
})
);
};
const undo = () => { const undo = () => {
if (undoStack.length === 0) return; if (undoStack.length === 0) return;
const a = undoStack.pop(); const a = undoStack.pop();
@ -186,15 +171,93 @@ export default function ControlPanel(props) {
); );
} else if (a.element === ObjectType.TABLE) { } else if (a.element === ObjectType.TABLE) {
if (a.component === "field") { if (a.component === "field") {
console.log(a); updateField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values);
updatedField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values) } else if (a.component === "field_delete") {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === a.tid) {
const temp = t.fields.slice();
temp.splice(a.data.id, 0, a.data);
return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
}
return t;
})
);
} else if (a.component === "field_add") {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === a.tid) {
return {
...t,
fields: t.fields
.filter((e) => e.id !== tables[a.tid].fields.length - 1)
.map((t, i) => ({ ...t, id: i })),
};
}
return t;
})
);
} 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;
})
);
} else if (a.component === "index_add") {
setTables((prev) =>
prev.map((table, i) => {
if (table.id === a.tid) {
return {
...table,
indices: table.indices
.filter((e) => e.id !== tables[a.tid].indices.length - 1)
.map((t, i) => ({ ...t, id: i })),
};
}
return table;
})
);
} 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;
})
);
} else if (a.component === "index_delete") {
setTables((prev) =>
prev.map((table, i) => {
if (table.id === a.tid) {
const temp = table.indices.slice();
temp.splice(a.data.id, 0, a.data);
return {
...table,
indices: temp.map((t, i) => ({ ...t, id: i })),
};
}
return table;
})
);
} }
} }
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.data.undo,
})); }));
setRedoStack((prev) => [...prev, a]); setRedoStack((prev) => [...prev, a]);
} }
@ -257,15 +320,113 @@ export default function ControlPanel(props) {
); );
} else if (a.element === ObjectType.TABLE) { } else if (a.element === ObjectType.TABLE) {
if (a.component === "field") { if (a.component === "field") {
console.log(a); updateField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values);
updatedField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values) } 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;
})
);
} 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;
})
);
} 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;
})
);
} else if (a.component === "index_add") {
setTables((prev) =>
prev.map((table) => {
if (table.id === a.tid) {
return {
...table,
indices: [
...table.indices,
{
id: table.indices.length,
name: `index_${table.indices.length}`,
fields: [],
},
],
};
}
return table;
})
);
} 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;
})
);
} 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;
})
);
} }
} }
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.data.redo,
})); }));
setUndoStack((prev) => [...prev, a]); setUndoStack((prev) => [...prev, a]);
} }

597
src/components/table_overview.jsx
View File

@ -1,4 +1,4 @@
import { React, useContext, useState, useRef } from "react"; import { React, useContext, useState } from "react";
import { import {
Action, Action,
ObjectType, ObjectType,
@ -11,7 +11,7 @@ import {
Row, Row,
Col, Col,
Input, Input,
Form, TextArea,
Button, Button,
Card, Card,
Popover, Popover,
@ -38,10 +38,10 @@ 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 } = useContext(TableContext); const { tables, setTables, addTable, deleteTable, updateField } =
useContext(TableContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({}); const [editField, setEditField] = useState({});
const selectRef = useRef(null);
const [filteredResult, setFilteredResult] = useState( const [filteredResult, setFilteredResult] = useState(
tables.map((t) => { tables.map((t) => {
return t.name; return t.name;
@ -58,22 +58,6 @@ export default function TableOverview(props) {
); );
}; };
const updatedField = (tid, fid, updatedValues) => {
setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
fields: table.fields.map((field, j) =>
fid === j ? { ...field, ...updatedValues } : field
),
};
}
return table;
})
);
};
const updateTable = (tid, updatedValues) => { const updateTable = (tid, updatedValues) => {
setTables((prev) => setTables((prev) =>
prev.map((table, i) => { prev.map((table, i) => {
@ -147,7 +131,8 @@ export default function TableOverview(props) {
justify="start" justify="start"
align="middle" align="middle"
gutter={6} gutter={6}
className="hover:bg-slate-100" key={j}
className="hover:bg-slate-100 mb-2"
> >
<Col span={7}> <Col span={7}>
<Input <Input
@ -155,9 +140,7 @@ export default function TableOverview(props) {
value={f.name} value={f.name}
className="m-0" className="m-0"
placeholder="Name" placeholder="Name"
onChange={(value) => onChange={(value) => updateField(i, j, { name: value })}
updatedField(i, j, { name: value })
}
onFocus={(e) => onFocus={(e) =>
setEditField({ setEditField({
tid: i, tid: i,
@ -199,11 +182,124 @@ export default function TableOverview(props) {
})} })}
filter filter
value={f.type} value={f.type}
ref={selectRef}
placeholder="Type" placeholder="Type"
onChange={(value) => { onChange={(value) => {
updatedField(i, j, { type: value }); if (value === f.type) return;
if (value === editField.type) return; setUndoStack((prev) => [
...prev,
{
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 },
},
},
},
]);
setRedoStack([]);
setEditField({});
updateField(i, j, { type: value });
}}
></Select>
</Col>
<Col span={3}>
<Button
type={f.notNull ? "primary" : "tertiary"}
title="Nullable"
theme={f.notNull ? "solid" : "light"}
onClick={() => {
setUndoStack((prev) => [
...prev,
{
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 },
},
},
},
]);
setRedoStack([]);
setEditField({});
updateField(i, j, { notNull: !f.notNull });
}}
>
?
</Button>
</Col>
<Col span={3}>
<Button
type={f.primary ? "primary" : "tertiary"}
title="Primary"
theme={f.primary ? "solid" : "light"}
onClick={() => {
setUndoStack((prev) => [
...prev,
{
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 },
},
},
},
]);
setRedoStack([]);
setEditField({});
updateField(i, j, { primary: !f.primary });
}}
icon={<IconKeyStroked />}
></Button>
</Col>
<Col span={3}>
<Popover
content={
<div className="px-1 w-[240px]">
<div className="font-semibold">Default value</div>
<Input
className="my-2"
placeholder="Set default"
value={f.default}
onChange={(value) =>
updateField(i, j, { default: value })
}
onFocus={(e) =>
setEditField({
tid: i,
fid: j,
values: { default: e.target.value },
})
}
onBlur={(e) => {
if (e.target.value === editField.default)
return;
setUndoStack((prev) => [ setUndoStack((prev) => [
...prev, ...prev,
{ {
@ -215,7 +311,7 @@ export default function TableOverview(props) {
redo: { redo: {
tid: i, tid: i,
fid: j, fid: j,
values: { type: value }, values: { default: e.target.value },
}, },
}, },
}, },
@ -223,125 +319,201 @@ export default function TableOverview(props) {
setRedoStack([]); setRedoStack([]);
setEditField({}); setEditField({});
}} }}
onFocus={() => { />
<div className="font-semibold">
Check Expression
</div>
<Input
className="my-2"
placeholder="Set constraint"
value={f.check}
onChange={(value) =>
updateField(i, j, { check: value })
}
onFocus={(e) =>
setEditField({ setEditField({
tid: i, tid: i,
fid: j, fid: j,
values: { type: selectRef.current.props.value }, values: { check: e.target.value },
}); })
}
onBlur={(e) => {
if (e.target.value === editField.check) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
data: {
undo: editField,
redo: {
tid: i,
fid: j,
values: { check: e.target.value },
},
},
},
]);
setRedoStack([]);
setEditField({});
}} }}
></Select>
</Col>
<Col span={3}>
<Button
type={f.notNull ? "primary" : "tertiary"}
title="Nullable"
theme={f.notNull ? "solid" : "light"}
onClick={() =>
updatedField(i, j, { notNull: !f.notNull })
}
>
?
</Button>
</Col>
<Col span={3}>
<Button
type={f.primary ? "primary" : "tertiary"}
title="Primary"
theme={f.primary ? "solid" : "light"}
onClick={() =>
updatedField(i, j, { primary: !f.primary })
}
icon={<IconKeyStroked />}
></Button>
</Col>
<Col span={3}>
<Popover
content={
<div className="px-1">
<Form
onChange={(value) =>
updatedField(i, j, value.values)
}
>
<Form.Input
field="default"
label="Default"
initValue={f.default}
trigger="blur"
placeholder="Set default"
/>
<Form.Input
field="check"
label="Check Expression"
trigger="blur"
placeholder="Set constraint"
initValue={f.check}
/> />
<div className="flex justify-between items-center my-3"> <div className="flex justify-between items-center my-3">
<label <div className="font-medium">Unique</div>
htmlFor="unique"
className="font-medium"
>
Unique
</label>
<Checkbox <Checkbox
value="unique" value="unique"
defaultChecked={f.unique} defaultChecked={f.unique}
onChange={(checkedValues) => onChange={(checkedValues) => {
updatedField(i, j, { setUndoStack((prev) => [
...prev,
{
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.value]:
checkedValues.target.checked, checkedValues.target.checked,
}) },
} },
},
},
]);
setRedoStack([]);
setEditField({});
updateField(i, j, {
[checkedValues.target.value]:
checkedValues.target.checked,
});
}}
></Checkbox> ></Checkbox>
</div> </div>
<div className="flex justify-between items-center my-3"> <div className="flex justify-between items-center my-3">
<label <div className="font-medium">Autoincrement</div>
htmlFor="increment"
className="font-medium"
>
Autoincrement
</label>
<Checkbox <Checkbox
value="increment" value="increment"
defaultChecked={f.increment} defaultChecked={f.increment}
onChange={(checkedValues) => onChange={(checkedValues) => {
updatedField(i, j, { setUndoStack((prev) => [
...prev,
{
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.value]:
checkedValues.target.checked, checkedValues.target.checked,
}) },
} },
},
},
]);
setRedoStack([]);
setEditField({});
updateField(i, j, {
[checkedValues.target.value]:
checkedValues.target.checked,
});
}}
></Checkbox> ></Checkbox>
</div> </div>
<Form.TextArea <div className="font-semibold">Comment</div>
field="comment" <TextArea
className="my-2"
label="Comment" label="Comment"
placeholder="Add comment" placeholder="Add comment"
initValue={f.comment} value={f.comment}
autosize autosize
rows={2} rows={2}
onChange={(value) =>
updateField(i, j, { comment: value })
}
onFocus={(e) =>
setEditField({
tid: i,
fid: j,
values: { comment: e.target.value },
})
}
onBlur={(e) => {
if (e.target.value === editField.comment)
return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
data: {
undo: editField,
redo: {
tid: i,
fid: j,
values: { comment: e.target.value },
},
},
},
]);
setRedoStack([]);
setEditField({});
}}
/> />
</Form>
<Button <Button
icon={<IconDeleteStroked />} icon={<IconDeleteStroked />}
type="danger" type="danger"
block block
onClick={(ev) => { onClick={() => {
setTables((prev) => { setUndoStack((prev) => [
const updatedTables = [...prev]; ...prev,
const updatedFields = [ {
...updatedTables[t.id].fields, action: Action.EDIT,
]; element: ObjectType.TABLE,
updatedFields.splice(j, 1); component: "field_delete",
updatedTables[t.id].fields = [ tid: t.id,
...updatedFields, data: f,
]; },
return updatedTables; ]);
}); setRedoStack([]);
setTables((prev) =>
prev.map((table) => {
if (table.id === i) {
return {
...table,
fields: table.fields.filter(
(field, k) => k !== j
),
};
}
return table;
})
);
}} }}
> >
Delete Delete field
</Button> </Button>
</div> </div>
} }
@ -353,7 +525,6 @@ export default function TableOverview(props) {
</Popover> </Popover>
</Col> </Col>
</Row> </Row>
))} ))}
{t.indices.length > 0 && ( {t.indices.length > 0 && (
<Card <Card
@ -380,46 +551,98 @@ export default function TableOverview(props) {
label: e.name, label: e.name,
}))} }))}
className="w-full" className="w-full"
defaultValue={idx.fields} value={idx.fields}
onChange={(value) => { onChange={(value) => {
const updatedTables = [...tables]; setUndoStack((prev) => [
const updatedIndices = [...t.indices]; ...prev,
updatedIndices[k] = { {
name: `${value.join("_")}_index`, action: Action.EDIT,
element: ObjectType.TABLE,
component: "index",
tid: i,
iid: k,
undo: {
values: {
fields: [...idx.fields],
name: `${idx.fields.join("_")}_index`,
},
},
redo: {
values: {
fields: [...value], 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) =>
index.id === k
? {
...index,
fields: [...value],
name: `${value.join(
"_"
)}_index`,
}
: index
),
}; };
updatedTables[i] = { }
...t, return table;
indices: [...updatedIndices], })
}; );
setTables(updatedTables);
}} }}
/> />
<Popover <Popover
content={ content={
<div className="px-1"> <div className="px-1">
<Form> <Input
<Form.Input className="my-2"
field="name" value={idx.name}
label="Name"
initValue={idx.name}
trigger="blur"
placeholder="Index name" placeholder="Index name"
disabled
/> />
</Form>
<Button <Button
icon={<IconDeleteStroked />} icon={<IconDeleteStroked />}
type="danger" type="danger"
block block
onClick={() => { onClick={() => {
const updatedTables = [...tables]; setUndoStack((prev) => [
const updatedIndices = [...t.indices]; ...prev,
updatedIndices.splice(k, 1); {
updatedTables[i] = { action: Action.EDIT,
...t, element: ObjectType.TABLE,
indices: [...updatedIndices], component: "index_delete",
tid: t.id,
data: idx,
},
]);
setRedoStack([]);
setTables((prev) =>
prev.map((table) => {
if (table.id === i) {
return {
...table,
indices: table.indices
.filter(
(index) => index.id !== idx.id
)
.map((e, j) => ({
...e,
id: j,
})),
}; };
setTables(updatedTables); }
return table;
})
);
}} }}
> >
Delete Delete
@ -449,18 +672,42 @@ export default function TableOverview(props) {
> >
<Collapse> <Collapse>
<Collapse.Panel header="Comment" itemKey="1"> <Collapse.Panel header="Comment" itemKey="1">
<Form onChange={(value) => updateTable(i, value.values)}> <TextArea
<Form.TextArea
field="comment" field="comment"
noLabel={true}
showClear showClear
onClear={() => updateTable(i, { comment: "" })} onClear={() => updateTable(i, { comment: "" })}
initValue={t.comment} value={t.comment}
autosize autosize
placeholder="Add comment" placeholder="Add comment"
rows={1} rows={1}
onChange={(value) => updateTable(i, { comment: value })}
onFocus={(e) =>
setEditField({
tid: t.id,
values: { comment: e.target.value },
})
}
onBlur={(e) => {
if (e.target.value === editField.comment) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "comment",
data: {
undo: editField,
redo: {
tid: i,
values: { comment: e.target.value },
},
},
},
]);
setRedoStack([]);
setEditField({});
}}
/> />
</Form>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
</Card> </Card>
@ -539,15 +786,34 @@ export default function TableOverview(props) {
block block
onClick={() => { onClick={() => {
setIndexActiveKey("1"); setIndexActiveKey("1");
const updatedTables = [...tables]; setUndoStack((prev) => [
updatedTables[i] = { ...prev,
...t, {
action: Action.EDIT,
element: ObjectType.TABLE,
component: "index_add",
tid: t.id,
},
]);
setRedoStack([]);
setTables((prev) =>
prev.map((table) => {
if (table.id === i) {
return {
...table,
indices: [ indices: [
...t.indices, ...table.indices,
{ name: `index_${t.indices.length}`, fields: [] }, {
id: table.indices.length,
name: `index_${table.indices.length}`,
fields: [],
},
], ],
}; };
setTables(updatedTables); }
return table;
})
);
}} }}
> >
Add index Add index
@ -556,9 +822,23 @@ export default function TableOverview(props) {
<Col span={6}> <Col span={6}>
<Button <Button
onClick={() => { onClick={() => {
const updatedTables = [...tables]; setUndoStack((prev) => [
updatedTables[i].fields = [ ...prev,
...updatedTables[i].fields, {
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field_add",
tid: t.id,
},
]);
setRedoStack([]);
setTables((prev) =>
prev.map((table) => {
if (table.id === i) {
return {
...table,
fields: [
...table.fields,
{ {
name: "", name: "",
type: "", type: "",
@ -569,9 +849,14 @@ export default function TableOverview(props) {
notNull: false, notNull: false,
increment: false, increment: false,
comment: "", comment: "",
id: table.fields.length,
}, },
]; ],
setTables(updatedTables); };
}
return table;
})
);
}} }}
block block
> >

20
src/pages/editor.jsx
View File

@ -85,6 +85,7 @@ export default function Editor(props) {
notNull: true, notNull: true,
increment: true, increment: true,
comment: "", comment: "",
id: 0,
}, },
], ],
comment: "", comment: "",
@ -105,6 +106,22 @@ export default function Editor(props) {
} }
}; };
const updateField = (tid, fid, updatedValues) => {
setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
fields: table.fields.map((field, j) =>
fid === j ? { ...field, ...updatedValues } : field
),
};
}
return table;
})
);
};
const addArea = (addToHistory = true, data) => { const addArea = (addToHistory = true, data) => {
if (data) { if (data) {
setAreas((prev) => { setAreas((prev) => {
@ -337,7 +354,7 @@ export default function Editor(props) {
return t; return t;
}) })
); );
} };
useEffect(() => { useEffect(() => {
document.title = "Editor - drawDB"; document.title = "Editor - drawDB";
@ -351,6 +368,7 @@ export default function Editor(props) {
setTables, setTables,
addTable, addTable,
moveTable, moveTable,
updateField,
deleteTable, deleteTable,
relationships, relationships,
setRelationships, setRelationships,