fix(theatre): exportAs; expose sheetObject on transform and sync;

Author: nartc

libs/theatre/src/index.ts

@@ -1,5 +1,11 @@
 export * from './lib/project';
-export * from './lib/sequence';
-export * from './lib/sheet';
 export * from './lib/sheet-object';
 export * from './lib/studio/studio';
+
+export * from './lib/sequence';
+export { TheatreSheet as TheatreSheetImpl } from './lib/sheet';
+
+import { TheatreSequence } from './lib/sequence';
+import { TheatreSheet as Impl } from './lib/sheet';
+
+export const TheatreSheet = [Impl, TheatreSequence] as const;

libs/theatre/src/lib/sequence.ts

@@ -34,7 +34,7 @@ const defaultOptions: TheatreSequenceOptions = {
 	delay: 0,
 };
 
-@Directive({ selector: 'theatre-sheet[sequence]' })
+@Directive({ selector: 'theatre-sheet[sequence]', exportAs: 'sequence' })
 export class TheatreSequence {
 	options = input(defaultOptions, { alias: 'sequence', transform: mergeInputs(defaultOptions) });
 	audioOptions = input<AttachAudioOptions | undefined>(undefined, { alias: 'sequenceAudio' });

libs/theatre/src/lib/sheet-object/sheet-object.ts

@@ -17,12 +17,12 @@ import { injectStore } from 'angular-three';
 import { TheatreSheet } from '../sheet';
 import { THEATRE_STUDIO } from '../studio/studio-token';
 
-@Directive({ selector: 'ng-template[sheetObject]' })
+@Directive({ selector: 'ng-template[sheetObject]', exportAs: 'sheetObject' })
 export class TheatreSheetObject {
 	key = input.required<string>({ alias: 'sheetObject' });
-	props = input<UnknownShorthandCompoundProps>({});
-	detach = input(false, { transform: booleanAttribute });
-	selected = model<boolean>(false);
+	props = input<UnknownShorthandCompoundProps>({}, { alias: 'sheetObjectProps' });
+	detach = input(false, { transform: booleanAttribute, alias: 'sheetObjectDetach' });
+	selected = model<boolean>(false, { alias: 'sheetObjectSelected' });
 
 	private templateRef = inject(TemplateRef);
 	private vcr = inject(ViewContainerRef);

libs/theatre/src/lib/sheet-object/sync.ts

@@ -1,4 +1,4 @@
-import { computed, DestroyRef, Directive, effect, ElementRef, inject, input, signal } from '@angular/core';
+import { computed, DestroyRef, Directive, effect, ElementRef, inject, input } from '@angular/core';
 import { NgtAnyRecord, resolveInstanceKey, resolveRef } from 'angular-three';
 import { THEATRE_STUDIO } from '../studio/studio-token';
 import { getDefaultTransformer } from '../transformers/default-transformer';
@@ -7,7 +7,7 @@ import { TheatreSheetObject } from './sheet-object';
 
 const updateProjectionMatrixKeys = ['fov', 'near', 'far', 'zoom', 'left', 'right', 'top', 'bottom', 'aspect'];
 
-@Directive({ selector: '[sync]' })
+@Directive({ selector: '[sync]', exportAs: 'sync' })
 export class TheatreSheetObjectSync<TObject extends object> {
 	parent = input.required<TObject | ElementRef<TObject> | (() => TObject | ElementRef<TObject> | undefined | null)>({
 		alias: 'sync',
@@ -16,7 +16,8 @@ export class TheatreSheetObjectSync<TObject extends object> {
 		Array<string | [string, string | { label?: string; key?: string; transformer?: TheatreTransformer }]>
 	>([], { alias: 'syncProps' });
 
-	private sheetObject = inject(TheatreSheetObject);
+	private theatreSheetObject = inject(TheatreSheetObject);
+	sheetObject = computed(() => this.theatreSheetObject.sheetObject());
 	private studio = inject(THEATRE_STUDIO, { optional: true });
 
 	private parentRef = computed(() => {
@@ -46,48 +47,52 @@ export class TheatreSheetObjectSync<TObject extends object> {
 		);
 	});
 
-	private init = signal(false);
-	private propsMapping: Record<string, { path: string; transformer: TheatreTransformer }> = {};
+	private propsToAdd = computed(() => {
+		const parent = this.parentRef();
+		if (!parent) return null;
 
-	constructor() {
-		effect(() => {
-			const parent = this.parentRef();
-			if (!parent) return;
+		const propsToAdd: NgtAnyRecord = {};
+		const resolvedProps = this.resolvedProps();
+		resolvedProps.forEach(([propName, { key, label, transformer }]) => {
+			const { root, targetKey } = resolveInstanceKey(parent, propName);
+			const rawValue = root[targetKey];
+			const valueTransformer = transformer ?? getDefaultTransformer(root, targetKey, propName);
+			const value = valueTransformer.transform(rawValue);
+
+			value.label = label ?? key;
 
-			const propsToAdd: NgtAnyRecord = {};
-			const resolvedProps = this.resolvedProps();
-			resolvedProps.forEach(([propName, { key, label, transformer }]) => {
-				const { root, targetKey, targetProp } = resolveInstanceKey(parent, propName);
-				const rawValue = root[targetKey];
-				const valueTransformer = transformer ?? getDefaultTransformer(root, targetKey, propName);
-				const value = valueTransformer.transform(rawValue);
+			this.propsMapping[key] = { path: propName, transformer: valueTransformer };
+			propsToAdd[key] = value;
+		});
 
-				value.label = label ?? key;
+		return propsToAdd;
+	});
 
-				this.propsMapping[key] = { path: propName, transformer: valueTransformer };
-				propsToAdd[key] = value;
-			});
+	private propsMapping: Record<string, { path: string; transformer: TheatreTransformer }> = {};
 
-			this.sheetObject.addProps(propsToAdd);
-			this.init.set(true);
+	constructor() {
+		effect(() => {
+			const propsToAdd = this.propsToAdd();
+			if (!propsToAdd) return;
+			this.theatreSheetObject.addProps(propsToAdd);
 		});
 
 		effect((onCleanup) => {
 			const parent = this.parentRef();
 			if (!parent) return;
 
-			const init = this.init();
-			if (!init) return;
+			const propsToAdd = this.propsToAdd();
+			if (!propsToAdd) return;
 
-			const sheetObject = this.sheetObject.sheetObject();
+			const sheetObject = this.sheetObject();
 			const cleanup = sheetObject.onValuesChange((newValues) => {
 				Object.keys(newValues).forEach((key) => {
 					// first, check if the prop is mapped in this component
 					const propMapping = this.propsMapping[key];
 					if (!propMapping) return;
 
 					// we're using the addedProps map to infer the target property name from the property name on values
-					const { root, targetProp, targetKey } = resolveInstanceKey(parent, propMapping.path);
+					const { root, targetKey } = resolveInstanceKey(parent, propMapping.path);
 
 					// use a transformer to apply value
 					const transformer = propMapping.transformer;
@@ -103,10 +108,39 @@ export class TheatreSheetObjectSync<TObject extends object> {
 		});
 
 		inject(DestroyRef).onDestroy(() => {
-			this.sheetObject.removeProps(Object.keys(this.propsMapping));
+			this.theatreSheetObject.removeProps(Object.keys(this.propsMapping));
 		});
 	}
 
+	capture() {
+		const studio = this.studio?.();
+		if (!studio) return;
+
+		const parent = this.parentRef();
+		if (!parent) return;
+
+		const sheetObject = this.sheetObject();
+		if (!sheetObject) return;
+
+		const scrub = studio.scrub();
+
+		Object.keys(sheetObject.value).forEach((key) => {
+			// first, check if the prop is mapped in this component
+			const propMapping = this.propsMapping[key];
+			if (!propMapping) return;
+
+			// we're using the addedProps map to infer the target property name from the property name on values
+			const { targetProp } = resolveInstanceKey(parent, propMapping.path);
+			const value = propMapping.transformer.transform(targetProp).default;
+
+			scrub.capture(({ set }) => {
+				set(sheetObject.props[key], value);
+			});
+		});
+
+		scrub.commit();
+	}
+
 	private resolvePropertyPath(propPath: string) {
 		return (
 			propPath

libs/theatre/src/lib/sheet-object/transform.ts

@@ -52,10 +52,11 @@ export class TheatreSheetObjectTransform<TLabel extends string | undefined> {
 
 	groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
 
-	private sheetObject = inject(TheatreSheetObject);
+	private theatreSheetObject = inject(TheatreSheetObject);
+	sheetObject = computed(() => this.theatreSheetObject.sheetObject());
 	private studio = inject(THEATRE_STUDIO, { optional: true });
 
-	protected selected = this.sheetObject.selected.asReadonly();
+	protected selected = this.theatreSheetObject.selected.asReadonly();
 	private scrub?: IScrub;
 
 	private positionTransformer = computed(() =>
@@ -82,7 +83,7 @@ export class TheatreSheetObjectTransform<TLabel extends string | undefined> {
 		if (!this.scrub) return;
 
 		this.scrub.capture((api) => {
-			const sheetObject = this.sheetObject.sheetObject();
+			const sheetObject = this.sheetObject();
 			if (!sheetObject) return;
 
 			const group = this.groupRef().nativeElement;
@@ -109,7 +110,7 @@ export class TheatreSheetObjectTransform<TLabel extends string | undefined> {
 
 		effect((onCleanup) => {
 			const [sheetObject, key, positionTransformer, rotationTransformer, scaleTransformer, group] = [
-				this.sheetObject.sheetObject(),
+				this.sheetObject(),
 				untracked(this.key),
 				untracked(this.positionTransformer),
 				untracked(this.rotationTransformer),
@@ -140,7 +141,7 @@ export class TheatreSheetObjectTransform<TLabel extends string | undefined> {
 
 		inject(DestroyRef).onDestroy(() => {
 			const key = this.key();
-			this.sheetObject.removeProps(key ? [key] : ['position', 'rotation', 'scale']);
+			this.theatreSheetObject.removeProps(key ? [key] : ['position', 'rotation', 'scale']);
 		});
 	}
 
@@ -159,11 +160,11 @@ export class TheatreSheetObjectTransform<TLabel extends string | undefined> {
 		const scale = scaleTransformer.transform(group.scale);
 
 		if (key) {
-			this.sheetObject.addProps({
+			this.theatreSheetObject.addProps({
 				[key]: types.compound({ position, rotation, scale }, { label: label ?? key }),
 			});
 		} else {
-			this.sheetObject.addProps({ position, rotation, scale });
+			this.theatreSheetObject.addProps({ position, rotation, scale });
 		}
 	}
 }

libs/theatre/src/lib/studio/studio.ts

@@ -4,6 +4,7 @@ import { THEATRE_STUDIO } from './studio-token';
 
 @Directive({
 	selector: 'theatre-project[studio]',
+	exportAs: 'studio',
 	providers: [
 		{ provide: THEATRE_STUDIO, useFactory: (studio: TheatreStudio) => studio.studio, deps: [TheatreStudio] },
 	],