Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Jerald-Golden-B 2025-03-31 19:38:23 +05:30
parent e54c9e6e0d
commit e3a85c81e5
12 changed files with 137 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@ -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">

106
app/src/modules/builder/geomentries/assets/addAssetModel.ts
View File

@ -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(
// organization,
// newFloorItem.modeluuid,
// newFloorItem.modelname,
// newFloorItem.position,
// { "x": model.rotation.x, "y": model.rotation.y, "z": model.rotation.z },
// newFloorItem.modelfileID!,
// false,
// true,
// );
if (res.type === "Conveyor") {
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
//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 = {
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,
socketId: socket.id,
};
console.log('eventData: ', eventData);
newFloorItem.eventData = eventData;
}
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" });
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
// API
// 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;

4
app/src/modules/builder/groups/floorItemsGroup.tsx
View File

@ -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)

3
app/src/modules/collaboration/socketResponses.dev.tsx
View File

@ -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
}

2
app/src/modules/scene/world/world.tsx
View File

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

6
app/src/modules/simulation/behaviour/behaviour.tsx
View File

@ -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);

2
app/src/pages/Project.tsx
View File

@ -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);

24
app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts
View File

@ -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) {

1
app/src/services/simulation/getAssetEventType.ts
View File

@ -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) {

13
app/src/store/store.ts
View File

@ -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(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
{
reconnection: false,
auth: { email },
}
);
const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, {
reconnection: false,
auth: { email, organization },
});
set({ socket });
},

26
app/src/types/world/worldConstants.ts
View File

@ -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

23
app/src/types/world/worldTypes.d.ts vendored
View File

@ -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