@gregoriusrippenstein/node-red-contrib-introspection 0.4.4 → 0.5.0

package/nodes/15-screenshot.html

@@ -1,576 +0,0 @@
-<script type="text/javascript">
-  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
-    // rarely occur but nonetheless. foreighObjects are used to display divs
-    // within SVGs that contain html code to be displayed in the browser. So
-    // we assume that the foreignObject is not relevant for exporting as its
-    // content is specifically for the browser user.
-    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') + '"'
-    );
-
-    // redefine the svgHeader because we need to include the xml namespaces
-    var svgHeader = (
-      '<?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" '+
-        'class="__screenshot" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
-    );
-
-    var svgBody = preParseSvg.html();
-
-    var parser = new DOMParser();
-
-    var doc = parser.parseFromString(svgHeader + svgBody + '\r\n</svg>',
-                                     "image/svg+xml");
-
-    // SVG has very specific requirements for colour specification, baseline
-    // all colors to #rrggbb. This converts: 'rgb(rrr, ggg, bbb)' and '#rgb'.
-    // Although it could also just be Inkscape, SVG does have a broad range
-    // of color possibilities.
-    var rgb2hex = (rgb) => {
-      if ( !rgb || rgb === null || rgb == "none" ) { return "none" }
-
-      var rgb3 = rgb.match(/^#(.)(.)(.)$/);
-      if ( rgb3 ) {
-        return ("#" +rgb3[1]+rgb3[1]+rgb3[2]+rgb3[2]+rgb3[3]+rgb3[3]);
-      }
-
-      rgb3 = rgb.match(/^#......$/);
-      if ( rgb3 ) { return rgb; }
-
-      rgb3 = rgb.match(/^rgb\(([0-9]+),\s+([0-9]+),\s+([0-9]+)/);
-      if ( rgb3 === null ) {
-        var rgb4 = rgb.match(/^rgba\(([0-9]+),\s+([0-9]+),\s+([0-9]+),\s+([0-9]+)/);
-        if ( rgb4 ) {
-          return {
-            clr: ("#" +
-                  ("0" + parseInt(rgb4[1],10).toString(16)).slice(-2) +
-                  ("0" + parseInt(rgb4[2],10).toString(16)).slice(-2) +
-                  ("0" + parseInt(rgb4[3],10).toString(16)).slice(-2) ),
-            opa: rgb4[4]
-          }
-        } else {
-          console.log( "Screenshot node: returned unknown color: " + rgb );
-          return rgb;
-        }
-      }
-
-      return "#" +
-        ("0" + parseInt(rgb3[1],10).toString(16)).slice(-2) +
-        ("0" + parseInt(rgb3[2],10).toString(16)).slice(-2) +
-        ("0" + parseInt(rgb3[3],10).toString(16)).slice(-2);
-    }
-
-    // Set everything that might have been set via CSS directly on the
-    // element. All styling values must be defined as attributes on the
-    // SVG element.
-    var convertCssToAttr = function( collection, origElems ) {
-      for ( var idx = 0; idx < collection.length; idx++ ) {
-        var elem = collection.item(idx);
-        var origElem = origElems[idx];
-
-        [
-          "stroke-width","fill-opacity","stroke-opacity","opacity",
-          "stroke-dasharray"
-        ].forEach(function(attrname) {
-          elem.setAttribute(attrname,
-                            $(origElem).attr(attrname) ||
-                            $(origElem).css(attrname));
-        });
-
-        [
-          "fill", "stroke"
-        ].forEach( function(attrname) {
-          var val = rgb2hex($(origElem).attr(attrname) ||
-                            $(origElem).css(attrname) );
-
-          // Browsers/CSS has the color 'transparent', SVG is oblivious to
-          // such frills and whistles, instead opacity to the rescue.
-          if ( typeof val == "object" ) {
-            elem.setAttribute(attrname + "-opacity", val.opa);
-            elem.setAttribute(attrname, val.clr);
-          } else {
-            elem.setAttribute(attrname,val);
-          }
-        });
-
-        if ( $(origElem).hasClass('hide') ) {
-          if ( elem.tagName == "g" ) {
-            // according to the SVG standard, visibility cannot be applied
-            // (or better said: has no effect) on 'g' (group) elements.
-            // Inkscape is rather pedantic about this and will show the
-            // group, so hack-it by using opacity. Browsers (firefox) doesn't
-            // seem to care and will apply visibility to 'g' elements.
-            elem.setAttribute("opacity", "0");
-          }
-          elem.setAttribute("visibility", "hidden");
-        }
-      }
-    }
-
-    // include font details on the text elements.
-    var convertFontsToAttr = function( collection, origElems ) {
-      for ( var idx = 0; idx < collection.length; idx++ ) {
-        var elem = collection.item(idx);
-        var origElem = origElems[idx];
-
-        ["font-family", "font-size", "font-size-adjust", "font-stretch",
-         "font-style", "font-variant", "font-weight", "text-anchor",
-         "dominant-baseline"
-        ].forEach( function(attrname) {
-          elem.setAttribute(attrname,
-                            $(origElem).attr(attrname) ||
-                            $(origElem).css(attrname) );
-        })
-      }
-    }
-
-    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) {
-      convertCssToAttr(doc.getElementsByTagName(tagname),
-                       origSvg.find(tagname));
-    });
-
-    [ "text" ].forEach( function(tagname) {
-      convertCssToAttr(doc.getElementsByTagName(tagname),
-                       origSvg.find(tagname));
-
-      convertFontsToAttr(doc.getElementsByTagName(tagname),
-                         origSvg.find(tagname));
-    });
-
-    // inline image data. Image types supported: Jpeg, Png and Svg.
-    var imageColl = doc.getElementsByTagName("image");
-
-    var imageCache = {};
-
-    var getDataAndCallbackWhenDone = (elem, cntr, cb) => {
-      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 oReq = new XMLHttpRequest();
-
-        oReq.open("GET", hrefSrc, true);
-        oReq.responseType = "arraybuffer";
-
-        var arrayBufferToBase64 = ( buffer ) => {
-          var binary = '';
-          var bytes = new Uint8Array( buffer );
-          var len = bytes.byteLength;
-          for (var i = 0; i < len; i++) {
-            binary += String.fromCharCode( bytes[ i ] );
-          }
-          return window.btoa( binary );
-        };
-
-        oReq.onload = function (oEvent) {
-          var arrayBuffer = oReq.response; // Note: not oReq.responseText
-          if (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)
-          }
-        };
-
-        oReq.send(null);
-        break;
-
-      case ".svg":
-        $.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," + b64Data);
-          cb(cntr-1)
-        });
-        break;
-      }
-    };
-
-    var cb = (cntr) => {
-      if ( cntr < 0 ) {
-        delete imageCache;
-        callbackWithSvgCode((new XMLSerializer()).serializeToString(
-          removeAllClassAndIdAttrs(doc)
-        ));
-      } else {
-        getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
-      }
-    };
-
-    if ( imageColl.length > 0 ) {
-      getDataAndCallbackWhenDone( imageColl.item(imageColl.length-1),
-                                  imageColl.length-1,
-                                  cb );
-    } else {
-      delete imageCache;
-      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,
-    generates an SVG and posts that to the POST endpoint (that is assumed)
-    to be running. If not, there will be a console error.
-  */
-  RED.comms.subscribe('introspect:screenshot-trigger-tripped', (event,data) => {
-    if ( data.msg == "timer-tripped" ) {
-
-      if ( data.notification != "off" ) {
-        RED.notify("Screenshot triggered", { type: "warning" });
-      }
-
-      var notification = data.notification;
-
-      generatorFunctionForVersion(RED)( (svgdata) => {
-        $.ajax({
-          type: "POST",
-          url: data.endpoint,
-          dataType: "application/json;charset=utf-8",
-          data: {
-            ...data,
-            d: svgdata
-          },
-          complete: (obj) => {
-            switch( obj.status ) {
-            case 413:
-              // apiMaxLength in the settings.js is set to 5mb by default,
-              // if svg larger than that, need to increase the limit.
-              // Provide a hint to that setting in the error message.
-              RED.notify(
-                "Screenshot too large, increase apiMaxLength in settings.js.", {
-                  type: "error"
-                }
-              );
-              break;
-            case 404:
-              // Http-in POST node is missing
-              RED.notify(
-                "Missing http-in node: method: POST, path: " + data.endpoint, {
-                  type: "error"
-                }
-              );
-              break;
-            case 200:
-              if ( notification != "off" ) {
-                RED.notify("Screenshot successfully posted", {
-                  type: "success"
-                });
-              }
-              break;
-            default:
-              RED.notify(
-                "Screenshot failed: " + obj.statusText + "  " + obj.status, {
-                  type: "error"
-                }
-              );
-            };
-          },
-        });
-      });
-    }
-  });
-
-  RED.nodes.registerType('Screenshot',{
-    color: '#e5e4ef',
-    icon: "font-awesome/fa-camera",
-    category: 'introspection',
-    paletteLabel: "Screenshot",
-    defaults: {
-      name: {
-        value: "",
-      },
-      screenshot: {
-        value: ""
-      },
-      endpoint: {
-        value: "/screenshot"
-      },
-    },
-    inputs:1,
-    outputs:0,
-
-    label: function() {
-      return (this.name || this._def.paletteLabel);
-    },
-
-    labelStyle: function() {
-      return this.name?"node_label_italic":"";
-    },
-
-    oneditprepare: function() {
-      const that = this;
-      const stateId = RED.editor.generateViewStateId("node", this, "");
-
-      if (!this.field) {
-        this.field = 'payload';
-        $("#node-input-field").val("payload");
-      }
-      if (!this.fieldType) {
-        this.fieldType = 'msg';
-      }
-      if (!this.syntax) {
-        this.syntax = 'mustache';
-        $("#node-input-syntax").val(this.syntax);
-      }
-
-      $("#node-input-field").typedInput({
-        default: 'msg',
-        types: ['msg','flow','global'],
-        typeField: $("#node-input-fieldType")
-      });
-
-      this.editor = RED.editor.createEditor({
-        id: 'node-input-screenshot-editor',
-        mode: 'ace/mode/html',
-        stateId: stateId,
-        value: $("#node-input-screenshot").val()
-      });
-
-      this.editor.setValue( "Please wait, screenshot being prepared ..." );
-
-      generatorFunctionForVersion(RED)( (svgdata) => {
-        that.editor.setValue( svgdata );
-      });
-
-      // handle the download button under the editor window.
-      $('#node-screenshot-download-svg').on("click", function (e) {
-        e.preventDefault();
-        var svgBlob = new Blob([that.editor.getValue()], {type:"image/svg+xml;charset=utf-8"});
-        var svgUrl = URL.createObjectURL(svgBlob);
-        var downloadLink = document.createElement("a");
-        downloadLink.href = svgUrl;
-        downloadLink.download = "screenshot.svg";
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-        document.body.removeChild(downloadLink);
-      });
-
-      $('#node-screenshot-copy-to-clipboard-svg').on("click", function (e) {
-        e.preventDefault();
-        if ( RED.clipboard.copyText(that.editor.getValue()) ) {
-          RED.notify("SVG copied to clipboard", { type: "success" });
-        }
-      });
-
-      $("#node-input-format").on("change", function() {
-        var mod = "ace/mode/"+$("#node-input-format").val();
-        that.editor.getSession().setMode({
-          path: mod,
-          v: Date.now()
-        });
-      });
-
-      RED.popover.tooltip($("#node-screenshot-expand-editor"), RED._("node-red:common.label.expand"));
-      $("#node-screenshot-expand-editor").on("click", function (e) {
-        e.preventDefault();
-        const value = that.editor.getValue();
-        that.editor.saveView();
-        RED.editor.editText({
-          mode: $("#node-input-format").val(),
-          value: value,
-          stateId: stateId,
-          width: "Infinity",
-          focus: true,
-          complete: function (v, cursor) {
-            that.editor.setValue(v, -1);
-            setTimeout(function () {
-              that.editor.restoreView();
-              that.editor.focus();
-            }, 250);
-          }
-        })
-      })
-    },
-
-    oneditsave: function() {
-      this.editor.destroy();
-      delete this.editor;
-    },
-
-    oneditcancel: function() {
-      this.editor.destroy();
-      delete this.editor;
-    },
-
-    oneditresize: function(size) {
-      var rows = $("#dialog-form>div:not(.node-text-editor-row)");
-      var height = $("#dialog-form").height();
-      for (var i=0; i<rows.length; i++) {
-        height -= $(rows[i]).outerHeight(true);
-      }
-      var editorRow = $("#dialog-form>div.node-text-editor-row");
-      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-      $(".node-text-editor").css("height",height+"px");
-      this.editor.resize();
-    }
-});
-</script>
-
-<script type="text/html" data-template-name="Screenshot">
-  <div class="form-row">
-    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name">Name</span></label>
-    <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">
-        <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
-            <span data-i18n="screenshot.label.format">Syntax</span>:
-            <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
-                <option value="handlebars">mustache</option>
-                <option value="html">HTML</option>
-                <option value="json">JSON</option>
-                <option value="javascript">JavaScript</option>
-                <option value="css">CSS</option>
-                <option value="markdown">Markdown</option>
-                <option value="php">PHP</option>
-                <option value="python">Python</option>
-                <option value="sql">SQL</option>
-                <option value="yaml">YAML</option>
-                <option value="text" data-i18n="screenshot.label.none"></option>
-            </select>
-            <button type="button" id="node-screenshot-expand-editor" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button>
-        </div>
-  </div>
-
-  <div class="form-row node-text-editor-row">
-        <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-screenshot-editor" ></div>
-  </div>
-
-  <div class="form-row">
-    <button type="button" id="node-screenshot-download-svg" class="red-ui-button red-ui-button-large"><i class="fa fa-download"></i>Download</button>
-    <button type="button" id="node-screenshot-copy-to-clipboard-svg" class="red-ui-button red-ui-button-large"><i class="fa fa-clipboard"></i>Copy to Clipboard</button>
-  </div>
-</script>
-
-<script type="text/html" data-help-name="Screenshot">
-  <p>Create a SVG screenshot of the current tab.</p>
-</script>

package/nodes/15-screenshot.js

@@ -1,29 +0,0 @@
-module.exports = function(RED) {
-  function ScreenshotFunctionality(config) {
-    RED.nodes.createNode(this,config);
-
-    var node = this;
-    var cfg = config;
-
-    node.on('close', function() {
-      node.status({});
-    });
-
-    node.on("input", function(msg, send, done) {
-      RED.comms.publish("introspect:screenshot-trigger-tripped",
-                        RED.util.encodeObject({
-                          ...msg,
-                          msg: "timer-tripped",
-                          endpoint: cfg.endpoint,
-                        })
-      );
-
-      node.status({ fill: "green", shape: "dot", text: "Taking screenshot" });
-      setTimeout( () => { node.status({}) }, 1432 );
-
-      send(msg);
-    });
-  }
-
-  RED.nodes.registerType("Screenshot", ScreenshotFunctionality);
-}