react-konva - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "react-konva",
   "description": "React binding to canvas element via Konva framework",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "keywords": [
@@ -19,3 +19,3 @@ "react",
   "dependencies": {
-    "fbjs": "^0.8.3",
+    "fbjs": "^0.8.5",
     "object-assign": "^4.1.0"
@@ -25,22 +25,22 @@ },
     "react": "^15.1.0",
-    "konva": "^1.0.1"
+    "konva": "^1.2.2"
   },
   "devDependencies": {
-    "babel-core": "^6.10.4",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-register": "^6.9.0",
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-register": "^6.18.0",
     "chai": "^3.5.0",
-    "enzyme": "^2.3.0",
-    "jsdom": "^9.4.0",
-    "konva": "^1.0.1",
-    "mocha": "^3.0.0",
+    "enzyme": "^2.6.0",
+    "jsdom": "^9.8.3",
+    "konva": "^1.2.2",
+    "mocha": "^3.1.2",
     "mocha-phantomjs": "^4.1.0",
-    "react": "^15.2.0",
-    "react-addons-test-utils": "^15.2.0",
-    "react-dom": "^15.2.0",
+    "react": "^15.3.2",
+    "react-addons-test-utils": "^15.3.2",
+    "react-dom": "^15.3.2",
     "sinon": "^2.0.0-pre",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^1.13.3",
+    "webpack-dev-server": "^1.16.2"
   },
@@ -47,0 +47,0 @@ "scripts": {

README.md

@@ -187,1 +187,92 @@ # React Konva
 ```
+
+### Using images
+
+For images you need manually create native window.Image instance or `<canvas>` element
+and use it as `image` attribute of `ReactKonva.Image` component.
+
+Demo: http://jsbin.com/wedovemota/1/edit?js,output
+
+```JavaScript
+import {Layer, Stage, Image} from 'react-konva';
+
+// try drag& drop rectangle
+class MyImage extends React.Component {
+    state = {
+      image: null
+    }
+    componentDidMount() {
+      const image = new window.Image();
+      image.src = 'http://konvajs.github.io/assets/yoda.jpg';
+      image.onload = () => {
+        this.setState({
+          image: image
+        });
+      }
+    }
+
+    render() {
+        return (
+            <Image
+              image={this.state.image}
+            />
+        );
+    }
+}
+
+function App() {
+    return (
+      <Stage width={700} height={700}>
+        <Layer>
+            <MyImage/>
+        </Layer>
+      </Stage>
+    );
+}
+
+
+ReactDOM.render(<App/>, document.getElementById('container'));
+```
+
+### Using filters
+
+To apply filters you need to cache `Konva.Node` (`ref` of all `react-konva` components).
+
+DEMO: http://jsbin.com/ceyegucibe/1/edit?html,js,output
+
+```javascript
+class MyRect extends React.Component {
+    constructor(...args) {
+      super(...args);
+      this.state = {
+        color: 'green'
+      };
+      this.handleClick = this.handleClick.bind(this);
+    }
+    componentDidMount() {
+      this.rect.cache();
+    }
+    handleClick() {
+      this.setState({
+        color: Konva.Util.getRandomColor()
+      }, () => {
+        // IMPORTANT
+        // recache on update
+        this.rect.cache();
+      });
+    }
+    render() {
+        return (
+            <Rect
+                filters={[Konva.Filters.Noise]}
+                noise={1}
+                x={10} y={10} width={50} height={50}
+                fill={this.state.color}
+                shadowBlur={10}
+                ref={(node) => { this.rect = node;}}
+                onClick={this.handleClick}
+            />
+        );
+    }
+}
+```

src/react-konva.js

@@ -26,2 +26,3 @@ // Adapted from ReactART:
   oldChild.destroy();
+  oldChild.parentNode = null;
   parent.add(newChild);
@@ -86,2 +87,3 @@ if (newChild.index !== index) {
     child._mountImage.node.destroy();
+    child._mountImage.node.parentNode = null;
 	  layer && layer.batchDraw();
@@ -307,2 +309,3 @@ child._mountImage = null;
     this.node.destroy();
+    this.node.parentNode = null;
   },
@@ -309,0 +312,0 @@

No alert changes

Improved metrics

Total package byte prevSize

21000

11.09%

Lines of code

362

0.84%

Number of lines in readme file

278

48.66%

Dependency changes

• Updated

  fbjs@^0.8.5