@gregoriusrippenstein/node-red-contrib-introspection 0.0.1 → 0.0.3

package/README.md

@@ -58,7 +58,7 @@ There is a single example flow contained in the package. There are also examples
 - [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c) - top right
 - [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e) - top left
 
-Example screenshot:
+Example screenshot: 
 
 ![example screenshot](/assets/screenshot.svg)
 

package/nodes/15-screenshot.html

@@ -9,7 +9,7 @@
         value:"",
       },
       screenshot: {
-        value:"Please wait, screenshot being prepared ..."
+        value:""
       },
     },
     inputs:0,
@@ -52,14 +52,18 @@
         value: $("#node-input-screenshot").val()
       });
 
-      var hwAttrs = (
-        'width="' + $($('svg')[0]).attr('width') + '" height="' +
-          $($('svg')[0]).attr('height') + '"'
-      );
+      this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
       //
       // begin the SVG conversion code.
       //
+      var origSvg = $($('svg')[0]);
+
+      var hwAttrs = (
+        'width="' + origSvg.attr('width') + '" height="' +
+          origSvg.attr('height') + '"'
+      );
+
       var svgHeader = (
         '<?xml version="1.0" standalone="no"?>\r\n' +
           '<svg ' + hwAttrs + ' pointer-events="all" style="cursor: crosshair; '+
@@ -67,7 +71,7 @@
           'xmlns:xlink="http://www.w3.org/1999/xlink">\r\n'
       );
 
-      var svgBody = $($('svg')[0]).html();
+      var svgBody = origSvg.html();
 
       var parser = new DOMParser();
       var doc = parser.parseFromString(svgHeader + svgBody + '\r\n</svg>',
@@ -99,23 +103,28 @@
       // 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 ) {
+      var convertCssToAttr = function( collection, origElems ) {
         for ( var idx = 0; idx < collection.length; idx++ ) {
           var elem = collection.item(idx);
-          ["fill", "stroke"].forEach( function(attrname) {
+          var origElem = origElems[idx];
+
+          [
+            "fill", "stroke"
+          ].forEach( function(attrname) {
             elem.setAttribute(attrname,
-                              rgb2hex($(elem).attr(attrname) ||
-                                      $(elem).css(attrname) ));
+                              rgb2hex($(origElem).attr(attrname) ||
+                                      $(origElem).css(attrname) ));
           });
 
           [
             "stroke-width","fill-opacity","stroke-opacity","opacity"
           ].forEach(function(attrname) {
             elem.setAttribute(attrname,
-                              $(elem).attr(attrname) || $(elem).css(attrname));
+                              $(origElem).attr(attrname) ||
+                              $(origElem).css(attrname));
           });
 
-          if ( $(elem).hasClass('hide') ) {
+          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.
@@ -130,28 +139,35 @@
       }
 
       // include font details on the text elements.
-      var convertFontsToAttr = function( collection ) {
+      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"
           ].forEach( function(attrname) {
             elem.setAttribute(attrname,
-                              $(elem).attr(attrname) || $(elem).css(attrname) );
+                              $(origElem).attr(attrname) ||
+                              $(origElem).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"));
+      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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "keywords": [
     "node-red"
   ],
@@ -8,7 +8,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": ">=16"
+    "node": ">=6"
   },
   "node-red": {
     "version": ">=2.0.0",

package/README (Autosaved).md

@@ -1,71 +0,0 @@
-# Node-RED Introspection Nodes
-
-This is a collection of editor-only Node-RED nodes. Editor-only since they do not have any affect nor application on the server side, these nodes solely work within the editor, that is, the browser environment.
-
-## Why?
-
-The Node-RED editor is a powerful beast with many abilities, why not use them? Why not make use of those possibilities and create a set of introspection nodes, a form of visual linting before deployment. The editor already does syntax checking before deployment, why limit it to just that?
-
-I found myself working on various flows and found some particular artistic but I wanted to scale them to poster size, hence I needed an SVG dump. Having not found what I was looking for, I created my own Screenshot node.
-
-Orphans node many or many not have their reasons, sometimes nodes aren't meant to be there and can actually be deleted. Either way, nodes that have no connections, either in nor out, *might* no longer be needed. For me, orphan nodes represent commented-out code or code that can't be reached, so they potentially represent nostalgia, a nostalgia for coding ideas that are no longer valid.
-
-Sometimes I found myself having extremely complex flows, flows that went over multiple tabs via the link-in/out nodes. I was lost as to how specific nodes were ever reached. The birth of the Sink & Seeker nodes was inevitable. 
-
-## Nodes
-
-All nodes are editor-only which means that are triggered by double clicking on them (once they have been dragged into a flow) to open the tray. The tray then shows the fulfilment of their purpose.
-
-There is no need nor requirement to deploy these nodes. Which implies that they also work in read-only mode of Node-RED. Since these nodes only provide information and make no changes, this should not be an issue.
-
-### Orphans
-
-Drag the Orphan node into a flow, double click and all nodes that have no connections are shown in the tray. Click on a node to highlight its location in the flow.
-
-The nodes shown are across all flows and tabs, there is no need to have a Orphans node per flow.
-
-### Sink & Seeker
-
-Place the sink node at the end of a any flow, the point that needs to be reached. Place the seeker at the starting point. Double click on the seeker to open the tray and all possible paths (if there are any) between it and the sink are shown. 
-
-Double click on the top-level node and all nodes in the pathway are highlighted. Opening the top-level node shows all nodes along the path. Clicking on a node will highlight that node in flow.
-
-### Screenshot
-
-Drag the node into a flow, double-click on the node and the tray opens -depending on the size of the flow, this might take a moment. Once the tray is opened, the SVG is shown in the editor window (I took the code from the template node hence the syntax dropdown). Below the editor window is the download button. Pressing that will download the SVG as it is in the editor window, so making changes in that window will be reflected in the downloaded content.
-
-The SVG code can also be copied and pasted into something like [drawsvg.org](https://drawsvg.org/drawsvg.html) hence select-all-copy-paste is provide by having the editor window.
-
-Improvements over [svgexport.io](https://svgexport.io) browser plugin:
-
-- Respects the 'hide' CSS class that is used to hide specific elements, this the svgexport plugin cannot know.
-- Compliments the setting of visibility on the 'g' element with opacity=0. The SVG Standard ignores visibility on 'g' elements but browsers don't seem to care, Inkscape does care.
-- Image data (i.e. icons) is inlined using `data:image/XXXX;base64,` - this is good for things such as Inkscape that can't resolve relative urls. PNG, JPEG and SVG are supported.
-- It also retrieves font details and includes them in the SVG. This makes the font italic, even if it's not the correct font family (because font might not be installed on system).
-
-Disappointments:
-
-- Font-awesome icons, because they use the font-awesome font, aren't inlined and therefore aren't available in external tools (but are visible if SVG opened in browser). If the font-awesome fonts are installed on the system icons do work in Inkscape.
-- Because a double click is required, any highlights in the workflow are lost (i.e. link-in/out highlights showing the other tab names disappears)
-- Limited testing: on Firefox (on mac), your mileage might vary
-- No error checking - network requests are assumed to work
-
-## Examples
-
-There is a single example flow contained in the package. There are also examples to be found online: 
-
-- [Orphans](https://demo.openmindmap.org/omm/#flow/3ebb65fdbecb182e) - node is top left of flow or search for `type:Orphans`
-- [Seeker](https://demo.openmindmap.org/omm/#flow/40ea5f2aea6592ae) - top left and the [Sink](https://demo.openmindmap.org/omm/#flow/459c271a96458c7c) - top right
-- [Screenshot](https://demo.openmindmap.org/omm/#flow/4e2d8c13066b705e) - top left
-
-    Example screenshot:
-
-![example screenshot](/assets/screenshot.svg)
-
-## License
-
-[Do whatever but don't do evil](/LICENSE)
-
-## Contribution & Ideas
-
-Please here at GitHub via issues.