mscgenjs - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

doc/readme.md

@@ -48,10 +48,14 @@ # mscgen_js' innards
 You might have noticed the [interpreter](https://sverweij.github.io/mscgen_js)
-also renders to jpeg and png. It uses the canvg library and it is _really_
-trivial.
+also renders to jpeg and png. It uses the HTML5 canvas for it (and it's
+really trivial code).
 
-
 ## The controllers
-These are not in the 'core' package and serve as a reference of how mscgenjs
-can be used.
+These are not in the 'core' package and serve as a reference of how you can
+use mscgenjs.
 
+### Simple samples
+:page_with_curl: code in [samples](samples)
+
+Implements an (on line) interpreter and renderer in a few lines of code.
+
 ### Embedding
@@ -77,3 +81,3 @@ :page_with_curl: code in [sverweij/mscgen_js/.../mscgen-inpage.js][mscgenjs.embed.source]
 
-About 340 automated tests (and counting) make sure we can refactor the mscgen_js
+About 390 automated tests (and counting) make sure we can refactor the mscgen_js
 core modules safely.
@@ -80,0 +84,0 @@

index-lazy.js

@@ -38,2 +38,7 @@ /**
         /**
+         * See the variable of the same name in @index.js.
+         */
+        getAllowedValues: main.getAllowedValues,
+
+        /**
          * See the function of the same name in @index.js
@@ -40,0 +45,0 @@ */

index.js

@@ -28,16 +28,12 @@ /* istanbul ignore else */
          * Options:
-         *   elementId: the id of the DOM element to render in. Defaults to
-         *              "__svg". renderMsc assumes this element to exist.
-         *   inputType: language to parse - default "mscgen"; other accepted
-         *              languages: "xu", "msgenny" and "json"
+         *  elementId: the id of the DOM element to render in. Defaults to
+         *             "__svg". renderMsc assumes this element to exist.
+         *  inputType: language to parse - default "mscgen"; Possible values:
+         *             allowedValues.inputType
          *  mirrorEntitiesOnBottom: draws entities on both top and bottom of
-         *              the chart when true. Defaults to false.
+         *             the chart when true. Defaults to false.
          *  additionalTemplate: use one of the predefined templates. Default
-         *              null/ empty. Possible values: "lazy", "classic",
-         *              "cygne", "pegasse", "fountainpen" (experimental),
-         *              "inverted" (doesn't work in safari), "grayscaled"
-         *              (doesn't work in safari either)
+         *             null/ empty. Possible values: allowedValues.namedStyle
          *  includeSource: whether the generated svg should include the script
-         *              in a desc element or not. Defaults to false
-           },
+         *             in a desc element or not. Defaults to false
          */
@@ -66,5 +62,5 @@ renderMsc: function (pScript, pOptions, pCallBack){
          *   inputType  : the language of pScript defaults to "mscgen". Possible
-         *                values: "mscgen", "msgenny", "xu", "json"
-         *   outputType : defaults to "json". Possible values: "mscgen",
-         *                "msgenny", "xu", "json", "dot", "doxygen"
+         *                values: allowedValues.inputType
+         *   outputType : defaults to "json". Possible values:
+         *                allowedValues.outputType
          */
@@ -87,2 +83,17 @@ translateMsc: function (pScript, pOptions, pCallBack){
         /**
+         *
+         * An object with arrays of allowed values for parameters in the
+         * renderMsc and translateMsc functions. Each entry in these
+         * arrays have a name (=the allowed value) and a boolean "experimental"
+         * attribute. If that attribute is true, you'll hit a feature that is
+         * under development when use that value.
+         *
+         * pOptions.inputType
+         * pOptions.outputType
+         * pOptions.namedStyle
+         *
+         */
+        getAllowedValues: main.getAllowedValues,
+
+        /**
          * returns a parser module for the given language. The module exposes
@@ -121,2 +132,4 @@ * a parse(pString) function which returns an abstract syntax tree in
         getTextRenderer: resolver.getTextRenderer
+
+
     };
@@ -123,0 +136,0 @@ });

indexAMD.js

@@ -14,5 +14,7 @@ /**
         version             : index.version,
+        getAllowedValues    : index.getAllowedValues,
         getParser           : index.getParser,
         getGraphicsRenderer : index.getGraphicsRenderer,
         getTextRenderer     : index.getTextRenderer
+
     };
@@ -19,0 +21,0 @@ });

main/index.js

@@ -8,3 +8,4 @@ /* istanbul ignore else */
 
-    var _   = require("../lib/lodash/lodash.custom");
+    var _            = require("../lib/lodash/lodash.custom");
+    var cssTemplates = require("../render/graphics/csstemplates");
 
@@ -93,3 +94,33 @@ function isProbablyAnASTAlready(pScript, pInputType){
 
-        version: "1.5.0"
+        version: "1.5.1",
+
+        getAllowedValues: function() {
+            return Object.seal({
+                inputType: [
+                    {name: "mscgen",  experimental: false},
+                    {name: "msgenny", experimental: false},
+                    {name: "xu",      experimental: false},
+                    {name: "json",    experimental: false},
+                    {name: "ast",     experimental: false}
+                ],
+                outputType: [
+                    {name: "mscgen",  experimental : false},
+                    {name: "msgenny", experimental: false},
+                    {name: "xu",      experimental: false},
+                    {name: "json",    experimental: false},
+                    {name: "ast",     experimental: false},
+                    {name: "dot",     experimental: false},
+                    {name: "doxygen", experimental: false}
+                ],
+                namedStyle: cssTemplates.namedStyles.map(
+                    function(pStyle){
+                        return {
+                            name         : pStyle.name,
+                            description  : pStyle.description,
+                            experimental : pStyle.experimental
+                        };
+                    }
+                )
+            });
+        }
     };
@@ -96,0 +127,0 @@ });

package.json

 {
   "name": "mscgenjs",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Implementation of MscGen in JavaScript",
@@ -13,13 +13,12 @@ "main": "index.js",
     "chai-xml": "0.3.1",
-    "codeclimate-test-reporter": "0.3.3",
-    "eslint": "3.2.2",
-    "istanbul": "0.4.4",
-    "js-makedepend": "1.0.1",
-    "jsdom": "9.4.1",
-    "lodash-cli": "4.14.2",
+    "eslint": "3.4.0",
+    "istanbul": "0.4.5",
+    "js-makedepend": "1.0.2",
+    "jsdom": "9.4.5",
+    "lodash-cli": "4.15.0",
     "mocha": "3.0.2",
     "npm-check-updates": "2.8.0",
     "nsp": "2.6.1",
-    "pegjs": "0.9.0",
-    "plato": "1.6.0"
+    "pegjs": "0.10.0",
+    "plato": "1.7.0"
   },
@@ -32,3 +31,2 @@ "scripts": {
     "lint": "eslint index.js index-lazy.js indexAMD.js main parse render test",
-    "codeclimate-cover-submit": "node node_modules/codeclimate-test-reporter/bin/codeclimate.js < coverage/lcov.info",
     "npm-check-updates": "ncu --upgrade"
@@ -35,0 +33,0 @@ },

README.md

@@ -138,33 +138,33 @@ # mscgen_js - core package
 ```javascript
-    mscgenjs.translateMsc(
-        'wordwraparcs=on; you =>> me: can we translate this to Mscgen please?; me >> you: "yes, you can - use translateMsc";',
-        {
-            inputType: "msgenny", // defaults to mscgen - other accepted formats: msgenny, xu, json
-            outputType: "mscgen" // defaults to json - other accepted formats: mscgen, msgenny, xu, dot, doxygen
-        },
-        function(pError, pSuccess){
-            if(Boolean(pError)){
-                console.log("error:", pError);
-                return;
-            }
-            if(Boolean(pSuccess)){
-                // the transpiled result is in pSuccess
-                console.log(pSuccess);
-                return;
-            }
-            console.log("Neither success nor failure. I do not even.");
+mscgenjs.translateMsc(
+    'wordwraparcs=on; you =>> me: can we translate this to Mscgen please?; me >> you: "yes, you can - use translateMsc";',
+    {
+        inputType: "msgenny", // defaults to mscgen - other accepted formats: msgenny, xu, json
+        outputType: "mscgen" // defaults to json - other accepted formats: mscgen, msgenny, xu, dot, doxygen
+    },
+    function(pError, pSuccess){
+        if(Boolean(pError)){
+            console.log("error:", pError);
+            return;
         }
-    );
+        if(Boolean(pSuccess)){
+            // the transpiled result is in pSuccess
+            console.log(pSuccess);
+            return;
+        }
+        console.log("Neither success nor failure. I do not even.");
+    }
+);
 
-    // result:
-    //
-    // msc {
-    //   wordwraparcs=true;
-    //
-    //   you,
-    //   me;
-    //
-    //   you =>> me [label="can we translate this to Mscgen please?"];
-    //   me >> you [label="yes, you can - use translateMsc"];
-    // }
+// result:
+//
+// msc {
+//   wordwraparcs=true;
+//
+//   you,
+//   me;
+//
+//   you =>> me [label="can we translate this to Mscgen please?"];
+//   me >> you [label="yes, you can - use translateMsc"];
+// }
 ```
@@ -213,4 +213,4 @@
 modicum of verifiable code quality. You can see the build history in
-[Travis][travis.mscgenjs] and an indication of the shape of the code at [Code
-Climate][codeclimate.mscgenjs].
+[Travis][travis.mscgenjs] and an indication of the shape of the code at
+[Bit Hound][bithound.mscgenjs].
 
@@ -231,3 +231,3 @@ ## Thanks
 [![bitHound Overall Score][bithound.mscgenjs.badge]][bithound.mscgenjs]
-[![Test Coverage](https://codeclimate.com/github/sverweij/mscgenjs-core/badges/coverage.svg)](https://codeclimate.com/github/sverweij/mscgenjs-core/coverage)
+[![coverage report](https://gitlab.com/sverweij/mscgenjs-core/badges/master/coverage.svg)](https://gitlab.com/sverweij/mscgenjs-core/commits/master)
 [![Dependency Status][david.mscgenjs.badge]][david.mscgenjs]
@@ -241,9 +241,4 @@ [![devDependency Status][daviddev.mscgenjs.badge]][daviddev.mscgenjs]
 [atom]: https://atom.io
-[codeclimate.mscgenjs]: https://codeclimate.com/github/sverweij/mscgenjs-core
-[codeclimate.mscgenjs.badge]: https://codeclimate.com/github/sverweij/mscgenjs-core/badges/gpa.svg
 [bithound.mscgenjs]: https://www.bithound.io/github/sverweij/mscgenjs-core
 [bithound.mscgenjs.badge]: https://www.bithound.io/github/sverweij/mscgenjs-core/badges/score.svg
-[codecov.mscgenjs]: http://codecov.io/github/sverweij/mscgenjs-core?branch=master
-[codecov.mscgenjs.badge]: http://codecov.io/github/sverweij/mscgenjs-core/coverage.svg?branch=master
-[daviddev.mscgenjs]: https://david-dm.org/sverweij/mscgenjs-core#info=devDependencies
 [daviddev.mscgenjs.badge]: https://david-dm.org/sverweij/mscgenjs-core/dev-status.svg
@@ -250,0 +245,0 @@ [david.mscgenjs]: https://david-dm.org/sverweij/mscgenjs-core

render/graphics/csstemplates.js

@@ -9,31 +9,52 @@ /* istanbul ignore else */
     return {
-        baseTemplate : "svg.<%=id%>{font-family:Helvetica,sans-serif;font-size:<%=fontSize%>px;font-weight:normal;font-style:normal;text-decoration:none;background-color:white;stroke:black;stroke-width:<%=lineWidth%>;color:black}.<%=id%> path, .<%=id%> rect{fill:none;color:black;stroke:black}.<%=id%> .label-text-background{fill:white;stroke:white;stroke-width:0}.<%=id%> .bglayer{fill:white;stroke:white;stroke-width:0}.<%=id%> line{stroke:black}.<%=id%> line.return, .<%=id%> path.return, .<%=id%> line.comment{stroke-dasharray:5,3}.<%=id%> line.inline_expression_divider{stroke-dasharray:10,5}.<%=id%> text{color:inherit;stroke:none;text-anchor:middle}.<%=id%> text.entity-text{text-decoration:underline}.<%=id%> text.anchor-start{text-anchor:start}.<%=id%> .arrow-marker{overflow:visible}.<%=id%> .arrow-style{stroke-width:1}.<%=id%> .arcrow, .<%=id%> .arcrowomit, .<%=id%> .emphasised{stroke-linecap:butt}.<%=id%> line.arcrowomit{stroke-dasharray:2,2;}.<%=id%> .box, .<%=id%> .entity{fill:white;stroke-linejoin:round}.<%=id%> .inherit{stroke:inherit;color:inherit}.<%=id%> .inherit-fill{fill:inherit}.<%=id%> .watermark{stroke:black;color:black;fill:black;font-size:48pt;font-weight:bold;opacity:0.14}",
-        additionalTemplates : [
+        baseTemplate : "svg.<%=id%>{font-family:Helvetica,sans-serif;font-size:<%=fontSize%>px;font-weight:normal;font-style:normal;text-decoration:none;background-color:white;stroke:black;stroke-width:<%=lineWidth%>;color:black}.<%=id%> path, .<%=id%> rect{fill:none;color:black;stroke:black}.<%=id%> .label-text-background{fill:white;stroke:white;stroke-width:0}.<%=id%> .bglayer{fill:white;stroke:white;stroke-width:0}.<%=id%> line{stroke:black}.<%=id%> .return, .<%=id%> .comment{stroke-dasharray:5,3}.<%=id%> .inline_expression_divider{stroke-dasharray:10,5}.<%=id%> text{color:inherit;stroke:none;text-anchor:middle}.<%=id%> text.entity-text{text-decoration:underline}.<%=id%> text.anchor-start{text-anchor:start}.<%=id%> .arrow-marker{overflow:visible}.<%=id%> .arrow-style{stroke-width:1}.<%=id%> .arcrow, .<%=id%> .arcrowomit, .<%=id%> .emphasised{stroke-linecap:butt}.<%=id%> .arcrowomit{stroke-dasharray:2,2;}.<%=id%> .box, .<%=id%> .entity{fill:white;stroke-linejoin:round}.<%=id%> .inherit{stroke:inherit;color:inherit}.<%=id%> .inherit-fill{fill:inherit}.<%=id%> .watermark{stroke:black;color:black;fill:black;font-size:48pt;font-weight:bold;opacity:0.14}",
+        namedStyles : [
     {
-        "name": "classic",
-        "css": ".<%=id%> text.entity-text{text-decoration:none}.<%=id%> rect.entity{stroke:none;}.<%=id%> line,.<%=id%> rect,.<%=id%> path{stroke-width:1px}.<%=id%> .arrow-style{stroke-width:2;}.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke-width: 1px}"
+        "name": "lazy",
+        "description": "Lazy",
+        "experimental": false,
+        "cssBefore": "",
+        "cssAfter": ".<%=id%> text.entity-text{font-weight:bold;text-decoration:none;}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#FFFFCC}.<%=id%> rect.label-text-background{opacity:0.9}.<%=id%> line.comment,.<%=id%> rect.inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke:grey}"
     },
     {
-        "name": "cygne",
-        "css": ".<%=id%> line{stroke:#00A1DE}.<%=id%> text{fill:#005B82}.<%=id%> rect.entity,.<%=id%> rect.box,.<%=id%> path.box{fill:#00A1DE;stroke:#00A1DE}.<%=id%> text.box-text{fill:white}.<%=id%> text.entity-text{font-weight:bold;fill:white;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#E77B2F;stroke:white}.<%=id%> line.comment,.<%=id%> rect.inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> path.inline_expression_label{fill:white}"
+        "name": "classic",
+        "description": "Classic",
+        "experimental": false,
+        "cssBefore": "",
+        "cssAfter": ".<%=id%> text.entity-text{text-decoration:none}.<%=id%> .entity{stroke:none;}.<%=id%> line,.<%=id%> rect,.<%=id%> path{stroke-width:1px}.<%=id%> .arrow-style{stroke-width:2;}.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke-width: 1px}"
     },
     {
         "name": "fountainpen",
-        "css": "svg.<%=id%>{font-family:cursive;stroke-opacity:0.4;stroke-linecap:round;background-color:transparent}.<%=id%> text{fill:rgba(0,0,128,0.8)}.<%=id%> marker polygon{fill:rgba(0,0,255,0.4);stroke-linejoin:round}.<%=id%> line, .<%=id%> path, .<%=id%> rect, .<%=id%> polygon{stroke:blue !important}.<%=id%> text.entity-text{font-weight:bold;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#FFFFCC;}.<%=id%> .label-text-background{opacity:0}.<%=id%> .comment,.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke:black}.<%=id%> .bglayer, .<%=id%> .entity{fill:transparent;}"
+        "description": "Fountain pen (experimental!)",
+        "experimental": true,
+        "cssBefore": "@import 'https://fonts.googleapis.com/css?family=Gochi+Hand';",
+        "cssAfter": "svg.<%=id%>{font-family:'Gochi Hand', cursive;font-size:14px;stroke-opacity:0.4;stroke-linecap:round;background-color:transparent}.<%=id%> text{fill:rgba(0,0,128,0.7)}.<%=id%> marker polygon{fill:rgba(0,0,255,0.4);stroke-linejoin:round}.<%=id%> line, .<%=id%> path, .<%=id%> rect, .<%=id%> polygon{stroke:blue !important}.<%=id%> text.entity-text{font-weight:bold;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#FFFFCC;}.<%=id%> .label-text-background{opacity:0}.<%=id%> .comment,.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke:black}"
     },
     {
-        "name": "grayscaled",
-        "css": "svg.<%=id%>{filter:grayscale(1);-webkit-filter:grayscale(1);}"
+        "name": "cygne",
+        "description": "Cygne (best with msgenny)",
+        "experimental": false,
+        "cssBefore": "",
+        "cssAfter": ".<%=id%> line, .<%=id%> path{stroke:#00A1DE}.<%=id%> text{fill:#005B82}.<%=id%> .entity,.<%=id%> .box{fill:#00A1DE;stroke:#00A1DE}.<%=id%> text.box-text{fill:white}.<%=id%> text.entity-text{font-weight:bold;fill:white;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#E77B2F;stroke:white}.<%=id%> .comment,.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{fill:white}"
     },
     {
-        "name": "inverted",
-        "css": "svg.<%=id%>{filter:invert(1);-webkit-filter:invert(1);}"
+        "name": "pegasse",
+        "description": "Pégasse (best with msgenny)",
+        "experimental": false,
+        "cssBefore": "",
+        "cssAfter": ".<%=id%> line, .<%=id%> path{stroke:rgba(0, 43, 84, 1)}.<%=id%> text{fill:rgba(0, 43, 84, 1)}.<%=id%> .entity,.<%=id%> .box{fill:rgba(0, 43, 84, 1);stroke:rgba(0, 43, 84, 1)}.<%=id%> text.box-text{fill:white}.<%=id%> text.entity-text{font-weight:bold;fill:white;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:rgba(255, 50, 0, 1);stroke:white}.<%=id%> .comment,.<%=id%> .inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{fill:white}"
     },
     {
-        "name": "lazy",
-        "css": ".<%=id%> text.entity-text{font-weight:bold;text-decoration:none;}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:#FFFFCC}.<%=id%> rect.label-text-background{opacity:0.9}.<%=id%> line.comment,.<%=id%> rect.inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> .inline_expression_label{stroke:grey}"
+        "name": "grayscaled",
+        "description": "Grayscaled (not in IE or Safari)",
+        "experimental": true,
+        "cssBefore": "",
+        "cssAfter": "svg.<%=id%>{filter:grayscale(1);-webkit-filter:grayscale(1);}"
     },
     {
-        "name": "pegasse",
-        "css": ".<%=id%> line{stroke:rgba(0, 43, 84, 1)}.<%=id%> text{fill:rgba(0, 43, 84, 1)}.<%=id%> rect.entity,.<%=id%> rect.box,.<%=id%> path.box{fill:rgba(0, 43, 84, 1);stroke:rgba(0, 43, 84, 1)}.<%=id%> text.box-text{fill:white}.<%=id%> text.entity-text{font-weight:bold;fill:white;text-decoration:none}.<%=id%> text.return-text{font-style:italic}.<%=id%> path.note{fill:rgba(255, 50, 0, 1);stroke:white}.<%=id%> line.comment,.<%=id%> rect.inline_expression,.<%=id%> .inline_expression_divider,.<%=id%> path.inline_expression_label{fill:white}"
+        "name": "inverted",
+        "description": "Inverted (not in IE or Safari)",
+        "experimental": true,
+        "cssBefore": "",
+        "cssAfter": "svg.<%=id%>{filter:invert(1);-webkit-filter:invert(1);}"
     }
@@ -40,0 +61,0 @@ ]

render/graphics/geometry.js

@@ -57,6 +57,6 @@ /* istanbul ignore else */
                             : Math.sqrt((Math.pow(lDir.dy, 2) * Math.pow(pInterval, 2)) / (1 + Math.pow(lDir.dy, 2))));
-        var lCurvePoint = {};
+        var lCurveSection = {};
 
         for (var i = 1; i <= lNoSegments; i++) {
-            lCurvePoint = {
+            lCurveSection = {
                 controlX : pLine.xFrom + (i - 0.5) * lIntervalX + getRandomDeviation(pWobble),
@@ -69,4 +69,4 @@ controlY : pLine.yFrom + (i - 0.5) * lIntervalY + getRandomDeviation(pWobble),
                 getLineLength({
-                    xFrom: lCurvePoint.x,
-                    yFrom: lCurvePoint.y,
+                    xFrom: lCurveSection.x,
+                    yFrom: lCurveSection.y,
                     xTo: pLine.xTo,
@@ -76,6 +76,6 @@ yTo: pLine.yTo
             ){
-                lCurvePoint.x = pLine.xTo;
-                lCurvePoint.y = pLine.yTo;
+                lCurveSection.x = pLine.xTo;
+                lCurveSection.y = pLine.yTo;
             }
-            lRetval.push(lCurvePoint);
+            lRetval.push(lCurveSection);
         }
@@ -82,0 +82,0 @@ return lRetval;

render/graphics/renderskeleton.js

@@ -108,5 +108,5 @@ /* istanbul ignore else */
 
-    function distillAdditionalStyles(pOptions) {
-        var lStyleString         = "";
-        var lAdditionalTemplates = [];
+    function distillCSS(pOptions, pPosition) {
+        var lStyleString = "";
+        var lNamedStyles = [];
 
@@ -119,4 +119,4 @@ /* istanbul ignore if */
         if (Boolean(pOptions.additionalTemplate)) {
-            lAdditionalTemplates =
-                csstemplates.additionalTemplates.filter(
+            lNamedStyles =
+                csstemplates.namedStyles.filter(
                     function(tpl) {
@@ -126,7 +126,12 @@ return tpl.name === pOptions.additionalTemplate;
                 );
-            if (lAdditionalTemplates.length > 0) {
-                lStyleString = lAdditionalTemplates[0].css;
+            if (lNamedStyles.length > 0) {
+                lStyleString = lNamedStyles[0][pPosition];
             }
         }
+        return lStyleString;
+    }
 
+    function distillAfterCSS(pOptions) {
+        var lStyleString = distillCSS(pOptions, "cssAfter");
+
         if (Boolean(pOptions.styleAdditions)) {
@@ -139,4 +144,8 @@ lStyleString += pOptions.styleAdditions;
 
+    function distillBeforeCSS(pOptions) {
+        return distillCSS(pOptions, "cssBefore");
+    }
+
     function setupStyleElement(pOptions, pSvgElementId) {
-        return (csstemplates.baseTemplate + distillAdditionalStyles(pOptions))
+        return (distillBeforeCSS(pOptions) + csstemplates.baseTemplate + distillAfterCSS(pOptions))
             .replace(/<%=fontSize%>/g, C.FONT_SIZE)
@@ -143,0 +152,0 @@ .replace(/<%=lineWidth%>/g, C.LINE_WIDTH)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1589762

increased by0.02%

Dev dependency count

12

decreased by-7.69%

Number of package files

208

increased by4%

Lines of code

27971

increased by0.77%

Worsened metrics

Number of lines in readme file

285

decreased by-1.72%

Number of low supply chain risk alerts

15

increased by7.14%

No dependency changes