From 86f1cb98bb9bf21ce94e8dc278a4c9287e950798 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 16 Mar 2022 19:38:41 +1100 Subject: Clean up .vue code, make root tile hide overflow --- src/components/Tile.vue | 191 +++++++++++++++++++++++++++++++------------- src/components/TileTree.vue | 71 +++++++++------- 2 files changed, 177 insertions(+), 85 deletions(-) (limited to 'src/components') diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 06d9899..57ba1e1 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -2,93 +2,176 @@ import {defineComponent, PropType} from 'vue'; import {LayoutNode} from '../lib'; +//component holds a tree-node structure representing a tile or tile-group to be rendered export default defineComponent({ - name: 'tile', - data(){ - return { - zIdx: 0, - overFlow: 'visible', - } - }, + name: 'tile', //need this to use self in template props: { layoutNode: {type: Object as PropType, required: true}, + isRoot: {type: Boolean, default: false}, + //settings passed in from parent component transitionDuration: {type: Number, required: true}, headerSz: {type: Number, required: true}, tileSpacing: {type: Number, required: true}, - center: {type: Array as unknown as PropType<[number,number]>, default: null}, + }, + data(){ + return { + //used during transitions and to emulate/show an apparently-joined div + zIdx: 0, + overflow: this.isRoot ? 'hidden' : 'visible', + } }, computed: { - name(){return this.layoutNode.tolNode.name.replaceAll('\'', '\\\'')} + showHeader(){ + return (this.layoutNode.showHeader && !this.layoutNode.sepSweptArea) || + (this.layoutNode.sepSweptArea && this.layoutNode.sepSweptArea.sweptLeft); + }, + tileStyles(): Record { + return { + //place using layoutNode, with centering if root + position: 'absolute', + top: this.isRoot ? '50%' : this.layoutNode.pos[1] + 'px', + left: this.isRoot ? '50%' : this.layoutNode.pos[0] + 'px', + transform: this.isRoot ? 'translate(-50%, -50%)' : 'none', + width: this.layoutNode.dims[0] + 'px', + height: this.layoutNode.dims[1] + 'px', + //other bindings + transitionDuration: this.transitionDuration + 'ms', + zIndex: String(this.zIdx), + overflow: String(this.overflow), + //static + outline: 'black solid 1px', + backgroundColor: 'white', + transitionProperty: 'top, left, width, height', + transitionTimingFunction: 'ease-out', + }; + }, + leafStyles(): Record { + return { + width: '100%', + height: '100%', + backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.jpg\')', + backgroundSize: 'cover', + opacity: (this.layoutNode.tolNode.children.length > 0) ? '1' : '0.7', + }; + }, + headerStyles(): Record { + return { + height: this.headerSz + 'px', + backgroundColor: 'lightgray', + textAlign: 'center', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }; + }, + sepSweptAreaStyles(): Record { + let commonStyles = { + position: 'absolute', + backgroundColor: 'white', + transitionDuration: this.transitionDuration + 'ms', + transitionProperty: 'top, left, width, height', + transitionTimingFunction: 'ease-out', + }; + let area = this.layoutNode.sepSweptArea; + if (area == null){ + return { + ...commonStyles, + visibility: 'hidden', + top: this.headerSz + 'px', + left: '0', + width: '0', + height: '0', + }; + } else { + return { + ...commonStyles, + top: area.pos[1] + 'px', + left: area.pos[0] + 'px', + width: (area.dims[0] + (area.sweptLeft ? 1 : 0)) + 'px', + height: (area.dims[1] + (area.sweptLeft ? 0 : 1)) + 'px', + }; + } + }, + sepSweptAreaOutlineClasses(){ + let area = this.layoutNode.sepSweptArea; + return ['outline-top-left', (area && area.sweptLeft) ? 'outline-bottom-left' : 'outline-top-right']; + }, }, methods: { - onImgClick(){ - this.$emit('tile-clicked', this.layoutNode); + onLeafClick(){ + this.$emit('leaf-clicked', this.layoutNode); //increase z-index and hide overflow during transition this.zIdx = 1; - this.overFlow = 'hidden'; - setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration); + this.overflow = 'hidden'; + setTimeout(() => {this.zIdx = 0; this.overflow = 'visible'}, this.transitionDuration); }, - onInnerTileClicked(node: LayoutNode){ - this.$emit('tile-clicked', node); + onInnerLeafClicked(node: LayoutNode){ + this.$emit('leaf-clicked', node); }, onHeaderClick(){ this.$emit('header-clicked', this.layoutNode); //increase z-index and hide overflow during transition this.zIdx = 1; - this.overFlow = 'hidden'; - setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration); + this.overflow = 'hidden'; + setTimeout(() => {this.zIdx = 0; this.overflow = 'visible'}, this.transitionDuration); }, onInnerHeaderClicked(node: LayoutNode){ this.$emit('header-clicked', node); - } - } -}) + }, + }, +}); + + diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 4969c2c..ab8ba1b 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -3,70 +3,79 @@ import {defineComponent} from 'vue'; import Tile from './Tile.vue'; import {TolNode, LayoutTree, LayoutNode} from '../lib'; import type {LayoutOptions} from '../lib'; -//regarding importing a file 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 paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain -import tol from '../tol.json'; -function preprocessTol(tree: any): void { - if (!tree.children){ - tree.children = []; +//obtain tree-of-life data +import tolRaw from '../tol.json'; +function preprocessTol(node: any): any { //adds 'children' fields if missing + if (node.children == null){ + node.children = []; } else { - tree.children.forEach(preprocessTol); + node.children.forEach(preprocessTol); } + return node; } -preprocessTol(tol); +const tol: TolNode = preprocessTol(tolRaw); -let defaultLayoutOptions: LayoutOptions = { +//configurable settings +let layoutOptions: LayoutOptions = { + //integer values specify pixels tileSpacing: 5, headerSz: 20, - minTileSz: 50, - maxTileSz: 200, - layoutType: 'sweep', //'sqr' | 'rect' | 'sweep' + minTileSz: 20, + maxTileSz: 500, + layoutType: 'sqr', //'sqr' | 'rect' | 'sweep' rectMode: 'auto', //'horz' | 'vert' | 'linear' | 'auto' - rectSpaceShifting: true, sweepMode: 'left', //'left' | 'top' | 'shorter' | 'auto' sweptNodesPrio: 'sqrt', //'linear' | 'sqrt' | 'sqrt-when-high' sweepingToParent: true, }; -let defaultOtherOptions = { +let otherOptions = { + //integer values specify milliseconds transitionDuration: 300, + resizeDelay: 100, //during window-resizing, relayout tiles after this delay instead of continously }; +//component holds a tree structure representing a subtree of 'tol' to be rendered +//collects events about tile expansion/collapse and window-resize, and initiates relayout of tiles export default defineComponent({ data(){ return { - layoutOptions: defaultLayoutOptions, - otherOptions: defaultOtherOptions, - layoutTree: new LayoutTree(tol as TolNode, 0, defaultLayoutOptions), + layoutTree: new LayoutTree(tol, layoutOptions, 0), width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, + layoutOptions: layoutOptions, + otherOptions: otherOptions, resizeThrottled: false, } }, methods: { onResize(){ if (!this.resizeThrottled){ + //update data and relayout tiles this.width = document.documentElement.clientWidth; this.height = document.documentElement.clientHeight; - if (!this.layoutTree.tryLayout([0,0], [this.width,this.height])) + if (!this.layoutTree.tryLayout([0,0], [this.width,this.height])){ console.log('Unable to layout tree'); + } //prevent re-triggering until after a delay this.resizeThrottled = true; - setTimeout(() => {this.resizeThrottled = false;}, 100); + setTimeout(() => {this.resizeThrottled = false;}, otherOptions.resizeDelay); } }, - onInnerTileClicked(node: LayoutNode){ - if (node.tolNode.children.length == 0){ + onInnerLeafClicked(clickedNode: LayoutNode){ + if (clickedNode.tolNode.children.length == 0){ console.log('Tile-to-expand has no children'); return; } - if (!this.layoutTree.tryLayoutOnExpand([0,0], [this.width,this.height], node)) + if (!this.layoutTree.tryLayoutOnExpand([0,0], [this.width,this.height], clickedNode)){ console.log('Unable to layout tree'); + } }, - onInnerHeaderClicked(node: LayoutNode){ - if (!this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], node)) + onInnerHeaderClicked(clickedNode: LayoutNode){ + if (!this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], clickedNode)){ console.log('Unable to layout tree'); + } }, }, created(){ @@ -78,16 +87,16 @@ export default defineComponent({ window.removeEventListener('resize', this.onResize); }, components: { - Tile - } -}) + Tile, + }, +}); -- cgit v1.2.3