diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 16 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 26 |
2 files changed, 23 insertions, 19 deletions
diff --git a/src/App.vue b/src/App.vue index 5e7f904..08b442c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,7 +13,7 @@ import TileTree from "./components/TileTree.vue"; export default { data() { return { - tree: this.genTreeForTol(tol, 1), //allow for zero-level? + tree: {tolNode: tol, children: []}, width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, } @@ -23,18 +23,6 @@ export default { this.width = document.documentElement.clientWidth; this.height = document.documentElement.clientHeight; }, - genTreeForTol(tol, lvl){ - if (lvl == 0){ - return {tolNode: tol, children: [], tileCount: 1}; - } else { - let childTrees = tol.children.map(e => this.genTreeForTol(e, lvl-1)); - return { - tolNode: tol, - children: childTrees, - tileCount: (childTrees.length == 0) ? 1 : childTrees.map(e => e.tileCount).reduce((x,y) => x+y) - }; - } - } }, created(){ window.addEventListener('resize', this.onResize); @@ -50,7 +38,7 @@ export default { <template> <div class="h-[100vh]"> - <tile-tree :tree="tree" :x="0" :y="0" :width="width" :height="height" isRoot></tile-tree> + <tile-tree :treeIn="tree" :x="0" :y="0" :width="width" :height="height" isRoot></tile-tree> </div> </template> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 4c3b34d..6c2a10c 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -5,10 +5,11 @@ export default { return { TILE_SPACING: 5, HEADER_SZ: 20, + tree: this.expandTree(this.treeIn, this.isRoot ? 1 : 0), } }, props: { - tree: Object, + treeIn: Object, x: Number, y: Number, width: Number, @@ -27,6 +28,19 @@ export default { } }, methods: { + expandTree(tree, lvl){ + if (lvl == 0){ + return tree; + } else { + let childTrees = tree.tolNode.children.map(e => + this.expandTree({tolNode: e, children: [], tileCount: 1}, lvl-1)); + return { + tolNode: tree, + children: childTrees, + tileCount: (childTrees.length == 0) ? 1 : childTrees.map(e => e.tileCount).reduce((x,y) => x+y) + }; + } + }, //determines layout for squares in a specified rectangle, with spacing basicSquaresLayout(nodes, x0, y0, w, h){ //get number-of-columns with highest occupied-fraction of rectangles with aspect-ratio w/h @@ -129,7 +143,11 @@ export default { } }, onImgClick(){ - this.$emit('tile-clicked', [this.tree]); + if (!this.isRoot){ + this.$emit('tile-clicked', [this.tree]); + } else { + this.onInnerTileClicked([this.tree]); + } }, onInnerTileClicked(nodeList){ if (!this.isRoot){ @@ -151,7 +169,6 @@ export default { for (let i = 1; i < nodeList.length; i++){ nodeList[i].tileCount += numNewTiles; } - this.tree.tileCount += numNewTiles; //redundant? } }, onHeaderClick(){ @@ -169,7 +186,6 @@ export default { for (let i = 1; i < nodeList.length; i++){ nodeList[i].tileCount -= tc - 1; } - this.tree.tileCount -= tc - 1; //redundant? } } } @@ -188,7 +204,7 @@ export default { class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick"> {{tree.tolNode.name}} </div> - <tile-tree v-for="child in tree.children" :key="child.tolNode.name" :tree="child" + <tile-tree v-for="child in tree.children" :key="child.tolNode.name" :treeIn="child" :x="layout[child.tolNode.name].x" :y="layout[child.tolNode.name].y" :width="layout[child.tolNode.name].w" :height="layout[child.tolNode.name].h" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked" |