integerated version context with scene context
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import * as THREE from "three"
|
||||
import { useEffect } from 'react'
|
||||
import { getFloorAssets } from '../../../services/factoryBuilder/asset/floorAsset/getFloorItemsApi';
|
||||
import { useLoadingProgress, useRenameModeStore, useSelectedItem, useSocketStore } from '../../../store/builder/store';
|
||||
import * as THREE from "three";
|
||||
import { useEffect } from "react";
|
||||
import { getFloorAssets } from "../../../services/factoryBuilder/asset/floorAsset/getFloorItemsApi";
|
||||
import { useLoadingProgress, useRenameModeStore, useSelectedItem, useSocketStore } from "../../../store/builder/store";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||||
import { FloorItems, RefMesh } from "../../../types/world/worldTypes";
|
||||
@@ -14,7 +14,6 @@ import { useParams } from "react-router-dom";
|
||||
import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
|
||||
import { getUserData } from "../../../functions/getUserData";
|
||||
import { useSceneContext } from "../../scene/sceneContext";
|
||||
import { useVersionContext } from "../version/versionContext";
|
||||
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
||||
|
||||
const gltfLoaderWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js", import.meta.url));
|
||||
@@ -24,9 +23,8 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
const { socket } = useSocketStore();
|
||||
const { controls, gl, pointer, camera, raycaster, scene } = useThree();
|
||||
const { setLoadingProgress } = useLoadingProgress();
|
||||
const { assetStore, eventStore } = useSceneContext();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { assetStore, eventStore, versionStore } = useSceneContext();
|
||||
const { selectedVersion } = versionStore();
|
||||
const { setAssets, addAsset, clearAssets } = assetStore();
|
||||
const { addEvent, clearEvents } = eventStore();
|
||||
const { setSelectedFloorAsset } = useBuilderStore();
|
||||
@@ -64,23 +62,25 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
}
|
||||
};
|
||||
|
||||
getFloorAssets(projectId, selectedVersion?.versionId || '').then((data) => {
|
||||
if (data && data.length > 0) {
|
||||
const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId));
|
||||
totalAssets = uniqueItems.length;
|
||||
if (totalAssets === 0) {
|
||||
getFloorAssets(projectId, selectedVersion?.versionId || "")
|
||||
.then((data) => {
|
||||
if (data && data.length > 0) {
|
||||
const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId));
|
||||
totalAssets = uniqueItems.length;
|
||||
if (totalAssets === 0) {
|
||||
updateLoadingProgress(100);
|
||||
return;
|
||||
}
|
||||
gltfLoaderWorker.postMessage({ floorItems: uniqueItems });
|
||||
} else {
|
||||
gltfLoaderWorker.postMessage({ floorItems: [] });
|
||||
updateLoadingProgress(100);
|
||||
return;
|
||||
clearAssets();
|
||||
}
|
||||
gltfLoaderWorker.postMessage({ floorItems: uniqueItems });
|
||||
} else {
|
||||
gltfLoaderWorker.postMessage({ floorItems: [] });
|
||||
updateLoadingProgress(100);
|
||||
clearAssets();
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
gltfLoaderWorker.onmessage = async (event) => {
|
||||
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
|
||||
@@ -96,7 +96,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
|
||||
if (loadedAssets === totalAssets) {
|
||||
const assets: Asset[] = [];
|
||||
getFloorAssets(projectId, selectedVersion.versionId || '').then((data: FloorItems) => {
|
||||
getFloorAssets(projectId, selectedVersion.versionId || "").then((data: FloorItems) => {
|
||||
data.forEach((item) => {
|
||||
if (item.eventData) {
|
||||
assets.push({
|
||||
@@ -109,8 +109,8 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
isCollidable: false,
|
||||
isVisible: item.isVisible,
|
||||
opacity: 1,
|
||||
eventData: item.eventData
|
||||
})
|
||||
eventData: item.eventData,
|
||||
});
|
||||
|
||||
if (item.eventData.type === "Vehicle") {
|
||||
const vehicleEvent: VehicleEventSchema = {
|
||||
@@ -120,7 +120,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "vehicle",
|
||||
subType: item.eventData.subType as VehicleEventSchema['subType'] || '',
|
||||
subType: (item.eventData.subType as VehicleEventSchema["subType"]) || "",
|
||||
speed: 1,
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
@@ -140,9 +140,9 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
pickupDrop: [],
|
||||
dropPickup: [],
|
||||
},
|
||||
triggers: []
|
||||
}
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
addEvent(vehicleEvent);
|
||||
} else if (item.eventData.type === "Conveyor") {
|
||||
@@ -153,23 +153,24 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "transfer",
|
||||
subType: item.eventData.subType || '',
|
||||
subType: item.eventData.subType || "",
|
||||
speed: 1,
|
||||
points: item.eventData.points?.map((point: any, index: number) => ({
|
||||
uuid: point.uuid || THREE.MathUtils.generateUUID(),
|
||||
position: [point.position[0], point.position[1], point.position[2]],
|
||||
rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: `Action 1`,
|
||||
actionType: 'default',
|
||||
material: 'Default material',
|
||||
delay: 0,
|
||||
spawnInterval: 5,
|
||||
spawnCount: 1,
|
||||
triggers: []
|
||||
}
|
||||
})) || [],
|
||||
points:
|
||||
item.eventData.points?.map((point: any, index: number) => ({
|
||||
uuid: point.uuid || THREE.MathUtils.generateUUID(),
|
||||
position: [point.position[0], point.position[1], point.position[2]],
|
||||
rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: `Action 1`,
|
||||
actionType: "default",
|
||||
material: "Default material",
|
||||
delay: 0,
|
||||
spawnInterval: 5,
|
||||
spawnCount: 1,
|
||||
triggers: [],
|
||||
},
|
||||
})) || [],
|
||||
};
|
||||
addEvent(ConveyorEvent);
|
||||
} else if (item.eventData.type === "StaticMachine") {
|
||||
@@ -180,7 +181,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "machine",
|
||||
subType: item.eventData.subType || '',
|
||||
subType: item.eventData.subType || "",
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
|
||||
@@ -191,9 +192,9 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
actionType: "process",
|
||||
processTime: 10,
|
||||
swapMaterial: "Default Material",
|
||||
triggers: []
|
||||
}
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
addEvent(machineEvent);
|
||||
} else if (item.eventData.type === "ArmBot") {
|
||||
@@ -204,7 +205,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "roboticArm",
|
||||
subType: item.eventData.subType || '',
|
||||
subType: item.eventData.subType || "",
|
||||
speed: 1,
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
@@ -217,15 +218,15 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
actionType: "pickAndPlace",
|
||||
process: {
|
||||
startPoint: null,
|
||||
endPoint: null
|
||||
endPoint: null,
|
||||
},
|
||||
triggers: []
|
||||
}
|
||||
]
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
addEvent(roboticArmEvent);
|
||||
} else if (item.eventData.type === 'Storage') {
|
||||
} else if (item.eventData.type === "Storage") {
|
||||
const storageEvent: StorageEventSchema = {
|
||||
modelUuid: item.modelUuid,
|
||||
modelName: item.modelName,
|
||||
@@ -236,7 +237,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
storageCapacity: 10,
|
||||
storageCount: 10,
|
||||
materialType: "Default material",
|
||||
subType: item.eventData.subType || '',
|
||||
subType: item.eventData.subType || "",
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
|
||||
@@ -246,13 +247,13 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: "Action 1",
|
||||
actionType: "store",
|
||||
triggers: []
|
||||
}
|
||||
]
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
addEvent(storageEvent);
|
||||
} else if (item.eventData.type === 'Human') {
|
||||
} else if (item.eventData.type === "Human") {
|
||||
const humanEvent: HumanEventSchema = {
|
||||
modelUuid: item.modelUuid,
|
||||
modelName: item.modelName,
|
||||
@@ -260,7 +261,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "human",
|
||||
subType: item.eventData.subType || '',
|
||||
subType: item.eventData.subType || "",
|
||||
speed: 1,
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
@@ -274,19 +275,19 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
loadCount: 1,
|
||||
assemblyCount: 1,
|
||||
assemblyCondition: {
|
||||
conditionType: 'material',
|
||||
materialType: "Default material"
|
||||
conditionType: "material",
|
||||
materialType: "Default material",
|
||||
},
|
||||
manufactureCount: 1,
|
||||
loadCapacity: 1,
|
||||
processTime: 10,
|
||||
triggers: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
addEvent(humanEvent);
|
||||
} else if (item.eventData.type === 'Crane') {
|
||||
} else if (item.eventData.type === "Crane") {
|
||||
const craneEvent: CraneEventSchema = {
|
||||
modelUuid: item.modelUuid,
|
||||
modelName: item.modelName,
|
||||
@@ -294,7 +295,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||
state: "idle",
|
||||
type: "crane",
|
||||
subType: item.eventData.subType as CraneEventSchema['subType'] || 'pillarJib',
|
||||
subType: (item.eventData.subType as CraneEventSchema["subType"]) || "pillarJib",
|
||||
point: {
|
||||
uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
|
||||
position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
|
||||
@@ -305,11 +306,11 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
actionName: "Action 1",
|
||||
actionType: "pickAndDrop",
|
||||
maxPickUpCount: 1,
|
||||
triggers: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
triggers: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
addEvent(craneEvent);
|
||||
}
|
||||
} else {
|
||||
@@ -323,11 +324,11 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
isCollidable: false,
|
||||
isVisible: item.isVisible,
|
||||
opacity: 1,
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
setAssets(assets);
|
||||
})
|
||||
});
|
||||
updateLoadingProgress(100);
|
||||
}
|
||||
});
|
||||
@@ -341,8 +342,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
const onDrop = (event: DragEvent) => {
|
||||
if (!event.dataTransfer?.files[0]) return;
|
||||
|
||||
if (selectedItem.id !== "" && event.dataTransfer?.files[0] && selectedItem.category !== 'Fenestration') {
|
||||
|
||||
if (selectedItem.id !== "" && event.dataTransfer?.files[0] && selectedItem.category !== "Fenestration") {
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
@@ -367,14 +367,14 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
|
||||
const onMouseUp = (evt: any) => {
|
||||
setIsRenameMode(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (activeModule === "builder") {
|
||||
canvasElement.addEventListener("drop", onDrop);
|
||||
canvasElement.addEventListener("dragover", onDragOver);
|
||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||
} else if ((controls as CameraControls)) {
|
||||
} else if (controls as CameraControls) {
|
||||
const target = (controls as CameraControls).getTarget(new THREE.Vector3());
|
||||
(controls as CameraControls).setTarget(target.x, 0, target.z, true);
|
||||
setSelectedFloorAsset(null);
|
||||
@@ -388,9 +388,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
|
||||
};
|
||||
}, [selectedItem, camera, activeModule, controls, isRenameMode]);
|
||||
|
||||
return (
|
||||
<Models loader={loader} />
|
||||
)
|
||||
return <Models loader={loader} />;
|
||||
}
|
||||
|
||||
export default AssetsGroup;
|
||||
export default AssetsGroup;
|
||||
|
||||
Reference in New Issue
Block a user