@2112-lab/central-plant 0.1.4 → 0.1.5

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

@@ -1 +1,637 @@
-import{createClass as t,classCallCheck as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{CSS2DRenderer as n,CSS2DObject as e}from"../../../node_modules/three/examples/jsm/renderers/CSS2DRenderer.js";import*as o from"three";var s=function(t){for(var i,n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];return(i=console).log.apply(i,["🔍 [Tooltips] ".concat(t)].concat(e))},r=function(t){for(var i,n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];return(i=console).log.apply(i,["ℹ️ [Tooltips] ".concat(t)].concat(e))},a=function(t){for(var i,n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];return(i=console).warn.apply(i,["⚠️ [Tooltips] ".concat(t)].concat(e))},l=function(t){for(var i,n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];return(i=console).error.apply(i,["❌ [Tooltips] ".concat(t)].concat(e))},h=function(){return t(function t(n,e,o){var s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;i(this,t),this.container=n,this.camera=e,this.scene=o,this.transformControlsManager=s,this.tooltipTemplate='\n<div class="component-tooltip" style="\n  background-color: rgba(255, 255, 255, 0.95); \n  color: #333333; \n  border-radius: 8px; \n  padding: 12px; \n  width: 250px; \n  font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  user-select: none;\n  pointer-events: auto;\n  font-size: 13px;\n  line-height: 1.4;\n  transform: translate(-50%, -100%);\n  margin-top: 0px;\n  margin-left: 0px;\n  position: relative;\n  z-index: 1000;\n">\n  <div class="tooltip-header" style="\n    font-weight: 600; \n    padding-bottom: 8px; \n    border-bottom: 1px solid rgba(0, 0, 0, 0.1); \n    margin-bottom: 8px;\n    font-size: 14px;\n    color: #2c3e50;\n  ">Component Name</div>\n  <div class="tooltip-body">\n    <div class="tooltip-type" style="\n      font-size: 12px;\n      color: #666;\n      margin-bottom: 8px;\n      font-style: italic;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    "></div>\n    <div class="tooltip-attributes">\n      \x3c!-- Dynamic attributes will be inserted here --\x3e\n    </div>\n    <div class="tooltip-row tooltip-actions" style="display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1);">\n      <div class="tooltip-key" style="flex: 1; color: #555555; font-size: 12px;">Add:</div>\n      <div class="tooltip-dropdown-container" style="flex: 1; text-align: center;">\n        <select class="tooltip-dropdown" style="\n          background-color: #f8f9fa;\n          color: #333333;\n          border: 1px solid #ddd;\n          padding: 4px 8px;\n          border-radius: 4px;\n          width: 100%;\n          cursor: pointer;\n          pointer-events: auto;\n          font-size: 12px;\n        ">\n          <option value="" disabled selected>Select...</option>\n          <option value="gateway">Gateway</option>\n          <option value="connector">Connector</option>\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n',this.tooltipRenderer=null,this.selectedMesh=null,this.tooltipParent=null,this.tooltipObject=null,this.init()},[{key:"init",value:function(){this.tooltipRenderer=new n,this.tooltipRenderer.setSize(this.container.clientWidth,this.container.clientHeight),this.tooltipRenderer.domElement.style.position="absolute",this.tooltipRenderer.domElement.style.top="0",this.tooltipRenderer.domElement.style.left="0",this.tooltipRenderer.domElement.style.overflow="visible",this.tooltipRenderer.domElement.style.pointerEvents="none",this.tooltipRenderer.domElement.style.zIndex="100",this.container.appendChild(this.tooltipRenderer.domElement)}},{key:"resize",value:function(){this.tooltipRenderer&&this.tooltipRenderer.setSize(this.container.clientWidth,this.container.clientHeight)}},{key:"setTransformControlsManager",value:function(t){this.transformControlsManager=t,r("Transform controls manager set for tooltips"),this.transformControlsManager&&this.setupTransformControlsEvents(),this.tooltipObject&&this.updateTooltipForTransform()}},{key:"setupTransformControlsEvents",value:function(){var t=this;this.transformControlsManager&&this.transformControlsManager.on({onTransform:function(i){i===t.selectedMesh&&t.tooltipObject&&t.updateTooltipForTransform()},onTransformEnd:function(i){i===t.selectedMesh&&t.tooltipObject&&t.updateTooltipForTransform()}})}},{key:"setSelectedMesh",value:function(){var t,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.selectedMesh!==i&&(r("Setting selected mesh:",i?i.uuid:"none"),this.clearTooltip(),this.selectedMesh=i,i&&null!==(t=i.userData)&&void 0!==t&&null!==(t=t.component)&&void 0!==t&&t.attributes?(r("Mesh has component attributes, showing tooltip"),this.showTooltip()):i&&(a("Mesh does not have required component data for tooltip:",i),i.userData&&s("Available userData:",i.userData)))}},{key:"render",value:function(){if(this.tooltipRenderer&&this.camera&&this.scene)try{this.tooltipRenderer.render(this.scene,this.camera)}catch(t){l("Error rendering tooltips:",t)}}},{key:"dispose",value:function(){this.clearTooltip(),this.transformControlsManager&&(this.transformControlsManager=null),this.tooltipRenderer&&this.tooltipRenderer.domElement&&this.tooltipRenderer.domElement.parentNode&&this.tooltipRenderer.domElement.parentNode.removeChild(this.tooltipRenderer.domElement),this.tooltipRenderer=null,this.selectedMesh=null,this.container=null,this.camera=null,this.scene=null}},{key:"showTooltip",value:function(){try{if(!this.selectedMesh||!this.selectedMesh.userData||!this.selectedMesh.userData.component)return void a("Cannot show tooltip, missing data in selectedMesh");r("Showing tooltip for:",this.selectedMesh.uuid);var t=this.selectedMesh.userData.component;if(!t.attributes)return void a("Component has no attributes:",t);var i=t.attributes,n=document.createElement("div");n.innerHTML=this.tooltipTemplate.trim();var o=n.firstElementChild||n.firstChild;s("showTooltip this.selectedMesh:",this.selectedMesh),s("showTooltip meshComponentData:",t);var h=o.querySelector(".tooltip-header");h&&(this.selectedMesh.name&&""!==this.selectedMesh.name?h.textContent=this.selectedMesh.name:h.textContent=this.selectedMesh.userData.originalUuid||this.selectedMesh.userData.uuid||"Unknown Component");var c=o.querySelector(".tooltip-type");c&&t.type&&(c.textContent=t.type);var u=o.querySelector(".tooltip-attributes");if(u&&i&&Object.keys(i).length>0){u.innerHTML="",Object.keys(i).forEach(function(t){var n=i[t],e=document.createElement("div");e.className="tooltip-row",e.style.display="flex",e.style.alignItems="center",e.style.justifyContent="space-between",e.style.marginBottom="5px";var o=document.createElement("div");o.className="tooltip-key",o.style.flex="1",o.style.color="#555555",o.textContent="".concat(n.key||t,":");var s=document.createElement("div");s.className="tooltip-value",s.style.flex="1",s.style.textAlign="center",s.style.color="#000000";var r=n.value||"0";n.unit&&(r+=" ".concat(n.unit)),s.textContent=r,e.appendChild(o),e.appendChild(s),u.appendChild(e)});var p=o.querySelector(".tooltip-dropdown");p&&p.addEventListener("change",function(t){t.stopPropagation();var i=t.target.value;r("Add option selected: ".concat(i)),"gateway"===i?r("Adding Gateway"):"connector"===i&&r("Adding Connector"),t.target.selectedIndex=0})}var d=new e(o);this.tooltipParent=this.selectedMesh,this.tooltipObject=d;var v=this.calculateTooltipPosition();d.position.set(v.x,v.y,v.z),d.userData={isTooltip:!0},this.selectedMesh.add(d),r("Tooltip positioned at:",v)}catch(t){l("Error showing tooltip:",t)}}},{key:"updateTooltip",value:function(){if(this.tooltipParent&&this.tooltipObject){var t=this.calculateTooltipPosition();this.tooltipObject.position.set(t.x,t.y,t.z)}}},{key:"updateTooltipForTransform",value:function(){if(this.tooltipObject&&this.selectedMesh){var t=this.calculateTooltipPosition();this.tooltipObject.position.set(t.x,t.y,t.z),s("Tooltip position updated for transform")}}},{key:"getObjectBoundingBox",value:function(t){return(new o.Box3).setFromObject(t)}},{key:"calculateOptimalTooltipOffset",value:function(){if(!this.camera||!this.selectedMesh)return 1.5;var t=new o.Vector3;this.selectedMesh.getWorldPosition(t);var i=new o.Vector3;this.camera.getWorldPosition(i);return 1}},{key:"calculateTooltipPosition",value:function(){var t=this.getObjectBoundingBox(this.selectedMesh),i=this.findClosestBoundingBoxCorner(t),n=new o.Vector3;this.selectedMesh.getWorldPosition(n);var e=i.clone().sub(n),s=this.calculatePixelBasedOffset(e,n),l={x:e.x+s.x,y:e.y+s.y,z:e.z+s.z};if(this.transformControlsManager&&this.transformControlsManager.selectedObject===this.selectedMesh)try{var h=this.transformControlsManager.getWorldTransformData();if(h&&h.position)return r("Using transform controls position for tooltip at closest corner"),{x:e.x+s.x,y:e.y+s.y,z:e.z+s.z}}catch(t){a("Error getting transform controls position:",t)}return r("Positioning tooltip at closest corner to origin:",l),l}},{key:"calculatePixelBasedOffset",value:function(t,i){if(!this.camera)return{x:0,y:0,z:0};var n=250;if(this.tooltipObject&&this.tooltipObject.element){var e=this.tooltipObject.element;if(e.offsetWidth>0)n=e.offsetWidth;else{var r=document.createElement("div");r.style.position="absolute",r.style.visibility="hidden",r.style.top="-9999px",document.body.appendChild(r),r.appendChild(e),n=e.offsetWidth||250,document.body.removeChild(r)}}var a=n/2,l=i.clone().add(t),h=new o.Vector3;this.camera.getWorldPosition(h);var c=new o.Vector3;this.camera.getWorldDirection(c);var u=this.isPositionOnRightSideOfCameraMidline(l,h,c),p=l.distanceTo(h),d=0;if(this.camera.isPerspectiveCamera){var v=this.camera.fov*Math.PI/180,f=Math.tan(v/2)*p*this.camera.aspect;d=a/this.container.clientWidth*(2*f)}else if(this.camera.isOrthographicCamera){var m=(this.camera.right-this.camera.left)/2;d=a/this.container.clientWidth*(2*m)}var y=new o.Vector3;this.camera.getWorldDirection(y),y.cross(this.camera.up).normalize();var w=u?-1:1,g=y.multiplyScalar(d*w);return s("Tooltip pixel offset calculated:",{tooltipWidth:n,halfTooltipWidth:a,distanceToCamera:p,screenSpaceOffset:d,isOnRightSide:u,offsetDirection:w,worldOffset:g}),{x:g.x,y:0,z:g.z}}},{key:"findClosestBoundingBoxCorner",value:function(t){var i=t.min,n=t.max,e=[new o.Vector3(i.x,i.y,i.z),new o.Vector3(n.x,i.y,i.z),new o.Vector3(i.x,n.y,i.z),new o.Vector3(n.x,n.y,i.z),new o.Vector3(i.x,i.y,n.z),new o.Vector3(n.x,i.y,n.z),new o.Vector3(i.x,n.y,n.z),new o.Vector3(n.x,n.y,n.z)];return this.findCornerClosestToCameraVerticalMidline(e)}},{key:"findCornerClosestToCameraVerticalMidline",value:function(t){if(!this.camera)return a("No camera available, using first corner"),t[0];var i=new o.Vector3;this.camera.getWorldPosition(i);var n=new o.Vector3;this.camera.getWorldDirection(n);for(var e=t[0],r=this.getDistanceToVerticalMidline(t[0],i,n),l=1;l<t.length;l++){var h=this.getDistanceToVerticalMidline(t[l],i,n);h<r&&(r=h,e=t[l])}return s("Closest corner to camera vertical midline:",e,"Distance:",r),e}},{key:"getDistanceToVerticalMidline",value:function(t,i,n){var e=t.clone().sub(i),o=e.dot(n),s=n.clone().multiplyScalar(o);return e.clone().sub(s).length()}},{key:"clearTooltip",value:function(){this.tooltipParent&&this.tooltipObject&&(this.tooltipParent.remove(this.tooltipObject),this.tooltipParent=null,this.tooltipObject=null)}},{key:"handleSceneClick",value:function(t,i){this.clearTooltip(),this.selectedMesh=null}},{key:"isSelectableComponent",value:function(t){var i,n;return!!(t&&t.userData&&t.userData.component)||!(!t||!(null!==(i=t.userData)&&void 0!==i&&i.isPipeSegment||null!==(n=t.userData)&&void 0!==n&&n.isPipeJunction))}},{key:"isPositionOnRightSideOfCameraMidline",value:function(t,i,n){var e=new o.Vector3;return this.camera.getWorldDirection(e),e.cross(this.camera.up).normalize(),t.clone().sub(i).dot(e)>0}}])}();export{h as SceneTooltipsManager};
+import { createClass as _createClass, classCallCheck as _classCallCheck } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { CSS2DRenderer, CSS2DObject } from '../../../node_modules/three/examples/jsm/renderers/CSS2DRenderer.js';
+import * as THREE from 'three';
+
+// Add a simple debug logger for tooltip events
+var tooltipLogger = {
+  debug: function debug(message) {
+    var _console;
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    return (_console = console).log.apply(_console, ["\uD83D\uDD0D [Tooltips] ".concat(message)].concat(args));
+  },
+  info: function info(message) {
+    var _console2;
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+    return (_console2 = console).log.apply(_console2, ["\u2139\uFE0F [Tooltips] ".concat(message)].concat(args));
+  },
+  warn: function warn(message) {
+    var _console3;
+    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      args[_key3 - 1] = arguments[_key3];
+    }
+    return (_console3 = console).warn.apply(_console3, ["\u26A0\uFE0F [Tooltips] ".concat(message)].concat(args));
+  },
+  error: function error(message) {
+    var _console4;
+    for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+      args[_key4 - 1] = arguments[_key4];
+    }
+    return (_console4 = console).error.apply(_console4, ["\u274C [Tooltips] ".concat(message)].concat(args));
+  }
+};
+
+// Inline tooltip template instead of importing from a file
+var tooltipTemplate = "\n<div class=\"component-tooltip\" style=\"\n  background-color: rgba(255, 255, 255, 0.95); \n  color: #333333; \n  border-radius: 8px; \n  padding: 12px; \n  width: 250px; \n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  user-select: none;\n  pointer-events: auto;\n  font-size: 13px;\n  line-height: 1.4;\n  transform: translate(-50%, -100%);\n  margin-top: 0px;\n  margin-left: 0px;\n  position: relative;\n  z-index: 1000;\n\">\n  <div class=\"tooltip-header\" style=\"\n    font-weight: 600; \n    padding-bottom: 8px; \n    border-bottom: 1px solid rgba(0, 0, 0, 0.1); \n    margin-bottom: 8px;\n    font-size: 14px;\n    color: #2c3e50;\n  \">Component Name</div>\n  <div class=\"tooltip-body\">\n    <div class=\"tooltip-type\" style=\"\n      font-size: 12px;\n      color: #666;\n      margin-bottom: 8px;\n      font-style: italic;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    \"></div>\n    <div class=\"tooltip-attributes\">\n      <!-- Dynamic attributes will be inserted here -->\n    </div>\n    <div class=\"tooltip-row tooltip-actions\" style=\"display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1);\">\n      <div class=\"tooltip-key\" style=\"flex: 1; color: #555555; font-size: 12px;\">Add:</div>\n      <div class=\"tooltip-dropdown-container\" style=\"flex: 1; text-align: center;\">\n        <select class=\"tooltip-dropdown\" style=\"\n          background-color: #f8f9fa;\n          color: #333333;\n          border: 1px solid #ddd;\n          padding: 4px 8px;\n          border-radius: 4px;\n          width: 100%;\n          cursor: pointer;\n          pointer-events: auto;\n          font-size: 12px;\n        \">\n          <option value=\"\" disabled selected>Select...</option>\n          <option value=\"gateway\">Gateway</option>\n          <option value=\"connector\">Connector</option>\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n";
+var SceneTooltipsManager = /*#__PURE__*/function () {
+  function SceneTooltipsManager(container, camera, scene) {
+    var transformControlsManager = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    _classCallCheck(this, SceneTooltipsManager);
+    this.container = container;
+    this.camera = camera;
+    this.scene = scene;
+    this.transformControlsManager = transformControlsManager;
+    this.tooltipTemplate = tooltipTemplate;
+    this.tooltipRenderer = null;
+    this.selectedMesh = null;
+    this.tooltipParent = null;
+    this.tooltipObject = null;
+    this.init();
+  }
+  return _createClass(SceneTooltipsManager, [{
+    key: "init",
+    value: function init() {
+      // Create the CSS2D renderer for the tooltips
+      this.tooltipRenderer = new CSS2DRenderer();
+      this.tooltipRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
+      this.tooltipRenderer.domElement.style.position = 'absolute';
+      this.tooltipRenderer.domElement.style.top = '0';
+      this.tooltipRenderer.domElement.style.left = '0';
+      this.tooltipRenderer.domElement.style.overflow = 'visible';
+      // Use 'none' for the renderer to allow camera controls to work
+      this.tooltipRenderer.domElement.style.pointerEvents = 'none';
+      this.tooltipRenderer.domElement.style.zIndex = '100'; // Ensure tooltips appear on top
+      this.container.appendChild(this.tooltipRenderer.domElement);
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      if (this.tooltipRenderer) {
+        this.tooltipRenderer.setSize(this.container.clientWidth, this.container.clientHeight);
+      }
+    }
+  }, {
+    key: "setTransformControlsManager",
+    value: function setTransformControlsManager(transformControlsManager) {
+      this.transformControlsManager = transformControlsManager;
+      tooltipLogger.info('Transform controls manager set for tooltips');
+
+      // Set up event listeners for transform controls
+      if (this.transformControlsManager) {
+        this.setupTransformControlsEvents();
+      }
+
+      // Update existing tooltip position if one is shown
+      if (this.tooltipObject) {
+        this.updateTooltipForTransform();
+      }
+    }
+  }, {
+    key: "setupTransformControlsEvents",
+    value: function setupTransformControlsEvents() {
+      var _this = this;
+      if (!this.transformControlsManager) return;
+
+      // Listen for transform events to update tooltip position
+      this.transformControlsManager.on({
+        onTransform: function onTransform(object) {
+          // Update tooltip position during transformation
+          if (object === _this.selectedMesh && _this.tooltipObject) {
+            _this.updateTooltipForTransform();
+          }
+        },
+        onTransformEnd: function onTransformEnd(object) {
+          // Final position update after transformation
+          if (object === _this.selectedMesh && _this.tooltipObject) {
+            _this.updateTooltipForTransform();
+          }
+        }
+      });
+    }
+  }, {
+    key: "setSelectedMesh",
+    value: function setSelectedMesh() {
+      var _mesh$userData;
+      var mesh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (this.selectedMesh === mesh) return;
+      tooltipLogger.info('Setting selected mesh:', mesh ? mesh.uuid : 'none');
+      this.clearTooltip();
+      this.selectedMesh = mesh;
+      if (mesh && (_mesh$userData = mesh.userData) !== null && _mesh$userData !== void 0 && (_mesh$userData = _mesh$userData.component) !== null && _mesh$userData !== void 0 && _mesh$userData.attributes) {
+        tooltipLogger.info('Mesh has component attributes, showing tooltip');
+        this.showTooltip();
+      } else if (mesh) {
+        tooltipLogger.warn('Mesh does not have required component data for tooltip:', mesh);
+        if (mesh.userData) {
+          tooltipLogger.debug('Available userData:', mesh.userData);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.tooltipRenderer && this.camera && this.scene) {
+        try {
+          this.tooltipRenderer.render(this.scene, this.camera);
+        } catch (error) {
+          tooltipLogger.error('Error rendering tooltips:', error);
+        }
+      }
+    }
+
+    // This method should be called when disposing the manager
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.clearTooltip();
+
+      // Clean up transform controls event listeners
+      if (this.transformControlsManager) {
+        // Note: The transform controls manager doesn't have a removeEventListener method
+        // so we'll just remove our reference
+        this.transformControlsManager = null;
+      }
+      if (this.tooltipRenderer && this.tooltipRenderer.domElement && this.tooltipRenderer.domElement.parentNode) {
+        this.tooltipRenderer.domElement.parentNode.removeChild(this.tooltipRenderer.domElement);
+      }
+      this.tooltipRenderer = null;
+      this.selectedMesh = null;
+      this.container = null;
+      this.camera = null;
+      this.scene = null;
+    }
+  }, {
+    key: "showTooltip",
+    value: function showTooltip() {
+      try {
+        if (!this.selectedMesh || !this.selectedMesh.userData || !this.selectedMesh.userData.component) {
+          tooltipLogger.warn('Cannot show tooltip, missing data in selectedMesh');
+          return;
+        }
+        console.log("showTooltip this.selectedMesh:", this.selectedMesh);
+        tooltipLogger.info('Showing tooltip for:', this.selectedMesh.uuid);
+        var meshComponentData = this.selectedMesh.userData.component;
+        if (!meshComponentData.attributes) {
+          tooltipLogger.warn('Component has no attributes:', meshComponentData);
+          return;
+        }
+        var meshAttributes = meshComponentData.attributes;
+
+        // Clone the loaded template
+        var tooltipDiv = document.createElement('div');
+        tooltipDiv.innerHTML = this.tooltipTemplate.trim(); // Use the template string
+        var tooltipElement = tooltipDiv.firstElementChild || tooltipDiv.firstChild;
+        tooltipLogger.debug("showTooltip this.selectedMesh:", this.selectedMesh);
+        tooltipLogger.debug("showTooltip meshComponentData:", meshComponentData);
+
+        // Update the tooltip header with object name or ID
+        var headerElement = tooltipElement.querySelector('.tooltip-header');
+        if (headerElement) {
+          // Use a more user-friendly display name
+          if (this.selectedMesh.name && this.selectedMesh.name !== "") {
+            headerElement.textContent = this.selectedMesh.name;
+          } else {
+            headerElement.textContent = this.selectedMesh.userData.originalUuid || this.selectedMesh.userData.uuid || "Unknown Component";
+          }
+        }
+
+        // Add component type if available
+        var typeElement = tooltipElement.querySelector('.tooltip-type');
+        if (typeElement && meshComponentData.type) {
+          typeElement.textContent = meshComponentData.type;
+        }
+
+        // Populate all attributes
+        var attributesContainer = tooltipElement.querySelector('.tooltip-attributes');
+        if (attributesContainer && meshAttributes && Object.keys(meshAttributes).length > 0) {
+          // First clear any existing content
+          attributesContainer.innerHTML = '';
+
+          // Add each attribute as a row
+          var attrKeys = Object.keys(meshAttributes);
+          attrKeys.forEach(function (key) {
+            var attr = meshAttributes[key];
+
+            // Create attribute row
+            var rowDiv = document.createElement('div');
+            rowDiv.className = 'tooltip-row';
+            rowDiv.style.display = 'flex';
+            rowDiv.style.alignItems = 'center';
+            rowDiv.style.justifyContent = 'space-between';
+            rowDiv.style.marginBottom = '5px';
+
+            // Create key div
+            var keyDiv = document.createElement('div');
+            keyDiv.className = 'tooltip-key';
+            keyDiv.style.flex = '1';
+            keyDiv.style.color = '#555555';
+            keyDiv.textContent = "".concat(attr.key || key, ":");
+
+            // Create value div
+            var valueDiv = document.createElement('div');
+            valueDiv.className = 'tooltip-value';
+            valueDiv.style.flex = '1';
+            valueDiv.style.textAlign = 'center';
+            valueDiv.style.color = '#000000';
+
+            // Format the value with unit if available
+            var displayValue = attr.value || '0';
+            if (attr.unit) {
+              displayValue += " ".concat(attr.unit);
+            }
+            valueDiv.textContent = displayValue;
+
+            // Append to row
+            rowDiv.appendChild(keyDiv);
+            rowDiv.appendChild(valueDiv);
+
+            // Append row to container
+            attributesContainer.appendChild(rowDiv);
+          });
+
+          // Set up dropdown event handler
+          var dropdown = tooltipElement.querySelector('.tooltip-dropdown');
+          if (dropdown) {
+            dropdown.addEventListener('change', function (event) {
+              event.stopPropagation(); // Prevent event from bubbling up to the scene
+              var selectedValue = event.target.value;
+              tooltipLogger.info("Add option selected: ".concat(selectedValue));
+
+              // Handle the dropdown selection (add Gateway or Connector)
+              if (selectedValue === 'gateway') {
+                tooltipLogger.info('Adding Gateway');
+                // Add your gateway creation logic here
+              } else if (selectedValue === 'connector') {
+                tooltipLogger.info('Adding Connector');
+                // Add your connector creation logic here
+              }
+
+              // Reset dropdown to default "Select..." option after use
+              event.target.selectedIndex = 0;
+            });
+          }
+        }
+
+        // Add the tooltip as a CSS2DObject with proper positioning
+        var label = new CSS2DObject(tooltipElement);
+
+        // Store references first so calculatePixelBasedOffset can access them
+        this.tooltipParent = this.selectedMesh;
+        this.tooltipObject = label;
+
+        // Calculate tooltip position with pixel-based offset (now that tooltip object exists)
+        var tooltipPosition = this.calculateTooltipPosition();
+
+        // Set the position
+        label.position.set(tooltipPosition.x, tooltipPosition.y, tooltipPosition.z);
+
+        // Ensure the CSS2DObject renders properly
+        label.userData = {
+          isTooltip: true
+        };
+
+        // For CSS2DRenderer, we want the tooltip to be positioned correctly
+        // The CSS transform in the template will center it horizontally and position it above the anchor point
+
+        // Add the label to the mesh (this makes it follow the mesh's transformations)
+        this.selectedMesh.add(label);
+        tooltipLogger.info('Tooltip positioned at:', tooltipPosition);
+      } catch (error) {
+        tooltipLogger.error('Error showing tooltip:', error);
+      }
+    }
+  }, {
+    key: "updateTooltip",
+    value: function updateTooltip() {
+      if (this.tooltipParent && this.tooltipObject) {
+        // Update position when object is transformed
+        var newPosition = this.calculateTooltipPosition();
+        this.tooltipObject.position.set(newPosition.x, newPosition.y, newPosition.z);
+      }
+    }
+  }, {
+    key: "updateTooltipForTransform",
+    value: function updateTooltipForTransform() {
+      // This method is called when transform controls move the object
+      if (this.tooltipObject && this.selectedMesh) {
+        var newPosition = this.calculateTooltipPosition();
+        this.tooltipObject.position.set(newPosition.x, newPosition.y, newPosition.z);
+        tooltipLogger.debug('Tooltip position updated for transform');
+      }
+    }
+  }, {
+    key: "getObjectBoundingBox",
+    value: function getObjectBoundingBox(object) {
+      // Calculate bounding box for the object
+      var box = new THREE.Box3().setFromObject(object);
+      return box;
+    }
+  }, {
+    key: "calculateOptimalTooltipOffset",
+    value: function calculateOptimalTooltipOffset() {
+      // Calculate offset based on camera distance for consistent visual appearance
+      if (!this.camera || !this.selectedMesh) {
+        return 1.5; // Default offset
+      }
+      var meshWorldPosition = new THREE.Vector3();
+      this.selectedMesh.getWorldPosition(meshWorldPosition);
+      var cameraWorldPosition = new THREE.Vector3();
+      this.camera.getWorldPosition(cameraWorldPosition);
+      var baseOffset = 1.0;
+      return baseOffset;
+    }
+
+    /**
+     * Calculates the optimal position for tooltip placement
+     * 
+     * This method determines tooltip positioning through several steps:
+     * 1. Finds the closest corner of the mesh's bounding box to the camera's vertical midline
+     * 2. Converts this corner from world space to local space relative to the mesh
+     * 3. Applies a pixel-based horizontal offset to prevent tooltip from overlapping the mesh
+     * 4. The offset direction depends on which side of camera midline the tooltip is on
+     * 5. If transform controls are active, considers their position for more accurate placement
+     * 
+     * The positioning algorithm aims to:
+     * - Keep tooltips visible and readable
+     * - Prevent obstruction of the mesh being described
+     * - Maintain consistent visual appearance across different camera distances
+     * - Adapt to camera perspective and orientation changes
+     * 
+     * Known Issues:
+     * - Sometimes tooltips still obscure the mesh despite positioning logic
+     * - The root cause of this obstruction is currently unknown and needs investigation (this issue on hold)
+     * - May be related to CSS transform calculations or screen-space projection accuracy
+     * 
+     * @returns {Object} Position coordinates {x, y, z} in local space relative to the mesh
+     */
+  }, {
+    key: "calculateTooltipPosition",
+    value: function calculateTooltipPosition() {
+      // Get bounding box of the selected mesh for better positioning
+      var boundingBox = this.getObjectBoundingBox(this.selectedMesh);
+
+      // Find the closest corner of the bounding box to world origin (0, 0, 0)
+      var closestCorner = this.findClosestBoundingBoxCorner(boundingBox);
+
+      // Get mesh world position to convert from world space to local space
+      var meshWorldPosition = new THREE.Vector3();
+      this.selectedMesh.getWorldPosition(meshWorldPosition);
+
+      // Convert closest corner from world space to local space relative to mesh
+      var localCornerPosition = closestCorner.clone().sub(meshWorldPosition);
+
+      // Calculate 2D pixel offset for tooltip positioning
+      var pixelOffset = this.calculatePixelBasedOffset(localCornerPosition, meshWorldPosition);
+
+      // Add a small offset above the corner for better visibility, plus pixel-based offset
+      var tooltipPosition = {
+        x: localCornerPosition.x + pixelOffset.x,
+        y: localCornerPosition.y + pixelOffset.y,
+        z: localCornerPosition.z + pixelOffset.z
+      };
+
+      // If transform controls are available and have a selected object
+      if (this.transformControlsManager && this.transformControlsManager.selectedObject === this.selectedMesh) {
+        try {
+          // Get world transform data from transform controls
+          var worldTransform = this.transformControlsManager.getWorldTransformData();
+          if (worldTransform && worldTransform.position) {
+            tooltipLogger.info('Using transform controls position for tooltip at closest corner');
+            return {
+              x: localCornerPosition.x + pixelOffset.x,
+              y: localCornerPosition.y + pixelOffset.y,
+              z: localCornerPosition.z + pixelOffset.z
+            };
+          }
+        } catch (error) {
+          tooltipLogger.warn('Error getting transform controls position:', error);
+        }
+      }
+      tooltipLogger.info('Positioning tooltip at closest corner to origin:', tooltipPosition);
+      return tooltipPosition;
+    }
+  }, {
+    key: "calculatePixelBasedOffset",
+    value: function calculatePixelBasedOffset(localCornerPosition, meshWorldPosition) {
+      if (!this.camera) {
+        return {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
+
+      // Get tooltip width - use the template width or measure if tooltip exists
+      var tooltipWidth = 250; // Default from template
+
+      if (this.tooltipObject && this.tooltipObject.element) {
+        // Force a layout update to get accurate measurements
+        var element = this.tooltipObject.element;
+        if (element.offsetWidth > 0) {
+          tooltipWidth = element.offsetWidth;
+        } else {
+          // If not yet measured, temporarily add to DOM to measure
+          var tempParent = document.createElement('div');
+          tempParent.style.position = 'absolute';
+          tempParent.style.visibility = 'hidden';
+          tempParent.style.top = '-9999px';
+          document.body.appendChild(tempParent);
+          tempParent.appendChild(element);
+          tooltipWidth = element.offsetWidth || 250;
+
+          // Remove from temp parent
+          document.body.removeChild(tempParent);
+        }
+      }
+      var halfTooltipWidth = tooltipWidth / 2;
+
+      // Calculate world position for the tooltip anchor point
+      var worldAnchorPosition = meshWorldPosition.clone().add(localCornerPosition);
+
+      // Get camera position and direction
+      var cameraPosition = new THREE.Vector3();
+      this.camera.getWorldPosition(cameraPosition);
+      var cameraDirection = new THREE.Vector3();
+      this.camera.getWorldDirection(cameraDirection);
+
+      // Determine which side of the camera midline the tooltip is on
+      var isOnRightSide = this.isPositionOnRightSideOfCameraMidline(worldAnchorPosition, cameraPosition, cameraDirection);
+
+      // Calculate distance to camera for scaling the offset
+      var distanceToCamera = worldAnchorPosition.distanceTo(cameraPosition);
+
+      // Calculate screen-space offset magnitude using camera projection
+      var screenSpaceOffset = 0;
+      if (this.camera.isPerspectiveCamera) {
+        // Convert pixel offset to world space based on camera distance and FOV
+        var fov = this.camera.fov * Math.PI / 180; // Convert to radians
+        var halfHeight = Math.tan(fov / 2) * distanceToCamera;
+        var halfWidth = halfHeight * this.camera.aspect;
+
+        // Convert pixel offset to world space
+        screenSpaceOffset = halfTooltipWidth / this.container.clientWidth * (halfWidth * 2);
+      } else if (this.camera.isOrthographicCamera) {
+        // For orthographic cameras, use the zoom factor
+        var _halfWidth = (this.camera.right - this.camera.left) / 2;
+        screenSpaceOffset = halfTooltipWidth / this.container.clientWidth * (_halfWidth * 2);
+      }
+
+      // Get camera's right vector for horizontal offset
+      var cameraRight = new THREE.Vector3();
+      this.camera.getWorldDirection(cameraRight);
+      cameraRight.cross(this.camera.up).normalize();
+
+      // Apply offset direction: left if on right side, right if on left side
+      var offsetDirection = isOnRightSide ? -1 : 1;
+      var worldOffset = cameraRight.multiplyScalar(screenSpaceOffset * offsetDirection);
+      tooltipLogger.debug('Tooltip pixel offset calculated:', {
+        tooltipWidth: tooltipWidth,
+        halfTooltipWidth: halfTooltipWidth,
+        distanceToCamera: distanceToCamera,
+        screenSpaceOffset: screenSpaceOffset,
+        isOnRightSide: isOnRightSide,
+        offsetDirection: offsetDirection,
+        worldOffset: worldOffset
+      });
+      return {
+        x: worldOffset.x,
+        y: 0,
+        // No vertical offset - only move horizontally
+        z: worldOffset.z
+      };
+    }
+  }, {
+    key: "findClosestBoundingBoxCorner",
+    value: function findClosestBoundingBoxCorner(boundingBox) {
+      // Get the 8 corners of the bounding box in world space
+      var min = boundingBox.min;
+      var max = boundingBox.max;
+
+      // Define all 8 corners of the bounding box
+      var corners = [new THREE.Vector3(min.x, min.y, min.z),
+      // Bottom-front-left
+      new THREE.Vector3(max.x, min.y, min.z),
+      // Bottom-front-right
+      new THREE.Vector3(min.x, max.y, min.z),
+      // Top-front-left
+      new THREE.Vector3(max.x, max.y, min.z),
+      // Top-front-right
+      new THREE.Vector3(min.x, min.y, max.z),
+      // Bottom-back-left
+      new THREE.Vector3(max.x, min.y, max.z),
+      // Bottom-back-right
+      new THREE.Vector3(min.x, max.y, max.z),
+      // Top-back-left
+      new THREE.Vector3(max.x, max.y, max.z) // Top-back-right
+      ];
+
+      // Find the corner closest to the camera's vertical midline
+      return this.findCornerClosestToCameraVerticalMidline(corners);
+    }
+  }, {
+    key: "findCornerClosestToCameraVerticalMidline",
+    value: function findCornerClosestToCameraVerticalMidline(corners) {
+      if (!this.camera) {
+        tooltipLogger.warn('No camera available, using first corner');
+        return corners[0];
+      }
+
+      // Get camera position and direction
+      var cameraPosition = new THREE.Vector3();
+      this.camera.getWorldPosition(cameraPosition);
+      var cameraDirection = new THREE.Vector3();
+      this.camera.getWorldDirection(cameraDirection);
+
+      // Calculate the camera's vertical midline plane
+      // The midline is a line extending from the camera in the forward direction
+      // We need to find which corner has the smallest perpendicular distance to this line
+
+      var closestCorner = corners[0];
+      var smallestDistance = this.getDistanceToVerticalMidline(corners[0], cameraPosition, cameraDirection);
+      for (var i = 1; i < corners.length; i++) {
+        var distance = this.getDistanceToVerticalMidline(corners[i], cameraPosition, cameraDirection);
+        if (distance < smallestDistance) {
+          smallestDistance = distance;
+          closestCorner = corners[i];
+        }
+      }
+      tooltipLogger.debug('Closest corner to camera vertical midline:', closestCorner, 'Distance:', smallestDistance);
+      return closestCorner;
+    }
+  }, {
+    key: "getDistanceToVerticalMidline",
+    value: function getDistanceToVerticalMidline(point, cameraPosition, cameraDirection) {
+      // Calculate the perpendicular distance from a point to the camera's vertical midline
+      // The vertical midline is the line extending from the camera in the forward direction
+
+      // Vector from camera to the point
+      var cameraToPoint = point.clone().sub(cameraPosition);
+
+      // Project this vector onto the camera direction to get the component along the midline
+      var projectionLength = cameraToPoint.dot(cameraDirection);
+      var projectionVector = cameraDirection.clone().multiplyScalar(projectionLength);
+
+      // The perpendicular component is the remainder
+      var perpendicularVector = cameraToPoint.clone().sub(projectionVector);
+
+      // Return the magnitude of the perpendicular component
+      return perpendicularVector.length();
+    }
+  }, {
+    key: "clearTooltip",
+    value: function clearTooltip() {
+      if (this.tooltipParent && this.tooltipObject) {
+        this.tooltipParent.remove(this.tooltipObject);
+        this.tooltipParent = null;
+        this.tooltipObject = null;
+      }
+    }
+
+    // Method to handle scene interaction when clicking away from objects (single clicks now clear tooltips)
+  }, {
+    key: "handleSceneClick",
+    value: function handleSceneClick(raycaster, camera) {
+      // If no intersection found, clear tooltip
+      this.clearTooltip();
+      this.selectedMesh = null;
+    }
+
+    // Method to check if an object is a selectable component
+  }, {
+    key: "isSelectableComponent",
+    value: function isSelectableComponent(object) {
+      var _object$userData, _object$userData2;
+      // Check if the object has component data
+      if (object && object.userData && object.userData.component) {
+        return true;
+      }
+
+      // Check if the object is a pipe segment or junction
+      if (object && ((_object$userData = object.userData) !== null && _object$userData !== void 0 && _object$userData.isPipeSegment || (_object$userData2 = object.userData) !== null && _object$userData2 !== void 0 && _object$userData2.isPipeJunction)) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "isPositionOnRightSideOfCameraMidline",
+    value: function isPositionOnRightSideOfCameraMidline(worldPosition, cameraPosition, cameraDirection) {
+      // Get camera's right vector (camera's local X-axis)
+      var cameraRight = new THREE.Vector3();
+      this.camera.getWorldDirection(cameraRight);
+      cameraRight.cross(this.camera.up).normalize();
+
+      // Vector from camera to the position
+      var cameraToPosition = worldPosition.clone().sub(cameraPosition);
+
+      // Project this vector onto the camera's right vector
+      // Positive dot product means it's on the right side, negative means left side
+      var rightComponent = cameraToPosition.dot(cameraRight);
+      return rightComponent > 0;
+    }
+  }]);
+}();
+
+export { SceneTooltipsManager };