From 9a587d2f8332efda5fe40db6ad9dcde5b9d6bf6c Mon Sep 17 00:00:00 2001
From: KPal <48248865+kpal81xd@users.noreply.github.com>
Date: Tue, 1 Oct 2024 13:11:41 +0100
Subject: [PATCH] Gizmo fixes (#6997) (#6999)

Co-authored-by: Donovan Hutchence <slimbuck7@gmail.com>
---
 src/extras/gizmo/gizmo.js           | 20 +++++++++++++++-----
 src/extras/gizmo/rotate-gizmo.js    |  2 +-
 src/extras/gizmo/transform-gizmo.js |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/extras/gizmo/gizmo.js b/src/extras/gizmo/gizmo.js
index 606135a2734..210d69d0eb1 100644
--- 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
index bbd4c6771b7..2cf93f1437f 100644
--- 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
index a2efb445346..8e26c1c7c73 100644
--- 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;
             }