fix(timeline): layer height changes glitching

Akryum · Akryum · commit 9cb692b3a0d0 · 2022-03-29T22:20:18.000+02:00
diff --git a/packages/app-frontend/src/features/timeline/TimelineView.vue b/packages/app-frontend/src/features/timeline/TimelineView.vue
@@ -373,7 +373,32 @@ export default defineComponent({
       resetLayers()
     })
 
-    const totalLayersHeight = computed(() => layers.value.reduce((sum, layer) => sum + layer.height, 0))
+    // Stabilize layer height changes
+
+    let applyLayersNewHeightTimer
+
+    function applyLayersNewHeight () {
+      clearTimeout(applyLayersNewHeightTimer)
+      applyLayersNewHeightTimer = setTimeout(() => {
+        updateLayerPositions()
+        drawLayerBackgroundEffects()
+      }, 0)
+    }
+
+    const layerHeightUpdateTimers: Record<string, any> = {}
+
+    function queueLayerHeightUpdate (layer: Layer) {
+      clearTimeout(layerHeightUpdateTimers[layer.id])
+      const apply = () => {
+        layer.height = layer.newHeight
+        applyLayersNewHeight()
+      }
+      if (layer.height < layer.newHeight) {
+        apply()
+      } else {
+        layerHeightUpdateTimers[layer.id] = setTimeout(apply, 500)
+      }
+    }
 
     // Layer hover
 
@@ -600,12 +625,11 @@ export default defineComponent({
         }
 
         // Might update the layer's height as well
-        if (y + 1 > event.layer.height) {
-          const oldLayerHeight = event.layer.height
-          const newLayerHeight = event.layer.height = y + 1
+        if (y + 1 > event.layer.newHeight) {
+          const oldLayerHeight = event.layer.newHeight
+          const newLayerHeight = event.layer.newHeight = y + 1
           if (oldLayerHeight !== newLayerHeight) {
-            updateLayerPositions()
-            drawLayerBackgroundEffects()
+            queueLayerHeightUpdate(event.layer)
           }
         }
       }
@@ -740,7 +764,7 @@ export default defineComponent({
     function updateEvents () {
       for (const layer of layers.value) {
         if (!layer.groupsOnly) {
-          layer.height = 1
+          layer.newHeight = 1
         }
       }
       updateLayerPositions()
diff --git a/packages/app-frontend/src/features/timeline/composable/layers.ts b/packages/app-frontend/src/features/timeline/composable/layers.ts
@@ -22,6 +22,7 @@ export function layerFactory (options: LayerFromBackend): Layer {
   const result = {} as Layer
   addNonReactiveProperties(result, {
     ...options,
+    newHeight: 1,
     eventsMap: {},
     groupsMap: {},
     groupPositionCache: {},
diff --git a/packages/app-frontend/src/features/timeline/composable/store.ts b/packages/app-frontend/src/features/timeline/composable/store.ts
@@ -61,6 +61,7 @@ export interface Layer extends LayerFromBackend {
   groupsMap: Record<EventGroup['id'], EventGroup>
   groupPositionCache: Record<number, EventGroup[]>
   height: number
+  newHeight: number
   lastInspectedEvent: TimelineEvent
   loaded: boolean
 }

Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,7 @@ export interface Layer extends LayerFromBackend {`
`61`	`61`	`groupsMap: Record<EventGroup['id'], EventGroup>`
`62`	`62`	`groupPositionCache: Record<number, EventGroup[]>`
`63`	`63`	`height: number`
	`64`	`+ newHeight: number`
`64`	`65`	`lastInspectedEvent: TimelineEvent`
`65`	`66`	`loaded: boolean`
`66`	`67`	`}`