Add consistent size option to all exports, fix bug when svg element has sequence-diagram class on page load

lib/sequence-diagram-web.js

@@ -1271,7 +1271,7 @@
 			 * exporting from any environment, in case it is opened in FireFox
 			 */
 			code = code.replace(
-				(/^<svg/),
+				(/^<svg ?/),
 				'<svg width="' + (renderer.width || 1) +
 				'" height="' + (renderer.height || 1) + '" '
 			);
@@ -9710,40 +9710,54 @@
 			return this.renderer.getThemes();
 		}
 
-		getSVGCodeSynchronous() {
+		_updateSize({width = null, height = null, zoom = null}) {
+			if(width !== null) {
+				if(height === null) {
+					this.renderer.height *= width / this.renderer.width;
+				} else {
+					this.renderer.height = height;
+				}
+				this.renderer.width = width;
+			} else if(height !== null) {
+				this.renderer.width *= height / this.renderer.height;
+				this.renderer.height = height;
+			} else if(zoom !== null) {
+				this.renderer.width *= zoom;
+				this.renderer.height *= zoom;
+			}
+		}
+
+		getSVGCodeSynchronous({size = {}} = {}) {
+			this._updateSize(size);
 			return this.exporter.getSVGContent(this.renderer);
 		}
 
-		getSVGCode() {
+		getSVGCode(options) {
-			return Promise.resolve(this.getSVGCodeSynchronous());
+			return Promise.resolve(this.getSVGCodeSynchronous(options));
 		}
 
-		getSVGSynchronous() {
+		getSVGSynchronous({size = {}} = {}) {
+			this._updateSize(size);
 			return this.exporter.getSVGURL(this.renderer);
 		}
 
-		getSVG() {
+		getSVG({size = {}} = {}) {
+			this._updateSize(size);
 			return Promise.resolve({
 				latest: true,
 				url: this.getSVGSynchronous(),
 			});
 		}
 
-		getCanvas({resolution = 1, size = null} = {}) {
+		getCanvas({resolution = 1, size = {}} = {}) {
-			if(size) {
+			this._updateSize(size);
-				this.renderer.width = size.width;
-				this.renderer.height = size.height;
-			}
 			return new Promise((resolve) => {
 				this.exporter.getCanvas(this.renderer, resolution, resolve);
 			});
 		}
 
-		getPNG({resolution = 1, size = null} = {}) {
+		getPNG({resolution = 1, size = {}} = {}) {
-			if(size) {
+			this._updateSize(size);
-				this.renderer.width = size.width;
-				this.renderer.height = size.height;
-			}
 			return new Promise((resolve) => {
 				this.exporter.getPNGURL(
 					this.renderer,
@@ -9932,7 +9946,9 @@
 
 		if(Array.isArray(elements)) {
 			const nodrawOpts = Object.assign({}, opts, {render: false});
-			const diagrams = elements.map((el) => convertOne(el, c, nodrawOpts));
+			const diagrams = elements
+				.map((el) => convertOne(el, c, nodrawOpts))
+				.filter((diagram) => (diagram !== null));
 			if(opts.render !== false) {
 				renderAll(diagrams);
 			}

lib/sequence-diagram.js

@@ -1271,7 +1271,7 @@
 			 * exporting from any environment, in case it is opened in FireFox
 			 */
 			code = code.replace(
-				(/^<svg/),
+				(/^<svg ?/),
 				'<svg width="' + (renderer.width || 1) +
 				'" height="' + (renderer.height || 1) + '" '
 			);
@@ -9710,40 +9710,54 @@
 			return this.renderer.getThemes();
 		}
 
-		getSVGCodeSynchronous() {
+		_updateSize({width = null, height = null, zoom = null}) {
+			if(width !== null) {
+				if(height === null) {
+					this.renderer.height *= width / this.renderer.width;
+				} else {
+					this.renderer.height = height;
+				}
+				this.renderer.width = width;
+			} else if(height !== null) {
+				this.renderer.width *= height / this.renderer.height;
+				this.renderer.height = height;
+			} else if(zoom !== null) {
+				this.renderer.width *= zoom;
+				this.renderer.height *= zoom;
+			}
+		}
+
+		getSVGCodeSynchronous({size = {}} = {}) {
+			this._updateSize(size);
 			return this.exporter.getSVGContent(this.renderer);
 		}
 
-		getSVGCode() {
+		getSVGCode(options) {
-			return Promise.resolve(this.getSVGCodeSynchronous());
+			return Promise.resolve(this.getSVGCodeSynchronous(options));
 		}
 
-		getSVGSynchronous() {
+		getSVGSynchronous({size = {}} = {}) {
+			this._updateSize(size);
 			return this.exporter.getSVGURL(this.renderer);
 		}
 
-		getSVG() {
+		getSVG({size = {}} = {}) {
+			this._updateSize(size);
 			return Promise.resolve({
 				latest: true,
 				url: this.getSVGSynchronous(),
 			});
 		}
 
-		getCanvas({resolution = 1, size = null} = {}) {
+		getCanvas({resolution = 1, size = {}} = {}) {
-			if(size) {
+			this._updateSize(size);
-				this.renderer.width = size.width;
-				this.renderer.height = size.height;
-			}
 			return new Promise((resolve) => {
 				this.exporter.getCanvas(this.renderer, resolution, resolve);
 			});
 		}
 
-		getPNG({resolution = 1, size = null} = {}) {
+		getPNG({resolution = 1, size = {}} = {}) {
-			if(size) {
+			this._updateSize(size);
-				this.renderer.width = size.width;
-				this.renderer.height = size.height;
-			}
 			return new Promise((resolve) => {
 				this.exporter.getPNGURL(
 					this.renderer,
@@ -9932,7 +9946,9 @@
 
 		if(Array.isArray(elements)) {
 			const nodrawOpts = Object.assign({}, opts, {render: false});
-			const diagrams = elements.map((el) => convertOne(el, c, nodrawOpts));
+			const diagrams = elements
+				.map((el) => convertOne(el, c, nodrawOpts))
+				.filter((diagram) => (diagram !== null));
 			if(opts.render !== false) {
 				renderAll(diagrams);
 			}
@@ -10393,7 +10409,8 @@
 	}
 
 	function render(code, options = {}) {
-		return new VirtualSequenceDiagram(code, options).getSVGCodeSynchronous();
+		return new VirtualSequenceDiagram(code, options)
+			.getSVGCodeSynchronous({size: options.size});
 	}
 
 	Object.assign(VirtualSequenceDiagram, {

library.htm

@@ -575,17 +575,22 @@ the example to the right.
 <h3 id="API_getSVGSynchronous">.getSVGSynchronous</h3>
 
 <pre data-lang="javascript">
-svgURL = diagram.getSVGSynchronous();
+svgURL = diagram.getSVGSynchronous(options);
 </pre>
 
 <p>
 Returns a blob URL which contains the SVG code for the current diagram.
 </p>
+<p>The options can include:</p>
+<ul>
+<li><code>size</code>: Object containing optional width, height or zoom to
+specify in the SVG</code>.</li>
+</ul>
 
 <h3 id="API_getSVG">.getSVG</h3>
 
 <pre data-lang="javascript">
-diagram.getSVG().then(({url, latest}) => { ... });
+diagram.getSVG(options).then(({url, latest}) => { ... });
 </pre>
 
 <p>
@@ -594,10 +599,16 @@ Asynchronous version of
 provided for compatibility with <a href="#API_getPNG"><code>getPNG</code></a>,
 which has no synchronous equivalent.
 </p>
+<p>The options can include:</p>
+<ul>
+<li><code>size</code>: Object containing optional width, height or zoom to
+specify in the SVG</code>.</li>
+</ul>
 <p>The callback receives an object containing:</p>
 <ul>
 <li><code>url</code>: The URL of the generated blob.</li>
-<li><code>latest</code>: True if the URL given is still valid; subsequent calls to this method will invalidate previous URLs.</li>
+<li><code>latest</code>: True if the URL given is still valid; subsequent calls
+to this method will invalidate previous URLs.</li>
 </ul>
 
 <h3 id="API_getPNG">.getPNG</h3>
@@ -612,12 +623,16 @@ Generates a PNG image and returns a blob URL.
 <p>The options can include:</p>
 <ul>
 <li><code>resolution</code>: Desired pixels-per-unit.</li>
-<li><code>size</code>: Optional width and/or height to render the image at (defaults to the unit size of the diagram). The final output will have size <code>width * resolution</code> &times; <code>height * resolution</code>.</li>
+<li><code>size</code>: Object containing optional width, height or zoom to
+render the image at (defaults to the unit size of the diagram). The final
+output will have size <code>width * resolution</code> &times;
+<code>height * resolution</code>.</li>
 </ul>
 <p>The callback receives an object containing:</p>
 <ul>
 <li><code>url</code>: The URL of the generated blob.</li>
-<li><code>latest</code>: True if the URL given is still valid; subsequent calls to this method will invalidate previous URLs.</li>
+<li><code>latest</code>: True if the URL given is still valid; subsequent calls
+to this method will invalidate previous URLs.</li>
 </ul>
 
 <h3 id="API_getSize">.getSize</h3>

scripts/sequence/SequenceDiagram.mjs

@@ -192,40 +192,54 @@ export default class SequenceDiagram extends EventObject {
 		return this.renderer.getThemes();
 	}
 
-	getSVGCodeSynchronous() {
+	_updateSize({width = null, height = null, zoom = null}) {
+		if(width !== null) {
+			if(height === null) {
+				this.renderer.height *= width / this.renderer.width;
+			} else {
+				this.renderer.height = height;
+			}
+			this.renderer.width = width;
+		} else if(height !== null) {
+			this.renderer.width *= height / this.renderer.height;
+			this.renderer.height = height;
+		} else if(zoom !== null) {
+			this.renderer.width *= zoom;
+			this.renderer.height *= zoom;
+		}
+	}
+
+	getSVGCodeSynchronous({size = {}} = {}) {
+		this._updateSize(size);
 		return this.exporter.getSVGContent(this.renderer);
 	}
 
-	getSVGCode() {
+	getSVGCode(options) {
-		return Promise.resolve(this.getSVGCodeSynchronous());
+		return Promise.resolve(this.getSVGCodeSynchronous(options));
 	}
 
-	getSVGSynchronous() {
+	getSVGSynchronous({size = {}} = {}) {
+		this._updateSize(size);
 		return this.exporter.getSVGURL(this.renderer);
 	}
 
-	getSVG() {
+	getSVG({size = {}} = {}) {
+		this._updateSize(size);
 		return Promise.resolve({
 			latest: true,
 			url: this.getSVGSynchronous(),
 		});
 	}
 
-	getCanvas({resolution = 1, size = null} = {}) {
+	getCanvas({resolution = 1, size = {}} = {}) {
-		if(size) {
+		this._updateSize(size);
-			this.renderer.width = size.width;
-			this.renderer.height = size.height;
-		}
 		return new Promise((resolve) => {
 			this.exporter.getCanvas(this.renderer, resolution, resolve);
 		});
 	}
 
-	getPNG({resolution = 1, size = null} = {}) {
+	getPNG({resolution = 1, size = {}} = {}) {
-		if(size) {
+		this._updateSize(size);
-			this.renderer.width = size.width;
-			this.renderer.height = size.height;
-		}
 		return new Promise((resolve) => {
 			this.exporter.getPNGURL(
 				this.renderer,
@@ -414,7 +428,9 @@ function convert(elements, code = null, options = {}) {
 
 	if(Array.isArray(elements)) {
 		const nodrawOpts = Object.assign({}, opts, {render: false});
-		const diagrams = elements.map((el) => convertOne(el, c, nodrawOpts));
+		const diagrams = elements
+			.map((el) => convertOne(el, c, nodrawOpts))
+			.filter((diagram) => (diagram !== null));
 		if(opts.render !== false) {
 			renderAll(diagrams);
 		}

scripts/sequence/VirtualSequenceDiagram.mjs

@@ -30,7 +30,8 @@ export default class VirtualSequenceDiagram extends SequenceDiagram {
 }
 
 function render(code, options = {}) {
-	return new VirtualSequenceDiagram(code, options).getSVGCodeSynchronous();
+	return new VirtualSequenceDiagram(code, options)
+		.getSVGCodeSynchronous({size: options.size});
 }
 
 Object.assign(VirtualSequenceDiagram, {

scripts/sequence/exporter/Exporter.mjs

@@ -20,7 +20,7 @@ export default class Exporter {
 		 * exporting from any environment, in case it is opened in FireFox
 		 */
 		code = code.replace(
-			(/^<svg/),
+			(/^<svg ?/),
 			'<svg width="' + (renderer.width || 1) +
 			'" height="' + (renderer.height || 1) + '" '
 		);