From 10e0e279cc631080b8b2fe2865bb810eb97689d2 Mon Sep 17 00:00:00 2001 From: 1ilit Date: Fri, 5 Apr 2024 03:02:29 +0300 Subject: [PATCH] Remove coords from relationship objects --- src/components/EditorCanvas/Canvas.jsx | 62 +++--- src/components/EditorCanvas/Relationship.jsx | 19 +- src/components/EditorCanvas/Table.jsx | 21 --- src/components/EditorHeader/ControlPanel.jsx | 48 ++--- .../EditorSidePanel/TablesOverview.jsx | 4 - src/components/SimpleCanvas.jsx | 64 ++----- .../{EditorHeader => }/Thumbnail.jsx | 46 ++--- src/context/TablesContext.jsx | 30 +-- src/data/constants.js | 3 + src/data/heroDiagram.js | 14 +- src/data/schemas.js | 10 - src/pages/Templates.jsx | 163 +--------------- src/templates/template1.js | 25 --- src/templates/template2.js | 20 -- src/templates/template3.js | 25 --- src/templates/template4.js | 20 -- src/templates/template5.js | 35 ---- src/templates/template6.js | 25 --- src/utils/calcPath.js | 176 +++++++++--------- 19 files changed, 206 insertions(+), 604 deletions(-) rename src/components/{EditorHeader => }/Thumbnail.jsx (85%) diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx index 7a4b2b1..0e2ba93 100644 --- a/src/components/EditorCanvas/Canvas.jsx +++ b/src/components/EditorCanvas/Canvas.jsx @@ -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 && ( diff --git a/src/components/EditorCanvas/Relationship.jsx b/src/components/EditorCanvas/Relationship.jsx index 60d51a7..6ebf835 100644 --- a/src/components/EditorCanvas/Relationship.jsx +++ b/src/components/EditorCanvas/Relationship.jsx @@ -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 }) { + /> + /> = 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({
setSelectedTemplateId(0)}>
- +
Blank
@@ -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" }`} > - +
{temp.title}
diff --git a/src/components/EditorSidePanel/TablesOverview.jsx b/src/components/EditorSidePanel/TablesOverview.jsx index 6d60055..14f2382 100644 --- a/src/components/EditorSidePanel/TablesOverview.jsx +++ b/src/components/EditorSidePanel/TablesOverview.jsx @@ -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; diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx index 8c8bfc5..2d374ac 100644 --- a/src/components/SimpleCanvas.jsx +++ b/src/components/SimpleCanvas.jsx @@ -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 }) { console.log(pathRef.current)}> {pathRef.current && ( <> - + {cardinalityStart} - + - 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) => ( - + {diagram.relationships.map((r, i) => ( + ))} {tables.map((t, i) => ( grabTable(e, i)} /> diff --git a/src/components/EditorHeader/Thumbnail.jsx b/src/components/Thumbnail.jsx similarity index 85% rename from src/components/EditorHeader/Thumbnail.jsx rename to src/components/Thumbnail.jsx index 318f0ac..b5093d5 100644 --- a/src/components/EditorHeader/Thumbnail.jsx +++ b/src/components/Thumbnail.jsx @@ -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 ( {diagram.subjectAreas?.map((a) => ( @@ -60,8 +58,28 @@ export function Thumbnail({ diagram, i, zoom }) { ))} + {diagram.relationships?.map((r, i) => ( + + ))} {diagram.tables?.map((table, i) => { - const height = table.fields.length * 36 + 50 + 7; + const height = + table.fields.length * tableFieldHeight + tableHeaderHeight + 7; return ( ); })} - {diagram.relationships?.map((e, i) => ( - - ))} {diagram.notes?.map((n) => { const x = n.x; const y = n.y; diff --git a/src/context/TablesContext.jsx b/src/context/TablesContext.jsx index 2607819..235f81c 100644 --- a/src/context/TablesContext.jsx +++ b/src/context/TablesContext.jsx @@ -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) => [ diff --git a/src/data/constants.js b/src/data/constants.js index 8386d3a..b42947b 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -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", diff --git a/src/data/heroDiagram.js b/src/data/heroDiagram.js index 8d2268a..beba094 100644 --- a/src/data/heroDiagram.js +++ b/src/data/heroDiagram.js @@ -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", }, ], -}; \ No newline at end of file +}; diff --git a/src/data/schemas.js b/src/data/schemas.js index f70087d..eab9578 100644 --- a/src/data/schemas.js +++ b/src/data/schemas.js @@ -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", ], }, diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx index d70097b..8d615d8 100644 --- a/src/pages/Templates.jsx +++ b/src/pages/Templates.jsx @@ -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" > - +
+ +
@@ -187,155 +194,3 @@ export default function Templates() {
); } - -function Thumbnail({ diagram, i }) { - const zoom = 0.3; - return ( -
- - - - - - - - - {diagram.subjectAreas?.map((a) => ( - 0 ? a.width * zoom : 0} - height={a.height > 0 ? a.height * zoom : 0} - > -
-
-
-
- {a.name} -
- - ))} - {diagram.tables?.map((table, i) => { - const height = table.fields.length * 36 + 50 + 7; - return ( - -
-
-
-
- {table.name} -
- {table.fields.map((f, j) => ( -
-
-
-
{f.name}
-
-
{f.type}
-
- ))} -
-
- - ); - })} - {diagram.relationships?.map((e, i) => ( - - ))} - {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 ( - - - - -
- -
{n.content}
-
- - - ); - })} - - -
- ); -} diff --git a/src/templates/template1.js b/src/templates/template1.js index 6069546..fd4948d 100644 --- a/src/templates/template1.js +++ b/src/templates/template1.js @@ -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, }, ], diff --git a/src/templates/template2.js b/src/templates/template2.js index 91a040e..89014bc 100644 --- a/src/templates/template2.js +++ b/src/templates/template2.js @@ -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, }, ], diff --git a/src/templates/template3.js b/src/templates/template3.js index 9734c22..a3d30f4 100644 --- a/src/templates/template3.js +++ b/src/templates/template3.js @@ -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, }, ], diff --git a/src/templates/template4.js b/src/templates/template4.js index 7290859..997c277 100644 --- a/src/templates/template4.js +++ b/src/templates/template4.js @@ -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, }, ], diff --git a/src/templates/template5.js b/src/templates/template5.js index d0b7c5d..2dbe15d 100644 --- a/src/templates/template5.js +++ b/src/templates/template5.js @@ -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, }, ], diff --git a/src/templates/template6.js b/src/templates/template6.js index 046cd6b..251fd47 100644 --- a/src/templates/template6.js +++ b/src/templates/template6.js @@ -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, }, ], diff --git a/src/utils/calcPath.js b/src/utils/calcPath.js index 88f5481..50616d3 100644 --- a/src/utils/calcPath.js +++ b/src/utils/calcPath.js @@ -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}`; } } }