aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AncestryBar.vue17
-rw-r--r--src/components/HelpModal.vue67
-rw-r--r--src/components/IconButton.vue16
-rw-r--r--src/components/SButton.vue16
-rw-r--r--src/components/SearchModal.vue71
-rw-r--r--src/components/SettingsModal.vue117
-rw-r--r--src/components/Tile.vue101
-rw-r--r--src/components/TileInfoModal.vue115
-rw-r--r--src/components/TutorialPane.vue123
-rw-r--r--src/components/icon/CloseIcon.vue10
-rw-r--r--src/components/icon/HelpIcon.vue10
-rw-r--r--src/components/icon/InfoIcon.vue10
-rw-r--r--src/components/icon/LogInIcon.vue10
-rw-r--r--src/components/icon/PlayIcon.vue10
-rw-r--r--src/components/icon/SearchIcon.vue10
-rw-r--r--src/components/icon/SettingsIcon.vue10
16 files changed, 353 insertions, 360 deletions
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 7e5e74c..204798b 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,5 +1,12 @@
-<script lang="ts">
+<template>
+<div :style="styles" @wheel.stop="onWheelEvt">
+ <tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0"
+ :layoutNode="node" :tolMap="tolMap" :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
+ @leaf-click="onTileClick(nodes[idx])" @info-click="onInfoIconClick"/>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import Tile from './Tile.vue'
import {TolMap, UiOptions} from '../lib';
@@ -79,11 +86,3 @@ export default defineComponent({
emits: ['ancestor-click', 'info-click', ],
});
</script>
-
-<template>
-<div :style="styles" @wheel.stop="onWheelEvt">
- <tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0"
- :layoutNode="node" :tolMap="tolMap" :nonAbsPos="true" :lytOpts="lytOpts" :uiOpts="uiOpts"
- @leaf-click="onTileClick(nodes[idx])" @info-click="onInfoIconClick"/>
-</div>
-</template>
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 4a6168b..7a18c05 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,5 +1,37 @@
-<script lang="ts">
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+ <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles">
+ <close-icon @click.stop="onClose" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
+ <h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
+ <hr class="mb-4 border-stone-400"/>
+ <div class="mb-4">
+ 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 laboris nisi ut
+ aliquip ex ea commodo consequat.
+ </div>
+ <div>
+ 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 laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure
+ dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur
+ sint occaecat cupidatat non proident, sunt
+ in culpa qui officia deserunt mollit anim id
+ est laborum.
+ </div>
+ <s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
+ Start Tutorial
+ </s-button>
+ </div>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import SButton from './SButton.vue';
import CloseIcon from './icon/CloseIcon.vue';
@@ -33,36 +65,3 @@ export default defineComponent({
emits: ['close', 'start-tutorial', ],
});
</script>
-
-<template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
- <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles">
- <close-icon @click.stop="onClose" ref="closeIcon"
- class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
- <h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
- <hr class="mb-4 border-stone-400"/>
- <div class="mb-4">
- 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 laboris nisi ut
- aliquip ex ea commodo consequat.
- </div>
- <div>
- 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 laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure
- dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur
- sint occaecat cupidatat non proident, sunt
- in culpa qui officia deserunt mollit anim id
- est laborum.
- </div>
- <s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial">
- Start Tutorial
- </s-button>
- </div>
-</div>
-</template>
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 71dddc3..0a32095 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,3 +1,11 @@
+<template>
+<div class="p-2 rounded-full hover:cursor-pointer"
+ :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}"
+ :style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}">
+ <slot class="w-full h-full">?</slot>
+</div>
+</template>
+
<script lang="ts">
import {defineComponent, PropType} from 'vue';
@@ -8,11 +16,3 @@ export default defineComponent({
},
});
</script>
-
-<template>
-<div class="p-2 rounded-full hover:cursor-pointer"
- :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}"
- :style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}">
- <slot class="w-full h-full">?</slot>
-</div>
-</template>
diff --git a/src/components/SButton.vue b/src/components/SButton.vue
index 4bb827d..a480c37 100644
--- a/src/components/SButton.vue
+++ b/src/components/SButton.vue
@@ -1,3 +1,11 @@
+<template>
+<button :disabled="disabled"
+ class="block rounded px-4 py-2"
+ :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
+ <slot>?</slot>
+</button>
+</template>
+
<script lang="ts">
import {defineComponent, PropType} from 'vue';
@@ -7,11 +15,3 @@ export default defineComponent({
},
});
</script>
-
-<template>
-<button :disabled="disabled"
- class="block rounded px-4 py-2"
- :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}">
- <slot>?</slot>
-</button>
-</template>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index b1d95db..7d86a76 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -1,5 +1,39 @@
-<script lang="ts">
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+ <div class="absolute left-1/2 -translate-x-1/2 top-1/4 w-3/4 -translate-y-1/2 flex" :style="styles">
+ <div class="relative grow m-2">
+ <input type="text" class="block border p-1 w-full" ref="searchInput"
+ @keyup.enter="onSearch" @keyup.esc="onClose"
+ @input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/>
+ <div class="absolute top-[100%] w-full"
+ :style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}">
+ <div v-for="(sugg, idx) of searchSuggs"
+ :style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}"
+ class="border p-1 hover:underline hover:cursor-pointer flex"
+ @click="resolveSearch(sugg.canonicalName || sugg.name)">
+ <div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
+ <span>{{suggDisplayStrings[idx][0]}}</span>
+ <span class="font-bold">{{suggDisplayStrings[idx][1]}}</span>
+ <span>{{suggDisplayStrings[idx][2]}}</span>
+ </div>
+ <info-icon class="hover:cursor-pointer my-auto w-5 h-5"
+ @click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/>
+ </div>
+ <div v-if="searchHadMoreSuggs" class="text-center border">...</div>
+ </div>
+ </div>
+ <div class="my-auto hover:cursor-pointer hover:brightness-75 rounded border shadow">
+ <search-icon @click.stop="onSearch" class="block w-8 h-8"/>
+ </div>
+ <div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
+ <log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
+ :class="uiOpts.searchJumpMode ? 'opacity-100' : 'opacity-30'"/>
+ </div>
+ </div>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import SearchIcon from './icon/SearchIcon.vue';
import LogInIcon from './icon/LogInIcon.vue';
@@ -191,41 +225,6 @@ export default defineComponent({
});
</script>
-<template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
- <div class="absolute left-1/2 -translate-x-1/2 top-1/4 w-3/4 -translate-y-1/2 flex" :style="styles">
- <div class="relative grow m-2">
- <input type="text" class="block border p-1 w-full" ref="searchInput"
- @keyup.enter="onSearch" @keyup.esc="onClose"
- @input="onInput" @keydown.down.prevent="onDownKey" @keydown.up.prevent="onUpKey"/>
- <div class="absolute top-[100%] w-full"
- :style="{backgroundColor: uiOpts.bgColorAlt, color: uiOpts.textColorAlt}">
- <div v-for="(sugg, idx) of searchSuggs"
- :style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}"
- class="border p-1 hover:underline hover:cursor-pointer flex"
- @click="resolveSearch(sugg.canonicalName || sugg.name)">
- <div class="grow overflow-hidden whitespace-nowrap text-ellipsis">
- <span>{{suggDisplayStrings[idx][0]}}</span>
- <span class="font-bold">{{suggDisplayStrings[idx][1]}}</span>
- <span>{{suggDisplayStrings[idx][2]}}</span>
- </div>
- <info-icon class="hover:cursor-pointer my-auto w-5 h-5"
- @click.stop="onInfoIconClick(sugg.canonicalName || sugg.name)"/>
- </div>
- <div v-if="searchHadMoreSuggs" class="text-center border">...</div>
- </div>
- </div>
- <div class="my-auto hover:cursor-pointer hover:brightness-75 rounded border shadow">
- <search-icon @click.stop="onSearch" class="block w-8 h-8"/>
- </div>
- <div class="my-auto mx-2 hover:cursor-pointer hover:brightness-75 rounded">
- <log-in-icon @click.stop="onSearchModeChg" class="block w-8 h-8"
- :class="uiOpts.searchJumpMode ? 'opacity-100' : 'opacity-30'"/>
- </div>
- </div>
-</div>
-</template>
-
<style>
.animate-red-then-fade {
animation-name: red-then-fade;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 5c19d60..8110e8c 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,62 +1,3 @@
-<script lang="ts">
-
-import {defineComponent, PropType} from 'vue';
-import SButton from './SButton.vue';
-import CloseIcon from './icon/CloseIcon.vue';
-import {UiOptions} from '../lib';
-import {LayoutOptions} from '../layout';
-
-export default defineComponent({
- props: {
- lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
- uiOpts: {type: Object as PropType<UiOptions>, required: true},
- },
- data(){
- return {
- sweepLeaves: this.lytOpts.layoutType == 'sweep',
- // For making only two of 'layoutType's values available for user selection
- };
- },
- computed: {
- styles(): Record<string,string> {
- return {
- backgroundColor: this.uiOpts.bgColorAlt,
- borderRadius: this.uiOpts.borderRadius + 'px',
- boxShadow: this.uiOpts.shadowNormal,
- };
- },
- },
- watch: {
- sweepLeaves(newVal: boolean, oldVal: boolean){
- this.lytOpts.layoutType = newVal ? 'sweep' : 'rect';
- },
- },
- methods: {
- onClose(evt: Event){
- if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
- this.$emit('close');
- }
- },
- onSettingChg(setting: string){
- // Maintain min/max-tile-size consistency
- if (setting == 'minTileSz' || setting == 'maxTileSz'){
- let minInput = this.$refs.minTileSzInput as HTMLInputElement;
- let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
- if (setting == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
- this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
- } else if (setting == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
- this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
- }
- }
- //
- this.$emit('setting-chg', setting);
- },
- },
- components: {SButton, CloseIcon, },
- emits: ['close', 'setting-chg', 'reset', ],
-});
-</script>
-
<template>
<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
@@ -139,3 +80,61 @@ export default defineComponent({
</div>
</div>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import SButton from './SButton.vue';
+import CloseIcon from './icon/CloseIcon.vue';
+import {UiOptions} from '../lib';
+import {LayoutOptions} from '../layout';
+
+export default defineComponent({
+ props: {
+ lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
+ uiOpts: {type: Object as PropType<UiOptions>, required: true},
+ },
+ data(){
+ return {
+ sweepLeaves: this.lytOpts.layoutType == 'sweep',
+ // For making only two of 'layoutType's values available for user selection
+ };
+ },
+ computed: {
+ styles(): Record<string,string> {
+ return {
+ backgroundColor: this.uiOpts.bgColorAlt,
+ borderRadius: this.uiOpts.borderRadius + 'px',
+ boxShadow: this.uiOpts.shadowNormal,
+ };
+ },
+ },
+ watch: {
+ sweepLeaves(newVal: boolean, oldVal: boolean){
+ this.lytOpts.layoutType = newVal ? 'sweep' : 'rect';
+ },
+ },
+ methods: {
+ onClose(evt: Event){
+ if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
+ this.$emit('close');
+ }
+ },
+ onSettingChg(setting: string){
+ // Maintain min/max-tile-size consistency
+ if (setting == 'minTileSz' || setting == 'maxTileSz'){
+ let minInput = this.$refs.minTileSzInput as HTMLInputElement;
+ let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
+ if (setting == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
+ this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
+ } else if (setting == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
+ this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
+ }
+ }
+ //
+ this.$emit('setting-chg', setting);
+ },
+ },
+ components: {SButton, CloseIcon, },
+ emits: ['close', 'setting-chg', 'reset', ],
+});
+</script>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 608938e..607b7e9 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,5 +1,54 @@
-<script lang="ts">
+<template>
+<div :style="styles" @transitionend="onTransitionEnd" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
+ <div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
+ class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
+ @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+ <template v-if="hasOneImage">
+ <h1 :style="leafHeaderStyles">{{displayName}}</h1>
+ <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+ @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+ </template>
+ <template v-else>
+ <div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
+ <div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
+ <h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
+ <info-icon v-if="infoIconDisabled" class="col-start-1 row-start-1 z-10"
+ :style="infoIconStyles" :class="infoIconClasses"
+ @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+ </template>
+ </div>
+ <div v-else :style="nonleafStyles" ref="nonleaf">
+ <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+ @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+ <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
+ <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+ @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
+ </div>
+ <div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass" ref="sepSweptArea">
+ <div v-if="layoutNode.sepSweptArea?.sweptLeft === false"
+ :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
+ @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
+ <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
+ <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
+ @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>
+ </transition>
+ </div>
+ <tile v-for="child in visibleChildren" :key="child.name"
+ :layoutNode="child" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" :overflownDim="overflownDim"
+ @leaf-click="onInnerLeafClick" @nonleaf-click="onInnerNonleafClick"
+ @leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld"
+ @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>
+ </transition>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import InfoIcon from './icon/InfoIcon.vue';
import {TolNode, TolMap, UiOptions} from '../lib';
@@ -478,56 +527,6 @@ export default defineComponent({
});
</script>
-<template>
-<div :style="styles" @transitionend="onTransitionEnd" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
- <div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
- class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
- @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
- <template v-if="hasOneImage">
- <h1 :style="leafHeaderStyles">{{displayName}}</h1>
- <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
- @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
- </template>
- <template v-else>
- <div :style="leafFirstImgStyles" class="col-start-1 row-start-1"></div>
- <div :style="leafSecondImgStyles" class="col-start-1 row-start-1"></div>
- <h1 :style="leafHeaderStyles" class="col-start-1 row-start-1 z-10">{{displayName}}</h1>
- <info-icon v-if="infoIconDisabled" class="col-start-1 row-start-1 z-10"
- :style="infoIconStyles" :class="infoIconClasses"
- @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
- </template>
- </div>
- <div v-else :style="nonleafStyles" ref="nonleaf">
- <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
- @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
- <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
- <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
- @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/>
- </div>
- <div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass" ref="sepSweptArea">
- <div v-if="layoutNode.sepSweptArea?.sweptLeft === false"
- :style="nonleafHeaderStyles" class="flex hover:cursor-pointer"
- @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
- <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1>
- <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses"
- @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>
- </transition>
- </div>
- <tile v-for="child in visibleChildren" :key="child.name"
- :layoutNode="child" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" :overflownDim="overflownDim"
- @leaf-click="onInnerLeafClick" @nonleaf-click="onInnerNonleafClick"
- @leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld"
- @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>
- </transition>
-</div>
-</template>
-
<style>
.hide-right-edge::before {
content: '';
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 88c6065..f8c4c4e 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -1,5 +1,61 @@
-<script lang="ts">
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+ <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 max-h-[80%] p-4" :style="styles">
+ <close-icon @click.stop="onClose" ref="closeIcon"
+ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
+ <h1 class="text-center text-xl font-bold mb-2">
+ {{getDisplayName(nodeName, tolNode)}}
+ <div v-if="tolNode != null">
+ ({{tolNode.children.length}} children, {{tolNode.tips}} tips,
+ <a :href="'https://tree.opentreeoflife.org/opentree/argus/opentree13.4@' + tolNode.otolId">
+ {{tolNode.otolId}}</a>)
+ </div>
+ </h1>
+ <hr class="mb-4 border-stone-400"/>
+ <div v-if="tolNode == null">Querying server</div>
+ <template v-else>
+ <div v-if="nodes.length > 1">This is a compound node</div>
+ <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])">
+ <h1 v-if="nodes.length > 1" class="text-center font-bold">
+ {{getDisplayName(subNames![idx], nodes[idx])}}
+ </h1>
+ <div class="flex gap-1">
+ <div class="w-1/2">
+ <div :style="getImgStyles(nodes[idx])"/>
+ <ul v-if="imgInfos[idx]! != null">
+ <li>Obtained via: {{imgInfos[idx]!.src}}</li>
+ <li>License:
+ <a :href="licenseToUrl(imgInfos[idx]!.license)">{{imgInfos[idx]!.license}}</a>
+ </li>
+ <li><a :href="imgInfos[idx]!.url" class="underline">Source URL</a></li>
+ <li>Artist: {{imgInfos[idx]!.artist}}</li>
+ <li v-if="imgInfos[idx]!.credit != ''" class="overflow-auto">
+ Credit: {{imgInfos[idx]!.credit}}
+ </li>
+ </ul>
+ </div>
+ <div v-if="descInfos[idx]! != null">
+ <div>
+ Redirected: {{descInfos[idx]!.fromRedirect}} <br/>
+ Short-description from {{descInfos[idx]!.fromDbp ? 'DBpedia' : 'Wikipedia'}} <br/>
+ <a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId" class="underline">
+ Wikipedia Link
+ </a>
+ </div>
+ <hr/>
+ <div>{{descInfos[idx]!.text}}</div>
+ </div>
+ <div v-else>
+ (No description found)
+ </div>
+ </div>
+ </div>
+ </template>
+ </div>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import CloseIcon from './icon/CloseIcon.vue';
import {LayoutNode, LayoutOptions} from '../layout';
@@ -133,60 +189,3 @@ export default defineComponent({
emits: ['close', ],
});
</script>
-
-<template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
- <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 max-h-[80%] p-4" :style="styles">
- <close-icon @click.stop="onClose" ref="closeIcon"
- class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
- <h1 class="text-center text-xl font-bold mb-2">
- {{getDisplayName(nodeName, tolNode)}}
- <div v-if="tolNode != null">
- ({{tolNode.children.length}} children, {{tolNode.tips}} tips,
- <a :href="'https://tree.opentreeoflife.org/opentree/argus/opentree13.4@' + tolNode.otolId">
- {{tolNode.otolId}}</a>)
- </div>
- </h1>
- <hr class="mb-4 border-stone-400"/>
- <div v-if="tolNode == null">Querying server</div>
- <template v-else>
- <div v-if="nodes.length > 1">This is a compound node</div>
- <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])">
- <h1 v-if="nodes.length > 1" class="text-center font-bold">
- {{getDisplayName(subNames![idx], nodes[idx])}}
- </h1>
- <div class="flex gap-1">
- <div class="w-1/2">
- <div :style="getImgStyles(nodes[idx])"/>
- <ul v-if="imgInfos[idx]! != null">
- <li>Obtained via: {{imgInfos[idx]!.src}}</li>
- <li>License:
- <a :href="licenseToUrl(imgInfos[idx]!.license)">{{imgInfos[idx]!.license}}</a>
- </li>
- <li><a :href="imgInfos[idx]!.url" class="underline">Source URL</a></li>
- <li>Artist: {{imgInfos[idx]!.artist}}</li>
- <li v-if="imgInfos[idx]!.credit != ''" class="overflow-auto">
- Credit: {{imgInfos[idx]!.credit}}
- </li>
- </ul>
- </div>
- <div v-if="descInfos[idx]! != null">
- <div>
- Redirected: {{descInfos[idx]!.fromRedirect}} <br/>
- Short-description from {{descInfos[idx]!.fromDbp ? 'DBpedia' : 'Wikipedia'}} <br/>
- <a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId" class="underline">
- Wikipedia Link
- </a>
- </div>
- <hr/>
- <div>{{descInfos[idx]!.text}}</div>
- </div>
- <div v-else>
- (No description found)
- </div>
- </div>
- </div>
- </template>
- </div>
-</div>
-</template>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 243ee33..88e1c66 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,5 +1,65 @@
-<script lang="ts">
+<template>
+<div :style="styles" class="p-2 flex flex-col justify-between">
+ <div class="flex">
+ <h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
+ <close-icon @click.stop="onClose"
+ class="block w-6 h-6 hover:cursor-pointer"/>
+ </div>
+ <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.
+ </div>
+ <div class="w-full flex justify-evenly mt-2">
+ <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
+ <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
+ </div>
+ </template>
+ <template v-else>
+ <div v-if="stage == 1" :style="contentStyles">
+ Clicking/touching a tile expands it and shows it's children.
+ </div>
+ <div v-else-if="stage == 2" :style="contentStyles">
+ Clicking on an expanded tile's header shrinks it back.
+ </div>
+ <div v-else-if="stage == 3" :style="contentStyles">
+ 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">
+ Clicking on a tile in the sidebar brings it back into the main view.
+ </div>
+ <div v-else-if="stage == 5" :style="contentStyles">
+ 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">
+ You can search using the icon at the top-right. Alternatively, press Ctrl-F.
+ </div>
+ <div v-else-if="stage == 7" :style="contentStyles">
+ You can use the play icon to enable 'Auto Mode'.
+ </div>
+ <div v-else-if="stage == 8" :style="contentStyles">
+ The settings icon allows adjusting the layout, animation speed, etc.
+ </div>
+ <div v-else-if="stage == 9" :style="contentStyles">
+ And finally, the help icon provides more information.
+ </div>
+ <!-- Buttons -->
+ <div class="w-full flex justify-evenly mt-2">
+ <s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
+ Prev
+ </s-button>
+ <s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
+ {{stage != lastStage ? 'Next' : 'Finish'}}
+ </s-button>
+ </div>
+ </template>
+</div>
+</template>
+<script lang="ts">
import {defineComponent, PropType} from 'vue';
import SButton from './SButton.vue';
import CloseIcon from './icon/CloseIcon.vue';
@@ -103,64 +163,3 @@ export default defineComponent({
emits: ['close', 'stage-chg', 'skip', ],
});
</script>
-
-<template>
-<div :style="styles" class="p-2 flex flex-col justify-between">
- <div class="flex">
- <h2 class="text-center mb-2 mx-auto">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
- <close-icon @click.stop="onClose"
- class="block w-6 h-6 hover:cursor-pointer"/>
- </div>
- <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.
- </div>
- <div class="w-full flex justify-evenly mt-2">
- <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
- <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
- </div>
- </template>
- <template v-else>
- <div v-if="stage == 1" :style="contentStyles">
- Clicking/touching a tile expands it and shows it's children.
- </div>
- <div v-else-if="stage == 2" :style="contentStyles">
- Clicking on an expanded tile's header shrinks it back.
- </div>
- <div v-else-if="stage == 3" :style="contentStyles">
- 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">
- Clicking on a tile in the sidebar brings it back into the main view.
- </div>
- <div v-else-if="stage == 5" :style="contentStyles">
- 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">
- You can search using the icon at the top-right. Alternatively, press Ctrl-F.
- </div>
- <div v-else-if="stage == 7" :style="contentStyles">
- You can use the play icon to enable 'Auto Mode'.
- </div>
- <div v-else-if="stage == 8" :style="contentStyles">
- The settings icon allows adjusting the layout, animation speed, etc.
- </div>
- <div v-else-if="stage == 9" :style="contentStyles">
- And finally, the help icon provides more information.
- </div>
- <!-- Buttons -->
- <div class="w-full flex justify-evenly mt-2">
- <s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
- Prev
- </s-button>
- <s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
- {{stage != lastStage ? 'Next' : 'Finish'}}
- </s-button>
- </div>
- </template>
-</div>
-</template>
diff --git a/src/components/icon/CloseIcon.vue b/src/components/icon/CloseIcon.vue
index 374b07c..7dceef9 100644
--- a/src/components/icon/CloseIcon.vue
+++ b/src/components/icon/CloseIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -10,3 +5,8 @@ export default defineComponent({});
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/HelpIcon.vue b/src/components/icon/HelpIcon.vue
index a85c3ef..c8e4ca2 100644
--- a/src/components/icon/HelpIcon.vue
+++ b/src/components/icon/HelpIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -11,3 +6,8 @@ export default defineComponent({});
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/InfoIcon.vue b/src/components/icon/InfoIcon.vue
index 44d1cfa..0f390cf 100644
--- a/src/components/icon/InfoIcon.vue
+++ b/src/components/icon/InfoIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -11,3 +6,8 @@ export default defineComponent({});
<line x1="12" y1="8" x2="12.01" y2="8"/>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/LogInIcon.vue b/src/components/icon/LogInIcon.vue
index 8ce94aa..b91550b 100644
--- a/src/components/icon/LogInIcon.vue
+++ b/src/components/icon/LogInIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -11,3 +6,8 @@ export default defineComponent({});
<line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/PlayIcon.vue b/src/components/icon/PlayIcon.vue
index f54d203..7e5d823 100644
--- a/src/components/icon/PlayIcon.vue
+++ b/src/components/icon/PlayIcon.vue
@@ -1,11 +1,11 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="-2 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/SearchIcon.vue b/src/components/icon/SearchIcon.vue
index 1418af5..40b8226 100644
--- a/src/components/icon/SearchIcon.vue
+++ b/src/components/icon/SearchIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -10,3 +5,8 @@ export default defineComponent({});
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
diff --git a/src/components/icon/SettingsIcon.vue b/src/components/icon/SettingsIcon.vue
index e23ba20..bea2a3f 100644
--- a/src/components/icon/SettingsIcon.vue
+++ b/src/components/icon/SettingsIcon.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
-export default defineComponent({});
-</script>
-
<template>
<svg viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -20,3 +15,8 @@ export default defineComponent({});
2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:56:29 +0000