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

smaller code, ts fixes

Browse Source
This commit is contained in:
Anton Lavrenov 2020-06-02 12:16:44 -05:00
parent d96e7d9ede
commit 2b58f38a93
7 changed files with 109 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
gulpfile.js
View File

@ -31,7 +31,7 @@ function build() {
.pipe(replace('@@date', new Date().toDateString())); .pipe(replace('@@date', new Date().toDateString()));
} }
gulp.task('update-version-lib', function() { gulp.task('update-version-lib', function () {
return gulp return gulp
.src(['./lib/Global.js']) .src(['./lib/Global.js'])
.pipe(replace('@@version', conf.version)) .pipe(replace('@@version', conf.version))
@ -40,12 +40,12 @@ gulp.task('update-version-lib', function() {
}); });
// create usual build konva.js and konva.min.js // create usual build konva.js and konva.min.js
gulp.task('pre-build', function() { gulp.task('pre-build', function () {
return build() return build()
.pipe(rename('konva.js')) .pipe(rename('konva.js'))
.pipe(gulp.dest('./')) .pipe(gulp.dest('./'))
.pipe(uglify({ output: { comments: /^!|@preserve|@license|@cc_on/i } })) .pipe(uglify({ output: { comments: /^!|@preserve|@license|@cc_on/i } }))
.on('error', function(err) { .on('error', function (err) {
gutil.log(gutil.colors.red('[Error]'), err.toString()); gutil.log(gutil.colors.red('[Error]'), err.toString());
}) })
.pipe(rename('konva.min.js')) .pipe(rename('konva.min.js'))
@ -55,18 +55,18 @@ gulp.task('pre-build', function() {
gulp.task('build', gulp.parallel(['update-version-lib', 'pre-build'])); gulp.task('build', gulp.parallel(['update-version-lib', 'pre-build']));
// 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 ( return (
gulp gulp
.src('./src/**/*.js') .src('./src/**/*.js')
.pipe( .pipe(
eslint({ eslint({
configFile: './.eslintrc' configFile: './.eslintrc',
}) })
) )
// eslint.format() outputs the lint results to the console. // eslint.format() outputs the lint results to the console.
@ -79,22 +79,22 @@ gulp.task('lint', function() {
}); });
// check code for duplication // check code for duplication
gulp.task('inspect', function() { gulp.task('inspect', function () {
return gulp.src('./src/**/*.js').pipe( return gulp.src('./src/**/*.js').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('./konva.js').pipe( return gulp.src('./konva.js').pipe(
jsdoc({ jsdoc({
opts: { opts: {
destination: './api' destination: './api',
} },
}) })
); );
}); });

91
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v6.0.0 * Konva JavaScript Framework v6.0.0
* http://konvajs.org/ * http://konvajs.org/
* Licensed under the MIT * Licensed under the MIT
* Date: Thu May 14 2020 * Date: Tue Jun 02 2020
* *
* 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 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -1327,9 +1327,9 @@
var GET = 'get', SET = 'set'; var GET = 'get', SET = 'set';
var Factory = { var Factory = {
addGetterSetter: function (constructor, attr, def, validator, after) { addGetterSetter: function (constructor, attr, def, validator, after) {
this.addGetter(constructor, attr, def); Factory.addGetter(constructor, attr, def);
this.addSetter(constructor, attr, validator, after); Factory.addSetter(constructor, attr, validator, after);
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
addGetter: function (constructor, attr, def) { addGetter: function (constructor, attr, def) {
var method = GET + Util._capitalize(attr); var method = GET + Util._capitalize(attr);
@ -1392,7 +1392,7 @@
} }
return this; return this;
}; };
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
addOverloadedGetterSetter: function (constructor, attr) { addOverloadedGetterSetter: function (constructor, attr) {
var capitalizedAttr = Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr; var capitalizedAttr = Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr;
@ -1416,10 +1416,10 @@
var val = this.attrs[attr]; var val = this.attrs[attr];
return val === undefined ? def : val; return val === undefined ? def : val;
}; };
this.addSetter(constructor, attr, validator, function () { Factory.addSetter(constructor, attr, validator, function () {
Util.error(message); Util.error(message);
}); });
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
backCompat: function (constructor, methods) { backCompat: function (constructor, methods) {
Util.each(methods, function (oldMethodName, newMethodName) { Util.each(methods, function (oldMethodName, newMethodName) {
@ -1441,7 +1441,7 @@
}, },
afterSetFilter: function () { afterSetFilter: function () {
this._filterUpToDate = false; this._filterUpToDate = false;
} },
}; };
/*! ***************************************************************************** /*! *****************************************************************************
@ -4624,6 +4624,7 @@
}()); }());
Node.prototype.nodeType = 'Node'; Node.prototype.nodeType = 'Node';
Node.prototype._attrsAffectingSize = []; Node.prototype._attrsAffectingSize = [];
var addGetterSetter = Factory.addGetterSetter;
/** /**
* get/set zIndex relative to the node's siblings who share the same parent. * get/set zIndex relative to the node's siblings who share the same parent.
* Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only. * Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
@ -4638,7 +4639,7 @@
* // set index * // set index
* node.zIndex(2); * node.zIndex(2);
*/ */
Factory.addGetterSetter(Node, 'zIndex'); addGetterSetter(Node, 'zIndex');
/** /**
* get/set node absolute position * get/set node absolute position
* @name Konva.Node#absolutePosition * @name Konva.Node#absolutePosition
@ -4657,8 +4658,8 @@
* y: 10 * y: 10
* }); * });
*/ */
Factory.addGetterSetter(Node, 'absolutePosition'); addGetterSetter(Node, 'absolutePosition');
Factory.addGetterSetter(Node, 'position'); addGetterSetter(Node, 'position');
/** /**
* get/set node position relative to parent * get/set node position relative to parent
* @name Konva.Node#position * @name Konva.Node#position
@ -4677,7 +4678,7 @@
* y: 10 * y: 10
* }); * });
*/ */
Factory.addGetterSetter(Node, 'x', 0, getNumberValidator()); addGetterSetter(Node, 'x', 0, getNumberValidator());
/** /**
* get/set x position * get/set x position
* @name Konva.Node#x * @name Konva.Node#x
@ -4691,7 +4692,7 @@
* // set x * // set x
* node.x(5); * node.x(5);
*/ */
Factory.addGetterSetter(Node, 'y', 0, getNumberValidator()); addGetterSetter(Node, 'y', 0, getNumberValidator());
/** /**
* get/set y position * get/set y position
* @name Konva.Node#y * @name Konva.Node#y
@ -4705,7 +4706,7 @@
* // set y * // set y
* node.y(5); * node.y(5);
*/ */
Factory.addGetterSetter(Node, 'globalCompositeOperation', 'source-over', getStringValidator()); addGetterSetter(Node, 'globalCompositeOperation', 'source-over', getStringValidator());
/** /**
* get/set globalCompositeOperation of a shape * get/set globalCompositeOperation of a shape
* @name Konva.Node#globalCompositeOperation * @name Konva.Node#globalCompositeOperation
@ -4719,7 +4720,7 @@
* // set globalCompositeOperation * // set globalCompositeOperation
* shape.globalCompositeOperation('source-in'); * shape.globalCompositeOperation('source-in');
*/ */
Factory.addGetterSetter(Node, 'opacity', 1, getNumberValidator()); addGetterSetter(Node, 'opacity', 1, getNumberValidator());
/** /**
* get/set opacity. Opacity values range from 0 to 1. * get/set opacity. Opacity values range from 0 to 1.
* A node with an opacity of 0 is fully transparent, and a node * A node with an opacity of 0 is fully transparent, and a node
@ -4735,7 +4736,7 @@
* // set opacity * // set opacity
* node.opacity(0.5); * node.opacity(0.5);
*/ */
Factory.addGetterSetter(Node, 'name', '', getStringValidator()); addGetterSetter(Node, 'name', '', getStringValidator());
/** /**
* get/set name * get/set name
* @name Konva.Node#name * @name Konva.Node#name
@ -4752,7 +4753,7 @@
* // also node may have multiple names (as css classes) * // also node may have multiple names (as css classes)
* node.name('foo bar'); * node.name('foo bar');
*/ */
Factory.addGetterSetter(Node, 'id', '', getStringValidator()); addGetterSetter(Node, 'id', '', getStringValidator());
/** /**
* get/set id. Id is global for whole page. * get/set id. Id is global for whole page.
* @name Konva.Node#id * @name Konva.Node#id
@ -4766,7 +4767,7 @@
* // set id * // set id
* node.id('foo'); * node.id('foo');
*/ */
Factory.addGetterSetter(Node, 'rotation', 0, getNumberValidator()); addGetterSetter(Node, 'rotation', 0, getNumberValidator());
/** /**
* get/set rotation in degrees * get/set rotation in degrees
* @name Konva.Node#rotation * @name Konva.Node#rotation
@ -4799,7 +4800,7 @@
* y: 3 * y: 3
* }); * });
*/ */
Factory.addGetterSetter(Node, 'scaleX', 1, getNumberValidator()); addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
/** /**
* get/set scale x * get/set scale x
* @name Konva.Node#scaleX * @name Konva.Node#scaleX
@ -4813,7 +4814,7 @@
* // set scale x * // set scale x
* node.scaleX(2); * node.scaleX(2);
*/ */
Factory.addGetterSetter(Node, 'scaleY', 1, getNumberValidator()); addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
/** /**
* get/set scale y * get/set scale y
* @name Konva.Node#scaleY * @name Konva.Node#scaleY
@ -4846,7 +4847,7 @@
* y: 10 * y: 10
* }); * });
*/ */
Factory.addGetterSetter(Node, 'skewX', 0, getNumberValidator()); addGetterSetter(Node, 'skewX', 0, getNumberValidator());
/** /**
* get/set skew x * get/set skew x
* @name Konva.Node#skewX * @name Konva.Node#skewX
@ -4860,7 +4861,7 @@
* // set skew x * // set skew x
* node.skewX(3); * node.skewX(3);
*/ */
Factory.addGetterSetter(Node, 'skewY', 0, getNumberValidator()); addGetterSetter(Node, 'skewY', 0, getNumberValidator());
/** /**
* get/set skew y * get/set skew y
* @name Konva.Node#skewY * @name Konva.Node#skewY
@ -4892,7 +4893,7 @@
* y: 10 * y: 10
* }); * });
*/ */
Factory.addGetterSetter(Node, 'offsetX', 0, getNumberValidator()); addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
/** /**
* get/set offset x * get/set offset x
* @name Konva.Node#offsetX * @name Konva.Node#offsetX
@ -4906,7 +4907,7 @@
* // set offset x * // set offset x
* node.offsetX(3); * node.offsetX(3);
*/ */
Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator()); addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
/** /**
* get/set offset y * get/set offset y
* @name Konva.Node#offsetY * @name Konva.Node#offsetY
@ -4920,7 +4921,7 @@
* // set offset y * // set offset y
* node.offsetY(3); * node.offsetY(3);
*/ */
Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator()); addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
/** /**
* get/set drag distance * get/set drag distance
* @name Konva.Node#dragDistance * @name Konva.Node#dragDistance
@ -4937,7 +4938,7 @@
* // or set globally * // or set globally
* Konva.dragDistance = 3; * Konva.dragDistance = 3;
*/ */
Factory.addGetterSetter(Node, 'width', 0, getNumberValidator()); addGetterSetter(Node, 'width', 0, getNumberValidator());
/** /**
* get/set width * get/set width
* @name Konva.Node#width * @name Konva.Node#width
@ -4951,7 +4952,7 @@
* // set width * // set width
* node.width(100); * node.width(100);
*/ */
Factory.addGetterSetter(Node, 'height', 0, getNumberValidator()); addGetterSetter(Node, 'height', 0, getNumberValidator());
/** /**
* get/set height * get/set height
* @name Konva.Node#height * @name Konva.Node#height
@ -4965,7 +4966,7 @@
* // set height * // set height
* node.height(100); * node.height(100);
*/ */
Factory.addGetterSetter(Node, 'listening', true, getBooleanValidator()); addGetterSetter(Node, 'listening', true, getBooleanValidator());
/** /**
* get/set listening attr. If you need to determine if a node is listening or not * get/set listening 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
@ -5001,8 +5002,8 @@
* // set preventDefault * // set preventDefault
* shape.preventDefault(false); * shape.preventDefault(false);
*/ */
Factory.addGetterSetter(Node, 'preventDefault', true, getBooleanValidator()); addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
Factory.addGetterSetter(Node, 'filters', null, function (val) { addGetterSetter(Node, 'filters', null, function (val) {
this._filterUpToDate = false; this._filterUpToDate = false;
return val; return val;
}); });
@ -5028,7 +5029,7 @@
* Konva.Filters.Invert * Konva.Filters.Invert
* ]); * ]);
*/ */
Factory.addGetterSetter(Node, 'visible', true, getBooleanValidator()); addGetterSetter(Node, 'visible', true, getBooleanValidator());
/** /**
* get/set visible attr. Can be true, or false. The default is true. * get/set visible attr. Can be true, or false. The default is true.
* If you need to determine if a node is visible or not * If you need to determine if a node is visible or not
@ -5048,7 +5049,7 @@
* node.visible(true); * node.visible(true);
* *
*/ */
Factory.addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator()); addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
/** /**
* get/set transforms that are enabled. Can be "all", "none", or "position". The default * get/set transforms that are enabled. Can be "all", "none", or "position". The default
* is "all" * is "all"
@ -5083,7 +5084,7 @@
* height: 200 * height: 200
* }); * });
*/ */
Factory.addGetterSetter(Node, 'size'); addGetterSetter(Node, 'size');
/** /**
* get/set drag bound function. This is used to override the default * get/set drag bound function. This is used to override the default
* drag and drop position. * drag and drop position.
@ -5105,7 +5106,7 @@
* }; * };
* }); * });
*/ */
Factory.addGetterSetter(Node, 'dragBoundFunc'); addGetterSetter(Node, 'dragBoundFunc');
/** /**
* get/set draggable flag * get/set draggable flag
* @name Konva.Node#draggable * @name Konva.Node#draggable
@ -5122,7 +5123,7 @@
* // disable drag and drop * // disable drag and drop
* node.draggable(false); * node.draggable(false);
*/ */
Factory.addGetterSetter(Node, 'draggable', false, getBooleanValidator()); addGetterSetter(Node, 'draggable', false, getBooleanValidator());
Factory.backCompat(Node, { Factory.backCompat(Node, {
rotateDeg: 'rotate', rotateDeg: 'rotate',
setRotationDeg: 'setRotation', setRotationDeg: 'setRotation',
@ -7084,11 +7085,10 @@
return rect; return rect;
}; };
Shape.prototype.drawScene = function (can, top) { Shape.prototype.drawScene = function (can, top) {
// basically there are 4 drawing modes // basically there are 3 drawing modes
// 1 - simple drawing when nothing is cached. // 1 - simple drawing when nothing is cached.
// 2 - when we are caching current // 2 - when we are caching current
// 3 - when node is cached and we need to draw it into layer // 3 - when node is cached and we need to draw it into layer
// 4 - ??
var layer = this.getLayer(), canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.sceneFunc(), hasShadow = this.hasShadow(), hasStroke = this.hasStroke(), stage, bufferCanvas, bufferContext; var layer = this.getLayer(), canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.sceneFunc(), hasShadow = this.hasShadow(), hasStroke = this.hasStroke(), stage, bufferCanvas, bufferContext;
var caching = canvas.isCache; var caching = canvas.isCache;
var skipBuffer = canvas.isCache; var skipBuffer = canvas.isCache;
@ -7141,23 +7141,6 @@
context._applyShadow(this); context._applyShadow(this);
} }
drawFunc.call(this, context, this); drawFunc.call(this, context, this);
// 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 (hasShadow &&
hasStroke &&
this.hasFill() &&
this.shadowForStrokeEnabled() &&
false) {
// TODO: are there any ways to avoid double draw?
// hint: https://stackoverflow.com/questions/13470101/getting-single-shadow-for-fill-and-stroke-on-html-canvas
// clear the shadow
context.setAttr('shadowColor', 0);
context.setAttr('shadowOffsetX', 0);
context.setAttr('shadowOffsetY', 0);
context.setAttr('shadowBlur', 0);
drawFunc.call(this, context, this);
}
} }
context.restore(); context.restore();
return this; return this;

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
package.json
View File

@ -24,9 +24,20 @@
"rollup": "rollup -c", "rollup": "rollup -c",
"clean": "rm -rf ./lib && rm -rf ./types", "clean": "rm -rf ./lib && rm -rf ./types",
"compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./types && npm run rollup", "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./types && npm run rollup",
"watch": "rollup -c -w" "watch": "rollup -c -w",
"size": "size-limit"
}, },
"size-limit": [
{
"limit": "45 KB",
"path": "./lib/index.js"
},
{
"path": "./lib/Core.js"
}
],
"devDependencies": { "devDependencies": {
"@size-limit/preset-big-lib": "^4.5.0",
"chai": "4.2.0", "chai": "4.2.0",
"github-release-from-changelog": "^2.1.1", "github-release-from-changelog": "^2.1.1",
"gulp": "^4.0.2", "gulp": "^4.0.2",
@ -40,6 +51,7 @@
"gulp-replace": "^1.0.0", "gulp-replace": "^1.0.0",
"gulp-typescript": "^5.0.1", "gulp-typescript": "^5.0.1",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-uglify-es": "^2.0.0",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"install": "^0.13.0", "install": "^0.13.0",
"mocha": "7.1.2", "mocha": "7.1.2",
@ -51,6 +63,7 @@
"rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-sourcemaps": "^0.6.1", "rollup-plugin-sourcemaps": "^0.6.1",
"rollup-plugin-typescript2": "^0.27.0", "rollup-plugin-typescript2": "^0.27.0",
"size-limit": "^4.5.0",
"typescript": "^3.8.3" "typescript": "^3.8.3"
}, },
"keywords": [ "keywords": [

28
src/Factory.ts
View File

@ -6,16 +6,16 @@ var GET = 'get',
export const Factory = { export const Factory = {
addGetterSetter(constructor, attr, def?, validator?, after?) { addGetterSetter(constructor, attr, def?, validator?, after?) {
this.addGetter(constructor, attr, def); Factory.addGetter(constructor, attr, def);
this.addSetter(constructor, attr, validator, after); Factory.addSetter(constructor, attr, validator, after);
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
addGetter(constructor, attr, def?) { addGetter(constructor, attr, def?) {
var method = GET + Util._capitalize(attr); var method = GET + Util._capitalize(attr);
constructor.prototype[method] = constructor.prototype[method] =
constructor.prototype[method] || constructor.prototype[method] ||
function() { function () {
var val = this.attrs[attr]; var val = this.attrs[attr];
return val === undefined ? def : val; return val === undefined ? def : val;
}; };
@ -30,7 +30,7 @@ export const Factory = {
}, },
overWriteSetter(constructor, attr, validator?, after?) { overWriteSetter(constructor, attr, validator?, after?) {
var method = SET + Util._capitalize(attr); var method = SET + Util._capitalize(attr);
constructor.prototype[method] = function(val) { constructor.prototype[method] = function (val) {
if (validator && val !== undefined && val !== null) { if (validator && val !== undefined && val !== null) {
val = validator.call(this, val, attr); val = validator.call(this, val, attr);
} }
@ -53,7 +53,7 @@ export const Factory = {
component; component;
// getter // getter
constructor.prototype[getter] = function() { constructor.prototype[getter] = function () {
var ret = {}; var ret = {};
for (n = 0; n < len; n++) { for (n = 0; n < len; n++) {
@ -67,7 +67,7 @@ export const Factory = {
var basicValidator = getComponentValidator(components); var basicValidator = getComponentValidator(components);
// setter // setter
constructor.prototype[setter] = function(val) { constructor.prototype[setter] = function (val) {
var oldVal = this.attrs[attr], var oldVal = this.attrs[attr],
key; key;
@ -95,14 +95,14 @@ export const Factory = {
return this; return this;
}; };
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
addOverloadedGetterSetter(constructor, attr) { addOverloadedGetterSetter(constructor, attr) {
var capitalizedAttr = Util._capitalize(attr), var capitalizedAttr = Util._capitalize(attr),
setter = SET + capitalizedAttr, setter = SET + capitalizedAttr,
getter = GET + capitalizedAttr; getter = GET + capitalizedAttr;
constructor.prototype[attr] = function() { constructor.prototype[attr] = function () {
// setting // setting
if (arguments.length) { if (arguments.length) {
this[setter](arguments[0]); this[setter](arguments[0]);
@ -120,18 +120,18 @@ export const Factory = {
var message = var message =
attr + attr +
' property is deprecated and will be removed soon. Look at Konva change log for more information.'; ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
constructor.prototype[method] = function() { constructor.prototype[method] = function () {
Util.error(message); Util.error(message);
var val = this.attrs[attr]; var val = this.attrs[attr];
return val === undefined ? def : val; return val === undefined ? def : val;
}; };
this.addSetter(constructor, attr, validator, function() { Factory.addSetter(constructor, attr, validator, function () {
Util.error(message); Util.error(message);
}); });
this.addOverloadedGetterSetter(constructor, attr); Factory.addOverloadedGetterSetter(constructor, attr);
}, },
backCompat(constructor, methods) { backCompat(constructor, methods) {
Util.each(methods, function(oldMethodName, newMethodName) { Util.each(methods, function (oldMethodName, newMethodName) {
var method = constructor.prototype[newMethodName]; var method = constructor.prototype[newMethodName];
var oldGetter = GET + Util._capitalize(oldMethodName); var oldGetter = GET + Util._capitalize(oldMethodName);
var oldSetter = SET + Util._capitalize(oldMethodName); var oldSetter = SET + Util._capitalize(oldMethodName);
@ -154,5 +154,5 @@ export const Factory = {
}, },
afterSetFilter() { afterSetFilter() {
this._filterUpToDate = false; this._filterUpToDate = false;
} },
}; };

57
src/Node.ts
View File

@ -2456,6 +2456,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
enhance: GetSet<number, this>; enhance: GetSet<number, this>;
filters: GetSet<Filter[], this>; filters: GetSet<Filter[], this>;
position: GetSet<Vector2d, this>; position: GetSet<Vector2d, this>;
absolutePosition: GetSet<Vector2d, this>;
size: GetSet<{ width: number; height: number }, this>; size: GetSet<{ width: number; height: number }, this>;
id: GetSet<string, this>; id: GetSet<string, this>;
@ -2547,6 +2548,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Node.prototype.nodeType = 'Node'; Node.prototype.nodeType = 'Node';
Node.prototype._attrsAffectingSize = []; Node.prototype._attrsAffectingSize = [];
const addGetterSetter = Factory.addGetterSetter;
/** /**
* get/set zIndex relative to the node's siblings who share the same parent. * get/set zIndex relative to the node's siblings who share the same parent.
* Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only. * Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
@ -2561,7 +2564,7 @@ Node.prototype._attrsAffectingSize = [];
* // set index * // set index
* node.zIndex(2); * node.zIndex(2);
*/ */
Factory.addGetterSetter(Node, 'zIndex'); addGetterSetter(Node, 'zIndex');
/** /**
* get/set node absolute position * get/set node absolute position
@ -2581,9 +2584,9 @@ Factory.addGetterSetter(Node, 'zIndex');
* y: 10 * y: 10
* }); * });
*/ */
Factory.addGetterSetter(Node, 'absolutePosition'); addGetterSetter(Node, 'absolutePosition');
Factory.addGetterSetter(Node, 'position'); addGetterSetter(Node, 'position');
/** /**
* get/set node position relative to parent * get/set node position relative to parent
* @name Konva.Node#position * @name Konva.Node#position
@ -2603,7 +2606,7 @@ Factory.addGetterSetter(Node, 'position');
* }); * });
*/ */
Factory.addGetterSetter(Node, 'x', 0, getNumberValidator()); addGetterSetter(Node, 'x', 0, getNumberValidator());
/** /**
* get/set x position * get/set x position
@ -2619,7 +2622,7 @@ Factory.addGetterSetter(Node, 'x', 0, getNumberValidator());
* node.x(5); * node.x(5);
*/ */
Factory.addGetterSetter(Node, 'y', 0, getNumberValidator()); addGetterSetter(Node, 'y', 0, getNumberValidator());
/** /**
* get/set y position * get/set y position
@ -2635,7 +2638,7 @@ Factory.addGetterSetter(Node, 'y', 0, getNumberValidator());
* node.y(5); * node.y(5);
*/ */
Factory.addGetterSetter( addGetterSetter(
Node, Node,
'globalCompositeOperation', 'globalCompositeOperation',
'source-over', 'source-over',
@ -2655,7 +2658,7 @@ Factory.addGetterSetter(
* // set globalCompositeOperation * // set globalCompositeOperation
* shape.globalCompositeOperation('source-in'); * shape.globalCompositeOperation('source-in');
*/ */
Factory.addGetterSetter(Node, 'opacity', 1, getNumberValidator()); addGetterSetter(Node, 'opacity', 1, getNumberValidator());
/** /**
* get/set opacity. Opacity values range from 0 to 1. * get/set opacity. Opacity values range from 0 to 1.
@ -2673,7 +2676,7 @@ Factory.addGetterSetter(Node, 'opacity', 1, getNumberValidator());
* node.opacity(0.5); * node.opacity(0.5);
*/ */
Factory.addGetterSetter(Node, 'name', '', getStringValidator()); addGetterSetter(Node, 'name', '', getStringValidator());
/** /**
* get/set name * get/set name
@ -2692,7 +2695,7 @@ Factory.addGetterSetter(Node, 'name', '', getStringValidator());
* node.name('foo bar'); * node.name('foo bar');
*/ */
Factory.addGetterSetter(Node, 'id', '', getStringValidator()); addGetterSetter(Node, 'id', '', getStringValidator());
/** /**
* get/set id. Id is global for whole page. * get/set id. Id is global for whole page.
@ -2708,7 +2711,7 @@ Factory.addGetterSetter(Node, 'id', '', getStringValidator());
* node.id('foo'); * node.id('foo');
*/ */
Factory.addGetterSetter(Node, 'rotation', 0, getNumberValidator()); addGetterSetter(Node, 'rotation', 0, getNumberValidator());
/** /**
* get/set rotation in degrees * get/set rotation in degrees
@ -2745,7 +2748,7 @@ Factory.addComponentsGetterSetter(Node, 'scale', ['x', 'y']);
* }); * });
*/ */
Factory.addGetterSetter(Node, 'scaleX', 1, getNumberValidator()); addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
/** /**
* get/set scale x * get/set scale x
@ -2761,7 +2764,7 @@ Factory.addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
* node.scaleX(2); * node.scaleX(2);
*/ */
Factory.addGetterSetter(Node, 'scaleY', 1, getNumberValidator()); addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
/** /**
* get/set scale y * get/set scale y
@ -2798,7 +2801,7 @@ Factory.addComponentsGetterSetter(Node, 'skew', ['x', 'y']);
* }); * });
*/ */
Factory.addGetterSetter(Node, 'skewX', 0, getNumberValidator()); addGetterSetter(Node, 'skewX', 0, getNumberValidator());
/** /**
* get/set skew x * get/set skew x
@ -2814,7 +2817,7 @@ Factory.addGetterSetter(Node, 'skewX', 0, getNumberValidator());
* node.skewX(3); * node.skewX(3);
*/ */
Factory.addGetterSetter(Node, 'skewY', 0, getNumberValidator()); addGetterSetter(Node, 'skewY', 0, getNumberValidator());
/** /**
* get/set skew y * get/set skew y
@ -2850,7 +2853,7 @@ Factory.addComponentsGetterSetter(Node, 'offset', ['x', 'y']);
* }); * });
*/ */
Factory.addGetterSetter(Node, 'offsetX', 0, getNumberValidator()); addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
/** /**
* get/set offset x * get/set offset x
@ -2866,7 +2869,7 @@ Factory.addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
* node.offsetX(3); * node.offsetX(3);
*/ */
Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator()); addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
/** /**
* get/set offset y * get/set offset y
@ -2882,7 +2885,7 @@ Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
* node.offsetY(3); * node.offsetY(3);
*/ */
Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator()); addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
/** /**
* get/set drag distance * get/set drag distance
@ -2901,7 +2904,7 @@ Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
* Konva.dragDistance = 3; * Konva.dragDistance = 3;
*/ */
Factory.addGetterSetter(Node, 'width', 0, getNumberValidator()); addGetterSetter(Node, 'width', 0, getNumberValidator());
/** /**
* get/set width * get/set width
* @name Konva.Node#width * @name Konva.Node#width
@ -2916,7 +2919,7 @@ Factory.addGetterSetter(Node, 'width', 0, getNumberValidator());
* node.width(100); * node.width(100);
*/ */
Factory.addGetterSetter(Node, 'height', 0, getNumberValidator()); addGetterSetter(Node, 'height', 0, getNumberValidator());
/** /**
* get/set height * get/set height
* @name Konva.Node#height * @name Konva.Node#height
@ -2931,7 +2934,7 @@ Factory.addGetterSetter(Node, 'height', 0, getNumberValidator());
* node.height(100); * node.height(100);
*/ */
Factory.addGetterSetter(Node, 'listening', true, getBooleanValidator()); addGetterSetter(Node, 'listening', true, getBooleanValidator());
/** /**
* get/set listening attr. If you need to determine if a node is listening or not * get/set listening 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
@ -2969,9 +2972,9 @@ Factory.addGetterSetter(Node, 'listening', true, getBooleanValidator());
* shape.preventDefault(false); * shape.preventDefault(false);
*/ */
Factory.addGetterSetter(Node, 'preventDefault', true, getBooleanValidator()); addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
Factory.addGetterSetter(Node, 'filters', null, function (val) { addGetterSetter(Node, 'filters', null, function (val) {
this._filterUpToDate = false; this._filterUpToDate = false;
return val; return val;
}); });
@ -2998,7 +3001,7 @@ Factory.addGetterSetter(Node, 'filters', null, function (val) {
* ]); * ]);
*/ */
Factory.addGetterSetter(Node, 'visible', true, getBooleanValidator()); addGetterSetter(Node, 'visible', true, getBooleanValidator());
/** /**
* get/set visible attr. Can be true, or false. The default is true. * get/set visible attr. Can be true, or false. The default is true.
* If you need to determine if a node is visible or not * If you need to determine if a node is visible or not
@ -3019,7 +3022,7 @@ Factory.addGetterSetter(Node, 'visible', true, getBooleanValidator());
* *
*/ */
Factory.addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator()); addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
/** /**
* get/set transforms that are enabled. Can be "all", "none", or "position". The default * get/set transforms that are enabled. Can be "all", "none", or "position". The default
@ -3056,7 +3059,7 @@ Factory.addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
* height: 200 * height: 200
* }); * });
*/ */
Factory.addGetterSetter(Node, 'size'); addGetterSetter(Node, 'size');
/** /**
* get/set drag bound function. This is used to override the default * get/set drag bound function. This is used to override the default
@ -3079,7 +3082,7 @@ Factory.addGetterSetter(Node, 'size');
* }; * };
* }); * });
*/ */
Factory.addGetterSetter(Node, 'dragBoundFunc'); addGetterSetter(Node, 'dragBoundFunc');
/** /**
* get/set draggable flag * get/set draggable flag
@ -3097,7 +3100,7 @@ Factory.addGetterSetter(Node, 'dragBoundFunc');
* // disable drag and drop * // disable drag and drop
* node.draggable(false); * node.draggable(false);
*/ */
Factory.addGetterSetter(Node, 'draggable', false, getBooleanValidator()); addGetterSetter(Node, 'draggable', false, getBooleanValidator());
Factory.backCompat(Node, { Factory.backCompat(Node, {
rotateDeg: 'rotate', rotateDeg: 'rotate',

23
src/Shape.ts
View File

@ -541,11 +541,10 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
return rect; return rect;
} }
drawScene(can?: SceneCanvas, top?: Node) { drawScene(can?: SceneCanvas, top?: Node) {
// basically there are 4 drawing modes // basically there are 3 drawing modes
// 1 - simple drawing when nothing is cached. // 1 - simple drawing when nothing is cached.
// 2 - when we are caching current // 2 - when we are caching current
// 3 - when node is cached and we need to draw it into layer // 3 - when node is cached and we need to draw it into layer
// 4 - ??
var layer = this.getLayer(), var layer = this.getLayer(),
canvas = can || layer.getCanvas(), canvas = can || layer.getCanvas(),
@ -623,26 +622,6 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
} }
drawFunc.call(this, context, this); drawFunc.call(this, context, this);
// 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 (
hasShadow &&
hasStroke &&
this.hasFill() &&
this.shadowForStrokeEnabled() &&
false
) {
// TODO: are there any ways to avoid double draw?
// hint: https://stackoverflow.com/questions/13470101/getting-single-shadow-for-fill-and-stroke-on-html-canvas
// clear the shadow
context.setAttr('shadowColor', 0);
context.setAttr('shadowOffsetX', 0);
context.setAttr('shadowOffsetY', 0);
context.setAttr('shadowBlur', 0);
drawFunc.call(this, context, this);
}
} }
context.restore(); context.restore();
return this; return this;