konva - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

CHANGELOG.md

@@ -8,2 +8,22 @@ # Change Log
 
+## [2.0.3][2018-04-21]
+
+### Added
+
+* Typescript defs for `Konva.Transformer`
+* Typescript defs for `globalCompositeOperation`
+
+## Changes
+
+* Fixed flow for `contextmenu` event. Now it will be triggered on shapes too
+* `find()` method for Containers can use a function as a parameter
+
+## Fixed
+
+* some bugs fixes for `group.getClientRect()`
+* `Konva.Arrow` will not draw dash for pointers
+* setAttr will trigger change event if new value is the same Object
+* better behavior of `dblclick` event when you click fast on different shapes
+* `stage.toDataURL` will use `pixelRatio = 1` by default.
+
 ## [2.0.2][2018-03-15]
@@ -10,0 +30,0 @@

konva.d.ts

@@ -8,2 +8,31 @@ declare namespace Konva {
 
+  type globalCompositeOperationType =
+    | ''
+    | 'source-over'
+    | 'source-in'
+    | 'source-out'
+    | 'source-atop'
+    | 'destination-over'
+    | 'destination-in'
+    | 'destination-out'
+    | 'destination-atop'
+    | 'lighter'
+    | 'copy'
+    | 'xor'
+    | 'multiply'
+    | 'screen'
+    | 'overlay'
+    | 'darken'
+    | 'lighten'
+    | 'color-dodge'
+    | 'color-burn'
+    | 'hard-light'
+    | 'soft-light'
+    | 'difference'
+    | 'exclusion'
+    | 'hue'
+    | 'saturation'
+    | 'color'
+    | 'luminosity';
+
   export class Util {
@@ -90,2 +119,3 @@ static getRandomColor(): string;
     preventDefault?: boolean;
+    globalCompositeOperation?: globalCompositeOperationType;
   }
@@ -287,2 +317,4 @@
     y(y: number): this;
+    globalCompositeOperation(): globalCompositeOperationType;
+    globalCompositeOperation(type: globalCompositeOperationType): this;
   }
@@ -293,2 +325,6 @@
     clipFunc?: (ctx: CanvasRenderingContext2D) => void;
+    clipX?: number;
+    clipY?: number;
+    clipWidth?: number;
+    clipHeight?: number;
   }
@@ -313,4 +349,4 @@
     destroyChildren(): void;
-    find(selector?: string): Collection;
-    findOne<T extends Node>(selector: string): T;
+    find(selector?: string | ((node: Node) => boolean)): Collection;
+    findOne<T extends Node>(selector: string | ((node: Node) => boolean)): T;
     getAllIntersections(pos: Vector2d): Shape[];
@@ -1002,2 +1038,23 @@ hasChildren(): boolean;
 
+  interface TransformerConfig extends ContainerConfig {
+    resizeEnabled?: boolean;
+    rotateEnabled?: boolean;
+    rotationSnaps?: Array<number>;
+    rotateHandlerOffset?: number;
+    lineEnabled?: number;
+    keepRatio?: boolean;
+    enabledHandlers?: Array<string>;
+    node?: Rect;
+  }
+
+  class Transformer extends Container {
+    constructor(config?: TransformerConfig);
+    attachTo(node: Node): void;
+    setNode(node: Node): void;
+    getNode(): Node;
+    detach(): void;
+    forceUpdate(): void;
+    update(): void;
+  }
+
   interface Vector2d {
@@ -1004,0 +1061,0 @@ x: number;

package.json

 {
   "name": "konva",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Anton Lavrenov",
@@ -44,2 +44,5 @@ "files": [
   ],
+  "prettier": {
+    "singleQuote": true
+  },
   "browser": {
@@ -46,0 +49,0 @@ "canvas": false,

README.md

@@ -26,3 +26,3 @@ <p align="center">
 ```html
-<script src="https://cdn.rawgit.com/konvajs/konva/2.0.2/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/2.0.3/konva.min.js"></script>
 <div id="container"></div>
@@ -29,0 +29,0 @@ <script>

src/Container.js

 (function() {
   'use strict';
   /**
-     * Container constructor.  Containers are used to contain nodes or other containers
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Node
-     * @abstract
-     * @param {Object} config
-     * @@nodeParams
-     * @@containerParams
-     */
+   * Container constructor.  Containers are used to contain nodes or other containers
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Node
+   * @abstract
+   * @param {Object} config
+   * @@nodeParams
+   * @@containerParams
+   */
   Konva.Container = function(config) {
@@ -23,16 +23,16 @@ this.__init(config);
     /**
-         * returns a {@link Konva.Collection} of direct descendant nodes
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {Function} [filterFunc] filter function
-         * @returns {Konva.Collection}
-         * @example
-         * // get all children
-         * var children = layer.getChildren();
-         *
-         * // get only circles
-         * var circles = layer.getChildren(function(node){
-         *    return node.getClassName() === 'Circle';
-         * });
-         */
+     * returns a {@link Konva.Collection} of direct descendant nodes
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {Function} [filterFunc] filter function
+     * @returns {Konva.Collection}
+     * @example
+     * // get all children
+     * var children = layer.getChildren();
+     *
+     * // get only circles
+     * var circles = layer.getChildren(function(node){
+     *    return node.getClassName() === 'Circle';
+     * });
+     */
     getChildren: function(filterFunc) {
@@ -52,7 +52,7 @@ if (!filterFunc) {
     /**
-         * determine if node has children
-         * @method
-         * @memberof Konva.Container.prototype
-         * @returns {Boolean}
-         */
+     * determine if node has children
+     * @method
+     * @memberof Konva.Container.prototype
+     * @returns {Boolean}
+     */
     hasChildren: function() {
@@ -62,6 +62,6 @@ return this.getChildren().length > 0;
     /**
-         * remove all children
-         * @method
-         * @memberof Konva.Container.prototype
-         */
+     * remove all children
+     * @method
+     * @memberof Konva.Container.prototype
+     */
     removeChildren: function() {
@@ -82,6 +82,6 @@ var children = Konva.Collection.toCollection(this.children);
     /**
-         * destroy all children
-         * @method
-         * @memberof Konva.Container.prototype
-         */
+     * destroy all children
+     * @method
+     * @memberof Konva.Container.prototype
+     */
     destroyChildren: function() {
@@ -102,10 +102,10 @@ var children = Konva.Collection.toCollection(this.children);
     /**
-         * Add node or nodes to container.
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {...Konva.Node} child
-         * @returns {Container}
-         * @example
-         * layer.add(shape1, shape2, shape3);
-         */
+     * Add node or nodes to container.
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {...Konva.Node} child
+     * @returns {Container}
+     * @example
+     * layer.add(shape1, shape2, shape3);
+     */
     add: function(child) {
@@ -149,26 +149,80 @@ if (arguments.length > 1) {
     /**
-         * return a {@link Konva.Collection} of nodes that match the selector.  Use '#' for id selections
-         * and '.' for name selections.  You can also select by type or class name. Pass multiple selectors
-         * separated by a space.
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {String} selector
-         * @returns {Collection}
-         * @example
-         * // select node with id foo
-         * var node = stage.find('#foo');
-         *
-         * // select nodes with name bar inside layer
-         * var nodes = layer.find('.bar');
-         *
-         * // select all groups inside layer
-         * var nodes = layer.find('Group');
-         *
-         * // select all rectangles inside layer
-         * var nodes = layer.find('Rect');
-         *
-         * // select node with an id of foo or a name of bar inside layer
-         * var nodes = layer.find('#foo, .bar');
-         */
+     * return a {@link Konva.Collection} of nodes that match the selector.
+     * You can provide a string with '#' for id selections and '.' for name selections.
+     * Or a function that will return true/false when a node is passed through.  See example below.
+     * With strings you can also select by type or class name. Pass multiple selectors
+     * separated by a space.
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {String | Function} selector
+     * @returns {Collection}
+     * @example
+     *
+     * Passing a string as a selector
+     * // select node with id foo
+     * var node = stage.find('#foo');
+     *
+     * // select nodes with name bar inside layer
+     * var nodes = layer.find('.bar');
+     *
+     * // select all groups inside layer
+     * var nodes = layer.find('Group');
+     *
+     * // select all rectangles inside layer
+     * var nodes = layer.find('Rect');
+     *
+     * // select node with an id of foo or a name of bar inside layer
+     * var nodes = layer.find('#foo, .bar');
+     *
+     * Passing a function as a selector
+     *
+     * // get all Groups
+     * var groups = stage.find(node => {
+     *  return node.getType() === 'Group';
+     * });
+     *
+     * // get only Nodes with partial opacity
+     * var alphaNodes = layer.find(node => {
+     *  return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
+     * });
+     */
     find: function(selector) {
+      // protecting _generalFind to prevent user from accidentally adding
+      // second argument and getting unexpected `findOne` result
+      return this._generalFind(selector, false);
+    },
+    /**
+     * return a first node from `find` method
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {String | Function} selector
+     * @returns {Konva.Node | Undefined}
+     * @example
+     * // select node with id foo
+     * var node = stage.findOne('#foo');
+     *
+     * // select node with name bar inside layer
+     * var nodes = layer.findOne('.bar');
+     *
+     * // select the first node to return true in a function
+     * var node = stage.findOne(node => {
+     *  return node.getType() === 'Shape'
+     * })
+     */
+    findOne: function(selector) {
+      var result = this._generalFind(selector, true);
+      return result.length > 0 ? result[0] : undefined;
+    },
+    _generalFind: function(selector, findOne) {
+      var retArr = [];
+
+      if (typeof selector === 'string') {
+        retArr = this._findByString(selector, findOne);
+      } else if (typeof selector === 'function') {
+        retArr = this._findByFunction(selector, findOne);
+      }
+
+      return Konva.Collection.toCollection(retArr);
+    },
+    _findByString: function(selector) {
       var retArr = [],
@@ -218,19 +272,29 @@ selectorArr = selector.replace(/ /g, '').split(','),
 
-      return Konva.Collection.toCollection(retArr);
+      return retArr;
     },
-    /**
-         * return a first node from `find` method
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {String} selector
-         * @returns {Konva.Node}
-         * @example
-         * // select node with id foo
-         * var node = stage.findOne('#foo');
-         *
-         * // select node with name bar inside layer
-         * var nodes = layer.findOne('.bar');
-         */
-    findOne: function(selector) {
-      return this.find(selector)[0];
+    // (fn: ((Node) => boolean, findOne?: boolean)
+    _findByFunction: function(fn, findOne) {
+      var retArr = [];
+
+      var addItems = function(el) {
+        // escape function if we've already found one.
+        if (findOne && retArr.length > 0) {
+          return;
+        }
+
+        var children = el.getChildren();
+        var clen = children.length;
+
+        if (fn(el)) {
+          retArr = retArr.concat(el);
+        }
+
+        for (var i = 0; i < clen; i++) {
+          addItems(children[i]);
+        }
+      };
+
+      addItems(this);
+
+      return retArr;
     },
@@ -286,8 +350,8 @@ _getNodeById: function(key) {
     /**
-         * determine if node is an ancestor
-         * of descendant
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {Konva.Node} node
-         */
+     * determine if node is an ancestor
+     * of descendant
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {Konva.Node} node
+     */
     isAncestorOf: function(node) {
@@ -314,13 +378,13 @@ var parent = node.getParent();
     /**
-         * get all shapes that intersect a point.  Note: because this method must clear a temporary
-         * canvas and redraw every shape inside the container, it should only be used for special sitations
-         * because it performs very poorly.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
-         * because it performs much better
-         * @method
-         * @memberof Konva.Container.prototype
-         * @param {Object} pos
-         * @param {Number} pos.x
-         * @param {Number} pos.y
-         * @returns {Array} array of shapes
-         */
+     * get all shapes that intersect a point.  Note: because this method must clear a temporary
+     * canvas and redraw every shape inside the container, it should only be used for special sitations
+     * because it performs very poorly.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
+     * because it performs much better
+     * @method
+     * @memberof Konva.Container.prototype
+     * @param {Object} pos
+     * @param {Number} pos.x
+     * @param {Number} pos.y
+     * @returns {Array} array of shapes
+     */
     getAllIntersections: function(pos) {
@@ -349,3 +413,3 @@ var arr = [];
 
-      if (this.isVisible()) {
+      if (this.isVisible() || caching) {
         if (!caching && cachedSceneCanvas) {
@@ -369,3 +433,3 @@ context.save();
 
-      if (this.shouldDrawHit(canvas)) {
+      if (this.shouldDrawHit(canvas) || caching) {
         if (layer) {
@@ -409,3 +473,6 @@ layer.clearHitCache();
         context.clip();
-        m = transform.copy().invert().getMatrix();
+        m = transform
+          .copy()
+          .invert()
+          .getMatrix();
         context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
@@ -452,5 +519,6 @@ }
         // skip invisible children
-        if (!child.isVisible()) {
+        if (!child.getVisible()) {
           return;
         }
+
         var rect = child.getClientRect({ relativeTo: that });
@@ -478,3 +546,14 @@
 
-      if (this.children.length !== 0) {
+      // if child is group we need to make sure it has visible shapes inside
+      var shapes = this.find('Shape');
+      var hasVisible = false;
+      for (var i = 0; i < shapes.length; i++) {
+        var shape = shapes[i];
+        if (shape.getVisible()) {
+          hasVisible = true;
+          break;
+        }
+      }
+
+      if (hasVisible) {
         selfRect = {
@@ -507,108 +586,108 @@ x: minX,
   /**
-     * get/set clip
-     * @method
-     * @name clip
-     * @memberof Konva.Container.prototype
-     * @param {Object} clip
-     * @param {Number} clip.x
-     * @param {Number} clip.y
-     * @param {Number} clip.width
-     * @param {Number} clip.height
-     * @returns {Object}
-     * @example
-     * // get clip
-     * var clip = container.clip();
-     *
-     * // set clip
-     * container.setClip({
-     *   x: 20,
-     *   y: 20,
-     *   width: 20,
-     *   height: 20
-     * });
-     */
+   * get/set clip
+   * @method
+   * @name clip
+   * @memberof Konva.Container.prototype
+   * @param {Object} clip
+   * @param {Number} clip.x
+   * @param {Number} clip.y
+   * @param {Number} clip.width
+   * @param {Number} clip.height
+   * @returns {Object}
+   * @example
+   * // get clip
+   * var clip = container.clip();
+   *
+   * // set clip
+   * container.setClip({
+   *   x: 20,
+   *   y: 20,
+   *   width: 20,
+   *   height: 20
+   * });
+   */
 
   Konva.Factory.addGetterSetter(Konva.Container, 'clipX');
   /**
-     * get/set clip x
-     * @name clipX
-     * @method
-     * @memberof Konva.Container.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get clip x
-     * var clipX = container.clipX();
-     *
-     * // set clip x
-     * container.clipX(10);
-     */
+   * get/set clip x
+   * @name clipX
+   * @method
+   * @memberof Konva.Container.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get clip x
+   * var clipX = container.clipX();
+   *
+   * // set clip x
+   * container.clipX(10);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Container, 'clipY');
   /**
-     * get/set clip y
-     * @name clipY
-     * @method
-     * @memberof Konva.Container.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get clip y
-     * var clipY = container.clipY();
-     *
-     * // set clip y
-     * container.clipY(10);
-     */
+   * get/set clip y
+   * @name clipY
+   * @method
+   * @memberof Konva.Container.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get clip y
+   * var clipY = container.clipY();
+   *
+   * // set clip y
+   * container.clipY(10);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Container, 'clipWidth');
   /**
-     * get/set clip width
-     * @name clipWidth
-     * @method
-     * @memberof Konva.Container.prototype
-     * @param {Number} width
-     * @returns {Number}
-     * @example
-     * // get clip width
-     * var clipWidth = container.clipWidth();
-     *
-     * // set clip width
-     * container.clipWidth(100);
-     */
+   * get/set clip width
+   * @name clipWidth
+   * @method
+   * @memberof Konva.Container.prototype
+   * @param {Number} width
+   * @returns {Number}
+   * @example
+   * // get clip width
+   * var clipWidth = container.clipWidth();
+   *
+   * // set clip width
+   * container.clipWidth(100);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Container, 'clipHeight');
   /**
-     * get/set clip height
-     * @name clipHeight
-     * @method
-     * @memberof Konva.Container.prototype
-     * @param {Number} height
-     * @returns {Number}
-     * @example
-     * // get clip height
-     * var clipHeight = container.clipHeight();
-     *
-     * // set clip height
-     * container.clipHeight(100);
-     */
+   * get/set clip height
+   * @name clipHeight
+   * @method
+   * @memberof Konva.Container.prototype
+   * @param {Number} height
+   * @returns {Number}
+   * @example
+   * // get clip height
+   * var clipHeight = container.clipHeight();
+   *
+   * // set clip height
+   * container.clipHeight(100);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Container, 'clipFunc');
   /**
-      * get/set clip function
-      * @name clipFunc
-      * @method
-      * @memberof Konva.Container.prototype
-      * @param {Function} function
-      * @returns {Function}
-      * @example
-      * // get clip function
-      * var clipFunction = container.clipFunc();
-      *
-      * // set clip height
-      * container.clipFunc(function(ctx) {
-      *   ctx.rect(0, 0, 100, 100);
-      * });
-      */
+   * get/set clip function
+   * @name clipFunc
+   * @method
+   * @memberof Konva.Container.prototype
+   * @param {Function} function
+   * @returns {Function}
+   * @example
+   * // get clip function
+   * var clipFunction = container.clipFunc();
+   *
+   * // set clip height
+   * container.clipFunc(function(ctx) {
+   *   ctx.rect(0, 0, 100, 100);
+   * });
+   */
 
   Konva.Collection.mapMethods(Konva.Container);
 })();

src/filters/Enhance.js

@@ -5,3 +5,5 @@ (function() {
     // Compute the range of the data
-    var fromRange = fromMax - fromMin, toRange = toMax - toMin, toValue;
+    var fromRange = fromMax - fromMin,
+      toRange = toMax - toMin,
+      toValue;
 
@@ -24,15 +26,15 @@ // If either range is 0, then the value can only be mapped to 1 value
   /**
-    * Enhance Filter. Adjusts the colors so that they span the widest
-    *  possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
-    *  writes.
-    * @function
-    * @name Enhance
-    * @memberof Konva.Filters
-    * @param {Object} imageData
-    * @author ippo615
-    * @example
-    * node.cache();
-    * node.filters([Konva.Filters.Enhance]);
-    * node.enhance(0.4);
-    */
+   * Enhance Filter. Adjusts the colors so that they span the widest
+   *  possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
+   *  writes.
+   * @function
+   * @name Enhance
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Enhance]);
+   * node.enhance(0.4);
+   */
   Konva.Filters.Enhance = function(imageData) {
@@ -137,2 +139,10 @@ var data = imageData.data,
 
+  /**
+   * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. -1 to 1 values
+   * @name enhance
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Float} amount
+   * @returns {Float}
+   */
   Konva.Factory.addGetterSetter(
@@ -145,11 +155,2 @@ Konva.Node,
   );
-
-  /**
-    * get/set enhance. Use with {@link Konva.Filters.Enhance} filter.
-    * @name enhance
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Float} amount
-    * @returns {Float}
-    */
 })();

src/filters/HSL.js

@@ -11,9 +11,9 @@ (function() {
   /**
-    * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
-    * @name hue
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} hue value between 0 and 359
-    * @returns {Number}
-    */
+   * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name hue
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} hue value between 0 and 359
+   * @returns {Number}
+   */
 
@@ -28,9 +28,9 @@ Konva.Factory.addGetterSetter(
   /**
-    * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
-    * @name saturation
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
-    * @returns {Number}
-    */
+   * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name saturation
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
+   * @returns {Number}
+   */
 
@@ -45,20 +45,20 @@ Konva.Factory.addGetterSetter(
   /**
-    * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.
-    * @name value
-    * @method
-    * @memberof Konva.Node.prototype
-    * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
-    * @returns {Number}
-    */
+   * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.
+   * @name value
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} value from -1 to 1
+   * @returns {Number}
+   */
 
   /**
-    * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
-    * @function
-    * @memberof Konva.Filters
-    * @param {Object} imageData
-    * @author ippo615
-    * @example
-    * image.filters([Konva.Filters.HSL]);
-    * image.luminance(200);
-    */
+   * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * image.filters([Konva.Filters.HSL]);
+   * image.luminance(200);
+   */
 
@@ -90,3 +90,3 @@ Konva.Filters.HSL = function(imageData) {
     var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
-      rg = 0.587 * v - 0.587 * vsu + 0.330 * vsw,
+      rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
       rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
@@ -96,5 +96,5 @@ var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
       gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
-    var br = 0.299 * v - 0.300 * vsu + 1.250 * vsw,
-      bg = 0.587 * v - 0.586 * vsu - 1.050 * vsw,
-      bb = 0.114 * v + 0.886 * vsu - 0.200 * vsw;
+    var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
+      bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
+      bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
 
@@ -101,0 +101,0 @@ var r, g, b, a;

src/Shape.js

@@ -311,3 +311,3 @@ (function(Konva) {
 
-      if (!this.isVisible()) {
+      if (!this.isVisible() && !caching) {
         return this;
@@ -431,3 +431,3 @@ }
 
-      if (!this.shouldDrawHit(canvas)) {
+      if (!this.shouldDrawHit(canvas) && !caching) {
         return this;
@@ -434,0 +434,0 @@ }

src/shapes/Arrow.js

@@ -69,3 +69,20 @@ (function(Konva) {
       }
+
+      // here is a tricky part
+      // we need to disable dash for arrow pointers
+      var isDashEnabled = this.dashEnabled();
+      if (isDashEnabled) {
+        // manually disable dash for head
+        // it is better not to use setter here,
+        // because it will trigger attr change event
+        this.attrs.dashEnabled = false;
+        ctx.setLineDash([]);
+      }
+
       ctx.fillStrokeShape(this);
+
+      // restore old value
+      if (isDashEnabled) {
+        this.attrs.dashEnabled = true;
+      }
     }
@@ -72,0 +89,0 @@ };

src/shapes/Image.js

@@ -242,4 +242,5 @@ (function() {
     };
+    img.crossOrigin = 'Anonymous';
     img.src = url;
   };
 })();

src/shapes/Text.js

@@ -225,10 +225,2 @@ /*eslint-disable max-depth */
     },
-    // _useBufferCanvas: function(caching) {
-    //     var useIt = Konva.Shape.prototype._useBufferCanvas.call(this, caching);
-    //     if (useIt) {
-    //       return true;
-    //     }
-    //     return false;
-    //     // return isFirefox && this.hasFill() && this.hasShadow();
-    // },
     setText: function(text) {
@@ -367,10 +359,10 @@ var str = Konva.Util._isString(text) ? text : (text || '').toString();
           /*
-                     * if width is fixed and line does not fit entirely
-                     * break the line into multiple fitting lines
-                     */
+          * if width is fixed and line does not fit entirely
+          * break the line into multiple fitting lines
+          */
           while (line.length > 0) {
             /*
-                         * use binary search to find the longest substring that
-                         * that would fit in the specified width
-                         */
+            * use binary search to find the longest substring that
+            * that would fit in the specified width
+            */
             var low = 0,
@@ -419,5 +411,5 @@ high = line.length,
                 /*
-                                 * stop wrapping if wrapping is disabled or if adding
-                                 * one more line would overflow the fixed height
-                                 */
+                * stop wrapping if wrapping is disabled or if adding
+                * one more line would overflow the fixed height
+                */
                 break;
@@ -424,0 +416,0 @@ }

src/shapes/Transformer.js

@@ -31,17 +31,4 @@ (function(Konva) {
 
-    var angle;
-    if (anchorName === 'top-left' || anchorName === 'bottom-right') {
-      angle = -45;
-    } else if (anchorName === 'top-right' || anchorName === 'bottom-left') {
-      angle = 45;
-    } else if (anchorName === 'top-center' || anchorName === 'bottom-center') {
-      angle = 0;
-    } else if (anchorName === 'middle-left' || anchorName === 'middle-right') {
-      angle = 90;
-    } else {
-      angle = 0;
-    }
+    var angle = (Konva.Util._radToDeg(rad) % 360 + 360) % 360;
 
-    angle = (angle + Konva.Util._radToDeg(rad) + 360) % 360;
-
     if (
@@ -77,2 +64,5 @@ Konva.Util._inRange(angle, 315 + 22.5, 360) ||
       // TODO: throw error
+      Konva.Util.error(
+        'Transformer has unknown angle for cursor detection: ' + angle
+      );
       return 'pointer';
@@ -134,4 +124,4 @@ }
       // bindings
-      this.handleMouseMove = this.handleMouseMove.bind(this);
-      this.handleMouseUp = this.handleMouseUp.bind(this);
+      this._handleMouseMove = this._handleMouseMove.bind(this);
+      this._handleMouseUp = this._handleMouseUp.bind(this);
       this.update = this.update.bind(this);
@@ -169,6 +159,8 @@
           this._clearCache(NODE_RECT);
+          this._clearCache('transform');
+          this._clearSelfAndDescendantCache('absoluteTransform');
         }.bind(this)
       );
-      node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
-      node.on('dragmove.resizer', this.requestUpdate.bind(this));
+      // node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
+      // node.on('dragmove.resizer', this.requestUpdate.bind(this));
 
@@ -188,3 +180,7 @@ var elementsCreated = !!this.findOne('.top-left');
         this.getNode().off('.resizer');
+        this._node = undefined;
       }
+      this._clearCache(NODE_RECT);
+      this._clearCache('transform');
+      this._clearSelfAndDescendantCache('absoluteTransform');
     },
@@ -269,3 +265,3 @@
       anchor.on('mousedown touchstart', function(e) {
-        self.handleResizerMouseDown(e);
+        self._handleMouseDown(e);
       });
@@ -276,6 +272,26 @@
         var layer = this.getLayer();
-        var rad = Konva.getAngle(this.getParent().rotation());
-        var cursor = getCursor(name, rad);
-        anchor.getStage().getContainer().style.cursor = cursor;
-        this.fill('lightgrey');
+        var tr = this.getParent();
+
+        // TODO: I guess there are some ways to simplify that calculations
+        // the basic idea is to find "angle" of handler
+        var rad = Konva.getAngle(tr.rotation());
+
+        var cdx = tr.getWidth() / 2;
+        var cdy = tr.getHeight() / 2;
+
+        var parentPos = tr.getAbsolutePosition(tr.getParent());
+        var center = {
+          x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),
+          y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))
+        };
+
+        var pos = this.getAbsolutePosition(tr.getParent());
+
+        var dx = -pos.x + center.x;
+        var dy = -pos.y + center.y;
+
+        var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
+
+        var cursor = getCursor(name, angle);
+        anchor.getStage().content.style.cursor = cursor;
         layer.batchDraw();
@@ -288,4 +304,3 @@ });
         }
-        anchor.getStage().getContainer().style.cursor = '';
-        this.fill('white');
+        anchor.getStage().content.style.cursor = '';
         layer.batchDraw();
@@ -315,3 +330,6 @@ });
           if (tr.rotateEnabled()) {
-            ctx.lineTo(this.width() / 2, -tr.rotateHandlerOffset());
+            ctx.lineTo(
+              this.width() / 2,
+              -tr.rotateHandlerOffset() * Konva.Util._sign(this.height())
+            );
           }
@@ -325,3 +343,3 @@
 
-    handleResizerMouseDown: function(e) {
+    _handleMouseDown: function(e) {
       this.movingResizer = e.target.name();
@@ -337,6 +355,6 @@
 
-      window.addEventListener('mousemove', this.handleMouseMove);
-      window.addEventListener('touchmove', this.handleMouseMove);
-      window.addEventListener('mouseup', this.handleMouseUp);
-      window.addEventListener('touchend', this.handleMouseUp);
+      window.addEventListener('mousemove', this._handleMouseMove);
+      window.addEventListener('touchmove', this._handleMouseMove);
+      window.addEventListener('mouseup', this._handleMouseUp, true);
+      window.addEventListener('touchend', this._handleMouseUp, true);
 
@@ -349,3 +367,3 @@ this._transforming = true;
 
-    handleMouseMove: function(e) {
+    _handleMouseMove: function(e) {
       var x, y, newHypotenuse;
@@ -449,4 +467,7 @@ var resizerNode = this.findOne('.' + this.movingResizer);
         var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
-        // var attrs = this._getAttrs();
 
+        if (attrs.height < 0) {
+          dAlpha -= Math.PI;
+        }
+
         var rot = Konva.getAngle(this.rotation());
@@ -477,25 +498,23 @@
 
-        this._fitNodeInto(
-          Object.assign(attrs, {
-            rotation: Konva.angleDeg
-              ? newRotation
-              : Konva.Util._degToRad(newRotation),
-            x:
-              attrs.x +
-              (attrs.width / 2 + padding) *
-                (Math.cos(alpha) - Math.cos(newAlpha)) +
-              (attrs.height / 2 + padding) *
-                (Math.sin(-alpha) - Math.sin(-newAlpha)) -
-              (dx * Math.cos(rot) + dy * Math.sin(-rot)),
-            y:
-              attrs.y +
-              (attrs.height / 2 + padding) *
-                (Math.cos(alpha) - Math.cos(newAlpha)) +
-              (attrs.width / 2 + padding) *
-                (Math.sin(alpha) - Math.sin(newAlpha)) -
-              (dy * Math.cos(rot) + dx * Math.sin(rot)),
-            width: attrs.width + padding * 2,
-            height: attrs.height + padding * 2
-          })
-        );
+        this._fitNodeInto({
+          rotation: Konva.angleDeg
+            ? newRotation
+            : Konva.Util._degToRad(newRotation),
+          x:
+            attrs.x +
+            (attrs.width / 2 + padding) *
+              (Math.cos(alpha) - Math.cos(newAlpha)) +
+            (attrs.height / 2 + padding) *
+              (Math.sin(-alpha) - Math.sin(-newAlpha)) -
+            (dx * Math.cos(rot) + dy * Math.sin(-rot)),
+          y:
+            attrs.y +
+            (attrs.height / 2 + padding) *
+              (Math.cos(alpha) - Math.cos(newAlpha)) +
+            (attrs.width / 2 + padding) *
+              (Math.sin(alpha) - Math.sin(newAlpha)) -
+            (dy * Math.cos(rot) + dx * Math.sin(rot)),
+          width: attrs.width + padding * 2,
+          height: attrs.height + padding * 2
+        });
       } else {
@@ -534,3 +553,3 @@ console.error(
 
-    handleMouseUp: function() {
+    _handleMouseUp: function() {
       this._removeEvents();
@@ -542,6 +561,6 @@ },
         this._transforming = false;
-        window.removeEventListener('mousemove', this.handleMouseMove);
-        window.removeEventListener('touchmove', this.handleMouseMove);
-        window.removeEventListener('mouseup', this.handleMouseUp);
-        window.removeEventListener('touchend', this.handleMouseUp);
+        window.removeEventListener('mousemove', this._handleMouseMove);
+        window.removeEventListener('touchmove', this._handleMouseMove);
+        window.removeEventListener('mouseup', this._handleMouseUp, true);
+        window.removeEventListener('touchend', this._handleMouseUp, true);
         this.fire('transformend');
@@ -552,27 +571,28 @@ this.getNode().fire('transformend');
 
-    _fitNodeInto: function(attrs) {
+    _fitNodeInto: function(newAttrs) {
       // waring! in this attrs padding may be included
+      var boundBoxFunc = this.getBoundBoxFunc();
+      if (boundBoxFunc) {
+        var oldAttrs = this._getNodeRect();
+        newAttrs = boundBoxFunc.call(this, oldAttrs, newAttrs);
+      }
       this._settings = true;
       var node = this.getNode();
-      if (attrs.rotation !== undefined) {
-        this.getNode().rotation(attrs.rotation);
+      if (newAttrs.rotation !== undefined) {
+        this.getNode().rotation(newAttrs.rotation);
       }
       var pure = node.getClientRect({ skipTransform: true });
       var padding = this.getPadding();
-      var scaleX = (attrs.width - padding * 2) / pure.width;
-      var scaleY = (attrs.height - padding * 2) / pure.height;
+      var scaleX = (newAttrs.width - padding * 2) / pure.width;
+      var scaleY = (newAttrs.height - padding * 2) / pure.height;
 
       var rotation = Konva.getAngle(node.getRotation());
-      // debugger;
       var dx = pure.x * scaleX - padding;
       var dy = pure.y * scaleY - padding;
 
-      // var dxo = node.offsetX() * scaleX;
-      // var dyo = node.offsetY() * scaleY;
-
       this.getNode().setAttrs({
         scaleX: scaleX,
         scaleY: scaleY,
-        x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
-        y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
+        x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
+        y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
       });
@@ -610,9 +630,4 @@ this._settings = false;
       var attrs = this._getNodeRect();
-      var x = attrs.x;
-      var y = attrs.y;
       var width = attrs.width;
       var height = attrs.height;
-      this.x(x);
-      this.y(y);
-      this.rotation(attrs.rotation);
 
@@ -666,3 +681,3 @@ var enabledHandlers = this.enabledHandlers();
         x: width / 2,
-        y: -this.rotateHandlerOffset(),
+        y: -this.rotateHandlerOffset() * Konva.Util._sign(height),
         visible: this.rotateEnabled()
@@ -677,2 +692,10 @@ });
     },
+    isTransforming: function() {
+      return this._transforming;
+    },
+    stopTransform: function() {
+      if (this._transforming) {
+        this._removeEvents();
+      }
+    },
     destroy: function() {
@@ -845,3 +868,5 @@ Konva.Group.prototype.destroy.call(this);
 
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'boundBoxFunc');
+
   Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

src/Stage.js

@@ -235,18 +235,2 @@ (function() {
     },
-    /**
-     * Creates a composite data URL
-     * @method
-     * @memberof Konva.Stage.prototype
-     * @param {Object} config
-     * @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
-     * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
-     *  "image/png" is the default
-     * @param {Number} [config.x] x position of canvas section
-     * @param {Number} [config.y] y position of canvas section
-     * @param {Number} [config.width] width of canvas section
-     * @param {Number} [config.height] height of canvas section
-     * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
-     *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
-     *  is very high quality
-     */
     toDataURL: function(config) {
@@ -262,3 +246,3 @@ config = config || {};
           height: config.height || this.getHeight(),
-          pixelRatio: config.pixelRatio
+          pixelRatio: config.pixelRatio || 1
         }),
@@ -555,3 +539,4 @@ _context = canvas.getContext()._context,
           fireDblClick = true;
-          Konva.inDblClickWindow = false;
+          clearTimeout(this.dblTimeout);
+          // Konva.inDblClickWindow = false;
         } else if (!dd || !dd.justDragged) {
@@ -564,3 +549,3 @@ // don't set inDblClickWindow after dragging
 
-        setTimeout(function() {
+        this.dblTimeout = setTimeout(function() {
           Konva.inDblClickWindow = false;
@@ -619,2 +604,14 @@ }, Konva.dblClickWindow);
     _contextmenu: function(evt) {
+      this._setPointerPosition(evt);
+      var shape = this.getIntersection(this.getPointerPosition());
+
+      if (shape && shape.isListening()) {
+        shape._fireAndBubble(CONTEXTMENU, { evt: evt });
+      } else {
+        this._fire(CONTEXTMENU, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
+      }
       this._fire(CONTENT_CONTEXTMENU, { evt: evt });
@@ -653,3 +650,4 @@ },
         fireDblClick = true;
-        Konva.inDblClickWindow = false;
+        clearTimeout(this.dblTimeout);
+        // Konva.inDblClickWindow = false;
       } else {
@@ -659,3 +657,3 @@ Konva.inDblClickWindow = true;
 
-      setTimeout(function() {
+      this.dblTimeout = setTimeout(function() {
         Konva.inDblClickWindow = false;
@@ -662,0 +660,0 @@ }, Konva.dblClickWindow);

src/Util.js

@@ -110,3 +110,6 @@ /*eslint-disable  eqeqeq, no-cond-assign, no-empty*/
   /**
-   * Transform constructor
+   * Transform constructor. Transform object is a private class of Konva framework.
+   * In most of the cases you don't need to use it in your app.
+   * But there is a documentation for that class in case you still want
+   * to make some manual calculations.
    * @constructor
@@ -491,2 +494,6 @@ * @param {Array} [m] Optional six-element matrix
     },
+    // arrays are objects too
+    isObject: function(val) {
+      return val instanceof Object;
+    },
     isValidSelector: function(selector) {
@@ -503,2 +510,12 @@ if (typeof selector !== 'string') {
     },
+    _sign: function(number) {
+      if (number === 0) {
+        return 0;
+      }
+      if (number > 0) {
+        return 1;
+      } else {
+        return -1;
+      }
+    },
     createCanvasElement: function() {
@@ -505,0 +522,0 @@ var canvas = Konva.isBrowser

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

1276283

increased by0.72%

Lines of code

36195

increased by0.76%

No dependency changes