lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 13:38:15 +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]
### 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
* Show a warning when a stage has too many layers
* 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]`.
### 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
* Fixed `patternImage` and `radialGradient` for `Konva.Text`
* `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.
* 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
### Removed
* `Konva.Util.addMethods`
* `Konva.Util._removeLastLetter`
* `Konva.Util._getImage`
* `Konv.Util._getRGBAString`
* `Konv.Util._merge`
* Removed polyfill for `requestAnimationFrame`.
### Fixed
* Better mouse support on mobile devices (yes, that is possible to connect mouse to mobile)
* Better implementation of `mouseover` event for stage
* 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]

155
konva.js
View File

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

16
src/shapes/Arc.ts
View File

@ -30,8 +30,6 @@ import { GetSet } from '../types';
* });
*/
export class Arc extends Shape {
_centroid = true;
_sceneFunc(context) {
var angle = getAngle(this.angle()),
clockwise = this.clockwise();
@ -49,18 +47,10 @@ export class Arc extends Shape {
return this.outerRadius() * 2;
}
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) {
// 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>;
@ -69,7 +59,9 @@ export class Arc extends Shape {
clockwise: GetSet<boolean, this>;
}
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
// add getters setters
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 {
className = 'Circle';
_centroid = true;
_sceneFunc(context) {
context.beginPath();
context.arc(0, 0, this.radius(), 0, Math.PI * 2, false);
@ -52,10 +49,9 @@ export class Circle extends Shape {
radius: GetSet<number, this>;
}
Circle.prototype._centroid = true;
Circle.prototype.className = 'Circle';
// add getters setters
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
Circle.prototype._attrsAffectingSize = ['radius'];
/**
* get/set radius
@ -70,5 +66,6 @@ Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
* // set radius
* circle.radius(10);
*/
Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
Collection.mapMethods(Circle);

5
src/shapes/Ellipse.ts
View File

@ -44,13 +44,9 @@ export class Ellipse extends Shape {
return this.radiusY() * 2;
}
setWidth(width) {
// TODO: remove this line?
Node.prototype['setWidth'].call(this, width);
this.radiusX(width / 2);
}
setHeight(height) {
// TODO: remove this line?
Node.prototype['setHeight'].call(this, height);
this.radiusY(height / 2);
}
@ -61,6 +57,7 @@ export class Ellipse extends Shape {
Ellipse.prototype.className = 'Ellipse';
Ellipse.prototype._centroid = true;
Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
// add getters setters
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._attrsAffectingSize = ['points', 'bezier', 'tension'];
// add getters setters
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._attrsAffectingSize = ['data'];
/**
* get/set SVG path data string. This method

9
src/shapes/RegularPolygon.ts
View File

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

9
src/shapes/Ring.ts
View File

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

1
src/shapes/Sprite.ts
View File

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

9
src/shapes/Star.ts
View File

@ -54,14 +54,10 @@ export class Star extends Shape {
return this.outerRadius() * 2;
}
setWidth(width) {
if (this.outerRadius() !== width / 2) {
this.outerRadius(width / 2);
}
this.outerRadius(width / 2);
}
setHeight(height) {
if (this.outerRadius() !== height / 2) {
this.outerRadius(height / 2);
}
this.outerRadius(height / 2);
}
outerRadius: GetSet<number, this>;
@ -71,6 +67,7 @@ export class Star extends Shape {
Star.prototype.className = 'Star';
Star.prototype._centroid = true;
Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
/**
* 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._strokeFunc = _strokeFunc;
Text.prototype.className = TEXT_UPPER;
Text.prototype._attrsAffectingSize = [
'text',
'fontSize',
'padding',
'wrap',
'lineHeight'
];
/**
* 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._strokeFuncHit = _strokeFunc;
TextPath.prototype.className = 'TextPath';
TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
/**
* get/set SVG path data string. This method

83
src/shapes/Transformer.ts
View File

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

9
src/shapes/Wedge.ts
View File

@ -50,14 +50,10 @@ export class Wedge extends Shape {
return this.radius() * 2;
}
setWidth(width) {
if (this.radius() !== width / 2) {
this.radius(width / 2);
}
this.radius(width / 2);
}
setHeight(height) {
if (this.radius() !== height / 2) {
this.radius(height / 2);
}
this.radius(height / 2);
}
radius: GetSet<number, this>;
@ -67,6 +63,7 @@ export class Wedge extends Shape {
Wedge.prototype.className = 'Wedge';
Wedge.prototype._centroid = true;
Wedge.prototype._attrsAffectingSize = ['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.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';
});
});