Merge pull request #140 from storytold/test

revert last breaking change

app/components/InputVector.tsx

@@ -1,6 +1,5 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
@@ -42,8 +41,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={xRef}
           value={x}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -58,8 +55,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={yRef}
           value={y}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -74,8 +69,6 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={zRef}
           value={z}
-          onFocus={() => (ignoreDelete.value = true)}
-          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
     </div>

app/components/Textarea.tsx

@@ -2,7 +2,6 @@ import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Label } from "./Typography";
 import { kebabCase } from "~/utilities";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 type ResizeType =
   | "none"
@@ -25,10 +24,14 @@ export const Textarea = ({
 }) => {
   return (
     <div className="flex flex-col">
-      {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
-
+      {label && 
+        <Label htmlFor={id ? id : kebabCase(label)}>
+          {label}
+        </Label>
+      }
+      
       <textarea
-        id={id ? id : label ? kebabCase(label) : undefined}
+        id={id ? id : (label ? kebabCase(label) : undefined)}
         className={twMerge(
           "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
           className,
@@ -38,14 +41,8 @@ export const Textarea = ({
           transition: "outline-color 0.15s ease-in-out",
           resize: resize,
         }}
-        onFocus={(e) => {
-          ignoreDelete.value = true;
-          e.currentTarget.style.outlineColor = "#e66462";
-        }}
-        onBlur={(e) => {
-          ignoreDelete.value = false;
-          e.currentTarget.style.outlineColor = "transparent";
-        }}
+        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
+        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
         {...rest}
       />
     </div>

app/pages/PageEnigma/PageEnigma.tsx

@@ -18,7 +18,7 @@ export const PageEnigma = () => {
     function setPage() {
       // TODO address this issue with zooming
       pageHeight.value = window.innerHeight;
-      pageWidth.value = window.innerWidth;
+      pageWidth.value = window.outerWidth;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -101,13 +101,7 @@ export const PageEnigmaComponent = () => {
 
               {/* Bottom controls */}
               <div
-                className="absolute bottom-0 left-0"
-                style={{
-                  width:
-                    pageWidth.value -
-                    (sidePanelVisible.value ? sidePanelWidth.value : 0) -
-                    84,
-                }}
+                className="absolute bottom-0 left-0 w-full"
                 onClick={handleOverlayClick}
               >
                 <PreviewEngineCamera />

app/pages/PageEnigma/Queue/toEngineActions.ts

@@ -7,8 +7,6 @@ export enum toEngineActions {
 
   ADD_OBJECT = "add_object",
 
-  ADD_SHAPE = "add_shape",
-
   // data= QueueKeyframe
   DELETE_CLIP = "delete_clip",
   // data=QueueClip

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

@@ -132,14 +132,15 @@ export const ControlPanelSceneObject = () => {
         return;
       }
 
-      for (const key in editorEngine?.timeline.characters) {
-        const element = editorEngine?.timeline.characters[key];
+      for (let key in editorEngine?.timeline.characters) {
+        let element = editorEngine?.timeline.characters[key];
         if (key == currentSceneObject.object_uuid) {
-          currentSceneObject.group = element;
-          break;
+            currentSceneObject.group = element;
+            break;
         }
       }
 
+
       Queue.publish({
         queueName: QueueNames.TO_TIMELINE,
         action: toTimelineActions.ADD_KEYFRAME,
@@ -164,13 +165,7 @@ export const ControlPanelSceneObject = () => {
   return (
     <Transition
       show={appUiState?.controlPanel.isShowing}
-      className={[
-        "absolute bottom-0 right-0",
-        "m-4 flex h-fit w-fit flex-col gap-2",
-        "rounded-lg",
-        "border border-ui-panel-border",
-        "bg-ui-panel p-4 text-white",
-      ].join(" ")}
+      className="absolute bottom-0 right-0 m-4 flex h-fit w-fit flex-col gap-2 rounded-lg border border-ui-panel-border bg-ui-panel p-4 text-white"
       enter="transition-opacity duration-100"
       enterFrom="opacity-0"
       enterTo="opacity-100"

app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -20,6 +20,30 @@ export const Controls3D = () => {
   const handlePlus = () => {
     console.log("Controls 3D: Plus button clicked");
   };
+  const handleCube = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Box");
+  };
+  const handleCylinder = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Cylinder");
+  };
+  const handleTorus = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Donut");
+  };
+  const handleSphere = () => {
+    if (editorEngine == null || editorEngine == undefined) {
+      return;
+    }
+    editorEngine.create_parim("Sphere");
+  };
   const handleMoveArrows = () => {
     if (!editorEngine) {
       return;
@@ -70,6 +94,15 @@ export const Controls3D = () => {
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 
+            <div className="flex gap-1">
+              <ButtonIcon icon={faCube} onClick={handleCube} />
+              <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
+              <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
+              <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
+            </div>
+
+            <span className="h-4 w-0 border-l border-white/[0.15]" />
+
             <ButtonIconSelect
               options={modes}
               onOptionChange={handleModeChange}

app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx

@@ -6,7 +6,6 @@ import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers";
 import { EngineContext } from "../../contexts/EngineContext";
 import { ArtStyle } from "../../js/api_manager";
-import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 export const TabStylization = () => {
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -9,7 +9,6 @@ import {
   deleteAudioClip,
   deleteCharacterClip,
   selectedItem,
-  ignoreDelete,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -40,9 +39,6 @@ export const Timeline = () => {
   }, []);
 
   const onDeleteAsk = useCallback((event: KeyboardEvent) => {
-    if (ignoreDelete.value) {
-      return;
-    }
     if (
       ["Backspace", "Delete"].indexOf(event.key) > -1 &&
       selectedItem.value !== null

app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx

@@ -17,7 +17,6 @@ import {
   audioGroup,
   objectGroup,
   deleteCharacter,
-  addShape,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { deleteObject } from "~/pages/PageEnigma/store/objectGroup/deleteObject";
@@ -44,10 +43,10 @@ export const TrackProvider = ({ children }: Props) => {
       if (dragItem.value.type === AssetType.OBJECT) {
         addObject(dragItem.value);
       }
-      if (dragItem.value.type === AssetType.SHAPE) {
-        addShape(dragItem.value);
-      }
     }
+    // if (dragItem.value.type === AssetType.SHAPE) {
+    //   console.log("Dragged In Shape Type")
+    // }
 
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {

app/pages/PageEnigma/js/editor.ts

@@ -183,7 +183,6 @@ class Editor {
     this.animation_engine = new AnimationEngine(this.version);
 
     this.timeline = new TimeLine(
-      this,
       this.audio_engine,
       this.transform_engine,
       this.lipsync_engine,
@@ -206,10 +205,12 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
+
     this.storyteller_proxy_scene = new StoryTellerProxyScene(
       this.version,
       this.activeScene.scene,
     );
+
   }
 
   initialize(config: any) {
@@ -290,7 +291,7 @@ class Editor {
     );
 
     this.control = new TransformControls(this.camera, this.renderer.domElement);
-    this.control.space = "local"; // Local transformation mode
+    this.control.space = 'local'; // Local transformation mode
     // .space = 'world'; // Global mode
 
     this.control.setScaleSnap(0.1);
@@ -409,18 +410,19 @@ class Editor {
   // TO UPDATE selected objects in the scene might want to add to the scene ...
   async setSelectedObject(position: XYZ, rotation: XYZ, scale: XYZ) {
     if (this.selected != undefined || this.selected != null) {
-      //console.log(`triggering setSelectedObject`)
-      this.selected.position.x = position.x;
-      this.selected.position.y = position.y;
-      this.selected.position.z = position.z;
 
-      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x);
-      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y);
-      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z);
+      //console.log(`triggering setSelectedObject`) 
+      this.selected.position.x = position.x
+      this.selected.position.y = position.y
+      this.selected.position.z = position.z
 
-      this.selected.scale.x = scale.x;
-      this.selected.scale.y = scale.y;
-      this.selected.scale.z = scale.z;
+      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x)
+      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y)
+      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z)
+
+      this.selected.scale.x = scale.x
+      this.selected.scale.y = scale.y
+      this.selected.scale.z = scale.z
     }
   }
 
@@ -550,7 +552,9 @@ class Editor {
     // const object: THREE.Object3D = await this.activeScene.load_glb(
     //   "m_4wva09qznapzk5rcvbxy671d1qx2pr",
     // );
+
     // object.uuid = "CH1";
+
     // Stick Open Pose Man: m_9f3d3z94kk6m25zywyz6an3p43fjtw
     // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d
     // YBot: m_9sqg0evpr23587jnr8z3zsvav1x077
@@ -735,7 +739,7 @@ class Editor {
 
     if (this.timeline.is_playing) {
       const changeView = await this.timeline.update(this.rendering);
-      if (changeView) {
+      if(changeView) {
         this.switchCameraView();
       }
     } else if (this.last_scrub == this.timeline.scrubber_frame_position) {

app/pages/PageEnigma/js/timeline.ts

@@ -12,7 +12,7 @@ import { QueueNames } from "../Queue/QueueNames";
 import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
-import { MediaItem } from "~/pages/PageEnigma/models";
+
 // Every object uuid / entity has a track.
 export class TimelineDataState {
     timeline_items: ClipUI[];
@@ -133,18 +133,11 @@ export class TimeLine {
             case toEngineActions.ADD_OBJECT:
                 await this.addObject(data);
                 break;
-            case toEngineActions.ADD_SHAPE:
-                    await this.addShape(data);
-                    break;
             default:
                 console.log("Action Not Wired", action);
         }
     }
 
-    public async addShape({ data }: { data: MediaItem }) {
-        this.scene.instantiate(data.media_id);
-      }
-
     public async addCharacter(data: any) {
         let media_id = data.data['media_id'];
         let name = data.data['name'];
@@ -503,4 +496,5 @@ export class TimeLine {
             currentTime: this.current_time,
         });
     }
-}
+}
+

app/pages/PageEnigma/store/index.ts

@@ -5,7 +5,6 @@ export * from "./dragAndDrop";
 export * from "./media";
 export * from "./objectGroup";
 export * from "./selectedItem";
-export * from "./shape";
 export * from "./sidePanel";
 export * from "./sizing";
 export * from "./timing";

app/pages/PageEnigma/store/media.ts

@@ -454,7 +454,7 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "Talk (Demo Sounds)",
-    thumbnail: "resources/placeholders/audio_placeholder.png",
+    thumbnail: "resources/placeholders/audio_placeholder.png"
   },
   {
     version: 1,
@@ -462,8 +462,8 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "NCS Song",
-    thumbnail: "resources/placeholders/audio_placeholder.png",
-  },
+    thumbnail: "resources/placeholders/audio_placeholder.png"
+  }
 ]);
 
 export const cameraItems = signal<MediaItem[]>([
@@ -530,35 +530,13 @@ export const objectItems = signal<MediaItem[]>([
     thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);
-
 // In the future these will have shape id's
 export const shapeItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "Box",
+    media_id: "",
     type: AssetType.SHAPE,
     name: "Cube",
-    thumbnail: "resources/shapes/cube.png",
-  },
-  {
-    version: 1,
-    media_id: "Cylinder",
-    type: AssetType.SHAPE,
-    name: "Cylinder",
-    thumbnail: "resources/shapes/cylinder.png",
-  },
-  {
-    version: 1,
-    media_id: "Donut",
-    type: AssetType.SHAPE,
-    name: "Donut",
-    thumbnail: "resources/shapes/donut.png",
-  },
-  {
-    version: 1,
-    media_id: "Sphere",
-    type: AssetType.SHAPE,
-    name: "Sphere",
-    thumbnail: "resources/shapes/sphere.png",
+    thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);

app/pages/PageEnigma/store/selectedItem.ts

@@ -2,5 +2,3 @@ import { signal } from "@preact/signals-core";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models";
 
 export const selectedItem = signal<Clip | Keyframe | null>(null);
-
-export const ignoreDelete = signal(false);

app/pages/PageEnigma/store/shape.ts

@@ -1,12 +0,0 @@
-import { MediaItem } from "~/pages/PageEnigma/models";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
-import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-
-export function addShape(item: MediaItem) {
-  Queue.publish({
-    queueName: QueueNames.TO_ENGINE,
-    action: toEngineActions.ADD_SHAPE,
-    data: item,
-  });
-}