@2112-lab/central-plant 0.1.4 → 0.1.6

package/dist/esm/src/managers/controls/dragDropManager.js

@@ -1 +1,1002 @@
-import{createClass as t,classCallCheck as e,asyncToGenerator as i,regenerator as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import*as n from"three";var s=function(){return t(function t(i){e(this,t),this.scene=i.scene,this.camera=i.camera,this.transformManager=i.transformManager,this.modelPreloader=i.modelPreloader,this.componentManager=i.componentManager,this.currentDragComponentData=null,this.dragPreviewSize=null,this.isCreatingDragPreview=!1,this.dragPreviewMesh=null,this.dragPreviewBoundingBox=null,this.dragTargetPosition=null,this.isDragOverScene=!1,this.onComponentDragStart=this.onComponentDragStart.bind(this),this.onComponentDragEnd=this.onComponentDragEnd.bind(this),this.onDragEnter=this.onDragEnter.bind(this),this.onDragLeave=this.onDragLeave.bind(this),this.onDragOver=this.onDragOver.bind(this),this.onDrop=this.onDrop.bind(this)},[{key:"onComponentDragStart",value:(f=i(r().m(function t(e,i){return r().w(function(t){for(;;)switch(t.n){case 0:return this.currentDragComponentData=e,t.n=1,this.calculateDragPreviewSize(e);case 1:return t.a(2,!0)}},t,this)})),function(t,e){return f.apply(this,arguments)})},{key:"onComponentDragEnd",value:function(){return this.currentDragComponentData=null,this.dragPreviewSize=null,this.isCreatingDragPreview=!1,this.clearDragPreview(),this.cleanupDragPreview(),this.dragTargetPosition=null,this.isDragOverScene=!1,!0}},{key:"onDragEnter",value:(l=i(r().m(function t(e,i){var n;return r().w(function(t){for(;;)switch(t.n){case 0:if(e.preventDefault(),this.isDragOverScene=!0,!this.currentDragComponentData)try{(n=e.dataTransfer.getData("application/json"))&&(this.currentDragComponentData=JSON.parse(n))}catch(t){}if(this.dragPreviewSize||!this.currentDragComponentData){t.n=1;break}return t.n=1,this.calculateDragPreviewSize(this.currentDragComponentData);case 1:if(this.dragPreviewMesh||!this.currentDragComponentData||this.isCreatingDragPreview){t.n=4;break}return this.isCreatingDragPreview=!0,t.p=2,t.n=3,this.createDragPreview();case 3:return t.p=3,this.isCreatingDragPreview=!1,t.f(3);case 4:case 5:return t.a(2)}},t,this,[[2,,3,4]])})),function(t,e){return l.apply(this,arguments)})},{key:"onDragLeave",value:function(t,e){e.contains(t.relatedTarget)||(this.isDragOverScene=!1,this.clearDragPreview())}},{key:"onDragOver",value:(c=i(r().m(function t(e,i){var n,s,a,h;return r().w(function(t){for(;;)switch(t.n){case 0:if(e.preventDefault(),e.dataTransfer.dropEffect="copy",this.currentDragComponentData){t.n=4;break}if(t.p=1,!(n=e.dataTransfer.getData("application/json"))){t.n=2;break}if(this.currentDragComponentData=JSON.parse(n),this.dragPreviewSize){t.n=2;break}return t.n=2,this.calculateDragPreviewSize(this.currentDragComponentData);case 2:t.n=4;break;case 3:t.p=3,t.v;case 4:if(!(s=this.calculateDropPosition(e,i))){t.n=6;break}return this.dragTargetPosition=s,t.n=5,this.updateDragPreview(s);case 5:this.dragPreviewMesh&&this.dragPreviewMesh.userData.isFallback&&(a=this.checkBoundingBoxOverlap(),h=a?16711680:65280,this.dragPreviewMesh.material.color.set(h));case 6:return t.a(2)}},t,this,[[1,3]])})),function(t,e){return c.apply(this,arguments)})},{key:"onDrop",value:(o=i(r().m(function t(e,i){var n,s,a,h,u,o,c=arguments;return r().w(function(t){for(;;)switch(t.n){case 0:if(n=c.length>2&&void 0!==c[2]?c[2]:{},e.preventDefault(),this.isDragOverScene=!1,t.p=1,s=e.dataTransfer.getData("application/json")){t.n=2;break}return n.onPlacementCanceled&&n.onPlacementCanceled({reason:"invalid-data",message:"No component data found in drop event"}),t.a(2,!1);case 2:t.p=2,a=JSON.parse(s),t.n=4;break;case 3:return t.p=3,t.v,n.onPlacementCanceled&&n.onPlacementCanceled({reason:"parse-error",message:"Could not parse component data"}),t.a(2,!1);case 4:if(a&&a.libraryId&&a.modelKey){t.n=5;break}return n.onPlacementCanceled&&n.onPlacementCanceled({reason:"invalid-data",message:"Component data missing required fields"}),t.a(2,!1);case 5:if(h=this.calculateDropPosition(e,i)){t.n=6;break}return n.onPlacementCanceled&&n.onPlacementCanceled({reason:"position-error",message:"Could not calculate drop position",componentData:a}),t.a(2,!1);case 6:if(a.position={x:h.x,y:h.y,z:h.z},u=this.checkBoundingBoxOverlap(),o=!1,!u){t.n=7;break}return n.onPlacementCanceled&&n.onPlacementCanceled({reason:"overlap",componentData:a}),t.a(2,!1);case 7:if(!n.onAddComponent){t.n=9;break}return t.n=8,n.onAddComponent(a);case 8:o=t.v,t.n=11;break;case 9:if(!this.componentManager){t.n=11;break}return t.n=10,this.componentManager.addComponentToScene(a);case 10:o=t.v;case 11:return o&&n.onComponentAdded&&n.onComponentAdded({componentData:a,position:h}),t.a(2,o);case 12:return t.p=12,t.v,t.a(2,!1);case 13:return t.p=13,this.clearDragPreview(),this.cleanupDragPreview(),this.currentDragComponentData=null,this.dragPreviewSize=null,this.dragTargetPosition=null,this.isDragOverScene=!1,t.f(13);case 14:return t.a(2)}},t,this,[[2,3],[1,12,13,14]])})),function(t,e){return o.apply(this,arguments)})},{key:"calculateDropPosition",value:function(t,e){if(!this.camera||!e)return null;try{var i,r=e.getBoundingClientRect(),s=(t.clientX-r.left)/r.width*2-1,a=-(t.clientY-r.top)/r.height*2+1,h=new n.Raycaster;h.setFromCamera({x:s,y:a},this.camera);var u=1/((null===(i=this.transformManager)||void 0===i||null===(i=i.snapValues)||void 0===i?void 0:i.translation)||.5),o=null;if(this.scene.traverse(function(t){var e;t.isMesh&&null!==(e=t.userData)&&void 0!==e&&e.isBaseGround&&(o=t)}),o){var c=h.intersectObject(o,!1);if(c.length>0){var l=c[0];return{x:Math.round(l.point.x*u)/u,y:Math.max(0,l.point.y),z:Math.round(l.point.z*u)/u}}}var f=new n.Plane(new n.Vector3(0,1,0),0),v=new n.Vector3;return h.ray.intersectPlane(f,v)&&v?{x:Math.round(v.x*u)/u,y:0,z:Math.round(v.z*u)/u}:{x:0,y:0,z:0}}catch(t){}return null}},{key:"calculateDragPreviewSize",value:(u=i(r().m(function t(e){var i,n,s,a,h,u;return r().w(function(t){for(;;)switch(t.n){case 0:return i=1,n=1,s=1,t.p=1,t.p=2,t.n=3,this.getModelBoundingBox(e);case 3:if(!(a=t.v)){t.n=4;break}i=a.width,n=a.height,s=a.depth,t.n=5;break;case 4:throw new Error("Could not get model bounding box");case 5:t.n=7;break;case 6:t.p=6,t.v,e.dimensions?(i=e.dimensions.width||e.dimensions.x||1,n=e.dimensions.height||e.dimensions.y||1,s=e.dimensions.depth||e.dimensions.z||1):e.boundingBox?(h=e.boundingBox).max&&h.min?(i=Math.abs(h.max.x-h.min.x)||1,n=Math.abs(h.max.y-h.min.y)||1,s=Math.abs(h.max.z-h.min.z)||1):void 0!==h.width&&void 0!==h.height&&void 0!==h.depth?(i=h.width||1,n=h.height||1,s=h.depth||1):"number"==typeof h.x&&"number"==typeof h.y&&"number"==typeof h.z&&(i=h.x||1,n=h.y||1,s=h.z||1):(u=e.type||"").toLowerCase().includes("chiller")?(i=2,n=2,s=2):u.toLowerCase().includes("pump")?(i=1,n=1,s=1):u.toLowerCase().includes("tower")?(i=3,n=4,s=3):(i=1,n=1,s=1);case 7:i=Math.max(i,.5),n=Math.max(n,.5),s=Math.max(s,.5),this.dragPreviewSize={width:i,height:n,depth:s},t.n=9;break;case 8:t.p=8,t.v,this.dragPreviewSize={width:1,height:1,depth:1};case 9:return t.a(2)}},t,this,[[2,6],[1,8]])})),function(t){return u.apply(this,arguments)})},{key:"getModelBoundingBox",value:(h=i(r().m(function t(e){var i,s,a,h,u,o,c;return r().w(function(t){for(;;)switch(t.n){case 0:if(e.libraryId){t.n=1;break}return t.a(2,null);case 1:return t.p=1,s={},t.p=2,t.n=3,fetch("./library/component-dictionary.json");case 3:return a=t.v,t.n=4,a.json();case 4:s=t.v,t.n=6;break;case 5:return t.p=5,t.v,t.a(2,null);case 6:if((h=s[e.libraryId])&&h.modelKey){t.n=7;break}return t.a(2,null);case 7:if(u=null===(i=this.modelPreloader)||void 0===i?void 0:i.getCachedModel(h.modelKey)){t.n=8;break}return t.a(2,null);case 8:return o=(new n.Box3).setFromObject(u),c=o.getSize(new n.Vector3),t.a(2,{width:c.x,height:c.y,depth:c.z});case 9:return t.p=9,t.v,t.a(2,null)}},t,this,[[2,5],[1,9]])})),function(t){return h.apply(this,arguments)})},{key:"updateDragPreview",value:(a=i(r().m(function t(e){return r().w(function(t){for(;;)switch(t.n){case 0:if(this.dragPreviewMesh||this.isCreatingDragPreview){t.n=3;break}return this.isCreatingDragPreview=!0,t.p=1,t.n=2,this.createDragPreview();case 2:return t.p=2,this.isCreatingDragPreview=!1,t.f(2);case 3:this.dragPreviewMesh&&e&&(this.dragPreviewMesh.position.set(e.x,e.y,e.z),this.dragPreviewMesh.visible=!0,this.dragPreviewBoundingBox&&(this.dragPreviewBoundingBox.position.set(e.x,e.y,e.z),this.dragPreviewBoundingBox.visible=!0));case 4:return t.a(2)}},t,this,[[1,,2,3]])})),function(t){return a.apply(this,arguments)})},{key:"createDragPreview",value:(s=i(r().m(function t(){var e,i,s,a,h,u,o,c,l;return r().w(function(t){for(;;)switch(t.n){case 0:if(this.clearDragPreview(),this.scene&&this.currentDragComponentData){t.n=1;break}return t.a(2);case 1:return t.p=1,e={},t.p=2,t.n=3,fetch("./library/component-dictionary.json");case 3:return i=t.v,t.n=4,i.json();case 4:e=t.v,t.n=6;break;case 5:t.p=5,t.v;case 6:if(s=this.currentDragComponentData.libraryId,a=e[s],h=null,a&&a.modelKey&&this.modelPreloader)try{(u=this.modelPreloader.getCachedModel(a.modelKey))&&((h=u.clone()).traverse(function(t){t.isMesh&&(t.material=t.material.clone(),t.material.transparent=!0,t.material.opacity=.4,t.material.depthTest=!0,t.material.depthWrite=!0,t.material.needsUpdate=!0)}),h.userData.isPreview=!0)}catch(t){h=null}return h||(o=this.dragPreviewSize||{width:1,height:1,depth:1},c=new n.BoxGeometry(o.width,o.height,o.depth),l=new n.MeshBasicMaterial({color:65280,wireframe:!0,transparent:!0,opacity:.6}),(h=new n.Mesh(c,l)).userData.isFallback=!0,h.userData.isPreview=!0),this.scene.add(h),this.dragPreviewMesh=h,this.dragPreviewMesh.visible=!1,this.createBoundingBoxHelper(),t.a(2,!0);case 7:return t.p=7,t.v,t.a(2,!1)}},t,this,[[2,5],[1,7]])})),function(){return s.apply(this,arguments)})},{key:"createBoundingBoxHelper",value:function(){if(this.dragPreviewMesh){var t=(new n.Box3).setFromObject(this.dragPreviewMesh),e=t.getSize(new n.Vector3);t.getCenter(new n.Vector3);var i=new n.BoxGeometry(e.x,e.y,e.z),r=new n.LineBasicMaterial({color:16776960,transparent:!0,opacity:.3}),s=new n.EdgesGeometry(i),a=new n.LineSegments(s,r);a.position.copy(this.dragPreviewMesh.position),this.scene.add(a),this.dragPreviewBoundingBox=a,this.dragPreviewBoundingBox.visible=!1}}},{key:"checkBoundingBoxOverlap",value:function(){var t=this;if(!this.dragPreviewMesh||!this.scene)return!1;var e=(new n.Box3).setFromObject(this.dragPreviewMesh),i=[];this.scene.traverse(function(e){!e.isMesh||e===t.dragPreviewMesh||e===t.dragPreviewBoundingBox||e.userData.isBaseGround||e.userData.isBrickWall||e.userData.isBaseGrid||e.userData&&("component"===e.userData.componentType||"connector"===e.userData.componentType||"gateway"===e.userData.componentType)&&i.push(e)});for(var r=0,s=i;r<s.length;r++){var a=s[r],h=(new n.Box3).setFromObject(a);if(e.intersectsBox(h))return!0}return!1}},{key:"clearDragPreview",value:function(){this.dragPreviewMesh&&(this.dragPreviewMesh.visible=!1),this.dragPreviewBoundingBox&&(this.dragPreviewBoundingBox.visible=!1)}},{key:"cleanupDragPreview",value:function(){this.dragPreviewMesh&&(this.scene.remove(this.dragPreviewMesh),this.dragPreviewMesh.geometry&&this.dragPreviewMesh.geometry.dispose(),this.dragPreviewMesh.material&&(Array.isArray(this.dragPreviewMesh.material)?this.dragPreviewMesh.material.forEach(function(t){return t.dispose()}):this.dragPreviewMesh.material.dispose()),this.dragPreviewMesh=null),this.dragPreviewBoundingBox&&(this.scene.remove(this.dragPreviewBoundingBox),this.dragPreviewBoundingBox.geometry&&this.dragPreviewBoundingBox.geometry.dispose(),this.dragPreviewBoundingBox.material&&this.dragPreviewBoundingBox.material.dispose(),this.dragPreviewBoundingBox=null)}},{key:"dispose",value:function(){this.cleanupDragPreview(),this.currentDragComponentData=null,this.dragPreviewSize=null,this.isDragOverScene=!1,this.dragTargetPosition=null}},{key:"getDragState",value:function(){return{isDragging:!!this.currentDragComponentData,isDragOverScene:this.isDragOverScene,dragComponentData:this.currentDragComponentData,dragTargetPosition:this.dragTargetPosition}}}]);var s,a,h,u,o,c,l,f}();export{s as default};
+import { createClass as _createClass, classCallCheck as _classCallCheck, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as THREE from 'three';
+
+/**
+ * DragDropManager - Manages 3D drag and drop operations for scene components
+ */
+var DragDropManager = /*#__PURE__*/function () {
+  function DragDropManager(params) {
+    _classCallCheck(this, DragDropManager);
+    // Store references to essential scene components
+    this.scene = params.scene;
+    this.camera = params.camera;
+    this.transformManager = params.transformManager;
+    this.modelPreloader = params.modelPreloader;
+    this.componentManager = params.componentManager;
+
+    // Internal state
+    this.currentDragComponentData = null;
+    this.dragPreviewSize = null;
+    this.isCreatingDragPreview = false;
+    this.dragPreviewMesh = null;
+    this.dragPreviewBoundingBox = null;
+    this.dragTargetPosition = null;
+    this.isDragOverScene = false;
+
+    // Bind methods to preserve context
+    this.onComponentDragStart = this.onComponentDragStart.bind(this);
+    this.onComponentDragEnd = this.onComponentDragEnd.bind(this);
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  /**
+   * Handle component drag start with component data
+   */
+  return _createClass(DragDropManager, [{
+    key: "onComponentDragStart",
+    value: (function () {
+      var _onComponentDragStart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(componentData, containerRef) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              console.log('🎯 Component drag started with data:', componentData);
+              this.currentDragComponentData = componentData;
+
+              // Calculate size immediately since we have the data
+              _context.n = 1;
+              return this.calculateDragPreviewSize(componentData);
+            case 1:
+              return _context.a(2, true);
+          }
+        }, _callee, this);
+      }));
+      function onComponentDragStart(_x, _x2) {
+        return _onComponentDragStart.apply(this, arguments);
+      }
+      return onComponentDragStart;
+    }()
+    /**
+     * Handle component drag end
+     */
+    )
+  }, {
+    key: "onComponentDragEnd",
+    value: function onComponentDragEnd() {
+      console.log('🎯 Component drag ended');
+      // IMPORTANT: Full cleanup of all drag-related state
+      this.currentDragComponentData = null;
+      this.dragPreviewSize = null;
+      this.isCreatingDragPreview = false;
+      this.clearDragPreview();
+      this.cleanupDragPreview();
+      this.dragTargetPosition = null;
+      this.isDragOverScene = false;
+      return true;
+    }
+
+    /**
+     * Handle drag enter event
+     */
+  }, {
+    key: "onDragEnter",
+    value: (function () {
+      var _onDragEnter = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event, containerRef) {
+        var componentDataStr;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              event.preventDefault();
+              this.isDragOverScene = true;
+
+              // Try to get component data from the drag event first if we don't have it
+              if (!this.currentDragComponentData) {
+                try {
+                  componentDataStr = event.dataTransfer.getData('application/json');
+                  if (componentDataStr) {
+                    this.currentDragComponentData = JSON.parse(componentDataStr);
+                    console.log('🎯 Retrieved component data from drag event:', this.currentDragComponentData);
+                  }
+                } catch (error) {
+                  console.warn('⚠️ Could not parse component data from drag event:', error);
+                }
+              }
+
+              // If we don't have size calculated yet and we have component data, calculate it now
+              if (!(!this.dragPreviewSize && this.currentDragComponentData)) {
+                _context2.n = 1;
+                break;
+              }
+              _context2.n = 1;
+              return this.calculateDragPreviewSize(this.currentDragComponentData);
+            case 1:
+              if (!(!this.dragPreviewMesh && this.currentDragComponentData && !this.isCreatingDragPreview)) {
+                _context2.n = 4;
+                break;
+              }
+              this.isCreatingDragPreview = true;
+              _context2.p = 2;
+              _context2.n = 3;
+              return this.createDragPreview();
+            case 3:
+              _context2.p = 3;
+              this.isCreatingDragPreview = false;
+              return _context2.f(3);
+            case 4:
+              console.log('🎯 Component drag entered scene area');
+            case 5:
+              return _context2.a(2);
+          }
+        }, _callee2, this, [[2,, 3, 4]]);
+      }));
+      function onDragEnter(_x3, _x4) {
+        return _onDragEnter.apply(this, arguments);
+      }
+      return onDragEnter;
+    }()
+    /**
+     * Handle drag leave event
+     */
+    )
+  }, {
+    key: "onDragLeave",
+    value: function onDragLeave(event, containerRef) {
+      // Only set to false if we're actually leaving the scene container
+      if (!containerRef.contains(event.relatedTarget)) {
+        this.isDragOverScene = false;
+        this.clearDragPreview();
+        console.log('🎯 Component drag left scene area');
+      }
+    }
+
+    /**
+     * Handle drag over event to calculate 3D position
+     */
+  }, {
+    key: "onDragOver",
+    value: (function () {
+      var _onDragOver = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(event, containerRef) {
+        var componentDataStr, targetPosition, isOverlapping, meshColor, _t;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              event.preventDefault();
+              event.dataTransfer.dropEffect = 'copy';
+
+              // Try to get component data from the drag event if we don't have it
+              if (this.currentDragComponentData) {
+                _context3.n = 4;
+                break;
+              }
+              _context3.p = 1;
+              componentDataStr = event.dataTransfer.getData('application/json');
+              if (!componentDataStr) {
+                _context3.n = 2;
+                break;
+              }
+              this.currentDragComponentData = JSON.parse(componentDataStr);
+              console.log('🎯 Retrieved component data from drag over event:', this.currentDragComponentData);
+
+              // Calculate size now that we have the data
+              if (this.dragPreviewSize) {
+                _context3.n = 2;
+                break;
+              }
+              _context3.n = 2;
+              return this.calculateDragPreviewSize(this.currentDragComponentData);
+            case 2:
+              _context3.n = 4;
+              break;
+            case 3:
+              _context3.p = 3;
+              _t = _context3.v;
+              console.warn('⚠️ Could not parse component data from drag over event:', _t);
+            case 4:
+              // Calculate 3D world position from mouse coordinates
+              targetPosition = this.calculateDropPosition(event, containerRef);
+              if (!targetPosition) {
+                _context3.n = 6;
+                break;
+              }
+              this.dragTargetPosition = targetPosition;
+              _context3.n = 5;
+              return this.updateDragPreview(targetPosition);
+            case 5:
+              // Update fallback mesh color if using wireframe preview
+              if (this.dragPreviewMesh && this.dragPreviewMesh.userData.isFallback) {
+                isOverlapping = this.checkBoundingBoxOverlap();
+                meshColor = isOverlapping ? 0xff0000 : 0x00ff00; // Red if overlapping, green otherwise
+                this.dragPreviewMesh.material.color.set(meshColor);
+              }
+            case 6:
+              return _context3.a(2);
+          }
+        }, _callee3, this, [[1, 3]]);
+      }));
+      function onDragOver(_x5, _x6) {
+        return _onDragOver.apply(this, arguments);
+      }
+      return onDragOver;
+    }()
+    /**
+     * Handle drop event to add component to scene
+     */
+    )
+  }, {
+    key: "onDrop",
+    value: (function () {
+      var _onDrop = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(event, containerRef) {
+        var callbacks,
+          componentDataStr,
+          componentData,
+          dropPosition,
+          isOverlapping,
+          success,
+          _args4 = arguments,
+          _t2,
+          _t3;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              callbacks = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : {};
+              event.preventDefault();
+              this.isDragOverScene = false;
+              _context4.p = 1;
+              // IMPORTANT: Always get fresh component data from the event
+              // Don't rely on this.currentDragComponentData which might be stale
+              componentDataStr = event.dataTransfer.getData('application/json');
+              if (componentDataStr) {
+                _context4.n = 2;
+                break;
+              }
+              console.warn('⚠️ No component data found in drop event');
+              // Notify parent about the error
+              if (callbacks.onPlacementCanceled) {
+                callbacks.onPlacementCanceled({
+                  reason: 'invalid-data',
+                  message: 'No component data found in drop event'
+                });
+              }
+              return _context4.a(2, false);
+            case 2:
+              _context4.p = 2;
+              componentData = JSON.parse(componentDataStr);
+              console.log('🎯 Component dropped:', componentData);
+              _context4.n = 4;
+              break;
+            case 3:
+              _context4.p = 3;
+              _t2 = _context4.v;
+              console.error('❌ Error parsing component data:', _t2);
+              // Notify parent about the error
+              if (callbacks.onPlacementCanceled) {
+                callbacks.onPlacementCanceled({
+                  reason: 'parse-error',
+                  message: 'Could not parse component data'
+                });
+              }
+              return _context4.a(2, false);
+            case 4:
+              if (!(!componentData || !componentData.libraryId || !componentData.modelKey)) {
+                _context4.n = 5;
+                break;
+              }
+              console.error('❌ Invalid component data, missing required fields');
+              // Notify parent about the error
+              if (callbacks.onPlacementCanceled) {
+                callbacks.onPlacementCanceled({
+                  reason: 'invalid-data',
+                  message: 'Component data missing required fields'
+                });
+              }
+              return _context4.a(2, false);
+            case 5:
+              // Calculate 3D world position
+              dropPosition = this.calculateDropPosition(event, containerRef); // We always get a valid position now due to the improved calculateDropPosition method,
+              // but let's still check for safety
+              if (dropPosition) {
+                _context4.n = 6;
+                break;
+              }
+              console.warn('⚠️ Could not calculate drop position');
+              if (callbacks.onPlacementCanceled) {
+                callbacks.onPlacementCanceled({
+                  reason: 'position-error',
+                  message: 'Could not calculate drop position',
+                  componentData: componentData
+                });
+              }
+              return _context4.a(2, false);
+            case 6:
+              // Update component position
+              componentData.position = {
+                x: dropPosition.x,
+                y: dropPosition.y,
+                z: dropPosition.z
+              };
+              console.log('🎯 Dropping component at position:', dropPosition);
+
+              // Check for component overlap before adding
+              isOverlapping = this.checkBoundingBoxOverlap(); // Only add component to scene if not overlapping
+              success = false;
+              if (!isOverlapping) {
+                _context4.n = 7;
+                break;
+              }
+              console.warn('⚠️ Canceling component placement due to overlap');
+              // Emit an event to inform the user
+              if (callbacks.onPlacementCanceled) {
+                callbacks.onPlacementCanceled({
+                  reason: 'overlap',
+                  componentData: componentData
+                });
+              }
+              return _context4.a(2, false);
+            case 7:
+              if (!callbacks.onAddComponent) {
+                _context4.n = 9;
+                break;
+              }
+              _context4.n = 8;
+              return callbacks.onAddComponent(componentData);
+            case 8:
+              success = _context4.v;
+              _context4.n = 11;
+              break;
+            case 9:
+              if (!this.componentManager) {
+                _context4.n = 11;
+                break;
+              }
+              _context4.n = 10;
+              return this.componentManager.addComponentToScene(componentData);
+            case 10:
+              success = _context4.v;
+            case 11:
+              if (success) {
+                console.log('✅ Component successfully added to scene via drag & drop');
+                // Pass properly structured data with position and componentData properties
+                if (callbacks.onComponentAdded) {
+                  callbacks.onComponentAdded({
+                    componentData: componentData,
+                    position: dropPosition
+                  });
+                }
+              } else {
+                console.error('❌ Failed to add component to scene via drag & drop');
+              }
+              return _context4.a(2, success);
+            case 12:
+              _context4.p = 12;
+              _t3 = _context4.v;
+              console.error('❌ Error handling component drop:', _t3);
+              return _context4.a(2, false);
+            case 13:
+              _context4.p = 13;
+              // IMPORTANT: Explicitly reset all drag-related state to prevent reuse
+              this.clearDragPreview();
+              this.cleanupDragPreview();
+              this.currentDragComponentData = null;
+              this.dragPreviewSize = null;
+              this.dragTargetPosition = null;
+              this.isDragOverScene = false;
+              return _context4.f(13);
+            case 14:
+              return _context4.a(2);
+          }
+        }, _callee4, this, [[2, 3], [1, 12, 13, 14]]);
+      }));
+      function onDrop(_x7, _x8) {
+        return _onDrop.apply(this, arguments);
+      }
+      return onDrop;
+    }()
+    /**
+     * Calculate 3D world position from mouse coordinates
+     */
+    )
+  }, {
+    key: "calculateDropPosition",
+    value: function calculateDropPosition(event, containerRef) {
+      console.log("calculateDropPosition started");
+      if (!this.camera || !containerRef) {
+        return null;
+      }
+      try {
+        var _this$transformManage;
+        // Get mouse position relative to the scene container
+        var rect = containerRef.getBoundingClientRect();
+        var mouseX = (event.clientX - rect.left) / rect.width * 2 - 1;
+        var mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        // Create raycaster
+        var raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera({
+          x: mouseX,
+          y: mouseY
+        }, this.camera);
+
+        // Get the translation snap value from transform manager, default to 0.5 if not available
+        var snapGrid = ((_this$transformManage = this.transformManager) === null || _this$transformManage === void 0 || (_this$transformManage = _this$transformManage.snapValues) === null || _this$transformManage === void 0 ? void 0 : _this$transformManage.translation) || 0.5;
+        var snapFactor = 1 / snapGrid;
+
+        // Find only the ground mesh for intersection
+        var groundMesh = null;
+        this.scene.traverse(function (child) {
+          var _child$userData;
+          if (child.isMesh && (_child$userData = child.userData) !== null && _child$userData !== void 0 && _child$userData.isBaseGround) {
+            groundMesh = child;
+          }
+        });
+        if (groundMesh) {
+          // Intersect only with the ground mesh
+          var intersections = raycaster.intersectObject(groundMesh, false);
+          if (intersections.length > 0) {
+            var intersection = intersections[0];
+            return {
+              x: Math.round(intersection.point.x * snapFactor) / snapFactor,
+              // Snap to grid
+              y: Math.max(0, intersection.point.y),
+              // Ensure above ground
+              z: Math.round(intersection.point.z * snapFactor) / snapFactor // Snap to grid
+            };
+          }
+        }
+
+        // If no ground mesh found or no intersection, project onto a plane at Y=0 (ground level) as fallback
+        var groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+        var intersectionPoint = new THREE.Vector3();
+        var didIntersect = raycaster.ray.intersectPlane(groundPlane, intersectionPoint);
+        if (didIntersect && intersectionPoint) {
+          return {
+            x: Math.round(intersectionPoint.x * snapFactor) / snapFactor,
+            // Snap to grid
+            y: 0,
+            // Ground level
+            z: Math.round(intersectionPoint.z * snapFactor) / snapFactor // Snap to grid
+          };
+        } else {
+          // Provide a reasonable default position if we can't determine one
+          console.log('⚠️ Could not determine intersection, using default position');
+          return {
+            x: 0,
+            y: 0,
+            z: 0
+          };
+        }
+      } catch (error) {
+        console.error('❌ Error calculating drop position:', error);
+      }
+      return null;
+    }
+
+    /**
+     * Calculate drag preview size once based on component data
+     */
+  }, {
+    key: "calculateDragPreviewSize",
+    value: (function () {
+      var _calculateDragPreviewSize = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(componentData) {
+        var width, height, depth, actualSize, bbox, type, _t5;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              // Use component dimensions if available, otherwise use defaults
+              width = 1, height = 1, depth = 1;
+              _context5.p = 1;
+              console.log('🎯 Calculating preview size for:', componentData);
+
+              // First try to get accurate size from the actual model
+              _context5.p = 2;
+              _context5.n = 3;
+              return this.getModelBoundingBox(componentData);
+            case 3:
+              actualSize = _context5.v;
+              if (!actualSize) {
+                _context5.n = 4;
+                break;
+              }
+              width = actualSize.width;
+              height = actualSize.height;
+              depth = actualSize.depth;
+              console.log('📐 Using actual model dimensions:', {
+                width: width,
+                height: height,
+                depth: depth
+              });
+              _context5.n = 5;
+              break;
+            case 4:
+              throw new Error('Could not get model bounding box');
+            case 5:
+              _context5.n = 7;
+              break;
+            case 6:
+              _context5.p = 6;
+              _context5.v;
+              console.log('📐 Falling back to metadata-based sizing');
+
+              // Check if component has explicit dimensions
+              if (componentData.dimensions) {
+                width = componentData.dimensions.width || componentData.dimensions.x || 1;
+                height = componentData.dimensions.height || componentData.dimensions.y || 1;
+                depth = componentData.dimensions.depth || componentData.dimensions.z || 1;
+                console.log('📐 Using explicit dimensions:', {
+                  width: width,
+                  height: height,
+                  depth: depth
+                });
+              }
+              // Check if component has boundingBox data
+              else if (componentData.boundingBox) {
+                bbox = componentData.boundingBox;
+                console.log('📐 Using boundingBox data:', bbox);
+                if (bbox.max && bbox.min) {
+                  width = Math.abs(bbox.max.x - bbox.min.x) || 1;
+                  height = Math.abs(bbox.max.y - bbox.min.y) || 1;
+                  depth = Math.abs(bbox.max.z - bbox.min.z) || 1;
+                } else if (bbox.width !== undefined && bbox.height !== undefined && bbox.depth !== undefined) {
+                  width = bbox.width || 1;
+                  height = bbox.height || 1;
+                  depth = bbox.depth || 1;
+                } else if (typeof bbox.x === 'number' && typeof bbox.y === 'number' && typeof bbox.z === 'number') {
+                  width = bbox.x || 1;
+                  height = bbox.y || 1;
+                  depth = bbox.z || 1;
+                }
+              }
+              // Use default size based on component type
+              else {
+                // Default sizes based on component type
+                type = componentData.type || '';
+                if (type.toLowerCase().includes('chiller')) {
+                  width = 2;
+                  height = 2;
+                  depth = 2;
+                } else if (type.toLowerCase().includes('pump')) {
+                  width = 1;
+                  height = 1;
+                  depth = 1;
+                } else if (type.toLowerCase().includes('tower')) {
+                  width = 3;
+                  height = 4;
+                  depth = 3;
+                } else {
+                  width = 1;
+                  height = 1;
+                  depth = 1;
+                }
+                console.log('📐 Using type-based default dimensions:', {
+                  width: width,
+                  height: height,
+                  depth: depth
+                });
+              }
+            case 7:
+              // Ensure minimum size
+              width = Math.max(width, 0.5);
+              height = Math.max(height, 0.5);
+              depth = Math.max(depth, 0.5);
+              this.dragPreviewSize = {
+                width: width,
+                height: height,
+                depth: depth
+              };
+              console.log('🎯 Final calculated drag preview size:', this.dragPreviewSize);
+              _context5.n = 9;
+              break;
+            case 8:
+              _context5.p = 8;
+              _t5 = _context5.v;
+              console.warn('⚠️ Error calculating preview size, using defaults:', _t5);
+              this.dragPreviewSize = {
+                width: 1,
+                height: 1,
+                depth: 1
+              };
+            case 9:
+              return _context5.a(2);
+          }
+        }, _callee5, this, [[2, 6], [1, 8]]);
+      }));
+      function calculateDragPreviewSize(_x9) {
+        return _calculateDragPreviewSize.apply(this, arguments);
+      }
+      return calculateDragPreviewSize;
+    }()
+    /**
+     * Get the actual bounding box of a model
+     */
+    )
+  }, {
+    key: "getModelBoundingBox",
+    value: (function () {
+      var _getModelBoundingBox = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(componentData) {
+        var _this$modelPreloader, componentDictionary, dictResponse, libraryComponent, gltfScene, boundingBox, size, _t7;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
+            case 0:
+              if (componentData.libraryId) {
+                _context6.n = 1;
+                break;
+              }
+              return _context6.a(2, null);
+            case 1:
+              _context6.p = 1;
+              // Get the component dictionary for model information
+              componentDictionary = {};
+              _context6.p = 2;
+              _context6.n = 3;
+              return fetch('./library/component-dictionary.json');
+            case 3:
+              dictResponse = _context6.v;
+              _context6.n = 4;
+              return dictResponse.json();
+            case 4:
+              componentDictionary = _context6.v;
+              _context6.n = 6;
+              break;
+            case 5:
+              _context6.p = 5;
+              _context6.v;
+              console.warn('⚠️ Could not load component dictionary for size calculation');
+              return _context6.a(2, null);
+            case 6:
+              libraryComponent = componentDictionary[componentData.libraryId];
+              if (!(!libraryComponent || !libraryComponent.modelKey)) {
+                _context6.n = 7;
+                break;
+              }
+              return _context6.a(2, null);
+            case 7:
+              // Try to get the model from the preloader cache first
+              gltfScene = (_this$modelPreloader = this.modelPreloader) === null || _this$modelPreloader === void 0 ? void 0 : _this$modelPreloader.getCachedModel(libraryComponent.modelKey);
+              if (gltfScene) {
+                _context6.n = 8;
+                break;
+              }
+              console.log('📐 Model not in cache, cannot get accurate size');
+              return _context6.a(2, null);
+            case 8:
+              // Calculate the bounding box
+              boundingBox = new THREE.Box3().setFromObject(gltfScene);
+              size = boundingBox.getSize(new THREE.Vector3());
+              return _context6.a(2, {
+                width: size.x,
+                height: size.y,
+                depth: size.z
+              });
+            case 9:
+              _context6.p = 9;
+              _t7 = _context6.v;
+              console.warn('⚠️ Error getting model bounding box:', _t7);
+              return _context6.a(2, null);
+          }
+        }, _callee6, this, [[2, 5], [1, 9]]);
+      }));
+      function getModelBoundingBox(_x0) {
+        return _getModelBoundingBox.apply(this, arguments);
+      }
+      return getModelBoundingBox;
+    }()
+    /**
+     * Update drag preview visualization
+     */
+    )
+  }, {
+    key: "updateDragPreview",
+    value: (function () {
+      var _updateDragPreview = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(position) {
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.n) {
+            case 0:
+              if (!(!this.dragPreviewMesh && !this.isCreatingDragPreview)) {
+                _context7.n = 3;
+                break;
+              }
+              this.isCreatingDragPreview = true;
+              _context7.p = 1;
+              _context7.n = 2;
+              return this.createDragPreview();
+            case 2:
+              _context7.p = 2;
+              this.isCreatingDragPreview = false;
+              return _context7.f(2);
+            case 3:
+              if (this.dragPreviewMesh && position) {
+                // Update mesh position
+                this.dragPreviewMesh.position.set(position.x, position.y, position.z);
+                this.dragPreviewMesh.visible = true;
+
+                // Update bounding box position if it exists
+                if (this.dragPreviewBoundingBox) {
+                  this.dragPreviewBoundingBox.position.set(position.x, position.y, position.z);
+                  this.dragPreviewBoundingBox.visible = true;
+                }
+              }
+            case 4:
+              return _context7.a(2);
+          }
+        }, _callee7, this, [[1,, 2, 3]]);
+      }));
+      function updateDragPreview(_x1) {
+        return _updateDragPreview.apply(this, arguments);
+      }
+      return updateDragPreview;
+    }()
+    /**
+     * Create drag preview mesh with actual model or fallback box
+     */
+    )
+  }, {
+    key: "createDragPreview",
+    value: (function () {
+      var _createDragPreview = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+        var componentDictionary, dictResponse, libraryId, libraryComponent, previewMesh, cachedModel, size, geometry, material, _t9;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.n) {
+            case 0:
+              // Clean up any existing preview
+              this.clearDragPreview();
+              if (!(!this.scene || !this.currentDragComponentData)) {
+                _context8.n = 1;
+                break;
+              }
+              return _context8.a(2);
+            case 1:
+              _context8.p = 1;
+              console.log('🎯 Creating drag preview for:', this.currentDragComponentData);
+
+              // Get the component dictionary for model information
+              componentDictionary = {};
+              _context8.p = 2;
+              _context8.n = 3;
+              return fetch('./library/component-dictionary.json');
+            case 3:
+              dictResponse = _context8.v;
+              _context8.n = 4;
+              return dictResponse.json();
+            case 4:
+              componentDictionary = _context8.v;
+              _context8.n = 6;
+              break;
+            case 5:
+              _context8.p = 5;
+              _context8.v;
+              console.warn('⚠️ Could not load component dictionary for preview');
+            case 6:
+              libraryId = this.currentDragComponentData.libraryId;
+              libraryComponent = componentDictionary[libraryId];
+              previewMesh = null; // Try to create a preview from the actual model if available
+              if (libraryComponent && libraryComponent.modelKey && this.modelPreloader) {
+                try {
+                  // Get the cached model if available
+                  cachedModel = this.modelPreloader.getCachedModel(libraryComponent.modelKey);
+                  if (cachedModel) {
+                    // Clone the model for preview
+                    previewMesh = cachedModel.clone();
+
+                    // Make it semi-transparent
+                    previewMesh.traverse(function (child) {
+                      if (child.isMesh) {
+                        // Create a clone of the material to avoid affecting the original
+                        child.material = child.material.clone();
+                        child.material.transparent = true;
+                        child.material.opacity = 0.4;
+                        child.material.depthTest = true;
+                        child.material.depthWrite = true;
+                        child.material.needsUpdate = true;
+                      }
+                    });
+                    previewMesh.userData.isPreview = true;
+                    console.log('🎯 Created model-based preview');
+                  }
+                } catch (modelError) {
+                  console.warn('⚠️ Could not create model-based preview:', modelError);
+                  previewMesh = null;
+                }
+              }
+
+              // If we couldn't create a preview from the model, use a fallback box
+              if (!previewMesh) {
+                console.log('🎯 Creating fallback box preview');
+
+                // Use the calculated size or defaults
+                size = this.dragPreviewSize || {
+                  width: 1,
+                  height: 1,
+                  depth: 1
+                }; // Create a box with wireframe material
+                geometry = new THREE.BoxGeometry(size.width, size.height, size.depth);
+                material = new THREE.MeshBasicMaterial({
+                  color: 0x00ff00,
+                  // Green by default
+                  wireframe: true,
+                  transparent: true,
+                  opacity: 0.6
+                });
+                previewMesh = new THREE.Mesh(geometry, material);
+                previewMesh.userData.isFallback = true;
+                previewMesh.userData.isPreview = true;
+              }
+
+              // Add to scene
+              this.scene.add(previewMesh);
+              this.dragPreviewMesh = previewMesh;
+
+              // Initially hide the preview
+              this.dragPreviewMesh.visible = false;
+
+              // Also create a bounding box for overlap detection
+              this.createBoundingBoxHelper();
+              return _context8.a(2, true);
+            case 7:
+              _context8.p = 7;
+              _t9 = _context8.v;
+              console.error('❌ Error creating drag preview:', _t9);
+              return _context8.a(2, false);
+          }
+        }, _callee8, this, [[2, 5], [1, 7]]);
+      }));
+      function createDragPreview() {
+        return _createDragPreview.apply(this, arguments);
+      }
+      return createDragPreview;
+    }()
+    /**
+     * Create a bounding box helper for the preview mesh
+     */
+    )
+  }, {
+    key: "createBoundingBoxHelper",
+    value: function createBoundingBoxHelper() {
+      if (!this.dragPreviewMesh) return;
+
+      // Create a bounding box for overlap detection
+      var bbox = new THREE.Box3().setFromObject(this.dragPreviewMesh);
+      var size = bbox.getSize(new THREE.Vector3());
+      bbox.getCenter(new THREE.Vector3());
+
+      // Create a wireframe box to represent the bounding box
+      var geometry = new THREE.BoxGeometry(size.x, size.y, size.z);
+      var material = new THREE.LineBasicMaterial({
+        color: 0xffff00,
+        transparent: true,
+        opacity: 0.3
+      });
+
+      // Use edges to create a wireframe
+      var edges = new THREE.EdgesGeometry(geometry);
+      var bboxMesh = new THREE.LineSegments(edges, material);
+
+      // Position relative to the preview mesh
+      bboxMesh.position.copy(this.dragPreviewMesh.position);
+
+      // Add to scene
+      this.scene.add(bboxMesh);
+      this.dragPreviewBoundingBox = bboxMesh;
+      this.dragPreviewBoundingBox.visible = false;
+    }
+
+    /**
+     * Check if the preview mesh overlaps with any existing scene objects
+     */
+  }, {
+    key: "checkBoundingBoxOverlap",
+    value: function checkBoundingBoxOverlap() {
+      var _this = this;
+      if (!this.dragPreviewMesh || !this.scene) return false;
+
+      // Create a bounding box for the preview mesh
+      var previewBBox = new THREE.Box3().setFromObject(this.dragPreviewMesh);
+
+      // Get all meshes in the scene
+      var sceneMeshes = [];
+      this.scene.traverse(function (object) {
+        // Only check meshes that:
+        // 1. Are not the preview mesh itself
+        // 2. Are not marked as ground, grid, or wall
+        // 3. Have component or connector type
+        if (object.isMesh && object !== _this.dragPreviewMesh && object !== _this.dragPreviewBoundingBox && !object.userData.isBaseGround && !object.userData.isBrickWall && !object.userData.isBaseGrid) {
+          // Check for component objects by userData
+          var isComponent = object.userData && (object.userData.componentType === 'component' || object.userData.componentType === 'connector' || object.userData.componentType === 'gateway');
+          if (isComponent) {
+            sceneMeshes.push(object);
+          }
+        }
+      });
+
+      // Check for overlaps
+      for (var _i = 0, _sceneMeshes = sceneMeshes; _i < _sceneMeshes.length; _i++) {
+        var mesh = _sceneMeshes[_i];
+        var meshBBox = new THREE.Box3().setFromObject(mesh);
+        if (previewBBox.intersectsBox(meshBBox)) {
+          console.log('⚠️ Overlap detected with:', mesh.uuid);
+          return true;
+        }
+      }
+      return false;
+    }
+
+    /**
+     * Clear the drag preview
+     */
+  }, {
+    key: "clearDragPreview",
+    value: function clearDragPreview() {
+      if (this.dragPreviewMesh) {
+        this.dragPreviewMesh.visible = false;
+      }
+      if (this.dragPreviewBoundingBox) {
+        this.dragPreviewBoundingBox.visible = false;
+      }
+    }
+
+    /**
+     * Cleanup and remove the drag preview meshes
+     */
+  }, {
+    key: "cleanupDragPreview",
+    value: function cleanupDragPreview() {
+      if (this.dragPreviewMesh) {
+        this.scene.remove(this.dragPreviewMesh);
+
+        // Dispose of geometries and materials
+        if (this.dragPreviewMesh.geometry) {
+          this.dragPreviewMesh.geometry.dispose();
+        }
+        if (this.dragPreviewMesh.material) {
+          if (Array.isArray(this.dragPreviewMesh.material)) {
+            this.dragPreviewMesh.material.forEach(function (material) {
+              return material.dispose();
+            });
+          } else {
+            this.dragPreviewMesh.material.dispose();
+          }
+        }
+        this.dragPreviewMesh = null;
+      }
+      if (this.dragPreviewBoundingBox) {
+        this.scene.remove(this.dragPreviewBoundingBox);
+        if (this.dragPreviewBoundingBox.geometry) {
+          this.dragPreviewBoundingBox.geometry.dispose();
+        }
+        if (this.dragPreviewBoundingBox.material) {
+          this.dragPreviewBoundingBox.material.dispose();
+        }
+        this.dragPreviewBoundingBox = null;
+      }
+    }
+
+    /**
+     * Clean up all resources
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.cleanupDragPreview();
+      this.currentDragComponentData = null;
+      this.dragPreviewSize = null;
+      this.isDragOverScene = false;
+      this.dragTargetPosition = null;
+    }
+
+    /**
+     * Get current drag state
+     */
+  }, {
+    key: "getDragState",
+    value: function getDragState() {
+      return {
+        isDragging: !!this.currentDragComponentData,
+        isDragOverScene: this.isDragOverScene,
+        dragComponentData: this.currentDragComponentData,
+        dragTargetPosition: this.dragTargetPosition
+      };
+    }
+  }]);
+}();
+
+export { DragDropManager as default };