react-konva - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

package.json

 {
   "name": "react-konva",
   "description": "React binding to canvas element via Konva framework",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "keywords": [
@@ -40,3 +40,3 @@ "react",
     "mocha": "^3.4.2",
-    "mocha-phantomjs": "^4.1.0",
+    "mocha-headless-chrome": "^1.5.0",
     "react": "~15.6.1",
@@ -52,3 +52,3 @@ "react-addons-test-utils": "^15.6.0",
     "test:compile": "webpack --config webpack.test.config.js --progress --profile --colors",
-    "test:run": "mocha-phantomjs test/index.html",
+    "test:run": "mocha-headless-chrome -f test/index.html",
     "test:clean": "rm ./test/tests.bundle.js",
@@ -55,0 +55,0 @@ "test:watch": "webpack-dev-server --config webpack.test.config.js --progress --profile --colors",

react-konva.d.ts

 import * as React from 'react';
 import * as Konva from 'konva';
 
-export class KonvaNodeComponent<Node extends Konva.Node, Props = Konva.NodeConfig> extends React.Component<Props, any> {
+export interface KonvaNodeProps {
+  onMouseOver?(evt: any): void;
+  onMouseMove?(evt: any): void;
+  onMouseOut?(evt: any): void;
+  onMouseEnter?(evt: any): void;
+  onMouseLeave?(evt: any): void;
+  onMouseDown?(evt: any): void;
+  onMouseUp?(evt: any): void;
+  onWheel?(evt: any): void;
+  onClick?(evt: any): void;
+  onDblClick?(evt: any): void;
+  onTouchStart?(evt: any): void;
+  onTouchMove?(evt: any): void;
+  onTouchEnd?(evt: any): void;
+  onTap?(evt: any): void;
+  onDblTap?(evt: any): void;
+  onDragStart?(evt: any): void;
+  onDragMove?(evt: any): void;
+  onDragEnd?(evt: any): void;
+}
+
+export class KonvaNodeComponent<Node extends Konva.Node, Props = Konva.NodeConfig> extends React.Component<Props & KonvaNodeProps> {
   getPublicInstance(): Node;
@@ -11,3 +32,3 @@ getNativeNode(): Node;
 
-export class KonvaContainerComponent<Container extends Konva.Container, Props = Konva.ContainerConfig> extends React.Component<Props, any> {
+export class KonvaContainerComponent<Container extends Konva.Container, Props = Konva.ContainerConfig> extends React.Component<Props & KonvaNodeProps> {
   // moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex): void;
@@ -26,6 +47,18 @@ // createChild(child, afterNode, mountImage): void;
   height?: number | string;
+  onContentMouseOver?(evt: any): void;
+  onContentMouseMove?(evt: any): void;
+  onContentMouseOut?(evt: any): void;
+  onContentMouseDown?(evt: any): void;
+  onContentMouseUp?(evt: any): void;
+  onContentClick?(evt: any): void;
+  onContentDblClick?(evt: any): void;
+  onContentTouchStart?(evt: any): void;
+  onContentTouchMove?(evt: any): void;
+  onContentTouchEnd?(evt: any): void;
+  onContentTap?(evt: any): void;
+  onContentDblTap?(evt: any): void;
 }
 
 /** Stage */
-export class Stage extends KonvaContainerComponent<Konva.Stage, StageProps>{
+export class Stage extends KonvaContainerComponent<Konva.Stage, StageProps> {
   getStage(): Konva.Stage;
@@ -32,0 +65,0 @@ }

README.md

@@ -11,3 +11,3 @@ # React Konva
 
-# [DEMO](http://jsbin.com/camene/edit?js,output)
+# [DEMO](http://jsbin.com/lixamajori/edit?js,output)
 
@@ -38,41 +38,39 @@ An attempt to make [React](http://facebook.github.io/react/) work with the HTML5 canvas library. The goal is to have
 class MyRect extends React.Component {
-    constructor(...args) {
-      super(...args);
-      this.state = {
-        color: 'green'
-      };
-      this.handleClick = this.handleClick.bind(this);
-    }
-    handleClick() {
-      this.setState({
-        color: Konva.Util.getRandomColor()
-      });
-    }
-    render() {
-        return (
-            <Rect
-                x={10} y={10} width={50} height={50}
-                fill={this.state.color}
-                shadowBlur={10}
-                onClick={this.handleClick}
-            />
-        );
-    }
+  state = { color: 'green' };
+
+  handleClick = () => {
+    // window.Konva is a global variable for Konva framework namespace
+    this.setState({
+      color: window.Konva.Util.getRandomColor()
+    });
+  }
+
+  render() {
+    return (
+      <Rect
+        x={10}
+        y={10}
+        width={50}
+        height={50}
+        fill={this.state.color}
+        shadowBlur={5}
+        onClick={this.handleClick}
+      />
+    );
+  }
 }
 
-function App() {
-    // Stage - is a div wrapper
-    // Layer - is a <canvas> element on the page
-    // so you can use several canvases. It may help you to improve performance a lot.
+class App extends React.Component {
+  render() {
     return (
       <Stage width={700} height={700}>
         <Layer>
-            <MyRect/>
+          <MyRect />
         </Layer>
       </Stage>
     );
+  }
 }
 
-
-ReactDOM.render(<App/>, document.getElementById('container'));
+ReactDOM.render(<App />, document.getElementById('container'));
 ```
@@ -79,0 +77,0 @@

No alert changes

Improved metrics

Total package byte prevSize

24710

3.63%

Lines of code

442

7.8%

Worsened metrics

Number of lines in readme file

276

-0.72%

No dependency changes