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

update link positions on table move

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:48 +03:00
parent 09f7142d75
commit 58642f3e8e
3 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/canvas.jsx
View File

@ -6,6 +6,10 @@ export default function Canvas(props) {
const [dragging, setDragging] = useState(-1);
const [linking, setLinking] = useState(false);
const [line, setLine] = useState({
startTableId: -1,
startFieldId: -1,
endTableId: -1,
endFieldId: -1,
startX: 0,
startY: 0,
endX: 0,
@ -61,6 +65,7 @@ export default function Canvas(props) {
setRelationships(
relationships.map((r) => ({
...r,
startX: r.startX + dx,
startY: r.startY + dy,
endX: r.endX + dx,
@ -80,6 +85,24 @@ export default function Canvas(props) {
return t;
});
props.setTables(updatedTables);
const updatedRelationShips = relationships.map((r) => {
if (r.startTableId === dragging - 1) {
return {
...r,
startX: props.tables[r.startTableId].x + 15,
startY:
props.tables[r.startTableId].y + r.startFieldId * 36 + 40 + 19,
};
} else if (r.endTableId === dragging - 1) {
return {
...r,
endX: props.tables[r.endTableId].x + 15,
endY: props.tables[r.endTableId].y + r.endFieldId * 36 + 40 + 19,
};
}
return r;
});
setRelationships(updatedRelationShips);
}
};
@ -119,10 +142,11 @@ export default function Canvas(props) {
setRelationships((prev) => [
...prev,
{
startX: line.startX,
startY: line.startY,
...line,
endX: props.tables[onRect.tableId].x + 15,
endY: props.tables[onRect.tableId].y + onRect.field * 36 + 40 + 19,
endTableId: onRect.tableId,
endFieldId: onRect.field,
},
]);
};
@ -229,8 +253,9 @@ export default function Canvas(props) {
strokeDasharray="5,5"
/>
)}
{relationships.map((e) => (
{relationships.map((e, i) => (
<line
key={i}
x1={e.startX}
y1={e.startY}
x2={e.endX}

1
src/components/editor_panel.jsx
View File

@ -67,7 +67,6 @@ export default function EditorPanel(props) {
};
props.setTables(prev => {
const updatedTables = [...prev, newTable];
console.log(updatedTables);
return updatedTables;
});
props.setCode((prev) =>

7
src/components/table.jsx
View File

@ -226,12 +226,15 @@ export default function Table(props) {
className={`w-[10px] h-[10px] bg-green-600 rounded-full me-2`}
onMouseDown={(ev) => {
props.handleGripField(i);
props.setLine({
props.setLine((prev)=>({
...prev,
startFieldId: i,
startTableId: props.id,
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>
{e.name}