vega-view - npm Package Compare versions

Comparing version 5.11.1 to 5.12.0

build/vega-view.js

@@ -41,4 +41,4 @@ (function (global, factory) {
 
-    // evaluate cursor on each mousemove event
-    view.on(view.events('view', 'mousemove'), cursor, (_, event) => {
+    // evaluate cursor on each pointermove event
+    view.on(view.events('view', 'pointermove'), cursor, (_, event) => {
       const value = cursor.value,
@@ -319,7 +319,7 @@ user = value ? vegaUtil.isString(value) ? value : value.user : Default,
 
-    // invoke hover set upon mouseover
-    this.on(this.events('view', 'mouseover', itemFilter), markTarget, invoke(hoverSet));
+    // invoke hover set upon pointerover
+    this.on(this.events('view', 'pointerover', itemFilter), markTarget, invoke(hoverSet));
 
-    // invoke leave set upon mouseout
-    this.on(this.events('view', 'mouseout', itemFilter), markTarget, invoke(leaveSet));
+    // invoke leave set upon pointerout
+    this.on(this.events('view', 'pointerout', itemFilter), markTarget, invoke(leaveSet));
     return this;
@@ -942,3 +942,3 @@ }
   function dataTest(name, data) {
-    return data.modified && vegaUtil.isArray(data.input.value) && name.indexOf('_:vega:_');
+    return data.modified && vegaUtil.isArray(data.input.value) && !name.startsWith('_:vega:_');
   }
@@ -1116,2 +1116,24 @@ function signalTest(name, op) {
 
+  function watchPixelRatio () {
+    // based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
+    if (this.renderer() === 'canvas' && this._renderer._canvas) {
+      let remove = null;
+      const updatePixelRatio = () => {
+        if (remove != null) {
+          remove();
+        }
+        const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        media.addEventListener('change', updatePixelRatio);
+        remove = () => {
+          media.removeEventListener('change', updatePixelRatio);
+        };
+        this._renderer._canvas.getContext('2d').pixelRatio = window.devicePixelRatio || 1;
+        this._redraw = true;
+        this._resize = 1;
+        this.resize().runAsync();
+      };
+      updatePixelRatio();
+    }
+  }
+
   /**
@@ -1196,2 +1218,3 @@ * Create a new View instance from a Vega dataflow runtime specification.
     if (options.container) view.initialize(options.container, options.bind);
+    if (options.watchPixelRatio) view._watchPixelRatio();
   }
@@ -1358,3 +1381,3 @@ function lookupSignal(view, name) {
       const l = this._resizeListeners;
-      if (l.indexOf(handler) < 0) {
+      if (!l.includes(handler)) {
         // add handler if it isn't already registered
@@ -1427,3 +1450,5 @@ // note: error trapping handled elsewhere, so
     getState,
-    setState
+    setState,
+    // RE-RENDER ON ZOOM
+    _watchPixelRatio: watchPixelRatio
   });
@@ -1430,0 +1455,0 @@

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",_="timer",m="window",w={trap:!1};function y(e,n,r,i){e._eventListeners.push({type:r,sources:t.array(n),handler:i})}function b(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 z(e){return e.item}function k(e){return e.item.mark.source}function x(e){return function(t,n){return n.vega.view().changeset().encode(n.item,e)}}function C(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}const L=Math.sqrt(50),A=Math.sqrt(10),E=Math.sqrt(2);function M(e,t,n){const r=(t-e)/Math.max(0,n),i=Math.floor(Math.log10(r)),s=r/Math.pow(10,i),a=s>=L?10:s>=A?5:s>=E?2:1;let o,l,u;return i<0?(u=Math.pow(10,-i)/a,o=Math.round(e*u),l=Math.round(t*u),o/u<e&&++o,l/u>t&&--l,u=-u):(u=Math.pow(10,i)*a,o=Math.round(e/u),l=Math.round(t/u),o*u<e&&++o,l*u>t&&--l),l<o&&.5<=n&&n<2?M(e,t,2*n):[o,l,u]}function S(e,t,n){return M(e=+e,t=+t,n=+n)[2]}const T="vega-bind",D="vega-bind-name",R="vega-bind-radio";function q(e,t,n,r){const i=n.event||"input",s=()=>e.update(t.value);r.signal(n.signal,t.value),t.addEventListener(i,s),y(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 O(e,t,n,r){const i=r.signal(n.signal),s=C("div",{class:T}),a="radio"===n.input?s:s.appendChild(C("label"));a.appendChild(C("span",{class:D},n.name||n.signal)),t.appendChild(s);let o=j;switch(n.input){case"checkbox":o=U;break;case"select":o=H;break;case"radio":o=W;break;case"range":o=V}o(e,a,n,i)}function j(e,t,n,r){const i=C("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 U(e,t,n,r){const i={type:"checkbox",name:n.signal};r&&(i.checked=!0);const s=C("input",i);t.appendChild(s),s.addEventListener("change",(()=>e.update(s.checked))),e.elements=[s],e.set=e=>s.checked=!!e||null}function H(e,t,n,r){const i=C("select",{name:n.signal}),s=n.labels||[];n.options.forEach(((e,t)=>{const n={value:e};B(e,r)&&(n.selected=!0),i.appendChild(C("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(B(n.options[t],e))return void(i.selectedIndex=t)}}function W(e,t,n,r){const i=C("span",{class:R}),s=n.labels||[];t.appendChild(i),e.elements=n.options.map(((t,a)=>{const o={type:"radio",name:n.signal,value:t};B(t,r)&&(o.checked=!0);const l=C("input",o);l.addEventListener("change",(()=>e.update(t)));const u=C("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)B(n[e].value,t)&&(n[e].checked=!0)}}function V(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||function(e,t,n){n=+n;const r=(t=+t)<(e=+e),i=r?S(t,e,n):S(e,t,n);return(r?-1:1)*(i<0?1/-i:i)}(s,i,100),o=C("input",{type:"range",name:n.signal,min:s,max:i,step:a});o.value=r;const l=C("span",{},+r);t.appendChild(o),t.appendChild(l);const u=()=>{l.textContent=o.value,e.update(+o.value)};o.addEventListener("input",u),o.addEventListener("change",u),e.elements=[o],e.set=e=>{o.value=e,l.textContent=e}}function B(e,t){return e===t||e+""==t+""}function G(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 I(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function P(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.textContent=""}catch(n){t=null,e.error(n)}return t}const F=e=>+e||0,$=e=>({top:e,bottom:e,left:e,right:e});function N(e){return t.isObject(e)?{top:F(e.top),bottom:F(e.bottom),left:F(e.left),right:F(e.right)}:$(F(e))}async function J(e,n,i,s){const a=r.renderModule(n),o=a&&a.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),G(e,null,null,o,i,s).renderAsync(e._scenegraph.root)}var K="width",Q="height",X="padding",Y={skip:!0};function Z(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===X?r.left+r.right:0)}function ee(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===X?r.top+r.bottom:0)}function te(e,n){return n.modified&&t.isArray(n.input.value)&&e.indexOf("_:vega:_")}function ne(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}var re,ie,se=0,ae=0,oe=0,le=1e3,ue=0,ce=0,de=0,he="object"==typeof performance&&performance.now?performance:Date,ge="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function fe(){return ce||(ge(pe),ce=he.now()+de)}function pe(){ce=0}function ve(){this._call=this._time=this._next=null}function _e(){ce=(ue=he.now())+de,se=ae=0;try{!function(){fe(),++se;for(var e,t=re;t;)(e=ce-t._time)>=0&&t._call.call(void 0,e),t=t._next;--se}()}finally{se=0,function(){var e,t,n=re,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:re=t);ie=e,we(r)}(),ce=0}}function me(){var e=he.now(),t=e-ue;t>le&&(de-=t,ue=e)}function we(e){se||(ae&&(ae=clearTimeout(ae)),e-ce>24?(e<1/0&&(ae=setTimeout(_e,e-he.now()-de)),oe&&(oe=clearInterval(oe))):(oe||(ue=he.now(),oe=setInterval(me,le)),se=1,ge(_e)))}function ye(e,n,r,i){const s=e.element();s&&s.setAttribute("title",function(e){return null==e?"":t.isArray(e)?be(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((e=>{const r=n[e];return e+": "+(t.isArray(r)?be(r):ze(r))})).join("\n")):e+"";var n}(i))}function be(e){return"["+e.map(ze).join(", ")+"]"}function ze(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function ke(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||ye,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=Z(c,c._width),c._viewHeight=ee(c,c._height),c._origin=[0,0],c._resize=0,c._autosize=1,function(e){var t=e._signals,n=t[K],r=t[Q],i=t[X];function s(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(t=>{e._width=t.size,e._viewWidth=Z(e,t.size),s()}),{size:n}),e._resizeHeight=e.add(null,(t=>{e._height=t.size,e._viewHeight=ee(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 xe(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function Ce(e,t){const n=(e._targets||[]).filter((e=>e._update&&e._update.handler===t));return n.length?n[0]:null}function Le(e,t,n,r){let i=Ce(n,r);return i||(i=I(e,(()=>r(t,n.value))),i.handler=r,e.on(n,null,i)),e}function Ae(e,t,n){const r=Ce(t,n);return r&&t._targets.remove(r),e}ve.prototype={constructor:ve,restart:function(e,t,n){if("function"!=typeof e)throw new TypeError("callback is not a function");n=(null==n?fe():+n)+(null==t?0:+t),this._next||ie===this||(ie?ie._next=this:re=this,ie=this),this._call=e,this._time=n,we()},stop:function(){this._call&&(this._call=null,this._time=1/0,we())}},t.inherits(ke,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=xe(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",N(e)):N(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(xe(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(K,n,Y),a._resizeWidth.skip(!0)),a.height()!==r&&(o=1,a.signal(Q,r,Y),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=I(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 Le(this,e,xe(this,e),t)},removeSignalListener(e,t){return Ae(this,xe(this,e),t)},addDataListener(e,t){return Le(this,e,c(this,e).values,t)},removeDataListener(e,t){return Ae(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 ve,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?fe():+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(e===_)b(s,"timer",t)&&s.timer(o,t);else if(e===v)b(s,"view",t)&&s.addEventListener(t,o,w);else if(e===m?b(s,"window",t)&&"undefined"!=typeof window&&(i=[window]):"undefined"!=typeof document&&b(s,"selector",t)&&(i=Array.from(document.querySelectorAll(e))),i){for(var l=0,u=i.length;l<u;++l)i[l].addEventListener(t,o);y(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",z),k,x(e)),this.on(this.events("view","mouseout",z),k,x(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?P(i,e,!0):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?G(i,i._renderer,e,c):null,i._handler=function(e,t,n,r){const i=new r(e.loader(),I(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=P(i,n,!0):e.appendChild(C("form",{class:"vega-bindings"})),i._bind.forEach((e=>{e.param.element&&"container"!==a&&(e.element=P(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?q:O)(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 J(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 J(this,r.RenderType.Canvas,e,t)).canvas()},toSVG:async function(e){return(await J(this,r.RenderType.SVG,e)).svg()},getState:function(e){return this._runtime.getState(e||{data:te,signals:ne,recurse:!0})},setState:function(e){return this.runAsync(null,(t=>{t._trigger=!1,t._runtime.setState(e)}),(e=>{e._trigger=!0})),this}}),e.View=ke}));
+!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,a,s){"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 p(e){var t=e.padding(),n=e._origin;return[t.left+n[0],t.top+n[1]]}function f(e,n,i){var a,s,o,l=e._renderer,u=l&&l.canvas();return u&&(o=p(e),s=n.changedTouches?n.changedTouches[0]:n,(a=r.point(s,u))[0]-=o[0],a[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 a(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 s(e){if(!e)return r;t.isString(e)&&(e=a(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:a,xy:s,x:e=>s(e)[0],y:e=>s(e)[1]}}(e,i,a),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 x(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}const k=Math.sqrt(50),C=Math.sqrt(10),L=Math.sqrt(2);function A(e,t,n){const r=(t-e)/Math.max(0,n),i=Math.floor(Math.log10(r)),a=r/Math.pow(10,i),s=a>=k?10:a>=C?5:a>=L?2:1;let o,l,u;return i<0?(u=Math.pow(10,-i)/s,o=Math.round(e*u),l=Math.round(t*u),o/u<e&&++o,l/u>t&&--l,u=-u):(u=Math.pow(10,i)*s,o=Math.round(e/u),l=Math.round(t/u),o*u<e&&++o,l*u>t&&--l),l<o&&.5<=n&&n<2?A(e,t,2*n):[o,l,u]}function E(e,t,n){return A(e=+e,t=+t,n=+n)[2]}const R="vega-bind",M="vega-bind-name",S="vega-bind-radio";function T(e,t,n,r){const i=n.event||"input",a=()=>e.update(t.value);r.signal(n.signal,t.value),t.addEventListener(i,a),m(r,t,i,a),e.set=e=>{t.value=e,t.dispatchEvent(function(e){return"undefined"!=typeof Event?new Event(e):{type:e}}(i))}}function D(e,t,n,r){const i=r.signal(n.signal),a=x("div",{class:R}),s="radio"===n.input?a:a.appendChild(x("label"));s.appendChild(x("span",{class:M},n.name||n.signal)),t.appendChild(a);let o=q;switch(n.input){case"checkbox":o=j;break;case"select":o=O;break;case"radio":o=U;break;case"range":o=H}o(e,s,n,i)}function q(e,t,n,r){const i=x("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 j(e,t,n,r){const i={type:"checkbox",name:n.signal};r&&(i.checked=!0);const a=x("input",i);t.appendChild(a),a.addEventListener("change",(()=>e.update(a.checked))),e.elements=[a],e.set=e=>a.checked=!!e||null}function O(e,t,n,r){const i=x("select",{name:n.signal}),a=n.labels||[];n.options.forEach(((e,t)=>{const n={value:e};P(e,r)&&(n.selected=!0),i.appendChild(x("option",n,(a[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(P(n.options[t],e))return void(i.selectedIndex=t)}}function U(e,t,n,r){const i=x("span",{class:S}),a=n.labels||[];t.appendChild(i),e.elements=n.options.map(((t,s)=>{const o={type:"radio",name:n.signal,value:t};P(t,r)&&(o.checked=!0);const l=x("input",o);l.addEventListener("change",(()=>e.update(t)));const u=x("label",{},(a[s]||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)P(n[e].value,t)&&(n[e].checked=!0)}}function H(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,a=n.min||Math.min(0,i,+r)||0,s=n.step||function(e,t,n){n=+n;const r=(t=+t)<(e=+e),i=r?E(t,e,n):E(e,t,n);return(r?-1:1)*(i<0?1/-i:i)}(a,i,100),o=x("input",{type:"range",name:n.signal,min:a,max:i,step:s});o.value=r;const l=x("span",{},+r);t.appendChild(o),t.appendChild(l);const u=()=>{l.textContent=o.value,e.update(+o.value)};o.addEventListener("input",u),o.addEventListener("change",u),e.elements=[o],e.set=e=>{o.value=e,l.textContent=e}}function P(e,t){return e===t||e+""==t+""}function W(e,t,n,r,i,a){return(t=t||new r(e.loader())).initialize(n,h(e),g(e),p(e),i,a).background(e.background())}function V(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function B(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.textContent=""}catch(n){t=null,e.error(n)}return t}const G=e=>+e||0;function I(e){return t.isObject(e)?{top:G(e.top),bottom:G(e.bottom),left:G(e.left),right:G(e.right)}:(e=>({top:e,bottom:e,left:e,right:e}))(G(e))}async function $(e,n,i,a){const s=r.renderModule(n),o=s&&s.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),W(e,null,null,o,i,a).renderAsync(e._scenegraph.root)}var F="width",N="height",J="padding",K={skip:!0};function Q(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===J?r.left+r.right:0)}function X(e,t){var n=e.autosize(),r=e.padding();return t-(n&&n.contains===J?r.top+r.bottom:0)}function Y(e,n){return n.modified&&t.isArray(n.input.value)&&!e.startsWith("_:vega:_")}function Z(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}var ee,te,ne=0,re=0,ie=0,ae=1e3,se=0,oe=0,le=0,ue="object"==typeof performance&&performance.now?performance:Date,ce="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function de(){return oe||(ce(he),oe=ue.now()+le)}function he(){oe=0}function ge(){this._call=this._time=this._next=null}function pe(){oe=(se=ue.now())+le,ne=re=0;try{!function(){de(),++ne;for(var e,t=ee;t;)(e=oe-t._time)>=0&&t._call.call(void 0,e),t=t._next;--ne}()}finally{ne=0,function(){var e,t,n=ee,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:ee=t);te=e,ve(r)}(),oe=0}}function fe(){var e=ue.now(),t=e-se;t>ae&&(le-=t,se=e)}function ve(e){ne||(re&&(re=clearTimeout(re)),e-oe>24?(e<1/0&&(re=setTimeout(pe,e-ue.now()-le)),ie&&(ie=clearInterval(ie))):(ie||(se=ue.now(),ie=setInterval(fe,ae)),ne=1,ce(pe)))}function _e(e,n,r,i){const a=e.element();a&&a.setAttribute("title",function(e){return null==e?"":t.isArray(e)?me(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((e=>{const r=n[e];return e+": "+(t.isArray(r)?me(r):we(r))})).join("\n")):e+"";var n}(i))}function me(e){return"["+e.map(we).join(", ")+"]"}function we(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function ye(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(s.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||_e,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 a.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=Q(c,c._width),c._viewHeight=X(c,c._height),c._origin=[0,0],c._resize=0,c._autosize=1,function(e){var t=e._signals,n=t[F],r=t[N],i=t[J];function a(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(t=>{e._width=t.size,e._viewWidth=Q(e,t.size),a()}),{size:n}),e._resizeHeight=e.add(null,(t=>{e._height=t.size,e._viewHeight=X(e,t.size),a()}),{size:r});const s=e.add(null,a,{pad:i});e._resizeWidth.rank=n.rank+1,e._resizeHeight.rank=r.rank+1,s.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","pointermove"),n,((e,r)=>{const i=n.value,a=i?t.isString(i)?i:i.user:l,s=r.item&&r.item.cursor||null;return i&&a===i.user&&s==i.item?i:{user:a,item:s}})),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),o.watchPixelRatio&&c._watchPixelRatio()}function be(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function ze(e,t){const n=(e._targets||[]).filter((e=>e._update&&e._update.handler===t));return n.length?n[0]:null}function xe(e,t,n,r){let i=ze(n,r);return i||(i=V(e,(()=>r(t,n.value))),i.handler=r,e.on(n,null,i)),e}function ke(e,t,n){const r=ze(t,n);return r&&t._targets.remove(r),e}ge.prototype={constructor:ge,restart:function(e,t,n){if("function"!=typeof e)throw new TypeError("callback is not a function");n=(null==n?de():+n)+(null==t?0:+t),this._next||te===this||(te?te._next=this:ee=this,te=this),this._call=e,this._time=n,ve()},stop:function(){this._call&&(this._call=null,this._time=1/0,ve())}},t.inherits(ye,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,a=p(i=this),s=h(i),o=g(i),i._renderer.background(i.background()),i._renderer.resize(s,o,a),i._handler.origin(a),i._resizeListeners.forEach((e=>{try{e(s,o)}catch(e){i.error(e)}}))),await this._renderer.renderAsync(this._scenegraph.root)),this._redraw=!1}catch(e){this.error(e)}var i,a,s,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=be(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",I(e)):I(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(be(this,"autosize"))},_resetRenderer(){this._renderer&&(this._renderer=null,this.initialize(this._el,this._elBind))},_resizeView:function(e,t,n,r,i,a){this.runAfter((s=>{let o=0;s._autosize=0,s.width()!==n&&(o=1,s.signal(F,n,K),s._resizeWidth.skip(!0)),s.height()!==r&&(o=1,s.signal(N,r,K),s._resizeHeight.skip(!0)),s._viewWidth!==e&&(s._resize=1,s._viewWidth=e),s._viewHeight!==t&&(s._resize=1,s._viewHeight=t),s._origin[0]===i[0]&&s._origin[1]===i[1]||(s._resize=1,s._origin=i),o&&s.run("enter"),a&&s.runAfter((e=>e.resize()))}),!1,1)},addEventListener(e,t,n){let r=t;return n&&!1===n.trap||(r=V(this,t),r.raw=t),this._handler.on(e,r),this},removeEventListener(e,t){for(var n,r,i=this._handler.handlers(e),a=i.length;--a>=0;)if(r=i[a].type,n=i[a].handler,e===r&&(t===n||t===n.raw)){this._handler.off(r,n);break}return this},addResizeListener(e){const t=this._resizeListeners;return t.includes(e)||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 xe(this,e,be(this,e),t)},removeSignalListener(e,t){return ke(this,be(this,e),t)},addDataListener(e,t){return xe(this,e,c(this,e).values,t)},removeDataListener(e,t){return ke(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 ge,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?de():+n,r._restart((function a(s){s+=i,r._restart(a,i+=t,n),e(s)}),t,n)},r.restart(e,t,n),r)}((function(t){e({timestamp:Date.now(),elapsed:t})}),t))},events:function(e,t,r){var i,a=this,s=new n.EventStream(r),o=function(n,r){a.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()))}(a,t)&&n.preventDefault(),s.receive(f(a,n,r))}))};if("timer"===e)w(a,"timer",t)&&a.timer(o,t);else if(e===v)w(a,"view",t)&&a.addEventListener(t,o,_);else if("window"===e?w(a,"window",t)&&"undefined"!=typeof window&&(i=[window]):"undefined"!=typeof document&&w(a,"selector",t)&&(i=Array.from(document.querySelectorAll(e))),i){for(var l=0,u=i.length;l<u;++l)i[l].addEventListener(t,o);m(a,i,t,o)}else a.warn("Can not resolve event source: "+e);return s},finalize:function(){var e,t,n,r=this._tooltip,i=this._timers,a=this._eventListeners;for(e=i.length;--e>=0;)i[e].stop();for(e=a.length;--e>=0;)for(t=(n=a[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","pointerover",y),b,z(e)),this.on(this.events("view","pointerout",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,a=i._renderType,s=i._eventConfig.bind,l=r.renderModule(a);e=i._el=e?B(i,e,!0):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: "+a);const u=l.handler||r.CanvasHandler,c=e?l.renderer:l.headless;return i._renderer=c?W(i,i._renderer,e,c):null,i._handler=function(e,t,n,r){const i=new r(e.loader(),V(e,e.tooltip())).scene(e.scenegraph().root).initialize(n,p(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"!==s&&(n=n?i._elBind=B(i,n,!0):e.appendChild(x("form",{class:"vega-bindings"})),i._bind.forEach((e=>{e.param.element&&"container"!==s&&(e.element=B(i,e.param.element,!!e.param.input))})),i._bind.forEach((e=>{!function(e,n,r){if(!n)return;const i=r.param;let a=r.state;a||(a=r.state={elements:null,active:!1,set:null,update:t=>{t!=e.signal(i.signal)&&e.runAsync(null,(()=>{a.source=!0,e.signal(i.signal,t)}))}},i.debounce&&(a.update=t.debounce(i.debounce,a.update))),(null==i.input&&i.element?T:D)(a,n,i,e),a.active||(e.on(e._signals[i.signal],null,(()=>{a.source?a.source=!1:a.set(e.signal(i.signal))})),a.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 $(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 $(this,r.RenderType.Canvas,e,t)).canvas()},toSVG:async function(e){return(await $(this,r.RenderType.SVG,e)).svg()},getState:function(e){return this._runtime.getState(e||{data:Y,signals:Z,recurse:!0})},setState:function(e){return this.runAsync(null,(t=>{t._trigger=!1,t._runtime.setState(e)}),(e=>{e._trigger=!0})),this},_watchPixelRatio:function(){if("canvas"===this.renderer()&&this._renderer._canvas){let e=null;const t=()=>{null!=e&&e();const n=matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);n.addEventListener("change",t),e=()=>{n.removeEventListener("change",t)},this._renderer._canvas.getContext("2d").pixelRatio=window.devicePixelRatio||1,this._redraw=!0,this._resize=1,this.resize().runAsync()};t()}}}),e.View=ye}));
 //# sourceMappingURL=vega-view.min.js.map

build/vega-view.module.js

@@ -44,4 +44,4 @@ import { isString, hasOwnProperty, error, truthy, constant, extend, array, isObject, isArray, toSet, debounce, isDate, inherits, stringValue } from 'vega-util';
 
-  // evaluate cursor on each mousemove event
-  view.on(view.events('view', 'mousemove'), cursor, (_, event) => {
+  // evaluate cursor on each pointermove event
+  view.on(view.events('view', 'pointermove'), cursor, (_, event) => {
     const value = cursor.value,
@@ -322,7 +322,7 @@ user = value ? isString(value) ? value : value.user : Default,
 
-  // invoke hover set upon mouseover
-  this.on(this.events('view', 'mouseover', itemFilter), markTarget, invoke(hoverSet));
+  // invoke hover set upon pointerover
+  this.on(this.events('view', 'pointerover', itemFilter), markTarget, invoke(hoverSet));
 
-  // invoke leave set upon mouseout
-  this.on(this.events('view', 'mouseout', itemFilter), markTarget, invoke(leaveSet));
+  // invoke leave set upon pointerout
+  this.on(this.events('view', 'pointerout', itemFilter), markTarget, invoke(leaveSet));
   return this;
@@ -908,3 +908,3 @@ }
 function dataTest(name, data) {
-  return data.modified && isArray(data.input.value) && name.indexOf('_:vega:_');
+  return data.modified && isArray(data.input.value) && !name.startsWith('_:vega:_');
 }
@@ -961,2 +961,24 @@ function signalTest(name, op) {
 
+function watchPixelRatio () {
+  // based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
+  if (this.renderer() === 'canvas' && this._renderer._canvas) {
+    let remove = null;
+    const updatePixelRatio = () => {
+      if (remove != null) {
+        remove();
+      }
+      const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      media.addEventListener('change', updatePixelRatio);
+      remove = () => {
+        media.removeEventListener('change', updatePixelRatio);
+      };
+      this._renderer._canvas.getContext('2d').pixelRatio = window.devicePixelRatio || 1;
+      this._redraw = true;
+      this._resize = 1;
+      this.resize().runAsync();
+    };
+    updatePixelRatio();
+  }
+}
+
 /**
@@ -1041,2 +1063,3 @@ * Create a new View instance from a Vega dataflow runtime specification.
   if (options.container) view.initialize(options.container, options.bind);
+  if (options.watchPixelRatio) view._watchPixelRatio();
 }
@@ -1203,3 +1226,3 @@ function lookupSignal(view, name) {
     const l = this._resizeListeners;
-    if (l.indexOf(handler) < 0) {
+    if (!l.includes(handler)) {
       // add handler if it isn't already registered
@@ -1272,5 +1295,7 @@ // note: error trapping handled elsewhere, so
   getState,
-  setState
+  setState,
+  // RE-RENDER ON ZOOM
+  _watchPixelRatio: watchPixelRatio
 });
 
 export { View };

package.json

 {
   "name": "vega-view",
-  "version": "5.11.1",
+  "version": "5.12.0",
   "description": "View component and transforms for Vega visualizations.",
@@ -33,3 +33,3 @@ "keywords": [
   },
-  "gitHead": "fb1092f6b931d450f9c210b67ae4752bd3dd461b"
+  "gitHead": "7703dbd9d655f36329046f581de955a0e086ae51"
 }

src/cursor.js

@@ -12,4 +12,4 @@ import {isString} from 'vega-util';
 
-  // evaluate cursor on each mousemove event
-  view.on(view.events('view', 'mousemove'), cursor,
+  // evaluate cursor on each pointermove event
+  view.on(view.events('view', 'pointermove'), cursor,
     (_, event) => {
@@ -16,0 +16,0 @@ const value = cursor.value,

src/hover.js

@@ -22,5 +22,5 @@ function itemFilter(event) {
 
-  // invoke hover set upon mouseover
+  // invoke hover set upon pointerover
   this.on(
-    this.events('view', 'mouseover', itemFilter),
+    this.events('view', 'pointerover', itemFilter),
     markTarget,
@@ -30,5 +30,5 @@ invoke(hoverSet)
 
-  // invoke leave set upon mouseout
+  // invoke leave set upon pointerout
   this.on(
-    this.events('view', 'mouseout', itemFilter),
+    this.events('view', 'pointerout', itemFilter),
     markTarget,
@@ -35,0 +35,0 @@ invoke(leaveSet)

src/state.js

@@ -31,3 +31,3 @@ import {transforms} from 'vega-dataflow';
       && isArray(data.input.value)
-      && name.indexOf('_:vega:_');
+      && !name.startsWith('_:vega:_');
 }
@@ -34,0 +34,0 @@

src/View.js

@@ -21,2 +21,3 @@ import {ariaLabel} from './aria';
 import trap from './trap';
+import watchPixelRatio from './watchPixelRatio';
 
@@ -117,2 +118,4 @@ import {Dataflow, asyncCallback} from 'vega-dataflow';
   if (options.container) view.initialize(options.container, options.bind);
+  
+  if (options.watchPixelRatio) view._watchPixelRatio();
 }
@@ -310,3 +313,3 @@
     const l = this._resizeListeners;
-    if (l.indexOf(handler) < 0) {
+    if (!l.includes(handler)) {
       // add handler if it isn't already registered
@@ -391,3 +394,6 @@ // note: error trapping handled elsewhere, so
   getState,
-  setState
+  setState,
+
+  // RE-RENDER ON ZOOM
+  _watchPixelRatio: watchPixelRatio
 });

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

225806

increased by2.27%

Number of package files

37

increased by2.78%

Lines of code

3925

increased by1.92%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes