@gregoriusrippenstein/node-red-contrib-introspection 0.2.5 → 0.2.9

package/nodes/15-screenshot.html

@@ -1,10 +1,24 @@
 <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
+    //****
 
+    handleSvgObject( $($('svg[width=8000]')[0]), callbackWithSvgCode );
+  }
+
+  function nr_intro_generate_svg_3_0( callbackWithSvgCode ) {
+    //****
+    // for Node-RED v3.0.x (well 3.0.2 tested, dunno about 3.0.1)
+    //****
+
+    handleSvgObject( $($('svg')[0]), callbackWithSvgCode);
+  }
+
+
+  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
@@ -155,21 +169,34 @@
     // inline image data. Image types supported: Jpeg, Png and Svg.
     var imageColl = doc.getElementsByTagName("image");
 
+    var imageCache = {};
+
     var getDataAndCallbackWhenDone = (elem, cntr, cb) => {
-      var postfix = elem.getAttribute("xlink:href").substr(-4,4).toLowerCase();
+      var hrefSrc = elem.getAttribute("xlink:href");
+
+      var postfix = hrefSrc.substr(-4,4).toLowerCase();
+      var fileType = {
+        ".jpg": "jpeg",
+        "jpeg": "jpeg",
+        ".png": "png",
+        ".svg": "svg+xml",
+      };
+
+      if ( imageCache[hrefSrc] ) {
+        elem.setAttribute(
+          "xlink:href",
+          "data:image/" + fileType[postfix] + ";base64," + imageCache[hrefSrc]
+        );
+        return cb(cntr-1);
+      }
 
       switch(postfix){
       case ".jpg":
       case "jpeg":
       case ".png":
-        var fileType = {
-          ".jpg": "jpeg",
-          "jpeg": "jpeg",
-          ".png": "png"
-        };
-
         var oReq = new XMLHttpRequest();
-        oReq.open("GET", elem.getAttribute( "xlink:href" ), true);
+
+        oReq.open("GET", hrefSrc, true);
         oReq.responseType = "arraybuffer";
 
         var arrayBufferToBase64 = ( buffer ) => {
@@ -185,9 +212,11 @@
         oReq.onload = function (oEvent) {
           var arrayBuffer = oReq.response; // Note: not oReq.responseText
           if (arrayBuffer) {
-            elem.setAttribute("xlink:href",
-                              "data:image/"+fileType[postfix]+";base64," +
-                              arrayBufferToBase64(arrayBuffer));
+            var b64Data = arrayBufferToBase64(arrayBuffer);
+            imageCache[hrefSrc] = b64Data;
+            elem.setAttribute(
+              "xlink:href", "data:image/"+fileType[postfix]+";base64,"+b64Data
+            );
             cb(cntr-1)
           } else {
             cb(cntr-1)
@@ -198,11 +227,12 @@
         break;
 
       case ".svg":
-        $.get( elem.getAttribute( "xlink:href" ), function(data) {
+        $.get( hrefSrc, function(data) {
           const serializer = new XMLSerializer();
+          var b64Data = btoa(serializer.serializeToString(data));
+          imageCache[hrefSrc] = b64Data;
           elem.setAttribute( "xlink:href",
-                             "data:image/svg+xml;base64," +
-                             btoa(serializer.serializeToString(data)));
+                             "data:image/svg+xml;base64," + b64Data);
           cb(cntr-1)
         });
         break;
@@ -211,8 +241,8 @@
 
     var cb = (cntr) => {
       if ( cntr < 0 ) {
-        const serializer = new XMLSerializer();
-        callbackWithSvgCode( serializer.serializeToString(doc) );
+        delete imageCache;
+        callbackWithSvgCode((new XMLSerializer()).serializeToString(doc));
       } else {
         getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
       }
@@ -223,11 +253,30 @@
                                   imageColl.length-1,
                                   cb );
     } else {
-      const serializer = new XMLSerializer();
-      callbackWithSvgCode( serializer.serializeToString(doc) );
+      delete imageCache;
+      callbackWithSvgCode( (new XMLSerializer()).serializeToString(doc) );
     }
   };
 
+  function generatorFunctionForVersion(version) {
+    var major = version[0]; // 3.0.x or 3.1.x --> making assumptions that
+    var minor = version[2]; // between minor version nothing changed
+
+    var dummy = (cd) => {
+      if ( cb ) {
+        var svgData = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="10" height="10" pointer-events="all" style="cursor: crosshair; touch-action: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>'
+        cb(svgData);
+      }
+    };
+
+    if ( major == "3" ) {
+      if ( minor == "0" ) { return nr_intro_generate_svg_3_0; }
+      if ( minor == "1" ) { return nr_intro_generate_svg_3_1; }
+    }
+
+    return dummy;
+  };
+
   /*
     When the server side of this node is triggered, it posts a message on
     the communication channel. The frontend node captures that message,
@@ -242,7 +291,7 @@
       }
 
       var notification = data.notification;
-      nr_intro_generate_svg( (svgdata) => {
+      generatorFunctionForVersion(RED.settings.version)( (svgdata) => {
         $.ajax({
           type: "POST",
           url: "/screenshot",
@@ -346,7 +395,7 @@
 
       this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
-      nr_intro_generate_svg( (svgdata) => {
+      generatorFunctionForVersion(RED.settings.version)( (svgdata) => {
         that.editor.setValue( svgdata );
       });
 

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/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.5",
+  "version": "0.2.9",
+  "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",