From 9f3492dad0a37361ca796e8c4de2bfc32328b554 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 20 Mar 2022 20:38:03 +1100
Subject: Add animation on expand/collapse failure

---
 src/components/TileTree.vue | 56 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 13 deletions(-)

(limited to 'src/components/TileTree.vue')

diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index f0d8f07..85516c9 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -18,12 +18,12 @@ function preprocessTol(node: any): any {
 }
 const tol: TolNode = preprocessTol(tolRaw);
 
-// Configurable settings (integer values specify pixels)
+// Configurable settings
 let layoutOptions: LayoutOptions = {
-	tileSpacing: 8,
-	headerSz: 20,
-	minTileSz: 50,
-	maxTileSz: 200,
+	tileSpacing: 8, //px
+	headerSz: 20, //px
+	minTileSz: 50, //px
+	maxTileSz: 200, //px
 	layoutType: 'sweep', //'sqr' | 'rect' | 'sweep'
 	rectMode: 'auto', //'horz' | 'vert' | 'linear' | 'auto'
 	sweepMode: 'left', //'left' | 'top' | 'shorter' | 'auto'
@@ -63,18 +63,28 @@ export default defineComponent({
 				setTimeout(() => {this.resizeThrottled = false;}, otherOptions.resizeDelay);
 			}
 		},
-		onInnerLeafClicked(clickedNode: LayoutNode){
-			if (clickedNode.tolNode.children.length == 0){
-				console.log('Tile-to-expand has no children');
+		onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
+			if (layoutNode.tolNode.children.length == 0){
+				//console.log('Tile to expand has no children');
 				return;
 			}
-			if (!this.layoutTree.tryLayoutOnExpand([0,0], [this.width,this.height], clickedNode)){
-				console.log('Unable to layout tree');
+			let success = this.layoutTree.tryLayoutOnExpand([0,0], [this.width,this.height], layoutNode);
+			if (!success){
+				// Trigger failure animation
+				domNode.classList.remove('animate-expand-shrink');
+				domNode.offsetWidth; // Triggers reflow
+				domNode.classList.add('animate-expand-shrink');
+				//console.log('Unable to layout tree');
 			}
 		},
-		onInnerHeaderClicked(clickedNode: LayoutNode){
-			if (!this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], clickedNode)){
-				console.log('Unable to layout tree');
+		onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
+			let success = this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], layoutNode);
+			if (!success){
+				// Trigger failure animation
+				domNode.classList.remove('animate-expand-shrink');
+				domNode.offsetWidth; // Triggers reflow
+				domNode.classList.add('animate-expand-shrink');
+				//console.log('Unable to layout tree');
 			}
 		},
 	},
@@ -101,3 +111,23 @@ export default defineComponent({
 		@leaf-clicked="onInnerLeafClicked" @header-clicked="onInnerHeaderClicked"/>
 </div>
 </template>
+
+<style>
+.animate-expand-shrink {
+	animation-name: expand-shrink;
+	animation-duration: 300ms;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in-out;
+}
+@keyframes expand-shrink {
+	from {
+		transform: scale(1, 1);
+	}
+	50% {
+		transform: scale(1.1, 1.1);
+	}
+	to {
+		transform: scale(1, 1);
+	}
+}
+</style>
-- 
cgit v1.2.3