fix(inputsystem): capture pointer on pointerdown (Orillusion#432)

remove pointerleave pointerout
MoonWindow · Jul 27, 2024 · cc90b82 · cc90b82
1 parent 1922f18
commit cc90b82
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/controller/OrbitController.ts b/src/components/controller/OrbitController.ts
@@ -265,10 +265,10 @@ export class OrbitController extends ComponentBase {
             this._isPanning = false;
         }
     }
-    private onPointerLeave() {
-        this._isMouseDown = false;
-        this._isPanning = false;
-    }
+    // private onPointerLeave() {
+    //     this._isMouseDown = false;
+    //     this._isPanning = false;
+    // }
     /**
      * @internal
      */
@@ -285,7 +285,6 @@ export class OrbitController extends ComponentBase {
         Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_DOWN, this.onPointerDown, this);
         Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_MOVE, this.onPointerMove, this);
         Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_UP, this.onPointerUp, this);
-        Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_OUT, this.onPointerLeave, this);
     }
     /**
      * @internal
@@ -295,7 +294,6 @@ export class OrbitController extends ComponentBase {
         Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_DOWN, this.onPointerDown, this);
         Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_MOVE, this.onPointerMove, this);
         Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_UP, this.onPointerUp, this);
-        Engine3D.inputSystem.removeEventListener(PointerEvent3D.POINTER_OUT, this.onPointerLeave, this);
     }
 }
 

diff --git a/src/io/InputSystem.ts b/src/io/InputSystem.ts
@@ -87,8 +87,6 @@ export class InputSystem extends CEventDispatcher {
     protected _windowsEvent3d: CEvent;
     mouseLock: boolean = false;
 
-
-
     /**
      * init the input system
      * @param canvas the reference of canvas
@@ -111,6 +109,7 @@ export class InputSystem extends CEventDispatcher {
                 this.isRightMouseDown = true
                 this.mouseStart(ev);
             }
+            canvas.setPointerCapture(ev.pointerId)
         }
         canvas.onpointerup = (ev: PointerEvent) => {
             if (ev.button == 0) {
@@ -124,6 +123,7 @@ export class InputSystem extends CEventDispatcher {
             if(ev.button === _button && performance.now() - _t < 300 && Math.abs(_x - ev.clientX) < 20 && Math.abs(_y - ev.clientY) < 20){
                 ev.button === 0 ? this.mouseClick(ev) : this.rightClick(ev);
             }
+            canvas.releasePointerCapture(ev.pointerId)
         }
         canvas.onpointerenter = (ev: PointerEvent) => {
             this.mouseOver(ev);
@@ -132,14 +132,18 @@ export class InputSystem extends CEventDispatcher {
             this.mouseMove(ev);
         }
         canvas.onpointercancel = (ev: PointerEvent) => {
-            this.mouseEnd(ev);
-        }
-        canvas.onpointerleave = (ev: PointerEvent) => {
-            this.mouseEnd(ev);
-        }
-        canvas.onpointerout = (ev: PointerEvent) => {
-            this.mouseEnd(ev);
+            canvas.releasePointerCapture(ev.pointerId)
+            if (ev.button == 1) 
+                this.middleUp(ev);
+            else 
+                this.mouseEnd(ev);
         }
+        // canvas.onpointerleave = (ev: PointerEvent) => {
+        //     this.mouseEnd(ev);
+        // }
+        // canvas.onpointerout = (ev: PointerEvent) => {
+        //     this.mouseEnd(ev);
+        // }
 
         // let input = document.createElement(`input`);
         // input.setSelectionRange(-1000, 1000);
@@ -332,7 +336,6 @@ export class InputSystem extends CEventDispatcher {
         this.dispatchEvent(this._pointerEvent3D);
     }
 
-
     private mouseStart(e: PointerEvent | MouseEvent) {
 
         this.isMouseDown = true;