lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update deps, change defualt dragDistance to 3px

Browse Source
This commit is contained in:
Anton Lavrenov 2017-08-25 13:25:55 +02:00
parent 2fd798649b
commit 460feab0ae
8 changed files with 267 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released] ## [Not released][Not released]
### Changed
- Default value for `dragDistance` is changed to 3px.
## [1.6.8][2017-08-19] ## [1.6.8][2017-08-19]
### Changed ### Changed

215
gulpfile.js
View File

@ -1,158 +1,167 @@
'use strict';
var gulp = require('gulp'); var gulp = require('gulp');
var rename = require('gulp-rename'); var rename = require('gulp-rename');
var uglify = require('gulp-uglify'); var uglify = require('gulp-uglify');
var concat = require('gulp-concat'); var concat = require('gulp-concat');
var replace = require('gulp-replace'); var replace = require('gulp-replace');
var mochaPhantomJS = require('gulp-mocha-phantomjs'); var mochaPhantomJS = require('gulp-mocha-phantomjs');
var jsdoc = require('gulp-jsdoc'); var jsdoc = require('gulp-jsdoc3');
var connect = require('gulp-connect'); var connect = require('gulp-connect');
var jscpd = require('gulp-jscpd'); var jscpd = require('gulp-jscpd');
var eslint = require('gulp-eslint'); var eslint = require('gulp-eslint');
var fs = require('fs'); var fs = require('fs');
var NodeParams = fs.readFileSync('./resources/doc-includes/NodeParams.txt').toString(); var NodeParams = fs
var ContainerParams = fs.readFileSync('./resources/doc-includes/ContainerParams.txt').toString(); .readFileSync('./resources/doc-includes/NodeParams.txt')
var ShapeParams = fs.readFileSync('./resources/doc-includes/ShapeParams.txt').toString(); .toString();
var ContainerParams = fs
.readFileSync('./resources/doc-includes/ContainerParams.txt')
.toString();
var ShapeParams = fs
.readFileSync('./resources/doc-includes/ShapeParams.txt')
.toString();
var conf = require('./package.json'); var conf = require('./package.json');
var sourceFiles = [ var sourceFiles = [
// core // core
'src/Global.js', 'src/Global.js',
'src/Util.js', 'src/Util.js',
'src/Canvas.js', 'src/Canvas.js',
'src/Context.js', 'src/Context.js',
'src/Factory.js', 'src/Factory.js',
'src/Node.js', 'src/Node.js',
// filters // filters
'src/filters/Grayscale.js', 'src/filters/Grayscale.js',
'src/filters/Brighten.js', 'src/filters/Brighten.js',
'src/filters/Invert.js', 'src/filters/Invert.js',
'src/filters/Blur.js', 'src/filters/Blur.js',
'src/filters/Mask.js', 'src/filters/Mask.js',
'src/filters/RGB.js', 'src/filters/RGB.js',
'src/filters/RGBA.js', 'src/filters/RGBA.js',
'src/filters/HSV.js', 'src/filters/HSV.js',
'src/filters/HSL.js', 'src/filters/HSL.js',
'src/filters/Emboss.js', 'src/filters/Emboss.js',
'src/filters/Enhance.js', 'src/filters/Enhance.js',
'src/filters/Posterize.js', 'src/filters/Posterize.js',
'src/filters/Noise.js', 'src/filters/Noise.js',
'src/filters/Pixelate.js', 'src/filters/Pixelate.js',
'src/filters/Threshold.js', 'src/filters/Threshold.js',
'src/filters/Sepia.js', 'src/filters/Sepia.js',
'src/filters/Solarize.js', 'src/filters/Solarize.js',
'src/filters/Kaleidoscope.js', 'src/filters/Kaleidoscope.js',
// core // core
'src/Container.js', 'src/Container.js',
'src/Shape.js', 'src/Shape.js',
'src/Stage.js', 'src/Stage.js',
'src/BaseLayer.js', 'src/BaseLayer.js',
'src/Layer.js', 'src/Layer.js',
'src/FastLayer.js', 'src/FastLayer.js',
'src/Group.js', 'src/Group.js',
'src/Animation.js', 'src/Animation.js',
'src/Tween.js', 'src/Tween.js',
'src/DragAndDrop.js', 'src/DragAndDrop.js',
// shapes // shapes
'src/shapes/Rect.js', 'src/shapes/Rect.js',
'src/shapes/Circle.js', 'src/shapes/Circle.js',
'src/shapes/Ellipse.js', 'src/shapes/Ellipse.js',
'src/shapes/Ring.js', 'src/shapes/Ring.js',
'src/shapes/Wedge.js', 'src/shapes/Wedge.js',
'src/shapes/Arc.js', 'src/shapes/Arc.js',
'src/shapes/Image.js', 'src/shapes/Image.js',
'src/shapes/Text.js', 'src/shapes/Text.js',
'src/shapes/Line.js', 'src/shapes/Line.js',
'src/shapes/Sprite.js', 'src/shapes/Sprite.js',
'src/shapes/Path.js', 'src/shapes/Path.js',
'src/shapes/TextPath.js', 'src/shapes/TextPath.js',
'src/shapes/RegularPolygon.js', 'src/shapes/RegularPolygon.js',
'src/shapes/Star.js', 'src/shapes/Star.js',
'src/shapes/Label.js', 'src/shapes/Label.js',
'src/shapes/Arrow.js' 'src/shapes/Arrow.js'
]; ];
function build() { function build() {
return gulp.src(sourceFiles) return gulp
.pipe(concat('konva-dev.js')) .src(sourceFiles)
.pipe(replace('@@shapeParams', ShapeParams)) .pipe(concat('konva-dev.js'))
.pipe(replace('@@nodeParams', NodeParams)) .pipe(replace('@@shapeParams', ShapeParams))
.pipe(replace('@@containerParams', ContainerParams)) .pipe(replace('@@nodeParams', NodeParams))
.pipe(replace('@@version', conf.version)) .pipe(replace('@@containerParams', ContainerParams))
.pipe(replace('@@date', new Date().toDateString())); .pipe(replace('@@version', conf.version))
.pipe(replace('@@date', new Date().toDateString()));
} }
// create development build // create development build
gulp.task('dev-build', function() { gulp.task('dev-build', function() {
return build() return build().pipe(gulp.dest('./dist/'));
.pipe(gulp.dest('./dist/'));
}); });
// create usual build konva.js and konva.min.js // create usual build konva.js and konva.min.js
gulp.task('build', function() { gulp.task('build', function() {
return build() return build()
.pipe(rename('konva.js')) .pipe(rename('konva.js'))
.pipe(gulp.dest('./')) .pipe(gulp.dest('./'))
.pipe(uglify({ .pipe(
preserveComments: 'some' uglify({
})) preserveComments: 'some'
.pipe(rename('konva.min.js')) })
.pipe(gulp.dest('./')); )
.pipe(rename('konva.min.js'))
.pipe(gulp.dest('./'));
}); });
// tun tests // tun tests
gulp.task('test', ['dev-build'], function () { gulp.task('test', ['dev-build'], function() {
return gulp return gulp.src('test/runner.html').pipe(mochaPhantomJS());
.src('test/runner.html')
.pipe(mochaPhantomJS());
}); });
// local server for better development // local server for better development
gulp.task('server', function() { gulp.task('server', function() {
connect.server(); connect.server();
}); });
// lint files // lint files
gulp.task('lint', function() { gulp.task('lint', function() {
return gulp.src('./src/**/*.js') return (gulp
.pipe(eslint({ .src('./src/**/*.js')
configFile: './.eslintrc' .pipe(
})) eslint({
// eslint.format() outputs the lint results to the console. configFile: './.eslintrc'
// Alternatively use eslint.formatEach() (see Docs). })
.pipe(eslint.format()) )
// To have the process exit with an error code (1) on // eslint.format() outputs the lint results to the console.
// lint error, return the stream and pipe to failOnError last. // Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.failOnError()); .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()) );
}); });
// check code for duplication // check code for duplication
gulp.task('inspect', function() { gulp.task('inspect', function() {
return gulp.src('./src/**/*.js') return gulp.src('./src/**/*.js').pipe(
.pipe(jscpd({ jscpd({
'min-lines': 10, 'min-lines': 10,
verbose: true verbose: true
})); })
);
}); });
// // generate documentation
// generate documentation
gulp.task('api', function() { gulp.task('api', function() {
return gulp.src('./src/**/*.js') return gulp.src('./src/**/*.js').pipe(
.pipe(jsdoc('./api')); jsdoc({
opts: {
destination: './api'
}
})
);
}); });
gulp.task('watch', function() { gulp.task('watch', function() {
gulp.watch(['src/**/*.js'], ['dev-build']); gulp.watch(['src/**/*.js'], ['dev-build']);
}); });
gulp.task('default', ['dev-build', 'watch', 'server']); gulp.task('default', ['dev-build', 'watch', 'server']);

136
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.6.8 * Konva JavaScript Framework v1.6.8
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Sat Aug 19 2017 * Date: Thu Aug 24 2017
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@ -10567,7 +10567,7 @@
*/ */
})(); })();
(function() { (function(Konva) {
'use strict'; 'use strict';
/** /**
* BaseLayer constructor. * BaseLayer constructor.
@ -10604,8 +10604,6 @@
* @param {Number} [config.clipHeight] set clip height * @param {Number} [config.clipHeight] set clip height
* @param {Function} [config.clipFunc] set clip func * @param {Function} [config.clipFunc] set clip func
* @example
* var layer = new Konva.Layer();
*/ */
Konva.BaseLayer = function(config) { Konva.BaseLayer = function(config) {
this.___init(config); this.___init(config);
@ -10620,47 +10618,47 @@
return this.canvas._canvas.createPNGStream(); return this.canvas._canvas.createPNGStream();
}, },
/** /**
* get layer canvas * get layer canvas
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getCanvas: function() { getCanvas: function() {
return this.canvas; return this.canvas;
}, },
/** /**
* get layer hit canvas * get layer hit canvas
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getHitCanvas: function() { getHitCanvas: function() {
return this.hitCanvas; return this.hitCanvas;
}, },
/** /**
* get layer canvas context * get layer canvas context
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getContext: function() { getContext: function() {
return this.getCanvas().getContext(); return this.getCanvas().getContext();
}, },
/** /**
* clear scene and hit canvas contexts tied to the layer * clear scene and hit canvas contexts tied to the layer
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @param {Object} [bounds] * @param {Object} [bounds]
* @param {Number} [bounds.x] * @param {Number} [bounds.x]
* @param {Number} [bounds.y] * @param {Number} [bounds.y]
* @param {Number} [bounds.width] * @param {Number} [bounds.width]
* @param {Number} [bounds.height] * @param {Number} [bounds.height]
* @example * @example
* layer.clear(); * layer.clear();
* layer.clear({ * layer.clear({
* x : 0, * x : 0,
* y : 0, * y : 0,
* width : 100, * width : 100,
* height : 100 * height : 100
* }); * });
*/ */
clear: function(bounds) { clear: function(bounds) {
this.getContext().clear(bounds); this.getContext().clear(bounds);
return this; return this;
@ -10769,15 +10767,15 @@
return this; return this;
}, },
/** /**
* get/set width of layer.getter return width of stage. setter doing nothing. * get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);` * if you want change width use `stage.width(value);`
* @name width * @name width
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @returns {Number} * @returns {Number}
* @example * @example
* var width = layer.width(); * var width = layer.width();
*/ */
getWidth: function() { getWidth: function() {
if (this.parent) { if (this.parent) {
return this.parent.getWidth(); return this.parent.getWidth();
@ -10789,15 +10787,15 @@
); );
}, },
/** /**
* get/set height of layer.getter return height of stage. setter doing nothing. * get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);` * if you want change height use `stage.height(value);`
* @name height * @name height
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @returns {Number} * @returns {Number}
* @example * @example
* var height = layer.height(); * var height = layer.height();
*/ */
getHeight: function() { getHeight: function() {
if (this.parent) { if (this.parent) {
return this.parent.getHeight(); return this.parent.getHeight();
@ -10821,26 +10819,26 @@
// add getters and setters // add getters and setters
Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true); Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true);
/** /**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not * get/set clearBeforeDraw flag which determines if the layer is cleared or not
* before drawing * before drawing
* @name clearBeforeDraw * @name clearBeforeDraw
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @param {Boolean} clearBeforeDraw * @param {Boolean} clearBeforeDraw
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get clearBeforeDraw flag * // get clearBeforeDraw flag
* var clearBeforeDraw = layer.clearBeforeDraw(); * var clearBeforeDraw = layer.clearBeforeDraw();
* *
* // disable clear before draw * // disable clear before draw
* layer.clearBeforeDraw(false); * layer.clearBeforeDraw(false);
* *
* // enable clear before draw * // enable clear before draw
* layer.clearBeforeDraw(true); * layer.clearBeforeDraw(true);
*/ */
Konva.Collection.mapMethods(Konva.BaseLayer); Konva.Collection.mapMethods(Konva.BaseLayer);
})(); })(Konva);
(function() { (function() {
'use strict'; 'use strict';

12
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
package.json
View File

@ -2,13 +2,7 @@
"name": "konva", "name": "konva",
"version": "1.6.8", "version": "1.6.8",
"author": "Anton Lavrenov", "author": "Anton Lavrenov",
"files": [ "files": ["README.md", "konva.js", "konva.min.js", "src", "konva.d.ts"],
"README.md",
"konva.js",
"konva.min.js",
"src",
"konva.d.ts"
],
"main": "konva.js", "main": "konva.js",
"typings": "./konva.d.ts", "typings": "./konva.d.ts",
"scripts": { "scripts": {
@ -20,27 +14,22 @@
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote" "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
}, },
"devDependencies": { "devDependencies": {
"chai": "3.5.0", "chai": "4.1.1",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0", "gulp-connect": "^5.0.0",
"gulp-eslint": "^3.0.1", "gulp-eslint": "^4.0.0",
"gulp-jscpd": "0.0.7", "gulp-jscpd": "0.0.8",
"gulp-jsdoc": "^0.1.5", "gulp-jsdoc3": "^1.0.1",
"gulp-mocha-phantomjs": "^0.12.1", "gulp-mocha-phantomjs": "^0.12.1",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4", "gulp-replace": "^0.6.1",
"gulp-uglify": "^2.1.2", "gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"mocha": "3.3.0", "mocha": "3.5.0",
"prettier": "^1.2.2" "prettier": "^1.5.3"
}, },
"keywords": [ "keywords": ["canvas", "animations", "graphic", "html5"],
"canvas",
"animations",
"graphic",
"html5"
],
"browser": { "browser": {
"canvas": false, "canvas": false,
"jsdom": false "jsdom": false

134
src/BaseLayer.js
View File

@ -1,4 +1,4 @@
(function() { (function(Konva) {
'use strict'; 'use strict';
/** /**
* BaseLayer constructor. * BaseLayer constructor.
@ -10,8 +10,6 @@
* to clear the canvas before each layer draw. The default value is true. * to clear the canvas before each layer draw. The default value is true.
* @@nodeParams * @@nodeParams
* @@containerParams * @@containerParams
* @example
* var layer = new Konva.Layer();
*/ */
Konva.BaseLayer = function(config) { Konva.BaseLayer = function(config) {
this.___init(config); this.___init(config);
@ -26,47 +24,47 @@
return this.canvas._canvas.createPNGStream(); return this.canvas._canvas.createPNGStream();
}, },
/** /**
* get layer canvas * get layer canvas
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getCanvas: function() { getCanvas: function() {
return this.canvas; return this.canvas;
}, },
/** /**
* get layer hit canvas * get layer hit canvas
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getHitCanvas: function() { getHitCanvas: function() {
return this.hitCanvas; return this.hitCanvas;
}, },
/** /**
* get layer canvas context * get layer canvas context
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
*/ */
getContext: function() { getContext: function() {
return this.getCanvas().getContext(); return this.getCanvas().getContext();
}, },
/** /**
* clear scene and hit canvas contexts tied to the layer * clear scene and hit canvas contexts tied to the layer
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @param {Object} [bounds] * @param {Object} [bounds]
* @param {Number} [bounds.x] * @param {Number} [bounds.x]
* @param {Number} [bounds.y] * @param {Number} [bounds.y]
* @param {Number} [bounds.width] * @param {Number} [bounds.width]
* @param {Number} [bounds.height] * @param {Number} [bounds.height]
* @example * @example
* layer.clear(); * layer.clear();
* layer.clear({ * layer.clear({
* x : 0, * x : 0,
* y : 0, * y : 0,
* width : 100, * width : 100,
* height : 100 * height : 100
* }); * });
*/ */
clear: function(bounds) { clear: function(bounds) {
this.getContext().clear(bounds); this.getContext().clear(bounds);
return this; return this;
@ -175,15 +173,15 @@
return this; return this;
}, },
/** /**
* get/set width of layer.getter return width of stage. setter doing nothing. * get/set width of layer.getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);` * if you want change width use `stage.width(value);`
* @name width * @name width
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @returns {Number} * @returns {Number}
* @example * @example
* var width = layer.width(); * var width = layer.width();
*/ */
getWidth: function() { getWidth: function() {
if (this.parent) { if (this.parent) {
return this.parent.getWidth(); return this.parent.getWidth();
@ -195,15 +193,15 @@
); );
}, },
/** /**
* get/set height of layer.getter return height of stage. setter doing nothing. * get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);` * if you want change height use `stage.height(value);`
* @name height * @name height
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @returns {Number} * @returns {Number}
* @example * @example
* var height = layer.height(); * var height = layer.height();
*/ */
getHeight: function() { getHeight: function() {
if (this.parent) { if (this.parent) {
return this.parent.getHeight(); return this.parent.getHeight();
@ -227,23 +225,23 @@
// add getters and setters // add getters and setters
Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true); Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true);
/** /**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not * get/set clearBeforeDraw flag which determines if the layer is cleared or not
* before drawing * before drawing
* @name clearBeforeDraw * @name clearBeforeDraw
* @method * @method
* @memberof Konva.BaseLayer.prototype * @memberof Konva.BaseLayer.prototype
* @param {Boolean} clearBeforeDraw * @param {Boolean} clearBeforeDraw
* @returns {Boolean} * @returns {Boolean}
* @example * @example
* // get clearBeforeDraw flag * // get clearBeforeDraw flag
* var clearBeforeDraw = layer.clearBeforeDraw(); * var clearBeforeDraw = layer.clearBeforeDraw();
* *
* // disable clear before draw * // disable clear before draw
* layer.clearBeforeDraw(false); * layer.clearBeforeDraw(false);
* *
* // enable clear before draw * // enable clear before draw
* layer.clearBeforeDraw(true); * layer.clearBeforeDraw(true);
*/ */
Konva.Collection.mapMethods(Konva.BaseLayer); Konva.Collection.mapMethods(Konva.BaseLayer);
})(); })(Konva);

4
src/Global.js
View File

@ -65,14 +65,14 @@
pixelRatio: undefined, pixelRatio: undefined,
/** /**
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point, * Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
* only then start dragging. * only then start dragging. Default is 3px.
* @property dragDistance * @property dragDistance
* @default 0 * @default 0
* @memberof Konva * @memberof Konva
* @example * @example
* Konva.dragDistance = 10; * Konva.dragDistance = 10;
*/ */
dragDistance: 0, dragDistance: 3,
/** /**
* Use degree values for angle properties. You may set this property to false if you want to use radiant values. * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
* @property angleDeg * @property angleDeg

2
test/unit/Node-test.js
View File

@ -1712,7 +1712,7 @@ suite('Node', function() {
layer.add(rect1).add(group); layer.add(rect1).add(group);
stage.add(layer); stage.add(layer);
assert.equal(rect1.dragDistance(), 0); assert.equal(rect1.dragDistance(), Konva.dragDistance);
assert.equal(group.dragDistance(), 2); assert.equal(group.dragDistance(), 2);
assert.equal(rect2.dragDistance(), 2); assert.equal(rect2.dragDistance(), 2);
}); });