diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-10-11 00:47:29 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-10-11 00:47:29 +1100 |
| commit | 314c1c95f77d6e4be559df3a58278f6c37f61e5c (patch) | |
| tree | b8906e1190aff13c411299820cd289dda65baba4 | |
| parent | 6a46c220406477914c01a77c47016575aab8bdde (diff) | |
Fix regression where baseline timespans move on startup
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 6 |
2 files changed, 7 insertions, 5 deletions
diff --git a/src/App.vue b/src/App.vue index 308137b..f32b367 100644 --- a/src/App.vue +++ b/src/App.vue @@ -48,10 +48,8 @@ const contentAreaRef = ref(null as HTMLElement | null); const store = useStore(); // For content sizing (used to decide between horizontal and vertical mode) -const contentWidth = ref(window.innerWidth); -const contentHeight = ref(window.innerHeight); - // Setting this and contentWidth to 0 makes it likely that 'vert' will change on startup, - // and trigger unwanted transitions (like baseline spans changing size) +const contentWidth = ref(0); +const contentHeight = ref(0); const vert = computed(() => contentHeight.value > contentWidth.value); function updateAreaDims(){ let contentAreaEl = contentAreaRef.value!; diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 3f51a86..081225c 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -37,6 +37,10 @@ const periods: Ref<Period[]> = ref([ {label: 'Three', len: 1}, ]); +// For skipping transitions on startup +const skipTransition = ref(true); +onMounted(() => setTimeout(() => {skipTransition.value = false}, 100)); + // For size tracking (used to prevent time spans shrinking below 1 pixel) const width = ref(0); const height = ref(0); @@ -89,7 +93,7 @@ function spanStyles(range: TimelineRange){ } return { ...styles, - transition: 'all 300ms ease-out', + transition: skipTransition.value ? 'none' : 'all 300ms ease-out', color: 'black', backgroundColor: store.color.alt, opacity: 0.3, |