Vps 31/number input objects

frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx

@@ -1,18 +1,18 @@
-import { getComponent } from "../scene/scene";
 import useEditorStore from "../stores/editor";
 import AudioManager from "./AudioManager";
 import ComponentProperties from "./ComponentProperties";
 import SceneSettings from "./SceneSettings";
+import useVisualScene from "../stores/visual";
 
 /**
  * This component displays the properties of scene components in a sidebar
  * @component
  */
 export default function CanvasSideBar() {
   const selected = useEditorStore((state) => state.selected);
-
-  const component = selected ? getComponent(selected) : null;
-
+  const component = useVisualScene((state) =>
+    selected ? state.components[selected] : null
+  );
   return (
     <div className="flex pb-m flex-col w-[18vw] gap-s overflow-y-auto no-scrollbar">
       <SceneSettings />

frontend/src/features/authoring/CanvasSideBar/ComponentProperties.jsx

@@ -1,5 +1,5 @@
 import SceneContext from "context/SceneContext";
-
+import { ObjectPropertyEditor } from "./ObjectPropertyEditor";
 import { useContext, useEffect, useState } from "react";
 import { modifyComponentProp } from "../scene/operations/component";
 import StateOperationMenu from "../../../components/StateVariables/StateOperationMenu";
@@ -44,6 +44,7 @@ export default function ComponentProperties({ component }) {
         </div>
       </div>
       <StateOperationMenu component={component} />
+      <ObjectPropertyEditor component={component} />
     </>
   );
 }

frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx

@@ -0,0 +1,143 @@
+import { translate } from "../../authoring/util";
+import { useEffect, useState } from "react";
+import { modifyVerts } from "../handlers/pointer/resize";
+import { modifyComponentProp } from "../scene/operations/component";
+
+export function ObjectPropertyEditor({ component }) {
+  // x and y vals used for setting and current
+  const [inputX, setInputX] = useState(
+    Math.round(component.bounds.verts[0].x * 100) / 100
+  );
+  const [inputY, setInputY] = useState(
+    Math.round(component.bounds.verts[0].y * 100) / 100
+  );
+  const [inputWidth, setInputWidth] = useState(
+    Math.round(
+      (component.bounds.verts[1].x - component.bounds.verts[0].x) * 100
+    ) / 100
+  );
+  const [inputHeight, setInputHeight] = useState(
+    Math.round(
+      (component.bounds.verts[1].y - component.bounds.verts[0].y) * 100
+    ) / 100
+  );
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const width =
+      Math.round(
+        Math.abs(component.bounds.verts[1].x - component.bounds.verts[0].x) *
+          100
+      ) / 100;
+    const height =
+      Math.round(
+        Math.abs(component.bounds.verts[1].y - component.bounds.verts[0].y) *
+          100
+      ) / 100;
+    const x = Math.round(component.bounds.verts[0].x * 100) / 100;
+    const y = Math.round(component.bounds.verts[0].y * 100) / 100;
+
+    setInputWidth(width);
+    setInputHeight(height);
+    setInputX(x);
+    setInputY(y);
+  }, [component.bounds.verts]);
+
+  //this could prolly be improved
+  // uses the same function as the drag box feat w modifyComponentProp
+  function saveProp(v, type) {
+    const value = parseFloat(String(v).trim());
+    if (isNaN(value)) {
+      const message = `error: non-numeric value entered in ${type} input`;
+      setError(message);
+      return;
+    }
+    setError(null);
+    const verts = component.bounds.verts;
+    if (type === "x") {
+      const diff = value - verts[0].x;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        translate(prev, { x: diff, y: 0 })
+      );
+    } else if (type === "y") {
+      const diff = value - verts[0].y;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        translate(prev, { x: 0, y: diff })
+      );
+      // increase bottom y to expand height and same idea with x
+    } else if (type === "width") {
+      const x = verts[0].x + value;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        modifyVerts(prev, [1, 0.5], { x, y: 0 })
+      );
+    } else if (type === "height") {
+      const y = verts[0].y + value;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        modifyVerts(prev, [0.5, 1], { x: 0, y })
+      );
+    }
+  }
+
+  return (
+    <div className="collapse overflow-visible collapse-arrow bg-base-300 rounded-sm text-s">
+      <input type="checkbox" />
+      <div className="collapse-title">Object Properties</div>
+      <div className="collapse-content text--1 bg-base-200">
+        <fieldset className="fieldset pt-2">
+          {/* Width and Height num inputs*/}
+          <span className=" flex gap-17">
+            <label className="label">Object Width</label>
+            <label className="label">Object Height</label>
+          </span>
+          <div className="flex gap-13">
+            <input
+              type="number"
+              className="input max-w-21"
+              value={inputWidth}
+              onChange={(e) => {
+                setInputWidth(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "width"), 120);
+              }}
+            />
+            <input
+              type="number"
+              className="input max-w-21"
+              value={inputHeight}
+              onChange={(e) => {
+                setInputHeight(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "height"), 120);
+              }}
+            />
+          </div>
+
+          {/* positoin x and y num inputs*/}
+          <span className=" flex gap-22">
+            <label className="label">Position X</label>
+            <label className="label">Position Y</label>
+          </span>
+          <div className="flex gap-13">
+            <input
+              type="number"
+              className="input max-w-21"
+              value={inputX}
+              onChange={(e) => {
+                setInputX(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "x"), 120);
+              }}
+            />
+            <input
+              type="number"
+              className="input max-w-21"
+              value={inputY}
+              onChange={(e) => {
+                setInputY(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "y"), 120);
+              }}
+            />
+          </div>
+          {error && <p className="text-red-500">{error}</p>}
+        </fieldset>
+      </div>
+    </div>
+  );
+}

frontend/src/features/authoring/handlers/pointer/resize.ts

@@ -155,7 +155,7 @@ function mirror(verts: Vec2[], center: Vec2, coords: number[]) {
   return modifyVerts(verts, inverse(coords), inversePosition);
 }
 
-function modifyVerts(verts: Vec2[], coords: number[], v: Vec2) {
+export function modifyVerts(verts: Vec2[], coords: number[], v: Vec2) {
   const newVerts = verts.map((v) => ({ ...v }));
   if (coords[1] !== 0.5) newVerts[coords[1]].y = v.y;
   if (coords[0] !== 0.5) newVerts[coords[0]].x = v.x;