diff options
| -rw-r--r-- | src/App.vue | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/src/App.vue b/src/App.vue index 3de3ac2..21d4b55 100644 --- a/src/App.vue +++ b/src/App.vue @@ -47,8 +47,9 @@ import {RBTree, rbtree_shallow_copy} from './rbtree'; // Refs const contentAreaRef = ref(null as HTMLElement | null); -// Global store +// Global constants const store = useStore(); +const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight; // For content sizing (used to decide between horizontal and vertical mode) const contentWidth = ref(0); @@ -58,6 +59,11 @@ function updateAreaDims(){ let contentAreaEl = contentAreaRef.value!; contentWidth.value = contentAreaEl.offsetWidth; contentHeight.value = contentAreaEl.offsetHeight; + // Check for too many timelines + const majorLen = vert.value ? contentWidth.value : contentHeight.value; + while (majorLen / timelines.value.length < MIN_TIMELINE_BREADTH && timelines.value.length > 1){ + timelines.value.pop(); + } } onMounted(updateAreaDims) @@ -82,10 +88,9 @@ function onTimelineChg(state: TimelineState, idx: number){ } // For timeline addition/removal -const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight; function onTimelineAdd(){ - if (vert.value && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH || - !vert.value && contentHeight.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH){ + const majorLen = vert.value ? contentWidth.value : contentHeight.value; + if (majorLen && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH){ console.log('Reached timeline minimum breadth'); return; } |