Merge branch 'lindsvg-1.2.0'

Amphiluke · Jan 19, 2020 · 161d3ca · 161d3ca
2 parents 853d444 + 312d68e
commit 161d3ca
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -62,11 +62,13 @@ let lsParams = {
 
 // Output SVG parameters (all of them are optional)
 let svgParams = {
-    width: 600,     // Desired SVG element width
-    height: 600,    // Desired SVG element height
-    padding: 5,     // Additional space to extend the viewBox
-    fill: "none",   // Value of the “fill” attribute on the “path” element
-    stroke: "green" // Value of the “stroke” attribute on the “path” element
+    width: 600,       // Desired SVG element width
+    height: 600,      // Desired SVG element height
+    padding: 5,       // Additional space to extend the viewBox
+    pathAttributes: { // Name to value map for the “path” element attributes
+        stroke: "green",
+        "stroke-width": "2px"
+    }
 };
 
 // Get ready-to-render L-system’s SVG code as a string

diff --git a/dist/lindsvg.esm.js b/dist/lindsvg.esm.js
@@ -1,5 +1,5 @@
 /*!
-lindsvg v1.1.0
+lindsvg v1.2.0
 https://amphiluke.github.io/l-systems/
 (c) 2020 Amphiluke
 */
@@ -265,17 +265,24 @@ function getSVGData(lsParams) {
  */
 function getSVGCode(lsParams, svgParams) {
     let {pathData, minX, minY, width, height} = getSVGData(lsParams);
-    svgParams = {
-        width,
-        height,
-        padding: 0,
-        fill: "none",
-        stroke: "#000",
-        ...svgParams
+    let svgConfig = {
+        width: svgParams.width || width,
+        height: svgParams.height || height,
+        padding: svgParams.padding || 0,
+        pathAttributes: {
+            // for backward compatibility with v1.1.0, also check fill and stroke as direct props of svgParams
+            fill: svgParams.fill || "none",
+            stroke: svgParams.stroke || "#000",
+            ...svgParams.pathAttributes
+        }
     };
-    let {padding} = svgParams;
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX - padding} ${minY - padding} ${width + 2 * padding} ${height + 2 * padding}" height="${svgParams.height}" width="${svgParams.width}">
-  <path d="${pathData}" fill="${svgParams.fill}" stroke="${svgParams.stroke}"></path>
+    let {padding} = svgConfig;
+    let pathAttrStr = Object.entries(svgConfig.pathAttributes).reduce((accumulator, [name, value]) => {
+        value = value.replace(/"/g, "&quot;");
+        return `${accumulator} ${name}="${value}"`;
+    }, "");
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX - padding} ${minY - padding} ${width + 2 * padding} ${height + 2 * padding}" height="${svgConfig.height}" width="${svgConfig.width}">
+  <path d="${pathData}"${pathAttrStr}></path>
 </svg>`;
 }
 

diff --git a/dist/lindsvg.esm.min.js b/dist/lindsvg.esm.min.js
diff --git a/dist/lindsvg.js b/dist/lindsvg.js
@@ -1,5 +1,5 @@
 /*!
-lindsvg v1.1.0
+lindsvg v1.2.0
 https://amphiluke.github.io/l-systems/
 (c) 2020 Amphiluke
 */
@@ -271,17 +271,24 @@ https://amphiluke.github.io/l-systems/
      */
     function getSVGCode(lsParams, svgParams) {
         let {pathData, minX, minY, width, height} = getSVGData(lsParams);
-        svgParams = {
-            width,
-            height,
-            padding: 0,
-            fill: "none",
-            stroke: "#000",
-            ...svgParams
+        let svgConfig = {
+            width: svgParams.width || width,
+            height: svgParams.height || height,
+            padding: svgParams.padding || 0,
+            pathAttributes: {
+                // for backward compatibility with v1.1.0, also check fill and stroke as direct props of svgParams
+                fill: svgParams.fill || "none",
+                stroke: svgParams.stroke || "#000",
+                ...svgParams.pathAttributes
+            }
         };
-        let {padding} = svgParams;
-        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX - padding} ${minY - padding} ${width + 2 * padding} ${height + 2 * padding}" height="${svgParams.height}" width="${svgParams.width}">
-  <path d="${pathData}" fill="${svgParams.fill}" stroke="${svgParams.stroke}"></path>
+        let {padding} = svgConfig;
+        let pathAttrStr = Object.entries(svgConfig.pathAttributes).reduce((accumulator, [name, value]) => {
+            value = value.replace(/"/g, "&quot;");
+            return `${accumulator} ${name}="${value}"`;
+        }, "");
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX - padding} ${minY - padding} ${width + 2 * padding} ${height + 2 * padding}" height="${svgConfig.height}" width="${svgConfig.width}">
+  <path d="${pathData}"${pathAttrStr}></path>
 </svg>`;
     }
 

diff --git a/dist/lindsvg.min.js b/dist/lindsvg.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lindsvg",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Lindenmayer System [Scalable] Vector Graphics",
   "main": "dist/lindsvg.js",
   "module": "dist/lindsvg.esm.js",

diff --git a/src/lindsvg.mjs b/src/lindsvg.mjs
@@ -19,8 +19,8 @@
  * @typedef {Object} SVGParams
  * @property {Number} [width] - Desired SVG width
  * @property {Number} [height] - Desired SVG height
- * @property {String} [fill="none"] - Value of the “fill” attribute on the “path” element
- * @property {String} [stroke="#000"] - Value of the “stroke” attribute on the “path” element
+ * @property {Number} [padding=0] - Additional space to extend the viewBox
+ * @property {Object} [pathAttributes={fill:"none",stroke:"#000"}] - Name to value map for the “path” element attributes
  */