fix engine reinit over rerender problem

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
@@ -20,13 +20,13 @@ import { ViewSideBySide } from "./comps/ViewSideBySide";
 
 export const PageEnigmaComponent = () => {
   const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState);
-
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  
   useEffect(()=>{
     setTimeout(()=>dispatchAppUiState({
       type: ACTION_TYPES.HIDE_EDITOR_LOADER
     }), 3000);
   },[]);
+
   return (
     <div>
       <TopBarHelmet>
@@ -46,7 +46,6 @@ export const PageEnigmaComponent = () => {
               <div className="relative w-full overflow-hidden bg-transparent">
                 <div className={(appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
                   <canvas
-                    ref={canvasRef}
                     id="video-scene"
                     width="1280px"
                     height="720px"

app/pages/PageEnigma/contexts/EngineProvider.tsx

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