mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-12-21 11:30:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust relationship edge offset when cardinality is visible (#973)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-11-04 11:51:06 +02:00
committed by GitHub
parent 69d4e8dca6
commit 0afa71efcc
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/editor-page/canvas/relationship-edge/relationship-edge.tsx
View File

@@ -8,6 +8,7 @@ import { useLayout } from '@/hooks/use-layout';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { getCardinalityMarkerId } from '../canvas-utils'; import { getCardinalityMarkerId } from '../canvas-utils';
import { useDiff } from '@/context/diff-context/use-diff'; import { useDiff } from '@/context/diff-context/use-diff';
import { useLocalConfig } from '@/hooks/use-local-config';
export type RelationshipEdgeType = Edge< export type RelationshipEdgeType = Edge<
{ {
@@ -35,6 +36,7 @@ export const RelationshipEdge: React.FC<EdgeProps<RelationshipEdgeType>> =
useLayout(); useLayout();
const { checkIfRelationshipRemoved, checkIfNewRelationship } = const { checkIfRelationshipRemoved, checkIfNewRelationship } =
useDiff(); useDiff();
const { showCardinality } = useLocalConfig();
const { relationships } = useChartDB(); const { relationships } = useChartDB();
@@ -144,7 +146,7 @@ export const RelationshipEdge: React.FC<EdgeProps<RelationshipEdgeType>> =
sourceSide === 'left' ? Position.Left : Position.Right, sourceSide === 'left' ? Position.Left : Position.Right,
targetPosition: targetPosition:
targetSide === 'left' ? Position.Left : Position.Right, targetSide === 'left' ? Position.Left : Position.Right,
offset: (edgeNumber + 1) * 14, offset: (edgeNumber + 1 + (showCardinality ? 1.5 : 0)) * 14,
}); });
return path; return path;
}, [ }, [
@@ -157,6 +159,7 @@ export const RelationshipEdge: React.FC<EdgeProps<RelationshipEdgeType>> =
sourceSide, sourceSide,
targetSide, targetSide,
edgeNumber, edgeNumber,
showCardinality,
]); ]);
const sourceMarker = useMemo( const sourceMarker = useMemo(