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

brrr

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:44 +03:00
parent 24190bc460
commit 032d77df2c
3 changed files with 131 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/canvas.jsx
View File

@ -131,13 +131,13 @@ export default function Canvas(props) {
...r, ...r,
startX: props.tables[r.startTableId].x + 15, startX: props.tables[r.startTableId].x + 15,
startY: startY:
props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19, props.tables[r.startTableId].y + r.startFieldId * 36 + 50 + 19,
}; };
} else if (r.endTableId === dragging[1]) { } else if (r.endTableId === dragging[1]) {
return { return {
...r, ...r,
endX: props.tables[r.endTableId].x + 15, endX: props.tables[r.endTableId].x + 15,
endY: props.tables[r.endTableId].y + r.endFieldId * 36 + 40 + 19, endY: props.tables[r.endTableId].y + r.endFieldId * 36 + 50 + 19,
}; };
} }
return r; return r;
@ -247,7 +247,7 @@ export default function Canvas(props) {
endTableId: onRect.tableId, endTableId: onRect.tableId,
endFieldId: onRect.field, endFieldId: onRect.field,
endX: props.tables[onRect.tableId].x + 15, endX: props.tables[onRect.tableId].x + 15,
endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19, endY: props.tables[onRect.tableId].y + onRect.field * 36 + 50 + 19,
name: `${props.tables[line.startTableId].name}_to_${ name: `${props.tables[line.startTableId].name}_to_${
props.tables[onRect.tableId].name props.tables[onRect.tableId].name
}`, }`,

482
src/components/table.jsx
View File

@ -1,91 +1,34 @@
import { React, useState } from "react"; import { React, useState } from "react";
import { sqlDataTypes } from "../data/data"; // import { sqlDataTypes } from "../data/data";
import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons";
import { import {
IconEdit, // Modal,
IconDelete, // Form,
IconPlus, // Checkbox,
IconMinus, // Row,
} from "@douyinfe/semi-icons"; // Col,
import {
Modal,
Form,
Checkbox,
Row,
Col,
Popover, Popover,
Tag, Tag,
Popconfirm, Button,
Toast,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
export default function Table(props) { export default function Table(props) {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [hoveredField, setHoveredField] = useState(-1); const [hoveredField, setHoveredField] = useState(-1);
// const [name, setName] = useState(props.tableData.name); // const [visible, setVisible] = useState(false);
const [visible, setVisible] = useState(false); // const [editFieldVisible, setEditFieldVisible] = useState(-1);
const [editFieldVisible, setEditFieldVisible] = useState(-1); // const [field, setField] = useState({
// name: "",
// type: "",
// default: "",
// primary: false,
// unique: false,
// notNull: false,
// increment: false,
// comment: "",
// });
const [field, setField] = useState({ const height = props.tableData.fields.length * 36 + 50 + 3;
name: "",
type: "",
default: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
});
const handleEditField = () => {
props.setTables((prev) => {
const updatedTables = [...prev];
updatedTables[props.id].fields[editFieldVisible] = { ...field };
return updatedTables;
});
setField({
name: "",
type: "",
default: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
});
setEditFieldVisible(-1);
};
const handleAddField = () => {
props.setTables((prev) => {
const updatedTables = [...prev];
updatedTables[props.id].fields = [
...updatedTables[props.id].fields,
{ ...field },
];
return updatedTables;
});
setField({
name: "",
type: "",
default: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
});
setVisible(false);
};
const height = props.tableData.fields.length * 36 + 40 + 4 + 36;
const onCheck = (checkedValues) => {
setField({
...field,
[checkedValues.target.value]: checkedValues.target.checked,
});
};
return ( return (
<g> <g>
@ -95,7 +38,7 @@ export default function Table(props) {
y={props.tableData.y} y={props.tableData.y}
width={200} width={200}
height={height} height={height}
style={{ cursor: "move" }} className="shadow-lg rounded-md cursor-move"
onMouseDown={props.onMouseDown} onMouseDown={props.onMouseDown}
onMouseEnter={() => { onMouseEnter={() => {
setIsHovered(true); setIsHovered(true);
@ -110,42 +53,87 @@ export default function Table(props) {
> >
<div <div
className={`border-2 ${ className={`border-2 ${
isHovered ? "border-sky-500" : "border-gray-500" isHovered ? "border-sky-500" : "border-gray-400"
} bg-gray-200 select-none rounded-md`} } bg-gray-100 select-none rounded-md w-full`}
> >
<div <div
// style={{ backgroundColor: props.tableData.color }} className={`h-[10px] w-full rounded-t-md`}
className="p-3 bg-gray-300 font-bold text-slate-800 h-[40px] rounded-t-md flex justify-between items-center" style={{ backgroundColor: props.tableData.color }}
> />
<div className="p-1"> <div className="font-bold text-slate-800 h-[40px] flex justify-between items-center border-b border-gray-400 bg-gray-200">
{props.tableData.name} <div className="px-3">{props.tableData.name}</div>
</div>
{isHovered && ( {isHovered && (
<div className="flex justify-end items-center"> <div className="flex justify-end items-center mx-2">
<button className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"> <Button
<IconEdit /> icon={<IconEdit />}
</button> size="small"
<button theme="solid"
className="btn bg-green-600 text-white text-xs py-1 px-2 me-2 opacity-80" style={{
onClick={(e) => setVisible(true)} backgroundColor: "#2f68ad",
> opacity: "0.7",
<IconPlus /> marginRight: "6px",
</button>
<Popconfirm
title="Are you sure you want to delete this table?"
content="This modification will be irreversible."
cancelText="Cancel"
okText="Delete"
onConfirm={() => {
Toast.success(`Table deleted!`);
console.log("table.jsx ", props.id);
}} }}
onCancel={() => {}} ></Button>
<Button
icon={<IconPlus />}
size="small"
theme="solid"
style={{
backgroundColor: "#3cb558",
opacity: "0.7",
marginRight: "6px",
}}
></Button>
<Popover
content={
<div className="text-slate-600">
<p>
<strong>Comment :</strong>{" "}
{props.tableData.comment === ""
? "No comment"
: props.tableData.comment}
</p>
<p className="text-slate-600">
<strong
className={`${
props.tableData.indices.length === 0 ? "" : "block"
}`}
>
Indices :
</strong>{" "}
{props.tableData.indices.length === 0 ? (
"No indices"
) : (
<div>
{props.tableData.indices.map((index, k) => (
<div className="flex items-center my-1 px-2 py-1 rounded bg-gray-100" key={k}>
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
<div>
{index.fields.map((f) => (
<Tag color="blue" key={f} className="me-1">{f}</Tag>
))}
</div>
</div>
))}
</div>
)}
</p>
</div>
}
position="rightTop"
showArrow
trigger="click"
> >
<button className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80"> <Button
<IconDelete /> icon={<IconMore />}
</button> type="tertiary"
</Popconfirm> size="small"
theme="solid"
style={{
opacity: "0.7",
}}
></Button>
</Popover>
</div> </div>
)} )}
</div> </div>
@ -154,7 +142,7 @@ export default function Table(props) {
<Popover <Popover
key={i} key={i}
content={ content={
<div> <>
<div className="flex justify-between items-center pb-2"> <div className="flex justify-between items-center pb-2">
<p className="me-4 font-bold">{e.name}</p> <p className="me-4 font-bold">{e.name}</p>
<p className="ms-4 text-slate-600">{e.type}</p> <p className="ms-4 text-slate-600">{e.type}</p>
@ -188,7 +176,7 @@ export default function Table(props) {
<strong>Comment :</strong>{" "} <strong>Comment :</strong>{" "}
{e.comment === "" ? "Not comment" : e.comment} {e.comment === "" ? "Not comment" : e.comment}
</p> </p>
</div> </>
} }
position="right" position="right"
showArrow showArrow
@ -197,8 +185,8 @@ export default function Table(props) {
className={`${ className={`${
i === props.tableData.fields.length - 1 i === props.tableData.fields.length - 1
? "" ? ""
: "border-b-2 border-gray-400" : "border-b border-gray-400"
} h-[36px] p-2 flex justify-between`} } h-[36px] px-2 py-1 flex justify-between`}
onMouseEnter={() => { onMouseEnter={() => {
setHoveredField(i); setHoveredField(i);
props.setOnRect({ props.setOnRect({
@ -211,10 +199,10 @@ export default function Table(props) {
}} }}
> >
<div <div
className={`${hoveredField === i ? "text-slate-600" : ""}`} className={`${hoveredField === i ? "text-slate-500" : ""}`}
> >
<button <button
className={`w-[10px] h-[10px] bg-green-600 rounded-full me-2`} className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
onMouseDown={(ev) => { onMouseDown={(ev) => {
props.handleGripField(i); props.handleGripField(i);
props.setLine((prev) => ({ props.setLine((prev) => ({
@ -222,45 +210,36 @@ export default function Table(props) {
startFieldId: i, startFieldId: i,
startTableId: props.id, startTableId: props.id,
startX: props.tableData.x + 15, startX: props.tableData.x + 15,
startY: props.tableData.y + i * 36 + 40 + 19, startY: props.tableData.y + i * 36 + 50 + 19,
endX: props.tableData.x + 15, endX: props.tableData.x + 15,
endY: props.tableData.y + i * 36 + 40 + 19, endY: props.tableData.y + i * 36 + 50 + 19,
})); }));
}} }}
></button> ></button>
{e.name} {e.name}
</div> </div>
<div className="text-slate-600"> <div className="text-slate-400">
{hoveredField === i ? ( {hoveredField === i ? (
<div> <Button
<button theme="solid"
className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80" size="small"
onClick={(ev) => { style={{
setEditFieldVisible(i); opacity: "0.7",
setField({ ...e }); backgroundColor: "#d42020",
}} }}
> onClick={(ev) => {
<IconEdit /> props.setTables((prev) => {
</button> const updatedTables = [...prev];
<button const updatedFields = [
className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80" ...updatedTables[props.id].fields,
onClick={(ev) => { ];
props.setTables((prev) => { updatedFields.splice(i, 1);
const updatedTables = [...prev]; updatedTables[props.id].fields = [...updatedFields];
const updatedFields = [ return updatedTables;
...updatedTables[props.id].fields, });
]; }}
updatedFields.splice(i, 1); icon={<IconMinus />}
updatedTables[props.id].fields = [ ></Button>
...updatedFields,
];
return updatedTables;
});
}}
>
<IconMinus />
</button>
</div>
) : ( ) : (
e.type e.type
)} )}
@ -269,215 +248,8 @@ export default function Table(props) {
</Popover> </Popover>
); );
})} })}
<div className="h-[36px] p-2">
{props.tableData.comment === ""
? "No comment"
: props.tableData.comment}
</div>
</div> </div>
</foreignObject> </foreignObject>
<Modal
title="Add new field"
visible={visible}
onOk={handleAddField}
onCancel={() => setVisible(false)}
centered
closeOnEsc={true}
okText="Add"
cancelText="Cancel"
>
<Form
labelPosition="left"
labelAlign="right"
onValueChange={(v) => setField({ ...field, ...v })}
>
<Row>
<Col span={11}>
<Form.Input field="name" label="Name" trigger="blur" />
</Col>
<Col span={2}></Col>
<Col span={11}>
<Form.Input field="default" label="Default" trigger="blur" />
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Select
field="type"
label="Type"
className="w-full"
filter
optionList={sqlDataTypes.map((value, index) => {
return {
label: value,
value: value,
};
})}
></Form.Select>
<Form.Input field="comment" label="Comment" className="w-full" />
<div className="flex justify-around mt-2">
<Checkbox
value="primary"
onChange={() =>
setField({ ...field, primary: !field.primary })
}
>
Primary
</Checkbox>
<Checkbox
value="unique"
onChange={() => setField({ ...field, unique: !field.unique })}
>
Unique
</Checkbox>
<Checkbox
value="not null"
onChange={() =>
setField({ ...field, notNull: !field.notNull })
}
>
Not null
</Checkbox>
<Checkbox
value="increment"
onChange={() =>
setField({ ...field, increment: !field.increment })
}
>
Increment
</Checkbox>
</div>
</Col>
</Row>
</Form>
</Modal>
<Modal
title={`Edit field ${
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].name
: ""
}`}
visible={editFieldVisible !== -1}
onOk={handleEditField}
onCancel={() => setEditFieldVisible(-1)}
centered
closeOnEsc={true}
okText="Edit"
cancelText="Cancel"
>
<Form
labelPosition="left"
labelAlign="right"
onValueChange={(v) => setField({ ...field, ...v })}
>
<Row>
<Col span={11}>
<Form.Input
field="name"
label="Name"
trigger="blur"
initValue={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].name
: ""
}
/>
</Col>
<Col span={2}></Col>
<Col span={11}>
<Form.Input
field="default"
label="Default"
trigger="blur"
initValue={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].default
: ""
}
/>
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Select
field="type"
label="Type"
className="w-full"
optionList={sqlDataTypes.map((value, index) => {
return {
label: value,
value: value,
};
})}
filter
initValue={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].type
: ""
}
></Form.Select>
<Form.Input
field="comment"
label="Comment"
trigger="blur"
initValue={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].comment
: ""
}
/>
<div className="flex justify-around mt-2">
<Checkbox
value="primary"
onChange={onCheck}
defaultChecked={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].primary
: undefined
}
>
Primary
</Checkbox>
<Checkbox
value="unique"
onChange={onCheck}
defaultChecked={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].unique
: undefined
}
>
Unique
</Checkbox>
<Checkbox
value="notNull"
onChange={onCheck}
defaultChecked={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].notNull
: undefined
}
>
Not null
</Checkbox>
<Checkbox
value="increment"
onChange={onCheck}
defaultChecked={
editFieldVisible !== -1
? props.tableData.fields[editFieldVisible].increment
: undefined
}
>
Increment
</Checkbox>
</div>
</Col>
</Row>
</Form>
</Modal>
</g> </g>
); );
} }

2
src/data/data.js
View File

@ -39,7 +39,7 @@ const tableThemes = [
"#ff9159", "#ff9159",
]; ];
const defaultTableTheme = "#9e9e9e"; const defaultTableTheme = "#175e7a";
const bgBlue = "#124559"; const bgBlue = "#124559";
const Cardinality = { const Cardinality = {