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

yum

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:02 +03:00
parent 16bc0edd36
commit 44e179f15a
5 changed files with 108 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -22,7 +22,6 @@
"html-to-image": "^1.11.11",
"jsonschema": "^1.4.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"node-sql-parser": "^4.7.0",
"react": "^18.2.0",
"react-dnd": "^16.0.1",

1
package.json
View File

@ -17,7 +17,6 @@
"html-to-image": "^1.11.11",
"jsonschema": "^1.4.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"node-sql-parser": "^4.7.0",
"react": "^18.2.0",
"react-dnd": "^16.0.1",

5
src/components/canvas.jsx
View File

@ -48,10 +48,7 @@ export default function Canvas(props) {
});
const [panning, setPanning] = useState({ state: false, x: 0, y: 0 });
const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
const [areaResize, setAreaResize] = useState({
id: -1,
dir: "none",
});
const [areaResize, setAreaResize] = useState({ id: -1, dir: "none" });
const [initCoords, setInitCoords] = useState({
x: 0,
y: 0,

27
src/components/control_panel.jsx
View File

@ -113,6 +113,22 @@ export default function ControlPanel(props) {
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 = () => {
if (undoStack.length === 0) return;
const a = undoStack.pop();
@ -168,10 +184,14 @@ export default function ControlPanel(props) {
return n;
})
);
}else if(a.element===ObjectType.TABLE){
if(a.component==="field"){
console.log(a);
updatedField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values)
}
}
setRedoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) {
console.log(a)
setSettings((prev) => ({
...prev,
pan: a.data.undo
@ -235,6 +255,11 @@ export default function ControlPanel(props) {
return n;
})
);
} else if(a.element===ObjectType.TABLE){
if(a.component==="field"){
console.log(a);
updatedField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values)
}
}
setUndoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) {

96
src/components/table_overview.jsx
View File

@ -1,9 +1,16 @@
import { React, useContext, useState } from "react";
import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
import { React, useContext, useState, useRef } from "react";
import {
Action,
ObjectType,
defaultTableTheme,
sqlDataTypes,
tableThemes,
} from "../data/data";
import {
Collapse,
Row,
Col,
Input,
Form,
Button,
Card,
@ -26,12 +33,15 @@ import {
IllustrationNoContent,
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import { TableContext } from "../pages/editor";
import { TableContext, UndoRedoContext } from "../pages/editor";
export default function TableOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState("");
const [value, setValue] = useState("");
const { tables, setTables, addTable, deleteTable } = useContext(TableContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({});
const selectRef = useRef(null);
const [filteredResult, setFilteredResult] = useState(
tables.map((t) => {
return t.name;
@ -132,10 +142,6 @@ export default function TableOverview(props) {
<div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
{t.fields.map((f, j) => (
<Form
key={j}
onChange={(value) => updatedField(i, j, value.values)}
>
<Row
type="flex"
justify="start"
@ -144,19 +150,47 @@ export default function TableOverview(props) {
className="hover:bg-slate-100"
>
<Col span={7}>
<Form.Input
<Input
field="name"
noLabel={true}
initValue={f.name}
value={f.name}
className="m-0"
placeholder="Name"
onChange={(value) =>
updatedField(i, j, { name: value })
}
onFocus={(e) =>
setEditField({
tid: i,
fid: j,
values: { name: e.target.value },
})
}
onBlur={(e) => {
if (e.target.value === editField.name) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
data: {
undo: editField,
redo: {
tid: i,
fid: j,
values: { name: e.target.value },
},
},
},
]);
setRedoStack([]);
setEditField({});
}}
/>
</Col>
<Col span={8}>
<Form.Select
<Select
className="w-full"
field="type"
noLabel={true}
optionList={sqlDataTypes.map((value, index) => {
return {
label: value,
@ -164,9 +198,39 @@ export default function TableOverview(props) {
};
})}
filter
initValue={f.type}
value={f.type}
ref={selectRef}
placeholder="Type"
></Form.Select>
onChange={(value) => {
updatedField(i, j, { type: value });
if (value === editField.type) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
data: {
undo: editField,
redo: {
tid: i,
fid: j,
values: { type: value },
},
},
},
]);
setRedoStack([]);
setEditField({});
}}
onFocus={() => {
setEditField({
tid: i,
fid: j,
values: { type: selectRef.current.props.value },
});
}}
></Select>
</Col>
<Col span={3}>
<Button
@ -289,7 +353,7 @@ export default function TableOverview(props) {
</Popover>
</Col>
</Row>
</Form>
))}
{t.indices.length > 0 && (
<Card