@2112-lab/central-plant 0.3.11 → 0.3.12

package/dist/bundle/index.js

@@ -35717,6 +35717,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "setupZoomAndPanHandlers",
     value: function setupZoomAndPanHandlers(viewport) {
+      var _this5 = this;
       if (!viewport.stage) return;
 
       // Mouse wheel zoom
@@ -35742,6 +35743,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           y: pointer.y - mousePointTo.y * clampedScale
         };
         viewport.stage.position(newPos);
+        _this5.drawGrid(viewport);
         viewport.stage.batchDraw();
       });
 
@@ -35761,6 +35763,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);
         viewport.stage.batchDraw();
       });
       viewport.stage.on('mouseup', function () {
@@ -35785,33 +35788,40 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var width = viewport.stage.width();
       var height = viewport.stage.height();
       var gridSize = viewport.PIXELS_PER_UNIT;
-
-      // Center of the viewport represents world origin (0,0,0)
-      var centerX = width / 2;
-      var centerY = height / 2;
+      var stageX = viewport.stage.x();
+      var stageY = viewport.stage.y();
+      var scale = viewport.stage.scaleX();
+
+      // World origin sits at (width/2, height/2) in stage-local coordinates
+      var originX = width / 2;
+      var originY = height / 2;
+
+      // Compute the visible area in stage-local coordinates, with 1-cell padding
+      var visLeft = -stageX / scale - gridSize;
+      var visTop = -stageY / scale - gridSize;
+      var visRight = (width - stageX) / scale + gridSize;
+      var visBottom = (height - stageY) / scale + gridSize;
       var gridGroup = new this.Konva.Group();
-
-      // Draw vertical lines centered at origin
-      var startX = centerX % gridSize - gridSize;
       var gridColor = '#dddddd';
-      for (var x = startX; x < width; x += gridSize) {
-        var distFromCenter = Math.abs(x - centerX);
-        var isOriginLine = distFromCenter < 1;
+
+      // Draw vertical lines — start at the first grid column left of the visible area
+      var firstX = Math.floor((visLeft - originX) / gridSize) * gridSize + originX;
+      for (var x = firstX; x <= visRight; x += gridSize) {
+        var isOriginLine = Math.abs(x - originX) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [x, 0, x, height],
+          points: [x, visTop, x, visBottom],
           stroke: gridColor,
           strokeWidth: isOriginLine ? 2 : 1,
           listening: false
         }));
       }
 
-      // Draw horizontal lines centered at origin
-      var startY = centerY % gridSize - gridSize;
-      for (var y = startY; y < height; y += gridSize) {
-        var _distFromCenter = Math.abs(y - centerY);
-        var _isOriginLine = _distFromCenter < 1;
+      // Draw horizontal lines — start at the first grid row above the visible area
+      var firstY = Math.floor((visTop - originY) / gridSize) * gridSize + originY;
+      for (var y = firstY; y <= visBottom; y += gridSize) {
+        var _isOriginLine = Math.abs(y - originY) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [0, y, width, y],
+          points: [visLeft, y, visRight, y],
           stroke: gridColor,
           strokeWidth: _isOriginLine ? 2 : 1,
           listening: false
@@ -35821,14 +35831,14 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // Draw center crosshair at world origin
       var crosshairSize = gridSize;
       gridGroup.add(new this.Konva.Line({
-        points: [centerX, centerY - crosshairSize, centerX, centerY + crosshairSize],
+        points: [originX, originY - crosshairSize, originX, originY + crosshairSize],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
         dash: [5, 5]
       }));
       gridGroup.add(new this.Konva.Line({
-        points: [centerX - crosshairSize, centerY, centerX + crosshairSize, centerY],
+        points: [originX - crosshairSize, originY, originX + crosshairSize, originY],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
@@ -35845,7 +35855,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponents",
     value: function renderComponents(viewport) {
-      var _this5 = this;
+      var _this6 = this;
       if (!viewport.componentLayer || !viewport.stage || !this.sceneViewer) return;
       viewport.componentLayer.destroyChildren();
 
@@ -35868,7 +35878,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var scale = viewport.PIXELS_PER_UNIT;
       components.forEach(function (component) {
         try {
-          _this5.renderComponent(viewport, component, centerX, centerY, scale);
+          _this6.renderComponent(viewport, component, centerX, centerY, scale);
         } catch (err) {
           console.warn('⚠️ Error rendering component in 2D:', component.name, err);
         }
@@ -35928,18 +35938,19 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         draggable: false
       });
 
-      // Add label
+      // Add label (hidden by default; shown on hover)
       var label = new this.Konva.Text({
         x: -rectWidth / 2,
         y: -rectHeight / 2 - 20,
         text: component.name || 'Component',
         fontSize: 12,
         fill: '#333',
-        listening: false
+        listening: false,
+        visible: false
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
@@ -36106,8 +36117,8 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
-      var _this6 = this;
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label) {
+      var _this7 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
 
@@ -36118,6 +36129,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke('#007bff');
           rect.strokeWidth(3);
           viewport.stage.container().style.cursor = 'grab';
+          if (label) label.visible(true);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -36127,6 +36139,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke(colors.stroke);
           rect.strokeWidth(2);
           viewport.stage.container().style.cursor = 'default';
+          if (label) label.visible(false);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -36134,12 +36147,12 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // CLICK EVENT
       rect.on('click', function () {
         if (!viewport.isDragging) {
-          var _this6$sceneViewer;
+          var _this7$sceneViewer;
           console.log("\uD83C\uDFAF Component clicked: ".concat(component.name));
 
           // Use centralPlant API to select component
-          if ((_this6$sceneViewer = _this6.sceneViewer) !== null && _this6$sceneViewer !== void 0 && _this6$sceneViewer.centralPlant && component.uuid) {
-            _this6.sceneViewer.centralPlant.selectComponent(component.uuid);
+          if ((_this7$sceneViewer = _this7.sceneViewer) !== null && _this7$sceneViewer !== void 0 && _this7$sceneViewer.centralPlant && component.uuid) {
+            _this7.sceneViewer.centralPlant.selectComponent(component.uuid);
           }
         }
       });
@@ -36169,7 +36182,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         var worldOriginY = stageHeight / 2;
 
         // Snap to grid
-        var snappedPos = _this6.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
+        var snappedPos = _this7.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
         componentGroup.position(snappedPos);
         viewport.componentLayer.batchDraw();
       });
@@ -36177,7 +36190,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // DRAG END
       componentGroup.on('dragend', function () {
         setTimeout(function () {
-          var _this6$sceneViewer2;
+          var _this7$sceneViewer2;
           viewport.isDragging = false;
           var finalPos = componentGroup.position();
           var stageWidth = viewport.stage.width();
@@ -36187,17 +36200,17 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           var worldOriginY = stageHeight / 2;
 
           // Convert screen to world coordinates
-          var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
+          var worldCoords = _this7.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 = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
+          var newPosition = _this7.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 ((_this6$sceneViewer2 = _this6.sceneViewer) !== null && _this6$sceneViewer2 !== void 0 && _this6$sceneViewer2.centralPlant && component.uuid) {
+          if ((_this7$sceneViewer2 = _this7.sceneViewer) !== null && _this7$sceneViewer2 !== void 0 && _this7$sceneViewer2.centralPlant && component.uuid) {
             var success = true;
 
             // Suppress per-axis path updates so the pathfinder only runs once,
@@ -36205,32 +36218,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 = _this6.sceneViewer.shouldUpdatePaths;
-            _this6.sceneViewer.shouldUpdatePaths = false;
+            var wasAutoUpdate = _this7.sceneViewer.shouldUpdatePaths;
+            _this7.sceneViewer.shouldUpdatePaths = false;
             try {
               if (Math.abs(deltaX) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
               }
               if (Math.abs(deltaY) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
               }
               if (Math.abs(deltaZ) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
               }
             } finally {
-              _this6.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
+              _this7.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
             }
-            if (!success && _this6.dragStartPosition) {
+            if (!success && _this7.dragStartPosition) {
               console.warn('⚠️ Failed to translate component, reverting position');
-              componentGroup.position(_this6.dragStartPosition);
+              componentGroup.position(_this7.dragStartPosition);
             } else {
               console.log("\u2705 Component ".concat(component.name, " translated successfully in 2D viewport"));
 
               // Single path update with the final combined position
-              if (wasAutoUpdate && _this6.sceneViewer) {
+              if (wasAutoUpdate && _this7.sceneViewer) {
                 console.log('🔄 Auto-updating paths after 2D viewport translation...');
                 try {
-                  _this6.sceneViewer.updatePaths();
+                  _this7.sceneViewer.updatePaths();
                   console.log('✅ Paths auto-updated successfully from 2D viewport');
                 } catch (error) {
                   console.error('❌ Error auto-updating paths from 2D viewport:', error);
@@ -36483,28 +36496,28 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "refresh",
     value: function refresh() {
-      var _this7 = this;
+      var _this8 = this;
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (this._refreshPending) return;
       this._refreshPending = true;
       requestAnimationFrame(function () {
-        _this7._refreshPending = false;
+        _this8._refreshPending = false;
         // Clear per-cycle caches so each component is measured/traversed once per paint
-        _this7._bboxCache.clear();
-        _this7._componentListCache = null;
+        _this8._bboxCache.clear();
+        _this8._componentListCache = null;
         if (key) {
-          var viewport = _this7.viewports.get(key);
+          var viewport = _this8.viewports.get(key);
           if (viewport && viewport.isReady) {
-            _this7.renderComponents(viewport);
+            _this8.renderComponents(viewport);
           }
         } else {
-          var _iterator = _createForOfIteratorHelper(_this7.viewports.values()),
+          var _iterator = _createForOfIteratorHelper(_this8.viewports.values()),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var _viewport = _step.value;
               if (_viewport.isReady) {
-                _this7.renderComponents(_viewport);
+                _this8.renderComponents(_viewport);
               }
             }
           } catch (err) {
@@ -37946,7 +37959,7 @@ var CentralPlant = /*#__PURE__*/function (_BaseDisposable) {
    * Initialize the CentralPlant manager
    * 
    * @constructor
-   * @version 0.3.11
+   * @version 0.3.12
    * @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.11
+   * @version 0.3.12
    * @updated 2025-10-22
    * 
    * @description Creates a new CentralPlant instance and initializes internal managers and utilities.

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

@@ -400,6 +400,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "setupZoomAndPanHandlers",
     value: function setupZoomAndPanHandlers(viewport) {
+      var _this5 = this;
       if (!viewport.stage) return;
 
       // Mouse wheel zoom
@@ -425,6 +426,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           y: pointer.y - mousePointTo.y * clampedScale
         };
         viewport.stage.position(newPos);
+        _this5.drawGrid(viewport);
         viewport.stage.batchDraw();
       });
 
@@ -444,6 +446,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);
         viewport.stage.batchDraw();
       });
       viewport.stage.on('mouseup', function () {
@@ -468,33 +471,40 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var width = viewport.stage.width();
       var height = viewport.stage.height();
       var gridSize = viewport.PIXELS_PER_UNIT;
-
-      // Center of the viewport represents world origin (0,0,0)
-      var centerX = width / 2;
-      var centerY = height / 2;
+      var stageX = viewport.stage.x();
+      var stageY = viewport.stage.y();
+      var scale = viewport.stage.scaleX();
+
+      // World origin sits at (width/2, height/2) in stage-local coordinates
+      var originX = width / 2;
+      var originY = height / 2;
+
+      // Compute the visible area in stage-local coordinates, with 1-cell padding
+      var visLeft = -stageX / scale - gridSize;
+      var visTop = -stageY / scale - gridSize;
+      var visRight = (width - stageX) / scale + gridSize;
+      var visBottom = (height - stageY) / scale + gridSize;
       var gridGroup = new this.Konva.Group();
-
-      // Draw vertical lines centered at origin
-      var startX = centerX % gridSize - gridSize;
       var gridColor = '#dddddd';
-      for (var x = startX; x < width; x += gridSize) {
-        var distFromCenter = Math.abs(x - centerX);
-        var isOriginLine = distFromCenter < 1;
+
+      // Draw vertical lines — start at the first grid column left of the visible area
+      var firstX = Math.floor((visLeft - originX) / gridSize) * gridSize + originX;
+      for (var x = firstX; x <= visRight; x += gridSize) {
+        var isOriginLine = Math.abs(x - originX) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [x, 0, x, height],
+          points: [x, visTop, x, visBottom],
           stroke: gridColor,
           strokeWidth: isOriginLine ? 2 : 1,
           listening: false
         }));
       }
 
-      // Draw horizontal lines centered at origin
-      var startY = centerY % gridSize - gridSize;
-      for (var y = startY; y < height; y += gridSize) {
-        var _distFromCenter = Math.abs(y - centerY);
-        var _isOriginLine = _distFromCenter < 1;
+      // Draw horizontal lines — start at the first grid row above the visible area
+      var firstY = Math.floor((visTop - originY) / gridSize) * gridSize + originY;
+      for (var y = firstY; y <= visBottom; y += gridSize) {
+        var _isOriginLine = Math.abs(y - originY) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [0, y, width, y],
+          points: [visLeft, y, visRight, y],
           stroke: gridColor,
           strokeWidth: _isOriginLine ? 2 : 1,
           listening: false
@@ -504,14 +514,14 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // Draw center crosshair at world origin
       var crosshairSize = gridSize;
       gridGroup.add(new this.Konva.Line({
-        points: [centerX, centerY - crosshairSize, centerX, centerY + crosshairSize],
+        points: [originX, originY - crosshairSize, originX, originY + crosshairSize],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
         dash: [5, 5]
       }));
       gridGroup.add(new this.Konva.Line({
-        points: [centerX - crosshairSize, centerY, centerX + crosshairSize, centerY],
+        points: [originX - crosshairSize, originY, originX + crosshairSize, originY],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
@@ -528,7 +538,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponents",
     value: function renderComponents(viewport) {
-      var _this5 = this;
+      var _this6 = this;
       if (!viewport.componentLayer || !viewport.stage || !this.sceneViewer) return;
       viewport.componentLayer.destroyChildren();
 
@@ -551,7 +561,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var scale = viewport.PIXELS_PER_UNIT;
       components.forEach(function (component) {
         try {
-          _this5.renderComponent(viewport, component, centerX, centerY, scale);
+          _this6.renderComponent(viewport, component, centerX, centerY, scale);
         } catch (err) {
           console.warn('⚠️ Error rendering component in 2D:', component.name, err);
         }
@@ -611,18 +621,19 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         draggable: false
       });
 
-      // Add label
+      // Add label (hidden by default; shown on hover)
       var label = new this.Konva.Text({
         x: -rectWidth / 2,
         y: -rectHeight / 2 - 20,
         text: component.name || 'Component',
         fontSize: 12,
         fill: '#333',
-        listening: false
+        listening: false,
+        visible: false
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
@@ -789,8 +800,8 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
-      var _this6 = this;
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label) {
+      var _this7 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
 
@@ -801,6 +812,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke('#007bff');
           rect.strokeWidth(3);
           viewport.stage.container().style.cursor = 'grab';
+          if (label) label.visible(true);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -810,6 +822,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke(colors.stroke);
           rect.strokeWidth(2);
           viewport.stage.container().style.cursor = 'default';
+          if (label) label.visible(false);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -817,12 +830,12 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // CLICK EVENT
       rect.on('click', function () {
         if (!viewport.isDragging) {
-          var _this6$sceneViewer;
+          var _this7$sceneViewer;
           console.log("\uD83C\uDFAF Component clicked: ".concat(component.name));
 
           // Use centralPlant API to select component
-          if ((_this6$sceneViewer = _this6.sceneViewer) !== null && _this6$sceneViewer !== void 0 && _this6$sceneViewer.centralPlant && component.uuid) {
-            _this6.sceneViewer.centralPlant.selectComponent(component.uuid);
+          if ((_this7$sceneViewer = _this7.sceneViewer) !== null && _this7$sceneViewer !== void 0 && _this7$sceneViewer.centralPlant && component.uuid) {
+            _this7.sceneViewer.centralPlant.selectComponent(component.uuid);
           }
         }
       });
@@ -852,7 +865,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         var worldOriginY = stageHeight / 2;
 
         // Snap to grid
-        var snappedPos = _this6.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
+        var snappedPos = _this7.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
         componentGroup.position(snappedPos);
         viewport.componentLayer.batchDraw();
       });
@@ -860,7 +873,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // DRAG END
       componentGroup.on('dragend', function () {
         setTimeout(function () {
-          var _this6$sceneViewer2;
+          var _this7$sceneViewer2;
           viewport.isDragging = false;
           var finalPos = componentGroup.position();
           var stageWidth = viewport.stage.width();
@@ -870,17 +883,17 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           var worldOriginY = stageHeight / 2;
 
           // Convert screen to world coordinates
-          var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
+          var worldCoords = _this7.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 = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
+          var newPosition = _this7.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 ((_this6$sceneViewer2 = _this6.sceneViewer) !== null && _this6$sceneViewer2 !== void 0 && _this6$sceneViewer2.centralPlant && component.uuid) {
+          if ((_this7$sceneViewer2 = _this7.sceneViewer) !== null && _this7$sceneViewer2 !== void 0 && _this7$sceneViewer2.centralPlant && component.uuid) {
             var success = true;
 
             // Suppress per-axis path updates so the pathfinder only runs once,
@@ -888,32 +901,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 = _this6.sceneViewer.shouldUpdatePaths;
-            _this6.sceneViewer.shouldUpdatePaths = false;
+            var wasAutoUpdate = _this7.sceneViewer.shouldUpdatePaths;
+            _this7.sceneViewer.shouldUpdatePaths = false;
             try {
               if (Math.abs(deltaX) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
               }
               if (Math.abs(deltaY) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
               }
               if (Math.abs(deltaZ) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
               }
             } finally {
-              _this6.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
+              _this7.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
             }
-            if (!success && _this6.dragStartPosition) {
+            if (!success && _this7.dragStartPosition) {
               console.warn('⚠️ Failed to translate component, reverting position');
-              componentGroup.position(_this6.dragStartPosition);
+              componentGroup.position(_this7.dragStartPosition);
             } else {
               console.log("\u2705 Component ".concat(component.name, " translated successfully in 2D viewport"));
 
               // Single path update with the final combined position
-              if (wasAutoUpdate && _this6.sceneViewer) {
+              if (wasAutoUpdate && _this7.sceneViewer) {
                 console.log('🔄 Auto-updating paths after 2D viewport translation...');
                 try {
-                  _this6.sceneViewer.updatePaths();
+                  _this7.sceneViewer.updatePaths();
                   console.log('✅ Paths auto-updated successfully from 2D viewport');
                 } catch (error) {
                   console.error('❌ Error auto-updating paths from 2D viewport:', error);
@@ -1166,28 +1179,28 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "refresh",
     value: function refresh() {
-      var _this7 = this;
+      var _this8 = this;
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (this._refreshPending) return;
       this._refreshPending = true;
       requestAnimationFrame(function () {
-        _this7._refreshPending = false;
+        _this8._refreshPending = false;
         // Clear per-cycle caches so each component is measured/traversed once per paint
-        _this7._bboxCache.clear();
-        _this7._componentListCache = null;
+        _this8._bboxCache.clear();
+        _this8._componentListCache = null;
         if (key) {
-          var viewport = _this7.viewports.get(key);
+          var viewport = _this8.viewports.get(key);
           if (viewport && viewport.isReady) {
-            _this7.renderComponents(viewport);
+            _this8.renderComponents(viewport);
           }
         } else {
-          var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(_this7.viewports.values()),
+          var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(_this8.viewports.values()),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var _viewport = _step.value;
               if (_viewport.isReady) {
-                _this7.renderComponents(_viewport);
+                _this8.renderComponents(_viewport);
               }
             }
           } catch (err) {

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

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

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

@@ -376,6 +376,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "setupZoomAndPanHandlers",
     value: function setupZoomAndPanHandlers(viewport) {
+      var _this5 = this;
       if (!viewport.stage) return;
 
       // Mouse wheel zoom
@@ -401,6 +402,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           y: pointer.y - mousePointTo.y * clampedScale
         };
         viewport.stage.position(newPos);
+        _this5.drawGrid(viewport);
         viewport.stage.batchDraw();
       });
 
@@ -420,6 +422,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);
         viewport.stage.batchDraw();
       });
       viewport.stage.on('mouseup', function () {
@@ -444,33 +447,40 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var width = viewport.stage.width();
       var height = viewport.stage.height();
       var gridSize = viewport.PIXELS_PER_UNIT;
-
-      // Center of the viewport represents world origin (0,0,0)
-      var centerX = width / 2;
-      var centerY = height / 2;
+      var stageX = viewport.stage.x();
+      var stageY = viewport.stage.y();
+      var scale = viewport.stage.scaleX();
+
+      // World origin sits at (width/2, height/2) in stage-local coordinates
+      var originX = width / 2;
+      var originY = height / 2;
+
+      // Compute the visible area in stage-local coordinates, with 1-cell padding
+      var visLeft = -stageX / scale - gridSize;
+      var visTop = -stageY / scale - gridSize;
+      var visRight = (width - stageX) / scale + gridSize;
+      var visBottom = (height - stageY) / scale + gridSize;
       var gridGroup = new this.Konva.Group();
-
-      // Draw vertical lines centered at origin
-      var startX = centerX % gridSize - gridSize;
       var gridColor = '#dddddd';
-      for (var x = startX; x < width; x += gridSize) {
-        var distFromCenter = Math.abs(x - centerX);
-        var isOriginLine = distFromCenter < 1;
+
+      // Draw vertical lines — start at the first grid column left of the visible area
+      var firstX = Math.floor((visLeft - originX) / gridSize) * gridSize + originX;
+      for (var x = firstX; x <= visRight; x += gridSize) {
+        var isOriginLine = Math.abs(x - originX) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [x, 0, x, height],
+          points: [x, visTop, x, visBottom],
           stroke: gridColor,
           strokeWidth: isOriginLine ? 2 : 1,
           listening: false
         }));
       }
 
-      // Draw horizontal lines centered at origin
-      var startY = centerY % gridSize - gridSize;
-      for (var y = startY; y < height; y += gridSize) {
-        var _distFromCenter = Math.abs(y - centerY);
-        var _isOriginLine = _distFromCenter < 1;
+      // Draw horizontal lines — start at the first grid row above the visible area
+      var firstY = Math.floor((visTop - originY) / gridSize) * gridSize + originY;
+      for (var y = firstY; y <= visBottom; y += gridSize) {
+        var _isOriginLine = Math.abs(y - originY) < 0.5;
         gridGroup.add(new this.Konva.Line({
-          points: [0, y, width, y],
+          points: [visLeft, y, visRight, y],
           stroke: gridColor,
           strokeWidth: _isOriginLine ? 2 : 1,
           listening: false
@@ -480,14 +490,14 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // Draw center crosshair at world origin
       var crosshairSize = gridSize;
       gridGroup.add(new this.Konva.Line({
-        points: [centerX, centerY - crosshairSize, centerX, centerY + crosshairSize],
+        points: [originX, originY - crosshairSize, originX, originY + crosshairSize],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
         dash: [5, 5]
       }));
       gridGroup.add(new this.Konva.Line({
-        points: [centerX - crosshairSize, centerY, centerX + crosshairSize, centerY],
+        points: [originX - crosshairSize, originY, originX + crosshairSize, originY],
         stroke: '#333',
         strokeWidth: 1,
         listening: false,
@@ -504,7 +514,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "renderComponents",
     value: function renderComponents(viewport) {
-      var _this5 = this;
+      var _this6 = this;
       if (!viewport.componentLayer || !viewport.stage || !this.sceneViewer) return;
       viewport.componentLayer.destroyChildren();
 
@@ -527,7 +537,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       var scale = viewport.PIXELS_PER_UNIT;
       components.forEach(function (component) {
         try {
-          _this5.renderComponent(viewport, component, centerX, centerY, scale);
+          _this6.renderComponent(viewport, component, centerX, centerY, scale);
         } catch (err) {
           console.warn('⚠️ Error rendering component in 2D:', component.name, err);
         }
@@ -587,18 +597,19 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         draggable: false
       });
 
-      // Add label
+      // Add label (hidden by default; shown on hover)
       var label = new this.Konva.Text({
         x: -rectWidth / 2,
         y: -rectHeight / 2 - 20,
         text: component.name || 'Component',
         fontSize: 12,
         fill: '#333',
-        listening: false
+        listening: false,
+        visible: false
       });
 
       // Add mouse event handlers
-      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter);
+      this.addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label);
       componentGroup.add(rect);
       componentGroup.add(label);
       viewport.componentLayer.add(componentGroup);
@@ -765,8 +776,8 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
      */
   }, {
     key: "addComponentInteractions",
-    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter) {
-      var _this6 = this;
+    value: function addComponentInteractions(viewport, rect, componentGroup, component, worldWidth, worldDepth, worldHeight, bboxCenter, label) {
+      var _this7 = this;
       if (!this.Konva) return;
       var colors = this.generateComponentColor(component.id);
 
@@ -777,6 +788,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke('#007bff');
           rect.strokeWidth(3);
           viewport.stage.container().style.cursor = 'grab';
+          if (label) label.visible(true);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -786,6 +798,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           rect.stroke(colors.stroke);
           rect.strokeWidth(2);
           viewport.stage.container().style.cursor = 'default';
+          if (label) label.visible(false);
           viewport.componentLayer.batchDraw();
         }
       });
@@ -793,12 +806,12 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // CLICK EVENT
       rect.on('click', function () {
         if (!viewport.isDragging) {
-          var _this6$sceneViewer;
+          var _this7$sceneViewer;
           console.log("\uD83C\uDFAF Component clicked: ".concat(component.name));
 
           // Use centralPlant API to select component
-          if ((_this6$sceneViewer = _this6.sceneViewer) !== null && _this6$sceneViewer !== void 0 && _this6$sceneViewer.centralPlant && component.uuid) {
-            _this6.sceneViewer.centralPlant.selectComponent(component.uuid);
+          if ((_this7$sceneViewer = _this7.sceneViewer) !== null && _this7$sceneViewer !== void 0 && _this7$sceneViewer.centralPlant && component.uuid) {
+            _this7.sceneViewer.centralPlant.selectComponent(component.uuid);
           }
         }
       });
@@ -828,7 +841,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
         var worldOriginY = stageHeight / 2;
 
         // Snap to grid
-        var snappedPos = _this6.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
+        var snappedPos = _this7.snapScreenToGrid(viewport, currentPos.x, currentPos.y, scale, worldOriginX, worldOriginY);
         componentGroup.position(snappedPos);
         viewport.componentLayer.batchDraw();
       });
@@ -836,7 +849,7 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
       // DRAG END
       componentGroup.on('dragend', function () {
         setTimeout(function () {
-          var _this6$sceneViewer2;
+          var _this7$sceneViewer2;
           viewport.isDragging = false;
           var finalPos = componentGroup.position();
           var stageWidth = viewport.stage.width();
@@ -846,17 +859,17 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
           var worldOriginY = stageHeight / 2;
 
           // Convert screen to world coordinates
-          var worldCoords = _this6.screenToWorldCoords(viewport, finalPos.x, finalPos.y, scale, worldOriginX, worldOriginY);
+          var worldCoords = _this7.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 = _this6.worldCoordsToObjectPosition(viewport, worldCoords, currentPos, bboxCenter);
+          var newPosition = _this7.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 ((_this6$sceneViewer2 = _this6.sceneViewer) !== null && _this6$sceneViewer2 !== void 0 && _this6$sceneViewer2.centralPlant && component.uuid) {
+          if ((_this7$sceneViewer2 = _this7.sceneViewer) !== null && _this7$sceneViewer2 !== void 0 && _this7$sceneViewer2.centralPlant && component.uuid) {
             var success = true;
 
             // Suppress per-axis path updates so the pathfinder only runs once,
@@ -864,32 +877,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 = _this6.sceneViewer.shouldUpdatePaths;
-            _this6.sceneViewer.shouldUpdatePaths = false;
+            var wasAutoUpdate = _this7.sceneViewer.shouldUpdatePaths;
+            _this7.sceneViewer.shouldUpdatePaths = false;
             try {
               if (Math.abs(deltaX) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'x', deltaX);
               }
               if (Math.abs(deltaY) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'y', deltaY);
               }
               if (Math.abs(deltaZ) > 0.01) {
-                success = success && _this6.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
+                success = success && _this7.sceneViewer.centralPlant.translate(component.uuid, 'z', deltaZ);
               }
             } finally {
-              _this6.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
+              _this7.sceneViewer.shouldUpdatePaths = wasAutoUpdate;
             }
-            if (!success && _this6.dragStartPosition) {
+            if (!success && _this7.dragStartPosition) {
               console.warn('⚠️ Failed to translate component, reverting position');
-              componentGroup.position(_this6.dragStartPosition);
+              componentGroup.position(_this7.dragStartPosition);
             } else {
               console.log("\u2705 Component ".concat(component.name, " translated successfully in 2D viewport"));
 
               // Single path update with the final combined position
-              if (wasAutoUpdate && _this6.sceneViewer) {
+              if (wasAutoUpdate && _this7.sceneViewer) {
                 console.log('🔄 Auto-updating paths after 2D viewport translation...');
                 try {
-                  _this6.sceneViewer.updatePaths();
+                  _this7.sceneViewer.updatePaths();
                   console.log('✅ Paths auto-updated successfully from 2D viewport');
                 } catch (error) {
                   console.error('❌ Error auto-updating paths from 2D viewport:', error);
@@ -1142,28 +1155,28 @@ var Viewport2DManager = /*#__PURE__*/function (_BaseDisposable2) {
   }, {
     key: "refresh",
     value: function refresh() {
-      var _this7 = this;
+      var _this8 = this;
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (this._refreshPending) return;
       this._refreshPending = true;
       requestAnimationFrame(function () {
-        _this7._refreshPending = false;
+        _this8._refreshPending = false;
         // Clear per-cycle caches so each component is measured/traversed once per paint
-        _this7._bboxCache.clear();
-        _this7._componentListCache = null;
+        _this8._bboxCache.clear();
+        _this8._componentListCache = null;
         if (key) {
-          var viewport = _this7.viewports.get(key);
+          var viewport = _this8.viewports.get(key);
           if (viewport && viewport.isReady) {
-            _this7.renderComponents(viewport);
+            _this8.renderComponents(viewport);
           }
         } else {
-          var _iterator = _createForOfIteratorHelper(_this7.viewports.values()),
+          var _iterator = _createForOfIteratorHelper(_this8.viewports.values()),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var _viewport = _step.value;
               if (_viewport.isReady) {
-                _this7.renderComponents(_viewport);
+                _this8.renderComponents(_viewport);
               }
             }
           } catch (err) {

package/package.json

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