From 7c261c425aa636377facdf3978b00842d62d2d7a Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Thu, 22 Feb 2024 17:19:37 +0300
Subject: [PATCH] PIXI Controls: Add pointerupoutside event handling for
 buttons

---
 www.eng/js/plugins/VND_ONSControls.js | 26 ++++++++++++++------------
 www.rus/js/plugins/VND_ONSControls.js | 26 ++++++++++++++------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/www.eng/js/plugins/VND_ONSControls.js b/www.eng/js/plugins/VND_ONSControls.js
index 18865fb..b444bec 100644
--- a/www.eng/js/plugins/VND_ONSControls.js
+++ b/www.eng/js/plugins/VND_ONSControls.js
@@ -295,6 +295,14 @@ ONSControls.toSafeArea = function(position, element) {
     return position;
 }
 //=============================================================================
+// * Setup events for button
+//=============================================================================
+ONSControls.setupButton = function(element, button) {
+    element.on("pointerdown", (event) => {this.sendEvent(event, button)})
+    .on("pointerup", (event) => {this.sendEvent(event, button)})
+    .on("pointerupoutside", (event) => {this.sendEvent(event, button)});
+}
+//=============================================================================
 // * Setup controls touch events
 //=============================================================================
 ONSControls.setupInteractive = function () {
@@ -305,14 +313,10 @@ ONSControls.setupInteractive = function () {
 
     // A/B/X/Y
     const buttons = this._buttonsContainer.children;
-    buttons[0].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_A")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_A")});
-    buttons[1].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_X")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_X")});
-    buttons[2].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_B")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_B")});
-    buttons[3].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_Y")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_Y")});
+    this.setupButton(buttons[0], "BUTTON_A");
+    this.setupButton(buttons[1], "BUTTON_X");
+    this.setupButton(buttons[2], "BUTTON_B");
+    this.setupButton(buttons[3], "BUTTON_Y");
     for (btn of buttons) {
         btn.hitArea = new PIXI.Circle(0, 0, 40);
     }
@@ -339,10 +343,8 @@ ONSControls.setupInteractive = function () {
     });
 
     // LB/RB
-    this._LBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_LB")})
-            .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_LB")});
-    this._RBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_RB")})
-            .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_RB")});
+    this.setupButton(this._LBsprite, "BUTTON_LB");
+    this.setupButton(this._RBsprite, "BUTTON_RB");
 
     // Show button
     this._showButton.on("pointerdown", this.toggle);
diff --git a/www.rus/js/plugins/VND_ONSControls.js b/www.rus/js/plugins/VND_ONSControls.js
index 0584a0c..9edc85e 100644
--- a/www.rus/js/plugins/VND_ONSControls.js
+++ b/www.rus/js/plugins/VND_ONSControls.js
@@ -295,6 +295,14 @@ ONSControls.toSafeArea = function(position, element) {
     return position;
 }
 //=============================================================================
+// * Setup events for button
+//=============================================================================
+ONSControls.setupButton = function(element, button) {
+    element.on("pointerdown", (event) => {this.sendEvent(event, button)})
+    .on("pointerup", (event) => {this.sendEvent(event, button)})
+    .on("pointerupoutside", (event) => {this.sendEvent(event, button)});
+}
+//=============================================================================
 // * Setup controls touch events
 //=============================================================================
 ONSControls.setupInteractive = function () {
@@ -305,14 +313,10 @@ ONSControls.setupInteractive = function () {
 
     // A/B/X/Y
     const buttons = this._buttonsContainer.children;
-    buttons[0].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_A")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_A")});
-    buttons[1].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_X")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_X")});
-    buttons[2].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_B")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_B")});
-    buttons[3].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_Y")})
-              .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_Y")});
+    this.setupButton(buttons[0], "BUTTON_A");
+    this.setupButton(buttons[1], "BUTTON_X");
+    this.setupButton(buttons[2], "BUTTON_B");
+    this.setupButton(buttons[3], "BUTTON_Y");
     for (btn of buttons) {
         btn.hitArea = new PIXI.Circle(0, 0, 40);
     }
@@ -339,10 +343,8 @@ ONSControls.setupInteractive = function () {
     });
 
     // LB/RB
-    this._LBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_LB")})
-            .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_LB")});
-    this._RBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_RB")})
-            .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_RB")});
+    this.setupButton(this._LBsprite, "BUTTON_LB");
+    this.setupButton(this._RBsprite, "BUTTON_RB");
 
     // Show button
     this._showButton.on("pointerdown", this.toggle);