fix: avoid full state update when playing cinematic inline by updating only time tracker

Author: julien-moreau

editor/src/editor/layout/cinematic/curves.tsx

@@ -6,6 +6,7 @@ import { ICinematicTrack } from "babylonjs-editor-tools";
 import { isDomElementDescendantOf } from "../../../tools/dom";
 
 import { CinematicEditor } from "./editor";
+import { CinematicEditorTracker } from "./tracker";
 
 import { CinematicEditorCurvesRoot } from "./curves/root";
 
@@ -23,6 +24,8 @@ export interface ICinematicEditorCurvesState {
 }
 
 export class CinematicEditorCurves extends Component<ICinematicEditorCurvesProps, ICinematicEditorCurvesState> {
+	public tracker: CinematicEditorTracker;
+
 	private _divRef: HTMLDivElement | null = null;
 
 	public constructor(props: ICinematicEditorCurvesProps) {
@@ -44,20 +47,7 @@ export class CinematicEditorCurves extends Component<ICinematicEditorCurvesProps
 				onMouseDown={(ev) => this._handleMainDivPointerDown(ev)}
 			>
 				<CinematicEditorCurvesRoot scale={this.props.scale} translation={this.state.translation} cinematicEditor={this.props.cinematicEditor} />
-
-				<div
-					className="absolute w-[1px] ml-2 mt-10 bg-muted h-full pointer-events-none"
-					style={{
-						left: `${this.props.currentTime * this.props.scale + this.state.translation.x}px`,
-					}}
-				>
-					<div
-						className="absolute w-7 h-7 rotate-45 -translate-x-1/2 -translate-y-8 bg-muted"
-						style={{
-							mask: "linear-gradient(135deg, transparent 0%, transparent 50%, black 50%, black 100%)",
-						}}
-					/>
-				</div>
+				<CinematicEditorTracker ref={(r) => (this.tracker = r!)} scale={this.props.scale} currentTime={this.props.currentTime} />
 			</div>
 		);
 	}

editor/src/editor/layout/cinematic/editor.tsx

@@ -323,9 +323,8 @@ export class CinematicEditor extends Component<ICinematicEditorProps, ICinematic
 
 		engine.runRenderLoop(
 			(this._playRenderLoop = () => {
-				this.setState({
-					currentTime: this._animatedCurrentTime,
-				});
+				this.curves.tracker.setForcedCurrentTime(this._animatedCurrentTime);
+				this.timelines.tracker.setForcedCurrentTime(this._animatedCurrentTime);
 			})
 		);
 	}
@@ -335,6 +334,9 @@ export class CinematicEditor extends Component<ICinematicEditorProps, ICinematic
 			return;
 		}
 
+		this.curves.tracker.setForcedCurrentTime(null);
+		this.timelines.tracker.setForcedCurrentTime(null);
+
 		this.setState({
 			playing: false,
 		});

editor/src/editor/layout/cinematic/timelines.tsx

@@ -10,6 +10,7 @@ import { isDomElementDescendantOf } from "../../../tools/dom";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "../../../ui/shadcn/ui/context-menu";
 
 import { CinematicEditor } from "./editor";
+import { CinematicEditorTracker } from "./tracker";
 
 import { CinematicEditorKeyBase } from "./timelines/keys/base";
 import { addAnimationGroupKey, addAnimationKey, addEventKey, addSoundKey } from "./timelines/add";
@@ -27,6 +28,8 @@ export interface ICinematicEditorTimelinesState {
 }
 
 export class CinematicEditorTimelines extends Component<ICinematicEditorTimelinesProps, ICinematicEditorTimelinesState> {
+	public tracker: CinematicEditorTracker;
+
 	private _divRef: HTMLDivElement | null = null;
 
 	public constructor(props: ICinematicEditorTimelinesProps) {
@@ -68,21 +71,7 @@ export class CinematicEditorTimelines extends Component<ICinematicEditorTimeline
 					className="fixed h-10 bg-background pointer-events-none"
 				/>
 
-				<div
-					style={{
-						left: `${this.props.currentTime * this.props.scale}px`,
-					}}
-					className="absolute w-[1px] ml-2 mt-10 bg-muted h-full pointer-events-none"
-				>
-					<div
-						className={`
-                            absolute w-7 h-7 rotate-45 -translate-x-1/2 -translate-y-8 bg-muted
-                        `}
-						style={{
-							mask: "linear-gradient(135deg, transparent 0%, transparent 50%, black 50%, black 100%)",
-						}}
-					/>
-				</div>
+				<CinematicEditorTracker ref={(r) => (this.tracker = r!)} scale={this.props.scale} currentTime={this.props.currentTime} />
 			</div>
 		);
 	}

editor/src/editor/layout/cinematic/tracker.tsx

@@ -0,0 +1,35 @@
+import { Component, ReactNode } from "react";
+
+export interface ICinematicEditorTrackerProps {
+	scale: number;
+	currentTime: number;
+}
+
+export class CinematicEditorTracker extends Component<ICinematicEditorTrackerProps> {
+	private _forcedCurrentTime: number | null = null;
+
+	public render(): ReactNode {
+		const currentTime = this._forcedCurrentTime ?? this.props.currentTime;
+
+		return (
+			<div
+				style={{
+					left: `${currentTime * this.props.scale}px`,
+				}}
+				className="absolute w-[1px] ml-2 mt-10 bg-muted h-full pointer-events-none"
+			>
+				<div
+					className="absolute w-7 h-7 rotate-45 -translate-x-1/2 -translate-y-8 bg-muted"
+					style={{
+						mask: "linear-gradient(135deg, transparent 0%, transparent 50%, black 50%, black 100%)",
+					}}
+				/>
+			</div>
+		);
+	}
+
+	public setForcedCurrentTime(time: number | null): void {
+		this._forcedCurrentTime = time;
+		this.forceUpdate();
+	}
+}