From 3ab0bbe464adf7448ad6502904d272464347d978 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 28 Mar 2024 18:09:57 -0400
Subject: [PATCH 1/8] vector input works

---
 app/components/InputVector.tsx                | 38 ++++++++++++
 app/components/index.tsx                      |  2 +
 app/pages/PageEnigma/PageEnigmaComponent.tsx  | 17 ++++--
 .../ControlPanelSceneObject.tsx               | 61 +++++++++++++++++++
 .../comps/ControlPanelSceneObject/index.tsx   |  1 +
 .../ControlsTopButtons/ControlsTopButtons.tsx | 32 +++++-----
 6 files changed, 129 insertions(+), 22 deletions(-)
 create mode 100644 app/components/InputVector.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlPanelSceneObject/index.tsx

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
new file mode 100644
index 0000000000..b06081f420
--- /dev/null
+++ b/app/components/InputVector.tsx
@@ -0,0 +1,38 @@
+import { useRef } from "react";
+
+
+interface InputVectorProps {
+  x: number;
+  y: number;
+  z: number;
+  onChange : (v:{
+    x:number;
+    y:number;
+    z:number;
+  })=>void;
+}
+
+export const InputVector = ({
+  x,y,z,
+  onChange
+}:InputVectorProps)=>{
+  const xRef = useRef<HTMLInputElement>(null);
+  const yRef = useRef<HTMLInputElement>(null);
+  const zRef = useRef<HTMLInputElement>(null);
+
+  function handleOnChange(){
+    const newVector = {
+      x: Number(xRef.current?.value),
+      y: Number(yRef.current?.value),
+      z: Number(zRef.current?.value),
+    }
+    onChange(newVector);
+  }
+  return(
+    <div className="w-full flex gap-2">
+      <input type="number" ref={xRef} onChange={handleOnChange} value={x} />
+      <input type="number" ref={yRef} onChange={handleOnChange} value={y} />
+      <input type="number" ref={zRef} onChange={handleOnChange} value={z} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 5dabccba07..28e6e90ced 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -3,6 +3,7 @@ import { ButtonIcon } from "./ButtonIcon";
 import { ButtonLink } from "./ButtonLink";
 import { ButtonIconSelect } from "./ButtonIconSelect";
 import { Input } from "./Input";
+import { InputVector } from "./InputVector";
 import { H4 } from "./H4";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
@@ -18,6 +19,7 @@ export {
   ItemPicker,
   Textarea,
   Input,
+  InputVector,
   LoadingBar,
   LoadingDots,
   LoadingDotsBricks,
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 505516df3c..990eb98d8d 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -1,21 +1,25 @@
-import { useReducer, useEffect } from "react";
+import { useReducer } from "react";
 
 import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
 
 import { Button, LoadingBar, LoadingDots } from "~/components";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
+
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlsVideo } from "./comps/ControlsVideo";
+import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject";
 import { PreviewEngineCamera } from "./comps/PreviewEngineCamera";
-import { Timeline } from "./comps/Timeline";
+import { ViewSideBySide } from "./comps/ViewSideBySide";
 import { SidePanelTabs } from "./comps/SidePanelTabs";
+import { Timeline } from "./comps/Timeline";
+
 
 import { EngineProvider } from "./contexts/EngineProvider";
 import { AppUIProvider } from "./contexts/AppUiContext";
-import { appUiReducer, appUiInitialStateValues, APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "./reducers";
-import { ViewSideBySide } from "./comps/ViewSideBySide";
+import { appUiReducer, appUiInitialStateValues, APPUI_VIEW_MODES } from "./reducers";
+
 import { timelineHeight } from "~/pages/PageEnigma/store";
 import { useSignals } from "@preact/signals-react/runtime";
 
@@ -37,13 +41,13 @@ export const PageEnigmaComponent = () => {
           <div style={{ height: "calc(100vh - 68px)" }}>
             {/* Engine section/side panel */}
             <div
-              id="CanvasUiWrapper"
+              id="engine-n-panels-wrapper"
               className="flex"
               style={{ height: `calc(100% - ${lowerHeight}px)` }}
             >
               <div className="relative w-full overflow-hidden bg-transparent">
 
-                <div className={(appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
+                <div id="view-engine-scene" className={(appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE) ? 'invisible' : ''}>
                   <canvas
                     id="video-scene"
                     width="1280px"
@@ -63,6 +67,7 @@ export const PageEnigmaComponent = () => {
                   <div className="absolute bottom-0 left-0 w-full">
                     <PreviewEngineCamera />
                     <ControlsVideo />
+                    <ControlPanelSceneObject />
                   </div>
                 </div>
                 {
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
new file mode 100644
index 0000000000..d6d9b639ba
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Transition } from "@headlessui/react";
+import { faArrowRightArrowLeft, faCube, faTrash} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, H4, InputVector } from "~/components";
+
+interface ControlPanelSceneObjectProps {
+  isShowing:boolean;
+}
+
+export const ControlPanelSceneObject = ({
+  isShowing,
+}: ControlPanelSceneObjectProps) => {
+  const [position, setPosition] = useState<{x:number;y:number;z:number}>({
+    x:0,y:0,z:0
+  });
+  const handlePositionChange = (v:{
+    x: number;
+    y: number;
+    z: number;
+  })=>{
+    console.log(v);
+    setPosition(v);
+  }
+  return(
+    <Transition
+      show={true}
+      className="absolute bottom-0 right-0 w-fit h-60 m-4 p-2 bg-ui-panel border border-ui-panel-border text-white rounded-lg flex flex-col"
+      enter="transition-opacity duration-150"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-1000"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div className="flex  justity-between gap-2">
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faCube}/>
+          <p>Scene Object Name</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faArrowRightArrowLeft}/>
+          <p>Swap Object</p>
+        </div>
+      </div>
+      <H4>Position</H4>
+      <InputVector
+        x={position.x}
+        y={position.y}
+        z={position.z}
+        onChange={handlePositionChange}
+      />
+      <H4>Rotation</H4>
+      <H4>Scale</H4>
+      <div className="flex  justity-between gap-2">
+        <Button variant="secondary">Add Keyframe (K)</Button>
+        <Button variant="secondary" icon={faTrash} />
+      </div>
+    </Transition>
+  );
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/index.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/index.tsx
new file mode 100644
index 0000000000..455b4b8534
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/index.tsx
@@ -0,0 +1 @@
+export { ControlPanelSceneObject } from './ControlPanelSceneObject';
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 55e0aa1770..8432174b6c 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -21,15 +21,6 @@ export const ControlsTopButtons = () => {
     editorEngine?.loadScene(sceneToken);
   };
 
-
-  const handleButtonCameraView = () => {
-    editorEngine?.switchCameraView();
-  };
-
-  const handleButtonPlayBack = () => {
-    editorEngine?.start_playback();
-  };
-
   const handleButtonTest = () => {
     if(appUiState?.showEditorLoadingBar.isShowing){
       //TO GO TO A HUNDRED AND DISAPPER
@@ -71,6 +62,16 @@ export const ControlsTopButtons = () => {
     }
   };
 
+  const handleObjectPanelTest = () => {
+    
+  }
+
+  const handleButtonCameraView = () => {
+    editorEngine?.switchCameraView();
+  };
+  const handleButtonPlayBack = () => {
+    editorEngine?.start_playback();
+  };
   const handleButtonRender = () => {
     editorEngine?.take_timeline_cam_clip();
   };
@@ -79,12 +80,7 @@ export const ControlsTopButtons = () => {
   };
 
 
-  // const handleButtonCameraView = () => {
-  //   editorEngine?.change_camera_view();
-  // };
-
   const handleButtonLoad = () => {};
-  // const handleButtonRender = () => {};
 
   return (
     <div className="flex flex-col gap-2 pl-3 pt-3">
@@ -143,14 +139,18 @@ export const ControlsTopButtons = () => {
         <Button variant="secondary" onClick={handleButtonCameraView}>
           Toggle Camera View
         </Button>
+        <Button
+          onClick={handleObjectPanelTest}
+          className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary"
+        >
+          Show Object Panel
+        </Button>
       </div>
       <div className="flex gap-2">
 
         <Button onClick={handleButtonLoad}>Load</Button>
         <Button onClick={handleButtonRender}>Take Frame</Button>
         <Button onClick={handleButtonPlay}>Play</Button>
-        {/* <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button> */}
         <Button
           onClick={handleButtonTest}
           className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary"

From 35e1a030b18429b0041aeaf39554cac493e990a2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 28 Mar 2024 20:29:54 -0400
Subject: [PATCH 2/8] improved input tailwind

---
 app/components/Input.tsx       |  8 +-------
 app/components/InputVector.tsx | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index a9704e6dbb..18554df835 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -13,13 +13,7 @@ export function Input({ label, className, ...rest }: InputProps) {
       )}
 
       <input
-        className="h-10 rounded-md bg-brand-secondary p-3 text-white"
-        style={{
-          outline: "2px solid transparent",
-          transition: "outline-color 0.15s ease-in-out",
-        }}
-        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
-        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+        className="h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary"
         {...rest}
       />
     </div>
diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index b06081f420..8eb8fbee5c 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -20,6 +20,8 @@ export const InputVector = ({
   const yRef = useRef<HTMLInputElement>(null);
   const zRef = useRef<HTMLInputElement>(null);
 
+  const className="h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary";
+
   function handleOnChange(){
     const newVector = {
       x: Number(xRef.current?.value),
@@ -30,9 +32,24 @@ export const InputVector = ({
   }
   return(
     <div className="w-full flex gap-2">
-      <input type="number" ref={xRef} onChange={handleOnChange} value={x} />
-      <input type="number" ref={yRef} onChange={handleOnChange} value={y} />
-      <input type="number" ref={zRef} onChange={handleOnChange} value={z} />
+      <input
+        className={className}
+        onChange={handleOnChange}
+        ref={xRef}
+        value={x}
+      />
+      <input
+        className={className}
+        onChange={handleOnChange}
+        ref={yRef}
+        value={y}
+      />
+      <input
+        className={className}
+        onChange={handleOnChange}
+        ref={zRef}
+        value={z}
+      />
     </div>
   );
 }
\ No newline at end of file

From 2b5ddc06352b6392c4a58c928286244ad1d0001b Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 28 Mar 2024 20:40:45 -0400
Subject: [PATCH 3/8] object control panel scaffolding done

---
 .../ControlPanelSceneObject.tsx               | 51 ++++++++++++++-----
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index d6d9b639ba..e1975b7c6c 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -7,25 +7,34 @@ import { Button, H4, InputVector } from "~/components";
 interface ControlPanelSceneObjectProps {
   isShowing:boolean;
 }
-
+type XYZ = {
+  x: number;
+  y: number;
+  z: number;
+}
 export const ControlPanelSceneObject = ({
   isShowing,
 }: ControlPanelSceneObjectProps) => {
-  const [position, setPosition] = useState<{x:number;y:number;z:number}>({
-    x:0,y:0,z:0
-  });
-  const handlePositionChange = (v:{
-    x: number;
-    y: number;
-    z: number;
-  })=>{
-    console.log(v);
-    setPosition(v);
+  const [position, setPosition] = useState<XYZ>({x:0,y:0,z:0});
+  const [ratation, setRotation] = useState<XYZ>({x:0,y:0,z:0});
+  const [scalar, setScalar] = useState<XYZ>({x:0,y:0,z:0});
+
+  const handlePositionChange = (xyz:XYZ)=>{
+    console.log(xyz);
+    setPosition(xyz);
+  }
+  const handleRotationChange = (xyz:XYZ)=>{
+    console.log(xyz);
+    setRotation(xyz);
+  }
+  const handleScalarChange = (xyz:XYZ)=>{
+    console.log(xyz);
+    setScalar(xyz);
   }
   return(
     <Transition
       show={true}
-      className="absolute bottom-0 right-0 w-fit h-60 m-4 p-2 bg-ui-panel border border-ui-panel-border text-white rounded-lg flex flex-col"
+      className="absolute bottom-0 right-0 w-fit h-fit m-4 p-2 bg-ui-panel border border-ui-panel-border text-white rounded-lg flex flex-col gap-2"
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
       enterTo="opacity-100"
@@ -33,7 +42,7 @@ export const ControlPanelSceneObject = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="flex  justity-between gap-2">
+      <div className="flex justify-between gap-2">
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faCube}/>
           <p>Scene Object Name</p>
@@ -43,6 +52,7 @@ export const ControlPanelSceneObject = ({
           <p>Swap Object</p>
         </div>
       </div>
+      <span className='h-1'/>
       <H4>Position</H4>
       <InputVector
         x={position.x}
@@ -51,8 +61,21 @@ export const ControlPanelSceneObject = ({
         onChange={handlePositionChange}
       />
       <H4>Rotation</H4>
+      <InputVector
+        x={position.x}
+        y={position.y}
+        z={position.z}
+        onChange={handleRotationChange}
+      />
       <H4>Scale</H4>
-      <div className="flex  justity-between gap-2">
+      <InputVector
+        x={position.x}
+        y={position.y}
+        z={position.z}
+        onChange={handleScalarChange}
+      />
+      <span className='h-2'/>
+      <div className="flex justity-between gap-2">
         <Button variant="secondary">Add Keyframe (K)</Button>
         <Button variant="secondary" icon={faTrash} />
       </div>

From 9a18386279e3c297e0a21a028f43b56971564aad Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 28 Mar 2024 21:35:02 -0400
Subject: [PATCH 4/8] styles

---
 app/components/Button.tsx                     |  4 ++--
 app/components/InputVector.tsx                |  4 ++--
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |  2 +-
 .../ControlPanelSceneObject.tsx               | 22 +++++++++----------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 16955dec9e..8b78cc5d87 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -33,14 +33,14 @@ export const Button = ({
   }
 
   const className = twMerge(
-    "text-sm font-semibold rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150",
+    "text-sm font-semibold rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150 flex gap-2 items-center",
     getVariantClassNames(variant),
     propsClassName,
   );
 
   return (
     <button className={className} disabled={disabled} {...rest}>
-      {icon && <FontAwesomeIcon className="mr-2" icon={icon} />}
+      {icon && <FontAwesomeIcon icon={icon} />}
       {children}
     </button>
   );
diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 8eb8fbee5c..2a032631cb 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -20,7 +20,7 @@ export const InputVector = ({
   const yRef = useRef<HTMLInputElement>(null);
   const zRef = useRef<HTMLInputElement>(null);
 
-  const className="h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary";
+  const className="relative w-14 h-8 rounded-r-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary";
 
   function handleOnChange(){
     const newVector = {
@@ -31,7 +31,7 @@ export const InputVector = ({
     onChange(newVector);
   }
   return(
-    <div className="w-full flex gap-2">
+    <div className="w-full flex justify-between gap-2">
       <input
         className={className}
         onChange={handleOnChange}
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 990eb98d8d..e0cb3a0462 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -67,7 +67,7 @@ export const PageEnigmaComponent = () => {
                   <div className="absolute bottom-0 left-0 w-full">
                     <PreviewEngineCamera />
                     <ControlsVideo />
-                    <ControlPanelSceneObject />
+                    <ControlPanelSceneObject isShowing={true}/>
                   </div>
                 </div>
                 {
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index e1975b7c6c..ebe8aa7751 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -16,7 +16,7 @@ export const ControlPanelSceneObject = ({
   isShowing,
 }: ControlPanelSceneObjectProps) => {
   const [position, setPosition] = useState<XYZ>({x:0,y:0,z:0});
-  const [ratation, setRotation] = 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 handlePositionChange = (xyz:XYZ)=>{
@@ -33,7 +33,7 @@ export const ControlPanelSceneObject = ({
   }
   return(
     <Transition
-      show={true}
+      show={isShowing}
       className="absolute bottom-0 right-0 w-fit h-fit m-4 p-2 bg-ui-panel border border-ui-panel-border text-white rounded-lg flex flex-col gap-2"
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -42,10 +42,10 @@ export const ControlPanelSceneObject = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="flex justify-between gap-2">
+      <div className="flex justify-between gap-6">
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faCube}/>
-          <p>Scene Object Name</p>
+          <p>Object Name</p>
         </div>
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faArrowRightArrowLeft}/>
@@ -62,20 +62,20 @@ export const ControlPanelSceneObject = ({
       />
       <H4>Rotation</H4>
       <InputVector
-        x={position.x}
-        y={position.y}
-        z={position.z}
+        x={rotation.x}
+        y={rotation.y}
+        z={rotation.z}
         onChange={handleRotationChange}
       />
       <H4>Scale</H4>
       <InputVector
-        x={position.x}
-        y={position.y}
-        z={position.z}
+        x={scalar.x}
+        y={scalar.y}
+        z={scalar.z}
         onChange={handleScalarChange}
       />
       <span className='h-2'/>
-      <div className="flex justity-between gap-2">
+      <div className="flex justify-between gap-2">
         <Button variant="secondary">Add Keyframe (K)</Button>
         <Button variant="secondary" icon={faTrash} />
       </div>

From 769e33728c6fc6adecd788825b40699994c61404 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Fri, 29 Mar 2024 13:34:44 -0400
Subject: [PATCH 5/8] WIP: control panel reducers

---
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |  5 +++-
 .../ControlPanelSceneObject.tsx               | 21 +++++++++------
 .../ControlsTopButtons/ControlsTopButtons.tsx | 19 +++++++++++++-
 app/pages/PageEnigma/datastructures/common.ts |  5 ++++
 .../reducers/appUiReducer/reducer.tsx         | 18 +++++++++++++
 .../reducers/appUiReducer/types.tsx           | 26 ++++++++++++++++++-
 .../reducers/appUiReducer/values.tsx          |  8 ++++++
 7 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 app/pages/PageEnigma/datastructures/common.ts

diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 22ab49389a..880e4c0545 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/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>
                 {
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index ebe8aa7751..c34cd17cd2 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/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);
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 47cd64e8d8..02a95bc58d 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/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 = () => {
diff --git a/app/pages/PageEnigma/datastructures/common.ts b/app/pages/PageEnigma/datastructures/common.ts
new file mode 100644
index 0000000000..da612df4aa
--- /dev/null
+++ b/app/pages/PageEnigma/datastructures/common.ts
@@ -0,0 +1,5 @@
+export type XYZ = {
+  x :number;
+  y: number;
+  z: number;
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
index c632ebfef2..ca3dfcb978 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
+++ b/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,
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
index 5e07b24b3f..aaec218cd0 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
+++ b/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,
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/values.tsx b/app/pages/PageEnigma/reducers/appUiReducer/values.tsx
index b62b819a6f..e69a9a313a 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/values.tsx
+++ b/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},
+    }
   }
 }
\ No newline at end of file

From cdb9f59897eff9cb657f48ee56eea3a176c41bc2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Fri, 29 Mar 2024 18:15:43 -0400
Subject: [PATCH 6/8] perfect styling

---
 app/components/InputVector.tsx                | 48 +++++++++++--------
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |  5 +-
 .../ControlPanelSceneObject.tsx               | 13 ++---
 tailwind.config.ts                            |  9 +++-
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 2a032631cb..cf0df1934f 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -1,4 +1,5 @@
 import { useRef } from "react";
+import { twMerge } from "tailwind-merge";
 
 
 interface InputVectorProps {
@@ -20,7 +21,9 @@ export const InputVector = ({
   const yRef = useRef<HTMLInputElement>(null);
   const zRef = useRef<HTMLInputElement>(null);
 
-  const className="relative w-14 h-8 rounded-r-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary";
+  const inputCommonClasses ="relative w-14 h-8 rounded-r-md bg-brand-secondary p-3 text-base text-white transition-all duration-150 ease-in-out outline-none -outline-offset-2 ";
+
+  const wrapperCommonClasses = "flex items-center before:inline-block before:w-10 before:h-10 before:bg-brand-primary before:text-white before:rounded-l-md before:h-8 before:w-4 before:text-center before:align-middle before:leading-8 text-xs";
 
   function handleOnChange(){
     const newVector = {
@@ -32,24 +35,31 @@ export const InputVector = ({
   }
   return(
     <div className="w-full flex justify-between gap-2">
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={xRef}
-        value={x}
-      />
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={yRef}
-        value={y}
-      />
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={zRef}
-        value={z}
-      />
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-x before:content-['X']")}>
+        <input 
+          className={twMerge(inputCommonClasses, "focus:outline-axis-x")}
+          onChange={handleOnChange}
+          ref={xRef}
+          value={x}
+          
+        />
+      </span>
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-y before:content-['Y']")}>
+        <input
+          className={twMerge(inputCommonClasses, "focus:outline-axis-y")}
+          onChange={handleOnChange}
+          ref={yRef}
+          value={y}
+        />
+      </span>
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-z before:content-['Z']")}>
+        <input
+          className={twMerge(inputCommonClasses, "focus:outline-axis-z")}
+          onChange={handleOnChange}
+          ref={zRef}
+          value={z}
+        />
+      </span>
     </div>
   );
 }
\ No newline at end of file
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index 150cf98acc..55ac9143b8 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -81,10 +81,7 @@ export const PageEnigmaComponent = () => {
                   <div className="absolute bottom-0 left-0 w-full">
                     <PreviewEngineCamera />
                     <ControlsVideo />
-                    <ControlPanelSceneObject
-                      isShowing={appUiState.currentSceneObject.isShowing}
-                      {...appUiState.currentSceneObject.objectVectors}
-                    />
+                    <ControlPanelSceneObject/>
                   </div>
                 </div>
                 {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && (
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 04c859049c..01358ed7be 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -1,17 +1,17 @@
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { Transition } from "@headlessui/react";
 import { faArrowRightArrowLeft, faCube, faTrash} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { AppUiContext } from '../../contexts/AppUiContext';
-import { Button, H4, InputVector } from "~/components";
+import { Button, H4, H6, InputVector } from "~/components";
 
 import { XYZ } from '../../datastructures/common';
 
 
 
 export const ControlPanelSceneObject = () => {
-  const [appUiState,dispatchAppUiState ] = useContext(AppUiContext);
+  const [appUiState, dispatchAppUiState ] = useContext(AppUiContext);
 
   const position = appUiState?.currentSceneObject.objectVectors.position;
   const rotation = appUiState?.currentSceneObject.objectVectors.rotation;
@@ -29,9 +29,6 @@ export const ControlPanelSceneObject = () => {
     console.log(xyz);
     // setScalar(xyz);
   }
-  // useEffect(()=>{
-    
-  // },[position,rotation,scalar]);
 
   return(
     <Transition
@@ -50,8 +47,8 @@ export const ControlPanelSceneObject = () => {
           <p>Object Name</p>
         </div>
         <div className="flex items-center gap-2">
-          <FontAwesomeIcon icon={faArrowRightArrowLeft}/>
-          <p>Swap Object</p>
+          <FontAwesomeIcon icon={faArrowRightArrowLeft} size="xs" />
+          <H6>Swap Object</H6>
         </div>
       </div>
       <span className='h-1'/>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 482b42e119..2583148f3f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -126,9 +126,16 @@ export default {
       "ui-controls-button": "#676781",
       "ui-divider": "#515168",
 
+      "axis-x" :"#D33242",
+      "axis-y" :"#308752",
+      "axis-z" :"#2E70FF",
+      red:  "#D33242",
+      green:"#308752",
+      blue: "#2E70FF",
+
+      white: colors.white,
       gray: colors.gray,
       black: colors.black,
-      white: colors.white,
     },
   },
   plugins: [],

From 700b9c6c1ed56285b1ef6cb6c7b10b0dcfc40766 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Fri, 29 Mar 2024 18:30:47 -0400
Subject: [PATCH 7/8] done control panel for scene object

---
 .../ControlPanelSceneObject.tsx               | 46 ++++++++++++++++---
 .../reducers/appUiReducer/reducer.tsx         |  9 ++++
 .../reducers/appUiReducer/types.tsx           |  9 ++++
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 01358ed7be..976b902743 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -7,6 +7,7 @@ import { AppUiContext } from '../../contexts/AppUiContext';
 import { Button, H4, H6, InputVector } from "~/components";
 
 import { XYZ } from '../../datastructures/common';
+import { ACTION_TYPES } from '../../reducers/appUiReducer/types';
 
 
 
@@ -18,16 +19,49 @@ export const ControlPanelSceneObject = () => {
   const scalar = appUiState?.currentSceneObject.objectVectors.scalar;
 
   const handlePositionChange = (xyz:XYZ)=>{
-    console.log(xyz);
-    // setPosition(xyz);
+    if(appUiState)
+      dispatchAppUiState({
+        type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT,
+        payload:{
+          currentSceneObject:{
+            objectVectors:{
+              position: {...xyz},
+              rotation: appUiState.currentSceneObject.objectVectors.rotation,
+              scalar:appUiState.currentSceneObject.objectVectors.scalar,
+            }
+          }
+        }
+      });
   }
   const handleRotationChange = (xyz:XYZ)=>{
-    console.log(xyz);
-    // setRotation(xyz);
+    if(appUiState)
+      dispatchAppUiState({
+        type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT,
+        payload:{
+          currentSceneObject:{
+            objectVectors:{
+              position: appUiState.currentSceneObject.objectVectors.position,
+              rotation: {...xyz},
+              scalar:appUiState.currentSceneObject.objectVectors.scalar,
+            }
+          }
+        }
+      });
   }
   const handleScalarChange = (xyz:XYZ)=>{
-    console.log(xyz);
-    // setScalar(xyz);
+    if(appUiState)
+      dispatchAppUiState({
+        type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT,
+        payload:{
+          currentSceneObject:{
+            objectVectors:{
+              position: appUiState.currentSceneObject.objectVectors.position,
+              rotation: appUiState.currentSceneObject.objectVectors.rotation,
+              scalar:{...xyz},
+            }
+          }
+        }
+      });
   }
 
   return(
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
index ca3dfcb978..e95d3bb301 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
+++ b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
@@ -11,6 +11,15 @@ export function reducer(state: State, action: Action): State {
         },
       }
     }
+    case ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT:{
+      return{
+        ...state,
+        currentSceneObject: {
+          isShowing: state.currentSceneObject.isShowing,
+          objectVectors: {...action.payload.currentSceneObject.objectVectors},
+        },
+      }
+    }
     case ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT:{
       return{
         ...state,
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
index 75f85e627d..6772ea4d2c 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
+++ b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
@@ -36,11 +36,20 @@ export enum ACTION_TYPES {
   UPDATE_EDITOR_LOADINGBAR = "update_editor_loadingbar",
   HIDE_EDITOR_LOADINGBAR = "hide_editor_loadingbar",
   SHOW_CONTROLPANELS_SCENEOBJECT = "show_controlpanels_sceneobject",
+  UPDATE_CONTROLPANELS_SCENEOBJECT = "update_controlpanels_sceneobject",
   HIDE_CONTROLPANELS_SCENEOBJECT = "hide_controlpanels_sceneobject",
 };
 
 export type Action =
   | {type: ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT}
+  | {
+      type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT,
+      payload:{
+        currentSceneObject: {
+          objectVectors: Simple3DVector;
+        };
+      }
+    }
   | {
       type: ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
       payload:{

From 039b91983fc298a0c2b33adfd0c2e473603076c7 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Fri, 29 Mar 2024 19:18:19 -0400
Subject: [PATCH 8/8] Backmerge test, which I broke by accident to fix this
 branch

---
 app/pages/PageEnigma/js/editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 982c9b6952..1dbeb4d15b 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -16,7 +16,7 @@ import { FFmpeg, createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
 import AudioEngine from "./audio_engine.js";
 import TransformEngine from "./transform_engine.js";
 import { TimeLine, TimelineDataState } from "./timeline.js";
-// import { ClipUI } from "../datastructures/clips/clip_ui.js";
+import { ClipUI } from "../datastructures/clips/clip_ui.js";
 import { LipSyncEngine } from "./lip_sync_engine.js";
 import { AnimationEngine } from "./animation_engine.js";