feat(timeline): save layer selection

vuejs · Mar 11, 2022 · 1b82544 · 1b82544
1 parent a0243bd
commit 1b82544
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/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,

diff --git a/packages/app-frontend/src/features/timeline/composable/events.ts b/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)
 }
diff --git a/packages/app-frontend/src/features/timeline/composable/layers.ts b/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