@gregoriusrippenstein/node-red-contrib-introspection 0.0.2 → 0.0.4

package/README.md

@@ -34,20 +34,20 @@ Double click on the top-level node and all nodes in the pathway are highlighted.
 
 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.
+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 provided 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.
+- Respects the 'hide' CSS class that is used to hide specific elements, this is something that 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.
+- Font-awesome icons, because they use the font-awesome font, aren't inlined and therefore aren't available in external tools. If the font-awesome fonts are installed on the system icons do work in Inkscape and browser.
 - 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
+- Limited testing: Firefox & Opera (on mac), your mileage might vary
 - No error checking - network requests are assumed to work
 
 ## Examples
@@ -64,7 +64,7 @@ Example screenshot:
 
 ## License
 
-[Do whatever but don't do evil](/LICENSE)
+[*Do whatever but don't do evil* license](/LICENSE)
 
 ## Contribution & Ideas
 

package/nodes/15-screenshot.html

@@ -54,14 +54,16 @@
 
       this.editor.setValue( "Please wait, screenshot being prepared ..." );
 
-      var hwAttrs = (
-        'width="' + $($('svg')[0]).attr('width') + '" height="' +
-          $($('svg')[0]).attr('height') + '"'
-      );
-
       //
       // 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; '+
@@ -69,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>',
@@ -101,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.
@@ -132,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"));
+      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));
 
-      convertCssToAttr(doc.getElementsByTagName("text"));
-      convertFontsToAttr(doc.getElementsByTagName("text"));
+        convertFontsToAttr(doc.getElementsByTagName(tagname),
+                           origSvg.find(tagname));
+      });
 
       // inline image data. Image types supported: Jpeg, Png and Svg.
       var imageColl = doc.getElementsByTagName("image");
@@ -225,6 +239,9 @@
         getDataAndCallbackWhenDone( imageColl.item(imageColl.length-1),
                                     imageColl.length-1,
                                     cb );
+      } else {
+        const serializer = new XMLSerializer();
+        that.editor.setValue( serializer.serializeToString(doc) );
       }
 
       // handle the download button under the editor window.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "keywords": [
     "node-red"
   ],