move table data to the top fix general functionality
This commit is contained in:
1ilit
parent
4447fa2f48
commit
6777abf109
@ -21,10 +21,10 @@ export default function Canvas(props) {
|
||||
|
||||
const handleMouseDownRect = (e, id) => {
|
||||
const { clientX, clientY } = e;
|
||||
const rectangle = props.rectangles.find((rect) => rect.id === id);
|
||||
const table = props.tables.find((t) => t.id === id);
|
||||
setOffset({
|
||||
x: clientX - rectangle.x,
|
||||
y: clientY - rectangle.y,
|
||||
x: clientX - table.x,
|
||||
y: clientY - table.y,
|
||||
});
|
||||
setDragging(id);
|
||||
};
|
||||
@ -47,26 +47,25 @@ export default function Canvas(props) {
|
||||
const dy = e.clientY - panOffset.y;
|
||||
setPanOffset({ x: e.clientX, y: e.clientY });
|
||||
|
||||
const updatedRectangles = props.rectangles.map((rect) => ({
|
||||
...rect,
|
||||
x: rect.x + dx,
|
||||
y: rect.y + dy,
|
||||
const updatedTables = props.tables.map((t) => ({
|
||||
...t,
|
||||
x: t.x + dx,
|
||||
y: t.y + dy,
|
||||
}));
|
||||
props.setRectangles(updatedRectangles);
|
||||
props.setTables(updatedTables);
|
||||
} else if (dragging >= 0) {
|
||||
const { clientX, clientY } = e;
|
||||
const updatedRectangles = props.rectangles.map((rect) => {
|
||||
if (rect.id === dragging) {
|
||||
const updatedRect = {
|
||||
...rect,
|
||||
x: clientX - offset.x,
|
||||
y: clientY - offset.y,
|
||||
const updatedTables = props.tables.map((t) => {
|
||||
if (t.id === dragging) {
|
||||
const updatedTable = {
|
||||
...t,
|
||||
x: e.clientX - offset.x,
|
||||
y: e.clientY - offset.y,
|
||||
};
|
||||
return updatedRect;
|
||||
return updatedTable;
|
||||
}
|
||||
return rect;
|
||||
return t;
|
||||
});
|
||||
props.setRectangles(updatedRectangles);
|
||||
props.setTables(updatedTables);
|
||||
}
|
||||
};
|
||||
|
||||
@ -88,17 +87,20 @@ export default function Canvas(props) {
|
||||
};
|
||||
|
||||
const deleteTable = (id) => {
|
||||
const updatedTables = [...props.rectangles];
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables.splice(id, 1);
|
||||
props.setRectangles(updatedTables);
|
||||
props.setTables(updatedTables);
|
||||
};
|
||||
|
||||
const handleGripField = (id) => {
|
||||
setPanning(false);
|
||||
setDragging(-1);
|
||||
setLinking(true);
|
||||
handleLinking();
|
||||
};
|
||||
|
||||
const handleLinking = () => {};
|
||||
|
||||
const [, drop] = useDrop(
|
||||
() => ({
|
||||
accept: "CARD",
|
||||
@ -107,26 +109,35 @@ export default function Canvas(props) {
|
||||
const canvasRect = canvas.current.getBoundingClientRect();
|
||||
const x = offset.x - canvasRect.left - 100 * 0.5;
|
||||
const y = offset.y - canvasRect.top - 100 * 0.5;
|
||||
const newRectangle = {
|
||||
id: props.rectangles.length + 1,
|
||||
x,
|
||||
y,
|
||||
width: 240,
|
||||
height: 100,
|
||||
label: `rect ${props.rectangles.length + 1}`,
|
||||
const newTable = {
|
||||
id: props.tables.length + 1,
|
||||
name: `Table ${props.tables.length + 1}`,
|
||||
x: x,
|
||||
y: y,
|
||||
fields: [
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
props.setRectangles([...props.rectangles, newRectangle]);
|
||||
props.setTables((prev) => [...prev, newTable]);
|
||||
props.setCode((prev) =>
|
||||
prev === ""
|
||||
? `CREATE TABLE \`${newRectangle.label}\`;`
|
||||
: `${prev}\n\nCREATE TABLE \`${newRectangle.label}\`;`
|
||||
? `CREATE TABLE \`${newTable.name}\`;`
|
||||
: `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
|
||||
);
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isOver: !!monitor.isOver(),
|
||||
}),
|
||||
}),
|
||||
[props.rectangles]
|
||||
[props.tables]
|
||||
);
|
||||
return (
|
||||
<div ref={drop} className="flex-grow" id="canvas">
|
||||
@ -168,20 +179,17 @@ export default function Canvas(props) {
|
||||
</defs>
|
||||
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
{props.rectangles.map((rectangle, i) => (
|
||||
{props.tables.map((table, i) => (
|
||||
<Rect
|
||||
key={rectangle.id}
|
||||
key={table.id}
|
||||
id={i}
|
||||
x={rectangle.x}
|
||||
y={rectangle.y}
|
||||
label={rectangle.label}
|
||||
width={rectangle.width}
|
||||
height={rectangle.height}
|
||||
tableData={table}
|
||||
tables={props.tables}
|
||||
setTables={props.setTables}
|
||||
setOnRect={setOnRect}
|
||||
handleGripField={handleGripField}
|
||||
// links={links}
|
||||
setLine={setLine}
|
||||
onMouseDown={(e) => handleMouseDownRect(e, rectangle.id)}
|
||||
onMouseDown={(e) => handleMouseDownRect(e, table.id)}
|
||||
onDelete={deleteTable}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -48,19 +48,32 @@ export default function EditorPanel(props) {
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
const newRectangle = {
|
||||
id: props.rectangles.length + 1,
|
||||
const newTable = {
|
||||
id: props.tables.length + 1,
|
||||
name: `Table ${props.tables.length + 1}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 240,
|
||||
height: 100,
|
||||
name: `Table ${props.rectangles.length + 1}`,
|
||||
fields: [
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
props.setRectangles([...props.rectangles, newRectangle]);
|
||||
props.setTables(prev => {
|
||||
const updatedTables = [...prev, newTable];
|
||||
console.log(updatedTables);
|
||||
return updatedTables;
|
||||
});
|
||||
props.setCode((prev) =>
|
||||
prev === ""
|
||||
? `CREATE TABLE \`${newRectangle.name}\`;`
|
||||
: `${prev}\n\nCREATE TABLE \`${newRectangle.name}\`;`
|
||||
? `CREATE TABLE \`${newTable.name}\`;`
|
||||
: `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
|
||||
);
|
||||
}}
|
||||
>
|
||||
@ -91,15 +104,24 @@ export default function EditorPanel(props) {
|
||||
return;
|
||||
}
|
||||
map.current.set(t.table, t);
|
||||
const newRectangle = {
|
||||
id: props.rectangles.length + 1,
|
||||
const newTable = {
|
||||
id: props.tables.length + 1,
|
||||
name: `Table ${props.tables.length + 1}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 240,
|
||||
height: 100,
|
||||
name: `rect ${props.rectangles.length + 1}`,
|
||||
fields: [
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
props.setRectangles([...props.rectangles, newRectangle]);
|
||||
props.setTables((prev)=>[...prev, newTable]);
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
|
||||
@ -21,20 +21,10 @@ import {
|
||||
const Rect = (props) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const [name, setName] = useState("New Table");
|
||||
const [name, setName] = useState(props.tableData.name);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [editFieldVisible, setEditFieldVisible] = useState(-1);
|
||||
const [fields, setFields] = useState([
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const [field, setField] = useState({
|
||||
name: "",
|
||||
type: "",
|
||||
@ -45,12 +35,13 @@ const Rect = (props) => {
|
||||
increment: false,
|
||||
});
|
||||
|
||||
const handleOkEdit = () => {
|
||||
setFields((prev) => {
|
||||
const updatedFields = [...prev];
|
||||
updatedFields[editFieldVisible] = { ...field };
|
||||
return updatedFields;
|
||||
const handleEditField = () => {
|
||||
props.setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
updatedTables[props.id].fields[editFieldVisible] = { ...field };
|
||||
return updatedTables;
|
||||
});
|
||||
|
||||
setField({
|
||||
name: "",
|
||||
type: "",
|
||||
@ -63,8 +54,15 @@ const Rect = (props) => {
|
||||
setEditFieldVisible(-1);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
setFields((prev) => [...prev, field]);
|
||||
const handleAddField = () => {
|
||||
props.setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
updatedTables[props.id].fields = [
|
||||
...updatedTables[props.id].fields,
|
||||
{ ...field },
|
||||
];
|
||||
return updatedTables;
|
||||
});
|
||||
setField({
|
||||
name: "",
|
||||
type: "",
|
||||
@ -77,7 +75,7 @@ const Rect = (props) => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const height = fields.length * 36 + 40 + 4;
|
||||
const height = props.tableData.fields.length * 36 + 40 + 4;
|
||||
|
||||
const onCheck = (checkedValues) => {
|
||||
setField({
|
||||
@ -90,9 +88,9 @@ const Rect = (props) => {
|
||||
<g>
|
||||
<foreignObject
|
||||
key={props.id}
|
||||
x={props.x}
|
||||
y={props.y}
|
||||
width={props.width}
|
||||
x={props.tableData.x}
|
||||
y={props.tableData.y}
|
||||
width={240}
|
||||
height={height}
|
||||
style={{ cursor: "move" }}
|
||||
onMouseDown={props.onMouseDown}
|
||||
@ -154,7 +152,7 @@ const Rect = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{fields.map((e, i) => {
|
||||
{props.tableData.fields.map((e, i) => {
|
||||
return (
|
||||
<Popover
|
||||
key={i}
|
||||
@ -196,7 +194,9 @@ const Rect = (props) => {
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
|
||||
i === props.tableData.fields.length - 1
|
||||
? ""
|
||||
: "border-b-2 border-gray-400"
|
||||
} h-[36px] p-2 flex justify-between`}
|
||||
onMouseEnter={() => {
|
||||
setHoveredField(i);
|
||||
@ -205,17 +205,18 @@ const Rect = (props) => {
|
||||
setHoveredField(-1);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className={`${hoveredField === i ? "text-slate-600" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="w-[10px] h-[10px] bg-green-600 rounded-full me-2"
|
||||
className={`w-[10px] h-[10px] bg-green-600 rounded-full me-2`}
|
||||
onMouseDown={(ev) => {
|
||||
console.log("mouse down");
|
||||
props.handleGripField(i);
|
||||
props.setLine({
|
||||
startX: props.x + 15,
|
||||
startY: props.y + i * 36 + 40 + 19,
|
||||
endX: props.x + 15,
|
||||
endY: props.y + i * 36 + 40 + 19,
|
||||
startX: props.tableData.x + 15,
|
||||
startY: props.tableData.y + i * 36 + 40 + 19,
|
||||
endX: props.tableData.x + 15,
|
||||
endY: props.tableData.y + i * 36 + 40 + 19,
|
||||
});
|
||||
}}
|
||||
></button>
|
||||
@ -235,10 +236,18 @@ const Rect = (props) => {
|
||||
</button>
|
||||
<button
|
||||
className="btn bg-red-800 text-white text-xs py-1 px-2 opacity-80"
|
||||
onClick={(e) => {
|
||||
const updatedFields = [...fields];
|
||||
onClick={(ev) => {
|
||||
props.setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
const updatedFields = [
|
||||
...updatedTables[props.id].fields,
|
||||
];
|
||||
updatedFields.splice(i, 1);
|
||||
setFields(updatedFields);
|
||||
updatedTables[props.id].fields = [
|
||||
...updatedFields,
|
||||
];
|
||||
return updatedTables;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<IconMinus />
|
||||
@ -258,7 +267,7 @@ const Rect = (props) => {
|
||||
<Modal
|
||||
title="Add new field"
|
||||
visible={visible}
|
||||
onOk={handleOk}
|
||||
onOk={handleAddField}
|
||||
onCancel={() => setVisible(false)}
|
||||
centered
|
||||
closeOnEsc={true}
|
||||
@ -331,10 +340,12 @@ const Rect = (props) => {
|
||||
</Modal>
|
||||
<Modal
|
||||
title={`Edit field ${
|
||||
editFieldVisible !== -1 ? fields[editFieldVisible].name : ""
|
||||
editFieldVisible !== -1
|
||||
? props.tableData.fields[editFieldVisible].name
|
||||
: ""
|
||||
}`}
|
||||
visible={editFieldVisible !== -1}
|
||||
onOk={handleOkEdit}
|
||||
onOk={handleEditField}
|
||||
onCancel={() => setEditFieldVisible(-1)}
|
||||
centered
|
||||
closeOnEsc={true}
|
||||
@ -353,7 +364,9 @@ const Rect = (props) => {
|
||||
label="Name"
|
||||
trigger="blur"
|
||||
initValue={
|
||||
editFieldVisible !== -1 ? fields[editFieldVisible].name : ""
|
||||
editFieldVisible !== -1
|
||||
? props.tableData.fields[editFieldVisible].name
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
@ -365,7 +378,7 @@ const Rect = (props) => {
|
||||
trigger="blur"
|
||||
initValue={
|
||||
editFieldVisible !== -1
|
||||
? fields[editFieldVisible].default
|
||||
? props.tableData.fields[editFieldVisible].default
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
@ -385,7 +398,9 @@ const Rect = (props) => {
|
||||
})}
|
||||
filter
|
||||
initValue={
|
||||
editFieldVisible !== -1 ? fields[editFieldVisible].type : ""
|
||||
editFieldVisible !== -1
|
||||
? props.tableData.fields[editFieldVisible].type
|
||||
: ""
|
||||
}
|
||||
></Form.Select>
|
||||
<div className="flex justify-around mt-2">
|
||||
@ -394,7 +409,7 @@ const Rect = (props) => {
|
||||
onChange={onCheck}
|
||||
defaultChecked={
|
||||
editFieldVisible !== -1
|
||||
? fields[editFieldVisible].primary
|
||||
? props.tableData.fields[editFieldVisible].primary
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
@ -405,7 +420,7 @@ const Rect = (props) => {
|
||||
onChange={onCheck}
|
||||
defaultChecked={
|
||||
editFieldVisible !== -1
|
||||
? fields[editFieldVisible].unique
|
||||
? props.tableData.fields[editFieldVisible].unique
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
@ -416,7 +431,7 @@ const Rect = (props) => {
|
||||
onChange={onCheck}
|
||||
defaultChecked={
|
||||
editFieldVisible !== -1
|
||||
? fields[editFieldVisible].notNull
|
||||
? props.tableData.fields[editFieldVisible].notNull
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
@ -427,7 +442,7 @@ const Rect = (props) => {
|
||||
onChange={onCheck}
|
||||
defaultChecked={
|
||||
editFieldVisible !== -1
|
||||
? fields[editFieldVisible].increment
|
||||
? props.tableData.fields[editFieldVisible].increment
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
|
||||
@ -9,7 +9,7 @@ import EditorPanel from "../components/editor_panel";
|
||||
|
||||
export default function Editor(props) {
|
||||
const [code, setCode] = useState("");
|
||||
const [rectangles, setRectangles] = useState([]);
|
||||
const [tables, setTables] = useState([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -18,14 +18,14 @@ export default function Editor(props) {
|
||||
<div className="flex h-full">
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<EditorPanel
|
||||
rectangles={rectangles}
|
||||
setRectangles={setRectangles}
|
||||
tables={tables}
|
||||
setTables={setTables}
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
/>
|
||||
<Canvas
|
||||
rectangles={rectangles}
|
||||
setRectangles={setRectangles}
|
||||
tables={tables}
|
||||
setTables={setTables}
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user