Refactor position handling in CopyPasteControls3D and DuplicationControls3D; update useRetrieveHandler to include machine and human event management; implement event handlers for model interactions in useEventHandlers.
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
import * as THREE from 'three';
|
||||
import { CameraControls } from '@react-three/drei';
|
||||
import { ThreeEvent } from '@react-three/fiber';
|
||||
import { useCallback } from 'react';
|
||||
import { ProductStoreType } from '../../../../../../store/simulation/useProductStore';
|
||||
import { EventStoreType } from '../../../../../../store/simulation/useEventsStore';
|
||||
import { Socket } from 'socket.io-client';
|
||||
|
||||
import { useActiveTool, useToolMode } from '../../../../../../store/builder/store';
|
||||
import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
|
||||
import { useSocketStore } from '../../../../../../store/builder/store';
|
||||
import { useSceneContext } from '../../../../../scene/sceneContext';
|
||||
import { useProductContext } from '../../../../../simulation/products/productContext';
|
||||
import { useVersionContext } from '../../../../version/versionContext';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { getUserData } from '../../../../../../functions/getUserData';
|
||||
|
||||
// import { deleteFloorItem } from '../../../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
|
||||
|
||||
export function useModelEventHandlers({
|
||||
controls,
|
||||
boundingBox,
|
||||
groupRef,
|
||||
toggleView,
|
||||
deletableFloorItem,
|
||||
setDeletableFloorItem,
|
||||
setSelectedFloorItem,
|
||||
gl,
|
||||
setTop,
|
||||
setLeft,
|
||||
getIsEventInProduct,
|
||||
getEventByModelUuid,
|
||||
setSelectedAsset,
|
||||
clearSelectedAsset,
|
||||
removeAsset,
|
||||
updateBackend,
|
||||
leftDrag,
|
||||
rightDrag
|
||||
}: {
|
||||
controls: CameraControls | any,
|
||||
boundingBox: THREE.Box3 | null,
|
||||
groupRef: React.RefObject<THREE.Group>,
|
||||
toggleView: boolean,
|
||||
deletableFloorItem: THREE.Object3D | null,
|
||||
setDeletableFloorItem: (item: THREE.Object3D | null) => void,
|
||||
setSelectedFloorItem: (item: THREE.Object3D | null) => void,
|
||||
gl: THREE.WebGLRenderer,
|
||||
setTop: (top: number) => void,
|
||||
setLeft: (left: number) => void,
|
||||
getIsEventInProduct: (productUuid: string, modelUuid: string) => boolean,
|
||||
getEventByModelUuid: (modelUuid: string) => EventsSchema | undefined,
|
||||
setSelectedAsset: (EventData: EventsSchema) => void,
|
||||
clearSelectedAsset: () => void,
|
||||
removeAsset: (modelUuid: string) => void,
|
||||
updateBackend: (productName: string, productUuid: string, projectId: string, event: EventsSchema) => void,
|
||||
leftDrag: React.MutableRefObject<boolean>,
|
||||
rightDrag: React.MutableRefObject<boolean>
|
||||
}) {
|
||||
|
||||
const { activeTool } = useActiveTool();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { subModule } = useSubModuleStore();
|
||||
const { socket } = useSocketStore();
|
||||
const { eventStore, productStore } = useSceneContext();
|
||||
const { selectedProductStore } = useProductContext();
|
||||
const { selectedProduct } = selectedProductStore();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { projectId } = useParams();
|
||||
const { userId, organization } = getUserData();
|
||||
|
||||
const handleDblClick = (asset: Asset) => {
|
||||
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
|
||||
const size = boundingBox.getSize(new THREE.Vector3());
|
||||
const center = boundingBox.getCenter(new THREE.Vector3());
|
||||
|
||||
const front = new THREE.Vector3(0, 0, 1);
|
||||
groupRef.current.localToWorld(front);
|
||||
front.sub(groupRef.current.position).normalize();
|
||||
|
||||
const distance = Math.max(size.x, size.y, size.z) * 2;
|
||||
const newPosition = center.clone().addScaledVector(front, distance);
|
||||
|
||||
(controls as CameraControls).setPosition(newPosition.x, newPosition.y, newPosition.z, true);
|
||||
(controls as CameraControls).setTarget(center.x, center.y, center.z, true);
|
||||
(controls as CameraControls).fitToBox(groupRef.current, true, {
|
||||
cover: true,
|
||||
paddingTop: 5,
|
||||
paddingLeft: 5,
|
||||
paddingBottom: 5,
|
||||
paddingRight: 5,
|
||||
});
|
||||
|
||||
setSelectedFloorItem(groupRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = async (evt: ThreeEvent<MouseEvent>, asset: Asset) => {
|
||||
if (leftDrag.current || toggleView) return;
|
||||
if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
|
||||
|
||||
//REST
|
||||
|
||||
// const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName);
|
||||
|
||||
//SOCKET
|
||||
|
||||
const data = {
|
||||
organization,
|
||||
modelUuid: asset.modelUuid,
|
||||
modelName: asset.modelName,
|
||||
socketId: socket.id,
|
||||
userId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
projectId
|
||||
}
|
||||
|
||||
const response = socket.emit('v1:model-asset:delete', data)
|
||||
|
||||
eventStore.getState().removeEvent(asset.modelUuid);
|
||||
const updatedEvents = productStore.getState().deleteEvent(asset.modelUuid);
|
||||
|
||||
updatedEvents.forEach((event) => {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productUuid,
|
||||
projectId || '',
|
||||
event
|
||||
);
|
||||
})
|
||||
|
||||
if (response) {
|
||||
|
||||
removeAsset(asset.modelUuid);
|
||||
|
||||
echo.success("Model Removed!");
|
||||
}
|
||||
|
||||
} else if (activeModule === 'simulation' && subModule === "simulations" && activeTool === 'pen') {
|
||||
if (asset.eventData && asset.eventData.type === 'Conveyor') {
|
||||
const intersectedPoint = evt.point;
|
||||
const localPosition = groupRef.current?.worldToLocal(intersectedPoint.clone());
|
||||
if (localPosition) {
|
||||
const conveyorPoint: ConveyorPointSchema = {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
position: [localPosition?.x, localPosition?.y, localPosition?.z],
|
||||
rotation: [0, 0, 0],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: `Action 1`,
|
||||
actionType: 'default',
|
||||
material: 'Default Material',
|
||||
delay: 0,
|
||||
spawnInterval: 5,
|
||||
spawnCount: 1,
|
||||
triggers: []
|
||||
}
|
||||
}
|
||||
|
||||
const event = productStore.getState().addPoint(selectedProduct.productUuid, asset.modelUuid, conveyorPoint);
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productUuid,
|
||||
projectId || '',
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const handlePointerOver = useCallback((asset: Asset) => {
|
||||
if (activeTool === "delete" && activeModule === 'builder') {
|
||||
if (deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
|
||||
return;
|
||||
} else {
|
||||
setDeletableFloorItem(groupRef.current);
|
||||
}
|
||||
}
|
||||
}, [activeTool, activeModule, deletableFloorItem]);
|
||||
|
||||
const handlePointerOut = useCallback((evt: ThreeEvent<MouseEvent>, asset: Asset) => {
|
||||
if (evt.intersections.length === 0 && activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
|
||||
setDeletableFloorItem(null);
|
||||
}
|
||||
}, [activeTool, deletableFloorItem]);
|
||||
|
||||
const handleContextMenu = (asset: Asset, evt: ThreeEvent<MouseEvent>) => {
|
||||
if (rightDrag.current || toggleView) return;
|
||||
if (activeTool === "cursor" && subModule === 'simulations') {
|
||||
if (asset.modelUuid) {
|
||||
const canvasElement = gl.domElement;
|
||||
const isInProduct = getIsEventInProduct(selectedProduct.productUuid, asset.modelUuid);
|
||||
if (isInProduct) {
|
||||
const event = getEventByModelUuid(asset.modelUuid);
|
||||
if (event) {
|
||||
setSelectedAsset(event);
|
||||
const canvasRect = canvasElement.getBoundingClientRect();
|
||||
const relativeX = evt.clientX - canvasRect.left;
|
||||
const relativeY = evt.clientY - canvasRect.top;
|
||||
setTop(relativeY);
|
||||
setLeft(relativeX);
|
||||
} else {
|
||||
clearSelectedAsset();
|
||||
}
|
||||
} else {
|
||||
const event = getEventByModelUuid(asset.modelUuid);
|
||||
if (event) {
|
||||
setSelectedAsset(event)
|
||||
const canvasRect = canvasElement.getBoundingClientRect();
|
||||
const relativeX = evt.clientX - canvasRect.left;
|
||||
const relativeY = evt.clientY - canvasRect.top;
|
||||
setTop(relativeY);
|
||||
setLeft(relativeX);
|
||||
} else {
|
||||
clearSelectedAsset()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
clearSelectedAsset()
|
||||
}
|
||||
} else {
|
||||
clearSelectedAsset()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleDblClick,
|
||||
handleClick,
|
||||
handlePointerOver,
|
||||
handlePointerOut,
|
||||
handleContextMenu
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user