Add onSuccess/onFail/onEnd callbacks for Tile click eventstest-tile-event-callbacks

1 files changed, 26 insertions, 23 deletions

diff --git a/src/App.vue b/src/App.vue
index cd6731a..3b907d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -182,48 +182,51 @@ export default defineComponent({
 			}
 		},
 		// For tile expand/collapse events
-		onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode?: HTMLElement}){
+		onInnerLeafClicked({layoutNode, onSuccess, onFail}: {layoutNode: LayoutNode, onSuccess?: () => void, onFail?: () => void}){
 			let success = tryLayout(this.activeRoot, this.layoutMap,
 				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'expand', node: layoutNode});
-			if (!success && domNode != null){
-				// Trigger failure animation
-				domNode.classList.remove('animate-expand-shrink');
-				domNode.offsetWidth; // Triggers reflow
-				domNode.classList.add('animate-expand-shrink');
+			if (success && onSuccess != null){
+				onSuccess();
+			}
+			if (!success && onFail != null){
+				onFail();
 			}
 			return success;
 		},
-		onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode?: HTMLElement}){
+		onInnerHeaderClicked({layoutNode, onSuccess, onFail}: {layoutNode: LayoutNode, onSuccess?: () => void, onFail?: () => void}){
 			let oldChildren = layoutNode.children;
 			let success = tryLayout(this.activeRoot, this.layoutMap,
 				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'collapse', node: layoutNode});
-			if (!success && domNode != null){
-				// Trigger failure animation
-				domNode.classList.remove('animate-shrink-expand');
-				domNode.offsetWidth; // Triggers reflow
-				domNode.classList.add('animate-shrink-expand');
+			if (success && onSuccess != null){
+				onSuccess();
+			}
+			if (!success && onFail != null){
+				onFail();
 			}
 			return success;
 		},
 		// For expand-to-view events
-		onInnerLeafClickHeld(layoutNode: LayoutNode){
+		onInnerLeafClickHeld({layoutNode, onEnd}: {layoutNode: LayoutNode, onEnd: () => void}){
 			if (layoutNode == this.activeRoot){
 				console.log('Ignored expand-to-view on root node');
-				return;
+			} else {
+				LayoutNode.hideUpward(layoutNode);
+				this.activeRoot = layoutNode;
+				tryLayout(this.activeRoot, this.layoutMap,
+					this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode});
 			}
-			LayoutNode.hideUpward(layoutNode);
-			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap,
-				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode});
+			onEnd();
 		},
-		onInnerHeaderClickHeld(layoutNode: LayoutNode){
+		onInnerHeaderClickHeld({layoutNode, onEnd}: {layoutNode: LayoutNode, onEnd: () => void}){
 			if (layoutNode == this.activeRoot){
 				console.log('Ignored expand-to-view on active-root node');
-				return;
+			} else {
+				LayoutNode.hideUpward(layoutNode);
+				this.activeRoot = layoutNode;
+				tryLayout(this.activeRoot, this.layoutMap,
+					this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
 			}
-			LayoutNode.hideUpward(layoutNode);
-			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+			onEnd();
 		},
 		onSepdParentClicked(layoutNode: LayoutNode){
 			LayoutNode.showDownward(layoutNode);