diff options
Diffstat (limited to 'src/components/TileTree.vue')
| -rw-r--r-- | src/components/TileTree.vue | 67 |
1 files changed, 34 insertions, 33 deletions
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 24d0d84..e9c8c93 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -2,7 +2,7 @@ import {defineComponent} from 'vue'; import Tile from './Tile.vue'; -import {TolNode, TreeNode, LayoutNode} from '../types'; +import {TolNode, LayoutNode} from '../types'; import {genLayout, layoutInfoHooks} from '../layout'; //regarding importing a file f1.ts: //using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain @@ -21,24 +21,24 @@ preprocessTol(tol); export default defineComponent({ data(){ return { - tree: this.initTree(tol as TolNode, 1), + layoutTree: this.initLayoutTree(tol as TolNode, 1), width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, resizeThrottled: false, } }, methods: { - initTree(tol: TolNode, lvl: number): TreeNode { - let tree = new TreeNode(tol, []); - function initTreeRec(tree: TreeNode, lvl: number){ + initLayoutTree(tol: TolNode, lvl: number): LayoutNode { + let node = new LayoutNode(tol, []); + function initRec(node: LayoutNode, lvl: number){ if (lvl > 0) - tree.children = tree.tolNode.children.map( - (n: TolNode) => initTreeRec(new TreeNode(n, []), lvl-1)); - return tree; + node.children = node.tolNode.children.map( + (n: TolNode) => initRec(new LayoutNode(n, []), lvl-1)); + return node; } - initTreeRec(tree, lvl); - layoutInfoHooks.initLayoutInfo(tree) - return tree; + initRec(node, lvl); + layoutInfoHooks.initLayoutInfo(node) + return node; }, onResize(){ if (!this.resizeThrottled){ @@ -50,21 +50,22 @@ export default defineComponent({ setTimeout(() => {this.resizeThrottled = false;}, 100); } }, - onInnerTileClicked(nodeList: TreeNode[]){ - //nodeList holds an array of tree-objects, from the clicked-on-tile's tree-object upward + onInnerTileClicked(nodeList: LayoutNode[]){ + //nodeList is an array of layout-nodes, from the clicked-on-tile's node upward let numNewTiles = nodeList[0].tolNode.children.length; if (numNewTiles == 0){ console.log('Tile-to-expand has no children'); return; } //add children - nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new TreeNode(n, [])); + nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new LayoutNode(n, [])); layoutInfoHooks.updateLayoutInfoOnExpand(nodeList); - //try to layout tree + //try to re-layout if (!this.tryLayout()) nodeList[0].children = []; }, - onInnerHeaderClicked(nodeList: TreeNode[]){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward + onInnerHeaderClicked(nodeList: LayoutNode[]){ + //nodeList is an array of layout-nodes, from the clicked-on-tile's node upward let children = nodeList[0].children; nodeList[0].children = []; layoutInfoHooks.updateLayoutInfoOnCollapse(nodeList); @@ -72,33 +73,33 @@ export default defineComponent({ nodeList[0].children = children; }, tryLayout(){ - let layout = genLayout(this.tree, 0, 0, this.width, this.height, true); - if (layout == null){ + let newLayout = genLayout(this.layoutTree, 0, 0, this.width, this.height, true); + if (newLayout == null){ console.log('Unable to layout tree'); return false; } else { - this.applyLayout(layout, this.tree); + this.applyLayout(newLayout, this.layoutTree); return true; } }, - applyLayout(layout: LayoutNode, tree: TreeNode){ - tree.x = layout.x; - tree.y = layout.y; - tree.w = layout.w; - tree.h = layout.h; - tree.headerSz = layout.headerSz; - layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i])); + applyLayout(newLayout: LayoutNode, layoutTree: LayoutNode){ + layoutTree.x = newLayout.x; + layoutTree.y = newLayout.y; + layoutTree.w = newLayout.w; + layoutTree.h = newLayout.h; + layoutTree.headerSz = newLayout.headerSz; + newLayout.children.forEach((n,i) => this.applyLayout(n, layoutTree.children[i])); //handle case where leaf nodes placed in leftover space from parent-sweep - if (layout.sepSweptArea != null){ + if (newLayout.sepSweptArea != null){ //add parent area coords - tree.sepSweptArea = layout.sepSweptArea; + layoutTree.sepSweptArea = newLayout.sepSweptArea; //move leaf node children to parent area - tree.children.filter(n => n.children.length == 0).map(n => { - n.x += layout.sepSweptArea!.x; - n.y += layout.sepSweptArea!.y; + layoutTree.children.filter(n => n.children.length == 0).map(n => { + n.x += newLayout.sepSweptArea!.x; + n.y += newLayout.sepSweptArea!.y; }); } else { - tree.sepSweptArea = null; + layoutTree.sepSweptArea = null; } } }, @@ -117,7 +118,7 @@ export default defineComponent({ <template> <div class="h-[100vh]"> - <tile :tree="tree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile> + <tile :layoutNode="layoutTree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile> </div> </template> |
