react-konva - npm Package Compare versions

Comparing version 0.6.4 to 0.6.6

package.json

 {
   "name": "react-konva",
   "description": "React binding to canvas element via Konva framework",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "keywords": [
@@ -23,3 +23,3 @@ "react",
   "peerDependencies": {
-    "react": ">=0.14.0",
+    "react": "^15.0.1",
     "konva": ">=0.10.0"
@@ -26,0 +26,0 @@ },

src/react-konva.js

@@ -5,8 +5,4 @@ // Adapted from ReactART:
 var Konva = require('konva');
-var React = require('react');
+var React = require('react/lib/React');
 
-// hack for react-konva.gloval.js build
-window.React = React;
-
-
 var ReactInstanceMap = require('react/lib/ReactInstanceMap');
@@ -19,4 +15,26 @@ var ReactMultiChild = require('react/lib/ReactMultiChild');
 
+
+// some patching to make Konva.Node looks like DOM nodes
+var oldAdd = Konva.Container.prototype.add;
+Konva.Container.prototype.add = function(child) {
+    child.parentNode = this;
+    oldAdd.apply(this, arguments);
+}
+
+Konva.Container.prototype.replaceChild = function(newChild, oldChild) {
+    var index = oldChild.index;
+    var parent = oldChild.parent;
+    oldChild.destroy();
+    parent.add(newChild);
+    if (newChild.index !== index) {
+        newChild.setZIndex(index);
+    }
+    parent.getLayer().batchDraw();
+}
+
+
+
+
 function createComponent(name) {
-    var ReactKonvaComponent = function(props) {
+    var ReactKonvaComponent = function(element) {
         this.node = null;
@@ -28,2 +46,4 @@ this.subscriptions = null;
         this._mostRecentlyPlacedChild = null;
+        this._initialProps = element.props;
+        this._currentElement = element;
     };
@@ -42,7 +62,6 @@
 
-    // TODO: test and rewrite
-    moveChild: function(child, toIndex) {
-        var childNode = child._mountImage;
-        if (childNode.index !== toIndex) {
-            childNode.setZIndex(toIndex);
+    moveChild: function(prevChild, lastPlacedNode, nextIndex, lastIndex) {
+        var childNode = prevChild._mountImage.node;
+        if (childNode.index !== nextIndex) {
+            childNode.setZIndex(nextIndex);
 	        var layer = childNode.getLayer();
@@ -53,5 +72,7 @@ layer && layer.batchDraw();
 
-    createChild: function(child, childNode) {
-        child._mountImage = childNode;
+    createChild: function(child, afterNode, mountImage) {
+        child._mountImage = mountImage;
+        var childNode = mountImage.node;
         childNode.moveTo(this.node);
+        childNode.parentNode = this.node;
         if (child._mountIndex !== childNode.index) {
@@ -65,5 +86,5 @@ childNode.setZIndex(child._mountIndex);
 
-    removeChild: function(child) {
-	       var layer = child._mountImage.getLayer();
-           child._mountImage.destroy();
+    removeChild: function(child, node) {
+           child._mountImage.node.destroy();
+           var layer = child._mountImage.node.getLayer();
 	       layer && layer.batchDraw();
@@ -86,4 +107,2 @@ child._mountImage = null;
 
-    // Shorthands
-
     mountAndInjectChildren: function(children, transaction, context) {
@@ -104,12 +123,14 @@ var mountedImages = this.mountChildren(
                 // for instance <noscript> for null element
-                if (mountedImages[i].moveTo) {
-                  mountedImages[i].moveTo(this.node);
-                } else {
-                  var message =
-                    "Looks like one of child element is not Konva.Node." +
-                    "react-konva do not support in for now."
-                    "if you have empty(null) child, replace it with <Group/>"
-                  console.error(message, this);
-
+                var node = mountedImages[i].node;
+                if ((!node instanceof Konva.Node)) {
+                    var message =
+                      "Looks like one of child element is not Konva.Node." +
+                      "react-konva do not support in for now."
+                      "if you have empty(null) child, replace it with <Group/>"
+                    console.error(message, this);
+                    continue;
                 }
+                if (node.parent !== this.node) {
+                    node.moveTo(this.node);
+                }
                 i++;
@@ -194,13 +215,16 @@ }
 
-// Various nodes that can go into a surface
 
-
 var GroupMixin = {
-  mountComponent: function(rootID, transaction, context) {
-    // this.node = Mode.Group();
+  mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
     this.node = new Konva[this.constructor.displayName]();
-    var props = this._currentElement.props;
+    nativeParent.node.add(this.node);
+    var props = this._initialProps;
     this.applyNodeProps(emptyObject, props);
     this.mountAndInjectChildren(props.children, transaction, context);
-    return this.node;
+    return {
+        children: [],
+        node: this.node,
+        html: null,
+        text: null
+    }
   },
@@ -210,3 +234,3 @@
     var props = nextComponent.props;
-    var oldProps = this._currentElement.props;
+    var oldProps = this._initialProps;
     this.applyNodeProps(oldProps, props);
@@ -232,3 +256,3 @@ this.updateChildren(props.children, transaction, context);
     var props = nextComponent.props;
-    var oldProps = this._currentElement.props;
+    var oldProps = this._initialProps;
     this.applyNodeProps(oldProps, props);
@@ -255,2 +279,6 @@ this.updateChildren(props.children, transaction, context);
 
+  getNativeNode: function() {
+    return this.node;
+  },
+
   applyNodeProps: function(oldProps, props) {
@@ -319,8 +347,12 @@ var updatedProps = {};
 
-  mountComponent: function(rootID, transaction, context) {
-    // this.node = Mode.Shape();
+  mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
     this.node = new Konva[this.constructor.displayName]();
-    var props = this._currentElement.props;
-    this.applyNodeProps(emptyObject, props);
-    return this.node;
+    nativeParent.node.add(this.node);
+    this.applyNodeProps(emptyObject, this._initialProps);
+    return {
+        children: [],
+        node: this.node,
+        html: null,
+        text: null
+    }
   },
@@ -330,3 +362,3 @@
     var props = nextComponent.props;
-    var oldProps = this._currentElement.props;
+    var oldProps = this._initialProps;
     this.applyNodeProps(oldProps, props);
@@ -333,0 +365,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

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

15516

increased by8.37%

Number of package files

6

increased by20%

Lines of code

320

increased by13.07%

No dependency changes