@2112-lab/central-plant 0.1.78 → 0.1.80

package/dist/esm/src/managers/environment/textureConfig.js

@@ -1,6 +1,8 @@
-import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2, construct as _construct, toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, construct as _construct, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as THREE from 'three';
 
+/** Maximum anisotropy to apply (caps GPU memory for mip storage) */
+var MAX_ANISOTROPY = 4;
 var TEXTURE_SETS = {
   // Light metallic texture using the gravel_embedded_concrete with metallic properties
   light_metal: {
@@ -137,10 +139,29 @@ function _loadTextureSet() {
           return Promise.all(promises);
         case 2:
           loadedTextures = _context2.v;
-          textureMap = Object.fromEntries(loadedTextures); // Apply texture settings
-          Object.values(textureMap).forEach(function (texture) {
+          textureMap = Object.fromEntries(loadedTextures); // Apply texture settings with memory-conscious defaults
+          Object.entries(textureMap).forEach(function (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 2),
+              type = _ref5[0],
+              texture = _ref5[1];
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
             texture.repeat.set(textureSet.repeat.x, textureSet.repeat.y);
+
+            // Correct colour-space: diffuse is sRGB, everything else is linear data
+            if (type === 'diffuse') {
+              texture.colorSpace = THREE.SRGBColorSpace;
+            } else {
+              texture.colorSpace = THREE.LinearSRGBColorSpace;
+            }
+
+            // Roughness maps don't benefit much from mipmaps — skip them to save GPU memory
+            if (type === 'roughness') {
+              texture.generateMipmaps = false;
+              texture.minFilter = THREE.LinearFilter;
+            }
+
+            // Cap anisotropy to balance quality vs memory
+            texture.anisotropy = MAX_ANISOTROPY;
           });
           console.log("Texture set ".concat(setName, " loaded successfully"));
           return _context2.a(2, {

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

@@ -58,18 +58,32 @@ var AnimationManager = /*#__PURE__*/function (_BaseDisposable) {
       if (sceneViewer.performanceMonitorManager) {
         sceneViewer.performanceMonitorManager.beginFrame();
       }
-
-      // Update controls
-      sceneViewer.controls.update();
-
-      // Render the scene
-      sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+      try {
+        // Update controls
+        sceneViewer.controls.update();
+
+        // Render the scene
+        sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+      } catch (renderError) {
+        // Catch WebGL or rendering errors to prevent the animation loop from
+        // producing a permanent white screen. Log once and continue so that
+        // subsequent frames can recover if the problematic object is removed.
+        if (!this._hasLoggedRenderError) {
+          console.error('❌ AnimationManager: Render error caught — scene may contain disposed resources:', renderError);
+          this._hasLoggedRenderError = true;
+        }
+      }
 
       // Render tooltips if tooltipsManager exists
       if (sceneViewer.tooltipsManager) {
         sceneViewer.tooltipsManager.render();
       }
 
+      // Update component tooltip screen position
+      if (sceneViewer.componentTooltipManager) {
+        sceneViewer.componentTooltipManager.update();
+      }
+
       // End performance monitoring frame
       if (sceneViewer.performanceMonitorManager) {
         sceneViewer.performanceMonitorManager.endFrame();

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

@@ -0,0 +1,316 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as THREE from 'three';
+import { BaseDisposable } from '../../core/baseDisposable.js';
+
+// ---------------------------------------------------------------------------
+// Inline styles (injected once into the document head)
+// ---------------------------------------------------------------------------
+var TOOLTIP_STYLES = "\n.cp-tooltip {\n  position: absolute;\n  pointer-events: auto;\n  z-index: 10000;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.4;\n  user-select: none;\n  min-width: 200px;\n  max-width: 280px;\n  transform: translate(-50%, -100%);\n  margin-top: -12px;\n  transition: opacity 0.15s ease;\n}\n\n.cp-tooltip__card {\n  background: rgba(28, 32, 40, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__header {\n  padding: 10px 14px;\n  font-weight: 600;\n  font-size: 14px;\n  color: #e8ecf1;\n  background: rgba(255, 255, 255, 0.04);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  letter-spacing: 0.2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 I/O Devices section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__io-section {\n  position: relative;\n}\n\n.cp-tooltip__io-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  color: #a4adba;\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.cp-tooltip__io-trigger:hover {\n  background: rgba(255, 255, 255, 0.06);\n  color: #e8ecf1;\n}\n\n.cp-tooltip__io-trigger-label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.6px;\n  font-weight: 500;\n}\n\n.cp-tooltip__io-arrow {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.cp-tooltip__io-section.expanded .cp-tooltip__io-arrow {\n  transform: rotate(90deg);\n}\n\n/* \u2500\u2500 Device list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__device-list {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.25s ease;\n}\n\n.cp-tooltip__io-section.expanded .cp-tooltip__device-list {\n  max-height: 300px;\n}\n\n.cp-tooltip__device-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 14px 6px 20px;\n  color: #c1c8d1;\n  font-size: 12px;\n  border-top: 1px solid rgba(255, 255, 255, 0.04);\n  transition: background 0.1s ease;\n}\n\n.cp-tooltip__device-item:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n.cp-tooltip__device-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #4fc3f7;\n  flex-shrink: 0;\n}\n\n.cp-tooltip__device-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__no-devices {\n  padding: 8px 14px;\n  color: #6b7280;\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* \u2500\u2500 Caret arrow pointing down \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.cp-tooltip__caret {\n  width: 0;\n  height: 0;\n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-top: 7px solid rgba(28, 32, 40, 0.95);\n  margin: 0 auto;\n  position: relative;\n  top: -1px;\n}\n";
+var ComponentTooltipManager = /*#__PURE__*/function (_BaseDisposable) {
+  /**
+   * @param {Object} sceneViewer - The sceneViewer instance
+   */
+  function ComponentTooltipManager(sceneViewer) {
+    var _this;
+    _classCallCheck(this, ComponentTooltipManager);
+    _this = _callSuper(this, ComponentTooltipManager);
+    _this.sceneViewer = sceneViewer;
+    _this.selectedObject = null;
+    _this.tooltipEl = null;
+    _this._styleInjected = false;
+    _this._ioExpanded = false;
+    _this._injectStyles();
+    return _this;
+  }
+
+  // -----------------------------------------------------------------------
+  // Lifecycle
+  // -----------------------------------------------------------------------
+
+  /**
+   * Called automatically by BaseDisposable.dispose()
+   * @override
+   */
+  _inherits(ComponentTooltipManager, _BaseDisposable);
+  return _createClass(ComponentTooltipManager, [{
+    key: "_doDispose",
+    value: function _doDispose() {
+      this.hide();
+      this._removeStyleTag();
+      this.nullifyProperties('sceneViewer', 'selectedObject', 'tooltipEl');
+    }
+
+    // -----------------------------------------------------------------------
+    // Public API
+    // -----------------------------------------------------------------------
+
+    /**
+     * Should be called when an object is selected or deselected.
+     * @param {THREE.Object3D|null} object
+     */
+  }, {
+    key: "onSelectionChanged",
+    value: function onSelectionChanged(object) {
+      var _object$userData;
+      if (!object) {
+        this.hide();
+        return;
+      }
+      var objectType = (_object$userData = object.userData) === null || _object$userData === void 0 ? void 0 : _object$userData.objectType;
+      if (objectType !== 'component') {
+        this.hide();
+        return;
+      }
+      this.selectedObject = object;
+      this._ioExpanded = false;
+      this._buildTooltip(object);
+    }
+
+    /**
+     * Update tooltip screen position. Call once per frame (from the animation loop).
+     */
+  }, {
+    key: "update",
+    value: function update() {
+      if (!this.tooltipEl || !this.selectedObject) return;
+      this._positionTooltip();
+    }
+
+    /**
+     * Remove the tooltip from the DOM.
+     */
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.tooltipEl) {
+        this.tooltipEl.remove();
+        this.tooltipEl = null;
+      }
+      this.selectedObject = null;
+      this._ioExpanded = false;
+    }
+
+    // -----------------------------------------------------------------------
+    // Internal — build
+    // -----------------------------------------------------------------------
+
+    /** Inject the stylesheet once into the document head */
+  }, {
+    key: "_injectStyles",
+    value: function _injectStyles() {
+      if (this._styleInjected) return;
+      this._styleTag = document.createElement('style');
+      this._styleTag.setAttribute('data-cp-tooltip', '');
+      this._styleTag.textContent = TOOLTIP_STYLES;
+      document.head.appendChild(this._styleTag);
+      this._styleInjected = true;
+      this.registerDOMElement(this._styleTag);
+    }
+
+    /** Remove the injected stylesheet */
+  }, {
+    key: "_removeStyleTag",
+    value: function _removeStyleTag() {
+      if (this._styleTag && this._styleTag.parentNode) {
+        this._styleTag.parentNode.removeChild(this._styleTag);
+      }
+      this._styleTag = null;
+      this._styleInjected = false;
+    }
+
+    /**
+     * Gather I/O device children from a component's Three.js hierarchy.
+     * @param {THREE.Object3D} object
+     * @returns {{ label: string, deviceId: string }[]}
+     */
+  }, {
+    key: "_getIODevices",
+    value: function _getIODevices(object) {
+      var devices = [];
+      object.traverse(function (child) {
+        var _child$userData;
+        if (((_child$userData = child.userData) === null || _child$userData === void 0 ? void 0 : _child$userData.objectType) === 'io-device') {
+          devices.push({
+            label: child.userData.attachmentLabel || child.name || child.userData.deviceId || 'Unknown Device',
+            deviceId: child.userData.deviceId || ''
+          });
+        }
+      });
+      return devices;
+    }
+
+    /**
+     * Build and show the tooltip for the given object.
+     * @param {THREE.Object3D} object
+     */
+  }, {
+    key: "_buildTooltip",
+    value: function _buildTooltip(object) {
+      var _this2 = this;
+      // Remove any existing tooltip first
+      this.hide();
+      // Re-assign selected object since hide() clears it
+      this.selectedObject = object;
+      var container = this._getContainer();
+      if (!container) return;
+
+      // Ensure the container supports absolute positioning
+      var containerStyle = window.getComputedStyle(container);
+      if (containerStyle.position === 'static') {
+        container.style.position = 'relative';
+      }
+
+      // Gather data — extract the friendly name, stripping the " (component-id)" suffix
+      var rawName = object.name || '';
+      var componentName = rawName.replace(/\s*\([^)]*\)\s*$/, '') || 'Unnamed Component';
+      var devices = this._getIODevices(object);
+      var isSmart = devices.length > 0;
+
+      // Root element
+      var root = document.createElement('div');
+      root.className = 'cp-tooltip';
+
+      // Card
+      var card = document.createElement('div');
+      card.className = 'cp-tooltip__card';
+
+      // Header
+      var header = document.createElement('div');
+      header.className = 'cp-tooltip__header';
+      header.textContent = componentName;
+      card.appendChild(header);
+
+      // I/O Devices section
+      if (isSmart) {
+        var ioSection = document.createElement('div');
+        ioSection.className = 'cp-tooltip__io-section';
+
+        // Trigger row
+        var trigger = document.createElement('div');
+        trigger.className = 'cp-tooltip__io-trigger';
+        var label = document.createElement('span');
+        label.className = 'cp-tooltip__io-trigger-label';
+        label.textContent = "I/O Devices (".concat(devices.length, ")");
+        var arrow = document.createElement('span');
+        arrow.className = 'cp-tooltip__io-arrow';
+        arrow.textContent = '▶';
+        trigger.appendChild(label);
+        trigger.appendChild(arrow);
+
+        // Device list
+        var list = document.createElement('div');
+        list.className = 'cp-tooltip__device-list';
+        devices.forEach(function (device) {
+          var item = document.createElement('div');
+          item.className = 'cp-tooltip__device-item';
+          var dot = document.createElement('span');
+          dot.className = 'cp-tooltip__device-dot';
+          var name = document.createElement('span');
+          name.className = 'cp-tooltip__device-name';
+          name.textContent = device.label;
+          item.appendChild(dot);
+          item.appendChild(name);
+          list.appendChild(item);
+        });
+        ioSection.appendChild(trigger);
+        ioSection.appendChild(list);
+
+        // Hover expand/collapse
+        trigger.addEventListener('mouseenter', function () {
+          ioSection.classList.add('expanded');
+          _this2._ioExpanded = true;
+        });
+        ioSection.addEventListener('mouseleave', function () {
+          ioSection.classList.remove('expanded');
+          _this2._ioExpanded = false;
+        });
+        card.appendChild(ioSection);
+      } else {
+        // Non-smart: show empty state
+        var noDevices = document.createElement('div');
+        noDevices.className = 'cp-tooltip__no-devices';
+        noDevices.textContent = 'No I/O devices attached';
+        card.appendChild(noDevices);
+      }
+      root.appendChild(card);
+
+      // Caret
+      var caret = document.createElement('div');
+      caret.className = 'cp-tooltip__caret';
+      root.appendChild(caret);
+
+      // Prevent clicks on tooltip from propagating to the scene
+      root.addEventListener('pointerdown', function (e) {
+        return e.stopPropagation();
+      });
+      root.addEventListener('click', function (e) {
+        return e.stopPropagation();
+      });
+
+      // Add to the renderer container so coordinates are relative to the viewport
+      container.appendChild(root);
+      this.tooltipEl = root;
+
+      // Initial positioning
+      this._positionTooltip();
+    }
+
+    // -----------------------------------------------------------------------
+    // Internal — positioning
+    // -----------------------------------------------------------------------
+
+    /**
+     * Project the selected object's world position to screen space and
+     * position the tooltip element accordingly.
+     */
+  }, {
+    key: "_positionTooltip",
+    value: function _positionTooltip() {
+      var _this$sceneViewer, _this$sceneViewer2;
+      if (!this.tooltipEl || !this.selectedObject) return;
+      var container = this._getContainer();
+      var camera = (_this$sceneViewer = this.sceneViewer) === null || _this$sceneViewer === void 0 ? void 0 : _this$sceneViewer.camera;
+      var renderer = (_this$sceneViewer2 = this.sceneViewer) === null || _this$sceneViewer2 === void 0 ? void 0 : _this$sceneViewer2.renderer;
+      if (!container || !camera || !renderer) return;
+
+      // Compute bounding box to position above the component
+      var box = new THREE.Box3().setFromObject(this.selectedObject);
+      var center = box.getCenter(new THREE.Vector3());
+      // Use top of bounding box (Z-up)
+      var topZ = box.max.z;
+      var worldPos = new THREE.Vector3(center.x, center.y, topZ);
+
+      // Project to NDC
+      var ndc = worldPos.clone().project(camera);
+
+      // NDC to pixel coords relative to the container
+      var rect = container.getBoundingClientRect();
+      var x = (ndc.x + 1) / 2 * rect.width;
+      var y = (-ndc.y + 1) / 2 * rect.height;
+
+      // Hide if behind camera
+      if (ndc.z > 1) {
+        this.tooltipEl.style.display = 'none';
+        return;
+      }
+      this.tooltipEl.style.display = '';
+      this.tooltipEl.style.left = "".concat(x, "px");
+      this.tooltipEl.style.top = "".concat(y, "px");
+    }
+
+    /**
+     * Get the DOM element where the Three.js canvas currently lives.
+     * In QuadViewport the canvas is moved out of the original hidden
+     * container, so we must use the renderer's actual parent element.
+     * @returns {HTMLElement|null}
+     */
+  }, {
+    key: "_getContainer",
+    value: function _getContainer() {
+      var _this$sceneViewer3;
+      return ((_this$sceneViewer3 = this.sceneViewer) === null || _this$sceneViewer3 === void 0 || (_this$sceneViewer3 = _this$sceneViewer3.renderer) === null || _this$sceneViewer3 === void 0 || (_this$sceneViewer3 = _this$sceneViewer3.domElement) === null || _this$sceneViewer3 === void 0 ? void 0 : _this$sceneViewer3.parentElement) || null;
+    }
+  }]);
+}(BaseDisposable);
+
+export { ComponentTooltipManager };

package/dist/esm/src/rendering/rendering3D.js

@@ -456,6 +456,19 @@ var Rendering3D = /*#__PURE__*/function (_BaseDisposable) {
         this.renderer.useLegacyLights = false;
         container.appendChild(this.renderer.domElement);
 
+        // Register WebGL context lost/restored handlers for resilience.
+        // If the GPU context is lost (e.g., due to disposed buffers or driver issues),
+        // these handlers prevent a permanent white screen.
+        this._onContextLost = function (event) {
+          event.preventDefault();
+          console.warn('⚠️ WebGL context lost — rendering paused. The browser may restore it automatically.');
+        };
+        this._onContextRestored = function () {
+          console.log('✅ WebGL context restored — rendering will resume.');
+        };
+        this.renderer.domElement.addEventListener('webglcontextlost', this._onContextLost, false);
+        this.renderer.domElement.addEventListener('webglcontextrestored', this._onContextRestored, false);
+
         // Register resources for automatic cleanup
         this.registerDOMElement(this.renderer.domElement);
         this.registerDisposable(this.renderer, 'WebGLRenderer');
@@ -666,6 +679,18 @@ var Rendering3D = /*#__PURE__*/function (_BaseDisposable) {
         frameTime: 0
       };
 
+      // Remove WebGL context event listeners
+      if (this.renderer && this.renderer.domElement) {
+        if (this._onContextLost) {
+          this.renderer.domElement.removeEventListener('webglcontextlost', this._onContextLost, false);
+        }
+        if (this._onContextRestored) {
+          this.renderer.domElement.removeEventListener('webglcontextrestored', this._onContextRestored, false);
+        }
+      }
+      this._onContextLost = null;
+      this._onContextRestored = null;
+
       // Clear post processing
       this.postProcessing = {
         composer: null,

package/package.json

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