diff --git a/app/pages/PageEnigma/Editor/editor.ts b/app/pages/PageEnigma/Editor/editor.ts index 59bbc3261f..3192cb15da 100644 --- a/app/pages/PageEnigma/Editor/editor.ts +++ b/app/pages/PageEnigma/Editor/editor.ts @@ -270,6 +270,8 @@ class Editor { } containerMayReset() { + //TODO: we should not need this, if the container is reset, + // updateSceneContainer should update the reference in the editor if (!this.container) { console.warn( "Editor - Container does not exist, querying from DOM via document.getElementById", @@ -277,7 +279,12 @@ class Editor { this.container = document.getElementById("video-scene-container"); } } + updateSceneContainer(newContainer: HTMLDivElement) { + this.container = newContainer; + } engineCanvasMayReset() { + //TODO: we should not need this, if the this canvas is reset, + // updateEngineCanvas should update the reference in the editor if (!this.canvReference) { console.warn( "Editor - Engine Canbas does not exist, querying from DOM via document.getElementById", @@ -287,7 +294,12 @@ class Editor { ) as HTMLCanvasElement; } } + updateEngineCanvas(newCanvas: HTMLCanvasElement) { + this.canvReference = newCanvas; + } camViewCanvasMayReset() { + //TODO: we should not need this, if the this canvas is reset, + // updateCamViewCanvas should update the reference in the editor if (!this.canvasRenderCamReference) { console.warn( "Editor - Cam View Canvas does not exist, querying from DOM via document.getElementById", diff --git a/app/pages/PageEnigma/comps/EngineCanvases.tsx b/app/pages/PageEnigma/comps/EngineCanvases.tsx index 2f9d50731f..ad36d5abea 100644 --- a/app/pages/PageEnigma/comps/EngineCanvases.tsx +++ b/app/pages/PageEnigma/comps/EngineCanvases.tsx @@ -1,13 +1,17 @@ import { useCallback, useContext } from "react"; -import { EngineContext } from "../contexts/EngineContext"; +import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; export const EditorCanvas = () => { const editorEngine = useContext(EngineContext); const canvasCallbackRef = useCallback( (node: HTMLCanvasElement) => { - if (node && editorEngine && editorEngine.setEditorCanvas) { - editorEngine.setEditorCanvas(node); + if (node && editorEngine) { + if (!editorEngine.canvReference) { + editorEngine.setEditorCanvas(node); + } else { + editorEngine.updateEngineCanvas(node); + } } }, [editorEngine], @@ -25,7 +29,6 @@ export const EditorCanvas = () => { export const CameraViewCanvas = ({ className }: { className?: string }) => { const editorEngine = useContext(EngineContext); - // TODO PATCH WIL const canvasCallbackRef = useCallback( (node: HTMLCanvasElement) => { if (node && editorEngine) { diff --git a/app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx b/app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx index 7800a19c82..74b007d710 100644 --- a/app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx +++ b/app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx @@ -23,7 +23,7 @@ export const Letterbox = ({ useSignals(); if (editorState.value !== EditorStates.CAMERA_VIEW || !isShowing) { - console.log("The Letterbox is loading."); + //case of Letterbox should not show return; } diff --git a/app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx b/app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx index d3a6be614b..da82b18ede 100644 --- a/app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx +++ b/app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { useCallback, useContext } from "react"; import { useSignals } from "@preact/signals-react/runtime"; import { pageHeight, pageWidth } from "~/signals"; import { @@ -7,22 +7,30 @@ import { sidePanelWidth, sidePanelVisible, } from "~/pages/PageEnigma/signals"; -import Editor from "~/pages/PageEnigma/Editor/editor"; +import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; import { Letterbox } from "./Letterbox"; export const SceneContainer = ({ children }: { children: React.ReactNode }) => { useSignals(); + const editorEngine = useContext(EngineContext); const containerWidth = pageWidth.value - (sidePanelVisible.value ? sidePanelWidth.value : 0) - 84; const containerHeight = pageHeight.value - timelineHeight.value - 68; - const callbackRef = useCallback((node: HTMLDivElement) => { - if (node) { - // Editor.onSceneContainerChange(node); TODO FIX - } - }, []); + const callbackRef = useCallback( + (node: HTMLDivElement) => { + if (node && editorEngine) { + if (!editorEngine.container) { + editorEngine.setSceneContainer(node); + } else { + editorEngine.updateSceneContainer(node); + } + } + }, + [editorEngine], + ); return (