diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..ea8955ce --- /dev/null +++ b/.eslintrc @@ -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 + } +} diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 0d3423ed..00000000 --- a/.jshintrc +++ /dev/null @@ -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 - } -} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index d3e86db5..775cf0b9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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']); \ No newline at end of file +gulp.task('default', ['dev-build', 'watch', 'server']); diff --git a/package.json b/package.json index 67c68c10..e76c8b77 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Animation.js b/src/Animation.js index 02a964b0..162dd740 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -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); diff --git a/src/BaseLayer.js b/src/BaseLayer.js index 62c8eb6c..08e304a4 100644 --- a/src/BaseLayer.js +++ b/src/BaseLayer.js @@ -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.'); } }); diff --git a/src/Canvas.js b/src/Canvas.js index 8bbdc6df..26efdd76 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -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. diff --git a/src/Container.js b/src/Container.js index 1b5ce601..659f2946 100644 --- a/src/Container.js +++ b/src/Container.js @@ -1,4 +1,5 @@ (function() { + 'use strict'; /** * Container constructor.  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; } }); diff --git a/src/Context.js b/src/Context.js index 1d139e98..2b36ba79 100644 --- a/src/Context.js +++ b/src/Context.js @@ -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 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); diff --git a/src/Shape.js b/src/Shape.js index 67229357..b33f56b2 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -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); diff --git a/src/Stage.js b/src/Stage.js index effcacaa..9e85465a 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -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); diff --git a/src/Tween.js b/src/Tween.js index 2c4a9ba2..c7350548 100644 --- a/src/Tween.js +++ b/src/Tween.js @@ -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> 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} */ -})(); \ No newline at end of file +})(); diff --git a/src/filters/Brighten.js b/src/filters/Brighten.js index 1c9009f5..19e69860 100644 --- a/src/filters/Brighten.js +++ b/src/filters/Brighten.js @@ -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.  Positive values + * get/set filter brightness. The brightness is a number between -1 and 1.  Positive values * brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter. * @name brightness * @method diff --git a/src/filters/Emboss.js b/src/filters/Emboss.js index e9183919..6538842e 100644 --- a/src/filters/Emboss.js +++ b/src/filters/Emboss.js @@ -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} */ })(); - - diff --git a/src/filters/Enhance.js b/src/filters/Enhance.js index 5cda1494..efe20715 100644 --- a/src/filters/Enhance.js +++ b/src/filters/Enhance.js @@ -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 diff --git a/src/filters/HSL.js b/src/filters/HSL.js index e2f0e48b..78d2d5e7 100644 --- a/src/filters/HSL.js +++ b/src/filters/HSL.js @@ -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 } }; })(); diff --git a/src/filters/HSV.js b/src/filters/HSV.js index cb2e6d31..ab3ed526 100644 --- a/src/filters/HSV.js +++ b/src/filters/HSV.js @@ -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 } }; diff --git a/src/filters/Invert.js b/src/filters/Invert.js index 80242be6..b933e459 100644 --- a/src/filters/Invert.js +++ b/src/filters/Invert.js @@ -22,4 +22,4 @@ data[i + 2] = 255 - data[i + 2]; } }; -})(); \ No newline at end of file +})(); diff --git a/src/filters/Kaleidoscope.js b/src/filters/Kaleidoscope.js index cd69e32e..a0b25614 100644 --- a/src/filters/Kaleidoscope.js +++ b/src/filters/Kaleidoscope.js @@ -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}); }; /** diff --git a/src/filters/Mask.js b/src/filters/Mask.js index 566f403c..378455a4 100644 --- a/src/filters/Mask.js +++ b/src/filters/Mask.js @@ -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 } diff --git a/src/filters/Pixelate.js b/src/filters/Pixelate.js index a0ca32c8..678ab61e 100644 --- a/src/filters/Pixelate.js +++ b/src/filters/Pixelate.js @@ -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} */ -})(); \ No newline at end of file +})(); diff --git a/src/filters/Posterize.js b/src/filters/Posterize.js index 17e21997..6199c2d9 100644 --- a/src/filters/Posterize.js +++ b/src/filters/Posterize.js @@ -38,4 +38,4 @@ * @param {Number} level between 0 and 1 * @returns {Number} */ -})(); \ No newline at end of file +})(); diff --git a/src/filters/RGB.js b/src/filters/RGB.js index 8550f4df..93e6bef5 100644 --- a/src/filters/RGB.js +++ b/src/filters/RGB.js @@ -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 diff --git a/src/filters/Sepia.js b/src/filters/Sepia.js index 1e6ebbbd..89c57bef 100644 --- a/src/filters/Sepia.js +++ b/src/filters/Sepia.js @@ -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]; diff --git a/src/filters/Threshold.js b/src/filters/Threshold.js index 1c20e787..f25772e4 100644 --- a/src/filters/Threshold.js +++ b/src/filters/Threshold.js @@ -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} */ -})(); \ No newline at end of file +})(); diff --git a/src/plugins/Arrow.js b/src/plugins/Arrow.js index f09f08ab..a21b3ce8 100644 --- a/src/plugins/Arrow.js +++ b/src/plugins/Arrow.js @@ -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); diff --git a/src/plugins/Label.js b/src/plugins/Label.js index 8f791560..777698fe 100644 --- a/src/plugins/Label.js +++ b/src/plugins/Label.js @@ -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 }; } }; diff --git a/src/plugins/Path.js b/src/plugins/Path.js index c2b2000a..5f15aa25 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -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; i2 && 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; diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js index 91fdf7be..9002fd08 100644 --- a/src/plugins/RegularPolygon.js +++ b/src/plugins/RegularPolygon.js @@ -25,7 +25,7 @@ }; Konva.RegularPolygon.prototype = { - _centroid : true, + _centroid: true, ___init: function(config) { // call super constructor Konva.Shape.call(this, config); diff --git a/src/plugins/Star.js b/src/plugins/Star.js index 340a27b8..4be796d6 100644 --- a/src/plugins/Star.js +++ b/src/plugins/Star.js @@ -27,7 +27,7 @@ }; Konva.Star.prototype = { - _centroid : true, + _centroid: true, ___init: function(config) { // call super constructor Konva.Shape.call(this, config); diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index dab64d7e..c18b4989 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -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