@2112-lab/central-plant 0.3.12 → 0.3.13

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

@@ -99,6 +99,9 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
     // stacking up independent renderComponents() runs
     _this2._refreshPending = false;
 
+    // Set of viewport keys pending refresh (collects keys across multiple refresh() calls in same frame)
+    _this2._pendingRefreshKeys = new Set();
+
     // Event listener reference for cleanup
     _this2._objectTransformedListener = null;
     console.log('🔲 Viewport2DManager initialized (multi-instance support)');
@@ -188,8 +191,10 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
               viewport._instanceKey = key;
               this.viewports.set(key, viewport);
 
-              // Initialize the stage for this viewport
-              this.initializeStage(viewport);
+              // Initialize the stage for this viewport (waits for DOM layout to settle)
+              _context.n = 4;
+              return this.initializeStage(viewport);
+            case 4:
               return _context.a(2, viewport.isReady);
           }
         }, _callee, this);
@@ -283,50 +288,67 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
     /**
      * Initialize Konva stage for a specific viewport instance
      * @param {Viewport2DInstance} viewport - The viewport instance to initialize
+     * @returns {Promise<void>} Resolves when viewport is fully ready
      */
     )
   }, {
     key: "initializeStage",
     value: function initializeStage(viewport) {
-      if (!this.Konva || !viewport.container) {
-        console.error('❌ Cannot initialize stage: Konva or container missing');
-        return;
-      }
-
-      // Get container dimensions
-      var rect = viewport.container.getBoundingClientRect();
-      var width = rect.width || 800;
-      var height = rect.height || 600;
-      console.log("\uD83D\uDCD0 Initializing Konva stage (".concat(viewport.viewType, "): ").concat(width, "x").concat(height));
-
-      // Create Konva stage for this viewport
-      viewport.stage = new this.Konva.Stage({
-        container: viewport.container,
-        width: width,
-        height: height
-      });
-
-      // Create separate layers for grid and components
-      viewport.gridLayer = new this.Konva.Layer();
-      viewport.componentLayer = new this.Konva.Layer();
-
-      // Add layers to stage in order (grid first, then components)
-      viewport.stage.add(viewport.gridLayer);
-      viewport.stage.add(viewport.componentLayer);
-
-      // Setup resize handling
-      this.setupResizeListener(viewport);
-
-      // Setup zoom and pan handlers
-      this.setupZoomAndPanHandlers(viewport);
+      var _this4 = this;
+      return new Promise(function (resolve) {
+        if (!_this4.Konva || !viewport.container) {
+          console.error('❌ Cannot initialize stage: Konva or container missing');
+          resolve();
+          return;
+        }
 
-      // Draw initial content
-      this.drawGrid(viewport);
-      this.renderComponents(viewport);
+        // Get container dimensions
+        var rect = viewport.container.getBoundingClientRect();
+        var width = rect.width || 800;
+        var height = rect.height || 600;
+        console.log("\uD83D\uDCD0 Initializing Konva stage (".concat(viewport.viewType, "): ").concat(width, "x").concat(height));
+
+        // Create Konva stage for this viewport
+        viewport.stage = new _this4.Konva.Stage({
+          container: viewport.container,
+          width: width,
+          height: height
+        });
 
-      // Mark as ready
-      viewport.isReady = true;
-      console.log("\u2705 Viewport2DManager stage initialized (".concat(viewport.viewType, ")"));
+        // Create separate layers for grid and components
+        viewport.gridLayer = new _this4.Konva.Layer();
+        viewport.componentLayer = new _this4.Konva.Layer();
+
+        // Add layers to stage in order (grid first, then components)
+        viewport.stage.add(viewport.gridLayer);
+        viewport.stage.add(viewport.componentLayer);
+
+        // Setup resize handling
+        _this4.setupResizeListener(viewport);
+
+        // Setup zoom and pan handlers
+        _this4.setupZoomAndPanHandlers(viewport);
+
+        // Draw initial grid (lightweight, safe to do immediately)
+        _this4.drawGrid(viewport);
+
+        // Defer component rendering to next frame to ensure DOM layout is finalized.
+        // Without this, getBoundingClientRect() may return stale/zero dimensions
+        // if the container hasn't been fully laid out by CSS yet.
+        requestAnimationFrame(function () {
+          // Re-check container dimensions after layout settles
+          var finalRect = viewport.container.getBoundingClientRect();
+          if (finalRect.width > 0 && finalRect.height > 0) {
+            viewport.stage.width(finalRect.width);
+            viewport.stage.height(finalRect.height);
+            _this4.drawGrid(viewport);
+          }
+          _this4.renderComponents(viewport);
+          viewport.isReady = true;
+          console.log("\u2705 Viewport2DManager stage initialized (".concat(viewport.viewType, ")"));
+          resolve();
+        });
+      });
     }
 
     /**
@@ -336,12 +358,12 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "setupResizeListener",
     value: function setupResizeListener(viewport) {
-      var _this4 = this;
+      var _this5 = this;
       if (typeof window === 'undefined' || !window.ResizeObserver || !viewport.container) {
         return;
       }
       viewport._resizeObserver = new ResizeObserver(function () {
-        _this4.resizeStage(viewport);
+        _this5.resizeStage(viewport);
       });
       viewport._resizeObserver.observe(viewport.container);
     }
@@ -376,7 +398,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "setupZoomAndPanHandlers",
     value: function setupZoomAndPanHandlers(viewport) {
-      var _this5 = this;
+      var _this6 = this;
       if (!viewport.stage) return;
 
       // Mouse wheel zoom
@@ -402,7 +424,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           y: pointer.y - mousePointTo.y * clampedScale
         };
         viewport.stage.position(newPos);
-        _this5.drawGrid(viewport);
+        _this6.drawGrid(viewport);
         viewport.stage.batchDraw();
       });
 
@@ -422,7 +444,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         viewport.stage.x(viewport.stage.x() + dx);
         viewport.stage.y(viewport.stage.y() + dy);
         viewport.lastPanPoint = pos;
-        _this5.drawGrid(viewport);
+        _this6.drawGrid(viewport);
         viewport.stage.batchDraw();
       });
       viewport.stage.on('mouseup', function () {
@@ -514,7 +536,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponents",
     value: function renderComponents(viewport) {
-      var _this6 = this;
+      var _this7 = this;
       if (!viewport.componentLayer || !viewport.stage || !this.sceneViewer) return;
       viewport.componentLayer.destroyChildren();
 
@@ -525,19 +547,18 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         return;
       }
 
-      // Only log on significant changes
-      if (components.length !== viewport._lastComponentCount) {
-        console.log("\uD83D\uDCE6 Rendering ".concat(components.length, " components in 2D view (").concat(viewport.viewType, ")"));
-        viewport._lastComponentCount = components.length;
-      }
+      // Track render count for debugging
+      if (viewport._renderCount === undefined) viewport._renderCount = 0;
+      viewport._renderCount++;
       var width = viewport.stage.width();
       var height = viewport.stage.height();
       var centerX = width / 2;
       var centerY = height / 2;
       var scale = viewport.PIXELS_PER_UNIT;
+      console.log("\uD83C\uDFA8 RENDER #".concat(viewport._renderCount, " (").concat(viewport.viewType, "): ").concat(components.length, " components, stage=").concat(width, "x").concat(height, ", center=(").concat(centerX, ", ").concat(centerY, ")"));
       components.forEach(function (component) {
         try {
-          _this6.renderComponent(viewport, component, centerX, centerY, scale);
+          _this7.renderComponent(viewport, component, centerX, centerY, scale);
         } catch (err) {
           console.warn('⚠️ Error rendering component in 2D:', component.name, err);
         }
@@ -568,6 +589,11 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var screenX = centerX + posX * scale;
       var screenY = centerY - posY * scale; // Flip Y for screen coords
 
+      // Debug: Log ALL component positions on first render only
+      if (viewport._renderCount === 1) {
+        console.log("\uD83D\uDD0D [".concat(viewport.viewType, "] ").concat(component.name, ": bbox.z=").concat(bboxCenter.z.toFixed(2), ", posY=").concat(posY.toFixed(2), ", screenY=").concat(screenY.toFixed(0), ", centerY=").concat(centerY.toFixed(0)));
+      }
+
       // Generate unique color for this component
       var colors = this.generateComponentColor(component.id);
 
@@ -646,7 +672,14 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       if (this._bboxCache.has(object.uuid)) {
         return this._bboxCache.get(object.uuid);
       }
-      var box = computeFilteredBoundingBox(object, []);
+
+      // Force matrix updates before computing bbox to ensure world-space accuracy
+      object.updateMatrix();
+      object.updateMatrixWorld(true);
+
+      // Exclude io-devices and connectors to match the stored worldBoundingBox
+      // computed in modelManager.replaceWithGLBModels()
+      var box = computeFilteredBoundingBox(object, ['io-device', 'connector']);
       var result;
       if (box.isEmpty()) {
         // Object has no geometry; fall back to a point at world position
@@ -777,7 +810,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "addComponentInteractions",
     value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label) {
-      var _this7 = this;
+      var _this8 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
 
@@ -806,12 +839,12 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // CLICK EVENT
       rect.on('click', function () {
         if (!viewport.isDragging) {
-          var _this7$sceneViewer;
+          var _this8$sceneViewer;
           console.log("\uD83C\uDFAF Component clicked: ".concat(component.name));
 
           // Use centralPlant API to select component
-          if ((_this7$sceneViewer = _this7.sceneViewer) !== null && _this7$sceneViewer !== void 0 && _this7$sceneViewer.centralPlant && component.uuid) {
-            _this7.sceneViewer.centralPlant.selectComponent(component.uuid);
+          if ((_this8$sceneViewer = _this8.sceneViewer) !== null && _this8$sceneViewer !== void 0 && _this8$sceneViewer.centralPlant && component.uuid) {
+            _this8.sceneViewer.centralPlant.selectComponent(component.uuid);
           }
         }
       });
@@ -841,7 +874,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         var worldOriginY = stageHeight / 2;
 
         // Snap to grid
-        var snappedPos = _this7.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
+        var snappedPos = _this8.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
         componentGroup.position(snappedPos);
         viewport.componentLayer.batchDraw();
       });
@@ -849,7 +882,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // DRAG END
       componentGroup.on('dragend', function () {
         setTimeout(function () {
-          var _this7$sceneViewer2;
+          var _this8$sceneViewer2;
           viewport.isDragging = false;
           var finalPos = componentGroup.position();
           var stageWidth = viewport.stage.width();
@@ -859,17 +892,17 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           var worldOriginY = stageHeight / 2;
 
           // Convert screen to world coordinates
-          var worldCoords = _this7.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
+          var worldCoords = _this8.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
 
           // Calculate new position: delta from old bbox center to new bbox center
           var currentPos = component.position;
-          var newPosition = _this7.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
+          var newPosition = _this8.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
 
           // Apply translation via centralPlant API
           var deltaX = newPosition.x - currentPos.x;
           var deltaY = newPosition.y - currentPos.y;
           var deltaZ = newPosition.z - currentPos.z;
-          if ((_this7$sceneViewer2 = _this7.sceneViewer) !== null && _this7$sceneViewer2 !== void 0 && _this7$sceneViewer2.centralPlant && component.uuid) {
+          if ((_this8$sceneViewer2 = _this8.sceneViewer) !== null && _this8$sceneViewer2 !== void 0 && _this8$sceneViewer2.centralPlant && component.uuid) {
             var success = true;
 
             // Suppress per-axis path updates so the pathfinder only runs once,
@@ -877,32 +910,32 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
             // Running updatePaths() after each individual axis (the default
             // translateComponent behaviour) produces intermediate wrong results on
             // the first drag because no cached fingerprint exists yet to skip them.
-            var wasAutoUpdate = _this7.sceneViewer.shouldUpdatePaths;
-            _this7.sceneViewer.shouldUpdatePaths = false;
+            var wasAutoUpdate = _this8.sceneViewer.shouldUpdatePaths;
+            _this8.sceneViewer.shouldUpdatePaths = false;
             try {
               if (Math.abs(deltaX) > 0.01) {
-                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
+                success = success && _this8.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
               }
               if (Math.abs(deltaY) > 0.01) {
-                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
+                success = success && _this8.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
               }
               if (Math.abs(deltaZ) > 0.01) {
-                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
+                success = success && _this8.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
               }
             } finally {
-              _this7.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
+              _this8.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
             }
-            if (!success && _this7.dragStartPosition) {
+            if (!success && _this8.dragStartPosition) {
               console.warn('⚠️ Failed to translate component, reverting position');
-              componentGroup.position(_this7.dragStartPosition);
+              componentGroup.position(_this8.dragStartPosition);
             } else {
               console.log("\u2705 Component ".concat(component.name, " translated successfully in 2D viewport"));
 
               // Single path update with the final combined position
-              if (wasAutoUpdate && _this7.sceneViewer) {
+              if (wasAutoUpdate && _this8.sceneViewer) {
                 console.log('🔄 Auto-updating paths after 2D viewport translation...');
                 try {
-                  _this7.sceneViewer.updatePaths();
+                  _this8.sceneViewer.updatePaths();
                   console.log('✅ Paths auto-updated successfully from 2D viewport');
                 } catch (error) {
                   console.error('❌ Error auto-updating paths from 2D viewport:', error);
@@ -1155,28 +1188,39 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "refresh",
     value: function refresh() {
-      var _this8 = this;
+      var _this9 = this;
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      // Collect viewport keys to refresh; null means "all viewports"
+      if (key) {
+        this._pendingRefreshKeys.add(key);
+      } else {
+        // null key means refresh all — mark with special sentinel
+        this._pendingRefreshKeys.add('__ALL__');
+      }
+
+      // If already scheduled, the rAF callback will process our newly-added key
       if (this._refreshPending) return;
       this._refreshPending = true;
       requestAnimationFrame(function () {
-        _this8._refreshPending = false;
+        _this9._refreshPending = false;
+
         // Clear per-cycle caches so each component is measured/traversed once per paint
-        _this8._bboxCache.clear();
-        _this8._componentListCache = null;
-        if (key) {
-          var viewport = _this8.viewports.get(key);
-          if (viewport && viewport.isReady) {
-            _this8.renderComponents(viewport);
-          }
-        } else {
-          var _iterator = _createForOfIteratorHelper(_this8.viewports.values()),
+        _this9._bboxCache.clear();
+        _this9._componentListCache = null;
+
+        // Check if we need to refresh all viewports
+        var refreshAll = _this9._pendingRefreshKeys.has('__ALL__');
+        var keysToRefresh = new Set(_this9._pendingRefreshKeys);
+        _this9._pendingRefreshKeys.clear();
+        if (refreshAll) {
+          // Refresh all viewports
+          var _iterator = _createForOfIteratorHelper(_this9.viewports.values()),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var _viewport = _step.value;
-              if (_viewport.isReady) {
-                _this8.renderComponents(_viewport);
+              var viewport = _step.value;
+              if (viewport.isReady) {
+                _this9.renderComponents(viewport);
               }
             }
           } catch (err) {
@@ -1184,6 +1228,23 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           } finally {
             _iterator.f();
           }
+        } else {
+          // Refresh only the specific viewports that were requested
+          var _iterator2 = _createForOfIteratorHelper(keysToRefresh),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var viewportKey = _step2.value;
+              var _viewport = _this9.viewports.get(viewportKey);
+              if (_viewport && _viewport.isReady) {
+                _this9.renderComponents(_viewport);
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
         }
       });
     }
@@ -1204,20 +1265,20 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       }
 
       // Dispose all viewport instances
-      var _iterator2 = _createForOfIteratorHelper(this.viewports.entries()),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(this.viewports.entries()),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = _slicedToArray(_step2.value, 2),
-            key = _step2$value[0],
-            viewport = _step2$value[1];
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _step3$value = _slicedToArray(_step3.value, 2),
+            key = _step3$value[0],
+            viewport = _step3$value[1];
           console.log("\uD83D\uDDD1\uFE0F Disposing viewport: ".concat(key));
           viewport.dispose();
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
       this.viewports.clear();
       this.Konva = null;

package/dist/esm/src/utils/boundingBoxUtils.js

@@ -95,7 +95,12 @@ function computeFilteredBoundingBox(object) {
 
   // Build a Set for O(1) lookups
   var excludeSet = new Set(excludeTypes);
-  object.updateWorldMatrix(false, true);
+
+  // Force matrix updates to ensure world-space coordinates are accurate.
+  // Using force=true ensures matrices are updated even if matrixWorldNeedsUpdate is false,
+  // which can happen after positioning a model before the render loop runs.
+  object.updateMatrix();
+  object.updateMatrixWorld(true);
   object.traverse(function (child) {
     // Only process nodes with geometry (Mesh, SkinnedMesh, etc.)
     if (!child.geometry) return;

package/package.json

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