Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

konva

Package Overview
Dependencies
Maintainers
1
Versions
214
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

konva - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

8

CHANGELOG.md

@@ -8,2 +8,10 @@ # Change Log

## [2.1.4][2018-06-15]
## Fixed
* Fixed `Konva.Text` justify drawing for a text with decoration
* Added methods `data()`,`setData()` and `getData()` methods to `Konva.TextPath`
* Correct cache reset for `Konva.Transformer`
## [2.1.3][2018-05-17]

@@ -10,0 +18,0 @@

21

konva.d.ts

@@ -132,3 +132,13 @@ declare namespace Konva {

interface ToCanvasConfig extends SizeConfig {
callback: Function;
}
interface ToDataURLConfig extends SizeConfig {
mimeType?: string;
quality?: number;
pixelRatio?: number;
}
interface ToImageConfig extends SizeConfig {
callback: Function;

@@ -206,3 +216,3 @@ mimeType?: string;

getClientRect(): SizeConfig;
getContext(): Context;
getContent(): HTMLDivElement;
getDepth(): number;

@@ -304,4 +314,5 @@ getHeight(): number;

to(params: any): void;
toCanvas(config: ToCanvasConfig): HTMLCanvasElement;
toDataURL(config: ToDataURLConfig): string;
toImage(config: ToDataURLConfig): HTMLImageElement;
toImage(config: ToImageConfig): HTMLImageElement;
toJSON(): string;

@@ -399,3 +410,2 @@ toObject(): any;

hitFunc?: (con: Context) => void;
drawFunc?: (con: Context) => void;
shadowColor?: string;

@@ -408,2 +418,3 @@ shadowBlur?: number;

shadowEnabled?: boolean;
shadowForStrokeEnabled?: boolean;
dash?: number[];

@@ -491,2 +502,4 @@ dashEnabled?: boolean;

lineJoin(lineJoin: string): this;
perfectDrawEnabled(): boolean;
perfectDrawEnabled(perfectDrawEnabled: boolean): this;
sceneFunc(): Function;

@@ -498,2 +511,4 @@ sceneFunc(func: (con: Context) => {}): this;

shadowEnabled(shadowEnabled: boolean): this;
shadowForStrokeEnabled(): boolean;
shadowForStrokeEnabled(shadowForStrokeEnabled: boolean): this;
shadowOffset(): Vector2d;

@@ -500,0 +515,0 @@ shadowOffset(shadowOffset: Vector2d): this;

10

package.json
{
"name": "konva",
"version": "2.1.3",
"version": "2.1.4",
"author": "Anton Lavrenov",

@@ -18,4 +18,4 @@ "files": [

"build": "gulp build",
"full-build": "gulp lint test build",
"test": "gulp test",
"full-build": "gulp lint && npm t && gulp build",
"test": "mocha-headless-chrome -f ./test/runner.html -a disable-web-security",
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"

@@ -62,3 +62,5 @@ },

"license": "MIT",
"dependencies": {}
"dependencies": {
"mocha-headless-chrome": "^2.0.0"
}
}

2

README.md

@@ -26,3 +26,3 @@ <p align="center">

```html
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.3/konva.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.1.4/konva.min.js"></script>
<div id="container"></div>

@@ -29,0 +29,0 @@ <script>

142

src/Animation.js

@@ -35,24 +35,24 @@ (function(Konva) {

/**
* Animation constructor. A stage is used to contain multiple layers and handle
* @constructor
* @memberof Konva
* @param {Function} func function executed on each animation frame. The function is passed a frame object, which contains
* timeDiff, lastTime, time, and frameRate properties. The timeDiff property is the number of milliseconds that have passed
* since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started
* to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started
* to the current animation frame. The frameRate property is the current frame rate in frames / second. Return false from function,
* if you don't need to redraw layer/layers on some frames.
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.
* Not specifying a node will result in no redraw.
* @example
* // move a node to the right at 50 pixels / second
* var velocity = 50;
*
* var anim = new Konva.Animation(function(frame) {
* var dist = velocity * (frame.timeDiff / 1000);
* node.move(dist, 0);
* }, layer);
*
* anim.start();
*/
* Animation constructor. A stage is used to contain multiple layers and handle
* @constructor
* @memberof Konva
* @param {Function} func function executed on each animation frame. The function is passed a frame object, which contains
* timeDiff, lastTime, time, and frameRate properties. The timeDiff property is the number of milliseconds that have passed
* since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started
* to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started
* to the current animation frame. The frameRate property is the current frame rate in frames / second. Return false from function,
* if you don't need to redraw layer/layers on some frames.
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.
* Not specifying a node will result in no redraw.
* @example
* // move a node to the right at 50 pixels / second
* var velocity = 50;
*
* var anim = new Konva.Animation(function(frame) {
* var dist = velocity * (frame.timeDiff / 1000);
* node.move(dist, 0);
* }, layer);
*
* anim.start();
*/
Konva.Animation = function(func, layers) {

@@ -74,8 +74,8 @@ var Anim = Konva.Animation;

/**
* set layers to be redrawn on each animation frame
* @method
* @memberof Konva.Animation.prototype
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn.&nbsp; Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.
* @return {Konva.Animation} this
*/
* set layers to be redrawn on each animation frame
* @method
* @memberof Konva.Animation.prototype
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn.&nbsp; Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.
* @return {Konva.Animation} this
*/
setLayers: function(layers) {

@@ -100,7 +100,7 @@ var lays = [];

/**
* get layers
* @method
* @memberof Konva.Animation.prototype
* @return {Array} Array of Konva.Layer
*/
* get layers
* @method
* @memberof Konva.Animation.prototype
* @return {Array} Array of Konva.Layer
*/
getLayers: function() {

@@ -110,10 +110,12 @@ return this.layers;

/**
* add layer. Returns true if the layer was added, and false if it was not
* @method
* @memberof Konva.Animation.prototype
* @param {Konva.Layer} layer to add
* @return {Bool} true if layer is added to animation, otherwise false
*/
* add layer. Returns true if the layer was added, and false if it was not
* @method
* @memberof Konva.Animation.prototype
* @param {Konva.Layer} layer to add
* @return {Bool} true if layer is added to animation, otherwise false
*/
addLayer: function(layer) {
var layers = this.layers, len = layers.length, n;
var layers = this.layers,
len = layers.length,
n;

@@ -131,7 +133,7 @@ // don't add the layer if it already exists

/**
* determine if animation is running or not. returns true or false
* @method
* @memberof Konva.Animation.prototype
* @return {Bool} is animation running?
*/
* determine if animation is running or not. returns true or false
* @method
* @memberof Konva.Animation.prototype
* @return {Bool} is animation running?
*/
isRunning: function() {

@@ -151,7 +153,7 @@ var a = Konva.Animation,

/**
* start animation
* @method
* @memberof Konva.Animation.prototype
* @return {Konva.Animation} this
*/
* start animation
* @method
* @memberof Konva.Animation.prototype
* @return {Konva.Animation} this
*/
start: function() {

@@ -166,7 +168,7 @@ var Anim = Konva.Animation;

/**
* stop animation
* @method
* @memberof Konva.Animation.prototype
* @return {Konva.Animation} this
*/
* stop animation
* @method
* @memberof Konva.Animation.prototype
* @return {Konva.Animation} this
*/
stop: function() {

@@ -192,3 +194,6 @@ Konva.Animation._removeAnimation(this);

Konva.Animation._removeAnimation = function(anim) {
var id = anim.id, animations = this.animations, len = animations.length, n;
var id = anim.id,
animations = this.animations,
len = animations.length,
n;

@@ -278,10 +283,11 @@ for (n = 0; n < len; n++) {

/**
* batch draw. this function will not do immediate draw
* but it will schedule drawing to next tick (requestAnimFrame)
* @method
* @return {Konva.Layer} this
* @memberof Konva.Base.prototype
*/
* batch draw. this function will not do immediate draw
* but it will schedule drawing to next tick (requestAnimFrame)
* @method
* @return {Konva.Layer} this
* @memberof Konva.Base.prototype
*/
Konva.BaseLayer.prototype.batchDraw = function() {
var that = this, Anim = Konva.Animation;
var that = this,
Anim = Konva.Animation;

@@ -302,7 +308,7 @@ if (!this.batchAnim) {

/**
* batch draw
* @method
* @return {Konva.Stage} this
* @memberof Konva.Stage.prototype
*/
* batch draw
* @method
* @return {Konva.Stage} this
* @memberof Konva.Stage.prototype
*/
Konva.Stage.prototype.batchDraw = function() {

@@ -309,0 +315,0 @@ this.getChildren().each(function(layer) {

138

src/Canvas.js

@@ -27,17 +27,17 @@ (function() {

/**
* Canvas Renderer constructor
* @constructor
* @abstract
* @memberof Konva
* @param {Object} config
* @param {Number} config.width
* @param {Number} config.height
* @param {Number} config.pixelRatio KonvaJS automatically handles pixel ratio adjustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specified, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
*/
* Canvas Renderer constructor
* @constructor
* @abstract
* @memberof Konva
* @param {Object} config
* @param {Number} config.width
* @param {Number} config.height
* @param {Number} config.pixelRatio KonvaJS automatically handles pixel ratio adjustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specified, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
*/
Konva.Canvas = function(config) {

@@ -67,7 +67,7 @@ this.init(config);

/**
* get canvas context
* @method
* @memberof Konva.Canvas.prototype
* @returns {CanvasContext} context
*/
* get canvas context
* @method
* @memberof Konva.Canvas.prototype
* @returns {CanvasContext} context
*/
getContext: function() {

@@ -77,7 +77,7 @@ return this.context;

/**
* get pixel ratio
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} pixel ratio
*/
* get pixel ratio
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} pixel ratio
*/
getPixelRatio: function() {

@@ -87,13 +87,13 @@ return this.pixelRatio;

/**
* get pixel ratio
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specificed, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
*/
* get pixel ratio
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specificed, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
*/
setPixelRatio: function(pixelRatio) {

@@ -108,7 +108,7 @@ var previousRatio = this.pixelRatio;

/**
* set width
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} width
*/
* set width
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} width
*/
setWidth: function(width) {

@@ -124,7 +124,7 @@ // take into account pixel ratio

/**
* set height
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} height
*/
* set height
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} height
*/
setHeight: function(height) {

@@ -139,7 +139,7 @@ // take into account pixel ratio

/**
* get width
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} width
*/
* get width
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} width
*/
getWidth: function() {

@@ -149,7 +149,7 @@ return this.width;

/**
* get height
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} height
*/
* get height
* @method
* @memberof Konva.Canvas.prototype
* @returns {Number} height
*/
getHeight: function() {

@@ -159,8 +159,8 @@ return this.height;

/**
* set size
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} width
* @param {Number} height
*/
* set size
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} width
* @param {Number} height
*/
setSize: function(width, height) {

@@ -171,9 +171,9 @@ this.setWidth(width);

/**
* to data url
* @method
* @memberof Konva.Canvas.prototype
* @param {String} mimeType
* @param {Number} quality between 0 and 1 for jpg mime types
* @returns {String} data url string
*/
* to data url
* @method
* @memberof Konva.Canvas.prototype
* @param {String} mimeType
* @param {Number} quality between 0 and 1 for jpg mime types
* @returns {String} data url string
*/
toDataURL: function(mimeType, quality) {

@@ -180,0 +180,0 @@ try {

11

src/Container.js

@@ -499,4 +499,4 @@ (function() {

var selfRect = {
x: 0,
y: 0,
x: Infinity,
y: Infinity,
width: 0,

@@ -552,2 +552,9 @@ height: 0

};
} else {
selfRect = {
x: 0,
y: 0,
width: 0,
height: 0
};
}

@@ -554,0 +561,0 @@

1

src/Context.js

@@ -665,3 +665,2 @@ (function() {

}),
// TODO: get this info from transform??
scale = shape.getAbsoluteScale(),

@@ -668,0 +667,0 @@ ratio = this.canvas.getPixelRatio(),

39

src/FastLayer.js
(function() {
'use strict';
/**
* FastLayer constructor. Layers are tied to their own canvas element and are used
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
* It renders about 2x faster than normal layers.
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @param {Boolean} [config.visible]
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @@containerParams
* @example
* var layer = new Konva.FastLayer();
*/
* FastLayer constructor. Layers are tied to their own canvas element and are used
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
* It renders about 2x faster than normal layers.
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @param {Boolean} [config.visible]
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @@containerParams
* @example
* var layer = new Konva.FastLayer();
*/
Konva.FastLayer = function(config) {

@@ -49,3 +49,4 @@ this.____init(config);

drawScene: function(can) {
var layer = this.getLayer(), canvas = can || (layer && layer.getCanvas());
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());

@@ -52,0 +53,0 @@ if (this.getClearBeforeDraw()) {

34

src/filters/Blur.js

@@ -820,12 +820,12 @@ /*

/**
* Blur Filter
* @function
* @name Blur
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Blur]);
* node.blurRadius(10);
*/
* Blur Filter
* @function
* @name Blur
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Blur]);
* node.blurRadius(10);
*/
Konva.Filters.Blur = function Blur(imageData) {

@@ -848,9 +848,9 @@ var radius = Math.round(this.blurRadius());

/**
* get/set blur radius. Use with {@link Konva.Filters.Blur} filter
* @name blurRadius
* @method
* @memberof Konva.Node.prototype
* @param {Integer} radius
* @returns {Integer}
*/
* get/set blur radius. Use with {@link Konva.Filters.Blur} filter
* @name blurRadius
* @method
* @memberof Konva.Node.prototype
* @param {Integer} radius
* @returns {Integer}
*/
})(Konva);

34

src/filters/Brighten.js
(function(Konva) {
'use strict';
/**
* Brighten Filter.
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Brighten]);
* node.brightness(0.8);
*/
* Brighten Filter.
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Brighten]);
* node.brightness(0.8);
*/
Konva.Filters.Brighten = function(imageData) {

@@ -37,10 +37,10 @@ var brightness = this.brightness() * 255,

/**
* get/set filter brightness. The brightness is a number between -1 and 1.&nbsp; Positive values
* brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter.
* @name brightness
* @method
* @memberof Konva.Node.prototype
* @param {Number} brightness value between -1 and 1
* @returns {Number}
*/
* get/set filter brightness. The brightness is a number between -1 and 1.&nbsp; Positive values
* brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter.
* @name brightness
* @method
* @memberof Konva.Node.prototype
* @param {Number} brightness value between -1 and 1
* @returns {Number}
*/
})(Konva);

18

src/filters/Contrast.js

@@ -1,2 +0,2 @@

(function (Konva) {
(function(Konva) {
'use strict';

@@ -14,3 +14,3 @@ /**

Konva.Filters.Contrast = function (imageData) {
Konva.Filters.Contrast = function(imageData) {
var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);

@@ -51,5 +51,5 @@

red = (red < 0 ? 0 : (red > 255 ? 255 : red));
green = (green < 0 ? 0 : (green > 255 ? 255 : green));
blue = (blue < 0 ? 0 : (blue > 255 ? 255 : blue));
red = red < 0 ? 0 : red > 255 ? 255 : red;
green = green < 0 ? 0 : green > 255 ? 255 : green;
blue = blue < 0 ? 0 : blue > 255 ? 255 : blue;

@@ -71,3 +71,9 @@ data[i] = red;

*/
Konva.Factory.addGetterSetter(Konva.Node, 'contrast', 0, null, Konva.Factory.afterSetFilter);
Konva.Factory.addGetterSetter(
Konva.Node,
'contrast',
0,
null,
Konva.Factory.afterSetFilter
);
})(Konva);

88

src/filters/Emboss.js
(function() {
'use strict';
/**
* Emboss Filter.
* Pixastic Lib - Emboss filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Emboss]);
* node.embossStrength(0.8);
* node.embossWhiteLevel(0.3);
* node.embossDirection('right');
* node.embossBlend(true);
*/
* Emboss Filter.
* Pixastic Lib - Emboss filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
* @function
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Emboss]);
* node.embossStrength(0.8);
* node.embossWhiteLevel(0.3);
* node.embossDirection('right');
* node.embossBlend(true);
*/
Konva.Filters.Emboss = function(imageData) {

@@ -149,9 +149,9 @@ // pixastic strength is between 0 and 10. I want it between 0 and 1

/**
* get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.
* @name embossStrength
* @method
* @memberof Konva.Node.prototype
* @param {Number} level between 0 and 1. Default is 0.5
* @returns {Number}
*/
* get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.
* @name embossStrength
* @method
* @memberof Konva.Node.prototype
* @param {Number} level between 0 and 1. Default is 0.5
* @returns {Number}
*/

@@ -166,9 +166,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.
* @name embossWhiteLevel
* @method
* @memberof Konva.Node.prototype
* @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5
* @returns {Number}
*/
* get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.
* @name embossWhiteLevel
* @method
* @memberof Konva.Node.prototype
* @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5
* @returns {Number}
*/

@@ -183,10 +183,10 @@ Konva.Factory.addGetterSetter(

/**
* get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.
* @name embossDirection
* @method
* @memberof Konva.Node.prototype
* @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
* The default is top-left
* @returns {String}
*/
* get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.
* @name embossDirection
* @method
* @memberof Konva.Node.prototype
* @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
* The default is top-left
* @returns {String}
*/

@@ -201,9 +201,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.
* @name embossBlend
* @method
* @memberof Konva.Node.prototype
* @param {Boolean} embossBlend
* @returns {Boolean}
*/
* get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.
* @name embossBlend
* @method
* @memberof Konva.Node.prototype
* @param {Boolean} embossBlend
* @returns {Boolean}
*/
})();

70

src/filters/HSV.js
(function() {
'use strict';
/**
* HSV Filter. Adjusts the hue, saturation and value
* @function
* @name HSV
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* image.filters([Konva.Filters.HSV]);
* image.value(200);
*/
* HSV Filter. Adjusts the hue, saturation and value
* @function
* @name HSV
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* image.filters([Konva.Filters.HSV]);
* image.value(200);
*/

@@ -39,3 +39,3 @@ Konva.Filters.HSV = function(imageData) {

var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.330 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;

@@ -45,5 +45,5 @@ var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,

gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
var br = 0.299 * v - 0.300 * vsu + 1.250 * vsw,
bg = 0.587 * v - 0.586 * vsu - 1.050 * vsw,
bb = 0.114 * v + 0.886 * vsu - 0.200 * vsw;
var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;

@@ -73,9 +73,9 @@ var r, g, b, a;

/**
* get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
* @name hue
* @method
* @memberof Konva.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/
* get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
* @name hue
* @method
* @memberof Konva.Node.prototype
* @param {Number} hue value between 0 and 359
* @returns {Number}
*/

@@ -90,9 +90,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
* @name saturation
* @method
* @memberof Konva.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/
* get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
* @name saturation
* @method
* @memberof Konva.Node.prototype
* @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
* @returns {Number}
*/

@@ -107,9 +107,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set hsv value. Use with {@link Konva.Filters.HSV} filter.
* @name value
* @method
* @memberof Konva.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
* get/set hsv value. Use with {@link Konva.Filters.HSV} filter.
* @name value
* @method
* @memberof Konva.Node.prototype
* @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
* @returns {Number}
*/
})();

28

src/filters/Kaleidoscope.js

@@ -266,9 +266,9 @@ (function() {

/**
* get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter.
* @name kaleidoscopePower
* @method
* @memberof Konva.Node.prototype
* @param {Integer} power of kaleidoscope
* @returns {Integer}
*/
* get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter.
* @name kaleidoscopePower
* @method
* @memberof Konva.Node.prototype
* @param {Integer} power of kaleidoscope
* @returns {Integer}
*/
Konva.Factory.addGetterSetter(

@@ -283,9 +283,9 @@ Konva.Node,

/**
* get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter.
* @name kaleidoscopeAngle
* @method
* @memberof Konva.Node.prototype
* @param {Integer} degrees
* @returns {Integer}
*/
* get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter.
* @name kaleidoscopeAngle
* @method
* @memberof Konva.Node.prototype
* @param {Integer} degrees
* @returns {Integer}
*/
Konva.Factory.addGetterSetter(

@@ -292,0 +292,0 @@ Konva.Node,

20

src/filters/Mask.js

@@ -181,12 +181,12 @@ /*eslint-disable max-depth */

/**
* Mask Filter
* @function
* @name Mask
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Mask]);
* node.threshold(200);
*/
* Mask Filter
* @function
* @name Mask
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Mask]);
* node.threshold(200);
*/
Konva.Filters.Mask = function(imageData) {

@@ -193,0 +193,0 @@ // Detect pixels close to the background color

40

src/filters/Posterize.js
(function() {
'use strict';
/**
* Posterize Filter. Adjusts the channels so that there are no more
* than n different values for that channel. This is also applied
* to the alpha channel.
* @function
* @name Posterize
* @author ippo615
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Posterize]);
* node.levels(0.8); // between 0 and 1
*/
* Posterize Filter. Adjusts the channels so that there are no more
* than n different values for that channel. This is also applied
* to the alpha channel.
* @function
* @name Posterize
* @author ippo615
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Posterize]);
* node.levels(0.8); // between 0 and 1
*/

@@ -40,9 +40,9 @@ Konva.Filters.Posterize = function(imageData) {

/**
* get/set levels. Must be a number between 0 and 1. Use with {@link Konva.Filters.Posterize} filter.
* @name levels
* @method
* @memberof Konva.Node.prototype
* @param {Number} level between 0 and 1
* @returns {Number}
*/
* get/set levels. Must be a number between 0 and 1. Use with {@link Konva.Filters.Posterize} filter.
* @name levels
* @method
* @memberof Konva.Node.prototype
* @param {Number} level between 0 and 1
* @returns {Number}
*/
})();

66

src/filters/RGB.js
(function() {
'use strict';
/**
* RGB Filter
* @function
* @name RGB
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.RGB]);
* node.blue(120);
* node.green(200);
*/
* RGB Filter
* @function
* @name RGB
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.RGB]);
* node.blue(120);
* node.green(200);
*/
Konva.Filters.RGB = function(imageData) {

@@ -46,9 +46,9 @@ var data = imageData.data,

/**
* get/set filter red value. Use with {@link Konva.Filters.RGB} filter.
* @name red
* @method
* @memberof Konva.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/
* get/set filter red value. Use with {@link Konva.Filters.RGB} filter.
* @name red
* @method
* @memberof Konva.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/

@@ -66,9 +66,9 @@ Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) {

/**
* get/set filter green value. Use with {@link Konva.Filters.RGB} filter.
* @name green
* @method
* @memberof Konva.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/
* get/set filter green value. Use with {@link Konva.Filters.RGB} filter.
* @name green
* @method
* @memberof Konva.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/

@@ -83,9 +83,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set filter blue value. Use with {@link Konva.Filters.RGB} filter.
* @name blue
* @method
* @memberof Konva.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/
* get/set filter blue value. Use with {@link Konva.Filters.RGB} filter.
* @name blue
* @method
* @memberof Konva.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/
})();

82

src/filters/RGBA.js
(function() {
'use strict';
/**
* RGBA Filter
* @function
* @name RGBA
* @memberof Konva.Filters
* @param {Object} imageData
* @author codefo
* @example
* node.cache();
* node.filters([Konva.Filters.RGBA]);
* node.blue(120);
* node.green(200);
* node.alpha(0.3);
*/
* RGBA Filter
* @function
* @name RGBA
* @memberof Konva.Filters
* @param {Object} imageData
* @author codefo
* @example
* node.cache();
* node.filters([Konva.Filters.RGBA]);
* node.blue(120);
* node.green(200);
* node.alpha(0.3);
*/
Konva.Filters.RGBA = function(imageData) {

@@ -47,9 +47,9 @@ var data = imageData.data,

/**
* get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.
* @name red
* @method
* @memberof Konva.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/
* get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.
* @name red
* @method
* @memberof Konva.Node.prototype
* @param {Integer} red value between 0 and 255
* @returns {Integer}
*/

@@ -67,9 +67,9 @@ Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) {

/**
* get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.
* @name green
* @method
* @memberof Konva.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/
* get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.
* @name green
* @method
* @memberof Konva.Node.prototype
* @param {Integer} green value between 0 and 255
* @returns {Integer}
*/

@@ -84,9 +84,9 @@ Konva.Factory.addGetterSetter(

/**
* get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.
* @name blue
* @method
* @memberof Konva.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/
* get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.
* @name blue
* @method
* @memberof Konva.Node.prototype
* @param {Integer} blue value between 0 and 255
* @returns {Integer}
*/

@@ -104,9 +104,9 @@ Konva.Factory.addGetterSetter(Konva.Node, 'alpha', 1, function(val) {

/**
* get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.
* @name alpha
* @method
* @memberof Konva.Node.prototype
* @param {Float} alpha value between 0 and 1
* @returns {Float}
*/
* get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.
* @name alpha
* @method
* @memberof Konva.Node.prototype
* @param {Float} alpha value between 0 and 1
* @returns {Float}
*/
})();

26

src/filters/Sepia.js
(function() {
'use strict';
/**
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function
* @name Sepia
* @memberof Konva.Filters
* @param {Object} imageData
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
* @example
* node.cache();
* node.filters([Konva.Filters.Sepia]);
*/
* Sepia Filter
* Based on: Pixastic Lib - Sepia filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* @function
* @name Sepia
* @memberof Konva.Filters
* @param {Object} imageData
* @author Jacob Seidelin <jseidelin@nihilogic.dk>
* @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]
* @example
* node.cache();
* node.filters([Konva.Filters.Sepia]);
*/
Konva.Filters.Sepia = function(imageData) {

@@ -18,0 +18,0 @@ var data = imageData.data,

24

src/filters/Solarize.js
(function() {
'use strict';
/**
* Solarize Filter
* Pixastic Lib - Solarize filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
* @function
* @name Solarize
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Solarize]);
*/
* Solarize Filter
* Pixastic Lib - Solarize filter - v0.1.0
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
* @function
* @name Solarize
* @memberof Konva.Filters
* @param {Object} imageData
* @example
* node.cache();
* node.filters([Konva.Filters.Solarize]);
*/
Konva.Filters.Solarize = function(imageData) {

@@ -17,0 +17,0 @@ var data = imageData.data,

4

src/Global.js

@@ -221,3 +221,5 @@ /*

? window
: typeof WorkerGlobalScope !== 'undefined' ? self : {};
: typeof WorkerGlobalScope !== 'undefined'
? self
: {};

@@ -224,0 +226,0 @@ Konva.UA = Konva._parseUA((glob.navigator && glob.navigator.userAgent) || '');

20

src/Group.js
(function() {
'use strict';
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
* @memberof Konva
* @augments Konva.Container
* @param {Object} config
* @@nodeParams
* @@containerParams
* @example
* var group = new Konva.Group();
*/
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
* @memberof Konva
* @augments Konva.Container
* @param {Object} config
* @@nodeParams
* @@containerParams
* @example
* var group = new Konva.Group();
*/
Konva.Group = function(config) {

@@ -15,0 +15,0 @@ this.___init(config);

145

src/Layer.js

@@ -16,9 +16,5 @@ (function() {

{ x: 0, y: 0 }, // 0
{ x: -1, y: 0 }, // 1
{ x: -1, y: -1 }, // 2
{ x: 0, y: -1 }, // 3
{ x: 1, y: -1 }, // 4
{ x: 1, y: 0 }, // 5
{ x: 1, y: 1 }, // 6
{ x: 0, y: 1 }, // 7
{ x: -1, y: 1 } // 8

@@ -29,15 +25,15 @@ ],

/**
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes.
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @@nodeParams
* @@containerParams
* @example
* var layer = new Konva.Layer();
*/
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes.
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @@nodeParams
* @@containerParams
* @example
* var layer = new Konva.Layer();
*/
Konva.Layer = function(config) {

@@ -68,17 +64,17 @@ this.____init(config);

/**
* get visible intersection shape. This is the preferred
* method for determining if a point intersects a shape or not
* also you may pass optional selector parametr to return ancestor of intersected shape
* @method
* @memberof Konva.Layer.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = layer.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = layer.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
* also you may pass optional selector parametr to return ancestor of intersected shape
* @method
* @memberof Konva.Layer.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = layer.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = layer.getIntersection({x: 50, y: 50}, 'Group');
*/
getIntersection: function(pos, selector) {

@@ -148,7 +144,7 @@ var obj, i, intersectionOffset, shape;

var p = this.hitCanvas.context.getImageData(
Math.round(pos.x * ratio),
Math.round(pos.y * ratio),
1,
1
).data,
Math.round(pos.x * ratio),
Math.round(pos.y * ratio),
1,
1
).data,
p3 = p[3],

@@ -179,3 +175,4 @@ colorKey,

drawScene: function(can, top) {
var layer = this.getLayer(), canvas = can || (layer && layer.getCanvas());
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());

@@ -199,6 +196,10 @@ this._fire(BEFORE_DRAW, {

drawHit: function(can, top) {
var layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas);
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas);
if (layer && layer.getClearBeforeDraw()) {
layer.getHitCanvas().getContext().clear();
layer
.getHitCanvas()
.getContext()
.clear();
}

@@ -212,3 +213,5 @@

Konva.BaseLayer.prototype.clear.call(this, bounds);
this.getHitCanvas().getContext().clear(bounds);
this.getHitCanvas()
.getContext()
.clear(bounds);
this.imageData = null; // Clear getImageData cache

@@ -230,8 +233,8 @@ return this;

/**
* enable hit graph
* @name enableHitGraph
* @method
* @memberof Konva.Layer.prototype
* @returns {Layer}
*/
* enable hit graph
* @name enableHitGraph
* @method
* @memberof Konva.Layer.prototype
* @returns {Layer}
*/
enableHitGraph: function() {

@@ -242,8 +245,8 @@ this.setHitGraphEnabled(true);

/**
* disable hit graph
* @name disableHitGraph
* @method
* @memberof Konva.Layer.prototype
* @returns {Layer}
*/
* disable hit graph
* @name disableHitGraph
* @method
* @memberof Konva.Layer.prototype
* @returns {Layer}
*/
disableHitGraph: function() {

@@ -263,21 +266,21 @@ this.setHitGraphEnabled(false);

/**
* get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase
* draw performance because the hit graph will not be redrawn each time the layer is
* drawn. This, however, also disables mouse/touch event detection
* @name hitGraphEnabled
* @method
* @memberof Konva.Layer.prototype
* @param {Boolean} enabled
* @returns {Boolean}
* @example
* // get hitGraphEnabled flag
* var hitGraphEnabled = layer.hitGraphEnabled();
*
* // disable hit graph
* layer.hitGraphEnabled(false);
*
* // enable hit graph
* layer.hitGraphEnabled(true);
*/
* get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase
* draw performance because the hit graph will not be redrawn each time the layer is
* drawn. This, however, also disables mouse/touch event detection
* @name hitGraphEnabled
* @method
* @memberof Konva.Layer.prototype
* @param {Boolean} enabled
* @returns {Boolean}
* @example
* // get hitGraphEnabled flag
* var hitGraphEnabled = layer.hitGraphEnabled();
*
* // disable hit graph
* layer.hitGraphEnabled(false);
*
* // enable hit graph
* layer.hitGraphEnabled(true);
*/
Konva.Collection.mapMethods(Konva.Layer);
})();

4

src/Shape.js

@@ -41,4 +41,4 @@ (function(Konva) {

* fill: 'red',
* // a Konva.Canvas renderer is passed into the drawFunc function
* drawFunc: function(context) {
* // a Konva.Canvas renderer is passed into the sceneFunc function
* sceneFunc: function(context) {
* context.beginPath();

@@ -45,0 +45,0 @@ * context.moveTo(200, 50);

157

src/shapes/Arc.js
(function(Konva) {
'use strict';
/**
* Arc constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.angle in degrees
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* // draw a Arc that's pointing downwards
* var arc = new Konva.Arc({
* innerRadius: 40,
* outerRadius: 80,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5,
* angle: 60,
* rotationDeg: -120
* });
*/
* Arc constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.angle in degrees
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* // draw a Arc that's pointing downwards
* var arc = new Konva.Arc({
* innerRadius: 40,
* outerRadius: 80,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5,
* angle: 60,
* rotationDeg: -120
* });
*/
Konva.Arc = function(config) {

@@ -39,3 +39,4 @@ this.___init(config);

_sceneFunc: function(context) {
var angle = Konva.getAngle(this.angle()), clockwise = this.clockwise();
var angle = Konva.getAngle(this.angle()),
clockwise = this.clockwise();

@@ -77,15 +78,15 @@ context.beginPath();

/**
* get/set innerRadius
* @name innerRadius
* @method
* @memberof Konva.Arc.prototype
* @param {Number} innerRadius
* @returns {Number}
* @example
* // get inner radius
* var innerRadius = arc.innerRadius();
*
* // set inner radius
* arc.innerRadius(20);
*/
* get/set innerRadius
* @name innerRadius
* @method
* @memberof Konva.Arc.prototype
* @param {Number} innerRadius
* @returns {Number}
* @example
* // get inner radius
* var innerRadius = arc.innerRadius();
*
* // set inner radius
* arc.innerRadius(20);
*/

@@ -95,15 +96,15 @@ Konva.Factory.addGetterSetter(Konva.Arc, 'outerRadius', 0);

/**
* get/set outerRadius
* @name outerRadius
* @method
* @memberof Konva.Arc.prototype
* @param {Number} outerRadius
* @returns {Number}
* @example
* // get outer radius
* var outerRadius = arc.outerRadius();
*
* // set outer radius
* arc.outerRadius(20);
*/
* get/set outerRadius
* @name outerRadius
* @method
* @memberof Konva.Arc.prototype
* @param {Number} outerRadius
* @returns {Number}
* @example
* // get outer radius
* var outerRadius = arc.outerRadius();
*
* // set outer radius
* arc.outerRadius(20);
*/

@@ -113,15 +114,15 @@ Konva.Factory.addGetterSetter(Konva.Arc, 'angle', 0);

/**
* get/set angle in degrees
* @name angle
* @method
* @memberof Konva.Arc.prototype
* @param {Number} angle
* @returns {Number}
* @example
* // get angle
* var angle = arc.angle();
*
* // set angle
* arc.angle(20);
*/
* get/set angle in degrees
* @name angle
* @method
* @memberof Konva.Arc.prototype
* @param {Number} angle
* @returns {Number}
* @example
* // get angle
* var angle = arc.angle();
*
* // set angle
* arc.angle(20);
*/

@@ -131,20 +132,20 @@ Konva.Factory.addGetterSetter(Konva.Arc, 'clockwise', false);

/**
* get/set clockwise flag
* @name clockwise
* @method
* @memberof Konva.Arc.prototype
* @param {Boolean} clockwise
* @returns {Boolean}
* @example
* // get clockwise flag
* var clockwise = arc.clockwise();
*
* // draw arc counter-clockwise
* arc.clockwise(false);
*
* // draw arc clockwise
* arc.clockwise(true);
*/
* get/set clockwise flag
* @name clockwise
* @method
* @memberof Konva.Arc.prototype
* @param {Boolean} clockwise
* @returns {Boolean}
* @example
* // get clockwise flag
* var clockwise = arc.clockwise();
*
* // draw arc counter-clockwise
* arc.clockwise(false);
*
* // draw arc clockwise
* arc.clockwise(true);
*/
Konva.Collection.mapMethods(Konva.Arc);
})(Konva);

63

src/shapes/Circle.js
(function(Konva) {
'use strict';
// the 0.0001 offset fixes a bug in Chrome 27
var PIx2 = Math.PI * 2 - 0.0001, CIRCLE = 'Circle';
var PIx2 = Math.PI * 2 - 0.0001,
CIRCLE = 'Circle';
/**
* Circle constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.radius
* @@shapeParams
* @@nodeParams
* @example
* // create circle
* var circle = new Konva.Circle({
* radius: 40,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5
* });
*/
* Circle constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.radius
* @@shapeParams
* @@nodeParams
* @example
* // create circle
* var circle = new Konva.Circle({
* radius: 40,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5
* });
*/
Konva.Circle = function(config) {

@@ -72,17 +73,17 @@ this.___init(config);

/**
* get/set radius
* @name radius
* @method
* @memberof Konva.Circle.prototype
* @param {Number} radius
* @returns {Number}
* @example
* // get radius
* var radius = circle.radius();
*
* // set radius
* circle.radius(10);
*/
* get/set radius
* @name radius
* @method
* @memberof Konva.Circle.prototype
* @param {Number} radius
* @returns {Number}
* @example
* // get radius
* var radius = circle.radius();
*
* // set radius
* circle.radius(10);
*/
Konva.Collection.mapMethods(Konva.Circle);
})(Konva);

126

src/shapes/Ellipse.js
(function() {
'use strict';
// the 0.0001 offset fixes a bug in Chrome 27
var PIx2 = Math.PI * 2 - 0.0001, ELLIPSE = 'Ellipse';
var PIx2 = Math.PI * 2 - 0.0001,
ELLIPSE = 'Ellipse';
/**
* Ellipse constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Object} config.radius defines x and y radius
* @@shapeParams
* @@nodeParams
* @example
* var ellipse = new Konva.Ellipse({
* radius : {
* x : 50,
* y : 50
* },
* fill: 'red'
* });
*/
* Ellipse constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Object} config.radius defines x and y radius
* @@shapeParams
* @@nodeParams
* @example
* var ellipse = new Konva.Ellipse({
* radius : {
* x : 50,
* y : 50
* },
* fill: 'red'
* });
*/
Konva.Ellipse = function(config) {

@@ -36,3 +37,4 @@ this.___init(config);

_sceneFunc: function(context) {
var rx = this.getRadiusX(), ry = this.getRadiusY();
var rx = this.getRadiusX(),
ry = this.getRadiusY();

@@ -78,54 +80,54 @@ context.beginPath();

/**
* get/set radius
* @name radius
* @method
* @memberof Konva.Ellipse.prototype
* @param {Object} radius
* @param {Number} radius.x
* @param {Number} radius.y
* @returns {Object}
* @example
* // get radius
* var radius = ellipse.radius();
*
* // set radius
* ellipse.radius({
* x: 200,
* y: 100
* });
*/
* get/set radius
* @name radius
* @method
* @memberof Konva.Ellipse.prototype
* @param {Object} radius
* @param {Number} radius.x
* @param {Number} radius.y
* @returns {Object}
* @example
* // get radius
* var radius = ellipse.radius();
*
* // set radius
* ellipse.radius({
* x: 200,
* y: 100
* });
*/
Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusX', 0);
/**
* get/set radius x
* @name radiusX
* @method
* @memberof Konva.Ellipse.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get radius x
* var radiusX = ellipse.radiusX();
*
* // set radius x
* ellipse.radiusX(200);
*/
* get/set radius x
* @name radiusX
* @method
* @memberof Konva.Ellipse.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get radius x
* var radiusX = ellipse.radiusX();
*
* // set radius x
* ellipse.radiusX(200);
*/
Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusY', 0);
/**
* get/set radius y
* @name radiusY
* @method
* @memberof Konva.Ellipse.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get radius y
* var radiusY = ellipse.radiusY();
*
* // set radius y
* ellipse.radiusY(200);
*/
* get/set radius y
* @name radiusY
* @method
* @memberof Konva.Ellipse.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get radius y
* var radiusY = ellipse.radiusY();
*
* // set radius y
* ellipse.radiusY(200);
*/
Konva.Collection.mapMethods(Konva.Ellipse);
})();

243

src/shapes/Image.js

@@ -7,24 +7,24 @@ (function() {

/**
* Image constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Image} config.image
* @param {Object} [config.crop]
* @@shapeParams
* @@nodeParams
* @example
* var imageObj = new Image();
* imageObj.onload = function() {
* var image = new Konva.Image({
* x: 200,
* y: 50,
* image: imageObj,
* width: 100,
* height: 100
* });
* };
* imageObj.src = '/path/to/image.jpg'
*/
* Image constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Image} config.image
* @param {Object} [config.crop]
* @@shapeParams
* @@nodeParams
* @example
* var imageObj = new Image();
* imageObj.onload = function() {
* var image = new Konva.Image({
* x: 200,
* y: 50,
* image: imageObj,
* width: 100,
* height: 100
* });
* };
* imageObj.src = '/path/to/image.jpg'
*/
Konva.Image = function(config) {

@@ -89,3 +89,4 @@ this.___init(config);

_hitFunc: function(context) {
var width = this.getWidth(), height = this.getHeight();
var width = this.getWidth(),
height = this.getHeight();

@@ -112,16 +113,16 @@ context.beginPath();

/**
* set image
* @name setImage
* @method
* @memberof Konva.Image.prototype
* @param {Image} image
*/
* set image
* @name setImage
* @method
* @memberof Konva.Image.prototype
* @param {Image} image
*/
/**
* get image
* @name getImage
* @method
* @memberof Konva.Image.prototype
* @returns {Image}
*/
* get image
* @name getImage
* @method
* @memberof Konva.Image.prototype
* @returns {Image}
*/

@@ -135,88 +136,88 @@ Konva.Factory.addComponentsGetterSetter(Konva.Image, 'crop', [

/**
* get/set crop
* @method
* @name crop
* @memberof Konva.Image.prototype
* @param {Object} crop
* @param {Number} crop.x
* @param {Number} crop.y
* @param {Number} crop.width
* @param {Number} crop.height
* @returns {Object}
* @example
* // get crop
* var crop = image.crop();
*
* // set crop
* image.crop({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
* get/set crop
* @method
* @name crop
* @memberof Konva.Image.prototype
* @param {Object} crop
* @param {Number} crop.x
* @param {Number} crop.y
* @param {Number} crop.width
* @param {Number} crop.height
* @returns {Object}
* @example
* // get crop
* var crop = image.crop();
*
* // set crop
* image.crop({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
Konva.Factory.addGetterSetter(Konva.Image, 'cropX', 0);
/**
* get/set crop x
* @method
* @name cropX
* @memberof Konva.Image.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get crop x
* var cropX = image.cropX();
*
* // set crop x
* image.cropX(20);
*/
* get/set crop x
* @method
* @name cropX
* @memberof Konva.Image.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get crop x
* var cropX = image.cropX();
*
* // set crop x
* image.cropX(20);
*/
Konva.Factory.addGetterSetter(Konva.Image, 'cropY', 0);
/**
* get/set crop y
* @name cropY
* @method
* @memberof Konva.Image.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get crop y
* var cropY = image.cropY();
*
* // set crop y
* image.cropY(20);
*/
* get/set crop y
* @name cropY
* @method
* @memberof Konva.Image.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get crop y
* var cropY = image.cropY();
*
* // set crop y
* image.cropY(20);
*/
Konva.Factory.addGetterSetter(Konva.Image, 'cropWidth', 0);
/**
* get/set crop width
* @name cropWidth
* @method
* @memberof Konva.Image.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get crop width
* var cropWidth = image.cropWidth();
*
* // set crop width
* image.cropWidth(20);
*/
* get/set crop width
* @name cropWidth
* @method
* @memberof Konva.Image.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get crop width
* var cropWidth = image.cropWidth();
*
* // set crop width
* image.cropWidth(20);
*/
Konva.Factory.addGetterSetter(Konva.Image, 'cropHeight', 0);
/**
* get/set crop height
* @name cropHeight
* @method
* @memberof Konva.Image.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get crop height
* var cropHeight = image.cropHeight();
*
* // set crop height
* image.cropHeight(20);
*/
* get/set crop height
* @name cropHeight
* @method
* @memberof Konva.Image.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get crop height
* var cropHeight = image.cropHeight();
*
* // set crop height
* image.cropHeight(20);
*/

@@ -226,14 +227,14 @@ Konva.Collection.mapMethods(Konva.Image);

/**
* load image from given url and create `Konva.Image` instance
* @method
* @memberof Konva.Image
* @param {String} url image source
* @param {Function} callback with Konva.Image instance as first argument
* @example
* Konva.Image.fromURL(imageURL, function(image){
* // image is Konva.Image instance
* layer.add(image);
* layer.draw();
* });
*/
* load image from given url and create `Konva.Image` instance
* @method
* @memberof Konva.Image
* @param {String} url image source
* @param {Function} callback with Konva.Image instance as first argument
* @example
* Konva.Image.fromURL(imageURL, function(image){
* // image is Konva.Image instance
* layer.add(image);
* layer.draw();
* });
*/
Konva.Image.fromURL = function(url, callback) {

@@ -240,0 +241,0 @@ var img = new Image();

229

src/shapes/Label.js

@@ -5,10 +5,10 @@ (function() {

var ATTR_CHANGE_LIST = [
'fontFamily',
'fontSize',
'fontStyle',
'padding',
'lineHeight',
'text',
'width'
],
'fontFamily',
'fontSize',
'fontStyle',
'padding',
'lineHeight',
'text',
'width'
],
CHANGE_KONVA = 'Change.konva',

@@ -25,39 +25,39 @@ NONE = 'none',

/**
* Label constructor.&nbsp; Labels are groups that contain a Text and Tag shape
* @constructor
* @memberof Konva
* @param {Object} config
* @@nodeParams
* @example
* // create label
* var label = new Konva.Label({
* x: 100,
* y: 100,
* draggable: true
* });
*
* // add a tag to the label
* label.add(new Konva.Tag({
* fill: '#bbb',
* stroke: '#333',
* shadowColor: 'black',
* shadowBlur: 10,
* shadowOffset: [10, 10],
* shadowOpacity: 0.2,
* lineJoin: 'round',
* pointerDirection: 'up',
* pointerWidth: 20,
* pointerHeight: 20,
* cornerRadius: 5
* }));
*
* // add text to the label
* label.add(new Konva.Text({
* text: 'Hello World!',
* fontSize: 50,
* lineHeight: 1.2,
* padding: 10,
* fill: 'green'
* }));
*/
* Label constructor.&nbsp; Labels are groups that contain a Text and Tag shape
* @constructor
* @memberof Konva
* @param {Object} config
* @@nodeParams
* @example
* // create label
* var label = new Konva.Label({
* x: 100,
* y: 100,
* draggable: true
* });
*
* // add a tag to the label
* label.add(new Konva.Tag({
* fill: '#bbb',
* stroke: '#333',
* shadowColor: 'black',
* shadowBlur: 10,
* shadowOffset: [10, 10],
* shadowOpacity: 0.2,
* lineJoin: 'round',
* pointerDirection: 'up',
* pointerWidth: 20,
* pointerHeight: 20,
* cornerRadius: 5
* }));
*
* // add text to the label
* label.add(new Konva.Text({
* text: 'Hello World!',
* fontSize: 50,
* lineHeight: 1.2,
* padding: 10,
* fill: 'green'
* }));
*/
Konva.Label = function(config) {

@@ -80,8 +80,8 @@ this.____init(config);

/**
* get Text shape for the label. You need to access the Text shape in order to update
* the text properties
* @name getText
* @method
* @memberof Konva.Label.prototype
*/
* get Text shape for the label. You need to access the Text shape in order to update
* the text properties
* @name getText
* @method
* @memberof Konva.Label.prototype
*/
getText: function() {

@@ -91,8 +91,8 @@ return this.find('Text')[0];

/**
* get Tag shape for the label. You need to access the Tag shape in order to update
* the pointer properties and the corner radius
* @name getTag
* @method
* @memberof Konva.Label.prototype
*/
* get Tag shape for the label. You need to access the Tag shape in order to update
* the pointer properties and the corner radius
* @name getTag
* @method
* @memberof Konva.Label.prototype
*/
getTag: function() {

@@ -102,3 +102,4 @@ return this.find('Tag')[0];

_addListeners: function(text) {
var that = this, n;
var that = this,
n;
var func = function() {

@@ -178,13 +179,13 @@ that._sync();

/**
* Tag constructor.&nbsp; A Tag can be configured
* to have a pointer element that points up, right, down, or left
* @constructor
* @memberof Konva
* @param {Object} config
* @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default
* is none. When a pointer is present, the positioning of the label is relative to the tip of the pointer.
* @param {Number} [config.pointerWidth]
* @param {Number} [config.pointerHeight]
* @param {Number} [config.cornerRadius]
*/
* Tag constructor.&nbsp; A Tag can be configured
* to have a pointer element that points up, right, down, or left
* @constructor
* @memberof Konva
* @param {Object} config
* @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default
* is none. When a pointer is present, the positioning of the label is relative to the tip of the pointer.
* @param {Number} [config.pointerWidth]
* @param {Number} [config.pointerHeight]
* @param {Number} [config.cornerRadius]
*/
Konva.Tag = function(config) {

@@ -330,16 +331,16 @@ this.___init(config);

/**
* set pointer Direction
* @name setPointerDirection
* @method
* @memberof Konva.Tag.prototype
* @param {String} pointerDirection can be up, right, down, left, or none. The
* default is none
*/
* set pointer Direction
* @name setPointerDirection
* @method
* @memberof Konva.Tag.prototype
* @param {String} pointerDirection can be up, right, down, left, or none. The
* default is none
*/
/**
* get pointer Direction
* @name getPointerDirection
* @method
* @memberof Konva.Tag.prototype
*/
* get pointer Direction
* @name getPointerDirection
* @method
* @memberof Konva.Tag.prototype
*/

@@ -349,15 +350,15 @@ Konva.Factory.addGetterSetter(Konva.Tag, 'pointerWidth', 0);

/**
* set pointer width
* @name setPointerWidth
* @method
* @memberof Konva.Tag.prototype
* @param {Number} pointerWidth
*/
* set pointer width
* @name setPointerWidth
* @method
* @memberof Konva.Tag.prototype
* @param {Number} pointerWidth
*/
/**
* get pointer width
* @name getPointerWidth
* @method
* @memberof Konva.Tag.prototype
*/
* get pointer width
* @name getPointerWidth
* @method
* @memberof Konva.Tag.prototype
*/

@@ -367,15 +368,15 @@ Konva.Factory.addGetterSetter(Konva.Tag, 'pointerHeight', 0);

/**
* set pointer height
* @name setPointerHeight
* @method
* @memberof Konva.Tag.prototype
* @param {Number} pointerHeight
*/
* set pointer height
* @name setPointerHeight
* @method
* @memberof Konva.Tag.prototype
* @param {Number} pointerHeight
*/
/**
* get pointer height
* @name getPointerHeight
* @method
* @memberof Konva.Tag.prototype
*/
* get pointer height
* @name getPointerHeight
* @method
* @memberof Konva.Tag.prototype
*/

@@ -385,17 +386,17 @@ Konva.Factory.addGetterSetter(Konva.Tag, 'cornerRadius', 0);

/**
* set corner radius
* @name setCornerRadius
* @method
* @memberof Konva.Tag.prototype
* @param {Number} corner radius
*/
* set corner radius
* @name setCornerRadius
* @method
* @memberof Konva.Tag.prototype
* @param {Number} corner radius
*/
/**
* get corner radius
* @name getCornerRadius
* @method
* @memberof Konva.Tag.prototype
*/
* get corner radius
* @name getCornerRadius
* @method
* @memberof Konva.Tag.prototype
*/
Konva.Collection.mapMethods(Konva.Tag);
})();

60

src/shapes/Rect.js
(function() {
'use strict';
/**
* Rect constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} [config.cornerRadius]
* @@shapeParams
* @@nodeParams
* @example
* var rect = new Konva.Rect({
* width: 100,
* height: 50,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 5
* });
*/
* Rect constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} [config.cornerRadius]
* @@shapeParams
* @@nodeParams
* @example
* var rect = new Konva.Rect({
* width: 100,
* height: 50,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 5
* });
*/
Konva.Rect = function(config) {

@@ -91,17 +91,17 @@ this.___init(config);

/**
* get/set corner radius
* @name cornerRadius
* @method
* @memberof Konva.Rect.prototype
* @param {Number} cornerRadius
* @returns {Number}
* @example
* // get corner radius
* var cornerRadius = rect.cornerRadius();
*
* // set corner radius
* rect.cornerRadius(10);
*/
* get/set corner radius
* @name cornerRadius
* @method
* @memberof Konva.Rect.prototype
* @param {Number} cornerRadius
* @returns {Number}
* @example
* // get corner radius
* var cornerRadius = rect.cornerRadius();
*
* // set corner radius
* rect.cornerRadius(10);
*/
Konva.Collection.mapMethods(Konva.Rect);
})();

90

src/shapes/RegularPolygon.js
(function() {
'use strict';
/**
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.sides
* @param {Number} config.radius
* @@shapeParams
* @@nodeParams
* @example
* var hexagon = new Konva.RegularPolygon({
* x: 100,
* y: 200,
* sides: 6,
* radius: 70,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 4
* });
*/
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.sides
* @param {Number} config.radius
* @@shapeParams
* @@nodeParams
* @example
* var hexagon = new Konva.RegularPolygon({
* x: 100,
* y: 200,
* sides: 6,
* radius: 70,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 4
* });
*/
Konva.RegularPolygon = function(config) {

@@ -37,3 +37,7 @@ this.___init(config);

_sceneFunc: function(context) {
var sides = this.attrs.sides, radius = this.attrs.radius, n, x, y;
var sides = this.attrs.sides,
radius = this.attrs.radius,
n,
x,
y;

@@ -79,15 +83,15 @@ context.beginPath();

/**
* set radius
* @name setRadius
* @method
* @memberof Konva.RegularPolygon.prototype
* @param {Number} radius
*/
* set radius
* @name setRadius
* @method
* @memberof Konva.RegularPolygon.prototype
* @param {Number} radius
*/
/**
* get radius
* @name getRadius
* @method
* @memberof Konva.RegularPolygon.prototype
*/
* get radius
* @name getRadius
* @method
* @memberof Konva.RegularPolygon.prototype
*/

@@ -97,17 +101,17 @@ Konva.Factory.addGetterSetter(Konva.RegularPolygon, 'sides', 0);

/**
* set number of sides
* @name setSides
* @method
* @memberof Konva.RegularPolygon.prototype
* @param {int} sides
*/
* set number of sides
* @name setSides
* @method
* @memberof Konva.RegularPolygon.prototype
* @param {int} sides
*/
/**
* get number of sides
* @name getSides
* @method
* @memberof Konva.RegularPolygon.prototype
*/
* get number of sides
* @name getSides
* @method
* @memberof Konva.RegularPolygon.prototype
*/
Konva.Collection.mapMethods(Konva.RegularPolygon);
})();

88

src/shapes/Ring.js

@@ -6,20 +6,20 @@ (function() {

/**
* Ring constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* var ring = new Konva.Ring({
* innerRadius: 40,
* outerRadius: 80,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 5
* });
*/
* Ring constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* var ring = new Konva.Ring({
* innerRadius: 40,
* outerRadius: 80,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 5
* });
*/
Konva.Ring = function(config) {

@@ -79,15 +79,15 @@ this.___init(config);

/**
* get/set innerRadius
* @name innerRadius
* @method
* @memberof Konva.Ring.prototype
* @param {Number} innerRadius
* @returns {Number}
* @example
* // get inner radius
* var innerRadius = ring.innerRadius();
*
* // set inner radius
* ring.innerRadius(20);
*/
* get/set innerRadius
* @name innerRadius
* @method
* @memberof Konva.Ring.prototype
* @param {Number} innerRadius
* @returns {Number}
* @example
* // get inner radius
* var innerRadius = ring.innerRadius();
*
* // set inner radius
* ring.innerRadius(20);
*/
Konva.Factory.addGetter(Konva.Ring, 'outerRadius', 0);

@@ -97,17 +97,17 @@ Konva.Factory.addOverloadedGetterSetter(Konva.Ring, 'outerRadius');

/**
* get/set outerRadius
* @name outerRadius
* @method
* @memberof Konva.Ring.prototype
* @param {Number} outerRadius
* @returns {Number}
* @example
* // get outer radius
* var outerRadius = ring.outerRadius();
*
* // set outer radius
* ring.outerRadius(20);
*/
* get/set outerRadius
* @name outerRadius
* @method
* @memberof Konva.Ring.prototype
* @param {Number} outerRadius
* @returns {Number}
* @example
* // get outer radius
* var outerRadius = ring.outerRadius();
*
* // set outer radius
* ring.outerRadius(20);
*/
Konva.Collection.mapMethods(Konva.Ring);
})();

355

src/shapes/Sprite.js
(function() {
'use strict';
/**
* Sprite constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {String} config.animation animation key
* @param {Object} config.animations animation map
* @param {Integer} [config.frameIndex] animation frame index
* @param {Image} config.image image object
* @@shapeParams
* @@nodeParams
* @example
* var imageObj = new Image();
* imageObj.onload = function() {
* var sprite = new Konva.Sprite({
* x: 200,
* y: 100,
* image: imageObj,
* animation: 'standing',
* animations: {
* standing: [
* // x, y, width, height (6 frames)
* 0, 0, 49, 109,
* 52, 0, 49, 109,
* 105, 0, 49, 109,
* 158, 0, 49, 109,
* 210, 0, 49, 109,
* 262, 0, 49, 109
* ],
* kicking: [
* // x, y, width, height (6 frames)
* 0, 109, 45, 98,
* 45, 109, 45, 98,
* 95, 109, 63, 98,
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* },
* frameRate: 7,
* frameIndex: 0
* });
* };
* imageObj.src = '/path/to/image.jpg'
*/
* Sprite constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {String} config.animation animation key
* @param {Object} config.animations animation map
* @param {Integer} [config.frameIndex] animation frame index
* @param {Image} config.image image object
* @@shapeParams
* @@nodeParams
* @example
* var imageObj = new Image();
* imageObj.onload = function() {
* var sprite = new Konva.Sprite({
* x: 200,
* y: 100,
* image: imageObj,
* animation: 'standing',
* animations: {
* standing: [
* // x, y, width, height (6 frames)
* 0, 0, 49, 109,
* 52, 0, 49, 109,
* 105, 0, 49, 109,
* 158, 0, 49, 109,
* 210, 0, 49, 109,
* 262, 0, 49, 109
* ],
* kicking: [
* // x, y, width, height (6 frames)
* 0, 109, 45, 98,
* 45, 109, 45, 98,
* 95, 109, 63, 98,
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* },
* frameRate: 7,
* frameIndex: 0
* });
* };
* imageObj.src = '/path/to/image.jpg'
*/
Konva.Sprite = function(config) {

@@ -107,3 +107,4 @@ this.___init(config);

if (offsets) {
var offset = offsets[anim], ix2 = index * 2;
var offset = offsets[anim],
ix2 = index * 2;
context.drawImage(

@@ -158,6 +159,6 @@ image,

/**
* start sprite animation
* @method
* @memberof Konva.Sprite.prototype
*/
* start sprite animation
* @method
* @memberof Konva.Sprite.prototype
*/
start: function() {

@@ -177,6 +178,6 @@ var layer = this.getLayer();

/**
* stop sprite animation
* @method
* @memberof Konva.Sprite.prototype
*/
* stop sprite animation
* @method
* @memberof Konva.Sprite.prototype
*/
stop: function() {

@@ -187,7 +188,7 @@ this.anim.stop();

/**
* determine if animation of sprite is running or not. returns true or false
* @method
* @memberof Konva.Animation.prototype
* @returns {Boolean}
*/
* determine if animation of sprite is running or not. returns true or false
* @method
* @memberof Konva.Animation.prototype
* @returns {Boolean}
*/
isRunning: function() {

@@ -216,15 +217,15 @@ return this.anim.isRunning();

/**
* get/set animation key
* @name animation
* @method
* @memberof Konva.Sprite.prototype
* @param {String} anim animation key
* @returns {String}
* @example
* // get animation key
* var animation = sprite.animation();
*
* // set animation key
* sprite.animation('kicking');
*/
* get/set animation key
* @name animation
* @method
* @memberof Konva.Sprite.prototype
* @param {String} anim animation key
* @returns {String}
* @example
* // get animation key
* var animation = sprite.animation();
*
* // set animation key
* sprite.animation('kicking');
*/

@@ -234,34 +235,34 @@ Konva.Factory.addGetterSetter(Konva.Sprite, 'animations');

/**
* get/set animations map
* @name animations
* @method
* @memberof Konva.Sprite.prototype
* @param {Object} animations
* @returns {Object}
* @example
* // get animations map
* var animations = sprite.animations();
*
* // set animations map
* sprite.animations({
* standing: [
* // x, y, width, height (6 frames)
* 0, 0, 49, 109,
* 52, 0, 49, 109,
* 105, 0, 49, 109,
* 158, 0, 49, 109,
* 210, 0, 49, 109,
* 262, 0, 49, 109
* ],
* kicking: [
* // x, y, width, height (6 frames)
* 0, 109, 45, 98,
* 45, 109, 45, 98,
* 95, 109, 63, 98,
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* });
*/
* get/set animations map
* @name animations
* @method
* @memberof Konva.Sprite.prototype
* @param {Object} animations
* @returns {Object}
* @example
* // get animations map
* var animations = sprite.animations();
*
* // set animations map
* sprite.animations({
* standing: [
* // x, y, width, height (6 frames)
* 0, 0, 49, 109,
* 52, 0, 49, 109,
* 105, 0, 49, 109,
* 158, 0, 49, 109,
* 210, 0, 49, 109,
* 262, 0, 49, 109
* ],
* kicking: [
* // x, y, width, height (6 frames)
* 0, 109, 45, 98,
* 45, 109, 45, 98,
* 95, 109, 63, 98,
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* });
*/

@@ -271,34 +272,34 @@ Konva.Factory.addGetterSetter(Konva.Sprite, 'frameOffsets');

/**
* get/set offsets map
* @name offsets
* @method
* @memberof Konva.Sprite.prototype
* @param {Object} offsets
* @returns {Object}
* @example
* // get offsets map
* var offsets = sprite.offsets();
*
* // set offsets map
* sprite.offsets({
* standing: [
* // x, y (6 frames)
* 0, 0,
* 0, 0,
* 5, 0,
* 0, 0,
* 0, 3,
* 2, 0
* ],
* kicking: [
* // x, y (6 frames)
* 0, 5,
* 5, 0,
* 10, 0,
* 0, 0,
* 2, 1,
* 0, 0
* ]
* });
*/
* get/set offsets map
* @name offsets
* @method
* @memberof Konva.Sprite.prototype
* @param {Object} offsets
* @returns {Object}
* @example
* // get offsets map
* var offsets = sprite.offsets();
*
* // set offsets map
* sprite.offsets({
* standing: [
* // x, y (6 frames)
* 0, 0,
* 0, 0,
* 5, 0,
* 0, 0,
* 0, 3,
* 2, 0
* ],
* kicking: [
* // x, y (6 frames)
* 0, 5,
* 5, 0,
* 10, 0,
* 0, 0,
* 2, 1,
* 0, 0
* ]
* });
*/

@@ -308,15 +309,15 @@ Konva.Factory.addGetterSetter(Konva.Sprite, 'image');

/**
* get/set image
* @name image
* @method
* @memberof Konva.Sprite.prototype
* @param {Image} image
* @returns {Image}
* @example
* // get image
* var image = sprite.image();
*
* // set image
* sprite.image(imageObj);
*/
* get/set image
* @name image
* @method
* @memberof Konva.Sprite.prototype
* @param {Image} image
* @returns {Image}
* @example
* // get image
* var image = sprite.image();
*
* // set image
* sprite.image(imageObj);
*/

@@ -326,15 +327,15 @@ Konva.Factory.addGetterSetter(Konva.Sprite, 'frameIndex', 0);

/**
* set/set animation frame index
* @name frameIndex
* @method
* @memberof Konva.Sprite.prototype
* @param {Integer} frameIndex
* @returns {Integer}
* @example
* // get animation frame index
* var frameIndex = sprite.frameIndex();
*
* // set animation frame index
* sprite.frameIndex(3);
*/
* set/set animation frame index
* @name frameIndex
* @method
* @memberof Konva.Sprite.prototype
* @param {Integer} frameIndex
* @returns {Integer}
* @example
* // get animation frame index
* var frameIndex = sprite.frameIndex();
*
* // set animation frame index
* sprite.frameIndex(3);
*/

@@ -344,17 +345,17 @@ Konva.Factory.addGetterSetter(Konva.Sprite, 'frameRate', 17);

/**
* get/set frame rate in frames per second. Increase this number to make the sprite
* animation run faster, and decrease the number to make the sprite animation run slower
* The default is 17 frames per second
* @name frameRate
* @method
* @memberof Konva.Sprite.prototype
* @param {Integer} frameRate
* @returns {Integer}
* @example
* // get frame rate
* var frameRate = sprite.frameRate();
*
* // set frame rate to 2 frames per second
* sprite.frameRate(2);
*/
* get/set frame rate in frames per second. Increase this number to make the sprite
* animation run faster, and decrease the number to make the sprite animation run slower
* The default is 17 frames per second
* @name frameRate
* @method
* @memberof Konva.Sprite.prototype
* @param {Integer} frameRate
* @returns {Integer}
* @example
* // get frame rate
* var frameRate = sprite.frameRate();
*
* // set frame rate to 2 frames per second
* sprite.frameRate(2);
*/

@@ -361,0 +362,0 @@ Konva.Factory.backCompat(Konva.Sprite, {

110

src/shapes/Star.js
(function() {
'use strict';
/**
* Star constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Integer} config.numPoints
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @@shapeParams
* @@nodeParams
* @example
* var star = new Konva.Star({
* x: 100,
* y: 200,
* numPoints: 5,
* innerRadius: 70,
* outerRadius: 70,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 4
* });
*/
* Star constructor
* @constructor
* @memberof Konva
* @augments Konva.Shape
* @param {Object} config
* @param {Integer} config.numPoints
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
* @@shapeParams
* @@nodeParams
* @example
* var star = new Konva.Star({
* x: 100,
* y: 200,
* numPoints: 5,
* innerRadius: 70,
* outerRadius: 70,
* fill: 'red',
* stroke: 'black',
* strokeWidth: 4
* });
*/
Konva.Star = function(config) {

@@ -85,15 +85,15 @@ this.___init(config);

/**
* set number of points
* @name setNumPoints
* @method
* @memberof Konva.Star.prototype
* @param {Integer} points
*/
* set number of points
* @name setNumPoints
* @method
* @memberof Konva.Star.prototype
* @param {Integer} points
*/
/**
* get number of points
* @name getNumPoints
* @method
* @memberof Konva.Star.prototype
*/
* get number of points
* @name getNumPoints
* @method
* @memberof Konva.Star.prototype
*/

@@ -103,15 +103,15 @@ Konva.Factory.addGetterSetter(Konva.Star, 'innerRadius', 0);

/**
* set inner radius
* @name setInnerRadius
* @method
* @memberof Konva.Star.prototype
* @param {Number} radius
*/
* set inner radius
* @name setInnerRadius
* @method
* @memberof Konva.Star.prototype
* @param {Number} radius
*/
/**
* get inner radius
* @name getInnerRadius
* @method
* @memberof Konva.Star.prototype
*/
* get inner radius
* @name getInnerRadius
* @method
* @memberof Konva.Star.prototype
*/

@@ -121,17 +121,17 @@ Konva.Factory.addGetterSetter(Konva.Star, 'outerRadius', 0);

/**
* set outer radius
* @name setOuterRadius
* @method
* @memberof Konva.Star.prototype
* @param {Number} radius
*/
* set outer radius
* @name setOuterRadius
* @method
* @memberof Konva.Star.prototype
* @param {Number} radius
*/
/**
* get outer radius
* @name getOuterRadius
* @method
* @memberof Konva.Star.prototype
*/
* get outer radius
* @name getOuterRadius
* @method
* @memberof Konva.Star.prototype
*/
Konva.Collection.mapMethods(Konva.Star);
})();

27

src/shapes/Text.js

@@ -154,3 +154,7 @@ /*eslint-disable max-depth */

text = obj.text,
width = obj.width;
width = obj.width,
lastLine = n !== textArrLen - 1,
spacesNumber,
oneWord,
lineWidth;

@@ -168,4 +172,11 @@ // horizontal alignment

context.beginPath();
context.moveTo(0, Math.round(lineHeightPx / 2));
context.lineTo(Math.round(width), Math.round(lineHeightPx / 2));
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
context.lineTo(Math.round(lineWidth), Math.round(lineHeightPx / 2));
// TODO: I have no idea what is real ratio

@@ -182,3 +193,9 @@ // just /15 looks good enough

context.moveTo(0, 0);
context.lineTo(Math.round(width), 0);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
context.lineTo(Math.round(lineWidth), 0);
context.lineWidth = fontSize / 15;

@@ -191,3 +208,3 @@ context.strokeStyle = fill;

// var words = text.split(' ');
var spacesNumber = text.split(' ').length - 1;
spacesNumber = text.split(' ').length - 1;
for (var li = 0; li < text.length; li++) {

@@ -198,3 +215,3 @@ var letter = text[li];

context.translate(
Math.floor((totalWidth - width) / spacesNumber),
Math.floor((totalWidth - padding * 2 - width) / spacesNumber),
0

@@ -201,0 +218,0 @@ );

20

src/shapes/TextPath.js

@@ -524,2 +524,22 @@ (function() {

// add setters and getters
Konva.Factory.addGetterSetter(Konva.TextPath, 'data');
/**
* 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.TextPath.prototype
* @param {String} SVG path command string
*/
/**
* get SVG path data string
* @name getData
* @method
* @memberof Konva.TextPath.prototype
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'fontFamily', 'Arial');

@@ -526,0 +546,0 @@

2

src/shapes/Transformer.js

@@ -179,3 +179,3 @@ (function(Konva) {

this._node = node;
this._clearCache(NODE_RECT);
this._resetTransformCache();

@@ -182,0 +182,0 @@ node.on(TRANSFORM_CHANGE_STR, this._resetTransformCache.bind(this));

124

src/shapes/Wedge.js
(function() {
'use strict';
/**
* Wedge constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.angle in degrees
* @param {Number} config.radius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* // draw a wedge that's pointing downwards
* var wedge = new Konva.Wedge({
* radius: 40,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5,
* angleDeg: 60,
* rotationDeg: -120
* });
*/
* Wedge constructor
* @constructor
* @augments Konva.Shape
* @param {Object} config
* @param {Number} config.angle in degrees
* @param {Number} config.radius
* @param {Boolean} [config.clockwise]
* @@shapeParams
* @@nodeParams
* @example
* // draw a wedge that's pointing downwards
* var wedge = new Konva.Wedge({
* radius: 40,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5,
* angleDeg: 60,
* rotationDeg: -120
* });
*/
Konva.Wedge = function(config) {

@@ -79,15 +79,15 @@ this.___init(config);

/**
* get/set radius
* @name radius
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} radius
* @returns {Number}
* @example
* // get radius
* var radius = wedge.radius();
*
* // set radius
* wedge.radius(10);
*/
* get/set radius
* @name radius
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} radius
* @returns {Number}
* @example
* // get radius
* var radius = wedge.radius();
*
* // set radius
* wedge.radius(10);
*/

@@ -97,15 +97,15 @@ Konva.Factory.addGetterSetter(Konva.Wedge, 'angle', 0);

/**
* get/set angle in degrees
* @name angle
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} angle
* @returns {Number}
* @example
* // get angle
* var angle = wedge.angle();
*
* // set angle
* wedge.angle(20);
*/
* get/set angle in degrees
* @name angle
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} angle
* @returns {Number}
* @example
* // get angle
* var angle = wedge.angle();
*
* // set angle
* wedge.angle(20);
*/

@@ -115,18 +115,18 @@ Konva.Factory.addGetterSetter(Konva.Wedge, 'clockwise', false);

/**
* get/set clockwise flag
* @name clockwise
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} clockwise
* @returns {Number}
* @example
* // get clockwise flag
* var clockwise = wedge.clockwise();
*
* // draw wedge counter-clockwise
* wedge.clockwise(false);
*
* // draw wedge clockwise
* wedge.clockwise(true);
*/
* get/set clockwise flag
* @name clockwise
* @method
* @memberof Konva.Wedge.prototype
* @param {Number} clockwise
* @returns {Number}
* @example
* // get clockwise flag
* var clockwise = wedge.clockwise();
*
* // draw wedge counter-clockwise
* wedge.clockwise(false);
*
* // draw wedge clockwise
* wedge.clockwise(true);
*/

@@ -133,0 +133,0 @@ Konva.Factory.backCompat(Konva.Wedge, {

286

src/Tween.js
(function() {
'use strict';
var blacklist = {
node: 1,
duration: 1,
easing: 1,
onFinish: 1,
yoyo: 1
},
node: 1,
duration: 1,
easing: 1,
onFinish: 1,
yoyo: 1
},
PAUSED = 1,

@@ -129,22 +129,22 @@ PLAYING = 2,

/**
* Tween constructor. Tweens enable you to animate a node between the current state and a new state.
* You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using
* a linear easing. For more tweening options, check out {@link Konva.Easings}
* @constructor
* @memberof Konva
* @example
* // instantiate new tween which fully rotates a node in 1 second
* var tween = new Konva.Tween({
* node: node,
* rotationDeg: 360,
* duration: 1,
* easing: Konva.Easings.EaseInOut
* });
*
* // play tween
* tween.play();
*
* // pause tween
* tween.pause();
*/
* Tween constructor. Tweens enable you to animate a node between the current state and a new state.
* You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using
* a linear easing. For more tweening options, check out {@link Konva.Easings}
* @constructor
* @memberof Konva
* @example
* // instantiate new tween which fully rotates a node in 1 second
* var tween = new Konva.Tween({
* node: node,
* rotationDeg: 360,
* duration: 1,
* easing: Konva.Easings.EaseInOut
* });
*
* // play tween
* tween.play();
*
* // pause tween
* tween.pause();
*/
Konva.Tween = function(config) {

@@ -376,7 +376,7 @@ var that = this,

/**
* play
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
* play
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
play: function() {

@@ -387,7 +387,7 @@ this.tween.play();

/**
* reverse
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
* reverse
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reverse: function() {

@@ -398,7 +398,7 @@ this.tween.reverse();

/**
* reset
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
* reset
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reset: function() {

@@ -409,8 +409,8 @@ this.tween.reset();

/**
* seek
* @method
* @memberof Konva.Tween.prototype
* @param {Integer} t time in seconds between 0 and the duration
* @returns {Tween}
*/
* seek
* @method
* @memberof Konva.Tween.prototype
* @param {Integer} t time in seconds between 0 and the duration
* @returns {Tween}
*/
seek: function(t) {

@@ -421,7 +421,7 @@ this.tween.seek(t * 1000);

/**
* pause
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
* pause
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
pause: function() {

@@ -432,7 +432,7 @@ this.tween.pause();

/**
* finish
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
* finish
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
finish: function() {

@@ -443,6 +443,6 @@ this.tween.finish();

/**
* destroy
* @method
* @memberof Konva.Tween.prototype
*/
* destroy
* @method
* @memberof Konva.Tween.prototype
*/
destroy: function() {

@@ -465,14 +465,14 @@ var nodeId = this.node._id,

/**
* Tween node properties. Shorter usage of {@link Konva.Tween} object.
*
* @method Konva.Node#to
* @memberof Konva.Node
* @param {Object} [params] tween params
* @example
*
* circle.to({
* x : 50,
* duration : 0.5
* });
*/
* Tween node properties. Shorter usage of {@link Konva.Tween} object.
*
* @method Konva.Node#to
* @memberof Konva.Node
* @param {Object} [params] tween params
* @example
*
* circle.to({
* x : 50,
* duration : 0.5
* });
*/
Konva.Node.prototype.to = function(params) {

@@ -497,11 +497,11 @@ var onFinish = params.onFinish;

/**
* @namespace Easings
* @memberof Konva
*/
* @namespace Easings
* @memberof Konva
*/
Konva.Easings = {
/**
* back ease in
* @function
* @memberof Konva.Easings
*/
* back ease in
* @function
* @memberof Konva.Easings
*/
BackEaseIn: function(t, b, c, d) {

@@ -512,6 +512,6 @@ var s = 1.70158;

/**
* back ease out
* @function
* @memberof Konva.Easings
*/
* back ease out
* @function
* @memberof Konva.Easings
*/
BackEaseOut: function(t, b, c, d) {

@@ -522,6 +522,6 @@ var s = 1.70158;

/**
* back ease in out
* @function
* @memberof Konva.Easings
*/
* back ease in out
* @function
* @memberof Konva.Easings
*/
BackEaseInOut: function(t, b, c, d) {

@@ -535,6 +535,6 @@ var s = 1.70158;

/**
* elastic ease in
* @function
* @memberof Konva.Easings
*/
* elastic ease in
* @function
* @memberof Konva.Easings
*/
ElasticEaseIn: function(t, b, c, d, a, p) {

@@ -559,12 +559,14 @@ // added s = 0

return (
-(a *
-(
a *
Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
Math.sin((t * d - s) * (2 * Math.PI) / p)
) + b
);
},
/**
* elastic ease out
* @function
* @memberof Konva.Easings
*/
* elastic ease out
* @function
* @memberof Konva.Easings
*/
ElasticEaseOut: function(t, b, c, d, a, p) {

@@ -595,6 +597,6 @@ // added s = 0

/**
* elastic ease in out
* @function
* @memberof Konva.Easings
*/
* elastic ease in out
* @function
* @memberof Konva.Easings
*/
ElasticEaseInOut: function(t, b, c, d, a, p) {

@@ -637,6 +639,6 @@ // added s = 0

/**
* bounce ease out
* @function
* @memberof Konva.Easings
*/
* bounce ease out
* @function
* @memberof Konva.Easings
*/
BounceEaseOut: function(t, b, c, d) {

@@ -654,6 +656,6 @@ if ((t /= d) < 1 / 2.75) {

/**
* bounce ease in
* @function
* @memberof Konva.Easings
*/
* bounce ease in
* @function
* @memberof Konva.Easings
*/
BounceEaseIn: function(t, b, c, d) {

@@ -663,6 +665,6 @@ return c - Konva.Easings.BounceEaseOut(d - t, 0, c, d) + b;

/**
* bounce ease in out
* @function
* @memberof Konva.Easings
*/
* bounce ease in out
* @function
* @memberof Konva.Easings
*/
BounceEaseInOut: function(t, b, c, d) {

@@ -678,6 +680,6 @@ if (t < d / 2) {

/**
* ease in
* @function
* @memberof Konva.Easings
*/
* ease in
* @function
* @memberof Konva.Easings
*/
EaseIn: function(t, b, c, d) {

@@ -687,6 +689,6 @@ return c * (t /= d) * t + b;

/**
* ease out
* @function
* @memberof Konva.Easings
*/
* ease out
* @function
* @memberof Konva.Easings
*/
EaseOut: function(t, b, c, d) {

@@ -696,6 +698,6 @@ return -c * (t /= d) * (t - 2) + b;

/**
* ease in out
* @function
* @memberof Konva.Easings
*/
* ease in out
* @function
* @memberof Konva.Easings
*/
EaseInOut: function(t, b, c, d) {

@@ -708,6 +710,6 @@ if ((t /= d / 2) < 1) {

/**
* strong ease in
* @function
* @memberof Konva.Easings
*/
* strong ease in
* @function
* @memberof Konva.Easings
*/
StrongEaseIn: function(t, b, c, d) {

@@ -717,6 +719,6 @@ return c * (t /= d) * t * t * t * t + b;

/**
* strong ease out
* @function
* @memberof Konva.Easings
*/
* strong ease out
* @function
* @memberof Konva.Easings
*/
StrongEaseOut: function(t, b, c, d) {

@@ -726,6 +728,6 @@ return c * ((t = t / d - 1) * t * t * t * t + 1) + b;

/**
* strong ease in out
* @function
* @memberof Konva.Easings
*/
* strong ease in out
* @function
* @memberof Konva.Easings
*/
StrongEaseInOut: function(t, b, c, d) {

@@ -738,6 +740,6 @@ if ((t /= d / 2) < 1) {

/**
* linear
* @function
* @memberof Konva.Easings
*/
* linear
* @function
* @memberof Konva.Easings
*/
Linear: function(t, b, c, d) {

@@ -744,0 +746,0 @@ return c * t / d + b;

konva.js

Sorry, the diff of this file is too big to display

konva.min.js

Sorry, the diff of this file is too big to display

src/Node.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc