vega-scenegraph - npm Package Compare versions

Comparing version 4.11.2 to 4.12.0

package.json

 {
   "name": "vega-scenegraph",
-  "version": "4.11.2",
+  "version": "4.12.0",
   "description": "Vega scenegraph and renderers.",
@@ -29,3 +29,3 @@ "license": "BSD-3-Clause",
   },
-  "gitHead": "7703dbd9d655f36329046f581de955a0e086ae51"
+  "gitHead": "940bd8882fd83eb4ee1f85281356905bf35480aa"
 }

src/CanvasHandler.js

@@ -14,70 +14,25 @@ import Handler from './Handler';
 import {domFind} from './util/dom';
-import {inherits} from 'vega-util';
 
-export default function CanvasHandler(loader, tooltip) {
-  Handler.call(this, loader, tooltip);
-  this._down = null;
-  this._touch = null;
-  this._first = true;
-  this._events = {};
-}
+export default class CanvasHandler extends Handler {
+  constructor(loader, tooltip) {
+    super(loader, tooltip);
+    this._down = null;
+    this._touch = null;
+    this._first = true;
+    this._events = {};
 
-const eventBundle = type => (
-  type === TouchStartEvent ||
-  type === TouchMoveEvent ||
-  type === TouchEndEvent
-)
-? [TouchStartEvent, TouchMoveEvent, TouchEndEvent]
-: [type];
+    // supported events
+    this.events = Events;
+    this.pointermove = move(
+      [PointerMoveEvent, MouseMoveEvent],
+      [PointerOverEvent, MouseOverEvent],
+      [PointerOutEvent, MouseOutEvent]
+    );
 
-// lazily add listeners to the canvas as needed
-function eventListenerCheck(handler, type) {
-  eventBundle(type).forEach(_ => addEventListener(handler, _));
-}
+    this.dragover = move([DragOverEvent], [DragEnterEvent], [DragLeaveEvent]),
 
-function addEventListener(handler, type) {
-  const canvas = handler.canvas();
-  if (canvas && !handler._events[type]) {
-    handler._events[type] = 1;
-    canvas.addEventListener(type, handler[type]
-      ? evt => handler[type](evt)
-      : evt => handler.fire(type, evt)
-    );
+    this.pointerout = inactive([PointerOutEvent, MouseOutEvent]);
+    this.dragleave = inactive([DragLeaveEvent]);
   }
-}
 
-function fireAll(handler, types, event) {
-  types.forEach(type => handler.fire(type, event));
-}
-
-function move(moveEvents, overEvents, outEvents) {
-  return function(evt) {
-    const a = this._active,
-          p = this.pickEvent(evt);
-
-    if (p === a) {
-      // active item and picked item are the same
-      fireAll(this, moveEvents, evt); // fire move
-    } else {
-      // active item and picked item are different
-      if (!a || !a.exit) {
-        // fire out for prior active item
-        // suppress if active item was removed from scene
-        fireAll(this, outEvents, evt);
-      }
-      this._active = p; // set new active item
-      fireAll(this, overEvents, evt); // fire over for new active item
-      fireAll(this, moveEvents, evt); // fire move for new active item
-    }
-  };
-}
-
-function inactive(types) {
-  return function(evt) {
-    fireAll(this, types, evt);
-    this._active = null;
-  };
-}
-
-inherits(CanvasHandler, Handler, {
   initialize(el, origin, obj) {
@@ -93,4 +48,4 @@ this._canvas = el && domFind(el, 'canvas');
 
-    return Handler.prototype.initialize.call(this, el, origin, obj);
-  },
+    return super.initialize(el, origin, obj);
+  }
 
@@ -100,3 +55,3 @@ // return the backing canvas instance
     return this._canvas;
-  },
+  }
 
@@ -106,6 +61,4 @@ // retrieve the current canvas context
     return this._canvas.getContext('2d');
-  },
+  }
 
-  // supported events
-  events: Events,
 
@@ -115,18 +68,8 @@ // to keep old versions of firefox happy
     this.fire(MouseWheelEvent, evt);
-  },
+  }
 
-  pointermove: move(
-    [PointerMoveEvent, MouseMoveEvent],
-    [PointerOverEvent, MouseOverEvent],
-    [PointerOutEvent, MouseOutEvent]
-  ),
-  dragover: move([DragOverEvent], [DragEnterEvent], [DragLeaveEvent]),
-
-  pointerout: inactive([PointerOutEvent, MouseOutEvent]),
-  dragleave: inactive([DragLeaveEvent]),
-
   pointerdown(evt) {
     this._down = this._active;
     this.fire(PointerDownEvent, evt);
-  },
+  }
 
@@ -136,3 +79,3 @@ mousedown(evt) {
     this.fire(MouseDownEvent, evt);
-  },
+  }
 
@@ -144,3 +87,3 @@ click(evt) {
     }
-  },
+  }
 
@@ -156,7 +99,7 @@ touchstart(evt) {
     this.fire(TouchStartEvent, evt, true);
-  },
+  }
 
   touchmove(evt) {
     this.fire(TouchMoveEvent, evt, true);
-  },
+  }
 
@@ -166,3 +109,3 @@ touchend(evt) {
     this._touch = null;
-  },
+  }
 
@@ -190,3 +133,3 @@ // fire an event
     }
-  },
+  }
 
@@ -208,3 +151,3 @@ // add an event handler
     return this;
-  },
+  }
 
@@ -222,3 +165,3 @@ // remove an event handler
     return this;
-  },
+  }
 
@@ -229,3 +172,3 @@ pickEvent(evt) {
     return this.pick(this._scene, p[0], p[1], p[0] - o[0], p[1] - o[1]);
-  },
+  }
 
@@ -240,2 +183,60 @@ // find the scenegraph item at the current pointer position
   }
-});
+
+}
+
+const eventBundle = type => (
+  type === TouchStartEvent ||
+  type === TouchMoveEvent ||
+  type === TouchEndEvent
+)
+? [TouchStartEvent, TouchMoveEvent, TouchEndEvent]
+: [type];
+
+// lazily add listeners to the canvas as needed
+function eventListenerCheck(handler, type) {
+  eventBundle(type).forEach(_ => addEventListener(handler, _));
+}
+
+function addEventListener(handler, type) {
+  const canvas = handler.canvas();
+  if (canvas && !handler._events[type]) {
+    handler._events[type] = 1;
+    canvas.addEventListener(type, handler[type]
+      ? evt => handler[type](evt)
+      : evt => handler.fire(type, evt)
+    );
+  }
+}
+
+function fireAll(handler, types, event) {
+  types.forEach(type => handler.fire(type, event));
+}
+
+function move(moveEvents, overEvents, outEvents) {
+  return function(evt) {
+    const a = this._active,
+          p = this.pickEvent(evt);
+
+    if (p === a) {
+      // active item and picked item are the same
+      fireAll(this, moveEvents, evt); // fire move
+    } else {
+      // active item and picked item are different
+      if (!a || !a.exit) {
+        // fire out for prior active item
+        // suppress if active item was removed from scene
+        fireAll(this, outEvents, evt);
+      }
+      this._active = p; // set new active item
+      fireAll(this, overEvents, evt); // fire over for new active item
+      fireAll(this, moveEvents, evt); // fire move for new active item
+    }
+  };
+}
+
+function inactive(types) {
+  return function(evt) {
+    fireAll(this, types, evt);
+    this._active = null;
+  };
+}

src/CanvasRenderer.js

@@ -9,39 +9,13 @@ import Renderer from './Renderer';
 import {canvas} from 'vega-canvas';
-import {error, inherits} from 'vega-util';
+import {error} from 'vega-util';
 
-export default function CanvasRenderer(loader) {
-  Renderer.call(this, loader);
-  this._options = {};
-  this._redraw = false;
-  this._dirty = new Bounds();
-  this._tempb = new Bounds();
-}
-
-const base = Renderer.prototype;
-
-const viewBounds = (origin, width, height) => new Bounds()
-  .set(0, 0, width, height)
-  .translate(-origin[0], -origin[1]);
-
-function clipToBounds(g, b, origin) {
-  // expand bounds by 1 pixel, then round to pixel boundaries
-  b.expand(1).round();
-
-  // align to base pixel grid in case of non-integer scaling (#2425)
-  if (g.pixelRatio % 1) {
-    b.scale(g.pixelRatio).round().scale(1 / g.pixelRatio);
+export default class CanvasRenderer extends Renderer {
+  constructor(loader) {
+    super(loader);
+    this._options = {};
+    this._redraw = false;
+    this._dirty = new Bounds();
+    this._tempb = new Bounds();
   }
 
-  // to avoid artifacts translate if origin has fractional pixels
-  b.translate(-(origin[0] % 1), -(origin[1] % 1));
-
-  // set clip path
-  g.beginPath();
-  g.rect(b.x1, b.y1, b.width(), b.height());
-  g.clip();
-
-  return b;
-}
-
-inherits(CanvasRenderer, Renderer, {
   initialize(el, width, height, origin, scaleFactor, options) {
@@ -60,7 +34,7 @@ this._options = options || {};
     // this method will invoke resize to size the canvas appropriately
-    return base.initialize.call(this, el, width, height, origin, scaleFactor);
-  },
+    return super.initialize(el, width, height, origin, scaleFactor);
+  }
 
   resize(width, height, origin, scaleFactor) {
-    base.resize.call(this, width, height, origin, scaleFactor);
+    super.resize(width, height, origin, scaleFactor);
 
@@ -81,7 +55,7 @@ if (this._canvas) {
     return this;
-  },
+  }
 
   canvas() {
     return this._canvas;
-  },
+  }
 
@@ -91,3 +65,3 @@ context() {
       || (this._canvas ? this._canvas.getContext('2d') : null);
-  },
+  }
 
@@ -104,3 +78,3 @@ dirty(item) {
     this._dirty.union(b);
-  },
+  }
 
@@ -131,3 +105,3 @@ _render(scene, markTypes) {
     return this;
-  },
+  }
 
@@ -143,3 +117,3 @@ draw(ctx, scene, bounds, markTypes) {
     if (scene.clip) ctx.restore();
-  },
+  }
 
@@ -161,2 +135,26 @@ clear(x, y, w, h) {
   }
-});
+}
+
+const viewBounds = (origin, width, height) => new Bounds()
+  .set(0, 0, width, height)
+  .translate(-origin[0], -origin[1]);
+
+function clipToBounds(g, b, origin) {
+  // expand bounds by 1 pixel, then round to pixel boundaries
+  b.expand(1).round();
+
+  // align to base pixel grid in case of non-integer scaling (#2425)
+  if (g.pixelRatio % 1) {
+    b.scale(g.pixelRatio).round().scale(1 / g.pixelRatio);
+  }
+
+  // to avoid artifacts translate if origin has fractional pixels
+  b.translate(-(origin[0] % 1), -(origin[1] % 1));
+
+  // set clip path
+  g.beginPath();
+  g.rect(b.x1, b.y1, b.width(), b.height());
+  g.clip();
+
+  return b;
+}

src/Handler.js

@@ -5,25 +5,19 @@ import {domCreate} from './util/dom';
 
-/**
- * Create a new Handler instance.
- * @param {object} [customLoader] - Optional loader instance for
- *   href URL sanitization. If not specified, a standard loader
- *   instance will be generated.
- * @param {function} [customTooltip] - Optional tooltip handler
- *   function for custom tooltip display.
- * @constructor
- */
-export default function Handler(customLoader, customTooltip) {
-  this._active = null;
-  this._handlers = {};
-  this._loader = customLoader || loader();
-  this._tooltip = customTooltip || defaultTooltip;
-}
+export default class Handler {
+  /**
+   * Create a new Handler instance.
+   * @param {object} [customLoader] - Optional loader instance for
+   *   href URL sanitization. If not specified, a standard loader
+   *   instance will be generated.
+   * @param {function} [customTooltip] - Optional tooltip handler
+   *   function for custom tooltip display.
+   * @constructor
+   */
+  constructor(customLoader, customTooltip) {
+    this._active = null;
+    this._handlers = {};
+    this._loader = customLoader || loader();
+    this._tooltip = customTooltip || defaultTooltip;
+  }
 
-// The default tooltip display handler.
-// Sets the HTML title attribute on the visualization container.
-function defaultTooltip(handler, event, item, value) {
-  handler.element().setAttribute('title', value || '');
-}
-
-Handler.prototype = {
   /**
@@ -42,3 +36,3 @@ * Initialize a new Handler instance.
     return this.origin(origin);
-  },
+  }
 
@@ -51,3 +45,3 @@ /**
     return this._el;
-  },
+  }
 
@@ -61,3 +55,3 @@ /**
     return this._el && this._el.firstChild;
-  },
+  }
 
@@ -74,3 +68,3 @@ /**
     }
-  },
+  }
 
@@ -84,3 +78,3 @@ /**
     return this;
-  },
+  }
 
@@ -90,3 +84,3 @@ /**
    */
-  on(/*type, handler*/) {},
+  on( /*type, handler*/) { }
 
@@ -96,3 +90,3 @@ /**
    */
-  off(/*type, handler*/) {},
+  off( /*type, handler*/) { }
 
@@ -107,3 +101,3 @@ /**
   _handlerIndex(h, type, handler) {
-    for (let i = h ? h.length : 0; --i>=0;) {
+    for (let i = h ? h.length : 0; --i >= 0;) {
       if (h[i].type === type && (!handler || h[i].handler === handler)) {
@@ -114,3 +108,3 @@ return i;
     return -1;
-  },
+  }
 
@@ -133,3 +127,3 @@ /**
     return a;
-  },
+  }
 
@@ -145,3 +139,3 @@ /**
     return i < 0 ? name : name.slice(0, i);
-  },
+  }
 
@@ -156,11 +150,10 @@ /**
     this._loader
-      .sanitize(href, {context:'href'})
+      .sanitize(href, { context: 'href' })
       .then(opt => {
-        const e = new MouseEvent(event.type, event),
-              a = domCreate(null, 'a');
+        const e = new MouseEvent(event.type, event), a = domCreate(null, 'a');
         for (const name in opt) a.setAttribute(name, opt[name]);
         a.dispatchEvent(e);
       })
-      .catch(() => { /* do nothing */ });
-  },
+      .catch(() => { });
+  }
 
@@ -180,3 +173,3 @@ /**
     }
-  },
+  }
 
@@ -195,10 +188,5 @@ /**
 
-    const rect = el.getBoundingClientRect(),
-          origin = this._origin,
-          bounds = item.bounds,
-          width = bounds.width(),
-          height = bounds.height();
+    const rect = el.getBoundingClientRect(), origin = this._origin, bounds = item.bounds, width = bounds.width(), height = bounds.height();
 
-    let x = bounds.x1 + origin[0] + rect.left,
-        y = bounds.y1 + origin[1] + rect.top;
+    let x = bounds.x1 + origin[0] + rect.left, y = bounds.y1 + origin[1] + rect.top;
 
@@ -217,2 +205,10 @@ // translate coordinate for each parent group
   }
-};
+}
+
+// The default tooltip display handler.
+// Sets the HTML title attribute on the visualization container.
+function defaultTooltip(handler, event, item, value) {
+  handler.element().setAttribute('title', value || '');
+}
+
+

src/HybridHandler.js

 import CanvasHandler from './CanvasHandler';
 import {OPTS} from './HybridRenderer';
-import {inherits} from 'vega-util';
 import {domChild} from './util/dom';
 
-export default function HybridHandler(loader, tooltip) {
-  CanvasHandler.call(this, loader, tooltip);
-}
+export default class HybridHandler extends CanvasHandler {
+  constructor (loader, tooltip) {
+    super(loader, tooltip);
+  }
 
-inherits(HybridHandler, CanvasHandler, {
   initialize(el, origin, obj) {
     const canvas = domChild(domChild(el, 0, 'div'), OPTS.svgOnTop? 0: 1, 'div');
-    return CanvasHandler.prototype.initialize.call(this, canvas, origin, obj);
+    return super.initialize(canvas, origin, obj);
   }
-});
+}

src/HybridRenderer.js

 import Renderer from './Renderer';
 import SVGRenderer from './SVGRenderer';
 import CanvasRenderer from './CanvasRenderer';
-import {inherits} from 'vega-util';
 import {domChild} from './util/dom';
@@ -37,11 +36,9 @@
 
-export default function HybridRenderer(loader) {
-  Renderer.call(this, loader);
-  this._svgRenderer = new SVGRenderer(loader);
-  this._canvasRenderer = new CanvasRenderer(loader);
-}
+export default class HybridRenderer extends Renderer {
+  constructor(loader) {
+    super(loader);
+    this._svgRenderer = new SVGRenderer(loader);
+    this._canvasRenderer = new CanvasRenderer(loader);
+  }
 
-const base = Renderer.prototype;
-
-inherits(HybridRenderer, Renderer, {
   /**
@@ -84,4 +81,4 @@ * Initialize a new HybridRenderer instance.
     this._svgRenderer.initialize(this._svgEl, width, height, origin, scaleFactor);
-    return base.initialize.call(this, el, width, height, origin, scaleFactor);
-  },
+    return super.initialize(el, width, height, origin, scaleFactor);
+  }
 
@@ -99,3 +96,3 @@ /**
     return this;
-  },
+  }
 
@@ -115,3 +112,3 @@ /**
     this._canvasRenderer.render(scene, canvasMarkTypes);
-  },
+  }
 
@@ -129,7 +126,7 @@ /**
   resize(width, height, origin, scaleFactor) {
-    base.resize.call(this, width, height, origin, scaleFactor);
+    super.resize(width, height, origin, scaleFactor);
     this._svgRenderer.resize(width, height, origin, scaleFactor);
     this._canvasRenderer.resize(width, height, origin, scaleFactor);
     return this;
-  },
+  }
 
@@ -145,2 +142,2 @@ background(bgcolor) {
   }
-});
+}

src/Renderer.js

 import ResourceLoader from './ResourceLoader';
 
-/**
- * Create a new Renderer instance.
- * @param {object} [loader] - Optional loader instance for
- *   image and href URL sanitization. If not specified, a
- *   standard loader instance will be generated.
- * @constructor
- */
-export default function Renderer(loader) {
-  this._el = null;
-  this._bgcolor = null;
-  this._loader = new ResourceLoader(loader);
-}
+export default class Renderer {
+  /**
+   * Create a new Renderer instance.
+   * @param {object} [loader] - Optional loader instance for
+   *   image and href URL sanitization. If not specified, a
+   *   standard loader instance will be generated.
+   * @constructor
+   */
+  constructor(loader) {
+    this._el = null;
+    this._bgcolor = null;
+    this._loader = new ResourceLoader(loader);
+  }
 
-Renderer.prototype = {
   /**
@@ -31,3 +31,3 @@ * Initialize a new Renderer instance.
     return this.resize(width, height, origin, scaleFactor);
-  },
+  }
 
@@ -40,3 +40,3 @@ /**
     return this._el;
-  },
+  }
 
@@ -50,3 +50,3 @@ /**
     return this._el && this._el.firstChild;
-  },
+  }
 
@@ -60,3 +60,3 @@ /**
     return this;
-  },
+  }
 
@@ -79,3 +79,3 @@ /**
     return this;
-  },
+  }
 
@@ -88,3 +88,3 @@ /**
    */
-  dirty(/*item*/) {},
+  dirty( /*item*/) { }
 
@@ -108,3 +108,3 @@ /**
     // this function may be subsequently called for async redraw
-    r._call = function() { r._render(scene, markTypes); };
+    r._call = function () { r._render(scene, markTypes); };
 
@@ -119,3 +119,3 @@ // invoke the renderer
     return r;
-  },
+  }
 
@@ -129,5 +129,5 @@ /**
    */
-  _render(/*scene, markTypes*/) {
+  _render( /*scene, markTypes*/) {
     // subclasses to override
-  },
+  }
 
@@ -149,3 +149,3 @@ /**
       : Promise.resolve(r);
-  },
+  }
 
@@ -161,4 +161,3 @@ /**
   _load(method, uri) {
-    var r = this,
-        p = r._loader[method](uri);
+    var r = this, p = r._loader[method](uri);
 
@@ -176,3 +175,3 @@ if (!r._ready) {
     return p;
-  },
+  }
 
@@ -188,3 +187,3 @@ /**
     return this._load('sanitizeURL', uri);
-  },
+  }
 
@@ -201,2 +200,3 @@ /**
   }
-};
+}
+

src/ResourceLoader.js

@@ -5,19 +5,11 @@ import {image} from 'vega-canvas';
 
-export default function ResourceLoader(customLoader) {
-  this._pending = 0;
-  this._loader = customLoader || loader();
-}
+export default class ResourceLoader {
+  constructor(customLoader) {
+    this._pending = 0;
+    this._loader = customLoader || loader();
+  }
 
-function increment(loader) {
-  loader._pending += 1;
-}
-
-function decrement(loader) {
-  loader._pending -= 1;
-}
-
-ResourceLoader.prototype = {
   pending() {
     return this._pending;
-  },
+  }
 
@@ -28,3 +20,3 @@ sanitizeURL(uri) {
 
-    return loader._loader.sanitize(uri, {context:'href'})
+    return loader._loader.sanitize(uri, { context: 'href' })
       .then(opt => {
@@ -38,14 +30,13 @@ decrement(loader);
       });
-  },
+  }
 
   loadImage(uri) {
-    const loader = this,
-          Image = image();
+    const loader = this, Image = image();
     increment(loader);
 
     return loader._loader
-      .sanitize(uri, {context: 'image'})
+      .sanitize(uri, { context: 'image' })
       .then(opt => {
         const url = opt.href;
-        if (!url || !Image) throw {url: url};
+        if (!url || !Image) throw { url: url };
 
@@ -68,5 +59,5 @@ const img = new Image();
         decrement(loader);
-        return {complete: false, width: 0, height: 0, src: e && e.url || ''};
+        return { complete: false, width: 0, height: 0, src: e && e.url || '' };
       });
-  },
+  }
 
@@ -83,2 +74,11 @@ ready() {
   }
-};
+}
+
+function increment(loader) {
+  loader._pending += 1;
+}
+
+function decrement(loader) {
+  loader._pending -= 1;
+}
+

src/Scenegraph.js

@@ -5,19 +5,19 @@ import Bounds from './Bounds';
 
-export default function Scenegraph(scene) {
-  if (arguments.length) {
-    this.root = sceneFromJSON(scene);
-  } else {
-    this.root = createMark({
-      marktype: 'group',
-      name: 'root',
-      role: 'frame'
-    });
-    this.root.items = [new GroupItem(this.root)];
+export default class Scenegraph {
+  constructor(scene) {
+    if (arguments.length) {
+      this.root = sceneFromJSON(scene);
+    } else {
+      this.root = createMark({
+        marktype: 'group',
+        name: 'root',
+        role: 'frame'
+      });
+      this.root.items = [new GroupItem(this.root)];
+    }
   }
-}
 
-Scenegraph.prototype = {
   toJSON(indent) {
     return sceneToJSON(this.root, indent || 0);
-  },
+  }
 
@@ -31,4 +31,5 @@ mark(markdef, group, index) {
   }
-};
+}
 
+
 function createMark(def, group) {
@@ -35,0 +36,0 @@ const mark = {

src/SVGHandler.js

 import Handler from './Handler';
 import {domFind} from './util/dom';
 import {HrefEvent, TooltipHideEvent, TooltipShowEvent} from './util/events';
-import {inherits} from 'vega-util';
 
-export default function SVGHandler(loader, tooltip) {
-  Handler.call(this, loader, tooltip);
-  const h = this;
-  h._hrefHandler = listener(h, (evt, item) => {
-    if (item && item.href) h.handleHref(evt, item, item.href);
-  });
-  h._tooltipHandler = listener(h, (evt, item) => {
-    h.handleTooltip(evt, item, evt.type !== TooltipHideEvent);
-  });
-}
+export default class SVGHandler extends Handler {
+  constructor(loader, tooltip) {
+    super(loader, tooltip);
+    const h = this;
+    h._hrefHandler = listener(h, (evt, item) => {
+      if (item && item.href) h.handleHref(evt, item, item.href);
+    });
+    h._tooltipHandler = listener(h, (evt, item) => {
+      h.handleTooltip(evt, item, evt.type !== TooltipHideEvent);
+    });
+  }
 
-// wrap an event listener for the SVG DOM
-const listener = (context, handler) => evt => {
-  let item = evt.target.__data__;
-  item = Array.isArray(item) ? item[0] : item;
-  evt.vegaType = evt.type;
-  handler.call(context._obj, evt, item);
-};
-
-inherits(SVGHandler, Handler, {
   initialize(el, origin, obj) {
@@ -39,8 +30,8 @@ let svg = this._svg;
     }
-    return Handler.prototype.initialize.call(this, el, origin, obj);
-  },
+    return super.initialize(el, origin, obj);
+  }
 
   canvas() {
     return this._svg;
-  },
+  }
 
@@ -67,3 +58,3 @@ // add an event handler
     return this;
-  },
+  }
 
@@ -85,2 +76,10 @@ // remove an event handler
   }
-});
+}
+
+// wrap an event listener for the SVG DOM
+const listener = (context, handler) => evt => {
+  let item = evt.target.__data__;
+  item = Array.isArray(item) ? item[0] : item;
+  evt.vegaType = evt.type;
+  handler.call(context._obj, evt, item);
+};

src/SVGRenderer.js

@@ -12,3 +12,3 @@ import Renderer from './Renderer';
 import {rootAttributes, stylesAttr, stylesCss} from './util/svg/styles';
-import {inherits, isArray} from 'vega-util';
+import {isArray} from 'vega-util';
 
@@ -19,14 +19,12 @@ const RootIndex = 0,
 
-export default function SVGRenderer(loader) {
-  Renderer.call(this, loader);
-  this._dirtyID = 0;
-  this._dirty = [];
-  this._svg = null;
-  this._root = null;
-  this._defs = null;
-}
+export default class SVGRenderer extends Renderer {
+  constructor(loader) {
+    super(loader);
+    this._dirtyID = 0;
+    this._dirty = [];
+    this._svg = null;
+    this._root = null;
+    this._defs = null;
+  }
 
-const base = Renderer.prototype;
-
-inherits(SVGRenderer, Renderer, {
   /**
@@ -67,4 +65,4 @@ * Initialize a new SVGRenderer instance.
 
-    return base.initialize.call(this, el, width, height, origin, scaleFactor);
-  },
+    return super.initialize(el, width, height, origin, scaleFactor);
+  }
 
@@ -78,4 +76,4 @@ /**
     }
-    return base.background.apply(this, arguments);
-  },
+    return super.background(...arguments);
+  }
 
@@ -93,3 +91,3 @@ /**
   resize(width, height, origin, scaleFactor) {
-    base.resize.call(this, width, height, origin, scaleFactor);
+    super.resize(width, height, origin, scaleFactor);
 
@@ -108,3 +106,3 @@ if (this._svg) {
     return this;
-  },
+  }
 
@@ -117,3 +115,3 @@ /**
     return this._svg;
-  },
+  }
 
@@ -145,3 +143,3 @@ /**
     return text;
-  },
+  }
 
@@ -168,3 +166,3 @@ /**
     return this;
-  },
+  }
 
@@ -182,3 +180,3 @@ // -- Manage rendering of items marked as dirty --
     }
-  },
+  }
 
@@ -194,3 +192,3 @@ /**
       || item.dirty === this._dirtyID;
-  },
+  }
 
@@ -254,3 +252,3 @@ /**
     return !this._dirtyAll;
-  },
+  }
 
@@ -320,3 +318,3 @@ // -- Construct & maintain scenegraph to SVG mapping ---
     return parent;
-  },
+  }
 
@@ -348,3 +346,3 @@ /**
     if (element) this.style(element, item);
-  },
+  }
 
@@ -379,3 +377,3 @@ /**
     }
-  },
+  }
 
@@ -410,3 +408,3 @@ /**
     }
-  },
+  }
 
@@ -421,3 +419,3 @@ /**
   }
-});
+}
 
@@ -424,0 +422,0 @@ // mark ancestor chain with a dirty id

src/SVGStringRenderer.js

@@ -12,14 +12,14 @@ import Renderer from './Renderer';
 import {rootAttributes, stylesAttr, stylesCss} from './util/svg/styles';
-import {extend, inherits, isArray} from 'vega-util';
+import {extend, isArray} from 'vega-util';
 
-export default function SVGStringRenderer(loader) {
-  Renderer.call(this, loader);
-  this._text = null;
-  this._defs = {
-    gradient: {},
-    clipping: {}
-  };
-}
+export default class SVGStringRenderer extends Renderer {
+  constructor(loader) {
+    super(loader);
+    this._text = null;
+    this._defs = {
+      gradient: {},
+      clipping: {}
+    };
+  }
 
-inherits(SVGStringRenderer, Renderer, {
   /**
@@ -31,3 +31,3 @@ * Returns the rendered SVG text string,
     return this._text;
-  },
+  }
 
@@ -73,3 +73,3 @@ /**
     return this;
-  },
+  }
 
@@ -171,3 +171,3 @@ /**
     return m.close(); // </g>
-  },
+  }
 
@@ -195,3 +195,3 @@ /**
     return null;
-  },
+  }
 
@@ -224,3 +224,3 @@ /**
     return object;
-  },
+  }
 
@@ -318,3 +318,3 @@ /**
   }
-});
+}
 
@@ -321,0 +321,0 @@ // Helper function for attr for style presentation attributes

src/util/events.js

@@ -53,4 +53,4 @@ export const KeyDownEvent = 'keydown';
 
-export const TooltipHideEvent = PointerOutEvent;
+export const TooltipHideEvent = MouseOutEvent;
 
 export const HrefEvent = ClickEvent;

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

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

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1017535

decreased by-0.25%

Lines of code

18993

decreased by-0.12%

No dependency changes