Gizmo fixes (#6997)

playcanvas · Sep 30, 2024 · 800aa6c · 800aa6c
1 parent 21693b0
commit 800aa6c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/extras/gizmo/gizmo.js b/src/extras/gizmo/gizmo.js
@@ -279,8 +279,8 @@ class Gizmo extends EventHandler {
         this._onPointerMove = this._onPointerMove.bind(this);
         this._onPointerUp = this._onPointerUp.bind(this);
 
-        this._device.canvas.addEventListener('pointerdown', this._onPointerDown, true);
-        this._device.canvas.addEventListener('pointermove', this._onPointerMove, true);
+        this._device.canvas.addEventListener('pointerdown', this._onPointerDown);
+        this._device.canvas.addEventListener('pointermove', this._onPointerMove);
         this._device.canvas.addEventListener('pointerup', this._onPointerUp);
 
         this._app.on('update', () => {
@@ -357,6 +357,11 @@ class Gizmo extends EventHandler {
             e.preventDefault();
             e.stopPropagation();
         }
+
+        // capture the pointer during drag
+        const { canvas } = this._device;
+        canvas.setPointerCapture(e.pointerId);
+
         this.fire(Gizmo.EVENT_POINTERDOWN, e.offsetX, e.offsetY, selection[0]);
     }
 
@@ -377,12 +382,17 @@ class Gizmo extends EventHandler {
     }
 
     /**
+     * @param {PointerEvent} e - The pointer event.
      * @private
      */
-    _onPointerUp() {
+    _onPointerUp(e) {
         if (!this.root.enabled || document.pointerLockElement) {
             return;
         }
+
+        const { canvas } = this._device;
+        canvas.releasePointerCapture(e.pointerId);
+
         this.fire(Gizmo.EVENT_POINTERUP);
     }
 
@@ -552,8 +562,8 @@ class Gizmo extends EventHandler {
     destroy() {
         this.detach();
 
-        this._device.canvas.removeEventListener('pointerdown', this._onPointerDown, true);
-        this._device.canvas.removeEventListener('pointermove', this._onPointerMove, true);
+        this._device.canvas.removeEventListener('pointerdown', this._onPointerDown);
+        this._device.canvas.removeEventListener('pointermove', this._onPointerMove);
         this._device.canvas.removeEventListener('pointerup', this._onPointerUp);
 
         this.root.destroy();

diff --git a/src/extras/gizmo/rotate-gizmo.js b/src/extras/gizmo/rotate-gizmo.js
@@ -169,7 +169,7 @@ class RotateGizmo extends TransformGizmo {
             this._nodeOffsets.clear();
         });
 
-        this._app.on('update', () => {
+        this._app.on('prerender', () => {
             this._faceAxisLookAtCamera();
             this._xyzAxisLookAtCamera();
 

diff --git a/src/extras/gizmo/transform-gizmo.js b/src/extras/gizmo/transform-gizmo.js
@@ -262,7 +262,7 @@ class TransformGizmo extends Gizmo {
     constructor(camera, layer) {
         super(camera, layer);
 
-        this._app.on('update', () => {
+        this._app.on('prerender', () => {
             if (!this.root.enabled) {
                 return;
             }