@gregoriusrippenstein/node-red-contrib-introspection 0.2.6 → 0.3.0

package/README.md

@@ -75,7 +75,7 @@ This is a hack that uses the `onpaletteadd` callback to do its magic. If this fu
 
 A node for inserting an SVG image into the workspace. The image is layered above the grid but below nodes and their connections. The input message must contain SVG data (in string form) in the `payload` attribute.
 
-### GetFlows -- Experimental
+### GetFlows
 
 Node retrieves the current `flows.json` from the server but using the [Node-RED API](https://nodered.org/docs/api/admin/methods/get/flows/) so that it is storage independent. It returns the flows as a `payload` of the message.
 
@@ -85,18 +85,18 @@ GetFlows supports version selection of the flows and it has limited authenticati
 
 Inspired by the [dsm](https://flows.nodered.org/node/node-red-contrib-dsm) package that has a [backup](https://github.com/cflurin/node-red-contrib-dsm/wiki/Backup) state machine.
 
-## Examples
+## Node-RED Versions
 
-There are [example flows](/examples) contained in the package, examples can also be found online:
+These nodes have been tested and found to work on Node-RED 3.0.2 and 3.1.0.beta.4.
 
-- [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e/n/2be3f8794979d47b) - node is top left of flow or search for `type:Orphans`
-- [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae/n/b5f189a78d829197) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c/n/e3262d9d2791ab78) - top right
-- [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e/n/499b1383580831aa) - top left
-- [DrawSVG](https://demo.openmindmap.org/omm/#flow/6c8ce462533a1da4/n/248f2edd3d8acd96)
+## Examples
 
-Example screenshot:
+There are [example flows](/examples) contained in the package, examples can also be found online at [FlowHub.org](https://flowhub.org):
 
-![example screenshot](/assets/screenshot.svg)
+- [Orphans](https://flowhub.org/f/2401c255b056e0e1)
+- [Sink and Seeker](https://flowhub.org/f/139a816449acd89f)
+- [Screenshot](https://flowhub.org/f/07b2d0f3b0445ab5)
+- [DrawSVG](https://flowhub.org/f/141037dcda5b69fd)
 
 ## License
 

package/nodes/15-screenshot.html

@@ -1,10 +1,48 @@
 <script type="text/javascript">
-  function nr_intro_generate_svg( callbackWithSvgCode ) {
-    //
-    // begin the SVG conversion code.
-    //
-    var origSvg = $($('svg')[0]);
+  function nr_intro_generate_svg_3_1( callbackWithSvgCode ) {
+    //****
+    // Node-RED 3.1.x has multiple SVGs all over the place, so we
+    // need to look for the one with 8000x8000.
+    // Tested this on Node-RED 3.1.0.beta.4 - dunno about other 3.1.x.beta.y
+    //****
 
+    return (callbackWithSvgCode) => {
+      try {
+        handleSvgObject( $($('svg[width=8000]')[0]), callbackWithSvgCode );
+      } catch ( e ) {
+        var msg = "Error Generating SVG: " + JSON.stringify(e);
+
+        red.notify(msg,{ type: "error" });
+
+        var svgData = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+msg+'</text></svg>';
+
+        callbackWithSvgCode(svgData);
+      }
+    }
+  }
+
+  function nr_intro_generate_svg_3_0( red ) {
+    //****
+    // for Node-RED v3.0.x (well 3.0.2 tested, dunno about 3.0.1)
+    //****
+
+    return (callbackWithSvgCode) => {
+      try {
+        handleSvgObject( $($('svg')[0]), callbackWithSvgCode);
+      } catch ( e ) {
+        var msg = "Error Generating SVG: " + JSON.stringify(e);
+
+        red.notify(msg,{ type: "error" });
+
+        var svgData = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+msg+'</text></svg>';
+
+        callbackWithSvgCode(svgData);
+      }
+    }
+  }
+
+
+  function handleSvgObject( origSvg, callbackWithSvgCode ) {
     // the DOMParser of Firefox does not like foreignObjects, so remove them.
     // Correction: DOMParser doesn't mind foreignObjects as long as there is
     // any HTML/<img>-tags in the foreignObjects.,,, of course, image tags
@@ -15,6 +53,9 @@
     var preParseSvg = origSvg.clone();
     preParseSvg.find("foreignObject").remove();
 
+    // these are svgdraw inserts, this would be mirroring mirroring ...
+    preParseSvg.find("svg.__screenshot").remove();
+
     var hwAttrs = (
       'width="' + origSvg.attr('width') + '" height="' +
         origSvg.attr('height') + '"'
@@ -25,7 +66,7 @@
       '<?xml version="1.0" standalone="no"?>\r\n' +
         '<svg ' + hwAttrs + ' pointer-events="all" style="cursor: crosshair; '+
         'touch-action: none;" xmlns="http://www.w3.org/2000/svg" '+
-        'xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
+        'class="__screenshot" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
     );
 
     var svgBody = preParseSvg.html();
@@ -137,6 +178,17 @@
       }
     }
 
+    var removeAllClassAndIdAttrs = (doc) => {
+      ["g", "rect", "line", "path", "circle", "image", "text"].forEach((t)=>{
+        $(doc.getElementsByTagName(t)).each( (idx, elem ) => {
+          elem.setAttribute("class","");
+          elem.setAttribute("id","");
+        });
+      });
+
+      return doc;
+    };
+
     // probably missed some elements ...
     var tagnames = [ "g", "rect", "line", "path", "circle", "image" ];
     tagnames.forEach( function(tagname) {
@@ -169,7 +221,6 @@
       };
 
       if ( imageCache[hrefSrc] ) {
-        console.log( "FOUND " + hrefSrc + " in cache");
         elem.setAttribute(
           "xlink:href",
           "data:image/" + fileType[postfix] + ";base64," + imageCache[hrefSrc]
@@ -229,7 +280,9 @@
     var cb = (cntr) => {
       if ( cntr < 0 ) {
         delete imageCache;
-        callbackWithSvgCode((new XMLSerializer()).serializeToString(doc));
+        callbackWithSvgCode((new XMLSerializer()).serializeToString(
+          removeAllClassAndIdAttrs(doc)
+        ));
       } else {
         getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
       }
@@ -241,10 +294,37 @@
                                   cb );
     } else {
       delete imageCache;
-      callbackWithSvgCode( (new XMLSerializer()).serializeToString(doc) );
+      callbackWithSvgCode( (new XMLSerializer()).serializeToString(
+        removeAllClassAndIdAttrs(doc)
+      ));
     }
   };
 
+ function generatorFunctionForVersion(red) {
+   var version = red.settings.version.split(".")
+   var major = version[0]; // 3.0.x or 3.1.x --> making assumptions that
+   var minor = version[1]; // between minor version nothing changed
+
+   var dummy = (red) => {
+     return (cb) => {
+       var msg = "Node-RED version (" + red.settings.version + ") not supported";
+       red.notify(msg,{ type: "error" });
+
+       if ( cb ) {
+         var svgData = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="1000" height="1000" viewBox="0 0 1000 1000" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style>.small { font: bold 20px sans-serif; fill: red;}</style><text x="10" y="30" class="small">'+msg+'</text></svg>';
+         cb(svgData);
+       }
+     };
+   };
+
+   if ( major == "3" ) {
+     if ( minor == "0" ) { return nr_intro_generate_svg_3_0(red); }
+     if ( minor == "1" ) { return nr_intro_generate_svg_3_1(red); }
+   }
+
+    return dummy(red);
+  };
+
   /*
     When the server side of this node is triggered, it posts a message on
     the communication channel. The frontend node captures that message,
@@ -259,11 +339,12 @@
       }
 
       var notification = data.notification;
-      nr_intro_generate_svg( (svgdata) => {
+
+      generatorFunctionForVersion(RED)( (svgdata) => {
         $.ajax({
           type: "POST",
-          url: "/screenshot",
-          dataType: "image/svg+xml;charset=utf-8",
+          url: data.endpoint,
+          dataType: "application/json;charset=utf-8",
           data: {
             ...data,
             d: svgdata
@@ -283,7 +364,7 @@
             case 404:
               // Http-in POST node is missing
               RED.notify(
-                "Missing http-in node: method: POST, path: /screenshot.", {
+                "Missing http-in node: method: POST, path: " + data.endpoint, {
                   type: "error"
                 }
               );
@@ -315,10 +396,13 @@
     paletteLabel: "Screenshot",
     defaults: {
       name: {
-        value:"",
+        value: "",
       },
       screenshot: {
-        value:""
+        value: ""
+      },
+      endpoint: {
+        value: "/screenshot"
       },
     },
     inputs:1,
@@ -363,7 +447,7 @@
 
       this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
-      nr_intro_generate_svg( (svgdata) => {
+      generatorFunctionForVersion(RED)( (svgdata) => {
         that.editor.setValue( svgdata );
       });
 
@@ -447,6 +531,14 @@
     <input type="text" id="node-input-name" placeholder="Name">
   </div>
 
+  <div class="form-row">
+      <label for="node-input-endpoint">
+          <i class="fa fa-send-o"></i>
+          <span>Post Endpoint</span>
+      </label>
+    <input type="text" id="node-input-endpoint" placeholder="/screenshot">
+  </div>
+
   <div class="form-row" style="position: relative; margin-bottom: 0px;">
         <label for="node-input-screenshot"><i class="fa fa-file-code-o"></i> <span data-i18n="screenshot.label.screenshot">Screenshot</span></label>
         <input type="hidden" id="node-input-screenshot" autofocus="autofocus">

package/nodes/15-screenshot.js

@@ -14,6 +14,7 @@ module.exports = function(RED) {
                         RED.util.encodeObject({
                           ...msg,
                           msg: "timer-tripped",
+                          endpoint: cfg.endpoint,
                         })
       );
 
@@ -23,5 +24,6 @@ module.exports = function(RED) {
       send(msg);
     });
   }
+
   RED.nodes.registerType("Screenshot", ScreenshotFunctionality);
 }

package/nodes/20-orphans.html

@@ -135,6 +135,19 @@
       });
 
       dirList.treeList('data',items);
+
+      $("#node-input-back-home-but").on("click", function(e) {
+        e.preventDefault();
+        var nde = RED.nodes.node(node.id);
+        if ( nde ) {
+          RED.workspaces.show(nde.z,false,false,true);
+          nde.highlighted = true;
+          nde.dirty = true;
+          RED.view.reveal(nde.id,true)
+          RED.view.redraw();
+          RED.tray.close();
+        }
+      });
     },
 
     oneditsave: function() {
@@ -148,8 +161,9 @@
 </script>
 
 <script type="text/html" data-template-name="Orphans">
-  <div class="form-row">
-    <label><i class="fa fa-tag"></i> <span>Orphans</span></label>
+  <div class="form-row node-input-target-row">
+    <button id="node-input-back-home-but"
+            class="red-ui-button">Back Home</button>
   </div>
 
   <div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">

package/nodes/40-drawsvg.html

@@ -1,7 +1,19 @@
 <script type="text/javascript">
   RED.comms.subscribe("introspect:drawsvg", (event,data) => {
     if ( data.msg == "svgdata" ) {
-      $($($('svg')[0]).find('> g > g > g')[2]).append(data.payload);
+      var version = RED.settings.version.split(".");
+
+      if ( version[0] == "3" && version[1] == "0" ) {
+        $($($('svg')[0]).find('> g > g > g')[2]).append(
+          data.payload
+        );
+      }
+
+      if ( version[0] == "3" && version[1] == "1" ) {
+        $($($('svg[width=8000]')[0]).find('> g > g > g')[2]).append(
+          data.payload
+        );
+      }
     }
   });
 

package/nodes/40-drawsvg.js

@@ -11,7 +11,7 @@ module.exports = function(RED) {
 
     node.on("input", function(msg, send, done) {
       RED.comms.publish("introspect:drawsvg", RED.util.encodeObject({
-        ...msg,
+        payload: msg.payload,
         msg: "svgdata",
       }));
 

package/nodes/45-get-flows.js

@@ -11,13 +11,41 @@ module.exports = function(RED) {
 
     node.on("input", function(msg, send, done) {
       var os = require('os');
-      var got = require('got');
 
       var baseUrl = "http://" + os.hostname() + ":" + RED.settings.get("uiPort");
       if ( RED.settings.get("httpAdminRoot") != "/" ) {
         baseUrl += RED.settings.get("httpAdminRoot");
       }
 
+      var getFlows = (hdrs, got) => {
+        got.get( baseUrl + "/flows", {
+          headers: {
+            "Node-RED-API-Version": cfg.flowVersion,
+            ...hdrs
+          }
+        }).then( res => {
+          var bodySize = res.body.length;
+
+          send({
+            ...msg,
+            payload: res.body
+          });
+
+          node.status({fill:"green",shape:"dot",text:"Good"});
+          setTimeout( function() {
+            node.status({
+              fill:  "blue",
+              shape: "dot",
+              text:  "Flow size: " + bodySize
+            })
+          }, 450);
+
+        }).catch( err => {
+          node.status({fill:"red",shape:"dot",text:"Failed"});
+          node.error(err)
+        });
+      };
+
       if ( cfg.useAuthentication ) {
         var username = undefined;
         var password = undefined;
@@ -48,41 +76,26 @@ module.exports = function(RED) {
                       "password":   password
                 }
 
-                got.post( baseUrl + "/auth/token", {
-                  json: data
-                }).then( res => {
-                  node.status({fill:"blue",shape:"dot",text:"Requesting flows"});
-
-                  var access_token = JSON.parse(res.body).access_token;
-                  got.get( baseUrl + "/flows", {
-                    headers: {
-                      "Node-RED-API-Version": cfg.flowVersion,
-                      "Authorization": "Bearer " + access_token
-                    }
+                import('got').then( (module) => {
+                  module.got.post( baseUrl + "/auth/token", {
+                    json: data
                   }).then( res => {
-                    var bodySize = res.body.length;
-
-                    send( {
-                      ...msg,
-                      payload: res.body
+                    node.status({
+                      fill:"blue",
+                      shape:"dot",
+                      text:"Requesting flows"
                     });
 
-                    node.status({fill:"green",shape:"dot",text:"Good"});
-                    setTimeout( function() {
-                      node.status({
-                        fill:  "blue",
-                        shape: "dot",
-                        text:  "Flow size: " + bodySize
-                      })
-                    }, 450);
+                    var access_token = JSON.parse(res.body).access_token;
 
-                  }).catch( err => {
+                    getFlows({
+                      "Authorization": "Bearer " + access_token
+                    }, module.got);
+
+                  }).catch((err) => {
                     node.status({fill:"red",shape:"dot",text:"Failed"});
-                    node.error(err)
+                    node.error( err );
                   });
-                }).catch((err) => {
-                  node.status({fill:"red",shape:"dot",text:"Failed"});
-                  node.error( err );
                 });
               }
             })
@@ -93,36 +106,12 @@ module.exports = function(RED) {
          * Authentication free zone...
          */
         node.status({fill:"blue",shape:"dot",text:"Requesting flows"});
-
-        got.get( baseUrl + "/flows",
-                 {headers: {"Node-RED-API-Version": cfg.flowVersion}}
-        ).then( res => {
-          if ( res.statusCode == 200 ) {
-            var bodySize = res.body.length;
-
-            send( {
-              ...msg,
-              payload: res.body
-            });
-
-            node.status({fill:"green",shape:"dot",text:"Good"});
-            setTimeout( function() {
-              node.status({
-                fill:  "blue",
-                shape: "dot",
-                text:  "Flow size: " + bodySize
-              })
-            }, 450);
-          } else {
-            node.error( res );
-            node.status({fill:"red",shape:"dot",text:"Failed"});
-          }
-        }).catch( err => {
-          node.status({fill:"red",shape:"dot",text:"Failed"});
-          node.error(err)
+        import('got').then( (module) => {
+          getFlows({}, module.got);
         });
       }
     });
   }
+
   RED.nodes.registerType("GetFlows", GetFlowsFunctionality);
 }

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.2.6",
+  "version": "0.3.0",
+  "dependencies": {
+    "got": "latest"
+  },
   "keywords": [
     "node-red"
   ],
@@ -8,7 +11,7 @@
   "license": "SEE LICENSE IN https://github.com/gorenje/node-red-contrib-introspection/blob/main/LICENSE",
   "author": "Gerrit Riessen <nodered@spreads-the.love> (https://spread-the.love)",
   "engines": {
-    "node": ">=8"
+    "node": ">=16"
   },
   "node-red": {
     "version": ">=2.0.0",