@nivo/voronoi - npm Package Compare versions

Comparing version 0.50.0 to 0.51.0

cjs/nivo-voronoi.js

@@ -8,8 +8,11 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
+var d3Scale = require('d3-scale');
+var d3Delaunay = require('d3-delaunay');
 var compose = _interopDefault(require('recompose/compose'));
 var defaultProps = _interopDefault(require('recompose/defaultProps'));
+var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
 var pure = _interopDefault(require('recompose/pure'));
 var core = require('@nivo/core');
-var React = _interopDefault(require('react'));
-var d3Voronoi = require('d3-voronoi');
+var React = require('react');
+var React__default = _interopDefault(React);
 
@@ -22,97 +25,122 @@ var VoronoiPropTypes = {
     })).isRequired,
-    enablePolygons: PropTypes.bool.isRequired,
-    enableSites: PropTypes.bool.isRequired,
+
+    xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
+    yDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
+
     enableLinks: PropTypes.bool.isRequired,
-    x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.string.isRequired,
-    linkWidth: PropTypes.number.isRequired,
-    linkColor: PropTypes.string.isRequired,
-    siteSize: PropTypes.number.isRequired,
-    siteColor: PropTypes.string.isRequired
+    linkLineWidth: PropTypes.number.isRequired,
+    linkLineColor: PropTypes.string.isRequired,
+
+    enableCells: PropTypes.bool.isRequired,
+    cellLineWidth: PropTypes.number.isRequired,
+    cellLineColor: PropTypes.string.isRequired,
+
+    enablePoints: PropTypes.bool.isRequired,
+    pointSize: PropTypes.number.isRequired,
+    pointColor: PropTypes.string.isRequired,
+
+    delaunay: PropTypes.object.isRequired,
+    voronoi: PropTypes.object.isRequired
 };
 
 var VoronoiDefaultProps = {
-    enablePolygons: true,
-    enableSites: false,
     enableLinks: false,
-    x: 0,
-    y: 1,
-    borderWidth: 2,
-    borderColor: '#000',
-    linkWidth: 1,
-    linkColor: '#bbb',
-    siteSize: 4,
-    siteColor: '#666'
+    linkLineWidth: 1,
+    linkLineColor: '#bbb',
+
+    enableCells: true,
+    cellLineWidth: 2,
+    cellLineColor: '#000',
+
+    enablePoints: true,
+    pointSize: 4,
+    pointColor: '#666'
 };
 
 var enhance = (function (Component) {
-    return compose(defaultProps(VoronoiDefaultProps), core.withTheme(), core.withDimensions(), pure)(Component);
+    return compose(defaultProps(VoronoiDefaultProps), core.withTheme(), core.withDimensions(), withPropsOnChange(['xDomain', 'yDomain', 'width', 'height'], function (_ref) {
+        var xDomain = _ref.xDomain,
+            yDomain = _ref.yDomain,
+            width = _ref.width,
+            height = _ref.height;
+        return {
+            xScale: d3Scale.scaleLinear().domain(xDomain).range([0, width]),
+            yScale: d3Scale.scaleLinear().domain(yDomain).range([0, height])
+        };
+    }), withPropsOnChange(['data', 'xScale', 'yScale'], function (_ref2) {
+        var data = _ref2.data,
+            xScale = _ref2.xScale,
+            yScale = _ref2.yScale;
+        return {
+            scaledPoints: data.map(function (d) {
+                return {
+                    data: d,
+                    x: xScale(d.x),
+                    y: yScale(d.y)
+                };
+            })
+        };
+    }), withPropsOnChange(['scaledPoints', 'width', 'height'], function (_ref3) {
+        var scaledPoints = _ref3.scaledPoints,
+            width = _ref3.width,
+            height = _ref3.height;
+
+        var delaunay = d3Delaunay.Delaunay.from(scaledPoints.map(function (p) {
+            return [p.x, p.y];
+        }));
+        var voronoi = delaunay.voronoi([0, 0, width, height]);
+
+        return {
+            delaunay: delaunay,
+            voronoi: voronoi
+        };
+    }), pure)(Component);
 });
 
 var Voronoi = function Voronoi(_ref) {
-    var data = _ref.data,
+    var delaunay = _ref.delaunay,
+        voronoi = _ref.voronoi,
         margin = _ref.margin,
-        width = _ref.width,
-        height = _ref.height,
         outerWidth = _ref.outerWidth,
         outerHeight = _ref.outerHeight,
-        enableSites = _ref.enableSites,
         enableLinks = _ref.enableLinks,
-        enablePolygons = _ref.enablePolygons,
-        theme = _ref.theme,
-        borderWidth = _ref.borderWidth,
-        borderColor = _ref.borderColor,
-        linkWidth = _ref.linkWidth,
-        linkColor = _ref.linkColor,
-        siteSize = _ref.siteSize,
-        siteColor = _ref.siteColor;
+        linkLineWidth = _ref.linkLineWidth,
+        linkLineColor = _ref.linkLineColor,
+        enableCells = _ref.enableCells,
+        cellLineWidth = _ref.cellLineWidth,
+        cellLineColor = _ref.cellLineColor,
+        enablePoints = _ref.enablePoints,
+        pointSize = _ref.pointSize,
+        pointColor = _ref.pointColor,
+        theme = _ref.theme;
 
-    var voronoi = d3Voronoi.voronoi().x(function (d) {
-        return d.x;
-    }).y(function (d) {
-        return d.y;
-    }).extent([[0, 0], [width, height]]);
-
-    var polygons = voronoi.polygons(data);
-    var links = voronoi.links(data);
-
-    return React.createElement(
+    return React__default.createElement(
         core.Container,
         { isInteractive: false, theme: theme },
         function () {
-            return (/*{ showTooltip, hideTooltip }*/React.createElement(
+            return (/*{ showTooltip, hideTooltip }*/React__default.createElement(
                     core.SvgWrapper,
                     { width: outerWidth, height: outerHeight, margin: margin, theme: theme },
-                    enableLinks && links.map(function (l) {
-                        return React.createElement('line', {
-                            key: l.source.id + '.' + l.target.id,
-                            fill: 'none',
-                            stroke: linkColor,
-                            strokeWidth: linkWidth,
-                            x1: l.source.x,
-                            y1: l.source.y,
-                            x2: l.target.x,
-                            y2: l.target.y
-                        });
+                    enableLinks && React__default.createElement('path', {
+                        stroke: linkLineColor,
+                        strokeWidth: linkLineWidth,
+                        fill: 'none',
+                        d: delaunay.render()
                     }),
-                    enablePolygons && polygons.map(function (p) {
-                        return React.createElement('path', {
-                            key: p.data.id,
-                            fill: 'none',
-                            stroke: borderColor,
-                            strokeWidth: borderWidth,
-                            d: 'M' + p.join('L') + 'Z'
-                        });
+                    enableCells && React__default.createElement('path', {
+                        d: voronoi.render(),
+                        fill: 'none',
+                        stroke: cellLineColor,
+                        strokeWidth: cellLineWidth
                     }),
-                    enableSites && data.map(function (d) {
-                        return React.createElement('circle', {
-                            key: d.id,
-                            r: siteSize / 2,
-                            cx: d.x,
-                            cy: d.y,
-                            fill: siteColor,
-                            stroke: 'none'
-                        });
+                    enablePoints && React__default.createElement('path', {
+                        stroke: 'none',
+                        fill: pointColor,
+                        d: delaunay.renderPoints(undefined, pointSize / 2)
+                    }),
+                    React__default.createElement('path', {
+                        fill: 'none',
+                        stroke: cellLineColor,
+                        strokeWidth: cellLineWidth,
+                        d: voronoi.renderBounds()
                     })
@@ -129,2 +157,8 @@ )
 
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
 var _extends = Object.assign || function (target) {
@@ -144,4 +178,28 @@ for (var i = 1; i < arguments.length; i++) {
 
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
 var ResponsiveVoronoi = function ResponsiveVoronoi(props) {
-    return React.createElement(
+    return React__default.createElement(
         core.ResponsiveWrapper,
@@ -152,3 +210,3 @@ null,
                 height = _ref.height;
-            return React.createElement(Voronoi$1, _extends({ width: width, height: height }, props));
+            return React__default.createElement(Voronoi$1, _extends({ width: width, height: height }, props));
         }
@@ -158,5 +216,225 @@ );
 
+var getAccessor = function getAccessor(directive) {
+    return typeof directive === 'function' ? directive : function (d) {
+        return d[directive];
+    };
+};
+
+var computeMeshPoints = function computeMeshPoints(_ref) {
+    var points = _ref.points,
+        xAccessor = _ref.xAccessor,
+        yAccessor = _ref.yAccessor;
+
+    var getX = getAccessor(xAccessor);
+    var getY = getAccessor(yAccessor);
+
+    return {
+        points: points.map(function (p) {
+            return [getX(p), getY(p)];
+        })
+    };
+};
+
+var computeMesh = function computeMesh(_ref2) {
+    var points = _ref2.points,
+        width = _ref2.width,
+        height = _ref2.height,
+        debug = _ref2.debug;
+
+    var delaunay = d3Delaunay.Delaunay.from(points);
+    var voronoi = debug === true ? delaunay.voronoi([0, 0, width, height]) : undefined;
+
+    return { delaunay: delaunay, voronoi: voronoi };
+};
+
+var Mesh = function (_Component) {
+    inherits(Mesh, _Component);
+
+    function Mesh(props) {
+        classCallCheck(this, Mesh);
+
+        var _this = possibleConstructorReturn(this, _Component.call(this, props));
+
+        _this.state = {
+            index: null
+        };
+
+        _this.handleMouseIn = function (handler, event) {
+            var _this$props = _this.props,
+                delaunay = _this$props.delaunay,
+                points = _this$props.points;
+
+            var _getRelativeCursor = core.getRelativeCursor(_this.rect, event),
+                x = _getRelativeCursor[0],
+                y = _getRelativeCursor[1];
+
+            var index = delaunay.find(x, y);
+
+            if (handler !== undefined) {
+                handler(points[index], event);
+            }
+
+            if (_this.state.index !== index) {
+                _this.setState({ index: index });
+            }
+        };
+
+        _this.handleMouseEnter = function (event) {
+            _this.handleMouseIn(_this.props.onMouseEnter, event);
+        };
+
+        _this.handleMouseMove = function (event) {
+            _this.handleMouseIn(_this.props.onMouseMove, event);
+        };
+
+        _this.handleMouseLeave = function (event) {
+            var _this$props2 = _this.props,
+                onMouseLeave = _this$props2.onMouseLeave,
+                points = _this$props2.points;
+            var index = _this.state.index;
+
+
+            if (onMouseLeave !== undefined) {
+                onMouseLeave(points[index], event);
+            }
+
+            _this.setState({ index: null });
+        };
+
+        _this.handleClick = function (event) {
+            var _this$props3 = _this.props,
+                onClick = _this$props3.onClick,
+                points = _this$props3.points;
+            var index = _this.state.index;
+
+
+            if (onClick === undefined || index === null) return;
+
+            onClick(points[index], event);
+        };
+
+        _this.setRectRef = function (element) {
+            _this.rect = element;
+        };
+        return _this;
+    }
+
+    Mesh.prototype.render = function render() {
+        var _props = this.props,
+            width = _props.width,
+            height = _props.height,
+            voronoi = _props.voronoi,
+            voronoiPath = _props.voronoiPath,
+            debug = _props.debug;
+        var index = this.state.index;
+
+
+        return React__default.createElement(
+            'g',
+            { ref: this.setRectRef },
+            debug && React__default.createElement('path', { d: voronoiPath, stroke: 'red', strokeWidth: 0.5, opacity: 0.75 }),
+            index !== null && debug && React__default.createElement('path', { fill: 'red', opacity: 0.25, d: voronoi.renderCell(index) }),
+            React__default.createElement('rect', {
+                width: width,
+                height: height,
+                fill: 'purple',
+                opacity: 0,
+                style: { cursor: 'crosshair' },
+                onMouseEnter: this.handleMouseEnter,
+                onMouseMove: this.handleMouseMove,
+                onMouseLeave: this.handleMouseLeave,
+                onClick: this.handleClick
+            })
+        );
+    };
+
+    return Mesh;
+}(React.Component);
+
+Mesh.propTypes = {
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    points: PropTypes.array.isRequired,
+    xAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
+    yAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
+    onMouseEnter: PropTypes.func,
+    onMouseMove: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    onClick: PropTypes.func,
+    debug: PropTypes.bool.isRequired,
+
+    delaunay: PropTypes.shape({
+        find: PropTypes.func.isRequired
+    }).isRequired,
+    voronoi: PropTypes.shape({
+        renderCell: PropTypes.func.isRequired
+    }),
+    voronoiPath: PropTypes.string
+};
+
+
+var enhance$1 = compose(defaultProps({
+    xAccessor: 'x',
+    yAccessor: 'y',
+    debug: false
+}), withPropsOnChange(['points', 'xAccessor', 'yAccessor'], function (_ref) {
+    var points = _ref.points,
+        xAccessor = _ref.xAccessor,
+        yAccessor = _ref.yAccessor;
+    return {
+        points2d: computeMeshPoints({ points: points, xAccessor: xAccessor, yAccessor: yAccessor }).points
+    };
+}), withPropsOnChange(['points2d', 'width', 'height', 'debug'], function (_ref2) {
+    var points2d = _ref2.points2d,
+        width = _ref2.width,
+        height = _ref2.height,
+        debug = _ref2.debug;
+
+    var mesh = computeMesh({ points: points2d, width: width, height: height, debug: debug });
+
+    var voronoiPath = void 0;
+    if (debug === true) {
+        voronoiPath = mesh.voronoi.render();
+    }
+
+    return _extends({}, mesh, {
+        voronoiPath: voronoiPath
+    });
+}));
+
+var Mesh$1 = enhance$1(Mesh);
+
+var renderVoronoiToCanvas = function renderVoronoiToCanvas(ctx, voronoi) {
+    ctx.save();
+
+    ctx.globalAlpha = 0.75;
+    ctx.beginPath();
+    voronoi.render(ctx);
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    ctx.restore();
+};
+
+var renderVoronoiCellToCanvas = function renderVoronoiCellToCanvas(ctx, voronoi, index) {
+    ctx.save();
+
+    ctx.globalAlpha = 0.25;
+    ctx.beginPath();
+    voronoi.renderCell(index, ctx);
+    ctx.fillStyle = 'red';
+    ctx.fill();
+
+    ctx.restore();
+};
+
 exports.Voronoi = Voronoi$1;
 exports.ResponsiveVoronoi = ResponsiveVoronoi;
+exports.Mesh = Mesh$1;
+exports.computeMeshPoints = computeMeshPoints;
+exports.computeMesh = computeMesh;
+exports.renderVoronoiToCanvas = renderVoronoiToCanvas;
+exports.renderVoronoiCellToCanvas = renderVoronoiCellToCanvas;
 exports.VoronoiPropTypes = VoronoiPropTypes;
 exports.VoronoiDefaultProps = VoronoiDefaultProps;

package.json

 {
   "name": "@nivo/voronoi",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "license": "MIT",
@@ -25,4 +25,5 @@ "author": {
   "dependencies": {
-    "@nivo/core": "0.50.0",
-    "d3-voronoi": "^1.1.4",
+    "@nivo/core": "0.51.0",
+    "d3-delaunay": "^4.1.5",
+    "d3-scale": "^2.1.2",
     "recompose": "^0.26.0"
@@ -37,3 +38,3 @@ },
   },
-  "gitHead": "934117e4d2873a2a5684aa8e713d5b0e788cc67a"
+  "gitHead": "a17dfedf502a75b969e205620231a5c1fb6a1d67"
 }

umd/nivo-voronoi.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/pure'), require('@nivo/core'), require('react'), require('d3-voronoi')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'recompose/compose', 'recompose/defaultProps', 'recompose/pure', '@nivo/core', 'react', 'd3-voronoi'], factory) :
-    (factory((global.nivo = global.nivo || {}),global.PropTypes,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposePure,global.nivo,global.React,global.d3));
-}(this, (function (exports,PropTypes,compose,defaultProps,pure,core,React,d3Voronoi) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('d3-scale'), require('d3-delaunay'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('@nivo/core'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'd3-scale', 'd3-delaunay', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/pure', '@nivo/core', 'react'], factory) :
+    (factory((global.nivo = global.nivo || {}),global.PropTypes,global.d3,global.d3,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposePure,global.nivo,global.React));
+}(this, (function (exports,PropTypes,d3Scale,d3Delaunay,compose,defaultProps,withPropsOnChange,pure,core,React) { 'use strict';
 
@@ -10,4 +10,5 @@ PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
     defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps;
+    withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange;
     pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure;
-    React = React && React.hasOwnProperty('default') ? React['default'] : React;
+    var React__default = 'default' in React ? React['default'] : React;
 
@@ -20,97 +21,122 @@ var VoronoiPropTypes = {
         })).isRequired,
-        enablePolygons: PropTypes.bool.isRequired,
-        enableSites: PropTypes.bool.isRequired,
+
+        xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
+        yDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
+
         enableLinks: PropTypes.bool.isRequired,
-        x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        borderWidth: PropTypes.number.isRequired,
-        borderColor: PropTypes.string.isRequired,
-        linkWidth: PropTypes.number.isRequired,
-        linkColor: PropTypes.string.isRequired,
-        siteSize: PropTypes.number.isRequired,
-        siteColor: PropTypes.string.isRequired
+        linkLineWidth: PropTypes.number.isRequired,
+        linkLineColor: PropTypes.string.isRequired,
+
+        enableCells: PropTypes.bool.isRequired,
+        cellLineWidth: PropTypes.number.isRequired,
+        cellLineColor: PropTypes.string.isRequired,
+
+        enablePoints: PropTypes.bool.isRequired,
+        pointSize: PropTypes.number.isRequired,
+        pointColor: PropTypes.string.isRequired,
+
+        delaunay: PropTypes.object.isRequired,
+        voronoi: PropTypes.object.isRequired
     };
 
     var VoronoiDefaultProps = {
-        enablePolygons: true,
-        enableSites: false,
         enableLinks: false,
-        x: 0,
-        y: 1,
-        borderWidth: 2,
-        borderColor: '#000',
-        linkWidth: 1,
-        linkColor: '#bbb',
-        siteSize: 4,
-        siteColor: '#666'
+        linkLineWidth: 1,
+        linkLineColor: '#bbb',
+
+        enableCells: true,
+        cellLineWidth: 2,
+        cellLineColor: '#000',
+
+        enablePoints: true,
+        pointSize: 4,
+        pointColor: '#666'
     };
 
     var enhance = (function (Component) {
-        return compose(defaultProps(VoronoiDefaultProps), core.withTheme(), core.withDimensions(), pure)(Component);
+        return compose(defaultProps(VoronoiDefaultProps), core.withTheme(), core.withDimensions(), withPropsOnChange(['xDomain', 'yDomain', 'width', 'height'], function (_ref) {
+            var xDomain = _ref.xDomain,
+                yDomain = _ref.yDomain,
+                width = _ref.width,
+                height = _ref.height;
+            return {
+                xScale: d3Scale.scaleLinear().domain(xDomain).range([0, width]),
+                yScale: d3Scale.scaleLinear().domain(yDomain).range([0, height])
+            };
+        }), withPropsOnChange(['data', 'xScale', 'yScale'], function (_ref2) {
+            var data = _ref2.data,
+                xScale = _ref2.xScale,
+                yScale = _ref2.yScale;
+            return {
+                scaledPoints: data.map(function (d) {
+                    return {
+                        data: d,
+                        x: xScale(d.x),
+                        y: yScale(d.y)
+                    };
+                })
+            };
+        }), withPropsOnChange(['scaledPoints', 'width', 'height'], function (_ref3) {
+            var scaledPoints = _ref3.scaledPoints,
+                width = _ref3.width,
+                height = _ref3.height;
+
+            var delaunay = d3Delaunay.Delaunay.from(scaledPoints.map(function (p) {
+                return [p.x, p.y];
+            }));
+            var voronoi = delaunay.voronoi([0, 0, width, height]);
+
+            return {
+                delaunay: delaunay,
+                voronoi: voronoi
+            };
+        }), pure)(Component);
     });
 
     var Voronoi = function Voronoi(_ref) {
-        var data = _ref.data,
+        var delaunay = _ref.delaunay,
+            voronoi = _ref.voronoi,
             margin = _ref.margin,
-            width = _ref.width,
-            height = _ref.height,
             outerWidth = _ref.outerWidth,
             outerHeight = _ref.outerHeight,
-            enableSites = _ref.enableSites,
             enableLinks = _ref.enableLinks,
-            enablePolygons = _ref.enablePolygons,
-            theme = _ref.theme,
-            borderWidth = _ref.borderWidth,
-            borderColor = _ref.borderColor,
-            linkWidth = _ref.linkWidth,
-            linkColor = _ref.linkColor,
-            siteSize = _ref.siteSize,
-            siteColor = _ref.siteColor;
+            linkLineWidth = _ref.linkLineWidth,
+            linkLineColor = _ref.linkLineColor,
+            enableCells = _ref.enableCells,
+            cellLineWidth = _ref.cellLineWidth,
+            cellLineColor = _ref.cellLineColor,
+            enablePoints = _ref.enablePoints,
+            pointSize = _ref.pointSize,
+            pointColor = _ref.pointColor,
+            theme = _ref.theme;
 
-        var voronoi = d3Voronoi.voronoi().x(function (d) {
-            return d.x;
-        }).y(function (d) {
-            return d.y;
-        }).extent([[0, 0], [width, height]]);
-
-        var polygons = voronoi.polygons(data);
-        var links = voronoi.links(data);
-
-        return React.createElement(
+        return React__default.createElement(
             core.Container,
             { isInteractive: false, theme: theme },
             function () {
-                return (/*{ showTooltip, hideTooltip }*/React.createElement(
+                return (/*{ showTooltip, hideTooltip }*/React__default.createElement(
                         core.SvgWrapper,
                         { width: outerWidth, height: outerHeight, margin: margin, theme: theme },
-                        enableLinks && links.map(function (l) {
-                            return React.createElement('line', {
-                                key: l.source.id + '.' + l.target.id,
-                                fill: 'none',
-                                stroke: linkColor,
-                                strokeWidth: linkWidth,
-                                x1: l.source.x,
-                                y1: l.source.y,
-                                x2: l.target.x,
-                                y2: l.target.y
-                            });
+                        enableLinks && React__default.createElement('path', {
+                            stroke: linkLineColor,
+                            strokeWidth: linkLineWidth,
+                            fill: 'none',
+                            d: delaunay.render()
                         }),
-                        enablePolygons && polygons.map(function (p) {
-                            return React.createElement('path', {
-                                key: p.data.id,
-                                fill: 'none',
-                                stroke: borderColor,
-                                strokeWidth: borderWidth,
-                                d: 'M' + p.join('L') + 'Z'
-                            });
+                        enableCells && React__default.createElement('path', {
+                            d: voronoi.render(),
+                            fill: 'none',
+                            stroke: cellLineColor,
+                            strokeWidth: cellLineWidth
                         }),
-                        enableSites && data.map(function (d) {
-                            return React.createElement('circle', {
-                                key: d.id,
-                                r: siteSize / 2,
-                                cx: d.x,
-                                cy: d.y,
-                                fill: siteColor,
-                                stroke: 'none'
-                            });
+                        enablePoints && React__default.createElement('path', {
+                            stroke: 'none',
+                            fill: pointColor,
+                            d: delaunay.renderPoints(undefined, pointSize / 2)
+                        }),
+                        React__default.createElement('path', {
+                            fill: 'none',
+                            stroke: cellLineColor,
+                            strokeWidth: cellLineWidth,
+                            d: voronoi.renderBounds()
                         })
@@ -127,2 +153,8 @@ )
 
+    var classCallCheck = function (instance, Constructor) {
+      if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+      }
+    };
+
     var _extends = Object.assign || function (target) {
@@ -142,4 +174,28 @@ for (var i = 1; i < arguments.length; i++) {
 
+    var inherits = function (subClass, superClass) {
+      if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+      }
+
+      subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+          value: subClass,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+    };
+
+    var possibleConstructorReturn = function (self, call) {
+      if (!self) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+      }
+
+      return call && (typeof call === "object" || typeof call === "function") ? call : self;
+    };
+
     var ResponsiveVoronoi = function ResponsiveVoronoi(props) {
-        return React.createElement(
+        return React__default.createElement(
             core.ResponsiveWrapper,
@@ -150,3 +206,3 @@ null,
                     height = _ref.height;
-                return React.createElement(Voronoi$1, _extends({ width: width, height: height }, props));
+                return React__default.createElement(Voronoi$1, _extends({ width: width, height: height }, props));
             }
@@ -156,4 +212,224 @@ );
 
+    var getAccessor = function getAccessor(directive) {
+        return typeof directive === 'function' ? directive : function (d) {
+            return d[directive];
+        };
+    };
+
+    var computeMeshPoints = function computeMeshPoints(_ref) {
+        var points = _ref.points,
+            xAccessor = _ref.xAccessor,
+            yAccessor = _ref.yAccessor;
+
+        var getX = getAccessor(xAccessor);
+        var getY = getAccessor(yAccessor);
+
+        return {
+            points: points.map(function (p) {
+                return [getX(p), getY(p)];
+            })
+        };
+    };
+
+    var computeMesh = function computeMesh(_ref2) {
+        var points = _ref2.points,
+            width = _ref2.width,
+            height = _ref2.height,
+            debug = _ref2.debug;
+
+        var delaunay = d3Delaunay.Delaunay.from(points);
+        var voronoi = debug === true ? delaunay.voronoi([0, 0, width, height]) : undefined;
+
+        return { delaunay: delaunay, voronoi: voronoi };
+    };
+
+    var Mesh = function (_Component) {
+        inherits(Mesh, _Component);
+
+        function Mesh(props) {
+            classCallCheck(this, Mesh);
+
+            var _this = possibleConstructorReturn(this, _Component.call(this, props));
+
+            _this.state = {
+                index: null
+            };
+
+            _this.handleMouseIn = function (handler, event) {
+                var _this$props = _this.props,
+                    delaunay = _this$props.delaunay,
+                    points = _this$props.points;
+
+                var _getRelativeCursor = core.getRelativeCursor(_this.rect, event),
+                    x = _getRelativeCursor[0],
+                    y = _getRelativeCursor[1];
+
+                var index = delaunay.find(x, y);
+
+                if (handler !== undefined) {
+                    handler(points[index], event);
+                }
+
+                if (_this.state.index !== index) {
+                    _this.setState({ index: index });
+                }
+            };
+
+            _this.handleMouseEnter = function (event) {
+                _this.handleMouseIn(_this.props.onMouseEnter, event);
+            };
+
+            _this.handleMouseMove = function (event) {
+                _this.handleMouseIn(_this.props.onMouseMove, event);
+            };
+
+            _this.handleMouseLeave = function (event) {
+                var _this$props2 = _this.props,
+                    onMouseLeave = _this$props2.onMouseLeave,
+                    points = _this$props2.points;
+                var index = _this.state.index;
+
+
+                if (onMouseLeave !== undefined) {
+                    onMouseLeave(points[index], event);
+                }
+
+                _this.setState({ index: null });
+            };
+
+            _this.handleClick = function (event) {
+                var _this$props3 = _this.props,
+                    onClick = _this$props3.onClick,
+                    points = _this$props3.points;
+                var index = _this.state.index;
+
+
+                if (onClick === undefined || index === null) return;
+
+                onClick(points[index], event);
+            };
+
+            _this.setRectRef = function (element) {
+                _this.rect = element;
+            };
+            return _this;
+        }
+
+        Mesh.prototype.render = function render() {
+            var _props = this.props,
+                width = _props.width,
+                height = _props.height,
+                voronoi = _props.voronoi,
+                voronoiPath = _props.voronoiPath,
+                debug = _props.debug;
+            var index = this.state.index;
+
+
+            return React__default.createElement(
+                'g',
+                { ref: this.setRectRef },
+                debug && React__default.createElement('path', { d: voronoiPath, stroke: 'red', strokeWidth: 0.5, opacity: 0.75 }),
+                index !== null && debug && React__default.createElement('path', { fill: 'red', opacity: 0.25, d: voronoi.renderCell(index) }),
+                React__default.createElement('rect', {
+                    width: width,
+                    height: height,
+                    fill: 'purple',
+                    opacity: 0,
+                    style: { cursor: 'crosshair' },
+                    onMouseEnter: this.handleMouseEnter,
+                    onMouseMove: this.handleMouseMove,
+                    onMouseLeave: this.handleMouseLeave,
+                    onClick: this.handleClick
+                })
+            );
+        };
+
+        return Mesh;
+    }(React.Component);
+
+    Mesh.propTypes = {
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        points: PropTypes.array.isRequired,
+        xAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
+        yAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
+        onMouseEnter: PropTypes.func,
+        onMouseMove: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        onClick: PropTypes.func,
+        debug: PropTypes.bool.isRequired,
+
+        delaunay: PropTypes.shape({
+            find: PropTypes.func.isRequired
+        }).isRequired,
+        voronoi: PropTypes.shape({
+            renderCell: PropTypes.func.isRequired
+        }),
+        voronoiPath: PropTypes.string
+    };
+
+
+    var enhance$1 = compose(defaultProps({
+        xAccessor: 'x',
+        yAccessor: 'y',
+        debug: false
+    }), withPropsOnChange(['points', 'xAccessor', 'yAccessor'], function (_ref) {
+        var points = _ref.points,
+            xAccessor = _ref.xAccessor,
+            yAccessor = _ref.yAccessor;
+        return {
+            points2d: computeMeshPoints({ points: points, xAccessor: xAccessor, yAccessor: yAccessor }).points
+        };
+    }), withPropsOnChange(['points2d', 'width', 'height', 'debug'], function (_ref2) {
+        var points2d = _ref2.points2d,
+            width = _ref2.width,
+            height = _ref2.height,
+            debug = _ref2.debug;
+
+        var mesh = computeMesh({ points: points2d, width: width, height: height, debug: debug });
+
+        var voronoiPath = void 0;
+        if (debug === true) {
+            voronoiPath = mesh.voronoi.render();
+        }
+
+        return _extends({}, mesh, {
+            voronoiPath: voronoiPath
+        });
+    }));
+
+    var Mesh$1 = enhance$1(Mesh);
+
+    var renderVoronoiToCanvas = function renderVoronoiToCanvas(ctx, voronoi) {
+        ctx.save();
+
+        ctx.globalAlpha = 0.75;
+        ctx.beginPath();
+        voronoi.render(ctx);
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = 0.5;
+        ctx.stroke();
+
+        ctx.restore();
+    };
+
+    var renderVoronoiCellToCanvas = function renderVoronoiCellToCanvas(ctx, voronoi, index) {
+        ctx.save();
+
+        ctx.globalAlpha = 0.25;
+        ctx.beginPath();
+        voronoi.renderCell(index, ctx);
+        ctx.fillStyle = 'red';
+        ctx.fill();
+
+        ctx.restore();
+    };
+
     exports.Voronoi = Voronoi$1;
     exports.ResponsiveVoronoi = ResponsiveVoronoi;
+    exports.Mesh = Mesh$1;
+    exports.computeMeshPoints = computeMeshPoints;
+    exports.computeMesh = computeMesh;
+    exports.renderVoronoiToCanvas = renderVoronoiToCanvas;
+    exports.renderVoronoiCellToCanvas = renderVoronoiCellToCanvas;
     exports.VoronoiPropTypes = VoronoiPropTypes;
@@ -160,0 +436,0 @@ exports.VoronoiDefaultProps = VoronoiDefaultProps;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31910

increased by129.67%

Lines of code

722

increased by156.94%

Worsened metrics

Dependency count

6

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedd3-delaunay@^4.1.5

• + Addedd3-scale@^2.1.2

• + Added@nivo/core@0.51.0(transitive)

• + Addedd3-delaunay@4.1.5(transitive)

• + Addeddelaunator@2.0.5(transitive)

• - Removedd3-voronoi@^1.1.4

• - Removed@nivo/core@0.50.0(transitive)

• - Removedd3-voronoi@1.1.4(transitive)

• Updated@nivo/core@0.51.0