aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/SettingsModal.vue2
-rw-r--r--src/components/TutorialPane.vue146
2 files changed, 65 insertions, 83 deletions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index b09af07..34d0043 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -27,7 +27,7 @@ export default defineComponent({
},
},
watch: {
- sweepLeaves(newVal, oldVal){
+ sweepLeaves(newVal: boolean, oldVal: boolean){
this.lytOpts.layoutType = newVal ? 'sweep' : 'rect';
},
},
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index fdebc8b..fe877ef 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,20 +1,25 @@
<script lang="ts">
+
import {defineComponent, PropType} from 'vue';
+import RButton from './RButton.vue';
import CloseIcon from './icon/CloseIcon.vue';
import {Action, UiOptions} from '../lib';
-import RButton from './RButton.vue';
export default defineComponent({
props: {
- uiOpts: {type: Object as PropType<UiOptions>, required: true},
- triggerFlag: {type: Boolean, required: true},
skipWelcome: {type: Boolean, default: false},
- height: {type: String, default: 'auto'},
+ triggerFlag: {type: Boolean, required: true},
+ // Used to indicate that a tutorial-requested 'trigger' action has been done
+ uiOpts: {type: Object as PropType<UiOptions>, required: true},
},
data(){
return {
- stage: this.skipWelcome ? 1 : 0,
- maxStage: 10,
+ stage: 0, // Indicates the current step of the tutorial (stage 0 is the welcome message)
+ lastStage: 9,
+ stageActions: [ // Specifies, for stages 1+, when actions are introduced (null means none)
+ 'expand', 'collapse', 'expandToView', 'unhideAncestor',
+ 'tileInfo', 'search', 'autoMode', 'settings', 'help',
+ ] as (Action | null)[],
};
},
computed: {
@@ -22,7 +27,6 @@ export default defineComponent({
return {
backgroundColor: this.uiOpts.bgColorDark,
color: this.uiOpts.textColor,
- height: this.height,
};
},
contentStyles(): Record<string,string> {
@@ -30,14 +34,42 @@ export default defineComponent({
padding: '0 0.5cm',
maxWidth: '15cm',
margin: '0 auto',
- fontSize: 'small',
overflow: 'auto',
};
},
+ buttonStyles(): Record<string,string> {
+ return {
+ color: this.uiOpts.textColor,
+ backgroundColor: this.uiOpts.bgColor,
+ };
+ },
},
watch: {
+ stage(newVal, oldVal){
+ // Update disabled actions
+ let disabledActions = this.uiOpts.disabledActions;
+ if (this.stage == 0){
+ disabledActions.clear();
+ return;
+ }
+ let currentAction = null as null | Action;
+ for (let i = 0; i < this.lastStage; i++){
+ let action = this.stageActions[i];
+ if (action != null){
+ if (i < this.stage){
+ currentAction = action;
+ disabledActions.delete(action);
+ } else {
+ disabledActions.add(action);
+ }
+ }
+ }
+ // Notify of new trigger-action
+ this.$emit('stage-chg', currentAction);
+ },
+ // Called when a trigger-action is done, and advances to the next stage
triggerFlag(){
- if (this.stage < this.maxStage){
+ if (this.stage < this.lastStage){
this.onNextClick();
} else {
this.onClose();
@@ -47,7 +79,6 @@ export default defineComponent({
methods: {
onStartTutorial(){
this.stage = 1;
- this.setEnabledFeatures();
},
onSkipTutorial(){
this.$emit('skip');
@@ -55,42 +86,17 @@ export default defineComponent({
},
onPrevClick(){
this.stage = Math.max(1, this.stage - 1);
- this.setEnabledFeatures();
},
onNextClick(){
- this.stage = Math.min(this.maxStage, this.stage + 1);
- this.setEnabledFeatures();
+ this.stage = Math.min(this.stage + 1, this.lastStage);
},
onClose(){
this.$emit('close');
},
- setEnabledFeatures(){
- const stageActions = [
- null,
- 'expand', 'expand', 'collapse', 'expandToView', 'unhideAncestor',
- 'tileInfo', 'search', 'autoMode', 'settings', 'help',
- ] as (Action | null)[];
- let disabledActions = this.uiOpts.disabledActions;
- let currentAction = stageActions[this.stage];
- for (let i = 1; i <= this.maxStage; i++){
- let action = stageActions[i] as Action;
- if (i <= this.stage){
- if (disabledActions.has(action)){
- disabledActions.delete(action);
- }
- } else {
- if (!disabledActions.has(action) && action != currentAction){
- disabledActions.add(action);
- }
- }
- }
- let triggerAction = currentAction;
- this.$emit('stage-chg', triggerAction);
- },
},
created(){
if (this.skipWelcome){
- this.setEnabledFeatures();
+ this.stage += 1;
}
},
components: {CloseIcon, RButton, },
@@ -101,82 +107,58 @@ export default defineComponent({
<template>
<div :style="styles" class="p-2 flex flex-col justify-between">
<div class="flex">
- <h2 class="text-center mb-2">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
+ <h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
<close-icon @click.stop="onClose"
- class="block ml-auto w-6 h-6 hover:cursor-pointer"/>
+ class="block w-6 h-6 hover:cursor-pointer"/>
</div>
<template v-if="stage == 0">
<div :style="contentStyles">
- Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco.
+ 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.
</div>
<div class="w-full flex justify-evenly mt-2">
- <r-button class="bg-stone-800 text-white" @click="onStartTutorial">
- Start Tutorial
- </r-button>
- <r-button class="bg-stone-800 text-white" @click="onSkipTutorial">
- Skip
- </r-button>
+ <r-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</r-button>
+ <r-button :style="buttonStyles" @click="onSkipTutorial">Skip</r-button>
</div>
</template>
<template v-else>
<div v-if="stage == 1" :style="contentStyles">
- Click/touch on the tile to expand it and see it's children. <br/>
- A green title means the tile has children. Orange and red mean 100+ or 1000+ children.
- If a clicked tile won't fit on screen, expansion fails.
- There is a way around this, which we'll describe later.
+ Clicking/touching a tile expands it and shows it's children.
</div>
<div v-else-if="stage == 2" :style="contentStyles">
- You can keep expanding tiles, and they are repositioned to try and save space,
- while still trying to maintain a stable layout, to avoid disorientation.
+ Clicking on an expanded tile's header shrinks it back.
</div>
<div v-else-if="stage == 3" :style="contentStyles">
- Click on an expanded tile's header to shrink it, hiding it's children
- You can keep exploring the tree this way, expanding and collapsing tiles as needed,
- to better show the groups you're interested in.
+ Clicking and holding on a tile makes it fill the view, and moves it's
+ ancestors to a sidebar. The same thing applies for an expanded tile's header.
</div>
<div v-else-if="stage == 4" :style="contentStyles">
- Eventually, you might run out of screen space, and be unable to go deeper.
- Click and hold on a tile to make it fill the view, and move it's
- ancestors to a sidebar. You can do the same thing on an expanded tile's header.
+ Clicking on a tile in the sidebar brings it back into the main view.
</div>
<div v-else-if="stage == 5" :style="contentStyles">
- Click on a tile in the sidebar to bring it back into the main view.
- In this way, you can explore as deeply as you want, occasionally jumping back
- upward to explore a different ancestral branch.
+ Clicking on the icon at a tile's bottom-right, or at the right of
+ an expanded tile's header, brings up more information.
</div>
<div v-else-if="stage == 6" :style="contentStyles">
- Each tile has an info icon on the bottom right. Clicking on this brings up
- information about the corresponding biological taxon. <br/>
- A similar icon appears at the right end of each expanded-tile header.
+ You can search using the icon at the top-right. Alternatively, press Ctrl-F.
</div>
<div v-else-if="stage == 7" :style="contentStyles">
- The search icon allows for finding a particular tile, and bringing it into view.
- To stop the traversal, just click anywhere on screen.
+ You can use the play icon to enable 'Auto Mode'.
</div>
<div v-else-if="stage == 8" :style="contentStyles">
- The play icon enables 'auto mode', which continuously expands/collapses
- random tiles, until you click to make it stop.
+ The settings icon allows adjusting the layout, animation speed, etc.
</div>
<div v-else-if="stage == 9" :style="contentStyles">
- The settings icon allows for adjusting the layout, among other things.
- <ul class="list-disc">
- <li>The animation speed can be slowed down if you find the tile-repositioning hard to follow.</li>
- <li>The 'reduced tree' setting replaces the original tree with a simplified version.</li>
- </ul>
- </div>
- <div v-else-if="stage == 10" :style="contentStyles">
- And finally, the help icon provides summarised usage information.
+ And finally, the help icon provides more information.
</div>
<!-- Buttons -->
<div class="w-full flex justify-evenly mt-2">
- <r-button :disabled="stage == 1" class="bg-stone-800 text-white" @click="onPrevClick">
+ <r-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
Prev
</r-button>
- <r-button class="bg-stone-800 text-white" @click="(stage != maxStage) ? onNextClick() : onClose()">
- {{stage != maxStage ? 'Next' : 'Finish'}}
+ <r-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
+ {{stage != lastStage ? 'Next' : 'Finish'}}
</r-button>
</div>
</template>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:57:35 +0000