Browse Source

chore(nc-gui): add transition to edge labels

pull/4289/head
braks 2 years ago
parent
commit
08b5defd42
  1. 6
      packages/nc-gui/components/erd/RelationEdge.vue

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

@ -92,7 +92,6 @@ export default {
<path class="opacity-0" :stroke-width="showSkeleton ? baseStroke * 12 : baseStroke * 8" fill="none" :d="edgePath[0]" /> <path class="opacity-0" :stroke-width="showSkeleton ? baseStroke * 12 : baseStroke * 8" fill="none" :d="edgePath[0]" />
<Transition name="layout">
<EdgeLabelRenderer> <EdgeLabelRenderer>
<div <div
:style="{ :style="{
@ -104,9 +103,9 @@ export default {
borderRadius: '0.25rem', borderRadius: '0.25rem',
padding: '0.25rem 0.5rem', padding: '0.25rem 0.5rem',
}" }"
class="nodrag nopan" class="nodrag nopan color-transition z-1000"
:class="[ :class="[
selected || isHovering ? 'opacity-100 z-1000' : 'opacity-0 !pointer-events-none', selected || isHovering ? 'opacity-100' : 'opacity-0 !pointer-events-none',
showSkeleton ? '!text-6xl' : '!text-xs', showSkeleton ? '!text-6xl' : '!text-xs',
`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`, `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
]" ]"
@ -114,7 +113,6 @@ export default {
{{ showSkeleton ? data.simpleLabel : data.label }} {{ showSkeleton ? data.simpleLabel : data.label }}
</div> </div>
</EdgeLabelRenderer> </EdgeLabelRenderer>
</Transition>
<template v-if="!showSkeleton"> <template v-if="!showSkeleton">
<rect <rect

Loading…
Cancel
Save