diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 72 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 119 |
2 files changed, 114 insertions, 77 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue new file mode 100644 index 0000000..f5835c1 --- /dev/null +++ b/src/components/Tile.vue @@ -0,0 +1,72 @@ +<script> +import {defaultLayout} from './layout.js'; +export default { + name: 'tile', + data(){ + return { + zIdx: 0, + layoutSys: defaultLayout, + } + }, + props: { + tree: Object, + x: Number, + y: Number, + width: Number, + height: Number, + hideHeader: Boolean, + }, + computed: { + layout(){ + if (this.tree.children.length == 0) + return {}; + let hOffset = (this.hideHeader ? 0 : this.layoutSys.HEADER_SZ); + let x = 0, y = hOffset, w = this.width, h = this.height - hOffset; + return this.layoutSys.genLayout(this.tree.children, 0, hOffset, this.width, this.height - hOffset); + } + }, + methods: { + onImgClick(){ + this.$emit('tile-clicked', [this.tree]); + //increase z-index during transition + this.zIdx = 1; + setTimeout(() => this.zIdx = 0, 300); + }, + onInnerTileClicked(nodeList){ + this.$emit('tile-clicked', [...nodeList, this.tree]); + }, + onHeaderClick(){ + this.$emit('header-clicked', [this.tree]); + //increase z-index during transition + this.zIdx = 1; + setTimeout(() => this.zIdx = 0, 300); + }, + onInnerHeaderClicked(nodeList){ + this.$emit('header-clicked', [...nodeList, this.tree]); + } + } +} +</script> + +<template> +<div + :style="{position: 'absolute', left: x+'px', top: y+'px', width: width+'px', height: height+'px', zIndex: zIdx}" + class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white"> + <img v-if="tree.children.length == 0" + :src="'/src/assets/' + tree.tolNode.name + '.jpg'" :alt="tree.tolNode.name" + class="h-full hover:cursor-pointer" @click="onImgClick" + /> + <div v-else> + <div v-if="!hideHeader" :style="{height: this.layoutSys.HEADER_SZ + 'px'}" + class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick"> + {{tree.tolNode.name}} + </div> + <tile v-for="child in tree.children" :key="child.tolNode.name" :tree="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" + ></tile> + </div> +</div> +</template> + diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index d0c674e..9421052 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -1,101 +1,66 @@ <script> -import {defaultLayout} from './layout.js'; - -let lastChangedTile = null; //used to increase TileTree z-index during a transition -function updateZForTransition(tileTree){ - if (lastChangedTile !== null){ - lastChangedTile.zIdx = 0; - } - tileTree.zIdx = 1; - lastChangedTile = tileTree; -} +import tol from '../tol.json'; +import {defaultLayout, initTree} from './layout.js'; +import Tile from './Tile.vue'; export default { - name: 'tile-tree', data(){ return { - zIdx: 0, + tree: initTree(this.preprocessTol(tol), 1), + width: document.documentElement.clientWidth, + height: document.documentElement.clientHeight, layoutSys: defaultLayout, } }, - props: { - tree: Object, - x: Number, - y: Number, - width: Number, - height: Number, - isRoot: Boolean, - }, - computed: { - layout(){ - if (this.tree.children.length == 0) - return {}; - let hOffset = (this.isRoot ? 0 : this.layoutSys.HEADER_SZ); - let x = 0, y = hOffset, w = this.width, h = this.height - hOffset; - return this.layoutSys.genLayout(this.tree.children, 0, hOffset, this.width, this.height - hOffset); - } - }, methods: { - onImgClick(){ - if (!this.isRoot){ - this.$emit('tile-clicked', [this.tree]); + preprocessTol(tree){ + if (!tree.children){ + tree.children = []; } else { - this.onInnerTileClicked([this.tree]); + tree.children.forEach(this.preprocessTol); } - updateZForTransition(this); + return tree; + }, + onResize(){ + this.width = document.documentElement.clientWidth; + this.height = document.documentElement.clientHeight; }, onInnerTileClicked(nodeList){ - if (!this.isRoot){ - this.$emit('tile-clicked', [...nodeList, this.tree]); - } else { //nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object 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(e => ({ - tolNode: e, - children: [], - })); - this.layoutSys.updateLayoutInfoOnExpand(nodeList); + //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){ + console.log('Tile-to-expand has no children'); + return; } - }, - onHeaderClick(){ - this.$emit('header-clicked', [this.tree]); - updateZForTransition(this); + //add children + nodeList[0].children = nodeList[0].tolNode.children.map(e => ({ + tolNode: e, + children: [], + })); + this.layoutSys.updateLayoutInfoOnExpand(nodeList); }, onInnerHeaderClicked(nodeList){ - if (!this.isRoot){ - this.$emit('header-clicked', [...nodeList, this.tree]); - } else { //nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object upward - this.layoutSys.updateLayoutInfoOnCollapse(nodeList); - nodeList[0].children = []; - } - } + //nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object upward + this.layoutSys.updateLayoutInfoOnCollapse(nodeList); + nodeList[0].children = []; + }, + }, + created(){ + window.addEventListener('resize', this.onResize); + }, + unmounted(){ + window.removeEventListener('resize', this.onResize); + }, + components: { + Tile } } </script> <template> -<div - :style="{position: 'absolute', left: x+'px', top: y+'px', width: width+'px', height: height+'px', zIndex: zIdx}" - class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white"> - <img v-if="tree.children.length == 0" - :src="'/src/assets/' + tree.tolNode.name + '.jpg'" :alt="tree.tolNode.name" - class="h-full hover:cursor-pointer" @click="onImgClick" - /> - <div v-else> - <div v-if="!isRoot" :style="{height: this.layoutSys.HEADER_SZ + 'px'}" - 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" - :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" - ></tile-tree> - </div> +<div class="h-[100vh]"> + <tile :tree="tree" :x="0" :y="0" :width="width" :height="height" hideHeader + @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile> </div> </template> |