update assetID

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<void> {
     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<Types.WallItem>((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<Types.WallItem>((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,

app/src/modules/builder/asset/assetsGroup.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three"
 import { useEffect } from 'react'
 import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
-import { useLoadingProgress, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
+import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
@@ -13,6 +13,7 @@ import { useThree } from "@react-three/fiber";
 import { CameraControls } from "@react-three/drei";
 import addAssetModel from "./functions/addAssetModel";
 import { useParams } from "react-router-dom";
+import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
 
 const gltfLoaderWorker = new Worker(
     new URL(
@@ -31,9 +32,12 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
     const { setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedItem, setSelectedItem } = useSelectedItem();
     const { projectId } = useParams();
+    const { isRenameMode, setIsRenameMode } = useRenameModeStore();
     const email = localStorage.getItem("email");
     const organization = email!.split("@")[1].split(".")[0];
     const userId = localStorage.getItem("userId")!;
+    const { setTop } = useTopData();
+    const { setLeft } = useLeftData();
 
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
@@ -63,7 +67,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 +100,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 +240,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,
@@ -257,6 +261,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
 
     useEffect(() => {
         const canvasElement = gl.domElement;
+
         const onDrop = (event: any) => {
             if (!event.dataTransfer?.files[0]) return;
 
@@ -272,11 +277,28 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         const onDragOver = (event: any) => {
             event.preventDefault();
         };
+        const onMouseMove = (evt: any) => {
+            if (!canvasElement) return;
+            const canvasRect = canvasElement.getBoundingClientRect();
+            const relativeX = evt.clientX - canvasRect.left;
+            const relativeY = evt.clientY - canvasRect.top;
+            if (!isRenameMode) {
+                setTop(relativeY);
+                setLeft(relativeX);
+            }
+
+
+        };
+        const onMouseUp = (evt: any) => {
+            setIsRenameMode(false);
+        }
 
 
         if (activeModule === "builder") {
             canvasElement.addEventListener("drop", onDrop);
             canvasElement.addEventListener("dragover", onDragOver);
+            canvasElement.addEventListener("mousemove", onMouseMove);
+            canvasElement.addEventListener("mouseup", onMouseUp);
         } else {
             if ((controls as CameraControls)) {
                 const target = (controls as CameraControls).getTarget(new THREE.Vector3());
@@ -288,8 +310,10 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         return () => {
             canvasElement.removeEventListener("drop", onDrop);
             canvasElement.removeEventListener("dragover", onDragOver);
+            canvasElement.removeEventListener("mousemove", onMouseMove);
+            canvasElement.removeEventListener("mouseup", onMouseUp);
         };
-    }, [selectedItem, camera, pointer, activeModule, controls]);
+    }, [selectedItem, camera, pointer, activeModule, controls, isRenameMode]);
 
     return (
         <Models />

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,

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<GLTF["scene"] | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(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<MouseEvent>) => {
         if (activeTool === "cursor" && subModule === 'simulations') {
@@ -247,6 +252,7 @@ function Model({ asset }: { readonly asset: Asset }) {
 
     return (
         <group
+            key={asset.modelUuid}
             name='Asset Model'
             ref={groupRef}
             uuid={asset.modelUuid}
@@ -266,7 +272,7 @@ function Model({ asset }: { readonly asset: Asset }) {
                     handleClick(asset);
                 }
             }}
-            onPointerOver={(e) => {
+            onPointerEnter={(e) => {
                 if (!toggleView) {
                     e.stopPropagation();
                     handlePointerOver(asset);

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<any>(); // 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<THREE.Mesh>(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}
                 />
             </Bvh>
@@ -290,6 +262,7 @@ export default function Builder() {
                 <MeasurementTool />
 
                 <CalculateAreaGroup />
+
                 <NavMesh lines={lines} />
 
                 <DxfFile

app/src/modules/builder/csg/csg.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { Geometry, Base, Subtraction } from "@react-three/csg";
-import { useDeleteTool } from "../../../store/builder/store";
 import { useRef } from "react";
+import { useToolMode } from "../../../store/builder/store";
 
 export interface CsgProps {
     position: THREE.Vector3 | [number, number, number];
@@ -11,19 +11,19 @@ export interface CsgProps {
 }
 
 export const Csg: React.FC<CsgProps> = (props) => {
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
     const modelRef = useRef<THREE.Object3D>();
     const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
 
     const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
-        if (modelRef.current && 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);
                 }
             });
         }

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);

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])

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) => {

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);
           }
         }
@@ -87,10 +87,10 @@ const FloorGroup = ({
       const canvasRect = canvasElement.getBoundingClientRect();
       const relativeX = evt.clientX - canvasRect.left;
       const relativeY = evt.clientY - canvasRect.top;
-      if (!isRenameMode) {
-        setTop(relativeY);
-        setLeft(relativeX);
-      }
+      // if (!isRenameMode) {
+      //   setTop(relativeY);
+      //   setLeft(relativeX);
+      // }
       if (isLeftMouseDown) {
         drag = true;
       }
@@ -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);
     }
   });

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);
         }
     })

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 (
         <>

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,

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) {