diff --git a/theatre/core/src/sheetObjects/SheetObjectTemplate.ts b/theatre/core/src/sheetObjects/SheetObjectTemplate.ts index 92d5cd8..06cd475 100644 --- a/theatre/core/src/sheetObjects/SheetObjectTemplate.ts +++ b/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 { diff --git a/theatre/core/src/sheetObjects/getOrderingOfPropTypeConfig.ts b/theatre/core/src/sheetObjects/getOrderingOfPropTypeConfig.ts new file mode 100644 index 0000000..10ce57a --- /dev/null +++ b/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 + +const cache = new WeakMap, 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) + } +} diff --git a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts b/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts index 2bdad10..b5c32f5 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/layout/tree.ts +++ b/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] -}