@2112-lab/central-plant 0.1.39 → 0.1.41

package/dist/esm/src/managers/controls/transformControlsManager.js

@@ -16,14 +16,18 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
     // Transform control instance
     this.transformControls = null;
-    // Bounding box helper for visual feedback
-    this.boundingBoxHelper = null;
+
+    // Array of bounding box helpers (one per selected object)
+    this.boundingBoxHelpers = [];
 
     // Cache for object bounding boxes to improve performance
     this.boundingBoxCache = new WeakMap();
 
-    // Currently selected object
-    this.selectedObject = null;
+    // Array of all selected objects (supports single or multi-selection)
+    this.selectedObjects = [];
+
+    // Group to hold selected objects for transform controls
+    this.multiSelectionGroup = null;
 
     // Transform mode: 'translate', 'rotate', 'scale'
     this.currentMode = 'translate';
@@ -121,9 +125,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
       this._objectTransformedListener = function (eventData) {
         console.log('🔲 TransformControlsManager detected object transformation');
 
-        // Only update bounding box if the transformed object is currently selected
-        if (_this.selectedObject && eventData.object === _this.selectedObject) {
-          console.log('🔲 Updating bounding box for selected object after transform');
+        // Update bounding box if the transformed object is in current selection
+        if (_this.selectedObjects.includes(eventData.object)) {
+          console.log('🔲 Updating bounding boxes for selected objects after transform');
           _this.updateBoundingBox();
         }
       };
@@ -212,13 +216,14 @@ var TransformControlsManager = /*#__PURE__*/function () {
       this.eventHandlers.transformStart = function () {
         console.log("transformControls transformStart");
         _this2.transformState.isTransforming = true;
-        if (_this2.selectedObject) {
-          // Store initial transform state
-          _this2.transformState.initialTransform = {
-            position: _this2.selectedObject.position.clone(),
-            rotation: _this2.selectedObject.rotation.clone(),
-            scale: _this2.selectedObject.scale.clone()
-          };
+
+        // Store initial transforms for all selected objects
+        if (_this2.selectedObjects.length > 0 && _this2.multiSelectionGroup) {
+          _this2.selectedObjects.forEach(function (obj) {
+            obj.userData._multiSelectOriginalPosition = obj.position.clone();
+            obj.userData._multiSelectOriginalRotation = obj.rotation.clone();
+            obj.userData._multiSelectOriginalScale = obj.scale.clone();
+          });
         }
 
         // Disable orbit controls during transformation
@@ -228,7 +233,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
         // Execute callback
         if (_this2.callbacks.onTransformStart) {
-          _this2.callbacks.onTransformStart(_this2.selectedObject, _this2.currentMode);
+          _this2.callbacks.onTransformStart(_this2.selectedObjects[0] || null, _this2.currentMode);
         }
         console.log("\uD83D\uDD27 Transform started: ".concat(_this2.currentMode, " mode"));
       };
@@ -242,54 +247,31 @@ var TransformControlsManager = /*#__PURE__*/function () {
           _this2.orbitControls.enabled = true;
         }
 
-        // Store final transform state and handle API-based transforms
-        if (_this2.selectedObject && _this2.transformState.initialTransform) {
-          _this2.transformState.currentTransform = {
-            position: _this2.selectedObject.position.clone(),
-            rotation: _this2.selectedObject.rotation.clone(),
-            scale: _this2.selectedObject.scale.clone()
-          };
-
-          // If centralPlant API is available and we're in translate mode, 
-          // use the API to apply the translation properly
-          // BUT skip API-based translation for pipe segments - they should stay where dragged
-          if (_this2.centralPlant && _this2.currentMode === 'translate' && !isSegment(_this2.selectedObject)) {
-            _this2.handleTranslateWithAPI();
-          }
-
-          // Clear bounding box cache for the transformed object to ensure selection uses updated position
-          if (_this2.boundingBoxCache.has(_this2.selectedObject)) {
-            _this2.boundingBoxCache.delete(_this2.selectedObject);
-          }
+        // Apply multi-selection transforms (works for single or multiple objects)
+        if (_this2.selectedObjects.length > 0 && _this2.multiSelectionGroup) {
+          _this2.applyMultiSelectionTransform();
+        }
 
-          // Auto-update paths if enabled
-          // BUT skip auto-path update for pipe segments and gateways - they will be handled by their respective handlers
-          if (_this2.sceneViewer && _this2.sceneViewer.shouldUpdatePaths && !isSegment(_this2.selectedObject) && !isGateway(_this2.selectedObject)) {
-            console.log('🔄 Auto-updating paths after transform...');
+        // Update paths after translation is complete
+        // Only if we translated components (not segments/gateways - they handle paths internally)
+        if (_this2.currentMode === 'translate' && _this2.sceneViewer && typeof _this2.sceneViewer.updatePaths === 'function') {
+          // Check if any of the selected objects are components (not segments or gateways)
+          var hasComponents = _this2.selectedObjects.some(function (obj) {
+            return !isSegment(obj) && !isGateway(obj);
+          });
+          if (hasComponents) {
+            console.log('🔄 Updating paths after component translation...');
             try {
               _this2.sceneViewer.updatePaths();
-              console.log('✅ Paths auto-updated successfully');
+              console.log('✅ Paths updated successfully after translation');
             } catch (error) {
-              console.error('❌ Error auto-updating paths:', error);
+              console.error('❌ Error updating paths after translation:', error);
             }
+          } else {
+            console.log('ℹ️ Skipping updatePaths - segments/gateways handle their own path updates');
           }
         }
 
-        // Execute callback
-        if (_this2.callbacks.onTransformEnd) {
-          _this2.callbacks.onTransformEnd(_this2.selectedObject, _this2.transformState.initialTransform, _this2.transformState.currentTransform, _this2.currentMode);
-        }
-
-        // Handle pipe segment transformations (only in translate mode)
-        if (_this2.currentMode === 'translate' && isSegment(_this2.selectedObject)) {
-          _this2.handlePipeSegmentTransform(_this2.selectedObject);
-        }
-
-        // Handle gateway transformations (only in translate mode)
-        if (_this2.currentMode === 'translate' && isGateway(_this2.selectedObject)) {
-          _this2.handleGatewayTransform(_this2.selectedObject);
-        }
-
         // Dispatch custom scene update event after transform completes
         if (typeof window !== 'undefined') {
           var _this2$selectedObject;
@@ -298,7 +280,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
             detail: {
               timestamp: Date.now(),
               transformType: _this2.currentMode,
-              objectName: ((_this2$selectedObject = _this2.selectedObject) === null || _this2$selectedObject === void 0 ? void 0 : _this2$selectedObject.name) || 'unknown'
+              objectName: ((_this2$selectedObject = _this2.selectedObjects[0]) === null || _this2$selectedObject === void 0 ? void 0 : _this2$selectedObject.name) || 'unknown',
+              objectCount: _this2.selectedObjects.length
             }
           });
           window.dispatchEvent(sceneCompleteEvent);
@@ -307,11 +290,18 @@ var TransformControlsManager = /*#__PURE__*/function () {
       };
       // Transform changing event
       this.eventHandlers.transforming = function () {
-        // Clear the bounding box cache for the selected object during transformation
-        if (_this2.selectedObject && _this2.boundingBoxCache.has(_this2.selectedObject)) {
-          _this2.boundingBoxCache.delete(_this2.selectedObject);
+        // Apply real-time visual transformation to objects during drag
+        if (_this2.selectedObjects.length > 0 && _this2.multiSelectionGroup) {
+          _this2.applyRealtimeTransform();
         }
 
+        // Clear the bounding box cache for all selected objects during transformation
+        _this2.selectedObjects.forEach(function (obj) {
+          if (_this2.boundingBoxCache.has(obj)) {
+            _this2.boundingBoxCache.delete(obj);
+          }
+        });
+
         // Update bounding box during transformation
         _this2.updateBoundingBox();
 
@@ -322,7 +312,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
             detail: {
               timestamp: Date.now(),
               transformType: _this2.currentMode,
-              objectName: ((_this2$selectedObject2 = _this2.selectedObject) === null || _this2$selectedObject2 === void 0 ? void 0 : _this2$selectedObject2.name) || 'unknown',
+              objectName: ((_this2$selectedObject2 = _this2.selectedObjects[0]) === null || _this2$selectedObject2 === void 0 ? void 0 : _this2$selectedObject2.name) || 'unknown',
               isTransforming: true
             }
           });
@@ -392,6 +382,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
       // Single click handler with double-click detection
       this.eventHandlers.click = function (event) {
+        var _targetObject$userDat;
         // Skip if currently transforming
         if (_this4.transformState.isTransforming) {
           return;
@@ -406,6 +397,36 @@ var TransformControlsManager = /*#__PURE__*/function () {
         // Find target object using appropriate selection method
         var targetObject = _this4._findTargetObject(raycaster, objectFilter);
 
+        // Check if shift key is pressed for multi-selection
+        var isShiftPressed = event.shiftKey;
+
+        // Skip selection if no target object found
+        if (!targetObject) {
+          // Deselect if clicking on empty space (and not holding shift)
+          if (!isShiftPressed) {
+            _this4.deselectObject();
+          }
+          _this4.clickTiming.lastClickTime = 0;
+          _this4.clickTiming.lastClickedObject = null;
+          return;
+        }
+
+        // Skip selection if not a component, gateway, or segment
+        var objectType = (_targetObject$userDat = targetObject.userData) === null || _targetObject$userDat === void 0 ? void 0 : _targetObject$userDat.objectType;
+        var isValidType = objectType === 'component' || objectType === 'gateway' || objectType === 'segment';
+        if (!isValidType) {
+          console.log('❌ Object excluded from selection:', targetObject.name || targetObject.uuid, 'objectType:', objectType);
+          return false;
+        }
+
+        // Handle multi-selection with shift key
+        if (isShiftPressed) {
+          _this4.toggleObjectSelection(targetObject);
+          _this4.clickTiming.lastClickTime = currentTime;
+          _this4.clickTiming.lastClickedObject = targetObject;
+          return;
+        }
+
         // Check if this is a double-click: same object clicked within delay time
         var isSameObject = targetObject === _this4.clickTiming.lastClickedObject;
         var isWithinDelay = timeSinceLastClick < _this4.clickTiming.doubleClickDelay;
@@ -498,6 +519,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
   }, {
     key: "_isValidSelectableObject",
     value: function _isValidSelectableObject(object) {
+      var _object$userData;
       // Safety check: ensure object is still valid and in the scene
       if (!object || !object.parent) {
         console.warn('⚠️ Selected object is no longer valid or in scene');
@@ -509,6 +531,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
         console.warn('❌ Object missing required Three.js properties for transform controls');
         return false;
       }
+
+      // Check if object has explicit selectable flag set to false
+      if (((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.selectable) === false) {
+        console.warn('⚠️ Object is marked as non-selectable (stub segment)');
+        return false;
+      }
       return true;
     }
 
@@ -548,48 +576,41 @@ var TransformControlsManager = /*#__PURE__*/function () {
   }, {
     key: "isSelectableObject",
     value: function isSelectableObject(object) {
-      var _object$userData, _object$userData2, _object$userData3, _object$userData4, _object$userData5, _object$userData6;
+      var _object$userData2, _object$userData3, _object$userData4, _object$userData5, _object$userData6, _object$userData7, _object$userData8;
       // Basic safety checks
       if (!object || !object.isObject3D) {
         return false;
       }
 
-      // Debug logging for pipe segments
-      if (isSegment(object)) {
-        console.log('🔍 Found pipe segment in selection check:', object.name, object.userData);
-      }
-
       // Skip transform controls and their children
       if (object.isTransformControls || object.isTransformControlsPlane || object.isTransformControlsGizmo) {
         return false;
       }
 
       // Skip helpers and special objects
-      var isHelper = object.isHelper || ((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.isHelper) || ((_object$userData2 = object.userData) === null || _object$userData2 === void 0 ? void 0 : _object$userData2.isBoundingBox);
-      var isBaseGround = (_object$userData3 = object.userData) === null || _object$userData3 === void 0 ? void 0 : _object$userData3.isBaseGround;
-      var isBrickWall = (_object$userData4 = object.userData) === null || _object$userData4 === void 0 ? void 0 : _object$userData4.isBrickWall;
+      var isHelper = object.isHelper || ((_object$userData2 = object.userData) === null || _object$userData2 === void 0 ? void 0 : _object$userData2.isHelper) || ((_object$userData3 = object.userData) === null || _object$userData3 === void 0 ? void 0 : _object$userData3.isBoundingBox);
+      var isBaseGround = (_object$userData4 = object.userData) === null || _object$userData4 === void 0 ? void 0 : _object$userData4.isBaseGround;
+      var isBrickWall = (_object$userData5 = object.userData) === null || _object$userData5 === void 0 ? void 0 : _object$userData5.isBrickWall;
       if (isHelper || isBaseGround || isBrickWall || !object.visible) {
         return false;
       }
 
-      // Allow pipe segments and junctions to be selected, but exclude parent polyline objects
-      if (object.name && object.name.toLowerCase().includes('polyline') && !isSegment(object) && !((_object$userData5 = object.userData) !== null && _object$userData5 !== void 0 && _object$userData5.isPipeJunction)) {
-        console.log('❌ Polyline parent object excluded from selection:', object.name);
+      // Skip segment connectors - they should not be selectable for transformation
+      if (((_object$userData6 = object.userData) === null || _object$userData6 === void 0 ? void 0 : _object$userData6.objectType) === 'segment-connector') {
         return false;
       }
 
-      // Check for pipe segments and junctions
-      var isPipeJunction = ((_object$userData6 = object.userData) === null || _object$userData6 === void 0 ? void 0 : _object$userData6.isPipeJunction) === true;
-
-      // Check for GLB models
-      var isGLBModel = object.name && object.name.includes(' Component');
+      // Check if object has explicit selectable flag set to false
+      if (((_object$userData7 = object.userData) === null || _object$userData7 === void 0 ? void 0 : _object$userData7.selectable) === false) {
+        return false;
+      }
 
-      // Check for connector orbs
-      var isConnector = this.isConnectorOrb(object);
-      return isGLBModel || isConnector || isSegment(object) || isPipeJunction;
+      // Allow components, gateways, and segments to be selected
+      var objectType = (_object$userData8 = object.userData) === null || _object$userData8 === void 0 ? void 0 : _object$userData8.objectType;
+      return objectType === 'component' || objectType === 'gateway' || isSegment(object);
     }
     /**
-    * Select an object for transformation
+    * Select an object for transformation (with full callbacks including tooltips)
     * @param {THREE.Object3D} object - The object to select
     */
   }, {
@@ -599,37 +620,14 @@ var TransformControlsManager = /*#__PURE__*/function () {
         console.warn('⚠️ Invalid object provided for selection');
         return false;
       }
-      this.selectedObject = object;
-
-      // Force object matrix update to ensure correct transforms
-      object.updateMatrixWorld(true);
-
-      // Refresh bounding box cache for this object
-      var updatedBoundingBox = new THREE.Box3().setFromObject(object);
-      this.boundingBoxCache.set(object, updatedBoundingBox);
 
-      // Attach transform controls
-      this.transformControls.attach(object);
+      // Clear existing selection and select this object
+      this.selectedObjects = [object];
 
-      // Update interaction time to reset delay
-      if (this.transformControls.updateInteractionTime) {
-        this.transformControls.updateInteractionTime();
-      }
-
-      // Create and show bounding box if enabled
-      this.createBoundingBox(object);
-
-      // Only enable if not forcing invisibility
-      if (!this.forceInvisible) {
-        this.transformControls.enabled = this.config.enabled;
-        this._showTransformControls();
-      } else {
-        console.log('🔒 Transform controls kept invisible despite object selection');
-        this.transformControls.enabled = false;
-        this._hideTransformControls();
-      }
+      // Update the multi-selection display (works for single object too)
+      this.updateMultiSelection();
 
-      // Execute callback
+      // Execute callback for tooltips and other UI updates
       if (this.callbacks.onObjectSelect) {
         this.callbacks.onObjectSelect(object);
       }
@@ -649,56 +647,198 @@ var TransformControlsManager = /*#__PURE__*/function () {
         console.warn('⚠️ Invalid object provided for selection');
         return false;
       }
-      this.selectedObject = object;
 
-      // Force object matrix update to ensure correct transforms
-      object.updateMatrixWorld(true);
+      // Clear existing selection and select this object
+      this.selectedObjects = [object];
+
+      // Update the multi-selection display (works for single object too)
+      this.updateMultiSelection();
+
+      // NOTE: We deliberately do NOT call any callback here
+      // This allows transform controls and bounding box to show without triggering tooltips
+
+      console.log("\uD83C\uDFAF Object selected for transform only: ".concat(object.name || object.uuid));
+      return true;
+    }
+
+    /**
+     * Toggle object selection for multi-selection (shift+click)
+     * @param {THREE.Object3D} object - The object to toggle
+     */
+  }, {
+    key: "toggleObjectSelection",
+    value: function toggleObjectSelection(object) {
+      if (!object || !object.isObject3D) {
+        console.warn('⚠️ Invalid object provided for multi-selection');
+        return;
+      }
 
-      // Refresh bounding box cache for this object
-      var updatedBoundingBox = new THREE.Box3().setFromObject(object);
-      this.boundingBoxCache.set(object, updatedBoundingBox);
+      // Check if object is already in selection
+      var index = this.selectedObjects.findIndex(function (obj) {
+        return obj === object;
+      });
+      if (index !== -1) {
+        // Object is already selected, remove it
+        this.selectedObjects.splice(index, 1);
+        console.log("\u2796 Removed from selection: ".concat(object.name || object.uuid));
+      } else {
+        // Object is not selected, add it
+        this.selectedObjects.push(object);
+        console.log("\u2795 Added to selection: ".concat(object.name || object.uuid));
+      }
 
-      // Attach transform controls
-      this.transformControls.attach(object);
+      // Update the multi-selection display
+      this.updateMultiSelection();
+    }
+
+    /**
+     * Update the multi-selection group and transform controls
+     * Works for both single and multiple object selection
+     */
+  }, {
+    key: "updateMultiSelection",
+    value: function updateMultiSelection() {
+      if (this.selectedObjects.length === 0) {
+        // No objects selected, deselect everything
+        this.deselectObject();
+        return;
+      }
+
+      // Create/update group for selected objects (even if just one)
+      this.createMultiSelectionGroup();
+
+      // Attach transform controls to the group
+      this.transformControls.attach(this.multiSelectionGroup);
 
       // Update interaction time to reset delay
       if (this.transformControls.updateInteractionTime) {
         this.transformControls.updateInteractionTime();
       }
 
-      // Create and show bounding box if enabled
-      this.createBoundingBox(object);
+      // Create bounding boxes for all selected objects
+      this.createMultiBoundingBox();
 
-      // Only enable if not forcing invisibility
+      // Enable transform controls if not forcing invisibility
       if (!this.forceInvisible) {
         this.transformControls.enabled = true;
         this._showTransformControls();
-      } else {
-        console.log('🔒 Transform controls kept invisible despite object selection');
-        this.transformControls.enabled = false;
-        this._hideTransformControls();
       }
+      console.log("\uD83C\uDFAF Selection active: ".concat(this.selectedObjects.length, " object(s)"));
+    }
 
-      // NOTE: We deliberately do NOT call any callback here
-      // This allows transform controls and bounding box to show without triggering tooltips
+    /**
+     * Create or update the multi-selection group
+     */
+  }, {
+    key: "createMultiSelectionGroup",
+    value: function createMultiSelectionGroup() {
+      // Remove existing group if it exists
+      if (this.multiSelectionGroup) {
+        this.scene.remove(this.multiSelectionGroup);
+      }
+
+      // Create new group
+      this.multiSelectionGroup = new THREE.Group();
+      this.multiSelectionGroup.name = 'MultiSelectionGroup';
+      this.multiSelectionGroup.userData = {
+        isMultiSelectionGroup: true
+      };
 
-      console.log("\uD83C\uDFAF Object selected for transform only: ".concat(object.name || object.uuid));
-      return true;
+      // Calculate the centroid of all selected objects
+      var centroid = new THREE.Vector3();
+      this.selectedObjects.forEach(function (obj) {
+        var worldPos = new THREE.Vector3();
+        obj.getWorldPosition(worldPos);
+        centroid.add(worldPos);
+      });
+      centroid.divideScalar(this.selectedObjects.length);
+
+      // Position the group at the centroid
+      this.multiSelectionGroup.position.copy(centroid);
+
+      // Add group to scene
+      this.scene.add(this.multiSelectionGroup);
+
+      // Store original position, rotation, and scale for each object
+      // Note: We don't store the parent reference to avoid circular JSON issues
+      this.selectedObjects.forEach(function (obj) {
+        // Store local transforms (for final API calls)
+        obj.userData._multiSelectOriginalPosition = obj.position.clone();
+        obj.userData._multiSelectOriginalRotation = obj.rotation.clone();
+        obj.userData._multiSelectOriginalScale = obj.scale.clone();
+
+        // Store world position (for real-time visual updates)
+        var worldPos = new THREE.Vector3();
+        obj.getWorldPosition(worldPos);
+        obj.userData._multiSelectOriginalWorldPosition = worldPos;
+      });
+      console.log("\uD83D\uDCE6 Multi-selection group created at centroid:", centroid.toArray());
+    }
+
+    /**
+     * Create a bounding box that encompasses all selected objects
+     */
+  }, {
+    key: "createMultiBoundingBox",
+    value:
+    /**
+     * Create bounding boxes for all selected objects
+     */
+    function createMultiBoundingBox() {
+      var _this5 = this;
+      // Skip if bounding box is disabled
+      if (!this.config.showBoundingBox) {
+        return;
+      }
+
+      // Remove any existing bounding boxes first
+      this.removeBoundingBox();
+      if (this.selectedObjects.length === 0) {
+        return;
+      }
+      try {
+        // Create individual bounding boxes for each selected object
+        this.selectedObjects.forEach(function (obj) {
+          var boundingBoxHelper = new THREE.BoxHelper(obj, _this5.config.boundingBoxColor);
+
+          // Mark it as a helper to avoid selection
+          boundingBoxHelper.isHelper = true;
+          boundingBoxHelper.userData = {
+            isBoundingBox: true
+          };
+
+          // Add to scene
+          _this5.scene.add(boundingBoxHelper);
+
+          // Store in array for later cleanup
+          _this5.boundingBoxHelpers.push(boundingBoxHelper);
+        });
+        console.log("\uD83D\uDCE6 Bounding boxes created for ".concat(this.selectedObjects.length, " object(s)"));
+      } catch (error) {
+        console.warn('⚠️ Failed to create bounding boxes:', error);
+      }
     }
 
     /**
-     * Deselect the currently selected object
+     * Remove all bounding box helpers
      */
   }, {
     key: "deselectObject",
-    value: function deselectObject() {
-      if (this.selectedObject) {
-        console.log("\uD83D\uDD04 Object deselected: ".concat(this.selectedObject.name || this.selectedObject.uuid));
+    value:
+    /**
+     * Deselect all currently selected objects
+     */
+    function deselectObject() {
+      if (this.selectedObjects.length > 0) {
+        console.log("\uD83D\uDD04 Objects deselected: ".concat(this.selectedObjects.length));
       }
 
-      // Remove bounding box
+      // Clear multi-selection
+      this.clearMultiSelection();
+
+      // Remove bounding boxes
       this.removeBoundingBox();
-      this.selectedObject = null;
+
       // Detach and hide transform controls
       if (this.transformControls) {
         // First detach from object
@@ -717,94 +857,97 @@ var TransformControlsManager = /*#__PURE__*/function () {
     }
 
     /**
-     * Create and display a bounding box for the selected object
-     * @param {THREE.Object3D} object - The object to create a bounding box for
+     * Clear selection and restore original object states
      */
   }, {
-    key: "createBoundingBox",
-    value: function createBoundingBox(object) {
-      // Skip if bounding box is disabled
-      if (!this.config.showBoundingBox) {
-        return;
-      }
+    key: "clearMultiSelection",
+    value: function clearMultiSelection() {
+      // Clean up userData for selected objects
+      this.selectedObjects.forEach(function (obj) {
+        if (obj.userData._multiSelectOriginalPosition) {
+          delete obj.userData._multiSelectOriginalPosition;
+          delete obj.userData._multiSelectOriginalRotation;
+          delete obj.userData._multiSelectOriginalScale;
+          delete obj.userData._multiSelectOriginalWorldPosition;
+        }
+      });
 
-      // Remove any existing bounding box first
-      this.removeBoundingBox();
-      if (!object) {
-        return;
+      // Remove selection group from scene
+      if (this.multiSelectionGroup) {
+        this.scene.remove(this.multiSelectionGroup);
+        this.multiSelectionGroup = null;
       }
-      try {
-        // Create a BoxHelper to show the bounding box
-        this.boundingBoxHelper = new THREE.BoxHelper(object, this.config.boundingBoxColor);
-
-        // Mark it as a helper to avoid selection
-        this.boundingBoxHelper.isHelper = true;
-        this.boundingBoxHelper.userData = {
-          isBoundingBox: true
-        };
-        console.log("this.boundingBoxHelper object:", object);
-
-        // Add to scene
-        this.scene.add(this.boundingBoxHelper);
-        console.log("\uD83D\uDCE6 Bounding box created for: ".concat(object.name || object.uuid));
-      } catch (error) {
-        console.warn('⚠️ Failed to create bounding box:', error);
+
+      // Clear selection array
+      var count = this.selectedObjects.length;
+      this.selectedObjects = [];
+      if (count > 0) {
+        console.log("\uD83E\uDDF9 Cleared selection (".concat(count, " object(s))"));
       }
     }
-
-    /**
-     * Remove the current bounding box helper
-     */
   }, {
     key: "removeBoundingBox",
     value: function removeBoundingBox() {
-      if (this.boundingBoxHelper) {
-        try {
-          // Remove from scene
-          if (this.boundingBoxHelper.parent) {
-            this.boundingBoxHelper.parent.remove(this.boundingBoxHelper);
-          }
+      // Remove all bounding box helpers
+      if (this.boundingBoxHelpers.length > 0) {
+        this.boundingBoxHelpers.forEach(function (helper) {
+          try {
+            // Remove from scene
+            if (helper.parent) {
+              helper.parent.remove(helper);
+            }
 
-          // Dispose geometry and material if they exist
-          if (this.boundingBoxHelper.geometry) {
-            this.boundingBoxHelper.geometry.dispose();
-          }
-          if (this.boundingBoxHelper.material) {
-            this.boundingBoxHelper.material.dispose();
+            // Dispose geometry and material if they exist
+            if (helper.geometry) {
+              helper.geometry.dispose();
+            }
+            if (helper.material) {
+              helper.material.dispose();
+            }
+          } catch (error) {
+            console.warn('⚠️ Error removing bounding box helper:', error);
           }
-          console.log('📦 Bounding box removed');
-        } catch (error) {
-          console.warn('⚠️ Error removing bounding box:', error);
-        } finally {
-          this.boundingBoxHelper = null;
+        });
+        var count = this.boundingBoxHelpers.length;
+        this.boundingBoxHelpers = [];
+        if (count > 0) {
+          console.log("\uD83D\uDCE6 Removed ".concat(count, " bounding box(es)"));
         }
       }
     }
 
     /**
-     * Update the bounding box to match the current object state
-     * Call this after any transformation to keep the bounding box in sync
+     * Update the bounding boxes to match the current object states
+     * Call this after any transformation to keep the bounding boxes in sync
      */
   }, {
     key: "updateBoundingBox",
     value: function updateBoundingBox() {
-      if (this.boundingBoxHelper && this.selectedObject) {
+      var _this6 = this;
+      // Update bounding boxes for all selected objects
+      if (this.selectedObjects.length > 0 && this.boundingBoxHelpers.length > 0) {
         try {
-          // Force object matrix update to ensure correct bounding box
-          this.selectedObject.updateMatrixWorld(true);
-
-          // Update bounding box
-          this.boundingBoxHelper.update();
-
-          // Also update the cached bounding box if it exists
-          if (this.boundingBoxCache.has(this.selectedObject)) {
-            var updatedBoundingBox = new THREE.Box3().setFromObject(this.selectedObject);
-            this.boundingBoxCache.set(this.selectedObject, updatedBoundingBox);
-          }
+          // Update each bounding box helper
+          this.boundingBoxHelpers.forEach(function (helper, index) {
+            var obj = _this6.selectedObjects[index];
+            if (obj) {
+              // Force object matrix update to ensure correct bounding box
+              obj.updateMatrixWorld(true);
+
+              // Update bounding box
+              helper.update();
+
+              // Also update the cached bounding box if it exists
+              if (_this6.boundingBoxCache.has(obj)) {
+                var updatedBoundingBox = new THREE.Box3().setFromObject(obj);
+                _this6.boundingBoxCache.set(obj, updatedBoundingBox);
+              }
+            }
+          });
         } catch (error) {
-          console.warn('⚠️ Error updating bounding box:', error);
-          // If update fails, recreate the bounding box
-          this.createBoundingBox(this.selectedObject);
+          console.warn('⚠️ Error updating bounding boxes:', error);
+          // If update fails, recreate the bounding boxes
+          this.createMultiBoundingBox();
         }
       }
     }
@@ -906,33 +1049,34 @@ var TransformControlsManager = /*#__PURE__*/function () {
     key: "setEnabled",
     value: function setEnabled(enabled) {
       this.config.enabled = enabled;
-      if (this.selectedObject) {
+      if (this.selectedObjects.length > 0) {
         this.transformControls.enabled = enabled;
       }
       console.log("\uD83D\uDD04 Transform controls ".concat(enabled ? 'enabled' : 'disabled'));
     }
 
     /**
-     * Get world transformation data for the selected object
+     * Get world transformation data for the first selected object
      * @returns {Object} World transformation data
      */
   }, {
     key: "getWorldTransformData",
     value: function getWorldTransformData() {
-      if (!this.selectedObject) {
+      if (this.selectedObjects.length === 0) {
         return null;
       }
+      var selectedObject = this.selectedObjects[0];
 
       // Ensure the object's world matrix is up to date
-      this.selectedObject.updateMatrixWorld(true);
+      selectedObject.updateMatrixWorld(true);
 
       // Get world position
       var worldPosition = new THREE.Vector3();
-      this.selectedObject.getWorldPosition(worldPosition);
+      selectedObject.getWorldPosition(worldPosition);
 
       // Get world quaternion
       var worldQuaternion = new THREE.Quaternion();
-      this.selectedObject.getWorldQuaternion(worldQuaternion);
+      selectedObject.getWorldQuaternion(worldQuaternion);
 
       // Convert quaternion to Euler rotation
       var worldRotation = new THREE.Euler();
@@ -940,7 +1084,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
       // Get world scale
       var worldScale = new THREE.Vector3();
-      this.selectedObject.getWorldScale(worldScale);
+      selectedObject.getWorldScale(worldScale);
       return {
         position: worldPosition,
         rotation: worldRotation,
@@ -959,11 +1103,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
     key: "updateObjectTransform",
     value: function updateObjectTransform(type, axis, value) {
       var useWorldCoords = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      if (!this.selectedObject) {
+      if (this.selectedObjects.length === 0) {
         console.warn('⚠️ No object selected for transformation');
         return;
       }
-      var object = this.selectedObject;
+      var object = this.selectedObjects[0];
       var numericValue = parseFloat(value);
       if (isNaN(numericValue)) {
         console.warn('⚠️ Invalid numeric value for transform:', value);
@@ -989,7 +1133,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
             console.warn("\u26A0\uFE0F Unknown transform type: ".concat(type));
             return;
         }
-      } // Update transform controls to reflect the change
+      }
+
+      // Update transform controls to reflect the change
       if (this.transformControls) {
         this.transformControls.updateMatrixWorld();
       }
@@ -1117,13 +1263,13 @@ var TransformControlsManager = /*#__PURE__*/function () {
   }, {
     key: "getSelectableObjectsWithBounds",
     value: function getSelectableObjectsWithBounds() {
-      var _this5 = this;
+      var _this7 = this;
       var objectFilter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       var objectsWithBounds = [];
 
       // Traverse scene to find selectable objects
       this.scene.traverse(function (object) {
-        var _object$userData7, _object$userData8;
+        var _object$userData9, _object$userData0;
         // Skip invalid objects and helpers early
         if (!object || !object.isObject3D) {
           return;
@@ -1135,25 +1281,25 @@ var TransformControlsManager = /*#__PURE__*/function () {
         }
 
         // Skip other helpers and special objects
-        if (object.isHelper || (_object$userData7 = object.userData) !== null && _object$userData7 !== void 0 && _object$userData7.isHelper || (_object$userData8 = object.userData) !== null && _object$userData8 !== void 0 && _object$userData8.isBoundingBox) {
+        if (object.isHelper || (_object$userData9 = object.userData) !== null && _object$userData9 !== void 0 && _object$userData9.isHelper || (_object$userData0 = object.userData) !== null && _object$userData0 !== void 0 && _object$userData0.isBoundingBox) {
           return;
         }
         try {
           // Apply filter (use provided filter or default isSelectableObject method)
-          var isSelectable = objectFilter ? objectFilter(object) : _this5.isSelectableObject(object);
+          var isSelectable = objectFilter ? objectFilter(object) : _this7.isSelectableObject(object);
           if (isSelectable) {
             // Force object matrix update to ensure correct bounding box
             object.updateMatrixWorld(true);
 
             // Get or compute bounding box
-            var boundingBox = _this5.boundingBoxCache.get(object);
+            var boundingBox = _this7.boundingBoxCache.get(object);
 
             // Always recompute bounding box for recently transformed objects
             // or if no cached bounding box exists
-            if (!boundingBox || object === _this5.selectedObject) {
+            if (!boundingBox || _this7.selectedObjects.includes(object)) {
               // Compute and cache bounding box
               boundingBox = new THREE.Box3().setFromObject(object);
-              _this5.boundingBoxCache.set(object, boundingBox);
+              _this7.boundingBoxCache.set(object, boundingBox);
             }
             objectsWithBounds.push({
               object: object,
@@ -1215,60 +1361,216 @@ var TransformControlsManager = /*#__PURE__*/function () {
     }
 
     /**
-     * Handle translate using centralPlant API instead of direct Three.js manipulation
-     * This method calculates the translation delta and resets the object position, 
-     * then uses the centralPlant.translate() API to apply the change properly
+     * Apply real-time visual transformation during drag (no API calls)
+     * This updates the object positions/rotations visually while the user is dragging
      */
   }, {
-    key: "handleTranslateWithAPI",
-    value: function handleTranslateWithAPI() {
-      var _this$selectedObject$;
-      if (!this.selectedObject || !this.transformState.initialTransform || !this.transformState.currentTransform) {
-        console.warn('⚠️ Cannot handle translate with API: missing required state');
+    key: "applyRealtimeTransform",
+    value: function applyRealtimeTransform() {
+      var _this8 = this;
+      if (!this.multiSelectionGroup || this.selectedObjects.length === 0) {
         return;
       }
 
-      // Calculate the translation deltas
-      var deltaX = this.transformState.currentTransform.position.x - this.transformState.initialTransform.position.x;
-      var deltaY = this.transformState.currentTransform.position.y - this.transformState.initialTransform.position.y;
-      var deltaZ = this.transformState.currentTransform.position.z - this.transformState.initialTransform.position.z;
+      // Calculate the transformation delta from the group
+      var groupPosition = this.multiSelectionGroup.position.clone();
+      var groupRotation = this.multiSelectionGroup.rotation.clone();
 
-      // Reset the object to its initial position (undo the direct Three.js manipulation)
-      this.selectedObject.position.copy(this.transformState.initialTransform.position);
-      this.selectedObject.updateMatrix();
-      this.selectedObject.updateMatrixWorld(true);
-      console.log("\uD83D\uDD27 Using centralPlant API for translation:", {
-        deltaX: deltaX,
-        deltaY: deltaY,
-        deltaZ: deltaZ
+      // Get the original centroid position (from when group was created)
+      var originalCentroid = new THREE.Vector3();
+      this.selectedObjects.forEach(function (obj) {
+        var originalWorldPos = obj.userData._multiSelectOriginalWorldPosition;
+        if (originalWorldPos) {
+          originalCentroid.add(originalWorldPos);
+        }
       });
+      originalCentroid.divideScalar(this.selectedObjects.length);
 
-      // Get the component ID (try both uuid and originalUuid)
-      var componentId = this.selectedObject.uuid || ((_this$selectedObject$ = this.selectedObject.userData) === null || _this$selectedObject$ === void 0 ? void 0 : _this$selectedObject$.originalUuid);
-      if (!componentId) {
-        console.error('❌ Cannot find component ID for translation API call');
+      // Calculate deltas
+      var positionDelta = groupPosition.clone().sub(originalCentroid);
+      var rotationDelta = groupRotation.clone();
+
+      // Apply transformation to each selected object visually
+      this.selectedObjects.forEach(function (obj) {
+        var originalWorldPos = obj.userData._multiSelectOriginalWorldPosition;
+        var originalRot = obj.userData._multiSelectOriginalRotation;
+        if (!originalWorldPos || !originalRot) {
+          return;
+        }
+        if (_this8.currentMode === 'translate') {
+          // Simple translation: original world position + delta
+          var newWorldPos = originalWorldPos.clone().add(positionDelta);
+
+          // Convert to local position if object has a parent
+          if (obj.parent && obj.parent !== _this8.scene) {
+            // Update parent matrix if parent is also being transformed
+            obj.parent.updateMatrixWorld(true);
+            var parentMatrixInverse = new THREE.Matrix4();
+            parentMatrixInverse.copy(obj.parent.matrixWorld).invert();
+            newWorldPos.applyMatrix4(parentMatrixInverse);
+          }
+          obj.position.copy(newWorldPos);
+          obj.updateMatrix();
+        } else if (_this8.currentMode === 'rotate') {
+          // Calculate offset from centroid
+          var offsetFromCentroid = originalWorldPos.clone().sub(originalCentroid);
+
+          // Rotate the offset vector
+          var rotatedOffset = offsetFromCentroid.clone();
+          var rotationQuat = new THREE.Quaternion().setFromEuler(rotationDelta);
+          rotatedOffset.applyQuaternion(rotationQuat);
+
+          // Calculate new world position
+          var _newWorldPos = originalCentroid.clone().add(rotatedOffset).add(positionDelta);
+
+          // Convert to local position
+          if (obj.parent && obj.parent !== _this8.scene) {
+            // Update parent matrix if parent is also being transformed
+            obj.parent.updateMatrixWorld(true);
+            var _parentMatrixInverse = new THREE.Matrix4();
+            _parentMatrixInverse.copy(obj.parent.matrixWorld).invert();
+            _newWorldPos.applyMatrix4(_parentMatrixInverse);
+          }
+          obj.position.copy(_newWorldPos);
+
+          // Apply rotation to the object itself
+          obj.rotation.x = originalRot.x + rotationDelta.x;
+          obj.rotation.y = originalRot.y + rotationDelta.y;
+          obj.rotation.z = originalRot.z + rotationDelta.z;
+          obj.updateMatrix();
+        }
+
+        // Mark world matrix as needing update (will propagate to children)
+        obj.matrixWorldNeedsUpdate = true;
+      });
+    }
+
+    /**
+     * Apply transformation from multi-selection group to all selected objects
+     * Simple approach: calculate delta once, apply to each object via API
+     */
+  }, {
+    key: "applyMultiSelectionTransform",
+    value: function applyMultiSelectionTransform() {
+      var _this9 = this;
+      if (!this.multiSelectionGroup || this.selectedObjects.length === 0) {
         return;
       }
+      console.log("\uD83D\uDD27 Applying multi-selection transform to ".concat(this.selectedObjects.length, " objects"));
 
-      // Apply translations using centralPlant API if there's a meaningful delta
-      // Round to avoid floating point precision issues
+      // Calculate the transformation delta from the group
+      var groupPosition = this.multiSelectionGroup.position.clone();
+
+      // Get the original centroid position (from when group was created)
+      var originalCentroid = new THREE.Vector3();
+      this.selectedObjects.forEach(function (obj) {
+        var originalWorldPos = obj.userData._multiSelectOriginalWorldPosition;
+        if (originalWorldPos) {
+          originalCentroid.add(originalWorldPos);
+        }
+      });
+      originalCentroid.divideScalar(this.selectedObjects.length);
+
+      // Calculate position delta - this is the same for ALL objects
+      var positionDelta = groupPosition.clone().sub(originalCentroid);
+
+      // Round deltas to avoid floating point precision issues
+      var deltaX = Math.round(positionDelta.x * 2) / 2;
+      var deltaY = Math.round(positionDelta.y * 2) / 2;
+      var deltaZ = Math.round(positionDelta.z * 2) / 2;
+      console.log('🔧 Transform delta:', {
+        deltaX: deltaX,
+        deltaY: deltaY,
+        deltaZ: deltaZ
+      });
+
+      // Only process if there's a meaningful translation
       var threshold = 0.001;
-      if (Math.abs(deltaX) > threshold) {
-        // Round to nearest 0.5 to match grid snapping
-        var roundedDeltaX = Math.round(deltaX * 2) / 2;
-        this.centralPlant.translate(componentId, 'x', roundedDeltaX);
-      }
-      if (Math.abs(deltaY) > threshold) {
-        // Round to nearest 0.5 to match grid snapping  
-        var roundedDeltaY = Math.round(deltaY * 2) / 2;
-        this.centralPlant.translate(componentId, 'y', roundedDeltaY);
-      }
-      if (Math.abs(deltaZ) > threshold) {
-        // Round to nearest 0.5 to match grid snapping
-        var roundedDeltaZ = Math.round(deltaZ * 2) / 2;
-        this.centralPlant.translate(componentId, 'z', roundedDeltaZ);
-      }
-      console.log("\u2705 Applied translation through centralPlant API");
+      if (this.currentMode === 'translate' && positionDelta.length() > threshold) {
+        // FIRST: Reset all objects to their original positions
+        // This undoes the visual transform applied during drag
+        this.selectedObjects.forEach(function (obj) {
+          var originalPos = obj.userData._multiSelectOriginalPosition;
+          if (originalPos) {
+            obj.position.copy(originalPos);
+            obj.updateMatrixWorld(true);
+          }
+        });
+        console.log('🔄 Reset objects to original positions before API calls');
+
+        // THEN: Apply the delta to each object using the appropriate API
+        this.selectedObjects.forEach(function (obj) {
+          var _obj$userData;
+          if (!_this9.centralPlant) {
+            console.warn('⚠️ CentralPlant API not available');
+            return;
+          }
+          var componentId = obj.uuid || ((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.originalUuid);
+          if (isSegment(obj)) {
+            // Use translateSegment API
+            if (Math.abs(deltaX) > threshold) {
+              _this9.centralPlant.translateSegment(componentId, 'x', deltaX);
+            }
+            if (Math.abs(deltaY) > threshold) {
+              _this9.centralPlant.translateSegment(componentId, 'y', deltaY);
+            }
+            if (Math.abs(deltaZ) > threshold) {
+              _this9.centralPlant.translateSegment(componentId, 'z', deltaZ);
+            }
+            console.log("\uD83D\uDCE6 Segment ".concat(obj.name, " translated:"), {
+              deltaX: deltaX,
+              deltaY: deltaY,
+              deltaZ: deltaZ
+            });
+          } else if (isGateway(obj)) {
+            // Use translateGateway API
+            if (Math.abs(deltaX) > threshold) {
+              _this9.centralPlant.translateGateway(componentId, 'x', deltaX);
+            }
+            if (Math.abs(deltaY) > threshold) {
+              _this9.centralPlant.translateGateway(componentId, 'y', deltaY);
+            }
+            if (Math.abs(deltaZ) > threshold) {
+              _this9.centralPlant.translateGateway(componentId, 'z', deltaZ);
+            }
+            console.log("\uD83D\uDEAA Gateway ".concat(obj.name, " translated:"), {
+              deltaX: deltaX,
+              deltaY: deltaY,
+              deltaZ: deltaZ
+            });
+          } else {
+            // Use standard translate API for components
+            if (Math.abs(deltaX) > threshold) {
+              _this9.centralPlant.translate(componentId, 'x', deltaX);
+            }
+            if (Math.abs(deltaY) > threshold) {
+              _this9.centralPlant.translate(componentId, 'y', deltaY);
+            }
+            if (Math.abs(deltaZ) > threshold) {
+              _this9.centralPlant.translate(componentId, 'z', deltaZ);
+            }
+            console.log("\uD83D\uDD27 Component ".concat(obj.name, " translated:"), {
+              deltaX: deltaX,
+              deltaY: deltaY,
+              deltaZ: deltaZ
+            });
+          }
+        });
+        console.log("\u2705 All ".concat(this.selectedObjects.length, " objects translated with delta:"), {
+          deltaX: deltaX,
+          deltaY: deltaY,
+          deltaZ: deltaZ
+        });
+      }
+
+      // Reset the multi-selection group transform
+      this.multiSelectionGroup.position.set(0, 0, 0);
+      this.multiSelectionGroup.rotation.set(0, 0, 0);
+      this.multiSelectionGroup.scale.set(1, 1, 1);
+
+      // Update the multi-selection display with new positions
+      this.updateMultiSelection();
+      console.log("\u2705 Multi-selection transform applied");
     }
 
     /**
@@ -1462,10 +1764,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
       // Remove bounding box helper
       this.removeBoundingBox();
 
-      // Deselect any object first
-      if (this.selectedObject) {
-        this.deselectObject();
-      }
+      // Clear multi-selection
+      this.clearMultiSelection();
 
       // Dispose transform controls
       if (this.transformControls) {
@@ -1494,7 +1794,7 @@ var TransformControlsManager = /*#__PURE__*/function () {
       }
 
       // Clear references - but keep scene, camera, and renderer references for reuse
-      this.selectedObject = null;
+      this.selectedObjects = [];
       // Don't null these out: this.scene, this.camera, this.renderer
       this.orbitControls = null;
       console.log('🧹 Transform controls disposed');