diff --git a/app/src/ui/components/canvas/layouts/index.ts b/app/src/ui/components/canvas/layouts/index.ts index 761aaee..c0b3c1c 100644 --- a/app/src/ui/components/canvas/layouts/index.ts +++ b/app/src/ui/components/canvas/layouts/index.ts @@ -25,12 +25,6 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => { const dagreGraph = new Dagre.graphlib.Graph(); dagreGraph.setDefaultEdgeLabel(() => ({})); dagreGraph.setGraph(graph || {}); - /*dagreGraph.setGraph({ - rankdir: "LR", - align: "UR", - nodesep: NODE_SEP, - ranksep: RANK_SEP - });*/ nodes.forEach((node) => { dagreGraph.setNode(node.id, { @@ -48,7 +42,11 @@ export const layoutWithDagre = ({ nodes, edges, graph }: LayoutProps) => { return { nodes: nodes.map((node) => { const position = dagreGraph.node(node.id); - return { ...node, x: position.x, y: position.y }; + return { + ...node, + x: position.x - (node.width ?? 0) / 2, + y: position.y - (node.height ?? 0) / 2 + }; }), edges }; diff --git a/app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx b/app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx index 7d055cf..cc893e6 100644 --- a/app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx +++ b/app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx @@ -69,15 +69,13 @@ export function DataSchemaCanvas() { const nodeLayout = layoutWithDagre({ nodes: nodes.map((n) => ({ id: n.id, - ...EntityTableNode.getSize(n) + ...EntityTableNode.getSize(n.data) })), edges, graph: { rankdir: "LR", - //align: "UR", - ranker: "network-simplex", - nodesep: 350, - ranksep: 50 + marginx: 50, + marginy: 50 } }); @@ -88,12 +86,6 @@ export function DataSchemaCanvas() { } }); - /*const _edges = edges.map((e) => ({ - ...e, - source: e.source + `-${e.target}_id`, - target: e.target + "-id" - }));*/ - return (