mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 18:24:17 +08:00
smaller code, ts fixes
This commit is contained in:
Anton Lavrenov
parent
d96e7d9ede
commit
2b58f38a93
22
gulpfile.js
22
gulpfile.js
@ -31,7 +31,7 @@ function build() {
|
||||
.pipe(replace('@@date', new Date().toDateString()));
|
||||
}
|
||||
|
||||
gulp.task('update-version-lib', function() {
|
||||
gulp.task('update-version-lib', function () {
|
||||
return gulp
|
||||
.src(['./lib/Global.js'])
|
||||
.pipe(replace('@@version', conf.version))
|
||||
@ -40,12 +40,12 @@ gulp.task('update-version-lib', function() {
|
||||
});
|
||||
|
||||
// create usual build konva.js and konva.min.js
|
||||
gulp.task('pre-build', function() {
|
||||
gulp.task('pre-build', function () {
|
||||
return build()
|
||||
.pipe(rename('konva.js'))
|
||||
.pipe(gulp.dest('./'))
|
||||
.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());
|
||||
})
|
||||
.pipe(rename('konva.min.js'))
|
||||
@ -55,18 +55,18 @@ gulp.task('pre-build', function() {
|
||||
gulp.task('build', gulp.parallel(['update-version-lib', 'pre-build']));
|
||||
|
||||
// local server for better development
|
||||
gulp.task('server', function() {
|
||||
gulp.task('server', function () {
|
||||
connect.server();
|
||||
});
|
||||
|
||||
// lint files
|
||||
gulp.task('lint', function() {
|
||||
gulp.task('lint', function () {
|
||||
return (
|
||||
gulp
|
||||
.src('./src/**/*.js')
|
||||
.pipe(
|
||||
eslint({
|
||||
configFile: './.eslintrc'
|
||||
configFile: './.eslintrc',
|
||||
})
|
||||
)
|
||||
// eslint.format() outputs the lint results to the console.
|
||||
@ -79,22 +79,22 @@ gulp.task('lint', function() {
|
||||
});
|
||||
|
||||
// check code for duplication
|
||||
gulp.task('inspect', function() {
|
||||
gulp.task('inspect', function () {
|
||||
return gulp.src('./src/**/*.js').pipe(
|
||||
jscpd({
|
||||
'min-lines': 10,
|
||||
verbose: true
|
||||
verbose: true,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// // generate documentation
|
||||
gulp.task('api', function() {
|
||||
gulp.task('api', function () {
|
||||
return gulp.src('./konva.js').pipe(
|
||||
jsdoc({
|
||||
opts: {
|
||||
destination: './api'
|
||||
}
|
||||
destination: './api',
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
91
konva.js
91
konva.js
@ -8,7 +8,7 @@
|
||||
* Konva JavaScript Framework v6.0.0
|
||||
* http://konvajs.org/
|
||||
* Licensed under the MIT
|
||||
* Date: Thu May 14 2020
|
||||
* Date: Tue Jun 02 2020
|
||||
*
|
||||
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
||||
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
||||
@ -1327,9 +1327,9 @@
|
||||
var GET = 'get', SET = 'set';
|
||||
var Factory = {
|
||||
addGetterSetter: function (constructor, attr, def, validator, after) {
|
||||
this.addGetter(constructor, attr, def);
|
||||
this.addSetter(constructor, attr, validator, after);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addGetter(constructor, attr, def);
|
||||
Factory.addSetter(constructor, attr, validator, after);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addGetter: function (constructor, attr, def) {
|
||||
var method = GET + Util._capitalize(attr);
|
||||
@ -1392,7 +1392,7 @@
|
||||
}
|
||||
return this;
|
||||
};
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addOverloadedGetterSetter: function (constructor, attr) {
|
||||
var capitalizedAttr = Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr;
|
||||
@ -1416,10 +1416,10 @@
|
||||
var val = this.attrs[attr];
|
||||
return val === undefined ? def : val;
|
||||
};
|
||||
this.addSetter(constructor, attr, validator, function () {
|
||||
Factory.addSetter(constructor, attr, validator, function () {
|
||||
Util.error(message);
|
||||
});
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
backCompat: function (constructor, methods) {
|
||||
Util.each(methods, function (oldMethodName, newMethodName) {
|
||||
@ -1441,7 +1441,7 @@
|
||||
},
|
||||
afterSetFilter: function () {
|
||||
this._filterUpToDate = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/*! *****************************************************************************
|
||||
@ -4624,6 +4624,7 @@
|
||||
}());
|
||||
Node.prototype.nodeType = 'Node';
|
||||
Node.prototype._attrsAffectingSize = [];
|
||||
var addGetterSetter = Factory.addGetterSetter;
|
||||
/**
|
||||
* 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.
|
||||
@ -4638,7 +4639,7 @@
|
||||
* // set index
|
||||
* node.zIndex(2);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'zIndex');
|
||||
addGetterSetter(Node, 'zIndex');
|
||||
/**
|
||||
* get/set node absolute position
|
||||
* @name Konva.Node#absolutePosition
|
||||
@ -4657,8 +4658,8 @@
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'absolutePosition');
|
||||
Factory.addGetterSetter(Node, 'position');
|
||||
addGetterSetter(Node, 'absolutePosition');
|
||||
addGetterSetter(Node, 'position');
|
||||
/**
|
||||
* get/set node position relative to parent
|
||||
* @name Konva.Node#position
|
||||
@ -4677,7 +4678,7 @@
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'x', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'x', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set x position
|
||||
* @name Konva.Node#x
|
||||
@ -4691,7 +4692,7 @@
|
||||
* // set x
|
||||
* node.x(5);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'y', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'y', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set y position
|
||||
* @name Konva.Node#y
|
||||
@ -4705,7 +4706,7 @@
|
||||
* // set y
|
||||
* node.y(5);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'globalCompositeOperation', 'source-over', getStringValidator());
|
||||
addGetterSetter(Node, 'globalCompositeOperation', 'source-over', getStringValidator());
|
||||
/**
|
||||
* get/set globalCompositeOperation of a shape
|
||||
* @name Konva.Node#globalCompositeOperation
|
||||
@ -4719,7 +4720,7 @@
|
||||
* // set globalCompositeOperation
|
||||
* 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.
|
||||
* A node with an opacity of 0 is fully transparent, and a node
|
||||
@ -4735,7 +4736,7 @@
|
||||
* // set opacity
|
||||
* node.opacity(0.5);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'name', '', getStringValidator());
|
||||
addGetterSetter(Node, 'name', '', getStringValidator());
|
||||
/**
|
||||
* get/set name
|
||||
* @name Konva.Node#name
|
||||
@ -4752,7 +4753,7 @@
|
||||
* // also node may have multiple names (as css classes)
|
||||
* node.name('foo bar');
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'id', '', getStringValidator());
|
||||
addGetterSetter(Node, 'id', '', getStringValidator());
|
||||
/**
|
||||
* get/set id. Id is global for whole page.
|
||||
* @name Konva.Node#id
|
||||
@ -4766,7 +4767,7 @@
|
||||
* // set id
|
||||
* node.id('foo');
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'rotation', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'rotation', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set rotation in degrees
|
||||
* @name Konva.Node#rotation
|
||||
@ -4799,7 +4800,7 @@
|
||||
* y: 3
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
|
||||
addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
|
||||
/**
|
||||
* get/set scale x
|
||||
* @name Konva.Node#scaleX
|
||||
@ -4813,7 +4814,7 @@
|
||||
* // set scale x
|
||||
* node.scaleX(2);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
|
||||
addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
|
||||
/**
|
||||
* get/set scale y
|
||||
* @name Konva.Node#scaleY
|
||||
@ -4846,7 +4847,7 @@
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'skewX', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'skewX', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set skew x
|
||||
* @name Konva.Node#skewX
|
||||
@ -4860,7 +4861,7 @@
|
||||
* // set skew x
|
||||
* node.skewX(3);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'skewY', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'skewY', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set skew y
|
||||
* @name Konva.Node#skewY
|
||||
@ -4892,7 +4893,7 @@
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set offset x
|
||||
* @name Konva.Node#offsetX
|
||||
@ -4906,7 +4907,7 @@
|
||||
* // set offset x
|
||||
* node.offsetX(3);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set offset y
|
||||
* @name Konva.Node#offsetY
|
||||
@ -4920,7 +4921,7 @@
|
||||
* // set offset y
|
||||
* node.offsetY(3);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
|
||||
addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
|
||||
/**
|
||||
* get/set drag distance
|
||||
* @name Konva.Node#dragDistance
|
||||
@ -4937,7 +4938,7 @@
|
||||
* // or set globally
|
||||
* Konva.dragDistance = 3;
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'width', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'width', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set width
|
||||
* @name Konva.Node#width
|
||||
@ -4951,7 +4952,7 @@
|
||||
* // set width
|
||||
* node.width(100);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'height', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'height', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set height
|
||||
* @name Konva.Node#height
|
||||
@ -4965,7 +4966,7 @@
|
||||
* // set height
|
||||
* 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
|
||||
* by taking into account its parents, use the isListening() method
|
||||
@ -5001,8 +5002,8 @@
|
||||
* // set preventDefault
|
||||
* shape.preventDefault(false);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
|
||||
Factory.addGetterSetter(Node, 'filters', null, function (val) {
|
||||
addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
|
||||
addGetterSetter(Node, 'filters', null, function (val) {
|
||||
this._filterUpToDate = false;
|
||||
return val;
|
||||
});
|
||||
@ -5028,7 +5029,7 @@
|
||||
* 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.
|
||||
* If you need to determine if a node is visible or not
|
||||
@ -5048,7 +5049,7 @@
|
||||
* 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
|
||||
* is "all"
|
||||
@ -5083,7 +5084,7 @@
|
||||
* height: 200
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'size');
|
||||
addGetterSetter(Node, 'size');
|
||||
/**
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position.
|
||||
@ -5105,7 +5106,7 @@
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'dragBoundFunc');
|
||||
addGetterSetter(Node, 'dragBoundFunc');
|
||||
/**
|
||||
* get/set draggable flag
|
||||
* @name Konva.Node#draggable
|
||||
@ -5122,7 +5123,7 @@
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'draggable', false, getBooleanValidator());
|
||||
addGetterSetter(Node, 'draggable', false, getBooleanValidator());
|
||||
Factory.backCompat(Node, {
|
||||
rotateDeg: 'rotate',
|
||||
setRotationDeg: 'setRotation',
|
||||
@ -7084,11 +7085,10 @@
|
||||
return rect;
|
||||
};
|
||||
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.
|
||||
// 2 - when we are caching current
|
||||
// 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 caching = canvas.isCache;
|
||||
var skipBuffer = canvas.isCache;
|
||||
@ -7141,23 +7141,6 @@
|
||||
context._applyShadow(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();
|
||||
return this;
|
||||
|
||||
4
konva.min.js
vendored
4
konva.min.js
vendored
File diff suppressed because one or more lines are too long
15
package.json
15
package.json
@ -24,9 +24,20 @@
|
||||
"rollup": "rollup -c",
|
||||
"clean": "rm -rf ./lib && rm -rf ./types",
|
||||
"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": {
|
||||
"@size-limit/preset-big-lib": "^4.5.0",
|
||||
"chai": "4.2.0",
|
||||
"github-release-from-changelog": "^2.1.1",
|
||||
"gulp": "^4.0.2",
|
||||
@ -40,6 +51,7 @@
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-typescript": "^5.0.1",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-uglify-es": "^2.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"install": "^0.13.0",
|
||||
"mocha": "7.1.2",
|
||||
@ -51,6 +63,7 @@
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-sourcemaps": "^0.6.1",
|
||||
"rollup-plugin-typescript2": "^0.27.0",
|
||||
"size-limit": "^4.5.0",
|
||||
"typescript": "^3.8.3"
|
||||
},
|
||||
"keywords": [
|
||||
|
||||
@ -6,16 +6,16 @@ var GET = 'get',
|
||||
|
||||
export const Factory = {
|
||||
addGetterSetter(constructor, attr, def?, validator?, after?) {
|
||||
this.addGetter(constructor, attr, def);
|
||||
this.addSetter(constructor, attr, validator, after);
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addGetter(constructor, attr, def);
|
||||
Factory.addSetter(constructor, attr, validator, after);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addGetter(constructor, attr, def?) {
|
||||
var method = GET + Util._capitalize(attr);
|
||||
|
||||
constructor.prototype[method] =
|
||||
constructor.prototype[method] ||
|
||||
function() {
|
||||
function () {
|
||||
var val = this.attrs[attr];
|
||||
return val === undefined ? def : val;
|
||||
};
|
||||
@ -30,7 +30,7 @@ export const Factory = {
|
||||
},
|
||||
overWriteSetter(constructor, attr, validator?, after?) {
|
||||
var method = SET + Util._capitalize(attr);
|
||||
constructor.prototype[method] = function(val) {
|
||||
constructor.prototype[method] = function (val) {
|
||||
if (validator && val !== undefined && val !== null) {
|
||||
val = validator.call(this, val, attr);
|
||||
}
|
||||
@ -53,7 +53,7 @@ export const Factory = {
|
||||
component;
|
||||
|
||||
// getter
|
||||
constructor.prototype[getter] = function() {
|
||||
constructor.prototype[getter] = function () {
|
||||
var ret = {};
|
||||
|
||||
for (n = 0; n < len; n++) {
|
||||
@ -67,7 +67,7 @@ export const Factory = {
|
||||
var basicValidator = getComponentValidator(components);
|
||||
|
||||
// setter
|
||||
constructor.prototype[setter] = function(val) {
|
||||
constructor.prototype[setter] = function (val) {
|
||||
var oldVal = this.attrs[attr],
|
||||
key;
|
||||
|
||||
@ -95,14 +95,14 @@ export const Factory = {
|
||||
return this;
|
||||
};
|
||||
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
addOverloadedGetterSetter(constructor, attr) {
|
||||
var capitalizedAttr = Util._capitalize(attr),
|
||||
setter = SET + capitalizedAttr,
|
||||
getter = GET + capitalizedAttr;
|
||||
|
||||
constructor.prototype[attr] = function() {
|
||||
constructor.prototype[attr] = function () {
|
||||
// setting
|
||||
if (arguments.length) {
|
||||
this[setter](arguments[0]);
|
||||
@ -120,18 +120,18 @@ export const Factory = {
|
||||
var message =
|
||||
attr +
|
||||
' 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);
|
||||
var val = this.attrs[attr];
|
||||
return val === undefined ? def : val;
|
||||
};
|
||||
this.addSetter(constructor, attr, validator, function() {
|
||||
Factory.addSetter(constructor, attr, validator, function () {
|
||||
Util.error(message);
|
||||
});
|
||||
this.addOverloadedGetterSetter(constructor, attr);
|
||||
Factory.addOverloadedGetterSetter(constructor, attr);
|
||||
},
|
||||
backCompat(constructor, methods) {
|
||||
Util.each(methods, function(oldMethodName, newMethodName) {
|
||||
Util.each(methods, function (oldMethodName, newMethodName) {
|
||||
var method = constructor.prototype[newMethodName];
|
||||
var oldGetter = GET + Util._capitalize(oldMethodName);
|
||||
var oldSetter = SET + Util._capitalize(oldMethodName);
|
||||
@ -154,5 +154,5 @@ export const Factory = {
|
||||
},
|
||||
afterSetFilter() {
|
||||
this._filterUpToDate = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
57
src/Node.ts
57
src/Node.ts
@ -2456,6 +2456,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
enhance: GetSet<number, this>;
|
||||
filters: GetSet<Filter[], this>;
|
||||
position: GetSet<Vector2d, this>;
|
||||
absolutePosition: GetSet<Vector2d, this>;
|
||||
size: GetSet<{ width: number; height: number }, this>;
|
||||
|
||||
id: GetSet<string, this>;
|
||||
@ -2547,6 +2548,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
Node.prototype.nodeType = 'Node';
|
||||
Node.prototype._attrsAffectingSize = [];
|
||||
|
||||
const addGetterSetter = Factory.addGetterSetter;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
@ -2561,7 +2564,7 @@ Node.prototype._attrsAffectingSize = [];
|
||||
* // set index
|
||||
* node.zIndex(2);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'zIndex');
|
||||
addGetterSetter(Node, 'zIndex');
|
||||
|
||||
/**
|
||||
* get/set node absolute position
|
||||
@ -2581,9 +2584,9 @@ Factory.addGetterSetter(Node, 'zIndex');
|
||||
* y: 10
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'absolutePosition');
|
||||
addGetterSetter(Node, 'absolutePosition');
|
||||
|
||||
Factory.addGetterSetter(Node, 'position');
|
||||
addGetterSetter(Node, 'position');
|
||||
/**
|
||||
* get/set node position relative to parent
|
||||
* @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
|
||||
@ -2619,7 +2622,7 @@ Factory.addGetterSetter(Node, 'x', 0, getNumberValidator());
|
||||
* node.x(5);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'y', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'y', 0, getNumberValidator());
|
||||
|
||||
/**
|
||||
* get/set y position
|
||||
@ -2635,7 +2638,7 @@ Factory.addGetterSetter(Node, 'y', 0, getNumberValidator());
|
||||
* node.y(5);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(
|
||||
addGetterSetter(
|
||||
Node,
|
||||
'globalCompositeOperation',
|
||||
'source-over',
|
||||
@ -2655,7 +2658,7 @@ Factory.addGetterSetter(
|
||||
* // set globalCompositeOperation
|
||||
* 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.
|
||||
@ -2673,7 +2676,7 @@ Factory.addGetterSetter(Node, 'opacity', 1, getNumberValidator());
|
||||
* node.opacity(0.5);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'name', '', getStringValidator());
|
||||
addGetterSetter(Node, 'name', '', getStringValidator());
|
||||
|
||||
/**
|
||||
* get/set name
|
||||
@ -2692,7 +2695,7 @@ Factory.addGetterSetter(Node, 'name', '', getStringValidator());
|
||||
* node.name('foo bar');
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'id', '', getStringValidator());
|
||||
addGetterSetter(Node, 'id', '', getStringValidator());
|
||||
|
||||
/**
|
||||
* get/set id. Id is global for whole page.
|
||||
@ -2708,7 +2711,7 @@ Factory.addGetterSetter(Node, 'id', '', getStringValidator());
|
||||
* node.id('foo');
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'rotation', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'rotation', 0, getNumberValidator());
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -2761,7 +2764,7 @@ Factory.addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
|
||||
* node.scaleX(2);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
|
||||
addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -2814,7 +2817,7 @@ Factory.addGetterSetter(Node, 'skewX', 0, getNumberValidator());
|
||||
* node.skewX(3);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'skewY', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'skewY', 0, getNumberValidator());
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -2866,7 +2869,7 @@ Factory.addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
|
||||
* node.offsetX(3);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
|
||||
|
||||
/**
|
||||
* get/set offset y
|
||||
@ -2882,7 +2885,7 @@ Factory.addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
|
||||
* node.offsetY(3);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
|
||||
addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
|
||||
|
||||
/**
|
||||
* get/set drag distance
|
||||
@ -2901,7 +2904,7 @@ Factory.addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
|
||||
* Konva.dragDistance = 3;
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'width', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'width', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set width
|
||||
* @name Konva.Node#width
|
||||
@ -2916,7 +2919,7 @@ Factory.addGetterSetter(Node, 'width', 0, getNumberValidator());
|
||||
* node.width(100);
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'height', 0, getNumberValidator());
|
||||
addGetterSetter(Node, 'height', 0, getNumberValidator());
|
||||
/**
|
||||
* get/set height
|
||||
* @name Konva.Node#height
|
||||
@ -2931,7 +2934,7 @@ Factory.addGetterSetter(Node, 'height', 0, getNumberValidator());
|
||||
* 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
|
||||
* by taking into account its parents, use the isListening() method
|
||||
@ -2969,9 +2972,9 @@ Factory.addGetterSetter(Node, 'listening', true, getBooleanValidator());
|
||||
* 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;
|
||||
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.
|
||||
* 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
|
||||
@ -3056,7 +3059,7 @@ Factory.addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
|
||||
* height: 200
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'size');
|
||||
addGetterSetter(Node, 'size');
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -3097,7 +3100,7 @@ Factory.addGetterSetter(Node, 'dragBoundFunc');
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'draggable', false, getBooleanValidator());
|
||||
addGetterSetter(Node, 'draggable', false, getBooleanValidator());
|
||||
|
||||
Factory.backCompat(Node, {
|
||||
rotateDeg: 'rotate',
|
||||
|
||||
23
src/Shape.ts
23
src/Shape.ts
@ -541,11 +541,10 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
|
||||
return rect;
|
||||
}
|
||||
drawScene(can?: SceneCanvas, top?: Node) {
|
||||
// basically there are 4 drawing modes
|
||||
// basically there are 3 drawing modes
|
||||
// 1 - simple drawing when nothing is cached.
|
||||
// 2 - when we are caching current
|
||||
// 3 - when node is cached and we need to draw it into layer
|
||||
// 4 - ??
|
||||
|
||||
var layer = this.getLayer(),
|
||||
canvas = can || layer.getCanvas(),
|
||||
@ -623,26 +622,6 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
|
||||
}
|
||||
|
||||
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();
|
||||
return this;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user