From 12a4c1fd39b12bda8d98d3a03ee3751c95b7a91c Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Fri, 24 Jun 2022 17:06:47 +1000 Subject: Account for potential lack of ancestry_bar/tut_pane transition-end event --- src/App.vue | 59 +++++++++++++++++++++++++++++------------------------------ 1 file changed, 29 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/App.vue b/src/App.vue index 22b1df3..b2cb8ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -300,12 +300,7 @@ export default defineComponent({ this.activeRoot = layoutNode; // Repeatedly relayout tiles during ancestry-bar transition this.ancestryBarInTransition = true; - let timerId = setInterval(() => { - this.updateAreaDims().then(() => this.relayoutWithCollapse()); - if (!this.ancestryBarInTransition){ - clearTimeout(timerId); - } - }, 100); + this.relayoutDuringAncestryBarTransition(); // return this.updateAreaDims().then(() => { this.overflownRoot = false; @@ -359,12 +354,7 @@ export default defineComponent({ this.activeRoot = layoutNode; // Repeatedly relayout tiles during ancestry-bar transition this.ancestryBarInTransition = true; - let timerId = setInterval(() => { - this.updateAreaDims().then(() => this.relayoutWithCollapse()); - if (!this.ancestryBarInTransition){ - clearTimeout(timerId); - } - }, 100); + this.relayoutDuringAncestryBarTransition(); // this.updateAreaDims().then(() => this.relayoutWithCollapse()); }, @@ -378,12 +368,7 @@ export default defineComponent({ this.overflownRoot = false; // Repeatedly relayout tiles during ancestry-bar transition this.ancestryBarInTransition = true; - let timerId = setInterval(() => { - this.updateAreaDims().then(() => this.relayoutWithCollapse()); - if (!this.ancestryBarInTransition){ - clearTimeout(timerId); - } - }, 100); + this.relayoutDuringAncestryBarTransition(); // if (alsoCollapse){ this.onNonleafClick(layoutNode, true); @@ -666,12 +651,7 @@ export default defineComponent({ this.tutorialOpen = true; // Repeatedly relayout tiles during tutorial-pane transition this.tutPaneInTransition = true; - let timerId = setInterval(() => { - this.updateAreaDims().then(() => this.relayoutWithCollapse()); - if (!this.tutPaneInTransition){ - clearTimeout(timerId); - } - }, 100); + this.relayoutDuringTutPaneTransition(); } }, onTutorialClose(){ @@ -680,12 +660,7 @@ export default defineComponent({ this.uiOpts.disabledActions.clear(); // Repeatedly relayout tiles during tutorial-pane transition this.tutPaneInTransition = true; - let timerId = setInterval(() => { - this.updateAreaDims().then(() => this.relayoutWithCollapse()); - if (!this.tutPaneInTransition){ - clearTimeout(timerId); - } - }, 100); + this.relayoutDuringTutPaneTransition(); }, onTutorialSkip(){ localStorage.setItem('ui tutorialSkip', String(true)); @@ -890,9 +865,33 @@ export default defineComponent({ ancestryBarTransitionEnd(){ this.ancestryBarInTransition = false; }, + relayoutDuringAncestryBarTransition(){ + let timerId = setInterval(() => { + this.updateAreaDims().then(() => this.relayoutWithCollapse()); + if (!this.ancestryBarInTransition){ + clearTimeout(timerId); + } + }, 100); + setTimeout(() => { + clearTimeout(timerId); + console.log('Reached timeout waiting for transition-end event'); + }, this.uiOpts.tileChgDuration * 3); + }, tutPaneTransitionEnd(){ this.tutPaneInTransition = false; }, + relayoutDuringTutPaneTransition(){ + let timerId = setInterval(() => { + this.updateAreaDims().then(() => this.relayoutWithCollapse()); + if (!this.tutPaneInTransition){ + clearTimeout(timerId); + } + }, 100); + setTimeout(() => { + clearTimeout(timerId); + console.log('Reached timeout waiting for transition-end event'); + }, this.uiOpts.tileChgDuration * 3); + }, }, created(){ window.addEventListener('resize', this.onResize); -- cgit v1.2.3