lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-21 18:51:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

migrate to eslint

Browse Source
This commit is contained in:
Anton Lavrenov
2015-05-04 16:02:16 +07:00
parent 3dff461592
commit 2908fa975b
51 changed files with 979 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.eslintrc Normal file
View File

@@ -0,0 +1,26 @@
{
"ecmaFeatures": {
"blockBindings": true,
"forOf": true,
"jsx": true
},
"env": {
"browser": true,
"node": true
},
"rules": {
"semi": 2,
"quotes": "single",
"no-underscore-dangle": false,
"valid-jsdoc": true,
"no-constant-condition": false,
"strict": "never",
"camelcase": false,
"space-infix-ops": false,
"new-cap": false
},
"globals": {
"Konva" : false,
"define": false
}
}

29
.jshintrc
View File

@@ -1,29 +0,0 @@
{
"esnext" : true,
"curly": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"sub": true,
"undef": true,
"boss": true,
"eqnull": true,
"node": true,
"latedef": true,
"quotmark": "single",
"unused": true,
"trailing" : true,
"laxbreak" : true,
"globals": {
"document": false,
"window" : false,
"Konva" : false,
"navigator" : false,
"define" : false,
"Image" : false,
"assert" : false,
"test": false,
"addStage" : false
}
}

26
gulpfile.js
View File

@@ -1,12 +1,15 @@
'use strict';
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var replace = require('gulp-replace');
var jshint = require('gulp-jshint');
var mochaPhantomJS = require('gulp-mocha-phantomjs');
var jsdoc = require('gulp-jsdoc');
var connect = require('gulp-connect');
var jscpd = require('gulp-jscpd');
var eslint = require('gulp-eslint');
var fs = require('fs');
var NodeParams = fs.readFileSync('./resources/doc-includes/NodeParams.txt').toString();
@@ -97,7 +100,7 @@ gulp.task('build', function() {
.pipe(rename('konva.js'))
.pipe(gulp.dest('./'))
.pipe(uglify({
preserveComments : 'some'
preserveComments: 'some'
}))
.pipe(rename('konva.min.js'))
.pipe(gulp.dest('./'));
@@ -115,8 +118,23 @@ gulp.task('server', function() {
gulp.task('lint', function() {
return gulp.src('./src/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
.pipe(eslint({
configFile: './.eslintrc'
}))
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe(eslint.failOnError());
});
gulp.task('inspect', function() {
return gulp.src('./src/**/*.js')
.pipe(jscpd({
'min-lines': 10,
verbose: true
}));
});
gulp.task('api', function() {

3
package.json
View File

@@ -7,8 +7,9 @@
"gulp": "^3.8.10",
"gulp-concat": "^2.5.2",
"gulp-connect": "^2.2.0",
"gulp-eslint": "^0.11.1",
"gulp-jscpd": "0.0.3",
"gulp-jsdoc": "^0.1.4",
"gulp-jshint": "^1.10.0",
"gulp-mocha-phantomjs": "^0.6.1",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3",

47
src/Animation.js
View File

@@ -1,7 +1,8 @@
(function() {
(function(Konva) {
'use strict';
var BATCH_DRAW_STOP_TIME_DIFF = 500;
var now =(function() {
var now = (function() {
if (Konva.root.performance && Konva.root.performance.now) {
return function() {
return Konva.root.performance.now();
@@ -14,7 +15,11 @@
}
})();
var RAF = (function() {
function FRAF(callback) {
setTimeout(callback, 1000 / 60);
}
var RAF = (function(){
return Konva.root.requestAnimationFrame
|| Konva.root.webkitRequestAnimationFrame
|| Konva.root.mozRequestAnimationFrame
@@ -23,9 +28,7 @@
|| FRAF;
})();
function FRAF(callback) {
setTimeout(callback, 1000 / 60);
}
function requestAnimFrame() {
return RAF.apply(Konva.root, arguments);
@@ -110,21 +113,14 @@
*/
addLayer: function(layer) {
var layers = this.layers,
len, n;
len = layers.length, n;
if (layers) {
len = layers.length;
// don't add the layer if it already exists
for (n = 0; n < len; n++) {
if (layers[n]._id === layer._id) {
return false;
}
// don't add the layer if it already exists
for (n = 0; n < len; n++) {
if (layers[n]._id === layer._id){
return false;
}
}
else {
this.layers = [];
}
this.layers.push(layer);
return true;
@@ -228,13 +224,14 @@
} else {
needRedraw = true;
}
if (needRedraw) {
for (i = 0; i < layersLen; i++) {
layer = layers[i];
if (!needRedraw) {
continue;
}
for (i = 0; i < layersLen; i++) {
layer = layers[i];
if (layer._id !== undefined) {
layerHash[layer._id] = layer;
}
if (layer._id !== undefined) {
layerHash[layer._id] = layer;
}
}
}
@@ -302,4 +299,4 @@
layer.batchDraw();
});
};
})(this);
})(Konva);

37
src/BaseLayer.js
View File

@@ -1,4 +1,5 @@
(function() {
'use strict';
/**
* BaseLayer constructor.
* @constructor
@@ -21,7 +22,7 @@
this.nodeType = 'Layer';
Konva.Container.call(this, config);
},
createPNGStream : function() {
createPNGStream: function() {
return this.canvas._canvas.createPNGStream();
},
/**
@@ -100,18 +101,20 @@
},
// extend Node.prototype.moveUp
moveUp: function() {
if(Konva.Node.prototype.moveUp.call(this)) {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.getCanvas()._canvas);
var moved = Konva.Node.prototype.moveUp.call(this);
if (!moved){
return;
}
var stage = this.getStage();
if(!stage) {
return;
}
stage.content.removeChild(this.getCanvas()._canvas);
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
}
else {
stage.content.appendChild(this.getCanvas()._canvas);
}
}
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
},
// extend Node.prototype.moveDown
@@ -152,7 +155,7 @@
getStage: function() {
return this.parent;
},
setSize : function(width, height) {
setSize: function(width, height) {
this.canvas.setSize(width, height);
},
/**
@@ -165,12 +168,12 @@
* @example
* var width = layer.width();
*/
getWidth : function() {
getWidth: function() {
if (this.parent) {
return this.parent.getWidth();
}
},
setWidth : function() {
setWidth: function() {
Konva.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.');
},
/**
@@ -183,12 +186,12 @@
* @example
* var height = layer.height();
*/
getHeight : function() {
getHeight: function() {
if (this.parent) {
return this.parent.getHeight();
}
},
setHeight : function() {
setHeight: function() {
Konva.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.');
}
});

3
src/Canvas.js
View File

@@ -1,8 +1,9 @@
(function() {
'use strict';
// calculate pixel ratio
var canvas = Konva.Util.createCanvasElement(),
context = canvas.getContext('2d'),
_pixelRatio = (function() {
_pixelRatio = (function(){
var devicePixelRatio = Konva.window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio

23
src/Container.js
View File

@@ -1,4 +1,5 @@
(function() {
'use strict';
/**
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
* @constructor
@@ -211,8 +212,8 @@
* // select node with name bar inside layer
* var nodes = layer.findOne('.bar');
*/
findOne : function(selector) {
return this.find(selector)[0];
findOne: function(selector) {
return this.find(selector)[0];
},
_getNodeById: function(key) {
var node = Konva.ids[key];
@@ -392,10 +393,10 @@
var layer = this.getLayer();
var dd = Konva.DD;
var layerUnderDrag = dd && Konva.isDragging() && (Konva.DD.anim.getLayers().indexOf(layer) !== -1);
return (canvas && canvas.isCache) || (layer && layer.hitGraphEnabled())
return (canvas && canvas.isCache) || (layer && layer.hitGraphEnabled())
&& this.isVisible() && !layerUnderDrag;
},
getClientRect : function(skipTransform) {
getClientRect: function(skipTransform) {
var minX, minY, maxX, maxY;
this.children.each(function(child) {
var rect = child.getClientRect();
@@ -413,16 +414,16 @@
});
var rect = {
x : minX,
y : minY,
width : maxX - minX,
height : maxY - minY
var selfRect = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
if (!skipTransform) {
return this._transformedRect(rect);
return this._transformedRect(selfRect);
}
return rect;
return selfRect;
}
});

20
src/Context.js
View File

@@ -1,4 +1,5 @@
(function() {
'use strict';
var COMMA = ',',
OPEN_PAREN = '(',
CLOSE_PAREN = ')',
@@ -118,7 +119,7 @@
str = '',
n, trace, method, args;
for (n=0; n<len; n++) {
for (n = 0; n < len; n++) {
trace = traceArr[n];
method = trace.method;
@@ -414,7 +415,7 @@
};
};
// methods
for (n=0; n<len; n++) {
for (n = 0; n < len; n++) {
func(CONTEXT_METHODS[n]);
}
@@ -431,11 +432,11 @@
CONTEXT_PROPERTIES.forEach(function(prop) {
Object.defineProperty(Konva.Context.prototype, prop, {
get : function () {
get: function () {
return this._context[prop];
},
set : function (val) {
return this._context[prop] = val;
set: function (val) {
this._context[prop] = val;
}
});
});
@@ -458,13 +459,11 @@
shape._fillFunc(this);
},
_fillPattern: function(shape) {
var fillPatternImage = shape.getFillPatternImage(),
fillPatternX = shape.getFillPatternX(),
var fillPatternX = shape.getFillPatternX(),
fillPatternY = shape.getFillPatternY(),
fillPatternScale = shape.getFillPatternScale(),
fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
fillPatternOffset = shape.getFillPatternOffset(),
fillPatternRepeat = shape.getFillPatternRepeat();
fillPatternOffset = shape.getFillPatternOffset();
if(fillPatternX || fillPatternY) {
this.translate(fillPatternX || 0, fillPatternY || 0);
@@ -479,7 +478,7 @@
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
}
this.setAttr('fillStyle', this.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
this.setAttr('fillStyle', this.createPattern(shape.getFillPatternImage(), shape.getFillPatternRepeat() || 'repeat'));
this.fill();
},
_fillLinearGradient: function(shape) {
@@ -596,7 +595,6 @@
this.setAttr('shadowBlur', blur);
this.setAttr('shadowOffsetX', offset.x * scaleX);
this.setAttr('shadowOffsetY', offset.y * scaleY);
}
};
Konva.Util.extend(Konva.SceneContext, Konva.Context);

22
src/DragAndDrop.js
View File

@@ -1,4 +1,5 @@
(function() {
'use strict';
Konva.DD = {
// properties
anim: new Konva.Animation(function() {
@@ -36,27 +37,26 @@
if(!dd.isDragging) {
dd.isDragging = true;
node.fire('dragstart', {
type : 'dragstart',
target : node,
evt : evt
type: 'dragstart',
target: node,
evt: evt
}, true);
}
// execute ondragmove if defined
node.fire('dragmove', {
type : 'dragmove',
target : node,
evt : evt
type: 'dragmove',
target: node,
evt: evt
}, true);
}
},
_endDragBefore: function(evt) {
var dd = Konva.DD,
node = dd.node,
nodeType, layer;
layer;
if(node) {
nodeType = node.nodeType;
layer = node.getLayer();
dd.anim.stop();
@@ -84,9 +84,9 @@
if (evt && dragEndNode) {
dragEndNode.fire('dragend', {
type : 'dragend',
target : dragEndNode,
evt : evt
type: 'dragend',
target: dragEndNode,
evt: evt
}, true);
}
}

5
src/Factory.js
View File

@@ -1,8 +1,7 @@
/*jshint unused:false */
(function() {
'use strict';
// CONSTANTS
var GET = 'get',
RGB = 'RGB',
SET = 'set';
Konva.Factory = {
@@ -47,7 +46,7 @@
constructor.prototype[getter] = function() {
var ret = {};
for (n=0; n<len; n++) {
for (n = 0; n < len; n++) {
component = components[n];
ret[component] = this.getAttr(attr + capitalize(component));
}

1
src/FastLayer.js
View File

@@ -1,4 +1,5 @@
(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,

34
src/Global.js
View File

@@ -33,6 +33,7 @@
/*jshint -W079, -W020*/
var Konva = {};
(function(root) {
'use strict';
var PI_OVER_180 = Math.PI / 180;
Konva = {
@@ -71,7 +72,7 @@ var Konva = {};
* @example
* Konva.dragDistance = 10;
*/
dragDistance : 0,
dragDistance: 0,
/**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg
@@ -91,7 +92,7 @@ var Konva = {};
* @example
* Konva.showWarnings = false;
*/
showWarnings : true,
showWarnings: true,
@@ -153,20 +154,22 @@ var Konva = {};
}
},
_removeName: function(name, _id) {
if(name !== undefined) {
var nodes = this.names[name];
if(nodes !== undefined) {
for(var n = 0; n < nodes.length; n++) {
var no = nodes[n];
if(no._id === _id) {
nodes.splice(n, 1);
}
}
if(nodes.length === 0) {
delete this.names[name];
}
if(!name) {
return;
}
var nodes = this.names[name];
if(!nodes) {
return;
}
for(var n = 0; n < nodes.length; n++) {
var no = nodes[n];
if(no._id === _id) {
nodes.splice(n, 1);
}
}
if(nodes.length === 0) {
delete this.names[name];
}
},
getAngle: function(angle) {
return this.angleDeg ? angle * PI_OVER_180 : angle;
@@ -220,6 +223,7 @@ var Konva = {};
// if the module has no dependencies, the above pattern can be simplified to
( function(root, factory) {
'use strict';
if( typeof exports === 'object') {
var KonvaJS = factory();
// runtime-check for browserify and nw.js (node-webkit)
@@ -250,8 +254,8 @@ var Konva = {};
Konva.document = document;
Konva.window = window;
Konva.root = root;
}(this, function() {
'use strict';
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.

2
src/Group.js
View File

@@ -1,5 +1,5 @@
(function() {
'use strict';
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor

88
src/Layer.js
View File

@@ -1,7 +1,8 @@
(function() {
'use strict';
// constants
var HASH = '#',
BEFORE_DRAW ='beforeDraw',
BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw',
/*
@@ -12,15 +13,15 @@
* 8 - 7 - 6
*/
INTERSECTION_OFFSETS = [
{x: 0, y: 0}, // 0
{x: -1, y: 0}, // 1
{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
{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
],
INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
@@ -47,7 +48,7 @@
this.nodeType = 'Layer';
this.canvas = new Konva.SceneCanvas();
this.hitCanvas = new Konva.HitCanvas({
pixelRatio : 1
pixelRatio: 1
});
// call super constructor
Konva.BaseLayer.call(this, config);
@@ -75,42 +76,39 @@
getIntersection: function(pos) {
var obj, i, intersectionOffset, shape;
if(this.hitGraphEnabled() && this.isVisible()) {
// in some cases antialiased area may be bigger than 1px
// it is possible if we will cache node, then scale it a lot
// TODO: check { 0; 0 } point before loop, and remove it from INTERSECTION_OFFSETS.
var spiralSearchDistance = 1;
var continueSearch = false;
while (true) {
for (i=0; i<INTERSECTION_OFFSETS_LEN; i++) {
intersectionOffset = INTERSECTION_OFFSETS[i];
obj = this._getIntersection({
x: pos.x + intersectionOffset.x * spiralSearchDistance,
y: pos.y + intersectionOffset.y * spiralSearchDistance
});
shape = obj.shape;
if (shape) {
return shape;
}
// we should continue search if we found antialiased pixel
// that means our node somewhere very close
else {
continueSearch = !!obj.antialiased;
// stop search if found empty pixel
if (!obj.antialiased) {
break;
}
}
if(!this.hitGraphEnabled() || !this.isVisible()) {
return null;
}
// in some cases antialiased area may be bigger than 1px
// it is possible if we will cache node, then scale it a lot
// TODO: check { 0; 0 } point before loop, and remove it from INTERSECTION_OFFSETS.
var spiralSearchDistance = 1;
var continueSearch = false;
while (true) {
for (i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
intersectionOffset = INTERSECTION_OFFSETS[i];
obj = this._getIntersection({
x: pos.x + intersectionOffset.x * spiralSearchDistance,
y: pos.y + intersectionOffset.y * spiralSearchDistance
});
shape = obj.shape;
if (shape) {
return shape;
}
// if no shape, and no antialiased pixel, we should end searching
if (continueSearch) {
spiralSearchDistance += 1;
} else {
return;
// we should continue search if we found antialiased pixel
// that means our node somewhere very close
continueSearch = !!obj.antialiased;
// stop search if found empty pixel
if (!obj.antialiased) {
break;
}
}
} else {
return null;
// if no shape, and no antialiased pixel, we should end searching
if (continueSearch) {
spiralSearchDistance += 1;
} else {
return null;
}
}
},
_getImageData: function(x, y) {
@@ -123,7 +121,7 @@
}
return [
this._hitImageData.data[4 * index + 0] , // Red
this._hitImageData.data[4 * index + 0], // Red
this._hitImageData.data[4 * index + 1], // Green
this._hitImageData.data[4 * index + 2], // Blue
this._hitImageData.data[4 * index + 3] // Alpha
@@ -240,7 +238,7 @@
this.setHitGraphEnabled(false);
return this;
},
setSize : function(width, height) {
setSize: function(width, height) {
Konva.BaseLayer.prototype.setSize.call(this, width, height);
this.hitCanvas.setSize(width, height);
}

93
src/Node.js
View File

@@ -1,4 +1,5 @@
(function() {
(function(Konva) {
'use strict';
// CONSTANTS
var ABSOLUTE_OPACITY = 'absoluteOpacity',
ABSOLUTE_TRANSFORM = 'absoluteTransform',
@@ -188,7 +189,7 @@
height: height
}),
cachedHitCanvas = new Konva.HitCanvas({
pixelRatio : 1,
pixelRatio: 1,
width: width,
height: height
}),
@@ -228,8 +229,8 @@
scene: cachedSceneCanvas,
filter: cachedFilterCanvas,
hit: cachedHitCanvas,
x : x,
y : y
x: x,
y: y
};
return this;
@@ -266,17 +267,17 @@
* rect.getClientRect();
* // returns Object {x: -2, y: 46, width: 104, height: 208}
*/
getClientRect : function() {
getClientRect: function() {
// abstract method
// redefine in Container and Shape
throw 'abstract "getClientRect" method call';
},
_transformedRect : function(rect) {
_transformedRect: function(rect) {
var points = [
{x : rect.x, y : rect.y},
{x : rect.x + rect.width, y : rect.y},
{x : rect.x + rect.width, y : rect.y + rect.height},
{x : rect.x, y : rect.y + rect.height}
{x: rect.x, y: rect.y},
{x: rect.x + rect.width, y: rect.y},
{x: rect.x + rect.width, y: rect.y + rect.height},
{x: rect.x, y: rect.y + rect.height}
];
var minX, minY, maxX, maxY;
var trans = this.getTransform();
@@ -292,10 +293,10 @@
maxY = Math.max(maxY, transformed.y);
});
return {
x : Math.round(minX),
y : Math.round(minY),
width : Math.round(maxX - minX),
height : Math.round(maxY - minY)
x: Math.round(minX),
y: Math.round(minY),
width: Math.round(maxX - minX),
height: Math.round(maxY - minY)
};
},
_drawCachedSceneCanvas: function(context) {
@@ -344,7 +345,7 @@
imageData = filterContext.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
// apply filters to filter context
for (n=0; n<len; n++) {
for (n = 0; n < len; n++) {
filter = filters[n];
filter.call(this, imageData);
filterContext.putImageData(imageData, 0, 0);
@@ -514,7 +515,7 @@
handler.call(this, evt.evt);
});
},
removeEventListener : function(type) {
removeEventListener: function(type) {
this.off(type);
},
/**
@@ -622,22 +623,21 @@
setAttrs: function(config) {
var key, method;
if(config) {
for(key in config) {
if (key === CHILDREN) {
}
else {
method = SET + Konva.Util._capitalize(key);
// use setter if available
if(Konva.Util._isFunction(this[method])) {
this[method](config[key]);
}
// otherwise set directly
else {
this._setAttr(key, config[key]);
}
}
if(!config) {
return this;
}
for(key in config) {
if (key === CHILDREN) {
continue;
}
method = SET + Konva.Util._capitalize(key);
// use setter if available
if(Konva.Util._isFunction(this[method])) {
this[method](config[key]);
}
// otherwise set directly
else {
this._setAttr(key, config[key]);
}
}
return this;
@@ -731,7 +731,7 @@
*/
shouldDrawHit: function(canvas) {
var layer = this.getLayer();
return (canvas && canvas.isCache) || (layer && layer.hitGraphEnabled())
return (canvas && canvas.isCache) || (layer && layer.hitGraphEnabled())
&& this.isListening() && this.isVisible();
},
/**
@@ -877,7 +877,7 @@
y: this.attrs.y + it.getTranslation().y
};
this.setPosition({x:pos.x, y:pos.y});
this.setPosition({x: pos.x, y: pos.y});
this._setTransform(origTrans);
return this;
@@ -950,7 +950,7 @@
y += changeY;
}
this.setPosition({x:x, y:y});
this.setPosition({x: x, y: y});
return this;
},
_eachAncestorReverse: function(func, top) {
@@ -998,7 +998,7 @@
moveToTop: function() {
if (!this.parent) {
Konva.Util.warn('Node has no parent. moveToTop function is ignored.');
return;
return false;
}
var index = this.index;
this.parent.children.splice(index, 1);
@@ -1015,7 +1015,7 @@
moveUp: function() {
if (!this.parent) {
Konva.Util.warn('Node has no parent. moveUp function is ignored.');
return;
return false;
}
var index = this.index,
len = this.parent.getChildren().length;
@@ -1036,7 +1036,7 @@
moveDown: function() {
if (!this.parent) {
Konva.Util.warn('Node has no parent. moveDown function is ignored.');
return;
return false;
}
var index = this.index;
if(index > 0) {
@@ -1056,7 +1056,7 @@
moveToBottom: function() {
if (!this.parent) {
Konva.Util.warn('Node has no parent. moveToBottom function is ignored.');
return;
return false;
}
var index = this.index;
if(index > 0) {
@@ -1077,7 +1077,7 @@
setZIndex: function(zIndex) {
if (!this.parent) {
Konva.Util.warn('Node has no parent. zIndex parameter is ignored.');
return;
return false;
}
var index = this.index;
this.parent.children.splice(index, 1);
@@ -1450,9 +1450,6 @@
width: this.getWidth(),
height: this.getHeight()
};
},
getTransformedSize : function() {
},
getWidth: function() {
return this.attrs.width || 0;
@@ -1560,7 +1557,7 @@
* node.addName('selected');
* node.name(); // return 'red selected'
*/
addName : function(name) {
addName: function(name) {
if (!this.hasName(name)) {
var oldName = this.name();
var newName = oldName ? (oldName + ' ' + name) : name;
@@ -1579,7 +1576,7 @@
* node.hasName('red'); // return true
* node.hasName('selected'); // return false
*/
hasName : function(name) {
hasName: function(name) {
var names = (this.name() || '').split(/\s/g);
return names.indexOf(name) !== -1;
},
@@ -1595,7 +1592,7 @@
* node.hasName('selected'); // return false
* node.name(); // return 'red'
*/
removeName : function(name) {
removeName: function(name) {
var names = (this.name() || '').split(/\s/g);
var index = names.indexOf(name);
if (index !== -1) {
@@ -2117,7 +2114,7 @@
* node.listening('inherit');
*/
Konva.Factory.addGetterSetter(Konva.Node, 'filters', undefined, function(val) {this._filterUpToDate = false;return val;});
Konva.Factory.addGetterSetter(Konva.Node, 'filters', undefined, function(val) {this._filterUpToDate = false; return val; });
/**
* get/set filters. Filters are applied to cached canvases
* @name filters
@@ -2216,4 +2213,4 @@
});
Konva.Collection.mapMethods(Konva.Node);
})();
})(Konva);

248
src/Shape.js
View File

@@ -1,4 +1,5 @@
(function() {
(function(Konva) {
'use strict';
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
@@ -187,16 +188,16 @@
* circle.getSelfRect(); // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
*
*/
getSelfRect : function() {
getSelfRect: function() {
var size = this.getSize();
return {
x : this._centroid ? Math.round(-size.width / 2) : 0,
y : this._centroid ? Math.round(-size.height / 2) : 0,
width : size.width,
height : size.height
x: this._centroid ? Math.round(-size.width / 2) : 0,
y: this._centroid ? Math.round(-size.height / 2) : 0,
width: size.width,
height: size.height
};
},
getClientRect : function(skipTransform) {
getClientRect: function(skipTransform) {
var fillRect = this.getSelfRect();
var strokeWidth = (this.hasStroke() && this.strokeWidth()) || 0;
@@ -222,10 +223,10 @@
roundingOffset = 1;
}
var rect = {
width : width + roundingOffset,
height : height + roundingOffset,
x : -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetX, 0) + fillRect.x,
y : -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetY, 0) + fillRect.y
width: width + roundingOffset,
height: height + roundingOffset,
x: -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetX, 0) + fillRect.x,
y: -Math.round(strokeWidth / 2 + blurRadius) + Math.min(shadowOffsetY, 0) + fillRect.y
};
if (!skipTransform) {
return this._transformedRect(rect);
@@ -242,94 +243,96 @@
hasStroke = this.hasStroke(),
stage, bufferCanvas, bufferContext;
if(this.isVisible()) {
if (cachedCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedSceneCanvas(context);
context.restore();
if(!this.isVisible()) {
return this;
}
if (cachedCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedSceneCanvas(context);
context.restore();
return this;
}
if (!drawFunc) {
return this;
}
context.save();
// if buffer canvas is needed
if (this._useBufferCanvas(caching)) {
stage = this.getStage();
bufferCanvas = stage.bufferCanvas;
bufferContext = bufferCanvas.getContext();
bufferContext.clear();
bufferContext.save();
bufferContext._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, bufferContext, top);
} else {
var m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
}
else if (drawFunc) {
context.save();
// if buffer canvas is needed
if (this._useBufferCanvas(caching)) {
stage = this.getStage();
bufferCanvas = stage.bufferCanvas;
bufferContext = bufferCanvas.getContext();
bufferContext.clear();
bufferContext.save();
bufferContext._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, bufferContext, top);
} else {
var m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
}
drawFunc.call(this, bufferContext);
bufferContext.restore();
drawFunc.call(this, bufferContext);
bufferContext.restore();
if (hasShadow && !canvas.hitCanvas) {
context.save();
context._applyShadow(this);
context._applyOpacity(this);
context.drawImage(bufferCanvas._canvas, 0, 0);
context.restore();
} else {
context._applyOpacity(this);
context.drawImage(bufferCanvas._canvas, 0, 0);
}
}
// if buffer canvas is not needed
else {
context._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
}
if (hasShadow && hasStroke && !canvas.hitCanvas) {
context.save();
// apply shadow
if (!caching) {
context._applyOpacity(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
// if shape has stroke we need to redraw shape
// otherwise we will see a shadow under stroke (and over fill)
// but I think this is unexpected behavior
if (this.hasFill() && this.getShadowForStrokeEnabled()) {
drawFunc.call(this, context);
}
} else if (hasShadow && !canvas.hitCanvas) {
context.save();
if (!caching) {
context._applyOpacity(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
} else {
if (!caching) {
context._applyOpacity(this);
}
drawFunc.call(this, context);
}
}
context.restore();
if (hasShadow && !canvas.hitCanvas) {
context.save();
context._applyShadow(this);
context._applyOpacity(this);
context.drawImage(bufferCanvas._canvas, 0, 0);
context.restore();
} else {
context._applyOpacity(this);
context.drawImage(bufferCanvas._canvas, 0, 0);
}
}
// if buffer canvas is not needed
else {
context._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
}
if (hasShadow && hasStroke && !canvas.hitCanvas) {
context.save();
// apply shadow
if (!caching) {
context._applyOpacity(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
// if shape has stroke we need to redraw shape
// otherwise we will see a shadow under stroke (and over fill)
// but I think this is unexpected behavior
if (this.hasFill() && this.getShadowForStrokeEnabled()) {
drawFunc.call(this, context);
}
} else if (hasShadow && !canvas.hitCanvas) {
context.save();
if (!caching) {
context._applyOpacity(this);
}
context._applyShadow(this);
drawFunc.call(this, context);
context.restore();
} else {
if (!caching) {
context._applyOpacity(this);
}
drawFunc.call(this, context);
}
}
context.restore();
return this;
},
drawHit: function(can, top, caching) {
@@ -340,34 +343,34 @@
cachedCanvas = this._cache.canvas,
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if(this.shouldDrawHit(canvas)) {
if (layer) {
layer.clearHitCache();
}
if (cachedHitCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedHitCanvas(context);
context.restore();
}
else if (drawFunc) {
context.save();
context._applyLineJoin(this);
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
}
drawFunc.call(this, context);
context.restore();
}
if(!this.shouldDrawHit(canvas)) {
return this;
}
if (layer) {
layer.clearHitCache();
}
if (cachedHitCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedHitCanvas(context);
context.restore();
return this;
}
if (!drawFunc) {
return this;
}
context.save();
context._applyLineJoin(this);
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
}
drawFunc.call(this, context);
context.restore();
return this;
},
/**
@@ -689,7 +692,6 @@
* @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
@@ -1014,7 +1016,6 @@
* @example
* // get fill pattern x
* var fillPatternX = shape.fillPatternX();
*
* // set fill pattern x
* shape.fillPatternX(20);
*/
@@ -1031,7 +1032,6 @@
* @example
* // get fill pattern y
* var fillPatternY = shape.fillPatternY();
*
* // set fill pattern y
* shape.fillPatternY(20);
*/
@@ -1603,4 +1603,4 @@
});
Konva.Collection.mapMethods(Konva.Shape);
})();
})(Konva);

20
src/Stage.js
View File

@@ -1,5 +1,5 @@
/*jshint unused:false */
(function() {
'use strict';
// CONSTANTS
var STAGE = 'Stage',
STRING = 'string',
@@ -168,7 +168,6 @@
obj = {};
}
obj.container = Konva.document.createElement(DIV);
return Konva.Container.prototype.clone.call(this, obj);
},
/**
@@ -330,7 +329,6 @@
this.content.style.height = height + PX;
this.bufferCanvas.setSize(width, height);
// this.bufferCanvas2.setSize(width, height);
this.bufferHitCanvas.setSize(width, height);
// set layer dimensions
@@ -354,7 +352,7 @@
for (var i = 0; i < arguments.length; i++) {
this.add(arguments[i]);
}
return;
return this;
}
Konva.Container.prototype.add.call(this, layer);
layer._setCanvasSize(this.width(), this.height());
@@ -407,18 +405,16 @@
}
},
_mousemove: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Konva.UA.ieMobile) {
return this._touchmove(evt);
}
// workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464
if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) {
return;
return null;
}
if (Konva.UA.mobile) {
return;
return null;
}
this._setPointerPosition(evt);
var dd = Konva.DD, shape;
@@ -466,12 +462,10 @@
}
},
_mousedown: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Konva.UA.ieMobile) {
return this._touchstart(evt);
}
if (!Konva.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
@@ -731,9 +725,6 @@
this.bufferCanvas = new Konva.SceneCanvas({
pixelRatio: 1
});
// this.bufferCanvas2 = new Konva.SceneCanvas({
// pixelRatio: 1
// });
this.bufferHitCanvas = new Konva.HitCanvas();
this._resizeDOM();
@@ -753,7 +744,7 @@
cache: function() {
Konva.Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.');
},
clearCache : function() {
clearCache: function() {
}
});
Konva.Util.extend(Konva.Stage, Konva.Container);
@@ -771,7 +762,6 @@
* @example
* // get container
* var container = stage.container();
*
* // set container
* var container = document.createElement('div');
* body.appendChild(container);

575
src/Tween.js
View File

@@ -1,4 +1,5 @@
(function() {
'use strict';
var blacklist = {
node: 1,
duration: 1,
@@ -14,290 +15,6 @@
idCounter = 0,
colorAttrs = ['fill', 'stroke', 'shadowColor'];
/**
* 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) {
var that = this,
node = config.node,
nodeId = node._id,
duration,
easing = config.easing || Konva.Easings.Linear,
yoyo = !!config.yoyo,
key;
if (typeof config.duration === 'undefined') {
duration = 1;
} else if (config.duration === 0) { // zero is bad value for duration
duration = 0.001;
} else {
duration = config.duration;
}
this.node = node;
this._id = idCounter++;
this.anim = new Konva.Animation(function() {
that.tween.onEnterFrame();
}, node.getLayer() || ((node instanceof Konva.Stage) ? node.getLayers() : null));
this.tween = new Tween(key, function(i) {
that._tweenFunc(i);
}, easing, 0, 1, duration * 1000, yoyo);
this._addListeners();
// init attrs map
if (!Konva.Tween.attrs[nodeId]) {
Konva.Tween.attrs[nodeId] = {};
}
if (!Konva.Tween.attrs[nodeId][this._id]) {
Konva.Tween.attrs[nodeId][this._id] = {};
}
// init tweens map
if (!Konva.Tween.tweens[nodeId]) {
Konva.Tween.tweens[nodeId] = {};
}
for (key in config) {
if (blacklist[key] === undefined) {
this._addAttr(key, config[key]);
}
}
this.reset();
// callbacks
this.onFinish = config.onFinish;
this.onReset = config.onReset;
};
// start/diff object = attrs.nodeId.tweenId.attr
Konva.Tween.attrs = {};
// tweenId = tweens.nodeId.attr
Konva.Tween.tweens = {};
Konva.Tween.prototype = {
_addAttr: function(key, end) {
var node = this.node,
nodeId = node._id,
start, diff, tweenId, n, len;
// remove conflict from tween map if it exists
tweenId = Konva.Tween.tweens[nodeId][key];
if (tweenId) {
delete Konva.Tween.attrs[nodeId][tweenId][key];
}
// add to tween map
start = node.getAttr(key);
if (Konva.Util._isArray(end)) {
diff = [];
len = end.length;
for (n=0; n<len; n++) {
diff.push(end[n] - start[n]);
}
} else if (colorAttrs.indexOf(key) !== -1) {
start = Konva.Util.colorToRGBA(start);
var endRGBA = Konva.Util.colorToRGBA(end);
diff = {
r : endRGBA.r - start.r,
g : endRGBA.g - start.g,
b : endRGBA.b - start.b,
a : endRGBA.a - start.a
};
} else {
diff = end - start;
}
Konva.Tween.attrs[nodeId][this._id][key] = {
start: start,
diff: diff
};
Konva.Tween.tweens[nodeId][key] = this._id;
},
_tweenFunc: function(i) {
var node = this.node,
attrs = Konva.Tween.attrs[node._id][this._id],
key, attr, start, diff, newVal, n, len;
for (key in attrs) {
attr = attrs[key];
start = attr.start;
diff = attr.diff;
if (Konva.Util._isArray(start)) {
newVal = [];
len = start.length;
for (n=0; n<len; n++) {
newVal.push(start[n] + (diff[n] * i));
}
} else if (colorAttrs.indexOf(key) !== -1) {
newVal = 'rgba(' +
Math.round(start.r + diff.r * i) + ',' +
Math.round(start.g + diff.g * i) + ',' +
Math.round(start.b + diff.b * i) + ',' +
(start.a + diff.a * i) + ')';
} else {
newVal = start + (diff * i);
}
node.setAttr(key, newVal);
}
},
_addListeners: function() {
var that = this;
// start listeners
this.tween.onPlay = function() {
that.anim.start();
};
this.tween.onReverse = function() {
that.anim.start();
};
// stop listeners
this.tween.onPause = function() {
that.anim.stop();
};
this.tween.onFinish = function() {
if (that.onFinish) {
that.onFinish();
}
};
this.tween.onReset = function() {
if (that.onReset) {
that.onReset();
}
};
},
/**
* play
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
play: function() {
this.tween.play();
return this;
},
/**
* reverse
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reverse: function() {
this.tween.reverse();
return this;
},
/**
* reset
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reset: function() {
this.tween.reset();
return this;
},
/**
* seek
* @method
* @memberof Konva.Tween.prototype
* @param {Integer} t time in seconds between 0 and the duration
* @returns {Tween}
*/
seek: function(t) {
this.tween.seek(t * 1000);
return this;
},
/**
* pause
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
pause: function() {
this.tween.pause();
return this;
},
/**
* finish
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
finish: function() {
this.tween.finish();
return this;
},
/**
* destroy
* @method
* @memberof Konva.Tween.prototype
*/
destroy: function() {
var nodeId = this.node._id,
thisId = this._id,
attrs = Konva.Tween.tweens[nodeId],
key;
this.pause();
for (key in attrs) {
delete Konva.Tween.tweens[nodeId][key];
}
delete Konva.Tween.attrs[nodeId][thisId];
}
};
/**
* 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) {
var onFinish = params.onFinish;
params.node = this;
params.onFinish = function() {
tween.destroy();
if (onFinish) {
onFinish();
}
};
var tween = new Konva.Tween(params);
tween.play();
};
var Tween = function(prop, propFunc, func, begin, finish, duration, yoyo) {
this.prop = prop;
this.propFunc = propFunc;
@@ -415,6 +132,290 @@
}
};
/**
* 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) {
var that = this,
node = config.node,
nodeId = node._id,
duration,
easing = config.easing || Konva.Easings.Linear,
yoyo = !!config.yoyo,
key;
if (typeof config.duration === 'undefined') {
duration = 1;
} else if (config.duration === 0) { // zero is bad value for duration
duration = 0.001;
} else {
duration = config.duration;
}
this.node = node;
this._id = idCounter++;
this.anim = new Konva.Animation(function() {
that.tween.onEnterFrame();
}, node.getLayer() || ((node instanceof Konva.Stage) ? node.getLayers() : null));
this.tween = new Tween(key, function(i) {
that._tweenFunc(i);
}, easing, 0, 1, duration * 1000, yoyo);
this._addListeners();
// init attrs map
if (!Konva.Tween.attrs[nodeId]) {
Konva.Tween.attrs[nodeId] = {};
}
if (!Konva.Tween.attrs[nodeId][this._id]) {
Konva.Tween.attrs[nodeId][this._id] = {};
}
// init tweens map
if (!Konva.Tween.tweens[nodeId]) {
Konva.Tween.tweens[nodeId] = {};
}
for (key in config) {
if (blacklist[key] === undefined) {
this._addAttr(key, config[key]);
}
}
this.reset();
// callbacks
this.onFinish = config.onFinish;
this.onReset = config.onReset;
};
// start/diff object = attrs.nodeId.tweenId.attr
Konva.Tween.attrs = {};
// tweenId = tweens.nodeId.attr
Konva.Tween.tweens = {};
Konva.Tween.prototype = {
_addAttr: function(key, end) {
var node = this.node,
nodeId = node._id,
start, diff, tweenId, n, len;
// remove conflict from tween map if it exists
tweenId = Konva.Tween.tweens[nodeId][key];
if (tweenId) {
delete Konva.Tween.attrs[nodeId][tweenId][key];
}
// add to tween map
start = node.getAttr(key);
if (Konva.Util._isArray(end)) {
diff = [];
len = end.length;
for (n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
}
} else if (colorAttrs.indexOf(key) !== -1) {
start = Konva.Util.colorToRGBA(start);
var endRGBA = Konva.Util.colorToRGBA(end);
diff = {
r: endRGBA.r - start.r,
g: endRGBA.g - start.g,
b: endRGBA.b - start.b,
a: endRGBA.a - start.a
};
} else {
diff = end - start;
}
Konva.Tween.attrs[nodeId][this._id][key] = {
start: start,
diff: diff
};
Konva.Tween.tweens[nodeId][key] = this._id;
},
_tweenFunc: function(i) {
var node = this.node,
attrs = Konva.Tween.attrs[node._id][this._id],
key, attr, start, diff, newVal, n, len;
for (key in attrs) {
attr = attrs[key];
start = attr.start;
diff = attr.diff;
if (Konva.Util._isArray(start)) {
newVal = [];
len = start.length;
for (n = 0; n < len; n++) {
newVal.push(start[n] + (diff[n] * i));
}
} else if (colorAttrs.indexOf(key) !== -1) {
newVal = 'rgba(' +
Math.round(start.r + diff.r * i) + ',' +
Math.round(start.g + diff.g * i) + ',' +
Math.round(start.b + diff.b * i) + ',' +
(start.a + diff.a * i) + ')';
} else {
newVal = start + (diff * i);
}
node.setAttr(key, newVal);
}
},
_addListeners: function() {
var that = this;
// start listeners
this.tween.onPlay = function() {
that.anim.start();
};
this.tween.onReverse = function() {
that.anim.start();
};
// stop listeners
this.tween.onPause = function() {
that.anim.stop();
};
this.tween.onFinish = function() {
if (that.onFinish) {
that.onFinish.call(that);
}
};
this.tween.onReset = function() {
if (that.onReset) {
that.onReset();
}
};
},
/**
* play
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
play: function() {
this.tween.play();
return this;
},
/**
* reverse
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reverse: function() {
this.tween.reverse();
return this;
},
/**
* reset
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
reset: function() {
this.tween.reset();
return this;
},
/**
* seek
* @method
* @memberof Konva.Tween.prototype
* @param {Integer} t time in seconds between 0 and the duration
* @returns {Tween}
*/
seek: function(t) {
this.tween.seek(t * 1000);
return this;
},
/**
* pause
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
pause: function() {
this.tween.pause();
return this;
},
/**
* finish
* @method
* @memberof Konva.Tween.prototype
* @returns {Tween}
*/
finish: function() {
this.tween.finish();
return this;
},
/**
* destroy
* @method
* @memberof Konva.Tween.prototype
*/
destroy: function() {
var nodeId = this.node._id,
thisId = this._id,
attrs = Konva.Tween.tweens[nodeId],
key;
this.pause();
for (key in attrs) {
delete Konva.Tween.tweens[nodeId][key];
}
delete Konva.Tween.attrs[nodeId][thisId];
}
};
/**
* 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) {
var onFinish = params.onFinish;
params.node = this;
params.onFinish = function() {
this.destroy();
if (onFinish) {
onFinish();
}
};
var tween = new Konva.Tween(params);
tween.play();
};
/*
* These eases were ported from an Adobe Flash tweening library to JavaScript
* by Xaric
@@ -466,7 +467,7 @@
if(t === 0) {
return b;
}
if((t /= d) == 1) {
if((t /= d) === 1) {
return b + c;
}
if(!p) {
@@ -492,7 +493,7 @@
if(t === 0) {
return b;
}
if((t /= d) == 1) {
if((t /= d) === 1) {
return b + c;
}
if(!p) {
@@ -518,7 +519,7 @@
if(t === 0) {
return b;
}
if((t /= d / 2) == 2) {
if((t /= d / 2) === 2) {
return b + c;
}
if(!p) {

48
src/Util.js
View File

@@ -1,4 +1,6 @@
/*eslint-disable eqeqeq, no-cond-assign, no-empty*/
(function() {
'use strict';
/**
* Collection constructor. Collection extends
* Array. This class is used in conjunction with {@link Konva.Container#get}
@@ -445,7 +447,7 @@
tan: [210, 180, 140],
teal: [0, 128, 128],
thistle: [216, 191, 216],
transparent: [255,255,255,0],
transparent: [255, 255, 255, 0],
tomato: [255, 99, 71],
turquoise: [64, 224, 208],
violet: [238, 130, 238],
@@ -473,16 +475,16 @@
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_isObject: function(obj) {
return (!!obj && obj.constructor == Object);
return (!!obj && obj.constructor === Object);
},
_isArray: function(obj) {
return Object.prototype.toString.call(obj) == OBJECT_ARRAY;
return Object.prototype.toString.call(obj) === OBJECT_ARRAY;
},
_isNumber: function(obj) {
return Object.prototype.toString.call(obj) == OBJECT_NUMBER;
return Object.prototype.toString.call(obj) === OBJECT_NUMBER;
},
_isString: function(obj) {
return Object.prototype.toString.call(obj) == OBJECT_STRING;
return Object.prototype.toString.call(obj) === OBJECT_STRING;
},
// 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
@@ -544,7 +546,7 @@
return canvas;
},
isBrowser: function() {
return (typeof exports !== 'object');
return (typeof exports !== 'object');
},
_isInDocument: function(el) {
while(el = el.parentNode) {
@@ -560,7 +562,7 @@
util = Konva.Util,
n, val;
for (n=0; n<len; n++) {
for (n = 0; n < len; n++) {
val = arr[n];
if (util._isNumber(val)) {
val = Math.round(val * 1000) / 1000;
@@ -695,7 +697,7 @@
}
// rgb string
else if (color.substr(0, 4) === RGB_PAREN) {
rgb = RGB_REGEX.exec(color.replace(/ /g,''));
rgb = RGB_REGEX.exec(color.replace(/ /g, ''));
return {
r: parseInt(rgb[1], 10),
g: parseInt(rgb[2], 10),
@@ -713,7 +715,7 @@
},
// convert any color string to RGBA object
// from https://github.com/component/color-parser
colorToRGBA : function(str) {
colorToRGBA: function(str) {
str = str || 'black';
return Konva.Util._namedColorToRBA(str)
|| Konva.Util._hex3ColorToRGBA(str)
@@ -722,10 +724,10 @@
|| Konva.Util._rgbaColorToRGBA(str);
},
// Parse named css color. Like "green"
_namedColorToRBA : function(str) {
_namedColorToRBA: function(str) {
var c = COLORS[str.toLowerCase()];
if (!c) {
return;
return null;
}
return {
r: c[0],
@@ -735,7 +737,7 @@
};
},
// Parse rgb(n, n, n)
_rgbColorToRGBA : function(str) {
_rgbColorToRGBA: function(str) {
if (str.indexOf('rgb(') === 0) {
str = str.match(/rgb\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
@@ -748,7 +750,7 @@
}
},
// Parse rgba(n, n, n, n)
_rgbaColorToRGBA : function(str) {
_rgbaColorToRGBA: function(str) {
if (str.indexOf('rgba(') === 0) {
str = str.match(/rgba\(([^)]+)\)/)[1];
var parts = str.split(/ *, */).map(Number);
@@ -762,7 +764,7 @@
},
// Parse #nnnnnn
_hex6ColorToRGBA : function(str) {
_hex6ColorToRGBA: function(str) {
if ((str[0] === '#') && (str.length === 7)) {
return {
r: parseInt(str.slice(1, 3), 16),
@@ -773,7 +775,7 @@
}
},
// Parse #nnn
_hex3ColorToRGBA : function(str) {
_hex3ColorToRGBA: function(str) {
if ((str[0] === '#') && (str.length === 4)) {
return {
r: parseInt(str[1] + str[1], 16),
@@ -839,11 +841,11 @@
this.constructor = child;
}
Ctor.prototype = parent.prototype;
var old_proto = child.prototype;
var oldProto = child.prototype;
child.prototype = new Ctor();
for (var key in old_proto) {
if (old_proto.hasOwnProperty(key)) {
child.prototype[key] = old_proto[key];
for (var key in oldProto) {
if (oldProto.hasOwnProperty(key)) {
child.prototype[key] = oldProto[key];
}
}
child.__super__ = parent.prototype;
@@ -874,19 +876,19 @@
p2x = x1 + fb * (x2 - x0),
p2y = y1 + fb * (y2 - y0);
return [p1x ,p1y, p2x, p2y];
return [p1x, p1y, p2x, p2y];
},
_expandPoints: function(p, tension) {
var len = p.length,
allPoints = [],
n, cp;
for (n=2; n<len-2; n+=2) {
cp = Konva.Util._getControlPoints(p[n-2], p[n-1], p[n], p[n+1], p[n+2], p[n+3], tension);
for (n = 2; n < len - 2; n += 2) {
cp = Konva.Util._getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
allPoints.push(cp[0]);
allPoints.push(cp[1]);
allPoints.push(p[n]);
allPoints.push(p[n+1]);
allPoints.push(p[n + 1]);
allPoints.push(cp[2]);
allPoints.push(cp[3]);
}

98
src/filters/Blur.js
View File

@@ -1,6 +1,6 @@
/*
the Gauss filter
master repo: https://github.com/pavelpower/konvajsGaussFilter/
master repo: https://github.com/pavelpower/kineticjsGaussFilter
*/
(function() {
/*
@@ -53,22 +53,22 @@
}
var mul_table = [
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259
512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259
];
var shg_table = [
@@ -102,9 +102,9 @@
pr, pg, pb, pa, rbs;
var div = radius + radius + 1,
widthMinus1 = width - 1,
widthMinus1 = width - 1,
heightMinus1 = height - 1,
radiusPlus1 = radius + 1,
radiusPlus1 = radius + 1,
sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2,
stackStart = new BlurStack(),
stackEnd = null,
@@ -116,7 +116,7 @@
for ( i = 1; i < div; i++ ) {
stack = stack.next = new BlurStack();
if ( i == radiusPlus1 ){
if ( i === radiusPlus1 ){
stackEnd = stack;
}
}
@@ -130,9 +130,9 @@
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );
g_out_sum = radiusPlus1 * ( pg = pixels[yi + 1] );
b_out_sum = radiusPlus1 * ( pb = pixels[yi + 2] );
a_out_sum = radiusPlus1 * ( pa = pixels[yi + 3] );
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
@@ -154,9 +154,9 @@
{
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;
g_sum += ( stack.g = ( pg = pixels[p + 1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[p + 2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[p + 3])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
@@ -171,15 +171,15 @@
stackOut = stackEnd;
for ( x = 0; x < width; x++ )
{
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
if ( pa !== 0 )
{
pa = 255 / pa;
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
pixels[yi + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
pixels[yi + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
} else {
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
}
r_sum -= r_out_sum;
@@ -192,12 +192,12 @@
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
p = (yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
r_in_sum += ( stackIn.r = pixels[p]);
g_in_sum += ( stackIn.g = pixels[p+1]);
b_in_sum += ( stackIn.b = pixels[p+2]);
a_in_sum += ( stackIn.a = pixels[p+3]);
g_in_sum += ( stackIn.g = pixels[p + 1]);
b_in_sum += ( stackIn.b = pixels[p + 2]);
a_in_sum += ( stackIn.a = pixels[p + 3]);
r_sum += r_in_sum;
g_sum += g_in_sum;
@@ -230,9 +230,9 @@
yi = x << 2;
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);
g_out_sum = radiusPlus1 * ( pg = pixels[yi + 1]);
b_out_sum = radiusPlus1 * ( pb = pixels[yi + 2]);
a_out_sum = radiusPlus1 * ( pa = pixels[yi + 3]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
@@ -257,9 +257,9 @@
yi = ( yp + x ) << 2;
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;
g_sum += ( stack.g = ( pg = pixels[yi + 1])) * rbs;
b_sum += ( stack.b = ( pb = pixels[yi + 2])) * rbs;
a_sum += ( stack.a = ( pa = pixels[yi + 3])) * rbs;
r_in_sum += pr;
g_in_sum += pg;
@@ -280,15 +280,15 @@
for ( y = 0; y < height; y++ )
{
p = yi << 2;
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
if ( pa > 0 )
{
pa = 255 / pa;
pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa;
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa;
pixels[p + 1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
pixels[p + 2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
} else {
pixels[p] = pixels[p+1] = pixels[p+2] = 0;
pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
}
r_sum -= r_out_sum;
@@ -304,9 +304,9 @@
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));
g_sum += ( g_in_sum += ( stackIn.g = pixels[p + 1]));
b_sum += ( b_in_sum += ( stackIn.b = pixels[p + 2]));
a_sum += ( a_in_sum += ( stackIn.a = pixels[p + 3]));
stackIn = stackIn.next;

26
src/filters/Emboss.js
View File

@@ -30,7 +30,7 @@
data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w*4,
w4 = w * 4,
y = h;
switch (direction) {
@@ -69,7 +69,7 @@
}
do {
var offsetY = (y-1)*w4;
var offsetY = (y - 1) * w4;
var otherY = dirY;
if (y + otherY < 1){
@@ -79,11 +79,11 @@
otherY = 0;
}
var offsetYOther = (y-1+otherY)*w*4;
var offsetYOther = (y - 1 + otherY) * w * 4;
var x = w;
do {
var offset = offsetY + (x-1)*4;
var offset = offsetY + (x - 1) * 4;
var otherX = dirX;
if (x + otherX < 1){
@@ -93,11 +93,11 @@
otherX = 0;
}
var offsetOther = offsetYOther + (x-1+otherX)*4;
var offsetOther = offsetYOther + (x - 1 + otherX) * 4;
var dR = data[offset] - data[offsetOther];
var dG = data[offset+1] - data[offsetOther+1];
var dB = data[offset+2] - data[offsetOther+2];
var dG = data[offset + 1] - data[offsetOther + 1];
var dB = data[offset + 2] - data[offsetOther + 2];
var dif = dR;
var absDif = dif > 0 ? dif : -dif;
@@ -116,12 +116,12 @@
if (blend) {
var r = data[offset] + dif;
var g = data[offset+1] + dif;
var b = data[offset+2] + dif;
var g = data[offset + 1] + dif;
var b = data[offset + 2] + dif;
data[offset] = (r > 255) ? 255 : (r < 0 ? 0 : r);
data[offset+1] = (g > 255) ? 255 : (g < 0 ? 0 : g);
data[offset+2] = (b > 255) ? 255 : (b < 0 ? 0 : b);
data[offset + 1] = (g > 255) ? 255 : (g < 0 ? 0 : g);
data[offset + 2] = (b > 255) ? 255 : (b < 0 ? 0 : b);
} else {
var grey = greyLevel - dif;
if (grey < 0) {
@@ -130,7 +130,7 @@
grey = 255;
}
data[offset] = data[offset+1] = data[offset+2] = grey;
data[offset] = data[offset + 1] = data[offset + 2] = grey;
}
} while (--x);
@@ -178,5 +178,3 @@
* @returns {Boolean}
*/
})();

38
src/filters/Enhance.js
View File

@@ -68,29 +68,29 @@
if( gMax === gMin ){ gMax = 255; gMin = 0; }
if( bMax === bMin ){ bMax = 255; bMin = 0; }
var rMid, rGoalMax,rGoalMin,
gMid, gGoalMax,gGoalMin,
bMid, bGoalMax,bGoalMin;
var rMid, rGoalMax, rGoalMin,
gMid, gGoalMax, gGoalMin,
bMid, bGoalMax, bGoalMin;
// If the enhancement is positive - stretch the histogram
if ( enhanceAmount > 0 ){
rGoalMax = rMax + enhanceAmount*(255-rMax);
rGoalMin = rMin - enhanceAmount*(rMin-0);
gGoalMax = gMax + enhanceAmount*(255-gMax);
gGoalMin = gMin - enhanceAmount*(gMin-0);
bGoalMax = bMax + enhanceAmount*(255-bMax);
bGoalMin = bMin - enhanceAmount*(bMin-0);
// If the enhancement is negative - compress the histogram
rGoalMax = rMax + enhanceAmount * (255 - rMax);
rGoalMin = rMin - enhanceAmount * (rMin - 0);
gGoalMax = gMax + enhanceAmount * (255 - gMax);
gGoalMin = gMin - enhanceAmount * (gMin - 0);
bGoalMax = bMax + enhanceAmount * (255 - bMax);
bGoalMin = bMin - enhanceAmount * (bMin - 0);
// If the enhancement is negative - compress the histogram
} else {
rMid = (rMax + rMin)*0.5;
rGoalMax = rMax + enhanceAmount*(rMax-rMid);
rGoalMin = rMin + enhanceAmount*(rMin-rMid);
gMid = (gMax + gMin)*0.5;
gGoalMax = gMax + enhanceAmount*(gMax-gMid);
gGoalMin = gMin + enhanceAmount*(gMin-gMid);
bMid = (bMax + bMin)*0.5;
bGoalMax = bMax + enhanceAmount*(bMax-bMid);
bGoalMin = bMin + enhanceAmount*(bMin-bMid);
rMid = (rMax + rMin) * 0.5;
rGoalMax = rMax + enhanceAmount * (rMax - rMid);
rGoalMin = rMin + enhanceAmount * (rMin - rMid);
gMid = (gMax + gMin) * 0.5;
gGoalMax = gMax + enhanceAmount * (gMax - gMid);
gGoalMin = gMin + enhanceAmount * (gMin - gMid);
bMid = (bMax + bMin) * 0.5;
bGoalMax = bMax + enhanceAmount * (bMax - bMid);
bGoalMin = bMin + enhanceAmount * (bMin - bMid);
}
// Pass 2 - remap everything, except the alpha

44
src/filters/HSL.js
View File

@@ -45,9 +45,9 @@
var data = imageData.data,
nPixels = data.length,
v = 1,
s = Math.pow(2,this.saturation()),
s = Math.pow(2, this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
l = this.luminance()*127,
l = this.luminance() * 127,
i;
// Basis for the technique used:
@@ -62,31 +62,31 @@
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
var vsu = v * s * Math.cos(h * Math.PI / 180),
vsw = v * s * Math.sin(h * Math.PI / 180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*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 rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.330 * vsw,
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
gg = 0.587 * v + 0.413 * vsu + 0.035 * 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 r,g,b,a;
var r, g, b, a;
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
r = data[i + 0];
g = data[i + 1];
b = data[i + 2];
a = data[i + 3];
data[i+0] = rr*r + rg*g + rb*b + l;
data[i+1] = gr*r + gg*g + gb*b + l;
data[i+2] = br*r + bg*g + bb*b + l;
data[i+3] = a; // alpha
data[i + 0] = rr * r + rg * g + rb * b + l;
data[i + 1] = gr * r + gg * g + gb * b + l;
data[i + 2] = br * r + bg * g + bb * b + l;
data[i + 3] = a; // alpha
}
};
})();

44
src/filters/HSV.js
View File

@@ -15,8 +15,8 @@
Konva.Filters.HSV = function (imageData) {
var data = imageData.data,
nPixels = data.length,
v = Math.pow(2,this.value()),
s = Math.pow(2,this.saturation()),
v = Math.pow(2, this.value()),
s = Math.pow(2, this.saturation()),
h = Math.abs((this.hue()) + 360) % 360,
i;
@@ -32,31 +32,31 @@
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v*s*Math.cos(h*Math.PI/180),
vsw = v*s*Math.sin(h*Math.PI/180);
var vsu = v * s * Math.cos(h * Math.PI / 180),
vsw = v * s * Math.sin(h * Math.PI / 180);
// (result spot)(source spot)
var rr = 0.299*v+0.701*vsu+0.167*vsw,
rg = 0.587*v-0.587*vsu+0.330*vsw,
rb = 0.114*v-0.114*vsu-0.497*vsw;
var gr = 0.299*v-0.299*vsu-0.328*vsw,
gg = 0.587*v+0.413*vsu+0.035*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 rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.330 * vsw,
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
gg = 0.587 * v + 0.413 * vsu + 0.035 * 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 r,g,b,a;
var r, g, b, a;
for (i = 0; i < nPixels; i += 4) {
r = data[i+0];
g = data[i+1];
b = data[i+2];
a = data[i+3];
r = data[i + 0];
g = data[i + 1];
b = data[i + 2];
a = data[i + 3];
data[i+0] = rr*r + rg*g + rb*b;
data[i+1] = gr*r + gg*g + gb*b;
data[i+2] = br*r + bg*g + bb*b;
data[i+3] = a; // alpha
data[i + 0] = rr * r + rg * g + rb * b;
data[i + 1] = gr * r + gg * g + gb * b;
data[i + 2] = br * r + bg * g + bb * b;
data[i + 3] = a; // alpha
}
};

25
src/filters/Kaleidoscope.js
View File

@@ -1,4 +1,3 @@
/*jshint newcap:false */
(function () {
/*
@@ -17,7 +16,7 @@
* default is in the middle
*/
var ToPolar = function(src,dst,opt){
var ToPolar = function(src, dst, opt){
var srcPixels = src.data,
dstPixels = dst.data,
@@ -25,7 +24,7 @@
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, x, y, r=0,g=0,b=0,a=0;
i, x, y, r=0, g=0, b=0, a=0;
// Find the largest radius
var rad, rMax = Math.sqrt( xMid*xMid + yMid*yMid );
@@ -86,7 +85,7 @@
* 0 is no rotation, 360 degrees is a full rotation
*/
var FromPolar = function(src,dst,opt){
var FromPolar = function(src, dst, opt){
var srcPixels = src.data,
dstPixels = dst.data,
@@ -94,7 +93,7 @@
ySize = src.height,
xMid = opt.polarCenterX || xSize/2,
yMid = opt.polarCenterY || ySize/2,
i, x, y, dx, dy, r=0,g=0,b=0,a=0;
i, x, y, dx, dy, r=0, g=0, b=0, a=0;
// Find the largest radius
@@ -122,7 +121,7 @@
dx = x - xMid;
dy = y - yMid;
radius = Math.sqrt(dx*dx + dy*dy)*rSize/rMax;
theta = (Math.atan2(dy,dx)*180/Math.PI + 360 + phaseShift)%360;
theta = (Math.atan2(dy, dx)*180/Math.PI + 360 + phaseShift)%360;
theta = theta*tSize/360;
x1 = Math.floor(theta);
y1 = Math.floor(radius);
@@ -165,27 +164,27 @@
var xSize = imageData.width,
ySize = imageData.height;
var x,y,xoff,i, r,g,b,a, srcPos, dstPos;
var x, y, xoff, i, r, g, b, a, srcPos, dstPos;
var power = Math.round( this.kaleidoscopePower() );
var angle = Math.round( this.kaleidoscopeAngle() );
var offset = Math.floor(xSize*(angle%360)/360);
if( power < 1 ){return;}
if( power < 1 ){return; }
// Work with our shared buffer canvas
tempCanvas.width = xSize;
tempCanvas.height = ySize;
var scratchData = tempCanvas.getContext('2d').getImageData(0,0,xSize,ySize);
var scratchData = tempCanvas.getContext('2d').getImageData(0, 0, xSize, ySize);
// Convert thhe original to polar coordinates
ToPolar( imageData, scratchData, {
polarCenterX:xSize/2,
polarCenterY:ySize/2
polarCenterX: xSize/2,
polarCenterY: ySize/2
});
// Determine how big each section will be, if it's too small
// make it bigger
var minSectionSize = xSize / Math.pow(2,power);
var minSectionSize = xSize / Math.pow(2, power);
while( minSectionSize <= 8){
minSectionSize = minSectionSize*2;
power -= 1;
@@ -241,7 +240,7 @@
}
// Convert back from polar coordinates
FromPolar(scratchData,imageData,{polarRotation:0});
FromPolar(scratchData, imageData, {polarRotation: 0});
};
/**

2
src/filters/RGB.js
View File

@@ -22,7 +22,7 @@
for (i = 0; i < nPixels; i += 4) {
brightness = (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2])/255;
data[i ] = brightness*red; // r
data[i] = brightness*red; // r
data[i + 1] = brightness*green; // g
data[i + 2] = brightness*blue; // b
data[i + 3] = data[i + 3]; // alpha

10
src/plugins/Arrow.js
View File

@@ -26,24 +26,24 @@
};
Konva.Arrow.prototype = {
____init : function(config) {
____init: function(config) {
// call super constructor
Konva.Line.call(this, config);
this.className = 'Arrow';
},
_sceneFunc : function(ctx) {
_sceneFunc: function(ctx) {
var PI2 = Math.PI * 2;
var points = this.points();
var n = points.length;
var dx = points[n-2] - points[n-4];
var dy = points[n-1] - points[n-3];
var dx = points[n - 2] - points[n - 4];
var dy = points[n - 1] - points[n - 3];
var radians = (Math.atan2(dy, dx) + PI2) % PI2;
var length = this.pointerLength();
var width = this.pointerWidth();
ctx.save();
ctx.beginPath();
ctx.translate(points[n-2], points[n-1]);
ctx.translate(points[n - 2], points[n - 1]);
ctx.rotate(radians);
ctx.moveTo(0, 0);
ctx.lineTo(-length, width / 2);

16
src/plugins/Label.js
View File

@@ -187,7 +187,7 @@
cornerRadius = this.getCornerRadius();
context.beginPath();
context.moveTo(0,0);
context.moveTo(0, 0);
if (pointerDirection === UP) {
context.lineTo((width - pointerWidth)/2, 0);
@@ -242,7 +242,7 @@
context.closePath();
context.fillStrokeShape(this);
},
getSelfRect : function() {
getSelfRect: function() {
var x = 0,
y = 0,
pointerWidth = this.getPointerWidth(),
@@ -254,20 +254,20 @@
if (direction === UP) {
y -= pointerHeight;
height += pointerHeight;
} else if (direction === DOWN) {
} else if (direction === DOWN) {
height += pointerHeight;
} else if (direction === LEFT) {
// ARGH!!! I have no idea why should I used magic 1.5!!!!!!!!!
x -= pointerWidth * 1.5;
width += pointerWidth;
} else if (direction === RIGHT) {
width += pointerWidth * 1.5;
width += pointerWidth * 1.5;
}
return {
x : x,
y : y,
width : width,
height : height
x: x,
y: y,
width: width,
height: height
};
}
};

15
src/plugins/Path.js
View File

@@ -1,3 +1,4 @@
/*eslint-disable no-shadow*/
(function () {
/**
* Path constructor.
@@ -90,7 +91,7 @@
context.strokeShape(this);
}
},
getSelfRect : function() {
getSelfRect: function() {
var points = [];
this.dataArray.forEach(function(data) {
points = points.concat(data.points);
@@ -99,7 +100,7 @@
var maxX = points[0];
var minY = points[0];
var maxY = points[0];
var x,y;
var x, y;
for (var i = 0; i<points.length / 2; i++) {
x = points[i * 2]; y = points[i * 2 + 1];
minX = Math.min(minX, x);
@@ -108,10 +109,10 @@
maxY = Math.max(maxY, y);
}
return {
x : Math.round(minX),
y : Math.round(minY),
width : Math.round(maxX - minX),
height : Math.round(maxY - minY)
x: Math.round(minX),
y: Math.round(minY),
width: Math.round(maxX - minX),
height: Math.round(maxY - minY)
};
}
};
@@ -332,7 +333,7 @@
// After closing the path move the current position
// to the the first point of the path (if any).
if(ca.length>2 && ca[ca.length-1].command==='z'){
for(var idx=ca.length-2;idx>=0;idx--){
for(var idx=ca.length-2; idx>=0; idx--){
if(ca[idx].command==='M'){
cpx=ca[idx].points[0]+dx;
cpy=ca[idx].points[1]+dy;

2
src/plugins/RegularPolygon.js
View File

@@ -25,7 +25,7 @@
};
Konva.RegularPolygon.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

2
src/plugins/Star.js
View File

@@ -27,7 +27,7 @@
};
Konva.Star.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

26
src/plugins/TextPath.js
View File

@@ -161,16 +161,16 @@
currentT = 0;
var pathData = that.dataArray;
for(var i = pIndex + 1; i < pathData.length; i++) {
if(pathData[i].pathLength > 0) {
pIndex = i;
for(var j = pIndex + 1; j < pathData.length; j++) {
if(pathData[j].pathLength > 0) {
pIndex = j;
return pathData[i];
return pathData[j];
}
else if(pathData[i].command == 'M') {
else if(pathData[j].command === 'M') {
p0 = {
x: pathData[i].points[0],
y: pathData[i].points[1]
x: pathData[j].points[0],
y: pathData[j].points[1]
};
}
}
@@ -322,7 +322,7 @@
p0 = p1;
}
},
getSelfRect : function() {
getSelfRect: function() {
var points = [];
var fontSize = this.fontSize();
@@ -336,7 +336,7 @@
var maxX = points[0];
var minY = points[0];
var maxY = points[0];
var x,y;
var x, y;
for (var i = 0; i<points.length / 2; i++) {
x = points[i * 2]; y = points[i * 2 + 1];
minX = Math.min(minX, x);
@@ -345,10 +345,10 @@
maxY = Math.max(maxY, y);
}
return {
x : Math.round(minX) - fontSize,
y : Math.round(minY) - fontSize,
width : Math.round(maxX - minX) + fontSize * 2,
height : Math.round(maxY - minY) + fontSize * 2
x: Math.round(minX) - fontSize,
y: Math.round(minY) - fontSize,
width: Math.round(maxX - minX) + fontSize * 2,
height: Math.round(maxY - minY) + fontSize * 2
};
}
};

2
src/shapes/Arc.js
View File

@@ -27,7 +27,7 @@
};
Konva.Arc.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

2
src/shapes/Circle.js
View File

@@ -26,7 +26,7 @@
};
Konva.Circle.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

2
src/shapes/Ellipse.js
View File

@@ -25,7 +25,7 @@
};
Konva.Ellipse.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

40
src/shapes/Line.js
View File

@@ -66,13 +66,13 @@
}
if (!closed) {
context.quadraticCurveTo(tp[len-2], tp[len-1], points[length-2], points[length-1]);
context.quadraticCurveTo(tp[len - 2], tp[len - 1], points[length - 2], points[length - 1]);
}
}
// no tension
else {
for(n = 2; n < length; n+=2) {
context.lineTo(points[n], points[n+1]);
for(n = 2; n < length; n += 2) {
context.lineTo(points[n], points[n + 1]);
}
}
@@ -103,8 +103,8 @@
tension = this.getTension(),
util = Konva.Util,
firstControlPoints = util._getControlPoints(
p[len-2],
p[len-1],
p[len - 2],
p[len - 1],
p[0],
p[1],
p[2],
@@ -112,10 +112,10 @@
tension
),
lastControlPoints = util._getControlPoints(
p[len-4],
p[len-3],
p[len-2],
p[len-1],
p[len - 4],
p[len - 3],
p[len - 2],
p[len - 1],
p[0],
p[1],
tension
@@ -129,8 +129,8 @@
.concat([
lastControlPoints[0],
lastControlPoints[1],
p[len-2],
p[len-1],
p[len - 2],
p[len - 1],
lastControlPoints[2],
lastControlPoints[3],
firstControlPoints[0],
@@ -141,14 +141,14 @@
return tp;
},
getWidth : function() {
getWidth: function() {
return this.getSelfRect().width;
},
getHeight : function() {
getHeight: function() {
return this.getSelfRect().height;
},
// overload size detection
getSelfRect : function() {
getSelfRect: function() {
var points;
if (this.getTension() !== 0) {
points = this._getTensionPoints();
@@ -159,8 +159,8 @@
var maxX = points[0];
var minY = points[0];
var maxY = points[0];
var x,y;
for (var i = 0; i<points.length / 2; i++) {
var x, y;
for (var i = 0; i < points.length / 2; i++) {
x = points[i * 2]; y = points[i * 2 + 1];
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
@@ -168,10 +168,10 @@
maxY = Math.max(maxY, y);
}
return {
x : Math.round(minX),
y : Math.round(minY),
width : Math.round(maxX - minX),
height : Math.round(maxY - minY)
x: Math.round(minX),
y: Math.round(minY),
width: Math.round(maxX - minX),
height: Math.round(maxY - minY)
};
}
};

1
src/shapes/Rect.js
View File

@@ -32,7 +32,6 @@
width = this.getWidth(),
height = this.getHeight();
context.beginPath();
if(!cornerRadius) {

6
src/shapes/Ring.js
View File

@@ -1,7 +1,6 @@
(function() {
// the 0.0001 offset fixes a bug in Chrome 27
var PIx2 = (Math.PI * 2) - 0.0001;
/**
* Ring constructor
* @constructor
@@ -26,7 +25,7 @@
};
Konva.Ring.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);
@@ -63,7 +62,7 @@
this.setOuterRadius(height / 2);
}
},
setOuterRadius : function(val) {
setOuterRadius: function(val) {
this._setAttr('outerRadius', val);
this.setWidth(val * 2);
this.setHeight(val * 2);
@@ -88,7 +87,6 @@
* // set inner radius
* ring.innerRadius(20);
*/
Konva.Factory.addGetter(Konva.Ring, 'outerRadius', 0);
Konva.Factory.addOverloadedGetterSetter(Konva.Ring, 'outerRadius');

8
src/shapes/Sprite.js
View File

@@ -88,9 +88,9 @@
ix4 = index * 4,
set = this.getAnimations()[anim],
offsets = this.frameOffsets(),
x = set[ix4 + 0],
y = set[ix4 + 1],
width = set[ix4 + 2],
x = set[ix4 + 0],
y = set[ix4 + 1],
width = set[ix4 + 2],
height = set[ix4 + 3],
image = this.getImage();
@@ -110,7 +110,7 @@
ix4 = index * 4,
set = this.getAnimations()[anim],
offsets = this.frameOffsets(),
width = set[ix4 + 2],
width = set[ix4 + 2],
height = set[ix4 + 3];
context.beginPath();

2
src/shapes/Text.js
View File

@@ -229,7 +229,7 @@
currentHeightPx = 0,
wrap = this.getWrap(),
shouldWrap = wrap !== NONE,
wrapAtWord = wrap !== CHAR && shouldWrap;
wrapAtWord = wrap !== CHAR && shouldWrap;
this.textArr = [];
dummyContext.save();

2
src/shapes/Wedge.js
View File

@@ -25,7 +25,7 @@
};
Konva.Wedge.prototype = {
_centroid : true,
_centroid: true,
___init: function(config) {
// call super constructor
Konva.Shape.call(this, config);

7
test/unit/shapes/Circle-test.js
View File

@@ -41,6 +41,13 @@ suite('Circle', function(){
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
});
test('clone', function() {
var circle = new Konva.Circle();
var clone = circle.clone();
assert.equal(clone instanceof Konva.Circle, true);
assert.equal(clone.className, 'Circle');
});
// ======================================================
test('add circle with pattern fill', function(done) {
var imageObj = new Image();