Remove coords from relationship objects
This commit is contained in:
1ilit
parent
fa8fdae863
commit
10e0e279cc
@ -1,17 +1,24 @@
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
import { Action, Cardinality, Constraint, ObjectType } from "../../data/constants";
|
||||
import {
|
||||
Action,
|
||||
Cardinality,
|
||||
Constraint,
|
||||
ObjectType,
|
||||
} from "../../data/constants";
|
||||
import { Toast } from "@douyinfe/semi-ui";
|
||||
import Table from "./Table";
|
||||
import Area from "./Area";
|
||||
import Relationship from "./Relationship";
|
||||
import Note from "./Note";
|
||||
import useSettings from "../../hooks/useSettings";
|
||||
import useTransform from "../../hooks/useTransform";
|
||||
import useTables from "../../hooks/useTables";
|
||||
import useUndoRedo from "../../hooks/useUndoRedo";
|
||||
import useSelect from "../../hooks/useSelect";
|
||||
import useAreas from "../../hooks/useAreas";
|
||||
import useNotes from "../../hooks/useNotes";
|
||||
import {
|
||||
useSettings,
|
||||
useTransform,
|
||||
useTables,
|
||||
useUndoRedo,
|
||||
useSelect,
|
||||
useAreas,
|
||||
useNotes,
|
||||
} from "../../hooks";
|
||||
|
||||
export default function Canvas() {
|
||||
const { tables, updateTable, relationships, addRelationship } = useTables();
|
||||
@ -28,7 +35,7 @@ export default function Canvas() {
|
||||
prevY: 0,
|
||||
});
|
||||
const [linking, setLinking] = useState(false);
|
||||
const [linkingLink, setLinkingLine] = useState({
|
||||
const [linkingLine, setLinkingLine] = useState({
|
||||
startTableId: -1,
|
||||
startFieldId: -1,
|
||||
endTableId: -1,
|
||||
@ -37,11 +44,6 @@ export default function Canvas() {
|
||||
startY: 0,
|
||||
endX: 0,
|
||||
endY: 0,
|
||||
name: "",
|
||||
cardinality: Cardinality.ONE_TO_ONE,
|
||||
updateConstraint: Constraint.NONE,
|
||||
deleteConstraint: Constraint.NONE,
|
||||
mandatory: false,
|
||||
});
|
||||
const [offset, setOffset] = useState({ x: 0, y: 0 });
|
||||
const [hoveredTable, setHoveredTable] = useState({
|
||||
@ -119,7 +121,7 @@ export default function Canvas() {
|
||||
if (linking) {
|
||||
const rect = canvas.current.getBoundingClientRect();
|
||||
setLinkingLine({
|
||||
...linkingLink,
|
||||
...linkingLine,
|
||||
endX: (e.clientX - rect.left - transform.pan?.x) / transform.zoom,
|
||||
endY: (e.clientY - rect.top - transform.pan?.y) / transform.zoom,
|
||||
});
|
||||
@ -141,7 +143,7 @@ export default function Canvas() {
|
||||
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
|
||||
const dx = e.clientX / transform.zoom - offset.x;
|
||||
const dy = e.clientY / transform.zoom - offset.y;
|
||||
updateTable(dragging.id, { x: dx, y: dy }, true);
|
||||
updateTable(dragging.id, { x: dx, y: dy });
|
||||
} else if (
|
||||
dragging.element === ObjectType.AREA &&
|
||||
dragging.id >= 0 &&
|
||||
@ -335,29 +337,35 @@ export default function Canvas() {
|
||||
if (hoveredTable.tableId < 0) return;
|
||||
if (hoveredTable.field < 0) return;
|
||||
if (
|
||||
tables[linkingLink.startTableId].fields[linkingLink.startFieldId].type !==
|
||||
tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
|
||||
tables[hoveredTable.tableId].fields[hoveredTable.field].type
|
||||
) {
|
||||
Toast.info("Cannot connect");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
linkingLink.startTableId === hoveredTable.tableId &&
|
||||
linkingLink.startFieldId === hoveredTable.field
|
||||
linkingLine.startTableId === hoveredTable.tableId &&
|
||||
linkingLine.startFieldId === hoveredTable.field
|
||||
)
|
||||
return;
|
||||
|
||||
addRelationship(true, {
|
||||
...linkingLink,
|
||||
const newRelationship = {
|
||||
...linkingLine,
|
||||
endTableId: hoveredTable.tableId,
|
||||
endFieldId: hoveredTable.field,
|
||||
endX: tables[hoveredTable.tableId].x + 15,
|
||||
endY: tables[hoveredTable.tableId].y + hoveredTable.field * 36 + 69,
|
||||
name: `${tables[linkingLink.startTableId].name}_${
|
||||
tables[linkingLink.startTableId].fields[linkingLink.startFieldId].name
|
||||
cardinality: Cardinality.ONE_TO_ONE,
|
||||
updateConstraint: Constraint.NONE,
|
||||
deleteConstraint: Constraint.NONE,
|
||||
name: `${tables[linkingLine.startTableId].name}_${
|
||||
tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
|
||||
}_fk`,
|
||||
id: relationships.length,
|
||||
});
|
||||
};
|
||||
delete newRelationship.startX;
|
||||
delete newRelationship.startY;
|
||||
delete newRelationship.endX;
|
||||
delete newRelationship.endY;
|
||||
addRelationship(newRelationship, true);
|
||||
};
|
||||
|
||||
const handleMouseWheel = (e) => {
|
||||
@ -466,7 +474,7 @@ export default function Canvas() {
|
||||
))}
|
||||
{linking && (
|
||||
<path
|
||||
d={`M ${linkingLink.startX} ${linkingLink.startY} L ${linkingLink.endX} ${linkingLink.endY}`}
|
||||
d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
|
||||
stroke="red"
|
||||
strokeDasharray="8,8"
|
||||
/>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { useRef } from "react";
|
||||
import { Cardinality } from "../../data/constants";
|
||||
import useSettings from "../../hooks/useSettings";
|
||||
import { calcPath } from "../../utils/calcPath";
|
||||
import { useTables, useSettings } from "../../hooks";
|
||||
|
||||
export default function Relationship({ data }) {
|
||||
const { settings } = useSettings();
|
||||
const { tables } = useTables();
|
||||
const pathRef = useRef();
|
||||
|
||||
let cardinalityStart = "1";
|
||||
@ -50,7 +51,17 @@ export default function Relationship({ data }) {
|
||||
<g className="select-none group">
|
||||
<path
|
||||
ref={pathRef}
|
||||
d={calcPath(data.startX, data.endX, data.startY, data.endY)}
|
||||
d={calcPath({
|
||||
...data,
|
||||
startTable: {
|
||||
x: tables[data.startTableId].x,
|
||||
y: tables[data.startTableId].y,
|
||||
},
|
||||
endTable: {
|
||||
x: tables[data.endTableId].x,
|
||||
y: tables[data.endTableId].y,
|
||||
},
|
||||
})}
|
||||
stroke="gray"
|
||||
className="group-hover:stroke-sky-700"
|
||||
fill="none"
|
||||
@ -65,7 +76,7 @@ export default function Relationship({ data }) {
|
||||
r="12"
|
||||
fill="grey"
|
||||
className="group-hover:fill-sky-700"
|
||||
></circle>
|
||||
/>
|
||||
<text
|
||||
x={cardinalityStartX}
|
||||
y={cardinalityStartY}
|
||||
@ -82,7 +93,7 @@ export default function Relationship({ data }) {
|
||||
r="12"
|
||||
fill="grey"
|
||||
className="group-hover:fill-sky-700"
|
||||
></circle>
|
||||
/>
|
||||
<text
|
||||
x={cardinalityEndX}
|
||||
y={cardinalityEndY}
|
||||
|
||||
@ -797,12 +797,6 @@ export default function Table(props) {
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId - 1,
|
||||
startX: props.tableData.x + 15,
|
||||
startY:
|
||||
props.tableData.y +
|
||||
(e.startFieldId - 1) * 36 +
|
||||
50 +
|
||||
19,
|
||||
};
|
||||
}
|
||||
if (
|
||||
@ -812,12 +806,6 @@ export default function Table(props) {
|
||||
return {
|
||||
...e,
|
||||
endFieldId: e.endFieldId - 1,
|
||||
endX: props.tableData.x + 15,
|
||||
endY:
|
||||
props.tableData.y +
|
||||
(e.endFieldId - 1) * 36 +
|
||||
50 +
|
||||
19,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
@ -1314,12 +1302,6 @@ export default function Table(props) {
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId - 1,
|
||||
startX: props.tableData.x + 15,
|
||||
startY:
|
||||
props.tableData.y +
|
||||
(e.startFieldId - 1) * 36 +
|
||||
50 +
|
||||
19,
|
||||
};
|
||||
}
|
||||
if (
|
||||
@ -1329,9 +1311,6 @@ export default function Table(props) {
|
||||
return {
|
||||
...e,
|
||||
endFieldId: e.endFieldId - 1,
|
||||
endX: props.tableData.x + 15,
|
||||
endY:
|
||||
props.tableData.y + (e.endFieldId - 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
|
||||
@ -59,7 +59,7 @@ import { db } from "../../data/db";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { Parser } from "node-sql-parser";
|
||||
import Todo from "./Todo";
|
||||
import { Thumbnail } from "./Thumbnail";
|
||||
|
||||
import useLayout from "../../hooks/useLayout";
|
||||
import useSettings from "../../hooks/useSettings";
|
||||
import useTransform from "../../hooks/useTransform";
|
||||
@ -76,6 +76,7 @@ import useAreas from "../../hooks/useAreas";
|
||||
import useNotes from "../../hooks/useNotes";
|
||||
import useTypes from "../../hooks/useTypes";
|
||||
import useSaveState from "../../hooks/useSaveState";
|
||||
import Thumbnail from "../Thumbnail";
|
||||
|
||||
export default function ControlPanel({
|
||||
diagramId,
|
||||
@ -210,7 +211,7 @@ export default function ControlPanel({
|
||||
if (a.element === ObjectType.TABLE) {
|
||||
addTable(false, a.data);
|
||||
} else if (a.element === ObjectType.RELATIONSHIP) {
|
||||
addRelationship(false, a.data);
|
||||
addRelationship(a.data, false);
|
||||
} else if (a.element === ObjectType.NOTE) {
|
||||
addNote(false, a.data);
|
||||
} else if (a.element === ObjectType.AREA) {
|
||||
@ -234,16 +235,12 @@ export default function ControlPanel({
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId + 1,
|
||||
startX: tables[a.tid].x + 15,
|
||||
startY: tables[a.tid].y + (e.startFieldId + 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
if (e.endTableId === a.tid && e.endFieldId >= a.data.id) {
|
||||
return {
|
||||
...e,
|
||||
endFieldId: e.endFieldId + 1,
|
||||
endX: tables[a.tid].x + 15,
|
||||
endY: tables[a.tid].y + (e.endFieldId + 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
@ -354,7 +351,7 @@ export default function ControlPanel({
|
||||
} else if (a.element === ObjectType.NOTE) {
|
||||
addNote(false);
|
||||
} else if (a.element === ObjectType.RELATIONSHIP) {
|
||||
addRelationship(false, a.data);
|
||||
addRelationship(a.data, false);
|
||||
} else if (a.element === ObjectType.TYPE) {
|
||||
addType(false);
|
||||
}
|
||||
@ -407,16 +404,12 @@ export default function ControlPanel({
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId - 1,
|
||||
startX: tables[a.tid].x + 15,
|
||||
startY: tables[a.tid].y + (e.startFieldId - 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
if (e.endTableId === a.tid && e.endFieldId > a.data.id) {
|
||||
return {
|
||||
...e,
|
||||
endFieldId: e.endFieldId - 1,
|
||||
endX: tables[a.tid].x + 15,
|
||||
endY: tables[a.tid].y + (e.endFieldId - 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
@ -1482,13 +1475,6 @@ export default function ControlPanel({
|
||||
|
||||
if (startFieldId === -1 || endFieldId === -1) return;
|
||||
|
||||
const startX = tables[startTableId].x + 15;
|
||||
const startY = tables[startTableId].y + startFieldId * 36 + 69;
|
||||
const endX = tables[endTableId].x + 15;
|
||||
const endY = tables[endTableId].y + endFieldId * 36 + 69;
|
||||
|
||||
relationship.mandetory = false;
|
||||
|
||||
relationship.name = startTable + "_" + startField + "_fk";
|
||||
relationship.startTableId = startTableId;
|
||||
relationship.startFieldId = startFieldId;
|
||||
@ -1497,10 +1483,6 @@ export default function ControlPanel({
|
||||
relationship.updateConstraint = updateConstraint;
|
||||
relationship.deleteConstraint = deleteConstraint;
|
||||
relationship.cardinality = Cardinality.ONE_TO_ONE;
|
||||
relationship.startX = startX;
|
||||
relationship.startY = startY;
|
||||
relationship.endX = endX;
|
||||
relationship.endY = endY;
|
||||
relationships.push(relationship);
|
||||
|
||||
relationships.forEach((r, i) => (r.id = i));
|
||||
@ -1559,11 +1541,6 @@ export default function ControlPanel({
|
||||
|
||||
if (startFieldId === -1 || endFieldId === -1) return;
|
||||
|
||||
const startX = tables[startTableId].x + 15;
|
||||
const startY = tables[startTableId].y + startFieldId * 36 + 69;
|
||||
const endX = tables[endTableId].x + 15;
|
||||
const endY = tables[endTableId].y + endFieldId * 36 + 69;
|
||||
|
||||
relationship.name = startTable + "_" + startField + "_fk";
|
||||
relationship.startTableId = startTableId;
|
||||
relationship.startFieldId = startFieldId;
|
||||
@ -1572,10 +1549,6 @@ export default function ControlPanel({
|
||||
relationship.updateConstraint = updateConstraint;
|
||||
relationship.deleteConstraint = deleteConstraint;
|
||||
relationship.cardinality = Cardinality.ONE_TO_ONE;
|
||||
relationship.startX = startX;
|
||||
relationship.startY = startY;
|
||||
relationship.endX = endX;
|
||||
relationship.endY = endY;
|
||||
relationships.push(relationship);
|
||||
});
|
||||
|
||||
@ -1823,10 +1796,10 @@ export default function ControlPanel({
|
||||
<div onClick={() => setSelectedTemplateId(0)}>
|
||||
<div
|
||||
className={`rounded-md h-[180px] border-2 hover:border-dashed ${
|
||||
selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-100"
|
||||
selectedTemplateId === 0 ? "border-blue-400" : "border-zinc-400"
|
||||
}`}
|
||||
>
|
||||
<Thumbnail i={0} diagram={{}} zoom={0.24} />
|
||||
<Thumbnail i={0} diagram={{}} zoom={0.24} theme={settings.mode} />
|
||||
</div>
|
||||
<div className="text-center mt-1">Blank</div>
|
||||
</div>
|
||||
@ -1836,10 +1809,15 @@ export default function ControlPanel({
|
||||
className={`rounded-md h-[180px] border-2 hover:border-dashed ${
|
||||
selectedTemplateId === temp.id
|
||||
? "border-blue-400"
|
||||
: "border-zinc-100"
|
||||
: "border-zinc-400"
|
||||
}`}
|
||||
>
|
||||
<Thumbnail i={temp.id} diagram={temp} zoom={0.24} />
|
||||
<Thumbnail
|
||||
i={temp.id}
|
||||
diagram={temp}
|
||||
zoom={0.24}
|
||||
theme={settings.mode}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center mt-1">{temp.title}</div>
|
||||
</div>
|
||||
|
||||
@ -149,16 +149,12 @@ function TablePanel({ data }) {
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId - 1,
|
||||
startX: data.x + 15,
|
||||
startY: data.y + (e.startFieldId - 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
if (e.endTableId === data.id && e.endFieldId > field.id) {
|
||||
return {
|
||||
...e,
|
||||
endFieldId: e.endFieldId - 1,
|
||||
endX: data.x + 15,
|
||||
endY: data.y + (e.endFieldId - 1) * 36 + 50 + 19,
|
||||
};
|
||||
}
|
||||
return e;
|
||||
|
||||
@ -53,7 +53,7 @@ function Table({ table, grab }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Relationship({ relationship }) {
|
||||
function Relationship({ relationship, tables }) {
|
||||
const pathRef = useRef();
|
||||
let start = { x: 0, y: 0 };
|
||||
let end = { x: 0, y: 0 };
|
||||
@ -97,19 +97,24 @@ function Relationship({ relationship }) {
|
||||
<g className="select-none" onClick={() => console.log(pathRef.current)}>
|
||||
<path
|
||||
ref={pathRef}
|
||||
d={calcPath(
|
||||
relationship.startX,
|
||||
relationship.endX,
|
||||
relationship.startY,
|
||||
relationship.endY
|
||||
)}
|
||||
d={calcPath({
|
||||
...relationship,
|
||||
startTable: {
|
||||
x: tables[relationship.startTableId].x,
|
||||
y: tables[relationship.startTableId].y,
|
||||
},
|
||||
endTable: {
|
||||
x: tables[relationship.endTableId].x,
|
||||
y: tables[relationship.endTableId].y,
|
||||
},
|
||||
})}
|
||||
stroke="gray"
|
||||
fill="none"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
{pathRef.current && (
|
||||
<>
|
||||
<circle cx={start.x} cy={start.y} r="12" fill="grey"></circle>
|
||||
<circle cx={start.x} cy={start.y} r="12" fill="grey" />
|
||||
<text
|
||||
x={start.x}
|
||||
y={start.y}
|
||||
@ -120,7 +125,7 @@ function Relationship({ relationship }) {
|
||||
>
|
||||
{cardinalityStart}
|
||||
</text>
|
||||
<circle cx={end.x} cy={end.y} r="12" fill="grey"></circle>
|
||||
<circle cx={end.x} cy={end.y} r="12" fill="grey" />
|
||||
<text
|
||||
x={end.x}
|
||||
y={end.y}
|
||||
@ -139,7 +144,6 @@ function Relationship({ relationship }) {
|
||||
|
||||
export default function SimpleCanvas({ diagram, zoom }) {
|
||||
const [tables, setTables] = useState(diagram.tables);
|
||||
const [relationships, setRelationships] = useState(diagram.relationships);
|
||||
const [dragging, setDragging] = useState(-1);
|
||||
const [offset, setOffset] = useState({ x: 0, y: 0 });
|
||||
|
||||
@ -156,39 +160,9 @@ export default function SimpleCanvas({ diagram, zoom }) {
|
||||
const dx = e.clientX - offset.x;
|
||||
const dy = e.clientY - offset.y;
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (i === dragging) {
|
||||
setRelationships((prev) =>
|
||||
prev.map((r) => {
|
||||
if (r.startTableId === i) {
|
||||
return {
|
||||
...r,
|
||||
startX: dx + 15,
|
||||
startY: dy + r.startFieldId * 36 + 69,
|
||||
endX: tables[r.endTableId].x + 15,
|
||||
endY: tables[r.endTableId].y + r.endFieldId * 36 + 69,
|
||||
};
|
||||
} else if (r.endTableId === i) {
|
||||
return {
|
||||
...r,
|
||||
startX: tables[r.startTableId].x + 15,
|
||||
startY: tables[r.startTableId].y + r.startFieldId * 36 + 69,
|
||||
endX: dx + 15,
|
||||
endY: dy + r.endFieldId * 36 + 69,
|
||||
};
|
||||
}
|
||||
return r;
|
||||
})
|
||||
);
|
||||
|
||||
return {
|
||||
...table,
|
||||
x: dx,
|
||||
y: dy,
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
prev.map((table, i) =>
|
||||
i === dragging ? { ...table, x: dx, y: dy } : table
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -237,8 +211,8 @@ export default function SimpleCanvas({ diagram, zoom }) {
|
||||
transformOrigin: "top left",
|
||||
}}
|
||||
>
|
||||
{relationships.map((r, i) => (
|
||||
<Relationship key={i} relationship={r} />
|
||||
{diagram.relationships.map((r, i) => (
|
||||
<Relationship key={i} relationship={r} tables={tables} />
|
||||
))}
|
||||
{tables.map((t, i) => (
|
||||
<Table key={i} table={t} grab={(e) => grabTable(e, i)} />
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import { calcPath } from "../../utils/calcPath";
|
||||
import { tableFieldHeight, tableHeaderHeight } from "../data/constants";
|
||||
import { calcPath } from "../utils/calcPath";
|
||||
|
||||
export function Thumbnail({ diagram, i, zoom }) {
|
||||
const translateX = 32 * zoom;
|
||||
const translateY = 32 * zoom;
|
||||
const theme = localStorage.getItem("theme");
|
||||
export default function Thumbnail({ diagram, i, zoom, theme }) {
|
||||
return (
|
||||
<svg
|
||||
className={`${
|
||||
@ -38,7 +36,7 @@ export function Thumbnail({ diagram, i, zoom }) {
|
||||
></rect>
|
||||
<g
|
||||
style={{
|
||||
transform: `translate(${translateX}px, ${translateY}px) scale(${zoom})`,
|
||||
transform: `scale(${zoom})`,
|
||||
}}
|
||||
>
|
||||
{diagram.subjectAreas?.map((a) => (
|
||||
@ -60,8 +58,28 @@ export function Thumbnail({ diagram, i, zoom }) {
|
||||
</div>
|
||||
</foreignObject>
|
||||
))}
|
||||
{diagram.relationships?.map((r, i) => (
|
||||
<path
|
||||
key={i}
|
||||
d={calcPath({
|
||||
...r,
|
||||
startTable: {
|
||||
x: diagram.tables[r.startTableId].x,
|
||||
y: diagram.tables[r.startTableId].y - tableFieldHeight / 2,
|
||||
},
|
||||
endTable: {
|
||||
x: diagram.tables[r.endTableId].x,
|
||||
y: diagram.tables[r.endTableId].y - tableFieldHeight / 2,
|
||||
},
|
||||
})}
|
||||
fill="none"
|
||||
strokeWidth={2}
|
||||
stroke="gray"
|
||||
/>
|
||||
))}
|
||||
{diagram.tables?.map((table, i) => {
|
||||
const height = table.fields.length * 36 + 50 + 7;
|
||||
const height =
|
||||
table.fields.length * tableFieldHeight + tableHeaderHeight + 7;
|
||||
return (
|
||||
<foreignObject
|
||||
x={table.x}
|
||||
@ -110,20 +128,6 @@ export function Thumbnail({ diagram, i, zoom }) {
|
||||
</foreignObject>
|
||||
);
|
||||
})}
|
||||
{diagram.relationships?.map((e, i) => (
|
||||
<path
|
||||
key={i}
|
||||
d={calcPath(
|
||||
e.startX,
|
||||
e.endX,
|
||||
e.startY - translateY / zoom,
|
||||
e.endY - (translateY / zoom) * 0.5
|
||||
)}
|
||||
fill="none"
|
||||
strokeWidth={1}
|
||||
stroke="#ddd"
|
||||
/>
|
||||
))}
|
||||
{diagram.notes?.map((n) => {
|
||||
const x = n.x;
|
||||
const y = n.y;
|
||||
@ -103,33 +103,9 @@ export default function TablesContextProvider({ children }) {
|
||||
}
|
||||
};
|
||||
|
||||
const updateTable = (id, updatedValues, updateRelationships = false) => {
|
||||
const updateTable = (id, updatedValues) => {
|
||||
setTables((prev) =>
|
||||
prev.map((table) => {
|
||||
if (table.id === id) {
|
||||
if (updateRelationships) {
|
||||
setRelationships((prev) =>
|
||||
prev.map((r) => {
|
||||
let newR = { ...r };
|
||||
if (r.startTableId === id) {
|
||||
newR.startX = updatedValues.x + 15;
|
||||
newR.startY = updatedValues.y + r.startFieldId * 36 + 69;
|
||||
}
|
||||
if (r.endTableId === id) {
|
||||
newR.endX = updatedValues.x + 15;
|
||||
newR.endY = updatedValues.y + r.endFieldId * 36 + 69;
|
||||
}
|
||||
return newR;
|
||||
})
|
||||
);
|
||||
}
|
||||
return {
|
||||
...table,
|
||||
...updatedValues,
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
prev.map((t) => (t.id === id ? { ...t, ...updatedValues } : t))
|
||||
);
|
||||
};
|
||||
|
||||
@ -149,7 +125,7 @@ export default function TablesContextProvider({ children }) {
|
||||
);
|
||||
};
|
||||
|
||||
const addRelationship = (addToHistory = true, data) => {
|
||||
const addRelationship = (data, addToHistory = true) => {
|
||||
if (addToHistory) {
|
||||
setRelationships((prev) => {
|
||||
setUndoStack((prevUndo) => [
|
||||
|
||||
@ -49,6 +49,9 @@ export const noteThemes = [
|
||||
|
||||
export const defaultBlue = "#175e7a";
|
||||
export const defaultNoteTheme = "#fcf7ac";
|
||||
export const tableHeaderHeight = 50;
|
||||
export const tableWidth = 200;
|
||||
export const tableFieldHeight = 36;
|
||||
|
||||
export const Cardinality = {
|
||||
ONE_TO_ONE: "One to one",
|
||||
|
||||
@ -103,10 +103,6 @@ export const diagram = {
|
||||
startFieldId: 1,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: xOffset + 42,
|
||||
startY: window.innerHeight * 0.72 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 2),
|
||||
endX: xOffset + 90,
|
||||
endY: window.innerHeight * 0.23 - (4 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
|
||||
cardinality: "Many to one",
|
||||
},
|
||||
{
|
||||
@ -114,10 +110,6 @@ export const diagram = {
|
||||
startFieldId: 2,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: xOffset + 351,
|
||||
startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 5),
|
||||
endX: xOffset + 42,
|
||||
endY: window.innerHeight * 0.72 - (5 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
|
||||
cardinality: "One to one",
|
||||
},
|
||||
{
|
||||
@ -125,11 +117,7 @@ export const diagram = {
|
||||
startFieldId: 1,
|
||||
endTableId: 3,
|
||||
endFieldId: 0,
|
||||
startX: xOffset + 351,
|
||||
startY: window.innerHeight * 0.72 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 3),
|
||||
endX: xOffset + 325,
|
||||
endY: window.innerHeight * 0.23 - (3 * 36 + 50 + 7) * 0.5 + (50 + 18 * 1),
|
||||
cardinality: "Many to one",
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
@ -124,15 +124,10 @@ export const jsonSchema = {
|
||||
startFieldId: { type: "integer" },
|
||||
endTableId: { type: "integer" },
|
||||
endFieldId: { type: "integer" },
|
||||
startX: { type: "number" },
|
||||
startY: { type: "number" },
|
||||
endX: { type: "number" },
|
||||
endY: { type: "number" },
|
||||
name: { type: "string" },
|
||||
cardinality: { type: "string" },
|
||||
updateConstraint: { type: "string" },
|
||||
deleteConstraint: { type: "string" },
|
||||
mandatory: { type: "boolean" },
|
||||
id: { type: "integer" },
|
||||
},
|
||||
required: [
|
||||
@ -140,15 +135,10 @@ export const jsonSchema = {
|
||||
"startFieldId",
|
||||
"endTableId",
|
||||
"endFieldId",
|
||||
"startX",
|
||||
"startY",
|
||||
"endX",
|
||||
"endY",
|
||||
"name",
|
||||
"cardinality",
|
||||
"updateConstraint",
|
||||
"deleteConstraint",
|
||||
"mandatory",
|
||||
"id",
|
||||
],
|
||||
},
|
||||
|
||||
@ -6,7 +6,7 @@ import { Tabs, TabPane, Banner, Steps } from "@douyinfe/semi-ui";
|
||||
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||
import { db } from "../data/db";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { calcPath } from "../utils/calcPath";
|
||||
import Thumbnail from "../components/Thumbnail";
|
||||
|
||||
export default function Templates() {
|
||||
const defaultTemplates = useLiveQuery(() =>
|
||||
@ -73,7 +73,14 @@ export default function Templates() {
|
||||
key={i}
|
||||
className="bg-gray-100 hover:translate-y-[-6px] transition-all duration-300 border rounded-md"
|
||||
>
|
||||
<Thumbnail diagram={t} i={"1" + i} />
|
||||
<div className="h-48">
|
||||
<Thumbnail
|
||||
diagram={t}
|
||||
i={"1" + i}
|
||||
zoom={0.3}
|
||||
theme="light"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex justify-between">
|
||||
<div className="text-lg font-bold text-zinc-700">
|
||||
@ -187,155 +194,3 @@ export default function Templates() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Thumbnail({ diagram, i }) {
|
||||
const zoom = 0.3;
|
||||
return (
|
||||
<div className="w-full select-none">
|
||||
<svg className="bg-white w-full h-full rounded-t-md">
|
||||
<defs>
|
||||
<pattern
|
||||
id={"pattern-circles-" + i}
|
||||
x="0"
|
||||
y="0"
|
||||
width="10"
|
||||
height="10"
|
||||
patternUnits="userSpaceOnUse"
|
||||
patternContentUnits="userSpaceOnUse"
|
||||
>
|
||||
<circle
|
||||
id={"pattern-circle-" + i}
|
||||
cx="2"
|
||||
cy="2"
|
||||
r="0.4"
|
||||
fill="rgb(99, 152, 191)"
|
||||
></circle>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill={"url(#pattern-circles-" + i + ")"}
|
||||
></rect>
|
||||
<g>
|
||||
{diagram.subjectAreas?.map((a) => (
|
||||
<foreignObject
|
||||
key={a.id}
|
||||
x={a.x * zoom}
|
||||
y={a.y * zoom}
|
||||
width={a.width > 0 ? a.width * zoom : 0}
|
||||
height={a.height > 0 ? a.height * zoom : 0}
|
||||
>
|
||||
<div
|
||||
className={`border border-slate-400 w-full h-full rounded-sm relative`}
|
||||
>
|
||||
<div
|
||||
className="opacity-40 w-fill h-full"
|
||||
style={{ backgroundColor: a.color }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-color absolute top-[4px] left-[6px] select-none text-[4px]">
|
||||
{a.name}
|
||||
</div>
|
||||
</foreignObject>
|
||||
))}
|
||||
{diagram.tables?.map((table, i) => {
|
||||
const height = table.fields.length * 36 + 50 + 7;
|
||||
return (
|
||||
<foreignObject
|
||||
x={table.x * zoom}
|
||||
y={table.y * zoom}
|
||||
width={200 * zoom}
|
||||
height={height * zoom}
|
||||
key={i}
|
||||
>
|
||||
<div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
|
||||
<div
|
||||
className="h-[4px] w-full rounded-t-sm"
|
||||
style={{ backgroundColor: table.color }}
|
||||
></div>
|
||||
<div className="rounded-b-[3px]">
|
||||
<div className="bg-zinc-200 font-bold py-[2px] px-[4px] border-b border-gray-300">
|
||||
{table.name}
|
||||
</div>
|
||||
{table.fields.map((f, j) => (
|
||||
<div
|
||||
className={`flex justify-between items-center py-[2px] px-[3px] ${
|
||||
j < table.fields.length - 1 ? "border-b" : ""
|
||||
}`}
|
||||
key={j}
|
||||
>
|
||||
<div className="flex items-center justify-start">
|
||||
<div
|
||||
className={`w-[3px] h-[3px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-[2px]`}
|
||||
></div>
|
||||
<div>{f.name}</div>
|
||||
</div>
|
||||
<div className="text-zinc-500">{f.type}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
);
|
||||
})}
|
||||
{diagram.relationships?.map((e, i) => (
|
||||
<path
|
||||
key={i}
|
||||
d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
|
||||
fill="none"
|
||||
strokeWidth={1}
|
||||
stroke="gray"
|
||||
/>
|
||||
))}
|
||||
{diagram.notes?.map((n) => {
|
||||
const x = n.x * zoom;
|
||||
const y = n.y * zoom;
|
||||
const w = 180 * zoom;
|
||||
const r = 3 * zoom;
|
||||
const fold = 24 * zoom;
|
||||
const h = n.height * zoom;
|
||||
return (
|
||||
<g key={n.id}>
|
||||
<path
|
||||
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
|
||||
x + w
|
||||
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
|
||||
x + w - r
|
||||
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
|
||||
y + h - r
|
||||
} L${x} ${y + fold}`}
|
||||
fill={n.color}
|
||||
stroke="rgb(168 162 158)"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d={`M${x} ${y + fold} L${x + fold - r} ${
|
||||
y + fold
|
||||
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
|
||||
x + fold
|
||||
} ${y} L${x} ${y + fold} Z`}
|
||||
fill={n.color}
|
||||
stroke={"rgb(168 162 158)"}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<foreignObject x={x} y={y} width={w} height={h}>
|
||||
<div className="text-gray-900 w-full h-full px-[4px] py-[2px] text-[4px]">
|
||||
<label htmlFor={`note_${n.id}`} className="ms-[6px]">
|
||||
{n.title}
|
||||
</label>
|
||||
<div className="text-[4px] mt-[2px]">{n.content}</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -288,15 +288,10 @@ export const template1 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 292.57925,
|
||||
startY: 124.20675000000011,
|
||||
endX: 129.92525,
|
||||
endY: 350.2977500000002,
|
||||
name: "blog_posts_user_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -304,15 +299,10 @@ export const template1 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 520.6211250000003,
|
||||
startY: 446.6078750000002,
|
||||
endX: 292.57925,
|
||||
endY: 88.20675000000011,
|
||||
name: "comments_blog_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -320,15 +310,10 @@ export const template1 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 520.6211250000003,
|
||||
startY: 482.6078750000002,
|
||||
endX: 129.92525,
|
||||
endY: 350.2977500000002,
|
||||
name: "comments_user_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -336,15 +321,10 @@ export const template1 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 3,
|
||||
endFieldId: 0,
|
||||
startX: 827.1175000000004,
|
||||
startY: 236.55062500000008,
|
||||
endX: 758.2832500000009,
|
||||
endY: 387.1841250000001,
|
||||
name: "blog_tag_tag_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
@ -352,15 +332,10 @@ export const template1 = {
|
||||
startFieldId: 0,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 827.1175000000004,
|
||||
startY: 200.55062500000008,
|
||||
endX: 292.57925,
|
||||
endY: 88.20675000000011,
|
||||
name: "blog_tag_blog_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 4,
|
||||
},
|
||||
],
|
||||
|
||||
@ -303,15 +303,10 @@ export const template2 = {
|
||||
startFieldId: 4,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 380,
|
||||
startY: 233,
|
||||
endX: 56,
|
||||
endY: 128,
|
||||
name: "employees_dep_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -319,15 +314,10 @@ export const template2 = {
|
||||
startFieldId: 5,
|
||||
endTableId: 2,
|
||||
endFieldId: 0,
|
||||
startX: 380,
|
||||
startY: 269,
|
||||
endX: 52,
|
||||
endY: 353,
|
||||
name: "employees_pos_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -335,15 +325,10 @@ export const template2 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 3,
|
||||
endFieldId: 0,
|
||||
startX: 699,
|
||||
startY: 400,
|
||||
endX: 683,
|
||||
endY: 97,
|
||||
name: "project_assignment_project_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -351,15 +336,10 @@ export const template2 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 699,
|
||||
startY: 436,
|
||||
endX: 380,
|
||||
endY: 89,
|
||||
name: "project_assignment_employee_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
|
||||
@ -364,15 +364,10 @@ export const template3 = {
|
||||
startFieldId: 5,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 771,
|
||||
startY: 296,
|
||||
endX: 346,
|
||||
endY: 369,
|
||||
name: "order_product_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -380,15 +375,10 @@ export const template3 = {
|
||||
startFieldId: 4,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 346,
|
||||
startY: 513,
|
||||
endX: 664,
|
||||
endY: 460,
|
||||
name: "products_category_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -396,15 +386,10 @@ export const template3 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 4,
|
||||
endFieldId: 0,
|
||||
startX: 48,
|
||||
startY: 198,
|
||||
endX: 417,
|
||||
endY: 85,
|
||||
name: "reviews_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -412,15 +397,10 @@ export const template3 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 48,
|
||||
startY: 234,
|
||||
endX: 346,
|
||||
endY: 369,
|
||||
name: "reviews_product_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
@ -428,15 +408,10 @@ export const template3 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 4,
|
||||
endFieldId: 0,
|
||||
startX: 771,
|
||||
startY: 188,
|
||||
endX: 417,
|
||||
endY: 85,
|
||||
name: "orders_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 4,
|
||||
},
|
||||
],
|
||||
|
||||
@ -315,15 +315,10 @@ export const template4 = {
|
||||
startFieldId: 3,
|
||||
endTableId: 2,
|
||||
endFieldId: 0,
|
||||
startX: 182,
|
||||
startY: 265,
|
||||
endX: 490,
|
||||
endY: 411,
|
||||
name: "books_author_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -331,15 +326,10 @@ export const template4 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 516,
|
||||
startY: 119,
|
||||
endX: 182,
|
||||
endY: 157,
|
||||
name: "reservations_book_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -347,15 +337,10 @@ export const template4 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 4,
|
||||
endFieldId: 0,
|
||||
startX: 516,
|
||||
startY: 155,
|
||||
endX: 795,
|
||||
endY: 289,
|
||||
name: "reservations_patron_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -363,15 +348,10 @@ export const template4 = {
|
||||
startFieldId: 4,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 182,
|
||||
startY: 301,
|
||||
endX: 93,
|
||||
endY: 448,
|
||||
name: "books_genre_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
],
|
||||
|
||||
@ -553,15 +553,10 @@ export const template5 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 144,
|
||||
startY: 197,
|
||||
endX: 399,
|
||||
endY: 384,
|
||||
name: "accounts_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -569,15 +564,10 @@ export const template5 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 787,
|
||||
startY: 170,
|
||||
endX: 399,
|
||||
endY: 384,
|
||||
name: "cards_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -585,15 +575,10 @@ export const template5 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 934,
|
||||
startY: 386,
|
||||
endX: 399,
|
||||
endY: 384,
|
||||
name: "loans_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -601,15 +586,10 @@ export const template5 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 679,
|
||||
startY: 500,
|
||||
endX: 399,
|
||||
endY: 384,
|
||||
name: "investments_customer_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
@ -617,15 +597,10 @@ export const template5 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 446,
|
||||
startY: 109,
|
||||
endX: 144,
|
||||
endY: 161,
|
||||
name: "transactions_account_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
@ -633,15 +608,10 @@ export const template5 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 127,
|
||||
startY: 499,
|
||||
endX: 144,
|
||||
endY: 161,
|
||||
name: "transfers_to_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 5,
|
||||
},
|
||||
{
|
||||
@ -649,15 +619,10 @@ export const template5 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 127,
|
||||
startY: 463,
|
||||
endX: 144,
|
||||
endY: 161,
|
||||
name: "transfers_from_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 6,
|
||||
},
|
||||
],
|
||||
|
||||
@ -399,15 +399,10 @@ export const template6 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 0,
|
||||
endFieldId: 0,
|
||||
startX: 96,
|
||||
startY: 518,
|
||||
endX: 215,
|
||||
endY: 79,
|
||||
name: "enrollment_student_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
@ -415,15 +410,10 @@ export const template6 = {
|
||||
startFieldId: 1,
|
||||
endTableId: 1,
|
||||
endFieldId: 0,
|
||||
startX: 96,
|
||||
startY: 482,
|
||||
endX: 492,
|
||||
endY: 423,
|
||||
name: "enrollment_course_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
@ -431,15 +421,10 @@ export const template6 = {
|
||||
startFieldId: 4,
|
||||
endTableId: 4,
|
||||
endFieldId: 0,
|
||||
startX: 786,
|
||||
startY: 263,
|
||||
endX: 800,
|
||||
endY: 407,
|
||||
name: "instructors_dep_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
@ -447,15 +432,10 @@ export const template6 = {
|
||||
startFieldId: 2,
|
||||
endTableId: 4,
|
||||
endFieldId: 0,
|
||||
startX: 492,
|
||||
startY: 495,
|
||||
endX: 800,
|
||||
endY: 407,
|
||||
name: "courses_dep_id_fk",
|
||||
cardinality: "One to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
@ -463,15 +443,10 @@ export const template6 = {
|
||||
startFieldId: 7,
|
||||
endTableId: 5,
|
||||
endFieldId: 0,
|
||||
startX: 215,
|
||||
startY: 331,
|
||||
endX: 510,
|
||||
endY: 147,
|
||||
name: "students_major_id_fk",
|
||||
cardinality: "Many to one",
|
||||
updateConstraint: "No action",
|
||||
deleteConstraint: "No action",
|
||||
mandatory: false,
|
||||
id: 4,
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,110 +1,100 @@
|
||||
export function calcPath(x1, x2, y1, y2, zoom = 1) {
|
||||
const tableWidth = 200 * zoom;
|
||||
if (y1 <= y2) {
|
||||
if (x1 + tableWidth <= x2) {
|
||||
x2 -= 14;
|
||||
} else if (x2 <= x1 + tableWidth && x1 <= x2) {
|
||||
// x2-=14;
|
||||
// x1-=14;
|
||||
} else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
|
||||
x1 -= 14;
|
||||
x2 -= 14;
|
||||
} else {
|
||||
x2 -= 14;
|
||||
x1 -= 14;
|
||||
}
|
||||
} else {
|
||||
if (x1 + tableWidth <= x2) {
|
||||
x2 -= 14;
|
||||
} else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
|
||||
//
|
||||
x1 -= 14;
|
||||
x2 -= 14;
|
||||
} else if (x1 >= x2 && x1 <= x2 + tableWidth) {
|
||||
// x1-=19;
|
||||
// x2-=14;
|
||||
} else {
|
||||
x1 -= 14;
|
||||
x2 -= 14;
|
||||
}
|
||||
}
|
||||
x1 *= zoom;
|
||||
x2 *= zoom;
|
||||
y1 *= zoom;
|
||||
y2 *= zoom;
|
||||
import {
|
||||
tableFieldHeight,
|
||||
tableHeaderHeight,
|
||||
tableWidth,
|
||||
} from "../data/constants";
|
||||
|
||||
let r = 10 * zoom;
|
||||
const offsetX = 8 * zoom;
|
||||
const midX = (x2 + x1 + tableWidth) / 2;
|
||||
const endX = x2 + tableWidth < x1 ? x2 + tableWidth : x2;
|
||||
export function calcPath(r, zoom = 1) {
|
||||
const width = tableWidth * zoom;
|
||||
let x1 = r.startTable.x;
|
||||
let y1 =
|
||||
r.startTable.y +
|
||||
r.startFieldId * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableFieldHeight / 2;
|
||||
let x2 = r.endTable.x;
|
||||
let y2 =
|
||||
r.endTable.y +
|
||||
r.endFieldId * tableFieldHeight +
|
||||
tableHeaderHeight +
|
||||
tableFieldHeight / 2;
|
||||
|
||||
let radius = 10 * zoom;
|
||||
const midX = (x2 + x1 + width) / 2;
|
||||
const endX = x2 + width < x1 ? x2 + width : x2;
|
||||
|
||||
if (Math.abs(y1 - y2) <= 36 * zoom) {
|
||||
r = Math.abs(y2 - y1) / 3;
|
||||
if (r <= 2) {
|
||||
if (x1 + tableWidth <= x2)
|
||||
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2} ${y2 + 0.1}`;
|
||||
else if (x2 + tableWidth < x1)
|
||||
return `M ${x1} ${y1} L ${x2 + tableWidth} ${y2 + 0.1}`;
|
||||
radius = Math.abs(y2 - y1) / 3;
|
||||
if (radius <= 2) {
|
||||
if (x1 + width <= x2) return `M ${x1 + width} ${y1} L ${x2} ${y2 + 0.1}`;
|
||||
else if (x2 + width < x1)
|
||||
return `M ${x1} ${y1} L ${x2 + width} ${y2 + 0.1}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (y1 <= y2) {
|
||||
if (x1 + tableWidth <= x2) {
|
||||
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
|
||||
midX - r
|
||||
} ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${
|
||||
y2 - r
|
||||
} A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`;
|
||||
} else if (x2 <= x1 + tableWidth && x1 <= x2) {
|
||||
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
|
||||
x2 + tableWidth
|
||||
} ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${
|
||||
x2 + tableWidth + r
|
||||
} ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${
|
||||
x2 + tableWidth - 2 * offsetX
|
||||
} ${y2}`;
|
||||
} else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
|
||||
return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 0 ${x2 - r - r} ${
|
||||
y1 + r
|
||||
} L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${
|
||||
x2 - r
|
||||
if (x1 + width <= x2) {
|
||||
return `M ${x1 + width} ${y1} L ${
|
||||
midX - radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 1 ${midX} ${y1 + radius} L ${midX} ${
|
||||
y2 - radius
|
||||
} A ${radius} ${radius} 0 0 0 ${midX + radius} ${y2} L ${endX} ${y2}`;
|
||||
} else if (x2 <= x1 + width && x1 <= x2) {
|
||||
return `M ${x1 + width} ${y1} L ${
|
||||
x2 + width
|
||||
} ${y1} A ${radius} ${radius} 0 0 1 ${x2 + width + radius} ${
|
||||
y1 + radius
|
||||
} L ${x2 + width + radius} ${y2 - radius} A ${radius} ${radius} 0 0 1 ${
|
||||
x2 + width
|
||||
} ${y2} L ${x2 + width} ${y2}`;
|
||||
} else if (x2 + width >= x1 && x2 + width <= x1 + width) {
|
||||
return `M ${x1} ${y1} L ${
|
||||
x2 - radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 0 ${x2 - radius - radius} ${
|
||||
y1 + radius
|
||||
} L ${x2 - radius - radius} ${y2 - radius} A ${radius} ${radius} 0 0 0 ${
|
||||
x2 - radius
|
||||
} ${y2} L ${x2} ${y2}`;
|
||||
} else {
|
||||
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 0 ${midX} ${
|
||||
y1 + r
|
||||
} L ${midX} ${y2 - r} A ${r} ${r} 0 0 1 ${
|
||||
midX - r
|
||||
} ${y2} L ${endX} ${y2}`;
|
||||
return `M ${x1} ${y1} L ${
|
||||
midX + radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 0 ${midX} ${y1 + radius} L ${midX} ${
|
||||
y2 - radius
|
||||
} A ${radius} ${radius} 0 0 1 ${midX - radius} ${y2} L ${endX} ${y2}`;
|
||||
}
|
||||
} else {
|
||||
if (x1 + tableWidth <= x2) {
|
||||
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
|
||||
midX - r
|
||||
} ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${
|
||||
y2 + r
|
||||
} A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
|
||||
} else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
|
||||
return `M ${x1} ${y1} L ${x1 - r - r} ${y1} A ${r} ${r} 0 0 1 ${
|
||||
x1 - r - r - r
|
||||
} ${y1 - r} L ${x1 - r - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
|
||||
x1 - r - r
|
||||
if (x1 + width <= x2) {
|
||||
return `M ${x1 + width} ${y1} L ${
|
||||
midX - radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 0 ${midX} ${y1 - radius} L ${midX} ${
|
||||
y2 + radius
|
||||
} A ${radius} ${radius} 0 0 1 ${midX + radius} ${y2} L ${endX} ${y2}`;
|
||||
} else if (x1 + width >= x2 && x1 + width <= x2 + width) {
|
||||
return `M ${x1} ${y1} L ${
|
||||
x1 - radius - radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 1 ${x1 - radius - radius - radius} ${
|
||||
y1 - radius
|
||||
} L ${x1 - radius - radius - radius} ${
|
||||
y2 + radius
|
||||
} A ${radius} ${radius} 0 0 1 ${
|
||||
x1 - radius - radius
|
||||
} ${y2} L ${endX} ${y2}`;
|
||||
} else if (x1 >= x2 && x1 <= x2 + tableWidth) {
|
||||
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
|
||||
x1 + tableWidth - 2 * offsetX + r
|
||||
} ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${
|
||||
y1 - r
|
||||
} L ${x1 + tableWidth - 2 * offsetX + r + r} ${
|
||||
y2 + r
|
||||
} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r} ${y2} L ${
|
||||
x2 + tableWidth - 2 * offsetX
|
||||
} else if (x1 >= x2 && x1 <= x2 + width) {
|
||||
return `M ${x1 + width} ${y1} L ${
|
||||
x1 + width + radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 0 ${x1 + width + radius + radius} ${
|
||||
y1 - radius
|
||||
} L ${x1 + width + radius + radius} ${
|
||||
y2 + radius
|
||||
} A ${radius} ${radius} 0 0 0 ${x1 + width + radius} ${y2} L ${
|
||||
x2 + width
|
||||
} ${y2}`;
|
||||
} else {
|
||||
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 1 ${midX} ${
|
||||
y1 - r
|
||||
} L ${midX} ${y2 + r} A ${r} ${r} 0 0 0 ${
|
||||
midX - r
|
||||
} ${y2} L ${endX} ${y2}`;
|
||||
return `M ${x1} ${y1} L ${
|
||||
midX + radius
|
||||
} ${y1} A ${radius} ${radius} 0 0 1 ${midX} ${y1 - radius} L ${midX} ${
|
||||
y2 + radius
|
||||
} A ${radius} ${radius} 0 0 0 ${midX - radius} ${y2} L ${endX} ${y2}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user