perf(timeline): mark some properties as non reactive (such as PIXI objects)

Author: Akryum

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

@@ -478,17 +478,26 @@ export default defineComponent({
 
       if (!event.layer.groupsOnly || (event.group?.firstEvent === event)) {
         eventContainer = new PIXI.Container()
-        event.container = eventContainer
+        Object.defineProperty(event, 'container', {
+          value: eventContainer,
+          writable: true,
+          configurable: false,
+        })
         layerContainer.addChild(eventContainer)
       }
 
       // Group graphics
       if (event.group) {
         if (event.group.firstEvent === event) {
           const groupG = new PIXI.Graphics()
-          event.groupG = groupG
+          Object.defineProperty(event, 'groupG', {
+            value: groupG,
+            writable: true,
+            configurable: false,
+          })
           eventContainer.addChild(groupG)
           event.group.oldSize = null
+          event.group.oldSelected = null
           drawEventGroup(event)
         } else if (event.group.lastEvent === event) {
           drawEventGroup(event.group.firstEvent)
@@ -500,7 +509,11 @@ export default defineComponent({
       // Graphics
       if (eventContainer) {
         const g = new PIXI.Graphics()
-        event.g = g
+        Object.defineProperty(event, 'g', {
+          value: g,
+          writable: true,
+          configurable: false,
+        })
         eventContainer.addChild(g)
       }
 

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

@@ -19,6 +19,7 @@ import {
 import { resetTime } from './reset'
 import { takeScreenshot } from './screenshot'
 import { addGroupAroundPosition } from './layers'
+import { EventGroup } from '.'
 
 const AUTOSCROLL_DURATION = 10000
 
@@ -42,7 +43,6 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
     Object.defineProperty(event, key, {
       value: eventOptions[key],
       writable: true,
-      enumerable: true,
       configurable: false,
     })
   }
@@ -64,13 +64,21 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
     let group = layer.groupsMap[event.groupId]
     if (!group) {
       group = layer.groupsMap[event.groupId] = {
-        id: event.groupId,
         events: [],
         firstEvent: event,
         lastEvent: event,
-        y: 0,
         duration: 0,
+      } as EventGroup
+      const descriptor = {
+        writable: true,
+        configurable: false,
       }
+      Object.defineProperties(group, {
+        id: { value: event.groupId, ...descriptor },
+        y: { value: 0, ...descriptor },
+        oldSize: { value: null, ...descriptor },
+        oldSelected: { value: null, ...descriptor },
+      })
       layer.groups.push(group)
     }
     if (layer.groupsOnly) {

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

@@ -18,17 +18,28 @@ import {
 import { useRouter } from '@front/util/router'
 
 export function layerFactory (options: LayerFromBackend): Layer {
-  return {
+  const result = {} as Layer
+  const nonReactiveOptions = {
     ...options,
-    events: [],
     eventsMap: {},
-    groups: [],
     groupsMap: {},
+    groupPositionCache: {},
+  }
+  for (const key in nonReactiveOptions) {
+    Object.defineProperty(result, key, {
+      value: nonReactiveOptions[key],
+      writable: true,
+      configurable: false,
+    })
+  }
+  Object.assign(result, {
+    events: [],
+    groups: [],
     height: 1,
     lastInspectedEvent: null,
     loaded: false,
-    groupPositionCache: {},
-  }
+  })
+  return result
 }
 
 export function getLayers (appId: string) {