store optimization

app/src/components/layout/scenes/MainScene.tsx

@@ -3,7 +3,6 @@ import {
     useLoadingProgress,
     useRenameModeStore,
     useSaveVersion,
-    useSelectedAssets,
     useSelectedComment,
     useSocketStore,
     useWidgetSubOption,
@@ -56,10 +55,9 @@ function MainScene() {
     const { setFloatingWidget } = useFloatingWidget();
     const { clearComparisonProduct } = useComparisonProduct();
     const { selectedFloorAsset, setSelectedFloorAsset } = useBuilderStore();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const { assetStore, productStore } = useSceneContext();
     const { products } = productStore();
-    const { setName } = assetStore();
+    const { setName, selectedAssets, setSelectedAssets } = assetStore();
     const { projectId } = useParams()
     const { isRenameMode, setIsRenameMode } = useRenameModeStore();
     const { versionHistory } = useVersionHistoryStore();

app/src/modules/builder/asset/models/model/model.tsx

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { useEffect, useRef, useState } from 'react';
 import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { useSelectedAssets, useToggleView, useToolMode } from '../../../../../store/builder/store';
+import { useToggleView, useToolMode } from '../../../../../store/builder/store';
 import { AssetBoundingBox } from '../../functions/assetBoundingBox';
 import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
 import useModuleStore from '../../../../../store/useModuleStore';
@@ -20,14 +20,13 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
     const { toggleView } = useToggleView();
     const { activeModule } = useModuleStore();
     const { assetStore } = useSceneContext();
-    const { resetAnimation } = assetStore();
+    const { resetAnimation, selectedAssets } = assetStore();
     const { setDeletableFloorAsset, selectedFloorAsset, setSelectedFloorAsset } = useBuilderStore();
     const [gltfScene, setGltfScene] = useState<GLTF["scene"] | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const [isSelected, setIsSelected] = useState(false);
     const groupRef = useRef<THREE.Group>(null);
     const [fieldData, setFieldData] = useState<any>();
-    const { selectedAssets } = useSelectedAssets();
 
     useEffect(() => {
         if (!fieldData && asset.eventData) {

app/src/modules/scene/controls/contextControls/contextControls.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { useThree } from "@react-three/fiber";
 import { CameraControls, Html, ScreenSpace } from "@react-three/drei";
-import { useContextActionStore, useRenameModeStore, useSelectedAssets, useToggleView, useToolMode, } from "../../../../store/builder/store";
+import { useContextActionStore, useRenameModeStore, useToggleView, useToolMode, } from "../../../../store/builder/store";
 import ContextMenu from "../../../../components/ui/menu/contextMenu";
 import useModuleStore from "../../../../store/useModuleStore";
+import { useSceneContext } from "../../sceneContext";
 
 function ContextControls() {
     const { gl, controls } = useThree();
@@ -27,7 +28,8 @@ function ContextControls() {
     const { toggleView } = useToggleView();
     const { activeModule } = useModuleStore();
     const { toolMode } = useToolMode();
-    const { selectedAssets } = useSelectedAssets();
+    const { assetStore } = useSceneContext();
+    const { selectedAssets, movedObjects, rotatedObjects, duplicatedObjects, copiedObjects } = assetStore();
     const { setContextAction } = useContextActionStore();
     const { setIsRenameMode } = useRenameModeStore();
     const rightDrag = useRef(false);
@@ -112,7 +114,10 @@ function ContextControls() {
             if (rightDrag.current) return;
             if (selectedAssets.length > 0) {
                 setMenuPosition({ x: event.clientX - gl.domElement.width / 2, y: event.clientY - gl.domElement.height / 2, });
-                setCanRender(true);
+                setTimeout(() => {
+                    setCanRender(true);
+                }, 0)
+
                 if (controls) {
                     (controls as CameraControls).enabled = false;
                 }
@@ -124,7 +129,7 @@ function ContextControls() {
             }
         };
 
-        if (selectedAssets.length > 0 && !toggleView && activeModule === "builder" && toolMode === 'cursor') {
+        if (selectedAssets.length > 0 && !toggleView && activeModule === "builder" && toolMode === 'cursor' && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0 && copiedObjects.length === 0) {
             canvasElement.addEventListener("pointerdown", onPointerDown);
             canvasElement.addEventListener("pointermove", onPointerMove);
             canvasElement.addEventListener("pointerup", onPointerUp);
@@ -143,7 +148,7 @@ function ContextControls() {
             canvasElement.removeEventListener("pointerup", onPointerUp);
             canvasElement.removeEventListener("contextmenu", handleContextClick);
         };
-    }, [controls, gl, selectedAssets, toggleView, activeModule, toolMode]);
+    }, [controls, gl, selectedAssets, toggleView, activeModule, toolMode, duplicatedObjects, movedObjects, rotatedObjects, copiedObjects]);
 
     const handleAssetRename = () => {
         setCanRender(false);

app/src/modules/scene/controls/selectionControls/selection3D/boundingBoxHelper3D.tsx

@@ -1,7 +1,7 @@
-import { Line } from "@react-three/drei";
-import { useMemo } from "react";
 import * as THREE from "three";
-import { useSelectedAssets } from "../../../../../store/builder/store";
+import { useMemo } from "react";
+import { Line } from "@react-three/drei";
+import { useSceneContext } from "../../../sceneContext";
 
 interface BoundingBoxProps {
     boundingBoxRef?: any;
@@ -26,7 +26,8 @@ const getBoxLines = (min: THREE.Vector3, max: THREE.Vector3) => [
 ];
 
 const BoundingBox = ({ boundingBoxRef, isPerAsset = true }: BoundingBoxProps) => {
-    const { selectedAssets } = useSelectedAssets();
+    const { assetStore } = useSceneContext();
+    const { selectedAssets } = assetStore();
     const savedTheme: string = localStorage.getItem("theme") || "light";
 
     const boxes = useMemo(() => {

app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx

@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { SkeletonUtils } from "three-stdlib";
-import { useContextActionStore, useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
+import { useContextActionStore, useSocketStore, useToggleView } from "../../../../../store/builder/store";
 import * as Types from "../../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
@@ -15,14 +15,13 @@ import { useVersionContext } from "../../../../builder/version/versionContext";
 const CopyPasteControls3D = () => {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
     const { toggleView } = useToggleView();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const { socket } = useSocketStore();
     const { assetStore, eventStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
     const { addEvent } = eventStore();
     const { projectId } = useParams();
-    const { assets, addAsset, updateAsset, removeAsset, getAssetById, copiedObjects, setCopiedObjects, pastedObjects, setPastedObjects, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects } = assetStore();
+    const { assets, addAsset, updateAsset, removeAsset, getAssetById, selectedAssets, setSelectedAssets, copiedObjects, setCopiedObjects, pastedObjects, setPastedObjects, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { userId, organization } = getUserData();

app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx

@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { SkeletonUtils } from "three-stdlib";
-import { useContextActionStore, useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
+import { useContextActionStore, useSocketStore, useToggleView } from "../../../../../store/builder/store";
 import * as Types from "../../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
@@ -16,14 +16,13 @@ import { handleAssetPositionSnap } from "./functions/handleAssetPositionSnap";
 const DuplicationControls3D = () => {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
     const { toggleView } = useToggleView();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const { socket } = useSocketStore();
     const { assetStore, eventStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
     const { addEvent } = eventStore();
     const { projectId } = useParams();
-    const { assets, addAsset, updateAsset, removeAsset, getAssetById, duplicatedObjects, setDuplicatedObjects, setPastedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects } = assetStore();
+    const { assets, addAsset, updateAsset, removeAsset, getAssetById, selectedAssets, setSelectedAssets, duplicatedObjects, setDuplicatedObjects, setPastedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { userId, organization } = getUserData();

app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useContextActionStore, useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
+import { useContextActionStore, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
 import * as Types from "../../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
 import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
@@ -23,7 +23,6 @@ function MoveControls3D({ boundingBoxRef }: any) {
     const { toggleView } = useToggleView();
     const { toolMode } = useToolMode();
     const { activeModule } = useModuleStore();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { socket } = useSocketStore();
@@ -31,7 +30,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
     const { projectId } = useParams();
     const { assetStore, eventStore, productStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
-    const { updateAsset, getAssetById, movedObjects, setMovedObjects, pastedObjects, setPastedObjects, duplicatedObjects, setDuplicatedObjects, rotatedObjects, setRotatedObjects } = assetStore();
+    const { updateAsset, getAssetById, selectedAssets, setSelectedAssets, movedObjects, setMovedObjects, pastedObjects, setPastedObjects, duplicatedObjects, setDuplicatedObjects, rotatedObjects, setRotatedObjects } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
 

app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useContextActionStore, useSelectedAssets, useSocketStore, useToggleView, useToolMode } from "../../../../../store/builder/store";
+import { useContextActionStore, useSocketStore, useToggleView, useToolMode } from "../../../../../store/builder/store";
 import * as Types from "../../../../../types/world/worldTypes";
 import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useParams } from "react-router-dom";
@@ -21,7 +21,6 @@ function RotateControls3D() {
     const { toggleView } = useToggleView();
     const { toolMode } = useToolMode();
     const { activeModule } = useModuleStore();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { socket } = useSocketStore();
@@ -29,7 +28,7 @@ function RotateControls3D() {
     const { projectId } = useParams();
     const { assetStore, eventStore, productStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
-    const { updateAsset, rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, pastedObjects, setPastedObjects, duplicatedObjects, setDuplicatedObjects } = assetStore();
+    const { updateAsset, rotatedObjects, setRotatedObjects, selectedAssets, setSelectedAssets, movedObjects, setMovedObjects, pastedObjects, setPastedObjects, duplicatedObjects, setDuplicatedObjects } = assetStore();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
 

app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx

@@ -10,7 +10,7 @@ import { getUserData } from "../../../../../functions/getUserData";
 import { useSceneContext } from "../../../sceneContext";
 import { useVersionContext } from "../../../../builder/version/versionContext";
 import { useProductContext } from "../../../../simulation/products/productContext";
-import { useContextActionStore, useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
+import { useContextActionStore, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
 import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
 import DuplicationControls3D from "./duplicationControls3D";
 import CopyPasteControls3D from "./copyPasteControls3D";
@@ -26,14 +26,13 @@ const SelectionControls3D: React.FC = () => {
     const { toggleView } = useToggleView();
     const { activeModule } = useModuleStore();
     const { toolMode } = useToolMode();
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const boundingBoxRef = useRef<THREE.Mesh>();
     const { socket } = useSocketStore();
     const { contextAction, setContextAction } = useContextActionStore()
     const { assetStore, eventStore, productStore, undoRedo3DStore } = useSceneContext();
     const { selectedDecal, selectedWall, selectedAisle, selectedFloor, selectedFloorAsset, selectedWallAsset } = useBuilderStore();
     const { push3D } = undoRedo3DStore();
-    const { removeAsset, getAssetById, movedObjects, rotatedObjects, copiedObjects, pastedObjects, duplicatedObjects, setPastedObjects, setDuplicatedObjects } = assetStore();
+    const { removeAsset, getAssetById, selectedAssets, setSelectedAssets, movedObjects, rotatedObjects, copiedObjects, pastedObjects, duplicatedObjects, setPastedObjects, setDuplicatedObjects } = assetStore();
     const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();

app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { useThree } from '@react-three/fiber';
 import { TransformControls } from '@react-three/drei';
-import { useSelectedAssets, useSocketStore, useToolMode } from '../../../../../store/builder/store';
+import { useSocketStore, useToolMode } from '../../../../../store/builder/store';
 import { useProductContext } from '../../../../simulation/products/productContext';
 import { useVersionContext } from '../../../../builder/version/versionContext';
 import { useSceneContext } from '../../../sceneContext';
@@ -14,7 +14,6 @@ import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModi
 // import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 
 function TransformControls3D() {
-    const { selectedAssets, setSelectedAssets } = useSelectedAssets();
     const { toolMode } = useToolMode();
     const { camera, scene, gl } = useThree();
     const transformControlsRef = useRef<any>(null);
@@ -25,7 +24,7 @@ function TransformControls3D() {
     const { selectedProduct } = selectedProductStore();
     const { assetStore, eventStore, productStore, undoRedo3DStore } = useSceneContext();
     const { push3D, subscribeUndoRedo } = undoRedo3DStore();
-    const { updateAsset, getAssetById } = assetStore();
+    const { updateAsset, getAssetById, selectedAssets, setSelectedAssets } = assetStore();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();

app/src/modules/scene/postProcessing/outlineInstances/outlineInstances.tsx

@@ -41,7 +41,6 @@ function OutlineInstances() {
                 key="selectedAisle"
                 selection={selectedAisle?.aisleMesh && flattenChildren(selectedAisle.aisleMesh.children)}
                 color={CONSTANTS.outlineConfig.assetSelectColor}
-                xRay={false}
             />
             <OutlineInstance
                 key="selectedWall"

app/src/store/builder/store.ts

@@ -128,16 +128,6 @@ export const useNavMesh = create<any>((set: any) => ({
     setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
-type SelectedAssetsState = {
-    selectedAssets: Object3D[];
-    setSelectedAssets: (assets: Object3D[]) => void;
-};
-
-export const useSelectedAssets = create<SelectedAssetsState>((set) => ({
-    selectedAssets: [],
-    setSelectedAssets: (assets) => set({ selectedAssets: assets }),
-}));
-
 export const useLayers = create<any>((set: any) => ({
     Layers: 1,
     setLayers: (x: any) => set(() => ({ Layers: x })),

app/src/store/builder/useAssetStore.ts

@@ -4,6 +4,7 @@ import { immer } from 'zustand/middleware/immer';
 
 interface AssetsStore {
     assets: Assets;
+    selectedAssets: Object3D[];
     movedObjects: Object3D[];
     rotatedObjects: Object3D[];
     copiedObjects: Object3D[];
@@ -18,6 +19,7 @@ interface AssetsStore {
     resetAsset: (modelUuid: string) => void;
     setAssets: (assets: Assets) => void;
 
+    setSelectedAssets: (objects: Object3D[]) => void;
     setMovedObjects: (objects: Object3D[]) => Object3D[];
     setRotatedObjects: (objects: Object3D[]) => Object3D[];
     setCopiedObjects: (objects: Object3D[]) => Object3D[];
@@ -56,6 +58,7 @@ export const createAssetStore = () => {
     return create<AssetsStore>()(
         immer((set, get) => ({
             assets: [],
+            selectedAssets: [],
             movedObjects: [],
             rotatedObjects: [],
             copiedObjects: [],
@@ -111,6 +114,12 @@ export const createAssetStore = () => {
                 });
             },
 
+            setSelectedAssets: (objects) => {
+                set((state) => {
+                    state.selectedAssets = objects;
+                });
+            },
+
             setMovedObjects: (objects) => {
                 set((state) => {
                     state.movedObjects = objects;

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import useModuleStore, { useSubModuleStore, useThreeDStore } from "../../store/useModuleStore";
 import { usePlayerStore, useToggleStore } from "../../store/useUIToggleStore";
-import useVersionHistoryVisibleStore, { useActiveSubTool, useActiveTool, useAddAction, useDfxUpload, useRenameModeStore, useSaveVersion, useSelectedAssets, useSelectedComment, useShortcutStore, useToggleView, useToolMode, useViewSceneStore } from "../../store/builder/store";
+import useVersionHistoryVisibleStore, { useActiveSubTool, useActiveTool, useAddAction, useDfxUpload, useRenameModeStore, useSaveVersion, useSelectedComment, useShortcutStore, useToggleView, useToolMode, useViewSceneStore } from "../../store/builder/store";
 import useCameraModeStore, { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import { detectModifierKeys } from "./detectModifierKeys";
 import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
@@ -9,10 +9,13 @@ import { useLogger } from "../../components/ui/log/LoggerContext";
 import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
 import { useVersionHistoryStore } from "../../store/builder/useVersionHistoryStore";
 import { useBuilderStore } from "../../store/builder/useBuilderStore";
+import { useSceneContext } from "../../modules/scene/sceneContext";
 
 const KeyPressListener: React.FC = () => {
     const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
     const { activeModule, setActiveModule } = useModuleStore();
+    const { assetStore } = useSceneContext();
+    const { selectedAssets } = assetStore();
     const { setSubModule } = useSubModuleStore();
     const { setActiveSubTool } = useActiveSubTool();
     const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
@@ -31,7 +34,6 @@ const KeyPressListener: React.FC = () => {
     const { setViewSceneLabels } = useViewSceneStore();
     const { isRenameMode, setIsRenameMode } = useRenameModeStore();
     const { selectedFloorAsset, setSelectedWallAsset } = useBuilderStore();
-    const { selectedAssets } = useSelectedAssets();
     const { setCreateNewVersion } = useVersionHistoryStore();
     const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
     const { setSelectedComment } = useSelectedComment();