diff --git a/app/src/app.tsx b/app/src/app.tsx index 6d223be..b03d4df 100644 --- a/app/src/app.tsx +++ b/app/src/app.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; +import { Cache } from "three"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Dashboard from "./pages/Dashboard"; import Project from "./pages/Project"; @@ -8,6 +9,11 @@ import { LoggerProvider } from "./components/ui/log/LoggerContext"; const App: React.FC = () => { + useEffect(() => { + Cache.clear(); + Cache.enabled = true; + }, []); + return ( diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index c6c76b1..80745ff 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -137,6 +137,7 @@ const Simulations: React.FC = () => { } ); } + }, [selectedProduct.productUuid, products]); return ( diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index b36b00f..4deacab 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -22,8 +22,6 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; import { useActiveTool, useAddAction, - useDeleteTool, - useDeletePointOrLine, useRefTextUpdate, useSelectedWallItem, useSocketStore, @@ -32,7 +30,7 @@ import { useActiveSubTool, useShortcutStore, } from "../../store/builder/store"; -import {useToggleStore} from "../../store/useUIToggleStore"; +import { useToggleStore } from "../../store/useUIToggleStore"; import { use3DWidget, useFloatingWidget, @@ -72,8 +70,6 @@ const Tools: React.FC = () => { setActiveTool, setToolMode, setAddAction, - setDeleteTool, - setDeletePointOrLine, } = useStoreHooks(); const { setActiveSubTool, activeSubTool } = useActiveSubTool(); @@ -131,18 +127,14 @@ const Tools: React.FC = () => { const resetTools = () => { setToolMode(null); - setDeleteTool(false); setAddAction(null); - setDeletePointOrLine(false); setRefTextUpdate((prev) => prev - 1); }; const updateToolBehavior = (tool: string, is2D: boolean) => { switch (tool) { case "cursor": - if (toggleView) { - setToolMode("move"); - } + is2D ? setToolMode("move") : setToolMode("cursor"); break; case "draw-wall": is2D && setToolMode("Wall"); @@ -160,10 +152,10 @@ const Tools: React.FC = () => { setToolMode("MeasurementScale"); break; case "Add pillar": - if (!is2D) setAddAction("pillar"); + if (!is2D) setAddAction("Pillar"); break; case "delete": - is2D ? setDeletePointOrLine(true) : setDeleteTool(true); + is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete'); break; } }; @@ -175,7 +167,6 @@ const Tools: React.FC = () => { setToggleUI(toggleTo2D, toggleTo2D); if (toggleTo2D) { setSelectedWallItem(null); - setDeleteTool(false); setAddAction(null); } setActiveTool("cursor"); @@ -410,9 +401,7 @@ const useStoreHooks = () => { return { ...useActiveTool(), ...useToolMode(), - ...useDeleteTool(), ...useAddAction(), - ...useDeletePointOrLine(), ...useRefTextUpdate(), }; }; diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx index 0f91a36..79fa57c 100644 --- a/app/src/components/ui/compareVersion/ComparisonResult.tsx +++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from "react"; import PerformanceResult from "./result-card/PerformanceResult"; import EnergyUsage from "./result-card/EnergyUsage"; -import { Bar, Line } from "react-chartjs-2"; +import { Bar, Line, Pie } from "react-chartjs-2"; const ComparisonResult = () => { const options = useMemo( @@ -33,21 +33,22 @@ const ComparisonResult = () => { backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, + borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe) + // borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types }, ], }; - const cycleTimeData = { + + const cycleTimePieData = { labels: ["Layout 1", "Layout 2"], datasets: [ { label: "Cycle Time (sec)", - data: [110, 110], - backgroundColor: [purpleLight], - borderColor: purpleDark, + data: [120, 110], + backgroundColor: [purpleDark, purpleLight], + borderColor: "#fff", borderWidth: 2, - tension: 0.4, - fill: false, }, ], }; @@ -61,6 +62,8 @@ const ComparisonResult = () => { backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, + borderRadius: 10, + borderSkipped: false, }, ], }; @@ -74,6 +77,8 @@ const ComparisonResult = () => { backgroundColor: [purpleDark, purpleLight], borderColor: [purpleDark, purpleLight], borderWidth: 1, + borderRadius: 10, + borderSkipped: false, }, ], }; @@ -83,7 +88,6 @@ const ComparisonResult = () => {
Performance Comparison
-

Throughput (units/hr)

@@ -95,9 +99,9 @@ const ComparisonResult = () => {
Layout 2
550/ hr
-
-
- +
+ +
@@ -122,7 +126,7 @@ const ComparisonResult = () => {
- +
diff --git a/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts b/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts index 5a7ea85..ec04968 100644 --- a/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts +++ b/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts @@ -7,7 +7,7 @@ import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils'; async function loadInitialWallItems( setWallItems: Types.setWallItemSetState, - projectId?:string + projectId?: string ): Promise { try { const email = localStorage.getItem('email'); @@ -16,7 +16,7 @@ async function loadInitialWallItems( } const organization = email.split("@")[1].split(".")[0]; - const items = await getWallItems(organization,projectId); + const items = await getWallItems(organization, projectId); let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; @@ -34,33 +34,33 @@ async function loadInitialWallItems( const loadedWallItems = await Promise.all(items.map(async (item: Types.WallItem) => { // Check THREE.js cache first - const cachedModel = THREE.Cache.get(item.modelfileID!); + const cachedModel = THREE.Cache.get(item.assetId!); if (cachedModel) { return processModel(cachedModel, item); } // Check IndexedDB cache - const cachedModelBlob = await retrieveGLTF(item.modelfileID!); + const cachedModelBlob = await retrieveGLTF(item.assetId!); if (cachedModelBlob) { const blobUrl = URL.createObjectURL(cachedModelBlob); return new Promise((resolve) => { loader.load(blobUrl, (gltf) => { URL.revokeObjectURL(blobUrl); - THREE.Cache.add(item.modelfileID!, gltf); + THREE.Cache.add(item.assetId!, gltf); resolve(processModel(gltf, item)); }); }); } // Load from original URL if not cached - const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.modelfileID!}`; + const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.assetId!}`; return new Promise((resolve) => { loader.load(modelUrl, async (gltf) => { try { // Cache the model const modelBlob = await fetch(modelUrl).then((res) => res.blob()); - await storeGLTF(item.modelfileID!, modelBlob); - THREE.Cache.add(item.modelfileID!, gltf); + await storeGLTF(item.assetId!, modelBlob); + THREE.Cache.add(item.assetId!, gltf); resolve(processModel(gltf, item)); } catch (error) { console.error('Failed to cache model:', error); @@ -91,7 +91,7 @@ function processModel(gltf: GLTF, item: Types.WallItem): Types.WallItem { type: item.type, model: model, modelName: item.modelName, - modelfileID: item.modelfileID, + assetId: item.assetId, scale: item.scale, csgscale: item.csgscale, csgposition: item.csgposition, diff --git a/app/src/modules/builder/asset/assetsGroup.tsx b/app/src/modules/builder/asset/assetsGroup.tsx index c83eb64..c5aefb8 100644 --- a/app/src/modules/builder/asset/assetsGroup.tsx +++ b/app/src/modules/builder/asset/assetsGroup.tsx @@ -63,7 +63,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea getFloorAssets(organization, projectId).then((data) => { if (data.length > 0) { - const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.modelfileID === item.modelfileID)); + const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId)); totalAssets = uniqueItems.length; if (totalAssets === 0) { updateLoadingProgress(100); @@ -96,7 +96,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea assets.push({ modelUuid: item.modelUuid, modelName: item.modelName, - assetId: item.modelfileID, + assetId: item.assetId, position: item.position, rotation: [item.rotation.x, item.rotation.y, item.rotation.z], isLocked: item.isLocked, @@ -236,7 +236,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea assets.push({ modelUuid: item.modelUuid, modelName: item.modelName, - assetId: item.modelfileID, + assetId: item.assetId, position: item.position, rotation: [item.rotation.x, item.rotation.y, item.rotation.z], isLocked: item.isLocked, diff --git a/app/src/modules/builder/asset/functions/addAssetModel.ts b/app/src/modules/builder/asset/functions/addAssetModel.ts index 250d2bc..98a2116 100644 --- a/app/src/modules/builder/asset/functions/addAssetModel.ts +++ b/app/src/modules/builder/asset/functions/addAssetModel.ts @@ -136,7 +136,7 @@ async function handleModelLoad( // organization, // newFloorItem.modelUuid, // newFloorItem.modelName, - // newFloorItem.modelfileID, + // newFloorItem.assetId, // newFloorItem.position, // { x: 0, y: 0, z: 0 }, // false, @@ -352,7 +352,7 @@ async function handleModelLoad( organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.assetId, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: model.rotation.x, @@ -372,7 +372,7 @@ async function handleModelLoad( const asset: Asset = { modelUuid: completeData.modelUuid, modelName: completeData.modelName, - assetId: completeData.modelfileID, + assetId: completeData.assetId, position: completeData.position, rotation: [ completeData.rotation.x, @@ -392,7 +392,7 @@ async function handleModelLoad( organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.assetId, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: model.rotation.x, @@ -411,7 +411,7 @@ async function handleModelLoad( const asset = { modelUuid: data.modelUuid, modelName: data.modelName, - assetId: data.modelfileID, + assetId: data.assetId, position: data.position, rotation: [data.rotation.x, data.rotation.y, data.rotation.z] as [number, number, number], isLocked: data.isLocked, diff --git a/app/src/modules/builder/asset/models/model/model.tsx b/app/src/modules/builder/asset/models/model/model.tsx index f28c16a..5b6e53b 100644 --- a/app/src/modules/builder/asset/models/model/model.tsx +++ b/app/src/modules/builder/asset/models/model/model.tsx @@ -1,10 +1,10 @@ import * as THREE from 'three'; -import { useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils'; import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; import { ThreeEvent, useFrame, useThree } from '@react-three/fiber'; -import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView } from '../../../../../store/builder/store'; +import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store'; import { AssetBoundingBox } from '../../functions/assetBoundingBox'; import { CameraControls } from '@react-three/drei'; import { useAssetsStore } from '../../../../../store/builder/useAssetStore'; @@ -39,8 +39,13 @@ function Model({ asset }: { readonly asset: Asset }) { const [gltfScene, setGltfScene] = useState(null); const [boundingBox, setBoundingBox] = useState(null); const groupRef = useRef(null); + const { toolMode } = useToolMode(); const { projectId } = useParams(); + useEffect(() => { + setDeletableFloorItem(null); + }, [activeModule, toolMode]) + useEffect(() => { const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); @@ -191,21 +196,21 @@ function Model({ asset }: { readonly asset: Asset }) { } } - const handlePointerOver = (asset: Asset) => { - if (activeTool === "delete") { + 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 = (asset: Asset) => { + const handlePointerOut = useCallback((asset: Asset) => { if (activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) { setDeletableFloorItem(null); } - } + }, [activeTool, deletableFloorItem]); const handleContextMenu = (asset: Asset, evt: ThreeEvent) => { if (activeTool === "cursor" && subModule === 'simulations') { @@ -247,6 +252,7 @@ function Model({ asset }: { readonly asset: Asset }) { return ( { + onPointerEnter={(e) => { if (!toggleView) { e.stopPropagation(); handlePointerOver(asset); diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx index 6a5093f..1401267 100644 --- a/app/src/modules/builder/builder.tsx +++ b/app/src/modules/builder/builder.tsx @@ -13,7 +13,6 @@ import ReferenceDistanceText from "./geomentries/lines/distanceText/referenceDis import { useToggleView, - useDeletePointOrLine, useActiveLayer, useWallVisibility, useRoofVisibility, @@ -58,18 +57,10 @@ export default function Builder() { const csg = useRef(); // Reference for CSG object, used for 3D modeling. const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects. const scene = useRef() as Types.RefScene; // Reference to the scene. - const camera = useRef() as Types.RefCamera; // Reference to the camera object. - const controls = useRef(); // Reference to the controls object. - const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene. const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control. // Assigning the scene and camera from the Three.js state to the references. - scene.current = state.scene; - camera.current = state.camera; - controls.current = state.controls; - raycaster.current = state.raycaster; - const plane = useRef(null); // Reference for a plane object for raycaster reference. const grid = useRef() as any; // Reference for a grid object for raycaster reference. const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line. @@ -78,8 +69,6 @@ export default function Builder() { const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active. const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point. const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start). - const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items. - const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active. const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation. const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn. const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn. @@ -88,13 +77,10 @@ export default function Builder() { const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw. const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not. const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed. - const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf). const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors. const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group. const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn. const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created. - const floorGroupAisle = useRef() as Types.RefGroup; - const zoneGroup = useRef() as Types.RefGroup; const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls. const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted. const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted. @@ -108,7 +94,6 @@ export default function Builder() { const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx. const { toggleView } = useToggleView(); // State for toggling between 2D and 3D. const { toolMode, setToolMode } = useToolMode(); - const { setDeletePointOrLine } = useDeletePointOrLine(); const { setRoofVisibility } = useRoofVisibility(); const { setWallVisibility } = useWallVisibility(); const { setShadows } = useShadows(); @@ -141,19 +126,13 @@ export default function Builder() { ); } else { setHoveredPoint(null); - setToolMode(null); - setDeletePointOrLine(false); + setToolMode('cursor'); loadWalls(lines, setWalls); setUpdateScene(true); line.current = []; } }, [toggleView]); - useEffect(() => { - THREE.Cache.clear(); - THREE.Cache.enabled = true; - }, []); - useEffect(() => { const email = localStorage.getItem("email"); const organization = email!.split("@")[1].split(".")[0]; @@ -180,12 +159,10 @@ export default function Builder() { plane, cursorPosition, floorPlanGroupPoint, - floorPlanGroupLine, snappedPoint, isSnapped, isSnappedUUID, line, - lines, ispreSnapped, floorPlanGroup, ReferenceLineMesh, @@ -219,16 +196,11 @@ export default function Builder() { floorPlanGroup={floorPlanGroup} lines={lines} floorGroup={floorGroup} - floorGroupAisle={floorGroupAisle} scene={scene} onlyFloorlines={onlyFloorlines} - itemsGroup={itemsGroup} - isTempLoader={isTempLoader} - tempLoader={tempLoader} currentLayerPoint={currentLayerPoint} floorPlanGroupPoint={floorPlanGroupPoint} floorPlanGroupLine={floorPlanGroupLine} - zoneGroup={zoneGroup} dragPointControls={dragPointControls} /> @@ -290,6 +262,7 @@ export default function Builder() { + = (props) => { - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const modelRef = useRef(); const originalMaterials = useRef>(new Map()); const handleHover = (hovered: boolean, object: THREE.Mesh | null) => { - if (modelRef.current && deleteTool) { + if (modelRef.current && toolMode === "3D-Delete") { 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 && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color); + child.material.color.set(hovered && toolMode === "3D-Delete" ? 0xff0000 : (originalMaterials.current.get(child) as any).color); } }); } diff --git a/app/src/modules/builder/functions/draw.ts b/app/src/modules/builder/functions/draw.ts index 0172707..425fbbb 100644 --- a/app/src/modules/builder/functions/draw.ts +++ b/app/src/modules/builder/functions/draw.ts @@ -7,12 +7,10 @@ async function Draw( plane: Types.RefMesh, cursorPosition: Types.Vector3, floorPlanGroupPoint: Types.RefGroup, - floorPlanGroupLine: Types.RefGroup, snappedPoint: Types.RefVector3, isSnapped: Types.RefBoolean, isSnappedUUID: Types.RefString, line: Types.RefLine, - lines: Types.RefLines, ispreSnapped: Types.RefBoolean, floorPlanGroup: Types.RefGroup, ReferenceLineMesh: Types.RefMesh, @@ -29,7 +27,7 @@ async function Draw( if (!plane.current) return; const intersects = state.raycaster.intersectObject(plane.current, true); - if (intersects.length > 0 && (toolMode === "Wall" || toolMode === "Aisle" || toolMode === "Floor")) { + if (intersects.length > 0 && (toolMode === "Wall" || toolMode === "Floor")) { const intersectionPoint = intersects[0].point; cursorPosition.copy(intersectionPoint); const snapThreshold = 1; @@ -40,8 +38,7 @@ async function Draw( const canSnap = ((toolMode === "Wall") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) || - ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) || - ((toolMode === "Aisle") && pointType === CONSTANTS.lineConfig.aisleName);; + ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) if (canSnap && cursorPosition.distanceTo(point.position) < snapThreshold + 0.5 && point.visible) { cursorPosition.copy(point.position); @@ -60,8 +57,7 @@ async function Draw( let canSnap = ((toolMode === "Wall") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) || - ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) || - ((toolMode === "Aisle") && pointType === CONSTANTS.lineConfig.aisleName); + ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) if (canSnap && cursorPosition.distanceTo(point.position) < snapThreshold && point.visible) { cursorPosition.copy(point.position); diff --git a/app/src/modules/builder/geomentries/lines/drawWall.ts b/app/src/modules/builder/geomentries/lines/drawWall.ts index 93dcdf7..3597ec2 100644 --- a/app/src/modules/builder/geomentries/lines/drawWall.ts +++ b/app/src/modules/builder/geomentries/lines/drawWall.ts @@ -95,7 +95,6 @@ async function drawWall( userId } - console.log('input: ', input); socket.emit('v1:Line:create', input); setNewLines([newLines[0], newLines[1], line.current]); @@ -158,7 +157,6 @@ async function drawWall( userId } - console.log('input: ', input); socket.emit('v1:Line:create', input); setNewLines([line.current]) diff --git a/app/src/modules/builder/geomentries/walls/addWallItems.ts b/app/src/modules/builder/geomentries/walls/addWallItems.ts index c861fe0..8801729 100644 --- a/app/src/modules/builder/geomentries/walls/addWallItems.ts +++ b/app/src/modules/builder/geomentries/walls/addWallItems.ts @@ -91,7 +91,7 @@ async function AddWallItems( type: selected.subCategory, model: model, modelName: selected.name, - modelfileID: selected.id, + assetId: selected.id, scale: [1, 1, 1] as [number, number, number], csgscale: csgscale, csgposition: csgposition, @@ -107,7 +107,7 @@ async function AddWallItems( organization: organization, modelUuid: model.uuid, modelName: newWallItem.modelName, - modelfileID: selected.id, + assetId: selected.id, type: selected.subCategory, csgposition: newWallItem.csgposition, csgscale: newWallItem.csgscale, @@ -119,7 +119,6 @@ async function AddWallItems( userId }; - // console.log('data: ', data); socket.emit('v1:wallItems:set', data); setWallItems((prevItems) => { diff --git a/app/src/modules/builder/groups/floorGroup.tsx b/app/src/modules/builder/groups/floorGroup.tsx index 2cf5586..8835ede 100644 --- a/app/src/modules/builder/groups/floorGroup.tsx +++ b/app/src/modules/builder/groups/floorGroup.tsx @@ -1,12 +1,12 @@ import { useFrame, useThree } from "@react-three/fiber"; import { useAddAction, - useDeleteTool, useRoofVisibility, useToggleView, useWallVisibility, useUpdateScene, useRenameModeStore, + useToolMode, } from "../../../store/builder/store"; import hideRoof from "../geomentries/roofs/hideRoof"; import hideWalls from "../geomentries/walls/hideWalls"; @@ -30,7 +30,7 @@ const FloorGroup = ({ const { toggleView } = useToggleView(); const { scene, camera, raycaster, gl } = useThree(); const { addAction } = useAddAction(); - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const { updateScene, setUpdateScene } = useUpdateScene(); const { setTop } = useTopData(); const { setLeft } = useLeftData(); @@ -75,7 +75,7 @@ const FloorGroup = ({ if (addAction === "pillar") { addPillar(referencePole, floorGroup); } - if (deleteTool) { + if (toolMode === '3D-Delete') { DeletePillar(hoveredDeletablePillar, floorGroup); } } @@ -105,7 +105,7 @@ const FloorGroup = ({ canvasElement.removeEventListener("mouseup", onMouseUp); canvasElement.removeEventListener("mousemove", onMouseMove); }; - }, [deleteTool, addAction, isRenameMode]); + }, [toolMode, addAction, isRenameMode]); useFrame(() => { hideRoof(roofVisibility, floorGroup, camera); @@ -114,7 +114,7 @@ const FloorGroup = ({ if (addAction === "pillar") { addAndUpdateReferencePillar(raycaster, floorGroup, referencePole); } - if (deleteTool) { + if (toolMode === '3D-Delete') { DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar); } }); diff --git a/app/src/modules/builder/groups/floorPlanGroup.tsx b/app/src/modules/builder/groups/floorPlanGroup.tsx index d9f01c3..23128e5 100644 --- a/app/src/modules/builder/groups/floorPlanGroup.tsx +++ b/app/src/modules/builder/groups/floorPlanGroup.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; import * as Types from '../../../types/world/worldTypes'; -import { useActiveLayer, useDeletedLines, useDeletePointOrLine, useToolMode, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/builder/store"; +import { useActiveLayer, useDeletedLines, useToolMode, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/builder/store"; import Layer2DVisibility from "../geomentries/layers/layer2DVisibility"; import { useFrame, useThree } from "@react-three/fiber"; import DeletableLineorPoint from "../functions/deletableLineOrPoint"; @@ -23,8 +23,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin const { camera, gl, raycaster, controls } = state; const { activeLayer } = useActiveLayer(); const { toggleView } = useToggleView(); - const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); - const { toolMode, setToolMode } = useToolMode(); + const { toolMode } = useToolMode(); const { removedLayer, setRemovedLayer } = useRemovedLayer(); const { setUpdateScene } = useUpdateScene(); const { setNewLines } = useNewLines(); @@ -32,7 +31,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin const { socket } = useSocketStore(); const { projectId } = useParams(); - useEffect(() => { if (toolMode === 'move') { addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket, projectId); @@ -74,17 +72,12 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin }, [toggleView]); useEffect(() => { - if (toolMode === "Wall" || toolMode === "Floor") { - setDeletePointOrLine(false); - } else { - removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint); - removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line); - } + removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint); + removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line); }, [toolMode]); useEffect(() => { if (toolMode === 'move' && toggleView) { - setDeletePointOrLine(false); if (dragPointControls.current) { dragPointControls.current.enabled = true; } @@ -95,12 +88,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin } }, [toolMode, toggleView, state]); - useEffect(() => { - if (deletePointOrLine) { - setToolMode(null); - } - }, [deletePointOrLine]); - useEffect(() => { Layer2DVisibility(activeLayer, floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoint, currentLayerPoint, dragPointControls); }, [activeLayer]); @@ -151,7 +138,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin const onMouseClick = (evt: any) => { if (!plane.current || drag) return; - if (deletePointOrLine) { + if (toolMode === "2D-Delete") { if (hoveredDeletablePoint.current !== null) { deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket, projectId); } @@ -169,7 +156,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin } } - if (deletePointOrLine || toolMode === "Wall" || toolMode === "Floor") { + if (toolMode === "2D-Delete" || toolMode === "Wall" || toolMode === "Floor") { canvasElement.addEventListener("mousedown", onMouseDown); canvasElement.addEventListener("mouseup", onMouseUp); canvasElement.addEventListener("mousemove", onMouseMove); @@ -184,11 +171,11 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin canvasElement.removeEventListener("click", onMouseClick); canvasElement.removeEventListener("contextmenu", onContextMenu); }; - }, [deletePointOrLine, toolMode, activeLayer]) + }, [toolMode, activeLayer]) useFrame(() => { - if (deletePointOrLine) { + if (toolMode === '2D-Delete') { DeletableLineorPoint(state, plane, floorPlanGroupLine, floorPlanGroupPoint, hoveredDeletableLine, hoveredDeletablePoint); } }) diff --git a/app/src/modules/builder/groups/wallItemsGroup.tsx b/app/src/modules/builder/groups/wallItemsGroup.tsx index 8f8cdcb..bbbf859 100644 --- a/app/src/modules/builder/groups/wallItemsGroup.tsx +++ b/app/src/modules/builder/groups/wallItemsGroup.tsx @@ -1,13 +1,12 @@ import { useEffect } from "react"; import { - useDeleteTool, - useDeletePointOrLine, useObjectPosition, useObjectRotation, useSelectedWallItem, useSocketStore, useWallItems, useSelectedItem, + useToolMode, } from "../../../store/builder/store"; import { Csg } from "../csg/csg"; import * as Types from "../../../types/world/worldTypes"; @@ -31,11 +30,10 @@ const WallItemsGroup = ({ const state = useThree(); const { socket } = useSocketStore(); const { pointer, camera, raycaster } = state; - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const { wallItems, setWallItems } = useWallItems(); const { setObjectPosition } = useObjectPosition(); const { setObjectRotation } = useObjectRotation(); - const { deletePointOrLine } = useDeletePointOrLine(); const { setSelectedWallItem } = useSelectedWallItem(); const { activeModule } = useModuleStore(); const { selectedItem } = useSelectedItem(); @@ -43,7 +41,7 @@ const WallItemsGroup = ({ useEffect(() => { // Load Wall Items from the backend - loadInitialWallItems(setWallItems,projectId); + loadInitialWallItems(setWallItems, projectId); }, []); ////////// Update the Position value changes in the selected item ////////// @@ -51,7 +49,7 @@ const WallItemsGroup = ({ useEffect(() => { const canvasElement = state.gl.domElement; function handlePointerMove(e: any) { - if (selectedItemsIndex !== null && !deletePointOrLine && e.buttons === 1) { + if (selectedItemsIndex !== null && toolMode === 'cursor' && e.buttons === 1) { const Raycaster = state.raycaster; const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true); const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference")); @@ -123,7 +121,7 @@ const WallItemsGroup = ({ setTimeout(async () => { const email = localStorage.getItem("email"); - const organization = email!.split("@")[1].split(".")[0]; + const organization = email!.split("@")[1].split(".")[0]; const userId = localStorage.getItem("userId"); //REST @@ -132,7 +130,7 @@ const WallItemsGroup = ({ // organization, // currentItem?.model?.uuid, // currentItem.modelName, - // currentItem.modelfileID, + // currentItem.assetId, // currentItem.type!, // currentItem.csgposition!, // currentItem.csgscale!, @@ -146,7 +144,7 @@ const WallItemsGroup = ({ const data = { organization: organization, modelUuid: currentItem.model?.uuid!, - modelfileID: currentItem.modelfileID, + assetId: currentItem.assetId, modelName: currentItem.modelName!, type: currentItem.type!, csgposition: currentItem.csgposition!, @@ -191,12 +189,12 @@ const WallItemsGroup = ({ const onMouseUp = (evt: any) => { if (evt.button === 0) { isLeftMouseDown = false; - if (!drag && deleteTool && activeModule === "builder") { + if (!drag && toolMode === '3D-Delete' && activeModule === "builder") { DeleteWallItems( hoveredDeletableWallItem, setWallItems, wallItems, - socket,projectId + socket, projectId ); } } @@ -248,10 +246,10 @@ const WallItemsGroup = ({ canvasElement.removeEventListener("drop", onDrop); canvasElement.removeEventListener("dragover", onDragOver); }; - }, [deleteTool, wallItems, selectedItem, camera]); + }, [toolMode, wallItems, selectedItem, camera]); useEffect(() => { - if (deleteTool && activeModule === "builder") { + if (toolMode && activeModule === "builder") { handleMeshMissed( currentWallItem, setSelectedWallItem, @@ -260,7 +258,7 @@ const WallItemsGroup = ({ setSelectedWallItem(null); setSelectedItemsIndex(null); } - }, [deleteTool]); + }, [toolMode]); return ( <> diff --git a/app/src/modules/builder/groups/wallsAndWallItems.tsx b/app/src/modules/builder/groups/wallsAndWallItems.tsx index 82acd99..d4d52ec 100644 --- a/app/src/modules/builder/groups/wallsAndWallItems.tsx +++ b/app/src/modules/builder/groups/wallsAndWallItems.tsx @@ -1,8 +1,8 @@ import { Geometry } from "@react-three/csg"; import { - useDeleteTool, useSelectedWallItem, useToggleView, + useToolMode, useWallItems, useWalls, } from "../../../store/builder/store"; @@ -23,7 +23,7 @@ const WallsAndWallItems = ({ const { walls } = useWalls(); const { wallItems } = useWallItems(); const { toggleView } = useToggleView(); - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const { setSelectedWallItem } = useSelectedWallItem(); return ( @@ -34,7 +34,7 @@ const WallsAndWallItems = ({ receiveShadow visible={!toggleView} onClick={(event) => { - if (!deleteTool) { + if (toolMode === "cursor") { handleMeshDown( event, currentWallItem, @@ -46,7 +46,7 @@ const WallsAndWallItems = ({ } }} onPointerMissed={() => { - if (!deleteTool) { + if (toolMode === "cursor") { handleMeshMissed( currentWallItem, setSelectedWallItem, diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 19d3d31..55a5821 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -3,15 +3,13 @@ import { Html, Line, Sphere } from "@react-three/drei"; import { useThree, useFrame } from "@react-three/fiber"; import * as THREE from "three"; import { - useActiveLayer, - useDeleteTool, - useDeletePointOrLine, - useSocketStore, - useToggleView, - useToolMode, - useRemovedLayer, - useZones, - useZonePoints, + useActiveLayer, + useSocketStore, + useToggleView, + useToolMode, + useRemovedLayer, + useZones, + useZonePoints, } from "../../../store/builder/store"; import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; @@ -22,43 +20,41 @@ import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore" import { useParams } from "react-router-dom"; const ZoneGroup: React.FC = () => { - const { camera, pointer, gl, raycaster, scene, controls } = useThree(); - const [startPoint, setStartPoint] = useState(null); - const [endPoint, setEndPoint] = useState(null); - const { zones, setZones } = useZones(); - const { zonePoints, setZonePoints } = useZonePoints(); - const [isDragging, setIsDragging] = useState(false); - const { selectedZone } = useSelectedZoneStore(); - const [draggedSphere, setDraggedSphere] = useState( - null - ); - const plane = useMemo( - () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), - [] - ); - const { toggleView } = useToggleView(); - const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); - const { removedLayer, setRemovedLayer } = useRemovedLayer(); - const { toolMode } = useToolMode(); - const { setDeleteTool } = useDeleteTool(); - const { activeLayer } = useActiveLayer(); - const { socket } = useSocketStore(); - const { projectId } = useParams(); + const { camera, pointer, gl, raycaster, scene, controls } = useThree(); + const [startPoint, setStartPoint] = useState(null); + const [endPoint, setEndPoint] = useState(null); + const { zones, setZones } = useZones(); + const { zonePoints, setZonePoints } = useZonePoints(); + const [isDragging, setIsDragging] = useState(false); + const { selectedZone } = useSelectedZoneStore(); + const [draggedSphere, setDraggedSphere] = useState( + null + ); + const plane = useMemo( + () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), + [] + ); + const { toggleView } = useToggleView(); + const { removedLayer, setRemovedLayer } = useRemovedLayer(); + const { toolMode } = useToolMode(); + const { activeLayer } = useActiveLayer(); + const { socket } = useSocketStore(); + const { projectId } = useParams(); - const groupsRef = useRef(); + const groupsRef = useRef(); - const zoneMaterial = useMemo( - () => - new THREE.ShaderMaterial({ - side: THREE.DoubleSide, - vertexShader: ` + const zoneMaterial = useMemo( + () => + new THREE.ShaderMaterial({ + side: THREE.DoubleSide, + vertexShader: ` varying vec2 vUv; void main(){ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); vUv = uv; } `, - fragmentShader: ` + fragmentShader: ` varying vec2 vUv; uniform vec3 uOuterColor; void main(){ @@ -66,677 +62,606 @@ const ZoneGroup: React.FC = () => { gl_FragColor = vec4(uOuterColor, alpha); } `, - uniforms: { - uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, - }, - transparent: true, - depthWrite: false, - }), - [] - ); - - useEffect(() => { - const fetchZones = async () => { - const email = localStorage.getItem("email"); - if (!email) return; - - const organization = email.split("@")[1].split(".")[0]; - const data = await getZonesApi(organization, projectId); - // console.log('data: ', data); - - if (data.length > 0) { - const fetchedZones = data.map((zone: any) => ({ - zoneUuid: zone.zoneUuid, - zoneName: zone.zoneName, - points: zone.points, - viewPortCenter: zone.viewPortCenter, - viewPortposition: zone.viewPortposition, - layer: zone.layer, - })); - - setZones(fetchedZones); - - const fetchedPoints = data.flatMap((zone: any) => - zone.points - .slice(0, 4) - .map( - (point: [number, number, number]) => new THREE.Vector3(...point) - ) - ); - - setZonePoints(fetchedPoints); - } - }; - - fetchZones(); - }, []); - - useEffect(() => { - localStorage.setItem("zones", JSON.stringify(zones)); - }, [zones]); - - useEffect(() => { - if (removedLayer) { - const updatedZones = zones.filter( - (zone: any) => zone.layer !== removedLayer - ); - setZones(updatedZones); - - const updatedzonePoints = zonePoints.filter((_: any, index: any) => { - const zoneIndex = Math.floor(index / 4); - return zones[zoneIndex]?.layer !== removedLayer; - }); - setZonePoints(updatedzonePoints); - - zones - .filter((zone: any) => zone.layer === removedLayer) - .forEach((zone: any) => { - deleteZoneFromBackend(zone.zoneUuid); - }); - - setRemovedLayer(null); - } - }, [removedLayer]); - - useEffect(() => { - if (toolMode !== "Zone") { - setStartPoint(null); - setEndPoint(null); - } else { - setDeletePointOrLine(false); - setDeleteTool(false); - } - if (!toggleView) { - setStartPoint(null); - setEndPoint(null); - } - }, [toolMode, toggleView]); - - // eslint-disable-next-line react-hooks/exhaustive-deps - const addZoneToBackend = async (zone: { - zoneUuid: string; - zoneName: string; - points: [number, number, number][]; - layer: string; - }) => { - console.log('zoneUuid: ', zone); - const email = localStorage.getItem("email"); - const userId = localStorage.getItem("userId"); - const organization = email!.split("@")[1].split(".")[0]; - - const calculateCenter = (points: number[][]) => { - if (!points || points.length === 0) return null; - - let sumX = 0, - sumY = 0, - sumZ = 0; - const numPoints = points.length; - - points.forEach(([x, y, z]) => { - sumX += x; - sumY += y; - sumZ += z; - }); - - return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [ - number, - number, - number - ]; - }; - - const target: [number, number, number] | null = calculateCenter( - zone.points + uniforms: { + uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, + }, + transparent: true, + depthWrite: false, + }), + [] ); - if (!target || zone.points.length < 4) return; - const position = [target[0], 10, target[2]]; - const input = { - userId: userId, - projectId, - organization: organization, - zoneData: { - zoneName: zone.zoneName, - zoneUuid: zone.zoneUuid, - points: zone.points, - viewPortCenter: target, - viewPortposition: position, - layer: zone.layer, - }, - }; + useEffect(() => { + const fetchZones = async () => { + const email = localStorage.getItem("email"); + if (!email) return; - socket.emit("v1:zone:set", input); - }; + const organization = email.split("@")[1].split(".")[0]; + const data = await getZonesApi(organization, projectId); + // console.log('data: ', data); - // eslint-disable-next-line react-hooks/exhaustive-deps - const updateZoneToBackend = async (zone: { - zoneUuid: string; - zoneName: string; - points: [number, number, number][]; - layer: string; - }) => { - const email = localStorage.getItem("email"); - const userId = localStorage.getItem("userId"); - const organization = email!.split("@")[1].split(".")[0]; + if (data.length > 0) { + const fetchedZones = data.map((zone: any) => ({ + zoneUuid: zone.zoneUuid, + zoneName: zone.zoneName, + points: zone.points, + viewPortCenter: zone.viewPortCenter, + viewPortposition: zone.viewPortposition, + layer: zone.layer, + })); - const calculateCenter = (points: number[][]) => { - if (!points || points.length === 0) return null; + setZones(fetchedZones); - let sumX = 0, - sumY = 0, - sumZ = 0; - const numPoints = points.length; + const fetchedPoints = data.flatMap((zone: any) => + zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point)) + ); - points.forEach(([x, y, z]) => { - sumX += x; - sumY += y; - sumZ += z; - }); - - return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [ - number, - number, - number - ]; - }; - - const target: [number, number, number] | null = calculateCenter( - zone.points - ); - if (!target || zone.points.length < 4) return; - const position = [target[0], 10, target[2]]; - - const input = { - userId: userId, - projectId, - organization: organization, - zoneData: { - zoneName: zone.zoneName, - zoneUuid: zone.zoneUuid, - points: zone.points, - viewPortCenter: target, - viewPortposition: position, - layer: zone.layer, - }, - }; - - socket.emit("v1:zone:set", input); - }; - - const deleteZoneFromBackend = async (zoneUuid: string) => { - const email = localStorage.getItem("email"); - const userId = localStorage.getItem("userId"); - const organization = email!.split("@")[1].split(".")[0]; - - const input = { - userId: userId, - projectId, - organization: organization, - zoneUuid: zoneUuid, - }; - - socket.emit("v1:zone:delete", input); - }; - - // eslint-disable-next-line react-hooks/exhaustive-deps - const handleDeleteZone = (zoneUuid: string) => { - const updatedZones = zones.filter((zone: any) => zone.zoneUuid !== zoneUuid); - setZones(updatedZones); - - const zoneIndex = zones.findIndex((zone: any) => zone.zoneUuid === zoneUuid); - if (zoneIndex !== -1) { - const zonePointsToRemove = zonePoints.slice( - zoneIndex * 4, - zoneIndex * 4 + 4 - ); - zonePointsToRemove.forEach((point: any) => - groupsRef.current.remove(point) - ); - const updatedzonePoints = zonePoints.filter( - (_: any, index: any) => - index < zoneIndex * 4 || index >= zoneIndex * 4 + 4 - ); - setZonePoints(updatedzonePoints); - } - deleteZoneFromBackend(zoneUuid); - }; - - useEffect(() => { - if (!camera || !toggleView) return; - const canvasElement = gl.domElement; - - let drag = false; - let isLeftMouseDown = false; - - const onMouseDown = (evt: any) => { - if (evt.button === 0) { - isLeftMouseDown = true; - drag = false; - - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects( - groupsRef.current.children, - true - ); - - if (intersects.length > 0 && toolMode === "move") { - const clickedObject = intersects[0].object; - const sphereIndex = zonePoints.findIndex((point: any) => - point.equals(clickedObject.position) - ); - if (sphereIndex !== -1) { - (controls as any).enabled = false; - setDraggedSphere(zonePoints[sphereIndex]); - setIsDragging(true); - } - } - } - }; - - const onMouseUp = (evt: any) => { - if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) { - isLeftMouseDown = false; - - if (!startPoint && toolMode !== "move") { - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (point) { - setStartPoint(point); - setEndPoint(null); - } - } else if (startPoint && toolMode !== "move") { - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (!point) return; - - const points = [ - [startPoint.x, 0.15, startPoint.z], - [point.x, 0.15, startPoint.z], - [point.x, 0.15, point.z], - [startPoint.x, 0.15, point.z], - [startPoint.x, 0.15, startPoint.z], - ] as [number, number, number][]; - - const zoneName = `Zone ${zones.length + 1}`; - const zoneUuid = THREE.MathUtils.generateUUID(); - const newZone = { - zoneUuid, - zoneName, - points: points, - layer: activeLayer, - }; - - const newZones = [...zones, newZone]; - - setZones(newZones); - - const newzonePoints = [ - new THREE.Vector3(startPoint.x, 0.15, startPoint.z), - new THREE.Vector3(point.x, 0.15, startPoint.z), - new THREE.Vector3(point.x, 0.15, point.z), - new THREE.Vector3(startPoint.x, 0.15, point.z), - ]; - - const updatedZonePoints = [...zonePoints, ...newzonePoints]; - setZonePoints(updatedZonePoints); - - addZoneToBackend(newZone); - setStartPoint(null); - setEndPoint(null); - } - } else if ( - evt.button === 0 && - !drag && - !isDragging && - deletePointOrLine - ) { - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects( - groupsRef.current.children, - true - ); - - if (intersects.length > 0) { - const clickedObject = intersects[0].object; - - const sphereIndex = zonePoints.findIndex((point: any) => - point.equals(clickedObject.position) - ); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - const zoneUuid = zones[zoneIndex].zoneUuid; - handleDeleteZone(zoneUuid); - return; - } - } - } - - if (evt.button === 0) { - if (isDragging && draggedSphere) { - setIsDragging(false); - setDraggedSphere(null); - - const sphereIndex = zonePoints.findIndex( - (point: any) => point === draggedSphere - ); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - - if (zoneIndex !== -1 && zones[zoneIndex]) { - updateZoneToBackend(zones[zoneIndex]); + setZonePoints(fetchedPoints); } - } + }; + + fetchZones(); + }, []); + + useEffect(() => { + localStorage.setItem("zones", JSON.stringify(zones)); + }, [zones]); + + useEffect(() => { + if (removedLayer) { + const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer); + setZones(updatedZones); + + const updatedzonePoints = zonePoints.filter((_: any, index: any) => { + const zoneIndex = Math.floor(index / 4); + return zones[zoneIndex]?.layer !== removedLayer; + }); + setZonePoints(updatedzonePoints); + + zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => { deleteZoneFromBackend(zone.zoneUuid); }); + + setRemovedLayer(null); } - } + }, [removedLayer]); + + useEffect(() => { + if (toolMode !== "Zone") { + setStartPoint(null); + setEndPoint(null); + } + if (!toggleView) { + setStartPoint(null); + setEndPoint(null); + } + }, [toolMode, toggleView]); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const addZoneToBackend = async (zone: { + zoneUuid: string; + zoneName: string; + points: [number, number, number][]; + layer: string; + }) => { + const email = localStorage.getItem("email"); + const userId = localStorage.getItem("userId"); + const organization = email!.split("@")[1].split(".")[0]; + + const calculateCenter = (points: number[][]) => { + if (!points || points.length === 0) return null; + + let sumX = 0, sumY = 0, sumZ = 0; + const numPoints = points.length; + + points.forEach(([x, y, z]) => { + sumX += x; + sumY += y; + sumZ += z; + }); + + return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [ + number, + number, + number + ]; + }; + + const target: [number, number, number] | null = calculateCenter(zone.points); + if (!target || zone.points.length < 4) return; + const position = [target[0], 10, target[2]]; + + const input = { + userId: userId, + projectId, + organization: organization, + zoneData: { + zoneName: zone.zoneName, + zoneUuid: zone.zoneUuid, + points: zone.points, + viewPortCenter: target, + viewPortposition: position, + layer: zone.layer, + }, + }; + + socket.emit("v1:zone:set", input); }; - const onMouseMove = () => { - if (!groupsRef.current) return; - if (isLeftMouseDown) { - drag = true; - } - raycaster.setFromCamera(pointer, camera); - const intersects = raycaster.intersectObjects( - groupsRef.current.children, - true - ); + // eslint-disable-next-line react-hooks/exhaustive-deps + const updateZoneToBackend = async (zone: { + zoneUuid: string; + zoneName: string; + points: [number, number, number][]; + layer: string; + }) => { + const email = localStorage.getItem("email"); + const userId = localStorage.getItem("userId"); + const organization = email!.split("@")[1].split(".")[0]; - if ( - intersects.length > 0 && - intersects[0].object.name.includes("point") - ) { - gl.domElement.style.cursor = - toolMode === "move" ? "pointer" : "default"; - } else { - gl.domElement.style.cursor = "default"; - } - if (isDragging && draggedSphere) { + const calculateCenter = (points: number[][]) => { + if (!points || points.length === 0) return null; + + let sumX = 0, sumY = 0, sumZ = 0; + const numPoints = points.length; + + points.forEach(([x, y, z]) => { + sumX += x; + sumY += y; + sumZ += z; + }); + + return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [ + number, + number, + number + ]; + }; + + const target: [number, number, number] | null = calculateCenter(zone.points); + if (!target || zone.points.length < 4) return; + const position = [target[0], 10, target[2]]; + + const input = { + userId: userId, + projectId, + organization: organization, + zoneData: { + zoneName: zone.zoneName, + zoneUuid: zone.zoneUuid, + points: zone.points, + viewPortCenter: target, + viewPortposition: position, + layer: zone.layer, + }, + }; + + socket.emit("v1:zone:set", input); + }; + + const deleteZoneFromBackend = async (zoneUuid: string) => { + const email = localStorage.getItem("email"); + const userId = localStorage.getItem("userId"); + const organization = email!.split("@")[1].split(".")[0]; + + const input = { + userId: userId, + projectId, + organization: organization, + zoneUuid: zoneUuid, + }; + + socket.emit("v1:zone:delete", input); + }; + + // eslint-disable-next-line react-hooks/exhaustive-deps + const handleDeleteZone = (zoneUuid: string) => { + const updatedZones = zones.filter((zone: any) => zone.zoneUuid !== zoneUuid); + setZones(updatedZones); + + const zoneIndex = zones.findIndex((zone: any) => zone.zoneUuid === zoneUuid); + if (zoneIndex !== -1) { + const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4); + zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point)); + const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4); + setZonePoints(updatedzonePoints); + } + deleteZoneFromBackend(zoneUuid); + }; + + useEffect(() => { + if (!camera || !toggleView) return; + const canvasElement = gl.domElement; + + let drag = false; + let isLeftMouseDown = false; + + const onMouseDown = (evt: any) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects(groupsRef.current.children, true); + + if (intersects.length > 0 && toolMode === "move") { + const clickedObject = intersects[0].object; + const sphereIndex = zonePoints.findIndex((point: any) => + point.equals(clickedObject.position) + ); + if (sphereIndex !== -1) { + (controls as any).enabled = false; + setDraggedSphere(zonePoints[sphereIndex]); + setIsDragging(true); + } + } + } + }; + + const onMouseUp = (evt: any) => { + if (evt.button === 0 && !drag && !isDragging && toolMode === 'Zone') { + isLeftMouseDown = false; + + if (!startPoint) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (point) { + setStartPoint(point); + setEndPoint(null); + } + } else if (startPoint) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (!point) return; + + const points = [ + [startPoint.x, 0.15, startPoint.z], + [point.x, 0.15, startPoint.z], + [point.x, 0.15, point.z], + [startPoint.x, 0.15, point.z], + [startPoint.x, 0.15, startPoint.z], + ] as [number, number, number][]; + + const zoneName = `Zone ${zones.length + 1}`; + const zoneUuid = THREE.MathUtils.generateUUID(); + const newZone = { + zoneUuid, + zoneName, + points: points, + layer: activeLayer, + }; + + const newZones = [...zones, newZone]; + + setZones(newZones); + + const newzonePoints = [ + new THREE.Vector3(startPoint.x, 0.15, startPoint.z), + new THREE.Vector3(point.x, 0.15, startPoint.z), + new THREE.Vector3(point.x, 0.15, point.z), + new THREE.Vector3(startPoint.x, 0.15, point.z), + ]; + + const updatedZonePoints = [...zonePoints, ...newzonePoints]; + setZonePoints(updatedZonePoints); + + addZoneToBackend(newZone); + setStartPoint(null); + setEndPoint(null); + } + } else if (evt.button === 0 && !drag && !isDragging && toolMode === '2D-Delete') { + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects( + groupsRef.current.children, + true + ); + + if (intersects.length > 0) { + const clickedObject = intersects[0].object; + + const sphereIndex = zonePoints.findIndex((point: any) => + point.equals(clickedObject.position) + ); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + const zoneUuid = zones[zoneIndex].zoneUuid; + handleDeleteZone(zoneUuid); + return; + } + } + } + + if (evt.button === 0) { + if (isDragging && draggedSphere) { + setIsDragging(false); + setDraggedSphere(null); + + const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + + if (zoneIndex !== -1 && zones[zoneIndex]) { + updateZoneToBackend(zones[zoneIndex]); + } + } + } + } + }; + + const onMouseMove = () => { + if (!groupsRef.current) return; + if (isLeftMouseDown) { + drag = true; + } + raycaster.setFromCamera(pointer, camera); + const intersects = raycaster.intersectObjects(groupsRef.current.children, true); + + if (intersects.length > 0 && intersects[0].object.name.includes("point")) { + gl.domElement.style.cursor = toolMode === "move" ? "pointer" : "default"; + } else { + gl.domElement.style.cursor = "default"; + } + if (isDragging && draggedSphere) { + raycaster.setFromCamera(pointer, camera); + const intersectionPoint = new THREE.Vector3(); + const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (point) { + draggedSphere.set(point.x, 0.15, point.z); + + const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere); + if (sphereIndex !== -1) { + const zoneIndex = Math.floor(sphereIndex / 4); + const cornerIndex = sphereIndex % 4; + + const updatedZones = zones.map((zone: any, index: number) => { + if (index === zoneIndex) { + const updatedPoints = [...zone.points]; + updatedPoints[cornerIndex] = [point.x, 0.15, point.z]; + updatedPoints[4] = updatedPoints[0]; + return { ...zone, points: updatedPoints }; + } + return zone; + }); + + setZones(updatedZones); + } + } + } + }; + + const onContext = (event: any) => { + event.preventDefault(); + setStartPoint(null); + setEndPoint(null); + }; + + if (toolMode === "Zone" || toolMode === '2D-Delete' || toolMode === "move") { + canvasElement.addEventListener("mousedown", onMouseDown); + canvasElement.addEventListener("mouseup", onMouseUp); + canvasElement.addEventListener("mousemove", onMouseMove); + canvasElement.addEventListener("contextmenu", onContext); + } + return () => { + canvasElement.removeEventListener("mousedown", onMouseDown); + canvasElement.removeEventListener("mouseup", onMouseUp); + canvasElement.removeEventListener("mousemove", onMouseMove); + canvasElement.removeEventListener("contextmenu", onContext); + }; + }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, zonePoints, draggedSphere, activeLayer, raycaster, pointer, controls, plane, setZones, setZonePoints, addZoneToBackend, handleDeleteZone, updateZoneToBackend,]); + + useFrame(() => { + if (!startPoint) return; raycaster.setFromCamera(pointer, camera); const intersectionPoint = new THREE.Vector3(); const point = raycaster.ray.intersectPlane(plane, intersectionPoint); if (point) { - draggedSphere.set(point.x, 0.15, point.z); - - const sphereIndex = zonePoints.findIndex( - (point: any) => point === draggedSphere - ); - if (sphereIndex !== -1) { - const zoneIndex = Math.floor(sphereIndex / 4); - const cornerIndex = sphereIndex % 4; - - const updatedZones = zones.map((zone: any, index: number) => { - if (index === zoneIndex) { - const updatedPoints = [...zone.points]; - updatedPoints[cornerIndex] = [point.x, 0.15, point.z]; - updatedPoints[4] = updatedPoints[0]; - return { ...zone, points: updatedPoints }; - } - return zone; - }); - - setZones(updatedZones); - } + setEndPoint(point); } - } - }; + }); - const onContext = (event: any) => { - event.preventDefault(); - setStartPoint(null); - setEndPoint(null); - }; + return ( + + + {zones.map((zone: any) => ( + + {zone.points + .slice(0, -1) + .map((point: [number, number, number], index: number) => { + const nextPoint = zone.points[index + 1]; - if (toolMode === "Zone" || deletePointOrLine || toolMode === "move") { - canvasElement.addEventListener("mousedown", onMouseDown); - canvasElement.addEventListener("mouseup", onMouseUp); - canvasElement.addEventListener("mousemove", onMouseMove); - canvasElement.addEventListener("contextmenu", onContext); - } - return () => { - canvasElement.removeEventListener("mousedown", onMouseDown); - canvasElement.removeEventListener("mouseup", onMouseUp); - canvasElement.removeEventListener("mousemove", onMouseMove); - canvasElement.removeEventListener("contextmenu", onContext); - }; - }, [ - gl, - camera, - startPoint, - toggleView, - scene, - toolMode, - zones, - isDragging, - deletePointOrLine, - zonePoints, - draggedSphere, - activeLayer, - raycaster, - pointer, - controls, - plane, - setZones, - setZonePoints, - addZoneToBackend, - handleDeleteZone, - updateZoneToBackend, - ]); + const point1 = new THREE.Vector3(point[0], point[1], point[2]); + const point2 = new THREE.Vector3( + nextPoint[0], + nextPoint[1], + nextPoint[2] + ); - useFrame(() => { - if (!startPoint) return; - raycaster.setFromCamera(pointer, camera); - const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); - if (point) { - setEndPoint(point); - } - }); + const planeWidth = point1.distanceTo(point2); + const planeHeight = CONSTANTS.zoneConfig.height; - return ( - - - {zones.map((zone: any) => ( - - {zone.points - .slice(0, -1) - .map((point: [number, number, number], index: number) => { - const nextPoint = zone.points[index + 1]; + const midpoint = new THREE.Vector3( + (point1.x + point2.x) / 2, + CONSTANTS.zoneConfig.height / 2 + + (zone.layer - 1) * CONSTANTS.zoneConfig.height, + (point1.z + point2.z) / 2 + ); - const point1 = new THREE.Vector3(point[0], point[1], point[2]); - const point2 = new THREE.Vector3( - nextPoint[0], - nextPoint[1], - nextPoint[2] - ); + const angle = Math.atan2( + point2.z - point1.z, + point2.x - point1.x + ); - const planeWidth = point1.distanceTo(point2); - const planeHeight = CONSTANTS.zoneConfig.height; + return ( + + + + + ); + })} + {!toggleView && + (() => { + const points3D = zone.points || []; + const coords2D = points3D.map((p: any) => [p[0], p[2]]); - const midpoint = new THREE.Vector3( - (point1.x + point2.x) / 2, - CONSTANTS.zoneConfig.height / 2 + - (zone.layer - 1) * CONSTANTS.zoneConfig.height, - (point1.z + point2.z) / 2 - ); + // Ensure the polygon is closed + if ( + coords2D.length >= 4 && + (coords2D[0][0] !== coords2D[coords2D.length - 1][0] || + coords2D[0][1] !== coords2D[coords2D.length - 1][1]) + ) { + coords2D.push(coords2D[0]); + } + if (coords2D.length < 4) return null; - const angle = Math.atan2( - point2.z - point1.z, - point2.x - point1.x - ); + const polygon = turf.polygon([coords2D]); + const center2D = turf.center(polygon).geometry.coordinates; - return ( - - - sum + p[1], + 0 + ); + const avgY = points3D.length > 0 ? sumY / points3D.length : 0; + + const htmlPosition: [number, number, number] = [ + center2D[0], + avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5, + center2D[1], + ]; + + return ( + +
{zone.zoneName}
+ + ); + })()} + + ))} + + + {zones + .filter((zone: any) => zone.layer === activeLayer) + .map((zone: any) => ( + { + e.stopPropagation(); + if (toolMode === '2D-Delete') { + handleDeleteZone(zone.zoneUuid); + } + }} + /> + ))} + + + {zones.map((zone: any, index: any) => { + if (!toggleView) return null; + const points3D = zone.points; + const coords2D = points3D.map((p: any) => [p[0], p[2]]); + + if ( + coords2D.length < 4 || + coords2D[0][0] !== coords2D[coords2D.length - 1][0] || + coords2D[0][1] !== coords2D[coords2D.length - 1][1] + ) { + coords2D.push(coords2D[0]); + } + if (coords2D.length < 4) return null; + + const polygon = turf.polygon([coords2D]); + const center2D = turf.center(polygon).geometry.coordinates; + + const sumY = points3D.reduce((sum: number, p: any) => sum + p[1], 0); + const avgY = sumY / points3D.length; + + const area = computeArea(points3D, "zone"); + const formattedArea = `${area.toFixed(2)} m²`; + + const htmlPosition: [number, number, number] = [ + center2D[0], + avgY + CONSTANTS.zoneConfig.height, + center2D[1], + ]; + return ( + +
+ {zone.zoneName} ({formattedArea}) +
+ + ); + })} + + + + {zones + .filter((zone: any) => zone.layer === activeLayer) + .flatMap((zone: any) => + zone.points.slice(0, 4).map((point: any, pointIndex: number) => ( + + + + )) + )} + + + {startPoint && endPoint && ( + - - ); - })} - {!toggleView && - (() => { - const points3D = zone.points || []; - const coords2D = points3D.map((p: any) => [p[0], p[2]]); - - // Ensure the polygon is closed - if ( - coords2D.length >= 4 && - (coords2D[0][0] !== coords2D[coords2D.length - 1][0] || - coords2D[0][1] !== coords2D[coords2D.length - 1][1]) - ) { - coords2D.push(coords2D[0]); - } - if (coords2D.length < 4) return null; - - const polygon = turf.polygon([coords2D]); - const center2D = turf.center(polygon).geometry.coordinates; - - // Calculate the average Y value - const sumY = points3D.reduce( - (sum: number, p: any) => sum + p[1], - 0 - ); - const avgY = points3D.length > 0 ? sumY / points3D.length : 0; - - const htmlPosition: [number, number, number] = [ - center2D[0], - avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5, - center2D[1], - ]; - - return ( - -
{zone.zoneName}
- - ); - })()} - - ))} - - - {zones - .filter((zone: any) => zone.layer === activeLayer) - .map((zone: any) => ( - { - e.stopPropagation(); - if (deletePointOrLine) { - handleDeleteZone(zone.zoneUuid); - } - }} - /> - ))} - - - {zones.map((zone: any, index: any) => { - if (!toggleView) return null; - const points3D = zone.points; - const coords2D = points3D.map((p: any) => [p[0], p[2]]); - - if ( - coords2D.length < 4 || - coords2D[0][0] !== coords2D[coords2D.length - 1][0] || - coords2D[0][1] !== coords2D[coords2D.length - 1][1] - ) { - coords2D.push(coords2D[0]); - } - if (coords2D.length < 4) return null; - - const polygon = turf.polygon([coords2D]); - const center2D = turf.center(polygon).geometry.coordinates; - - const sumY = points3D.reduce((sum: number, p: any) => sum + p[1], 0); - const avgY = sumY / points3D.length; - - const area = computeArea(points3D, "zone"); - const formattedArea = `${area.toFixed(2)} m²`; - - const htmlPosition: [number, number, number] = [ - center2D[0], - avgY + CONSTANTS.zoneConfig.height, - center2D[1], - ]; - return ( - -
- {zone.zoneName} ({formattedArea}) -
- - ); - })} - - - - {zones - .filter((zone: any) => zone.layer === activeLayer) - .flatMap((zone: any) => - zone.points.slice(0, 4).map((point: any, pointIndex: number) => ( - - - - )) - )} - - - {startPoint && endPoint && ( - - )} - - - ); + )} + + + ); }; export default ZoneGroup; diff --git a/app/src/modules/builder/point/point.tsx b/app/src/modules/builder/point/point.tsx index 6380ea1..c026f94 100644 --- a/app/src/modules/builder/point/point.tsx +++ b/app/src/modules/builder/point/point.tsx @@ -1,7 +1,7 @@ import * as THREE from 'three'; import * as Constants from '../../../types/world/worldConstants'; import { useRef, useState, useEffect, useMemo } from 'react'; -import { useDeletePointOrLine, useToolMode } from '../../../store/builder/store'; +import { useToolMode } from '../../../store/builder/store'; import { DragControls } from '@react-three/drei'; import { useAisleStore } from '../../../store/builder/useAisleStore'; import { useThree } from '@react-three/fiber'; @@ -24,7 +24,6 @@ function Point({ point }: { readonly point: Point }) { const { snapPosition } = useAislePointSnapping(point); const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position }); const { hoveredPoint, setHoveredPoint } = useBuilderStore(); - const { deletePointOrLine } = useDeletePointOrLine(); const { projectId } = useParams(); const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const colors = getColor(point); @@ -64,12 +63,12 @@ function Point({ point }: { readonly point: Point }) { } useEffect(() => { - if (materialRef.current && (toolMode === 'move' || deletePointOrLine)) { + if (materialRef.current && (toolMode === 'move' || toolMode === '2D-Delete')) { let innerColor; let outerColor; if (isHovered) { - innerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor; - outerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor; + innerColor = toolMode === '2D-Delete' ? colors.defaultDeleteColor : colors.defaultOuterColor; + outerColor = toolMode === '2D-Delete' ? colors.defaultDeleteColor : colors.defaultOuterColor; } else { innerColor = colors.defaultInnerColor; outerColor = colors.defaultOuterColor; @@ -82,7 +81,7 @@ function Point({ point }: { readonly point: Point }) { materialRef.current.uniforms.uOuterColor.value.set(colors.defaultOuterColor); materialRef.current.uniformsNeedUpdate = true; } - }, [isHovered, colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor, toolMode, deletePointOrLine]); + }, [isHovered, colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor, toolMode]); const uniforms = useMemo(() => ({ uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) }, @@ -114,7 +113,7 @@ function Point({ point }: { readonly point: Point }) { } const handleDragEnd = (point: Point) => { - if (deletePointOrLine) return; + if (toolMode === '2D-Delete') return; if (point.pointType === 'Aisle') { const updatedAisles = getAislesByPointId(point.pointUuid); if (updatedAisles.length > 0 && projectId) { @@ -128,7 +127,7 @@ function Point({ point }: { readonly point: Point }) { } const handlePointClick = (point: Point) => { - if (deletePointOrLine) { + if (toolMode === '2D-Delete') { if (point.pointType === 'Aisle') { const removedAisles = removeAislePoint(point.pointUuid); if (removedAisles.length > 0) { diff --git a/app/src/modules/collaboration/socket/socketResponses.dev.tsx b/app/src/modules/collaboration/socket/socketResponses.dev.tsx index fed9893..ca8cb7e 100644 --- a/app/src/modules/collaboration/socket/socketResponses.dev.tsx +++ b/app/src/modules/collaboration/socket/socketResponses.dev.tsx @@ -40,16 +40,11 @@ export default function SocketResponses({ floorPlanGroup, lines, floorGroup, - floorGroupAisle, scene, onlyFloorlines, - itemsGroup, - isTempLoader, - tempLoader, currentLayerPoint, floorPlanGroupPoint, floorPlanGroupLine, - zoneGroup, dragPointControls, }: any) { const { socket } = useSocketStore(); @@ -104,7 +99,7 @@ export default function SocketResponses({ const asset: Asset = { modelUuid: data.data.modelUuid, modelName: data.data.modelName, - assetId: data.data.modelfileID, + assetId: data.data.assetId, position: data.data.position, rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z], isLocked: data.data.isLocked, @@ -125,7 +120,7 @@ export default function SocketResponses({ const asset: Asset = { modelUuid: data.data.modelUuid, modelName: data.data.modelName, - assetId: data.data.modelfileID, + assetId: data.data.assetId, position: data.data.position, rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z], isLocked: data.data.isLocked, @@ -474,13 +469,14 @@ export default function SocketResponses({ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; socket.on("v1:wallItem:Response:Delete", (data: any) => { + // console.log('data: ', data); if (socket.id === data.socketId) { return; } if (organization !== data.organization) { return; } - if (data.message === "wallitem deleted") { + if (data.message === "wall Item deleted successfully") { const deletedUUID = data.data.modelUuid; let WallItemsRef = wallItems; const Items = WallItemsRef.filter((item: any) => item.model?.uuid !== deletedUUID); @@ -504,6 +500,7 @@ export default function SocketResponses({ }); socket.on("v1:wallItems:Response:Update", (data: any) => { + // console.log('data: ', data); // if (socket.id === data.socketId) { return; @@ -511,7 +508,7 @@ export default function SocketResponses({ if (organization !== data.organization) { return; } - if (data.message === "wallIitem created") { + if (data.message === "wall Item created successfully") { const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); @@ -519,20 +516,20 @@ export default function SocketResponses({ loader.setDRACOLoader(dracoLoader); // Check THREE.js cache first - const cachedModel = THREE.Cache.get(data.data.modelfileID); + const cachedModel = THREE.Cache.get(data.data.assetId); if (cachedModel) { handleModelLoad(cachedModel); return; } // Check IndexedDB cache - retrieveGLTF(data.data.modelfileID).then((cachedModelBlob) => { + retrieveGLTF(data.data.assetId).then((cachedModelBlob) => { if (cachedModelBlob) { const blobUrl = URL.createObjectURL(cachedModelBlob); loader.load(blobUrl, (gltf) => { URL.revokeObjectURL(blobUrl); THREE.Cache.remove(blobUrl); - THREE.Cache.add(data.data.modelfileID, gltf); + THREE.Cache.add(data.data.assetId, gltf); handleModelLoad(gltf); }); return; @@ -540,11 +537,11 @@ export default function SocketResponses({ }) // Load from backend if not in any cache - loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`, async (gltf) => { + loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`, async (gltf) => { try { - const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`).then((res) => res.blob()); - await storeGLTF(data.data.modelfileID, modelBlob); - THREE.Cache.add(data.data.modelfileID, gltf); + const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`).then((res) => res.blob()); + await storeGLTF(data.data.assetId, modelBlob); + THREE.Cache.add(data.data.assetId, gltf); await handleModelLoad(gltf); } catch (error) { @@ -567,7 +564,7 @@ export default function SocketResponses({ type: data.data.type, model: model, modelName: data.data.modelName, - modelfileID: data.data.modelfileID, + assetId: data.data.assetId, scale: data.data.scale, csgscale: data.data.csgscale, csgposition: data.data.csgposition, @@ -592,7 +589,7 @@ export default function SocketResponses({ }); } - } else if (data.message === "wallIitem updated") { + } else if (data.message === "Updated successfully") { const updatedUUID = data.data.modelUuid; setWallItems((prevItems: any) => { diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index 2afa576..aed033a 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -10,7 +10,7 @@ interface ModelData { description: string; filename: string; isArchieve: boolean; - modelfileID: string; + assetId: string; tags: string; thumbnail: string; uploadDate: number; @@ -65,7 +65,7 @@ const CardsContainer: React.FC = ({ models }) => { onSelectCard={handleCardSelect} AssetID={assetDetail.AssetID} image={assetDetail.thumbnail} - modelUrl={assetDetail.modelfileID} + modelUrl={assetDetail.assetId} description={assetDetail.description} /> diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index ebc6d3a..abf469a 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -10,7 +10,7 @@ interface ModelData { description: string; filename: string; isArchieve: boolean; - modelfileID: string; + assetId: string; tags: string; thumbnail: string; uploadDate: number; diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index ef2cd67..b02670f 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -10,7 +10,7 @@ interface ModelData { description: string; filename: string; isArchieve: boolean; - modelfileID: string; + assetId: string; tags: string; thumbnail: string; uploadDate: number; diff --git a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx index 1e30d10..661e7ab 100644 --- a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx +++ b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx @@ -158,7 +158,7 @@ const CopyPasteControls = ({ const newFloorItem: Types.FloorItemType = { modelUuid: THREE.MathUtils.generateUUID(), modelName: obj.userData.modelName, - modelfileID: obj.userData.assetId, + assetId: obj.userData.assetId, position: [worldPosition.x, worldPosition.y, worldPosition.z], rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, }, isLocked: false, @@ -352,7 +352,7 @@ const CopyPasteControls = ({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -368,7 +368,7 @@ const CopyPasteControls = ({ obj.userData = { name: newFloorItem.modelName, - modelId: newFloorItem.modelfileID, + modelId: newFloorItem.assetId, modelUuid: newFloorItem.modelUuid, eventData: JSON.parse(JSON.stringify(eventData)) }; @@ -376,7 +376,7 @@ const CopyPasteControls = ({ const asset: Asset = { modelUuid: data.modelUuid, modelName: data.modelName, - assetId: data.modelfileID, + assetId: data.assetId, position: data.position, rotation: [data.rotation.x, data.rotation.y, data.rotation.z], isLocked: data.isLocked, @@ -409,7 +409,7 @@ const CopyPasteControls = ({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -425,7 +425,7 @@ const CopyPasteControls = ({ const asset: Asset = { modelUuid: data.modelUuid, modelName: data.modelName, - assetId: data.modelfileID, + assetId: data.assetId, position: data.position, rotation: [data.rotation.x, data.rotation.y, data.rotation.z], isLocked: data.isLocked, diff --git a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx index 8ef9e24..e444667 100644 --- a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx +++ b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx @@ -133,7 +133,7 @@ const DuplicationControls = ({ const newFloorItem: Types.FloorItemType = { modelUuid: THREE.MathUtils.generateUUID(), modelName: obj.userData.modelName, - modelfileID: obj.userData.assetId, + assetId: obj.userData.assetId, position: [worldPosition.x, worldPosition.y, worldPosition.z], rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, }, isLocked: false, @@ -327,7 +327,7 @@ const DuplicationControls = ({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -344,7 +344,7 @@ const DuplicationControls = ({ const asset: Asset = { modelUuid: data.modelUuid, modelName: data.modelName, - assetId: data.modelfileID, + assetId: data.assetId, position: data.position, rotation: [data.rotation.x, data.rotation.y, data.rotation.z], isLocked: data.isLocked, @@ -378,7 +378,7 @@ const DuplicationControls = ({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -394,7 +394,7 @@ const DuplicationControls = ({ const asset: Asset = { modelUuid: data.modelUuid, modelName: data.modelName, - assetId: data.modelfileID, + assetId: data.assetId, position: data.position, rotation: [data.rotation.x, data.rotation.y, data.rotation.z], isLocked: data.isLocked, diff --git a/app/src/modules/scene/controls/selectionControls/moveControls.tsx b/app/src/modules/scene/controls/selectionControls/moveControls.tsx index f0eb5a5..0a4d8b8 100644 --- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx +++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx @@ -237,7 +237,7 @@ function MoveControls({ const newFloorItem: Types.FloorItemType = { modelUuid: obj.userData.modelUuid, modelName: obj.userData.modelName, - modelfileID: obj.userData.assetId, + assetId: obj.userData.assetId, position: [worldPosition.x, worldPosition.y, worldPosition.z], rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -304,7 +304,7 @@ function MoveControls({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, diff --git a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx index 6d78846..b2d7605 100644 --- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx +++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx @@ -203,7 +203,7 @@ function RotateControls({ const newFloorItem: Types.FloorItemType = { modelUuid: obj.userData.modelUuid, modelName: obj.userData.modelName, - modelfileID: obj.userData.assetId, + assetId: obj.userData.assetId, position: [worldPosition.x, worldPosition.y, worldPosition.z], rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, @@ -263,7 +263,7 @@ function RotateControls({ organization, modelUuid: newFloorItem.modelUuid, modelName: newFloorItem.modelName, - modelfileID: newFloorItem.modelfileID, + assetId: newFloorItem.assetId, position: newFloorItem.position, rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, diff --git a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx index 2a9b5c8..2fbeaf3 100644 --- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx +++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox"; import { SelectionHelper } from "./selectionHelper"; import { useFrame, useThree } from "@react-three/fiber"; -import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store"; +import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../store/builder/store"; import BoundingBox from "./boundingBoxHelper"; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; @@ -33,6 +33,7 @@ const SelectionControls: React.FC = () => { const { socket } = useSocketStore(); const { removeAsset } = useAssetsStore(); const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]); + const { toolMode } = useToolMode(); const { projectId } = useParams(); const isDragging = useRef(false); @@ -173,7 +174,7 @@ const SelectionControls: React.FC = () => { rightClickMoved.current = false; }; - if (!toggleView && activeModule === "builder") { + if (!toggleView && activeModule === "builder" && toolMode === 'cursor') { helper.enabled = true; canvasElement.addEventListener("pointermove", onPointerMove); canvasElement.addEventListener("pointerup", onPointerUp); @@ -194,7 +195,7 @@ const SelectionControls: React.FC = () => { helper.enabled = false; helper.dispose(); }; - }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule,]); + }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule, toolMode]); useEffect(() => { if (activeModule !== "builder") { diff --git a/app/src/modules/scene/controls/transformControls/transformControls.tsx b/app/src/modules/scene/controls/transformControls/transformControls.tsx index 17c2b3c..57dd707 100644 --- a/app/src/modules/scene/controls/transformControls/transformControls.tsx +++ b/app/src/modules/scene/controls/transformControls/transformControls.tsx @@ -124,7 +124,7 @@ export default function TransformControl() { organization, modelUuid: asset.modelUuid, modelName: asset.modelName, - modelfileID: asset.assetId, + assetId: asset.assetId, position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number], rotation: { x: selectedFloorItem.rotation.x, y: selectedFloorItem.rotation.y, z: selectedFloorItem.rotation.z }, isLocked: false, diff --git a/app/src/modules/simulation/events/arrows/arrows.tsx b/app/src/modules/simulation/events/arrows/arrows.tsx index 951435e..59e56e2 100644 --- a/app/src/modules/simulation/events/arrows/arrows.tsx +++ b/app/src/modules/simulation/events/arrows/arrows.tsx @@ -1,7 +1,7 @@ import * as THREE from "three"; import { useMemo, useRef, useState } from "react"; import { useThree } from "@react-three/fiber"; -import { useDeleteTool } from "../../../../store/builder/store"; +import { useToolMode } from "../../../../store/builder/store"; interface ConnectionLine { id: string; @@ -14,7 +14,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[] const [hoveredLineKey, setHoveredLineKey] = useState(null); const groupRef = useRef(null); const { scene } = useThree(); - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const getWorldPositionFromScene = (uuid: string): THREE.Vector3 | null => { const obj = scene.getObjectByProperty("uuid", uuid); @@ -61,7 +61,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[] onPointerOut={() => setHoveredLineKey(null)} > setHoveredLineKey(null)} > diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx index 28e948a..467ffc0 100644 --- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx +++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx @@ -11,6 +11,7 @@ import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore"; import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi"; import { useProductContext } from "../../../products/productContext"; import { useParams } from "react-router-dom"; +import { useToolMode } from "../../../../../store/builder/store"; function PointsCreator() { const { gl, raycaster, scene, pointer, camera } = useThree(); @@ -26,7 +27,7 @@ function PointsCreator() { const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere(); const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData(); const { isPlaying } = usePlayButtonStore(); - + const { toolMode } = useToolMode(); const { projectId } = useParams(); const updateBackend = ( @@ -204,9 +205,11 @@ function PointsCreator() { ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); - setSelectedEventSphere( - sphereRefs.current[point.uuid] - ); + if (toolMode === 'cursor') { + setSelectedEventSphere( + sphereRefs.current[point.uuid] + ); + } }} key={`${index}-${point.uuid}`} position={new THREE.Vector3(...point.position)} @@ -235,9 +238,11 @@ function PointsCreator() { ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); - setSelectedEventSphere( - sphereRefs.current[point.uuid] - ); + if (toolMode === 'cursor') { + setSelectedEventSphere( + sphereRefs.current[point.uuid] + ); + } }} position={new THREE.Vector3(...point.position)} userData={{ @@ -264,9 +269,11 @@ function PointsCreator() { ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); - setSelectedEventSphere( - sphereRefs.current[point.uuid] - ); + if (toolMode === 'cursor') { + setSelectedEventSphere( + sphereRefs.current[point.uuid] + ); + } }} position={new THREE.Vector3(...point.position)} userData={{ @@ -293,9 +300,11 @@ function PointsCreator() { ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); - setSelectedEventSphere( - sphereRefs.current[point.uuid] - ); + if (toolMode === 'cursor') { + setSelectedEventSphere( + sphereRefs.current[point.uuid] + ); + } }} position={new THREE.Vector3(...point.position)} userData={{ @@ -322,9 +331,11 @@ function PointsCreator() { ref={(el) => (sphereRefs.current[point.uuid] = el!)} onClick={(e) => { e.stopPropagation(); - setSelectedEventSphere( - sphereRefs.current[point.uuid] - ); + if (toolMode === 'cursor') { + setSelectedEventSphere( + sphereRefs.current[point.uuid] + ); + } }} position={new THREE.Vector3(...point.position)} userData={{ diff --git a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx index 894ec35..c63612a 100644 --- a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx +++ b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx @@ -8,11 +8,11 @@ import { useEventsStore } from "../../../../store/simulation/useEventsStore"; import { handleAddEventToProduct } from "../points/functions/handleAddEventToProduct"; import { QuadraticBezierLine } from "@react-three/drei"; import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi"; -import { useDeleteTool } from "../../../../store/builder/store"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore"; import { ArrowOnQuadraticBezier, Arrows } from "../arrows/arrows"; import { useProductContext } from "../../products/productContext"; import { useParams } from "react-router-dom"; +import { useToolMode } from "../../../../store/builder/store"; interface ConnectionLine { id: string; @@ -32,7 +32,7 @@ function TriggerConnector() { const groupRefs = useRef>({}); const [helperlineColor, setHelperLineColor] = useState("red"); const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null); - const { deleteTool } = useDeleteTool(); + const { toolMode } = useToolMode(); const { isPlaying } = usePlayButtonStore(); const { selectedAction } = useSelectedAction(); const { projectId } = useParams(); @@ -344,7 +344,7 @@ function TriggerConnector() { } }; - if (subModule === 'mechanics' && !deleteTool && selectedAction.actionId && selectedAction.actionName) { + if (subModule === 'mechanics' && toolMode === 'cursor' && selectedAction.actionId && selectedAction.actionName) { canvasElement.addEventListener("mousedown", onMouseDown); canvasElement.addEventListener("mouseup", onMouseUp); canvasElement.addEventListener("mousemove", onMouseMove); @@ -360,7 +360,7 @@ function TriggerConnector() { canvasElement.removeEventListener('contextmenu', handleRightClick); }; - }, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool, selectedAction]); + }, [gl, subModule, selectedProduct, firstSelectedPoint, toolMode, selectedAction]); useFrame(() => { if (firstSelectedPoint) { @@ -477,15 +477,15 @@ function TriggerConnector() { start={startPoint.toArray()} end={endPoint.toArray()} mid={midPoint.toArray()} - color={deleteTool && hoveredLineKey === connection.id ? "red" : "#42a5f5"} + color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"} lineWidth={4} - dashed={deleteTool && hoveredLineKey === connection.id ? false : true} + dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true} dashSize={0.75} dashScale={20} onPointerOver={() => setHoveredLineKey(connection.id)} onPointerOut={() => setHoveredLineKey(null)} onClick={() => { - if (deleteTool) { + if (toolMode === '3D-Delete') { setHoveredLineKey(null); setCurrentLine(null); removeConnection(connection); diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx index 51f044d..e921bc0 100644 --- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx +++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx @@ -46,7 +46,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) { const animationFrameIdRef = useRef(null); const previousTimeRef = useRef(null); - const lastRemoved = useRef<{ type: string, materialId: string } | null>(null); + const lastRemoved = useRef<{ type: string, materialId: string, modelId: string } | null>(null); function firstFrame() { startTime = performance.now(); @@ -73,7 +73,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) { removeLastStorageMaterial(previousModel.modelUuid); updateCurrentLoad(previousModel.modelUuid, -1) } - lastRemoved.current = { type: previousModel.type, materialId: armBot.currentAction.materialId }; + lastRemoved.current = { type: previousModel.type, materialId: armBot.currentAction.materialId, modelId: previousModel.modelUuid }; } else { setIsVisible(armBot.currentAction.materialId, false); } @@ -105,13 +105,13 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) { removeCurrentAction(armBot.modelUuid) } - if (lastRemoved.current) { - if (lastRemoved.current.type === 'transfer') { - setIsPaused(lastRemoved.current.materialId, true) - } else { - setIsPaused(lastRemoved.current.materialId, false) - } - } + // if (lastRemoved.current) { + // if (lastRemoved.current.type === 'transfer') { + // setIsPaused(lastRemoved.current.materialId, true) + // } else { + // setIsPaused(lastRemoved.current.materialId, false) + // } + // } } } diff --git a/app/src/modules/simulation/simulator/simulator.tsx b/app/src/modules/simulation/simulator/simulator.tsx index f9e4714..5b2f8a8 100644 --- a/app/src/modules/simulation/simulator/simulator.tsx +++ b/app/src/modules/simulation/simulator/simulator.tsx @@ -15,7 +15,6 @@ function Simulator() { useEffect(() => { if (!isPlaying || isReset || !selectedProduct.productUuid) return; - console.log('selectedProduct: ', selectedProduct); const product = getProductById(selectedProduct.productUuid); if (!product) return; diff --git a/app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts b/app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts index 0989b89..5298c87 100644 --- a/app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts +++ b/app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts @@ -604,6 +604,7 @@ export function useTriggerHandler() { modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid, pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid, }) + setIsPaused(material.materialId, false); // New handleAction(action, material.materialId); } } else { diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx index add1855..c9c62c9 100644 --- a/app/src/modules/visualization/widgets/panel/Panel.tsx +++ b/app/src/modules/visualization/widgets/panel/Panel.tsx @@ -340,4 +340,4 @@ const Panel: React.FC = ({ ); }; -export default Panel; +export default Panel; \ No newline at end of file diff --git a/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts b/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts index ac96ba0..302c582 100644 --- a/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts +++ b/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts @@ -1,6 +1,6 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -export const getFloorAssets = async (organization: string,projectId?:string) => { +export const getFloorAssets = async (organization: string, projectId?: string) => { try { const response = await fetch( `${url_Backend_dwinzo}/api/V1/floorAssets/${projectId}`, diff --git a/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts b/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts index aa745ae..9c0003d 100644 --- a/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts +++ b/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts @@ -4,7 +4,7 @@ export const setFloorItemApi = async ( modelUuid?: string, modelName?: string, projectId?: string, - modelfileID?: string, + assetId?: string, position?: Object, rotation?: Object, isLocked?: boolean, @@ -18,7 +18,7 @@ export const setFloorItemApi = async ( projectId, position, rotation, - modelfileID, + assetId, isLocked, isVisible, }; diff --git a/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts b/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts index 096e928..e890efb 100644 --- a/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts +++ b/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts @@ -21,7 +21,6 @@ export const getWallItems = async (organization: string,projectId?:string) => { } const result = await response.json(); - // console.log('result: ', result); return result; } catch (error) { echo.error("Failed to get wall items"); diff --git a/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js b/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js index f98ad9b..66c9c81 100644 --- a/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js +++ b/app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js @@ -13,14 +13,14 @@ onmessage = async (event) => { const { floorItems } = event.data; const uniqueItems = floorItems.filter((item, index, self) => - index === self.findIndex((t) => t.modelfileID === item.modelfileID) + index === self.findIndex((t) => t.assetId === item.assetId) ); for (const item of uniqueItems) { - if(item.modelfileID === null || item.modelfileID === undefined) { - continue; // Skip items without a valid modelfileID + if(item.assetId === null || item.assetId === undefined) { + continue; // Skip items without a valid assetId } - const modelID = item.modelfileID; + const modelID = item.assetId; const indexedDBModel = await retrieveGLTF(modelID); let modelBlob; diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index c384f20..4502c71 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -197,10 +197,10 @@ export const useMenuVisible = create((set: any) => ({ setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), })); -export const useDeleteTool = create((set: any) => ({ - deleteTool: false, - setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), -})); +// export const useDeleteTool = create((set: any) => ({ +// deleteTool: false, +// setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), +// })); export const useToolMode = create((set: any) => ({ toolMode: null, @@ -222,10 +222,10 @@ export const useMovePoint = create((set: any) => ({ setMovePoint: (x: any) => set(() => ({ movePoint: x })), })); -export const useDeletePointOrLine = create((set: any) => ({ - deletePointOrLine: false, - setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), -})); +// export const useDeletePointOrLine = create((set: any) => ({ +// deletePointOrLine: false, +// setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), +// })); export const useWallItems = create((set: any) => ({ wallItems: [], @@ -626,11 +626,12 @@ interface CompareStore { } export const useCompareStore = create((set) => ({ - comparePopUp: true, + comparePopUp: false, setComparePopUp: (value) => set({ comparePopUp: value }), toggleComparePopUp: () => set((state) => ({ comparePopUp: !state.comparePopUp })), })); + // Save state store interface SaveVersionStore { isVersionSaved: boolean; diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss index 07b5ad2..31966be 100644 --- a/app/src/styles/layout/compareLayout.scss +++ b/app/src/styles/layout/compareLayout.scss @@ -463,6 +463,7 @@ width: 100%; display: flex; justify-content: space-between; + position: relative; .layer-wrapper { display: flex; @@ -472,6 +473,12 @@ justify-content: end; } } + + .chart { + width: 60%; + height: 70%; + position: absolute; + } } .chart { @@ -484,6 +491,8 @@ } .cycle-time-container { + position: relative; + .cycle-main { display: flex; justify-content: space-between; @@ -519,6 +528,14 @@ } } } + + .chart { + position: absolute; + bottom: 0; + left: 10px; + width: 60%; + height: 80%; + } } .overallDowntime-container { diff --git a/app/src/styles/pages/dashboard.scss b/app/src/styles/pages/dashboard.scss index a136974..95898db 100644 --- a/app/src/styles/pages/dashboard.scss +++ b/app/src/styles/pages/dashboard.scss @@ -144,7 +144,7 @@ &.active { background: var(--background-color-button); - color: var(--text-color); + color: var(--text-button-color); } } } @@ -342,4 +342,4 @@ font-family: #{$font-roboto}; cursor: pointer; } -} +} \ No newline at end of file diff --git a/app/src/types/world/worldTypes.d.ts b/app/src/types/world/worldTypes.d.ts index a84eb5e..da92fd9 100644 --- a/app/src/types/world/worldTypes.d.ts +++ b/app/src/types/world/worldTypes.d.ts @@ -193,7 +193,7 @@ export type FloorItemType = { modelName: string; position: [number, number, number]; rotation: { x: number; y: number; z: number }; - modelfileID: string; + assetId: string; isLocked: boolean; isVisible: boolean; eventData?: { @@ -224,7 +224,7 @@ interface WallItem { type: "fixed-move" | "free-move" | undefined; model?: THREE.Group; modelUuid?: string; - modelfileID: string; + assetId: string; modelName?: string; scale?: [number, number, number]; csgscale?: [number, number, number]; diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index 1e3d302..180129e 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -5,7 +5,6 @@ import { useActiveSubTool, useActiveTool, useAddAction, - useDeleteTool, useRenameModeStore, useSaveVersion, useSelectedFloorItem, @@ -32,7 +31,6 @@ const KeyPressListener: React.FC = () => { const { setToolMode } = useToolMode(); const { isPlaying, setIsPlaying } = usePlayButtonStore(); const { toggleView, setToggleView } = useToggleView(); - const { setDeleteTool } = useDeleteTool(); const { setAddAction } = useAddAction(); const { setSelectedWallItem } = useSelectedWallItem(); const { setActiveTool } = useActiveTool(); @@ -60,7 +58,6 @@ const KeyPressListener: React.FC = () => { }; const module = modules[keyCombination]; if (module && !toggleView) { - console.log("hi"); setActiveTool("cursor"); setActiveSubTool("cursor"); if (module === "market") setToggleUI(false, false); @@ -91,7 +88,6 @@ const KeyPressListener: React.FC = () => { setToggleUI(toggleTo2D, toggleTo2D); if (toggleTo2D) { setSelectedWallItem(null); - setDeleteTool(false); setAddAction(null); } setActiveTool("cursor");