diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 18 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 47 |
2 files changed, 35 insertions, 30 deletions
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> |