update docs, update version

konva-node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva-node",
-  "version": "0.5.5",
+  "version": "0.9.0",
   "description": "Konva framework for NodeJS env",
   "main": "index.js",
   "files": [
@@ -26,6 +26,6 @@
   "license": "MIT",
   "dependencies": {
     "canvas": "^1.6.7",
-    "konva": "^1.7.3"
+    "konva": "^2.5.1"
   }
 }

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.5.1
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Sat Nov 17 2018
+ * Date: Thu Nov 22 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2627,9 +2627,9 @@
       return this._cache[attr];
     },
     /*
-         * when the logic for a cached result depends on ancestor propagation, use this
+     * when the logic for a cached result depends on ancestor propagation, use this
-         * method to clear self and children cache
+     * method to clear self and children cache
-         */
+     */
     _clearSelfAndDescendantCache: function(attr) {
       this._clearCache(attr);
 
@@ -2798,6 +2798,7 @@
     /**
      * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
      * The rectangle position is relative to parent container.
+     * The purpose of the method is similar to getBoundingClientRect API of the DOM.
      * @method
      * @memberof Konva.Node.prototype
      * @param {Object} config
@@ -3023,10 +3024,10 @@
         name;
 
       /*
-             * loop through types and attach event listeners to
+       * loop through types and attach event listeners to
-             * each one.  eg. 'click mouseover.namespace mouseout'
+       * each one.  eg. 'click mouseover.namespace mouseout'
-             * will create three event bindings
+       * will create three event bindings
-             */
+       */
       for (n = 0; n < len; n++) {
         event = events[n];
         parts = event.split(DOT);
@@ -3162,7 +3163,7 @@
       return this;
     },
     /**
-     * remove and destroy a node. Kill it forever! You should not reuse node after destroy().
+     * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
      * @method
      * @memberof Konva.Node.prototype
      * @example
@@ -4109,9 +4110,9 @@
         for (n = 0; n < len; n++) {
           listener = allListeners[n];
           /*
-                     * don't include konva namespaced listeners because
+           * don't include konva namespaced listeners because
-                     *  these are generated by the constructors
+           *  these are generated by the constructors
-                     */
+           */
           if (listener.name.indexOf(KONVA) < 0) {
             // if listeners array doesn't exist, then create it
             if (!node.eventListeners[key]) {
@@ -4169,7 +4170,7 @@
       return this._toKonvaCanvas(config)._canvas;
     },
     /**
-     * Creates a composite data URL. If MIME type is not
+     * Creates a composite data URL (base64 string). If MIME type is not
      * specified, then "image/png" will result. For "image/jpeg", specify a quality
      * level as quality (range 0.0 - 1.0)
      * @method
@@ -12144,8 +12145,8 @@
     };
   };
   /*
-     * Animation methods
+   * Animation methods
-     */
+   */
   Konva.Animation.prototype = {
     /**
      * set layers to be redrawn on each animation frame
@@ -12288,16 +12289,16 @@
       key,
       needRedraw;
     /*
-         * loop through all animations and execute animation
+     * loop through all animations and execute animation
-         *  function.  if the animation object has specified node,
+     *  function.  if the animation object has specified node,
-         *  we can add the node to the nodes hash to eliminate
+     *  we can add the node to the nodes hash to eliminate
-         *  drawing the same node multiple times.  The node property
+     *  drawing the same node multiple times.  The node property
-         *  can be the stage itself or a layer
+     *  can be the stage itself or a layer
-         */
+     */
     /*
-         * WARNING: don't cache animations.length because it could change while
+     * WARNING: don't cache animations.length because it could change while
-         * the for loop is running, causing a JS error
+     * the for loop is running, causing a JS error
-         */
+     */
 
     for (n = 0; n < animations.length; n++) {
       anim = animations[n];
@@ -12353,8 +12354,9 @@
    * batch draw. this function will not do immediate draw
    * but it will schedule drawing to next tick (requestAnimFrame)
    * @method
+   * @name batchDraw
    * @return {Konva.Layer} this
-   * @memberof Konva.Base.prototype
+   * @memberof Konva.BaseLayer.prototype
    */
   Konva.BaseLayer.prototype.batchDraw = function() {
     var that = this,
@@ -12376,6 +12378,7 @@
   /**
    * batch draw
    * @method
+   * @name batchDraw
    * @return {Konva.Stage} this
    * @memberof Konva.Stage.prototype
    */
@@ -16443,11 +16446,11 @@
       var layer = this.getLayer();
 
       /*
-             * animation object has no executable function because
+       * animation object has no executable function because
-             *  the updates are done with a fixed FPS with the setInterval
+       *  the updates are done with a fixed FPS with the setInterval
-             *  below.  The anim object only needs the layer reference for
+       *  below.  The anim object only needs the layer reference for
-             *  redraw
+       *  redraw
-             */
+       */
       this.anim.setLayers(layer);
       this._setInterval();
       this.anim.start();
@@ -16464,7 +16467,7 @@
     /**
      * determine if animation of sprite is running or not.  returns true or false
      * @method
-     * @memberof Konva.Animation.prototype
+     * @memberof Konva.Sprite.prototype
      * @returns {Boolean}
      */
     isRunning: function() {

konva.min.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.5.1
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Sat Nov 17 2018
+ * Date: Thu Nov 22 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)

src/Animation.js

@@ -66,8 +66,8 @@
     };
   };
   /*
-     * Animation methods
+   * Animation methods
-     */
+   */
   Konva.Animation.prototype = {
     /**
      * set layers to be redrawn on each animation frame
@@ -210,16 +210,16 @@
       key,
       needRedraw;
     /*
-         * loop through all animations and execute animation
+     * loop through all animations and execute animation
-         *  function.  if the animation object has specified node,
+     *  function.  if the animation object has specified node,
-         *  we can add the node to the nodes hash to eliminate
+     *  we can add the node to the nodes hash to eliminate
-         *  drawing the same node multiple times.  The node property
+     *  drawing the same node multiple times.  The node property
-         *  can be the stage itself or a layer
+     *  can be the stage itself or a layer
-         */
+     */
     /*
-         * WARNING: don't cache animations.length because it could change while
+     * WARNING: don't cache animations.length because it could change while
-         * the for loop is running, causing a JS error
+     * the for loop is running, causing a JS error
-         */
+     */
 
     for (n = 0; n < animations.length; n++) {
       anim = animations[n];
@@ -275,8 +275,9 @@
    * batch draw. this function will not do immediate draw
    * but it will schedule drawing to next tick (requestAnimFrame)
    * @method
+   * @name batchDraw
    * @return {Konva.Layer} this
-   * @memberof Konva.Base.prototype
+   * @memberof Konva.BaseLayer.prototype
    */
   Konva.BaseLayer.prototype.batchDraw = function() {
     var that = this,
@@ -298,6 +299,7 @@
   /**
    * batch draw
    * @method
+   * @name batchDraw
    * @return {Konva.Stage} this
    * @memberof Konva.Stage.prototype
    */

src/Context.js

@@ -623,7 +623,8 @@
       if (shape.hasStroke()) {
         if (!strokeScaleEnabled) {
           this.save();
-          this.setTransform(1, 0, 0, 1, 0, 0);
+          // set 2, because otherwise stroke will be 1/2 of its size
+          this.setTransform(2, 0, 0, 2, 0, 0);
         }
 
         this._applyLineCap(shape);

src/Node.js

@@ -98,9 +98,9 @@
       return this._cache[attr];
     },
     /*
-         * when the logic for a cached result depends on ancestor propagation, use this
+     * when the logic for a cached result depends on ancestor propagation, use this
-         * method to clear self and children cache
+     * method to clear self and children cache
-         */
+     */
     _clearSelfAndDescendantCache: function(attr) {
       this._clearCache(attr);
 
@@ -269,6 +269,7 @@
     /**
      * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
      * The rectangle position is relative to parent container.
+     * The purpose of the method is similar to getBoundingClientRect API of the DOM.
      * @method
      * @memberof Konva.Node.prototype
      * @param {Object} config
@@ -494,10 +495,10 @@
         name;
 
       /*
-             * loop through types and attach event listeners to
+       * loop through types and attach event listeners to
-             * each one.  eg. 'click mouseover.namespace mouseout'
+       * each one.  eg. 'click mouseover.namespace mouseout'
-             * will create three event bindings
+       * will create three event bindings
-             */
+       */
       for (n = 0; n < len; n++) {
         event = events[n];
         parts = event.split(DOT);
@@ -633,7 +634,7 @@
       return this;
     },
     /**
-     * remove and destroy a node. Kill it forever! You should not reuse node after destroy().
+     * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
      * @method
      * @memberof Konva.Node.prototype
      * @example
@@ -1580,9 +1581,9 @@
         for (n = 0; n < len; n++) {
           listener = allListeners[n];
           /*
-                     * don't include konva namespaced listeners because
+           * don't include konva namespaced listeners because
-                     *  these are generated by the constructors
+           *  these are generated by the constructors
-                     */
+           */
           if (listener.name.indexOf(KONVA) < 0) {
             // if listeners array doesn't exist, then create it
             if (!node.eventListeners[key]) {
@@ -1640,7 +1641,7 @@
       return this._toKonvaCanvas(config)._canvas;
     },
     /**
-     * Creates a composite data URL. If MIME type is not
+     * Creates a composite data URL (base64 string). If MIME type is not
      * specified, then "image/png" will result. For "image/jpeg", specify a quality
      * level as quality (range 0.0 - 1.0)
      * @method

src/Shape.js

@@ -260,6 +260,18 @@
       var fillRect = this.getSelfRect();
 
       var strokeWidth = (this.hasStroke() && this.strokeWidth()) || 0;
+
+      // var scale = {
+      //   x: 1,
+      //   y: 1
+      // };
+      // if (!this.strokeScaleEnabled()) {
+      //   var scale = this.getAbsoluteScale();
+      //   // scale = {
+      //   //   x: Math.abs(scale.x)
+      //   // }
+      // }
+
       var fillAndStrokeWidth = fillRect.width + strokeWidth;
       var fillAndStrokeHeight = fillRect.height + strokeWidth;
 

src/shapes/Sprite.js

@@ -167,11 +167,11 @@
       var layer = this.getLayer();
 
       /*
-             * animation object has no executable function because
+       * animation object has no executable function because
-             *  the updates are done with a fixed FPS with the setInterval
+       *  the updates are done with a fixed FPS with the setInterval
-             *  below.  The anim object only needs the layer reference for
+       *  below.  The anim object only needs the layer reference for
-             *  redraw
+       *  redraw
-             */
+       */
       this.anim.setLayers(layer);
       this._setInterval();
       this.anim.start();
@@ -188,7 +188,7 @@
     /**
      * determine if animation of sprite is running or not.  returns true or false
      * @method
-     * @memberof Konva.Animation.prototype
+     * @memberof Konva.Sprite.prototype
      * @returns {Boolean}
      */
     isRunning: function() {

src/shapes/Transformer.js

@@ -67,7 +67,7 @@
     if (isMirrored) {
       rad *= -1;
     }
-    var angle = (Konva.Util._radToDeg(rad) % 360 + 360) % 360;
+    var angle = ((Konva.Util._radToDeg(rad) % 360) + 360) % 360;
 
     if (
       Konva.Util._inRange(angle, 315 + 22.5, 360) ||
@@ -657,6 +657,7 @@
         this.getNode().rotation(newAttrs.rotation);
       }
       var pure = node.getClientRect({ skipTransform: true, skipShadow: true });
+
       var padding = this.getPadding();
       var scaleX = (newAttrs.width - padding * 2) / pure.width;
       var scaleY = (newAttrs.height - padding * 2) / pure.height;

test/unit/shapes/Transformer-test.js

@@ -71,6 +71,47 @@ suite('Transformer', function() {
     assert.equal(tr.rotation(), rect.rotation());
   });
 
+  test.skip('try to fit rectangle with strokeScaleEnabled = false', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 20,
+      y: 20,
+      width: 100,
+      height: 100,
+      fill: 'green',
+      stroke: 'rgba(0,0,0,0.5)',
+      strokeWidth: 40,
+      name: 'myCircle',
+      draggable: true,
+      strokeScaleEnabled: false
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer();
+    layer.add(tr);
+    tr.attachTo(rect);
+
+    layer.draw();
+
+    tr._fitNodeInto({
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 200
+    });
+
+    var scale = 200 / 140;
+
+    assert.equal(rect.x(), 0);
+    assert.equal(rect.y(), 0);
+    assert.equal(rect.width(), 100);
+    assert.equal(rect.height(), 100);
+    assert.equal(rect.scaleX(), scale);
+  });
+
   test('listen shape changes', function() {
     var stage = addStage();
     var layer = new Konva.Layer();