@gregoriusrippenstein/node-red-contrib-introspection 0.2.9 → 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

@@ -6,15 +6,39 @@
     // Tested this on Node-RED 3.1.0.beta.4 - dunno about other 3.1.x.beta.y
     //****
 
-    handleSvgObject( $($('svg[width=8000]')[0]), callbackWithSvgCode );
+    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( callbackWithSvgCode ) {
+  function nr_intro_generate_svg_3_0( red ) {
     //****
     // for Node-RED v3.0.x (well 3.0.2 tested, dunno about 3.0.1)
     //****
 
-    handleSvgObject( $($('svg')[0]), callbackWithSvgCode);
+    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);
+      }
+    }
   }
 
 
@@ -29,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') + '"'
@@ -39,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();
@@ -151,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) {
@@ -242,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 );
       }
@@ -254,27 +294,35 @@
                                   cb );
     } else {
       delete imageCache;
-      callbackWithSvgCode( (new XMLSerializer()).serializeToString(doc) );
+      callbackWithSvgCode( (new XMLSerializer()).serializeToString(
+        removeAllClassAndIdAttrs(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;
+ 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);
   };
 
   /*
@@ -291,11 +339,12 @@
       }
 
       var notification = data.notification;
-      generatorFunctionForVersion(RED.settings.version)( (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
@@ -315,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"
                 }
               );
@@ -347,10 +396,13 @@
     paletteLabel: "Screenshot",
     defaults: {
       name: {
-        value:"",
+        value: "",
       },
       screenshot: {
-        value:""
+        value: ""
+      },
+      endpoint: {
+        value: "/screenshot"
       },
     },
     inputs:1,
@@ -395,7 +447,7 @@
 
       this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
-      generatorFunctionForVersion(RED.settings.version)( (svgdata) => {
+      generatorFunctionForVersion(RED)( (svgdata) => {
         that.editor.setValue( svgdata );
       });
 
@@ -479,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "dependencies": {
     "got": "latest"
   },