@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/SequenceEditorPanel/VerticalScrollContainer.js

@@ -0,0 +1,42 @@
+import noop from '@tomorrowevening/theatre-shared/utils/noop';
+import React, { createContext, useCallback, useContext, useRef } from 'react';
+import styled from 'styled-components';
+import { zIndexes } from './SequenceEditorPanel';
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  z-index: ${() => zIndexes.scrollableArea};
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+`;
+const ctx = createContext(noop);
+/**
+ * See {@link VerticalScrollContainer} and references for how to use this.
+ */
+export const useReceiveVerticalWheelEvent = () => useContext(ctx);
+/**
+ * This is used in the sequence editor where we block wheel events to handle
+ * pan/zoom on the time axis. The issue this solves, is that when blocking those
+ * wheel events, we prevent the vertical scroll events from being fired. This container
+ * comes with a context and a hook (see {@link useReceiveVerticalWheelEvent}) that allows
+ * the code that traps the wheel events to pass them to the vertical scroller root, which
+ * we then use to manually dispatch scroll events.
+ */
+const VerticalScrollContainer = (props) => {
+    const ref = useRef(null);
+    const receiveVerticalWheelEvent = useCallback((event) => {
+        ref.current.scrollBy(0, event.deltaY);
+    }, []);
+    return (React.createElement(ctx.Provider, { value: receiveVerticalWheelEvent },
+        React.createElement(Container, { ref: ref }, props.children)));
+};
+export default VerticalScrollContainer;

package/dist/panels/SequenceEditorPanel/layout/layout.d.ts

@@ -0,0 +1,146 @@
+import type Sheet from '@tomorrowevening/theatre-core/sheets/Sheet';
+import type useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import type { SheetAddress } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { IRange, PositionInScreenSpace, StrictRecord } from '@tomorrowevening/theatre-shared/utils/types';
+import type { Prism, Pointer } from '@tomorrowevening/theatre-dataverse';
+import { Atom } from '@tomorrowevening/theatre-dataverse';
+import type { SequenceEditorTree } from './tree';
+import type { KeyframeId, ObjectAddressKey, SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+type DimsOfPanelPart = {
+    width: number;
+    height: number;
+    /**
+     * In absolute pixels, relative to getBoundingClientRect()
+     */
+    screenX: PositionInScreenSpace;
+    /**
+     * In absolute pixels, relative to getBoundingClientRect()
+     */
+    screenY: PositionInScreenSpace;
+};
+export type PanelDims = {
+    width: number;
+    height: number;
+    widthWithoutBorder: number;
+    heightWithoutBorder: number;
+    screenX: PositionInScreenSpace;
+    screenY: PositionInScreenSpace;
+};
+export type DopeSheetSelection = {
+    type: 'DopeSheetSelection';
+    byObjectKey: StrictRecord<ObjectAddressKey, {
+        byTrackId: StrictRecord<SequenceTrackId, {
+            byKeyframeId: StrictRecord<KeyframeId, true>;
+        }>;
+    }>;
+    getDragHandlers(origin: SheetAddress & {
+        positionAtStartOfDrag: number;
+        domNode: Element;
+    }): Omit<Parameters<typeof useDrag>[1], 'onClick'>;
+    delete(): void;
+};
+/**
+ * @remarks
+ * In order to lay out the playhead and the keyframes on the sequence editor,
+ * we map their position to different spaces based on the zoom and scroll.
+ *
+ * These spaces are called `unitSpace`, `scaledSpace`, and `clippedSpace`.
+ *
+ * * `unitSpace` is the space the sequence is in. So, `5 seconds` in unitSpace
+ * would equal `5`.
+ *
+ * * `scaledSpace` basically takes into account zoom level, but not scroll.
+ *
+ * * `clippedSpace` is just like `scaledSpace`, but also accounts for scroll.
+ *
+ *
+ *                           2 seconds ─┐                      #
+ *                                      ▼                      # 2 seconds would represent as `2` in unitSpace
+ * `unitSpace`              00    01    02    03    04    05   # regardless of zoom or scroll.
+ *                                      |                      #
+ * ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
+ *                                      |                      #
+ *                                      ▼                      # If zoom=1, then scaledSpace acts the same as
+ * `scaledSpace`            00    01    02    03    04    05   # unitSpace.
+ * (zoom=1)                             |                      #
+ * ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
+ *                                ┌─────┘                      #
+ *                                ▼     |                      # We're zoomed out (zoom=0.5), so 2 seconds
+ * `scaledSpace`            00 01 02 03 04 05 06 07 08 09 10   # falls on the position of 1 second (2 * 0.5 = 1).
+ *  (zoom=0.5)                    |     |                      #
+ * ───────────────────────────────┼─────┼───────────────────────────────────────────────────────────────────────
+ *                                └─────┼───────────┐          #
+ *                                      |           ▼          # We're zoomed in (zoom=2), so 2 seconds
+ * `scaledSpace`            00          01          02         # falls on the position of 4 seconds (2 * 2 = 4).
+ *  (zoom=2)                            |           |          #
+ * ─────────────────────────────────────┼───────────┼───────────────────────────────────────────────────────────
+ *                                      ┌───────────┘          #
+ *                                      │                      # With no zoom or scroll, clippedSpace is
+ * `clippedSpace`                       ▼                      # just like unitSpace.
+ *  (zoom=1, scroll=0)      00    01    02    03    04    05   #
+ * ─────────────────────────────────────┼───────────────────────────────────────────────────────────────────────
+ *                                      |                      #
+ *                                ┌─────┘                      # No zoom, but we're scrolled in by 1 seconds,
+ * `clippedSpace`                 ▼     |                      # so everything shifts 1s back.
+ *  (zoom=1, scroll=1)      01    02    03    04    05    06   #
+ * ────────────────────────────────┼────┼───────────────────────────────────────────────────────────────────────
+ *                                 └────┐                      #
+ *                                      ▼                      # Zoomed in 2x with 1s of scroll.
+ * `clippedSpace` (zoom=2,  01          02          03         #
+ *               scroll=1)                                     #
+ * ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
+ *
+ */
+export type SequenceEditorPanelLayout = {
+    sheet: Sheet;
+    tree: SequenceEditorTree;
+    panelDims: PanelDims;
+    leftDims: DimsOfPanelPart;
+    rightDims: DimsOfPanelPart;
+    dopeSheetDims: DimsOfPanelPart;
+    graphEditorDims: DimsOfPanelPart & {
+        isAvailable: boolean;
+        isOpen: boolean;
+        padding: {
+            top: number;
+            bottom: number;
+        };
+    };
+    horizontalScrollbarDims: {
+        bottom: number;
+    };
+    graphEditorVerticalSpace: {
+        space: number;
+        fromExtremumSpace(e: number): number;
+        toExtremumSpace(e: number): number;
+    };
+    seeker: {
+        isSeeking: boolean;
+        setIsSeeking: (isSeeking: boolean) => void;
+    };
+    unitSpace: {};
+    scaledSpace: {
+        /**
+         * TODO - scaledSpace with and without leftPadding are two different spaces. See if we can divide them so
+         */
+        leftPadding: number;
+        fromUnitSpace(u: number): number;
+        toUnitSpace(s: number): number;
+    };
+    clippedSpace: {
+        /**
+         * The width of the visible area of the sequence (pretty much the right side of the panel)
+         */
+        width: number;
+        fromUnitSpace(u: number): number;
+        toUnitSpace(c: number): number;
+        range: IRange;
+        setRange(range: IRange): void;
+    };
+    selectionAtom: Atom<{
+        current?: DopeSheetSelection;
+    }>;
+};
+export declare function sequenceEditorPanelLayout(sheet: Sheet, panelDimsP: Pointer<PanelDims>): Prism<Pointer<SequenceEditorPanelLayout>>;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/panels/SequenceEditorPanel/layout/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/layout/layout.ts"],"names":[],"mappings":"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"}

package/dist/panels/SequenceEditorPanel/layout/layout.js

@@ -0,0 +1,166 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import subPrism from '@tomorrowevening/theatre-shared/utils/subPrism';
+import { valToAtom } from '@tomorrowevening/theatre-shared/utils/valToAtom';
+import { Atom, prism, val } from '@tomorrowevening/theatre-dataverse';
+import { calculateSequenceEditorTree } from './tree';
+import { clamp } from 'lodash-es';
+// type UnitSpaceProression = number
+// type ClippedSpaceProgression = number
+/**
+ * This means the left side of the panel is 20% of its width, and the
+ * right side is 80%
+ */
+const panelSplitRatio = 0.2;
+const initialClippedSpaceRange = { start: 0, end: 10 };
+export function sequenceEditorPanelLayout(sheet, panelDimsP) {
+    const studio = getStudio();
+    const ahistoricStateP = studio.atomP.ahistoric.projects.stateByProjectId[sheet.address.projectId]
+        .stateBySheetId[sheet.address.sheetId];
+    const historicStateP = studio.atomP.historic.projects.stateByProjectId[sheet.address.projectId]
+        .stateBySheetId[sheet.address.sheetId];
+    return prism(() => {
+        const tree = subPrism('tree', () => calculateSequenceEditorTree(sheet, studio), []);
+        const panelDims = val(panelDimsP);
+        const graphEditorState = val(studio.atomP.historic.panels.sequenceEditor.graphEditor);
+        const selectedPropsByObject = val(historicStateP.sequenceEditor.selectedPropsByObject);
+        const graphEditorAvailable = !!selectedPropsByObject && Object.keys(selectedPropsByObject).length > 0;
+        const { leftDims, rightDims, graphEditorDims, dopeSheetDims, horizontalScrollbarDims, } = prism.memo('leftDims', () => {
+            const leftDims = {
+                width: Math.floor(panelDims.width * panelSplitRatio),
+                height: panelDims.height,
+                screenX: panelDims.screenX,
+                screenY: panelDims.screenY,
+            };
+            const rightDims = {
+                width: panelDims.width - leftDims.width,
+                height: panelDims.height,
+                screenX: (panelDims.screenX +
+                    leftDims.width),
+                screenY: panelDims.screenY,
+            };
+            const graphEditorOpen = graphEditorAvailable && graphEditorState?.isOpen === true;
+            const graphEditorHeight = Math.floor((graphEditorOpen
+                ? clamp(graphEditorState?.height ?? 0.5, 0.1, 0.7)
+                : 0) * panelDims.heightWithoutBorder);
+            const bottomHeight = 0 + graphEditorHeight;
+            const dopeSheetHeight = panelDims.height - bottomHeight;
+            const dopeSheetDims = {
+                width: panelDims.width,
+                height: dopeSheetHeight,
+                screenX: panelDims.screenX,
+                screenY: panelDims.screenY,
+            };
+            // const graphEditorHeight = panelDims.height - dopeSheetDims.height
+            const graphEditorDims = {
+                isAvailable: graphEditorAvailable,
+                isOpen: graphEditorOpen,
+                width: rightDims.width,
+                height: graphEditorHeight,
+                screenX: panelDims.screenX,
+                screenY: panelDims.screenY + dopeSheetHeight,
+                padding: {
+                    top: 20,
+                    bottom: 20,
+                },
+            };
+            const horizontalScrollbarDims = {
+                bottom: graphEditorOpen ? 0 : 0,
+            };
+            return {
+                leftDims,
+                rightDims,
+                graphEditorDims,
+                dopeSheetDims,
+                horizontalScrollbarDims,
+            };
+        }, [panelDims, graphEditorState, graphEditorAvailable]);
+        const graphEditorVerticalSpace = prism.memo('graphEditorVerticalSpace', () => {
+            const space = graphEditorDims.height -
+                graphEditorDims.padding.top -
+                graphEditorDims.padding.bottom;
+            return {
+                space,
+                fromExtremumSpace(ex) {
+                    return ex * space;
+                },
+                toExtremumSpace(s) {
+                    return s / space;
+                },
+            };
+        }, [graphEditorDims]);
+        const [isSeeking, setIsSeeking] = prism.state('isSeeking', false);
+        const seeker = {
+            isSeeking,
+            setIsSeeking,
+        };
+        const unitSpace = {};
+        const clippedSpaceRange = val(ahistoricStateP.sequence.clippedSpaceRange) ??
+            initialClippedSpaceRange;
+        const scaledSpace = prism.memo('scaledSpace', () => {
+            const unitsShownInClippedSpace = clippedSpaceRange.end - clippedSpaceRange.start;
+            const pixelsShownInClippedSpace = rightDims.width;
+            const unitToPixelRatio = unitsShownInClippedSpace / pixelsShownInClippedSpace;
+            const pixelToUnitRatio = pixelsShownInClippedSpace / unitsShownInClippedSpace;
+            return {
+                fromUnitSpace(u) {
+                    return u * pixelToUnitRatio;
+                },
+                toUnitSpace(s) {
+                    return s * unitToPixelRatio;
+                },
+                leftPadding: 10,
+            };
+        }, [clippedSpaceRange, rightDims.width]);
+        const setClippedSpaceRange = prism.memo('setClippedSpaceRange', () => {
+            return function setClippedSpaceRange(_range) {
+                studio.transaction(({ stateEditors }) => {
+                    const range = { ..._range };
+                    if (range.end <= range.start) {
+                        range.end = range.start + 1;
+                    }
+                    if (range.start < 0) {
+                        const length = range.end - range.start;
+                        range.start = 0;
+                        range.end = length;
+                    }
+                    stateEditors.studio.ahistoric.projects.stateByProjectId.stateBySheetId.sequence.clippedSpaceRange.set({ ...sheet.address, range });
+                });
+            };
+        }, []);
+        const clippedSpace = prism.memo('clippedSpace', () => {
+            return {
+                range: clippedSpaceRange,
+                width: rightDims.width,
+                fromUnitSpace(u) {
+                    return (scaledSpace.fromUnitSpace(u - clippedSpaceRange.start) +
+                        scaledSpace.leftPadding);
+                },
+                toUnitSpace(c) {
+                    return (scaledSpace.toUnitSpace(c - scaledSpace.leftPadding) +
+                        clippedSpaceRange.start);
+                },
+                setRange: setClippedSpaceRange,
+            };
+        }, [clippedSpaceRange, rightDims.width, scaledSpace, setClippedSpaceRange]);
+        const selectionAtom = prism.memo('selection.current', () => {
+            return new Atom({});
+        }, []);
+        const finalAtom = valToAtom('finalAtom', {
+            sheet,
+            tree,
+            panelDims,
+            leftDims,
+            rightDims,
+            dopeSheetDims,
+            horizontalScrollbarDims,
+            seeker,
+            unitSpace,
+            scaledSpace,
+            clippedSpace,
+            graphEditorDims,
+            graphEditorVerticalSpace,
+            selectionAtom,
+        });
+        return finalAtom.pointer;
+    });
+}

package/dist/panels/SequenceEditorPanel/layout/tree.d.ts

@@ -0,0 +1,71 @@
+import type { PropTypeConfig_AllSimples, PropTypeConfig_Compound } from '@tomorrowevening/theatre-core/propTypes';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { IPropPathToTrackIdTree } from '@tomorrowevening/theatre-core/sheetObjects/SheetObjectTemplate';
+import type Sheet from '@tomorrowevening/theatre-core/sheets/Sheet';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { SequenceTrackId, StudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { Studio } from '@tomorrowevening/theatre-studio/Studio';
+import type { UnknownValidCompoundProps } from '@tomorrowevening/theatre-core/propTypes/internals';
+/**
+ * Base "view model" for each row with common
+ * required information such as row heights & depth.
+ */
+export type SequenceEditorTree_Row<TypeName extends string> = {
+    /** type of this row, e.g. `"sheet"` or `"sheetObject"` */
+    type: TypeName;
+    /** Height of just the row in pixels */
+    nodeHeight: number;
+    /** Height of the row + height with children in pixels */
+    heightIncludingChildren: number;
+    /** Visual indentation */
+    depth: number;
+    /** A convenient studio sheet localized identifier for managing presence and ephemeral visual effects. */
+    sheetItemKey: StudioSheetItemKey;
+    /**
+     * This is a part of the tree, but it is not rendered at all,
+     * and it doesn't contribute to height.
+     *
+     * In the future, if we have a filtering mechanism like "show only position props",
+     * this would not be the place to make false, that node should just not be included
+     * in the tree at all, so it doesn't affect aggregate keyframes.
+     */
+    shouldRender: boolean;
+    /**
+     * Distance in pixels from the top of this row to the row container's top
+     * This can be used to help figure out what's being box selected (marquee).
+     */
+    top: number;
+    /** Row number (e.g. for correctly styling even / odd alternating styles) */
+    n: number;
+};
+export type SequenceEditorTree = SequenceEditorTree_Sheet;
+export type SequenceEditorTree_Sheet = SequenceEditorTree_Row<'sheet'> & {
+    sheet: Sheet;
+    isCollapsed: boolean;
+    children: SequenceEditorTree_SheetObject[];
+};
+export type SequenceEditorTree_SheetObject = SequenceEditorTree_Row<'sheetObject'> & {
+    isCollapsed: boolean;
+    sheetObject: SheetObject;
+    children: Array<SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp>;
+};
+export type SequenceEditorTree_PropWithChildren = SequenceEditorTree_Row<'propWithChildren'> & {
+    isCollapsed: boolean;
+    sheetObject: SheetObject;
+    propConf: PropTypeConfig_Compound<UnknownValidCompoundProps>;
+    pathToProp: PathToProp;
+    children: Array<SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp>;
+    trackMapping: IPropPathToTrackIdTree;
+};
+export type SequenceEditorTree_PrimitiveProp = SequenceEditorTree_Row<'primitiveProp'> & {
+    sheetObject: SheetObject;
+    pathToProp: PathToProp;
+    trackId: SequenceTrackId;
+    propConf: PropTypeConfig_AllSimples;
+};
+export type SequenceEditorTree_AllRowTypes = SequenceEditorTree_Sheet | SequenceEditorTree_SheetObject | SequenceEditorTree_PropWithChildren | SequenceEditorTree_PrimitiveProp;
+/**
+ * Must run inside prism()
+ */
+export declare const calculateSequenceEditorTree: (sheet: Sheet, studio: Studio) => SequenceEditorTree;
+//# sourceMappingURL=tree.d.ts.map

package/dist/panels/SequenceEditorPanel/layout/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/layout/tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AACrF,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,gEAAgE,CAAA;AAC1G,OAAO,KAAK,KAAK,MAAM,4CAA4C,CAAA;AACnE,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAC/E,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EACnB,MAAM,2CAA2C,CAAA;AAMlD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAA;AAClE,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,mDAAmD,CAAA;AAEhG;;;GAGG;AACH,MAAM,MAAM,sBAAsB,CAAC,QAAQ,SAAS,MAAM,IAAI;IAC5D,0DAA0D;IAC1D,IAAI,EAAE,QAAQ,CAAA;IACd,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,uBAAuB,EAAE,MAAM,CAAA;IAE/B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,yGAAyG;IACzG,YAAY,EAAE,kBAAkB,CAAA;IAChC;;;;;;;OAOG;IACH,YAAY,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,CAAA;AAEzD,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,CAAC,OAAO,CAAC,GAAG;IACvE,KAAK,EAAE,KAAK,CAAA;IACZ,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,8BAA8B,EAAE,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,8BAA8B,GACxC,sBAAsB,CAAC,aAAa,CAAC,GAAG;IACtC,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,EAAE,WAAW,CAAA;IACxB,QAAQ,EAAE,KAAK,CACb,mCAAmC,GAAG,gCAAgC,CACvE,CAAA;CACF,CAAA;AAEH,MAAM,MAAM,mCAAmC,GAC7C,sBAAsB,CAAC,kBAAkB,CAAC,GAAG;IAC3C,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,EAAE,WAAW,CAAA;IACxB,QAAQ,EAAE,uBAAuB,CAAC,yBAAyB,CAAC,CAAA;IAC5D,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,KAAK,CACb,mCAAmC,GAAG,gCAAgC,CACvE,CAAA;IACD,YAAY,EAAE,sBAAsB,CAAA;CACrC,CAAA;AAEH,MAAM,MAAM,gCAAgC,GAC1C,sBAAsB,CAAC,eAAe,CAAC,GAAG;IACxC,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,OAAO,EAAE,eAAe,CAAA;IACxB,QAAQ,EAAE,yBAAyB,CAAA;CACpC,CAAA;AAEH,MAAM,MAAM,8BAA8B,GACtC,wBAAwB,GACxB,8BAA8B,GAC9B,mCAAmC,GACnC,gCAAgC,CAAA;AAIpC;;GAEG;AACH,eAAO,MAAM,2BAA2B,UAC/B,KAAK,UACJ,MAAM,KACb,kBAgQF,CAAA"}

package/dist/panels/SequenceEditorPanel/layout/tree.js

@@ -0,0 +1,139 @@
+import { createStudioSheetItemKey } from '@tomorrowevening/theatre-shared/utils/ids';
+import { prism, val, pointerToPrism } from '@tomorrowevening/theatre-dataverse';
+import logger from '@tomorrowevening/theatre-shared/logger';
+import { titleBarHeight } from '@tomorrowevening/theatre-studio/panels/BasePanel/common';
+const HEIGHT_OF_ANY_TITLE = 28;
+/**
+ * Must run inside prism()
+ */
+export const calculateSequenceEditorTree = (sheet, studio) => {
+    prism.ensurePrism();
+    const rootShouldRender = true;
+    let topSoFar = titleBarHeight + (rootShouldRender ? HEIGHT_OF_ANY_TITLE : 0);
+    let nSoFar = 0;
+    const collapsableItemSetP = studio.atomP.ahistoric.projects.stateByProjectId[sheet.address.projectId]
+        .stateBySheetId[sheet.address.sheetId].sequence.collapsableItems;
+    const isCollapsedP = collapsableItemSetP.byId[createStudioSheetItemKey.forSheet()].isCollapsed;
+    const isCollapsed = pointerToPrism(isCollapsedP).getValue() ?? false;
+    const tree = {
+        type: 'sheet',
+        isCollapsed,
+        sheet,
+        children: [],
+        sheetItemKey: createStudioSheetItemKey.forSheet(),
+        shouldRender: rootShouldRender,
+        top: titleBarHeight,
+        depth: 0,
+        n: nSoFar,
+        nodeHeight: rootShouldRender ? HEIGHT_OF_ANY_TITLE : 0,
+        heightIncludingChildren: -1, // calculated below
+    };
+    if (rootShouldRender) {
+        nSoFar += 1;
+    }
+    for (const sheetObject of Object.values(val(sheet.objectsP))) {
+        if (sheetObject) {
+            addObject(sheetObject, tree.children, tree.depth + 1, rootShouldRender && !isCollapsed);
+        }
+    }
+    tree.heightIncludingChildren = topSoFar - tree.top;
+    function addObject(sheetObject, arrayOfChildren, level, shouldRender) {
+        const trackSetups = val(sheetObject.template.getMapOfValidSequenceTracks_forStudio());
+        const objectConfig = val(sheetObject.template.configPointer);
+        if (Object.keys(trackSetups).length === 0)
+            return;
+        const isCollapsedP = collapsableItemSetP.byId[createStudioSheetItemKey.forSheetObject(sheetObject)].isCollapsed;
+        const isCollapsed = pointerToPrism(isCollapsedP).getValue() ?? false;
+        const row = {
+            type: 'sheetObject',
+            isCollapsed,
+            sheetItemKey: createStudioSheetItemKey.forSheetObject(sheetObject),
+            shouldRender,
+            top: topSoFar,
+            children: [],
+            depth: level,
+            n: nSoFar,
+            sheetObject: sheetObject,
+            nodeHeight: shouldRender ? HEIGHT_OF_ANY_TITLE : 0,
+            heightIncludingChildren: -1, // calculated below
+        };
+        arrayOfChildren.push(row);
+        if (shouldRender) {
+            nSoFar += 1;
+            // As we add rows to the tree, top to bottom, we accumulate the pixel
+            // distance to the top of the tree from the bottom of the current row:
+            topSoFar += row.nodeHeight;
+        }
+        addProps(sheetObject, trackSetups, [], objectConfig, row.children, level + 1, shouldRender && !isCollapsed);
+        row.heightIncludingChildren = topSoFar - row.top;
+    }
+    function addProps(sheetObject, trackSetups, pathSoFar, parentPropConfig, arrayOfChildren, level, shouldRender) {
+        for (const [propKey, setupOrSetups] of Object.entries(trackSetups)) {
+            const propConfig = parentPropConfig.props[propKey];
+            addProp(sheetObject, setupOrSetups, [...pathSoFar, propKey], propConfig, arrayOfChildren, level, shouldRender);
+        }
+    }
+    function addProp(sheetObject, trackIdOrMapping, pathToProp, conf, arrayOfChildren, level, shouldRender) {
+        if (conf.type === 'compound') {
+            const trackMapping = trackIdOrMapping;
+            addProp_compound(sheetObject, trackMapping, conf, pathToProp, conf, arrayOfChildren, level, shouldRender);
+        }
+        else if (conf.type === 'enum') {
+            logger.warn('Prop type enum is not yet supported in the sequence editor');
+        }
+        else {
+            const trackId = trackIdOrMapping;
+            addProp_primitive(sheetObject, trackId, pathToProp, conf, arrayOfChildren, level, shouldRender);
+        }
+    }
+    function addProp_compound(sheetObject, trackMapping, propConf, pathToProp, conf, arrayOfChildren, level, shouldRender) {
+        const isCollapsedP = collapsableItemSetP.byId[createStudioSheetItemKey.forSheetObjectProp(sheetObject, pathToProp)].isCollapsed;
+        const isCollapsed = pointerToPrism(isCollapsedP).getValue() ?? false;
+        const row = {
+            type: 'propWithChildren',
+            isCollapsed,
+            propConf,
+            pathToProp,
+            sheetItemKey: createStudioSheetItemKey.forSheetObjectProp(sheetObject, pathToProp),
+            sheetObject: sheetObject,
+            shouldRender,
+            top: topSoFar,
+            children: [],
+            nodeHeight: shouldRender ? HEIGHT_OF_ANY_TITLE : 0,
+            heightIncludingChildren: -1,
+            depth: level,
+            trackMapping,
+            n: nSoFar,
+        };
+        arrayOfChildren.push(row);
+        if (shouldRender) {
+            topSoFar += row.nodeHeight;
+            nSoFar += 1;
+        }
+        addProps(sheetObject, trackMapping, pathToProp, conf, row.children, level + 1, 
+        // collapsed shouldn't render child props
+        shouldRender && !isCollapsed);
+        // }
+        row.heightIncludingChildren = topSoFar - row.top;
+    }
+    function addProp_primitive(sheetObject, trackId, pathToProp, propConf, arrayOfChildren, level, shouldRender) {
+        const row = {
+            type: 'primitiveProp',
+            propConf: propConf,
+            depth: level,
+            sheetItemKey: createStudioSheetItemKey.forSheetObjectProp(sheetObject, pathToProp),
+            sheetObject: sheetObject,
+            pathToProp,
+            shouldRender,
+            top: topSoFar,
+            nodeHeight: shouldRender ? HEIGHT_OF_ANY_TITLE : 0,
+            heightIncludingChildren: shouldRender ? HEIGHT_OF_ANY_TITLE : 0,
+            trackId,
+            n: nSoFar,
+        };
+        arrayOfChildren.push(row);
+        nSoFar += 1;
+        topSoFar += row.nodeHeight;
+    }
+    return tree;
+};

package/dist/panels/SequenceEditorPanel/whatPropIsHighlighted.d.ts

@@ -0,0 +1,10 @@
+import type { Prism } from '@tomorrowevening/theatre-dataverse';
+import type { PropAddress, WithoutSheetInstance } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { VoidFn } from '@tomorrowevening/theatre-shared/utils/types';
+/** constant global manager */
+export declare const whatPropIsHighlighted: {
+    replaceLock(address: WithoutSheetInstance<PropAddress>, cleanup: VoidFn): () => void;
+    getIsPropHighlightedD(address: WithoutSheetInstance<PropAddress>): Prism<PropHighlighted>;
+};
+export type PropHighlighted = 'self' | 'descendent' | null;
+//# sourceMappingURL=whatPropIsHighlighted.d.ts.map

package/dist/panels/SequenceEditorPanel/whatPropIsHighlighted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatPropIsHighlighted.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/SequenceEditorPanel/whatPropIsHighlighted.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,oCAAoC,CAAA;AAI7D,OAAO,KAAK,EACV,WAAW,EACX,oBAAoB,EACrB,MAAM,iDAAiD,CAAA;AAGxD,OAAO,KAAK,EAAkB,MAAM,EAAC,MAAM,6CAA6C,CAAA;AAGxF,8BAA8B;AAC9B,eAAO,MAAM,qBAAqB;yBAsBT,qBAAqB,WAAW,CAAC,WAAW,MAAM;mCAsB5D,qBAAqB,WAAW,CAAC,GACzC,MAAM,eAAe,CAAC;CA7C0C,CAAA;AAEvE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA"}

package/dist/panels/SequenceEditorPanel/whatPropIsHighlighted.js

@@ -0,0 +1,58 @@
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { Atom } from '@tomorrowevening/theatre-dataverse';
+import { prism } from '@tomorrowevening/theatre-dataverse';
+import pointerDeep from '@tomorrowevening/theatre-shared/utils/pointerDeep';
+import lodashSet from 'lodash-es/set';
+/** constant global manager */
+export const whatPropIsHighlighted = createWhatPropIsHighlightedState();
+function createWhatPropIsHighlightedState() {
+    let lastLockId = 0;
+    const whatIsHighlighted = new Atom({ hasLock: false });
+    return {
+        replaceLock(address, cleanup) {
+            const lockId = lastLockId++;
+            const existingState = whatIsHighlighted.get();
+            if (existingState.hasLock)
+                existingState.cleanup();
+            whatIsHighlighted.set({
+                hasLock: true,
+                lockId,
+                cleanup,
+                deepPath: arrayToDeepObject(addressToArray(address)),
+            });
+            return function unlock() {
+                const curr = whatIsHighlighted.get();
+                if (curr.hasLock && curr.lockId === lockId) {
+                    curr.cleanup();
+                    whatIsHighlighted.set({ hasLock: false });
+                }
+            };
+        },
+        getIsPropHighlightedD(address) {
+            const highlightedP = pointerDeep(whatIsHighlighted.pointer.deepPath, addressToArray(address));
+            return prism(() => {
+                const value = val(highlightedP);
+                return value === true
+                    ? 'self'
+                    : // obj continues deep path prop from here
+                        value
+                            ? 'descendent'
+                            : // some other prop or no lock
+                                null;
+            });
+        },
+    };
+}
+function addressToArray(address) {
+    return [
+        address.projectId,
+        address.sheetId,
+        address.objectKey,
+        ...address.pathToProp,
+    ];
+}
+function arrayToDeepObject(arr) {
+    const obj = {};
+    lodashSet(obj, arr, true);
+    return obj;
+}

package/dist/propEditors/DefaultValueIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { PropTypeConfig } from '@tomorrowevening/theatre-core/propTypes';
+declare const DefaultOrStaticValueIndicator: React.FC<{
+    hasStaticOverride: boolean;
+    pathToProp: PathToProp;
+    obj: SheetObject;
+    propConfig: PropTypeConfig;
+}>;
+export default DefaultOrStaticValueIndicator;
+//# sourceMappingURL=DefaultValueIndicator.d.ts.map