From 1709fe3079df41d7029d178b4cdac5d0a6920d16 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Thu, 26 Aug 2021 00:28:03 -0500
Subject: [PATCH] Fixed grow animation not working on nodes disappearing

---
 src/components/board/Board.vue     |  26 ++--
 src/components/board/BoardNode.vue | 185 ++++++++++++++---------------
 2 files changed, 106 insertions(+), 105 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index d01789e..5d60a07 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -20,18 +20,20 @@
                         <BoardLink :link="link" />
                     </g>
                 </transition-group>
-                <BoardNode
-                    v-for="node in nodes"
-                    :key="node.id"
-                    :node="node"
-                    :nodeType="board.types[node.type]"
-                    :dragging="draggingNode"
-                    :dragged="dragged"
-                    :hasDragged="hasDragged"
-                    :receivingNode="receivingNode?.id === node.id"
-                    @mouseDown="mouseDown"
-                    @endDragging="endDragging"
-                />
+                <transition-group name="grow" :duration="500" appear>
+                    <g v-for="node in nodes" :key="node.id" style="transition-duration: 0s">
+                        <BoardNode
+                            :node="node"
+                            :nodeType="board.types[node.type]"
+                            :dragging="draggingNode"
+                            :dragged="dragged"
+                            :hasDragged="hasDragged"
+                            :receivingNode="receivingNode?.id === node.id"
+                            @mouseDown="mouseDown"
+                            @endDragging="endDragging"
+                        />
+                    </g>
+                </transition-group>
             </g>
         </svg>
     </panZoom>
diff --git a/src/components/board/BoardNode.vue b/src/components/board/BoardNode.vue
index 2bc3395..e1baf43 100644
--- a/src/components/board/BoardNode.vue
+++ b/src/components/board/BoardNode.vue
@@ -44,97 +44,96 @@
             </g>
         </transition>
 
-        <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"
-                    />
+        <g
+            class="node-container"
+            @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)">
-                    <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>
+                <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>
-        </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>
             <text
@@ -386,11 +385,6 @@ export default defineComponent({
         opacity: 0.25;
     }
 }
-
-.grow-enter-from,
-.fade-leave-to {
-    transform: scale(0);
-}
 </style>
 
 <style>
@@ -398,4 +392,9 @@ export default defineComponent({
 .actions-leave-to .action {
     transform: translate(0, 0);
 }
+
+.grow-enter-from .node-container,
+.grow-leave-to .node-container {
+    transform: scale(0);
+}
 </style>