diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 433052f..205d4d8 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -16,7 +16,7 @@ import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; import { useSelectedActionSphere, - useselectedFloorItem, + useSelectedFloorItem, } from "../../../store/store"; import GlobalProperties from "./properties/GlobalProperties"; import AsstePropertiies from "./properties/AssetProperties"; @@ -30,7 +30,7 @@ const SideBarRight: React.FC = () => { const { toggleUI } = useToggleStore(); const { selectedActionSphere } = useSelectedActionSphere(); const { subModule, setSubModule } = useSubModuleStore(); - const { selectedFloorItem } = useselectedFloorItem(); + const { selectedFloorItem } = useSelectedFloorItem(); // Reset activeList whenever activeModule changes useEffect(() => { if (activeModule !== "simulation") setSubModule("properties"); diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx index 4fd6032..06f6f33 100644 --- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx @@ -4,7 +4,7 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import { RemoveIcon } from "../../../icons/ExportCommonIcons"; import PositionInput from "../customInput/PositionInputs"; import RotationInput from "../customInput/RotationInput"; -import { useselectedFloorItem } from "../../../../store/store"; +import { useSelectedFloorItem } from "../../../../store/store"; import * as THREE from "three"; interface UserData { @@ -16,7 +16,7 @@ interface UserData { const AssetProperties: React.FC = () => { const [userData, setUserData] = useState([]); // State to track user data const [nextId, setNextId] = useState(1); // Unique ID for new entries - const { selectedFloorItem } = useselectedFloorItem(); + const { selectedFloorItem } = useSelectedFloorItem(); // Function to handle adding new user data const handleAddUserData = () => { const newUserData: UserData = { diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 3de44bf..bd97ea5 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -22,7 +22,7 @@ import { useSelectedZoneStore } from "../../store/useZoneStore"; import { useActiveTool, useAddAction, - useDeleteModels, + useDeleteTool, useDeletePointOrLine, useMovePoint, useRefTextUpdate, @@ -56,7 +56,7 @@ const Tools: React.FC = () => { // wall options const { toggleView, setToggleView } = useToggleView(); - const { setDeleteModels } = useDeleteModels(); + const { setDeleteTool } = useDeleteTool(); const { setAddAction } = useAddAction(); const { setSelectedWallItem } = useSelectedWallItem(); @@ -84,7 +84,7 @@ const Tools: React.FC = () => { const toggleSwitch = () => { if (toggleThreeD) { setSelectedWallItem(null); - setDeleteModels(false); + setDeleteTool(false); setAddAction(null); setToggleView(true); // localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD)); @@ -131,7 +131,7 @@ const Tools: React.FC = () => { useEffect(() => { setToolMode(null); - setDeleteModels(false); + setDeleteTool(false); setAddAction(null); setTransformMode(null); setMovePoint(false); @@ -197,7 +197,7 @@ const Tools: React.FC = () => { if (toggleView) { setDeletePointOrLine(true); } else { - setDeleteModels(true); + setDeleteTool(true); } break; diff --git a/app/src/modules/builder/csg/csg.tsx b/app/src/modules/builder/csg/csg.tsx index f84fad0..7e49598 100644 --- a/app/src/modules/builder/csg/csg.tsx +++ b/app/src/modules/builder/csg/csg.tsx @@ -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 = (props) => { - const { deleteModels } = useDeleteModels(); + const { deleteTool } = useDeleteTool(); const modelRef = useRef(); const originalMaterials = useRef>(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); } }); } diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts index 9fc6199..9eff19c 100644 --- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts +++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts @@ -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 = { + 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 = { + 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 diff --git a/app/src/modules/builder/groups/floorGroup.tsx b/app/src/modules/builder/groups/floorGroup.tsx index da3536b..e589380 100644 --- a/app/src/modules/builder/groups/floorGroup.tsx +++ b/app/src/modules/builder/groups/floorGroup.tsx @@ -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); } }) diff --git a/app/src/modules/builder/groups/floorItemsGroup.tsx b/app/src/modules/builder/groups/floorItemsGroup.tsx index 6289bd0..325e276 100644 --- a/app/src/modules/builder/groups/floorItemsGroup.tsx +++ b/app/src/modules/builder/groups/floorItemsGroup.tsx @@ -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); diff --git a/app/src/modules/builder/groups/wallItemsGroup.tsx b/app/src/modules/builder/groups/wallItemsGroup.tsx index 1439ef5..cdc326e 100644 --- a/app/src/modules/builder/groups/wallItemsGroup.tsx +++ b/app/src/modules/builder/groups/wallItemsGroup.tsx @@ -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 ( <> diff --git a/app/src/modules/builder/groups/wallsAndWallItems.tsx b/app/src/modules/builder/groups/wallsAndWallItems.tsx index 7366f28..6b6c97d 100644 --- a/app/src/modules/builder/groups/wallsAndWallItems.tsx +++ b/app/src/modules/builder/groups/wallsAndWallItems.tsx @@ -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); diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index c5e54d3..d245516 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -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); diff --git a/app/src/modules/builder/groups/zoneGroup1.tsx b/app/src/modules/builder/groups/zoneGroup1.tsx index b0c6638..80be9a3 100644 --- a/app/src/modules/builder/groups/zoneGroup1.tsx +++ b/app/src/modules/builder/groups/zoneGroup1.tsx @@ -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); diff --git a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts index 22b9a83..c90fe3b 100644 --- a/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts +++ b/app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts @@ -192,7 +192,7 @@ function processLoadedModel( }, ]); - if (item.eventData || item.modelfileID === '67e3db5ac2e8f37134526f40' || item.modelfileID === '67eb7904c2e8f37134527eae') { + if (item.eventData || item.modelfileID === '67e3db5ac2e8f37134526f40') { processEventData(item, setSimulationStates); } @@ -210,7 +210,7 @@ function processEventData(item: Types.EventData, setSimulationStates: any) { data.position = item.position; data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; - setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [ + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ ...(prevEvents || []), data as Types.ConveyorEventsSchema ]); @@ -222,58 +222,35 @@ function processEventData(item: Types.EventData, setSimulationStates: any) { data.modelName = item.modelname; data.position = item.position; - setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [ + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ ...(prevEvents || []), data as Types.VehicleEventsSchema ]); - } else if (item.modelfileID === '67e3db5ac2e8f37134526f40') { + } else if (item.eventData?.type === 'StaticMachine') { - const pointUUID = THREE.MathUtils.generateUUID(); - const pointPosition = new THREE.Vector3(0, 1.5, -0.5); + const data: any = item.eventData; + data.modeluuid = item.modeluuid; + data.modelName = item.modelname; + data.position = item.position; + data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; - const staticMachine: Types.StaticMachineEventsSchema = { - modeluuid: item.modeluuid, - modelName: item.modelname, - type: "StaticMachine", - points: { - uuid: pointUUID, - position: [pointPosition.x, pointPosition.y, pointPosition.z], - actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', buffer: 'Inherit', material: 'Inherit', isUsed: false }, - triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' }, - connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] }, - }, - position: item.position, - rotation: [item.rotation.x, item.rotation.y, item.rotation.z], - }; - - setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [ + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ ...(prevEvents || []), - staticMachine as Types.StaticMachineEventsSchema + data as Types.StaticMachineEventsSchema ]); - } else if (item.modelfileID === '67eb7904c2e8f37134527eae') { - const pointUUID = THREE.MathUtils.generateUUID(); - const pointPosition = new THREE.Vector3(0, 2.75, -0.5); + } else if (item.eventData?.type === 'ArmBot') { - const armBot: Types.ArmBotEventsSchema = { - modeluuid: item.modeluuid, - modelName: item.modelname, - type: "ArmBot", - points: { - uuid: pointUUID, - position: [pointPosition.x, pointPosition.y, pointPosition.z], - actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 1, processes: [] }, - triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' }, - connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] }, - }, - position: item.position, - rotation: [item.rotation.x, item.rotation.y, item.rotation.z], - } + const data: any = item.eventData; + data.modeluuid = item.modeluuid; + data.modelName = item.modelname; + data.position = item.position; + data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; - setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [ + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ ...(prevEvents || []), - armBot as Types.ArmBotEventsSchema + data as Types.ArmBotEventsSchema ]); } diff --git a/app/src/modules/scene/controls/selection/copyPasteControls.tsx b/app/src/modules/scene/controls/selection/copyPasteControls.tsx index 3d2acee..03ffe7e 100644 --- a/app/src/modules/scene/controls/selection/copyPasteControls.tsx +++ b/app/src/modules/scene/controls/selection/copyPasteControls.tsx @@ -181,7 +181,10 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas uuid: THREE.MathUtils.generateUUID() })) : [defaultAction], - triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers, + triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({ + ...trigger, + uuid: THREE.MathUtils.generateUUID() + })), connections: { source: { modelUUID: obj.uuid, pointUUID }, targets: [] @@ -320,6 +323,163 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas socket.emit("v2:model-asset:add", data); + } else if (eventData.type === 'StaticMachine' && eventData) { + const createStaticMachinePoint = () => { + const pointUUID = THREE.MathUtils.generateUUID(); + const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points; + const hasActions = vehiclePoint?.actions !== undefined; + + const defaultAction = { + uuid: THREE.MathUtils.generateUUID(), + name: 'Action 1', + buffer: 0, + material: 'Inherit', + }; + + return { + uuid: pointUUID, + position: vehiclePoint?.position, + actions: hasActions + ? { + ...vehiclePoint.actions, + uuid: THREE.MathUtils.generateUUID() + } + : defaultAction, + connections: { + source: { modelUUID: obj.uuid, pointUUID }, + targets: [] + } + }; + }; + + const backendEventData = { + type: 'StaticMachine', + points: createStaticMachinePoint() + }; + + // API + + // setFloorItemApi( + // organization, + // obj.uuid, + // obj.userData.name, + // obj.userData.modelId, + // [worldPosition.x, worldPosition.y, worldPosition.z], + // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.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: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, + isLocked: false, + isVisible: true, + eventData: { type: backendEventData.type, points: backendEventData.points }, + socketId: socket.id, + }; + + const newEventData: any = { type: backendEventData.type, points: backendEventData.points }; + newEventData.modeluuid = newFloorItem.modeluuid; + newEventData.modelName = newFloorItem.modelname; + newEventData.position = newFloorItem.position; + newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z]; + + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ + ...(prevEvents || []), + newEventData as Types.StaticMachineEventsSchema + ]); + + socket.emit("v2:model-asset:add", data); + + } else if (eventData.type === 'ArmBot' && eventData) { + const createArmBotPoint = () => { + const pointUUID = THREE.MathUtils.generateUUID(); + const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points; + const hasActions = vehiclePoint?.actions !== undefined; + + const defaultAction = { + uuid: THREE.MathUtils.generateUUID(), + name: 'Action 1', + buffer: 0, + material: 'Inherit', + }; + + return { + uuid: pointUUID, + position: vehiclePoint?.position, + actions: hasActions + ? { + ...vehiclePoint.actions, + uuid: THREE.MathUtils.generateUUID() + } + : defaultAction, + triggers: { + uuid: THREE.MathUtils.generateUUID(), + name: vehiclePoint.triggers.name, + type: vehiclePoint.triggers.type, + }, + connections: { + source: { modelUUID: obj.uuid, pointUUID }, + targets: [] + } + }; + }; + + const backendEventData = { + type: 'StaticMachine', + points: createArmBotPoint() + }; + + // API + + // setFloorItemApi( + // organization, + // obj.uuid, + // obj.userData.name, + // obj.userData.modelId, + // [worldPosition.x, worldPosition.y, worldPosition.z], + // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.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: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, + isLocked: false, + isVisible: true, + eventData: { type: backendEventData.type, points: backendEventData.points }, + socketId: socket.id, + }; + + const newEventData: any = { type: backendEventData.type, points: backendEventData.points }; + newEventData.modeluuid = newFloorItem.modeluuid; + newEventData.modelName = newFloorItem.modelname; + newEventData.position = newFloorItem.position; + newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z]; + + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ + ...(prevEvents || []), + newEventData as Types.ArmBotEventsSchema + ]); + + socket.emit("v2:model-asset:add", data); + } else { //REST diff --git a/app/src/modules/scene/controls/selection/duplicationControls.tsx b/app/src/modules/scene/controls/selection/duplicationControls.tsx index a71412d..82160f4 100644 --- a/app/src/modules/scene/controls/selection/duplicationControls.tsx +++ b/app/src/modules/scene/controls/selection/duplicationControls.tsx @@ -163,7 +163,10 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb uuid: THREE.MathUtils.generateUUID() })) : [defaultAction], - triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers, + triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({ + ...trigger, + uuid: THREE.MathUtils.generateUUID() + })), connections: { source: { modelUUID: newFloorItem.modeluuid, pointUUID }, targets: [] @@ -174,9 +177,9 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb const backendEventData = { type: 'Conveyor', points: [ - createConveyorPoint(0), // point1 - createConveyorPoint(1), // middlePoint - createConveyorPoint(2) // point2 + createConveyorPoint(0), + createConveyorPoint(1), + createConveyorPoint(2) ], speed: (eventData as Types.ConveyorEventsSchema)?.speed }; @@ -302,6 +305,163 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb socket.emit("v2:model-asset:add", data); + } else if (eventData.type === 'StaticMachine' && eventData) { + const createStaticMachinePoint = () => { + const pointUUID = THREE.MathUtils.generateUUID(); + const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points; + const hasActions = vehiclePoint?.actions !== undefined; + + const defaultAction = { + uuid: THREE.MathUtils.generateUUID(), + name: 'Action 1', + buffer: 0, + material: 'Inherit', + }; + + return { + uuid: pointUUID, + position: vehiclePoint?.position, + actions: hasActions + ? { + ...vehiclePoint.actions, + uuid: THREE.MathUtils.generateUUID() + } + : defaultAction, + connections: { + source: { modelUUID: obj.uuid, pointUUID }, + targets: [] + } + }; + }; + + const backendEventData = { + type: 'StaticMachine', + points: createStaticMachinePoint() + }; + + // API + + // setFloorItemApi( + // organization, + // obj.uuid, + // obj.userData.name, + // obj.userData.modelId, + // [worldPosition.x, worldPosition.y, worldPosition.z], + // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.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: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, + isLocked: false, + isVisible: true, + eventData: { type: backendEventData.type, points: backendEventData.points }, + socketId: socket.id, + }; + + const newEventData: any = { type: backendEventData.type, points: backendEventData.points }; + newEventData.modeluuid = newFloorItem.modeluuid; + newEventData.modelName = newFloorItem.modelname; + newEventData.position = newFloorItem.position; + newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z]; + + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ + ...(prevEvents || []), + newEventData as Types.StaticMachineEventsSchema + ]); + + socket.emit("v2:model-asset:add", data); + + } else if (eventData.type === 'ArmBot' && eventData) { + const createArmBotPoint = () => { + const pointUUID = THREE.MathUtils.generateUUID(); + const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points; + const hasActions = vehiclePoint?.actions !== undefined; + + const defaultAction = { + uuid: THREE.MathUtils.generateUUID(), + name: 'Action 1', + buffer: 0, + material: 'Inherit', + }; + + return { + uuid: pointUUID, + position: vehiclePoint?.position, + actions: hasActions + ? { + ...vehiclePoint.actions, + uuid: THREE.MathUtils.generateUUID() + } + : defaultAction, + triggers: { + uuid: THREE.MathUtils.generateUUID(), + name: vehiclePoint.triggers.name, + type: vehiclePoint.triggers.type, + }, + connections: { + source: { modelUUID: obj.uuid, pointUUID }, + targets: [] + } + }; + }; + + const backendEventData = { + type: 'StaticMachine', + points: createArmBotPoint() + }; + + // API + + // setFloorItemApi( + // organization, + // obj.uuid, + // obj.userData.name, + // obj.userData.modelId, + // [worldPosition.x, worldPosition.y, worldPosition.z], + // { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.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: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, + isLocked: false, + isVisible: true, + eventData: { type: backendEventData.type, points: backendEventData.points }, + socketId: socket.id, + }; + + const newEventData: any = { type: backendEventData.type, points: backendEventData.points }; + newEventData.modeluuid = newFloorItem.modeluuid; + newEventData.modelName = newFloorItem.modelname; + newEventData.position = newFloorItem.position; + newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z]; + + setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ + ...(prevEvents || []), + newEventData as Types.ArmBotEventsSchema + ]); + + socket.emit("v2:model-asset:add", data); + } else { //REST diff --git a/app/src/modules/scene/controls/selection/moveControls.tsx b/app/src/modules/scene/controls/selection/moveControls.tsx index 5883b62..97ddb17 100644 --- a/app/src/modules/scene/controls/selection/moveControls.tsx +++ b/app/src/modules/scene/controls/selection/moveControls.tsx @@ -323,7 +323,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - // eventData: { type: backendEventData.type, points: backendEventData.points }, + eventData: { type: backendEventData.type, points: backendEventData.points }, socketId: socket.id, }; @@ -376,7 +376,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - // eventData: { type: backendEventData.type, points: backendEventData.points }, + eventData: { type: backendEventData.type, points: backendEventData.points }, socketId: socket.id, }; diff --git a/app/src/modules/scene/controls/selection/rotateControls.tsx b/app/src/modules/scene/controls/selection/rotateControls.tsx index cf1ac83..0680f28 100644 --- a/app/src/modules/scene/controls/selection/rotateControls.tsx +++ b/app/src/modules/scene/controls/selection/rotateControls.tsx @@ -328,7 +328,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - // eventData: { type: backendEventData.type, points: backendEventData.points }, + eventData: { type: backendEventData.type, points: backendEventData.points }, socketId: socket.id, }; @@ -381,7 +381,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - // eventData: { type: backendEventData.type, points: backendEventData.points }, + eventData: { type: backendEventData.type, points: backendEventData.points }, socketId: socket.id, }; diff --git a/app/src/modules/scene/controls/transformControls.tsx b/app/src/modules/scene/controls/transformControls.tsx index 0f0aaf0..2e586cc 100644 --- a/app/src/modules/scene/controls/transformControls.tsx +++ b/app/src/modules/scene/controls/transformControls.tsx @@ -1,6 +1,6 @@ import { TransformControls } from "@react-three/drei"; import * as THREE from "three"; -import { useselectedFloorItem, useObjectPosition, useObjectScale, useObjectRotation, useTransformMode, useFloorItems, useSocketStore, useActiveTool } from "../../../store/store"; +import { useSelectedFloorItem, useObjectPosition, useObjectScale, useObjectRotation, useTransformMode, useFloorItems, useSocketStore, useActiveTool } from "../../../store/store"; import { useThree } from "@react-three/fiber"; import * as Types from '../../../types/world/worldTypes'; @@ -8,7 +8,7 @@ import { useEffect } from "react"; export default function TransformControl() { const state = useThree(); - const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem(); + const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); const { objectPosition, setObjectPosition } = useObjectPosition(); const { objectScale, setObjectScale } = useObjectScale(); const { objectRotation, setObjectRotation } = useObjectRotation(); @@ -96,7 +96,7 @@ export default function TransformControl() { const target = (state.controls as any).getTarget(new THREE.Vector3()); (state.controls as any).setTarget(target.x, 0, target.z, true); } - setselectedFloorItem(null); + setSelectedFloorItem(null); { setObjectPosition({ x: undefined, y: undefined, z: undefined }); setObjectScale({ x: undefined, y: undefined, z: undefined }); diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx index 30d8a8f..acae6e3 100644 --- a/app/src/modules/scene/postProcessing/postProcessing.tsx +++ b/app/src/modules/scene/postProcessing/postProcessing.tsx @@ -6,7 +6,7 @@ import { useSelectedActionSphere, useSelectedPath, useSelectedWallItem, - useselectedFloorItem, + useSelectedFloorItem, } from "../../../store/store"; import * as Types from "../../../types/world/worldTypes"; import * as CONSTANTS from "../../../types/world/worldConstants"; @@ -15,7 +15,7 @@ import { useEffect } from "react"; export default function PostProcessing() { const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem(); const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); - const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem(); + const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); const { selectedActionSphere } = useSelectedActionSphere(); const { selectedPath } = useSelectedPath(); diff --git a/app/src/modules/simulation/path/pathConnector.tsx b/app/src/modules/simulation/path/pathConnector.tsx index 805821c..51c19d6 100644 --- a/app/src/modules/simulation/path/pathConnector.tsx +++ b/app/src/modules/simulation/path/pathConnector.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'; import * as THREE from 'three'; import * as Types from '../../../types/world/worldTypes'; import { QuadraticBezierLine } from '@react-three/drei'; -import { useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store'; +import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store'; import useModuleStore from '../../../store/useModuleStore'; import { usePlayButtonStore } from '../../../store/usePlayButtonStore'; import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/setEventsApt'; @@ -11,6 +11,7 @@ import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject }) { const { activeModule } = useModuleStore(); const { gl, raycaster, scene, pointer, camera } = useThree(); + const { deleteTool } = useDeleteTool(); const { renderDistance } = useRenderDistance(); const { setIsConnecting } = useIsConnecting(); const { simulationStates, setSimulationStates } = useSimulationStates(); @@ -21,6 +22,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec const [firstSelected, setFirstSelected] = useState<{ modelUUID: string; sphereUUID: string; position: THREE.Vector3; isCorner: boolean; } | null>(null); const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3, end: THREE.Vector3, mid: THREE.Vector3 } | null>(null); const [helperlineColor, setHelperLineColor] = useState('red'); + const [hoveredLineKey, setHoveredLineKey] = useState(null); const updatePathConnections = (fromModelUUID: string, fromPointUUID: string, toModelUUID: string, toPointUUID: string) => { const updatedPaths = simulationStates.map(path => { @@ -334,7 +336,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec path.modeluuid === fromModelUUID || path.modeluuid === toModelUUID ); - // updateBackend(updatedPathDetails); + updateBackend(updatedPathDetails); }; const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => { @@ -375,6 +377,38 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec socket.emit('v2:model-asset:updateEventData', data); + } else if (updatedPath.type === 'StaticMachine') { + + // await setEventApi( + // organization, + // updatedPath.modeluuid, + // { type: "StaticMachine", points: updatedPath.points } + // ); + + const data = { + organization: organization, + modeluuid: updatedPath.modeluuid, + eventData: { type: "StaticMachine", points: updatedPath.points } + } + + socket.emit('v2:model-asset:updateEventData', data); + + } else if (updatedPath.type === 'ArmBot') { + + // await setEventApi( + // organization, + // updatedPath.modeluuid, + // { type: "ArmBot", points: updatedPath.points } + // ); + + const data = { + organization: organization, + modeluuid: updatedPath.modeluuid, + eventData: { type: "ArmBot", points: updatedPath.points } + } + + socket.emit('v2:model-asset:updateEventData', data); + } }) @@ -589,20 +623,10 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec } // All checks passed - make the connection - handleAddConnection( - firstSelected.modelUUID, - firstSelected.sphereUUID, - modelUUID, - sphereUUID - ); + handleAddConnection(firstSelected.modelUUID, firstSelected.sphereUUID, modelUUID, sphereUUID); } else { // First selection - just store it - setFirstSelected({ - modelUUID, - sphereUUID, - position: worldPosition, - isCorner: isStartOrEnd - }); + setFirstSelected({ modelUUID, sphereUUID, position: worldPosition, isCorner: isStartOrEnd }); setIsConnecting(true); } } @@ -615,7 +639,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec } }; - if (activeModule === 'simulation') { + if (activeModule === 'simulation' && !deleteTool) { canvasElement.addEventListener("mousedown", onMouseDown); canvasElement.addEventListener("mouseup", onMouseUp); canvasElement.addEventListener("mousemove", onMouseMove); @@ -632,7 +656,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec canvasElement.removeEventListener("mousemove", onMouseMove); canvasElement.removeEventListener("contextmenu", onContextMenu); }; - }, [camera, scene, raycaster, firstSelected, simulationStates]); + }, [camera, scene, raycaster, firstSelected, simulationStates, deleteTool]); useFrame(() => { Object.values(groupRefs.current).forEach((group) => { @@ -665,9 +689,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec } } - const sphereIntersects = raycaster.intersectObjects(pathsGroupRef.current.children, true).filter((obj) => - obj.object.name.includes("events-sphere") - ); + const sphereIntersects = raycaster.intersectObjects(pathsGroupRef.current.children, true).filter((obj) => obj.object.name.includes("events-sphere")); if (sphereIntersects.length > 0) { const sphere = sphereIntersects[0].object; @@ -682,15 +704,21 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec const isVehicleToVehicle = firstPath?.type === 'Vehicle' && secondPath?.type === 'Vehicle'; // Inside the useFrame hook, where we check for snapped spheres: - const isConnectable = (pathData.type === 'Vehicle' || + const isConnectable = ( + pathData.type === 'Vehicle' || + pathData.type === 'ArmBot' || (pathData.points.length > 0 && ( sphereUUID === pathData.points[0].uuid || - sphereUUID === pathData.points[pathData.points.length - 1].uuid - ))) && + sphereUUID === pathData.points[pathData.points.length - 1].uuid || + (pathData.type === 'Conveyor' && firstPath?.type === 'ArmBot') // Allow ArmBot to connect to middle points + )) + ) && !isVehicleToVehicle && - !(firstPath?.type === 'Conveyor' && + !( + firstPath?.type === 'Conveyor' && pathData.type === 'Conveyor' && - !firstSelected.isCorner); + !firstSelected.isCorner + ); // Check for duplicate connection (regardless of path type) const isDuplicateConnection = simulationStates.some(path => { @@ -825,6 +853,127 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec } }); + const removeConnections = (connection1: { model: string; point: string }, connection2: { model: string; point: string }) => { + const updatedStates = simulationStates.map(state => { + // Handle Conveyor (which has multiple points) + if (state.type === 'Conveyor') { + const updatedConveyor: Types.ConveyorEventsSchema = { + ...state, + points: state.points.map(point => { + // Check if this point is either connection1 or connection2 + if ((state.modeluuid === connection1.model && point.uuid === connection1.point) || + (state.modeluuid === connection2.model && point.uuid === connection2.point)) { + + return { + ...point, + connections: { + ...point.connections, + targets: point.connections.targets.filter(target => { + // Remove the target that matches the other connection + return !( + (target.modelUUID === connection1.model && target.pointUUID === connection1.point) || + (target.modelUUID === connection2.model && target.pointUUID === connection2.point) + ); + }) + } + }; + } + return point; + }) + }; + return updatedConveyor; + } + // Handle Vehicle + else if (state.type === 'Vehicle') { + if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || + (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { + + const updatedVehicle: Types.VehicleEventsSchema = { + ...state, + points: { + ...state.points, + connections: { + ...state.points.connections, + targets: state.points.connections.targets.filter(target => { + return !( + (target.modelUUID === connection1.model && target.pointUUID === connection1.point) || + (target.modelUUID === connection2.model && target.pointUUID === connection2.point) + ); + }) + }, + // Ensure all required Vehicle point properties are included + speed: state.points.speed, + actions: state.points.actions + } + }; + return updatedVehicle; + } + } + // Handle StaticMachine + else if (state.type === 'StaticMachine') { + if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || + (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { + + const updatedStaticMachine: Types.StaticMachineEventsSchema = { + ...state, + points: { + ...state.points, + connections: { + ...state.points.connections, + targets: state.points.connections.targets.filter(target => { + return !( + (target.modelUUID === connection1.model && target.pointUUID === connection1.point) || + (target.modelUUID === connection2.model && target.pointUUID === connection2.point) + ); + }) + }, + // Ensure all required StaticMachine point properties are included + actions: state.points.actions, + triggers: state.points.triggers + } + }; + return updatedStaticMachine; + } + } + // Handle ArmBot + else if (state.type === 'ArmBot') { + if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || + (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { + + const updatedArmBot: Types.ArmBotEventsSchema = { + ...state, + points: { + ...state.points, + connections: { + ...state.points.connections, + targets: state.points.connections.targets.filter(target => { + return !( + (target.modelUUID === connection1.model && target.pointUUID === connection1.point) || + (target.modelUUID === connection2.model && target.pointUUID === connection2.point) + ); + }) + }, + // Ensure all required ArmBot point properties are included + actions: state.points.actions, + triggers: state.points.triggers + } + }; + return updatedArmBot; + } + } + return state; + }); + + const updatedPaths = updatedStates.filter(state => + state.modeluuid === connection1.model || state.modeluuid === connection2.model + ); + + updateBackend(updatedPaths); + + setSimulationStates(updatedStates); + }; + + return ( {simulationStates.flatMap(path => { @@ -832,7 +981,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec return path.points.flatMap(point => point.connections.targets.map((target, index) => { const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID); - if (targetPath?.type === 'Vehicle') return null; + if (targetPath?.type !== 'Conveyor' && targetPath?.type !== 'ArmBot') return null; const fromSphere = pathsGroupRef.current?.getObjectByProperty('uuid', point.uuid); const toSphere = pathsGroupRef.current?.getObjectByProperty('uuid', target.pointUUID); @@ -845,11 +994,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec const distance = fromWorldPosition.distanceTo(toWorldPosition); const heightFactor = Math.max(0.5, distance * 0.2); - const midPoint = new THREE.Vector3( - (fromWorldPosition.x + toWorldPosition.x) / 2, - Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, - (fromWorldPosition.z + toWorldPosition.z) / 2 - ); + const midPoint = new THREE.Vector3((fromWorldPosition.x + toWorldPosition.x) / 2, Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, (fromWorldPosition.z + toWorldPosition.z) / 2); return ( setHoveredLineKey(`${point.uuid}-${target.pointUUID}-${index}`)} + onPointerOut={() => setHoveredLineKey(null)} + onClick={() => { + if (deleteTool) { + + const connection1 = { model: path.modeluuid, point: point.uuid } + const connection2 = { model: target.modelUUID, point: target.pointUUID } + + removeConnections(connection1, connection2) + + } + }} + userData={target} /> ); } @@ -884,11 +1048,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec const distance = fromWorldPosition.distanceTo(toWorldPosition); const heightFactor = Math.max(0.5, distance * 0.2); - const midPoint = new THREE.Vector3( - (fromWorldPosition.x + toWorldPosition.x) / 2, - Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, - (fromWorldPosition.z + toWorldPosition.z) / 2 - ); + const midPoint = new THREE.Vector3((fromWorldPosition.x + toWorldPosition.x) / 2, Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, (fromWorldPosition.z + toWorldPosition.z) / 2); return ( setHoveredLineKey(`${path.points.uuid}-${target.pointUUID}-${index}`)} + onPointerOut={() => setHoveredLineKey(null)} + onClick={() => { + if (deleteTool) { + + const connection1 = { model: path.modeluuid, point: path.points.uuid } + const connection2 = { model: target.modelUUID, point: target.pointUUID } + + removeConnections(connection1, connection2) + } + }} + userData={target} /> ); } @@ -925,11 +1101,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec const distance = fromWorldPosition.distanceTo(toWorldPosition); const heightFactor = Math.max(0.5, distance * 0.2); - const midPoint = new THREE.Vector3( - (fromWorldPosition.x + toWorldPosition.x) / 2, - Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, - (fromWorldPosition.z + toWorldPosition.z) / 2 - ); + const midPoint = new THREE.Vector3((fromWorldPosition.x + toWorldPosition.x) / 2, Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor, (fromWorldPosition.z + toWorldPosition.z) / 2); return ( setHoveredLineKey(`${path.points.uuid}-${target.pointUUID}-${index}`)} + onPointerOut={() => setHoveredLineKey(null)} + onClick={() => { + if (deleteTool) { + + const connection1 = { model: path.modeluuid, point: path.points.uuid } + const connection2 = { model: target.modelUUID, point: target.pointUUID } + + removeConnections(connection1, connection2) + + } + }} + userData={target} /> ); } diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index 98fd3dd..fad837a 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -19,7 +19,7 @@ function Simulation() { const [processes, setProcesses] = useState([]); useEffect(() => { - // console.log('simulationStates: ', simulationStates); + console.log('simulationStates: ', simulationStates); }, [simulationStates]); // useEffect(() => { diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 89cd1a7..37b1ce3 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -106,9 +106,9 @@ export const useMenuVisible = create((set: any) => ({ setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), })); -export const useDeleteModels = create((set: any) => ({ - deleteModels: false, - setDeleteModels: (x: any) => set(() => ({ deleteModels: x })), +export const useDeleteTool = create((set: any) => ({ + deleteTool: false, + setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), })); export const useToolMode = create((set: any) => ({ @@ -164,9 +164,9 @@ export const useSelectedWallItem = create((set: any) => ({ setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })), })); -export const useselectedFloorItem = create((set: any) => ({ +export const useSelectedFloorItem = create((set: any) => ({ selectedFloorItem: null, - setselectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })), + setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })), })); export const useDeletableFloorItem = create((set: any) => ({ diff --git a/app/src/types/world/worldTypes.d.ts b/app/src/types/world/worldTypes.d.ts index fce09b1..25ef4b6 100644 --- a/app/src/types/world/worldTypes.d.ts +++ b/app/src/types/world/worldTypes.d.ts @@ -324,7 +324,7 @@ interface StaticMachineEventsSchema { points: { uuid: string; position: [number, number, number]; - actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean }; + actions: { uuid: string; name: string; buffer: number; material: string; }; triggers: { uuid: string; name: string; type: string }; connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; }; @@ -375,5 +375,23 @@ export type EventData = { connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; speed: number; }; + } | { + type: 'StaticMachine'; + points: { + uuid: string; + position: [number, number, number]; + actions: { uuid: string; name: string; buffer: number; material: string; }; + triggers: { uuid: string; name: string; type: string }; + connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; + }; + } | { + type: 'ArmBot'; + points: { + uuid: string; + position: [number, number, number]; + actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[] }; + triggers: { uuid: string; name: string; type: string }; + connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; + }; }; }