react-konva - npm Package Compare versions

Comparing version 0.6.7 to 0.6.10

package.json

 {
   "name": "react-konva",
   "description": "React binding to canvas element via Konva framework",
-  "version": "0.6.7",
+  "version": "0.6.10",
   "keywords": [
@@ -19,22 +19,37 @@ "react",
   "dependencies": {
-    "fbjs": "^0.8.0",
-    "object-assign": "^4.0.1"
+    "fbjs": "^0.8.3",
+    "object-assign": "^4.1.0"
   },
   "peerDependencies": {
-    "react": "^15.0.1",
+    "react": "^15.1.0",
     "konva": ">=0.10.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.3.17",
-    "babel-core": "^6.3.26",
-    "babel-loader": "^6.2.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
-    "webpack": "^1.12.9"
+    "babel-core": "^6.9.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.9.0",
+    "chai": "^3.5.0",
+    "enzyme": "^2.3.0",
+    "jsdom": "^9.2.0",
+    "konva": "^0.13.0",
+    "mocha": "^2.5.3",
+    "mocha-phantomjs": "^4.0.2",
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "sinon": "^2.0.0-pre",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
   },
   "scripts": {
+    "test:compile": "webpack --config webpack.test.config.js --progress --profile --colors",
+    "test:run": "mocha-phantomjs test/index.html",
+    "test:clean": "rm ./test/tests.bundle.js",
+    "test:watch": "webpack-dev-server --config webpack.test.config.js --progress --profile --colors",
+    "test": "npm run test:compile && npm run test:run && npm run test:clean",
     "build": "webpack --progress --profile --colors"
-  }
+  },
+  "typings": "react-konva.d.ts"
 }

README.md

 # React Konva
 
+[![Build Status](https://travis-ci.org/lavrton/react-konva.svg?branch=master)](https://travis-ci.org/lavrton/react-konva)
+
 ![ReactKonva Logo](https://cloud.githubusercontent.com/assets/1443320/12193428/3bda2fcc-b623-11e5-8319-b1ccfc95eaec.png)
@@ -9,3 +11,3 @@
 
-# [DEMO](http://jsbin.com/camene/edit?html,js,output)
+# [DEMO](http://jsbin.com/camene/edit?js,output)
 
@@ -85,3 +87,42 @@ An attempt to make [React](http://facebook.github.io/react/) work with the HTML5 canvas library. The goal is to have
 
+## Documentation
 
+### Getting reference to "native" object
+
+To get reference of Konva instance of a node you can use `ref` property.
+
+```javascript
+class MyShape extends React.Component {
+    componentDidMount() {
+        // log Konva.Circle instance
+        console.log(this.refs.circle);
+    }
+    render() {
+        return (
+            <Circle ref="circle" radius={50} fill="black"/>
+        );
+    }
+}
+```
+
+That will work for all nodes except `Stage`. To get `Stage` instance you have to use:
+
+```javascript
+class App extends React.Component {
+    componentDidMount() {
+        // log stage react wrapper
+        console.log(this.refs.stage);
+        // log Konva.Stage instance
+        console.log(this.refs.stage.getStage());
+    }
+    render() {
+        return (
+            <Stage ref="stage" width="300" height="300"/>
+        );
+    }
+}
+```
+
+
+
 ## Comparisons
@@ -88,0 +129,0 @@

src/react-konva.js

@@ -49,2 +49,3 @@ // Adapted from ReactART:
     ReactKonvaComponent.displayName = name;
+
     for (var i = 1, l = arguments.length; i < l; i++) {
@@ -132,113 +133,9 @@ assign(ReactKonvaComponent.prototype, arguments[i]);
         }
-    }
-});
-
-
-
-var Stage = React.createClass({
-    displayName: 'Stage',
-
-    mixins: [ContainerMixin],
-
-    componentDidMount: function() {
-
-        this.node = new Konva.Stage({
-            container: this.domNode,
-            width: this.props.width,
-            height: this.props.height
-        });
-
-        var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
-
-        transaction.perform(
-            this.mountAndInjectChildren,
-            this,
-            this.props.children,
-            transaction,
-            ReactInstanceMap.get(this)._context
-        );
-        ReactUpdates.ReactReconcileTransaction.release(transaction);
     },
-
-    componentWillReceiveProps: function() {
-        
-    },
-
-  componentDidUpdate: function(oldProps) {
-    var node = this.node;
-    if (this.props.width != oldProps.width ||
-        this.props.height != oldProps.height) {
-      node.size({
-        width: +this.props.width,
-        height: +this.props.height
-      });
+    mountAndAddChildren() {
+        console.log('mountAndAddChildren')
     }
-
-    var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
-    transaction.perform(
-      this.updateChildren,
-      this,
-      this.props.children,
-      transaction,
-      ReactInstanceMap.get(this)._context
-    );
-    ReactUpdates.ReactReconcileTransaction.release(transaction);
-
-    if (node.render) {
-      node.render();
-    }
-  },
-
-  componentWillUnmount: function() {
-    this.unmountChildren();
-  },
-
-  render: function() {
-    var props = this.props;
-
-    return (
-      React.createElement('div', {
-        ref: function(c)  {return this.domNode = c;}.bind(this),
-        className: props.className,
-        role: props.role,
-        style: props.style,
-        tabindex: props.tabindex,
-        title: props.title}
-      )
-    );
-  }
-
 });
 
 
-var GroupMixin = {
-  mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
-    this.node = new Konva[this.constructor.displayName]();
-    nativeParent.node.add(this.node);
-    var props = this._initialProps;
-    this.applyNodeProps(emptyObject, props);
-    this.mountAndInjectChildren(props.children, transaction, context);
-    return {
-        children: [],
-        node: this.node,
-        html: null,
-        text: null
-    }
-  },
-
-  receiveComponent: function(nextComponent, transaction, context) {
-    var props = nextComponent.props;
-    var oldProps = this._initialProps;
-    this.applyNodeProps(oldProps, props);
-    this.updateChildren(props.children, transaction, context);
-    this._currentElement = nextComponent;
-  },
-
-  unmountComponent: function() {
-    this.destroyEventListeners();
-    this.unmountChildren();
-  }
-}
-
-
 var NodeMixin = {
@@ -252,3 +149,3 @@
     var props = nextComponent.props;
-    var oldProps = this._initialProps;
+    var oldProps = this._currentElement.props || this._initialProps;
     this.applyNodeProps(oldProps, props);
@@ -271,6 +168,2 @@ this.updateChildren(props.children, transaction, context);
 
-  destroyEventListeners: function() {
-     // NOPE...
-  },
-
   getNativeNode: function() {
@@ -336,2 +229,104 @@ return this.node;
 
+
+var Stage = React.createClass({
+    propTypes: {
+        width: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string,
+        ]),
+        height: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string,
+        ])
+    },
+    displayName: 'Stage',
+
+    mixins: [ContainerMixin],
+
+    componentDidMount: function() {
+        this.node = new Konva.Stage({
+            container: this.domNode,
+            width: this.props.width,
+            height: this.props.height
+        });
+        this.applyNodeProps(emptyObject, this.props);
+        this._debugID = this._reactInternalInstance._debugID;
+        var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
+
+        transaction.perform(
+            this.mountAndInjectChildren,
+            this,
+            this.props.children,
+            transaction,
+            ReactInstanceMap.get(this)._context
+        );
+        ReactUpdates.ReactReconcileTransaction.release(transaction);
+
+        this.node.draw();
+    },
+
+    getStage: function() {
+        return this.node;
+    },
+
+    componentDidUpdate: function(oldProps) {
+        var node = this.node;
+
+        this.applyNodeProps(oldProps, this.props);
+
+        var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
+        transaction.perform(
+            this.updateChildren,
+            this,
+            this.props.children,
+            transaction,
+            ReactInstanceMap.get(this)._context
+        );
+        ReactUpdates.ReactReconcileTransaction.release(transaction);
+    },
+
+    componentWillUnmount: function() {
+        this.unmountChildren();
+    },
+
+    applyNodeProps: NodeMixin.applyNodeProps,
+
+    render: function() {
+        var props = this.props;
+
+        return (
+            React.createElement('div', {
+                ref: function(c)  {return this.domNode = c;}.bind(this),
+                className: props.className,
+                role: props.role,
+                style: props.style,
+                tabindex: props.tabindex,
+                title: props.title}
+            )
+        );
+    }
+});
+
+
+var GroupMixin = {
+  mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
+    this.node = new Konva[this.constructor.displayName]();
+    nativeParent.node.add(this.node);
+    var props = this._initialProps;
+    this.applyNodeProps(emptyObject, props);
+    this.mountAndInjectChildren(props.children, transaction, context);
+    return {
+        children: [],
+        node: this.node,
+        html: null,
+        text: null
+    }
+  },
+
+  unmountComponent: function() {
+    this.unmountChildren();
+  }
+}
+
+
 var ShapeMixin = {
@@ -346,3 +341,5 @@
     this.node = new Konva[this.constructor.displayName]();
-    nativeParent.node.add(this.node);
+    if (nativeParent) {
+        nativeParent.node.add(this.node);
+    }
     this.applyNodeProps(emptyObject, this._initialProps);
@@ -359,3 +356,3 @@ return {
     var props = nextComponent.props;
-    var oldProps = this._initialProps;
+    var oldProps = this._currentElement.props || this._initialProps;
     this.applyNodeProps(oldProps, props);
@@ -362,0 +359,0 @@ this._currentElement = nextComponent;

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

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

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

27157

increased by74.47%

Number of package files

12

increased by100%

Lines of code

600

increased by86.34%

Number of lines in readme file

141

increased by41%

Worsened metrics

Dev dependency count

17

increased by112.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedfbjs@^0.8.3

• Updatedobject-assign@^4.1.0