@2112-lab/central-plant 0.3.4 → 0.3.5

package/dist/bundle/index.js

@@ -29813,15 +29813,21 @@ var ModelManager = /*#__PURE__*/function () {
               _context5.n = 2;
               return Promise.all(glbLoadingPromises);
             case 2:
-              // Update world bounding boxes for loaded models
+              // Update world bounding boxes for loaded models and propagate to the live Three.js objects
               libraryObjectsToReplace.forEach(function (_ref2) {
-                var _jsonData$userData2;
                 var jsonData = _ref2.jsonData,
                   glbModel = _ref2.glbModel;
-                if (glbModel && (_jsonData$userData2 = jsonData.userData) !== null && _jsonData$userData2 !== void 0 && _jsonData$userData2.worldBoundingBox) {
-                  var worldBoundingBox = _this3._calculateWorldBoundingBox(glbModel);
-                  jsonData.userData.worldBoundingBox = worldBoundingBox;
-                }
+                if (!glbModel) return;
+                // Use filtered bbox (excludes connectors + io-devices) so it matches
+                // what pathfindingManager._enrichSceneDataWithBoundingBoxes produces
+                var filteredBox = computeFilteredBoundingBox(glbModel, ['io-device', 'connector']);
+                var worldBoundingBox = filteredBox.isEmpty() ? _this3._calculateWorldBoundingBox(glbModel) : {
+                  min: [filteredBox.min.x, filteredBox.min.y, filteredBox.min.z],
+                  max: [filteredBox.max.x, filteredBox.max.y, filteredBox.max.z]
+                };
+                // Update both the JSON data object AND the live scene object
+                jsonData.userData.worldBoundingBox = worldBoundingBox;
+                glbModel.userData.worldBoundingBox = worldBoundingBox;
               });
 
               // Dispatch completion event
@@ -35922,32 +35928,20 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponent",
     value: function renderComponent(viewport, component, centerX, centerY, scale) {
-      var _component$position$x, _component$position, _component$position$y, _component$position2, _component$position$z, _component$position3, _component$rotation$x, _component$rotation, _component$rotation$y, _component$rotation2, _component$rotation$z, _component$rotation3;
-      // Get component position and rotation
-      var pos3D = {
-        x: (_component$position$x = (_component$position = component.position) === null || _component$position === void 0 ? void 0 : _component$position.x) !== null && _component$position$x !== void 0 ? _component$position$x : 0,
-        y: (_component$position$y = (_component$position2 = component.position) === null || _component$position2 === void 0 ? void 0 : _component$position2.y) !== null && _component$position$y !== void 0 ? _component$position$y : 0,
-        z: (_component$position$z = (_component$position3 = component.position) === null || _component$position3 === void 0 ? void 0 : _component$position3.z) !== null && _component$position$z !== void 0 ? _component$position$z : 0
-      };
-      var rot3D = {
-        x: (_component$rotation$x = (_component$rotation = component.rotation) === null || _component$rotation === void 0 ? void 0 : _component$rotation.x) !== null && _component$rotation$x !== void 0 ? _component$rotation$x : 0,
-        y: (_component$rotation$y = (_component$rotation2 = component.rotation) === null || _component$rotation2 === void 0 ? void 0 : _component$rotation2.y) !== null && _component$rotation$y !== void 0 ? _component$rotation$y : 0,
-        z: (_component$rotation$z = (_component$rotation3 = component.rotation) === null || _component$rotation3 === void 0 ? void 0 : _component$rotation3.z) !== null && _component$rotation$z !== void 0 ? _component$rotation$z : 0
-      };
-
-      // Get bounding box dimensions
+      // Get world-space bounding box dimensions and center
       var _this$getComponentDim = this.getComponentDimensions(component),
         worldWidth = _this$getComponentDim.worldWidth,
         worldDepth = _this$getComponentDim.worldDepth,
-        worldHeight = _this$getComponentDim.worldHeight;
+        worldHeight = _this$getComponentDim.worldHeight,
+        bboxCenter = _this$getComponentDim.bboxCenter;
+      console.log("[2D] ".concat(component.name, " | w=").concat(worldWidth.toFixed(3), " d=").concat(worldDepth.toFixed(3), " h=").concat(worldHeight.toFixed(3), " | center=(").concat(bboxCenter.x.toFixed(2), ",").concat(bboxCenter.y.toFixed(2), ",").concat(bboxCenter.z.toFixed(2), ")"));
 
-      // Project 3D coordinates to 2D based on view type
-      var _this$project3DTo2D = this.project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight),
+      // Project 3D bbox center to 2D based on view type
+      var _this$project3DTo2D = this.project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight),
         posX = _this$project3DTo2D.posX,
         posY = _this$project3DTo2D.posY,
         rectWidth = _this$project3DTo2D.rectWidth,
         rectHeight = _this$project3DTo2D.rectHeight;
-        _this$project3DTo2D.rotationDegrees;
       var screenX = centerX + posX * scale;
       var screenY = centerY - posY * scale; // Flip Y for screen coords
 
@@ -35991,105 +35985,131 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
     }
 
     /**
-     * Get component dimensions from various sources
+     * Compute worldBoundingBox for a live Three.js Object3D using the same
+     * vertex-accurate approach as computeFilteredBoundingBox (explicitly calls
+     * geometry.computeBoundingBox() on each mesh before measuring).
+     * @param {THREE.Object3D} object
+     * @returns {{min: number[], max: number[]}}
+     */
+  }, {
+    key: "_getOrComputeWorldBoundingBox",
+    value: function _getOrComputeWorldBoundingBox(object) {
+      // computeFilteredBoundingBox with no exclusions = full object bbox
+      var box = computeFilteredBoundingBox(object, []);
+      if (box.isEmpty()) {
+        // Object has no geometry; fall back to a point at world position
+        var wp = new THREE__namespace.Vector3();
+        object.getWorldPosition(wp);
+        return {
+          min: [wp.x, wp.y, wp.z],
+          max: [wp.x, wp.y, wp.z]
+        };
+      }
+      return {
+        min: [box.min.x, box.min.y, box.min.z],
+        max: [box.max.x, box.max.y, box.max.z]
+      };
+    }
+
+    /**
+     * Get component dimensions and world-space center from worldBoundingBox
      */
   }, {
     key: "getComponentDimensions",
     value: function getComponentDimensions(component) {
-      var _component$userData, _component$userData2, _component$geometry;
-      var worldWidth = 1,
-        worldHeight = 1,
-        worldDepth = 1;
-
-      // Try adaptedBoundingBox first
-      if ((_component$userData = component.userData) !== null && _component$userData !== void 0 && _component$userData.adaptedBoundingBox) {
-        var bbox = component.userData.adaptedBoundingBox;
-        if (bbox.max && bbox.min) {
-          worldWidth = Math.abs(bbox.max.x - bbox.min.x);
-          worldDepth = Math.abs(bbox.max.y - bbox.min.y);
-          worldHeight = Math.abs(bbox.max.z - bbox.min.z);
-        }
-      }
-      // Fallback to dimensions from userData
-      else if ((_component$userData2 = component.userData) !== null && _component$userData2 !== void 0 && _component$userData2.dimensions) {
-        var dims = component.userData.dimensions;
-        worldWidth = Math.abs(dims.x);
-        worldDepth = Math.abs(dims.y);
-        worldHeight = Math.abs(dims.z);
-      }
-      // Last resort: geometry bounding box
-      else if ((_component$geometry = component.geometry) !== null && _component$geometry !== void 0 && _component$geometry.boundingBox) {
-        var _bbox = component.geometry.boundingBox;
-        worldWidth = Math.abs(_bbox.max.x - _bbox.min.x);
-        worldDepth = Math.abs(_bbox.max.y - _bbox.min.y);
-        worldHeight = Math.abs(_bbox.max.z - _bbox.min.z);
+      var _component$userData$w, _component$userData, _component$getWorldPo;
+      // Prefer worldBoundingBox already stored on the object — set after GLB loading
+      // by modelManager.replaceWithGLBModels using computeFilteredBoundingBox.
+      // Fall back to computing live if not yet available (e.g. first render before GLB load).
+      var wbb = (_component$userData$w = (_component$userData = component.userData) === null || _component$userData === void 0 ? void 0 : _component$userData.worldBoundingBox) !== null && _component$userData$w !== void 0 ? _component$userData$w : this._getOrComputeWorldBoundingBox(component);
+      if (wbb !== null && wbb !== void 0 && wbb.min && wbb !== null && wbb !== void 0 && wbb.max) {
+        var _wbb$min = _slicedToArray(wbb.min, 3),
+          minX = _wbb$min[0],
+          minY = _wbb$min[1],
+          minZ = _wbb$min[2];
+        var _wbb$max = _slicedToArray(wbb.max, 3),
+          maxX = _wbb$max[0],
+          maxY = _wbb$max[1],
+          maxZ = _wbb$max[2];
+        var cx = (minX + maxX) / 2;
+        var cy = (minY + maxY) / 2;
+        var cz = (minZ + maxZ) / 2;
+        // Guard against Infinity/NaN from empty or degenerate boxes
+        if (isFinite(cx) && isFinite(cy) && isFinite(cz)) {
+          return {
+            worldWidth: Math.max(maxX - minX, 0.01),
+            worldDepth: Math.max(maxY - minY, 0.01),
+            worldHeight: Math.max(maxZ - minZ, 0.01),
+            bboxCenter: {
+              x: cx,
+              y: cy,
+              z: cz
+            }
+          };
+        }
       }
+      // Fallback: world position of the object, unit dimensions
+      var wp = new THREE__namespace.Vector3();
+      (_component$getWorldPo = component.getWorldPosition) === null || _component$getWorldPo === void 0 || _component$getWorldPo.call(component, wp);
       return {
-        worldWidth: worldWidth,
-        worldDepth: worldDepth,
-        worldHeight: worldHeight
+        worldWidth: 1,
+        worldDepth: 1,
+        worldHeight: 1,
+        bboxCenter: {
+          x: wp.x,
+          y: wp.y,
+          z: wp.z
+        }
       };
     }
 
     /**
-     * Project 3D coordinates to 2D based on view type
+     * Project world-space bbox center to 2D based on view type.
+     * worldBoundingBox is an AABB so rotation is already encoded in the extents —
+     * no separate rotation correction is needed.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {Object} bboxCenter - World-space center {x, y, z}
+     * @param {number} worldWidth  - X extent (max[0] - min[0])
+     * @param {number} worldDepth  - Y extent (max[1] - min[1])
+     * @param {number} worldHeight - Z extent (max[2] - min[2])
      */
   }, {
     key: "project3DTo2D",
-    value: function project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight) {
-      var posX, posY, rectWidth, rectHeight;
-      var rotationAngle = rot3D.z;
-      var rotationDegrees = rotationAngle * 180 / Math.PI;
+    value: function project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight) {
       var scale = viewport.PIXELS_PER_UNIT;
+      var posX, posY, rectWidth, rectHeight;
       switch (viewport.viewType) {
         case 'top':
-          // Top view: Looking down Z-axis, X-Y plane
-          posX = pos3D.x;
-          posY = pos3D.y;
-
-          // Swap width and depth when rotated 90° or 270°
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-            rectHeight = worldWidth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-            rectHeight = worldDepth * scale;
-          }
+          // Looking down Z-axis — X/Y plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
+          rectWidth = worldWidth * scale;
+          rectHeight = worldDepth * scale;
           break;
         case 'front':
-          // Front view: Looking along Y-axis, X-Z plane
-          posX = pos3D.x;
-          posY = pos3D.z + worldHeight / 2; // Offset Z by half height
-
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-          }
+          // Looking along Y-axis — X/Z plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.z;
+          rectWidth = worldWidth * scale;
           rectHeight = worldHeight * scale;
           break;
         case 'side':
-          // Side view: Looking along X-axis, Y-Z plane (flipped)
-          posX = -pos3D.y; // Flipped
-          posY = pos3D.z + worldHeight / 2;
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldWidth * scale;
-          } else {
-            rectWidth = worldDepth * scale;
-          }
+          // Looking along X-axis — Y/Z plane (Y negated for left-right orientation)
+          posX = -bboxCenter.y;
+          posY = bboxCenter.z;
+          rectWidth = worldDepth * scale;
           rectHeight = worldHeight * scale;
           break;
         default:
-          posX = pos3D.x;
-          posY = pos3D.y;
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
           rectWidth = worldWidth * scale;
           rectHeight = worldDepth * scale;
       }
@@ -36097,8 +36117,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         posX: posX,
         posY: posY,
         rectWidth: rectWidth,
-        rectHeight: rectHeight,
-        rotationDegrees: rotationDegrees
+        rectHeight: rectHeight
       };
     }
 
@@ -36108,7 +36127,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight) {
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
       var _this6 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
@@ -36191,9 +36210,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           // Convert screen to world coordinates
           var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
 
-          // Calculate new position
+          // Calculate new position: delta from old bbox center to new bbox center
           var currentPos = component.position;
-          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, worldWidth, worldDepth, worldHeight);
+          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
 
           // Apply translation via centralPlant API
           var deltaX = newPosition.x - currentPos.x;
@@ -36296,37 +36315,45 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
     }
 
     /**
-     * Convert world coordinates to 3D object position
+     * Convert dragged 2D world coordinates to a new 3D object position.
+     * coord1/coord2 represent where the bbox CENTER should be in the view's 2D plane;
+     * we compute the delta from the old bbox center and apply it to the pivot position.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {{coord1, coord2}} worldCoords - Projected world coordinates from screen
+     * @param {{x,y,z}} currentPosition - Current Three.js object position (pivot)
+     * @param {{x,y,z}} bboxCenter - Old world-space bbox center
      */
   }, {
     key: "worldCoordsToObjectPosition",
-    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, worldWidth, worldDepth, worldHeight) {
+    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, bboxCenter) {
       var coord1 = worldCoords.coord1,
         coord2 = worldCoords.coord2;
       switch (viewport.viewType) {
         case 'top':
+          // coord1=X, coord2=Y in world space
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
         case 'front':
+          // coord1=X, coord2=Z in world space
           return {
-            x: coord1,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
             y: currentPosition.y,
-            z: coord2 - worldHeight / 2
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         case 'side':
+          // coord1=-Y (negated), coord2=Z in world space
           return {
             x: currentPosition.x,
-            y: -coord1,
-            z: coord2 - worldHeight / 2
+            y: currentPosition.y + (-coord1 - bboxCenter.y),
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         default:
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
       }
@@ -36344,8 +36371,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var components = [];
       this.sceneViewer.scene.traverse(function (object) {
         var _object$userData, _object$userData2;
-        var objectType = ((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) || ((_object$userData2 = object.userData) === null || _object$userData2 === void 0 ? void 0 : _object$userData2.objectType);
-        if (object.userData && objectType === 'component') {
+        // Only match the ROOT component object — must have both objectType:'component'
+        // AND libraryId (inner GLB mesh nodes don't have libraryId)
+        if (((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) === 'component' && (_object$userData2 = object.userData) !== null && _object$userData2 !== void 0 && _object$userData2.libraryId) {
           components.push(object);
         }
       });
@@ -37802,7 +37830,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.4
+   * @version 0.3.5
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.

package/dist/cjs/src/core/centralPlant.js

@@ -35,7 +35,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.4
+   * @version 0.3.5
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.

package/dist/cjs/src/managers/scene/modelManager.js

@@ -6,6 +6,7 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var THREE = require('three');
 var ioDeviceUtils = require('../../utils/ioDeviceUtils.js');
 var modelPreloader = require('../../rendering/modelPreloader.js');
+var boundingBoxUtils = require('../../utils/boundingBoxUtils.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -579,15 +580,21 @@ var ModelManager = /*#__PURE__*/function () {
               _context5.n = 2;
               return Promise.all(glbLoadingPromises);
             case 2:
-              // Update world bounding boxes for loaded models
+              // Update world bounding boxes for loaded models and propagate to the live Three.js objects
               libraryObjectsToReplace.forEach(function (_ref2) {
-                var _jsonData$userData2;
                 var jsonData = _ref2.jsonData,
                   glbModel = _ref2.glbModel;
-                if (glbModel && (_jsonData$userData2 = jsonData.userData) !== null && _jsonData$userData2 !== void 0 && _jsonData$userData2.worldBoundingBox) {
-                  var worldBoundingBox = _this3._calculateWorldBoundingBox(glbModel);
-                  jsonData.userData.worldBoundingBox = worldBoundingBox;
-                }
+                if (!glbModel) return;
+                // Use filtered bbox (excludes connectors + io-devices) so it matches
+                // what pathfindingManager._enrichSceneDataWithBoundingBoxes produces
+                var filteredBox = boundingBoxUtils.computeFilteredBoundingBox(glbModel, ['io-device', 'connector']);
+                var worldBoundingBox = filteredBox.isEmpty() ? _this3._calculateWorldBoundingBox(glbModel) : {
+                  min: [filteredBox.min.x, filteredBox.min.y, filteredBox.min.z],
+                  max: [filteredBox.max.x, filteredBox.max.y, filteredBox.max.z]
+                };
+                // Update both the JSON data object AND the live scene object
+                jsonData.userData.worldBoundingBox = worldBoundingBox;
+                glbModel.userData.worldBoundingBox = worldBoundingBox;
               });
 
               // Dispatch completion event

package/dist/cjs/src/managers/scene/viewport2DManager.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var baseDisposable = require('../../core/baseDisposable.js');
+var THREE = require('three');
+var boundingBoxUtils = require('../../utils/boundingBoxUtils.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,6 +25,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
 /**
  * Viewport2DInstance
  * Represents a single 2D viewport with its own Konva stage and configuration
@@ -550,32 +554,20 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponent",
     value: function renderComponent(viewport, component, centerX, centerY, scale) {
-      var _component$position$x, _component$position, _component$position$y, _component$position2, _component$position$z, _component$position3, _component$rotation$x, _component$rotation, _component$rotation$y, _component$rotation2, _component$rotation$z, _component$rotation3;
-      // Get component position and rotation
-      var pos3D = {
-        x: (_component$position$x = (_component$position = component.position) === null || _component$position === void 0 ? void 0 : _component$position.x) !== null && _component$position$x !== void 0 ? _component$position$x : 0,
-        y: (_component$position$y = (_component$position2 = component.position) === null || _component$position2 === void 0 ? void 0 : _component$position2.y) !== null && _component$position$y !== void 0 ? _component$position$y : 0,
-        z: (_component$position$z = (_component$position3 = component.position) === null || _component$position3 === void 0 ? void 0 : _component$position3.z) !== null && _component$position$z !== void 0 ? _component$position$z : 0
-      };
-      var rot3D = {
-        x: (_component$rotation$x = (_component$rotation = component.rotation) === null || _component$rotation === void 0 ? void 0 : _component$rotation.x) !== null && _component$rotation$x !== void 0 ? _component$rotation$x : 0,
-        y: (_component$rotation$y = (_component$rotation2 = component.rotation) === null || _component$rotation2 === void 0 ? void 0 : _component$rotation2.y) !== null && _component$rotation$y !== void 0 ? _component$rotation$y : 0,
-        z: (_component$rotation$z = (_component$rotation3 = component.rotation) === null || _component$rotation3 === void 0 ? void 0 : _component$rotation3.z) !== null && _component$rotation$z !== void 0 ? _component$rotation$z : 0
-      };
-
-      // Get bounding box dimensions
+      // Get world-space bounding box dimensions and center
       var _this$getComponentDim = this.getComponentDimensions(component),
         worldWidth = _this$getComponentDim.worldWidth,
         worldDepth = _this$getComponentDim.worldDepth,
-        worldHeight = _this$getComponentDim.worldHeight;
+        worldHeight = _this$getComponentDim.worldHeight,
+        bboxCenter = _this$getComponentDim.bboxCenter;
+      console.log("[2D] ".concat(component.name, " | w=").concat(worldWidth.toFixed(3), " d=").concat(worldDepth.toFixed(3), " h=").concat(worldHeight.toFixed(3), " | center=(").concat(bboxCenter.x.toFixed(2), ",").concat(bboxCenter.y.toFixed(2), ",").concat(bboxCenter.z.toFixed(2), ")"));
 
-      // Project 3D coordinates to 2D based on view type
-      var _this$project3DTo2D = this.project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight),
+      // Project 3D bbox center to 2D based on view type
+      var _this$project3DTo2D = this.project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight),
         posX = _this$project3DTo2D.posX,
         posY = _this$project3DTo2D.posY,
         rectWidth = _this$project3DTo2D.rectWidth,
         rectHeight = _this$project3DTo2D.rectHeight;
-        _this$project3DTo2D.rotationDegrees;
       var screenX = centerX + posX * scale;
       var screenY = centerY - posY * scale; // Flip Y for screen coords
 
@@ -619,105 +611,131 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
     }
 
     /**
-     * Get component dimensions from various sources
+     * Compute worldBoundingBox for a live Three.js Object3D using the same
+     * vertex-accurate approach as computeFilteredBoundingBox (explicitly calls
+     * geometry.computeBoundingBox() on each mesh before measuring).
+     * @param {THREE.Object3D} object
+     * @returns {{min: number[], max: number[]}}
+     */
+  }, {
+    key: "_getOrComputeWorldBoundingBox",
+    value: function _getOrComputeWorldBoundingBox(object) {
+      // computeFilteredBoundingBox with no exclusions = full object bbox
+      var box = boundingBoxUtils.computeFilteredBoundingBox(object, []);
+      if (box.isEmpty()) {
+        // Object has no geometry; fall back to a point at world position
+        var wp = new THREE__namespace.Vector3();
+        object.getWorldPosition(wp);
+        return {
+          min: [wp.x, wp.y, wp.z],
+          max: [wp.x, wp.y, wp.z]
+        };
+      }
+      return {
+        min: [box.min.x, box.min.y, box.min.z],
+        max: [box.max.x, box.max.y, box.max.z]
+      };
+    }
+
+    /**
+     * Get component dimensions and world-space center from worldBoundingBox
      */
   }, {
     key: "getComponentDimensions",
     value: function getComponentDimensions(component) {
-      var _component$userData, _component$userData2, _component$geometry;
-      var worldWidth = 1,
-        worldHeight = 1,
-        worldDepth = 1;
-
-      // Try adaptedBoundingBox first
-      if ((_component$userData = component.userData) !== null && _component$userData !== void 0 && _component$userData.adaptedBoundingBox) {
-        var bbox = component.userData.adaptedBoundingBox;
-        if (bbox.max && bbox.min) {
-          worldWidth = Math.abs(bbox.max.x - bbox.min.x);
-          worldDepth = Math.abs(bbox.max.y - bbox.min.y);
-          worldHeight = Math.abs(bbox.max.z - bbox.min.z);
+      var _component$userData$w, _component$userData, _component$getWorldPo;
+      // Prefer worldBoundingBox already stored on the object — set after GLB loading
+      // by modelManager.replaceWithGLBModels using computeFilteredBoundingBox.
+      // Fall back to computing live if not yet available (e.g. first render before GLB load).
+      var wbb = (_component$userData$w = (_component$userData = component.userData) === null || _component$userData === void 0 ? void 0 : _component$userData.worldBoundingBox) !== null && _component$userData$w !== void 0 ? _component$userData$w : this._getOrComputeWorldBoundingBox(component);
+      if (wbb !== null && wbb !== void 0 && wbb.min && wbb !== null && wbb !== void 0 && wbb.max) {
+        var _wbb$min = _rollupPluginBabelHelpers.slicedToArray(wbb.min, 3),
+          minX = _wbb$min[0],
+          minY = _wbb$min[1],
+          minZ = _wbb$min[2];
+        var _wbb$max = _rollupPluginBabelHelpers.slicedToArray(wbb.max, 3),
+          maxX = _wbb$max[0],
+          maxY = _wbb$max[1],
+          maxZ = _wbb$max[2];
+        var cx = (minX + maxX) / 2;
+        var cy = (minY + maxY) / 2;
+        var cz = (minZ + maxZ) / 2;
+        // Guard against Infinity/NaN from empty or degenerate boxes
+        if (isFinite(cx) && isFinite(cy) && isFinite(cz)) {
+          return {
+            worldWidth: Math.max(maxX - minX, 0.01),
+            worldDepth: Math.max(maxY - minY, 0.01),
+            worldHeight: Math.max(maxZ - minZ, 0.01),
+            bboxCenter: {
+              x: cx,
+              y: cy,
+              z: cz
+            }
+          };
         }
       }
-      // Fallback to dimensions from userData
-      else if ((_component$userData2 = component.userData) !== null && _component$userData2 !== void 0 && _component$userData2.dimensions) {
-        var dims = component.userData.dimensions;
-        worldWidth = Math.abs(dims.x);
-        worldDepth = Math.abs(dims.y);
-        worldHeight = Math.abs(dims.z);
-      }
-      // Last resort: geometry bounding box
-      else if ((_component$geometry = component.geometry) !== null && _component$geometry !== void 0 && _component$geometry.boundingBox) {
-        var _bbox = component.geometry.boundingBox;
-        worldWidth = Math.abs(_bbox.max.x - _bbox.min.x);
-        worldDepth = Math.abs(_bbox.max.y - _bbox.min.y);
-        worldHeight = Math.abs(_bbox.max.z - _bbox.min.z);
-      }
+      // Fallback: world position of the object, unit dimensions
+      var wp = new THREE__namespace.Vector3();
+      (_component$getWorldPo = component.getWorldPosition) === null || _component$getWorldPo === void 0 || _component$getWorldPo.call(component, wp);
       return {
-        worldWidth: worldWidth,
-        worldDepth: worldDepth,
-        worldHeight: worldHeight
+        worldWidth: 1,
+        worldDepth: 1,
+        worldHeight: 1,
+        bboxCenter: {
+          x: wp.x,
+          y: wp.y,
+          z: wp.z
+        }
       };
     }
 
     /**
-     * Project 3D coordinates to 2D based on view type
+     * Project world-space bbox center to 2D based on view type.
+     * worldBoundingBox is an AABB so rotation is already encoded in the extents —
+     * no separate rotation correction is needed.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {Object} bboxCenter - World-space center {x, y, z}
+     * @param {number} worldWidth  - X extent (max[0] - min[0])
+     * @param {number} worldDepth  - Y extent (max[1] - min[1])
+     * @param {number} worldHeight - Z extent (max[2] - min[2])
      */
   }, {
     key: "project3DTo2D",
-    value: function project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight) {
-      var posX, posY, rectWidth, rectHeight;
-      var rotationAngle = rot3D.z;
-      var rotationDegrees = rotationAngle * 180 / Math.PI;
+    value: function project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight) {
       var scale = viewport.PIXELS_PER_UNIT;
+      var posX, posY, rectWidth, rectHeight;
       switch (viewport.viewType) {
         case 'top':
-          // Top view: Looking down Z-axis, X-Y plane
-          posX = pos3D.x;
-          posY = pos3D.y;
-
-          // Swap width and depth when rotated 90° or 270°
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-            rectHeight = worldWidth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-            rectHeight = worldDepth * scale;
-          }
+          // Looking down Z-axis — X/Y plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
+          rectWidth = worldWidth * scale;
+          rectHeight = worldDepth * scale;
           break;
         case 'front':
-          // Front view: Looking along Y-axis, X-Z plane
-          posX = pos3D.x;
-          posY = pos3D.z + worldHeight / 2; // Offset Z by half height
-
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-          }
+          // Looking along Y-axis — X/Z plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.z;
+          rectWidth = worldWidth * scale;
           rectHeight = worldHeight * scale;
           break;
         case 'side':
-          // Side view: Looking along X-axis, Y-Z plane (flipped)
-          posX = -pos3D.y; // Flipped
-          posY = pos3D.z + worldHeight / 2;
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldWidth * scale;
-          } else {
-            rectWidth = worldDepth * scale;
-          }
+          // Looking along X-axis — Y/Z plane (Y negated for left-right orientation)
+          posX = -bboxCenter.y;
+          posY = bboxCenter.z;
+          rectWidth = worldDepth * scale;
           rectHeight = worldHeight * scale;
           break;
         default:
-          posX = pos3D.x;
-          posY = pos3D.y;
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
           rectWidth = worldWidth * scale;
           rectHeight = worldDepth * scale;
       }
@@ -725,8 +743,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         posX: posX,
         posY: posY,
         rectWidth: rectWidth,
-        rectHeight: rectHeight,
-        rotationDegrees: rotationDegrees
+        rectHeight: rectHeight
       };
     }
 
@@ -736,7 +753,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight) {
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
       var _this6 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
@@ -819,9 +836,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           // Convert screen to world coordinates
           var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
 
-          // Calculate new position
+          // Calculate new position: delta from old bbox center to new bbox center
           var currentPos = component.position;
-          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, worldWidth, worldDepth, worldHeight);
+          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
 
           // Apply translation via centralPlant API
           var deltaX = newPosition.x - currentPos.x;
@@ -924,37 +941,45 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
     }
 
     /**
-     * Convert world coordinates to 3D object position
+     * Convert dragged 2D world coordinates to a new 3D object position.
+     * coord1/coord2 represent where the bbox CENTER should be in the view's 2D plane;
+     * we compute the delta from the old bbox center and apply it to the pivot position.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {{coord1, coord2}} worldCoords - Projected world coordinates from screen
+     * @param {{x,y,z}} currentPosition - Current Three.js object position (pivot)
+     * @param {{x,y,z}} bboxCenter - Old world-space bbox center
      */
   }, {
     key: "worldCoordsToObjectPosition",
-    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, worldWidth, worldDepth, worldHeight) {
+    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, bboxCenter) {
       var coord1 = worldCoords.coord1,
         coord2 = worldCoords.coord2;
       switch (viewport.viewType) {
         case 'top':
+          // coord1=X, coord2=Y in world space
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
         case 'front':
+          // coord1=X, coord2=Z in world space
           return {
-            x: coord1,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
             y: currentPosition.y,
-            z: coord2 - worldHeight / 2
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         case 'side':
+          // coord1=-Y (negated), coord2=Z in world space
           return {
             x: currentPosition.x,
-            y: -coord1,
-            z: coord2 - worldHeight / 2
+            y: currentPosition.y + (-coord1 - bboxCenter.y),
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         default:
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
       }
@@ -972,8 +997,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var components = [];
       this.sceneViewer.scene.traverse(function (object) {
         var _object$userData, _object$userData2;
-        var objectType = ((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) || ((_object$userData2 = object.userData) === null || _object$userData2 === void 0 ? void 0 : _object$userData2.objectType);
-        if (object.userData && objectType === 'component') {
+        // Only match the ROOT component object — must have both objectType:'component'
+        // AND libraryId (inner GLB mesh nodes don't have libraryId)
+        if (((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) === 'component' && (_object$userData2 = object.userData) !== null && _object$userData2 !== void 0 && _object$userData2.libraryId) {
           components.push(object);
         }
       });

package/dist/esm/src/core/centralPlant.js

@@ -31,7 +31,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.4
+   * @version 0.3.5
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.

package/dist/esm/src/managers/scene/modelManager.js

@@ -2,6 +2,7 @@ import { createClass as _createClass, objectSpread2 as _objectSpread2, toConsuma
 import * as THREE from 'three';
 import { attachIODevicesToComponent } from '../../utils/ioDeviceUtils.js';
 import modelPreloader from '../../rendering/modelPreloader.js';
+import { computeFilteredBoundingBox } from '../../utils/boundingBoxUtils.js';
 
 var ModelManager = /*#__PURE__*/function () {
   function ModelManager(sceneViewer) {
@@ -555,15 +556,21 @@ var ModelManager = /*#__PURE__*/function () {
               _context5.n = 2;
               return Promise.all(glbLoadingPromises);
             case 2:
-              // Update world bounding boxes for loaded models
+              // Update world bounding boxes for loaded models and propagate to the live Three.js objects
               libraryObjectsToReplace.forEach(function (_ref2) {
-                var _jsonData$userData2;
                 var jsonData = _ref2.jsonData,
                   glbModel = _ref2.glbModel;
-                if (glbModel && (_jsonData$userData2 = jsonData.userData) !== null && _jsonData$userData2 !== void 0 && _jsonData$userData2.worldBoundingBox) {
-                  var worldBoundingBox = _this3._calculateWorldBoundingBox(glbModel);
-                  jsonData.userData.worldBoundingBox = worldBoundingBox;
-                }
+                if (!glbModel) return;
+                // Use filtered bbox (excludes connectors + io-devices) so it matches
+                // what pathfindingManager._enrichSceneDataWithBoundingBoxes produces
+                var filteredBox = computeFilteredBoundingBox(glbModel, ['io-device', 'connector']);
+                var worldBoundingBox = filteredBox.isEmpty() ? _this3._calculateWorldBoundingBox(glbModel) : {
+                  min: [filteredBox.min.x, filteredBox.min.y, filteredBox.min.z],
+                  max: [filteredBox.max.x, filteredBox.max.y, filteredBox.max.z]
+                };
+                // Update both the JSON data object AND the live scene object
+                jsonData.userData.worldBoundingBox = worldBoundingBox;
+                glbModel.userData.worldBoundingBox = worldBoundingBox;
               });
 
               // Dispatch completion event

package/dist/esm/src/managers/scene/viewport2DManager.js

@@ -1,5 +1,7 @@
-import { inherits as _inherits, createClass as _createClass, createForOfIteratorHelper as _createForOfIteratorHelper, slicedToArray as _slicedToArray, superPropGet as _superPropGet, classCallCheck as _classCallCheck, callSuper as _callSuper, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createClass as _createClass, slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, superPropGet as _superPropGet, classCallCheck as _classCallCheck, callSuper as _callSuper, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { BaseDisposable } from '../../core/baseDisposable.js';
+import * as THREE from 'three';
+import { computeFilteredBoundingBox } from '../../utils/boundingBoxUtils.js';
 
 /**
  * Viewport2DInstance
@@ -528,32 +530,20 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponent",
     value: function renderComponent(viewport, component, centerX, centerY, scale) {
-      var _component$position$x, _component$position, _component$position$y, _component$position2, _component$position$z, _component$position3, _component$rotation$x, _component$rotation, _component$rotation$y, _component$rotation2, _component$rotation$z, _component$rotation3;
-      // Get component position and rotation
-      var pos3D = {
-        x: (_component$position$x = (_component$position = component.position) === null || _component$position === void 0 ? void 0 : _component$position.x) !== null && _component$position$x !== void 0 ? _component$position$x : 0,
-        y: (_component$position$y = (_component$position2 = component.position) === null || _component$position2 === void 0 ? void 0 : _component$position2.y) !== null && _component$position$y !== void 0 ? _component$position$y : 0,
-        z: (_component$position$z = (_component$position3 = component.position) === null || _component$position3 === void 0 ? void 0 : _component$position3.z) !== null && _component$position$z !== void 0 ? _component$position$z : 0
-      };
-      var rot3D = {
-        x: (_component$rotation$x = (_component$rotation = component.rotation) === null || _component$rotation === void 0 ? void 0 : _component$rotation.x) !== null && _component$rotation$x !== void 0 ? _component$rotation$x : 0,
-        y: (_component$rotation$y = (_component$rotation2 = component.rotation) === null || _component$rotation2 === void 0 ? void 0 : _component$rotation2.y) !== null && _component$rotation$y !== void 0 ? _component$rotation$y : 0,
-        z: (_component$rotation$z = (_component$rotation3 = component.rotation) === null || _component$rotation3 === void 0 ? void 0 : _component$rotation3.z) !== null && _component$rotation$z !== void 0 ? _component$rotation$z : 0
-      };
-
-      // Get bounding box dimensions
+      // Get world-space bounding box dimensions and center
       var _this$getComponentDim = this.getComponentDimensions(component),
         worldWidth = _this$getComponentDim.worldWidth,
         worldDepth = _this$getComponentDim.worldDepth,
-        worldHeight = _this$getComponentDim.worldHeight;
+        worldHeight = _this$getComponentDim.worldHeight,
+        bboxCenter = _this$getComponentDim.bboxCenter;
+      console.log("[2D] ".concat(component.name, " | w=").concat(worldWidth.toFixed(3), " d=").concat(worldDepth.toFixed(3), " h=").concat(worldHeight.toFixed(3), " | center=(").concat(bboxCenter.x.toFixed(2), ",").concat(bboxCenter.y.toFixed(2), ",").concat(bboxCenter.z.toFixed(2), ")"));
 
-      // Project 3D coordinates to 2D based on view type
-      var _this$project3DTo2D = this.project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight),
+      // Project 3D bbox center to 2D based on view type
+      var _this$project3DTo2D = this.project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight),
         posX = _this$project3DTo2D.posX,
         posY = _this$project3DTo2D.posY,
         rectWidth = _this$project3DTo2D.rectWidth,
         rectHeight = _this$project3DTo2D.rectHeight;
-        _this$project3DTo2D.rotationDegrees;
       var screenX = centerX + posX * scale;
       var screenY = centerY - posY * scale; // Flip Y for screen coords
 
@@ -597,105 +587,131 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
     }
 
     /**
-     * Get component dimensions from various sources
+     * Compute worldBoundingBox for a live Three.js Object3D using the same
+     * vertex-accurate approach as computeFilteredBoundingBox (explicitly calls
+     * geometry.computeBoundingBox() on each mesh before measuring).
+     * @param {THREE.Object3D} object
+     * @returns {{min: number[], max: number[]}}
+     */
+  }, {
+    key: "_getOrComputeWorldBoundingBox",
+    value: function _getOrComputeWorldBoundingBox(object) {
+      // computeFilteredBoundingBox with no exclusions = full object bbox
+      var box = computeFilteredBoundingBox(object, []);
+      if (box.isEmpty()) {
+        // Object has no geometry; fall back to a point at world position
+        var wp = new THREE.Vector3();
+        object.getWorldPosition(wp);
+        return {
+          min: [wp.x, wp.y, wp.z],
+          max: [wp.x, wp.y, wp.z]
+        };
+      }
+      return {
+        min: [box.min.x, box.min.y, box.min.z],
+        max: [box.max.x, box.max.y, box.max.z]
+      };
+    }
+
+    /**
+     * Get component dimensions and world-space center from worldBoundingBox
      */
   }, {
     key: "getComponentDimensions",
     value: function getComponentDimensions(component) {
-      var _component$userData, _component$userData2, _component$geometry;
-      var worldWidth = 1,
-        worldHeight = 1,
-        worldDepth = 1;
-
-      // Try adaptedBoundingBox first
-      if ((_component$userData = component.userData) !== null && _component$userData !== void 0 && _component$userData.adaptedBoundingBox) {
-        var bbox = component.userData.adaptedBoundingBox;
-        if (bbox.max && bbox.min) {
-          worldWidth = Math.abs(bbox.max.x - bbox.min.x);
-          worldDepth = Math.abs(bbox.max.y - bbox.min.y);
-          worldHeight = Math.abs(bbox.max.z - bbox.min.z);
+      var _component$userData$w, _component$userData, _component$getWorldPo;
+      // Prefer worldBoundingBox already stored on the object — set after GLB loading
+      // by modelManager.replaceWithGLBModels using computeFilteredBoundingBox.
+      // Fall back to computing live if not yet available (e.g. first render before GLB load).
+      var wbb = (_component$userData$w = (_component$userData = component.userData) === null || _component$userData === void 0 ? void 0 : _component$userData.worldBoundingBox) !== null && _component$userData$w !== void 0 ? _component$userData$w : this._getOrComputeWorldBoundingBox(component);
+      if (wbb !== null && wbb !== void 0 && wbb.min && wbb !== null && wbb !== void 0 && wbb.max) {
+        var _wbb$min = _slicedToArray(wbb.min, 3),
+          minX = _wbb$min[0],
+          minY = _wbb$min[1],
+          minZ = _wbb$min[2];
+        var _wbb$max = _slicedToArray(wbb.max, 3),
+          maxX = _wbb$max[0],
+          maxY = _wbb$max[1],
+          maxZ = _wbb$max[2];
+        var cx = (minX + maxX) / 2;
+        var cy = (minY + maxY) / 2;
+        var cz = (minZ + maxZ) / 2;
+        // Guard against Infinity/NaN from empty or degenerate boxes
+        if (isFinite(cx) && isFinite(cy) && isFinite(cz)) {
+          return {
+            worldWidth: Math.max(maxX - minX, 0.01),
+            worldDepth: Math.max(maxY - minY, 0.01),
+            worldHeight: Math.max(maxZ - minZ, 0.01),
+            bboxCenter: {
+              x: cx,
+              y: cy,
+              z: cz
+            }
+          };
         }
       }
-      // Fallback to dimensions from userData
-      else if ((_component$userData2 = component.userData) !== null && _component$userData2 !== void 0 && _component$userData2.dimensions) {
-        var dims = component.userData.dimensions;
-        worldWidth = Math.abs(dims.x);
-        worldDepth = Math.abs(dims.y);
-        worldHeight = Math.abs(dims.z);
-      }
-      // Last resort: geometry bounding box
-      else if ((_component$geometry = component.geometry) !== null && _component$geometry !== void 0 && _component$geometry.boundingBox) {
-        var _bbox = component.geometry.boundingBox;
-        worldWidth = Math.abs(_bbox.max.x - _bbox.min.x);
-        worldDepth = Math.abs(_bbox.max.y - _bbox.min.y);
-        worldHeight = Math.abs(_bbox.max.z - _bbox.min.z);
-      }
+      // Fallback: world position of the object, unit dimensions
+      var wp = new THREE.Vector3();
+      (_component$getWorldPo = component.getWorldPosition) === null || _component$getWorldPo === void 0 || _component$getWorldPo.call(component, wp);
       return {
-        worldWidth: worldWidth,
-        worldDepth: worldDepth,
-        worldHeight: worldHeight
+        worldWidth: 1,
+        worldDepth: 1,
+        worldHeight: 1,
+        bboxCenter: {
+          x: wp.x,
+          y: wp.y,
+          z: wp.z
+        }
       };
     }
 
     /**
-     * Project 3D coordinates to 2D based on view type
+     * Project world-space bbox center to 2D based on view type.
+     * worldBoundingBox is an AABB so rotation is already encoded in the extents —
+     * no separate rotation correction is needed.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {Object} bboxCenter - World-space center {x, y, z}
+     * @param {number} worldWidth  - X extent (max[0] - min[0])
+     * @param {number} worldDepth  - Y extent (max[1] - min[1])
+     * @param {number} worldHeight - Z extent (max[2] - min[2])
      */
   }, {
     key: "project3DTo2D",
-    value: function project3DTo2D(viewport, pos3D, rot3D, worldWidth, worldDepth, worldHeight) {
-      var posX, posY, rectWidth, rectHeight;
-      var rotationAngle = rot3D.z;
-      var rotationDegrees = rotationAngle * 180 / Math.PI;
+    value: function project3DTo2D(viewport, bboxCenter, worldWidth, worldDepth, worldHeight) {
       var scale = viewport.PIXELS_PER_UNIT;
+      var posX, posY, rectWidth, rectHeight;
       switch (viewport.viewType) {
         case 'top':
-          // Top view: Looking down Z-axis, X-Y plane
-          posX = pos3D.x;
-          posY = pos3D.y;
-
-          // Swap width and depth when rotated 90° or 270°
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-            rectHeight = worldWidth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-            rectHeight = worldDepth * scale;
-          }
+          // Looking down Z-axis — X/Y plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
+          rectWidth = worldWidth * scale;
+          rectHeight = worldDepth * scale;
           break;
         case 'front':
-          // Front view: Looking along Y-axis, X-Z plane
-          posX = pos3D.x;
-          posY = pos3D.z + worldHeight / 2; // Offset Z by half height
-
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldDepth * scale;
-          } else {
-            rectWidth = worldWidth * scale;
-          }
+          // Looking along Y-axis — X/Z plane
+          posX = bboxCenter.x;
+          posY = bboxCenter.z;
+          rectWidth = worldWidth * scale;
           rectHeight = worldHeight * scale;
           break;
         case 'side':
-          // Side view: Looking along X-axis, Y-Z plane (flipped)
-          posX = -pos3D.y; // Flipped
-          posY = pos3D.z + worldHeight / 2;
-          if (Math.abs(rotationDegrees) === 90 || Math.abs(rotationDegrees) === 270) {
-            rectWidth = worldWidth * scale;
-          } else {
-            rectWidth = worldDepth * scale;
-          }
+          // Looking along X-axis — Y/Z plane (Y negated for left-right orientation)
+          posX = -bboxCenter.y;
+          posY = bboxCenter.z;
+          rectWidth = worldDepth * scale;
           rectHeight = worldHeight * scale;
           break;
         default:
-          posX = pos3D.x;
-          posY = pos3D.y;
+          posX = bboxCenter.x;
+          posY = bboxCenter.y;
           rectWidth = worldWidth * scale;
           rectHeight = worldDepth * scale;
       }
@@ -703,8 +719,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         posX: posX,
         posY: posY,
         rectWidth: rectWidth,
-        rectHeight: rectHeight,
-        rotationDegrees: rotationDegrees
+        rectHeight: rectHeight
       };
     }
 
@@ -714,7 +729,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight) {
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
       var _this6 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
@@ -797,9 +812,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           // Convert screen to world coordinates
           var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
 
-          // Calculate new position
+          // Calculate new position: delta from old bbox center to new bbox center
           var currentPos = component.position;
-          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, worldWidth, worldDepth, worldHeight);
+          var newPosition = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
 
           // Apply translation via centralPlant API
           var deltaX = newPosition.x - currentPos.x;
@@ -902,37 +917,45 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
     }
 
     /**
-     * Convert world coordinates to 3D object position
+     * Convert dragged 2D world coordinates to a new 3D object position.
+     * coord1/coord2 represent where the bbox CENTER should be in the view's 2D plane;
+     * we compute the delta from the old bbox center and apply it to the pivot position.
      * @param {Viewport2DInstance} viewport - The viewport instance
+     * @param {{coord1, coord2}} worldCoords - Projected world coordinates from screen
+     * @param {{x,y,z}} currentPosition - Current Three.js object position (pivot)
+     * @param {{x,y,z}} bboxCenter - Old world-space bbox center
      */
   }, {
     key: "worldCoordsToObjectPosition",
-    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, worldWidth, worldDepth, worldHeight) {
+    value: function worldCoordsToObjectPosition(viewport, worldCoords, currentPosition, bboxCenter) {
       var coord1 = worldCoords.coord1,
         coord2 = worldCoords.coord2;
       switch (viewport.viewType) {
         case 'top':
+          // coord1=X, coord2=Y in world space
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
         case 'front':
+          // coord1=X, coord2=Z in world space
           return {
-            x: coord1,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
             y: currentPosition.y,
-            z: coord2 - worldHeight / 2
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         case 'side':
+          // coord1=-Y (negated), coord2=Z in world space
           return {
             x: currentPosition.x,
-            y: -coord1,
-            z: coord2 - worldHeight / 2
+            y: currentPosition.y + (-coord1 - bboxCenter.y),
+            z: currentPosition.z + (coord2 - bboxCenter.z)
           };
         default:
           return {
-            x: coord1,
-            y: coord2,
+            x: currentPosition.x + (coord1 - bboxCenter.x),
+            y: currentPosition.y + (coord2 - bboxCenter.y),
             z: currentPosition.z
           };
       }
@@ -950,8 +973,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var components = [];
       this.sceneViewer.scene.traverse(function (object) {
         var _object$userData, _object$userData2;
-        var objectType = ((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) || ((_object$userData2 = object.userData) === null || _object$userData2 === void 0 ? void 0 : _object$userData2.objectType);
-        if (object.userData && objectType === 'component') {
+        // Only match the ROOT component object — must have both objectType:'component'
+        // AND libraryId (inner GLB mesh nodes don't have libraryId)
+        if (((_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType) === 'component' && (_object$userData2 = object.userData) !== null && _object$userData2 !== void 0 && _object$userData2.libraryId) {
           components.push(object);
         }
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@2112-lab/central-plant",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Utility modules for the Central Plant Application",
   "main": "dist/bundle/index.js",
   "module": "dist/esm/src/index.js",