451 lines
18 KiB
TypeScript
451 lines
18 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useSceneContext } from "../../scene/sceneContext";
|
|
import { useSocketStore } from "../../../store/socket/useSocketStore";
|
|
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
|
import useAssetResponseHandler from "../responseHandler/useAssetResponseHandler";
|
|
import useWallAssetResponseHandler from "../responseHandler/useWallAssetResponseHandler";
|
|
import useWallResponseHandler from "../responseHandler/useWallResponseHandler";
|
|
import useAisleResponseHandler from "../responseHandler/useAisleResponseHandler";
|
|
|
|
function BuilderResponses() {
|
|
const { assetStore } = useSceneContext();
|
|
const { getAssetById, movedObjects, initialStates, updateAsset, resetAsset, setInitialState } = assetStore();
|
|
const { selectedAisle, setSelectedAisle, selectedWall, setSelectedWall } = useBuilderStore();
|
|
const { builderSocket } = useSocketStore();
|
|
const { addAssetToScene, updateAssetInScene, removeAssetFromScene } = useAssetResponseHandler();
|
|
const { addWallAssetToScene, updateWallAssetInScene, removeWallAssetFromScene } = useWallAssetResponseHandler();
|
|
const { addWallToScene, updateWallInScene, removeWallFromScene } = useWallResponseHandler();
|
|
const { addAisleToScene, updateAisleInScene, removeAisleFromScene } = useAisleResponseHandler();
|
|
|
|
//#region Asset
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:model-asset:response:add", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
setInitialState({});
|
|
setTimeout(() => {
|
|
Object.entries(initialStates).forEach(([key, initialState]) => {
|
|
updateAsset(key, {
|
|
position: initialState.position,
|
|
rotation: initialState.rotation,
|
|
});
|
|
|
|
resetAsset(key);
|
|
});
|
|
}, 50);
|
|
echo.error(`Error adding or updating asset`);
|
|
return;
|
|
}
|
|
if (data.message === "Model created successfully" && data.data) {
|
|
const model: Asset = {
|
|
modelUuid: data.data.modelUuid,
|
|
modelName: data.data.modelName,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
|
|
isLocked: data.data.isLocked,
|
|
isCollidable: true,
|
|
isVisible: data.data.isVisible,
|
|
opacity: 1,
|
|
...(data.data.eventData ? { eventData: data.data.eventData } : {}),
|
|
};
|
|
|
|
addAssetToScene(model, () => {
|
|
setInitialState({});
|
|
echo.log(`Added asset: ${model.modelName}`);
|
|
});
|
|
} else if (data.message === "Model updated successfully" && data.data) {
|
|
const model: Asset = {
|
|
modelUuid: data.data.modelUuid,
|
|
modelName: data.data.modelName,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
|
|
isLocked: data.data.isLocked,
|
|
isCollidable: true,
|
|
isVisible: data.data.isVisible,
|
|
opacity: 1,
|
|
...(data.data.eventData ? { eventData: data.data.eventData } : {}),
|
|
};
|
|
|
|
updateAssetInScene(model, () => {
|
|
setInitialState({});
|
|
echo.log(`Updated asset: ${model.modelName}`);
|
|
});
|
|
} else {
|
|
removeAssetFromScene(data.data.modelUuid, () => {
|
|
setInitialState({});
|
|
setTimeout(() => {
|
|
Object.entries(initialStates).forEach(([key, initialState]) => {
|
|
updateAsset(key, {
|
|
position: initialState.position,
|
|
rotation: initialState.rotation,
|
|
});
|
|
|
|
resetAsset(key);
|
|
});
|
|
}, 50);
|
|
echo.error(`Error adding or updating asset: ${data?.data?.modelName}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-asset:response:copy", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error copying asset`);
|
|
return;
|
|
}
|
|
if (data.message === "Model copied successfully") {
|
|
const model: Asset = {
|
|
modelUuid: data.data.modelUuid,
|
|
modelName: data.data.modelName,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
|
|
isLocked: data.data.isLocked,
|
|
isCollidable: true,
|
|
isVisible: data.data.isVisible,
|
|
opacity: 1,
|
|
...(data.data.eventData ? { eventData: data.data.eventData } : {}),
|
|
};
|
|
|
|
if (getAssetById(data.data.modelUuid)) {
|
|
updateAssetInScene(model, () => {
|
|
echo.log(`Copied asset: ${model.modelName}`);
|
|
});
|
|
} else {
|
|
addAssetToScene(model, () => {
|
|
echo.log(`Copied asset: ${model.modelName}`);
|
|
});
|
|
}
|
|
} else {
|
|
if (!data.data.modelUuid) return;
|
|
removeAssetFromScene(data.data.modelUuid, () => {
|
|
echo.error(`Error copying asset: ${data?.data?.modelName}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-asset:response:duplicate", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error duplicating asset`);
|
|
return;
|
|
}
|
|
if (data.message === "Model duplicated successfully") {
|
|
const model: Asset = {
|
|
modelUuid: data.data.modelUuid,
|
|
modelName: data.data.modelName,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
|
|
isLocked: data.data.isLocked,
|
|
isCollidable: true,
|
|
isVisible: data.data.isVisible,
|
|
opacity: 1,
|
|
...(data.data.eventData ? { eventData: data.data.eventData } : {}),
|
|
};
|
|
|
|
if (getAssetById(data.data.modelUuid)) {
|
|
updateAssetInScene(model, () => {
|
|
echo.log(`Duplicated asset: ${model.modelName}`);
|
|
});
|
|
} else {
|
|
addAssetToScene(model, () => {
|
|
echo.log(`Duplicated asset: ${model.modelName}`);
|
|
});
|
|
}
|
|
} else {
|
|
echo.error(`Error duplicating asset: ${data?.data?.modelName}`);
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-asset:response:delete", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error removing asset`);
|
|
return;
|
|
}
|
|
if (data.message === "Model deleted successfully") {
|
|
removeAssetFromScene(data.data.modelUuid, () => {
|
|
echo.log(`Removed asset: ${data.data.modelName}`);
|
|
});
|
|
} else {
|
|
echo.error(`Error removing asset: ${data?.data?.modelName}`);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:model-asset:response:add");
|
|
builderSocket.off("v1:model-asset:response:copy");
|
|
builderSocket.off("v1:model-asset:response:duplicate");
|
|
builderSocket.off("v1:model-asset:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket, movedObjects, initialStates]);
|
|
//#endregion
|
|
|
|
//#region WallAsset
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:wall-asset:response:add", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error adding or updating wallAsset`);
|
|
return;
|
|
}
|
|
if (data.message === "WallAsset Created Successfully") {
|
|
const model: WallAsset = {
|
|
modelName: data.data.modelName,
|
|
modelUuid: data.data.modelUuid,
|
|
wallUuid: data.data.wallUuid,
|
|
wallAssetType: data.data.wallAssetType,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: data.data.rotation,
|
|
isLocked: data.data.isLocked,
|
|
isVisible: data.data.isVisible,
|
|
opacity: data.data.opacity,
|
|
};
|
|
|
|
addWallAssetToScene(model, () => {
|
|
echo.log(`Added wallAsset: ${model.modelName}`);
|
|
});
|
|
} else if (data.message === "WallAsset Updated Successfully") {
|
|
const model: WallAsset = {
|
|
modelName: data.data.modelName,
|
|
modelUuid: data.data.modelUuid,
|
|
wallUuid: data.data.wallUuid,
|
|
wallAssetType: data.data.wallAssetType,
|
|
assetId: data.data.assetId,
|
|
position: data.data.position,
|
|
rotation: data.data.rotation,
|
|
isLocked: data.data.isLocked,
|
|
isVisible: data.data.isVisible,
|
|
opacity: data.data.opacity,
|
|
};
|
|
|
|
updateWallAssetInScene(model, () => {
|
|
echo.log(`Updated wallAsset: ${model.modelName}`);
|
|
});
|
|
} else {
|
|
removeWallAssetFromScene(data.data.modelUuid, () => {
|
|
echo.error(`Error adding or updating wallAsset: ${data?.data?.modelName}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:wall-asset:response:delete", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error removing wallAsset`);
|
|
return;
|
|
}
|
|
if (data.message === "WallAsset Deleted Successfully") {
|
|
removeWallAssetFromScene(data.data.modelUuid, () => {
|
|
echo.log(`Removed wallAsset: ${data.data.modelName}`);
|
|
});
|
|
} else {
|
|
echo.error(`Error removing wallAsset: ${data?.data?.modelName}`);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:wall-asset:response:add");
|
|
builderSocket.off("v1:wall-asset:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket]);
|
|
//#endregion
|
|
|
|
//#region Wall
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:model-Wall:response:add", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error adding or updating wall`);
|
|
return;
|
|
}
|
|
if (data.message === "Wall Created Successfully") {
|
|
const wall: Wall = {
|
|
wallUuid: data.data.wallUuid,
|
|
points: data.data.points,
|
|
outsideMaterial: data.data.outsideMaterial,
|
|
insideMaterial: data.data.insideMaterial,
|
|
wallThickness: data.data.wallThickness,
|
|
wallHeight: data.data.wallHeight,
|
|
decals: data.data.decals,
|
|
};
|
|
|
|
addWallToScene(wall, () => {
|
|
echo.log(`Added wall: ${wall.wallUuid}`);
|
|
});
|
|
} else if (data.message === "Wall Updated Successfully") {
|
|
const wall: Wall = {
|
|
wallUuid: data.data.wallUuid,
|
|
points: data.data.points,
|
|
outsideMaterial: data.data.outsideMaterial,
|
|
insideMaterial: data.data.insideMaterial,
|
|
wallThickness: data.data.wallThickness,
|
|
wallHeight: data.data.wallHeight,
|
|
decals: data.data.decals,
|
|
};
|
|
|
|
updateWallInScene(wall, () => {
|
|
if (selectedWall?.wallData.wallUuid === wall.wallUuid) {
|
|
setSelectedWall({ wallData: wall, wallMesh: selectedWall.wallMesh });
|
|
}
|
|
|
|
echo.log(`Updated wall: ${wall.wallUuid}`);
|
|
});
|
|
} else {
|
|
removeWallFromScene(data.data.wallUuid, () => {
|
|
echo.error(`Error adding or updating wall: ${data?.data?.wallUuid}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-Wall:response:delete", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error deleting wall`);
|
|
return;
|
|
}
|
|
if (data.message === "Wall Deleted Successfully") {
|
|
removeWallFromScene(data.data.wallUuid, () => {
|
|
echo.log(`Removed wall: ${data.data.wallUuid}`);
|
|
});
|
|
} else {
|
|
echo.error(`Error removing wall: ${data?.data?.wallUuid}`);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:model-Wall:response:add");
|
|
builderSocket.off("v1:model-Wall:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket, selectedWall]);
|
|
//#endregion
|
|
|
|
//#region Floor
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:model-Floor:response:add", (data: any) => {
|
|
if (!data.message) return;
|
|
if (data.message === "Floor Created Successfully") {
|
|
} else if (data.message === "Floor Updated Successfully") {
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-Floor:response:delete", (data: any) => {
|
|
if (!data.message) return;
|
|
if (data.message === "Floor Deleted Successfully") {
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:model-Floor:response:add");
|
|
builderSocket.off("v1:model-Floor:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket]);
|
|
//#endregion
|
|
|
|
//#region Aisle
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:model-aisle:response:add", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error adding or updating aisle`);
|
|
return;
|
|
}
|
|
if (data.message === "Aisle Created Successfully") {
|
|
const aisle: Aisle = {
|
|
aisleUuid: data.data.aisleUuid,
|
|
points: data.data.points,
|
|
type: data.data.type,
|
|
};
|
|
|
|
addAisleToScene(aisle, () => {
|
|
echo.log(`Added aisle: ${aisle.type.aisleType}`);
|
|
});
|
|
} else if (data.message === "Aisle Updated Successfully") {
|
|
const aisle: Aisle = {
|
|
aisleUuid: data.data.aisleUuid,
|
|
points: data.data.points,
|
|
type: data.data.type,
|
|
};
|
|
|
|
updateAisleInScene(aisle, () => {
|
|
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid) {
|
|
setSelectedAisle({ aisleData: aisle, aisleMesh: null });
|
|
}
|
|
|
|
echo.log(`Updated aisle: ${aisle.type.aisleType}`);
|
|
});
|
|
} else {
|
|
removeAisleFromScene(data.data.aisleUuid, () => {
|
|
echo.error(`Error adding or updating aisle: ${data?.data?.type?.aisleType}`);
|
|
});
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-aisle:response:delete", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
echo.error(`Error deleting aisle`);
|
|
return;
|
|
}
|
|
if (data.message === "Aisle Deleted Successfully") {
|
|
removeAisleFromScene(data.data.aisleUuid, () => {
|
|
echo.log(`Removed aisle: ${data.data.aisleUuid}`);
|
|
});
|
|
} else {
|
|
echo.error(`Error removing aisle: ${data?.data?.aisleUuid}`);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:model-aisle:response:add");
|
|
builderSocket.off("v1:model-aisle:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket, selectedAisle]);
|
|
//#endregion
|
|
|
|
//#region Zone
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:zone:response:updates", (data: any) => {
|
|
if (!data.message) return;
|
|
if (data.message === "zone created successfully") {
|
|
} else if (data.message === "zone updated") {
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:zone:response:delete", (data: any) => {
|
|
if (!data.message) return;
|
|
if (data.message === "zone deleted created successfully") {
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:zone:response:updates");
|
|
builderSocket.off("v1:zone:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket]);
|
|
//#endregion
|
|
|
|
return null;
|
|
}
|
|
|
|
export default BuilderResponses;
|