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", "html-to-image": "^1.11.11",
"jsonschema": "^1.4.1", "jsonschema": "^1.4.1",
"jspdf": "^2.5.1", "jspdf": "^2.5.1",
"lodash": "^4.17.21",
"node-sql-parser": "^4.7.0", "node-sql-parser": "^4.7.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",

1
package.json
View File

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

7
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 [panning, setPanning] = useState({ state: false, x: 0, y: 0 });
const [panOffset, setPanOffset] = useState({ x: 0, y: 0 }); const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
const [areaResize, setAreaResize] = useState({ const [areaResize, setAreaResize] = useState({ id: -1, dir: "none" });
id: -1,
dir: "none",
});
const [initCoords, setInitCoords] = useState({ const [initCoords, setInitCoords] = useState({
x: 0, x: 0,
y: 0, y: 0,
@ -244,7 +241,7 @@ 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 // 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,

27
src/components/control_panel.jsx
View File

@ -113,6 +113,22 @@ 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();
@ -168,10 +184,14 @@ export default function ControlPanel(props) {
return n; 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]); setRedoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) { } else if (a.action === Action.PAN) {
console.log(a)
setSettings((prev) => ({ setSettings((prev) => ({
...prev, ...prev,
pan: a.data.undo pan: a.data.undo
@ -235,6 +255,11 @@ export default function ControlPanel(props) {
return n; 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]); setUndoStack((prev) => [...prev, a]);
} else if (a.action === Action.PAN) { } 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 { React, useContext, useState, useRef } from "react";
import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data"; import {
Action,
ObjectType,
defaultTableTheme,
sqlDataTypes,
tableThemes,
} from "../data/data";
import { import {
Collapse, Collapse,
Row, Row,
Col, Col,
Input,
Form, Form,
Button, Button,
Card, Card,
@ -26,12 +33,15 @@ import {
IllustrationNoContent, IllustrationNoContent,
IllustrationNoContentDark, IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations"; } from "@douyinfe/semi-illustrations";
import { TableContext } from "../pages/editor"; 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 } = useContext(TableContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
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;
@ -132,10 +142,6 @@ export default function TableOverview(props) {
<div id={`scroll_table_${t.id}`} key={t.id}> <div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}> <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
{t.fields.map((f, j) => ( {t.fields.map((f, j) => (
<Form
key={j}
onChange={(value) => updatedField(i, j, value.values)}
>
<Row <Row
type="flex" type="flex"
justify="start" justify="start"
@ -144,19 +150,47 @@ export default function TableOverview(props) {
className="hover:bg-slate-100" className="hover:bg-slate-100"
> >
<Col span={7}> <Col span={7}>
<Form.Input <Input
field="name" field="name"
noLabel={true} value={f.name}
initValue={f.name}
className="m-0" className="m-0"
placeholder="Name" 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>
<Col span={8}> <Col span={8}>
<Form.Select <Select
className="w-full" className="w-full"
field="type"
noLabel={true}
optionList={sqlDataTypes.map((value, index) => { optionList={sqlDataTypes.map((value, index) => {
return { return {
label: value, label: value,
@ -164,9 +198,39 @@ export default function TableOverview(props) {
}; };
})} })}
filter filter
initValue={f.type} value={f.type}
ref={selectRef}
placeholder="Type" 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>
<Col span={3}> <Col span={3}>
<Button <Button
@ -289,7 +353,7 @@ export default function TableOverview(props) {
</Popover> </Popover>
</Col> </Col>
</Row> </Row>
</Form>
))} ))}
{t.indices.length > 0 && ( {t.indices.length > 0 && (
<Card <Card