382 lines
15 KiB
TypeScript
382 lines
15 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useSceneContext } from "../../scene/sceneContext";
|
|
import { useSocketStore } from "../../../store/socket/useSocketStore";
|
|
import useAssetResponseHandler from "../responseHandler/useAssetResponseHandler";
|
|
import useWallAssetResponseHandler from "../responseHandler/useWallAssetResponseHandler";
|
|
import useWallResponseHandler from "../responseHandler/useWallResponseHandler";
|
|
|
|
function BuilderResponses() {
|
|
const { assetStore } = useSceneContext();
|
|
const { getAssetById } = assetStore();
|
|
const { builderSocket } = useSocketStore();
|
|
const { addAssetToScene, updateAssetInScene, removeAssetFromScene } = useAssetResponseHandler();
|
|
const { addWallAssetToScene, updateWallAssetInScene, removeWallAssetFromScene } = useWallAssetResponseHandler();
|
|
const { addWallToScene, updateWallInScene, removeWallFromScene } = useWallResponseHandler();
|
|
|
|
//#region Asset
|
|
useEffect(() => {
|
|
if (!builderSocket) return;
|
|
|
|
builderSocket.on("v1:model-asset:response:add", (data: any) => {
|
|
if (!data.message || !data.data) {
|
|
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, () => {
|
|
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, () => {
|
|
echo.log(`Updated asset: ${model.modelName}`);
|
|
});
|
|
} else {
|
|
removeAssetFromScene(data.data.modelUuid, () => {
|
|
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]);
|
|
//#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, () => {
|
|
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]);
|
|
//#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) return;
|
|
if (data.message === "Aisle Created Successfully") {
|
|
} else if (data.message === "Aisle Updated Successfully") {
|
|
}
|
|
});
|
|
|
|
builderSocket.on("v1:model-aisle:response:delete", (data: any) => {
|
|
if (!data.message) return;
|
|
if (data.message === "Aisle Deleted Successfully") {
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (builderSocket) {
|
|
builderSocket.off("v1:model-aisle:response:add");
|
|
builderSocket.off("v1:model-aisle:response:delete");
|
|
}
|
|
};
|
|
}, [builderSocket]);
|
|
//#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;
|