@babylonjs/gui-editor 5.43.0 → 5.43.2

package/dist/babylon.guiEditor.max.js

@@ -41984,6 +41984,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._controlsHit = [];
         this._pointerTravelDistance = 0;
         this._processSelectionOnUp = false;
+        this._centerZoomMousePosition = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
+        this._hasPerformedDragZoom = false;
         this._defaultGUISize = { width: 1024, height: 1024 };
         this._initialPanningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
         this._panningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
@@ -42617,13 +42619,13 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT) {
             this._mouseStartPoint = this.getScaledPointerPosition();
         }
+        if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM) {
+            this._centerZoomMousePosition.set(this._scene.pointerX, this._scene.pointerY);
+        }
         if (evt.buttons & 4 || this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN) {
             this.startPanning();
         }
         else {
-            if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM) {
-                this.zooming(1.0 + (this.props.globalState.keys.isKeyDown("alt") ? -this._zoomModeIncrement : this._zoomModeIncrement));
-            }
             this.endPanning();
             // process selection
             if (this.props.globalState.selectedControls.length !== 0) {
@@ -42640,7 +42642,13 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     onUp(evt) {
+        if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM && !this._hasPerformedDragZoom) {
+            this._panZoomToCenter(1000 * this._zoomModeIncrement, new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(this._scene.pointerX, this._scene.pointerY));
+            this.zooming(1.0 + (this.props.globalState.keys.isKeyDown("alt") ? -this._zoomModeIncrement : this._zoomModeIncrement));
+        }
+        this._hasPerformedDragZoom = false;
         this._mouseStartPoint = null;
+        this._centerZoomMousePosition.set(0, 0);
         this._constraintDirection = ConstraintDirection.NONE;
         this._rootContainer.current?.releasePointerCapture(evt.pointerId);
         this._panning = false;
@@ -42827,20 +42835,26 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         else if (event.detail) {
             delta = -event.detail;
         }
-        const mouseToRtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__.CoordinateHelper.MousePointerToRTTSpace(this.trueRootContainer, this._scene.pointerX, this._scene.pointerY);
+        const mouseCenter = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(this._scene.pointerX, this._scene.pointerY);
+        this._panZoomToCenter(delta, mouseCenter);
+        this.zooming(1 + delta / 1000);
+    }
+    _panZoomToCenter(delta, mouseCenter) {
+        const mouseToRtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__.CoordinateHelper.MousePointerToRTTSpace(this.trueRootContainer, mouseCenter.x, mouseCenter.y);
         const rttToLocal = _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__.CoordinateHelper.RttToLocalNodeSpace(this.trueRootContainer, mouseToRtt.x, mouseToRtt.y);
         const centerToRtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__.CoordinateHelper.MousePointerToRTTSpace(this.trueRootContainer, this._engine.getRenderWidth() / 2, this._engine.getRenderHeight() / 2);
         const centerToLocal = _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__.CoordinateHelper.RttToLocalNodeSpace(this.trueRootContainer, centerToRtt.x, centerToRtt.y);
         const panScale = -delta / 1000;
         const deltaCenter = rttToLocal.subtract(centerToLocal).scale(panScale).multiplyByFloats(1, -1);
         this._panningOffset.addInPlace(deltaCenter);
-        this.zooming(1 + delta / 1000);
     }
     zoomDrag(event) {
         let delta = 0;
         if (event.movementY !== 0) {
             delta = -event.movementY;
         }
+        this._hasPerformedDragZoom = true;
+        this._panZoomToCenter(delta, this._centerZoomMousePosition);
         this.zooming(1 + delta / 1000);
     }
     //Zoom to pointer position. Zoom amount determined by delta
@@ -42868,7 +42882,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             cursor = this.props.globalState.keys.isKeyDown("alt") ? "zoom-out" : "zoom-in";
         }
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { id: "workbench-canvas", onPointerMove: (evt) => {
-                if (this._mouseDown) {
+                if (this._mouseDown && this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM) {
                     this.zoomDrag(evt);
                 }
                 if (this.props.globalState.guiTexture) {