Sending messages to the timeline queue.

app/pages/PageEnigma/Queue/Queue.ts

@@ -1,20 +1,22 @@
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 import { QueueClip } from "~/pages/PageEnigma/models/track";
+import { XYZ } from "../datastructures/common";
+import { toTimelineActions } from "./toTimelineActions";
 
 class Queue {
   private _queue: Record<
     string,
     {
-      action: fromEngineActions | toEngineActions;
-      data: QueueClip | { currentTime: number };
+      action: fromEngineActions | toEngineActions | toTimelineActions;
+      data: QueueClip | { currentTime: number } | { position: XYZ, rotation: XYZ, scale: XYZ };
     }[]
   > = {};
   private _subscribers: Record<
     string,
     (entry: {
-      action: fromEngineActions | toEngineActions;
-      data: QueueClip | { currentTime: number };
+      action: fromEngineActions | toEngineActions | toTimelineActions;
+      data: QueueClip | { currentTime: number } | { position: XYZ, rotation: XYZ, scale: XYZ };
     }) => void
   > = {};
 
@@ -24,8 +26,8 @@ class Queue {
     data,
   }: {
     queueName: string;
-    action: fromEngineActions | toEngineActions;
-    data: QueueClip | { currentTime: number };
+    action: fromEngineActions | toEngineActions | toTimelineActions ;
+    data: QueueClip | { currentTime: number } | { position: XYZ, rotation: XYZ, scale: XYZ };
   }) {
     if (!this._queue[queueName]) {
       this._queue[queueName] = [];
@@ -41,8 +43,8 @@ class Queue {
   public subscribe(
     queueName: string,
     onMessage: (entry: {
-      action: fromEngineActions | toEngineActions;
-      data: QueueClip | { currentTime: number };
+      action: fromEngineActions | toEngineActions | toTimelineActions;
+      data: QueueClip | { currentTime: number } | { position: XYZ, rotation: XYZ, scale: XYZ };
     }) => void,
   ) {
     this._subscribers[queueName] = onMessage;

app/pages/PageEnigma/Queue/QueueNames.ts

@@ -1,4 +1,5 @@
 export enum QueueNames {
   FROM_ENGINE = "FROM_ENGINE",
   TO_ENGINE = "TO_ENGINE",
+  TO_TIMELINE = "TO_TIMELINE"
 }

app/pages/PageEnigma/Queue/toTimelineActions.ts

@@ -0,0 +1,4 @@
+export enum toTimelineActions {
+    ADD_KEYFRAME = "add_keyframe"
+}
+  

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

@@ -13,12 +13,15 @@ import { Button, H4, H5, H6, InputVector } from "~/components";
 import { XYZ } from "../../datastructures/common";
 import { ACTION_TYPES } from "../../reducers/appUiReducer/types";
 
+import { QueueNames } from "../../Queue/QueueNames";
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { toTimelineActions } from "../../Queue/toTimelineActions";
 export const ControlPanelSceneObject = () => {
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
 
   const position = appUiState?.currentSceneObject.objectVectors.position;
   const rotation = appUiState?.currentSceneObject.objectVectors.rotation;
-  const scalar = appUiState?.currentSceneObject.objectVectors.scalar;
+  const scalar = appUiState?.currentSceneObject.objectVectors.scale;
 
   const handlePositionChange = (xyz: XYZ) => {
     if (appUiState)
@@ -29,7 +32,7 @@ export const ControlPanelSceneObject = () => {
             objectVectors: {
               position: { ...xyz },
               rotation: appUiState.currentSceneObject.objectVectors.rotation,
-              scalar: appUiState.currentSceneObject.objectVectors.scalar,
+              scale: appUiState.currentSceneObject.objectVectors.scale,
             },
           },
         },
@@ -44,7 +47,7 @@ export const ControlPanelSceneObject = () => {
             objectVectors: {
               position: appUiState.currentSceneObject.objectVectors.position,
               rotation: { ...xyz },
-              scalar: appUiState.currentSceneObject.objectVectors.scalar,
+              scale: appUiState.currentSceneObject.objectVectors.scale,
             },
           },
         },
@@ -59,13 +62,37 @@ export const ControlPanelSceneObject = () => {
             objectVectors: {
               position: appUiState.currentSceneObject.objectVectors.position,
               rotation: appUiState.currentSceneObject.objectVectors.rotation,
-              scalar: { ...xyz },
+              scale: { ...xyz },
             },
           },
         },
       });
   };
 
+  const handleOnAddKeyFrame = () => {
+    if (appUiState) {
+        console.log(`${appUiState.currentSceneObject.objectVectors.position.x}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.position.y}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.position.z}`)
+
+        console.log(`${appUiState.currentSceneObject.objectVectors.rotation.x}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.rotation.y}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.rotation.z}`)
+
+        console.log(`${appUiState.currentSceneObject.objectVectors.scale.x}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.scale.y}`)
+        console.log(`${appUiState.currentSceneObject.objectVectors.scale.z}`)
+
+        Queue.publish({queueName:QueueNames.TO_TIMELINE, action: toTimelineActions.ADD_KEYFRAME, 
+          data: {  
+            position: appUiState.currentSceneObject.objectVectors.position,
+            rotation: appUiState.currentSceneObject.objectVectors.rotation,
+            scale:appUiState.currentSceneObject.objectVectors.scale
+          }
+        })
+    }
+  }
+
   return (
     <Transition
       show={appUiState?.currentSceneObject.isShowing}
@@ -121,7 +148,9 @@ export const ControlPanelSceneObject = () => {
 
       <span className="h-2" />
       <div className="flex gap-2">
-        <Button variant="secondary" className="grow">
+        <Button variant="secondary" 
+        className="grow"
+        onClick={handleOnAddKeyFrame}>
           Add Keyframe (K)
         </Button>
         <Button variant="secondary" icon={faTrash} />

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

@@ -77,7 +77,7 @@ export const ControlsTopButtons = () => {
             objectVectors: {
               position: {x:1,y:2,z:3},
               rotation: {x:4,y:5,z:6},
-              scalar: {x:7,y:8,z:9},
+              scale: {x:7,y:8,z:9},
             }
           }
         }

app/pages/PageEnigma/datastructures/common.ts

@@ -7,5 +7,5 @@ export type XYZ = {
 export type Simple3DVector = {
   position: XYZ;
   rotation: XYZ;
-  scalar: XYZ;
+  scale: XYZ;
 }

app/pages/PageEnigma/js/timeline.ts

@@ -164,7 +164,7 @@ export class TimeLine {
     }
 
     public async scrubberDidStop(offset_frame: number) {
-
+        
     }
     // public streaming events into the timeline from
     public async setScrubberPosition(offset: number) {

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

@@ -17,7 +17,7 @@ export const initialStateValues : State = {
     objectVectors:{
       position:{x:0,y:0,z:0},
       rotation:{x:0,y:0,z:0},
-      scalar:{x:0,y:0,z:0},
+      scale:{x:0,y:0,z:0},
     }
   }
 }