Refactor socket initialization to include organization and enhance asset event handling; remove unused console logs and improve asset data structure

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -9,6 +9,7 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
+import { useSelectedItem } from "../../../store/store";
 interface AssetProp {
   filename: string;
   thumbnail?: string;
@@ -23,6 +24,7 @@ interface AssetProp {
   CreatedBy?: String;
 }
 const Assets: React.FC = () => {
+  const { setSelectedItem } = useSelectedItem();
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
@@ -85,11 +87,11 @@ const Assets: React.FC = () => {
       try {
         const res = await getCategoryAsset(asset);
         setFilteredAsset(res || []); // Ensure it's always an array
-      } catch (error) {}
+      } catch (error) { }
     }
   };
 
-  useEffect(() => {}, [filteredAsset]);
+  useEffect(() => { }, [filteredAsset]);
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
@@ -102,7 +104,10 @@ const Assets: React.FC = () => {
           {/* Back Button */}
           <div
             className="back-button"
-            onClick={() => setSelectedCategory(null)}
+            onClick={() => {
+              setSelectedCategory(null);
+              setFilteredAsset([]);
+            }}
           >
             ← Back
           </div>
@@ -116,6 +121,7 @@ const Assets: React.FC = () => {
                       src={asset?.thumbnail}
                       alt={asset.filename}
                       className="asset-image"
+                      onPointerDown={() => setSelectedItem({ name: asset.filename, id: asset.modelfileID })}
                     />
                   )}
                   <div className="asset-name">

app/src/modules/builder/geomentries/assets/addAssetModel.ts

@@ -9,6 +9,8 @@ import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
 // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import { Socket } from 'socket.io-client';
 import * as CONSTANTS from '../../../../types/world/worldConstants';
+import { getAssetEventType } from '../../../../services/simulation/getAssetEventType';
+import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 
 async function addAssetModel(
     raycaster: THREE.Raycaster,
@@ -58,6 +60,7 @@ async function addAssetModel(
             if (intersectPoint.y < 0) {
                 intersectPoint = new THREE.Vector3(intersectPoint.x, 0, intersectPoint.z);
             }
+            console.log('selectedItem: ', selectedItem);
             const cachedModel = THREE.Cache.get(selectedItem.id);
             if (cachedModel) {
                 // console.log(`[Cache] Fetching ${selectedItem.name}`);
@@ -136,51 +139,88 @@ async function handleModelLoad(
         modelname: selectedItem.name,
         modelfileID: selectedItem.id,
         position: [intersectPoint!.x, intersectPoint!.y, intersectPoint!.z],
-        rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z, },
+        rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
         isLocked: false,
         isVisible: true
     };
 
-    setFloorItems((prevItems) => {
-        const updatedItems = [...(prevItems || []), newFloorItem];
-        localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
-        return updatedItems;
-    });
-
     const email = localStorage.getItem("email");
     const organization = email ? email.split("@")[1].split(".")[0] : "default";
 
-    //REST
+    getAssetEventType(selectedItem.id, organization).then(async (res) => {
+        console.log('res: ', res);
 
-    // await setFloorItemApi(
+        if (res.type === "Conveyor") {
-    //     organization,
+            const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
-    //     newFloorItem.modeluuid,
-    //     newFloorItem.modelname,
-    //     newFloorItem.position,
-    //     { "x": model.rotation.x, "y": model.rotation.y, "z": model.rotation.z },
-    //     newFloorItem.modelfileID!,
-    //     false,
-    //     true,
-    // );
 
-    //SOCKET
+            const eventData: Extract<Types.FloorItemType['eventData'], { type: 'Conveyor' }> = {
+                type: 'Conveyor',
+                points: res.points.map((point: any, index: number) => ({
+                    uuid: pointUUIDs[index],
+                    position: point.position as [number, number, number],
+                    rotation: point.rotation as [number, number, number],
+                    actions: [{
+                        uuid: THREE.MathUtils.generateUUID(),
+                        name: 'Action 1',
+                        type: 'Inherit',
+                        material: 'Inherit',
+                        delay: 'Inherit',
+                        spawnInterval: 'Inherit',
+                        isUsed: false
+                    }],
+                    triggers: [],
+                    connections: {
+                        source: { pathUUID: model.uuid, pointUUID: pointUUIDs[index] },
+                        targets: []
+                    }
+                })),
+                speed: 'Inherit'
+            };
 
-    const data = {
+            console.log('eventData: ', eventData);
-        organization,
+            newFloorItem.eventData = eventData;
-        modeluuid: newFloorItem.modeluuid,
+        }
-        modelname: newFloorItem.modelname,
-        modelfileID: newFloorItem.modelfileID,
-        position: newFloorItem.position,
-        rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
-        isLocked: false,
-        isVisible: true,
-        socketId: socket.id,
-    };
 
-    socket.emit("v1:FloorItems:set", data);
+        setFloorItems((prevItems) => {
+            const updatedItems = [...(prevItems || []), newFloorItem];
+            localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+            return updatedItems;
+        });
 
-    gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
+        // API
-    gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
+
+        // await setFloorItemApi(
+        //     organization,
+        //     newFloorItem.modeluuid,
+        //     newFloorItem.modelname,
+        //     newFloorItem.modelfileID,
+        //     newFloorItem.position,
+        //     { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
+        //     false,
+        //     true,
+        //     newFloorItem.eventData
+        // );
+
+        // SOCKET
+
+        const data = {
+            organization,
+            modeluuid: newFloorItem.modeluuid,
+            modelname: newFloorItem.modelname,
+            modelfileID: newFloorItem.modelfileID,
+            position: newFloorItem.position,
+            rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
+            isLocked: false,
+            isVisible: true,
+            eventData: newFloorItem.eventData,
+            socketId: socket.id
+        };
+
+        socket.emit("v2:model-asset:add", data);
+
+        gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
+        gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
+    });
 }
 
 export default addAssetModel;

app/src/modules/builder/groups/floorItemsGroup.tsx

@@ -60,6 +60,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
         };
 
         getFloorItems(organization).then((data) => {
+            console.log('data: ', data);
             const uniqueItems = (data as Types.FloorItems).filter((item, index, self) =>
                 index === self.findIndex((t) => t.modelfileID === item.modelfileID)
             );
@@ -305,7 +306,10 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
         };
     }, [deleteModels, transformMode, controls, selectedItem, state.camera, state.pointer, activeTool, activeModule]);
 
+    useEffect(() => {
 
+        console.log('floorItems: ', floorItems);
+    }, [floorItems])
 
     useFrame(() => {
         if (controls)

app/src/modules/collaboration/socketResponses.dev.tsx

@@ -81,7 +81,8 @@ export default function SocketResponses({
             // console.log('data: ', data);
         })
 
-        socket.on('FloorItemsUpdateResponse', async (data: any) => {
+        socket.on('model-asset:response:updates', async (data: any) => {
+            console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return
             }

app/src/modules/scene/world/world.tsx

@@ -358,7 +358,7 @@ export default function World() {
         anglesnappedPoint={anglesnappedPoint}
       />
 
-      <DrieHtmlTemp itemsGroup={itemsGroup} />
+      {/* <DrieHtmlTemp itemsGroup={itemsGroup} /> */}
 
       <Agv lines={lines} plane={plane} />
     </>

app/src/modules/simulation/behaviour/behaviour.tsx

@@ -2,22 +2,16 @@ import { useFloorItems, useSimulationPaths } from '../../../store/store';
 import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
 import { useEffect } from 'react';
-import { getAssetEventType } from '../../../services/simulation/getAssetEventType';
 
 function Behaviour() {
     const { setSimulationPaths } = useSimulationPaths();
     const { floorItems } = useFloorItems();
 
     useEffect(() => {
-        const email = localStorage.getItem('email')
-        const organization = (email!.split("@")[1]).split(".")[0];
         const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[] = [];
 
         floorItems.forEach((item: Types.FloorItemType) => {
             if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
-                // getAssetEventType(item.modelfileID, organization).then((res) => {
-                //     console.log('res: ', res);
-                // });
                 const point1Position = new THREE.Vector3(0, 0.85, 2.2);
                 const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
                 const point2Position = new THREE.Vector3(0, 0.85, -2.2);

app/src/pages/Project.tsx

@@ -37,8 +37,8 @@ const Project: React.FC = () => {
     setZones([]);
     const email = localStorage.getItem("email");
     if (email) {
-      useSocketStore.getState().initializeSocket(email);
       const Organization = email!.split("@")[1].split(".")[0];
+      useSocketStore.getState().initializeSocket(email, Organization);
       const name = localStorage.getItem("userName");
       if (Organization && name) {
         setOrganization(Organization);

app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts

@@ -1,13 +1,28 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_TEST}`;
 
-export const setFloorItemApi = async (organization: string, modeluuid: string, modelname: string, position: Object, rotation: Object, modelfileID: string, isLocked: boolean, isVisible: boolean) => {
+export const setFloorItemApi = async (
+    organization: string,
+    modeluuid: string,
+    modelname: string,
+    modelfileID: string,
+    position: Object,
+    rotation: Object,
+    isLocked: boolean,
+    isVisible: boolean,
+    eventData?: any
+) => {
     try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/v1/setFloorItems`, {
+        const body: any = { organization, modeluuid, modelname, position, rotation, modelfileID, isLocked, isVisible };
+        if (eventData) {
+            body.eventData = eventData;
+        }
+
+        const response = await fetch(`${url_Backend_dwinzo}/api/v2/setasset`, {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({ organization, modeluuid, modelname, position, rotation, modelfileID, isLocked, isVisible }),
+            body: JSON.stringify(body),
         });
 
         if (!response.ok) {
@@ -15,6 +30,7 @@ export const setFloorItemApi = async (organization: string, modeluuid: string, m
         }
 
         const result = await response.json();
+        console.log('result: ', result);
         return result;
     } catch (error) {
         if (error instanceof Error) {

app/src/services/simulation/getAssetEventType.ts

@@ -14,7 +14,6 @@ export const getAssetEventType = async (modelId: string, organization: string) =
         }
 
         const result = await response.json();
-        console.log('result: ', result);
         return result;
     } catch (error) {
         if (error instanceof Error) {

app/src/store/store.ts

@@ -5,19 +5,16 @@ import { io } from "socket.io-client";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
   socket: null,
-  initializeSocket: (email: any) => {
+  initializeSocket: (email: string, organization: string) => {
     const existingSocket = get().socket;
     if (existingSocket) {
       return;
     }
 
-    const socket = io(
+    const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, {
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
+      reconnection: false,
-      {
+      auth: { email, organization },
-        reconnection: false,
+    });
-        auth: { email },
-      }
-    );
 
     set({ socket });
   },

app/src/types/world/worldConstants.ts

@@ -61,7 +61,6 @@ export type GridConfig = {
   divisions: number;
   primaryColor: string;
   secondaryColor: string;
-
   position2D: [x: number, y: number, z: number];
   position3D: [x: number, y: number, z: number];
 };
@@ -70,7 +69,6 @@ export type PlaneConfig = {
   position2D: [x: number, y: number, z: number];
   position3D: [x: number, y: number, z: number];
   rotation: number;
-
   width: number;
   height: number;
   color: string;
@@ -78,7 +76,6 @@ export type PlaneConfig = {
 
 export type ShadowConfig = {
   shadowOffset: number;
-
   shadowmapSizewidth: number;
   shadowmapSizeheight: number;
   shadowcamerafar: number;
@@ -89,10 +86,8 @@ export type ShadowConfig = {
   shadowcameraright: number;
   shadowbias: number;
   shadownormalBias: number;
-
   shadowMaterialPosition: [x: number, y: number, z: number];
   shadowMaterialRotation: [x: number, y: number, z: number];
-
   shadowMaterialOpacity: number;
 };
 
@@ -116,12 +111,10 @@ export type PointConfig = {
   defaultOuterColor: string;
   deleteColor: string;
   boxScale: [number, number, number];
-
   wallOuterColor: string;
   floorOuterColor: string;
   aisleOuterColor: string;
   zoneOuterColor: string;
-
   snappingThreshold: number;
 };
 
@@ -129,17 +122,13 @@ export type LineConfig = {
   tubularSegments: number;
   radius: number;
   radialSegments: number;
-
   wallName: string;
   floorName: string;
   aisleName: string;
   zoneName: string;
   referenceName: string;
-
   lineIntersectionPoints: number;
-
   defaultColor: string;
-
   wallColor: string;
   floorColor: string;
   aisleColor: string;
@@ -156,7 +145,6 @@ export type WallConfig = {
 export type FloorConfig = {
   defaultColor: string;
   height: number;
-
   textureScale: number;
 };
 
@@ -168,13 +156,11 @@ export type RoofConfig = {
 export type AisleConfig = {
   width: number;
   height: number;
-
   defaultColor: number;
 };
 
 export type ZoneConfig = {
   defaultColor: string;
-
   color: string;
 };
 
@@ -199,9 +185,7 @@ export const firstPersonControls: Controls = {
   minDistance: 0, // Minimum distance from the target
   maxDistance: 0, // Maximum distance from the target
   maxPolarAngle: Math.PI, // Maximum polar angle
-
   leftMouse: 1, // Mouse button for rotation (ROTATE)
-
   forwardSpeed: 0.3, // Speed of forward movement
   backwardSpeed: -0.3, // Speed of backward movement
   leftSpeed: -0.3, // Speed of left movement
@@ -259,7 +243,6 @@ export const gridConfig: GridConfig = {
   divisions: 75, // Number of divisions in the grid
   primaryColor: "#d5d5d5", // Primary color of the grid
   secondaryColor: "#e3e3e3", // Secondary color of the grid
-
   position2D: [0, 0.1, 0], // Position of the grid in 2D view
   position3D: [0, -0.5, 0], // Position of the grid in 3D view
 };
@@ -276,7 +259,6 @@ export const planeConfig: PlaneConfig = {
 
 export const shadowConfig: ShadowConfig = {
   shadowOffset: 50, // Offset of the shadow
-
   shadowmapSizewidth: 1024, // Width of the shadow map
   shadowmapSizeheight: 1024, // Height of the shadow map
   // shadowmapSizewidth: 8192, // Width of the shadow map
@@ -289,10 +271,8 @@ export const shadowConfig: ShadowConfig = {
   shadowcameraright: 30, // Right plane of the shadow camera
   shadowbias: -0.001, // Bias of the shadow
   shadownormalBias: 0.02, // Normal bias of the shadow
-
   shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
   shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material
-
   shadowMaterialOpacity: 0.1, // Opacity of the shadow material
 };
 
@@ -316,12 +296,10 @@ export const pointConfig: PointConfig = {
   defaultOuterColor: "#ffffff", // Default outer color of the points
   deleteColor: "#ff0000", // Color of the points when deleting
   boxScale: [0.5, 0.5, 0.5], // Scale of the points
-
   wallOuterColor: "#C7C7C7", // Outer color of the wall points
   floorOuterColor: "#808080", // Outer color of the floor points
   aisleOuterColor: "#FBBC05", // Outer color of the aisle points
   zoneOuterColor: "#007BFF", // Outer color of the zone points
-
   snappingThreshold: 1, // Threshold for snapping
 };
 
@@ -329,17 +307,13 @@ export const lineConfig: LineConfig = {
   tubularSegments: 64, // Number of tubular segments
   radius: 0.15, // Radius of the lines
   radialSegments: 8, // Number of radial segments
-
   wallName: "WallLine", // Name of the wall lines
   floorName: "FloorLine", // Name of the floor lines
   aisleName: "AisleLine", // Name of the aisle lines
   zoneName: "ZoneLine", // Name of the zone lines
   referenceName: "ReferenceLine", // Name of the reference lines
-
   lineIntersectionPoints: 300, // Number of intersection points
-
   defaultColor: "#000000", // Default color of the lines
-
   wallColor: "#C7C7C7", // Color of the wall lines
   floorColor: "#808080", // Color of the floor lines
   aisleColor: "#FBBC05", // Color of the aisle lines

app/src/types/world/worldTypes.d.ts

@@ -198,9 +198,30 @@ export type FloorItemType = {
     modelname: string;
     position: [number, number, number];
     rotation: { x: number; y: number; z: number };
-    modelfileID?: string;
+    modelfileID: string;
     isLocked: boolean;
     isVisible: boolean;
+    eventData?: {
+        type: 'Conveyor';
+        points: {
+            uuid: string;
+            position: [number, number, number];
+            rotation: [number, number, number];
+            actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
+            triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number }[] | [];
+            connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
+        }[];
+        speed: number | string;
+    } | {
+        type: 'Vehicle';
+        point: {
+            uuid: string;
+            position: [number, number, number];
+            actions: { uuid: string; name: string; type: string; start: { x: number, y: number } | {}, hitCount: number, end: { x: number, y: number } | {}, buffer: number };
+            connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
+            speed: number;
+        };
+    };
 };
 
 // Array of floor items for managing multiple objects on the floor