konva - npm Package Compare versions

Comparing version 1.6.8 to 1.7.0

CHANGELOG.md

@@ -7,2 +7,12 @@ # Change Log
 
+## [1.7.0][2017-10-08]
+
+### Fixed
+- Several typescript fixes
+
+### Changed
+- Default value for `dragDistance` is changed to 3px.
+- Fix rare error throw on drag
+- Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
+
 ## [1.6.8][2017-08-19]
@@ -9,0 +19,0 @@

konva.d.ts

@@ -87,3 +87,4 @@ declare module Konva {
         draggable?: boolean;
-        dragBoundFunc?: Function;
+        dragDistance?: number;
+        dragBoundFunc?: (pos: Vector2d) => Vector2d;
     }
@@ -127,4 +128,4 @@
 
-        dragBoundFunc(): Function;
-        dragBoundFunc(dragBoundFunc: Function): Node;
+        dragBoundFunc(): (pos: Vector2d) => Vector2d;
+        dragBoundFunc(dragBoundFunc: (pos: Vector2d) => Vector2d): Node;
         draggable(): boolean;
@@ -145,2 +146,4 @@ draggable(draggable: boolean): Node;
         filters(filters: Filter): Node;
+        findAncestor(selector?: string, includeSelf?: boolean, stopNode?: Node): Node;
+        findAncestors(selector?: string, includeSelf?: boolean, stopNode?: Node): Node[];
         fire(eventType: string, evt?: any, bubble?: boolean): Node;
@@ -164,2 +167,3 @@ getAbsoluteOpacity(): number;
         getParent(): Container;
+        getPosition(): Vector2d;
         // CHECK
@@ -280,3 +284,3 @@ getSize(): {
         constructor(params?: ContainerConfig);
-        add(child: Node): Container;
+        add(...children: Node[]): Container;
         getChildren(filterfunc?: Function): Collection;
@@ -464,4 +468,4 @@ clip(): SizeConfig;
         constructor(StageConfig: StageConfig);
-        add(layer: Layer): Stage;
-        add(layer: FastLayer): Stage;
+        add(...layers: Layer[]): Stage;
+        add(...layers: FastLayer[]): Stage;
         batchDraw(): void;
@@ -471,3 +475,3 @@ container(): HTMLElement;
         drawHit(): void;
-        getIntersection(pos: Vector2d): Shape;
+        getIntersection(pos: Vector2d, selector?: string): Shape;
         getLayers(): Layer[];
@@ -493,3 +497,3 @@ getPointerPosition(): Vector2d;
         constructor(config?: LayerConfig);
-        getIntersection(pos: Vector2d): Shape;
+        getIntersection(pos: Vector2d, selector?: string): Shape;
         enableHitGraph(): Layer;
@@ -537,8 +541,43 @@ disableHitGraph(): Layer;
         reset(): void;
-        moveTo(x: number, y: number): void;
-        lineTo(x: number, y: number): void;
+        setAttr(attr: string, value: any): void;
+        strokeShape(shape: Shape): void;
+
+        // context pass through methods
+        // originally from lib.es6.d.ts
+        arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
         beginPath(): void;
-        setAttr(attr: string, value: any): void;
+        bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+        clearRect(x: number, y: number, width: number, height: number): void;
+        clip(): void;
         closePath(): void;
-        strokeShape(shape: Shape): void;
+        createImageData(imageDataOrSw: number | ImageData, sh?: number): ImageData;
+        createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
+        createPattern(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, repetition: string): CanvasPattern;
+        createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+        drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number): void;
+        drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number, dstW: number, dstH: number): void;
+        drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, srcX: number, srcY: number, srcW: number, srcH: number, dstX: number, dstY: number, dstW: number, dstH: number): void;
+        isPointInPath(x: number, y: number): boolean;
+        fill(): void;
+        fillRect(x: number, y: number, width: number, height: number): void;
+        strokeRect(x: number, y: number, w: number, h: number): void;
+        fillText(text: string, x: number, y: number): void;
+        measureText(text: string): TextMetrics;
+        getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
+        lineTo(x: number, y: number): void;
+        moveTo(x: number, y: number): void;
+        rect(x: number, y: number, w: number, h: number): void;
+        putImageData(imagedata: ImageData, dx: number, dy: number): void;
+        quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+        restore(): void;
+        rotate(angle: number): void;
+        save(): void;
+        scale(x: number, y: number): void;
+        setLineDash(segments: number[]): void;
+        getLineDash(): number[];
+        setTransform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;
+        stroke(path?: Path2D): void;
+        strokeText(text: string, x: number, y: number): void;
+        transform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;
+        translate(x: number, y: number): void;
     }
@@ -545,0 +584,0 @@

package.json

 {
   "name": "konva",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "author": "Anton Lavrenov",
@@ -23,16 +23,16 @@ "files": [
   "devDependencies": {
-    "chai": "3.5.0",
+    "chai": "4.1.1",
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.1",
     "gulp-connect": "^5.0.0",
-    "gulp-eslint": "^3.0.1",
-    "gulp-jscpd": "0.0.7",
-    "gulp-jsdoc": "^0.1.5",
+    "gulp-eslint": "^4.0.0",
+    "gulp-jscpd": "0.0.8",
+    "gulp-jsdoc3": "^1.0.1",
     "gulp-mocha-phantomjs": "^0.12.1",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
-    "gulp-uglify": "^2.1.2",
+    "gulp-replace": "^0.6.1",
+    "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
-    "mocha": "3.3.0",
-    "prettier": "^1.2.2"
+    "mocha": "3.5.0",
+    "prettier": "^1.5.3"
   },
@@ -39,0 +39,0 @@ "keywords": [

README.md

 ![Konva logo](https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png)
 
-#Konva
+# Konva
 
@@ -10,3 +10,3 @@ Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
 [![npm version](https://badge.fury.io/js/konva.svg)](http://badge.fury.io/js/konva) [![bower version](https://badge.fury.io/bo/konva.svg)](http://badge.fury.io/bo/konva)
-[![Build Status](https://travis-ci.org/konvajs/konva.png)](https://travis-ci.org/konvajs/konva)  [![Code Climate](https://codeclimate.com/github/konvajs/konva/badges/gpa.svg)](https://codeclimate.com/github/konvajs/konva)
+[![Build Status](https://travis-ci.org/konvajs/konva.png)](https://travis-ci.org/konvajs/konva)  [![Code Climate](https://codeclimate.com/github/konvajs/konva/badges/gpa.svg)](https://codeclimate.com/github/konvajs/konva) [![CDNJS version](https://img.shields.io/cdnjs/v/konva.svg)](https://cdnjs.com/libraries/konva)
 
@@ -24,3 +24,3 @@ You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.
 ```html
-<script src="https://cdn.rawgit.com/konvajs/konva/1.6.8/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/1.7.0/konva.min.js"></script>
 <div id="container"></div>
@@ -70,6 +70,6 @@ <script>
 ```html
-<script src="https://cdn.rawgit.com/konvajs/konva/1.6.8/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/1.7.0/konva.min.js"></script>
 ```
 
-You can use CDN: [https://cdn.rawgit.com/konvajs/konva/1.6.8/konva.min.js](https://cdn.rawgit.com/konvajs/konva/1.6.8/konva.min.js)
+You can use CDN: [https://cdn.rawgit.com/konvajs/konva/1.7.0/konva.min.js](https://cdn.rawgit.com/konvajs/konva/1.7.0/konva.min.js)
 
@@ -76,0 +76,0 @@ ### 2 Load via AMD (requirejs):

src/BaseLayer.js

@@ -1,2 +0,2 @@
-(function() {
+(function(Konva) {
   'use strict';
@@ -13,4 +13,2 @@ /**
      * @@containerParams
-     * @example
-     * var layer = new Konva.Layer();
      */
@@ -30,6 +28,6 @@ Konva.BaseLayer = function(config) {
     /**
-         * get layer canvas
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         */
+     * get layer canvas
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     */
     getCanvas: function() {
@@ -39,6 +37,6 @@ return this.canvas;
     /**
-         * get layer hit canvas
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         */
+     * get layer hit canvas
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     */
     getHitCanvas: function() {
@@ -48,6 +46,6 @@ return this.hitCanvas;
     /**
-         * get layer canvas context
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         */
+     * get layer canvas context
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     */
     getContext: function() {
@@ -57,19 +55,19 @@ return this.getCanvas().getContext();
     /**
-         * clear scene and hit canvas contexts tied to the layer
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         * @param {Object} [bounds]
-         * @param {Number} [bounds.x]
-         * @param {Number} [bounds.y]
-         * @param {Number} [bounds.width]
-         * @param {Number} [bounds.height]
-         * @example
-         * layer.clear();
-         * layer.clear({
-         *   x : 0,
-         *   y : 0,
-         *   width : 100,
-         *   height : 100
-         * });
-         */
+     * clear scene and hit canvas contexts tied to the layer
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     * @param {Object} [bounds]
+     * @param {Number} [bounds.x]
+     * @param {Number} [bounds.y]
+     * @param {Number} [bounds.width]
+     * @param {Number} [bounds.height]
+     * @example
+     * layer.clear();
+     * layer.clear({
+     *   x : 0,
+     *   y : 0,
+     *   width : 100,
+     *   height : 100
+     * });
+     */
     clear: function(bounds) {
@@ -183,11 +181,11 @@ this.getContext().clear(bounds);
     /**
-         * get/set width of layer.getter return width of stage. setter doing nothing.
-         * if you want change width use `stage.width(value);`
-         * @name width
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         * @returns {Number}
-         * @example
-         * var width = layer.width();
-         */
+     * get/set width of layer.getter return width of stage. setter doing nothing.
+     * if you want change width use `stage.width(value);`
+     * @name width
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     * @returns {Number}
+     * @example
+     * var width = layer.width();
+     */
     getWidth: function() {
@@ -204,11 +202,11 @@ if (this.parent) {
     /**
-         * get/set height of layer.getter return height of stage. setter doing nothing.
-         * if you want change height use `stage.height(value);`
-         * @name height
-         * @method
-         * @memberof Konva.BaseLayer.prototype
-         * @returns {Number}
-         * @example
-         * var height = layer.height();
-         */
+     * get/set height of layer.getter return height of stage. setter doing nothing.
+     * if you want change height use `stage.height(value);`
+     * @name height
+     * @method
+     * @memberof Konva.BaseLayer.prototype
+     * @returns {Number}
+     * @example
+     * var height = layer.height();
+     */
     getHeight: function() {
@@ -237,21 +235,21 @@ if (this.parent) {
   /**
-     * get/set clearBeforeDraw flag which determines if the layer is cleared or not
-     *  before drawing
-     * @name clearBeforeDraw
-     * @method
-     * @memberof Konva.BaseLayer.prototype
-     * @param {Boolean} clearBeforeDraw
-     * @returns {Boolean}
-     * @example
-     * // get clearBeforeDraw flag
-     * var clearBeforeDraw = layer.clearBeforeDraw();
-     *
-     * // disable clear before draw
-     * layer.clearBeforeDraw(false);
-     *
-     * // enable clear before draw
-     * layer.clearBeforeDraw(true);
-     */
+   * get/set clearBeforeDraw flag which determines if the layer is cleared or not
+   *  before drawing
+   * @name clearBeforeDraw
+   * @method
+   * @memberof Konva.BaseLayer.prototype
+   * @param {Boolean} clearBeforeDraw
+   * @returns {Boolean}
+   * @example
+   * // get clearBeforeDraw flag
+   * var clearBeforeDraw = layer.clearBeforeDraw();
+   *
+   * // disable clear before draw
+   * layer.clearBeforeDraw(false);
+   *
+   * // enable clear before draw
+   * layer.clearBeforeDraw(true);
+   */
 
   Konva.Collection.mapMethods(Konva.BaseLayer);
-})();
+})(Konva);

src/DragAndDrop.js

@@ -21,6 +21,11 @@ (function() {
       var dd = Konva.DD, node = dd.node;
-
       if (node) {
         if (!dd.isDragging) {
           var pos = node.getStage().getPointerPosition();
+          // it is possible that pos is undefined
+          // reattach it
+          if (!pos) {
+            node.getStage()._setPointerPosition(evt);
+            pos = node.getStage().getPointerPosition();
+          }
           var dragDistance = node.dragDistance();
@@ -27,0 +32,0 @@ var distance = Math.max(

src/filters/Blur.js

@@ -5,3 +5,3 @@ /*
 */
-(function() {
+(function(Konva) {
   'use strict';
@@ -855,2 +855,2 @@ /*
     */
-})();
+})(Konva);

src/filters/Brighten.js

@@ -1,2 +0,2 @@
-(function() {
+(function(Konva) {
   'use strict';
@@ -45,2 +45,2 @@ /**
     */
-})();
+})(Konva);

src/Global.js

@@ -68,3 +68,3 @@ /*
          * Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
-         * only then start dragging.
+         * only then start dragging. Default is 3px.
          * @property dragDistance
@@ -76,3 +76,3 @@ * @default 0
          */
-    dragDistance: 0,
+    dragDistance: 3,
     /**
@@ -201,5 +201,5 @@ * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
         // jQuery UA regex
-        match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
-        /(webkit)[ \/]([\w.]+)/.exec(ua) ||
-        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
+        match = /(chrome)[ /]([\w.]+)/.exec(ua) ||
+        /(webkit)[ /]([\w.]+)/.exec(ua) ||
+        /(opera)(?:.*version|)[ /]([\w.]+)/.exec(ua) ||
         /(msie) ([\w.]+)/.exec(ua) ||
@@ -206,0 +206,0 @@ (ua.indexOf('compatible') < 0 &&

src/shapes/Arc.js

@@ -1,2 +0,2 @@
-(function() {
+(function(Konva) {
   'use strict';
@@ -145,2 +145,2 @@ /**
   Konva.Collection.mapMethods(Konva.Arc);
-})();
+})(Konva);

src/shapes/Arrow.js

@@ -1,2 +0,2 @@
-(function() {
+(function(Konva) {
   'use strict';
@@ -125,2 +125,2 @@ /**
   Konva.Collection.mapMethods(Konva.Arrow);
-})();
+})(Konva);

src/shapes/Circle.js

@@ -1,2 +0,2 @@
-(function() {
+(function(Konva) {
   'use strict';
@@ -87,2 +87,2 @@ // the 0.0001 offset fixes a bug in Chrome 27
   Konva.Collection.mapMethods(Konva.Circle);
-})();
+})(Konva);

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1208129

increased by1.17%

Number of package files

58

increased by1.75%

Worsened metrics

Lines of code

33786

decreased by-0.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes