From 314c1c95f77d6e4be559df3a58278f6c37f61e5c Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Tue, 11 Oct 2022 00:47:29 +1100 Subject: Fix regression where baseline timespans move on startup --- src/App.vue | 6 ++---- 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 = 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, -- cgit v1.2.3