Browse Source

chore(nc-gui): marker color

pull/4071/head
braks 2 years ago
parent
commit
e28a7b4e74
  1. 17
      packages/nc-gui/components/erd/RelationEdge.vue
  2. 3
      packages/nc-gui/components/erd/utils.ts

17
packages/nc-gui/components/erd/RelationEdge.vue

@ -19,6 +19,8 @@ interface RelationEdgeProps extends EdgeProps<EdgeData> {
showSkeleton: boolean
markerEnd: string
events: EdgeProps['events']
sourceNode: EdgeProps['sourceNode']
targetNode: EdgeProps['targetNode']
}
const props = defineProps<RelationEdgeProps>()
@ -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})`"
/>
<circle v-else class="nc-erd-edge-circle" :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="2" />
<circle
v-else
class="nc-erd-edge-circle"
:cx="targetX"
:cy="targetY"
fill="#fff"
:r="5"
:stroke="targetNode.data.color"
:stroke-width="2"
/>
</template>
</template>

3
packages/nc-gui/components/erd/utils.ts

@ -296,8 +296,9 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ER
const node = elements.value.find((nodes) => 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()}`
}
}
})

Loading…
Cancel
Save