@gregoriusrippenstein/node-red-contrib-introspection 0.0.1

package/nodes/05-seeker.html

@@ -0,0 +1,276 @@
+<script type="text/javascript">
+  RED.nodes.registerType('Seeker',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-ship",
+    category: 'introspection',
+    paletteLabel: "Seeker",
+    defaults: {
+      name: {
+        value:"",
+      },
+    },
+    inputs:0,
+    outputs:1,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+
+    oneditprepare: function() {
+      var that = this;
+
+      this._resize = function() {
+        var rows = $("#dialog-form>div:not(.node-input-target-list-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-input-target-list-row");
+        editorRow.css("height",height+"px");
+      };
+
+      var search = $("#node-input-seeker-target-filter").searchBox({
+        style: "compact",
+        delay: 300,
+        change: function() {
+          var val = $(this).val().trim().toLowerCase();
+          if (val === "") {
+            dirList.treeList("filter", null);
+            search.searchBox("count","");
+          } else {
+            var count = dirList.treeList("filter", function(item) {
+              return item.label.toLowerCase().indexOf(val) > -1 || item.node.type.toLowerCase().indexOf(val) > -1
+            });
+            search.searchBox("count",count+" / "+items.length);
+          }
+        }
+      });
+
+      var dirList = $("#node-input-seeker-target-container-div").css({
+        width: "100%",
+        height: "100%"
+      }).treeList({multi:true}).on("treelistitemmouseover", function(e, item) {
+
+        if ( item.node) {
+          if ( item.children) {
+            item.node.highlighted = true;
+            item.node.dirty = true;
+            item.children.forEach( function(n) {
+              n.node.highlighted = true;
+              n.node.dirty = true;
+            });
+          } else {
+            item.node.highlighted = true;
+            item.node.dirty = true;
+          }
+          RED.view.redraw();
+        }
+      }).on("treelistitemmouseout", function(e, item) {
+
+        if ( item.node ) {
+          if ( item.children ) {
+            item.node.highlighted = false;
+            item.node.dirty = true;
+            item.children.forEach( function(n) {
+              n.node.highlighted = false;
+              n.node.dirty = true;
+            });
+          } else {
+            item.node.highlighted = true;
+            item.node.dirty = true;
+          }
+          RED.view.redraw();
+        }
+      }).on('treelistselect', function(event, item) {
+        if ( item.node ) {
+          if ( item.children) {
+            var preselected = item.children.map(function(n) {
+              return n.node.id
+            });
+
+            RED.tray.hide();
+            RED.view.selectNodes({
+              selected: preselected,
+              onselect: function(selection) {
+                RED.tray.show();
+              },
+              oncancel: function() {
+                RED.tray.show();
+              }
+            });
+
+          } else {
+            RED.workspaces.show(item.node.z,false,false,true);
+            item.node.highlighted = true;
+            item.node.dirty = true;
+            RED.view.reveal(item.node.id,true)
+          }
+
+          RED.view.redraw();
+        }
+      });
+
+      var nodePaths = [];
+
+      var traverse = function( node, nodeIds ) {
+        if ( nodeIds.indexOf(node.id) < 0 ) {
+
+          switch( node.type ) {
+
+          case "link out":
+              node.links.forEach( function(lnkNdeId) {
+                var dNode = RED.nodes.node(lnkNdeId);
+                if ( !dNode ) { return }
+
+                traverse( dNode, [...nodeIds, node.id] );
+              });
+              break;
+
+          case "Sink":
+            nodePaths.push(nodeIds);
+            break;
+
+          default:
+            RED.nodes.getNodeLinks(node).forEach( function(l) {
+              traverse( l.target, [...nodeIds, node.id] );
+            })
+          }
+        }
+      };
+
+      RED.nodes.getNodeLinks(that).forEach( function(l) {
+        traverse(l.target, [])
+      });
+
+      var items = [];
+      var nodeItemMap = {};
+
+      var listOfNodes = function(nodePaths) {
+        var lenNodePaths = nodePaths.length;
+        if ( lenNodePaths > 25 ) {
+          var rdmIdx = Math.floor( Math.random() * lenNodePaths );
+          /* Avoid duplication by taking a random range of 25 nodes */
+          return [...nodePaths, ...nodePaths.slice(0,30)].slice(
+            rdmIdx, rdmIdx + 25
+          )
+        } else {
+          return nodePaths;
+        }
+      }
+
+      listOfNodes(nodePaths).forEach( function (path) {
+        var n = RED.nodes.node(path[0]);
+
+        var nodeDef = RED.nodes.getType(n.type);
+        var label;
+        var sublabel = "Nodes: " + path.length;
+
+        if (nodeDef) {
+          var l = nodeDef.label;
+          label = (typeof l === "function" ? l.call(n) : l)||"";
+
+          if (sublabel.indexOf("subflow:") === 0) {
+            return;
+          }
+        }
+
+        if (!nodeDef || !label) {
+          label = n.type;
+        }
+
+        var children = [];
+
+        path.forEach( function(nId) {
+          var nde = RED.nodes.node(nId);
+
+          /* junctions can be undefined */
+          if ( nde === undefined ) { return }
+
+          var ndeDef = RED.nodes.getType(nde.type);
+          var labelStr = nde.type;
+
+          if ( ndeDef ) {
+            labelStr = (typeof ndeDef.label === "function" ?
+                        ndeDef.label.call(nde) : ndeDef.label) || nde.type ||"";
+          }
+
+          children.push(
+            {
+              "label":    labelStr,
+              "node":     nde,
+              "sublabel": nde.type
+            }
+          )
+        });
+
+        nodeItemMap[n.id] = {
+          node: n,
+          label: label,
+          sublabel: sublabel,
+          selected: false,
+          checkbox: false,
+          children: children
+        };
+        items.push(nodeItemMap[n.id]);
+      });
+
+      dirList.treeList('data',items);
+
+      $("#node-input-seeker-target-select").on("click", function(e) {
+        e.preventDefault();
+        var preselected = dirList.treeList('selected').map(function(n) {
+          return n.node.id
+        });
+
+        RED.tray.hide();
+        RED.view.selectNodes({
+          selected: preselected,
+          onselect: function(selection) {
+            RED.tray.show();
+          },
+          oncancel: function() {
+            RED.tray.show();
+          },
+          filter: function(n) {
+            return n.id !== that.id;
+          }
+        });
+      })
+    },
+
+    oneditsave: function() {
+    },
+
+    oneditresize: function(size) {
+      this._resize();
+    }
+
+});
+</script>
+
+<script type="text/html" data-template-name="Seeker">
+
+  <div class="form-row node-input-target-row">
+    <button id="node-input-seeker-target-select" class="red-ui-button">Show Selected</button>
+  </div>
+
+  <div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
+    <div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-seeker-target-filter"></div>
+
+    <div id="node-input-seeker-target-container-div"></div>
+  </div>
+
+  <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>
+
+</script>
+
+<script type="text/html" data-help-name="Seeker">
+  <p>Ther Seeker seeks in the sink and presents all (max 25) paths that lead to the sink.</p>
+</script>

package/nodes/05-seeker.js

@@ -0,0 +1,17 @@
+module.exports = function(RED) {
+  function SeekerFunctionality(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) {
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("Seeker", SeekerFunctionality);
+}

package/nodes/10-sink.html

@@ -0,0 +1,34 @@
+<script type="text/javascript">
+  RED.nodes.registerType('Sink',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-anchor",
+    category: 'introspection',
+    paletteLabel: "Sink",
+    defaults: {
+      name: {
+        value:"",
+      },
+    },
+    inputs:1,
+    outputs:0,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+});
+</script>
+
+<script type="text/html" data-template-name="Sink">
+  <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>
+</script>
+
+<script type="text/html" data-help-name="Sink">
+  <p>Sink is the end of a chain of nodes to complete a full text.</p>
+</script>

package/nodes/10-sink.js

@@ -0,0 +1,17 @@
+module.exports = function(RED) {
+  function SinkFunctionality(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) {
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("Sink", SinkFunctionality);
+}

package/nodes/15-screenshot.html

@@ -0,0 +1,326 @@
+<script type="text/javascript">
+  RED.nodes.registerType('Screenshot',{
+    color: '#e5e4ef',
+    icon: "font-awesome/fa-camera",
+    category: 'introspection',
+    paletteLabel: "Screenshot",
+    defaults: {
+      name: {
+        value:"",
+      },
+      screenshot: {
+        value:"Please wait, screenshot being prepared ..."
+      },
+    },
+    inputs:0,
+    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()
+      });
+
+      var hwAttrs = (
+        'width="' + $($('svg')[0]).attr('width') + '" height="' +
+          $($('svg')[0]).attr('height') + '"'
+      );
+
+      //
+      // begin the SVG conversion code.
+      //
+      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" '+
+          'xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
+      );
+
+      var svgBody = $($('svg')[0]).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'.
+      var rgb2hex = (rgb) => {
+        if ( !rgb ) { return "none" }
+        if ( rgb === null ) { return "none" }
+
+        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 ) { 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 ) {
+        for ( var idx = 0; idx < collection.length; idx++ ) {
+          var elem = collection.item(idx);
+          ["fill", "stroke"].forEach( function(attrname) {
+            elem.setAttribute(attrname,
+                              rgb2hex($(elem).attr(attrname) ||
+                                      $(elem).css(attrname) ));
+          });
+
+          [
+            "stroke-width","fill-opacity","stroke-opacity","opacity"
+          ].forEach(function(attrname) {
+            elem.setAttribute(attrname,
+                              $(elem).attr(attrname) || $(elem).css(attrname));
+          });
+
+          if ( $(elem).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 ) {
+        for ( var idx = 0; idx < collection.length; idx++ ) {
+          var elem = collection.item(idx);
+          ["font-family", "font-size", "font-size-adjust", "font-stretch",
+           "font-style", "font-variant", "font-weight"
+          ].forEach( function(attrname) {
+            elem.setAttribute(attrname,
+                              $(elem).attr(attrname) || $(elem).css(attrname) );
+          })
+        }
+      }
+
+      // probably missed some elements ...
+      convertCssToAttr(doc.getElementsByTagName("g"));
+      convertCssToAttr(doc.getElementsByTagName("rect"));
+      convertCssToAttr(doc.getElementsByTagName("line"));
+      convertCssToAttr(doc.getElementsByTagName("path"));
+      convertCssToAttr(doc.getElementsByTagName("circle"));
+      convertCssToAttr(doc.getElementsByTagName("image"));
+
+      convertCssToAttr(doc.getElementsByTagName("text"));
+      convertFontsToAttr(doc.getElementsByTagName("text"));
+
+      // inline image data. Image types supported: Jpeg, Png and Svg.
+      var imageColl = doc.getElementsByTagName("image");
+
+      var getDataAndCallbackWhenDone = (elem, cntr, cb) => {
+        var postfix = elem.getAttribute("xlink:href").substr(-4,4).toLowerCase();
+
+        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.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) {
+              elem.setAttribute("xlink:href",
+                                "data:image/"+fileType[postfix]+";base64," +
+                                arrayBufferToBase64(arrayBuffer));
+              cb(cntr-1)
+            } else {
+              cb(cntr-1)
+            }
+          };
+
+          oReq.send(null);
+          break;
+
+        case ".svg":
+          $.get( elem.getAttribute( "xlink:href" ), function(data) {
+            const serializer = new XMLSerializer();
+            elem.setAttribute( "xlink:href",
+                               "data:image/svg+xml;base64," +
+                               btoa(serializer.serializeToString(data)));
+            cb(cntr-1)
+          });
+          break;
+        }
+      };
+
+      var cb = (cntr) => {
+        if ( cntr < 0 ) {
+          const serializer = new XMLSerializer();
+          that.editor.setValue( serializer.serializeToString(doc) );
+        } else {
+          getDataAndCallbackWhenDone( imageColl.item(cntr), cntr, cb );
+        }
+      };
+
+      if ( imageColl.length > 0 ) {
+        getDataAndCallbackWhenDone( imageColl.item(imageColl.length-1),
+                                    imageColl.length-1,
+                                    cb );
+      }
+
+      // 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);
+      });
+
+      // normality resumes here, all the SVG handling is done.
+
+      $("#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);
+          }
+        })
+      })
+    },
+
+    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" 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-small"><i class="fa fa-download"></i>Download</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

@@ -0,0 +1,17 @@
+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) {
+      send(msg);
+    });
+  }
+  RED.nodes.registerType("Screenshot", ScreenshotFunctionality);
+}