thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed grow animation not working on nodes disappearing

Browse source
This commit is contained in:
thepaperpilot 2021-08-26 00:28:03 -05:00
parent af57840dc6
commit 1709fe3079
2 changed files with 106 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/board/Board.vue
View file

@ -20,18 +20,20 @@
<BoardLink :link="link" /> <BoardLink :link="link" />
</g> </g>
</transition-group> </transition-group>
<BoardNode <transition-group name="grow" :duration="500" appear>
v-for="node in nodes" <g v-for="node in nodes" :key="node.id" style="transition-duration: 0s">
:key="node.id" <BoardNode
:node="node" :node="node"
:nodeType="board.types[node.type]" :nodeType="board.types[node.type]"
:dragging="draggingNode" :dragging="draggingNode"
:dragged="dragged" :dragged="dragged"
:hasDragged="hasDragged" :hasDragged="hasDragged"
:receivingNode="receivingNode?.id === node.id" :receivingNode="receivingNode?.id === node.id"
@mouseDown="mouseDown" @mouseDown="mouseDown"
@endDragging="endDragging" @endDragging="endDragging"
/> />
</g>
</transition-group>
</g> </g>
</svg> </svg>
</panZoom> </panZoom>

185
src/components/board/BoardNode.vue
View file

@ -44,97 +44,96 @@
</g> </g>
</transition> </transition>
<transition name="grow" appear> <g
<g class="node-container"
@mouseenter="mouseEnter" @mouseenter="mouseEnter"
@mouseleave="mouseLeave" @mouseleave="mouseLeave"
@mousedown="mouseDown" @mousedown="mouseDown"
@touchstart="mouseDown" @touchstart="mouseDown"
@mouseup="mouseUp" @mouseup="mouseUp"
@touchend="mouseUp" @touchend="mouseUp"
> >
<g v-if="shape === Shape.Circle"> <g v-if="shape === Shape.Circle">
<circle <circle
v-if="canAccept" v-if="canAccept"
:r="size + 8" :r="size + 8"
:fill="backgroundColor" :fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'" :stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2" :stroke-width="2"
/> />
<circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" /> <circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
<circle <circle
v-if="progressDisplay === ProgressDisplay.Fill" v-if="progressDisplay === ProgressDisplay.Fill"
:r="Math.max(size * progress - 2, 0)" :r="Math.max(size * progress - 2, 0)"
:fill="progressColor" :fill="progressColor"
/> />
<circle <circle
v-else v-else
:r="size + 4.5" :r="size + 4.5"
class="progressRing" class="progressRing"
fill="transparent" fill="transparent"
:stroke-dasharray="(size + 4.5) * 2 * Math.PI" :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
:stroke-width="5" :stroke-width="5"
:stroke-dashoffset=" :stroke-dashoffset="
(size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI (size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI
" "
:stroke="progressColor" :stroke="progressColor"
/> />
</g>
<g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
<rect
v-if="canAccept"
:width="size * sqrtTwo + 16"
:height="size * sqrtTwo + 16"
:transform="
`translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) /
2})`
"
:fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2"
/>
<rect
:width="size * sqrtTwo"
:height="size * sqrtTwo"
:transform="`translate(${(-size * sqrtTwo) / 2}, ${(-size * sqrtTwo) / 2})`"
:fill="fillColor"
:stroke="outlineColor"
:stroke-width="4"
/>
<rect
v-if="progressDisplay === ProgressDisplay.Fill"
:width="Math.max(size * sqrtTwo * progress - 2, 0)"
:height="Math.max(size * sqrtTwo * progress - 2, 0)"
:transform="
`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) /
2}, ${-Math.max(size * sqrtTwo * progress - 2, 0) / 2})`
"
:fill="progressColor"
/>
<rect
v-else
:width="size * sqrtTwo + 9"
:height="size * sqrtTwo + 9"
:transform="
`translate(${-(size * sqrtTwo + 9) / 2}, ${-(size * sqrtTwo + 9) / 2})`
"
fill="transparent"
:stroke-dasharray="(size * sqrtTwo + 9) * 4"
:stroke-width="5"
:stroke-dashoffset="
(size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4
"
:stroke="progressColor"
/>
</g>
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g> </g>
</transition> <g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
<rect
v-if="canAccept"
:width="size * sqrtTwo + 16"
:height="size * sqrtTwo + 16"
:transform="
`translate(${-(size * sqrtTwo + 16) / 2}, ${-(size * sqrtTwo + 16) /
2})`
"
:fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2"
/>
<rect
:width="size * sqrtTwo"
:height="size * sqrtTwo"
:transform="`translate(${(-size * sqrtTwo) / 2}, ${(-size * sqrtTwo) / 2})`"
:fill="fillColor"
:stroke="outlineColor"
:stroke-width="4"
/>
<rect
v-if="progressDisplay === ProgressDisplay.Fill"
:width="Math.max(size * sqrtTwo * progress - 2, 0)"
:height="Math.max(size * sqrtTwo * progress - 2, 0)"
:transform="
`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) /
2}, ${-Math.max(size * sqrtTwo * progress - 2, 0) / 2})`
"
:fill="progressColor"
/>
<rect
v-else
:width="size * sqrtTwo + 9"
:height="size * sqrtTwo + 9"
:transform="
`translate(${-(size * sqrtTwo + 9) / 2}, ${-(size * sqrtTwo + 9) / 2})`
"
fill="transparent"
:stroke-dasharray="(size * sqrtTwo + 9) * 4"
:stroke-width="5"
:stroke-dashoffset="
(size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4
"
:stroke="progressColor"
/>
</g>
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
<transition name="fade" appear> <transition name="fade" appear>
<text <text
@ -386,11 +385,6 @@ export default defineComponent({
opacity: 0.25; opacity: 0.25;
} }
} }
.grow-enter-from,
.fade-leave-to {
transform: scale(0);
}
</style> </style>
<style> <style>
@ -398,4 +392,9 @@ export default defineComponent({
.actions-leave-to .action { .actions-leave-to .action {
transform: translate(0, 0); transform: translate(0, 0);
} }
.grow-enter-from .node-container,
.grow-leave-to .node-container {
transform: scale(0);
}
</style> </style>