From 097e23dde42613a0430f85c087dee9377f2e91af Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 12 Mar 2022 14:02:05 +1100
Subject: Make basic conversion to typescript

---
 src/components/Tile.vue     | 18 ++++++++---------
 src/components/TileTree.vue | 47 +++++++++++++++++++++++++--------------------
 2 files changed, 35 insertions(+), 30 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index f485324..76d08a8 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,6 +1,9 @@
-<script>
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import {TreeNode} from '../layout';
+
 const TRANSITION_DURATION = 300;
-export default {
+export default defineComponent({
 	name: 'tile',
 	data(){
 		return {
@@ -10,7 +13,7 @@ export default {
 		}
 	},
 	props: {
-		tree: Object,
+		tree: {type: Object as PropType<TreeNode>, required:true},
 	},
 	computed: {
 		name(){return this.tree.tolNode.name.replaceAll('\'', '\\\'')}
@@ -23,7 +26,7 @@ export default {
 			this.overFlow = 'hidden';
 			setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
 		},
-		onInnerTileClicked(nodeList){
+		onInnerTileClicked(nodeList: TreeNode[]){
 			this.$emit('tile-clicked', [...nodeList, this.tree]);
 		},
 		onHeaderClick(){
@@ -33,11 +36,11 @@ export default {
 			this.overFlow = 'hidden';
 			setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
 		},
-		onInnerHeaderClicked(nodeList){
+		onInnerHeaderClicked(nodeList: TreeNode[]){
 			this.$emit('header-clicked', [...nodeList, this.tree]);
 		}
 	}
-}
+})
 </script>
 
 <template>
@@ -69,9 +72,6 @@ export default {
 				class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 				{{tree.tolNode.name}}
 			</div>
-			<tile v-for="child in tree.sideChildren" :key="'SIDE_' + child.tolNode.name" :tree="child"
-				@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
-				></tile>
 		</div>
 		<tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
 			@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 93de090..e8c0013 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -1,8 +1,16 @@
-<script>
+<script lang="ts">
+import {defineComponent} from 'vue';
 import Tile from './Tile.vue';
 
+import {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks} from '../layout';
+	//for importing f1.ts:
+		//using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain
+		//using 'import f1' might cause problems with build systems other than vite
+import type {TolNode, TreeNode, LayoutNode} from '../layout';
+let LAYOUT_FUNC = sweepToSideLayout;
+
 import tol from '../tol.json';
-function preprocessTol(tree){
+function preprocessTol(tree: any): void {
 	if (!tree.children){
 		tree.children = [];
 	} else {
@@ -10,33 +18,29 @@ function preprocessTol(tree){
 	}
 }
 preprocessTol(tol);
-//tol-node format: {name: string1, children: [node1, ...]}
 
-import {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks} from '../layout.js';
-let LAYOUT_FUNC = sweepToSideLayout;
-
-export default {
+export default defineComponent({
 	data(){
 		return {
-			tree: this.initTree(tol, 1),
+			tree: this.initTree(tol as TolNode, 1),
 			width: document.documentElement.clientWidth,
 			height: document.documentElement.clientHeight,
 			resizeThrottled: false,
 		}
 	},
 	methods: {
-		initTree(tol, lvl){
+		initTree(tol: TolNode, lvl: number): TreeNode {
 			let tree = {
 				tolNode:tol, children:[],
 				x:0, y:0, w:0, h:0, headerSz:0,
-				sideArea:null,
+				sideArea:null, tileCount:0,
 			};
-			function initTreeRec(tree, lvl){
+			function initTreeRec(tree: TreeNode, lvl: number){
 				if (lvl > 0)
-					tree.children = tree.tolNode.children.map(tNode => initTreeRec({
+					tree.children = tree.tolNode.children.map((tNode: TolNode) => initTreeRec({
 						tolNode: tNode, children: [],
 						x:0, y:0, w:0, h:0, headerSz:0,
-						sideArea:null,
+						sideArea:null, tileCount:0,
 					}, lvl-1));
 				return tree;
 			}
@@ -54,7 +58,7 @@ export default {
 				setTimeout(() => {this.resizeThrottled = false;}, 100);
 			}
 		},
-		onInnerTileClicked(nodeList){
+		onInnerTileClicked(nodeList: TreeNode[]){
 			//nodeList holds an array of tree-objects, from the clicked-on-tile's tree-object upward
 			let numNewTiles = nodeList[0].tolNode.children.length;
 			if (numNewTiles == 0){
@@ -62,16 +66,17 @@ export default {
 				return;
 			}
 			//add children
-			nodeList[0].children = nodeList[0].tolNode.children.map(tNode => ({
+			nodeList[0].children = nodeList[0].tolNode.children.map((tNode: TolNode) => ({
 				tolNode: tNode, children: [],
 				x:0, y:0, w:0, h:0, headerSz:0,
+				sideArea: null, tileCount:0,
 			}));
 			layoutInfoHooks.updateLayoutInfoOnExpand(nodeList);
 			//try to layout tree
 			if (!this.tryLayout())
 				nodeList[0].children = [];
 		},
-		onInnerHeaderClicked(nodeList){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward
+		onInnerHeaderClicked(nodeList: TreeNode[]){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward
 			let children = nodeList[0].children;
 			nodeList[0].children = [];
 			layoutInfoHooks.updateLayoutInfoOnCollapse(nodeList);
@@ -88,7 +93,7 @@ export default {
 				return true;
 			}
 		},
-		applyLayout(layout, tree){
+		applyLayout(layout: LayoutNode, tree: TreeNode){
 			tree.x = layout.x;
 			tree.y = layout.y;
 			tree.w = layout.w;
@@ -96,13 +101,13 @@ export default {
 			tree.headerSz = layout.headerSz;
 			layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
 			//handle case where leaf nodes placed in leftover space from parent-sweep
-			if (layout.sideArea){
+			if (layout.sideArea != null){
 				//add parent area coords
 				tree.sideArea = layout.sideArea;
 				//move leaf node children to parent area
 				tree.children.filter(n => n.children.length == 0).map(n => {
-					n.x += layout.sideArea.x;
-					n.y += layout.sideArea.y;
+					n.x += layout.sideArea!.x;
+					n.y += layout.sideArea!.y;
 				});
 			} else {
 				tree.sideArea = null;
@@ -119,7 +124,7 @@ export default {
 	components: {
 		Tile
 	}
-}
+})
 </script>
 
 <template>
-- 
cgit v1.2.3