vega-view - npm Package Compare versions

Comparing version 5.9.2 to 5.10.0

build/vega-view.js

@@ -249,2 +249,9 @@ (function (global, factory) {
   }
+  function trackEventListener(view, sources, type, handler) {
+    view._eventListeners.push({
+      type: type,
+      sources: vegaUtil.array(sources),
+      handler: handler
+    });
+  }
 
@@ -318,7 +325,3 @@ function prevent(view, type) {
 
-        view._eventListeners.push({
-          type: type,
-          sources: sources,
-          handler: send
-        });
+        trackEventListener(view, sources, type, send);
       }
@@ -429,3 +432,3 @@ }
         update: value => {
-          if (value !== view.signal(param.signal)) {
+          if (value != view.signal(param.signal)) {
             view.runAsync(null, () => {
@@ -444,3 +447,4 @@ bind.source = true;
 
-    generate(bind, el, param, view.signal(param.signal));
+    const create = param.input == null && param.element ? target : generate;
+    create(bind, el, param, view);
 
@@ -457,6 +461,35 @@ if (!bind.active) {
   /**
+   * Bind the signal to an external EventTarget.
+   */
+
+  function target(bind, node, param, view) {
+    const type = param.event || 'input';
+
+    const handler = () => bind.update(node.value); // initialize signal value to external input value
+
+
+    view.signal(param.signal, node.value); // listen for changes on the element
+
+    node.addEventListener(type, handler); // register with view, so we can remove it upon finalization
+
+    trackEventListener(view, node, type, handler); // propagate change to element
+
+    bind.set = value => {
+      node.value = value;
+      node.dispatchEvent(event(type));
+    };
+  }
+
+  function event(type) {
+    return typeof Event !== 'undefined' ? new Event(type) : {
+      type
+    };
+  }
+  /**
    * Generate an HTML input form element and bind it to a signal.
    */
 
-  function generate(bind, el, param, value) {
+
+  function generate(bind, el, param, view) {
+    const value = view.signal(param.signal);
     const div = element('div', {
@@ -689,3 +722,3 @@ 'class': BindClass
     if (el && config !== 'none') {
-      elBind = elBind ? view._elBind = lookup(view, elBind) : el.appendChild(element('form', {
+      elBind = elBind ? view._elBind = lookup(view, elBind, true) : el.appendChild(element('form', {
         'class': 'vega-bindings'
@@ -696,3 +729,3 @@ }));
         if (_.param.element && config !== 'container') {
-          _.element = lookup(view, _.param.element);
+          _.element = lookup(view, _.param.element, !!_.param.input);
         }
@@ -709,3 +742,3 @@ });
 
-  function lookup(view, el) {
+  function lookup(view, el, clear) {
     if (typeof el === 'string') {
@@ -725,3 +758,3 @@ if (typeof document !== 'undefined') {
 
-    if (el) {
+    if (el && clear) {
       try {
@@ -728,0 +761,0 @@ el.innerHTML = '';

build/vega-view.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vega-util"),require("vega-dataflow"),require("vega-scenegraph"),require("vega-functions"),require("vega-runtime"),require("vega-format")):"function"==typeof define&&define.amd?define(["exports","vega-util","vega-dataflow","vega-scenegraph","vega-functions","vega-runtime","vega-format"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).vega={},e.vega,e.vega,e.vega,e.vega,e.vega,e.vega)}(this,(function(e,t,n,r,i,s,a){"use strict";function o(e,t){e&&(null==t?e.removeAttribute("aria-label"):e.setAttribute("aria-label",t))}const l="default";function u(e,t){const n=e.globalCursor()?"undefined"!=typeof document&&document.body:e.container();if(n)return null==t?n.style.removeProperty("cursor"):n.style.cursor=t}function c(e,n){var r=e._runtime.data;return t.hasOwnProperty(r,n)||t.error("Unrecognized data set: "+n),r[n]}function d(e,r){n.isChangeSet(r)||t.error("Second argument to changes must be a changeset.");const i=c(this,e);return i.modified=!0,this.pulse(i.input,r)}function h(e){var t=e.padding();return Math.max(0,e._viewWidth+t.left+t.right)}function g(e){var t=e.padding();return Math.max(0,e._viewHeight+t.top+t.bottom)}function f(e){var t=e.padding(),n=e._origin;return[t.left+n[0],t.top+n[1]]}function p(e,n,i){var s,a,o,l=e._renderer,u=l&&l.canvas();return u&&(o=f(e),a=n.changedTouches?n.changedTouches[0]:n,(s=r.point(a,u))[0]-=o[0],s[1]-=o[1]),n.dataflow=e,n.item=i,n.vega=function(e,n,r){const i=n?"group"===n.mark.marktype?n:n.mark.group:null;function s(e){var t,r=i;if(e)for(t=n;t;t=t.mark.group)if(t.mark.name===e){r=t;break}return r&&r.mark&&r.mark.interactive?r:{}}function a(e){if(!e)return r;t.isString(e)&&(e=s(e));const n=r.slice();for(;e;)n[0]-=e.x||0,n[1]-=e.y||0,e=e.mark&&e.mark.group;return n}return{view:t.constant(e),item:t.constant(n||{}),group:s,xy:a,x:e=>a(e)[0],y:e=>a(e)[1]}}(e,i,s),n}const v="view",_={trap:!1};function m(e,n,r){const i=e._eventConfig&&e._eventConfig[n];return!(!1===i||t.isObject(i)&&!i[r])||(e.warn("Blocked ".concat(n," ").concat(r," event listener.")),!1)}function w(e){return e.item}function y(e){return e.item.mark.source}function b(e){return function(t,n){return n.vega.view().changeset().encode(n.item,e)}}function z(e,t,n){const r=document.createElement(e);for(const e in t)r.setAttribute(e,t[e]);return null!=n&&(r.textContent=n),r}var k=Math.sqrt(50),x=Math.sqrt(10),C=Math.sqrt(2);const L="vega-bind",A="vega-bind-name";function S(e,n,r){if(!n)return;const i=r.param;let s=r.state;return s||(s=r.state={elements:null,active:!1,set:null,update:t=>{t!==e.signal(i.signal)&&e.runAsync(null,(()=>{s.source=!0,e.signal(i.signal,t)}))}},i.debounce&&(s.update=t.debounce(i.debounce,s.update))),function(e,t,n,r){const i=z("div",{class:L}),s="radio"===n.input?i:i.appendChild(z("label"));s.appendChild(z("span",{class:A},n.name||n.signal)),t.appendChild(i);let a=T;switch(n.input){case"checkbox":a=E;break;case"select":a=D;break;case"radio":a=M;break;case"range":a=R}a(e,s,n,r)}(s,n,i,e.signal(i.signal)),s.active||(e.on(e._signals[i.signal],null,(()=>{s.source?s.source=!1:s.set(e.signal(i.signal))})),s.active=!0),s}function T(e,t,n,r){const i=z("input");for(const e in n)"signal"!==e&&"element"!==e&&i.setAttribute("input"===e?"type":e,n[e]);i.setAttribute("name",n.signal),i.value=r,t.appendChild(i),i.addEventListener("input",(()=>e.update(i.value))),e.elements=[i],e.set=e=>i.value=e}function E(e,t,n,r){const i={type:"checkbox",name:n.signal};r&&(i.checked=!0);const s=z("input",i);t.appendChild(s),s.addEventListener("change",(()=>e.update(s.checked))),e.elements=[s],e.set=e=>s.checked=!!e||null}function D(e,t,n,r){const i=z("select",{name:n.signal}),s=n.labels||[];n.options.forEach(((e,t)=>{const n={value:e};O(e,r)&&(n.selected=!0),i.appendChild(z("option",n,(s[t]||e)+""))})),t.appendChild(i),i.addEventListener("change",(()=>{e.update(n.options[i.selectedIndex])})),e.elements=[i],e.set=e=>{for(let t=0,r=n.options.length;t<r;++t)if(O(n.options[t],e))return void(i.selectedIndex=t)}}function M(e,t,n,r){const i=z("span",{class:"vega-bind-radio"}),s=n.labels||[];t.appendChild(i),e.elements=n.options.map(((t,a)=>{const o={type:"radio",name:n.signal,value:t};O(t,r)&&(o.checked=!0);const l=z("input",o);l.addEventListener("change",(()=>e.update(t)));const u=z("label",{},(s[a]||t)+"");return u.prepend(l),i.appendChild(u),l})),e.set=t=>{const n=e.elements,r=n.length;for(let e=0;e<r;++e)O(n[e].value,t)&&(n[e].checked=!0)}}function R(e,t,n,r){r=void 0!==r?r:(+n.max+ +n.min)/2;const i=null!=n.max?n.max:Math.max(100,+r)||100,s=n.min||Math.min(0,i,+r)||0,a=n.step||(o=s,l=i,u=100,c=Math.abs(l-o)/Math.max(0,u),d=Math.pow(10,Math.floor(Math.log(c)/Math.LN10)),(h=c/d)>=k?d*=10:h>=x?d*=5:h>=C&&(d*=2),l<o?-d:d);var o,l,u,c,d,h;const g=z("input",{type:"range",name:n.signal,min:s,max:i,step:a});g.value=r;const f=z("span",{},+r);t.appendChild(g),t.appendChild(f);const p=()=>{f.textContent=g.value,e.update(+g.value)};g.addEventListener("input",p),g.addEventListener("change",p),e.elements=[g],e.set=e=>{g.value=e,f.textContent=e}}function O(e,t){return e===t||e+""==t+""}function j(e,t,n,r,i,s){return(t=t||new r(e.loader())).initialize(n,h(e),g(e),f(e),i,s).background(e.background())}function q(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function H(e,t){if("string"==typeof t){if("undefined"==typeof document)return e.error("DOM document instance not found."),null;if(!(t=document.querySelector(t)))return e.error("Signal bind element not found: "+t),null}if(t)try{t.innerHTML=""}catch(n){t=null,e.error(n)}return t}const U=e=>+e||0;function W(e){return t.isObject(e)?{top:U(e.top),bottom:U(e.bottom),left:U(e.left),right:U(e.right)}:(e=>({top:e,bottom:e,left:e,right:e}))(U(e))}async function V(e,n,i,s){const a=r.renderModule(n),o=a&&a.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),j(e,null,null,o,i,s).renderAsync(e._scenegraph.root)}var P="width",B="height",G="padding",I={skip:!0};function F(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===G?r.left+r.right:0)}function N(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===G?r.top+r.bottom:0)}function J(e,n){return n.modified&&t.isArray(n.input.value)&&e.indexOf("_:vega:_")}function K(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}var Q,X,Y=0,Z=0,$=0,ee=0,te=0,ne=0,re="object"==typeof performance&&performance.now?performance:Date,ie="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function se(){return te||(ie(ae),te=re.now()+ne)}function ae(){te=0}function oe(){this._call=this._time=this._next=null}function le(){te=(ee=re.now())+ne,Y=Z=0;try{!function(){se(),++Y;for(var e,t=Q;t;)(e=te-t._time)>=0&&t._call.call(null,e),t=t._next;--Y}()}finally{Y=0,function(){var e,t,n=Q,r=1/0;for(;n;)n._call?(r>n._time&&(r=n._time),e=n,n=n._next):(t=n._next,n._next=null,n=e?e._next=t:Q=t);X=e,ce(r)}(),te=0}}function ue(){var e=re.now(),t=e-ee;t>1e3&&(ne-=t,ee=e)}function ce(e){Y||(Z&&(Z=clearTimeout(Z)),e-te>24?(e<1/0&&(Z=setTimeout(le,e-re.now()-ne)),$&&($=clearInterval($))):($||(ee=re.now(),$=setInterval(ue,1e3)),Y=1,ie(le)))}function de(e,n,r,i){const s=e.element();s&&s.setAttribute("title",function(e){return null==e?"":t.isArray(e)?he(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((e=>{const r=n[e];return e+": "+(t.isArray(r)?he(r):ge(r))})).join("\n")):e+"";var n}(i))}function he(e){return"["+e.map(ge).join(", ")+"]"}function ge(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function fe(e,o){const c=this;if(o=o||{},n.Dataflow.call(c),o.loader&&c.loader(o.loader),o.logger&&c.logger(o.logger),null!=o.logLevel&&c.logLevel(o.logLevel),o.locale||e.locale){const n=t.extend({},e.locale,o.locale);c.locale(a.locale(n.number,n.time))}c._el=null,c._elBind=null,c._renderType=o.renderer||r.RenderType.Canvas,c._scenegraph=new r.Scenegraph;const d=c._scenegraph.root;c._renderer=null,c._tooltip=o.tooltip||de,c._redraw=!0,c._handler=(new r.CanvasHandler).scene(d),c._globalCursor=!1,c._preventDefault=!1,c._timers=[],c._eventListeners=[],c._resizeListeners=[],c._eventConfig=function(e){const n=t.extend({defaults:{}},e),r=(e,n)=>{n.forEach((n=>{t.isArray(e[n])&&(e[n]=t.toSet(e[n]))}))};return r(n.defaults,["prevent","allow"]),r(n,["view","window","selector"]),n}(e.eventConfig),c.globalCursor(c._eventConfig.globalCursor);const h=function(e,t,r){return s.context(e,n.transforms,i.functionContext,r).parse(t)}(c,e,o.expr);c._runtime=h,c._signals=h.signals,c._bind=(e.bindings||[]).map((e=>({state:null,param:t.extend({},e)}))),h.root&&h.root.set(d),d.source=h.data.root.input,c.pulse(h.data.root.input,c.changeset().insert(d.items)),c._width=c.width(),c._height=c.height(),c._viewWidth=F(c,c._width),c._viewHeight=N(c,c._height),c._origin=[0,0],c._resize=0,c._autosize=1,function(e){var t=e._signals,n=t.width,r=t.height,i=t.padding;function s(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(t=>{e._width=t.size,e._viewWidth=F(e,t.size),s()}),{size:n}),e._resizeHeight=e.add(null,(t=>{e._height=t.size,e._viewHeight=N(e,t.size),s()}),{size:r});const a=e.add(null,s,{pad:i});e._resizeWidth.rank=n.rank+1,e._resizeHeight.rank=r.rank+1,a.rank=i.rank+1}(c),function(e){e.add(null,(t=>(e._background=t.bg,e._resize=1,t.bg)),{bg:e._signals.background})}(c),function(e){const n=e._signals.cursor||(e._signals.cursor=e.add({user:l,item:null}));e.on(e.events("view","mousemove"),n,((e,r)=>{const i=n.value,s=i?t.isString(i)?i:i.user:l,a=r.item&&r.item.cursor||null;return i&&s===i.user&&a==i.item?i:{user:s,item:a}})),e.add(null,(function(n){let r=n.cursor,i=this.value;return t.isString(r)||(i=r.item,r=r.user),u(e,r&&r!==l?r:i||r),i}),{cursor:n})}(c),c.description(e.description),o.hover&&c.hover(),o.container&&c.initialize(o.container,o.bind)}function pe(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function ve(e,t){const n=(e._targets||[]).filter((e=>e._update&&e._update.handler===t));return n.length?n[0]:null}function _e(e,t,n,r){let i=ve(n,r);return i||(i=q(e,(()=>r(t,n.value))),i.handler=r,e.on(n,null,i)),e}function me(e,t,n){const r=ve(t,n);return r&&t._targets.remove(r),e}oe.prototype=function(e,t,n){var r=new oe;return r.restart(e,t,n),r}.prototype={constructor:oe,restart:function(e,t,n){if("function"!=typeof e)throw new TypeError("callback is not a function");n=(null==n?se():+n)+(null==t?0:+t),this._next||X===this||(X?X._next=this:Q=this,X=this),this._call=e,this._time=n,ce()},stop:function(){this._call&&(this._call=null,this._time=1/0,ce())}},t.inherits(fe,n.Dataflow,{async evaluate(e,t,r){if(await n.Dataflow.prototype.evaluate.call(this,e,t),this._redraw||this._resize)try{this._renderer&&(this._resize&&(this._resize=0,s=f(i=this),a=h(i),o=g(i),i._renderer.background(i.background()),i._renderer.resize(a,o,s),i._handler.origin(s),i._resizeListeners.forEach((e=>{try{e(a,o)}catch(e){i.error(e)}}))),await this._renderer.renderAsync(this._scenegraph.root)),this._redraw=!1}catch(e){this.error(e)}var i,s,a,o;return r&&n.asyncCallback(this,r),this},dirty(e){this._redraw=!0,this._renderer&&this._renderer.dirty(e)},description(e){if(arguments.length){const t=null!=e?e+"":null;return t!==this._desc&&o(this._el,this._desc=t),this}return this._desc},container(){return this._el},scenegraph(){return this._scenegraph},origin(){return this._origin.slice()},signal(e,t,n){const r=pe(this,e);return 1===arguments.length?r.value:this.update(r,t,n)},width(e){return arguments.length?this.signal("width",e):this.signal("width")},height(e){return arguments.length?this.signal("height",e):this.signal("height")},padding(e){return arguments.length?this.signal("padding",W(e)):W(this.signal("padding"))},autosize(e){return arguments.length?this.signal("autosize",e):this.signal("autosize")},background(e){return arguments.length?this.signal("background",e):this.signal("background")},renderer(e){return arguments.length?(r.renderModule(e)||t.error("Unrecognized renderer type: "+e),e!==this._renderType&&(this._renderType=e,this._resetRenderer()),this):this._renderType},tooltip(e){return arguments.length?(e!==this._tooltip&&(this._tooltip=e,this._resetRenderer()),this):this._tooltip},loader(e){return arguments.length?(e!==this._loader&&(n.Dataflow.prototype.loader.call(this,e),this._resetRenderer()),this):this._loader},resize(){return this._autosize=1,this.touch(pe(this,"autosize"))},_resetRenderer(){this._renderer&&(this._renderer=null,this.initialize(this._el,this._elBind))},_resizeView:function(e,t,n,r,i,s){this.runAfter((a=>{let o=0;a._autosize=0,a.width()!==n&&(o=1,a.signal(P,n,I),a._resizeWidth.skip(!0)),a.height()!==r&&(o=1,a.signal(B,r,I),a._resizeHeight.skip(!0)),a._viewWidth!==e&&(a._resize=1,a._viewWidth=e),a._viewHeight!==t&&(a._resize=1,a._viewHeight=t),a._origin[0]===i[0]&&a._origin[1]===i[1]||(a._resize=1,a._origin=i),o&&a.run("enter"),s&&a.runAfter((e=>e.resize()))}),!1,1)},addEventListener(e,t,n){let r=t;return n&&!1===n.trap||(r=q(this,t),r.raw=t),this._handler.on(e,r),this},removeEventListener(e,t){for(var n,r,i=this._handler.handlers(e),s=i.length;--s>=0;)if(r=i[s].type,n=i[s].handler,e===r&&(t===n||t===n.raw)){this._handler.off(r,n);break}return this},addResizeListener(e){const t=this._resizeListeners;return t.indexOf(e)<0&&t.push(e),this},removeResizeListener(e){var t=this._resizeListeners,n=t.indexOf(e);return n>=0&&t.splice(n,1),this},addSignalListener(e,t){return _e(this,e,pe(this,e),t)},removeSignalListener(e,t){return me(this,pe(this,e),t)},addDataListener(e,t){return _e(this,e,c(this,e).values,t)},removeDataListener(e,t){return me(this,c(this,e).values,t)},globalCursor(e){if(arguments.length){if(this._globalCursor!==!!e){const t=u(this,null);this._globalCursor=!!e,t&&u(this,t)}return this}return this._globalCursor},preventDefault(e){return arguments.length?(this._preventDefault=e,this):this._preventDefault},timer:function(e,t){this._timers.push(function(e,t,n){var r=new oe,i=t;return null==t?(r.restart(e,t,n),r):(r._restart=r.restart,r.restart=function(e,t,n){t=+t,n=null==n?se():+n,r._restart((function s(a){a+=i,r._restart(s,i+=t,n),e(a)}),t,n)},r.restart(e,t,n),r)}((function(t){e({timestamp:Date.now(),elapsed:t})}),t))},events:function(e,t,r){var i,s=this,a=new n.EventStream(r),o=function(n,r){s.runAsync(null,(()=>{e===v&&function(e,t){var n=e._eventConfig.defaults,r=n.prevent,i=n.allow;return!1!==r&&!0!==i&&(!0===r||!1===i||(r?r[t]:i?!i[t]:e.preventDefault()))}(s,t)&&n.preventDefault(),a.receive(p(s,n,r))}))};if("timer"===e)m(s,"timer",t)&&s.timer(o,t);else if(e===v)m(s,"view",t)&&s.addEventListener(t,o,_);else if("window"===e?m(s,"window",t)&&"undefined"!=typeof window&&(i=[window]):"undefined"!=typeof document&&m(s,"selector",t)&&(i=document.querySelectorAll(e)),i){for(var l=0,u=i.length;l<u;++l)i[l].addEventListener(t,o);s._eventListeners.push({type:t,sources:i,handler:o})}else s.warn("Can not resolve event source: "+e);return a},finalize:function(){var e,t,n,r=this._tooltip,i=this._timers,s=this._eventListeners;for(e=i.length;--e>=0;)i[e].stop();for(e=s.length;--e>=0;)for(t=(n=s[e]).sources.length;--t>=0;)n.sources[t].removeEventListener(n.type,n.handler);return r&&r.call(this,this._handler,null,null,null),this},hover:function(e,t){return t=[t||"update",(e=[e||"hover"])[0]],this.on(this.events("view","mouseover",w),y,b(e)),this.on(this.events("view","mouseout",w),y,b(t)),this},data:function(e,r){return arguments.length<2?c(this,e).values.value:d.call(this,e,n.changeset().remove(t.truthy).insert(r))},change:d,insert:function(e,t){return d.call(this,e,n.changeset().insert(t))},remove:function(e,t){return d.call(this,e,n.changeset().remove(t))},scale:function(e){var n=this._runtime.scales;return t.hasOwnProperty(n,e)||t.error("Unrecognized scale or projection: "+e),n[e].value},initialize:function(e,t){const n=this,i=n._renderType,s=n._eventConfig.bind,a=r.renderModule(i);e=n._el=e?H(n,e):null,function(e){const t=e.container();t&&(t.setAttribute("role","graphics-document"),t.setAttribute("aria-roleDescription","visualization"),o(t,e.description()))}(n),a||n.error("Unrecognized renderer type: "+i);const l=a.handler||r.CanvasHandler,u=e?a.renderer:a.headless;return n._renderer=u?j(n,n._renderer,e,u):null,n._handler=function(e,t,n,r){const i=new r(e.loader(),q(e,e.tooltip())).scene(e.scenegraph().root).initialize(n,f(e),e);return t&&t.handlers().forEach((e=>{i.on(e.type,e.handler)})),i}(n,n._handler,e,l),n._redraw=!0,e&&"none"!==s&&(t=t?n._elBind=H(n,t):e.appendChild(z("form",{class:"vega-bindings"})),n._bind.forEach((e=>{e.param.element&&"container"!==s&&(e.element=H(n,e.param.element))})),n._bind.forEach((e=>{S(n,e.element||t,e)}))),n},toImageURL:async function(e,n){e!==r.RenderType.Canvas&&e!==r.RenderType.SVG&&e!==r.RenderType.PNG&&t.error("Unrecognized image type: "+e);const i=await V(this,e,n);return e===r.RenderType.SVG?function(e,t){const n=new Blob([e],{type:t});return window.URL.createObjectURL(n)}(i.svg(),"image/svg+xml"):i.canvas().toDataURL("image/png")},toCanvas:async function(e,t){return(await V(this,r.RenderType.Canvas,e,t)).canvas()},toSVG:async function(e){return(await V(this,r.RenderType.SVG,e)).svg()},getState:function(e){return this._runtime.getState(e||{data:J,signals:K,recurse:!0})},setState:function(e){return this.runAsync(null,(t=>{t._trigger=!1,t._runtime.setState(e)}),(e=>{e._trigger=!0})),this}}),e.View=fe,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vega-util"),require("vega-dataflow"),require("vega-scenegraph"),require("vega-functions"),require("vega-runtime"),require("vega-format")):"function"==typeof define&&define.amd?define(["exports","vega-util","vega-dataflow","vega-scenegraph","vega-functions","vega-runtime","vega-format"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).vega={},e.vega,e.vega,e.vega,e.vega,e.vega,e.vega)}(this,(function(e,t,n,r,i,s,a){"use strict";function o(e,t){e&&(null==t?e.removeAttribute("aria-label"):e.setAttribute("aria-label",t))}const l="default";function u(e,t){const n=e.globalCursor()?"undefined"!=typeof document&&document.body:e.container();if(n)return null==t?n.style.removeProperty("cursor"):n.style.cursor=t}function c(e,n){var r=e._runtime.data;return t.hasOwnProperty(r,n)||t.error("Unrecognized data set: "+n),r[n]}function d(e,r){n.isChangeSet(r)||t.error("Second argument to changes must be a changeset.");const i=c(this,e);return i.modified=!0,this.pulse(i.input,r)}function h(e){var t=e.padding();return Math.max(0,e._viewWidth+t.left+t.right)}function g(e){var t=e.padding();return Math.max(0,e._viewHeight+t.top+t.bottom)}function f(e){var t=e.padding(),n=e._origin;return[t.left+n[0],t.top+n[1]]}function p(e,n,i){var s,a,o,l=e._renderer,u=l&&l.canvas();return u&&(o=f(e),a=n.changedTouches?n.changedTouches[0]:n,(s=r.point(a,u))[0]-=o[0],s[1]-=o[1]),n.dataflow=e,n.item=i,n.vega=function(e,n,r){const i=n?"group"===n.mark.marktype?n:n.mark.group:null;function s(e){var t,r=i;if(e)for(t=n;t;t=t.mark.group)if(t.mark.name===e){r=t;break}return r&&r.mark&&r.mark.interactive?r:{}}function a(e){if(!e)return r;t.isString(e)&&(e=s(e));const n=r.slice();for(;e;)n[0]-=e.x||0,n[1]-=e.y||0,e=e.mark&&e.mark.group;return n}return{view:t.constant(e),item:t.constant(n||{}),group:s,xy:a,x:e=>a(e)[0],y:e=>a(e)[1]}}(e,i,s),n}const v="view",_={trap:!1};function m(e,n,r,i){e._eventListeners.push({type:r,sources:t.array(n),handler:i})}function w(e,n,r){const i=e._eventConfig&&e._eventConfig[n];return!(!1===i||t.isObject(i)&&!i[r])||(e.warn(`Blocked ${n} ${r} event listener.`),!1)}function y(e){return e.item}function b(e){return e.item.mark.source}function z(e){return function(t,n){return n.vega.view().changeset().encode(n.item,e)}}function k(e,t,n){const r=document.createElement(e);for(const e in t)r.setAttribute(e,t[e]);return null!=n&&(r.textContent=n),r}var x=Math.sqrt(50),C=Math.sqrt(10),L=Math.sqrt(2);function A(e,t,n,r){const i=n.event||"input",s=()=>e.update(t.value);r.signal(n.signal,t.value),t.addEventListener(i,s),m(r,t,i,s),e.set=e=>{t.value=e,t.dispatchEvent(function(e){return"undefined"!=typeof Event?new Event(e):{type:e}}(i))}}function E(e,t,n,r){const i=r.signal(n.signal),s=k("div",{class:"vega-bind"}),a="radio"===n.input?s:s.appendChild(k("label"));a.appendChild(k("span",{class:"vega-bind-name"},n.name||n.signal)),t.appendChild(s);let o=S;switch(n.input){case"checkbox":o=T;break;case"select":o=D;break;case"radio":o=M;break;case"range":o=R}o(e,a,n,i)}function S(e,t,n,r){const i=k("input");for(const e in n)"signal"!==e&&"element"!==e&&i.setAttribute("input"===e?"type":e,n[e]);i.setAttribute("name",n.signal),i.value=r,t.appendChild(i),i.addEventListener("input",(()=>e.update(i.value))),e.elements=[i],e.set=e=>i.value=e}function T(e,t,n,r){const i={type:"checkbox",name:n.signal};r&&(i.checked=!0);const s=k("input",i);t.appendChild(s),s.addEventListener("change",(()=>e.update(s.checked))),e.elements=[s],e.set=e=>s.checked=!!e||null}function D(e,t,n,r){const i=k("select",{name:n.signal}),s=n.labels||[];n.options.forEach(((e,t)=>{const n={value:e};O(e,r)&&(n.selected=!0),i.appendChild(k("option",n,(s[t]||e)+""))})),t.appendChild(i),i.addEventListener("change",(()=>{e.update(n.options[i.selectedIndex])})),e.elements=[i],e.set=e=>{for(let t=0,r=n.options.length;t<r;++t)if(O(n.options[t],e))return void(i.selectedIndex=t)}}function M(e,t,n,r){const i=k("span",{class:"vega-bind-radio"}),s=n.labels||[];t.appendChild(i),e.elements=n.options.map(((t,a)=>{const o={type:"radio",name:n.signal,value:t};O(t,r)&&(o.checked=!0);const l=k("input",o);l.addEventListener("change",(()=>e.update(t)));const u=k("label",{},(s[a]||t)+"");return u.prepend(l),i.appendChild(u),l})),e.set=t=>{const n=e.elements,r=n.length;for(let e=0;e<r;++e)O(n[e].value,t)&&(n[e].checked=!0)}}function R(e,t,n,r){r=void 0!==r?r:(+n.max+ +n.min)/2;const i=null!=n.max?n.max:Math.max(100,+r)||100,s=n.min||Math.min(0,i,+r)||0,a=n.step||(o=s,l=i,u=100,c=Math.abs(l-o)/Math.max(0,u),d=Math.pow(10,Math.floor(Math.log(c)/Math.LN10)),(h=c/d)>=x?d*=10:h>=C?d*=5:h>=L&&(d*=2),l<o?-d:d);var o,l,u,c,d,h;const g=k("input",{type:"range",name:n.signal,min:s,max:i,step:a});g.value=r;const f=k("span",{},+r);t.appendChild(g),t.appendChild(f);const p=()=>{f.textContent=g.value,e.update(+g.value)};g.addEventListener("input",p),g.addEventListener("change",p),e.elements=[g],e.set=e=>{g.value=e,f.textContent=e}}function O(e,t){return e===t||e+""==t+""}function j(e,t,n,r,i,s){return(t=t||new r(e.loader())).initialize(n,h(e),g(e),f(e),i,s).background(e.background())}function q(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function H(e,t,n){if("string"==typeof t){if("undefined"==typeof document)return e.error("DOM document instance not found."),null;if(!(t=document.querySelector(t)))return e.error("Signal bind element not found: "+t),null}if(t&&n)try{t.innerHTML=""}catch(n){t=null,e.error(n)}return t}const U=e=>+e||0;function W(e){return t.isObject(e)?{top:U(e.top),bottom:U(e.bottom),left:U(e.left),right:U(e.right)}:(e=>({top:e,bottom:e,left:e,right:e}))(U(e))}async function V(e,n,i,s){const a=r.renderModule(n),o=a&&a.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),j(e,null,null,o,i,s).renderAsync(e._scenegraph.root)}var P="width",B="height",G="padding",I={skip:!0};function F(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===G?r.left+r.right:0)}function N(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===G?r.top+r.bottom:0)}function $(e,n){return n.modified&&t.isArray(n.input.value)&&e.indexOf("_:vega:_")}function J(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}var K,Q,X=0,Y=0,Z=0,ee=0,te=0,ne=0,re="object"==typeof performance&&performance.now?performance:Date,ie="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function se(){return te||(ie(ae),te=re.now()+ne)}function ae(){te=0}function oe(){this._call=this._time=this._next=null}function le(){te=(ee=re.now())+ne,X=Y=0;try{!function(){se(),++X;for(var e,t=K;t;)(e=te-t._time)>=0&&t._call.call(null,e),t=t._next;--X}()}finally{X=0,function(){var e,t,n=K,r=1/0;for(;n;)n._call?(r>n._time&&(r=n._time),e=n,n=n._next):(t=n._next,n._next=null,n=e?e._next=t:K=t);Q=e,ce(r)}(),te=0}}function ue(){var e=re.now(),t=e-ee;t>1e3&&(ne-=t,ee=e)}function ce(e){X||(Y&&(Y=clearTimeout(Y)),e-te>24?(e<1/0&&(Y=setTimeout(le,e-re.now()-ne)),Z&&(Z=clearInterval(Z))):(Z||(ee=re.now(),Z=setInterval(ue,1e3)),X=1,ie(le)))}function de(e,n,r,i){const s=e.element();s&&s.setAttribute("title",function(e){return null==e?"":t.isArray(e)?he(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((e=>{const r=n[e];return e+": "+(t.isArray(r)?he(r):ge(r))})).join("\n")):e+"";var n}(i))}function he(e){return"["+e.map(ge).join(", ")+"]"}function ge(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function fe(e,o){const c=this;if(o=o||{},n.Dataflow.call(c),o.loader&&c.loader(o.loader),o.logger&&c.logger(o.logger),null!=o.logLevel&&c.logLevel(o.logLevel),o.locale||e.locale){const n=t.extend({},e.locale,o.locale);c.locale(a.locale(n.number,n.time))}c._el=null,c._elBind=null,c._renderType=o.renderer||r.RenderType.Canvas,c._scenegraph=new r.Scenegraph;const d=c._scenegraph.root;c._renderer=null,c._tooltip=o.tooltip||de,c._redraw=!0,c._handler=(new r.CanvasHandler).scene(d),c._globalCursor=!1,c._preventDefault=!1,c._timers=[],c._eventListeners=[],c._resizeListeners=[],c._eventConfig=function(e){const n=t.extend({defaults:{}},e),r=(e,n)=>{n.forEach((n=>{t.isArray(e[n])&&(e[n]=t.toSet(e[n]))}))};return r(n.defaults,["prevent","allow"]),r(n,["view","window","selector"]),n}(e.eventConfig),c.globalCursor(c._eventConfig.globalCursor);const h=function(e,t,r){return s.context(e,n.transforms,i.functionContext,r).parse(t)}(c,e,o.expr);c._runtime=h,c._signals=h.signals,c._bind=(e.bindings||[]).map((e=>({state:null,param:t.extend({},e)}))),h.root&&h.root.set(d),d.source=h.data.root.input,c.pulse(h.data.root.input,c.changeset().insert(d.items)),c._width=c.width(),c._height=c.height(),c._viewWidth=F(c,c._width),c._viewHeight=N(c,c._height),c._origin=[0,0],c._resize=0,c._autosize=1,function(e){var t=e._signals,n=t.width,r=t.height,i=t.padding;function s(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(t=>{e._width=t.size,e._viewWidth=F(e,t.size),s()}),{size:n}),e._resizeHeight=e.add(null,(t=>{e._height=t.size,e._viewHeight=N(e,t.size),s()}),{size:r});const a=e.add(null,s,{pad:i});e._resizeWidth.rank=n.rank+1,e._resizeHeight.rank=r.rank+1,a.rank=i.rank+1}(c),function(e){e.add(null,(t=>(e._background=t.bg,e._resize=1,t.bg)),{bg:e._signals.background})}(c),function(e){const n=e._signals.cursor||(e._signals.cursor=e.add({user:l,item:null}));e.on(e.events("view","mousemove"),n,((e,r)=>{const i=n.value,s=i?t.isString(i)?i:i.user:l,a=r.item&&r.item.cursor||null;return i&&s===i.user&&a==i.item?i:{user:s,item:a}})),e.add(null,(function(n){let r=n.cursor,i=this.value;return t.isString(r)||(i=r.item,r=r.user),u(e,r&&r!==l?r:i||r),i}),{cursor:n})}(c),c.description(e.description),o.hover&&c.hover(),o.container&&c.initialize(o.container,o.bind)}function pe(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function ve(e,t){const n=(e._targets||[]).filter((e=>e._update&&e._update.handler===t));return n.length?n[0]:null}function _e(e,t,n,r){let i=ve(n,r);return i||(i=q(e,(()=>r(t,n.value))),i.handler=r,e.on(n,null,i)),e}function me(e,t,n){const r=ve(t,n);return r&&t._targets.remove(r),e}oe.prototype={constructor:oe,restart:function(e,t,n){if("function"!=typeof e)throw new TypeError("callback is not a function");n=(null==n?se():+n)+(null==t?0:+t),this._next||Q===this||(Q?Q._next=this:K=this,Q=this),this._call=e,this._time=n,ce()},stop:function(){this._call&&(this._call=null,this._time=1/0,ce())}},t.inherits(fe,n.Dataflow,{async evaluate(e,t,r){if(await n.Dataflow.prototype.evaluate.call(this,e,t),this._redraw||this._resize)try{this._renderer&&(this._resize&&(this._resize=0,s=f(i=this),a=h(i),o=g(i),i._renderer.background(i.background()),i._renderer.resize(a,o,s),i._handler.origin(s),i._resizeListeners.forEach((e=>{try{e(a,o)}catch(e){i.error(e)}}))),await this._renderer.renderAsync(this._scenegraph.root)),this._redraw=!1}catch(e){this.error(e)}var i,s,a,o;return r&&n.asyncCallback(this,r),this},dirty(e){this._redraw=!0,this._renderer&&this._renderer.dirty(e)},description(e){if(arguments.length){const t=null!=e?e+"":null;return t!==this._desc&&o(this._el,this._desc=t),this}return this._desc},container(){return this._el},scenegraph(){return this._scenegraph},origin(){return this._origin.slice()},signal(e,t,n){const r=pe(this,e);return 1===arguments.length?r.value:this.update(r,t,n)},width(e){return arguments.length?this.signal("width",e):this.signal("width")},height(e){return arguments.length?this.signal("height",e):this.signal("height")},padding(e){return arguments.length?this.signal("padding",W(e)):W(this.signal("padding"))},autosize(e){return arguments.length?this.signal("autosize",e):this.signal("autosize")},background(e){return arguments.length?this.signal("background",e):this.signal("background")},renderer(e){return arguments.length?(r.renderModule(e)||t.error("Unrecognized renderer type: "+e),e!==this._renderType&&(this._renderType=e,this._resetRenderer()),this):this._renderType},tooltip(e){return arguments.length?(e!==this._tooltip&&(this._tooltip=e,this._resetRenderer()),this):this._tooltip},loader(e){return arguments.length?(e!==this._loader&&(n.Dataflow.prototype.loader.call(this,e),this._resetRenderer()),this):this._loader},resize(){return this._autosize=1,this.touch(pe(this,"autosize"))},_resetRenderer(){this._renderer&&(this._renderer=null,this.initialize(this._el,this._elBind))},_resizeView:function(e,t,n,r,i,s){this.runAfter((a=>{let o=0;a._autosize=0,a.width()!==n&&(o=1,a.signal(P,n,I),a._resizeWidth.skip(!0)),a.height()!==r&&(o=1,a.signal(B,r,I),a._resizeHeight.skip(!0)),a._viewWidth!==e&&(a._resize=1,a._viewWidth=e),a._viewHeight!==t&&(a._resize=1,a._viewHeight=t),a._origin[0]===i[0]&&a._origin[1]===i[1]||(a._resize=1,a._origin=i),o&&a.run("enter"),s&&a.runAfter((e=>e.resize()))}),!1,1)},addEventListener(e,t,n){let r=t;return n&&!1===n.trap||(r=q(this,t),r.raw=t),this._handler.on(e,r),this},removeEventListener(e,t){for(var n,r,i=this._handler.handlers(e),s=i.length;--s>=0;)if(r=i[s].type,n=i[s].handler,e===r&&(t===n||t===n.raw)){this._handler.off(r,n);break}return this},addResizeListener(e){const t=this._resizeListeners;return t.indexOf(e)<0&&t.push(e),this},removeResizeListener(e){var t=this._resizeListeners,n=t.indexOf(e);return n>=0&&t.splice(n,1),this},addSignalListener(e,t){return _e(this,e,pe(this,e),t)},removeSignalListener(e,t){return me(this,pe(this,e),t)},addDataListener(e,t){return _e(this,e,c(this,e).values,t)},removeDataListener(e,t){return me(this,c(this,e).values,t)},globalCursor(e){if(arguments.length){if(this._globalCursor!==!!e){const t=u(this,null);this._globalCursor=!!e,t&&u(this,t)}return this}return this._globalCursor},preventDefault(e){return arguments.length?(this._preventDefault=e,this):this._preventDefault},timer:function(e,t){this._timers.push(function(e,t,n){var r=new oe,i=t;return null==t?(r.restart(e,t,n),r):(r._restart=r.restart,r.restart=function(e,t,n){t=+t,n=null==n?se():+n,r._restart((function s(a){a+=i,r._restart(s,i+=t,n),e(a)}),t,n)},r.restart(e,t,n),r)}((function(t){e({timestamp:Date.now(),elapsed:t})}),t))},events:function(e,t,r){var i,s=this,a=new n.EventStream(r),o=function(n,r){s.runAsync(null,(()=>{e===v&&function(e,t){var n=e._eventConfig.defaults,r=n.prevent,i=n.allow;return!1!==r&&!0!==i&&(!0===r||!1===i||(r?r[t]:i?!i[t]:e.preventDefault()))}(s,t)&&n.preventDefault(),a.receive(p(s,n,r))}))};if("timer"===e)w(s,"timer",t)&&s.timer(o,t);else if(e===v)w(s,"view",t)&&s.addEventListener(t,o,_);else if("window"===e?w(s,"window",t)&&"undefined"!=typeof window&&(i=[window]):"undefined"!=typeof document&&w(s,"selector",t)&&(i=document.querySelectorAll(e)),i){for(var l=0,u=i.length;l<u;++l)i[l].addEventListener(t,o);m(s,i,t,o)}else s.warn("Can not resolve event source: "+e);return a},finalize:function(){var e,t,n,r=this._tooltip,i=this._timers,s=this._eventListeners;for(e=i.length;--e>=0;)i[e].stop();for(e=s.length;--e>=0;)for(t=(n=s[e]).sources.length;--t>=0;)n.sources[t].removeEventListener(n.type,n.handler);return r&&r.call(this,this._handler,null,null,null),this},hover:function(e,t){return t=[t||"update",(e=[e||"hover"])[0]],this.on(this.events("view","mouseover",y),b,z(e)),this.on(this.events("view","mouseout",y),b,z(t)),this},data:function(e,r){return arguments.length<2?c(this,e).values.value:d.call(this,e,n.changeset().remove(t.truthy).insert(r))},change:d,insert:function(e,t){return d.call(this,e,n.changeset().insert(t))},remove:function(e,t){return d.call(this,e,n.changeset().remove(t))},scale:function(e){var n=this._runtime.scales;return t.hasOwnProperty(n,e)||t.error("Unrecognized scale or projection: "+e),n[e].value},initialize:function(e,n){const i=this,s=i._renderType,a=i._eventConfig.bind,l=r.renderModule(s);e=i._el=e?H(i,e):null,function(e){const t=e.container();t&&(t.setAttribute("role","graphics-document"),t.setAttribute("aria-roleDescription","visualization"),o(t,e.description()))}(i),l||i.error("Unrecognized renderer type: "+s);const u=l.handler||r.CanvasHandler,c=e?l.renderer:l.headless;return i._renderer=c?j(i,i._renderer,e,c):null,i._handler=function(e,t,n,r){const i=new r(e.loader(),q(e,e.tooltip())).scene(e.scenegraph().root).initialize(n,f(e),e);return t&&t.handlers().forEach((e=>{i.on(e.type,e.handler)})),i}(i,i._handler,e,u),i._redraw=!0,e&&"none"!==a&&(n=n?i._elBind=H(i,n,!0):e.appendChild(k("form",{class:"vega-bindings"})),i._bind.forEach((e=>{e.param.element&&"container"!==a&&(e.element=H(i,e.param.element,!!e.param.input))})),i._bind.forEach((e=>{!function(e,n,r){if(!n)return;const i=r.param;let s=r.state;s||(s=r.state={elements:null,active:!1,set:null,update:t=>{t!=e.signal(i.signal)&&e.runAsync(null,(()=>{s.source=!0,e.signal(i.signal,t)}))}},i.debounce&&(s.update=t.debounce(i.debounce,s.update))),(null==i.input&&i.element?A:E)(s,n,i,e),s.active||(e.on(e._signals[i.signal],null,(()=>{s.source?s.source=!1:s.set(e.signal(i.signal))})),s.active=!0)}(i,e.element||n,e)}))),i},toImageURL:async function(e,n){e!==r.RenderType.Canvas&&e!==r.RenderType.SVG&&e!==r.RenderType.PNG&&t.error("Unrecognized image type: "+e);const i=await V(this,e,n);return e===r.RenderType.SVG?function(e,t){const n=new Blob([e],{type:t});return window.URL.createObjectURL(n)}(i.svg(),"image/svg+xml"):i.canvas().toDataURL("image/png")},toCanvas:async function(e,t){return(await V(this,r.RenderType.Canvas,e,t)).canvas()},toSVG:async function(e){return(await V(this,r.RenderType.SVG,e)).svg()},getState:function(e){return this._runtime.getState(e||{data:$,signals:J,recurse:!0})},setState:function(e){return this.runAsync(null,(t=>{t._trigger=!1,t._runtime.setState(e)}),(e=>{e._trigger=!0})),this}}),e.View=fe,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=vega-view.min.js.map

build/vega-view.module.js

@@ -1,2 +0,2 @@
-import { isString, hasOwnProperty, error, truthy, constant, extend, isArray, toSet, isObject, debounce, isDate, inherits, stringValue } from 'vega-util';
+import { isString, hasOwnProperty, error, truthy, constant, extend, isArray, toSet, array, isObject, debounce, isDate, inherits, stringValue } from 'vega-util';
 import { changeset, isChangeSet, EventStream, transforms, Dataflow, asyncCallback } from 'vega-dataflow';
@@ -252,2 +252,9 @@ import { point, renderModule, CanvasHandler, RenderType, Scenegraph } from 'vega-scenegraph';
 }
+function trackEventListener(view, sources, type, handler) {
+  view._eventListeners.push({
+    type: type,
+    sources: array(sources),
+    handler: handler
+  });
+}
 
@@ -265,3 +272,3 @@ function prevent(view, type) {
   if (rule === false || isObject(rule) && !rule[type]) {
-    view.warn("Blocked ".concat(key, " ").concat(type, " event listener."));
+    view.warn(`Blocked ${key} ${type} event listener.`);
     return false;
@@ -322,7 +329,3 @@ }
 
-      view._eventListeners.push({
-        type: type,
-        sources: sources,
-        handler: send
-      });
+      trackEventListener(view, sources, type, send);
     }
@@ -433,3 +436,3 @@ }
       update: value => {
-        if (value !== view.signal(param.signal)) {
+        if (value != view.signal(param.signal)) {
           view.runAsync(null, () => {
@@ -448,3 +451,4 @@ bind.source = true;
 
-  generate(bind, el, param, view.signal(param.signal));
+  const create = param.input == null && param.element ? target : generate;
+  create(bind, el, param, view);
 
@@ -461,6 +465,35 @@ if (!bind.active) {
 /**
+ * Bind the signal to an external EventTarget.
+ */
+
+function target(bind, node, param, view) {
+  const type = param.event || 'input';
+
+  const handler = () => bind.update(node.value); // initialize signal value to external input value
+
+
+  view.signal(param.signal, node.value); // listen for changes on the element
+
+  node.addEventListener(type, handler); // register with view, so we can remove it upon finalization
+
+  trackEventListener(view, node, type, handler); // propagate change to element
+
+  bind.set = value => {
+    node.value = value;
+    node.dispatchEvent(event(type));
+  };
+}
+
+function event(type) {
+  return typeof Event !== 'undefined' ? new Event(type) : {
+    type
+  };
+}
+/**
  * Generate an HTML input form element and bind it to a signal.
  */
 
-function generate(bind, el, param, value) {
+
+function generate(bind, el, param, view) {
+  const value = view.signal(param.signal);
   const div = element('div', {
@@ -693,3 +726,3 @@ 'class': BindClass
   if (el && config !== 'none') {
-    elBind = elBind ? view._elBind = lookup(view, elBind) : el.appendChild(element('form', {
+    elBind = elBind ? view._elBind = lookup(view, elBind, true) : el.appendChild(element('form', {
       'class': 'vega-bindings'
@@ -700,3 +733,3 @@ }));
       if (_.param.element && config !== 'container') {
-        _.element = lookup(view, _.param.element);
+        _.element = lookup(view, _.param.element, !!_.param.input);
       }
@@ -713,3 +746,3 @@ });
 
-function lookup(view, el) {
+function lookup(view, el, clear) {
   if (typeof el === 'string') {
@@ -729,3 +762,3 @@ if (typeof document !== 'undefined') {
 
-  if (el) {
+  if (el && clear) {
     try {
@@ -732,0 +765,0 @@ el.innerHTML = '';

package.json

 {
   "name": "vega-view",
-  "version": "5.9.2",
+  "version": "5.10.0",
   "description": "View component and transforms for Vega visualizations.",
@@ -30,6 +30,6 @@ "keywords": [
     "vega-runtime": "^6.1.3",
-    "vega-scenegraph": "^4.9.2",
-    "vega-util": "^1.15.2"
+    "vega-scenegraph": "^4.9.4",
+    "vega-util": "^1.16.1"
   },
-  "gitHead": "7b160b907f6632c75fb3750eb34828ea5b32da3e"
+  "gitHead": "f262105e75449760b0f35fda70e6b576a31d68a4"
 }

src/bind.js

 import element from './element';
+import {trackEventListener} from './events';
 import {debounce} from 'vega-util';
@@ -34,3 +35,3 @@ import {tickStep} from 'd3-array';
       update: value => {
-        if (value !== view.signal(param.signal)) {
+        if (value != view.signal(param.signal)) {
           view.runAsync(null, () => {
@@ -48,3 +49,4 @@ bind.source = true;
 
-  generate(bind, el, param, view.signal(param.signal));
+  const create = param.input == null && param.element ? target : generate;
+  create(bind, el, param, view);
 
@@ -64,5 +66,33 @@ if (!bind.active) {
 /**
+ * Bind the signal to an external EventTarget.
+ */
+function target(bind, node, param, view) {
+  const type = param.event || 'input';
+  const handler = () => bind.update(node.value);
+
+  // initialize signal value to external input value
+  view.signal(param.signal, node.value);
+
+  // listen for changes on the element
+  node.addEventListener(type, handler);
+
+  // register with view, so we can remove it upon finalization
+  trackEventListener(view, node, type, handler);
+
+  // propagate change to element
+  bind.set = value => {
+    node.value = value;
+    node.dispatchEvent(event(type));
+  };
+}
+
+function event(type) {
+  return typeof Event !== 'undefined' ? new Event(type) : { type };
+}
+
+/**
  * Generate an HTML input form element and bind it to a signal.
  */
-function generate(bind, el, param, value) {
+function generate(bind, el, param, view) {
+  const value = view.signal(param.signal);
   const div = element('div', {'class': BindClass});
@@ -69,0 +99,0 @@

src/events.js

 import eventExtend from './events-extend';
 import {EventStream} from 'vega-dataflow';
-import {extend, isArray, isObject, toSet} from 'vega-util';
+import {array, extend, isArray, isObject, toSet} from 'vega-util';
 
@@ -30,2 +30,10 @@ const VIEW = 'view',
 
+export function trackEventListener(view, sources, type, handler) {
+  view._eventListeners.push({
+    type: type,
+    sources: array(sources),
+    handler: handler
+  });
+}
+
 function prevent(view, type) {
@@ -104,8 +112,3 @@ var def = view._eventConfig.defaults,
       }
-
-      view._eventListeners.push({
-        type:    type,
-        sources: sources,
-        handler: send
-      });
+      trackEventListener(view, sources, type, send);
     }
@@ -112,0 +115,0 @@ }

src/initialize.js

@@ -33,3 +33,3 @@ import {initializeAria} from './aria';
   if (el && config !== 'none') {
-    elBind = elBind ? (view._elBind = lookup(view, elBind))
+    elBind = elBind ? (view._elBind = lookup(view, elBind, true))
       : el.appendChild(element('form', {'class': 'vega-bindings'}));
@@ -39,3 +39,3 @@
       if (_.param.element && config !== 'container') {
-        _.element = lookup(view, _.param.element);
+        _.element = lookup(view, _.param.element, !!_.param.input);
       }
@@ -52,3 +52,3 @@ });
 
-function lookup(view, el) {
+function lookup(view, el, clear) {
   if (typeof el === 'string') {
@@ -66,3 +66,3 @@ if (typeof document !== 'undefined') {
   }
-  if (el) {
+  if (el && clear) {
     try {
@@ -69,0 +69,0 @@ el.innerHTML = '';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212251

increased by2.2%

Lines of code

3614

increased by2.15%

Dependency changes

• Updatedvega-scenegraph@^4.9.4

• Updatedvega-util@^1.16.1