feat(timeline): save layer selection

Author: Akryum

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -9,7 +9,7 @@ import TimelineEventInspector from './TimelineEventInspector.vue'
 import AskScreenshotPermission from './AskScreenshotPermission.vue'
 
 import { computed, onMounted, ref, watch, defineComponent, onUnmounted } from '@vue/composition-api'
-import { SharedData } from '@vue-devtools/shared-utils'
+import { getStorage, SharedData } from '@vue-devtools/shared-utils'
 import { onSharedDataChange } from '@front/util/shared-data'
 import { formatTime } from '@front/util/format'
 import { useFonts } from '@front/util/fonts'
@@ -283,6 +283,20 @@ export default defineComponent({
 
     const { loaded: fontsLoaded } = useFonts()
 
+    // Restore layer selection
+
+    watch(layers, value => {
+      if (!selectedLayer.value && value.length) {
+        const layerId = getStorage('selected-layer-id')
+        if (layerId) {
+          const layer = value.find(layer => layer.id === layerId)
+          if (layer) {
+            selectLayer(layer)
+          }
+        }
+      }
+    })
+
     return {
       fontsLoaded,
       startTime,

packages/app-frontend/src/features/timeline/composable/events.ts

@@ -1,5 +1,5 @@
 import { onUnmounted, computed, watch } from '@vue/composition-api'
-import { BridgeEvents } from '@vue-devtools/shared-utils'
+import { BridgeEvents, setStorage } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'
 import { formatTime } from '@front/util/format'
 import {
@@ -148,4 +148,5 @@ function loadEvent (id: TimelineEvent['id']) {
 export function selectEvent (event: TimelineEvent) {
   selectedEvent.value = inspectedEvent.value = event
   selectedLayer.value = event.layer
+  setStorage('selected-layer-id', event.layer.id)
 }

packages/app-frontend/src/features/timeline/composable/layers.ts

@@ -87,6 +87,7 @@ export function useLayers () {
     let event = selectedLayer.value !== layer ? layer.lastInspectedEvent : null
 
     selectedLayer.value = layer
+    setStorage('selected-layer-id', layer.id)
 
     if (!event) event = layer.events.length ? layer.events[layer.events.length - 1] : null
     inspectedEvent.value = event