diff options
Diffstat (limited to 'src/components/AncestryBar.vue')
| -rw-r--r-- | src/components/AncestryBar.vue | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index 8eabf22..762fa99 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -8,51 +8,56 @@ <script setup lang="ts"> import {ref, computed, watch, onMounted, nextTick, PropType} from 'vue'; + import TolTile from './TolTile.vue'; import {TolMap} from '../tol'; import {LayoutNode} from '../layout'; import {useStore} from '../store'; -// Refs const rootRef = ref(null as HTMLDivElement | null); -// Global store const store = useStore(); -// Props + events const props = defineProps({ nodes: {type: Array as PropType<LayoutNode[]>, required: true}, vert: {type: Boolean, default: false}, breadth: {type: Number, required: true}, tolMap: {type: Object as PropType<TolMap>, required: true}, }); + const emit = defineEmits(['ancestor-click', 'info-click']); -// Computed prop data for display +// ========== Computed prop data for display ========== + const imgSz = computed(() => props.breadth - store.lytOpts.tileSpacing - store.scrollGap // Intentionally omitting extra tileSpacing, to allow for scrollGap with less image shrinkage ); + const dummyNodes = computed(() => props.nodes.map(n => { let newNode = new LayoutNode(n.name, []); newNode.dims = [imgSz.value, imgSz.value]; return newNode; })); -// Click handling +// ========== Click handling ========== + function onTileClick(node: LayoutNode){ emit('ancestor-click', node); } + function onInfoIconClick(data: string){ emit('info-click', data); } -// Scroll handling +// ========== Scroll handling ========== + function onWheelEvt(evt: WheelEvent){ // For converting vertical scrolling to horizontal if (!props.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){ rootRef.value!.scrollLeft -= (evt.deltaY > 0 ? -30 : 30); } } + function scrollToEnd(){ let el = rootRef.value; if (el != null){ @@ -63,6 +68,7 @@ function scrollToEnd(){ } } } + watch(props.nodes, () => { nextTick(() => scrollToEnd()); }); @@ -71,7 +77,8 @@ watch(() => props.vert, () => { }); onMounted(() => scrollToEnd()); -// Styles +// ========== For styling ========== + const styles = computed(() => ({ // For child layout display: 'flex', |
