aboutsummaryrefslogtreecommitdiff
path: root/src/components/TileTree.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/TileTree.vue')
-rw-r--r--src/components/TileTree.vue67
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>