diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 38 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 3 |
2 files changed, 30 insertions, 11 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 73a818a..15b1b48 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -425,17 +425,34 @@ export default defineComponent({ // Click handling onMouseDown(): void { this.highlight = false; - clearTimeout(this.clickHoldTimer); - this.clickHoldTimer = setTimeout(() => { - this.clickHoldTimer = 0; - this.onClickHold(); - }, this.uiOpts.clickHoldDuration); + if (!this.uiOpts.useDblClick){ + // Wait for a mouseup or click-hold + clearTimeout(this.clickHoldTimer); + this.clickHoldTimer = setTimeout(() => { + this.clickHoldTimer = 0; + this.onClickHold(); + }, this.uiOpts.clickHoldDuration); + } else { + // Wait for or recognise a double-click + if (this.clickHoldTimer == 0){ + this.clickHoldTimer = setTimeout(() => { + this.clickHoldTimer = 0; + this.onClick(); + }, this.uiOpts.clickHoldDuration); + } else { + clearTimeout(this.clickHoldTimer) + this.clickHoldTimer = 0; + this.onDblClick(); + } + } }, onMouseUp(): void { - if (this.clickHoldTimer > 0){ - clearTimeout(this.clickHoldTimer); - this.clickHoldTimer = 0; - this.onClick(); + if (!this.uiOpts.useDblClick){ + if (this.clickHoldTimer > 0){ + clearTimeout(this.clickHoldTimer); + this.clickHoldTimer = 0; + this.onClick(); + } } }, onClick(): void { @@ -453,6 +470,9 @@ export default defineComponent({ } this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode); }, + onDblClick(): void { + this.onClickHold(); + }, onInfoIconClick(evt: Event): void { this.$emit('info-click', this.layoutNode.name); }, diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 88e1c66..894d834 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -8,8 +8,7 @@ <template v-if="stage == 0"> <div :style="contentStyles"> This page provides a visualisation of the biological Tree of Life. - It was made using data from OTOL, EOL, and Wikipedia. - For more project information, click here. + It is unfinished, and is just here for testing. </div> <div class="w-full flex justify-evenly mt-2"> <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button> |