diff --git a/README.md b/README.md index a7bc0e51..cfed2f39 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ var opt = { | `height` | Number | Sets the view height in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_height) for details. Note that Vega-Lite overrides this option. | | `padding` | Number / Object | Sets the view padding in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_padding) for details. | | `actions` | Boolean / Object | Determines if action links ("Export as PNG/SVG", "View Source", "View Vega" (only for Vega-Lite), "Open in Vega Editor") are included with the embedded view. If the value is `true`, all action links will be shown and none if the value is `false`. This property can take a key-value mapping object that maps keys (`export`, `source`, `compiled`, `editor`) to boolean values for determining if each action link should be shown. By default, `export`, `source`, and `editor` are true and `compiled` is false. These defaults can be overridden: for example, if `actions` is `{export: false, source: true}`, the embedded visualization will have two links – "View Source" and "Open in Vega Editor". The `export` property can take a key-value mapping object that maps keys (svg, png) to boolean values for determining if each export action link should be shown. By default, `svg` and `png` are true. | -| `scaleFactor` | Number | The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image. | +| `scaleFactor` | Number / Object | _Number_: The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image.
_Object_: The different multipliers for each format (`{ svg: , png: }`). If one of the formats is omitted, the default value is used. | | `editorUrl` | String | The URL at which to open embedded Vega specs in a Vega editor. Defaults to `"http://vega.github.io/editor/"`. Internally, Vega-Embed uses [HTML5 postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to pass the specification information to the editor. | | `sourceHeader` | String | HTML to inject into the `head` tag of the page generated by the "View Source" and "View Vega" action link. For example, this can be used to add code for [syntax highlighting](https://highlightjs.org/). | | `sourceFooter` | String | HTML to inject into the end of the page generated by the "View Source" and "View Vega" action link. The text will be added immediately before the closing `body` tag. | diff --git a/src/embed.ts b/src/embed.ts index ce3ad274..b9329ba7 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -8,6 +8,7 @@ import { Config as VgConfig, EncodeEntryName, isBoolean, + isObject, isString, Loader, LoaderOptions, @@ -81,7 +82,7 @@ export interface EmbedOptions { width?: number; height?: number; padding?: number | {left?: number; right?: number; top?: number; bottom?: number}; - scaleFactor?: number; + scaleFactor?: number | {svg?: number; png?: number}; config?: S | Config; sourceHeader?: string; sourceFooter?: string; @@ -462,6 +463,7 @@ async function _embed( if (actions === true || actions.export === true || (actions.export as {svg?: boolean; png?: boolean})[ext]) { const i18nExportAction = (i18n as {[key: string]: string})[`${ext.toUpperCase()}_ACTION`]; const exportLink = document.createElement('a'); + const scaleFactor = isObject(opts.scaleFactor) ? opts.scaleFactor[ext] : opts.scaleFactor; exportLink.text = i18nExportAction; exportLink.href = '#'; @@ -470,7 +472,7 @@ async function _embed( // add link on mousedown so that it's correct when the click happens exportLink.addEventListener('mousedown', async function (this, e) { e.preventDefault(); - const url = await view.toImageURL(ext, opts.scaleFactor); + const url = await view.toImageURL(ext, scaleFactor); this.href = url; }); diff --git a/test-scalefactor.html b/test-scalefactor.html new file mode 100644 index 00000000..2cab2816 --- /dev/null +++ b/test-scalefactor.html @@ -0,0 +1,58 @@ + + + + + + Vega-Embed for Vega-Lite + + + + + + + +
+ + + diff --git a/test/embed.test.ts b/test/embed.test.ts index 05948eee..f7610bd8 100644 --- a/test/embed.test.ts +++ b/test/embed.test.ts @@ -476,3 +476,11 @@ test('cannot set style via usermeta', async () => { expect(result).toBeTruthy(); expect(result.embedOptions.defaultStyle).toBe(false); }); + +test.each([5, {svg: 2, png: 5}, {svg: 2}, {png: 5}])('can set scaleFactor', async (scaleFactor) => { + const el = document.createElement('div'); + const result = await embed(el, vlSpec, { + scaleFactor, + }); + expect(result).toBeTruthy(); +});