diff options
| -rw-r--r-- | src/App.vue | 10 | ||||
| -rw-r--r-- | src/components/Tile.vue | 3 |
2 files changed, 10 insertions, 3 deletions
diff --git a/src/App.vue b/src/App.vue index e9db4c9..73671d5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -97,6 +97,7 @@ const defaultUiOpts = { export default defineComponent({ data(){ let layoutTree = initLayoutTree(initialTolMap, ROOT_NAME, 0); + layoutTree.hidden = true; return { tolMap: initialTolMap, layoutTree: layoutTree, @@ -127,6 +128,7 @@ export default defineComponent({ tileAreaDims: [0, 0] as [number, number], pendingResizeHdlr: 0, // Set to a setTimeout() value // Other + justInitialised: false, excessTolNodeThreshold: 1000, // Threshold where excess tolMap entries are removed (done on tile collapse) }; }, @@ -619,7 +621,11 @@ export default defineComponent({ this.layoutTree = initLayoutTree(this.tolMap, this.layoutTree.name, 0); this.activeRoot = this.layoutTree; this.layoutMap = initLayoutMap(this.layoutTree); - this.updateAreaDims().then(() => this.relayoutWithCollapse()); + this.updateAreaDims().then(() => { + this.relayoutWithCollapse(); + this.justInitialised = true; + setTimeout(() => {this.justInitialised = false;}, this.uiOpts.tileChgDuration); + }); }) .catch(error => { console.log('ERROR loading initial tolnode data', error); @@ -733,7 +739,7 @@ export default defineComponent({ @detached-ancestor-click="onDetachedAncestorClick" @info-icon-click="onInfoIconClick"/> <div class="relative m-[5px] grow" ref="tileArea"> <tile :layoutNode="layoutTree" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" - :overflownDim="overflownRoot ? mainAreaDims[1] : 0" + :overflownDim="overflownRoot ? mainAreaDims[1] : 0" :skipTransition="justInitialised" @leaf-click="onLeafClick" @nonleaf-click="onNonleafClick" @leaf-click-held="onLeafClickHeld" @nonleaf-click-held="onNonleafClickHeld" @info-icon-click="onInfoIconClick"/> diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 021db32..b53abee 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -16,6 +16,7 @@ export default defineComponent({ lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, uiOpts: {type: Object, required: true}, // Other + skipTransition: {type: Boolean, default: false}, nonAbsPos: {type: Boolean, default: false}, // For a leaf node, prevents usage of absolute positioning (used by AncestryBar) overflownDim: {type: Number, default: 0}, @@ -117,7 +118,7 @@ export default defineComponent({ boxShadow: this.boxShadow, borderRadius: this.uiOpts.borderRadius + 'px', // Transition related - transitionDuration: this.uiOpts.tileChgDuration + 'ms', + transitionDuration: (this.skipTransition ? 0 : this.uiOpts.tileChgDuration) + 'ms', transitionProperty: 'left, top, width, height, visibility', transitionTimingFunction: 'ease-out', zIndex: this.inTransition && this.wasClicked ? '1' : '0', |