Sort tracks (#75)

theatre/core/src/sheetObjects/SheetObjectTemplate.ts

@@ -25,6 +25,7 @@ import SheetObject from './SheetObject'
 import logger from '@theatre/shared/logger'
 import type {PropTypeConfig_Compound} from '@theatre/core/propTypes'
 import {getPropConfigByPath} from '@theatre/shared/propTypes/utils'
+import getOrderingOfPropTypeConfig from './getOrderingOfPropTypeConfig'
 
 export type IPropPathToTrackIdTree = {
   [key in string]?: SequenceTrackId | IPropPathToTrackIdTree
@@ -103,8 +104,8 @@ export default class SheetObjectTemplate {
   }
 
   /**
-   * Filters through the sequenced tracks those tracks who are valid
-   * according to the object's prop types.
+   * Filters through the sequenced tracks and returns those tracks who are valid
+   * according to the object's prop types, then sorted in the same order as the config
    *
    * Returns an array.
    */
@@ -121,6 +122,8 @@ export default class SheetObjectTemplate {
             .trackIdByPropPath,
         )
 
+        if (!trackIdByPropPath) return emptyArray as $IntentionalAny
+
         const arrayOfIds: Array<{
           pathToProp: PathToProp
           trackId: SequenceTrackId
@@ -141,6 +144,22 @@ export default class SheetObjectTemplate {
           arrayOfIds.push({pathToProp, trackId: trackId!})
         }
 
+        const mapping = getOrderingOfPropTypeConfig(this.config)
+
+        arrayOfIds.sort((a, b) => {
+          const pathToPropA = a.pathToProp
+          const pathToPropB = b.pathToProp
+
+          const indexA = mapping.get(JSON.stringify(pathToPropA))!
+          const indexB = mapping.get(JSON.stringify(pathToPropB))!
+
+          if (indexA > indexB) {
+            return 1
+          }
+
+          return -1
+        })
+
         if (arrayOfIds.length === 0) {
           return emptyArray as $IntentionalAny
         } else {

theatre/core/src/sheetObjects/getOrderingOfPropTypeConfig.ts

@@ -0,0 +1,71 @@
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import type {
+  PropTypeConfig,
+  PropTypeConfig_Compound,
+} from '@theatre/core/propTypes'
+import {isPropConfigComposite} from '@theatre/shared/propTypes/utils'
+
+type EncodedPropPath = string
+type Order = number
+
+type Mapping = Map<EncodedPropPath, Order>
+
+const cache = new WeakMap<PropTypeConfig_Compound<$IntentionalAny>, Mapping>()
+
+export default function getOrderingOfPropTypeConfig(
+  config: PropTypeConfig_Compound<$IntentionalAny>,
+): Mapping {
+  const existing = cache.get(config)
+  if (existing) return existing
+
+  const map: Mapping = new Map()
+  cache.set(config, map)
+
+  iterateOnCompound([], config, map)
+
+  return map
+}
+
+function iterateOnCompound(
+  path: string[],
+  config: PropTypeConfig_Compound<$IntentionalAny>,
+  map: Mapping,
+) {
+  for (const [key, subConf] of Object.entries(config.props)) {
+    if (!isPropConfigComposite(subConf)) {
+      const subPath = [...path, key]
+      map.set(JSON.stringify(subPath), map.size)
+      iterateOnAny(subPath, subConf, map)
+    }
+  }
+
+  for (const [key, subConf] of Object.entries(config.props)) {
+    if (isPropConfigComposite(subConf)) {
+      const subPath = [...path, key]
+      map.set(JSON.stringify(subPath), map.size)
+      iterateOnAny(subPath, subConf, map)
+    }
+  }
+}
+
+// function iterateOnEnum(
+//   path: string[],
+//   config: PropTypeConfig_Enum,
+//   map: Mapping,
+// ) {
+//   for (const [key, subConf] of Object.entries(config.cases)) {
+//     const subPath = [...path, key]
+//     map.set(JSON.stringify(subPath), map.size)
+//     iterateOnAny(subPath, subConf, map)
+//   }
+// }
+
+function iterateOnAny(path: string[], config: PropTypeConfig, map: Mapping) {
+  if (config.type === 'compound') {
+    iterateOnCompound(path, config, map)
+  } else if (config.type === 'enum') {
+    throw new Error(`Enums aren't supported yet`)
+  } else {
+    map.set(JSON.stringify(path), map.size)
+  }
+}

theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts

@@ -4,7 +4,6 @@ import type {
   PropTypeConfig_AllPrimitives,
   PropTypeConfig_Compound,
 } from '@theatre/core/propTypes'
-import {isPropConfigComposite} from '@theatre/shared/propTypes/utils'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import type {IPropPathToTrackIdTree} from '@theatre/core/sheetObjects/SheetObjectTemplate'
 import type Sheet from '@theatre/core/sheets/Sheet'
@@ -127,11 +126,6 @@ export const calculateSequenceEditorTree = (
       level + 1,
     )
 
-    // for (const [propKey, propConfig] of Object.entries(
-    //   sheetObject.template.config.props.props,
-    // )) {
-    //   addProp(sheetObject, [propKey], propConfig, row.children, level + 1)
-    // }
     row.heightIncludingChildren = topSoFar - row.top
   }
 
@@ -147,20 +141,6 @@ export const calculateSequenceEditorTree = (
   ) {
     for (const [propKey, setupOrSetups] of Object.entries(trackSetups)) {
       const propConfig = parentPropConfig.props[propKey]
-      if (isPropConfigComposite(propConfig)) continue
-      addProp(
-        sheetObject,
-        setupOrSetups!,
-        [...pathSoFar, propKey],
-        propConfig,
-        arrayOfChildren,
-        level,
-      )
-    }
-
-    for (const [propKey, setupOrSetups] of Object.entries(trackSetups)) {
-      const propConfig = parentPropConfig.props[propKey]
-      if (!isPropConfigComposite(propConfig)) continue
       addProp(
         sheetObject,
         setupOrSetups!,
@@ -276,31 +256,3 @@ export const calculateSequenceEditorTree = (
 
   return tree
 }
-
-type _Info = {
-  propKey: string
-  propConfig: PropTypeConfig
-  trackIdOrMapping: SequenceTrackId | IPropPathToTrackIdTree
-}
-
-function sortTrackSetups(
-  trackMapping: IPropPathToTrackIdTree,
-  rootPropConfig: $FixMe,
-): Array<_Info> {
-  const all: _Info[] = Object.entries(trackMapping).map(
-    ([propKey, trackIdOrMapping]) => ({
-      propKey,
-      trackIdOrMapping: trackIdOrMapping!,
-      propConfig: rootPropConfig[propKey],
-    }),
-  )
-
-  const primitives = all.filter(
-    ({propConfig}) => !isPropConfigComposite(propConfig),
-  )
-  const composites = all.filter(({propConfig}) =>
-    isPropConfigComposite(propConfig),
-  )
-
-  return [...primitives, ...composites]
-}