Allow re-evaluation of SVG input on sketch

README.md

@@ -91,10 +91,12 @@ https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js
 
   The optional `outputType` defaults to the respective mode if `target` is either `SVGSVGElement` or `HTMLCanvasElement`. If targetting an HTML container element, then `OutputType.SVG` is used by default.
 
-- `sketch(): Promise<SVGSVGElement | HTMLCanvasElement | null>`
+- `sketch(sourceSvgChanged = false): Promise<SVGSVGElement | HTMLCanvasElement | null>`
 
   Clears the configured `target` element and converts the current `svg2roughj.svg` to a hand-drawn sketch.
 
+  Setting `sourceSvgChanged` to `true` re-evaluates the given `svg2roughj.svg` as it was set anew. May be used to re-use the same Svg2Rough.js instance and the same SVG element as source container.
+
 ### Properties
 
 | Property          | Description                                                                                                                       | Default                    |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg2roughjs",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "Leverages Rough.js to convert SVGs to a hand-drawn, sketchy representation",
   "author": "Fabian Schwarzkopf",
   "contributors": [

src/Svg2Roughjs.ts

@@ -68,13 +68,7 @@ export class Svg2Roughjs {
   set svg(svg: SVGSVGElement) {
     if (this.$svg !== svg) {
       this.$svg = svg
-
-      const precision = this.roughConfig.fixedDecimalPlaceDigits
-      this.width = parseFloat(this.coerceSize(svg, 'width', 300).toFixed(precision))
-      this.height = parseFloat(this.coerceSize(svg, 'height', 150).toFixed(precision))
-
-      // pre-process defs for subsequent references
-      this.collectElementsWithID()
+      this.sourceSvgChanged()
     }
   }
 
@@ -178,13 +172,19 @@ export class Svg2Roughjs {
   /**
    * Triggers an entire redraw of the SVG which
    * processes the input element anew.
+   * @param sourceSvgChanged When `true`, the given {@link svg} is re-evaluated as if it was set anew.
+   *  This allows the Svg2Rough.js instance to be used mutliple times with the same source SVG container but different contents.
    * @returns A promise that resolves with the sketched output element or null if no {@link svg} is set.
    */
-  sketch(): Promise<SVGSVGElement | HTMLCanvasElement | null> {
+  sketch(sourceSvgChanged = false): Promise<SVGSVGElement | HTMLCanvasElement | null> {
     if (!this.svg) {
       return Promise.resolve(null)
     }
 
+    if (sourceSvgChanged) {
+      this.sourceSvgChanged()
+    }
+
     const sketchContainer = this.prepareRenderContainer()
     const renderContext = this.createRenderContext(sketchContainer)
 
@@ -321,6 +321,22 @@ export class Svg2Roughjs {
     return svgElement
   }
 
+  /**
+   * Initializes the size based on the currently set SVG and collects elements
+   * with an ID property that may be referenced in the SVG.
+   */
+  private sourceSvgChanged() {
+    const svg = this.$svg
+    if (svg) {
+      const precision = this.roughConfig.fixedDecimalPlaceDigits
+      this.width = parseFloat(this.coerceSize(svg, 'width', 300).toFixed(precision))
+      this.height = parseFloat(this.coerceSize(svg, 'height', 150).toFixed(precision))
+
+      // pre-process defs for subsequent references
+      this.collectElementsWithID()
+    }
+  }
+
   /**
    * Stores elements with IDs for later use.
    */