From b9d93e52226d2e798e9c9d85ea16ff4464069ec1 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <from.the.lol.ashes@gmail.com>
Date: Tue, 26 Mar 2024 22:38:45 +0700
Subject: [PATCH] Fix editor

---
 app/contexts/EngineProvider.tsx               | 40 +++++++++----------
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |  6 +--
 .../comps/Controls3D/Controls3D.tsx           | 35 ++++++++++------
 3 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/app/contexts/EngineProvider.tsx b/app/contexts/EngineProvider.tsx
index 0f3b833631..7f40dc4976 100644
--- a/app/contexts/EngineProvider.tsx
+++ b/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>
   );
-}
-
+};
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 2395b91930..18c343a35f 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/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
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index 4295c392d9..c36187a072 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/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");
   };