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

Refactor event handling and state management for StaticMachine and ArmBot types

Browse Source 
- Updated `loadInitialFloorItems.ts` to streamline event data processing for StaticMachine and ArmBot types.
- Enhanced `copyPasteControls.tsx` and `duplicationControls.tsx` to support StaticMachine and ArmBot event data creation with proper UUID generation.
- Modified `moveControls.tsx`, `rotateControls.tsx`, and `transformControls.tsx` to include event data in the state.
- Improved `pathConnector.tsx` to handle connections for StaticMachine and ArmBot types, including deletion functionality.
- Updated store management to rename `useDeleteModels` to `useDeleteTool` for clarity.
- Adjusted type definitions in `worldTypes.d.ts` to include StaticMachine and ArmBot event schemas.
This commit is contained in:
Jerald-Golden-B
2025-04-08 14:56:45 +05:30
parent daa507e464
commit b5ba3a0ce1
22 changed files with 789 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/modules/builder/csg/csg.tsx
View File

@@ -1,6 +1,6 @@
import * as THREE from "three";
import { Geometry, Base, Subtraction } from "@react-three/csg";
import { useDeleteModels } from "../../../store/store";
import { useDeleteTool } from "../../../store/store";
import { useRef } from "react";
export interface CsgProps {
@@ -11,19 +11,19 @@ export interface CsgProps {
}
export const Csg: React.FC<CsgProps> = (props) => {
const { deleteModels } = useDeleteModels();
const { deleteTool } = useDeleteTool();
const modelRef = useRef<THREE.Object3D>();
const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
if (modelRef.current && deleteModels) {
if (modelRef.current && deleteTool) {
modelRef.current.traverse((child) => {
if (child instanceof THREE.Mesh) {
if (!originalMaterials.current.has(child)) {
originalMaterials.current.set(child, child.material);
}
child.material = child.material.clone();
child.material.color.set(hovered && deleteModels ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
child.material.color.set(hovered && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
}
});
}

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

@@ -150,6 +150,7 @@ async function handleModelLoad(
const organization = email ? email.split("@")[1].split(".")[0] : "";
getAssetEventType(selectedItem.id, organization).then(async (res) => {
console.log('res: ', res);
if (res.type === "Conveyor") {
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
@@ -219,7 +220,7 @@ async function handleModelLoad(
eventData.position = newFloorItem.position;
eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
...(prevEvents || []),
eventData as Types.ConveyorEventsSchema
]);
@@ -281,13 +282,139 @@ async function handleModelLoad(
return updatedItems;
});
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
...(prevEvents || []),
eventData as Types.VehicleEventsSchema
]);
socket.emit("v2:model-asset:add", data);
} else if (res.type === "StaticMachine") {
const pointUUID = THREE.MathUtils.generateUUID();
const backendEventData: Extract<Types.EventData['eventData'], { type: 'StaticMachine' }> = {
type: "StaticMachine",
points: {
uuid: pointUUID,
position: res.points.position as [number, number, number],
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', buffer: 0, material: 'Inherit' },
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
connections: { source: { modelUUID: model.uuid, pointUUID: pointUUID }, targets: [] },
}
}
// 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,
// { type: backendEventData.type, points: backendEventData.points }
// );
// 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: { type: backendEventData.type, points: backendEventData.points },
socketId: socket.id
};
const eventData: any = backendEventData;
eventData.modeluuid = newFloorItem.modeluuid;
eventData.modelName = newFloorItem.modelname;
eventData.position = newFloorItem.position;
eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
setFloorItems((prevItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
...(prevEvents || []),
eventData as Types.StaticMachineEventsSchema
]);
socket.emit("v2:model-asset:add", data);
} else if (res.type === "ArmBot") {
const pointUUID = THREE.MathUtils.generateUUID();
const backendEventData: Extract<Types.EventData['eventData'], { type: 'ArmBot' }> = {
type: "ArmBot",
points: {
uuid: pointUUID,
position: res.points.position as [number, number, number],
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 1, processes: [] },
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
connections: { source: { modelUUID: model.uuid, pointUUID: pointUUID }, targets: [] },
}
}
// 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,
// { type: backendEventData.type, points: backendEventData.points }
// );
// 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: { type: backendEventData.type, points: backendEventData.points },
socketId: socket.id
};
const eventData: any = backendEventData;
eventData.modeluuid = newFloorItem.modeluuid;
eventData.modelName = newFloorItem.modelname;
eventData.position = newFloorItem.position;
eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
setFloorItems((prevItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
...(prevEvents || []),
eventData as Types.ArmBotEventsSchema
]);
socket.emit("v2:model-asset:add", data);
} else {
// API

10
app/src/modules/builder/groups/floorGroup.tsx
View File

@@ -1,5 +1,5 @@
import { useFrame, useThree } from "@react-three/fiber";
import { useAddAction, useDeleteModels, useRoofVisibility, useToggleView, useWallVisibility, useUpdateScene } from "../../../store/store";
import { useAddAction, useDeleteTool, useRoofVisibility, useToggleView, useWallVisibility, useUpdateScene } from "../../../store/store";
import hideRoof from "../geomentries/roofs/hideRoof";
import hideWalls from "../geomentries/walls/hideWalls";
import addAndUpdateReferencePillar from "../geomentries/pillars/addAndUpdateReferencePillar";
@@ -16,7 +16,7 @@ const FloorGroup = ({ floorGroup, lines, referencePole, hoveredDeletablePillar }
const { toggleView, setToggleView } = useToggleView();
const { scene, camera, pointer, raycaster, gl } = useThree();
const { addAction, setAddAction } = useAddAction();
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { updateScene, setUpdateScene } = useUpdateScene();
useEffect(() => {
@@ -56,7 +56,7 @@ const FloorGroup = ({ floorGroup, lines, referencePole, hoveredDeletablePillar }
if (addAction === "pillar") {
addPillar(referencePole, floorGroup);
}
if (deleteModels) {
if (deleteTool) {
DeletePillar(hoveredDeletablePillar, floorGroup);
}
}
@@ -78,7 +78,7 @@ const FloorGroup = ({ floorGroup, lines, referencePole, hoveredDeletablePillar }
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
};
}, [deleteModels, addAction])
}, [deleteTool, addAction])
useFrame(() => {
hideRoof(roofVisibility, floorGroup, camera);
@@ -87,7 +87,7 @@ const FloorGroup = ({ floorGroup, lines, referencePole, hoveredDeletablePillar }
if (addAction === "pillar") {
addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
}
if (deleteModels) {
if (deleteTool) {
DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
}
})

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

@@ -1,5 +1,5 @@
import { useFrame, useThree } from "@react-three/fiber";
import { useActiveTool, useAsset3dWidget, useCamMode, useDeletableFloorItem, useDeleteModels, useFloorItems, useLoadingProgress, useRenderDistance, useselectedFloorItem, useSelectedItem, useSimulationStates, useSocketStore, useToggleView, useTransformMode, } from "../../../store/store";
import { useActiveTool, useAsset3dWidget, useCamMode, useDeletableFloorItem, useDeleteTool, useFloorItems, useLoadingProgress, useRenderDistance, useSelectedFloorItem, useSelectedItem, useSimulationStates, useSocketStore, useToggleView, useTransformMode, } from "../../../store/store";
import assetVisibility from "../geomentries/assets/assetVisibility";
import { useEffect } from "react";
import * as THREE from "three";
@@ -26,10 +26,10 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
const { toggleView } = useToggleView();
const { floorItems, setFloorItems } = useFloorItems();
const { camMode } = useCamMode();
const { deleteModels } = useDeleteModels();
const { deleteTool } = useDeleteTool();
const { setDeletableFloorItem } = useDeletableFloorItem();
const { transformMode } = useTransformMode();
const { setselectedFloorItem } = useselectedFloorItem();
const { setSelectedFloorItem } = useSelectedFloorItem();
const { activeTool } = useActiveTool();
const { selectedItem, setSelectedItem } = useSelectedItem();
const { simulationStates, setSimulationStates } = useSimulationStates();
@@ -191,7 +191,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
isLeftMouseDown = false;
if (drag) return;
if (deleteModels) {
if (deleteTool) {
DeleteFloorItems(itemsGroup, hoveredDeletableFloorItem, setFloorItems, setSimulationStates, socket);
}
const Mode = transformMode;
@@ -212,12 +212,12 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
// }
// if (currentObject) {
// AttachedObject.current = currentObject as any;
// setselectedFloorItem(AttachedObject.current!);
// setSelectedFloorItem(AttachedObject.current!);
// }
} else {
const target = controls.getTarget(new THREE.Vector3());
await controls.setTarget(target.x, 0, target.z, true);
setselectedFloorItem(null);
setSelectedFloorItem(null);
}
}
}
@@ -261,12 +261,12 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
controls.setTarget(center.x, center.y, center.z, true);
controls.fitToBox(AttachedObject.current!, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
setselectedFloorItem(AttachedObject.current!);
setSelectedFloorItem(AttachedObject.current!);
}
} else {
const target = controls.getTarget(new THREE.Vector3());
await controls.setTarget(target.x, 0, target.z, true);
setselectedFloorItem(null);
setSelectedFloorItem(null);
}
}
}
@@ -295,7 +295,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
if (controls) {
const target = controls.getTarget(new THREE.Vector3());
controls.setTarget(target.x, 0, target.z, true);
setselectedFloorItem(null);
setSelectedFloorItem(null);
}
}
@@ -307,14 +307,14 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
canvasElement.removeEventListener("drop", onDrop);
canvasElement.removeEventListener("dragover", onDragOver);
};
}, [deleteModels, transformMode, controls, selectedItem, state.camera, state.pointer, activeTool, activeModule,]);
}, [deleteTool, transformMode, controls, selectedItem, state.camera, state.pointer, activeTool, activeModule,]);
useFrame(() => {
if (controls)
assetVisibility(itemsGroup, state.camera.position, renderDistance);
if (deleteModels && activeModule === "builder") {
if (deleteTool && activeModule === "builder") {
DeletableHoveredFloorItems(state, itemsGroup, hoveredDeletableFloorItem, setDeletableFloorItem);
} else if (!deleteModels) {
} else if (!deleteTool) {
if (hoveredDeletableFloorItem.current) {
hoveredDeletableFloorItem.current = undefined;
setDeletableFloorItem(null);

12
app/src/modules/builder/groups/wallItemsGroup.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect } from "react";
import { useDeleteModels, useDeletePointOrLine, useObjectPosition, useObjectRotation, useObjectScale, useSelectedWallItem, useSocketStore, useWallItems } from "../../../store/store";
import { useDeleteTool, useDeletePointOrLine, useObjectPosition, useObjectRotation, useObjectScale, useSelectedWallItem, useSocketStore, useWallItems } from "../../../store/store";
import { Csg } from "../csg/csg";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
@@ -16,7 +16,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
const state = useThree();
const { socket } = useSocketStore();
const { pointer, camera, raycaster } = state;
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { wallItems, setWallItems } = useWallItems();
const { objectPosition, setObjectPosition } = useObjectPosition();
const { objectScale, setObjectScale } = useObjectScale();
@@ -210,7 +210,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
const onMouseUp = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = false;
if (!drag && deleteModels && activeModule === "builder") {
if (!drag && deleteTool && activeModule === "builder") {
DeleteWallItems(hoveredDeletableWallItem, setWallItems, wallItems, socket);
}
}
@@ -257,15 +257,15 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
canvasElement.removeEventListener("drop", onDrop);
canvasElement.removeEventListener("dragover", onDragOver);
};
}, [deleteModels, wallItems])
}, [deleteTool, wallItems])
useEffect(() => {
if (deleteModels && activeModule === "builder") {
if (deleteTool && activeModule === "builder") {
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
}
}, [deleteModels])
}, [deleteTool])
return (
<>

10
app/src/modules/builder/groups/wallsAndWallItems.tsx
View File

@@ -1,5 +1,5 @@
import { Geometry } from "@react-three/csg";
import { useDeleteModels, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store";
import { useDeleteTool, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store";
import handleMeshDown from "../eventFunctions/handleMeshDown";
import handleMeshMissed from "../eventFunctions/handleMeshMissed";
import WallsMesh from "./wallsMesh";
@@ -11,13 +11,13 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
const { walls, setWalls } = useWalls();
const { wallItems, setWallItems } = useWallItems();
const { toggleView, setToggleView } = useToggleView();
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { transformMode, setTransformMode } = useTransformMode();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
useEffect(() => {
if (transformMode === null) {
if (!deleteModels) {
if (!deleteTool) {
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
@@ -33,12 +33,12 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
receiveShadow
visible={!toggleView}
onClick={(event) => {
if (!deleteModels && transformMode !== null) {
if (!deleteTool && transformMode !== null) {
handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView);
}
}}
onPointerMissed={() => {
if (!deleteModels) {
if (!deleteTool) {
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
setSelectedWallItem(null);
setSelectedItemsIndex(null);

6
app/src/modules/builder/groups/zoneGroup.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo, useRef } from "react";
import { Line, Sphere } from "@react-three/drei";
import { useThree, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { useActiveLayer, useDeleteModels, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store";
import { useActiveLayer, useDeleteTool, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store";
// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi";
// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi";
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
@@ -23,7 +23,7 @@ const ZoneGroup: React.FC = () => {
const { removedLayer, setRemovedLayer } = useRemovedLayer();
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { activeLayer, setActiveLayer } = useActiveLayer();
const { socket } = useSocketStore();
@@ -115,7 +115,7 @@ const ZoneGroup: React.FC = () => {
} else {
setDeletePointOrLine(false);
setMovePoint(false);
setDeleteModels(false);
setDeleteTool(false);
}
if (!toggleView) {
setStartPoint(null);

6
app/src/modules/builder/groups/zoneGroup1.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect } from "react";
import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useActiveLayer, useSocketStore, useDeleteModels, useDeletePointOrLine, useMovePoint, useToggleView, useUpdateScene, useNewLines, useToolMode } from "../../../store/store";
import { useActiveLayer, useSocketStore, useDeleteTool, useDeletePointOrLine, useMovePoint, useToggleView, useUpdateScene, useNewLines, useToolMode } from "../../../store/store";
import { useThree } from "@react-three/fiber";
import arrayLineToObject from "../geomentries/lines/lineConvertions/arrayLineToObject";
import addPointToScene from "../geomentries/points/addPointToScene";
@@ -14,7 +14,7 @@ import loadZones from "../geomentries/zones/loadZones";
const ZoneGroup = ({ zoneGroup, plane, floorPlanGroupLine, floorPlanGroupPoint, line, lines, currentLayerPoint, dragPointControls, floorPlanGroup, ReferenceLineMesh, LineCreated, isSnapped, ispreSnapped, snappedPoint, isSnappedUUID, isAngleSnapped, anglesnappedPoint }: any) => {
const { toggleView, setToggleView } = useToggleView();
const { deleteModels, setDeleteModels } = useDeleteModels();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
@@ -35,7 +35,7 @@ const ZoneGroup = ({ zoneGroup, plane, floorPlanGroupLine, floorPlanGroupPoint,
if (toolMode === "Zone") {
setDeletePointOrLine(false);
setMovePoint(false);
setDeleteModels(false);
setDeleteTool(false);
} else {
removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);