react-vis-force - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

package.json

 {
   "name": "react-vis-force",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "./dist/react-vis-force.js",
   "homepage": "http://uber.github.io/react-vis-force",
-  "licence": "MIT",
+  "license": "MIT",
   "devDependencies": {
@@ -12,3 +12,3 @@ "@kadira/storybook": "^2.21.0",
     "babel-eslint": "^6.1.2",
-    "babel-jest": "^16.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "6.2.5",
@@ -25,3 +25,3 @@ "babel-preset-react-app": "^0.2.1",
     "dotenv": "2.0.0",
-    "enzyme": "^2.4.1",
+    "enzyme": "^2.8.2",
     "eslint": "^3.9.1",
@@ -43,3 +43,4 @@ "eslint-config-airbnb": "^12.0.0",
     "http-proxy-middleware": "0.17.1",
-    "jest": "^16.0.1",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4",
     "json-loader": "0.5.4",
@@ -50,8 +51,8 @@ "object-assign": "4.1.0",
     "promise": "7.1.1",
-    "react": "^15.3.1",
+    "react": "^15.5.4",
     "react-addons-perf": "^15.3.2",
-    "react-addons-test-utils": "^15.3.1",
     "react-dev-utils": "^0.2.1",
     "react-dom": "^15.3.1",
     "react-prism": "^4.0.0",
+    "react-test-renderer": "^15.5.4",
     "recompose": "^0.23.4",
@@ -63,3 +64,3 @@ "recursive-readdir": "2.1.0",
     "style-loader": "0.13.1",
-    "uber-licence": "^2.0.2",
+    "uber-licence": "^3.1.1",
     "url-loader": "0.5.7",
@@ -77,4 +78,4 @@ "webpack": "1.13.2",
     "global": "^4.3.0",
-    "lodash": "^4.17.4",
-    "react-addons-shallow-compare": "0.14.x - 15.x"
+    "lodash.reduce": "^4.6.0",
+    "prop-types": "^15.5.10"
   },
@@ -81,0 +82,0 @@ "scripts": {

src/components/ForceGraph.js

@@ -21,7 +21,7 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { PropTypes, Children, cloneElement } from 'react';
-import { reduce } from 'lodash';
+import React, { PureComponent, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import reduce from 'lodash.reduce';
 
 import './ForceGraph.css';
-import PureRenderComponent from './PureRenderComponent';
 import * as forceUtils from '../utils/d3-force';
@@ -51,6 +51,7 @@ import * as rafUtils from '../utils/raf';
 
-export default class ForceGraph extends PureRenderComponent {
+export default class ForceGraph extends PureComponent {
   static get propTypes() {
     return {
       children: PropTypes.any,
+      className: PropTypes.string,
 
@@ -57,0 +58,0 @@ // zoom and pan

src/components/ForceGraphArrowLink.js

@@ -21,5 +21,5 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
-import PureRenderComponent from './PureRenderComponent';
 import linkPropTypes from '../propTypes/link';
@@ -29,3 +29,3 @@ import { linkId } from '../utils/d3-force';
 
-export default class ForceGraphArrowLink extends PureRenderComponent {
+export default class ForceGraphArrowLink extends PureComponent {
   static get propTypes() {
@@ -32,0 +32,0 @@ return {

src/components/ForceGraphLink.js

@@ -21,8 +21,8 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
-import PureRenderComponent from './PureRenderComponent';
 import linkPropTypes from '../propTypes/link';
 
-export default class ForceGraphLink extends PureRenderComponent {
+export default class ForceGraphLink extends PureComponent {
   static get propTypes() {
@@ -32,2 +32,4 @@ return {
       edgeOffset: PropTypes.number,
+      strokeWidth: PropTypes.number,
+      className: PropTypes.string,
     };
@@ -34,0 +36,0 @@ }

src/components/ForceGraphNode.js

@@ -21,8 +21,8 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
-import PureRenderComponent from './PureRenderComponent';
 import nodePropTypes from '../propTypes/node';
 
-export default class ForceGraphNode extends PureRenderComponent {
+export default class ForceGraphNode extends PureComponent {
   static get propTypes() {
@@ -33,2 +33,4 @@ return {
       cy: PropTypes.number,
+      r: PropTypes.number,
+      className: PropTypes.string,
       // these props only have an impact on the parent.
@@ -35,0 +37,0 @@ labelStyle: PropTypes.object,

src/components/InteractiveForceGraph.js

@@ -21,6 +21,6 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { Children, PropTypes, cloneElement } from 'react';
+import React, { PureComponent, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
 import { window } from 'global';
 
-import PureRenderComponent from './PureRenderComponent';
 import ForceGraph, { isNode, isLink } from './ForceGraph';
@@ -35,3 +35,3 @@ import { nodeId } from '../utils/d3-force';
 
-export default class InteractiveForceGraph extends PureRenderComponent {
+export default class InteractiveForceGraph extends PureComponent {
   static get propTypes() {
@@ -38,0 +38,0 @@ return Object.assign({

src/components/ZoomableSVGGroup.js

@@ -21,6 +21,5 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import React, { PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
-import PureRenderComponent from './PureRenderComponent';
-
 export const ZOOMABLE_SVG_GROUP_EVENT_NAMES = [
@@ -41,3 +40,3 @@ 'onMouseDown',
  */
-export default class ZoomableSVGGroup extends PureRenderComponent {
+export default class ZoomableSVGGroup extends PureComponent {
   static get propTypes() {
@@ -125,105 +124,2 @@ return {
 
-  setInitialMatrix() {
-    const parentSvg = this.el.ownerSVGElement;
-    const transform = parentSvg.createSVGTransform();
-
-    this.setState({
-      scale: 1,
-      matrix: [
-        transform.matrix.a,
-        transform.matrix.b,
-        transform.matrix.c,
-        transform.matrix.d,
-        transform.matrix.e,
-        transform.matrix.f,
-      ],
-    });
-  }
-
-  // based on the method of the same name from panzoom
-  // https://github.com/anvaka/panzoom/blob/master/index.js
-  getScaleMultiplier(delta) {
-    const { zoomSpeed } = this.props;
-
-    if (delta > 0) {
-      return 1 - zoomSpeed;
-    } else if (delta < 0) {
-      return 1 + zoomSpeed;
-    }
-
-    return 1;
-  }
-
-  // based on the zoomTo method from the panzoom project
-  // https://github.com/anvaka/panzoom/blob/master/lib/zoomTo.js
-  zoomTo(clientX, clientY, scaleMultiplier, event) {
-    const prevMatrix = this.state.matrix;
-    const prevScale = this.state.scale;
-    const scale = prevScale * scaleMultiplier;
-    const clientMatrix = this.el.ownerSVGElement.getScreenCTM();
-
-    const x = (clientX * clientMatrix.a) - clientMatrix.e;
-    const y = (clientY * clientMatrix.d) - clientMatrix.f;
-
-    // guardrails for scale max and min
-    if (scale > this.props.maxScale || scale < this.props.minScale) {
-      return;
-    }
-
-    this.setState({
-      scale,
-      matrix: [
-        scale,
-        prevMatrix[1],
-        prevMatrix[2],
-        scale,
-        x - (scaleMultiplier * (x - prevMatrix[4])),
-        y - (scaleMultiplier * (y - prevMatrix[5])),
-      ],
-    }, () => this.props.onZoom(event, scale));
-  }
-
-  panBy(clientX, clientY, event) {
-    const { width, height, panLimit } = this.props;
-    const {
-      matrix: prevMatrix,
-      dragX: prevDragX,
-      dragY: prevDragY,
-      scale,
-    } = this.state;
-
-    const dx = clientX - prevDragX;
-    const dy = clientY - prevDragY;
-    const newX = prevMatrix[4] + dx;
-    const newY = prevMatrix[5] + dy;
-
-    // check that we aren't passing the panLimit
-    // TODO this feels a little janky in practice
-    // This doesn't work well for data that exceeds the canvas size. The limit
-    // here assumes the data fits in side of the canvas at scale >= 1. Ideally,
-    // the pan limit would hault at (width|height / 2) + border node position.
-    // It is probably better to have unlimited panning than to prematurely block
-    // panning and hide data.
-
-    if (
-      (Math.abs(newX / scale)) > (width * panLimit) ||
-      (Math.abs(newY / scale)) > (height * panLimit)
-    ) {
-      return;
-    }
-
-    this.setState({
-      dragX: clientX,
-      dragY: clientY,
-      matrix: [
-        prevMatrix[0],
-        prevMatrix[1],
-        prevMatrix[2],
-        prevMatrix[3],
-        newX,
-        newY,
-      ],
-    }, () => this.props.onPan(event, newX, newY));
-  }
-
   onMouseDown(event) {
@@ -335,2 +231,105 @@ if (this.state.touching) {
 
+  setInitialMatrix() {
+    const parentSvg = this.el.ownerSVGElement;
+    const transform = parentSvg.createSVGTransform();
+
+    this.setState({
+      scale: 1,
+      matrix: [
+        transform.matrix.a,
+        transform.matrix.b,
+        transform.matrix.c,
+        transform.matrix.d,
+        transform.matrix.e,
+        transform.matrix.f,
+      ],
+    });
+  }
+
+  // based on the method of the same name from panzoom
+  // https://github.com/anvaka/panzoom/blob/master/index.js
+  getScaleMultiplier(delta) {
+    const { zoomSpeed } = this.props;
+
+    if (delta > 0) {
+      return 1 - zoomSpeed;
+    } else if (delta < 0) {
+      return 1 + zoomSpeed;
+    }
+
+    return 1;
+  }
+
+  // based on the zoomTo method from the panzoom project
+  // https://github.com/anvaka/panzoom/blob/master/lib/zoomTo.js
+  zoomTo(clientX, clientY, scaleMultiplier, event) {
+    const prevMatrix = this.state.matrix;
+    const prevScale = this.state.scale;
+    const scale = prevScale * scaleMultiplier;
+    const clientMatrix = this.el.ownerSVGElement.getScreenCTM();
+
+    const x = (clientX * clientMatrix.a) - clientMatrix.e;
+    const y = (clientY * clientMatrix.d) - clientMatrix.f;
+
+    // guardrails for scale max and min
+    if (scale > this.props.maxScale || scale < this.props.minScale) {
+      return;
+    }
+
+    this.setState({
+      scale,
+      matrix: [
+        scale,
+        prevMatrix[1],
+        prevMatrix[2],
+        scale,
+        x - (scaleMultiplier * (x - prevMatrix[4])),
+        y - (scaleMultiplier * (y - prevMatrix[5])),
+      ],
+    }, () => this.props.onZoom(event, scale));
+  }
+
+  panBy(clientX, clientY, event) {
+    const { width, height, panLimit } = this.props;
+    const {
+      matrix: prevMatrix,
+      dragX: prevDragX,
+      dragY: prevDragY,
+      scale,
+    } = this.state;
+
+    const dx = clientX - prevDragX;
+    const dy = clientY - prevDragY;
+    const newX = prevMatrix[4] + dx;
+    const newY = prevMatrix[5] + dy;
+
+    // check that we aren't passing the panLimit
+    // TODO this feels a little janky in practice
+    // This doesn't work well for data that exceeds the canvas size. The limit
+    // here assumes the data fits in side of the canvas at scale >= 1. Ideally,
+    // the pan limit would hault at (width|height / 2) + border node position.
+    // It is probably better to have unlimited panning than to prematurely block
+    // panning and hide data.
+
+    if (
+      (Math.abs(newX / scale)) > (width * panLimit) ||
+      (Math.abs(newY / scale)) > (height * panLimit)
+    ) {
+      return;
+    }
+
+    this.setState({
+      dragX: clientX,
+      dragY: clientY,
+      matrix: [
+        prevMatrix[0],
+        prevMatrix[1],
+        prevMatrix[2],
+        prevMatrix[3],
+        newX,
+        newY,
+      ],
+    }, () => this.props.onPan(event, newX, newY));
+  }
+
   render() {
@@ -337,0 +336,0 @@ const {

src/propTypes/link.js

@@ -21,3 +21,3 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 
@@ -24,0 +24,0 @@ export default PropTypes.shape({

src/propTypes/node.js

@@ -21,3 +21,3 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 
@@ -24,0 +24,0 @@ export default PropTypes.shape({

src/propTypes/simulation.js

@@ -21,3 +21,3 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 
@@ -24,0 +24,0 @@ export const DEFAULT_SIMULATION_PROPS = {

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

1586437

decreased by-58.66%

Dev dependency count

57

increased by1.79%

Number of package files

53

decreased by-3.64%

Lines of code

12112

decreased by-53.8%

Dependency changes

• + Addedlodash.reduce@^4.6.0

• + Addedprop-types@^15.5.10

• + Addedlodash.reduce@4.6.0(transitive)

• - Removedlodash@^4.17.4

• - Removedreact-addons-shallow-compare@0.14.x - 15.x

• - Removedlodash@4.17.21(transitive)

• - Removedreact-addons-shallow-compare@15.6.3(transitive)