@2112-lab/central-plant 0.3.26 → 0.3.27

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

@@ -94,8 +94,17 @@ var TransformControlsManager = /*#__PURE__*/function () {
       onModeChange: null,
       onObjectRemoved: null,
       onSelectionChanged: null,
-      onIODeviceClick: null
+      onIODeviceClick: null,
+      onIODeviceDrag: null,
+      onIODeviceDragEnd: null
     };
+
+    // IO device drag tracking state
+    this._ioDragMesh = null;
+    this._ioDragStartX = 0;
+    this._ioDragStartY = 0;
+    this._ioDragMoved = false;
+    this._suppressNextClick = false;
     this.init();
   }
 
@@ -175,6 +184,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
       if (callbacks.onIODeviceClick) {
         this.callbacks.onIODeviceClick = callbacks.onIODeviceClick;
       }
+      if (callbacks.onIODeviceDrag) {
+        this.callbacks.onIODeviceDrag = callbacks.onIODeviceDrag;
+      }
+      if (callbacks.onIODeviceDragEnd) {
+        this.callbacks.onIODeviceDragEnd = callbacks.onIODeviceDragEnd;
+      }
       console.log('🔗 Transform controls callbacks registered');
     }
     /**
@@ -381,6 +396,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
     value: function setupKeyboardControls() {
       var _this3 = this;
       this.eventHandlers.keydown = function (event) {
+        // Restore perspective camera when pressing Escape from ortho face view
+        if (event.code === 'Escape') {
+          _this3._restorePerspectiveCamera();
+        }
+
         // Only handle keys when transform controls are active
         if (!_this3.transformControls.enabled || _this3.transformState.isTransforming) {
           return;
@@ -415,9 +435,82 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var raycaster = new THREE.Raycaster();
       var mouse = new THREE.Vector2();
 
-      // Click handler: first click selects (bounding box), second click on same object shows tooltip
+      // ── IO device drag ────────────────────────────────────────────────────
+      // Detect pointerdown on an IO device mesh and convert a drag gesture into
+      // state changes.  Up/right = positive direction, down/left = negative.
+      this.eventHandlers.pointerdown = function (event) {
+        if (_this4.transformState.isTransforming) return;
+        if (!_this4.callbacks.onIODeviceDrag) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(mouse, _this4.camera);
+        var allIntersects = raycaster.intersectObjects(_this4.scene.children, true);
+        var ioDeviceObject = null;
+        var _iterator = _createForOfIteratorHelper(allIntersects),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var hit = _step.value;
+            var obj = hit.object;
+            while (obj) {
+              var _obj$userData;
+              if (((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.objectType) === 'io-device') {
+                ioDeviceObject = obj;
+                break;
+              }
+              obj = obj.parent;
+            }
+            if (ioDeviceObject) break;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        if (!ioDeviceObject) return;
+
+        // Begin session
+        _this4._ioDragMesh = ioDeviceObject;
+        _this4._ioDragStartX = event.clientX;
+        _this4._ioDragStartY = event.clientY;
+        _this4._ioDragMoved = false;
+        if (_this4.orbitControls) _this4.orbitControls.enabled = false;
+        _this4.callbacks.onIODeviceDrag(ioDeviceObject, 0, true);
+        var onMove = function onMove(e) {
+          var dx = e.clientX - _this4._ioDragStartX;
+          var dy = e.clientY - _this4._ioDragStartY;
+          if (Math.abs(dx) > 4 || Math.abs(dy) > 4) _this4._ioDragMoved = true;
+          // Up (−screenY) and right (+screenX) are positive
+          var signedDelta = _this4._ioDragStartY - e.clientY + (e.clientX - _this4._ioDragStartX);
+          _this4.callbacks.onIODeviceDrag(_this4._ioDragMesh, signedDelta, false);
+        };
+        var _onUp = function onUp() {
+          window.removeEventListener('pointermove', onMove);
+          window.removeEventListener('pointerup', _onUp);
+          if (_this4.orbitControls) _this4.orbitControls.enabled = true;
+          if (_this4._ioDragMoved) {
+            // Suppress the click event that will fire after this pointerup
+            _this4._suppressNextClick = true;
+          }
+          if (_this4.callbacks.onIODeviceDragEnd) {
+            _this4.callbacks.onIODeviceDragEnd(_this4._ioDragMesh);
+          }
+          _this4._ioDragMesh = null;
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', _onUp);
+      };
+      this.renderer.domElement.addEventListener('pointerdown', this.eventHandlers.pointerdown);
+
+      // Click handler: left-click selects the object (bounding box + transform controls).
+      // Right-click on a component shows the tooltip.
       this.eventHandlers.click = function (event) {
         var _targetObject$userDat;
+        // Suppress click that follows an IO device drag
+        if (_this4._suppressNextClick) {
+          _this4._suppressNextClick = false;
+          return;
+        }
+
         // Skip if currently transforming
         if (_this4.transformState.isTransforming) {
           return;
@@ -430,15 +523,15 @@ var TransformControlsManager = /*#__PURE__*/function () {
         // Check for direct io-device mesh click (before bounding box selection)
         if (_this4.callbacks.onIODeviceClick) {
           var allIntersects = raycaster.intersectObjects(_this4.scene.children, true);
-          var _iterator = _createForOfIteratorHelper(allIntersects),
-            _step;
+          var _iterator2 = _createForOfIteratorHelper(allIntersects),
+            _step2;
           try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var hit = _step.value;
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var hit = _step2.value;
               var obj = hit.object;
               while (obj) {
-                var _obj$userData;
-                if (((_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.objectType) === 'io-device') {
+                var _obj$userData2;
+                if (((_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.objectType) === 'io-device') {
                   _this4.callbacks.onIODeviceClick(obj);
                   return;
                 }
@@ -446,9 +539,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
               }
             }
           } catch (err) {
-            _iterator.e(err);
+            _iterator2.e(err);
           } finally {
-            _iterator.f();
+            _iterator2.f();
           }
         }
 
@@ -483,23 +576,194 @@ var TransformControlsManager = /*#__PURE__*/function () {
           return;
         }
 
-        // Check if the clicked object is already selected
-        var isAlreadySelected = _this4.selectedObjects.length === 1 && _this4.selectedObjects[0] === targetObject;
-        if (isAlreadySelected) {
-          // Second click on already-selected object: Full selection including tooltips
-          _this4.selectObject(targetObject);
-        } else {
-          // First click on a new object: Transform controls and bounding box only
-          // Always deselect first (this clears tooltips via the callback)
+        // Left-click: select for transform only (bounding box, no tooltip)
+        if (!_this4.selectedObjects.includes(targetObject)) {
           _this4.deselectObject();
-
-          // Then select the new object if there is one (this shows transform controls and bounding box)
-          if (targetObject) {
-            _this4.selectObjectForTransformOnly(targetObject);
-          }
         }
+        _this4.selectObjectForTransformOnly(targetObject);
       };
       this.renderer.domElement.addEventListener('click', this.eventHandlers.click);
+
+      // Right-click handler: show tooltip for the clicked component.
+      this.eventHandlers.contextmenu = function (event) {
+        var _targetObject$userDat2;
+        event.preventDefault();
+        if (_this4.transformState.isTransforming) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(mouse, _this4.camera);
+        var targetObject = _this4._findTargetObject(raycaster, objectFilter);
+        if (!targetObject) return;
+        var objectType = (_targetObject$userDat2 = targetObject.userData) === null || _targetObject$userDat2 === void 0 ? void 0 : _targetObject$userDat2.objectType;
+        if (objectType !== 'component' && objectType !== 'gateway' && objectType !== 'segment') return;
+
+        // Ensure the object is selected, then show the full tooltip.
+        if (!_this4.selectedObjects.includes(targetObject)) {
+          _this4.deselectObject();
+          _this4.selectObjectForTransformOnly(targetObject);
+        }
+        _this4.selectObject(targetObject);
+      };
+      this.renderer.domElement.addEventListener('contextmenu', this.eventHandlers.contextmenu);
+
+      // Double-click handler: switch to orthographic camera fixed to the clicked face.
+      // Press Escape to restore the perspective camera.
+      this.eventHandlers.dblclick = function (event) {
+        if (_this4.transformState.isTransforming) return;
+        var sv = _this4.sceneViewer;
+        if (!sv) return;
+        _this4._calculateMousePosition(event, mouse);
+        raycaster.setFromCamera(_this4.camera, _this4.camera); // ensure raycaster uses current camera
+        raycaster.setFromCamera(mouse, _this4.camera);
+
+        // Raycast directly against scene meshes to obtain the face normal
+        var allHits = raycaster.intersectObjects(_this4.scene.children, true).filter(function (h) {
+          var _h$object$userData, _h$object$userData2;
+          return !((_h$object$userData = h.object.userData) !== null && _h$object$userData !== void 0 && _h$object$userData.isTransformControls) && !((_h$object$userData2 = h.object.userData) !== null && _h$object$userData2 !== void 0 && _h$object$userData2.isBoundingBox);
+        });
+        if (!allHits.length || !allHits[0].face) return;
+        var hit = allHits[0];
+
+        // Walk up to find the component root
+        var componentObj = hit.object;
+        while (componentObj) {
+          var _componentObj$userDat;
+          if (((_componentObj$userDat = componentObj.userData) === null || _componentObj$userDat === void 0 ? void 0 : _componentObj$userDat.objectType) === 'component') break;
+          componentObj = componentObj.parent;
+        }
+        if (!componentObj) return;
+
+        // Transform face normal from local object space to world space
+        var normalMatrix = new THREE.Matrix3().getNormalMatrix(hit.object.matrixWorld);
+        var worldNormal = hit.face.normal.clone().applyMatrix3(normalMatrix).normalize();
+
+        // Snap to the closest cardinal axis (Z-up: ±X, ±Y, ±Z)
+        var cardinals = [new THREE.Vector3(1, 0, 0), new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, -1, 0), new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, -1)];
+        var faceDir = cardinals.reduce(function (best, c) {
+          return c.dot(worldNormal) > best.dot(worldNormal) ? c : best;
+        });
+
+        // Bounding box of the component
+        var bbox = new THREE.Box3().setFromObject(componentObj);
+        var center = bbox.getCenter(new THREE.Vector3());
+        var size = bbox.getSize(new THREE.Vector3());
+
+        // Ortho half-extents: axes perpendicular to the face direction
+        var isXFace = Math.abs(faceDir.x) > 0.5;
+        var isYFace = Math.abs(faceDir.y) > 0.5;
+        var halfW, halfH;
+        if (isXFace) {
+          halfW = size.y / 2;
+          halfH = size.z / 2;
+        } else if (isYFace) {
+          halfW = size.x / 2;
+          halfH = size.z / 2;
+        } else {
+          halfW = size.x / 2;
+          halfH = size.y / 2;
+        }
+        var padding = 1.6;
+        var domEl = sv.renderer.domElement;
+        var aspect = domEl.clientWidth / (domEl.clientHeight || 1);
+
+        // Frustum must satisfy both:
+        //   frustumHalfW >= halfW * padding   (object fits horizontally)
+        //   frustumHalfH >= halfH * padding   (object fits vertically)
+        //   frustumHalfW / frustumHalfH == aspect  (no squishing)
+        var minHalfH = halfH * padding;
+        var minHalfW = halfW * padding;
+        var frustumHalfH = Math.max(minHalfH, minHalfW / aspect);
+        var frustumHalfW = frustumHalfH * aspect;
+        var isZFace = Math.abs(faceDir.z) > 0.5;
+        var upVec = isZFace ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(0, 0, 1);
+
+        // Store the perspective camera snapshot on first entry
+        if (!sv._perspCameraSnapshot) {
+          var _sv$controls$target$c, _sv$controls, _sv$controls2, _sv$controls3, _sv$controls4;
+          sv._perspCameraSnapshot = {
+            camera: sv.camera,
+            controlsTarget: (_sv$controls$target$c = (_sv$controls = sv.controls) === null || _sv$controls === void 0 || (_sv$controls = _sv$controls.target) === null || _sv$controls === void 0 ? void 0 : _sv$controls.clone()) !== null && _sv$controls$target$c !== void 0 ? _sv$controls$target$c : new THREE.Vector3(),
+            controlsMinDist: (_sv$controls2 = sv.controls) === null || _sv$controls2 === void 0 ? void 0 : _sv$controls2.minDistance,
+            controlsMaxDist: (_sv$controls3 = sv.controls) === null || _sv$controls3 === void 0 ? void 0 : _sv$controls3.maxDistance,
+            controlsMaxPolar: (_sv$controls4 = sv.controls) === null || _sv$controls4 === void 0 ? void 0 : _sv$controls4.maxPolarAngle
+          };
+        }
+
+        // Build the orthographic camera
+        var ortho = new THREE.OrthographicCamera(-frustumHalfW, frustumHalfW, frustumHalfH, -frustumHalfH, 0.01, 1000);
+        ortho.up.copy(upVec);
+        var dist = Math.max(size.x, size.y, size.z) * 3;
+        ortho.position.copy(center).addScaledVector(faceDir, dist);
+        ortho.lookAt(center);
+        // Store half-extents for resize updates (pre-aspect values so resize can recompute)
+        ortho.userData._orthoHalfExtents = {
+          halfW: halfW * padding,
+          halfH: halfH * padding
+        };
+        ortho.updateProjectionMatrix();
+        sv.camera = ortho;
+        _this4.camera = ortho;
+        if (sv.controls) {
+          sv.controls.object = ortho;
+          sv.controls.target.copy(center);
+          sv.controls.minDistance = 0.1;
+          sv.controls.maxDistance = 500;
+          sv.controls.maxPolarAngle = Math.PI;
+          sv.controls.update();
+
+          // Exit ortho mode when the camera actually moves (orbit/pan/zoom).
+          // Using 'change' instead of 'start' so a simple click (e.g. io-device
+          // toggle) never triggers the exit — only real camera movement does.
+          // Skip the first 'change' that fires from controls.update() below.
+          var _skipChanges = 1;
+          var _onOrbitChange = function onOrbitChange() {
+            if (_skipChanges-- > 0) return;
+            sv.controls.removeEventListener('change', _onOrbitChange);
+            _this4._orthoOrbitStartListener = null;
+            _this4._restorePerspectiveCamera();
+          };
+          sv.controls.addEventListener('change', _onOrbitChange);
+          _this4._orthoOrbitStartListener = {
+            controls: sv.controls,
+            fn: _onOrbitChange
+          };
+        }
+        console.log('📐 Switched to orthographic face view:', faceDir);
+      };
+      this.renderer.domElement.addEventListener('dblclick', this.eventHandlers.dblclick);
+    }
+
+    /**
+     * Restore the perspective camera after an orthographic face view.
+     * Safe to call when not in ortho mode (no-op).
+     * @private
+     */
+  }, {
+    key: "_restorePerspectiveCamera",
+    value: function _restorePerspectiveCamera() {
+      var sv = this.sceneViewer;
+      if (!(sv !== null && sv !== void 0 && sv._perspCameraSnapshot)) return;
+
+      // Clean up any pending orbit-change listener
+      if (this._orthoOrbitStartListener) {
+        var _this$_orthoOrbitStar = this._orthoOrbitStartListener,
+          controls = _this$_orthoOrbitStar.controls,
+          fn = _this$_orthoOrbitStar.fn;
+        controls.removeEventListener('change', fn);
+        this._orthoOrbitStartListener = null;
+      }
+      var snap = sv._perspCameraSnapshot;
+      sv.camera = snap.camera;
+      this.camera = snap.camera;
+      if (sv.controls) {
+        sv.controls.object = snap.camera;
+        sv.controls.target.copy(snap.controlsTarget);
+        if (snap.controlsMinDist != null) sv.controls.minDistance = snap.controlsMinDist;
+        if (snap.controlsMaxDist != null) sv.controls.maxDistance = snap.controlsMaxDist;
+        if (snap.controlsMaxPolar != null) sv.controls.maxPolarAngle = snap.controlsMaxPolar;
+        sv.controls.update();
+      }
+      sv._perspCameraSnapshot = null;
+      console.log('📐 Restored perspective camera from ortho face view');
     }
 
     /**
@@ -649,11 +913,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var isNewSegmentHorizontal = this._isSegmentHorizontal(segment);
 
       // Check if all existing segments have the same orientation
-      var _iterator2 = _createForOfIteratorHelper(existingSegments),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(existingSegments),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var existingSegment = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var existingSegment = _step3.value;
           var isExistingHorizontal = this._isSegmentHorizontal(existingSegment);
 
           // Disallow mixing horizontal and vertical
@@ -662,9 +926,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
       return true;
     }
@@ -1116,12 +1380,12 @@ var TransformControlsManager = /*#__PURE__*/function () {
     value: function _applyDeltaToBoundingBoxHelpers() {
       if (!this._dragStartGroupPosition || this.boundingBoxHelpers.length === 0) return;
       var delta = this.multiSelectionGroup.position.clone().sub(this._dragStartGroupPosition);
-      var _iterator3 = _createForOfIteratorHelper(this.boundingBoxHelpers),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(this.boundingBoxHelpers),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var _helper$geometry2;
-          var helper = _step3.value;
+          var helper = _step4.value;
           var startPositions = helper.userData._dragStartPositions;
           var posAttr = (_helper$geometry2 = helper.geometry) === null || _helper$geometry2 === void 0 || (_helper$geometry2 = _helper$geometry2.attributes) === null || _helper$geometry2 === void 0 ? void 0 : _helper$geometry2.position;
           if (!startPositions || !posAttr) continue;
@@ -1135,9 +1399,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
           posAttr.needsUpdate = true;
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.f();
       }
     }
 
@@ -1515,11 +1779,11 @@ var TransformControlsManager = /*#__PURE__*/function () {
       var objectFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var objectsWithBounds = this.getSelectableObjectsWithBounds(objectFilter);
       var intersections = [];
-      var _iterator4 = _createForOfIteratorHelper(objectsWithBounds),
-        _step4;
+      var _iterator5 = _createForOfIteratorHelper(objectsWithBounds),
+        _step5;
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var item = _step4.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var item = _step5.value;
           var object = item.object,
             boundingBox = item.boundingBox;
 
@@ -1539,9 +1803,9 @@ var TransformControlsManager = /*#__PURE__*/function () {
 
         // Sort by distance (closest first)
       } catch (err) {
-        _iterator4.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator4.f();
+        _iterator5.f();
       }
       intersections.sort(function (a, b) {
         return a.distance - b.distance;
@@ -1927,8 +2191,8 @@ var TransformControlsManager = /*#__PURE__*/function () {
     key: "_updateSegmentReference",
     value: function _updateSegmentReference(oldSegment, newSegment, index) {
       var selectedIndex = this.selectedObjects.findIndex(function (obj) {
-        var _obj$userData2;
-        return obj.uuid === oldSegment.uuid || ((_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.originalUuid) === oldSegment.uuid;
+        var _obj$userData3;
+        return obj.uuid === oldSegment.uuid || ((_obj$userData3 = obj.userData) === null || _obj$userData3 === void 0 ? void 0 : _obj$userData3.originalUuid) === oldSegment.uuid;
       });
       if (selectedIndex !== -1 && newSegment) {
         // Clear bounding box cache
@@ -2315,9 +2579,21 @@ var TransformControlsManager = /*#__PURE__*/function () {
       if (this.eventHandlers.keydown) {
         window.removeEventListener('keydown', this.eventHandlers.keydown);
       }
+      if (this.eventHandlers.pointerdown) {
+        this.renderer.domElement.removeEventListener('pointerdown', this.eventHandlers.pointerdown);
+      }
       if (this.eventHandlers.click) {
         this.renderer.domElement.removeEventListener('click', this.eventHandlers.click);
       }
+      if (this.eventHandlers.contextmenu) {
+        this.renderer.domElement.removeEventListener('contextmenu', this.eventHandlers.contextmenu);
+      }
+      if (this.eventHandlers.dblclick) {
+        this.renderer.domElement.removeEventListener('dblclick', this.eventHandlers.dblclick);
+      }
+
+      // Restore perspective camera if disposed while in ortho face view
+      this._restorePerspectiveCamera();
 
       // Remove sceneViewer event listener
       if (this._objectTransformedListener && this.sceneViewer && typeof this.sceneViewer.off === 'function') {

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

@@ -59,11 +59,18 @@ var AnimationManager = /*#__PURE__*/function (_BaseDisposable) {
         sceneViewer.performanceMonitorManager.beginFrame();
       }
       try {
+        var _sceneViewer$managers;
         // Update controls
         sceneViewer.controls.update();
 
-        // Render the scene
-        sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+        // Render the scene — route through the outline manager when active so
+        // the mask pass and screen-space composite run after the main render.
+        var ioOutline = (_sceneViewer$managers = sceneViewer.managers) === null || _sceneViewer$managers === void 0 ? void 0 : _sceneViewer$managers.ioOutlineManager;
+        if (ioOutline !== null && ioOutline !== void 0 && ioOutline.isActive) {
+          ioOutline.render();
+        } else {
+          sceneViewer.renderer.render(sceneViewer.scene, sceneViewer.camera);
+        }
       } catch (renderError) {
         // Catch WebGL or rendering errors to prevent the animation loop from
         // producing a permanent white screen. Log once and continue so that