From 4cfffc056d34323ca49038591ed50dbdcfc71a3e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 23 Mar 2022 09:28:14 +1100
Subject: Move resize-handling and tile-tree positioning to App.vue

---
 src/App.vue                 | 48 ++++++++++++++++++++++++++++++++++++---
 src/components/TileTree.vue | 55 +++++++++++++++++++++++----------------------
 2 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cf6dd75..7df0803 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,58 @@
 <script lang="ts">
 import {defineComponent} from 'vue';
 import TileTree from './components/TileTree.vue';
+
+
 export default defineComponent({
+	data(){
+		return {
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight,
+			tileTreeOffset: 5, // For space between tile-tree and display boundary
+			// For window-resize-handler throttling
+			resizeThrottled: false,
+			resizeDelay: 50, //ms
+		}
+	},
+	computed: {
+		styles(){
+			return {
+				position: 'absolute',
+				left: '0',
+				top: '0',
+				width: this.width + 'px',
+				height: this.height + 'px',
+				backgroundColor: 'black',
+			};
+		}
+	},
+	methods: {
+		onResize(){
+			if (!this.resizeThrottled){
+				this.width = document.documentElement.clientWidth;
+				this.height = document.documentElement.clientHeight;
+				// Prevent re-triggering until after a delay
+				this.resizeThrottled = true;
+				setTimeout(() => {this.resizeThrottled = false;}, this.resizeDelay);
+			}
+		},
+	},
+	created(){
+		window.addEventListener('resize', this.onResize);
+	},
+	unmounted(){
+		window.removeEventListener('resize', this.onResize);
+	},
 	components: {
 		TileTree
-	}
+	},
 })
 </script>
 
 <template>
-<div>
-	<tile-tree></tile-tree>
+<div :style="styles">
+	<tile-tree :pos="[tileTreeOffset, tileTreeOffset]"
+		:dims="[width - tileTreeOffset*2, height - tileTreeOffset*2]"/>
 </div>
 </template>
 
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 6c63f4f..3b74ddf 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import Tile from './Tile.vue';
 import {TolNode, LayoutNode, initLayoutTree, tryLayout} from '../lib';
 import type {LayoutOptions} from '../lib';
@@ -31,14 +31,16 @@ const defaultLayoutOptions: LayoutOptions = {
 	sweepingToParent: true,
 };
 const defaultOtherOptions = {
-	rootOffset: 5, //px (min offset of root tile from display area boundary)
 	transitionDuration: 300, //ms
-	resizeDelay: 100, //ms (delay for non-continous relayout during window-resizing)
 };
 
 // Component holds a tree structure representing a subtree of 'tol' to be rendered
 // Collects events about tile expansion/collapse and window-resize, and initiates relayout of tiles
 export default defineComponent({
+	props: {
+		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
+		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
+	},
 	data(){
 		let layoutTree = initLayoutTree(tol, 0);
 		return {
@@ -46,25 +48,28 @@ export default defineComponent({
 			activeRoot: layoutTree,
 			layoutOptions: {...defaultLayoutOptions},
 			otherOptions: {...defaultOtherOptions},
-			width: document.documentElement.clientWidth - (defaultOtherOptions.rootOffset * 2),
-			height: document.documentElement.clientHeight - (defaultOtherOptions.rootOffset * 2),
-			resizeThrottled: false,
 		}
 	},
-	methods: {
-		onResize(){
-			if (!this.resizeThrottled){
-				// Update data and relayout tiles
-				this.width = document.documentElement.clientWidth - (this.otherOptions.rootOffset * 2);
-				this.height = document.documentElement.clientHeight - (this.otherOptions.rootOffset * 2);
-				tryLayout(this.activeRoot, [0,0], [this.width,this.height], this.layoutOptions, true);
-				// Prevent re-triggering until after a delay
-				this.resizeThrottled = true;
-				setTimeout(() => {this.resizeThrottled = false;}, this.otherOptions.resizeDelay);
-			}
+	watch: {
+		dims(newDims){
+			tryLayout(this.activeRoot, [0,0], newDims, this.layoutOptions, true);
+		},
+	},
+	computed: {
+		styles(){
+			return {
+				position: 'absolute',
+				left: this.pos[0] + 'px',
+				top: this.pos[1] + 'px',
+				width: this.dims[0] + 'px',
+				height: this.dims[1] + 'px',
+				backgroundColor: '#292524',
+			};
 		},
+	},
+	methods: {
 		onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
-			let success = tryLayout(this.activeRoot, [0,0], [this.width,this.height], this.layoutOptions, false,
+			let success = tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, false,
 				{type: 'expand', node: layoutNode});
 			if (!success){
 				// Trigger failure animation
@@ -74,7 +79,7 @@ export default defineComponent({
 			}
 		},
 		onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode: HTMLElement}){
-			let success = tryLayout(this.activeRoot, [0,0], [this.width,this.height], this.layoutOptions, false,
+			let success = tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, false,
 				{type: 'collapse', node: layoutNode});
 			if (!success){
 				// Trigger failure animation
@@ -90,7 +95,7 @@ export default defineComponent({
 			}
 			LayoutNode.hideUpward(layoutNode);
 			this.activeRoot = layoutNode;
-			tryLayout(layoutNode, [0,0], [this.width,this.height], this.layoutOptions, true,
+			tryLayout(layoutNode, [0,0], this.dims, this.layoutOptions, true,
 				{type: 'expand', node: layoutNode});
 		},
 		onInnerHeaderDblClicked(layoutNode: LayoutNode){
@@ -100,15 +105,11 @@ export default defineComponent({
 			}
 			LayoutNode.hideUpward(layoutNode);
 			this.activeRoot = layoutNode;
-			tryLayout(layoutNode, [0,0], [this.width,this.height], this.layoutOptions, true);
+			tryLayout(layoutNode, [0,0], this.dims, this.layoutOptions, true);
 		},
 	},
 	created(){
-		window.addEventListener('resize', this.onResize);
-		tryLayout(this.activeRoot, [0,0], [this.width,this.height], this.layoutOptions, true);
-	},
-	unmounted(){
-		window.removeEventListener('resize', this.onResize);
+		tryLayout(this.activeRoot, [0,0], this.dims, this.layoutOptions, true);
 	},
 	components: {
 		Tile,
@@ -117,7 +118,7 @@ export default defineComponent({
 </script>
 
 <template>
-<div class="h-screen bg-stone-800">
+<div :style="styles">
 	<tile :layoutNode="layoutTree"
 		:headerSz="layoutOptions.headerSz" :tileSpacing="layoutOptions.tileSpacing"
 		:transitionDuration="otherOptions.transitionDuration"
-- 
cgit v1.2.3