konva - npm Package Compare versions

Comparing version 1.7.6 to 2.0.0

CHANGELOG.md

 # Change Log
+
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Not released][Not released]
+## [2.0.0][2018-03-15]
 
+### Added
+
+* new `Konva.Transformer`. It is a special group that allow simple resizing and rotation of a shape.
+* Add ability to remove event by callback `node.off('event', callback)`.
+* new `Konva.Filters.Contrast`.
+* new `Konva.Util.haveIntersection()` to detect simple collusion
+* add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
+* add gradients for strokes
+
+## Changed
+
+* stage events are slightly changed. `mousedown`, `click`, `mouseup`, `dblclick`, `touchstart`, `touchend`, `tap`, `dbltap` will be triggered when clicked on empty areas too
+
+## Fixed
+
+* Some typescript fixes
+* Pixelate filter fixes
+* Fixes for path data parsing
+* Fixed shadow size calculation
+
+## Removed
+
+* Some deprecated methods are removed. If previous version was working without deprecation warnings for you, this one will work fine too.
+
 ## [1.7.6][2017-11-01]
 
 ## Fixed
-- Some typescript fixes
 
+* Some typescript fixes
+
 ## [1.7.4][2017-10-30]
 
 ## Fixed
-- `isBrowser` detection for electron
 
+* `isBrowser` detection for electron
+
 ## [1.7.3][2017-10-19]
 
 ### Changed
-- Changing size of a stage will redraw it in synchronous way
 
+* Changing size of a stage will redraw it in synchronous way
+
 ### Fixed
-- Some fixes special for nodejs
 
+* Some fixes special for nodejs
 
@@ -29,32 +57,37 @@ ## [1.7.2][2017-10-11]
 ### Fixed
-- Fixed `Konva.document is undefined`
 
+* Fixed `Konva.document is undefined`
+
 ## [1.7.1][2017-10-11]
 
 ### Changed
-- Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
 
+* Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
+
 ## [1.7.0][2017-10-08]
 
 ### Fixed
-- Several typescript fixes
 
+* 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.
 
+* 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]
 
 ### Changed
-- The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
-- Upgrade nodejs deps
 
+* The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
+* Upgrade nodejs deps
+
 ## [1.6.7][2017-07-28]
 
 ### Fixed
-- Fix bug with double trigger wheel in Firefox
-- Fix `node.getClientRect()` calculation in a case of Group + invisible child
-- Fix dblclick issue https://github.com/konvajs/konva/issues/252
 
+* Fix bug with double trigger wheel in Firefox
+* Fix `node.getClientRect()` calculation in a case of Group + invisible child
+* Fix dblclick issue https://github.com/konvajs/konva/issues/252
 
@@ -64,29 +97,34 @@ ## [1.6.3][2017-05-24]
 ### Fixed
-- Fixed bug with pointer detection. css 3d transformed stage will not work now.
 
+* Fixed bug with pointer detection. css 3d transformed stage will not work now.
+
 ## [1.6.2][2017-05-08]
 
 ### Fixed
-- Fixed bug with automatic shadow for negative scale values
 
+* Fixed bug with automatic shadow for negative scale values
+
 ## [1.6.1][2017-04-25]
 
 ### Fixed
-- Fix pointer position detection
 
+* Fix pointer position detection
 
 ### Changed
-- moved `globalCompositeOperation` property to `Konva.Node`
 
+* moved `globalCompositeOperation` property to `Konva.Node`
+
 ## [1.6.0][2017-04-21]
 
 ### Added
-- support of globalCompositeOperation for `Konva.Shape`
 
+* support of globalCompositeOperation for `Konva.Shape`
+
 ### Fixed
-- getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
 
+* getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
+
 ### Changed
-- Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
 
+* Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
 
@@ -96,77 +134,90 @@ ## [1.5.0][2017-03-20]
 ### Added
-- support for `lineDashOffset` property for `Konva.Shape`.
 
+* support for `lineDashOffset` property for `Konva.Shape`.
+
 ## [1.4.0][2017-02-07]
 
 ## Added
-- `textDecoration` of `Konva.Text` now supports `line-through`
 
+* `textDecoration` of `Konva.Text` now supports `line-through`
+
 ## [1.3.0][2017-01-10]
 
 ## Added
-- new align value for `Konva.Text` and `Konva.TextPath`: `justify`
-- new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
-- new property for `Konva.Text`: `letterSpacing`
-- new event `contentContextmenu` for `Konva.Stage`
-- `align` support for `Konva.TextPath`
-- new method `toCanvas()` for converting a node into canvas element
 
+* new align value for `Konva.Text` and `Konva.TextPath`: `justify`
+* new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
+* new property for `Konva.Text`: `letterSpacing`
+* new event `contentContextmenu` for `Konva.Stage`
+* `align` support for `Konva.TextPath`
+* new method `toCanvas()` for converting a node into canvas element
+
 ### Changed
-- changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
-- `shadowOffset` respect pixel ratio now
 
+* changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
+* `shadowOffset` respect pixel ratio now
+
 ### Fixed
-- Fixed bug when `Konva.Tag` width was not changing its width dynamically
-- Fixed "calling remove() for dragging shape will throw an error"
-- Fixed wrong opacity level for cached group with opacity
-- More consistent shadows on HDPI screens
-- Fixed memory leak for nodes with several names
 
+* Fixed bug when `Konva.Tag` width was not changing its width dynamically
+* Fixed "calling remove() for dragging shape will throw an error"
+* Fixed wrong opacity level for cached group with opacity
+* More consistent shadows on HDPI screens
+* Fixed memory leak for nodes with several names
+
 ## [1.2.2][2016-09-15]
 
 ### Fixed
-- refresh stage hit and its `dragend`
-- `getClientRect` calculations
 
+* refresh stage hit and its `dragend`
+* `getClientRect` calculations
+
 ## [1.2.0][2016-09-15]
 
 ## Added
-- new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
 
+* new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
+
 ## [1.1.4][2016-09-13]
 
 ### Fixed
-- Prevent throwing an error when text property of `Konva.Text` = undefined or null
 
+* Prevent throwing an error when text property of `Konva.Text` = undefined or null
+
 ## [1.1.3][2016-09-12]
 
 ### Changed
-- Better hit function for `TextPath`.
-- Validation of `Shape` filters.
 
+* Better hit function for `TextPath`.
+* Validation of `Shape` filters.
+
 ## [1.1.2][2016-09-10]
 
 ### Fixed
-- Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
 
+* Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
+
 ## [1.1.1][2016-08-30]
 
 ### Fixed
-- Fixed #166 bug of drag&drop
 
+* Fixed #166 bug of drag&drop
+
 ## [1.1.0][2016-08-21]
 
 ## Added
-- new property of `Konva.Shape` - `preventDefault`.
 
+* new property of `Konva.Shape` - `preventDefault`.
+
 ## [1.0.3][2016-08-14]
 
 ### Fixed
-- Fixed some typescript definitions
 
+* Fixed some typescript definitions
+
 ## [1.0.2][2016-07-08]
 
 ## Changed
-- `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
 
+* `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
 
@@ -176,33 +227,38 @@ ## [1.0.1][2016-07-05]
 ### Changed
-- you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
 
+* you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
+
 ### Fixed
-- Bug fix for case when `touchend` event throws error
 
+* Bug fix for case when `touchend` event throws error
+
 ## [1.0.0][2016-07-05]
 
 ### Fixed
-- Bug fix for case when `touchend` event throws error
 
+* Bug fix for case when `touchend` event throws error
+
 ## [0.15.0][2016-06-18]
 
 ## Added
-- Custom clip function
 
+* Custom clip function
+
 ## [0.14.0][2016-06-17]
 
 ### Fixed
-- fixes in typescript definitions
-- fixes for bug with `mouseenter` event on deep nesting case
 
+* fixes in typescript definitions
+* fixes for bug with `mouseenter` event on deep nesting case
+
 ## [0.13.9][2016-05-14]
 
 ### Changed
-- typescript definition in npm package
-- node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
-- `Konva.Path` will be filled when it is not closed
-- `Animation.start()` will not not immediate sync draw. This should improve performance a little.
-- Warning when node for `Tween` is not in layer yet.
-- `removeChildren()` remove only first level children. So it will not remove grandchildren.
 
+* typescript definition in npm package
+* node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
+* `Konva.Path` will be filled when it is not closed
+* `Animation.start()` will not not immediate sync draw. This should improve performance a little.
+* Warning when node for `Tween` is not in layer yet.
+* `removeChildren()` remove only first level children. So it will not remove grandchildren.
 
@@ -212,92 +268,106 @@ ## [0.12.4][2016-04-19]
 ### Changed
-- `batchDraw` will do not immediate `draw()`
 
+* `batchDraw` will do not immediate `draw()`
+
 ### Fixed
-- fix incorrect shadow offset on rotation
 
+* fix incorrect shadow offset on rotation
+
 ## [0.12.3][2016-04-07]
 
 ### Fixed
-- `batchDraw` function works less time now
-- lighter npm package
 
+* `batchDraw` function works less time now
+* lighter npm package
+
 ## [0.12.2][2016-03-31]
 
 ### Fixed
-- repair `cancelBubble` event property behaviour
-- fix wrong `Path` `getClientRect()` calculation
-- better HDPI support
-- better typescript definitions
-- node 0.12 support
 
+* repair `cancelBubble` event property behaviour
+* fix wrong `Path` `getClientRect()` calculation
+* better HDPI support
+* better typescript definitions
+* node 0.12 support
+
 ### Changed
-- more universal stage container selector
-- `mousewheel` event changed to `wheel`
 
+* more universal stage container selector
+* `mousewheel` event changed to `wheel`
+
 ## [0.11.1][2016-01-16]
 
 ### Fixed
-- correct `Konva.Arrow` drawing. Now it works better.
-- Better support for dragging when mouse out of stage
-- Better corner radius for `Label` shape
-- `contentTap` event for stage
 
+* correct `Konva.Arrow` drawing. Now it works better.
+* Better support for dragging when mouse out of stage
+* Better corner radius for `Label` shape
+* `contentTap` event for stage
+
 ### Added
-- event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
-- new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
-- optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
-- show warning message if several instances of Konva are added to page.
 
+* event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
+* new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
+* optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
+* show warning message if several instances of Konva are added to page.
+
 ### Changed
-- `moveTo` and some other methods return `this`
-- `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
-- `change` event will be not fired if changed value is the same as old value
 
+* `moveTo` and some other methods return `this`
+* `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
+* `change` event will be not fired if changed value is the same as old value
+
 ## [0.10.0][2015-10-27]
 
 ### Added
-- RGBA filter. Thanks to [@codefo](https://github.com/codefo)
-- `stroke` and `fill` support for `Konva.Sprite`
 
+* RGBA filter. Thanks to [@codefo](https://github.com/codefo)
+* `stroke` and `fill` support for `Konva.Sprite`
+
 ### Fixed
-- Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
-- Correct `toObject()` behaviour for node with attrs with extended native prototypes
-- Fixed bug for caching where buffer canvas is required
 
+* Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
+* Correct `toObject()` behaviour for node with attrs with extended native prototypes
+* Fixed bug for caching where buffer canvas is required
+
 ### Changed
-- Dragging works much better. If your pointer is out of stage content dragging will still continue.
-- `Konva.Node.create` now works with objects.
-- `Konva.Tween` now supports tweening points to state with different length
 
+* Dragging works much better. If your pointer is out of stage content dragging will still continue.
+* `Konva.Node.create` now works with objects.
+* `Konva.Tween` now supports tweening points to state with different length
+
 ## [0.9.5][2015-05-28]
 
 ### Fixed
-- `to` will not throw error if no `onFinish` callback
-- HDPI support for desktop
-- Fix bug when filters are not correct for HDPI
-- Fix bug when hit area is not correct for HDPI
-- Fix bug for incorrect `getClientRect` calculation
-- Repair fill gradient for text
 
+* `to` will not throw error if no `onFinish` callback
+* HDPI support for desktop
+* Fix bug when filters are not correct for HDPI
+* Fix bug when hit area is not correct for HDPI
+* Fix bug for incorrect `getClientRect` calculation
+* Repair fill gradient for text
+
 ### Changed
-- context wrapper is more capable with native context.
+
+* context wrapper is more capable with native context.
   So you can use `context.fillStyle` property in your `sceneFunc` without accessing native context.
-- `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
-- Correct `clone()` for custom nodes
-- `FastLayer` can now have transforms
-- `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
-- `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
+* `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
+* Correct `clone()` for custom nodes
+* `FastLayer` can now have transforms
+* `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
+* `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
 
 ### Added
-- new `Konva.Image.fromURL` method
 
+* new `Konva.Image.fromURL` method
+
 ### Deprecated
-- `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
-- `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
-- `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
-- `dashArray` is deprecated. Use `dash` instead.
-- `drawFunc` is deprecated. Use `sceneFunc` instead.
-- `drawHitFunc` is deprecated. Use `hitFunc` instead.
-- `rotateDeg` is deprecated. Use `rotate` instead.
 
+* `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
+* `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
+* `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
+* `dashArray` is deprecated. Use `dash` instead.
+* `drawFunc` is deprecated. Use `sceneFunc` instead.
+* `drawHitFunc` is deprecated. Use `hitFunc` instead.
+* `rotateDeg` is deprecated. Use `rotate` instead.
 
@@ -307,63 +377,67 @@ ## [0.9.0][2015-02-27]
 ### Fixed
-- cache algorithm has A LOT OF updates.
 
+* cache algorithm has A LOT OF updates.
+
 ### Changed
-- `scale` now affects `shadowOffset`
-- performance optimization (remove some unnecessary draws)
-- more expected drawing when shape has opacity, stroke and shadow
-- HDPI for caching.
-- Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
-- `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
 
+* `scale` now affects `shadowOffset`
+* performance optimization (remove some unnecessary draws)
+* more expected drawing when shape has opacity, stroke and shadow
+* HDPI for caching.
+* Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
+* `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
+
 ### Added
-- new methods for working with node's name: `addName`, `removeName`, `hasName`.
-- new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
-- new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
-- new `getClientRect` method.
-- new `to` method for every node for shorter tweening
 
+* new methods for working with node's name: `addName`, `removeName`, `hasName`.
+* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
+* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
+* new `getClientRect` method.
+* new `to` method for every node for shorter tweening
+
 ## [0.8.0][2015-02-04]
 
 * Bug Fixes
-    * browser crashing on pointer events fixed
-    * optimized `getIntersection` function
+  * browser crashing on pointer events fixed
+  * optimized `getIntersection` function
 * Enhancements
-    * `container.findOne()` method
-    * new `strokeHitEnabled` property. Useful for performance optimizations
-    * typescript definitions. see `/resources/konva.d.ts`
+  * `container.findOne()` method
+  * new `strokeHitEnabled` property. Useful for performance optimizations
+  * typescript definitions. see `/resources/konva.d.ts`
 
+## Rebranding release 2015-01-28
 
-## Rebranding release 2015-01-28
 Differences from last official `KineticJS` release
 
 * Bug Fixes
-    * `strokeScaleEnabled = false` is disabled for text as I can not find a way to implement this
-    * `strokeScaleEnabled = false` for Line now creates a correct hit graph
-    * working "this-example" as name for nodes
-    * Konva.Text() with no config will not throw exception
-    * Konva.Line() with no config will not throw exception
-    * Correct stage resizing with `FastLayer`
-    * `batchDraw` method for `FastLayer`
-    * Correct mouseover/mouseout/mouseenter/mouseleave events for groups
-    * cache node before adding to layer
-    * `intersects` function now works for shapes with shadow
 
+  * `strokeScaleEnabled = false` is disabled for text as I can not find a way to implement this
+  * `strokeScaleEnabled = false` for Line now creates a correct hit graph
+  * working "this-example" as name for nodes
+  * Konva.Text() with no config will not throw exception
+  * Konva.Line() with no config will not throw exception
+  * Correct stage resizing with `FastLayer`
+  * `batchDraw` method for `FastLayer`
+  * Correct mouseover/mouseout/mouseenter/mouseleave events for groups
+  * cache node before adding to layer
+  * `intersects` function now works for shapes with shadow
+
 * Enhancements
-    * `cornerRadius` of Rect is limited by `width/2` and `height/2`
-    * `black` is default fill for text
-    * true class extending. Now `rect instanceOf Konva.Shape` will return true
-    * while dragging you can redraw layer that is not under drag. hit graph will be updated in this case
-    * now you can move object that is dragging into another layer.
-    * new `frameOffsets` attribute for `Konva.Sprite`
-    * much better dragging performance
-    * `browserify` support
-    * applying opacity to cached node
-    * remove all events with `node.off()`
-    * mouse dragging only with left button
-    * opacity now affects cached shapes
-    * Label corner radius
-    * smart changing `width`, `height`, `radius` attrs for circle, start, ellipse, ring.
-    * `mousewheel` support. Thanks [@vmichnowicz](https://github.com/vmichnowicz)
-    * new Arrow plugin
-    * multiple names: `node.name('foo bar'); container.find('.foo');` (thanks [@mattslocum](https://github.com/mattslocum))
-    * `Container.findOne()`
+  * `cornerRadius` of Rect is limited by `width/2` and `height/2`
+  * `black` is default fill for text
+  * true class extending. Now `rect instanceOf Konva.Shape` will return true
+  * while dragging you can redraw layer that is not under drag. hit graph will be updated in this case
+  * now you can move object that is dragging into another layer.
+  * new `frameOffsets` attribute for `Konva.Sprite`
+  * much better dragging performance
+  * `browserify` support
+  * applying opacity to cached node
+  * remove all events with `node.off()`
+  * mouse dragging only with left button
+  * opacity now affects cached shapes
+  * Label corner radius
+  * smart changing `width`, `height`, `radius` attrs for circle, start, ellipse, ring.
+  * `mousewheel` support. Thanks [@vmichnowicz](https://github.com/vmichnowicz)
+  * new Arrow plugin
+  * multiple names: `node.name('foo bar'); container.find('.foo');` (thanks [@mattslocum](https://github.com/mattslocum))
+  * `Container.findOne()`

konva.d.ts

@@ -1,913 +0,1003 @@
-declare module Konva {
+declare namespace Konva {
+  var pixelRatio: number;
+  var dragDistance: number;
+  var isDragging: () => boolean;
+  var isDragReady: () => boolean;
+  var DD: any;
 
-    var pixelRatio: number;
-    var dragDistance: number;
-    var isDragging: () => boolean;
-    var isDragReady: () => boolean;
-    var DD: any;
+  export class Util {
+    static getRandomColor(): string;
+    static getRGB(color: string): string;
+  }
 
-    export class Util {
-        static getRandomColor(): string;
-        static getRGB(color: string): string;
-    }
+  export class Easings {
+    static BackEaseIn(): any;
+    static BackEaseInOut(): any;
+    static BackEaseOut(): any;
+    static BounceEaseIn(): any;
+    static BounceEaseInOut(): any;
+    static BounceEaseOut(): any;
+    static EaseIn(): any;
+    static EaseInOut(): any;
+    static EaseOut(): any;
+    static ElasticEaseIn(): any;
+    static ElasticEaseInOut(): any;
+    static ElasticEaseOut(): any;
+    static Linear(): any;
+    static StrongEaseIn(): any;
+    static StrongEaseInOut(): any;
+    static StrongEaseOut(): any;
+  }
 
-    export class Easings {
-        static BackEaseIn(): any;
-        static BackEaseInOut(): any;
-        static BackEaseOut(): any;
-        static BounceEaseIn(): any;
-        static BounceEaseInOut(): any;
-        static BounceEaseOut(): any;
-        static EaseIn(): any;
-        static EaseInOut(): any;
-        static EaseOut(): any;
-        static ElasticEaseIn(): any;
-        static ElasticEaseInOut(): any;
-        static ElasticEaseOut(): any;
-        static Linear(): any;
-        static StrongEaseIn(): any;
-        static StrongEaseInOut(): any;
-        static StrongEaseOut(): any;
-    }
+  class Filter {}
 
-    class Filter {
-    }
+  export class Filters {
+    static Blur(imageData: any): Filter;
+    static Brighten(imageData: any): Filter;
+    static Emboss(imageData: any): Filter;
+    static Enhance(imageData: any): Filter;
+    static Grayscale(imageData: any): Filter;
+    static HSV(imageData: any): Filter;
+    static Invert(imageData: any): Filter;
+    static Mask(imageData: any): Filter;
+    static Noise(imageData: any): Filter;
+    static Pixelate(imageData: any): Filter;
+    static Posterize(imageData: any): Filter;
+    static RGB(imageData: any): Filter;
+    static RGA(imageData: any): Filter;
+    static Sepia(imageData: any): Filter;
+    static Solarize(imageData: any): Filter;
+    static Threshold(imageData: any): Filter;
+    static Contrast(imageData: any): Filter;
+  }
 
-    export class Filters {
-        static Blur(imageData: any): Filter;
-        static Brighten(imageData: any): Filter;
-        static Emboss(imageData: any): Filter;
-        static Enhance(imageData: any): Filter;
-        static Grayscale(imageData: any): Filter;
-        static HSV(imageData: any): Filter;
-        static Invert(imageData: any): Filter;
-        static Mask(imageData: any): Filter;
-        static Noise(imageData: any): Filter;
-        static Pixelate(imageData: any): Filter;
-        static Posterize(imageData: any): Filter;
-        static RGB(imageData: any): Filter;
-        static RGA(imageData: any): Filter;
-        static Sepia(imageData: any): Filter;
-        static Solarize(imageData: any): Filter;
-        static Threshold(imageData: any): Filter;
-    }
+  export class Animation {
+    constructor(func: Function, layers?: Layer[]);
+    constructor(func: Function, layer?: Layer);
 
-    export class Animation {
-        constructor(func: Function, layers?: Layer[]);
-        constructor(func: Function, layer?: Layer);
+    addLayer(layer: Layer): boolean;
+    getLayers(): Layer[];
+    isRunning(): boolean;
+    setLayers(layers: Layer[]): Animation;
+    setLayers(layer: Layer): Animation;
+    start(): Animation;
+    stop(): Animation;
+  }
 
-        addLayer(layer: Layer): boolean;
-        getLayers(): Layer[];
-        isRunning(): boolean;
-        setLayers(layers: Layer[]): Animation;
-        setLayers(layer: Layer): Animation;
-        start(): Animation;
-        stop(): Animation;
-    }
+  interface NodeConfig {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    visible?: boolean;
+    listening?: boolean;
+    id?: string;
+    name?: string;
+    opacity?: Number;
+    scale?: Vector2d;
+    scaleX?: number;
+    scaleY?: number;
+    rotation?: number;
+    rotationDeg?: number;
+    offset?: Vector2d;
+    offsetX?: number;
+    offsetY?: number;
+    draggable?: boolean;
+    dragDistance?: number;
+    dragBoundFunc?: (pos: Vector2d) => Vector2d;
+    preventDefault?: boolean;
+  }
 
-    interface NodeConfig {
-        x?: number;
-        y?: number;
-        width?: number;
-        height?: number;
-        visible?: boolean;
-        listening?: boolean;
-        id?: string;
-        name?: string;
-        opacity?: Number;
-        scale?: Vector2d;
-        scaleX?: number;
-        scaleY?: number;
-        rotation?: number;
-        rotationDeg?: number;
-        offset?: Vector2d;
-        offsetX?: number;
-        offsetY?: number;
-        draggable?: boolean;
-        dragDistance?: number;
-        dragBoundFunc?: (pos: Vector2d) => Vector2d;
-    }
+  interface SizeConfig {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+  }
 
-    interface SizeConfig {
-        x?: number;
-        y?: number;
-        width?: number;
-        height?: number;
-    }
+  interface ToDataURLConfig extends SizeConfig {
+    callback: Function;
+    mimeType?: string;
+    quality?: number;
+  }
 
-    interface ToDataURLConfig extends SizeConfig {
-        callback: Function;
-        mimeType?: string;
-        quality?: number;
-    }
+  interface CacheConfig extends SizeConfig {
+    drawBorder?: boolean;
+    pixelRatio?: number;
+  }
 
-    interface CacheConfig extends SizeConfig {
-        drawBorder?: boolean;
-    }
+  interface ClearConfig extends SizeConfig {}
 
-    interface ClearConfig extends SizeConfig {
-    }
+  class Node {
+    constructor(config: NodeConfig);
+    static create<T>(data: any, container?: HTMLElement): T;
+    preventDefault(): boolean;
+    preventDefault(preventDefault: boolean): this;
 
-    class Node {
-        constructor(config: NodeConfig);
-        static create<T>(data: any, container?: HTMLElement): T;
+    addName(name: string): Node;
+    blue(): number;
+    blue(blue: number): this;
+    brightness(): number;
+    brightness(brightness: number): this;
+    contrast(): number;
+    contrast(contrast: number): this;
+    blurRadius(): number;
+    blurRadius(radius: number): this;
+    cache(config?: CacheConfig): this;
+    clearCache(): this;
+    clear(bounds?: ClearConfig): this;
+    clone(attrs?: NodeConfig): this;
+    destroy(): void;
 
-        blue(): number;
-        blue(blue: number): Node;
-        brightness(): number;
-        brightness(brightness: number): Node;
-        blurRadius(): number;
-        blurRadius(radius: number): Node;
-        cache(config?: CacheConfig): Node;
-        clearCache(): Node;
-        clear(bounds?: ClearConfig): Node;
-        clone(attrs?: NodeConfig): Node;
-        destroy(): void;
+    dragBoundFunc(): (pos: Vector2d) => Vector2d;
+    dragBoundFunc(dragBoundFunc: (pos: Vector2d) => Vector2d): this;
+    draggable(): boolean;
+    draggable(draggable: boolean): this;
+    draw(): this;
+    embossBlend(): boolean;
+    embossBlend(embossBlend: boolean): this;
+    embossDirection(): string;
+    embossDirection(embossDirection: string): this;
+    embossStrength(): number;
+    embossStrength(level: number): this;
+    embossWhiteLevel(): number;
+    embossWhiteLevel(embossWhiteLevel: number): this;
+    enhance(): number;
+    enhance(enhance: number): this;
+    filters(): Filter[];
+    filters(filters: Filter): this;
+    findAncestor(
+      selector?: string,
+      includeSelf?: boolean,
+      stopNode?: Node
+    ): this;
+    findAncestors(
+      selector?: string,
+      includeSelf?: boolean,
+      stopNode?: Node
+    ): Node[];
+    fire(eventType: string, evt?: any, bubble?: boolean): this;
+    getAbsoluteOpacity(): number;
+    getAbsolutePosition(): Vector2d;
+    getAbsoluteTransform(): Transform;
+    getAbsoluteZIndex(): number;
+    getAncestors(): Collection;
+    getAttr(attr: string): any;
+    getAttrs(): NodeConfig;
+    // CHECK
+    getCanvas(): Canvas;
+    getClassName(): string;
+    getClientRect(): SizeConfig;
+    getContext(): Context;
+    getDepth(): number;
+    getHeight(): number;
+    getHitCanvas(): Canvas;
+    getLayer(): Layer;
+    getParent(): Container;
+    getPosition(): Vector2d;
+    // CHECK
+    getSize(): {
+      width: number;
+      height: number;
+    };
+    getStage(): Stage;
+    getTransform(): Transform;
+    getType(): String;
+    getWidth(): number;
+    getZIndex(): number;
+    green(): number;
+    green(green: number): this;
+    hasName(name: string): boolean;
+    height(): number;
+    height(height: number): this;
+    hide(): void;
+    hue(): number;
+    hue(hue: number): this;
+    id(): string;
+    id(id: string): this;
+    isDragging(): boolean;
+    isListening(): boolean;
+    isVisible(): boolean;
+    kaleidoscopeAngle(): number;
+    kaleidoscopeAngle(kaleidoscopeAngle: number): this;
+    kaleidoscopePower(): number;
+    kaleidoscopePower(kaleidoscopePower: number): this;
+    levels(): number;
+    levels(levels: number): this;
+    listening(): any;
+    listening(listening: boolean): this;
+    listening(listening: string): this;
+    move(move: Vector2d): this;
+    moveDown(): boolean;
+    moveTo(newContainer: Container): this;
+    moveToBottom(): boolean;
+    moveToTop(): boolean;
+    moveUp(): boolean;
+    name(): string;
+    name(name: string): this;
+    noise(): number;
+    noise(noise: number): this;
+    off(evtStr: string): this;
+    offset(): Vector2d;
+    offset(offset: Vector2d): this;
+    offsetX(): number;
+    offsetX(offsetX: number): this;
+    offsetY(): number;
+    offsetY(offsetY: number): this;
+    on(evtStr: string, handler: Function): this;
+    opacity(): number;
+    opacity(opacity: number): this;
+    pixelSize(): number;
+    pixelSize(pixelSize: number): this;
+    position(): Vector2d;
+    position(position: Vector2d): this;
+    red(): number;
+    red(red: number): this;
+    remove(): this;
+    removeName(name: string): this;
+    rotate(theta: number): this;
+    rotation(): number;
+    rotation(rotation: number): this;
+    saturation(): number;
+    saturation(saturation: number): this;
+    scale(): Vector2d;
+    scale(scale: Vector2d): this;
+    scaleX(): number;
+    scaleX(scaleX: number): this;
+    scaleY(): number;
+    scaleY(scaleY: number): this;
+    setAbsolutePosition(pos: Vector2d): this;
+    setAttr(attr: string, val: any): this;
+    setAttrs(attrs: NodeConfig): void;
+    setId(id: string): this;
+    setSize(size: { width: number; height: number }): this;
+    setZIndex(zIndex: number): void;
+    shouldDrawHit(): boolean;
+    show(): this;
+    skew(): Vector2d;
+    skew(skew: Vector2d): this;
+    skewX(): number;
+    skewX(skewX: number): this;
+    skewY(): number;
+    skewY(skewY: number): this;
+    startDrag(): void;
+    stopDrag(): void;
+    threshold(): number;
+    threshold(threshold: number): this;
+    to(params: any): void;
+    toDataURL(config: ToDataURLConfig): string;
+    toImage(config: ToDataURLConfig): HTMLImageElement;
+    toJSON(): string;
+    toObject(): any;
+    transformsEnabled(): string;
+    transformsEnabled(transformsEnabled: string): this;
+    value(): number;
+    value(value: number): this;
+    visible(): any;
+    visible(visible: boolean): this;
+    visible(visible: string): this;
+    width(): number;
+    width(width: number): this;
+    x(): number;
+    x(x: number): this;
+    y(): number;
+    y(y: number): this;
+  }
 
-        dragBoundFunc(): (pos: Vector2d) => Vector2d;
-        dragBoundFunc(dragBoundFunc: (pos: Vector2d) => Vector2d): Node;
-        draggable(): boolean;
-        draggable(draggable: boolean): Node;
-        draw(): Node;
-        embossBlend(): boolean;
-        embossBlend(embossBlend: boolean): Node;
-        embossDirection(): string;
-        embossDirection(embossDirection: string): Node;
-        embossStrength(): number;
-        embossStrength(level: number): Node;
-        embossWhiteLevel(): number;
-        embossWhiteLevel(embossWhiteLevel: number): Node;
-        enhance(): number;
-        enhance(enhance: number): Node;
-        filters(): Filter[];
-        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;
-        getAbsoluteOpacity(): number;
-        getAbsolutePosition(): Vector2d;
-        getAbsoluteTransform(): Transform;
-        getAbsoluteZIndex(): number;
-        getAncestors(): Collection;
-        getAttr(attr: string): any;
-        getAttrs(): NodeConfig;
-        // CHECK
-        getCanvas(): Canvas;
-        getClassName(): string;
-        getClientRect(): SizeConfig;
-        getContext(): Context;
-        getDepth(): number;
-        getHeight(): number;
-        getHitCanvas(): Canvas;
-        getLayer(): Layer;
-        getParent(): Container;
-        getPosition(): Vector2d;
-        // CHECK
-        getSize(): {
-            width: number;
-            height: number;
-        };
-        getStage(): Stage;
-        getTransform(): Transform;
-        getType(): String;
-        getWidth(): number;
-        getZIndex(): number;
-        green(): number;
-        green(green: number): Node;
-        height(): number;
-        height(height: number): Node;
-        hide(): void;
-        hue(): number;
-        hue(hue: number): Node;
-        id(): string;
-        id(id: string): Node;
-        isDragging(): boolean;
-        isListening(): boolean;
-        isVisible(): boolean;
-        kaleidoscopeAngle(): number;
-        kaleidoscopeAngle(kaleidoscopeAngle: number): Node;
-        kaleidoscopePower(): number;
-        kaleidoscopePower(kaleidoscopePower: number): Node;
-        levels(): number;
-        levels(levels: number): Node;
-        listening(): any;
-        listening(listening: boolean): Node;
-        listening(listening: string): Node;
-        move(move: Vector2d): Node;
-        moveDown(): boolean;
-        moveTo(newContainer: Container): Node;
-        moveToBottom(): boolean;
-        moveToTop(): boolean;
-        moveUp(): boolean;
-        name(): string;
-        name(name: string): Node;
-        noise(): number;
-        noise(noise: number): Node;
-        off(evtStr: string): Node;
-        offset(): Vector2d;
-        offset(offset: Vector2d): Node;
-        offsetX(): number;
-        offsetX(offsetX: number): Node;
-        offsetY(): number;
-        offsetY(offsetY: number): Node;
-        on(evtStr: string, handler: Function): Node;
-        opacity(): number;
-        opacity(opacity: number): Node;
-        pixelSize(): number;
-        pixelSize(pixelSize: number): Node;
-        position(): Vector2d;
-        position(position: Vector2d): Node;
-        preventDefault(): boolean;
-        preventDefault(preventDefault: boolean): Node;
-        red(): number;
-        red(red: number): Node;
-        remove(): Node;
-        rotate(theta: number): Node;
-        rotation(): number;
-        rotation(rotation: number): Node;
-        saturation(): number;
-        saturation(saturation: number): Node;
-        scale(): Vector2d;
-        scale(scale: Vector2d): Node;
-        scaleX(): number;
-        scaleX(scaleX: number): Node;
-        scaleY(): number;
-        scaleY(scaleY: number): Node;
-        setAbsolutePosition(pos: Vector2d): Node;
-        setAttr(attr: string, val: any): Node;
-        setAttrs(attrs: NodeConfig): void;
-        setId(id: string): Node;
-        setSize(size: { width: number; height: number }): Node;
-        setZIndex(zIndex: number): void;
-        shouldDrawHit(): boolean;
-        show(): Node;
-        skew(): Vector2d;
-        skew(skew: Vector2d): Node;
-        skewX(): number;
-        skewX(skewX: number): Node;
-        skewY(): number;
-        skewY(skewY: number): Node;
-        startDrag(): void;
-        stopDrag(): void;
-        threshold(): number;
-        threshold(threshold: number): Node;
-        toDataURL(config: ToDataURLConfig): string;
-        toImage(config: ToDataURLConfig): HTMLImageElement;
-        toJSON(): string;
-        toObject(): any;
-        transformsEnabled(): string;
-        transformsEnabled(transformsEnabled: string): Node;
-        value(): number;
-        value(value: number): Node;
-        visible(): any;
-        visible(visible: boolean): Node;
-        visible(visible: string): Node;
-        width(): number;
-        width(width: number): Node;
-        x(): number;
-        x(x: number): Node;
-        y(): number;
-        y(y: number): Node;
-    }
+  interface ContainerConfig extends NodeConfig {
+    clearBeforeDraw?: boolean;
+    clipFunc?: (ctx: CanvasRenderingContext2D) => void;
+  }
 
-    interface ContainerConfig extends NodeConfig {
-        clearBeforeDraw?: boolean;
-        clipFunc?: (ctx: CanvasRenderingContext2D) => void;
-    }
+  class Container extends Node {
+    constructor(params?: ContainerConfig);
+    add(...children: Node[]): this;
+    getChildren(filterfunc?: Function): Collection;
+    clip(): SizeConfig;
+    clip(clip: SizeConfig | undefined | null): this;
+    clipHeight(): number;
+    clipHeight(clipHeight: number | undefined | null): this;
+    clipWidth(): number;
+    clipWidth(clipWidth: number | undefined | null): this;
+    clipX(): number;
+    clipX(clipX: number | undefined | null): this;
+    clipY(): number;
+    clipY(clipY: number | undefined | null): this;
+    clipFunc(): (ctx: CanvasRenderingContext2D) => void;
+    clipFunc(ctx: CanvasRenderingContext2D | undefined | null): void;
+    destroyChildren(): void;
+    find(selector?: string): Collection;
+    findOne<T extends Node>(selector: string): T;
+    getAllIntersections(pos: Vector2d): Shape[];
+    hasChildren(): boolean;
+    removeChildren(): void;
+  }
 
-    class Container extends Node {
-        constructor(params?: ContainerConfig);
-        add(...children: Node[]): Container;
-        getChildren(filterfunc?: Function): Collection;
-        clip(): SizeConfig;
-        clip(clip: SizeConfig): Container;
-        clipHeight(): number;
-        clipHeight(clipHeight: number): Container;
-        clipWidth(): number;
-        clipWidth(clipWidth: number): Container;
-        clipX(): number;
-        clipX(clipX: number): Container;
-        clipY(): number;
-        clipY(clipY: number): Container;
-        clipFunc(): (ctx: CanvasRenderingContext2D) => void;
-        clipFunc(ctx: CanvasRenderingContext2D): void;
-        destroyChildren(): void;
-        find(selector?: string): Collection;
-        getAllIntersections(pos: Vector2d): Node[];
-        hasChildren(): boolean;
-        removeChildren(): void;
-    }
+  interface ShapeConfig extends NodeConfig {
+    fill?: string;
+    fillPatternImage?: HTMLImageElement;
+    fillPatternX?: number;
+    fillPatternY?: number;
+    fillPatternOffset?: Vector2d;
+    fillPatternOffsetX?: number;
+    fillPatternOffsetY?: number;
+    fillPatternScale?: Vector2d;
+    fillPatternScaleX?: number;
+    fillPatternScaleY?: number;
+    fillPatternRotation?: number;
+    fillPatternRepeat?: string;
+    fillLinearGradientStartPoint?: Vector2d;
+    fillLinearGradientStartPointX?: number;
+    fillLinearGradientStartPointY?: number;
+    fillLinearGradientEndPoint?: Vector2d;
+    fillLinearGradientEndPointX?: number;
+    fillLinearGradientEndPointY?: number;
+    fillLinearGradientColorStops?: Array<number | string>;
+    fillRadialGradientStartPoint?: Vector2d;
+    fillRadialGradientStartPointX?: number;
+    fillRadialGradientStartPointY?: number;
+    fillRadialGradientEndPoint?: Vector2d;
+    fillRadialGradientEndPointX?: number;
+    fillRadialGradientEndPointY?: number;
+    fillRadialGradientStartRadius?: number;
+    fillRadialGradientEndRadius?: number;
+    fillRadialGradientColorStops?: Array<number | string>;
+    fillEnabled?: boolean;
+    fillPriority?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeScaleEnabled?: boolean;
+    strokeHitEnabled?: boolean;
+    strokeEnabled?: boolean;
+    lineJoin?: string;
+    lineCap?: string;
+    sceneFunc?: (con: Context) => void;
+    hitFunc?: (con: Context) => void;
+    drawFunc?: (con: Context) => void;
+    shadowColor?: string;
+    shadowBlur?: number;
+    shadowOffset?: Vector2d;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowOpacity?: number;
+    shadowEnabled?: boolean;
+    dash?: number[];
+    dashEnabled?: boolean;
+    perfectDrawEnabled?: boolean;
+  }
 
-    interface ShapeConfig extends NodeConfig {
-        fill?: string;
-        fillPatternImage?: HTMLImageElement;
-        fillPatternX?: number;
-        fillPatternY?: number;
-        fillPatternOffset?: Vector2d;
-        fillPatternOffsetX?: number;
-        fillPatternOffsetY?: number;
-        fillPatternScale?: Vector2d;
-        fillPatternScaleX?: number;
-        fillPatternScaleY?: number;
-        fillPatternRotation?: number;
-        fillPatternRepeat?: string;
-        fillLinearGradientStartPoint?: Vector2d;
-        fillLinearGradientStartPointX?: number;
-        fillLinearGradientStartPointY?: number;
-        fillLinearGradientEndPoint?: Vector2d;
-        fillLinearGradientEndPointX?: number;
-        fillLinearGradientEndPointY?: number;
-        fillLinearGradientColorStops?: Array<number | string>;
-        fillLinearRadialStartPoint?: Vector2d;
-        fillLinearRadialStartPointX?: number;
-        fillLinearRadialStartPointY?: number;
-        fillLinearRadialEndPoint?: Vector2d;
-        fillLinearRadialEndPointX?: number;
-        fillLinearRadialEndPointY?: number;
-        fillRadialGradientStartRadius?: number;
-        fillRadialGradientEndRadius?: number;
-        fillRadialGradientColorStops?: Array<number | string>;
-        fillEnabled?: boolean;
-        fillPriority?: string;
-        stroke?: string;
-        strokeWidth?: number;
-        strokeScaleEnabled?: boolean;
-        strokeHitEnabled?: boolean;
-        strokeEnabled?: boolean;
-        lineJoin?: string;
-        lineCap?: string;
-        sceneFunc?: (con: Context) => void;
-        hitFunc?: (con: Context) => void;
-        drawFunc?: (con: Context) => void;
-        shadowColor?: string;
-        shadowBlur?: number;
-        shadowOffset?: Vector2d;
-        shadowOffsetX?: number;
-        shadowOffsetY?: number;
-        shadowOpacity?: number;
-        shadowEnabled?: boolean;
-        dash?: number[];
-        dashEnabled?: boolean;
-    }
+  class Shape extends Node {
+    constructor(ShapeConfig: ShapeConfig);
+    dash(): number[];
+    dash(dash: number[]): this;
+    dashEnabled(): boolean;
+    dashEnabled(dashEnabled: boolean): this;
+    drawHitFromCache(alphaThreshold: number): this;
+    fill(): string;
+    fill(fill: string): this;
+    fillEnabled(): boolean;
+    fillEnabled(fillEnabled: boolean): this;
+    fillLinearGradientColorStops(): Array<number | string>;
+    fillLinearGradientColorStops(colors: Array<number | string>): this;
+    fillLinearGradientStartPoint(): Vector2d;
+    fillLinearGradientStartPoint(point: Vector2d): Vector2d;
+    fillLinearGradientStartPointX(): number;
+    fillLinearGradientStartPointX(x: number): this;
+    fillLinearGradientStartPointY(): number;
+    fillLinearGradientStartPointY(y: number): this;
+    fillLinearGradientEndPoint(): Vector2d;
+    fillLinearGradientEndPoint(point: Vector2d): this;
+    fillLinearGradientEndPointX(): number;
+    fillLinearGradientEndPointX(x: number): this;
+    fillLinearGradientEndPointY(): number;
+    fillLinearGradientEndPointY(y: number): this;
+    fillLinearRadialStartPoint(): Vector2d;
+    fillLinearRadialStartPoint(point: Vector2d): this;
+    fillLinearRadialStartPointX(): number;
+    fillLinearRadialStartPointX(x: number): this;
+    fillLinearRadialStartPointY(): number;
+    fillLinearRadialStartPointY(y: number): this;
+    fillLinearRadialEndPoint(): Vector2d;
+    fillLinearRadialEndPoint(point: Vector2d): Vector2d;
+    fillLinearRadialEndPointX(): number;
+    fillLinearRadialEndPointX(x: number): this;
+    fillLinearRadialEndPointY(): number;
+    fillLinearRadialEndPointY(y: number): this;
+    fillPatternImage(): HTMLImageElement;
+    fillPatternImage(image: HTMLImageElement): this;
+    fillRadialGradientStartRadius(): number;
+    fillRadialGradientStartRadius(radius: number): this;
+    fillRadialGradientEndRadius(): number;
+    fillRadialGradientEndRadius(radius: number): this;
+    fillRadialGradientColorStops(): Array<number | string>;
+    fillRadialGradientColorStops(color: Array<number | string>): this;
+    fillPatternOffset(): Vector2d;
+    fillPatternOffset(offset: Vector2d): this;
+    fillPatternOffsetX(): number;
+    fillPatternOffsetX(x: number): this;
+    fillPatternOffsetY(): number;
+    fillPatternOffsetY(y: number): this;
+    fillPatternRepeat(): string;
+    fillPatternRepeat(repeat: string): this;
+    fillPatternRotation(): number;
+    fillPatternRotation(rotation: number): this;
+    fillPatternScale(): Vector2d;
+    fillPatternScale(scale: Vector2d): this;
+    fillPatternScaleX(): number;
+    fillPatternScaleX(x: number): this;
+    fillPatternScaleY(): number;
+    fillPatternScaleY(y: number): this;
+    fillPatternX(): number;
+    fillPatternX(x: number): number;
+    fillPatternY(): number;
+    fillPatternY(y: number): this;
+    fillPriority(): string;
+    fillPriority(priority: string): this;
+    hasFill(): boolean;
+    hasShadow(): boolean;
+    hasStroke(): boolean;
+    hitFunc(): Function;
+    hitFunc(func: Function): this;
+    intersects(point: Vector2d): boolean;
+    lineCap(): string;
+    lineCap(lineCap: string): this;
+    lineJoin(): string;
+    lineJoin(lineJoin: string): this;
+    sceneFunc(): Function;
+    sceneFunc(func: (con: Context) => {}): this;
+    shadowColor(): string;
+    shadowColor(shadowColor: string): this;
+    shadowEnabled(): boolean;
+    shadowEnabled(shadowEnabled: boolean): this;
+    shadowOffset(): Vector2d;
+    shadowOffset(shadowOffset: Vector2d): this;
+    shadowOffsetX(): number;
+    shadowOffsetX(shadowOffsetX: number): this;
+    shadowOffsetY(): number;
+    shadowOffsetY(shadowOffsetY: number): this;
+    shadowOpacity(): number;
+    shadowOpacity(shadowOpacity: number): this;
+    shadowBlur(): number;
+    shadowBlur(blur: number): this;
+    stroke(): string;
+    stroke(stroke: string): this;
+    strokeEnabled(): boolean;
+    strokeEnabled(strokeEnabled: boolean): this;
+    strokeScaleEnabled(): boolean;
+    strokeScaleEnabled(strokeScaleEnabled: boolean): this;
+    strokeHitEnabled(): boolean;
+    strokeHitEnabled(strokeHitEnabled: boolean): this;
+    strokeWidth(): number;
+    strokeWidth(strokeWidth: number): this;
+  }
 
-    class Shape extends Node {
-        constructor(ShapeConfig: ShapeConfig);
-        dash(): number[];
-        dash(dash: number[]): Shape;
-        dashEnabled(): boolean;
-        dashEnabled(dashEnabled: boolean): Shape;
-        drawHitFromCache(alphaThreshold: number): Shape;
-        fill(): string;
-        fill(fill: string): Shape;
-        fillEnabled(): boolean;
-        fillEnabled(fillEnabled: boolean): Shape;
-        fillLinearGradientColorStops(): Array<number | string>;
-        fillLinearGradientColorStops(colors: Array<number | string>): Shape;
-        fillLinearGradientStartPoint(): Vector2d;
-        fillLinearGradientStartPoint(point: Vector2d): Vector2d;
-        fillLinearGradientStartPointX(): number;
-        fillLinearGradientStartPointX(x: number): Shape;
-        fillLinearGradientStartPointY(): number;
-        fillLinearGradientStartPointY(y: number): Shape;
-        fillLinearGradientEndPoint(): Vector2d;
-        fillLinearGradientEndPoint(point: Vector2d): Shape;
-        fillLinearGradientEndPointX(): number;
-        fillLinearGradientEndPointX(x: number): Shape;
-        fillLinearGradientEndPointY(): number;
-        fillLinearGradientEndPointY(y: number): Shape;
-        fillLinearRadialStartPoint(): Vector2d;
-        fillLinearRadialStartPoint(point: Vector2d): Shape;
-        fillLinearRadialStartPointX(): number;
-        fillLinearRadialStartPointX(x: number): Shape;
-        fillLinearRadialStartPointY(): number;
-        fillLinearRadialStartPointY(y: number): Shape;
-        fillLinearRadialEndPoint(): Vector2d;
-        fillLinearRadialEndPoint(point: Vector2d): Vector2d;
-        fillLinearRadialEndPointX(): number;
-        fillLinearRadialEndPointX(x: number): Shape;
-        fillLinearRadialEndPointY(): number;
-        fillLinearRadialEndPointY(y: number): Shape;
-        fillPatternImage(): HTMLImageElement;
-        fillPatternImage(image: HTMLImageElement): Shape;
-        fillRadialGradientStartRadius(): number;
-        fillRadialGradientStartRadius(radius: number): Shape;
-        fillRadialGradientEndRadius(): number;
-        fillRadialGradientEndRadius(radius: number): Shape;
-        fillRadialGradientColorStops(): Array<number | string>;
-        fillRadialGradientColorStops(color: Array<number | string>): Shape;
-        fillPatternOffset(): Vector2d;
-        fillPatternOffset(offset: Vector2d): Shape;
-        fillPatternOffsetX(): number;
-        fillPatternOffsetX(x: number): Shape;
-        fillPatternOffsetY(): number;
-        fillPatternOffsetY(y: number): Shape;
-        fillPatternRepeat(): string;
-        fillPatternRepeat(repeat: string): Shape;
-        fillPatternRotation(): number;
-        fillPatternRotation(rotation: number): Shape;
-        fillPatternScale(): Vector2d;
-        fillPatternScale(scale: Vector2d): Shape;
-        fillPatternScaleX(): number;
-        fillPatternScaleX(x: number): Shape;
-        fillPatternScaleY(): number;
-        fillPatternScaleY(y: number): Shape;
-        fillPatternX(): number;
-        fillPatternX(x: number): number;
-        fillPatternY(): number;
-        fillPatternY(y: number): Shape;
-        fillPriority(): string;
-        fillPriority(priority: string): Shape;
-        hasFill(): boolean;
-        hasShadow(): boolean;
-        hasStroke(): boolean;
-        hitFunc(): Function;
-        hitFunc(func: Function): Shape;
-        intersects(point: Vector2d): boolean;
-        lineCap(): string;
-        lineCap(lineCap: string): Shape;
-        lineJoin(): string;
-        lineJoin(lineJoin: string): Shape;
-        sceneFunc(): Function;
-        sceneFunc(func: (con: Context) => {}): Shape;
-        shadowColor(): string;
-        shadowColor(shadowColor: string): Shape;
-        shadowEnabled(): boolean;
-        shadowEnabled(shadowEnabled: boolean): Shape;
-        shadowOffset(): Vector2d;
-        shadowOffset(shadowOffset: Vector2d): Shape;
-        shadowOffsetX(): number;
-        shadowOffsetX(shadowOffsetX: number): Shape;
-        shadowOffsetY(): number;
-        shadowOffsetY(shadowOffsetY: number): Shape;
-        shadowOpacity(): number;
-        shadowOpacity(shadowOpacity: number): Shape;
-        shadowBlur(): number;
-        shadowBlur(blur: number): Shape;
-        stroke(): string;
-        stroke(stroke: string): Shape;
-        strokeEnabled(): boolean;
-        strokeEnabled(strokeEnabled: boolean): Shape;
-        strokeScaleEnabled(): boolean;
-        strokeScaleEnabled(strokeScaleEnabled: boolean): Shape;
-        strokeHitEnabled(): boolean;
-        strokeHitEnabled(strokeHitEnabled: boolean): Shape;
-        strokeWidth(): number;
-        strokeWidth(strokeWidth: number): Shape;
-    }
+  interface StageConfig extends ContainerConfig {
+    container: any;
+  }
 
-    interface StageConfig extends ContainerConfig {
-        container: any;
-    }
+  class Stage extends Container {
+    constructor(StageConfig: StageConfig);
+    add(...layers: Layer[]): this;
+    add(...layers: FastLayer[]): this;
+    batchDraw(): void;
+    container(): HTMLElement;
+    destroy(): void;
+    drawHit(): void;
+    getIntersection(pos: Vector2d, selector?: string): Shape;
+    getLayers(): Layer[];
+    getPointerPosition(): Vector2d;
+    setContainer(con: HTMLElement): void;
+    setHeight(height: number): void;
+    setWidth(width: number): void;
+  }
 
-    class Stage extends Container {
-        constructor(StageConfig: StageConfig);
-        add(...layers: Layer[]): Stage;
-        add(...layers: FastLayer[]): Stage;
-        batchDraw(): void;
-        container(): HTMLElement;
-        destroy(): void;
-        drawHit(): void;
-        getIntersection(pos: Vector2d, selector?: string): Shape;
-        getLayers(): Layer[];
-        getPointerPosition(): Vector2d;
-        setContainer(con: HTMLElement): void;
-        setHeight(height: number): void;
-        setWidth(width: number): void;
-    }
+  interface LayerConfig extends ContainerConfig {
+    clearBeforeDraw?: boolean;
+    hitGraphEnabled?: boolean;
+  }
 
-    interface LayerConfig extends ContainerConfig {
-        clearBeforeDraw?: boolean;
-        hitGraphEnabled?: boolean;
-    }
+  class FastLayer extends Container {
+    constructor(config?: LayerConfig);
+    drawScene(): void;
+    hitGraphEnabled(val: boolean): this;
+    batchDraw(): void;
+  }
 
-    class FastLayer extends Container {
-        constructor (config?: LayerConfig);
-        drawScene(): void;
-        hitGraphEnabled(val: boolean): FastLayer;
-        batchDraw(): void;
-    }
+  class Layer extends Container {
+    constructor(config?: LayerConfig);
+    getIntersection(pos: Vector2d, selector?: string): Shape;
+    enableHitGraph(): this;
+    disableHitGraph(): this;
+    clearBeforeDraw(): boolean;
+    clearBeforeDraw(val: boolean): this;
+    hitGraphEnabled(): boolean;
+    hitGraphEnabled(val: boolean): this;
+    batchDraw(): void;
+    drawScene(): void;
+  }
 
-    class Layer extends Container {
-        constructor(config?: LayerConfig);
-        getIntersection(pos: Vector2d, selector?: string): Shape;
-        enableHitGraph(): Layer;
-        disableHitGraph(): Layer;
-        clearBeforeDraw(): boolean;
-        clearBeforeDraw(val: boolean): Layer;
-        hitGraphEnabled(): boolean;
-        hitGraphEnabled(val: boolean): Layer;
-        batchDraw(): void;
-        drawScene(): void;
-    }
+  class Group extends Container {}
 
-    class Group extends Container {
+  interface CanvasConfig {
+    width: number;
+    height: number;
+    pixelRatio: number;
+  }
 
-    }
+  class Canvas {
+    constructor(CanvasConfig: CanvasConfig);
+    getContext(): CanvasRenderingContext2D;
+    getHeight(): number;
+    getWidth(): number;
+    getPixelRatio(): number;
+    setHeight(val: number): void;
+    setWidth(val: number): void;
+    setPixelRatio(val: number): void;
+    setSize(size: { width: number; height: number }): void;
+    toDataURL(mimeType: string, quality: number): string;
+    public _canvas: HTMLElement;
+  }
 
-    interface CanvasConfig {
-        width: number;
-        height: number;
-        pixelRatio: number;
-    }
+  class Context {
+    clear(bounds?: ClearConfig): Context;
+    clearTrace(): void;
+    fillShape(shape: Shape): void;
+    fillStrokeShape(shape: Shape): void;
+    getCanvas(): Canvas;
+    getTrace(relaxed: boolean): string;
+    reset(): void;
+    setAttr(attr: string, value: any): void;
+    strokeShape(shape: Shape): void;
 
-    class Canvas {
-        constructor(CanvasConfig: CanvasConfig);
-        getContext(): CanvasRenderingContext2D;
-        getHeight(): number;
-        getWidth(): number;
-        getPixelRatio(): number;
-        setHeight(val: number): void;
-        setWidth(val: number): void;
-        setPixelRatio(val: number): void;
-        setSize(size: { width: number; height: number }): void;
-        toDataURL(mimeType: string, quality: number): string;
-        public _canvas: HTMLElement;
-    }
+    // 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;
+    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;
+    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;
+  }
 
-    class Context {
-        clear(bounds?: ClearConfig): Context;
-        clearTrace(): void;
-        fillShape(shape: Shape): void;
-        fillStrokeShape(shape: Shape): void;
-        getCanvas(): Canvas;
-        getTrace(relaxed: boolean): string;
-        reset(): void;
-        setAttr(attr: string, value: any): void;
-        strokeShape(shape: Shape): void;
+  class Tween {
+    constructor(params: any);
+    destroy(): void;
+    finish(): Tween;
+    pause(): Tween;
+    play(): Tween;
+    reset(): Tween;
+    reverse(): Tween;
+    seek(t: number): Tween;
+  }
 
-        // 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;
-        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;
-        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;
-    }
+  // Shapes
 
-    class Tween {
-        constructor(params: any);
-        destroy(): void;
-        finish(): Tween;
-        pause(): Tween;
-        play(): Tween;
-        reset(): Tween;
-        reverse(): Tween;
-        seek(t: number): Tween;
-    }
+  interface RingConfig extends ShapeConfig {
+    innerRadius: number;
+    outerRadius: number;
+    clockwise?: boolean;
+  }
 
-    // Shapes
+  class Ring extends Shape {
+    constructor(RingConfig: RingConfig);
+    innerRadius(): number;
+    innerRadius(innerRadius: number): this;
+    outerRadius(): number;
+    outerRadius(outerRadius: number): this;
+  }
 
-    interface RingConfig extends ShapeConfig {
-        innerRadius: number;
-        outerRadius: number;
-        clockwise?: boolean;
-    }
+  interface ArcConfig extends ShapeConfig {
+    angle: number;
+    innerRadius: number;
+    outerRadius: number;
+    clockwise?: boolean;
+  }
 
-    class Ring extends Shape {
-        constructor(RingConfig: RingConfig);
-        innerRadius(): number;
-        innerRadius(innerRadius: number): Ring;
-        outerRadius(): number;
-        outerRadius(outerRadius: number): Ring;
-    }
+  class Arc extends Shape {
+    constructor(ArcConfig: ArcConfig);
+    angle(): number;
+    angle(angle: number): this;
+    clockwise(): boolean;
+    clockwise(clockwise: boolean): this;
+    innerRadius(): number;
+    innerRadius(innerRadius: number): this;
+    outerRadius(): number;
+    outerRadius(outerRadius: number): this;
+  }
 
-    interface ArcConfig extends ShapeConfig {
-        angle: number;
-        innerRadius: number;
-        outerRadius: number;
-        clockwise?: boolean;
-    }
+  interface CircleConfig extends ShapeConfig {
+    radius: number;
+  }
 
-    class Arc extends Shape {
-        constructor(ArcConfig: ArcConfig);
-        angle(): number;
-        angle(angle: number): Ring;
-        clockwise(): boolean;
-        clockwise(clockwise: boolean): Arc;
-        innerRadius(): number;
-        innerRadius(innerRadius: number): Arc;
-        outerRadius(): number;
-        outerRadius(outerRadius: number): Arc;
-    }
+  class Circle extends Shape {
+    constructor(CircleConfig: CircleConfig);
+    radius(): number;
+    radius(radius: number): this;
+  }
 
-    interface CircleConfig extends ShapeConfig {
-        radius: number;
-    }
+  interface EllipseConfig extends ShapeConfig {
+    radius: any;
+  }
 
-    class Circle extends Shape {
-        constructor(CircleConfig: CircleConfig);
-        radius(): number;
-        radius(radius: number): Circle;
-    }
+  class Ellipse extends Shape {
+    constructor(EllipseConfig: EllipseConfig);
+    radius(): any;
+    radius(radius: any): this;
+    radiusX(): number;
+    radiusX(radiusX: number): this;
+    radiusY(): number;
+    radiusY(radiusY: number): this;
+  }
 
-    interface EllipseConfig extends ShapeConfig {
-        radius: any;
-    }
+  interface ImageConfig extends ShapeConfig {
+    image: HTMLImageElement;
+    crop?: SizeConfig;
+  }
 
-    class Ellipse extends Shape {
-        constructor(EllipseConfig: EllipseConfig);
-        radius(): any;
-        radius(radius: any): Ellipse;
-        radiusX(): number;
-        radiusX(radiusX: number): Ellipse;
-        radiusY(): number;
-        radiusY(radiusY: number): Ellipse;
-    }
+  class Image extends Shape {
+    constructor(ImageConfig: ImageConfig);
+    image(): HTMLImageElement;
+    image(image: HTMLImageElement): this;
+    crop(): SizeConfig;
+    crop(crop: SizeConfig): this;
+    cropX(): number;
+    cropX(cropX: number): this;
+    cropY(): number;
+    cropY(cropY: number): this;
+    cropWidth(): number;
+    cropWidth(cropWidth: number): this;
+    cropHeight(): number;
+    cropHeight(cropHeight: number): this;
+    static fromURL(url: string, callback: (image: Konva.Image) => void): void;
+  }
 
-    interface ImageConfig extends ShapeConfig {
-        image: HTMLImageElement;
-        crop?: SizeConfig;
-    }
+  interface LineConfig extends ShapeConfig {
+    points: number[];
+    tension?: number;
+    closed?: boolean;
+  }
 
-    class Image extends Shape {
-        constructor(ImageConfig: ImageConfig);
-        image(): HTMLImageElement;
-        image(image: HTMLImageElement): Image;
-        crop(): SizeConfig;
-        crop(crop: SizeConfig): Image;
-        cropX(): number;
-        cropX(cropX: number): Image;
-        cropY(): number;
-        cropY(cropY: number): Image;
-        cropWidth(): number;
-        cropWidth(cropWidth: number): Image;
-        cropHeight(): number;
-        cropHeight(cropHeight: number): Image;
-    }
+  class Line extends Shape {
+    constructor(LineConfig: LineConfig);
+    closed(): boolean;
+    closed(closed: boolean): this;
+    tension(): number;
+    tension(tension: number): this;
+    points(): number[];
+    points(points: number[]): this;
+  }
 
-    interface LineConfig extends ShapeConfig {
-        points: number[];
-        tension?: number;
-        closed?: boolean;
-    }
+  interface ArrowConfig extends ShapeConfig {
+    points: number[];
+    tension?: number;
+    closed?: boolean;
+    pointerLength?: number;
+    pointerWidth?: number;
+  }
 
-    class Line extends Shape {
-        constructor(LineConfig: LineConfig);
-        closed(): boolean;
-        closed(closed: boolean): Line;
-        tension(): number;
-        tension(tension: number): Line;
-        points(): number[];
-        points(points: number[]): Line;
-    }
+  class Arrow extends Shape {
+    constructor(ArrowConfig: ArrowConfig);
+    closed(): boolean;
+    closed(closed: boolean): this;
+    tension(): number;
+    tension(tension: number): this;
+    points(): number[];
+    points(points: number[]): this;
+    pointerLength(): Number;
+    pointerLength(Length: Number): this;
+    pointerWidth(): Number;
+    pointerWidth(Width: Number): this;
+    pointerAtBeginning(): boolean;
+    pointerAtBeginning(Should: boolean): this;
+  }
 
-    interface ArrowConfig extends ShapeConfig {
-        points: number[];
-        tension?: number;
-        closed?: boolean;
-        pointerLength?: number;
-        pointerWidth?: number;
-    }
+  interface RectConfig extends ShapeConfig {
+    cornerRadius?: number;
+  }
 
-    class Arrow extends Shape {
-        constructor(ArrowConfig: ArrowConfig);
-        closed(): boolean;
-        closed(closed: boolean): Arrow;
-        tension(): number;
-        tension(tension: number): Arrow;
-        points(): number[];
-        points(points: number[]): Arrow;
-        pointerLength(): Number;
-        pointerLength(Length: Number): Number;
-        pointerWidth(): Number;
-        pointerWidth(Width: Number): Number;
-    }
+  class Rect extends Shape {
+    constructor(RectConfig: RectConfig);
+    cornerRadius(): number;
+    cornerRadius(cornerRadius: number): this;
+  }
 
-    interface RectConfig extends ShapeConfig {
-        cornerRadius?: number;
-    }
+  interface SpriteConfig extends ShapeConfig {
+    animation: string;
+    animations: any;
+    frameIndex?: number;
+    image: HTMLImageElement;
+  }
 
-    class Rect extends Shape {
-        constructor(RectConfig: RectConfig);
-        cornerRadius(): number;
-        cornerRadius(cornerRadius: number): Rect;
-    }
+  class Sprite extends Shape {
+    constructor(SpriteConfig: SpriteConfig);
+    start(): void;
+    stop(): void;
+    animation(): string;
+    animation(val: string): this;
+    animations(): any;
+    animations(val: any): this;
+    frameIndex(): number;
+    frameIndex(val: number): this;
+    image(): HTMLImageElement;
+    image(image: HTMLImageElement): this;
+    frameRate(): number;
+    frameRate(frameRate: number): this;
+  }
 
-    interface SpriteConfig extends ShapeConfig {
-        animation: string;
-        animations: any;
-        frameIndex?: number;
-        image: HTMLImageElement;
-    }
+  interface TextConfig extends ShapeConfig {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    align?: string;
+    padding?: number;
+    lineHeight?: number;
+    wrap?: string;
+  }
 
-    class Sprite extends Shape {
-        constructor(SpriteConfig: SpriteConfig);
-        start(): void;
-        stop(): void;
-        animation(): string;
-        animation(val: string): Sprite;
-        animations(): any;
-        animations(val: any): Sprite;
-        frameIndex(): number;
-        frameIndex(val: number): Sprite;
-        image(): HTMLImageElement;
-        image(image: HTMLImageElement): Sprite;
-        frameRate(): number;
-        frameRate(frameRate: number): Sprite;
-    }
+  class Text extends Shape {
+    constructor(TextConfig: TextConfig);
+    getTextWidth(): number;
+    getTextHeight(): number;
+    text(): string;
+    text(text: string): this;
+    fontFamily(): string;
+    fontFamily(fontFamily: string): this;
+    fontSize(): number;
+    fontSize(fontSize: number): this;
+    fontStyle(): string;
+    fontStyle(fontStyle: string): this;
+    fontVariant(): string;
+    fontVariant(fontVariant: string): this;
+    align(): string;
+    align(align: string): this;
+    padding(): number;
+    padding(padding: number): this;
+    lineHeight(): number;
+    lineHeight(lineHeight: number): this;
+    wrap(): string;
+    wrap(wrap: string): this;
+    textDecoration(): string;
+    textDecoration(textDecoration: string): this;
+  }
 
-    interface TextConfig extends ShapeConfig {
-        text: string;
-        fontFamily?: string;
-        fontSize?: number;
-        fontStyle?: string;
-        align?: string;
-        padding?: number;
-        lineHeight?: number;
-        wrap?: string;
-    }
+  interface WedgeConfig extends ShapeConfig {
+    angle: number;
+    radius: number;
+    clockwise?: boolean;
+  }
 
-    class Text extends Shape {
-        constructor(TextConfig: TextConfig);
-        getTextWidth(): number;
-        getTextHeight(): number;
-        text(): string;
-        text(text: string): Text;
-        fontFamily(): string;
-        fontFamily(fontFamily: string): Text;
-        fontSize(): number;
-        fontSize(fontSize: number): Text;
-        fontStyle(): string;
-        fontStyle(fontStyle: string): Text;
-        fontVariant(): string;
-        fontVariant(fontVariant: string): Text;
-        align(): string;
-        align(align: string): Text;
-        padding(): number;
-        padding(padding: number): Text;
-        lineHeight(): number;
-        lineHeight(lineHeight: number): Text;
-        wrap(): string;
-        wrap(wrap: string): Text;
-    }
+  class Wedge extends Shape {
+    constructor(WedgeConfig: WedgeConfig);
+    angle(): number;
+    angle(angle: number): this;
+    radius(): number;
+    radius(radius: number): this;
+    clockwise(): boolean;
+    clockwise(clockwise: boolean): this;
+  }
 
-    interface WedgeConfig extends ShapeConfig {
-        angle: number;
-        radius: number;
-        clockwise?: boolean;
-    }
+  // Plugins
+  interface TagConfig extends ShapeConfig {
+    pointerDirection?: string;
+    pointerWidth?: number;
+    pointerHeight?: number;
+    cornerRadius?: number;
+  }
 
-    class Wedge extends Shape {
-        constructor(WedgeConfig: WedgeConfig);
-        angle(): number;
-        angle(angle: number): Wedge;
-        radius(): number;
-        radius(radius: number): Wedge;
-        clockwise(): boolean;
-        clockwise(clockwise: boolean): Wedge;
-    }
+  class Tag extends Shape {
+    constructor(config: TagConfig);
+    pointerDirection(): string;
+    pointerDirection(pointerDirection: string): this;
+    pointerWidth(): number;
+    pointerWidth(pointerWidth: number): this;
+    pointerHeight(): number;
+    pointerHeight(pointerHeight: number): this;
+    cornerRadius(): number;
+    cornerRadius(cornerRadius: number): this;
+  }
 
-    // Plugins
-    interface TagConfig extends ShapeConfig {
-        pointerDirection?: string;
-        pointerWidth?: number;
-        pointerHeight?: number;
-        cornerRadius?: number;
-    }
+  interface LabelInterface extends ContainerConfig {}
 
-    class Tag extends Shape {
-        constructor(config: TagConfig);
-        pointerDirection(): string;
-        pointerDirection(pointerDirection: string): Tag;
-        pointerWidth(): number;
-        pointerWidth(pointerWidth: number): Tag;
-        pointerHeight(): number;
-        pointerHeight(pointerHeight: number): Tag;
-        cornerRadius(): number;
-        cornerRadius(cornerRadius: number): Tag;
-    }
+  class Label extends Group {
+    constructor(LabelInterface: LabelInterface);
+    getText(): Text;
+    getTag(): Rect;
+  }
 
+  interface PathConfig extends ShapeConfig {
+    data: string;
+  }
 
-    interface LabelInterface extends ContainerConfig {
-    }
+  class Path extends Shape {
+    constructor(PathConfig: PathConfig);
+    data(): string;
+    data(data: string): this;
+  }
 
-    class Label extends Group {
-        constructor(LabelInterface: LabelInterface);
-        getText(): Text;
-        getTag(): Rect;
-    }
+  interface RegularPolygonConfig extends ShapeConfig {
+    sides: number;
+    radius: number;
+  }
 
-    interface PathConfig extends ShapeConfig {
-        data: string;
-    }
+  class RegularPolygon extends Shape {
+    constructor(RegularPolygonConfig: RegularPolygonConfig);
+    sides(): number;
+    sides(sides: number): this;
+    radius(): number;
+    radius(radius: number): this;
+  }
 
-    class Path extends Shape {
-        constructor(PathConfig: PathConfig);
-        data(): string;
-        data(data: string): Path;
-    }
+  interface StarConfig extends ShapeConfig {
+    numPoints: number;
+    innerRadius: number;
+    outerRadius: number;
+  }
 
-    interface RegularPolygonConfig extends ShapeConfig {
-        sides: number;
-        radius: number;
-    }
+  class Star extends Shape {
+    constructor(StarConfig: StarConfig);
+    numPoints(): number;
+    numPoints(numPoints: number): this;
+    innerRadius(): number;
+    innerRadius(innerRadius: number): this;
+    outerRadius(): number;
+    outerRadius(outerRadius: number): this;
+  }
 
-    class RegularPolygon extends Shape {
-        constructor(RegularPolygonConfig: RegularPolygonConfig);
-        sides(): number;
-        sides(sides: number): RegularPolygon;
-        radius(): number;
-        radius(radius: number): RegularPolygon;
-    }
+  interface TextPathConfig extends ShapeConfig {
+    text: string;
+    data: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+  }
 
-    interface StarConfig extends ShapeConfig {
-        numPoints: number;
-        innerRadius: number;
-        outerRadius: number;
-    }
+  class TextPath extends Shape {
+    constructor(TextPathConfig: TextPathConfig);
+    getTextWidth(): number;
+    getTextHeight(): number;
+    setText(text: string): void;
+    text(): string;
+    text(text: string): this;
+    fontFamily(): string;
+    fontFamily(fontFamily: string): this;
+    fontSize(): number;
+    fontSize(fontSize: number): this;
+    fontStyle(): string;
+    fontStyle(fontStyle: string): this;
+  }
 
-    class Star extends Shape {
-        constructor(StarConfig: StarConfig);
-        numPoints(): number;
-        numPoints(numPoints: number): Star;
-        innerRadius(): number;
-        innerRadius(innerRadius: number): Star;
-        outerRadius(): number;
-        outerRadius(outerRadius: number): Star;
-    }
+  class Collection {
+    [i: number]: any;
+    static toCollection(arr: any[]): Collection;
+    each(f: (el: Node) => void): void;
+    toArray(): any[];
+    length: number;
+  }
 
-    interface TextPathConfig extends ShapeConfig {
-        text: string;
-        data: string;
-        fontFamily?: string;
-        fontSize?: number;
-        fontStyle?: string;
-    }
+  class Transform {
+    copy(): Transform;
+    getMatrix(): number[];
+    getTranslation(): Vector2d;
+    invert(): Transform;
+    multiply(matrix: number[]): Transform;
+    point(point: Vector2d): Vector2d;
+    rotate(deg: number): Transform;
+    scale(x: number, y: Number): Transform;
+    setAbsolutePosition(): Transform;
+    skew(x: number, y: Number): Transform;
+    translate(x: number, y: Number): Transform;
+  }
 
-    class TextPath extends Shape {
-        constructor(TextPathConfig: TextPathConfig);
-        getTextWidth(): number;
-        getTextHeight(): number;
-        setText(text: string): void;
-        text(): string;
-        text(text: string): Path;
-        fontFamily(): string;
-        fontFamily(fontFamily: string): Path;
-        fontSize(): number;
-        fontSize(fontSize: number): Path;
-        fontStyle(): string;
-        fontStyle(fontStyle: string): Path;
-    }
-
-
-    class Collection {
-        [i: number]: any;
-        static toCollection(arr: any[]): Collection;
-        each(f: (el: Node) => void): void;
-        toArray(): any[];
-        length: number;
-    }
-
-    class Transform {
-        copy(): Transform;
-        getMatrix(): any[];
-        getTranslation(): Vector2d;
-        invert(): void;
-        multiply(matrix: any[]): void;
-        point(point: Vector2d): Vector2d;
-        rotate(deg: number): void;
-        scale(x: number, y: Number): void;
-        setAbsolutePosition(): void;
-        skew(x: number, y: Number): void;
-        translate(x: number, y: Number): void;
-    }
-
-
-    interface Vector2d {
-        x: number;
-        y: number;
-    }
+  interface Vector2d {
+    x: number;
+    y: number;
+  }
 }
 
 export = Konva;

package.json

 {
   "name": "konva",
-  "version": "1.7.6",
+  "version": "2.0.0",
   "author": "Anton Lavrenov",
-  "files": [
-    "README.md",
-    "konva.js",
-    "konva.min.js",
-    "src",
-    "konva.d.ts"
-  ],
+  "files": ["README.md", "konva.js", "konva.min.js", "src", "konva.d.ts"],
   "main": "konva.js",
@@ -20,6 +14,7 @@ "typings": "./konva.d.ts",
     "test": "gulp test",
-    "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
+    "prettier":
+      "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
   },
   "devDependencies": {
-    "chai": "4.1.1",
+    "chai": "4.1.2",
     "gulp": "^3.9.1",
@@ -31,3 +26,3 @@ "gulp-concat": "^2.6.1",
     "gulp-jsdoc3": "^1.0.1",
-    "gulp-mocha-phantomjs": "^0.12.1",
+    "gulp-mocha-phantomjs": "^0.12.2",
     "gulp-rename": "^1.2.2",
@@ -37,11 +32,6 @@ "gulp-replace": "^0.6.1",
     "gulp-util": "^3.0.8",
-    "mocha": "3.5.0",
-    "prettier": "^1.5.3"
+    "mocha": "4.0.1",
+    "prettier": "^1.9.2"
   },
-  "keywords": [
-    "canvas",
-    "animations",
-    "graphic",
-    "html5"
-  ],
+  "keywords": ["canvas", "animations", "graphic", "html5"],
   "browser": {
@@ -48,0 +38,0 @@ "canvas": false,

README.md

@@ -1,12 +0,15 @@
-![Konva logo](https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png" alt="Konva logo" height="180" />
+</p>
 
-# Konva
+<h1 align="center">Konva</h1>
 
-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.
-
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/konvajs/konva?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-
 [![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) [![CDNJS version](https://img.shields.io/cdnjs/v/konva.svg)](https://cdnjs.com/libraries/konva)
 
+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.
+
+
+
 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.
@@ -20,6 +23,2 @@
 
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/wUMFgN5Poni4w2c2fAY71nB3/konvajs/konva'>
-  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/wUMFgN5Poni4w2c2fAY71nB3/konvajs/konva.svg' />
-</a>
-
 # Quick Look
@@ -82,3 +81,3 @@
 define(['./konva'], function(Konva) {
-   // your code
+  // your code
 });
@@ -97,3 +96,2 @@ ```
 
-
 // modern way
@@ -115,3 +113,2 @@ import Konva from 'konva';
 
-
 // but you can simply add anything you need:
@@ -169,5 +166,5 @@ import 'konva/src/shapes/rect';
 
+# Pull Requests
 
-# Pull Requests
 I'd be happy to review any pull requests that may better the Konva project,
-in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples).  Before doing so, please first make sure that all of the tests pass (`gulp lint test`).
+in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the tests pass (`gulp lint test`).

src/Context.js

@@ -66,7 +66,7 @@ (function() {
   /**
-     * Canvas Context constructor
-     * @constructor
-     * @abstract
-     * @memberof Konva
-     */
+   * Canvas Context constructor
+   * @constructor
+   * @abstract
+   * @memberof Konva
+   */
   Konva.Context = function(canvas) {
@@ -87,7 +87,7 @@ this.init(canvas);
     /**
-         * fill shape
-         * @method
-         * @memberof Konva.Context.prototype
-         * @param {Konva.Shape} shape
-         */
+     * fill shape
+     * @method
+     * @memberof Konva.Context.prototype
+     * @param {Konva.Shape} shape
+     */
     fillShape: function(shape) {
@@ -99,7 +99,7 @@ if (shape.getFillEnabled()) {
     /**
-         * stroke shape
-         * @method
-         * @memberof Konva.Context.prototype
-         * @param {Konva.Shape} shape
-         */
+     * stroke shape
+     * @method
+     * @memberof Konva.Context.prototype
+     * @param {Konva.Shape} shape
+     */
     strokeShape: function(shape) {
@@ -111,7 +111,7 @@ if (shape.getStrokeEnabled()) {
     /**
-         * fill then stroke
-         * @method
-         * @memberof Konva.Context.prototype
-         * @param {Konva.Shape} shape
-         */
+     * fill then stroke
+     * @method
+     * @memberof Konva.Context.prototype
+     * @param {Konva.Shape} shape
+     */
     fillStrokeShape: function(shape) {
@@ -127,10 +127,10 @@ var fillEnabled = shape.getFillEnabled();
     /**
-         * get context trace if trace is enabled
-         * @method
-         * @memberof Konva.Context.prototype
-         * @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
-         *  properties, and property values.  If true, return relaxed context trace, which only returns method names and
-         *  properites.
-         * @returns {String}
-         */
+     * get context trace if trace is enabled
+     * @method
+     * @memberof Konva.Context.prototype
+     * @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
+     *  properties, and property values.  If true, return relaxed context trace, which only returns method names and
+     *  properites.
+     * @returns {String}
+     */
     getTrace: function(relaxed) {
@@ -177,6 +177,6 @@ var traceArr = this.traceArr,
     /**
-         * clear trace if trace is enabled
-         * @method
-         * @memberof Konva.Context.prototype
-         */
+     * clear trace if trace is enabled
+     * @method
+     * @memberof Konva.Context.prototype
+     */
     clearTrace: function() {
@@ -186,3 +186,4 @@ this.traceArr = [];
     _trace: function(str) {
-      var traceArr = this.traceArr, len;
+      var traceArr = this.traceArr,
+        len;
 
@@ -197,6 +198,6 @@ traceArr.push(str);
     /**
-         * reset canvas context transform
-         * @method
-         * @memberof Konva.Context.prototype
-         */
+     * reset canvas context transform
+     * @method
+     * @memberof Konva.Context.prototype
+     */
     reset: function() {
@@ -207,7 +208,7 @@ var pixelRatio = this.getCanvas().getPixelRatio();
     /**
-         * get canvas
-         * @method
-         * @memberof Konva.Context.prototype
-         * @returns {Konva.Canvas}
-         */
+     * get canvas
+     * @method
+     * @memberof Konva.Context.prototype
+     * @returns {Konva.Canvas}
+     */
     getCanvas: function() {
@@ -217,11 +218,11 @@ return this.canvas;
     /**
-         * clear canvas
-         * @method
-         * @memberof Konva.Context.prototype
-         * @param {Object} [bounds]
-         * @param {Number} [bounds.x]
-         * @param {Number} [bounds.y]
-         * @param {Number} [bounds.width]
-         * @param {Number} [bounds.height]
-         */
+     * clear canvas
+     * @method
+     * @memberof Konva.Context.prototype
+     * @param {Object} [bounds]
+     * @param {Number} [bounds.x]
+     * @param {Number} [bounds.y]
+     * @param {Number} [bounds.width]
+     * @param {Number} [bounds.height]
+     */
     clear: function(bounds) {
@@ -318,3 +319,4 @@ var canvas = this.getCanvas();
     drawImage: function() {
-      var a = arguments, _context = this._context;
+      var a = arguments,
+        _context = this._context;
 
@@ -397,3 +399,4 @@ if (a.length === 3) {
     setLineDash: function() {
-      var a = arguments, _context = this._context;
+      var a = arguments,
+        _context = this._context;
 
@@ -445,3 +448,4 @@ // works for Chrome and IE11
       var func = function(methodName) {
-        var origMethod = that[methodName], ret;
+        var origMethod = that[methodName],
+          ret;
 
@@ -575,5 +579,2 @@ that[methodName] = function() {
       var hasColor = shape.fill(),
-        hasPattern = shape.getFillPatternImage(),
-        hasLinearGradient = shape.getFillLinearGradientColorStops(),
-        hasRadialGradient = shape.getFillRadialGradientColorStops(),
         fillPriority = shape.getFillPriority();
@@ -584,10 +585,25 @@
         this._fillColor(shape);
-      } else if (hasPattern && fillPriority === 'pattern') {
+        return;
+      }
+
+      var hasPattern = shape.getFillPatternImage();
+      if (hasPattern && fillPriority === 'pattern') {
         this._fillPattern(shape);
-      } else if (hasLinearGradient && fillPriority === 'linear-gradient') {
+        return;
+      }
+
+      var hasLinearGradient = shape.getFillLinearGradientColorStops();
+      if (hasLinearGradient && fillPriority === 'linear-gradient') {
         this._fillLinearGradient(shape);
-      } else if (hasRadialGradient && fillPriority === 'radial-gradient') {
+        return;
+      }
+
+      var hasRadialGradient = shape.getFillRadialGradientColorStops();
+      if (hasRadialGradient && fillPriority === 'radial-gradient') {
         this._fillRadialGradient(shape);
-      } else if (hasColor) {
-        // now just try and fill with whatever is available
+        return;
+      }
+
+      // now just try and fill with whatever is available
+      if (hasColor) {
         this._fillColor(shape);
@@ -602,2 +618,16 @@ } else if (hasPattern) {
     },
+    _strokeLinearGradient: function(shape) {
+      var start = shape.getStrokeLinearGradientStartPoint(),
+        end = shape.getStrokeLinearGradientEndPoint(),
+        colorStops = shape.getStrokeLinearGradientColorStops(),
+        grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
+
+      if (colorStops) {
+        // build color stops
+        for (var n = 0; n < colorStops.length; n += 2) {
+          grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        }
+        this.setAttr('strokeStyle', grd);
+      }
+    },
     _stroke: function(shape) {
@@ -622,3 +652,2 @@ var dash = shape.dash(),
         this.setAttr('lineWidth', shape.strokeWidth());
-        this.setAttr('strokeStyle', shape.stroke());
 
@@ -628,2 +657,12 @@ if (!shape.getShadowForStrokeEnabled()) {
         }
+
+        // TODO - do we need to make like a fill function?
+
+        var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
+        if (hasLinearGradient) {
+          this._strokeLinearGradient(shape);
+        } else {
+          this.setAttr('strokeStyle', shape.stroke());
+        }
+
         shape._strokeFunc(this);
@@ -653,3 +692,3 @@
         'shadowBlur',
-        blur * ratio * Math.min(Math.abs(scaleX), Math.abs(scaleY))
+        blur * Math.min(Math.abs(scaleX), Math.abs(scaleY))
       );
@@ -656,0 +695,0 @@ this.setAttr('shadowOffsetX', offset.x * scaleX);

src/DragAndDrop.js

@@ -117,6 +117,6 @@ (function() {
   /**
-     * initiate drag and drop
-     * @method
-     * @memberof Konva.Node.prototype
-     */
+   * initiate drag and drop
+   * @method
+   * @memberof Konva.Node.prototype
+   */
   Konva.Node.prototype.startDrag = function() {
@@ -174,6 +174,6 @@ var dd = Konva.DD,
   /**
-     * stop drag and drop
-     * @method
-     * @memberof Konva.Node.prototype
-     */
+   * stop drag and drop
+   * @method
+   * @memberof Konva.Node.prototype
+   */
   Konva.Node.prototype.stopDrag = function() {
@@ -206,6 +206,6 @@ var dd = Konva.DD,
   /**
-     * determine if node is currently in drag and drop mode
-     * @method
-     * @memberof Konva.Node.prototype
-     */
+   * determine if node is currently in drag and drop mode
+   * @method
+   * @memberof Konva.Node.prototype
+   */
   Konva.Node.prototype.isDragging = function() {
@@ -279,21 +279,23 @@ var dd = Konva.DD;
   /**
-     * get/set drag bound function.  This is used to override the default
-     *  drag and drop position
-     * @name dragBoundFunc
-     * @method
-     * @memberof Konva.Node.prototype
-     * @param {Function} dragBoundFunc
-     * @returns {Function}
-     * @example
-     * // get drag bound function
-     * var dragBoundFunc = node.dragBoundFunc();
-     *
-     * // create vertical drag and drop
-     * node.dragBoundFunc(function(pos){
-     *   return {
-     *     x: this.getAbsolutePosition().x,
-     *     y: pos.y
-     *   };
-     * });
-     */
+   * get/set drag bound function.  This is used to override the default
+   *  drag and drop position.
+   * @name dragBoundFunc
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Function} dragBoundFunc
+   * @returns {Function}
+   * @example
+   * // get drag bound function
+   * var dragBoundFunc = node.dragBoundFunc();
+   *
+   * // create vertical drag and drop
+   * node.dragBoundFunc(function(pos){
+   *   // important pos - is absolute position of the node
+   *   // you should return absolute position too
+   *   return {
+   *     x: this.getAbsolutePosition().x,
+   *     y: pos.y
+   *   };
+   * });
+   */
 
@@ -304,18 +306,18 @@ Konva.Factory.addGetter(Konva.Node, 'draggable', false);
   /**
-     * get/set draggable flag
-     * @name draggable
-     * @method
-     * @memberof Konva.Node.prototype
-     * @param {Boolean} draggable
-     * @returns {Boolean}
-     * @example
-     * // get draggable flag
-     * var draggable = node.draggable();
-     *
-     * // enable drag and drop
-     * node.draggable(true);
-     *
-     * // disable drag and drop
-     * node.draggable(false);
-     */
+   * get/set draggable flag
+   * @name draggable
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Boolean} draggable
+   * @returns {Boolean}
+   * @example
+   * // get draggable flag
+   * var draggable = node.draggable();
+   *
+   * // enable drag and drop
+   * node.draggable(true);
+   *
+   * // disable drag and drop
+   * node.draggable(false);
+   */
 
@@ -322,0 +324,0 @@ if (Konva.isBrowser) {

src/Factory.js

 (function() {
   'use strict';
   // CONSTANTS
-  var GET = 'get', SET = 'set';
+  var GET = 'get',
+    SET = 'set';
 
@@ -65,3 +66,4 @@ Konva.Factory = {
       constructor.prototype[setter] = function(val) {
-        var oldVal = this.attrs[attr], key;
+        var oldVal = this.attrs[attr],
+          key;
 
@@ -106,3 +108,6 @@ if (validator) {
     addDeprecatedGetterSetter: function(constructor, attr, def, validator) {
+      Konva.Util.error('Adding deprecated ' + attr);
+
       var method = GET + Konva.Util._capitalize(attr);
+
       var message =
@@ -142,4 +147,4 @@ attr +
     /**
-         * @return {number}
-         */
+     * @return {number}
+     */
     RGBComponent: function(val) {
@@ -146,0 +151,0 @@ if (val > 255) {

src/filters/Pixelate.js

@@ -83,2 +83,3 @@ /*eslint-disable max-depth */
         blue = blue / pixelsInBin;
+        alpha = alpha / pixelsInBin;
 
@@ -85,0 +86,0 @@ // Draw this bin

src/Global.js

 /*
  * Konva JavaScript Framework v@@version
  * http://konvajs.github.io/
- * Licensed under the MIT or GPL Version 2 licenses.
+ * Licensed under the MIT
  * Date: @@date
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
- * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
+ * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
  *
  * @license
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
  */
@@ -34,4 +17,4 @@
   /**
-     * @namespace Konva
-     */
+   * @namespace Konva
+   */
 
@@ -65,53 +48,53 @@ var PI_OVER_180 = Math.PI / 180;
     /**
-         * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
-         * But you may override such property, if you want to use your value.
-         * @property pixelRatio
-         * @default undefined
-         * @memberof Konva
-         * @example
-         * Konva.pixelRatio = 1;
-         */
+     * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
+     * But you may override such property, if you want to use your value.
+     * @property pixelRatio
+     * @default undefined
+     * @memberof Konva
+     * @example
+     * Konva.pixelRatio = 1;
+     */
     pixelRatio: undefined,
     /**
-         * 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. Default is 3px.
-         * @property dragDistance
-         * @default 0
-         * @memberof Konva
-         * @example
-         * Konva.dragDistance = 10;
-         */
+     * 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. Default is 3px.
+     * @property dragDistance
+     * @default 0
+     * @memberof Konva
+     * @example
+     * Konva.dragDistance = 10;
+     */
     dragDistance: 3,
     /**
-         * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
-         * @property angleDeg
-         * @default true
-         * @memberof Konva
-         * @example
-         * node.rotation(45); // 45 degrees
-         * Konva.angleDeg = false;
-         * node.rotation(Math.PI / 2); // PI/2 radian
-         */
+     * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
+     * @property angleDeg
+     * @default true
+     * @memberof Konva
+     * @example
+     * node.rotation(45); // 45 degrees
+     * Konva.angleDeg = false;
+     * node.rotation(Math.PI / 2); // PI/2 radian
+     */
     angleDeg: true,
     /**
-         * Show different warnings about errors or wrong API usage
-         * @property showWarnings
-         * @default true
-         * @memberof Konva
-         * @example
-         * Konva.showWarnings = false;
-         */
+     * Show different warnings about errors or wrong API usage
+     * @property showWarnings
+     * @default true
+     * @memberof Konva
+     * @example
+     * Konva.showWarnings = false;
+     */
     showWarnings: true,
 
     /**
-         * @namespace Filters
-         * @memberof Konva
-         */
+     * @namespace Filters
+     * @memberof Konva
+     */
     Filters: {},
 
     /**
-         * returns whether or not drag and drop is currently active
-         * @method
-         * @memberof Konva
-         */
+     * returns whether or not drag and drop is currently active
+     * @method
+     * @memberof Konva
+     */
     isDragging: function() {
@@ -128,7 +111,7 @@ var dd = Konva.DD;
     /**
-        * returns whether or not a drag and drop operation is ready, but may
-        *  not necessarily have started
-        * @method
-        * @memberof Konva
-        */
+     * returns whether or not a drag and drop operation is ready, but may
+     *  not necessarily have started
+     * @method
+     * @memberof Konva
+     */
     isDragReady: function() {
@@ -135,0 +118,0 @@ var dd = Konva.DD;

src/Shape.js

@@ -28,26 +28,26 @@ (function(Konva) {
   /**
-     * Shape constructor.  Shapes are primitive objects such as rectangles,
-     *  circles, text, lines, etc.
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Node
-     * @param {Object} config
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var customShape = new Konva.Shape({
-         *   x: 5,
-         *   y: 10,
-         *   fill: 'red',
-         *   // a Konva.Canvas renderer is passed into the drawFunc function
-         *   drawFunc: function(context) {
-         *     context.beginPath();
-         *     context.moveTo(200, 50);
-         *     context.lineTo(420, 80);
-         *     context.quadraticCurveTo(300, 100, 260, 170);
-         *     context.closePath();
-         *     context.fillStrokeShape(this);
-         *   }
-         *});
-     */
+   * Shape constructor.  Shapes are primitive objects such as rectangles,
+   *  circles, text, lines, etc.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Node
+   * @param {Object} config
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var customShape = new Konva.Shape({
+   *   x: 5,
+   *   y: 10,
+   *   fill: 'red',
+   *   // a Konva.Canvas renderer is passed into the drawFunc function
+   *   drawFunc: function(context) {
+   *     context.beginPath();
+   *     context.moveTo(200, 50);
+   *     context.lineTo(420, 80);
+   *     context.quadraticCurveTo(300, 100, 260, 170);
+   *     context.closePath();
+   *     context.fillStrokeShape(this);
+   *   }
+   *});
+   */
   Konva.Shape = function(config) {
@@ -99,7 +99,7 @@ this.__init(config);
     /**
-         * get canvas context tied to the layer
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Konva.Context}
-         */
+     * get canvas context tied to the layer
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Konva.Context}
+     */
     getContext: function() {
@@ -109,7 +109,7 @@ return this.getLayer().getContext();
     /**
-         * get canvas renderer tied to the layer.  Note that this returns a canvas renderer, not a canvas element
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Konva.Canvas}
-         */
+     * get canvas renderer tied to the layer.  Note that this returns a canvas renderer, not a canvas element
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Konva.Canvas}
+     */
     getCanvas: function() {
@@ -119,7 +119,7 @@ return this.getLayer().getCanvas();
     /**
-         * returns whether or not a shadow will be rendered
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Boolean}
-         */
+     * returns whether or not a shadow will be rendered
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Boolean}
+     */
     hasShadow: function() {
@@ -132,6 +132,8 @@ return this._getCache(HAS_SHADOW, this._hasShadow);
         (this.getShadowOpacity() !== 0 &&
-          !!(this.getShadowColor() ||
+          !!(
+            this.getShadowColor() ||
             this.getShadowBlur() ||
             this.getShadowOffsetX() ||
-            this.getShadowOffsetY()))
+            this.getShadowOffsetY()
+          ))
       );
@@ -159,36 +161,45 @@ },
     /**
-         * returns whether or not the shape will be filled
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Boolean}
-         */
+     * returns whether or not the shape will be filled
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Boolean}
+     */
     hasFill: function() {
-      return !!(this.getFill() ||
+      return !!(
+        this.getFill() ||
         this.getFillPatternImage() ||
         this.getFillLinearGradientColorStops() ||
-        this.getFillRadialGradientColorStops());
+        this.getFillRadialGradientColorStops()
+      );
     },
     /**
-         * returns whether or not the shape will be stroked
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Boolean}
-         */
+     * returns whether or not the shape will be stroked
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Boolean}
+     */
     hasStroke: function() {
-      return this.strokeEnabled() && !!this.stroke();
+      return (
+        this.strokeEnabled() &&
+        !!(this.stroke() || this.getStrokeLinearGradientColorStops())
+        // TODO: do we need radial gradient
+        // this.getStrokeRadialGradientColorStops()
+      );
     },
     /**
-         * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
-         *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times
-         *  consecutively.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
-         *  because it performs much better
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @param {Object} point
-         * @param {Number} point.x
-         * @param {Number} point.y
-         * @returns {Boolean}
-         */
+     * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
+     *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times
+     *  consecutively.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
+     *  because it performs much better
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Object} point
+     * @param {Number} point.x
+     * @param {Number} point.y
+     * @returns {Boolean}
+     */
     intersects: function(point) {
-      var stage = this.getStage(), bufferHitCanvas = stage.bufferHitCanvas, p;
+      var stage = this.getStage(),
+        bufferHitCanvas = stage.bufferHitCanvas,
+        p;
 
@@ -228,13 +239,13 @@ bufferHitCanvas.getContext().clear();
     /**
-         * return self rectangle (x, y, width, height) of shape.
-         * This method are not taken into account transformation and styles.
-         * @method
-         * @memberof Konva.Shape.prototype
-         * @returns {Object} rect with {x, y, width, height} properties
-         * @example
-         *
-         * rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
-         * circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
-         *
-         */
+     * return self rectangle (x, y, width, height) of shape.
+     * This method are not taken into account transformation and styles.
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @returns {Object} rect with {x, y, width, height} properties
+     * @example
+     *
+     * rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
+     * circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
+     *
+     */
     getSelfRect: function() {
@@ -281,6 +292,8 @@ var size = this.getSize();
         height: height + roundingOffset,
-        x: -Math.round(strokeWidth / 2 + blurRadius) +
+        x:
+          -Math.round(strokeWidth / 2 + blurRadius) +
           Math.min(shadowOffsetX, 0) +
           fillRect.x,
-        y: -Math.round(strokeWidth / 2 + blurRadius) +
+        y:
+          -Math.round(strokeWidth / 2 + blurRadius) +
           Math.min(shadowOffsetY, 0) +
@@ -456,13 +469,13 @@ fillRect.y
     /**
-        * draw hit graph using the cached scene canvas
-        * @method
-        * @memberof Konva.Shape.prototype
-        * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
-        *  a pixel should be drawn onto the hit graph.  Must be a value between 0 and 255.
-        *  The default is 0
-        * @returns {Konva.Shape}
-        * @example
-        * shape.cache();
-        * shape.drawHitFromCache();
-        */
+     * draw hit graph using the cached scene canvas
+     * @method
+     * @memberof Konva.Shape.prototype
+     * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
+     *  a pixel should be drawn onto the hit graph.  Must be a value between 0 and 255.
+     *  The default is 0
+     * @returns {Konva.Shape}
+     * @example
+     * shape.cache();
+     * shape.drawHitFromCache();
+     */
     drawHitFromCache: function(alphaThreshold) {
@@ -520,66 +533,41 @@ var threshold = alphaThreshold || 0,
   /**
-     * get/set stroke color
-     * @name stroke
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} color
-     * @returns {String}
-     * @example
-     * // get stroke color
-     * var stroke = shape.stroke();
-     *
-     * // set stroke color with color string
-     * shape.stroke('green');
-     *
-     * // set stroke color with hex
-     * shape.stroke('#00ff00');
-     *
-     * // set stroke color with rgb
-     * shape.stroke('rgb(0,255,0)');
-     *
-     * // set stroke color with rgba and make it 50% opaque
-     * shape.stroke('rgba(0,255,0,0.5');
-     */
+   * get/set stroke color
+   * @name stroke
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get stroke color
+   * var stroke = shape.stroke();
+   *
+   * // set stroke color with color string
+   * shape.stroke('green');
+   *
+   * // set stroke color with hex
+   * shape.stroke('#00ff00');
+   *
+   * // set stroke color with rgb
+   * shape.stroke('rgb(0,255,0)');
+   *
+   * // set stroke color with rgba and make it 50% opaque
+   * shape.stroke('rgba(0,255,0,0.5');
+   */
 
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'strokeRed',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'strokeGreen',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'strokeBlue',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'strokeAlpha',
-    1,
-    Konva.Validators.alphaComponent
-  );
-
   Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2);
 
   /**
-     * get/set stroke width
-     * @name strokeWidth
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} strokeWidth
-     * @returns {Number}
-     * @example
-     * // get stroke width
-     * var strokeWidth = shape.strokeWidth();
-     *
-     * // set stroke width
-     * shape.strokeWidth();
-     */
+   * get/set stroke width
+   * @name strokeWidth
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} strokeWidth
+   * @returns {Number}
+   * @example
+   * // get stroke width
+   * var strokeWidth = shape.strokeWidth();
+   *
+   * // set stroke width
+   * shape.strokeWidth();
+   */
 
@@ -589,19 +577,19 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'strokeHitEnabled', true);
   /**
-     * get/set strokeHitEnabled property. Useful for performance optimization.
-     * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
-     * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
-     * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
-     * Default value is true
-     * @name strokeHitEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} strokeHitEnabled
-     * @returns {Boolean}
-     * @example
-     * // get strokeHitEnabled
-     * var strokeHitEnabled = shape.strokeHitEnabled();
-     *
-     * // set strokeHitEnabled
-     * shape.strokeHitEnabled();
-     */
+   * get/set strokeHitEnabled property. Useful for performance optimization.
+   * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
+   * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
+   * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
+   * Default value is true
+   * @name strokeHitEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} strokeHitEnabled
+   * @returns {Boolean}
+   * @example
+   * // get strokeHitEnabled
+   * var strokeHitEnabled = shape.strokeHitEnabled();
+   *
+   * // set strokeHitEnabled
+   * shape.strokeHitEnabled();
+   */
 
@@ -611,17 +599,17 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'perfectDrawEnabled', true);
   /**
-     * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
-     * See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
-     * Default value is true
-     * @name perfectDrawEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} perfectDrawEnabled
-     * @returns {Boolean}
-     * @example
-     * // get perfectDrawEnabled
-     * var perfectDrawEnabled = shape.perfectDrawEnabled();
-     *
-     * // set perfectDrawEnabled
-     * shape.perfectDrawEnabled();
-     */
+   * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
+   * See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
+   * Default value is true
+   * @name perfectDrawEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} perfectDrawEnabled
+   * @returns {Boolean}
+   * @example
+   * // get perfectDrawEnabled
+   * var perfectDrawEnabled = shape.perfectDrawEnabled();
+   *
+   * // set perfectDrawEnabled
+   * shape.perfectDrawEnabled();
+   */
 
@@ -631,18 +619,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowForStrokeEnabled', true);
   /**
-     * get/set shadowForStrokeEnabled. Useful for performance optimization.
-     * You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke.
-     * Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!.
-     * Default value is true
-     * @name shadowForStrokeEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} shadowForStrokeEnabled
-     * @returns {Boolean}
-     * @example
-     * // get shadowForStrokeEnabled
-     * var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
-     *
-     * // set shadowForStrokeEnabled
-     * shape.shadowForStrokeEnabled();
-     */
+   * get/set shadowForStrokeEnabled. Useful for performance optimization.
+   * You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke.
+   * Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!.
+   * Default value is true
+   * @name shadowForStrokeEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} shadowForStrokeEnabled
+   * @returns {Boolean}
+   * @example
+   * // get shadowForStrokeEnabled
+   * var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
+   *
+   * // set shadowForStrokeEnabled
+   * shape.shadowForStrokeEnabled();
+   */
 
@@ -652,16 +640,16 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');
   /**
-     * get/set line join.  Can be miter, round, or bevel.  The
-     *  default is miter
-     * @name lineJoin
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} lineJoin
-     * @returns {String}
-     * @example
-     * // get line join
-     * var lineJoin = shape.lineJoin();
-     *
-     * // set line join
-     * shape.lineJoin('round');
-     */
+   * get/set line join.  Can be miter, round, or bevel.  The
+   *  default is miter
+   * @name lineJoin
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} lineJoin
+   * @returns {String}
+   * @example
+   * // get line join
+   * var lineJoin = shape.lineJoin();
+   *
+   * // set line join
+   * shape.lineJoin('round');
+   */
 
@@ -671,15 +659,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'lineCap');
   /**
-     * get/set line cap.  Can be butt, round, or square
-     * @name lineCap
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} lineCap
-     * @returns {String}
-     * @example
-     * // get line cap
-     * var lineCap = shape.lineCap();
-     *
-     * // set line cap
-     * shape.lineCap('round');
-     */
+   * get/set line cap.  Can be butt, round, or square
+   * @name lineCap
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} lineCap
+   * @returns {String}
+   * @example
+   * // get line cap
+   * var lineCap = shape.lineCap();
+   *
+   * // set line cap
+   * shape.lineCap('round');
+   */
 
@@ -689,20 +677,20 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'sceneFunc');
   /**
-     * get/set scene draw function
-     * @name sceneFunc
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Function} drawFunc drawing function
-     * @returns {Function}
-     * @example
-     * // get scene draw function
-     * var sceneFunc = shape.sceneFunc();
-     *
-     * // set scene draw function
-     * shape.sceneFunc(function(context) {
-     *   context.beginPath();
-     *   context.rect(0, 0, this.width(), this.height());
-     *   context.closePath();
-     *   context.fillStrokeShape(this);
-     * });
-     */
+   * get/set scene draw function
+   * @name sceneFunc
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Function} drawFunc drawing function
+   * @returns {Function}
+   * @example
+   * // get scene draw function
+   * var sceneFunc = shape.sceneFunc();
+   *
+   * // set scene draw function
+   * shape.sceneFunc(function(context) {
+   *   context.beginPath();
+   *   context.rect(0, 0, this.width(), this.height());
+   *   context.closePath();
+   *   context.fillStrokeShape(this);
+   * });
+   */
 
@@ -712,20 +700,20 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'hitFunc');
   /**
-     * get/set hit draw function
-     * @name hitFunc
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Function} drawFunc drawing function
-     * @returns {Function}
-     * @example
-     * // get hit draw function
-     * var hitFunc = shape.hitFunc();
-     *
-     * // set hit draw function
-     * shape.hitFunc(function(context) {
-     *   context.beginPath();
-     *   context.rect(0, 0, this.width(), this.height());
-     *   context.closePath();
-     *   context.fillStrokeShape(this);
-     * });
-     */
+   * get/set hit draw function
+   * @name hitFunc
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Function} drawFunc drawing function
+   * @returns {Function}
+   * @example
+   * // get hit draw function
+   * var hitFunc = shape.hitFunc();
+   *
+   * // set hit draw function
+   * shape.hitFunc(function(context) {
+   *   context.beginPath();
+   *   context.rect(0, 0, this.width(), this.height());
+   *   context.closePath();
+   *   context.fillStrokeShape(this);
+   * });
+   */
 
@@ -735,16 +723,16 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'dash');
   /**
-     * get/set dash array for stroke.
-     * @name dash
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Array} dash
-     * @returns {Array}
-     * @example
-     *  // apply dashed stroke that is 10px long and 5 pixels apart
-     *  line.dash([10, 5]);
-     *  // apply dashed stroke that is made up of alternating dashed
-     *  // lines that are 10px long and 20px apart, and dots that have
-     *  // a radius of 5px and are 20px apart
-     *  line.dash([10, 20, 0.001, 20]);
-     */
+   * get/set dash array for stroke.
+   * @name dash
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Array} dash
+   * @returns {Array}
+   * @example
+   *  // apply dashed stroke that is 10px long and 5 pixels apart
+   *  line.dash([10, 5]);
+   *  // apply dashed stroke that is made up of alternating dashed
+   *  // lines that are 10px long and 20px apart, and dots that have
+   *  // a radius of 5px and are 20px apart
+   *  line.dash([10, 20, 0.001, 20]);
+   */
 
@@ -754,13 +742,13 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'dashOffset', 0);
   /**
-     * get/set dash offset for stroke.
-     * @name dash
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} dash offset
-     * @returns {Number}
-     * @example
-     *  // apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
-     *  line.dash([10, 5]);
-     *  line.dashOffset(5);
-     */
+   * get/set dash offset for stroke.
+   * @name dash
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} dash offset
+   * @returns {Number}
+   * @example
+   *  // apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
+   *  line.dash([10, 5]);
+   *  line.dashOffset(5);
+   */
 
@@ -770,66 +758,41 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowColor');
   /**
-     * get/set shadow color
-     * @name shadowColor
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} color
-     * @returns {String}
-     * @example
-     * // get shadow color
-     * var shadow = shape.shadowColor();
-     *
-     * // set shadow color with color string
-     * shape.shadowColor('green');
-     *
-     * // set shadow color with hex
-     * shape.shadowColor('#00ff00');
-     *
-     * // set shadow color with rgb
-     * shape.shadowColor('rgb(0,255,0)');
-     *
-     * // set shadow color with rgba and make it 50% opaque
-     * shape.shadowColor('rgba(0,255,0,0.5');
-     */
+   * get/set shadow color
+   * @name shadowColor
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get shadow color
+   * var shadow = shape.shadowColor();
+   *
+   * // set shadow color with color string
+   * shape.shadowColor('green');
+   *
+   * // set shadow color with hex
+   * shape.shadowColor('#00ff00');
+   *
+   * // set shadow color with rgb
+   * shape.shadowColor('rgb(0,255,0)');
+   *
+   * // set shadow color with rgba and make it 50% opaque
+   * shape.shadowColor('rgba(0,255,0,0.5');
+   */
 
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'shadowRed',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'shadowGreen',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'shadowBlue',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'shadowAlpha',
-    1,
-    Konva.Validators.alphaComponent
-  );
-
   Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
 
   /**
-     * get/set shadow blur
-     * @name shadowBlur
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} blur
-     * @returns {Number}
-     * @example
-     * // get shadow blur
-     * var shadowBlur = shape.shadowBlur();
-     *
-     * // set shadow blur
-     * shape.shadowBlur(10);
-     */
+   * get/set shadow blur
+   * @name shadowBlur
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} blur
+   * @returns {Number}
+   * @example
+   * // get shadow blur
+   * var shadowBlur = shape.shadowBlur();
+   *
+   * // set shadow blur
+   * shape.shadowBlur(10);
+   */
 
@@ -839,15 +802,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOpacity');
   /**
-     * get/set shadow opacity.  must be a value between 0 and 1
-     * @name shadowOpacity
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} opacity
-     * @returns {Number}
-     * @example
-     * // get shadow opacity
-     * var shadowOpacity = shape.shadowOpacity();
-     *
-     * // set shadow opacity
-     * shape.shadowOpacity(0.5);
-     */
+   * get/set shadow opacity.  must be a value between 0 and 1
+   * @name shadowOpacity
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} opacity
+   * @returns {Number}
+   * @example
+   * // get shadow opacity
+   * var shadowOpacity = shape.shadowOpacity();
+   *
+   * // set shadow opacity
+   * shape.shadowOpacity(0.5);
+   */
 
@@ -860,20 +823,20 @@ Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'shadowOffset', [
   /**
-     * get/set shadow offset
-     * @name shadowOffset
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} offset
-     * @param {Number} offset.x
-     * @param {Number} offset.y
-     * @returns {Object}
-     * @example
-     * // get shadow offset
-     * var shadowOffset = shape.shadowOffset();
-     *
-     * // set shadow offset
-     * shape.shadowOffset({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set shadow offset
+   * @name shadowOffset
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} offset
+   * @param {Number} offset.x
+   * @param {Number} offset.y
+   * @returns {Object}
+   * @example
+   * // get shadow offset
+   * var shadowOffset = shape.shadowOffset();
+   *
+   * // set shadow offset
+   * shape.shadowOffset({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
@@ -883,15 +846,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOffsetX', 0);
   /**
-     * get/set shadow offset x
-     * @name shadowOffsetX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get shadow offset x
-     * var shadowOffsetX = shape.shadowOffsetX();
-     *
-     * // set shadow offset x
-     * shape.shadowOffsetX(5);
-     */
+   * get/set shadow offset x
+   * @name shadowOffsetX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get shadow offset x
+   * var shadowOffsetX = shape.shadowOffsetX();
+   *
+   * // set shadow offset x
+   * shape.shadowOffsetX(5);
+   */
 
@@ -901,15 +864,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOffsetY', 0);
   /**
-     * get/set shadow offset y
-     * @name shadowOffsetY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get shadow offset y
-     * var shadowOffsetY = shape.shadowOffsetY();
-     *
-     * // set shadow offset y
-     * shape.shadowOffsetY(5);
-     */
+   * get/set shadow offset y
+   * @name shadowOffsetY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get shadow offset y
+   * var shadowOffsetY = shape.shadowOffsetY();
+   *
+   * // set shadow offset y
+   * shape.shadowOffsetY(5);
+   */
 
@@ -919,19 +882,19 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternImage');
   /**
-     * get/set fill pattern image
-     * @name fillPatternImage
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Image} image object
-     * @returns {Image}
-     * @example
-     * // get fill pattern image
-     * var fillPatternImage = shape.fillPatternImage();
-     *
-     * // set fill pattern image
-     * var imageObj = new Image();
-     * imageObj.onload = function() {
-     *   shape.fillPatternImage(imageObj);
-     * };
-     * imageObj.src = 'path/to/image/jpg';
-     */
+   * get/set fill pattern image
+   * @name fillPatternImage
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Image} image object
+   * @returns {Image}
+   * @example
+   * // get fill pattern image
+   * var fillPatternImage = shape.fillPatternImage();
+   *
+   * // set fill pattern image
+   * var imageObj = new Image();
+   * imageObj.onload = function() {
+   *   shape.fillPatternImage(imageObj);
+   * };
+   * imageObj.src = 'path/to/image/jpg';
+   */
 
@@ -941,68 +904,43 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fill');
   /**
-     * get/set fill color
-     * @name fill
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} color
-     * @returns {String}
-     * @example
-     * // get fill color
-     * var fill = shape.fill();
-     *
-     * // set fill color with color string
-     * shape.fill('green');
-     *
-     * // set fill color with hex
-     * shape.fill('#00ff00');
-     *
-     * // set fill color with rgb
-     * shape.fill('rgb(0,255,0)');
-     *
-     * // set fill color with rgba and make it 50% opaque
-     * shape.fill('rgba(0,255,0,0.5');
-     *
-     * // shape without fill
-     * shape.fill(null);
-     */
+   * get/set fill color
+   * @name fill
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get fill color
+   * var fill = shape.fill();
+   *
+   * // set fill color with color string
+   * shape.fill('green');
+   *
+   * // set fill color with hex
+   * shape.fill('#00ff00');
+   *
+   * // set fill color with rgb
+   * shape.fill('rgb(0,255,0)');
+   *
+   * // set fill color with rgba and make it 50% opaque
+   * shape.fill('rgba(0,255,0,0.5');
+   *
+   * // shape without fill
+   * shape.fill(null);
+   */
 
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'fillRed',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'fillGreen',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'fillBlue',
-    0,
-    Konva.Validators.RGBComponent
-  );
-  Konva.Factory.addDeprecatedGetterSetter(
-    Konva.Shape,
-    'fillAlpha',
-    1,
-    Konva.Validators.alphaComponent
-  );
-
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0);
 
   /**
-     * get/set fill pattern x
-     * @name fillPatternX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill pattern x
-     * var fillPatternX = shape.fillPatternX();
-     * // set fill pattern x
-     * shape.fillPatternX(20);
-     */
+   * get/set fill pattern x
+   * @name fillPatternX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern x
+   * var fillPatternX = shape.fillPatternX();
+   * // set fill pattern x
+   * shape.fillPatternX(20);
+   */
 
@@ -1012,14 +950,14 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternY', 0);
   /**
-     * get/set fill pattern y
-     * @name fillPatternY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill pattern y
-     * var fillPatternY = shape.fillPatternY();
-     * // set fill pattern y
-     * shape.fillPatternY(20);
-     */
+   * get/set fill pattern y
+   * @name fillPatternY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern y
+   * var fillPatternY = shape.fillPatternY();
+   * // set fill pattern y
+   * shape.fillPatternY(20);
+   */
 
@@ -1029,17 +967,35 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientColorStops');
   /**
-     * get/set fill linear gradient color stops
-     * @name fillLinearGradientColorStops
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Array} colorStops
-     * @returns {Array} colorStops
-     * @example
-     * // get fill linear gradient color stops
-     * var colorStops = shape.fillLinearGradientColorStops();
-     *
-     * // create a linear gradient that starts with red, changes to blue
-     * // halfway through, and then changes to green
-     * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
-     */
+   * get/set fill linear gradient color stops
+   * @name fillLinearGradientColorStops
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Array} colorStops
+   * @returns {Array} colorStops
+   * @example
+   * // get fill linear gradient color stops
+   * var colorStops = shape.fillLinearGradientColorStops();
+   *
+   * // create a linear gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+   */
 
+  Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');
+
+  /**
+   * get/set stroke linear gradient color stops
+   * @name strokeLinearGradientColorStops
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Array} colorStops
+   * @returns {Array} colorStops
+   * @example
+   * // get stroke linear gradient color stops
+   * var colorStops = shape.strokeLinearGradientColorStops();
+   *
+   * // create a linear gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
+   */
+
   Konva.Factory.addGetterSetter(
@@ -1052,15 +1008,15 @@ Konva.Shape,
   /**
-     * get/set fill radial gradient start radius
-     * @name fillRadialGradientStartRadius
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} radius
-     * @returns {Number}
-     * @example
-     * // get radial gradient start radius
-     * var startRadius = shape.fillRadialGradientStartRadius();
-     *
-     * // set radial gradient start radius
-     * shape.fillRadialGradientStartRadius(0);
-     */
+   * get/set fill radial gradient start radius
+   * @name fillRadialGradientStartRadius
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radial gradient start radius
+   * var startRadius = shape.fillRadialGradientStartRadius();
+   *
+   * // set radial gradient start radius
+   * shape.fillRadialGradientStartRadius(0);
+   */
 
@@ -1070,15 +1026,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndRadius', 0);
   /**
-     * get/set fill radial gradient end radius
-     * @name fillRadialGradientEndRadius
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} radius
-     * @returns {Number}
-     * @example
-     * // get radial gradient end radius
-     * var endRadius = shape.fillRadialGradientEndRadius();
-     *
-     * // set radial gradient end radius
-     * shape.fillRadialGradientEndRadius(100);
-     */
+   * get/set fill radial gradient end radius
+   * @name fillRadialGradientEndRadius
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radial gradient end radius
+   * var endRadius = shape.fillRadialGradientEndRadius();
+   *
+   * // set radial gradient end radius
+   * shape.fillRadialGradientEndRadius(100);
+   */
 
@@ -1088,16 +1044,16 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientColorStops');
   /**
-     * get/set fill radial gradient color stops
-     * @name fillRadialGradientColorStops
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} colorStops
-     * @returns {Array}
-     * @example
-     * // get fill radial gradient color stops
-     * var colorStops = shape.fillRadialGradientColorStops();
-     *
-     * // create a radial gradient that starts with red, changes to blue
-     * // halfway through, and then changes to green
-     * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
-     */
+   * get/set fill radial gradient color stops
+   * @name fillRadialGradientColorStops
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} colorStops
+   * @returns {Array}
+   * @example
+   * // get fill radial gradient color stops
+   * var colorStops = shape.fillRadialGradientColorStops();
+   *
+   * // create a radial gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+   */
 
@@ -1107,18 +1063,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRepeat', 'repeat');
   /**
-     * get/set fill pattern repeat.  Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.  The default is 'repeat'
-     * @name fillPatternRepeat
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} repeat
-     * @returns {String}
-     * @example
-     * // get fill pattern repeat
-     * var repeat = shape.fillPatternRepeat();
-     *
-     * // repeat pattern in x direction only
-     * shape.fillPatternRepeat('repeat-x');
-     *
-     * // do not repeat the pattern
-     * shape.fillPatternRepeat('no repeat');
-     */
+   * get/set fill pattern repeat.  Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.  The default is 'repeat'
+   * @name fillPatternRepeat
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} repeat
+   * @returns {String}
+   * @example
+   * // get fill pattern repeat
+   * var repeat = shape.fillPatternRepeat();
+   *
+   * // repeat pattern in x direction only
+   * shape.fillPatternRepeat('repeat-x');
+   *
+   * // do not repeat the pattern
+   * shape.fillPatternRepeat('no repeat');
+   */
 
@@ -1128,18 +1084,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillEnabled', true);
   /**
-     * get/set fill enabled flag
-     * @name fillEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} enabled
-     * @returns {Boolean}
-     * @example
-     * // get fill enabled flag
-     * var fillEnabled = shape.fillEnabled();
-     *
-     * // disable fill
-     * shape.fillEnabled(false);
-     *
-     * // enable fill
-     * shape.fillEnabled(true);
-     */
+   * get/set fill enabled flag
+   * @name fillEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get fill enabled flag
+   * var fillEnabled = shape.fillEnabled();
+   *
+   * // disable fill
+   * shape.fillEnabled(false);
+   *
+   * // enable fill
+   * shape.fillEnabled(true);
+   */
 
@@ -1149,18 +1105,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'strokeEnabled', true);
   /**
-     * get/set stroke enabled flag
-     * @name strokeEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} enabled
-     * @returns {Boolean}
-     * @example
-     * // get stroke enabled flag
-     * var strokeEnabled = shape.strokeEnabled();
-     *
-     * // disable stroke
-     * shape.strokeEnabled(false);
-     *
-     * // enable stroke
-     * shape.strokeEnabled(true);
-     */
+   * get/set stroke enabled flag
+   * @name strokeEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get stroke enabled flag
+   * var strokeEnabled = shape.strokeEnabled();
+   *
+   * // disable stroke
+   * shape.strokeEnabled(false);
+   *
+   * // enable stroke
+   * shape.strokeEnabled(true);
+   */
 
@@ -1170,18 +1126,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'shadowEnabled', true);
   /**
-     * get/set shadow enabled flag
-     * @name shadowEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} enabled
-     * @returns {Boolean}
-     * @example
-     * // get shadow enabled flag
-     * var shadowEnabled = shape.shadowEnabled();
-     *
-     * // disable shadow
-     * shape.shadowEnabled(false);
-     *
-     * // enable shadow
-     * shape.shadowEnabled(true);
-     */
+   * get/set shadow enabled flag
+   * @name shadowEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get shadow enabled flag
+   * var shadowEnabled = shape.shadowEnabled();
+   *
+   * // disable shadow
+   * shape.shadowEnabled(false);
+   *
+   * // enable shadow
+   * shape.shadowEnabled(true);
+   */
 
@@ -1191,18 +1147,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'dashEnabled', true);
   /**
-     * get/set dash enabled flag
-     * @name dashEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} enabled
-     * @returns {Boolean}
-     * @example
-     * // get dash enabled flag
-     * var dashEnabled = shape.dashEnabled();
-     *
-     * // disable dash
-     * shape.dashEnabled(false);
-     *
-     * // enable dash
-     * shape.dashEnabled(true);
-     */
+   * get/set dash enabled flag
+   * @name dashEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get dash enabled flag
+   * var dashEnabled = shape.dashEnabled();
+   *
+   * // disable dash
+   * shape.dashEnabled(false);
+   *
+   * // enable dash
+   * shape.dashEnabled(true);
+   */
 
@@ -1212,18 +1168,18 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'strokeScaleEnabled', true);
   /**
-     * get/set strokeScale enabled flag
-     * @name strokeScaleEnabled
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Boolean} enabled
-     * @returns {Boolean}
-     * @example
-     * // get stroke scale enabled flag
-     * var strokeScaleEnabled = shape.strokeScaleEnabled();
-     *
-     * // disable stroke scale
-     * shape.strokeScaleEnabled(false);
-     *
-     * // enable stroke scale
-     * shape.strokeScaleEnabled(true);
-     */
+   * get/set strokeScale enabled flag
+   * @name strokeScaleEnabled
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get stroke scale enabled flag
+   * var strokeScaleEnabled = shape.strokeScaleEnabled();
+   *
+   * // disable stroke scale
+   * shape.strokeScaleEnabled(false);
+   *
+   * // enable stroke scale
+   * shape.strokeScaleEnabled(true);
+   */
 
@@ -1233,16 +1189,16 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillPriority', 'color');
   /**
-     * get/set fill priority.  can be color, pattern, linear-gradient, or radial-gradient.  The default is color.
-     *   This is handy if you want to toggle between different fill types.
-     * @name fillPriority
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {String} priority
-     * @returns {String}
-     * @example
-     * // get fill priority
-     * var fillPriority = shape.fillPriority();
-     *
-     * // set fill priority
-     * shape.fillPriority('linear-gradient');
-     */
+   * get/set fill priority.  can be color, pattern, linear-gradient, or radial-gradient.  The default is color.
+   *   This is handy if you want to toggle between different fill types.
+   * @name fillPriority
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {String} priority
+   * @returns {String}
+   * @example
+   * // get fill priority
+   * var fillPriority = shape.fillPriority();
+   *
+   * // set fill priority
+   * shape.fillPriority('linear-gradient');
+   */
 
@@ -1255,52 +1211,54 @@ Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternOffset', [
   /**
-     * get/set fill pattern offset
-     * @name fillPatternOffset
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} offset
-     * @param {Number} offset.x
-     * @param {Number} offset.y
-     * @returns {Object}
-     * @example
-     * // get fill pattern offset
-     * var patternOffset = shape.fillPatternOffset();
-     *
-     * // set fill pattern offset
-     * shape.fillPatternOffset({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set fill pattern offset
+   * @name fillPatternOffset
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} offset
+   * @param {Number} offset.x
+   * @param {Number} offset.y
+   * @returns {Object}
+   * @example
+   * // get fill pattern offset
+   * var patternOffset = shape.fillPatternOffset();
+   *
+   * // set fill pattern offset
+   * shape.fillPatternOffset({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0);
+
   /**
-     * get/set fill pattern offset x
-     * @name fillPatternOffsetX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill pattern offset x
-     * var patternOffsetX = shape.fillPatternOffsetX();
-     *
-     * // set fill pattern offset x
-     * shape.fillPatternOffsetX(20);
-     */
+   * get/set fill pattern offset x
+   * @name fillPatternOffsetX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern offset x
+   * var patternOffsetX = shape.fillPatternOffsetX();
+   *
+   * // set fill pattern offset x
+   * shape.fillPatternOffsetX(20);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0);
+
   /**
-     * get/set fill pattern offset y
-     * @name fillPatternOffsetY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill pattern offset y
-     * var patternOffsetY = shape.fillPatternOffsetY();
-     *
-     * // set fill pattern offset y
-     * shape.fillPatternOffsetY(10);
-     */
+   * get/set fill pattern offset y
+   * @name fillPatternOffsetY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern offset y
+   * var patternOffsetY = shape.fillPatternOffsetY();
+   *
+   * // set fill pattern offset y
+   * shape.fillPatternOffsetY(10);
+   */
 
@@ -1313,52 +1271,54 @@ Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternScale', [
   /**
-     * get/set fill pattern scale
-     * @name fillPatternScale
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} scale
-     * @param {Number} scale.x
-     * @param {Number} scale.y
-     * @returns {Object}
-     * @example
-     * // get fill pattern scale
-     * var patternScale = shape.fillPatternScale();
-     *
-     * // set fill pattern scale
-     * shape.fillPatternScale({
-     *   x: 2
-     *   y: 2
-     * });
-     */
+   * get/set fill pattern scale
+   * @name fillPatternScale
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} scale
+   * @param {Number} scale.x
+   * @param {Number} scale.y
+   * @returns {Object}
+   * @example
+   * // get fill pattern scale
+   * var patternScale = shape.fillPatternScale();
+   *
+   * // set fill pattern scale
+   * shape.fillPatternScale({
+   *   x: 2
+   *   y: 2
+   * });
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1);
+
   /**
-     * get/set fill pattern scale x
-     * @name fillPatternScaleX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill pattern scale x
-     * var patternScaleX = shape.fillPatternScaleX();
-     *
-     * // set fill pattern scale x
-     * shape.fillPatternScaleX(2);
-     */
+   * get/set fill pattern scale x
+   * @name fillPatternScaleX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern scale x
+   * var patternScaleX = shape.fillPatternScaleX();
+   *
+   * // set fill pattern scale x
+   * shape.fillPatternScaleX(2);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1);
+
   /**
-     * get/set fill pattern scale y
-     * @name fillPatternScaleY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill pattern scale y
-     * var patternScaleY = shape.fillPatternScaleY();
-     *
-     * // set fill pattern scale y
-     * shape.fillPatternScaleY(2);
-     */
+   * get/set fill pattern scale y
+   * @name fillPatternScaleY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern scale y
+   * var patternScaleY = shape.fillPatternScaleY();
+   *
+   * // set fill pattern scale y
+   * shape.fillPatternScaleY(2);
+   */
 
@@ -1372,21 +1332,47 @@ Konva.Factory.addComponentsGetterSetter(
   /**
-     * get/set fill linear gradient start point
-     * @name fillLinearGradientStartPoint
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} startPoint
-     * @param {Number} startPoint.x
-     * @param {Number} startPoint.y
-     * @returns {Object}
-     * @example
-     * // get fill linear gradient start point
-     * var startPoint = shape.fillLinearGradientStartPoint();
-     *
-     * // set fill linear gradient start point
-     * shape.fillLinearGradientStartPoint({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set fill linear gradient start point
+   * @name fillLinearGradientStartPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill linear gradient start point
+   * var startPoint = shape.fillLinearGradientStartPoint();
+   *
+   * // set fill linear gradient start point
+   * shape.fillLinearGradientStartPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPoint',
+    ['x', 'y']
+  );
+
+  /**
+   * get/set stroke linear gradient start point
+   * @name strokeLinearGradientStartPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient start point
+   * var startPoint = shape.strokeLinearGradientStartPoint();
+   *
+   * // set stroke linear gradient start point
+   * shape.strokeLinearGradientStartPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
+
   Konva.Factory.addGetterSetter(
@@ -1397,37 +1383,80 @@ Konva.Shape,
   );
+
   /**
-     * get/set fill linear gradient start point x
-     * @name fillLinearGradientStartPointX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill linear gradient start point x
-     * var startPointX = shape.fillLinearGradientStartPointX();
-     *
-     * // set fill linear gradient start point x
-     * shape.fillLinearGradientStartPointX(20);
-     */
+   * get/set fill linear gradient start point x
+   * @name fillLinearGradientStartPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient start point x
+   * var startPointX = shape.fillLinearGradientStartPointX();
+   *
+   * // set fill linear gradient start point x
+   * shape.fillLinearGradientStartPointX(20);
+   */
 
   Konva.Factory.addGetterSetter(
     Konva.Shape,
+    'strokeLinearGradientStartPointX',
+    0
+  );
+
+  /**
+   * get/set stroke linear gradient start point x
+   * @name linearLinearGradientStartPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point x
+   * var startPointX = shape.strokeLinearGradientStartPointX();
+   *
+   * // set stroke linear gradient start point x
+   * shape.strokeLinearGradientStartPointX(20);
+   */
+
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
     'fillLinearGradientStartPointY',
     0
   );
+
   /**
-     * get/set fill linear gradient start point y
-     * @name fillLinearGradientStartPointY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill linear gradient start point y
-     * var startPointY = shape.fillLinearGradientStartPointY();
-     *
-     * // set fill linear gradient start point y
-     * shape.fillLinearGradientStartPointY(20);
-     */
+   * get/set fill linear gradient start point y
+   * @name fillLinearGradientStartPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient start point y
+   * var startPointY = shape.fillLinearGradientStartPointY();
+   *
+   * // set fill linear gradient start point y
+   * shape.fillLinearGradientStartPointY(20);
+   */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientStartPointY',
+    0
+  );
+  /**
+   * get/set stroke linear gradient start point y
+   * @name strokeLinearGradientStartPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point y
+   * var startPointY = shape.strokeLinearGradientStartPointY();
+   *
+   * // set stroke linear gradient start point y
+   * shape.strokeLinearGradientStartPointY(20);
+   */
+
   Konva.Factory.addComponentsGetterSetter(
@@ -1440,53 +1469,119 @@ Konva.Shape,
   /**
-     * get/set fill linear gradient end point
-     * @name fillLinearGradientEndPoint
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} endPoint
-     * @param {Number} endPoint.x
-     * @param {Number} endPoint.y
-     * @returns {Object}
-     * @example
-     * // get fill linear gradient end point
-     * var endPoint = shape.fillLinearGradientEndPoint();
-     *
-     * // set fill linear gradient end point
-     * shape.fillLinearGradientEndPoint({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set fill linear gradient end point
+   * @name fillLinearGradientEndPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill linear gradient end point
+   * var endPoint = shape.fillLinearGradientEndPoint();
+   *
+   * // set fill linear gradient end point
+   * shape.fillLinearGradientEndPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
+  Konva.Factory.addComponentsGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPoint',
+    ['x', 'y']
+  );
+
+  /**
+   * get/set stroke linear gradient end point
+   * @name strokeLinearGradientEndPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient end point
+   * var endPoint = shape.strokeLinearGradientEndPoint();
+   *
+   * // set stroke linear gradient end point
+   * shape.strokeLinearGradientEndPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);
   /**
-     * get/set fill linear gradient end point x
-     * @name fillLinearGradientEndPointX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill linear gradient end point x
-     * var endPointX = shape.fillLinearGradientEndPointX();
-     *
-     * // set fill linear gradient end point x
-     * shape.fillLinearGradientEndPointX(20);
-     */
+   * get/set fill linear gradient end point x
+   * @name fillLinearGradientEndPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient end point x
+   * var endPointX = shape.fillLinearGradientEndPointX();
+   *
+   * // set fill linear gradient end point x
+   * shape.fillLinearGradientEndPointX(20);
+   */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPointX',
+    0
+  );
+  /**
+   * get/set fill linear gradient end point x
+   * @name strokeLinearGradientEndPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point x
+   * var endPointX = shape.strokeLinearGradientEndPointX();
+   *
+   * // set stroke linear gradient end point x
+   * shape.strokeLinearGradientEndPointX(20);
+   */
+
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);
   /**
-     * get/set fill linear gradient end point y
-     * @name fillLinearGradientEndPointY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill linear gradient end point y
-     * var endPointY = shape.fillLinearGradientEndPointY();
-     *
-     * // set fill linear gradient end point y
-     * shape.fillLinearGradientEndPointY(20);
-     */
+   * get/set fill linear gradient end point y
+   * @name fillLinearGradientEndPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient end point y
+   * var endPointY = shape.fillLinearGradientEndPointY();
+   *
+   * // set fill linear gradient end point y
+   * shape.fillLinearGradientEndPointY(20);
+   */
 
+  Konva.Factory.addGetterSetter(
+    Konva.Shape,
+    'strokeLinearGradientEndPointY',
+    0
+  );
+  /**
+   * get/set stroke linear gradient end point y
+   * @name strokeLinearGradientEndPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point y
+   * var endPointY = shape.strokeLinearGradientEndPointY();
+   *
+   * // set stroke linear gradient end point y
+   * shape.strokeLinearGradientEndPointY(20);
+   */
+
   Konva.Factory.addComponentsGetterSetter(
@@ -1499,20 +1594,20 @@ Konva.Shape,
   /**
-     * get/set fill radial gradient start point
-     * @name fillRadialGradientStartPoint
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} startPoint
-     * @param {Number} startPoint.x
-     * @param {Number} startPoint.y
-     * @returns {Object}
-     * @example
-     * // get fill radial gradient start point
-     * var startPoint = shape.fillRadialGradientStartPoint();
-     *
-     * // set fill radial gradient start point
-     * shape.fillRadialGradientStartPoint({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set fill radial gradient start point
+   * @name fillRadialGradientStartPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill radial gradient start point
+   * var startPoint = shape.fillRadialGradientStartPoint();
+   *
+   * // set fill radial gradient start point
+   * shape.fillRadialGradientStartPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
@@ -1525,15 +1620,15 @@ Konva.Factory.addGetterSetter(
   /**
-     * get/set fill radial gradient start point x
-     * @name fillRadialGradientStartPointX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill radial gradient start point x
-     * var startPointX = shape.fillRadialGradientStartPointX();
-     *
-     * // set fill radial gradient start point x
-     * shape.fillRadialGradientStartPointX(20);
-     */
+   * get/set fill radial gradient start point x
+   * @name fillRadialGradientStartPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient start point x
+   * var startPointX = shape.fillRadialGradientStartPointX();
+   *
+   * // set fill radial gradient start point x
+   * shape.fillRadialGradientStartPointX(20);
+   */
 
@@ -1546,15 +1641,15 @@ Konva.Factory.addGetterSetter(
   /**
-     * get/set fill radial gradient start point y
-     * @name fillRadialGradientStartPointY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill radial gradient start point y
-     * var startPointY = shape.fillRadialGradientStartPointY();
-     *
-     * // set fill radial gradient start point y
-     * shape.fillRadialGradientStartPointY(20);
-     */
+   * get/set fill radial gradient start point y
+   * @name fillRadialGradientStartPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient start point y
+   * var startPointY = shape.fillRadialGradientStartPointY();
+   *
+   * // set fill radial gradient start point y
+   * shape.fillRadialGradientStartPointY(20);
+   */
 
@@ -1568,52 +1663,52 @@ Konva.Factory.addComponentsGetterSetter(
   /**
-     * get/set fill radial gradient end point
-     * @name fillRadialGradientEndPoint
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Object} endPoint
-     * @param {Number} endPoint.x
-     * @param {Number} endPoint.y
-     * @returns {Object}
-     * @example
-     * // get fill radial gradient end point
-     * var endPoint = shape.fillRadialGradientEndPoint();
-     *
-     * // set fill radial gradient end point
-     * shape.fillRadialGradientEndPoint({
-     *   x: 20
-     *   y: 10
-     * });
-     */
+   * get/set fill radial gradient end point
+   * @name fillRadialGradientEndPoint
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill radial gradient end point
+   * var endPoint = shape.fillRadialGradientEndPoint();
+   *
+   * // set fill radial gradient end point
+   * shape.fillRadialGradientEndPoint({
+   *   x: 20
+   *   y: 10
+   * });
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointX', 0);
   /**
-     * get/set fill radial gradient end point x
-     * @name fillRadialGradientEndPointX
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} x
-     * @returns {Number}
-     * @example
-     * // get fill radial gradient end point x
-     * var endPointX = shape.fillRadialGradientEndPointX();
-     *
-     * // set fill radial gradient end point x
-     * shape.fillRadialGradientEndPointX(20);
-     */
+   * get/set fill radial gradient end point x
+   * @name fillRadialGradientEndPointX
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient end point x
+   * var endPointX = shape.fillRadialGradientEndPointX();
+   *
+   * // set fill radial gradient end point x
+   * shape.fillRadialGradientEndPointX(20);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointY', 0);
   /**
-     * get/set fill radial gradient end point y
-     * @name fillRadialGradientEndPointY
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} y
-     * @returns {Number}
-     * @example
-     * // get fill radial gradient end point y
-     * var endPointY = shape.fillRadialGradientEndPointY();
-     *
-     * // set fill radial gradient end point y
-     * shape.fillRadialGradientEndPointY(20);
-     */
+   * get/set fill radial gradient end point y
+   * @name fillRadialGradientEndPointY
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient end point y
+   * var endPointY = shape.fillRadialGradientEndPointY();
+   *
+   * // set fill radial gradient end point y
+   * shape.fillRadialGradientEndPointY(20);
+   */
 
@@ -1623,15 +1718,15 @@ Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRotation', 0);
   /**
-     * get/set fill pattern rotation in degrees
-     * @name fillPatternRotation
-     * @method
-     * @memberof Konva.Shape.prototype
-     * @param {Number} rotation
-     * @returns {Konva.Shape}
-     * @example
-     * // get fill pattern rotation
-     * var patternRotation = shape.fillPatternRotation();
-     *
-     * // set fill pattern rotation
-     * shape.fillPatternRotation(20);
-     */
+   * get/set fill pattern rotation in degrees
+   * @name fillPatternRotation
+   * @method
+   * @memberof Konva.Shape.prototype
+   * @param {Number} rotation
+   * @returns {Konva.Shape}
+   * @example
+   * // get fill pattern rotation
+   * var patternRotation = shape.fillPatternRotation();
+   *
+   * // set fill pattern rotation
+   * shape.fillPatternRotation(20);
+   */
 
@@ -1638,0 +1733,0 @@ Konva.Factory.backCompat(Konva.Shape, {

src/shapes/Arrow.js

 (function(Konva) {
   'use strict';
   /**
-     * Arrow constructor
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Shape
-     * @param {Object} config
-     * @param {Array} config.points
-     * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
-     *   The default is 0
-     * @param {Number} config.pointerLength
-     * @param {Number} config.pointerWidth
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var line = new Konva.Line({
-     *   points: [73, 70, 340, 23, 450, 60, 500, 20],
-     *   stroke: 'red',
-     *   tension: 1,
-     *   pointerLength : 10,
-     *   pointerWidth : 12
-     * });
-     */
+   * Arrow constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
+   * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+   *   The default is 0
+   * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.
+   * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.
+   * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false.
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var line = new Konva.Line({
+   *   points: [73, 70, 340, 23, 450, 60, 500, 20],
+   *   stroke: 'red',
+   *   tension: 1,
+   *   pointerLength : 10,
+   *   pointerWidth : 12
+   * });
+   */
   Konva.Arrow = function(config) {
@@ -74,50 +75,50 @@ this.____init(config);
   /**
-     * get/set pointerLength
-     * @name pointerLength
-     * @method
-     * @memberof Konva.Arrow.prototype
-     * @param {Number} Length of pointer of arrow.
-     *   The default is 10.
-     * @returns {Number}
-     * @example
-     * // get tension
-     * var pointerLength = line.pointerLength();
-     *
-     * // set tension
-     * line.pointerLength(15);
-     */
+   * get/set pointerLength
+   * @name pointerLength
+   * @method
+   * @memberof Konva.Arrow.prototype
+   * @param {Number} Length of pointer of arrow.
+   *   The default is 10.
+   * @returns {Number}
+   * @example
+   * // get tension
+   * var pointerLength = line.pointerLength();
+   *
+   * // set tension
+   * line.pointerLength(15);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerLength', 10);
   /**
-     * get/set pointerWidth
-     * @name pointerWidth
-     * @method
-     * @memberof Konva.Arrow.prototype
-     * @param {Number} Width of pointer of arrow.
-     *   The default is 10.
-     * @returns {Number}
-     * @example
-     * // get tension
-     * var pointerWidth = line.pointerWidth();
-     *
-     * // set tension
-     * line.pointerWidth(15);
-     */
+   * get/set pointerWidth
+   * @name pointerWidth
+   * @method
+   * @memberof Konva.Arrow.prototype
+   * @param {Number} Width of pointer of arrow.
+   *   The default is 10.
+   * @returns {Number}
+   * @example
+   * // get tension
+   * var pointerWidth = line.pointerWidth();
+   *
+   * // set tension
+   * line.pointerWidth(15);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerWidth', 10);
   /**
-     * get/set pointerAtBeginning
-     * @name pointerAtBeginning
-     * @method
-     * @memberof Konva.Arrow.prototype
-     * @param {Number} Should pointer displayed at beginning of arrow.
-     *   The default is false.
-     * @returns {Boolean}
-     * @example
-     * // get tension
-     * var pointerAtBeginning = line.pointerAtBeginning();
-     *
-     * // set tension
-     * line.pointerAtBeginning(true);
-     */
+   * get/set pointerAtBeginning
+   * @name pointerAtBeginning
+   * @method
+   * @memberof Konva.Arrow.prototype
+   * @param {Number} Should pointer displayed at beginning of arrow.
+   *   The default is false.
+   * @returns {Boolean}
+   * @example
+   * // get tension
+   * var pointerAtBeginning = line.pointerAtBeginning();
+   *
+   * // set tension
+   * line.pointerAtBeginning(true);
+   */
 
@@ -124,0 +125,0 @@ Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerAtBeginning', false);

src/shapes/Line.js

 (function() {
   'use strict';
   /**
-     * Line constructor.  Lines are defined by an array of points and
-     *  a tension
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Shape
-     * @param {Object} config
-     * @param {Array} config.points
-     * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
-     *   The default is 0
-     * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
-     * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var line = new Konva.Line({
-     *   x: 100,
-     *   y: 50,
-     *   points: [73, 70, 340, 23, 450, 60, 500, 20],
-     *   stroke: 'red',
-     *   tension: 1
-     * });
-     */
+   * Line constructor.  Lines are defined by an array of points and
+   *  a tension
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
+   * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+   *   The default is 0
+   * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
+   * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var line = new Konva.Line({
+   *   x: 100,
+   *   y: 50,
+   *   points: [73, 70, 340, 23, 450, 60, 500, 20],
+   *   stroke: 'red',
+   *   tension: 1
+   * });
+   */
   Konva.Line = function(config) {
@@ -213,18 +213,18 @@ this.___init(config);
   /**
-     * get/set closed flag.  The default is false
-     * @name closed
-     * @method
-     * @memberof Konva.Line.prototype
-     * @param {Boolean} closed
-     * @returns {Boolean}
-     * @example
-     * // get closed flag
-     * var closed = line.closed();
-     *
-     * // close the shape
-     * line.closed(true);
-     *
-     * // open the shape
-     * line.closed(false);
-     */
+   * get/set closed flag.  The default is false
+   * @name closed
+   * @method
+   * @memberof Konva.Line.prototype
+   * @param {Boolean} closed
+   * @returns {Boolean}
+   * @example
+   * // get closed flag
+   * var closed = line.closed();
+   *
+   * // close the shape
+   * line.closed(true);
+   *
+   * // open the shape
+   * line.closed(false);
+   */
 
@@ -234,15 +234,15 @@ Konva.Factory.addGetterSetter(Konva.Line, 'bezier', false);
   /**
-    * get/set bezier flag.  The default is false
-    * @name bezier
-    * @method
-    * @memberof Konva.Line.prototype
-    * @param {Boolean} bezier
-    * @returns {Boolean}
-    * @example
-    * // get whether the line is a bezier
-    * var isBezier = line.bezier();
-    *
-    * // set whether the line is a bezier
-    * line.bezier(true);
-    */
+   * get/set bezier flag.  The default is false
+   * @name bezier
+   * @method
+   * @memberof Konva.Line.prototype
+   * @param {Boolean} bezier
+   * @returns {Boolean}
+   * @example
+   * // get whether the line is a bezier
+   * var isBezier = line.bezier();
+   *
+   * // set whether the line is a bezier
+   * line.bezier(true);
+   */
 
@@ -252,37 +252,37 @@ Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0);
   /**
-     * get/set tension
-     * @name tension
-     * @method
-     * @memberof Konva.Line.prototype
-     * @param {Number} Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
-     *   The default is 0
-     * @returns {Number}
-     * @example
-     * // get tension
-     * var tension = line.tension();
-     *
-     * // set tension
-     * line.tension(3);
-     */
+   * get/set tension
+   * @name tension
+   * @method
+   * @memberof Konva.Line.prototype
+   * @param {Number} Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+   *   The default is 0
+   * @returns {Number}
+   * @example
+   * // get tension
+   * var tension = line.tension();
+   *
+   * // set tension
+   * line.tension(3);
+   */
 
   Konva.Factory.addGetterSetter(Konva.Line, 'points', []);
   /**
-     * get/set points array
-     * @name points
-     * @method
-     * @memberof Konva.Line.prototype
-     * @param {Array} points
-     * @returns {Array}
-     * @example
-     * // get points
-     * var points = line.points();
-     *
-     * // set points
-     * line.points([10, 20, 30, 40, 50, 60]);
-     *
-     * // push a new point
-     * line.points(line.points().concat([70, 80]));
-     */
+   * get/set points array
+   * @name points
+   * @method
+   * @memberof Konva.Line.prototype
+   * @param {Array} points
+   * @returns {Array}
+   * @example
+   * // get points
+   * var points = line.points();
+   *
+   * // set points
+   * line.points([10, 20, 30, 40, 50, 60]);
+   *
+   * // push a new point
+   * line.points(line.points().concat([70, 80]));
+   */
 
   Konva.Collection.mapMethods(Konva.Line);
 })();

src/shapes/Path.js

@@ -5,20 +5,20 @@ /*eslint-disable  no-shadow, max-len, max-depth */
   /**
-     * Path constructor.
-     * @author Jason Follas
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Shape
-     * @param {Object} config
-     * @param {String} config.data SVG data string
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var path = new Konva.Path({
-     *   x: 240,
-     *   y: 40,
-     *   data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
-     *   fill: 'green',
-     *   scale: 2
-     * });
-     */
+   * Path constructor.
+   * @author Jason Follas
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} config.data SVG data string
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var path = new Konva.Path({
+   *   x: 240,
+   *   y: 40,
+   *   data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
+   *   fill: 'green',
+   *   scale: 2
+   * });
+   */
   Konva.Path = function(config) {
@@ -240,3 +240,4 @@ this.___init(config);
   Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
-    var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
+    var cosPsi = Math.cos(psi),
+      sinPsi = Math.sin(psi);
     var pt = {
@@ -320,5 +321,9 @@ x: rx * Math.cos(theta),
     var ca = [];
+    var coords = [];
     // init context point
     var cpx = 0;
     var cpy = 0;
+
+    var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
+    var match;
     for (n = 1; n < arr.length; n++) {
@@ -328,15 +333,20 @@ var str = arr[n];
       str = str.slice(1);
-      // remove ,- for consistency
-      str = str.replace(new RegExp(',-', 'g'), '-');
-      // add commas so that it's easy to split
-      str = str.replace(new RegExp('-', 'g'), ',-');
-      str = str.replace(new RegExp('e,-', 'g'), 'e-');
-      var p = str.split(',');
-      if (p.length > 0 && p[0] === '') {
-        p.shift();
+
+      coords.length = 0;
+      while ((match = re.exec(str))) {
+        coords.push(match[0]);
       }
-      // convert strings to floats
-      for (var i = 0; i < p.length; i++) {
-        p[i] = parseFloat(p[i]);
+
+      // while ((match = re.exec(str))) {
+      //   coords.push(match[0]);
+      // }
+      var p = [];
+
+      for (var j = 0, jlen = coords.length; j < jlen; j++) {
+        var parsed = parseFloat(coords[j]);
+        if (!isNaN(parsed)) {
+          p.push(parsed);
+        }
       }
+
       while (p.length > 0) {
@@ -350,3 +360,4 @@ if (isNaN(p[0])) {
         var points = [];
-        var startX = cpx, startY = cpy;
+        var startX = cpx,
+          startY = cpy;
         // Move var from within the switch to up here (jshint)
@@ -780,20 +791,20 @@ var prevCmd, ctlPtx, ctlPty; // Ss, Tt
   /**
-     * set SVG path data string.  This method
-     *  also automatically parses the data string
-     *  into a data array.  Currently supported SVG data:
-     *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
-     * @name setData
-     * @method
-     * @memberof Konva.Path.prototype
-     * @param {String} SVG path command string
-     */
+   * set SVG path data string.  This method
+   *  also automatically parses the data string
+   *  into a data array.  Currently supported SVG data:
+   *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
+   * @name setData
+   * @method
+   * @memberof Konva.Path.prototype
+   * @param {String} SVG path command string
+   */
 
   /**
-     * get SVG path data string
-     * @name getData
-     * @method
-     * @memberof Konva.Path.prototype
-     */
+   * get SVG path data string
+   * @name getData
+   * @method
+   * @memberof Konva.Path.prototype
+   */
 
   Konva.Collection.mapMethods(Konva.Path);
 })();

src/shapes/Text.js

@@ -25,2 +25,3 @@ /*eslint-disable max-depth */
     NONE = 'none',
+    ELLIPSIS = '…',
     ATTR_CHANGE_LIST = [
@@ -38,2 +39,3 @@ 'fontFamily',
       'wrap',
+      'ellipsis',
       'letterSpacing'
@@ -53,28 +55,29 @@ ],
   /**
-     * Text constructor
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Shape
-     * @param {Object} config
-     * @param {String} [config.fontFamily] default is Arial
-     * @param {Number} [config.fontSize] in pixels.  Default is 12
-     * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
-     * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
-     * @param {String} config.text
-     * @param {String} [config.align] can be left, center, or right
-     * @param {Number} [config.padding]
-     * @param {Number} [config.lineHeight] default is 1
-     * @param {String} [config.wrap] can be word, char, or none. Default is word
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var text = new Konva.Text({
-     *   x: 10,
-     *   y: 15,
-     *   text: 'Simple Text',
-     *   fontSize: 30,
-     *   fontFamily: 'Calibri',
-     *   fill: 'green'
-     * });
-     */
+   * Text constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} [config.fontFamily] default is Arial
+   * @param {Number} [config.fontSize] in pixels.  Default is 12
+   * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+   * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
+   * @param {String} config.text
+   * @param {String} [config.align] can be left, center, or right
+   * @param {Number} [config.padding]
+   * @param {Number} [config.lineHeight] default is 1
+   * @param {String} [config.wrap] can be word, char, or none. Default is word
+   * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var text = new Konva.Text({
+   *   x: 10,
+   *   y: 15,
+   *   text: 'Simple Text',
+   *   fontSize: 30,
+   *   fontFamily: 'Calibri',
+   *   fill: 'green'
+   * });
+   */
   Konva.Text = function(config) {
@@ -239,7 +242,7 @@ this.___init(config);
     /**
-         * get width of text area, which includes padding
-         * @method
-         * @memberof Konva.Text.prototype
-         * @returns {Number}
-         */
+     * get width of text area, which includes padding
+     * @method
+     * @memberof Konva.Text.prototype
+     * @returns {Number}
+     */
     getWidth: function() {
@@ -252,7 +255,7 @@ var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
     /**
-         * get the height of the text area, which takes into account multi-line text, line heights, and padding
-         * @method
-         * @memberof Konva.Text.prototype
-         * @returns {Number}
-         */
+     * get the height of the text area, which takes into account multi-line text, line heights, and padding
+     * @method
+     * @memberof Konva.Text.prototype
+     * @returns {Number}
+     */
     getHeight: function() {
@@ -263,11 +266,11 @@ var isAuto =
         ? this.getTextHeight() * this.textArr.length * this.getLineHeight() +
-          this.getPadding() * 2
+            this.getPadding() * 2
         : this.attrs.height;
     },
     /**
-         * get text width
-         * @method
-         * @memberof Konva.Text.prototype
-         * @returns {Number}
-         */
+     * get text width
+     * @method
+     * @memberof Konva.Text.prototype
+     * @returns {Number}
+     */
     getTextWidth: function() {
@@ -277,7 +280,7 @@ return this.textWidth;
     /**
-         * get text height
-         * @method
-         * @memberof Konva.Text.prototype
-         * @returns {Number}
-         */
+     * get text height
+     * @method
+     * @memberof Konva.Text.prototype
+     * @returns {Number}
+     */
     getTextHeight: function() {
@@ -355,3 +358,4 @@ return this.textHeight;
         shouldWrap = wrap !== NONE,
-        wrapAtWord = wrap !== CHAR && shouldWrap;
+        wrapAtWord = wrap !== CHAR && shouldWrap,
+        shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
 
@@ -363,2 +367,5 @@ this.textArr = [];
         var line = lines[i];
+        var additionalWidth = shouldAddEllipsis
+          ? this._getTextWidth(ELLIPSIS)
+          : 0;
 
@@ -383,6 +390,6 @@ var lineWidth = this._getTextWidth(line);
                 substr = line.slice(0, mid + 1),
-                substrWidth = this._getTextWidth(substr);
+                substrWidth = this._getTextWidth(substr) + additionalWidth;
               if (substrWidth <= maxWidth) {
                 low = mid + 1;
-                match = substr;
+                match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
                 matchWidth = substrWidth;
@@ -468,15 +475,15 @@ } else {
   /**
-     * get/set font family
-     * @name fontFamily
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} fontFamily
-     * @returns {String}
-     * @example
-     * // get font family
-     * var fontFamily = text.fontFamily();
-     *
-     * // set font family
-     * text.fontFamily('Arial');
-     */
+   * get/set font family
+   * @name fontFamily
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} fontFamily
+   * @returns {String}
+   * @example
+   * // get font family
+   * var fontFamily = text.fontFamily();
+   *
+   * // set font family
+   * text.fontFamily('Arial');
+   */
 
@@ -486,15 +493,15 @@ Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12);
   /**
-     * get/set font size in pixels
-     * @name fontSize
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {Number} fontSize
-     * @returns {Number}
-     * @example
-     * // get font size
-     * var fontSize = text.fontSize();
-     *
-     * // set font size to 22px
-     * text.fontSize(22);
-     */
+   * get/set font size in pixels
+   * @name fontSize
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {Number} fontSize
+   * @returns {Number}
+   * @example
+   * // get font size
+   * var fontSize = text.fontSize();
+   *
+   * // set font size to 22px
+   * text.fontSize(22);
+   */
 
@@ -504,15 +511,15 @@ Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL);
   /**
-     * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
-     * @name fontStyle
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} fontStyle
-     * @returns {String}
-     * @example
-     * // get font style
-     * var fontStyle = text.fontStyle();
-     *
-     * // set font style
-     * text.fontStyle('bold');
-     */
+   * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
+   * @name fontStyle
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} fontStyle
+   * @returns {String}
+   * @example
+   * // get font style
+   * var fontStyle = text.fontStyle();
+   *
+   * // set font style
+   * text.fontStyle('bold');
+   */
 
@@ -522,15 +529,15 @@ Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL);
   /**
-     * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
-     * @name fontVariant
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} fontVariant
-     * @returns {String}
-     * @example
-     * // get font variant
-     * var fontVariant = text.fontVariant();
-     *
-     * // set font variant
-     * text.fontVariant('small-caps');
-     */
+   * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+   * @name fontVariant
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} fontVariant
+   * @returns {String}
+   * @example
+   * // get font variant
+   * var fontVariant = text.fontVariant();
+   *
+   * // set font variant
+   * text.fontVariant('small-caps');
+   */
 
@@ -540,15 +547,15 @@ Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0);
   /**
-     * set padding
-     * @name padding
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {Number} padding
-     * @returns {Number}
-     * @example
-     * // get padding
-     * var padding = text.padding();
-     *
-     * // set padding to 10 pixels
-     * text.padding(10);
-     */
+   * set padding
+   * @name padding
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {Number} padding
+   * @returns {Number}
+   * @example
+   * // get padding
+   * var padding = text.padding();
+   *
+   * // set padding to 10 pixels
+   * text.padding(10);
+   */
 
@@ -558,18 +565,18 @@ Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT);
   /**
-     * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
-     * @name align
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} align
-     * @returns {String}
-     * @example
-     * // get text align
-     * var align = text.align();
-     *
-     * // center text
-     * text.align('center');
-     *
-     * // align text to right
-     * text.align('right');
-     */
+   * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
+   * @name align
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} align
+   * @returns {String}
+   * @example
+   * // get text align
+   * var align = text.align();
+   *
+   * // center text
+   * text.align('center');
+   *
+   * // align text to right
+   * text.align('right');
+   */
 
@@ -579,15 +586,15 @@ Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1);
   /**
-     * get/set line height.  The default is 1.
-     * @name lineHeight
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {Number} lineHeight
-     * @returns {Number}
-     * @example
-     * // get line height
-     * var lineHeight = text.lineHeight();
-     *
-     * // set the line height
-     * text.lineHeight(2);
-     */
+   * get/set line height.  The default is 1.
+   * @name lineHeight
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {Number} lineHeight
+   * @returns {Number}
+   * @example
+   * // get line height
+   * var lineHeight = text.lineHeight();
+   *
+   * // set the line height
+   * text.lineHeight(2);
+   */
 
@@ -597,25 +604,43 @@ Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD);
   /**
-     * get/set wrap.  Can be word, char, or none. Default is word.
-     * @name wrap
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} wrap
-     * @returns {String}
-     * @example
-     * // get wrap
-     * var wrap = text.wrap();
-     *
-     * // set wrap
-     * text.wrap('word');
-     */
+   * get/set wrap.  Can be word, char, or none. Default is word.
+   * @name wrap
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} wrap
+   * @returns {String}
+   * @example
+   * // get wrap
+   * var wrap = text.wrap();
+   *
+   * // set wrap
+   * text.wrap('word');
+   */
 
+  Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);
+
+  /**
+   * get/set ellipsis.  Can be true or false. Default is false.
+   * if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
+   * @name ellipsis
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {Boolean} ellipsis
+   * @returns {Boolean}
+   * @example
+   * // get ellipsis
+   * var ellipsis = text.ellipsis();
+   *
+   * // set ellipsis
+   * text.ellipsis(true);
+   */
+
   Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
 
   /**
-       * set letter spacing property. Default value is 0.
-       * @name letterSpacing
-       * @method
-       * @memberof Konva.TextPath.prototype
-       * @param {Number} letterSpacing
-       */
+   * set letter spacing property. Default value is 0.
+   * @name letterSpacing
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {Number} letterSpacing
+   */
 
@@ -626,15 +651,15 @@ Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
   /**
-     * get/set text
-     * @name getText
-     * @method
-     * @memberof Konva.Text.prototype
-     * @param {String} text
-     * @returns {String}
-     * @example
-     * // get text
-     * var text = text.text();
-     *
-     * // set text
-     * text.text('Hello world!');
-     */
+   * get/set text
+   * @name getText
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} text
+   * @returns {String}
+   * @example
+   * // get text
+   * var text = text.text();
+   *
+   * // set text
+   * text.text('Hello world!');
+   */
 
@@ -644,23 +669,23 @@ Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
   /**
-      * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
-      * @name textDecoration
-      * @method
-      * @memberof Konva.Text.prototype
-      * @param {String} textDecoration
-      * @returns {String}
-      * @example
-      * // get text decoration
-      * var textDecoration = text.textDecoration();
-      *
-      * // underline text
-      * text.textDecoration('underline');
-      *
-      * // strike text
-      * text.textDecoration('line-through');
-      *
-      * // underline and strike text
-      * text.textDecoration('underline line-through');
-      */
+   * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
+   * @name textDecoration
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} textDecoration
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var textDecoration = text.textDecoration();
+   *
+   * // underline text
+   * text.textDecoration('underline');
+   *
+   * // strike text
+   * text.textDecoration('line-through');
+   *
+   * // underline and strike text
+   * text.textDecoration('underline line-through');
+   */
 
   Konva.Collection.mapMethods(Konva.Text);
 })();

src/shapes/TextPath.js

@@ -8,27 +8,44 @@ (function() {
   /**
-     * Path constructor.
-     * @author Jason Follas
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Shape
-     * @param {Object} config
-     * @param {String} [config.fontFamily] default is Calibri
-     * @param {Number} [config.fontSize] default is 12
-     * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
-     * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
-     * @param {String} config.text
-     * @param {String} config.data SVG data string
-     * @@shapeParams
-     * @@nodeParams
-     * @example
-     * var textpath = new Konva.TextPath({
-     *   x: 100,
-     *   y: 50,
-     *   fill: '#333',
-     *   fontSize: '24',
-     *   fontFamily: 'Arial',
-     *   text: 'All the world\'s a stage, and all the men and women merely players.',
-     *   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
-     * });
-     */
+   * Path constructor.
+   * @author Jason Follas
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} [config.fontFamily] default is Calibri
+   * @param {Number} [config.fontSize] default is 12
+   * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+   * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
+   * @param {String} config.text
+   * @param {String} config.data SVG data string
+   * @param {Function} config.getKerning a getter for kerning values for the specified characters
+   * @@shapeParams
+   * @@nodeParams
+   * @example
+   * var kerningPairs = {
+   *   'A': {
+   *     ' ': -0.05517578125,
+   *     'T': -0.07421875,
+   *     'V': -0.07421875,
+   *   },
+   *   'V': {
+   *     ',': -0.091796875,
+   *     ":": -0.037109375,
+   *     ";": -0.037109375,
+   *     "A": -0.07421875,
+   *   }
+   * }
+   * var textpath = new Konva.TextPath({
+   *   x: 100,
+   *   y: 50,
+   *   fill: '#333',
+   *   fontSize: '24',
+   *   fontFamily: 'Arial',
+   *   text: 'All the world\'s a stage, and all the men and women merely players.',
+   *   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
+   *   getKerning: function(leftChar, rightChar) {
+   *     return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
+   *   }
+   * });
+   */
   Konva.TextPath = function(config) {
@@ -50,2 +67,3 @@ this.___init(config);
       this.dataArray = [];
+      this.getKerning = config && config.getKerning;
 
@@ -148,6 +166,6 @@ // call super constructor
     /**
-         * get text width in pixels
-         * @method
-         * @memberof Konva.TextPath.prototype
-         */
+     * get text width in pixels
+     * @method
+     * @memberof Konva.TextPath.prototype
+     */
     getTextWidth: function() {
@@ -157,6 +175,6 @@ return this.textWidth;
     /**
-         * get text height in pixels
-         * @method
-         * @memberof Konva.TextPath.prototype
-         */
+     * get text height in pixels
+     * @method
+     * @memberof Konva.TextPath.prototype
+     */
     getTextHeight: function() {
@@ -166,7 +184,7 @@ return this.textHeight;
     /**
-         * set text
-         * @method
-         * @memberof Konva.TextPath.prototype
-         * @param {String} text
-         */
+     * set text
+     * @method
+     * @memberof Konva.TextPath.prototype
+     * @param {String} text
+     */
     setText: function(text) {
@@ -437,8 +455,17 @@ Konva.Text.prototype.setText.call(this, text);
 
-        // Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used.
-        // Can foresee having a rough pair table built in that the developer can override as needed.
-
         var kern = 0;
-        // placeholder for future implementation
+        if (this.getKerning) {
+          try {
+            // getKerning is a user provided getter. Make sure it never breaks our logic
+            kern =
+              this.getKerning(charArr[i - 1], charArr[i]) * this.fontSize();
+          } catch (e) {
+            kern = 0;
+          }
+        }
 
+        p0.x += kern;
+        p1.x += kern;
+        this.textWidth += kern;
+
         var midpoint = Konva.Path.getPointOnLine(
@@ -506,15 +533,15 @@ kern + width / 2.0,
   /**
-     * set font family
-     * @name setFontFamily
-     * @method
-     * @memberof Konva.TextPath.prototype
-     * @param {String} fontFamily
-     */
+   * set font family
+   * @name setFontFamily
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {String} fontFamily
+   */
 
   /**
-     * get font family
-     * @name getFontFamily
-     * @method
-     * @memberof Konva.TextPath.prototype
-     */
+   * get font family
+   * @name getFontFamily
+   * @method
+   * @memberof Konva.TextPath.prototype
+   */
 
@@ -524,15 +551,15 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'fontSize', 12);
   /**
-     * set font size
-     * @name setFontSize
-     * @method
-     * @memberof Konva.TextPath.prototype
-     * @param {int} fontSize
-     */
+   * set font size
+   * @name setFontSize
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {int} fontSize
+   */
 
   /**
-     * get font size
-     * @name getFontSize
-     * @method
-     * @memberof Konva.TextPath.prototype
-     */
+   * get font size
+   * @name getFontSize
+   * @method
+   * @memberof Konva.TextPath.prototype
+   */
 
@@ -542,27 +569,27 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'fontStyle', NORMAL);
   /**
-     * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
-     * @name setFontStyle
-     * @method
-     * @memberof Konva.TextPath.prototype
-     * @param {String} fontStyle
-     */
+   * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
+   * @name setFontStyle
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {String} fontStyle
+   */
   Konva.Factory.addGetterSetter(Konva.TextPath, 'align', 'left');
 
   /**
-      * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
-      * @name align
-      * @method
-      * @memberof Konva.Text.prototype
-      * @param {String} align
-      * @returns {String}
-      * @example
-      * // get text align
-      * var align = text.align();
-      *
-      * // center text
-      * text.align('center');
-      *
-      * // align text to right
-      * text.align('right');
-      */
+   * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
+   * @name align
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} align
+   * @returns {String}
+   * @example
+   * // get text align
+   * var align = text.align();
+   *
+   * // center text
+   * text.align('center');
+   *
+   * // align text to right
+   * text.align('right');
+   */
 
@@ -572,8 +599,8 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'letterSpacing', 0);
   /**
-      * set letter spacing property. Default value is 0.
-      * @name letterSpacing
-      * @method
-      * @memberof Konva.TextPath.prototype
-      * @param {Number} letterSpacing
-      */
+   * set letter spacing property. Default value is 0.
+   * @name letterSpacing
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {Number} letterSpacing
+   */
 
@@ -583,16 +610,16 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'textBaseline', 'middle');
   /**
-      * set textBaseline property. Default value is 'middle'.
-      * Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'
-      * @name textBaseline
-      * @method
-      * @memberof Konva.TextPath.prototype
-      * @param {Number} textBaseline
-      */
+   * set textBaseline property. Default value is 'middle'.
+   * Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'
+   * @name textBaseline
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {Number} textBaseline
+   */
 
   /**
-     * get font style
-     * @name getFontStyle
-     * @method
-     * @memberof Konva.TextPath.prototype
-     */
+   * get font style
+   * @name getFontStyle
+   * @method
+   * @memberof Konva.TextPath.prototype
+   */
 
@@ -602,15 +629,15 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'fontVariant', NORMAL);
   /**
-     * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
-     * @name setFontVariant
-     * @method
-     * @memberof Konva.TextPath.prototype
-     * @param {String} fontVariant
-     */
+   * set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+   * @name setFontVariant
+   * @method
+   * @memberof Konva.TextPath.prototype
+   * @param {String} fontVariant
+   */
 
   /**
-     * @get font variant
-     * @name getFontVariant
-     * @method
-     * @memberof Konva.TextPath.prototype
-     */
+   * @get font variant
+   * @name getFontVariant
+   * @method
+   * @memberof Konva.TextPath.prototype
+   */
 
@@ -620,7 +647,7 @@ Konva.Factory.addGetter(Konva.TextPath, 'text', EMPTY_STRING);
   /**
-     * get text
-     * @name getText
-     * @method
-     * @memberof Konva.TextPath.prototype
-     */
+   * get text
+   * @name getText
+   * @method
+   * @memberof Konva.TextPath.prototype
+   */
 
@@ -630,17 +657,17 @@ Konva.Factory.addGetterSetter(Konva.TextPath, 'textDecoration', null);
   /**
-      * get/set text decoration of a text.  Can be '' or 'underline'
-      * @name textDecoration
-      * @method
-      * @memberof Konva.Text.prototype
-      * @param {String} textDecoration
-      * @returns {String}
-      * @example
-      * // get text decoration
-      * var textDecoration = text.textDecoration();
-      *
-      * // center text
-      * text.textDecoration('underline');
-      */
+   * get/set text decoration of a text.  Can be '' or 'underline'
+   * @name textDecoration
+   * @method
+   * @memberof Konva.Text.prototype
+   * @param {String} textDecoration
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var textDecoration = text.textDecoration();
+   *
+   * // center text
+   * text.textDecoration('underline');
+   */
 
   Konva.Collection.mapMethods(Konva.TextPath);
 })();

src/Stage.js

@@ -70,16 +70,16 @@ (function() {
   /**
-     * Stage constructor.  A stage is used to contain multiple layers
-     * @constructor
-     * @memberof Konva
-     * @augments Konva.Container
-     * @param {Object} config
-     * @param {String|Element} config.container Container selector or DOM element
-     * @@nodeParams
-     * @example
-     * var stage = new Konva.Stage({
-         *   width: 500,
-         *   height: 800,
-         *   container: 'containerId' // or "#containerId" or ".containerClass"
-         * });
-     */
+   * Stage constructor.  A stage is used to contain multiple layers
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Container
+   * @param {Object} config
+   * @param {String|Element} config.container Container selector or DOM element
+   * @@nodeParams
+   * @example
+   * var stage = new Konva.Stage({
+   *   width: 500,
+   *   height: 800,
+   *   container: 'containerId' // or "#containerId" or ".containerClass"
+   * });
+   */
   Konva.Stage = function(config) {
@@ -106,7 +106,7 @@ this.___init(config);
     /**
-         * set container dom element which contains the stage wrapper div element
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {DomElement} container can pass in a dom element or id string
-         */
+     * set container dom element which contains the stage wrapper div element
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {DomElement} container can pass in a dom element or id string
+     */
     setContainer: function(container) {
@@ -141,21 +141,21 @@ if (typeof container === STRING) {
     /**
-         * draw layer scene graphs
-         * @name draw
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * draw layer scene graphs
+     * @name draw
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
 
     /**
-         * draw layer hit graphs
-         * @name drawHit
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * draw layer hit graphs
+     * @name drawHit
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
 
     /**
-         * set height
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {Number} height
-         */
+     * set height
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {Number} height
+     */
     setHeight: function(height) {
@@ -167,7 +167,7 @@ Konva.Node.prototype.setHeight.call(this, height);
     /**
-         * set width
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {Number} width
-         */
+     * set width
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {Number} width
+     */
     setWidth: function(width) {
@@ -179,6 +179,6 @@ Konva.Node.prototype.setWidth.call(this, width);
     /**
-         * clear all layers
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * clear all layers
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
     clear: function() {
@@ -202,6 +202,6 @@ var layers = this.children,
     /**
-         * destroy stage
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * destroy stage
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
     destroy: function() {
@@ -221,7 +221,7 @@ var content = this.content;
     /**
-         * get pointer position which can be a touch position or mouse position
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @returns {Object}
-         */
+     * get pointer position which can be a touch position or mouse position
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @returns {Object}
+     */
     getPointerPosition: function() {
@@ -234,7 +234,7 @@ return this.pointerPos;
     /**
-         * get stage content div element which has the
-         *  the class name "konvajs-content"
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * get stage content div element which has the
+     *  the class name "konvajs-content"
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
     getContent: function() {
@@ -244,17 +244,17 @@ return this.content;
     /**
-         * 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
-         */
+     * 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) {
@@ -300,17 +300,17 @@ config = config || {};
     /**
-         * converts stage into an image.
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {Object} config
-         * @param {Function} config.callback function executed when the composite has completed
-         * @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
-         */
+     * converts stage into an image.
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {Object} config
+     * @param {Function} config.callback function executed when the composite has completed
+     * @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
+     */
     toImage: function(config) {
@@ -327,16 +327,16 @@ var cb = config.callback;
     /**
-         * get visible intersection shape. This is the preferred
-         *  method for determining if a point intersects a shape or not
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {Object} pos
-         * @param {Number} pos.x
-         * @param {Number} pos.y
-         * @param {String} [selector]
-         * @returns {Konva.Node}
-         * @example
-         * var shape = stage.getIntersection({x: 50, y: 50});
-         * // or if you interested in shape parent:
-         * var group = stage.getIntersection({x: 50, y: 50}, 'Group');
-         */
+     * get visible intersection shape. This is the preferred
+     *  method for determining if a point intersects a shape or not
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {Object} pos
+     * @param {Number} pos.x
+     * @param {Number} pos.y
+     * @param {String} [selector]
+     * @returns {Konva.Node}
+     * @example
+     * var shape = stage.getIntersection({x: 50, y: 50});
+     * // or if you interested in shape parent:
+     * var group = stage.getIntersection({x: 50, y: 50}, 'Group');
+     */
     getIntersection: function(pos, selector) {
@@ -383,9 +383,9 @@ var layers = this.getChildren(),
     /**
-         * add layer or layers to stage
-         * @method
-         * @memberof Konva.Stage.prototype
-         * @param {...Konva.Layer} layer
-         * @example
-         * stage.add(layer1, layer2, layer3);
-         */
+     * add layer or layers to stage
+     * @method
+     * @memberof Konva.Stage.prototype
+     * @param {...Konva.Layer} layer
+     * @example
+     * stage.add(layer1, layer2, layer3);
+     */
     add: function(layer) {
@@ -418,6 +418,6 @@ if (arguments.length > 1) {
     /**
-         * returns a {@link Konva.Collection} of layers
-         * @method
-         * @memberof Konva.Stage.prototype
-         */
+     * returns a {@link Konva.Collection} of layers
+     * @method
+     * @memberof Konva.Stage.prototype
+     */
     getLayers: function() {
@@ -502,2 +502,7 @@ return this.getChildren();
           }
+          this._fire(MOUSEMOVE, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
         }
@@ -511,3 +516,3 @@
       // try to drag and drop the canvas element
-      if (evt.preventDefault) {
+      if (evt.cancelable) {
         evt.preventDefault();
@@ -530,2 +535,8 @@ }
           shape._fireAndBubble(MOUSEDOWN, { evt: evt });
+        } else {
+          this._fire(MOUSEDOWN, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
         }
@@ -539,3 +550,3 @@
       // try to drag and drop the canvas element
-      if (evt.preventDefault) {
+      if (evt.cancelable) {
         evt.preventDefault();
@@ -591,2 +602,12 @@ }
           }
+        } else {
+          this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
+          this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
+          if (fireDblClick) {
+            this._fire(DBL_CLICK, {
+              evt: evt,
+              target: this,
+              currentTarget: this
+            });
+          }
         }
@@ -607,3 +628,3 @@ // content events
       // try to drag and drop the canvas element
-      if (evt.preventDefault) {
+      if (evt.cancelable) {
         evt.preventDefault();
@@ -626,9 +647,11 @@ }
         // only call preventDefault if the shape is listening for events
-        if (
-          shape.isListening() &&
-          shape.preventDefault() &&
-          evt.preventDefault
-        ) {
+        if (shape.isListening() && shape.preventDefault() && evt.cancelable) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHSTART, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
@@ -670,9 +693,15 @@ // content event
         // only call preventDefault if the shape is listening for events
-        if (
-          shape.isListening() &&
-          shape.preventDefault() &&
-          evt.preventDefault
-        ) {
+        if (shape.isListening() && shape.preventDefault() && evt.cancelable) {
           evt.preventDefault();
         }
+      } else {
+        this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
+        this._fire(TAP, { evt: evt, target: this, currentTarget: this });
+        if (fireDblClick) {
+          this._fire(DBL_TAP, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
+        }
       }
@@ -699,9 +728,11 @@ // content events
           // only call preventDefault if the shape is listening for events
-          if (
-            shape.isListening() &&
-            shape.preventDefault() &&
-            evt.preventDefault
-          ) {
+          if (shape.isListening() && shape.preventDefault() && evt.cancelable) {
             evt.preventDefault();
           }
+        } else {
+          this._fire(TOUCHMOVE, {
+            evt: evt,
+            target: this,
+            currentTarget: this
+          });
         }
@@ -711,3 +742,7 @@ this._fire(CONTENT_TOUCHMOVE, { evt: evt });
       if (dd) {
-        if (Konva.isDragging() && Konva.DD.node.preventDefault()) {
+        if (
+          Konva.isDragging() &&
+          Konva.DD.node.preventDefault() &&
+          evt.cancelable
+        ) {
           evt.preventDefault();
@@ -723,2 +758,8 @@ }
         shape._fireAndBubble(WHEEL, { evt: evt });
+      } else {
+        this._fire(WHEEL, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
       }
@@ -817,15 +858,15 @@ this._fire(CONTENT_WHEEL, { evt: evt });
   /**
-     * get container DOM element
-     * @name container
-     * @method
-     * @memberof Konva.Stage.prototype
-     * @returns {DomElement} container
-     * @example
-     * // get container
-     * var container = stage.container();
-     * // set container
-     * var container = document.createElement('div');
-     * body.appendChild(container);
-     * stage.container(container);
-     */
+   * get container DOM element
+   * @name container
+   * @method
+   * @memberof Konva.Stage.prototype
+   * @returns {DomElement} container
+   * @example
+   * // get container
+   * var container = stage.container();
+   * // set container
+   * var container = document.createElement('div');
+   * body.appendChild(container);
+   * stage.container(container);
+   */
 })();

src/Util.js

@@ -5,7 +5,7 @@ /*eslint-disable  eqeqeq, no-cond-assign, no-empty*/
   /**
-     * Collection constructor.  Collection extends
-     *  Array.  This class is used in conjunction with {@link Konva.Container#get}
-     * @constructor
-     * @memberof Konva
-     */
+   * Collection constructor.  Collection extends
+   *  Array.  This class is used in conjunction with {@link Konva.Container#get}
+   * @constructor
+   * @memberof Konva
+   */
   Konva.Collection = function() {
@@ -24,13 +24,13 @@ var args = [].slice.call(arguments),
   /**
-     * iterate through node array and run a function for each node.
-     *  The node and index is passed into the function
-     * @method
-     * @memberof Konva.Collection.prototype
-     * @param {Function} func
-     * @example
-     * // get all nodes with name foo inside layer, and set x to 10 for each
-     * layer.get('.foo').each(function(shape, n) {
-     *   shape.setX(10);
-     * });
-     */
+   * iterate through node array and run a function for each node.
+   *  The node and index is passed into the function
+   * @method
+   * @memberof Konva.Collection.prototype
+   * @param {Function} func
+   * @example
+   * // get all nodes with name foo inside layer, and set x to 10 for each
+   * layer.get('.foo').each(function(shape, n) {
+   *   shape.setX(10);
+   * });
+   */
   Konva.Collection.prototype.each = function(func) {
@@ -42,6 +42,6 @@ for (var n = 0; n < this.length; n++) {
   /**
-     * convert collection into an array
-     * @method
-     * @memberof Konva.Collection.prototype
-     */
+   * convert collection into an array
+   * @method
+   * @memberof Konva.Collection.prototype
+   */
   Konva.Collection.prototype.toArray = function() {
@@ -58,7 +58,7 @@ var arr = [],
   /**
-     * convert array into a collection
-     * @method
-     * @memberof Konva.Collection
-     * @param {Array} arr
-     */
+   * convert array into a collection
+   * @method
+   * @memberof Konva.Collection
+   * @param {Array} arr
+   */
   Konva.Collection.toCollection = function(arr) {
@@ -114,7 +114,7 @@ var collection = new Konva.Collection(),
   /**
-     * Transform constructor
-     * @constructor
-     * @param {Array} [m] Optional six-element matrix
-     * @memberof Konva
-     */
+   * Transform constructor
+   * @constructor
+   * @param {Array} [m] Optional six-element matrix
+   * @memberof Konva
+   */
   Konva.Transform = function(m) {
@@ -126,7 +126,7 @@ this.m = (m && m.slice()) || [1, 0, 0, 1, 0, 0];
     /**
-         * Copy Konva.Transform object
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @returns {Konva.Transform}
-         */
+     * Copy Konva.Transform object
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @returns {Konva.Transform}
+     */
     copy: function() {
@@ -136,8 +136,8 @@ return new Konva.Transform(this.m);
     /**
-         * Transform point
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Object} point 2D point(x, y)
-         * @returns {Object} 2D point(x, y)
-         */
+     * Transform point
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Object} point 2D point(x, y)
+     * @returns {Object} 2D point(x, y)
+     */
     point: function(point) {
@@ -151,9 +151,9 @@ var m = this.m;
     /**
-         * Apply translation
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Number} x
-         * @param {Number} y
-         * @returns {Konva.Transform}
-         */
+     * Apply translation
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Number} x
+     * @param {Number} y
+     * @returns {Konva.Transform}
+     */
     translate: function(x, y) {
@@ -165,9 +165,9 @@ this.m[4] += this.m[0] * x + this.m[2] * y;
     /**
-         * Apply scale
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Number} sx
-         * @param {Number} sy
-         * @returns {Konva.Transform}
-         */
+     * Apply scale
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Number} sx
+     * @param {Number} sy
+     * @returns {Konva.Transform}
+     */
     scale: function(sx, sy) {
@@ -181,8 +181,8 @@ this.m[0] *= sx;
     /**
-         * Apply rotation
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Number} rad  Angle in radians
-         * @returns {Konva.Transform}
-         */
+     * Apply rotation
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Number} rad  Angle in radians
+     * @returns {Konva.Transform}
+     */
     rotate: function(rad) {
@@ -202,7 +202,7 @@ var c = Math.cos(rad);
     /**
-         * Returns the translation
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @returns {Object} 2D point(x, y)
-         */
+     * Returns the translation
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @returns {Object} 2D point(x, y)
+     */
     getTranslation: function() {
@@ -215,9 +215,9 @@ return {
     /**
-         * Apply skew
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Number} sx
-         * @param {Number} sy
-         * @returns {Konva.Transform}
-         */
+     * Apply skew
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Number} sx
+     * @param {Number} sy
+     * @returns {Konva.Transform}
+     */
     skew: function(sx, sy) {
@@ -235,8 +235,8 @@ var m11 = this.m[0] + this.m[2] * sy;
     /**
-         * Transform multiplication
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @param {Konva.Transform} matrix
-         * @returns {Konva.Transform}
-         */
+     * Transform multiplication
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @param {Konva.Transform} matrix
+     * @returns {Konva.Transform}
+     */
     multiply: function(matrix) {
@@ -261,7 +261,7 @@ var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
     /**
-         * Invert the matrix
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @returns {Konva.Transform}
-         */
+     * Invert the matrix
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @returns {Konva.Transform}
+     */
     invert: function() {
@@ -284,6 +284,6 @@ var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
     /**
-         * return matrix
-         * @method
-         * @memberof Konva.Transform.prototype
-         */
+     * return matrix
+     * @method
+     * @memberof Konva.Transform.prototype
+     */
     getMatrix: function() {
@@ -293,8 +293,8 @@ return this.m;
     /**
-         * set to absolute position via translation
-         * @method
-         * @memberof Konva.Transform.prototype
-         * @returns {Konva.Transform}
-         * @author ericdrowell
-         */
+     * set to absolute position via translation
+     * @method
+     * @memberof Konva.Transform.prototype
+     * @returns {Konva.Transform}
+     * @author ericdrowell
+     */
     setAbsolutePosition: function(x, y) {
@@ -481,9 +481,9 @@ var m0 = this.m[0],
   /**
-     * @namespace Util
-     * @memberof Konva
-     */
+   * @namespace Util
+   * @memberof Konva
+   */
   Konva.Util = {
     /*
-         * cherry-picked utilities from underscore.js
-         */
+    * cherry-picked utilities from underscore.js
+    */
     _isElement: function(obj) {
@@ -507,55 +507,2 @@ return !!(obj && obj.nodeType == 1);
     },
-    // Returns a function, that, when invoked, will only be triggered at most once
-    // during a given window of time. Normally, the throttled function will run
-    // as much as it can, without ever going more than once per `wait` duration;
-    // but if you'd like to disable the execution on the leading edge, pass
-    // `{leading: false}`. To disable execution on the trailing edge, ditto.
-    _throttle: function(func, wait, opts) {
-      var context, args, result;
-      var timeout = null;
-      var previous = 0;
-      var options = opts || {};
-      var later = function() {
-        previous = options.leading === false ? 0 : new Date().getTime();
-        timeout = null;
-        result = func.apply(context, args);
-        context = args = null;
-      };
-      return function() {
-        var now = new Date().getTime();
-        if (!previous && options.leading === false) {
-          previous = now;
-        }
-        var remaining = wait - (now - previous);
-        context = this;
-        args = arguments;
-        if (remaining <= 0) {
-          clearTimeout(timeout);
-          timeout = null;
-          previous = now;
-          result = func.apply(context, args);
-          context = args = null;
-        } else if (!timeout && options.trailing !== false) {
-          timeout = setTimeout(later, remaining);
-        }
-        return result;
-      };
-    },
-    /*
-         * other utils
-         */
-    _hasMethods: function(obj) {
-      var names = [],
-        key;
-
-      for (key in obj) {
-        if (!obj.hasOwnProperty(key)) {
-          continue;
-        }
-        if (this._isFunction(obj[key])) {
-          names.push(key);
-        }
-      }
-      return names.length > 0;
-    },
     isValidSelector: function(selector) {
@@ -611,4 +558,4 @@ if (typeof selector !== 'string') {
     /*
-         * arg can be an image object or image data
-         */
+    * arg can be an image object or image data
+    */
     _getImage: function(arg, callback) {
@@ -665,6 +612,6 @@ var imageObj, canvas;
     /**
-         * return random hex color
-         * @method
-         * @memberof Konva.Util.prototype
-         */
+     * return random hex color
+     * @method
+     * @memberof Konva.Util.prototype
+     */
     getRandomColor: function() {
@@ -678,6 +625,6 @@ var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
     /**
-         * return value with default fallback
-         * @method
-         * @memberof Konva.Util.prototype
-         */
+     * return value with default fallback
+     * @method
+     * @memberof Konva.Util.prototype
+     */
     get: function(val, def) {
@@ -691,12 +638,12 @@ if (val === undefined) {
     /**
-         * get RGB components of a color
-         * @method
-         * @memberof Konva.Util.prototype
-         * @param {String} color
-         * @example
-         * // each of the following examples return {r:0, g:0, b:255}
-         * var rgb = Konva.Util.getRGB('blue');
-         * var rgb = Konva.Util.getRGB('#0000ff');
-         * var rgb = Konva.Util.getRGB('rgb(0,0,255)');
-         */
+     * get RGB components of a color
+     * @method
+     * @memberof Konva.Util.prototype
+     * @param {String} color
+     * @example
+     * // each of the following examples return {r:0, g:0, b:255}
+     * var rgb = Konva.Util.getRGB('blue');
+     * var rgb = Konva.Util.getRGB('#0000ff');
+     * var rgb = Konva.Util.getRGB('rgb(0,0,255)');
+     */
     getRGB: function(color) {
@@ -817,2 +764,15 @@ var rgb;
     },
+    /**
+     * check intersection of two client rectangles
+     * @method
+     * @memberof Konva.Util.prototype
+     */
+    haveIntersection: function(r1, r2) {
+      return !(
+        r2.x > r1.x + r1.width ||
+        r2.x + r2.width < r1.x ||
+        r2.y > r1.y + r1.height ||
+        r2.y + r2.height < r1.y
+      );
+    },
     cloneObject: function(obj) {
@@ -875,8 +835,8 @@ var retObj = {};
     /**
-         * adds methods to a constructor prototype
-         * @method
-         * @memberof Konva.Util.prototype
-         * @param {Function} constructor
-         * @param {Object} methods
-         */
+     * adds methods to a constructor prototype
+     * @method
+     * @memberof Konva.Util.prototype
+     * @param {Function} constructor
+     * @param {Object} methods
+     */
     addMethods: function(constructor, methods) {
@@ -935,2 +895,5 @@ var key;
     },
+    _inRange: function(val, left, right) {
+      return left <= val && val < right;
+    },
     _getProjectionToSegment: function(x1, y1, x2, y2, x3, y3) {
@@ -937,0 +900,0 @@ var x, y, dist;

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

1264273

increased by4.57%

Number of package files

61

increased by5.17%

Lines of code

35851

increased by5.73%

Worsened metrics

Number of lines in readme file

166

decreased by-1.78%

No dependency changes