Refactor constants and update grid and plane dimensions for improved configuration management

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,

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<any>((set: any, get: any) => ({
     socket: null,
@@ -386,8 +387,8 @@ export const useLimitDistance = create<any>((set: any) => ({
 }));
 
 export const useTileDistance = create<any>((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) => ({

app/src/styles/components/lists.scss

@@ -42,17 +42,16 @@
       text-align: center;
       padding: 4px 8px;
       border-radius: #{$border-radius-large};
-
-      .zone-header {
-        @include flex-center;
-
       .value {
         width: 100%;
-          text-align: start;
         max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: start;
       }
+      .zone-header {
+        @include flex-center;
       }
-
       .options-container {
         @include flex-center;
         gap: 6px;
@@ -74,9 +73,11 @@
 
     &:hover {
       cursor: pointer;
+      .list-item {
         background: var(--highlight-accent-color);
       }
     }
+  }
 
   .asset-list {
     border-left: 2px solid var(--border-color);

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