From af57840dc6fd3ec2c5b37a24a3f9eff6dce87522 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Thu, 26 Aug 2021 00:13:42 -0500
Subject: [PATCH] Added animation to nodes appearing/disappearing
---
src/components/board/BoardNode.vue | 180 +++++++++++++++--------------
1 file changed, 91 insertions(+), 89 deletions(-)
diff --git a/src/components/board/BoardNode.vue b/src/components/board/BoardNode.vue
index 3ca807d..2bc3395 100644
--- a/src/components/board/BoardNode.vue
+++ b/src/components/board/BoardNode.vue
@@ -44,100 +44,97 @@
</g>
</transition>
- <g
- v-if="shape === Shape.Circle"
- @mouseenter="mouseEnter"
- @mouseleave="mouseLeave"
- @mousedown="mouseDown"
- @touchstart="mouseDown"
- @mouseup="mouseUp"
- @touchend="mouseUp"
- >
- <circle
- v-if="canAccept"
- :r="size + 8"
- :fill="backgroundColor"
- :stroke="receivingNode ? '#0F0' : '#0F03'"
- :stroke-width="2"
- />
+ <transition name="grow" appear>
+ <g
+ @mouseenter="mouseEnter"
+ @mouseleave="mouseLeave"
+ @mousedown="mouseDown"
+ @touchstart="mouseDown"
+ @mouseup="mouseUp"
+ @touchend="mouseUp"
+ >
+ <g v-if="shape === Shape.Circle">
+ <circle
+ v-if="canAccept"
+ :r="size + 8"
+ :fill="backgroundColor"
+ :stroke="receivingNode ? '#0F0' : '#0F03'"
+ :stroke-width="2"
+ />
- <circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
+ <circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
- <circle
- v-if="progressDisplay === ProgressDisplay.Fill"
- :r="Math.max(size * progress - 2, 0)"
- :fill="progressColor"
- />
- <circle
- v-else
- :r="size + 4.5"
- class="progressRing"
- fill="transparent"
- :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
- :stroke-width="5"
- :stroke-dashoffset="
- (size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI
- "
- :stroke="progressColor"
- />
- </g>
- <g
- v-else-if="shape === Shape.Diamond"
- transform="rotate(45, 0, 0)"
- @mouseenter="mouseEnter"
- @mouseleave="mouseLeave"
- @mousedown="mouseDown"
- @touchstart="mouseDown"
- @mouseup="mouseUp"
- @touchend="mouseUp"
- >
- <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"
- />
+ <circle
+ v-if="progressDisplay === ProgressDisplay.Fill"
+ :r="Math.max(size * progress - 2, 0)"
+ :fill="progressColor"
+ />
+ <circle
+ v-else
+ :r="size + 4.5"
+ class="progressRing"
+ fill="transparent"
+ :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
+ :stroke-width="5"
+ :stroke-dashoffset="
+ (size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI
+ "
+ :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
+ :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>
+ <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>
+ <text :fill="titleColor" class="node-title">{{ title }}</text>
+ </g>
+ </transition>
<transition name="fade" appear>
<text
@@ -389,6 +386,11 @@ export default defineComponent({
opacity: 0.25;
}
}
+
+.grow-enter-from,
+.fade-leave-to {
+ transform: scale(0);
+}
</style>
<style>