{
const { activeModule } = useModuleStore();
- const { toggleThreeD, setToggleThreeD } = useThreeDStore();
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { showShortcuts } = useShortcutStore();
const { activeTool, setActiveTool, setToolMode } = useStoreHooks();
@@ -126,7 +125,6 @@ const Tools: React.FC = () => {
const toggle2D3D = () => {
const toggleTo2D = toggleView;
setToggleView(!toggleTo2D);
- setToggleThreeD(toggleTo2D);
setToggleUI(toggleTo2D, toggleTo2D);
if (toggleTo2D) {
setSelectedWallAsset(null);
@@ -138,7 +136,7 @@ const Tools: React.FC = () => {
const renderBuilderTools = () => (
<>
- {!toggleThreeD && (
+ {toggleView && (
- {toggleThreeD && activeModule !== "visualization" && (
+ {!toggleView && activeModule !== "visualization" && (
<>
@@ -300,7 +298,7 @@ const Tools: React.FC = () => {
setActiveTool("comment")} />
- {toggleThreeD && setIsPlaying(!isPlaying)} />}
+ {!toggleView && setIsPlaying(!isPlaying)} />}
{activeModule === "builder" && (
diff --git a/app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx b/app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx
index ce2685c..37ffc88 100644
--- a/app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx
+++ b/app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx
@@ -1,12 +1,17 @@
import { Vector3 } from "three";
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
-import type { CameraControls } from "@react-three/drei";
-import { useThreeDStore } from "../../../../store/ui/useModuleStore";
+import { CameraControls } from "@react-three/drei";
+import { useToggleView } from "../../../../store/builder/store";
+import useModuleStore from "../../../../store/ui/useModuleStore";
+import { useSceneStore } from "../../../../store/scene/useSceneStore";
+import * as CONSTANTS from "../../../../types/world/worldConstants";
const CameraShortcutsControls = () => {
const { camera, controls } = useThree();
- const { toggleThreeD, setToggleThreeD } = useThreeDStore();
+ const { toggleView } = useToggleView();
+ const { camType, setCamType } = useSceneStore();
+ const { activeModule } = useModuleStore();
const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element?.getAttribute("contenteditable") === "true";
@@ -54,12 +59,16 @@ const CameraShortcutsControls = () => {
break;
}
case "Numpad5": {
- if (!toggleThreeD) {
- setToggleThreeD(true);
- } else {
- cc.setLookAt(0, distance, 0, target.x, target.y, target.z, false).then(() => {
- setToggleThreeD(false);
- });
+ if (!toggleView) {
+ if (camType === "perspective") {
+ setCamType("orthographic");
+ (controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
+ (controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
+ } else {
+ setCamType("perspective");
+ (controls as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
+ (controls as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
+ }
}
break;
}
@@ -72,7 +81,7 @@ const CameraShortcutsControls = () => {
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
- }, [controls, camera, toggleThreeD, setToggleThreeD]);
+ }, [controls, camera, camType, setCamType, toggleView, activeModule]);
return null;
};
diff --git a/app/src/modules/scene/camera/switchView.tsx b/app/src/modules/scene/camera/switchView.tsx
index 68a86c8..c2ef252 100644
--- a/app/src/modules/scene/camera/switchView.tsx
+++ b/app/src/modules/scene/camera/switchView.tsx
@@ -1,24 +1,24 @@
-import { useEffect } from "react";
-import { useThree } from "@react-three/fiber";
import * as THREE from "three";
-import { PerspectiveCamera, OrthographicCamera, CameraControls } from "@react-three/drei";
+import { useEffect } from "react";
import { useParams } from "react-router-dom";
+import { useThree } from "@react-three/fiber";
+import { PerspectiveCamera, OrthographicCamera, CameraControls } from "@react-three/drei";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { getCameraApi } from "../../../services/factoryBuilder/camera/getCameraApi";
import { useToggleView } from "../../../store/builder/store";
-import { useThreeDStore } from "../../../store/ui/useModuleStore";
+import { useSceneStore } from "../../../store/scene/useSceneStore";
export default function SwitchView() {
const { toggleView } = useToggleView();
const { controls } = useThree();
+ const { camType } = useSceneStore();
const { projectId } = useParams();
- const { toggleThreeD } = useThreeDStore();
useEffect(() => {
- if (toggleView && controls) {
+ if ((toggleView || camType === "orthographic") && controls) {
(controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
(controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
- } else {
+ } else if (!toggleView && camType === "perspective") {
if (!projectId) return;
getCameraApi(projectId)
.then((data) => {
@@ -41,11 +41,11 @@ export default function SwitchView() {
(controls as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
}
}
- }, [toggleView, controls, projectId]);
+ }, [toggleView, controls, projectId, camType]);
return (
<>
- {toggleView || !toggleThreeD ? (
+ {toggleView || camType === "orthographic" ? (
(null);
-
const state = useThree();
const { toggleView } = useToggleView();
const { resetCamera, setResetCamera } = useResetCamera();
+ const { camType } = useSceneStore();
const { socket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization } = getUserData();
@@ -89,7 +90,7 @@ export default function Controls() {
let intervalId: NodeJS.Timeout | null = null;
const handleRest = () => {
- if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && socket) {
+ if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && socket && camType === "perspective") {
const position = state.camera.position;
if (position.x === 0 && position.y === 0 && position.z === 0) return;
updateCamPosition(controlsRef, socket, position, state.camera.rotation, projectId);
@@ -101,7 +102,7 @@ export default function Controls() {
hasInteracted = true;
if (!intervalId) {
intervalId = setInterval(() => {
- if (controlsRef.current && !toggleView) {
+ if (controlsRef.current && !toggleView && camType === "perspective") {
handleRest();
}
}, CONSTANTS.camPositionUpdateInterval);
@@ -116,7 +117,7 @@ export default function Controls() {
};
const controls = controlsRef.current;
- if (controls) {
+ if (controls && !toggleView && camType === "perspective") {
controls.addEventListener("sleep", handleRest);
controls.addEventListener("control", startInterval);
controls.addEventListener("controlend", stopInterval);
@@ -130,20 +131,20 @@ export default function Controls() {
}
stopInterval();
};
- }, [toggleView, state, socket]);
+ }, [toggleView, state, socket, camType]);
return (
<>
{
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
- !intersect.object.name.includes(
- "SelectionGroupBoundingBoxLine"
- ) &&
+ !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
@@ -119,10 +117,7 @@ const MeasurementTool = () => {
if (intersects.length > 0) {
let intersectionPoint = intersects[0].point.clone();
if (axisLock && points.length > 0) {
- intersectionPoint = applyAxisLock(
- intersectionPoint,
- points[points.length - 1]
- );
+ intersectionPoint = applyAxisLock(intersectionPoint, points[points.length - 1]);
}
if (points.length < 2) {
setPoints([...points, intersectionPoint]);
@@ -232,27 +227,14 @@ const MeasurementTool = () => {
)}
{points.map((point, index) => (
-
+
))}
{linePoints && linePoints.length === 2 && (
void;
setFps: (fps: number) => void;
setCamera: (pos: THREE.Vector3, target: THREE.Vector3) => void;
+
+ setCamType: (type: "orthographic" | "perspective") => void;
};
export const useSceneStore = create()(
@@ -24,6 +28,8 @@ export const useSceneStore = create()(
target: new THREE.Vector3(0, 0, 0),
},
+ camType: "perspective",
+
setLimitFps: (limitFps) => {
set((state) => {
state.limitFps = limitFps;
@@ -36,11 +42,18 @@ export const useSceneStore = create()(
});
},
- setCamera: (pos, target) =>
+ setCamera: (pos, target) => {
set((state) => {
state.camState.position.copy(pos);
state.camState.target.copy(target);
- }),
+ });
+ },
+
+ setCamType: (type) => {
+ set((state) => {
+ state.camType = type;
+ });
+ },
}))
);
diff --git a/app/src/store/ui/useModuleStore.ts b/app/src/store/ui/useModuleStore.ts
index e582e76..8d70ad0 100644
--- a/app/src/store/ui/useModuleStore.ts
+++ b/app/src/store/ui/useModuleStore.ts
@@ -1,42 +1,29 @@
import { create } from "zustand";
interface ModuleStore {
- activeModule: string;
- setActiveModule: (module: string) => void;
+ activeModule: string;
+ setActiveModule: (module: string) => void;
}
const useModuleStore = create((set) => ({
- activeModule: "builder", // Initial state
- setActiveModule: (module) => set({ activeModule: module }), // Update state
+ activeModule: "builder", // Initial state
+ setActiveModule: (module) => set({ activeModule: module }), // Update state
}));
export default useModuleStore;
// New store for subModule
-type SubModule = 'properties' | 'simulations' | 'mechanics' | 'analysis' | 'zoneProperties'|"resourceManagement";
+type SubModule = "properties" | "simulations" | "mechanics" | "analysis" | "zoneProperties" | "resourceManagement";
interface SubModuleStore {
- subModule: SubModule;
- setSubModule: (subModule: SubModule) => void;
+ subModule: SubModule;
+ setSubModule: (subModule: SubModule) => void;
}
const useSubModuleStore = create((set) => ({
- subModule: "properties", // Initial subModule state
- setSubModule: (value) => set({ subModule: value }), // Update subModule state
+ subModule: "properties", // Initial subModule state
+ setSubModule: (value) => set({ subModule: value }), // Update subModule state
}));
export { useSubModuleStore };
-
-interface ThreeDState {
- toggleThreeD: boolean;
- setToggleThreeD: (value: boolean) => void;
-}
-
-// Create the Zustand store
-const useThreeDStore = create((set) => ({
- toggleThreeD: true, // Initial state
- setToggleThreeD: (value) => set({ toggleThreeD: value }), // Action to update the state
-}));
-
-export { useThreeDStore };
\ No newline at end of file
diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
index 0325868..ce7373e 100644
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -1,5 +1,5 @@
import React, { useEffect } from "react";
-import useModuleStore, { useSubModuleStore, useThreeDStore } from "../../store/ui/useModuleStore";
+import useModuleStore, { useSubModuleStore } from "../../store/ui/useModuleStore";
import { usePlayerStore, useToggleStore } from "../../store/ui/useUIToggleStore";
import {
useActiveSubTool,
@@ -29,7 +29,6 @@ const KeyPressListener: React.FC = () => {
const { setSubModule } = useSubModuleStore();
const { setActiveSubTool } = useActiveSubTool();
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
- const { setToggleThreeD } = useThreeDStore();
const { setToolMode } = useToolMode();
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { toggleView, setToggleView } = useToggleView();
@@ -83,7 +82,6 @@ const KeyPressListener: React.FC = () => {
if (key === "TAB") {
const toggleTo2D = toggleView;
setToggleView(!toggleTo2D);
- setToggleThreeD(toggleTo2D);
if (toggleTo2D) {
setSelectedWallAsset(null);
setToggleUI(localStorage.getItem("navBarUiLeft") !== "false", localStorage.getItem("navBarUiRight") !== "false");