Merge pull request #95 from flowforge/before-send

Introduce a "beforeSend" event to handle evaluated properties
FlowFuse · Aug 1, 2023 · 365ff5b · 365ff5b
2 parents 55e52c2 + 7f19e92
commit 365ff5b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 16 deletions.
diff --git a/docs/assets/images/events-architecture.png b/docs/assets/images/events-architecture.png
diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
@@ -289,11 +289,19 @@ module.exports = function (RED) {
                 // store the latest msg passed to node
                 wNode._msg = msg
 
+                // pre-process the msg before running our onInput function
+                if (widgetEvents?.beforeSend) {
+                    msg = widgetEvents.beforeSend(msg)
+                }
+
                 // run any node-specific handler defined in the Widget's component
                 if (widgetEvents?.onInput) {
                     widgetEvents?.onInput(msg, send, done)
                 } else {
-                    done()
+                    // msg could be null if the beforeSend errors and returns null
+                    if (msg) {
+                        send(msg)
+                    }
                 }
             })
 
@@ -334,11 +342,15 @@ module.exports = function (RED) {
 
                             console.log('conn:' + conn.id, 'on:widget-change', value)
                             // TODO: bind this property to whichever chosen, for now use payload
-                            const msg = wNode._msg || {}
+                            let msg = wNode._msg || {}
                             msg.payload = value
 
                             wNode._msg = msg
 
+                            if (widgetEvents?.beforeSend) {
+                                msg = widgetEvents.beforeSend(msg)
+                            }
+
                             // simulate Node-RED node receiving an input
                             wNode.send(msg)
                         }
@@ -360,13 +372,18 @@ module.exports = function (RED) {
             if (widgetEvents?.onAction) {
                 if (!ui.events.change[widget.id]) {
                     ui.ioServer.on('connection', function (conn) {
-                        conn.on('widget-action:' + widget.id, (evt) => {
+                        conn.on('widget-action:' + widget.id, (msg) => {
                             // ensure we have latest instance of the widget's node
                             const wNode = RED.nodes.getNode(widgetNode.id)
 
                             console.log('conn:' + conn.id, 'on:widget-action:' + widget.id)
+
+                            if (widgetEvents?.beforeSend) {
+                                msg = widgetEvents.beforeSend(msg)
+                            }
+
                             // simulate Node-RED node receiving an input as to trigger on('input)
-                            wNode.send(evt)
+                            wNode.send(msg)
                         })
                     })
                     ui.events.action[widget.id] = true

diff --git a/nodes/widgets/ui_button.js b/nodes/widgets/ui_button.js
@@ -10,8 +10,8 @@ module.exports = function (RED) {
 
         const evts = {
             onAction: true,
-            onInput: function (msg, send) {
-                var error = null
+            beforeSend: function (msg) {
+                let error = null
 
                 // retrieve the payload we're sending from this button
                 let payloadType = config.payloadType
@@ -46,8 +46,12 @@ module.exports = function (RED) {
                 if (!error) {
                     const topic = RED.util.evaluateNodeProperty(config.topic, config.topicType || 'str', node, msg)
                     msg.payload = payload
-                    msg.topic = topic
-                    send(msg)
+                    if (topic) {
+                        msg.topic = topic
+                    }
+                    return msg
+                } else {
+                    return null
                 }
             }
         }

diff --git a/nodes/widgets/ui_dropdown.js b/nodes/widgets/ui_dropdown.js
@@ -9,10 +9,7 @@ module.exports = function (RED) {
         const group = RED.nodes.getNode(config.group)
 
         const evts = {
-            onChange: true,
-            onInput: function (msg, send) {
-                send(msg)
-            }
+            onChange: true
         }
 
         // inform the dashboard UI that we are adding this node

diff --git a/nodes/widgets/ui_slider.js b/nodes/widgets/ui_slider.js
@@ -24,10 +24,7 @@ module.exports = function (RED) {
         }
 
         const evts = {
-            onChange: true,
-            onInput: function (msg, send) {
-                send(msg)
-            }
+            onChange: true
         }
 
         // inform the dashboard UI that we are adding this node

diff --git a/nodes/widgets/ui_switch.js b/nodes/widgets/ui_switch.js
@@ -13,6 +13,7 @@ module.exports = function (RED) {
 
         const evts = {
             // runs on UI interaction
+            // value = true | false from the ui-switch
             onChange: function (value) {
                 // ensure we have latest instance of the widget's node
                 const wNode = RED.nodes.getNode(node.id)

diff --git a/ui/src/widgets/ui-dropdown/UIDropdown.vue b/ui/src/widgets/ui-dropdown/UIDropdown.vue
@@ -59,6 +59,7 @@ export default {
     methods: {
         onChange () {
             console.log('dropdown changed')
+            // ensure our data binding with vuex store is updated
             this.$store.commit('data/bind', {
                 widgetId: this.id,
                 data: this.value