@twick/studio 0.15.4 → 0.15.5

package/dist/index.mjs

@@ -2834,11 +2834,25 @@ function PropsToolbar({
   }) });
 }
 function ElementProps({ selectedElement, updateElement }) {
-  const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
-  const { x, y, opacity, rotation } = elementProps;
-  const handleUpdateElement = (props) => {
+  const opacity = (selectedElement == null ? void 0 : selectedElement.getOpacity()) || 1;
+  const rotation = (selectedElement == null ? void 0 : selectedElement.getRotation()) || 0;
+  const position = (selectedElement == null ? void 0 : selectedElement.getPosition()) || { x: 0, y: 0 };
+  const handleRotationChange = (rotation2) => {
     if (selectedElement) {
-      updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
+      selectedElement.setRotation(rotation2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handleOpacityChange = (opacity2) => {
+    if (selectedElement) {
+      selectedElement.setOpacity(opacity2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handlePositionChange = (props) => {
+    if (selectedElement) {
+      selectedElement.setPosition({ x: props.x ?? 0, y: props.y ?? 0 });
+      updateElement == null ? void 0 : updateElement(selectedElement);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
@@ -2852,8 +2866,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: x ?? 0,
-              onChange: (e) => handleUpdateElement({ x: Number(e.target.value) }),
+              value: position.x ?? 0,
+              onChange: (e) => handlePositionChange({ x: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2864,8 +2878,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: y ?? 0,
-              onChange: (e) => handleUpdateElement({ y: Number(e.target.value) }),
+              value: position.y ?? 0,
+              onChange: (e) => handlePositionChange({ y: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2882,7 +2896,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "100",
             value: (opacity ?? 1) * 100,
-            onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+            onChange: (e) => handleOpacityChange(Number(e.target.value) / 100),
             className: "slider-purple"
           }
         ),
@@ -2902,7 +2916,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "360",
             value: rotation ?? 0,
-            onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+            onChange: (e) => handleRotationChange(Number(e.target.value)),
             className: "slider-purple"
           }
         ),