patching cherrypick: proper passing of container and canvases reference is passed into the editor, comment on letterbox state

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",

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) {

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;
   }
 

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 (
     <div