Refactor asset management and collaboration features

- Removed use of floor items from various components and replaced with asset management.
- Integrated asset selection and clearing logic in Models component.
- Updated SocketResponses to handle asset creation, updates, and deletions through collaboration.
- Simplified copy, paste, and duplication controls by removing floor item dependencies.
- Enhanced TransformControl to manage asset properties and synchronize with the backend.
- Deleted unused AddOrRemoveEventsInProducts component to streamline event handling.
- Updated Project component to initialize asset state instead of floor items.
- Added setName method to asset store for updating asset names.
This commit is contained in:
Jerald-Golden-B 2025-05-27 11:26:55 +05:30
parent f6f0478e9a
commit 25439fdd8c
20 changed files with 226 additions and 557 deletions

View File

@ -28,7 +28,7 @@ import {
useSaveVersion, useSaveVersion,
} from "../../../../store/builder/store"; } from "../../../../store/builder/store";
import CompareLayOut from "../../../ui/compareVersion/CompareLayOut"; import CompareLayOut from "../../../ui/compareVersion/CompareLayOut";
import {useToggleStore} from "../../../../store/useUIToggleStore"; import { useToggleStore } from "../../../../store/useUIToggleStore";
interface Event { interface Event {
modelName: string; modelName: string;
@ -179,11 +179,10 @@ const Simulations: React.FC = () => {
{products.map((product, index) => ( {products.map((product, index) => (
<div <div
key={product.productId} key={product.productId}
className={`list-item ${ className={`list-item ${selectedProduct.productId === product.productId
selectedProduct.productId === product.productId
? "active" ? "active"
: "" : ""
}`} }`}
> >
{/* eslint-disable-next-line */} {/* eslint-disable-next-line */}
<div <div

View File

@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
import List from "./List"; import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons"; import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect"; import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useFloorItems, useZones } from "../../../store/builder/store"; import { useZones } from "../../../store/builder/store";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
interface DropDownListProps { interface DropDownListProps {
value?: string; // Value to display in the DropDownList value?: string; // Value to display in the DropDownList
@ -50,7 +51,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
}; };
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]); const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
const { floorItems } = useFloorItems(); const { assets } = useAssetsStore();
const isPointInsidePolygon = ( const isPointInsidePolygon = (
point: [number, number], point: [number, number],
@ -80,7 +81,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
p[2], p[2],
]); ]);
const assetsInZone = floorItems const assetsInZone = assets
.filter((item: any) => { .filter((item: any) => {
const [x, , z] = item.position; const [x, , z] = item.position;
return isPointInsidePolygon([x, z], polygon2D as [number, number][]); return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
@ -100,7 +101,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
}); });
setZoneDataList(updatedZoneList); setZoneDataList(updatedZoneList);
}, [zones, floorItems]); }, [zones, assets]);
return ( return (
<div className="dropdown-list-container"> <div className="dropdown-list-container">
@ -143,7 +144,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
value="Buildings" value="Buildings"
showKebabMenu={false} showKebabMenu={false}
showAddIcon={false} showAddIcon={false}
// items={zoneDataList} // items={zoneDataList}
/> />
<DropDownList <DropDownList
value="Zones" value="Zones"

View File

@ -13,13 +13,13 @@ import {
RemoveIcon, RemoveIcon,
} from "../../icons/ExportCommonIcons"; } from "../../icons/ExportCommonIcons";
import { import {
useFloorItems,
useZoneAssetId, useZoneAssetId,
useZones, useZones,
} from "../../../store/builder/store"; } from "../../../store/builder/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import OuterClick from "../../../utils/outerClick"; import OuterClick from "../../../utils/outerClick";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
interface Asset { interface Asset {
id: string; id: string;
@ -49,8 +49,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>( const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{} {}
); );
const { setFloorItems } = useFloorItems();
const { setName } = useAssetsStore();
useEffect(() => { useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({ useSelectedZoneStore.getState().setSelectedZone({
@ -148,13 +148,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
newName newName
); );
// console.log("response: ", response); // console.log("response: ", response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) => setName(zoneAssetId.id, response.modelName);
floorItems.modelUuid === zoneAssetId.id
? { ...floorItems, modelName: response.modelName }
: floorItems
)
);
} }
} }
const checkZoneNameDuplicate = (name: string) => { const checkZoneNameDuplicate = (name: string) => {

View File

@ -94,8 +94,8 @@ async function handleModelLoad(
) { ) {
const model = gltf.scene.clone(); const model = gltf.scene.clone();
model.userData = { name: selectedItem.name, modelId: selectedItem.id, modelUuid: model.uuid }; model.userData = { name: selectedItem.name, modelId: selectedItem.id, modelUuid: model.uuid };
model.position.set(intersectPoint!.x, 3 + intersectPoint!.y, intersectPoint!.z); model.position.set(intersectPoint!.x, intersectPoint!.y, intersectPoint!.z);
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap); model.scale.set(...CONSTANTS.assetConfig.defaultScaleAfterGsap);
model.traverse((child: any) => { model.traverse((child: any) => {
if (child) { if (child) {

View File

@ -3,19 +3,30 @@ import { useEffect, useRef, useState } from 'react';
import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils'; import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { useFrame, useThree } from '@react-three/fiber'; import { ThreeEvent, useFrame, useThree } from '@react-three/fiber';
import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem } from '../../../../../store/builder/store'; import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem } from '../../../../../store/builder/store';
import { AssetBoundingBox } from '../../functions/assetBoundingBox'; import { AssetBoundingBox } from '../../functions/assetBoundingBox';
import { CameraControls, Detailed } from '@react-three/drei'; import { CameraControls } from '@react-three/drei';
import { useAssetsStore } from '../../../../../store/builder/useAssetStore'; import { useAssetsStore } from '../../../../../store/builder/useAssetStore';
import { useEventsStore } from "../../../../../store/simulation/useEventsStore"; import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore"; import { useProductStore } from "../../../../../store/simulation/useProductStore";
import { useSocketStore } from '../../../../../store/builder/store'; import { useSocketStore } from '../../../../../store/builder/store';
import useModuleStore, { useSubModuleStore } from '../../../../../store/useModuleStore';
import { useLeftData, useTopData } from '../../../../../store/visualization/useZone3DWidgetStore';
import { useSelectedAsset, useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
function Model({ asset }: { asset: Asset }) { function Model({ asset }: { asset: Asset }) {
const { camera, controls } = useThree(); const { camera, controls, gl } = useThree();
const { activeTool } = useActiveTool(); const { activeTool } = useActiveTool();
const { subModule } = useSubModuleStore();
const { activeModule } = useModuleStore();
const { removeAsset } = useAssetsStore(); const { removeAsset } = useAssetsStore();
const { setTop } = useTopData();
const { setLeft } = useLeftData();
const { getIsEventInProduct } = useProductStore();
const { getEventByModelUuid } = useEventsStore();
const { selectedProduct } = useSelectedProduct();
const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem(); const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
const { setSelectedFloorItem } = useSelectedFloorItem(); const { setSelectedFloorItem } = useSelectedFloorItem();
@ -101,7 +112,7 @@ function Model({ asset }: { asset: Asset }) {
const handleDblClick = (asset: Asset) => { const handleDblClick = (asset: Asset) => {
if (asset) { if (asset) {
if (activeTool === "cursor" && boundingBox && groupRef.current) { if (activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
const size = boundingBox.getSize(new THREE.Vector3()); const size = boundingBox.getSize(new THREE.Vector3());
const center = boundingBox.getCenter(new THREE.Vector3()); const center = boundingBox.getCenter(new THREE.Vector3());
@ -127,7 +138,6 @@ function Model({ asset }: { asset: Asset }) {
paddingRight: 5, paddingRight: 5,
}); });
setSelectedFloorItem(groupRef.current); setSelectedFloorItem(groupRef.current);
} }
} }
}; };
@ -137,7 +147,6 @@ function Model({ asset }: { asset: Asset }) {
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
//REST //REST
// const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName); // const response = await deleteFloorItem(organization, asset.modelUuid, asset.modelName);
@ -158,10 +167,6 @@ function Model({ asset }: { asset: Asset }) {
if (response) { if (response) {
const storedItems = JSON.parse(localStorage.getItem("FloorItems") || '[]');
const updatedStoredItems = storedItems.filter((item: { modelUuid: string }) => item.modelUuid !== asset.modelUuid);
localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
removeAsset(asset.modelUuid); removeAsset(asset.modelUuid);
echo.success("Model Removed!"); echo.success("Model Removed!");
@ -186,6 +191,45 @@ function Model({ asset }: { asset: Asset }) {
} }
} }
const handleContextMenu = (asset: Asset, evt: ThreeEvent<MouseEvent>) => {
if (activeTool === "cursor" && subModule === 'simulations') {
if (asset.modelUuid) {
const canvasElement = gl.domElement;
const isInProduct = getIsEventInProduct(selectedProduct.productId, asset.modelUuid);
if (isInProduct) {
const event = getEventByModelUuid(asset.modelUuid);
if (event) {
setSelectedAsset(event);
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = evt.clientX - canvasRect.left;
const relativeY = evt.clientY - canvasRect.top;
setTop(relativeY);
setLeft(relativeX);
} else {
clearSelectedAsset();
}
} else {
const event = getEventByModelUuid(asset.modelUuid);
if (event) {
setSelectedAsset(event)
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = evt.clientX - canvasRect.left;
const relativeY = evt.clientY - canvasRect.top;
setTop(relativeY);
setLeft(relativeX);
} else {
clearSelectedAsset()
}
}
} else {
clearSelectedAsset()
}
} else {
clearSelectedAsset()
}
}
return ( return (
<group <group
name='Asset Model' name='Asset Model'
@ -197,10 +241,10 @@ function Model({ asset }: { asset: Asset }) {
userData={asset} userData={asset}
onDoubleClick={(e) => { onDoubleClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleDblClick(asset);
}} }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleDblClick(asset);
handleClick(asset); handleClick(asset);
}} }}
onPointerOver={(e) => { onPointerOver={(e) => {
@ -211,6 +255,10 @@ function Model({ asset }: { asset: Asset }) {
e.stopPropagation(); e.stopPropagation();
handlePointerOut(asset); handlePointerOut(asset);
}} }}
onContextMenu={(e) => {
e.stopPropagation();
handleContextMenu(asset, e);
}}
> >
{gltfScene && ( {gltfScene && (
isRendered ? ( isRendered ? (

View File

@ -4,11 +4,13 @@ import { useThree } from '@react-three/fiber';
import { CameraControls } from '@react-three/drei'; import { CameraControls } from '@react-three/drei';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
import { useSelectedFloorItem } from '../../../../store/builder/store'; import { useSelectedFloorItem } from '../../../../store/builder/store';
import { useSelectedAsset } from '../../../../store/simulation/useSimulationStore';
function Models() { function Models() {
const { controls } = useThree(); const { controls } = useThree();
const { assets } = useAssetsStore(); const { assets } = useAssetsStore();
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
return ( return (
<group <group
@ -20,6 +22,9 @@ function Models() {
(controls as CameraControls).setTarget(target.x, 0, target.z, true); (controls as CameraControls).setTarget(target.x, 0, target.z, true);
setSelectedFloorItem(null); setSelectedFloorItem(null);
} }
if (selectedAsset) {
clearSelectedAsset();
}
}} }}
> >
{assets.map((asset) => {assets.map((asset) =>

View File

@ -7,7 +7,6 @@ import {
useSocketStore, useSocketStore,
useActiveLayer, useActiveLayer,
useWallItems, useWallItems,
useFloorItems,
useLayers, useLayers,
useUpdateScene, useUpdateScene,
useWalls, useWalls,
@ -32,6 +31,9 @@ import RemoveConnectedLines from "../../builder/geomentries/lines/removeConnecte
import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility"; import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility";
import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils"; import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
import { useEventsStore } from "../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../store/simulation/useProductStore";
export default function SocketResponses({ export default function SocketResponses({
floorPlanGroup, floorPlanGroup,
@ -53,13 +55,13 @@ export default function SocketResponses({
const { activeLayer, setActiveLayer } = useActiveLayer(); const { activeLayer, setActiveLayer } = useActiveLayer();
const { wallItems, setWallItems } = useWallItems(); const { wallItems, setWallItems } = useWallItems();
const { setLayers } = useLayers(); const { setLayers } = useLayers();
const { setFloorItems } = useFloorItems();
const { setUpdateScene } = useUpdateScene(); const { setUpdateScene } = useUpdateScene();
const { setWalls } = useWalls(); const { setWalls } = useWalls();
const { setDeletedLines } = useDeletedLines(); const { setDeletedLines } = useDeletedLines();
const { setNewLines } = useNewLines(); const { setNewLines } = useNewLines();
const { zones, setZones } = useZones(); const { zones, setZones } = useZones();
const { zonePoints, setZonePoints } = useZonePoints(); const { zonePoints, setZonePoints } = useZonePoints();
const { addAsset, updateAsset, removeAsset } = useAssetsStore();
useEffect(() => { useEffect(() => {
const email = localStorage.getItem("email"); const email = localStorage.getItem("email");
@ -95,235 +97,54 @@ export default function SocketResponses({
if (organization !== data.organization) { if (organization !== data.organization) {
return; return;
} }
console.log('data.data: ', data);
if (data.message === "Model created successfully") { if (data.message === "Model created successfully") {
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
);
loader.setDRACOLoader(dracoLoader);
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
try { try {
isTempLoader.current = true;
const cachedModel = THREE.Cache.get(data.data.modelName);
let url;
if (cachedModel) {
// console.log(`Getting ${data.data.modelName} from cache`);
const model = cachedModel.scene.clone();
model.uuid = data.data.modelUuid;
model.userData = {
name: data.data.modelName,
modelId: data.data.modelfileID,
modelUuid: data.data.modelUuid,
};
model.position.set(
...(data.data.position as [number, number, number])
);
model.rotation.set(
data.data.rotation.x,
data.data.rotation.y,
data.data.rotation.z
);
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
model.traverse((child: any) => { const asset: Asset = {
if (child.isMesh) { modelUuid: data.data.modelUuid,
// Clone the material to ensure changes are independent modelName: data.data.modelName,
// child.material = child.material.clone(); assetId: data.data.modelfileID,
position: data.data.position,
child.castShadow = true; rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
child.receiveShadow = true; isLocked: data.data.isLocked,
} isCollidable: false,
}); isVisible: data.data.isVisible,
opacity: 1,
itemsGroup.current.add(model);
if (tempLoader.current) {
tempLoader.current.material.dispose();
tempLoader.current.geometry.dispose();
itemsGroup.current.remove(tempLoader.current);
tempLoader.current = undefined;
}
const newFloorItem: Types.FloorItemType = {
modelUuid: data.data.modelUuid,
modelName: data.data.modelName,
modelfileID: data.data.modelfileID,
position: [...(data.data.position as [number, number, number])],
rotation: {
x: model.rotation.x,
y: model.rotation.y,
z: model.rotation.z,
},
isLocked: data.data.isLocked,
isVisible: data.data.isVisible,
};
setFloorItems((prevItems: any) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
gsap.to(model.position, {
y: data.data.position[1],
duration: 1.5,
ease: "power2.out",
});
gsap.to(model.scale, {
x: 1,
y: 1,
z: 1,
duration: 1.5,
ease: "power2.out",
onComplete: () => {
echo.success("Model Added!");
},
});
} else {
const indexedDBModel = await retrieveGLTF(data.data.modelName);
if (indexedDBModel) {
// console.log(`Getting ${data.data.modelName} from IndexedDB`);
url = URL.createObjectURL(indexedDBModel);
} else {
// console.log(`Getting ${data.data.modelName} from Backend`);
url = `${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`;
const modelBlob = await fetch(url).then((res) => res.blob());
await storeGLTF(data.data.modelfileID, modelBlob);
}
} }
if (url) { addAsset(asset);
loadModel(url);
} echo.success("Added model through collaboration");
} catch (error) { } catch (error) {
echo.error("Failed to update responce"); echo.error("Failed to create model through collaboration");
console.error("Error fetching asset model:", error);
}
function loadModel(url: string) {
loader.load(
url,
(gltf) => {
URL.revokeObjectURL(url);
THREE.Cache.remove(url);
const model = gltf.scene;
model.uuid = data.data.modelUuid;
model.userData = {
name: data.data.modelName,
modelId: data.data.modelfileID,
modelUuid: data.data.modelUuid,
};
model.position.set(
...(data.data.position as [number, number, number])
);
model.rotation.set(
data.data.rotation.x,
data.data.rotation.y,
data.data.rotation.z
);
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
model.traverse((child: any) => {
if (child.isMesh) {
// Clone the material to ensure changes are independent
// child.material = child.material.clone();
child.castShadow = true;
child.receiveShadow = true;
}
});
itemsGroup.current.add(model);
if (tempLoader.current) {
tempLoader.current.material.dispose();
tempLoader.current.geometry.dispose();
itemsGroup.current.remove(tempLoader.current);
tempLoader.current = undefined;
}
const newFloorItem: Types.FloorItemType = {
modelUuid: data.data.modelUuid,
modelName: data.data.modelName,
modelfileID: data.data.modelfileID,
position: [...(data.data.position as [number, number, number])],
rotation: {
x: model.rotation.x,
y: model.rotation.y,
z: model.rotation.z,
},
isLocked: data.data.isLocked,
isVisible: data.data.isVisible,
};
setFloorItems((prevItems: any) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem(
"FloorItems",
JSON.stringify(updatedItems)
);
return updatedItems;
});
gsap.to(model.position, {
y: data.data.position[1],
duration: 1.5,
ease: "power2.out",
});
gsap.to(model.scale, {
x: 1,
y: 1,
z: 1,
duration: 1.5,
ease: "power2.out",
onComplete: () => {
echo.success("Model Added!");
},
});
THREE.Cache.add(data.data.modelName, gltf);
}
);
} }
} else if (data.message === "Model updated successfully") { } else if (data.message === "Model updated successfully") {
itemsGroup.current?.children.forEach((item: THREE.Group) => { try {
if (item.uuid === data.data.modelUuid) {
item.position.set(
...(data.data.position as [number, number, number])
);
item.rotation.set(
data.data.rotation.x,
data.data.rotation.y,
data.data.rotation.z
);
}
});
setFloorItems((prevItems: Types.FloorItems) => { const asset: Asset = {
if (!prevItems) { modelUuid: data.data.modelUuid,
return; modelName: data.data.modelName,
assetId: data.data.modelfileID,
position: data.data.position,
rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
isLocked: data.data.isLocked,
isCollidable: false,
isVisible: data.data.isVisible,
opacity: 1,
} }
let updatedItem: any = null;
const updatedItems = prevItems.map((item) => { updateAsset(asset.modelUuid, {
if (item.modelUuid === data.data.modelUuid) { position: asset.position,
updatedItem = { rotation: asset.rotation,
...item,
position: [...data.data.position] as [number, number, number],
rotation: {
x: data.data.rotation.x,
y: data.data.rotation.y,
z: data.data.rotation.z,
},
};
return updatedItem;
}
return item;
}); });
return updatedItems;
}); echo.success("Updated model through collaboration");
} catch (error) {
echo.error("Failed to update model through collaboration");
}
} else {
echo.error("Failed executing action from collaboration");
} }
}); });
@ -335,28 +156,18 @@ export default function SocketResponses({
return; return;
} }
if (data.message === "Model deleted successfully") { if (data.message === "Model deleted successfully") {
const deletedUUID = data.data.modelUuid; try {
let items = JSON.parse(localStorage.getItem("FloorItems")!); const deletedUUID = data.data.modelUuid;
const updatedItems = items.filter( useEventsStore.getState().removeEvent(deletedUUID);
(item: { modelUuid: string }) => item.modelUuid !== deletedUUID useProductStore.getState().deleteEvent(deletedUUID);
);
const storedItems = JSON.parse( removeAsset(deletedUUID);
localStorage.getItem("FloorItems") || "[]"
);
const updatedStoredItems = storedItems.filter(
(item: { modelUuid: string }) => item.modelUuid !== deletedUUID
);
localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
itemsGroup.current.children.forEach((item: any) => { echo.success("Model Removed successfully through collaboration");
if (item.uuid === deletedUUID) { } catch (error) {
itemsGroup.current.remove(item); echo.error("Failed to remove model through collaboration");
} }
});
setFloorItems(updatedItems);
echo.success("Model Removed!");
} }
}); });

View File

@ -1,7 +1,7 @@
import * as THREE from "three"; import * as THREE from "three";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store"; import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
@ -25,10 +25,9 @@ const CopyPasteControls = ({
const { toggleView } = useToggleView(); const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets(); const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { addEvent } = useEventsStore(); const { addEvent } = useEventsStore();
const { addAsset } = useAssetsStore(); const { assets, addAsset } = useAssetsStore();
useEffect(() => { useEffect(() => {
if (!camera || !scene || toggleView) return; if (!camera || !scene || toggleView) return;
@ -77,7 +76,7 @@ const CopyPasteControls = ({
canvasElement.removeEventListener("keydown", onKeyDown); canvasElement.removeEventListener("keydown", onKeyDown);
}; };
}, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, movedObjects, socket, floorItems, rotatedObjects]); }, [assets, camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, movedObjects, socket, rotatedObjects]);
useFrame(() => { useFrame(() => {
if (pastedObjects.length > 0) { if (pastedObjects.length > 0) {
@ -145,6 +144,9 @@ const CopyPasteControls = ({
const addPastedObjects = () => { const addPastedObjects = () => {
if (pastedObjects.length === 0) return; if (pastedObjects.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
pastedObjects.forEach(async (obj: THREE.Object3D) => { pastedObjects.forEach(async (obj: THREE.Object3D) => {
if (obj) { if (obj) {
const worldPosition = new THREE.Vector3(); const worldPosition = new THREE.Vector3();
@ -329,15 +331,6 @@ const CopyPasteControls = ({
newFloorItem.eventData = eventData; newFloorItem.eventData = eventData;
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
//REST //REST
// await setFloorItemApi( // await setFloorItemApi(
@ -391,14 +384,6 @@ const CopyPasteControls = ({
addAsset(asset); addAsset(asset);
} else { } else {
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
//REST //REST

View File

@ -1,7 +1,7 @@
import * as THREE from "three"; import * as THREE from "three";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store"; import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
@ -23,10 +23,9 @@ const DuplicationControls = ({
const { toggleView } = useToggleView(); const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets(); const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { addEvent } = useEventsStore(); const { addEvent } = useEventsStore();
const { addAsset } = useAssetsStore(); const { assets, addAsset } = useAssetsStore();
useEffect(() => { useEffect(() => {
if (!camera || !scene || toggleView) return; if (!camera || !scene || toggleView) return;
@ -72,7 +71,7 @@ const DuplicationControls = ({
canvasElement.removeEventListener("keydown", onKeyDown); canvasElement.removeEventListener("keydown", onKeyDown);
}; };
}, [camera, controls, scene, toggleView, selectedAssets, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects]); }, [assets, camera, controls, scene, toggleView, selectedAssets, duplicatedObjects, movedObjects, socket, rotatedObjects]);
useFrame(() => { useFrame(() => {
if (duplicatedObjects.length > 0) { if (duplicatedObjects.length > 0) {
@ -120,6 +119,9 @@ const DuplicationControls = ({
const addDuplicatedAssets = () => { const addDuplicatedAssets = () => {
if (duplicatedObjects.length === 0) return; if (duplicatedObjects.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
duplicatedObjects.forEach(async (obj: THREE.Object3D) => { duplicatedObjects.forEach(async (obj: THREE.Object3D) => {
if (obj) { if (obj) {
const worldPosition = new THREE.Vector3(); const worldPosition = new THREE.Vector3();
@ -303,15 +305,6 @@ const DuplicationControls = ({
newFloorItem.eventData = eventData; newFloorItem.eventData = eventData;
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
//REST //REST
// await setFloorItemApi( // await setFloorItemApi(
@ -358,14 +351,6 @@ const DuplicationControls = ({
addAsset(asset); addAsset(asset);
} else { } else {
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
//REST //REST

View File

@ -2,7 +2,6 @@ import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { import {
useFloorItems,
useSelectedAssets, useSelectedAssets,
useSocketStore, useSocketStore,
useToggleView, useToggleView,

View File

@ -1,7 +1,7 @@
import * as THREE from "three"; import * as THREE from "three";
import { useEffect, useMemo, useRef } from "react"; import { useEffect, useMemo, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store"; import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import { useEventsStore } from "../../../../store/simulation/useEventsStore"; import { useEventsStore } from "../../../../store/simulation/useEventsStore";

View File

@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox"; import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
import { SelectionHelper } from "./selectionHelper"; import { SelectionHelper } from "./selectionHelper";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store"; import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store";
import BoundingBox from "./boundingBoxHelper"; import BoundingBox from "./boundingBoxHelper";
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";

View File

@ -1,6 +1,6 @@
import { TransformControls } from "@react-three/drei"; import { TransformControls } from "@react-three/drei";
import * as THREE from "three"; import * as THREE from "three";
import { useSelectedFloorItem, useObjectPosition, useObjectRotation, useFloorItems, useActiveTool, useSocketStore } from "../../../../store/builder/store"; import { useSelectedFloorItem, useObjectPosition, useObjectRotation, useActiveTool, useSocketStore } from "../../../../store/builder/store";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import * as Types from '../../../../types/world/worldTypes'; import * as Types from '../../../../types/world/worldTypes';
@ -11,6 +11,7 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore"; import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi"; import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
export default function TransformControl() { export default function TransformControl() {
const state = useThree(); const state = useThree();
@ -18,10 +19,10 @@ export default function TransformControl() {
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem(); const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { setObjectPosition } = useObjectPosition(); const { setObjectPosition } = useObjectPosition();
const { setObjectRotation } = useObjectRotation(); const { setObjectRotation } = useObjectRotation();
const { setFloorItems } = useFloorItems();
const { activeTool } = useActiveTool(); const { activeTool } = useActiveTool();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { selectedProduct } = useSelectedProduct(); const { selectedProduct } = useSelectedProduct();
const { updateAsset, getAssetById } = useAssetsStore();
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
@ -60,97 +61,76 @@ export default function TransformControl() {
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z), z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
}); });
} }
setFloorItems((prevItems: Types.FloorItems) => { const asset = getAssetById(selectedFloorItem?.uuid);
if (!prevItems) { if (asset) {
return if (asset.eventData) {
} const eventData = useEventsStore.getState().getEventByModelUuid(asset.modelUuid);
let updatedItem: any = null; const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productId, asset.modelUuid);
const updatedItems = prevItems.map((item) => {
if (item.modelUuid === selectedFloorItem?.uuid) { if (eventData) {
updatedItem = { useEventsStore.getState().updateEvent(asset.modelUuid, {
...item,
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number], 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 }, rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
}; });
return updatedItem;
} }
return item;
});
if (updatedItem && selectedFloorItem) {
if (updatedItem.eventData) {
const eventData = useEventsStore.getState().getEventByModelUuid(updatedItem.modelUuid);
const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productId, updatedItem.modelUuid);
if (eventData) { if (productData) {
useEventsStore.getState().updateEvent(updatedItem.modelUuid, { const event = useProductStore
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z], .getState()
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z], .updateEvent(
}); selectedProduct.productId,
} asset.modelUuid,
{
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
}
);
if (productData) { if (event) {
const event = useProductStore updateBackend(
.getState() selectedProduct.productName,
.updateEvent( selectedProduct.productId,
selectedProduct.productId, organization,
updatedItem.modelUuid, event
{ );
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z],
}
);
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
updatedItem.eventData = eventData;
} }
} }
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), updatedItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
// REST
// setFloorItemApi(
// organization,
// updatedItem.modelUuid,
// updatedItem.modelName,
// updatedItem.modelfileid,
// [selectedFloorItem.position.x, 0, selectedFloorItem.position.z,],
// { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
// false,
// true,
// );
// SOCKET
const data = {
organization: organization,
modelUuid: updatedItem.modelUuid,
modelName: updatedItem.modelName,
modelfileID: updatedItem.modelfileID,
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
isLocked: false,
isVisible: true,
socketId: socket.id
}
socket.emit("v2:model-asset:add", data);
} }
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems; updateAsset(asset.modelUuid, {
}); position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z] as [number, number, number],
});
//REST
// await setFloorItemApi(
// organization,
// asset.modelUuid,
// asset.modelName,
// [selectedFloorItem.position.x, 0, selectedFloorItem.position.z,
// { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
// asset.assetId,
// false,
// true,
// );
//SOCKET
const data = {
organization,
modelUuid: asset.modelUuid,
modelName: asset.modelName,
modelfileID: 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,
isVisible: true,
socketId: socket.id,
};
socket.emit("v2:model-asset:add", data);
}
} }
useEffect(() => { useEffect(() => {

View File

@ -6,7 +6,6 @@ import {
useElevation, useElevation,
useShadows, useShadows,
useSunPosition, useSunPosition,
useFloorItems,
useWallItems, useWallItems,
useTileDistance, useTileDistance,
} from "../../../store/builder/store"; } from "../../../store/builder/store";
@ -26,14 +25,13 @@ export default function Shadows() {
const { controls, gl } = useThree(); const { controls, gl } = useThree();
const { elevation, setElevation } = useElevation(); const { elevation, setElevation } = useElevation();
const { azimuth, setAzimuth } = useAzimuth(); const { azimuth, setAzimuth } = useAzimuth();
const { floorItems } = useFloorItems();
const { wallItems } = useWallItems(); const { wallItems } = useWallItems();
const { planeValue } = useTileDistance(); const { planeValue } = useTileDistance();
useEffect(() => { useEffect(() => {
gl.shadowMap.enabled = true; gl.shadowMap.enabled = true;
gl.shadowMap.type = THREE.PCFShadowMap; gl.shadowMap.type = THREE.PCFShadowMap;
}, [gl, floorItems, wallItems]); }, [gl, wallItems]);
useEffect(() => { useEffect(() => {
if (lightRef.current && targetRef.current) { if (lightRef.current && targetRef.current) {

View File

@ -28,7 +28,7 @@ export const handleAddEventToProduct = ({
organization: organization, organization: organization,
eventDatas: event eventDatas: event
}).then((data) => { }).then((data) => {
// console.log(data); console.log(data);
}) })
if (clearSelectedAsset) { if (clearSelectedAsset) {

View File

@ -1,135 +0,0 @@
import { useThree } from '@react-three/fiber'
import { useEffect } from 'react'
import { Object3D } from 'three';
import { useSubModuleStore } from '../../../../store/useModuleStore';
import { useLeftData, useTopData } from '../../../../store/visualization/useZone3DWidgetStore';
import { useEventsStore } from '../../../../store/simulation/useEventsStore';
import { useProductStore } from '../../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
import { useSelectedAsset } from '../../../../store/simulation/useSimulationStore';
function AddOrRemoveEventsInProducts() {
const { gl, raycaster, scene } = useThree();
const { subModule } = useSubModuleStore();
const { setTop } = useTopData();
const { setLeft } = useLeftData();
const { getIsEventInProduct } = useProductStore();
const { getEventByModelUuid } = useEventsStore();
const { selectedProduct } = useSelectedProduct();
const { selectedAsset, setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
useEffect(() => {
const canvasElement = gl.domElement;
let drag = false;
let isRightMouseDown = false;
const onMouseDown = (evt: MouseEvent) => {
if (selectedAsset) {
clearSelectedAsset();
}
if (evt.button === 2) {
isRightMouseDown = true;
drag = false;
}
};
const onMouseUp = (evt: MouseEvent) => {
if (evt.button === 2) {
isRightMouseDown = false;
}
}
const onMouseMove = () => {
if (isRightMouseDown) {
drag = true;
}
};
const handleRightClick = (evt: MouseEvent) => {
if (drag) return;
evt.preventDefault();
const canvasElement = gl.domElement;
if (!canvasElement) return;
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.name.includes("agv-collider") &&
!(intersect.object.type === "GridHelper") &&
!(intersect.object?.parent?.name.includes('zones')) &&
!(intersect.object?.parent?.name.includes('Zone'))
);
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
let currentObject = intersects[0].object;
while (currentObject) {
if (currentObject.name === "Scene") {
break;
}
currentObject = currentObject.parent as Object3D;
}
if (currentObject) {
const isInProduct = getIsEventInProduct(selectedProduct.productId, currentObject.uuid);
if (isInProduct) {
const event = getEventByModelUuid(currentObject.uuid);
if (event) {
setSelectedAsset(event)
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = evt.clientX - canvasRect.left;
const relativeY = evt.clientY - canvasRect.top;
setTop(relativeY);
setLeft(relativeX);
} else {
clearSelectedAsset()
}
} else {
const event = getEventByModelUuid(currentObject.uuid);
if (event) {
setSelectedAsset(event)
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = evt.clientX - canvasRect.left;
const relativeY = evt.clientY - canvasRect.top;
setTop(relativeY);
setLeft(relativeX);
} else {
clearSelectedAsset()
}
}
}
} else {
clearSelectedAsset()
}
};
if (subModule === 'simulations') {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
canvasElement.addEventListener('contextmenu', handleRightClick);
}
return () => {
canvasElement.removeEventListener("mousedown", onMouseDown);
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
canvasElement.removeEventListener('contextmenu', handleRightClick);
};
}, [gl, subModule, selectedProduct, selectedAsset]);
return (
<></>
)
}
export default AddOrRemoveEventsInProducts

View File

@ -2,7 +2,6 @@ import * as THREE from 'three';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useProductStore } from '../../../store/simulation/useProductStore'; import { useProductStore } from '../../../store/simulation/useProductStore';
import { useSelectedProduct } from '../../../store/simulation/useSimulationStore'; import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts';
import { upsertProductOrEventApi } from '../../../services/simulation/products/UpsertProductOrEventApi'; import { upsertProductOrEventApi } from '../../../services/simulation/products/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../services/simulation/products/getallProductsApi'; import { getAllProductsApi } from '../../../services/simulation/products/getallProductsApi';
import { useVehicleStore } from '../../../store/simulation/useVehicleStore'; import { useVehicleStore } from '../../../store/simulation/useVehicleStore';
@ -127,8 +126,6 @@ function Products() {
return ( return (
<> <>
<AddOrRemoveEventsInProducts />
</> </>
) )
} }

View File

@ -7,7 +7,6 @@ import RealTimeVisulization from "../modules/visualization/RealTimeVisulization"
import Tools from "../components/ui/Tools"; import Tools from "../components/ui/Tools";
import { import {
useSocketStore, useSocketStore,
useFloorItems,
useOrganization, useOrganization,
useUserName, useUserName,
useWallItems, useWallItems,
@ -34,10 +33,11 @@ import Footer from "../components/footer/Footer";
import SelectFloorPlan from "../components/temporary/SelectFloorPlan"; import SelectFloorPlan from "../components/temporary/SelectFloorPlan";
import ControlsPlayer from "../components/layout/controls/ControlsPlayer"; import ControlsPlayer from "../components/layout/controls/ControlsPlayer";
import CompareLayOut from "../components/ui/compareVersion/CompareLayOut"; import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
import {useToggleStore} from "../store/useUIToggleStore"; import { useToggleStore } from "../store/useUIToggleStore";
import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import RegularDropDown from "../components/ui/inputs/RegularDropDown";
import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import { useAssetsStore } from "../store/builder/useAssetStore";
const Project: React.FC = () => { const Project: React.FC = () => {
let navigate = useNavigate(); let navigate = useNavigate();
@ -46,9 +46,9 @@ const Project: React.FC = () => {
const { activeModule, setActiveModule } = useModuleStore(); const { activeModule, setActiveModule } = useModuleStore();
const { loadingProgress } = useLoadingProgress(); const { loadingProgress } = useLoadingProgress();
const { setAssets } = useAssetsStore();
const { setUserName } = useUserName(); const { setUserName } = useUserName();
const { setOrganization } = useOrganization(); const { setOrganization } = useOrganization();
const { setFloorItems } = useFloorItems();
const { setWallItems } = useWallItems(); const { setWallItems } = useWallItems();
const { setZones } = useZones(); const { setZones } = useZones();
const { isVersionSaved } = useSaveVersion(); const { isVersionSaved } = useSaveVersion();
@ -61,7 +61,7 @@ const Project: React.FC = () => {
}, [isVersionSaved]); }, [isVersionSaved]);
useEffect(() => { useEffect(() => {
setFloorItems([]); setAssets([]);
setWallItems([]); setWallItems([]);
setZones([]); setZones([]);
setActiveModule("builder"); setActiveModule("builder");

View File

@ -155,15 +155,6 @@ export const useDeletePointOrLine = create<any>((set: any) => ({
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
})); }));
export const useFloorItems = create<any>((set: any) => ({
floorItems: null,
setFloorItems: (callback: any) =>
set((state: any) => ({
floorItems:
typeof callback === "function" ? callback(state.floorItems) : callback,
})),
}));
export const useWallItems = create<any>((set: any) => ({ export const useWallItems = create<any>((set: any) => ({
wallItems: [], wallItems: [],
setWallItems: (callback: any) => setWallItems: (callback: any) =>

View File

@ -11,6 +11,7 @@ interface AssetsStore {
setAssets: (assets: Assets) => void; setAssets: (assets: Assets) => void;
// Asset properties // Asset properties
setName: (modelUuid: string, newName: string) => void;
setPosition: (modelUuid: string, position: [number, number, number]) => void; setPosition: (modelUuid: string, position: [number, number, number]) => void;
setRotation: (modelUuid: string, rotation: [number, number, number]) => void; setRotation: (modelUuid: string, rotation: [number, number, number]) => void;
setLock: (modelUuid: string, isLocked: boolean) => void; setLock: (modelUuid: string, isLocked: boolean) => void;
@ -70,6 +71,15 @@ export const useAssetsStore = create<AssetsStore>()(
}, },
// Asset properties // Asset properties
setName: (modelUuid, newName) => {
set((state) => {
const asset = state.assets.find(a => a.modelUuid === modelUuid);
if (asset) {
asset.modelName = newName;
}
});
},
setPosition: (modelUuid, position) => { setPosition: (modelUuid, position) => {
set((state) => { set((state) => {
const asset = state.assets.find(a => a.modelUuid === modelUuid); const asset = state.assets.find(a => a.modelUuid === modelUuid);