made 'click-event' handling consistent

FlowFuse · Sep 22, 2024 · e6ddd9c · e6ddd9c
1 parent 7648ef5
commit e6ddd9c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/nodes/widgets/ui_button.js b/nodes/widgets/ui_button.js
@@ -15,8 +15,8 @@ module.exports = function (RED) {
             let payload = null
             let payloadType = null
 
-            msg._event = msg._event || {"type": "inject"}
-            
+            msg._event = msg._event || { type: 'inject' }
+
             switch (msg._event.type) {
             case 'pointerup':
                 payload = config.pointerupPayload
@@ -111,7 +111,6 @@ module.exports = function (RED) {
             beforeSend,
             onInput: async function (msg) {
                 if (config.emulateClick) {
-
                     msg = await beforeSend(msg)
 
                     if (config.topic || config.topicType) {

diff --git a/ui/src/widgets/ui-button/UIButton.vue b/ui/src/widgets/ui-button/UIButton.vue
@@ -5,6 +5,7 @@
         @click="action"
         @pointerdown="pointerdown"
         @pointerup="pointerup"
+        @pointermove="checkIsPointerOverButton"
     >
         <template v-if="prependIcon" #prepend>
             <v-icon :color="iconColor" />
@@ -28,6 +29,11 @@ export default {
         props: { type: Object, default: () => ({}) },
         state: { type: Object, default: () => ({}) }
     },
+    data () {
+        return {
+            isPointerOverButton: true // Tracks if the pointer is still over the button
+        }
+    },
     computed: {
         ...mapState('data', ['messages']),
         prependIcon () {
@@ -64,6 +70,9 @@ export default {
     },
     methods: {
         action ($evt) {
+            if (!this.isPointerOverButton) {
+                return
+            }
             const evt = {
                 type: $evt.type,
                 clientX: $evt.clientX,
@@ -104,6 +113,16 @@ export default {
             $evt.target.releasePointerCapture($evt.pointerId)
             this.$socket.emit('widget-action', this.id, msg)
         },
+        checkIsPointerOverButton: function ($evt) {
+            // Check if pointer is still over the button
+            const buttonRect = $evt.target.getBoundingClientRect()
+            this.isPointerOverButton = (
+                $evt.clientX >= buttonRect.left &&
+                $evt.clientX <= buttonRect.right &&
+                $evt.clientY >= buttonRect.top &&
+                $evt.clientY <= buttonRect.bottom
+            )
+        },
 
         makeMdiIcon (icon) {
             return 'mdi-' + icon.replace(/^mdi-/, '')