diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AncestryBar.vue | 8 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 2 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 3 | ||||
| -rw-r--r-- | src/components/TolTile.vue (renamed from src/components/Tile.vue) | 6 |
4 files changed, 10 insertions, 9 deletions
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index 6f2d37c..3cfd116 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -1,6 +1,6 @@ <template> <div :style="styles" @wheel.stop="onWheelEvt"> - <tile v-for="(node, idx) in dummyNodes" :key="node.name" class="shrink-0" + <tol-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> @@ -8,7 +8,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; -import Tile from './Tile.vue'; +import TolTile from './TolTile.vue'; import {TolMap} from '../tol'; import {LayoutNode, LayoutOptions} from '../layout'; import {UiOptions} from '../lib'; @@ -28,7 +28,7 @@ export default defineComponent({ return this.breadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap; // Intentionally omitting extra tileSpacing, to allow for scrollGap with less image shrinkage }, - dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tile>s + dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tol-tile>s return this.nodes.map(n => { let newNode = new LayoutNode(n.name, []); newNode.dims = [this.imgSz, this.imgSz]; @@ -86,7 +86,7 @@ export default defineComponent({ mounted(){ this.scrollToEnd(); }, - components: {Tile, }, + components: {TolTile, }, emits: ['ancestor-click', 'info-click', ], }); </script> diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index e90707a..5d6345e 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -9,7 +9,7 @@ <search-icon @click.stop="onSearch" class="w-8 h-8"/> </div> <div class="absolute top-[100%] w-full overflow-hidden" :style="suggContainerStyles"> - <div v-for="(sugg, idx) of searchSuggs" + <div v-for="(sugg, idx) of searchSuggs" :key="sugg.name + '|' + sugg.canonicalName" :style="{backgroundColor: idx == focusedSuggIdx ? uiOpts.bgColorAltDark : uiOpts.bgColorAlt}" class="border-b p-1 px-2 hover:underline hover:cursor-pointer flex" @click="resolveSearch(sugg.canonicalName || sugg.name)"> diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 053604c..ca224bf 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -29,7 +29,8 @@ <div> (This is a compound node. The details below describe two descendants) </div> </div> </div> - <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])" class="border-t border-stone-400 p-2 md:p-3 clear-both"> + <div v-for="idx in (nodes.length == 1 ? [0] : [0, 1])" :key="nodes[idx]!.otolId!" + class="border-t border-stone-400 p-2 md:p-3 clear-both"> <h1 v-if="nodes.length > 1" class="text-center font-bold mb-1"> {{getDisplayName(subNames![idx], nodes[idx])}} </h1> diff --git a/src/components/Tile.vue b/src/components/TolTile.vue index 2edd531..afb6616 100644 --- a/src/components/Tile.vue +++ b/src/components/TolTile.vue @@ -36,7 +36,7 @@ <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" + <tol-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" @@ -550,13 +550,13 @@ export default defineComponent({ } }, }, - name: 'tile', // Note: Need this to use self in template + name: 'tol-tile', // Note: Need this to use self in template components: {InfoIcon, }, emits: ['leaf-click', 'nonleaf-click', 'leaf-click-held', 'nonleaf-click-held', 'info-click', ], }); </script> -<style> +<style scoped> /* For making a parent-swept-area div look continuous with the tile div */ .hide-right-edge::before { content: ''; |
