yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
David Evans 2018-04-28 22:54:05 +01:00
parent f5b1271647
commit 27d0916da8
7 changed files with 124 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
lib/sequence-diagram-web.js
View File

@ -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() {
return Promise.resolve(this.getSVGCodeSynchronous());
getSVGCode(options) {
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} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getCanvas({resolution = 1, size = {}} = {}) {
this._updateSize(size);
return new Promise((resolve) => {
this.exporter.getCanvas(this.renderer, resolution, resolve);
});
}
getPNG({resolution = 1, size = null} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getPNG({resolution = 1, size = {}} = {}) {
this._updateSize(size);
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);
}

2
lib/sequence-diagram-web.min.js vendored
View File

File diff suppressed because one or more lines are too long

53
lib/sequence-diagram.js
View File

@ -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() {
return Promise.resolve(this.getSVGCodeSynchronous());
getSVGCode(options) {
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} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getCanvas({resolution = 1, size = {}} = {}) {
this._updateSize(size);
return new Promise((resolve) => {
this.exporter.getCanvas(this.renderer, resolution, resolve);
});
}
getPNG({resolution = 1, size = null} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getPNG({resolution = 1, size = {}} = {}) {
this._updateSize(size);
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, {

25
library.htm
View File

@ -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>

48
scripts/sequence/SequenceDiagram.mjs
View File

@ -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() {
return Promise.resolve(this.getSVGCodeSynchronous());
getSVGCode(options) {
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} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getCanvas({resolution = 1, size = {}} = {}) {
this._updateSize(size);
return new Promise((resolve) => {
this.exporter.getCanvas(this.renderer, resolution, resolve);
});
}
getPNG({resolution = 1, size = null} = {}) {
if(size) {
this.renderer.width = size.width;
this.renderer.height = size.height;
}
getPNG({resolution = 1, size = {}} = {}) {
this._updateSize(size);
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);
}

3
scripts/sequence/VirtualSequenceDiagram.mjs
View File

@ -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, {

2
scripts/sequence/exporter/Exporter.mjs
View File

@ -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) + '" '
);