lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 13:27:33 +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
Show Stats 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
}
}

28
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() {
@ -129,4 +147,4 @@ gulp.task('watch', function() {
});
gulp.task('default', ['dev-build', 'watch', 'server']);
gulp.task('default', ['dev-build', 'watch', 'server']);

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",

49
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,14 +28,12 @@
|| FRAF;
})();
function FRAF(callback) {
setTimeout(callback, 1000 / 60);
}
function requestAnimFrame() {
return RAF.apply(Konva.root, arguments);
}
/**
* Animation constructor. A stage is used to contain multiple layers and handle
* @constructor
@ -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.');
}
});

11
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,8 +24,8 @@
* @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
* 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.
@ -73,10 +74,10 @@
* get pixel ratio
* @method
* @memberof Konva.Canvas.prototype
* @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
* @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
* 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.

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;
}
});

30
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;
@ -162,7 +163,7 @@
_trace: function(str) {
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
@ -200,7 +201,7 @@
*/
clear: function(bounds) {
var canvas = this.getCanvas();
if (bounds) {
this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
}
@ -409,12 +410,12 @@
method: methodName,
args: args
});
return ret;
};
};
// 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) {
@ -504,7 +503,7 @@
endRadius = shape.getFillRadialGradientEndRadius(),
colorStops = shape.getFillRadialGradientColorStops(),
grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
// build color stops
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
@ -574,7 +573,7 @@
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
shape._strokeFunc(this);
if (!strokeScaleEnabled) {
this.restore();
}
@ -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);
}
}

9
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));
}
@ -69,7 +68,7 @@
}
this._fireChangeEvent(attr, oldVal, val);
if (after) {
after.call(this);
}
@ -134,4 +133,4 @@
}
}
};
})();
})();

3
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,
@ -51,7 +52,7 @@
if(this.getClearBeforeDraw()) {
canvas.getContext().clear();
}
Konva.Container.prototype.drawScene.call(this, canvas);
return this;

40
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;
@ -184,7 +187,7 @@ var Konva = {};
// adding mobile flag as well
mobile = !!(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)),
ieMobile = !!(userAgent.match(/IEMobile/i));
return {
browser: match[ 1 ] || '',
version: match[ 2 ] || '0',
@ -194,12 +197,12 @@ var Konva = {};
ieMobile: ieMobile // If this is true (i.e., WP8), then Konva touch events are executed instead of equivalent Konva mouse events
};
},
// user agent
// user agent
UA: undefined
};
Konva.UA = Konva._parseUA((root.navigator && root.navigator.userAgent) || '');
})(this);
// Uses Node, AMD or browser globals to create a module.
@ -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

92
src/Layer.js
View File

@ -1,7 +1,8 @@
(function() {
'use strict';
// constants
var HASH = '#',
BEFORE_DRAW ='beforeDraw',
BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw',
/*
@ -9,18 +10,18 @@
* | |
* 1 - 0 5
* |
* 8 - 7 - 6
* 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
@ -171,7 +169,7 @@
if(this.getClearBeforeDraw()) {
canvas.getContext().clear();
}
Konva.Container.prototype.drawScene.call(this, canvas, top);
this._fire(DRAW, {
@ -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);
}

119
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
}),
@ -198,7 +199,7 @@
cachedHitCanvas.isCache = true;
this.clearCache();
sceneContext.save();
hitContext.save();
@ -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) {
@ -334,7 +335,7 @@
if (filters) {
if (!this._filterUpToDate) {
var ratio = sceneCanvas.pixelRatio;
try {
len = filters.length;
filterContext.clear();
@ -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;
@ -646,11 +646,11 @@
* determine if node is listening for events by taking into account ancestors.
*
* Parent | Self | isListening
* listening | listening |
* listening | listening |
* ----------+-----------+------------
* T | T | T
* T | T | T
* T | F | F
* F | T | T
* F | T | T
* F | F | F
* ----------+-----------+------------
* T | I | T
@ -686,11 +686,11 @@
* determine if node is visible by taking into account ancestors.
*
* Parent | Self | isVisible
* visible | visible |
* visible | visible |
* ----------+-----------+------------
* T | T | T
* T | T | T
* T | F | F
* F | T | T
* F | T | T
* F | F | F
* ----------+-----------+------------
* T | I | T
@ -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) {
@ -1643,7 +1640,7 @@
// set value to default value using getAttr
this.attrs[key] = this.getAttr(key);
}
this.attrs[key][component] = val;
this._fireChangeEvent(key, oldVal, val);
}
@ -1886,7 +1883,7 @@
* // get scale
* var scale = node.scale();
*
* // set scale
* // set scale
* shape.scale({
* x: 2
* y: 3
@ -1942,7 +1939,7 @@
* // get skew
* var skew = node.skew();
*
* // set skew
* // set skew
* node.skew({
* x: 20
* y: 10
@ -2097,7 +2094,7 @@
Konva.Factory.addGetterSetter(Konva.Node, 'listening', 'inherit');
/**
* get/set listenig attr. If you need to determine if a node is listening or not
* by taking into account its parents, use the isListening() method
* by taking into account its parents, use the isListening() method
* @name listening
* @method
* @memberof Konva.Node.prototype
@ -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
@ -2146,7 +2143,7 @@
/**
* get/set visible attr. Can be "inherit", true, or false. The default is "inherit".
* If you need to determine if a node is visible or not
* by taking into account its parents, use the isVisible() method
* by taking into account its parents, use the isVisible() method
* @name visible
* @method
* @memberof Konva.Node.prototype
@ -2216,4 +2213,4 @@
});
Konva.Collection.mapMethods(Konva.Node);
})();
})(Konva);

264
src/Shape.js
View File

@ -1,4 +1,5 @@
(function() {
(function(Konva) {
'use strict';
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
@ -151,7 +152,7 @@
* because it performs much better
* @method
* @memberof Konva.Shape.prototype
* @param {Object} point
* @param {Object} point
* @param {Number} point.x
* @param {Number} point.y
* @returns {Boolean}
@ -166,7 +167,7 @@
p = bufferHitCanvas.context.getImageData(Math.round(point.x), Math.round(point.y), 1, 1).data;
return p[3] > 0;
},
// extends Node.prototype.destroy
// extends Node.prototype.destroy
destroy: function() {
Konva.Node.prototype.destroy.call(this);
delete Konva.shapes[this.colorKey];
@ -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();
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]);
}
}
drawFunc.call(this, bufferContext);
bufferContext.restore();
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;
},
/**
@ -375,7 +378,7 @@
* @method
* @memberof Konva.Shape.prototype
* @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
* a pixel should be drawn onto the hit graph. Must be a value between 0 and 255.
* a pixel should be drawn onto the hit graph. Must be a value between 0 and 255.
* The default is 0
* @returns {Konva.Shape}
* @example
@ -689,9 +692,8 @@
* @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
* // apply dashed stroke that is made up of alternating dashed
* // lines that are 10px long and 20px apart, and dots that have
* // a radius of 5px and are 20px apart
* line.dash([10, 20, 0.001, 20]);
*/
@ -791,7 +793,7 @@
* // set shadow alpha component
* shape.shadowAlpha(0.5);
*/
Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur');
/**
@ -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);
*/
@ -1049,7 +1049,7 @@
* // get fill linear gradient color stops
* var colorStops = shape.fillLinearGradientColorStops();
*
* // create a linear gradient that starts with red, changes to blue
* // create a linear gradient that starts with red, changes to blue
* // halfway through, and then changes to green
* shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
*/
@ -1101,7 +1101,7 @@
* // get fill radial gradient color stops
* var colorStops = shape.fillRadialGradientColorStops();
*
* // create a radial gradient that starts with red, changes to blue
* // create a radial gradient that starts with red, changes to blue
* // halfway through, and then changes to green
* shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
*/
@ -1603,4 +1603,4 @@
});
Konva.Collection.mapMethods(Konva.Shape);
})();
})(Konva);

26
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
// 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());
@ -495,7 +489,7 @@
},
_mouseup: function(evt) {
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
if (Konva.UA.ieMobile) {
return this._touchend(evt);
}
@ -725,15 +719,12 @@
this.content.setAttribute('role', 'presentation');
container.appendChild(this.content);
// the buffer canvas pixel ratio must be 1 because it is used as an
// the buffer canvas pixel ratio must be 1 because it is used as an
// intermediate canvas before copying the result onto a scene canvas.
// not setting it to 1 will result in an over compensation
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]);
}

100
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;
@ -356,4 +356,4 @@
* @param {Integer} radius
* @returns {Integer}
*/
})();
})();

4
src/filters/Brighten.js
View File

@ -1,6 +1,6 @@
(function() {
/**
* Brighten Filter.
* Brighten Filter.
* @function
* @memberof Konva.Filters
* @param {Object} imageData
@ -27,7 +27,7 @@
Konva.Factory.addGetterSetter(Konva.Node, 'brightness', 0, null, Konva.Factory.afterSetFilter);
/**
* get/set filter brightness. The brightness is a number between -1 and 1.&nbsp; Positive values
* 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

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}
*/
})();

40
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 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
}
};

2
src/filters/Invert.js
View File

@ -22,4 +22,4 @@
data[i + 2] = 255 - data[i + 2];
}
};
})();
})();

31
src/filters/Kaleidoscope.js
View File

@ -1,8 +1,7 @@
/*jshint newcap:false */
(function () {
/*
* ToPolar Filter. Converts image data to polar coordinates. Performs
* ToPolar Filter. Converts image data to polar coordinates. Performs
* w*h*4 pixel reads and w*h pixel writes. The r axis is placed along
* what would be the y axis and the theta axis along the x axis.
* @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);
@ -150,7 +149,7 @@
var tempCanvas = Konva.Util.createCanvasElement();
/*
* Kaleidoscope Filter.
* Kaleidoscope Filter.
* @function
* @name Kaleidoscope
* @author ippo615
@ -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
// 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});
};
/**

4
src/filters/Mask.js
View File

@ -158,7 +158,7 @@
return maskResult;
}
/**
* Mask Filter
* @function
@ -186,7 +186,7 @@
// Apply mask
applyMask(imageData, mask);
// todo : Update hit region function according to mask
}

6
src/filters/Pixelate.js
View File

@ -30,7 +30,7 @@
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
@ -77,7 +77,7 @@
}
}
}
};
Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter);
@ -90,4 +90,4 @@
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();
})();

2
src/filters/Posterize.js
View File

@ -38,4 +38,4 @@
* @param {Number} level between 0 and 1
* @returns {Number}
*/
})();
})();

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

4
src/filters/Sepia.js
View File

@ -19,13 +19,13 @@
y = imageData.height,
w4 = w*4,
offsetY, x, offset, or, og, ob, r, g, b;
do {
offsetY = (y-1)*w4;
x = w;
do {
offset = offsetY + (x-1)*4;
or = data[offset];
og = data[offset+1];
ob = data[offset+2];

4
src/filters/Threshold.js
View File

@ -1,7 +1,7 @@
(function () {
/**
* Threshold Filter. Pushes any value above the mid point to
* Threshold Filter. Pushes any value above the mid point to
* the max and any value below the mid point to the min.
* This affects the alpha channel.
* @function
@ -36,4 +36,4 @@
* @param {Number} threshold
* @returns {Number}
*/
})();
})();

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);

28
src/plugins/Label.js
View File

@ -22,7 +22,7 @@
* // create label
* var label = new Konva.Label({
* x: 100,
* y: 100,
* y: 100,
* draggable: true
* });
*
@ -60,7 +60,7 @@
Konva.Group.call(this, config);
this.className = LABEL;
this.on('add.konva', function(evt) {
that._addListeners(evt.child);
that._sync();
@ -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);
@ -201,13 +201,13 @@
context.lineTo(width - cornerRadius, 0);
context.arc(width - cornerRadius, cornerRadius, cornerRadius, Math.PI * 3 / 2, 0, false);
}
if (pointerDirection === RIGHT) {
context.lineTo(width, (height - pointerHeight)/2);
context.lineTo(width + pointerWidth, height/2);
context.lineTo(width, (height + pointerHeight)/2);
}
if(!cornerRadius) {
context.lineTo(width, height);
} else {
@ -220,7 +220,7 @@
context.lineTo(width/2, height + pointerHeight);
context.lineTo((width - pointerWidth)/2, height);
}
if(!cornerRadius) {
context.lineTo(0, height);
} else {
@ -233,7 +233,7 @@
context.lineTo(-1 * pointerWidth, height/2);
context.lineTo(0, (height - pointerHeight)/2);
}
if(cornerRadius) {
context.lineTo(0, cornerRadius);
context.arc(cornerRadius, cornerRadius, cornerRadius, Math.PI, Math.PI * 3 / 2, false);
@ -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
};
}
};

19
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)
};
}
};
@ -329,10 +330,10 @@
cpx += dx;
cpy += dy;
cmd = 'M';
// After closing the path move the current position
// to the the first point of the path (if any).
// 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);

28
src/plugins/TextPath.js
View File

@ -55,7 +55,7 @@
this._strokeFunc = _strokeFunc;
this._fillFuncHit = _fillFunc;
this._strokeFuncHit = _strokeFunc;
this.className = 'TextPath';
this.dataArray = Konva.Path.parsePathData(this.attrs.data);
@ -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
};
}
};

4
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);
@ -86,7 +86,7 @@
* // set inner radius
* arc.innerRadius(20);
*/
Konva.Factory.addGetterSetter(Konva.Arc, 'outerRadius', 0);
/**

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);

10
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);
@ -86,7 +86,7 @@
* @example
* // get radius
* var radius = ellipse.radius();
*
*
* // set radius
* ellipse.radius({
* x: 200,
@ -105,7 +105,7 @@
* @example
* // get radius x
* var radiusX = ellipse.radiusX();
*
*
* // set radius x
* ellipse.radiusX(200);
*/
@ -121,11 +121,11 @@
* @example
* // get radius y
* var radiusY = ellipse.radiusY();
*
*
* // set radius y
* ellipse.radiusY(200);
*/
Konva.Collection.mapMethods(Konva.Ellipse);
})();
})();

2
src/shapes/Image.js
View File

@ -113,7 +113,7 @@
* @method
* @name crop
* @memberof Konva.Image.prototype
* @param {Object} crop
* @param {Object} crop
* @param {Number} crop.x
* @param {Number} crop.y
* @param {Number} crop.width

46
src/shapes/Line.js
View File

@ -9,7 +9,7 @@
* @param {Array} config.points
* @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* The default is 0
* @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
* @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
* @@shapeParams
* @@nodeParams
* @example
@ -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],
@ -138,17 +138,17 @@
p[0],
p[1]
]);
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)
};
}
};
@ -236,4 +236,4 @@
*/
Konva.Collection.mapMethods(Konva.Line);
})();
})();

3
src/shapes/Rect.js
View File

@ -32,7 +32,6 @@
width = this.getWidth(),
height = this.getHeight();
context.beginPath();
if(!cornerRadius) {
@ -69,7 +68,7 @@
* @example
* // get corner radius
* var cornerRadius = rect.cornerRadius();
*
*
* // set corner radius
* rect.cornerRadius(10);
*/

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');

16
src/shapes/Sprite.js
View File

@ -37,7 +37,7 @@
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* ]
* },
* frameRate: 7,
* frameIndex: 0
@ -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();
@ -216,7 +216,7 @@
* @example
* // get animations map
* var animations = sprite.animations();
*
*
* // set animations map
* sprite.animations({
* standing: [
@ -236,7 +236,7 @@
* 156, 109, 70, 98,
* 229, 109, 60, 98,
* 287, 109, 41, 98
* ]
* ]
* });
*/
@ -275,7 +275,7 @@
* ]
* });
*/
Konva.Factory.addGetterSetter(Konva.Sprite, 'image');
/**

10
src/shapes/Text.js
View File

@ -71,7 +71,7 @@
if (!config.fillLinearGradientColorStops && !config.fillRadialGradientColorStops) {
config.fill = config.fill || 'black';
}
if (config.width === undefined) {
config.width = AUTO;
}
@ -229,7 +229,7 @@
currentHeightPx = 0,
wrap = this.getWrap(),
shouldWrap = wrap !== NONE,
wrapAtWord = wrap !== CHAR && shouldWrap;
wrapAtWord = wrap !== CHAR && shouldWrap;
this.textArr = [];
dummyContext.save();
@ -406,7 +406,7 @@
* @example
* // get padding
* var padding = text.padding();
*
*
* // set padding to 10 pixels
* text.padding(10);
*/
@ -440,7 +440,7 @@
* @memberof Konva.Text.prototype
* @param {Number} lineHeight
* @returns {Number}
* @example
* @example
* // get line height
* var lineHeight = text.lineHeight();
*
@ -478,7 +478,7 @@
* @example
* // get text
* var text = text.text();
*
*
* // set text
* text.text('Hello world!');
*/

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);

9
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();
@ -268,4 +275,4 @@ suite('Circle', function(){
context.stroke();
compareLayerAndCanvas(layer, canvas, 100);
});
});
});