diff --git a/app/src/assets/gltf-glb/layouts/floorplane_1.glb b/app/src/assets/gltf-glb/layouts/floorplane_1.glb index 88e4c6c..b60626a 100644 Binary files a/app/src/assets/gltf-glb/layouts/floorplane_1.glb and b/app/src/assets/gltf-glb/layouts/floorplane_1.glb differ diff --git a/app/src/modules/builder/groups/floorItemsGroup.tsx b/app/src/modules/builder/groups/floorItemsGroup.tsx index fe2a03c..ad0c86e 100644 --- a/app/src/modules/builder/groups/floorItemsGroup.tsx +++ b/app/src/modules/builder/groups/floorItemsGroup.tsx @@ -363,6 +363,10 @@ const FloorItemsGroup = ({ if (!event.dataTransfer?.files[0]) return; if (selectedItem.id !== "" && event.dataTransfer?.files[0] && selectedItem.category !== 'Fenestration') { + + state.pointer.x = (event.clientX / window.innerWidth) * 2 - 1; + state.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; + addAssetModel( raycaster, state.camera, diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index 892a48c..06c7bfc 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -1,6 +1,7 @@ import * as THREE from "three"; import { create } from "zustand"; import { io } from "socket.io-client"; +import * as CONSTANTS from '../../types/world/worldConstants'; export const useSocketStore = create((set: any, get: any) => ({ socket: null, @@ -386,8 +387,8 @@ export const useLimitDistance = create((set: any) => ({ })); export const useTileDistance = create((set: any) => ({ - gridValue: { size: 300, divisions: 75 }, - planeValue: { height: 300, width: 300 }, + gridValue: { size: CONSTANTS.gridConfig.size, divisions: CONSTANTS.gridConfig.divisions }, + planeValue: { height: CONSTANTS.planeConfig.height, width: CONSTANTS.planeConfig.width }, setGridValue: (value: any) => set((state: any) => ({ @@ -428,26 +429,26 @@ export const useZoneAssetId = create((set) => ({ // version visible hidden interface VersionHistoryState { - viewVersionHistory: boolean; - setVersionHistory: (value: boolean) => void; + viewVersionHistory: boolean; + setVersionHistory: (value: boolean) => void; } const useVersionHistoryStore = create((set) => ({ - viewVersionHistory: false, - setVersionHistory: (value) => set({ viewVersionHistory: value }), + viewVersionHistory: false, + setVersionHistory: (value) => set({ viewVersionHistory: value }), })); export default useVersionHistoryStore; interface ShortcutStore { - showShortcuts: boolean; - setShowShortcuts: (value: boolean) => void; - toggleShortcuts: () => void; + showShortcuts: boolean; + setShowShortcuts: (value: boolean) => void; + toggleShortcuts: () => void; } export const useShortcutStore = create((set) => ({ - showShortcuts: false, - setShowShortcuts: (value) => set({ showShortcuts: value }), - toggleShortcuts: () => - set((state) => ({ showShortcuts: !state.showShortcuts })), + showShortcuts: false, + setShowShortcuts: (value) => set({ showShortcuts: value }), + toggleShortcuts: () => + set((state) => ({ showShortcuts: !state.showShortcuts })), })); \ No newline at end of file diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss index 00755fa..825999d 100644 --- a/app/src/styles/components/lists.scss +++ b/app/src/styles/components/lists.scss @@ -42,17 +42,16 @@ text-align: center; padding: 4px 8px; border-radius: #{$border-radius-large}; - + .value { + width: 100%; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + text-align: start; + } .zone-header { @include flex-center; - - .value { - width: 100%; - text-align: start; - max-width: 180px; - } } - .options-container { @include flex-center; gap: 6px; @@ -74,7 +73,9 @@ &:hover { cursor: pointer; - background: var(--highlight-accent-color); + .list-item { + background: var(--highlight-accent-color); + } } } @@ -83,4 +84,4 @@ margin-left: 20px; } -} \ No newline at end of file +} diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index aaa8466..5193ee1 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -227,22 +227,10 @@ export const twoDimension: TwoDimension = { rightMouse: 0, // Mouse button for no action }; -export const threeDimension: ThreeDimension = { - defaultPosition: [0, 40, 30], // Default position of the camera - defaultTarget: [0, 0, 0], // Default target of the camera - defaultRotation: [0, 0, 0], // Default rotation of the camera - defaultAzimuth: 0, // Default azimuth of the camera - boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement - boundaryTop: [150, 100, 150], // Top boundary of the camera movement - minDistance: 1, // Minimum distance from the target - leftMouse: 2, // Mouse button for panning - rightMouse: 1, // Mouse button for rotation -}; - export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position export const gridConfig: GridConfig = { - size: 300, // Size of the grid + size: 150, // Size of the grid divisions: 75, // Number of divisions in the grid primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid @@ -251,13 +239,25 @@ export const gridConfig: GridConfig = { position3D: [0, -0.5, 0], // Position of the grid in 3D view }; +export const threeDimension: ThreeDimension = { + defaultPosition: [0, 40, 30], // Default position of the camera + defaultTarget: [0, 0, 0], // Default target of the camera + defaultRotation: [0, 0, 0], // Default rotation of the camera + defaultAzimuth: 0, // Default azimuth of the camera + boundaryBottom: [-gridConfig.size / 2, 0, -gridConfig.size / 2], // Bottom boundary of the camera movement + boundaryTop: [gridConfig.size / 2, 100, gridConfig.size / 2], // Top boundary of the camera movement + minDistance: 1, // Minimum distance from the target + leftMouse: 2, // Mouse button for panning + rightMouse: 1, // Mouse button for rotation +}; + export const planeConfig: PlaneConfig = { position2D: [0, -0.5, 0], // Position of the plane position3D: [0, -0.65, 0], // Position of the plane rotation: -Math.PI / 2, // Rotation of the plane - width: 300, // Width of the plane - height: 300, // Height of the plane + width: 150, // Width of the plane + height: 150, // Height of the plane color: savedTheme === "dark" ? "#323232" : "#f3f3f3", // Color of the plane };