WIP: control panel reducers

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -67,7 +67,10 @@ export const PageEnigmaComponent = () => {
                   <div className="absolute bottom-0 left-0 w-full">
                     <PreviewEngineCamera />
                     <ControlsVideo />
-                    <ControlPanelSceneObject isShowing={true}/>
+                    <ControlPanelSceneObject
+                      isShowing={appUiState.currentSceneObject.isShowing}
+                      {...appUiState.currentSceneObject.objectVectors}
+                    />
                   </div>
                 </div>
                 {

app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -4,20 +4,25 @@ import { faArrowRightArrowLeft, faCube, faTrash} from "@fortawesome/pro-solid-sv
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, H4, InputVector } from "~/components";
 
+import { XYZ } from '../../datastructures/common';
+
 interface ControlPanelSceneObjectProps {
+  position?: XYZ;
+  rotation?: XYZ;
+  scalar?: XYZ;
   isShowing:boolean;
 }
-type XYZ = {
-  x: number;
-  y: number;
-  z: number;
-}
+
+
 export const ControlPanelSceneObject = ({
+  position: propsPosition = {x:0,y:0,z:0},
+  rotation: propsRotation = {x:0,y:0,z:0},
+  scalar: propsScalar = {x:0,y:0,z:0},
   isShowing,
 }: ControlPanelSceneObjectProps) => {
-  const [position, setPosition] = useState<XYZ>({x:0,y:0,z:0});
-  const [rotation, setRotation] = useState<XYZ>({x:0,y:0,z:0});
-  const [scalar, setScalar] = useState<XYZ>({x:0,y:0,z:0});
+  const [position, setPosition] = useState<XYZ>(propsPosition);
+  const [rotation, setRotation] = useState<XYZ>(propsRotation);
+  const [scalar, setScalar] = useState<XYZ>(propsScalar);
 
   const handlePositionChange = (xyz:XYZ)=>{
     console.log(xyz);

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -63,7 +63,24 @@ export const ControlsTopButtons = () => {
   };
 
   const handleObjectPanelTest = () => {
-    
+    if (appUiState?.currentSceneObject.isShowing) {
+      dispatchAppUiState({
+        type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT
+      });
+    }else{
+      dispatchAppUiState({
+        type:APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
+        payload:{
+          currentSceneObject:{
+            objectVectors: {
+              position: {x:1,y:2,z:3},
+              rotation: {x:4,y:5,z:6},
+              scalar: {x:7,y:8,z:9},
+            }
+          }
+        }
+      });
+    }
   }
 
   const handleButtonCameraView = () => {

app/pages/PageEnigma/datastructures/common.ts

@@ -0,0 +1,5 @@
+export type XYZ = {
+  x :number;
+  y: number;
+  z: number;
+}

app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx

@@ -2,6 +2,24 @@ import { State, Action, ACTION_TYPES} from './types';
 
 export function reducer(state: State, action: Action): State {
   switch(action.type){
+    case ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT:{
+      return{
+        ...state,
+        currentSceneObject: {
+          isShowing: true,
+          objectVectors: {...action.payload.currentSceneObject.objectVectors},
+        },
+      }
+    }
+    case ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT:{
+      return{
+        ...state,
+        currentSceneObject: {
+          isShowing: false,
+          objectVectors: state.currentSceneObject.objectVectors,
+        },
+      }
+    }
     case ACTION_TYPES.SHOW_EDITOR_LOADER:{
       return{
         ...state,

app/pages/PageEnigma/reducers/appUiReducer/types.tsx

@@ -1,3 +1,4 @@
+import { XYZ } from "../../datastructures/common";
 export enum VIEW_MODES {
   EDITOR = 'editor',
   SIDE_BY_SIDE = 'side-by-side'
@@ -19,6 +20,14 @@ export type State = {
     progress?: number;
     useFakeTimer?: number;
   }
+  currentSceneObject:{
+    isShowing: boolean;
+    objectVectors: {
+      position:XYZ;
+      rotation:XYZ;
+      scalar: XYZ;
+    };
+  }
 };
 
 
@@ -30,9 +39,24 @@ export enum ACTION_TYPES {
   SHOW_EDITOR_LOADINGBAR = "show_editor_loadingbar",
   UPDATE_EDITOR_LOADINGBAR = "update_editor_loadingbar",
   HIDE_EDITOR_LOADINGBAR = "hide_editor_loadingbar",
+  SHOW_CONTROLPANELS_SCENEOBJECT = "show_controlpanels_sceneobject",
+  HIDE_CONTROLPANELS_SCENEOBJECT = "hide_controlpanels_sceneobject",
 };
 
-export type Action = 
+export type Action =
+  | {type: ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT}
+  | {
+      type: ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
+      payload:{
+        currentSceneObject: {
+          objectVectors: {
+            position:XYZ;
+            rotation:XYZ;
+            scalar: XYZ;
+          };
+        };
+      }
+    }
   | {type: ACTION_TYPES.HIDE_EDITOR_LOADER,}
   | {
       type: ACTION_TYPES.SHOW_EDITOR_LOADER,

app/pages/PageEnigma/reducers/appUiReducer/values.tsx

@@ -11,5 +11,13 @@ export const initialStateValues : State = {
     isShowing:true,
     progress:5,
     message: 'Loading Editor Engine 🦊'
+  },
+  currentSceneObject:{
+    isShowing:false,
+    objectVectors:{
+      position:{x:0,y:0,z:0},
+      rotation:{x:0,y:0,z:0},
+      scalar:{x:0,y:0,z:0},
+    }
   }
 }