Fix editor

app/contexts/EngineProvider.tsx

@@ -1,34 +1,30 @@
-import {
-  ReactNode,
-  useEffect,
-  useRef,
-} from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { EngineContext } from "./EngineContext";
 import Editor from "~/pages/PageEnigma/js/editor";
 
-interface Props{
-  children:ReactNode;
+interface Props {
+  children: ReactNode;
 }
 
-export const EngineProvider = ({ children }: Props)=>{
-  const editorRef = useRef<Editor | null>(null);
+export const EngineProvider = ({ children }: Props) => {
+  const [editor, setEditor] = useState<Editor | null>(null);
 
   useEffect(() => {
     //componentDidMount
-    if (editorRef.current !== null ) {
-      console.warn('Editor Engine already exist');
-    }else if (document.getElementById("video-scene") === null){
-      console.error('Editor Engine need a target cavas with the id "video-scene"');
-    }else{
-      editorRef.current = new Editor();
-      editorRef.current.initialize();
+    if (editor !== null) {
+      console.warn("Editor Engine already exist");
+    } else if (document.getElementById("video-scene") === null) {
+      console.error(
+        'Editor Engine need a target cavas with the id "video-scene"',
+      );
+    } else {
+      const editor = new Editor();
+      editor.initialize();
+      setEditor(editor);
     }
   }, []);
 
-  return(
-    <EngineContext.Provider value={editorRef.current}>
-      {children}
-    </EngineContext.Provider>
+  return (
+    <EngineContext.Provider value={editor}>{children}</EngineContext.Provider>
   );
-}
-
+};

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -43,10 +43,10 @@ export const PageEnigmaComponent = () => {
 
   return (
     <div>
-      <TopBarHelmet>
-        <Button icon={faSparkles}>Generate Movie</Button>
-      </TopBarHelmet>
       <EngineProvider>
+        <TopBarHelmet>
+          <Button icon={faSparkles}>Generate Movie</Button>
+        </TopBarHelmet>
         <div style={{ height: "calc(100vh - 68px)" }}>
           {/* Engine section/side panel */}
           <div

app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -4,7 +4,6 @@ import {
   faCube,
   faPlus,
   faUpRightAndDownLeftFromCenter,
-
 } from "@fortawesome/pro-solid-svg-icons";
 import {
   fa3dCylinder,
@@ -13,42 +12,54 @@ import {
 } from "@awesome.me/kit-fde2be5eb0/icons/kit/custom";
 import { ButtonIcon, ButtonIconSelect } from "~/components";
 import { EngineContext } from "~/contexts/EngineContext";
-import { 
-  useContext,
-} from "react";
+import { useContext } from "react";
+
 export const Controls3D = () => {
-  
   const editorEngine = useContext(EngineContext);
 
   const handlePlus = () => {
     console.log("Controls 3D: Plus button clicked");
   };
   const handleCube = () => {
-    if(editorEngine == null || editorEngine == undefined){ return; }
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
     editorEngine.create_parim("Box");
   };
   const handleCylinder = () => {
-    if(editorEngine == null || editorEngine == undefined){ return; }
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
     editorEngine.create_parim("Cylinder");
   };
   const handleTorus = () => {
-    if(editorEngine == null || editorEngine == undefined){ return; }
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
     editorEngine.create_parim("Donut");
   };
   const handleSphere = () => {
-    if(editorEngine == null || editorEngine == undefined){ return; }
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
     editorEngine.create_parim("Sphere");
   };
   const handleMoveArrows = () => {
-    if(!editorEngine){ return; }
+    if (!editorEngine) {
+      return;
+    }
     editorEngine.change_mode("transform");
   };
   const handleRotateArrows = () => {
-    if(!editorEngine){ return; }
+    if (!editorEngine) {
+      return;
+    }
     editorEngine.change_mode("rotate");
   };
   const handleZoomArrows = () => {
-    if(!editorEngine){ return; }
+    if (!editorEngine) {
+      return;
+    }
     editorEngine.change_mode("scale");
   };