added new human ui

app/src/modules/builder/asset/models/model/model.tsx

@@ -17,6 +17,7 @@ import { useSceneContext } from '../../../../scene/sceneContext';
 import { useVersionContext } from '../../../version/versionContext';
 import { SkeletonUtils } from 'three-stdlib';
 import { useAnimationPlaySpeed } from '../../../../../store/usePlayButtonStore';
+import { upsertProductOrEventApi } from '../../../../../services/simulation/products/UpsertProductOrEventApi';
 
 function Model({ asset }: { readonly asset: Asset }) {
     const { camera, controls, gl } = useThree();
@@ -55,6 +56,21 @@ function Model({ asset }: { readonly asset: Asset }) {
     const blendFactor = useRef(0);
     const blendDuration = 0.5;
 
+    const updateBackend = (
+        productName: string,
+        productUuid: string,
+        projectId: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productUuid: productUuid,
+            projectId: projectId,
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
+        });
+    };
+
     useEffect(() => {
         setDeletableFloorItem(null);
         if (selectedFloorItem === null || selectedFloorItem.modelUuid !== asset.modelUuid) {
@@ -217,7 +233,16 @@ function Model({ asset }: { readonly asset: Asset }) {
             const response = socket.emit('v1:model-asset:delete', data)
 
             eventStore.getState().removeEvent(asset.modelUuid);
-            productStore.getState().deleteEvent(asset.modelUuid);
+            const updatedEvents = productStore.getState().deleteEvent(asset.modelUuid);
+
+            updatedEvents.forEach((event) => {
+                updateBackend(
+                    selectedProduct.productName,
+                    selectedProduct.productUuid,
+                    projectId || '',
+                    event
+                );
+            })
 
             if (response) {