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

ixed automatic updates for Konva.Transformer

Browse Source
This commit is contained in:
Anton Lavrenov 2019-02-19 08:36:16 -05:00
parent 74210cbc79
commit 1b065a55a0
19 changed files with 600 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
CHANGELOG.md
View File

@ -5,6 +5,19 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [new version][unreleased] ## [new version][unreleased]
### Possibly breaking
That changes are private and internal specific. They should not break most of `Konva` apps.
* `Konva.Util.addMethods`
* `Konva.Util._removeLastLetter`
* `Konva.Util._getImage`
* `Konv.Util._getRGBAString`
* `Konv.Util._merge`
* Removed polyfill for `requestAnimationFrame`.
* `id` and `name` properties defaults are empty strings, not `undefined`
* internal `_cache` property was updated to use es2015 `Map` instead of `{}`.
### Added ### Added
* Show a warning when a stage has too many layers * Show a warning when a stage has too many layers
* Show a warning on duplicate ids * Show a warning on duplicate ids
@ -16,28 +29,20 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* You can configure what mouse buttons can be used for drag&drop. To enable right button you can use `Konva.dragButtons = [0, 1]`. * You can configure what mouse buttons can be used for drag&drop. To enable right button you can use `Konva.dragButtons = [0, 1]`.
### Changed ### Changed
* Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.
* Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same * Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same
* Fixed `patternImage` and `radialGradient` for `Konva.Text` * Fixed `patternImage` and `radialGradient` for `Konva.Text`
* `Konva.Util._isObject` is renamed to `Konva.Util._isPlainObject`. * `Konva.Util._isObject` is renamed to `Konva.Util._isPlainObject`.
* A bit changed behavior of `removeId` (private method), now it doesn't clear node ref, if object is changed. * A bit changed behavior of `removeId` (private method), now it doesn't clear node ref, if object is changed.
* simplified `batchDraw` method (it doesn't use `Konva.Animation`) now. * simplified `batchDraw` method (it doesn't use `Konva.Animation`) now.
* `id` and `name` properties defaults are empty strings, not `undefined`
* Performance improvements for shapes will image patterns, linear and radial fills * Performance improvements for shapes will image patterns, linear and radial fills
### Removed
* `Konva.Util.addMethods`
* `Konva.Util._removeLastLetter`
* `Konva.Util._getImage`
* `Konv.Util._getRGBAString`
* `Konv.Util._merge`
* Removed polyfill for `requestAnimationFrame`.
### Fixed ### Fixed
* Better mouse support on mobile devices (yes, that is possible to connect mouse to mobile) * Better mouse support on mobile devices (yes, that is possible to connect mouse to mobile)
* Better implementation of `mouseover` event for stage * Better implementation of `mouseover` event for stage
* Fixed underline drawing for text with `lineHeight !== 1` * Fixed underline drawing for text with `lineHeight !== 1`
* Fixed some caching behavior when a node has `globalCompositeOperation`.
* Fixed automatic updates for `Konva.Transformer`
## [2.6.0][2018-12-14] ## [2.6.0][2018-12-14]

135
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v3.0.0-0 * Konva JavaScript Framework v3.0.0-0
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT * Licensed under the MIT
* Date: Mon Feb 18 2019 * Date: Tue Feb 19 2019
* *
* 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)
@ -4337,6 +4337,7 @@
return Node; return Node;
}()); }());
Node.prototype.nodeType = 'Node'; Node.prototype.nodeType = 'Node';
Node.prototype._attrsAffectingSize = [];
/** /**
* 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.
@ -7134,7 +7135,6 @@
// why do we need buffer canvas? // why do we need buffer canvas?
// it give better result when a shape has // it give better result when a shape has
// stroke with fill and with some opacity // stroke with fill and with some opacity
// TODO: try to use it without stage (use global buffer canvas)
Shape.prototype._useBufferCanvas = function (caching) { Shape.prototype._useBufferCanvas = function (caching) {
return ((!caching || this.hasShadow()) && return ((!caching || this.hasShadow()) &&
this.perfectDrawEnabled() && this.perfectDrawEnabled() &&
@ -9143,9 +9143,7 @@
var Arc = /** @class */ (function (_super) { var Arc = /** @class */ (function (_super) {
__extends(Arc, _super); __extends(Arc, _super);
function Arc() { function Arc() {
var _this = _super !== null && _super.apply(this, arguments) || this; return _super !== null && _super.apply(this, arguments) || this;
_this._centroid = true;
return _this;
} }
Arc.prototype._sceneFunc = function (context) { Arc.prototype._sceneFunc = function (context) {
var angle = getAngle(this.angle()), clockwise = this.clockwise(); var angle = getAngle(this.angle()), clockwise = this.clockwise();
@ -9162,22 +9160,16 @@
return this.outerRadius() * 2; return this.outerRadius() * 2;
}; };
Arc.prototype.setWidth = function (width) { Arc.prototype.setWidth = function (width) {
// TODO: remove this line?
Node.prototype['setWidth'].call(this, width);
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
}
}; };
Arc.prototype.setHeight = function (height) { Arc.prototype.setHeight = function (height) {
// TODO: remove this line?
Node.prototype['setHeight'].call(this, height);
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
}
}; };
return Arc; return Arc;
}(Shape)); }(Shape));
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc'; Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
// add getters setters // add getters setters
Factory.addGetterSetter(Arc, 'innerRadius', 0, Validators.getNumberValidator()); Factory.addGetterSetter(Arc, 'innerRadius', 0, Validators.getNumberValidator());
/** /**
@ -9452,6 +9444,7 @@
return Line; return Line;
}(Shape)); }(Shape));
Line.prototype.className = 'Line'; Line.prototype.className = 'Line';
Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
// add getters setters // add getters setters
Factory.addGetterSetter(Line, 'closed', false); Factory.addGetterSetter(Line, 'closed', false);
/** /**
@ -9817,10 +9810,7 @@
var Circle = /** @class */ (function (_super) { var Circle = /** @class */ (function (_super) {
__extends(Circle, _super); __extends(Circle, _super);
function Circle() { function Circle() {
var _this = _super !== null && _super.apply(this, arguments) || this; return _super !== null && _super.apply(this, arguments) || this;
_this.className = 'Circle';
_this._centroid = true;
return _this;
} }
Circle.prototype._sceneFunc = function (context) { Circle.prototype._sceneFunc = function (context) {
context.beginPath(); context.beginPath();
@ -9846,9 +9836,9 @@
}; };
return Circle; return Circle;
}(Shape)); }(Shape));
Circle.prototype._centroid = true;
Circle.prototype.className = 'Circle'; Circle.prototype.className = 'Circle';
// add getters setters Circle.prototype._attrsAffectingSize = ['radius'];
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
/** /**
* get/set radius * get/set radius
* @name Konva.Arrow#radius * @name Konva.Arrow#radius
@ -9862,6 +9852,7 @@
* // set radius * // set radius
* circle.radius(10); * circle.radius(10);
*/ */
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
Collection.mapMethods(Circle); Collection.mapMethods(Circle);
/** /**
@ -9974,19 +9965,16 @@
return this.radiusY() * 2; return this.radiusY() * 2;
}; };
Ellipse.prototype.setWidth = function (width) { Ellipse.prototype.setWidth = function (width) {
// TODO: remove this line?
Node.prototype['setWidth'].call(this, width);
this.radiusX(width / 2); this.radiusX(width / 2);
}; };
Ellipse.prototype.setHeight = function (height) { Ellipse.prototype.setHeight = function (height) {
// TODO: remove this line?
Node.prototype['setHeight'].call(this, height);
this.radiusY(height / 2); this.radiusY(height / 2);
}; };
return Ellipse; return Ellipse;
}(Shape)); }(Shape));
Ellipse.prototype.className = 'Ellipse'; Ellipse.prototype.className = 'Ellipse';
Ellipse.prototype._centroid = true; Ellipse.prototype._centroid = true;
Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
// add getters setters // add getters setters
Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']); Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
/** /**
@ -11361,6 +11349,7 @@
return Path; return Path;
}(Shape)); }(Shape));
Path.prototype.className = 'Path'; Path.prototype.className = 'Path';
Path.prototype._attrsAffectingSize = ['data'];
/** /**
* get/set SVG path data string. This method * get/set SVG path data string. This method
* also automatically parses the data string * also automatically parses the data string
@ -11628,19 +11617,16 @@
return this.radius() * 2; return this.radius() * 2;
}; };
RegularPolygon.prototype.setWidth = function (width) { RegularPolygon.prototype.setWidth = function (width) {
if (this.radius() !== width / 2) {
this.radius(width / 2); this.radius(width / 2);
}
}; };
RegularPolygon.prototype.setHeight = function (height) { RegularPolygon.prototype.setHeight = function (height) {
if (this.radius() !== height / 2) {
this.radius(height / 2); this.radius(height / 2);
}
}; };
return RegularPolygon; return RegularPolygon;
}(Shape)); }(Shape));
RegularPolygon.prototype.className = 'RegularPolygon'; RegularPolygon.prototype.className = 'RegularPolygon';
RegularPolygon.prototype._centroid = true; RegularPolygon.prototype._centroid = true;
RegularPolygon.prototype._attrsAffectingSize = ['radius'];
/** /**
* get/set radius * get/set radius
* @method * @method
@ -11781,19 +11767,16 @@
return this.outerRadius() * 2; return this.outerRadius() * 2;
}; };
Ring.prototype.setWidth = function (width) { Ring.prototype.setWidth = function (width) {
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
}
}; };
Ring.prototype.setHeight = function (height) { Ring.prototype.setHeight = function (height) {
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
}
}; };
return Ring; return Ring;
}(Shape)); }(Shape));
Ring.prototype.className = 'Ring'; Ring.prototype.className = 'Ring';
Ring.prototype._centroid = true; Ring.prototype._centroid = true;
Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
/** /**
* get/set innerRadius * get/set innerRadius
* @method * @method
@ -12309,19 +12292,16 @@
return this.outerRadius() * 2; return this.outerRadius() * 2;
}; };
Star.prototype.setWidth = function (width) { Star.prototype.setWidth = function (width) {
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
}
}; };
Star.prototype.setHeight = function (height) { Star.prototype.setHeight = function (height) {
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
}
}; };
return Star; return Star;
}(Shape)); }(Shape));
Star.prototype.className = 'Star'; Star.prototype.className = 'Star';
Star.prototype._centroid = true; Star.prototype._centroid = true;
Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
/** /**
* get/set number of points * get/set number of points
* @name Konva.Ring#numPoints * @name Konva.Ring#numPoints
@ -12823,6 +12803,13 @@
Text.prototype._fillFunc = _fillFunc$1; Text.prototype._fillFunc = _fillFunc$1;
Text.prototype._strokeFunc = _strokeFunc$1; Text.prototype._strokeFunc = _strokeFunc$1;
Text.prototype.className = TEXT_UPPER; Text.prototype.className = TEXT_UPPER;
Text.prototype._attrsAffectingSize = [
'text',
'fontSize',
'padding',
'wrap',
'lineHeight'
];
/** /**
* get/set width of text area, which includes padding. * get/set width of text area, which includes padding.
* @name Konva.Text#width * @name Konva.Text#width
@ -13519,6 +13506,7 @@
TextPath.prototype._fillFuncHit = _fillFunc$2; TextPath.prototype._fillFuncHit = _fillFunc$2;
TextPath.prototype._strokeFuncHit = _strokeFunc$2; TextPath.prototype._strokeFuncHit = _strokeFunc$2;
TextPath.prototype.className = 'TextPath'; TextPath.prototype.className = 'TextPath';
TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
/** /**
* get/set SVG path data string. This method * get/set SVG path data string. This method
* also automatically parses the data string * also automatically parses the data string
@ -13700,32 +13688,20 @@
'ignoreStrokeChange' 'ignoreStrokeChange'
].join(' '); ].join(' ');
var NODE_RECT = 'nodeRect'; var NODE_RECT = 'nodeRect';
// TODO: check circles and text here!!!!
// change text? change radius? change arc?
var TRANSFORM_CHANGE_STR$1 = [ var TRANSFORM_CHANGE_STR$1 = [
'xChange.resizer', 'xChange.tr',
'yChange.resizer', 'yChange.tr',
'widthChange.resizer', 'widthChange.tr',
'heightChange.resizer', 'heightChange.tr',
'scaleXChange.resizer', 'scaleXChange.tr',
'scaleYChange.resizer', 'scaleYChange.tr',
'skewXChange.resizer', 'skewXChange.tr',
'skewYChange.resizer', 'skewYChange.tr',
'rotationChange.resizer', 'rotationChange.tr',
'offsetXChange.resizer', 'offsetXChange.tr',
'offsetYChange.resizer', 'offsetYChange.tr',
'transformsEnabledChange.resizer' 'transformsEnabledChange.tr',
].join(' '); 'strokeWidthChange.tr'
var REDRAW_CHANGE_STR = [
'widthChange.resizer',
'heightChange.resizer',
'scaleXChange.resizer',
'scaleYChange.resizer',
'skewXChange.resizer',
'skewYChange.resizer',
'rotationChange.resizer',
'offsetXChange.resizer',
'offsetYChange.resizer'
].join(' '); ].join(' ');
var ANGLES = { var ANGLES = {
'top-left': -45, 'top-left': -45,
@ -13864,17 +13840,39 @@
return this; return this;
}; };
Transformer.prototype.setNode = function (node) { Transformer.prototype.setNode = function (node) {
var _this = this;
if (this._node) { if (this._node) {
this.detach(); this.detach();
} }
this._node = node; this._node = node;
this._resetTransformCache(); this._resetTransformCache();
node.on(TRANSFORM_CHANGE_STR$1, this._resetTransformCache.bind(this)); var additionalEvents = node._attrsAffectingSize
node.on(REDRAW_CHANGE_STR, function () { .map(function (prop) { return prop + 'Change.tr'; })
if (!this._transforming) { .join(' ');
this.update(); var upChange = function () {
_this._resetTransformCache();
if (!_this._transforming) {
_this.update();
} }
}.bind(this)); };
node.on(additionalEvents, upChange);
node.on(TRANSFORM_CHANGE_STR$1, upChange);
// node.on(
// additionalEvents,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// node.on(
// REDRAW_CHANGE_STR,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// we may need it if we set not in initial props // we may need it if we set not in initial props
// so elements are not defined yet // so elements are not defined yet
var elementsCreated = !!this.findOne('.top-left'); var elementsCreated = !!this.findOne('.top-left');
@ -13897,7 +13895,7 @@
*/ */
Transformer.prototype.detach = function () { Transformer.prototype.detach = function () {
if (this.getNode()) { if (this.getNode()) {
this.getNode().off('.resizer'); this.getNode().off('.tr');
this._node = undefined; this._node = undefined;
} }
this._resetTransformCache(); this._resetTransformCache();
@ -14813,19 +14811,16 @@
return this.radius() * 2; return this.radius() * 2;
}; };
Wedge.prototype.setWidth = function (width) { Wedge.prototype.setWidth = function (width) {
if (this.radius() !== width / 2) {
this.radius(width / 2); this.radius(width / 2);
}
}; };
Wedge.prototype.setHeight = function (height) { Wedge.prototype.setHeight = function (height) {
if (this.radius() !== height / 2) {
this.radius(height / 2); this.radius(height / 2);
}
}; };
return Wedge; return Wedge;
}(Shape)); }(Shape));
Wedge.prototype.className = 'Wedge'; Wedge.prototype.className = 'Wedge';
Wedge.prototype._centroid = true; Wedge.prototype._centroid = true;
Wedge.prototype._attrsAffectingSize = ['radius'];
/** /**
* get/set radius * get/set radius
* @name Konva.Wedge#radius * @name Konva.Wedge#radius

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Node.ts
View File

@ -119,6 +119,7 @@ export abstract class Node {
parent: Container = null; parent: Container = null;
_cache: Map<string, any> = new Map<string, any>(); _cache: Map<string, any> = new Map<string, any>();
_lastPos = null; _lastPos = null;
_attrsAffectingSize: string[];
_filterUpToDate = false; _filterUpToDate = false;
_isUnderCache = false; _isUnderCache = false;
@ -2324,6 +2325,7 @@ export abstract class Node {
} }
Node.prototype.nodeType = 'Node'; Node.prototype.nodeType = 'Node';
Node.prototype._attrsAffectingSize = [];
/** /**
* 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.

1
src/Shape.ts
View File

@ -320,7 +320,6 @@ export class Shape extends Node {
// why do we need buffer canvas? // why do we need buffer canvas?
// it give better result when a shape has // it give better result when a shape has
// stroke with fill and with some opacity // stroke with fill and with some opacity
// TODO: try to use it without stage (use global buffer canvas)
_useBufferCanvas(caching) { _useBufferCanvas(caching) {
return ( return (
(!caching || this.hasShadow()) && (!caching || this.hasShadow()) &&

12
src/shapes/Arc.ts
View File

@ -30,8 +30,6 @@ import { GetSet } from '../types';
* }); * });
*/ */
export class Arc extends Shape { export class Arc extends Shape {
_centroid = true;
_sceneFunc(context) { _sceneFunc(context) {
var angle = getAngle(this.angle()), var angle = getAngle(this.angle()),
clockwise = this.clockwise(); clockwise = this.clockwise();
@ -49,19 +47,11 @@ export class Arc extends Shape {
return this.outerRadius() * 2; return this.outerRadius() * 2;
} }
setWidth(width) { setWidth(width) {
// TODO: remove this line?
Node.prototype['setWidth'].call(this, width);
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
} }
}
setHeight(height) { setHeight(height) {
// TODO: remove this line?
Node.prototype['setHeight'].call(this, height);
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
} }
}
innerRadius: GetSet<number, this>; innerRadius: GetSet<number, this>;
outerRadius: GetSet<number, this>; outerRadius: GetSet<number, this>;
@ -69,7 +59,9 @@ export class Arc extends Shape {
clockwise: GetSet<boolean, this>; clockwise: GetSet<boolean, this>;
} }
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc'; Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
// add getters setters // add getters setters
Factory.addGetterSetter(Arc, 'innerRadius', 0, Validators.getNumberValidator()); Factory.addGetterSetter(Arc, 'innerRadius', 0, Validators.getNumberValidator());

9
src/shapes/Circle.ts
View File

@ -23,9 +23,6 @@ import { GetSet } from '../types';
* }); * });
*/ */
export class Circle extends Shape { export class Circle extends Shape {
className = 'Circle';
_centroid = true;
_sceneFunc(context) { _sceneFunc(context) {
context.beginPath(); context.beginPath();
context.arc(0, 0, this.radius(), 0, Math.PI * 2, false); context.arc(0, 0, this.radius(), 0, Math.PI * 2, false);
@ -52,10 +49,9 @@ export class Circle extends Shape {
radius: GetSet<number, this>; radius: GetSet<number, this>;
} }
Circle.prototype._centroid = true;
Circle.prototype.className = 'Circle'; Circle.prototype.className = 'Circle';
Circle.prototype._attrsAffectingSize = ['radius'];
// add getters setters
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
/** /**
* get/set radius * get/set radius
@ -70,5 +66,6 @@ Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
* // set radius * // set radius
* circle.radius(10); * circle.radius(10);
*/ */
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
Collection.mapMethods(Circle); Collection.mapMethods(Circle);

5
src/shapes/Ellipse.ts
View File

@ -44,13 +44,9 @@ export class Ellipse extends Shape {
return this.radiusY() * 2; return this.radiusY() * 2;
} }
setWidth(width) { setWidth(width) {
// TODO: remove this line?
Node.prototype['setWidth'].call(this, width);
this.radiusX(width / 2); this.radiusX(width / 2);
} }
setHeight(height) { setHeight(height) {
// TODO: remove this line?
Node.prototype['setHeight'].call(this, height);
this.radiusY(height / 2); this.radiusY(height / 2);
} }
@ -61,6 +57,7 @@ export class Ellipse extends Shape {
Ellipse.prototype.className = 'Ellipse'; Ellipse.prototype.className = 'Ellipse';
Ellipse.prototype._centroid = true; Ellipse.prototype._centroid = true;
Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
// add getters setters // add getters setters
Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']); Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);

1
src/shapes/Line.ts
View File

@ -207,6 +207,7 @@ export class Line extends Shape {
} }
Line.prototype.className = 'Line'; Line.prototype.className = 'Line';
Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
// add getters setters // add getters setters
Factory.addGetterSetter(Line, 'closed', false); Factory.addGetterSetter(Line, 'closed', false);

1
src/shapes/Path.ts
View File

@ -868,6 +868,7 @@ export class Path extends Shape {
} }
Path.prototype.className = 'Path'; Path.prototype.className = 'Path';
Path.prototype._attrsAffectingSize = ['data'];
/** /**
* get/set SVG path data string. This method * get/set SVG path data string. This method

5
src/shapes/RegularPolygon.ts
View File

@ -50,15 +50,11 @@ export class RegularPolygon extends Shape {
return this.radius() * 2; return this.radius() * 2;
} }
setWidth(width) { setWidth(width) {
if (this.radius() !== width / 2) {
this.radius(width / 2); this.radius(width / 2);
} }
}
setHeight(height) { setHeight(height) {
if (this.radius() !== height / 2) {
this.radius(height / 2); this.radius(height / 2);
} }
}
radius: GetSet<number, this>; radius: GetSet<number, this>;
sides: GetSet<number, this>; sides: GetSet<number, this>;
@ -66,6 +62,7 @@ export class RegularPolygon extends Shape {
RegularPolygon.prototype.className = 'RegularPolygon'; RegularPolygon.prototype.className = 'RegularPolygon';
RegularPolygon.prototype._centroid = true; RegularPolygon.prototype._centroid = true;
RegularPolygon.prototype._attrsAffectingSize = ['radius'];
/** /**
* get/set radius * get/set radius

5
src/shapes/Ring.ts
View File

@ -40,15 +40,11 @@ export class Ring extends Shape {
return this.outerRadius() * 2; return this.outerRadius() * 2;
} }
setWidth(width) { setWidth(width) {
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
} }
}
setHeight(height) { setHeight(height) {
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
} }
}
outerRadius: GetSet<number, this>; outerRadius: GetSet<number, this>;
innerRadius: GetSet<number, this>; innerRadius: GetSet<number, this>;
@ -56,6 +52,7 @@ export class Ring extends Shape {
Ring.prototype.className = 'Ring'; Ring.prototype.className = 'Ring';
Ring.prototype._centroid = true; Ring.prototype._centroid = true;
Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
/** /**
* get/set innerRadius * get/set innerRadius

1
src/shapes/Sprite.ts
View File

@ -209,7 +209,6 @@ export class Sprite extends Shape {
frameIndex: GetSet<number, this>; frameIndex: GetSet<number, this>;
animation: GetSet<string, this>; animation: GetSet<string, this>;
image: GetSet<CanvasImageSource, this>; image: GetSet<CanvasImageSource, this>;
// TODO: write better type
animations: GetSet<any, this>; animations: GetSet<any, this>;
frameOffsets: GetSet<any, this>; frameOffsets: GetSet<any, this>;
frameRate: GetSet<number, this>; frameRate: GetSet<number, this>;

5
src/shapes/Star.ts
View File

@ -54,15 +54,11 @@ export class Star extends Shape {
return this.outerRadius() * 2; return this.outerRadius() * 2;
} }
setWidth(width) { setWidth(width) {
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2); this.outerRadius(width / 2);
} }
}
setHeight(height) { setHeight(height) {
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2); this.outerRadius(height / 2);
} }
}
outerRadius: GetSet<number, this>; outerRadius: GetSet<number, this>;
innerRadius: GetSet<number, this>; innerRadius: GetSet<number, this>;
@ -71,6 +67,7 @@ export class Star extends Shape {
Star.prototype.className = 'Star'; Star.prototype.className = 'Star';
Star.prototype._centroid = true; Star.prototype._centroid = true;
Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
/** /**
* get/set number of points * get/set number of points

7
src/shapes/Text.ts
View File

@ -504,6 +504,13 @@ export class Text extends Shape {
Text.prototype._fillFunc = _fillFunc; Text.prototype._fillFunc = _fillFunc;
Text.prototype._strokeFunc = _strokeFunc; Text.prototype._strokeFunc = _strokeFunc;
Text.prototype.className = TEXT_UPPER; Text.prototype.className = TEXT_UPPER;
Text.prototype._attrsAffectingSize = [
'text',
'fontSize',
'padding',
'wrap',
'lineHeight'
];
/** /**
* get/set width of text area, which includes padding. * get/set width of text area, which includes padding.

1
src/shapes/TextPath.ts
View File

@ -539,6 +539,7 @@ TextPath.prototype._strokeFunc = _strokeFunc;
TextPath.prototype._fillFuncHit = _fillFunc; TextPath.prototype._fillFuncHit = _fillFunc;
TextPath.prototype._strokeFuncHit = _strokeFunc; TextPath.prototype._strokeFuncHit = _strokeFunc;
TextPath.prototype.className = 'TextPath'; TextPath.prototype.className = 'TextPath';
TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
/** /**
* get/set SVG path data string. This method * get/set SVG path data string. This method

75
src/shapes/Transformer.ts
View File

@ -27,34 +27,20 @@ var ATTR_CHANGE_LIST = [
var NODE_RECT = 'nodeRect'; var NODE_RECT = 'nodeRect';
// TODO: check circles and text here!!!!
// change text? change radius? change arc?
var TRANSFORM_CHANGE_STR = [ var TRANSFORM_CHANGE_STR = [
'xChange.resizer', 'xChange.tr',
'yChange.resizer', 'yChange.tr',
'widthChange.resizer', 'widthChange.tr',
'heightChange.resizer', 'heightChange.tr',
'scaleXChange.resizer', 'scaleXChange.tr',
'scaleYChange.resizer', 'scaleYChange.tr',
'skewXChange.resizer', 'skewXChange.tr',
'skewYChange.resizer', 'skewYChange.tr',
'rotationChange.resizer', 'rotationChange.tr',
'offsetXChange.resizer', 'offsetXChange.tr',
'offsetYChange.resizer', 'offsetYChange.tr',
'transformsEnabledChange.resizer' 'transformsEnabledChange.tr',
].join(' '); 'strokeWidthChange.tr'
var REDRAW_CHANGE_STR = [
'widthChange.resizer',
'heightChange.resizer',
'scaleXChange.resizer',
'scaleYChange.resizer',
'skewXChange.resizer',
'skewYChange.resizer',
'rotationChange.resizer',
'offsetXChange.resizer',
'offsetYChange.resizer'
].join(' '); ].join(' ');
var ANGLES = { var ANGLES = {
@ -205,15 +191,36 @@ export class Transformer extends Group {
this._node = node; this._node = node;
this._resetTransformCache(); this._resetTransformCache();
node.on(TRANSFORM_CHANGE_STR, this._resetTransformCache.bind(this)); const additionalEvents = node._attrsAffectingSize
node.on( .map(prop => prop + 'Change.tr')
REDRAW_CHANGE_STR, .join(' ');
function() {
const upChange = () => {
this._resetTransformCache();
if (!this._transforming) { if (!this._transforming) {
this.update(); this.update();
} }
}.bind(this) };
); node.on(additionalEvents, upChange);
node.on(TRANSFORM_CHANGE_STR, upChange);
// node.on(
// additionalEvents,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// node.on(
// REDRAW_CHANGE_STR,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// we may need it if we set not in initial props // we may need it if we set not in initial props
// so elements are not defined yet // so elements are not defined yet
@ -237,7 +244,7 @@ export class Transformer extends Group {
*/ */
detach() { detach() {
if (this.getNode()) { if (this.getNode()) {
this.getNode().off('.resizer'); this.getNode().off('.tr');
this._node = undefined; this._node = undefined;
} }
this._resetTransformCache(); this._resetTransformCache();

5
src/shapes/Wedge.ts
View File

@ -50,15 +50,11 @@ export class Wedge extends Shape {
return this.radius() * 2; return this.radius() * 2;
} }
setWidth(width) { setWidth(width) {
if (this.radius() !== width / 2) {
this.radius(width / 2); this.radius(width / 2);
} }
}
setHeight(height) { setHeight(height) {
if (this.radius() !== height / 2) {
this.radius(height / 2); this.radius(height / 2);
} }
}
radius: GetSet<number, this>; radius: GetSet<number, this>;
angle: GetSet<number, this>; angle: GetSet<number, this>;
@ -67,6 +63,7 @@ export class Wedge extends Shape {
Wedge.prototype.className = 'Wedge'; Wedge.prototype.className = 'Wedge';
Wedge.prototype._centroid = true; Wedge.prototype._centroid = true;
Wedge.prototype._attrsAffectingSize = ['radius'];
/** /**
* get/set radius * get/set radius

431
test/unit/shapes/Transformer-test.js
View File

@ -1713,4 +1713,435 @@ suite('Transformer', function() {
assert.equal(rect.width(), 100); assert.equal(rect.width(), 100);
assert.equal(rect.height(), 100); assert.equal(rect.height(), 100);
}); });
test('attrs change - arc', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Arc({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
innerRadius: 40,
outerRadius: 70,
angle: 60,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.outerRadius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
shape.innerRadius(200);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
layer.draw();
});
test('attrs change - line', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Arrow({
x: stage.getWidth() / 4,
y: stage.getHeight() / 4,
points: [0, 0, stage.width() / 2, stage.height() / 2],
pointerLength: 20,
pointerWidth: 20,
fill: 'black',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
layer.draw();
shape.points([10, 10, 100, 10]);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
layer.draw();
assert.deepEqual(shape.getClientRect(), rect);
shape.strokeWidth(10);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
layer.draw();
assert.deepEqual(shape.getClientRect(), rect);
});
test('attrs change - circle', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.radius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
});
test('attrs change - ellipse', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {
x: 100,
y: 50
},
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.radiusX(120);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
shape.radiusY(100);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
layer.draw();
});
test('attrs change - rect', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 100,
height: 100,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.width(120);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
shape.height(110);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
layer.draw();
});
test('attrs change - path', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Path({
x: 50,
y: 40,
data:
'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
fill: 'green'
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.data('M200,100h100v50z');
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
});
test('attrs change - regular polygon', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.RegularPolygon({
x: 100,
y: 150,
sides: 6,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.radius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
});
test('attrs change - ring', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Ring({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
innerRadius: 40,
outerRadius: 70,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.outerRadius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
shape.innerRadius(200);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
layer.draw();
});
test('attrs change - star', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Star({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
numPoints: 6,
innerRadius: 40,
outerRadius: 70,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.outerRadius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
shape.innerRadius(200);
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
layer.draw();
});
test('attrs change - wedge', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
angle: 60,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.radius(100);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect);
});
test('attrs change - text', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Text({
x: stage.getWidth() / 2,
y: 15,
text: 'Simple Text',
fontSize: 60,
fontFamily: 'Calibri',
fill: 'green'
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.text('Simple');
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change text');
shape.fontSize(30);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change font size');
shape.padding(10);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change padding');
shape.lineHeight(2);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change line height');
shape.width(30);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect), 'change width';
shape.height(30);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change height');
});
test('attrs change - text path', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.TextPath({
x: 0,
y: 50,
fill: '#333',
fontSize: 16,
fontFamily: 'Arial',
text:
"All the world's a stage, and all the men and women merely players.",
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});
layer.add(shape);
var tr = new Konva.Transformer({
node: shape
});
layer.add(tr);
shape.text('Simple');
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change text');
shape.fontSize(30);
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect, 'change font size');
shape.data('M10,10 C0,0 10,150 100,100 S300,150 400,50');
layer.draw();
var rect = Object.assign({}, tr._getNodeRect());
delete rect.rotation;
assert.deepEqual(shape.getClientRect(), rect), 'change data';
});
}); });