Skip to content

Commit

Permalink
Remove d3 select. (#241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@haldenl @domoritz
haldenl authored and domoritz committed Oct 9, 2019
1 parent c456246 commit c38ef3e
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 76 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"jsdelivr": "build/vega-embed.min.js",
"types": "build/src/embed.d.ts",
"devDependencies": {
"@types/d3-selection": "^1.4.1",
"@types/jest": "^24.0.18",
"@types/json-stable-stringify": "^1.0.32",
"@types/semver": "^6.0.2",
Expand All @@ -55,7 +54,6 @@
"vega-lite": "*"
},
"dependencies": {
"d3-selection": "^1.4.0",
"fast-json-patch": "^3.0.0-1",
"json-stringify-pretty-compact": "^2.0.0",
"semver": "^6.3.0",
Expand Down
130 changes: 71 additions & 59 deletions src/embed.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as d3 from 'd3-selection';
import { applyPatch, Operation } from 'fast-json-patch';
import stringify from 'json-stringify-pretty-compact';
import { satisfies } from 'semver';
Expand Down Expand Up @@ -257,11 +256,12 @@ async function _embed(
}
}

const div = d3
.select(el as any) // d3.select supports elements and strings
.classed('vega-embed', true)
.classed('has-actions', actions !== false)
.html(''); // clear container
const div = typeof el === 'string' ? document.querySelector(el) : el;
div.classList.add('vega-embed');
if (actions) {
div.classList.add('has-actions');
}
div.innerHTML = ''; // clear container

const patch = opts.patch;
if (patch) {
Expand Down Expand Up @@ -324,89 +324,101 @@ async function _embed(
let wrapper = div;

if (opts.defaultStyle !== false) {
const details = div.append('details').attr('title', i18n.CLICK_TO_VIEW_ACTIONS);
const details = document.createElement('details');
details.title = i18n.CLICK_TO_VIEW_ACTIONS;
div.append(details);

wrapper = details;
const summary = details.insert('summary');
const summary = document.createElement('summary');
summary.innerHTML = SVG_CIRCLES;

summary.html(SVG_CIRCLES);
details.append(summary);

const dn = details.node() as HTMLDetailsElement;
document.addEventListener('click', evt => {
if (!dn.contains(evt.target as any)) {
dn.removeAttribute('open');
if (!details.contains(evt.target as any)) {
details.removeAttribute('open');
}
});
}

const ctrl = wrapper.insert('div').attr('class', 'vega-actions');
const ctrl = document.createElement('div');
wrapper.append(ctrl);
ctrl.classList.add('vega-actions');

// add 'Export' action
if (actions === true || actions.export !== false) {
for (const ext of ['svg', 'png'] as const) {
if (actions === true || actions.export === true || (actions.export as { svg?: boolean; png?: boolean })[ext]) {
const i18nExportAction = (i18n as { [key: string]: string })[`${ext.toUpperCase()}_ACTION`];
ctrl
.append<HTMLLinkElement>('a')
.text(i18nExportAction)
.attr('href', '#')
.attr('target', '_blank')
.attr('download', `${downloadFileName}.${ext}`)
// eslint-disable-next-line func-names
.on('mousedown', function(this) {
view
.toImageURL(ext, opts.scaleFactor)
.then(url => {
this.href = url;
})
.catch(error => {
throw error;
});
d3.event.preventDefault();
});
const exportLink = document.createElement('a');

exportLink.text = i18nExportAction;
exportLink.href = '#';
exportLink.target = '_blank';
exportLink.download = `${downloadFileName}.${ext}`;
exportLink.addEventListener('mousedown', function(this, e) {
view
.toImageURL(ext, opts.scaleFactor)
.then(url => {
this.href = url;
})
.catch(error => {
throw error;
});
e.preventDefault();
});

ctrl.append(exportLink);
}
}
}

// add 'View Source' action
if (actions === true || actions.source !== false) {
ctrl
.append('a')
.text(i18n.SOURCE_ACTION)
.attr('href', '#')
.on('mousedown', () => {
viewSource(stringify(spec), opts.sourceHeader || '', opts.sourceFooter || '', mode);
d3.event.preventDefault();
});
const viewSourceLink = document.createElement('a');

viewSourceLink.text = i18n.SOURCE_ACTION;
viewSourceLink.href = '#';
viewSourceLink.addEventListener('mousedown', function(this, e) {
viewSource(stringify(spec), opts.sourceHeader || '', opts.sourceFooter || '', mode);
e.preventDefault();
});

ctrl.append(viewSourceLink);
}

// add 'View Compiled' action
if (mode === 'vega-lite' && (actions === true || actions.compiled !== false)) {
ctrl
.append('a')
.text(i18n.COMPILED_ACTION)
.attr('href', '#')
.on('mousedown', () => {
viewSource(stringify(vgSpec), opts.sourceHeader || '', opts.sourceFooter || '', 'vega');
d3.event.preventDefault();
});
const compileLink = document.createElement('a');

compileLink.text = i18n.COMPILED_ACTION;
compileLink.href = '#';
compileLink.addEventListener('mousedown', function(this, e) {
viewSource(stringify(vgSpec), opts.sourceHeader || '', opts.sourceFooter || '', 'vega');
e.preventDefault();
});

ctrl.append(compileLink);
}

// add 'Open in Vega Editor' action
if (actions === true || actions.editor !== false) {
const editorUrl = opts.editorUrl || 'https://vega.github.io/editor/';
ctrl
.append('a')
.text(i18n.EDITOR_ACTION)
.attr('href', '#')
.on('mousedown', () => {
post(window, editorUrl, {
config: config as Config,
mode,
renderer,
spec: stringify(spec)
});
d3.event.preventDefault();
const editorLink = document.createElement('a');

editorLink.text = i18n.EDITOR_ACTION;
editorLink.href = '#';
editorLink.addEventListener('mousedown', function(this, e) {
post(window, editorUrl, {
config: config as Config,
mode,
renderer,
spec: stringify(spec)
});
e.preventDefault();
});

ctrl.append(editorLink);
}
}

Expand Down
5 changes: 1 addition & 4 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as d3 from 'd3-selection';
import { isString } from 'vega';
import pkg from '../package.json';
import container from './container';
Expand All @@ -9,9 +8,7 @@ import { isURL } from './util';
* Returns true if the object is an HTML element.
*/
function isElement(obj: any): obj is HTMLElement {
return obj instanceof d3.selection || typeof HTMLElement === 'object'
? obj instanceof HTMLElement // DOM2
: obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
return obj instanceof HTMLElement;
}

export type Wrapper = typeof embed | typeof container;
Expand Down
2 changes: 1 addition & 1 deletion test-container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<body>
<div id="wrapper"></div>
<script type="text/javascript">
vegaEmbed("https://vega.github.io/vega/examples/bar-chart.vg.json").then(function(div) {
vegaEmbed("https://vega.github.io/vega/examples/bar-chart.vg.json").then(div => {
document.getElementById("wrapper").appendChild(div);
});
</script>
Expand Down
10 changes: 0 additions & 10 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1039,11 +1039,6 @@
resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=

"@types/d3-selection@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-1.4.1.tgz#fa1f8710a6b5d7cfe5c6caa61d161be7cae4a022"
integrity sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA==

"@types/debug@^4.1.5":
version "4.1.5"
resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
Expand Down Expand Up @@ -2295,11 +2290,6 @@ d3-scale@^3.1.0:
d3-time "1"
d3-time-format "2"

d3-selection@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==

d3-shape@^1.3.5:
version "1.3.5"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.5.tgz#e81aea5940f59f0a79cfccac012232a8987c6033"
Expand Down

0 comments on commit c38ef3e

Please sign in to comment.