diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue index c7a533180f..413049b4cb 100644 --- a/packages/nc-gui/components/erd/RelationEdge.vue +++ b/packages/nc-gui/components/erd/RelationEdge.vue @@ -19,6 +19,8 @@ interface RelationEdgeProps extends EdgeProps { showSkeleton: boolean markerEnd: string events: EdgeProps['events'] + sourceNode: EdgeProps['sourceNode'] + targetNode: EdgeProps['targetNode'] } const props = defineProps() @@ -119,7 +121,7 @@ export default { :width="8" :height="8" fill="#fff" - stroke="#6F3381" + :stroke="sourceNode.data.color" :stroke-width="2" :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`" /> @@ -132,10 +134,19 @@ export default { :width="8" :height="8" fill="#fff" - stroke="#6F3381" + :stroke="sourceNode.data.color" :stroke-width="2" :transform="`rotate(45,${targetX + 2},${targetY - 4})`" /> - + diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts index 68eb76464a..0b5ad04703 100644 --- a/packages/nc-gui/components/erd/utils.ts +++ b/packages/nc-gui/components/erd/utils.ts @@ -296,8 +296,9 @@ export function useErdElements(tables: MaybeRef, props: MaybeRef nodes.id === el.source) if (node) { const color = node.data!.color + el.data.color = color - ;(el.markerEnd as EdgeMarker).color = skeleton ? `#${tinycolor(color).toHex()}` : undefined + ;(el.markerEnd as EdgeMarker).color = `#${tinycolor(color).toHex()}` } } })