aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue38
-rw-r--r--src/components/HelpModal.vue8
-rw-r--r--src/components/Tile.vue6
-rw-r--r--src/components/TutorialPane.vue7
4 files changed, 30 insertions, 29 deletions
diff --git a/src/App.vue b/src/App.vue
index 5c7bbf2..994b2ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@
<div :style="tutPaneContainerStyles" class="z-10"> <!-- Used to slide-in/out the tutorial pane -->
<transition name="fade" @after-enter="tutPaneInTransition = false" @after-leave="tutPaneInTransition = false">
<tutorial-pane v-if="tutPaneOpen" :style="tutPaneStyles"
- :uiOpts="uiOpts" :triggerFlag="tutTriggerFlag" :skipWelcome="!tutWelcome"
+ :actionsDone="actionsDone" :triggerFlag="tutTriggerFlag" :skipWelcome="!tutWelcome" :uiOpts="uiOpts"
@close="onTutPaneClose" @skip="onTutorialSkip" @stage-chg="onTutStageChg"/>
</transition>
</div>
@@ -68,7 +68,7 @@
</transition>
<!-- Overlay used to capture clicks during auto mode, etc -->
<div :style="{visibility: modeRunning != null ? 'visible' : 'hidden'}"
- class="absolute left-0 top-0 w-full h-full" @click="modeRunning = null"></div>
+ class="absolute left-0 top-0 w-full h-full z-20" @click="modeRunning = null"></div>
</div>
</template>
@@ -152,6 +152,7 @@ export default defineComponent({
tutWelcome: !uiOpts.tutorialSkip,
tutTriggerAction: null as Action | null, // Used to advance tutorial upon user-actions
tutTriggerFlag: false,
+ actionsDone: new Set() as Set<Action>, // Used to avoid disabling actions the user has already seen
// Options
lytOpts: lytOpts,
uiOpts: uiOpts,
@@ -509,9 +510,9 @@ export default defineComponent({
console.log('WARNING: Unexpected search event while search/auto mode is running')
return;
}
- if (this.isDisabled('expand') || this.isDisabled('expandToView') || this.isDisabled('unhideAncestor')){
- console.log('INFO: Ignored search action due to disabled expand/expandToView');
- return;
+ const prereqActions = ['expand', 'expandToView', 'unhideAncestor'];
+ if (this.isDisabled(...prereqActions)){
+ prereqActions.forEach(a => this.uiOpts.disabledActions.delete(a));
}
//
this.searchOpen = false;
@@ -602,10 +603,9 @@ export default defineComponent({
if (this.isDisabled('autoMode')){
return;
}
- if (this.isDisabled('expand') || this.isDisabled('collapse') ||
- this.isDisabled('expandToView') || this.isDisabled('unhideAncestor')){
- console.log('INFO: Ignored auto-mode action due to disabled expand/collapse/etc');
- return;
+ const prereqActions = ['expand', 'collapse', 'expandToView', 'unhideAncestor'];
+ if (this.isDisabled(...prereqActions)){
+ prereqActions.forEach(a => this.uiOpts.disabledActions.delete(a));
}
//
this.resetMode();
@@ -782,16 +782,16 @@ export default defineComponent({
}
},
handleActionForTutorial(action: Action): void {
- if (!this.tutPaneOpen){
- return;
- }
- // Close welcome message on first action
- if (this.tutWelcome){
- this.onTutPaneClose();
- }
- // Tell TutorialPane if trigger-action was done
- if (this.tutTriggerAction == action){
- this.tutTriggerFlag = !this.tutTriggerFlag;
+ this.actionsDone.add(action);
+ if (this.tutPaneOpen){
+ // Close welcome message on first action
+ if (this.tutWelcome){
+ this.onTutPaneClose();
+ }
+ // Tell TutorialPane if trigger-action was done
+ if (this.tutTriggerAction == action){
+ this.tutTriggerFlag = !this.tutTriggerFlag;
+ }
}
},
// For the loading-indicator
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 6cdd521..4f35564 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -53,7 +53,7 @@
<template #content>
<div :class="contentClasses">
<p>
- Tilo attempts to display the Tree of Life by representing nodes with tiles,
+ Tilo displays the Tree of Life by representing nodes with tiles,
and placing tiles within other tiles to show structure.
</p>
<img src="/treeWithTiles.jpg" alt="Tree and tile-layout comparison"
@@ -62,7 +62,7 @@
Within a tile's header:
<ul class="list-disc pl-4">
<li>
- The color denotes the number of children.
+ The color denotes the number of child tiles.
White means zero,
<span style="color: limegreen">green</span> means 1+,
<span style="color: darkorange">orange</span> means 10+,
@@ -407,8 +407,8 @@
</template>
</s-collapsible>
</div>
- <s-button v-if="!tutOpen" class="mx-auto mb-2"
- :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
+ <s-button class="mx-auto mb-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+ :disabled="tutOpen" @click.stop="onStartTutorial">
Start Tutorial
</s-button>
</div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index ab1538f..9c9fdfa 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -33,7 +33,7 @@
@click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
</div>
<transition name="fadein">
- <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70 z-20"></div>
+ <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70 z-20"/>
</transition>
</div>
<tile v-for="child in visibleChildren" :key="child.name"
@@ -43,7 +43,7 @@
@info-click="onInnerInfoIconClick"/>
</div>
<transition name="fadein">
- <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 bg-amber-500/70"></div>
+ <div v-if="inFlash" class="absolute w-full h-full top-0 left-0 rounded-[inherit] bg-amber-500/70"/>
</transition>
</div>
</template>
@@ -355,7 +355,7 @@ export default defineComponent({
};
},
infoIconClasses(): string {
- return 'text-white/20 hover:text-white hover:cursor-pointer';
+ return 'text-white/30 hover:text-white hover:cursor-pointer';
},
// For watching layoutNode data
pos(){
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 7667f60..3593a79 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -38,7 +38,7 @@
</span>
</div>
<div v-else-if="stage == 7" :style="contentStyles">
- {{touchDevice ? 'Tap' : 'Click'}} the play icon to start Auto Mode
+ {{touchDevice ? 'Tap' : 'Click'}} the play icon to traverse the tree automatically
</div>
<div v-else-if="stage == 8" :style="contentStyles">
{{touchDevice ? 'Tap' : 'Click'}} the settings icon
@@ -75,9 +75,10 @@ import {Action, UiOptions} from '../lib';
export default defineComponent({
props: {
- skipWelcome: {type: Boolean, default: false},
+ actionsDone: {type: Object as PropType<Set<Action>>, required: true}, // Used to avoid disabling actions already seen
triggerFlag: {type: Boolean, required: true},
// Used to indicate that a tutorial-requested 'trigger' action has been done
+ skipWelcome: {type: Boolean, default: false},
uiOpts: {type: Object as PropType<UiOptions>, required: true},
},
data(){
@@ -122,7 +123,7 @@ export default defineComponent({
// If starting tutorial, disable 'all' actions
if (newVal == 1 && !this.disabledOnce){
for (let action of this.stageActions){
- if (action != null){
+ if (action != null && !this.actionsDone.has(action)){
this.uiOpts.disabledActions.add(action);
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 00:01:33 +0000