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 showSkeleton: boolean
markerEnd: string markerEnd: string
events: EdgeProps['events'] events: EdgeProps['events']
sourceNode: EdgeProps['sourceNode']
targetNode: EdgeProps['targetNode']
} }
const props = defineProps<RelationEdgeProps>() const props = defineProps<RelationEdgeProps>()
@ -119,7 +121,7 @@ export default {
:width="8" :width="8"
:height="8" :height="8"
fill="#fff" fill="#fff"
stroke="#6F3381" :stroke="sourceNode.data.color"
:stroke-width="2" :stroke-width="2"
:transform="`rotate(45,${sourceX + 2},${sourceY - 4})`" :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
/> />
@ -132,10 +134,19 @@ export default {
:width="8" :width="8"
:height="8" :height="8"
fill="#fff" fill="#fff"
stroke="#6F3381" :stroke="sourceNode.data.color"
:stroke-width="2" :stroke-width="2"
:transform="`rotate(45,${targetX + 2},${targetY - 4})`" :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>
</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) const node = elements.value.find((nodes) => nodes.id === el.source)
if (node) { if (node) {
const color = node.data!.color const color = node.data!.color
el.data.color = 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