Enable auto-mode to trigger expand/collapse-fail animations

Done by sending a signal to a failed-operation's LayoutNode's Tile
component via a watched property on LayoutNode. Also added code to
prevent auto-mode from retrying a failed expand/collapse.

Not an ideal solution, but signalling via LayoutNode is more general, and
arguably cleaner, than the previous method of triggering fail animations
by getting Tile to pass a callback upward as event data.

1 files changed, 18 insertions, 10 deletions

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 99994d1..df124e9 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -120,6 +120,20 @@ export default defineComponent({
 				};
 			}
 		},
+		collapseFailFlag(){
+			return this.layoutNode.collapseFailFlag;
+		},
+		expandFailFlag(){
+			return this.layoutNode.expandFailFlag;
+		},
+	},
+	watch: {
+		expandFailFlag(newVal){
+			this.triggerAnimation('animate-expand-shrink');
+		},
+		collapseFailFlag(newVal){
+			this.triggerAnimation('animate-shrink-expand');
+		},
 	},
 	methods: {
 		// Leaf click handling
@@ -143,10 +157,7 @@ export default defineComponent({
 				return;
 			}
 			this.prepForTransition();
-			this.$emit('leaf-clicked', {
-				layoutNode: this.layoutNode,
-				failCallback: () => {this.triggerAnimation('animate-expand-shrink')}
-			});
+			this.$emit('leaf-clicked', this.layoutNode);
 		},
 		onLeafClickHold(){
 			if (!this.isExpandable){
@@ -174,10 +185,7 @@ export default defineComponent({
 		},
 		onHeaderClick(){
 			this.prepForTransition();
-			this.$emit('header-clicked', {
-				layoutNode: this.layoutNode,
-				failCallback: () => {this.triggerAnimation('animate-shrink-expand')}
-			});
+			this.$emit('header-clicked', this.layoutNode);
 		},
 		onHeaderClickHold(){
 			this.prepForTransition();
@@ -195,10 +203,10 @@ export default defineComponent({
 			this.nonLeafHighlight = false;
 		},
 		// Child event propagation
-		onInnerLeafClicked(data: {layoutNode: LayoutNode, failCallback: () => void}){
+		onInnerLeafClicked(data: LayoutNode){
 			this.$emit('leaf-clicked', data);
 		},
-		onInnerHeaderClicked(data: {layoutNode: LayoutNode, failCallback: () => void}){
+		onInnerHeaderClicked(data: LayoutNode){
 			this.$emit('header-clicked', data);
 		},
 		onInnerLeafClickHeld(data: LayoutNode){