mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
billion transformer fixes
This commit is contained in:
Anton Lavrenov
parent
52f1b91387
commit
8a45c1b4f7
169
konva.js
169
konva.js
@ -2,7 +2,7 @@
|
||||
* Konva JavaScript Framework v1.7.6
|
||||
* http://konvajs.github.io/
|
||||
* Licensed under the MIT
|
||||
* Date: Tue Feb 06 2018
|
||||
* Date: Fri Feb 09 2018
|
||||
*
|
||||
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
||||
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
||||
@ -18283,6 +18283,8 @@
|
||||
var TRANSFORM_CHANGE_STR = [
|
||||
'xChange.resizer',
|
||||
'yChange.resizer',
|
||||
'widthChange.resizer',
|
||||
'heightChange.resizer',
|
||||
'scaleXChange.resizer',
|
||||
'scaleYChange.resizer',
|
||||
'skewXChange.resizer',
|
||||
@ -18317,6 +18319,8 @@
|
||||
Konva.Group.call(this, config);
|
||||
this.className = 'Transformer';
|
||||
this._createElements();
|
||||
|
||||
// bindings
|
||||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||||
this._update = this._update.bind(this);
|
||||
@ -18326,25 +18330,62 @@
|
||||
|
||||
if (!warningShowed) {
|
||||
Konva.Util.warn(
|
||||
'Konva.Transformer is currently experimental and may have many bugs. Please report any bugs to GitHub repo.'
|
||||
'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.'
|
||||
);
|
||||
warningShowed = true;
|
||||
}
|
||||
},
|
||||
|
||||
attachTo: function(node) {
|
||||
if (this._el) {
|
||||
if (this.node()) {
|
||||
this.detach();
|
||||
}
|
||||
this._el = node;
|
||||
this.setNode(node);
|
||||
node.on('dragmove.resizer', this._update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
|
||||
this._update();
|
||||
this._el.on('dragmove.resizer', this._update);
|
||||
this._el.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
},
|
||||
|
||||
detach: function() {
|
||||
this._el.off('.resizer');
|
||||
this._el = null;
|
||||
this.getNode().off('.resizer');
|
||||
},
|
||||
|
||||
_getNodeRect: function() {
|
||||
var node = this.getNode();
|
||||
var rect = node.getClientRect({ skipTransform: true });
|
||||
var rotation = Konva.getAngle(node.rotation());
|
||||
|
||||
var dx = rect.x * node.scaleX() - node.offsetX();
|
||||
var dy = rect.y * node.scaleY() - node.offsetX();
|
||||
|
||||
return {
|
||||
x: node.x() + dx * Math.cos(rotation) + dy * Math.sin(-rotation),
|
||||
y: node.y() + dy * Math.cos(rotation) + dx * Math.sin(rotation),
|
||||
width: rect.width * node.scaleX(),
|
||||
height: rect.height * node.scaleY(),
|
||||
rotation: node.rotation()
|
||||
};
|
||||
},
|
||||
|
||||
getX: function() {
|
||||
return this._getNodeRect().x;
|
||||
},
|
||||
|
||||
getY: function() {
|
||||
return this._getNodeRect().y;
|
||||
},
|
||||
|
||||
getRotation: function() {
|
||||
return this._getNodeRect().rotation;
|
||||
},
|
||||
|
||||
getWidth: function() {
|
||||
return this._getNodeRect().width;
|
||||
},
|
||||
|
||||
getHeight: function() {
|
||||
return this._getNodeRect().height;
|
||||
},
|
||||
|
||||
_createElements: function() {
|
||||
@ -18375,7 +18416,6 @@
|
||||
var self = this;
|
||||
anchor.on('mousedown touchstart', function(e) {
|
||||
self.handleResizerMouseDown(e);
|
||||
console.log('down');
|
||||
});
|
||||
|
||||
// add hover styling
|
||||
@ -18424,8 +18464,10 @@
|
||||
handleResizerMouseDown: function(e) {
|
||||
this.movingResizer = e.target.name();
|
||||
|
||||
var width = this._el.width() * this._el.scaleX();
|
||||
var height = this._el.height() * this._el.scaleY();
|
||||
// var node = this.getNode();
|
||||
var attrs = this._getNodeRect();
|
||||
var width = attrs.width;
|
||||
var height = attrs.height;
|
||||
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
||||
this.sin = height / hypotenuse;
|
||||
this.cos = width / hypotenuse;
|
||||
@ -18521,18 +18563,19 @@
|
||||
this.findOne('.bottom-right').x(x);
|
||||
this.findOne('.bottom-right').y(y);
|
||||
} else if (this.movingResizer === 'rotater') {
|
||||
x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
var attrs = this._getNodeRect();
|
||||
x = resizerNode.x() - attrs.width / 2;
|
||||
y = -resizerNode.y() + attrs.height / 2;
|
||||
|
||||
var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
|
||||
var attrs = this._getAttrs();
|
||||
// var attrs = this._getAttrs();
|
||||
|
||||
var rot = Konva.getAngle(this.rotation());
|
||||
|
||||
var newRotation =
|
||||
Konva.Util._radToDeg(rot) + Konva.Util._radToDeg(dAlpha);
|
||||
|
||||
var alpha = Konva.getAngle(this._el.rotation());
|
||||
var alpha = Konva.getAngle(this.getNode().rotation());
|
||||
var newAlpha = Konva.Util._degToRad(newRotation);
|
||||
|
||||
var snaps = this.rotationSnaps();
|
||||
@ -18549,7 +18592,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
this._setElementAttrs(
|
||||
this._fitNodeInto(
|
||||
Object.assign(attrs, {
|
||||
rotation: Konva.angleDeg
|
||||
? newRotation
|
||||
@ -18561,7 +18604,9 @@
|
||||
y:
|
||||
attrs.y +
|
||||
attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
|
||||
attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha))
|
||||
attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
|
||||
width: attrs.width,
|
||||
height: attrs.height
|
||||
})
|
||||
);
|
||||
} else {
|
||||
@ -18587,9 +18632,9 @@
|
||||
var height =
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
|
||||
|
||||
this._setElementAttrs({
|
||||
absX: this._el._centroid ? x + width / 2 : x,
|
||||
absY: this._el._centroid ? y + height / 2 : y,
|
||||
this._fitNodeInto({
|
||||
x: x + this.offsetX(),
|
||||
y: y + this.offsetY(),
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
@ -18602,7 +18647,7 @@
|
||||
_removeEvents: function() {
|
||||
if (this._transforming) {
|
||||
this.fire('transformend');
|
||||
this._el.fire('transformend');
|
||||
this.getNode().fire('transformend');
|
||||
window.removeEventListener('mousemove', this.handleMouseMove);
|
||||
window.removeEventListener('touchmove', this.handleMouseMove);
|
||||
window.removeEventListener('mouseup', this.handleMouseUp);
|
||||
@ -18611,67 +18656,42 @@
|
||||
this._transforming = false;
|
||||
},
|
||||
|
||||
_getAttrs: function() {
|
||||
if (this._el._centroid) {
|
||||
var topLeftResizer = this.findOne('.top-left');
|
||||
var absPos = topLeftResizer.getAbsolutePosition();
|
||||
|
||||
return {
|
||||
x: absPos.x,
|
||||
y: absPos.y,
|
||||
width: this._el.width() * this._el.scaleX(),
|
||||
height: this._el.height() * this._el.scaleY()
|
||||
};
|
||||
}
|
||||
return {
|
||||
x: this._el.x(),
|
||||
y: this._el.y(),
|
||||
width: this._el.width() * this._el.scaleX(),
|
||||
height: this._el.height() * this._el.scaleY()
|
||||
};
|
||||
},
|
||||
|
||||
_setElementAttrs: function(attrs) {
|
||||
_fitNodeInto: function(attrs) {
|
||||
this._settings = true;
|
||||
var node = this.getNode();
|
||||
if (attrs.rotation !== undefined) {
|
||||
this._el.setAttrs({
|
||||
rotation: attrs.rotation,
|
||||
x: attrs.x,
|
||||
y: attrs.y
|
||||
});
|
||||
} else {
|
||||
var scaleX = attrs.width / this._el.width();
|
||||
var scaleY = attrs.height / this._el.height();
|
||||
|
||||
this._el.setAttrs({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY
|
||||
});
|
||||
|
||||
this._el.setAbsolutePosition({
|
||||
x: attrs.absX,
|
||||
y: attrs.absY
|
||||
});
|
||||
this.getNode().rotation(attrs.rotation);
|
||||
}
|
||||
var pure = node.getClientRect({ skipTransform: true });
|
||||
var scaleX = attrs.width / pure.width;
|
||||
var scaleY = attrs.height / pure.height;
|
||||
|
||||
var rotation = Konva.getAngle(node.getRotation());
|
||||
// debugger;
|
||||
var dx = pure.x * scaleX;
|
||||
var dy = pure.y * scaleY;
|
||||
this.getNode().setAttrs({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
|
||||
y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
|
||||
});
|
||||
this._settings = false;
|
||||
|
||||
this.fire('transform');
|
||||
this._el.fire('transform');
|
||||
this.getNode().fire('transform');
|
||||
this._update();
|
||||
this.getLayer().batchDraw();
|
||||
},
|
||||
_update: function() {
|
||||
var x = this._el.x();
|
||||
var y = this._el.y();
|
||||
var width = this._el.width() * this._el.scaleX();
|
||||
var height = this._el.height() * this._el.scaleY();
|
||||
var attrs = this._getNodeRect();
|
||||
var x = attrs.x;
|
||||
var y = attrs.y;
|
||||
var width = attrs.width;
|
||||
var height = attrs.height;
|
||||
this.x(x);
|
||||
this.y(y);
|
||||
this.rotation(this._el.rotation());
|
||||
|
||||
if (this._el._centroid) {
|
||||
this.offset({
|
||||
x: width / 2,
|
||||
y: height / 2
|
||||
});
|
||||
}
|
||||
this.rotation(attrs.rotation);
|
||||
|
||||
var enabledResizers = this.enabledResizers();
|
||||
var resizeEnabled = this.resizeEnabled();
|
||||
@ -18731,7 +18751,7 @@
|
||||
},
|
||||
destroy: function() {
|
||||
Konva.Group.prototype.destroy.call(this);
|
||||
this._el.off('.resizer');
|
||||
this.getNode().off('.resizer');
|
||||
this._removeEvents();
|
||||
}
|
||||
};
|
||||
@ -18771,6 +18791,7 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
|
||||
|
||||
Konva.Collection.mapMethods(Konva.Transformer);
|
||||
})(Konva);
|
||||
|
||||
6
konva.min.js
vendored
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -9,6 +9,8 @@
|
||||
var TRANSFORM_CHANGE_STR = [
|
||||
'xChange.resizer',
|
||||
'yChange.resizer',
|
||||
'widthChange.resizer',
|
||||
'heightChange.resizer',
|
||||
'scaleXChange.resizer',
|
||||
'scaleYChange.resizer',
|
||||
'skewXChange.resizer',
|
||||
@ -43,6 +45,8 @@
|
||||
Konva.Group.call(this, config);
|
||||
this.className = 'Transformer';
|
||||
this._createElements();
|
||||
|
||||
// bindings
|
||||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||||
this._update = this._update.bind(this);
|
||||
@ -52,25 +56,62 @@
|
||||
|
||||
if (!warningShowed) {
|
||||
Konva.Util.warn(
|
||||
'Konva.Transformer is currently experimental and may have many bugs. Please report any bugs to GitHub repo.'
|
||||
'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.'
|
||||
);
|
||||
warningShowed = true;
|
||||
}
|
||||
},
|
||||
|
||||
attachTo: function(node) {
|
||||
if (this._el) {
|
||||
if (this.node()) {
|
||||
this.detach();
|
||||
}
|
||||
this._el = node;
|
||||
this.setNode(node);
|
||||
node.on('dragmove.resizer', this._update);
|
||||
node.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
|
||||
this._update();
|
||||
this._el.on('dragmove.resizer', this._update);
|
||||
this._el.on(TRANSFORM_CHANGE_STR, this._update);
|
||||
},
|
||||
|
||||
detach: function() {
|
||||
this._el.off('.resizer');
|
||||
this._el = null;
|
||||
this.getNode().off('.resizer');
|
||||
},
|
||||
|
||||
_getNodeRect: function() {
|
||||
var node = this.getNode();
|
||||
var rect = node.getClientRect({ skipTransform: true });
|
||||
var rotation = Konva.getAngle(node.rotation());
|
||||
|
||||
var dx = rect.x * node.scaleX() - node.offsetX();
|
||||
var dy = rect.y * node.scaleY() - node.offsetX();
|
||||
|
||||
return {
|
||||
x: node.x() + dx * Math.cos(rotation) + dy * Math.sin(-rotation),
|
||||
y: node.y() + dy * Math.cos(rotation) + dx * Math.sin(rotation),
|
||||
width: rect.width * node.scaleX(),
|
||||
height: rect.height * node.scaleY(),
|
||||
rotation: node.rotation()
|
||||
};
|
||||
},
|
||||
|
||||
getX: function() {
|
||||
return this._getNodeRect().x;
|
||||
},
|
||||
|
||||
getY: function() {
|
||||
return this._getNodeRect().y;
|
||||
},
|
||||
|
||||
getRotation: function() {
|
||||
return this._getNodeRect().rotation;
|
||||
},
|
||||
|
||||
getWidth: function() {
|
||||
return this._getNodeRect().width;
|
||||
},
|
||||
|
||||
getHeight: function() {
|
||||
return this._getNodeRect().height;
|
||||
},
|
||||
|
||||
_createElements: function() {
|
||||
@ -101,7 +142,6 @@
|
||||
var self = this;
|
||||
anchor.on('mousedown touchstart', function(e) {
|
||||
self.handleResizerMouseDown(e);
|
||||
console.log('down');
|
||||
});
|
||||
|
||||
// add hover styling
|
||||
@ -150,8 +190,10 @@
|
||||
handleResizerMouseDown: function(e) {
|
||||
this.movingResizer = e.target.name();
|
||||
|
||||
var width = this._el.width() * this._el.scaleX();
|
||||
var height = this._el.height() * this._el.scaleY();
|
||||
// var node = this.getNode();
|
||||
var attrs = this._getNodeRect();
|
||||
var width = attrs.width;
|
||||
var height = attrs.height;
|
||||
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
|
||||
this.sin = height / hypotenuse;
|
||||
this.cos = width / hypotenuse;
|
||||
@ -247,18 +289,19 @@
|
||||
this.findOne('.bottom-right').x(x);
|
||||
this.findOne('.bottom-right').y(y);
|
||||
} else if (this.movingResizer === 'rotater') {
|
||||
x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
var attrs = this._getNodeRect();
|
||||
x = resizerNode.x() - attrs.width / 2;
|
||||
y = -resizerNode.y() + attrs.height / 2;
|
||||
|
||||
var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
|
||||
var attrs = this._getAttrs();
|
||||
// var attrs = this._getAttrs();
|
||||
|
||||
var rot = Konva.getAngle(this.rotation());
|
||||
|
||||
var newRotation =
|
||||
Konva.Util._radToDeg(rot) + Konva.Util._radToDeg(dAlpha);
|
||||
|
||||
var alpha = Konva.getAngle(this._el.rotation());
|
||||
var alpha = Konva.getAngle(this.getNode().rotation());
|
||||
var newAlpha = Konva.Util._degToRad(newRotation);
|
||||
|
||||
var snaps = this.rotationSnaps();
|
||||
@ -275,7 +318,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
this._setElementAttrs(
|
||||
this._fitNodeInto(
|
||||
Object.assign(attrs, {
|
||||
rotation: Konva.angleDeg
|
||||
? newRotation
|
||||
@ -287,7 +330,9 @@
|
||||
y:
|
||||
attrs.y +
|
||||
attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
|
||||
attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha))
|
||||
attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
|
||||
width: attrs.width,
|
||||
height: attrs.height
|
||||
})
|
||||
);
|
||||
} else {
|
||||
@ -313,9 +358,9 @@
|
||||
var height =
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
|
||||
|
||||
this._setElementAttrs({
|
||||
absX: this._el._centroid ? x + width / 2 : x,
|
||||
absY: this._el._centroid ? y + height / 2 : y,
|
||||
this._fitNodeInto({
|
||||
x: x + this.offsetX(),
|
||||
y: y + this.offsetY(),
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
@ -328,7 +373,7 @@
|
||||
_removeEvents: function() {
|
||||
if (this._transforming) {
|
||||
this.fire('transformend');
|
||||
this._el.fire('transformend');
|
||||
this.getNode().fire('transformend');
|
||||
window.removeEventListener('mousemove', this.handleMouseMove);
|
||||
window.removeEventListener('touchmove', this.handleMouseMove);
|
||||
window.removeEventListener('mouseup', this.handleMouseUp);
|
||||
@ -337,67 +382,42 @@
|
||||
this._transforming = false;
|
||||
},
|
||||
|
||||
_getAttrs: function() {
|
||||
if (this._el._centroid) {
|
||||
var topLeftResizer = this.findOne('.top-left');
|
||||
var absPos = topLeftResizer.getAbsolutePosition();
|
||||
|
||||
return {
|
||||
x: absPos.x,
|
||||
y: absPos.y,
|
||||
width: this._el.width() * this._el.scaleX(),
|
||||
height: this._el.height() * this._el.scaleY()
|
||||
};
|
||||
}
|
||||
return {
|
||||
x: this._el.x(),
|
||||
y: this._el.y(),
|
||||
width: this._el.width() * this._el.scaleX(),
|
||||
height: this._el.height() * this._el.scaleY()
|
||||
};
|
||||
},
|
||||
|
||||
_setElementAttrs: function(attrs) {
|
||||
_fitNodeInto: function(attrs) {
|
||||
this._settings = true;
|
||||
var node = this.getNode();
|
||||
if (attrs.rotation !== undefined) {
|
||||
this._el.setAttrs({
|
||||
rotation: attrs.rotation,
|
||||
x: attrs.x,
|
||||
y: attrs.y
|
||||
});
|
||||
} else {
|
||||
var scaleX = attrs.width / this._el.width();
|
||||
var scaleY = attrs.height / this._el.height();
|
||||
|
||||
this._el.setAttrs({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY
|
||||
});
|
||||
|
||||
this._el.setAbsolutePosition({
|
||||
x: attrs.absX,
|
||||
y: attrs.absY
|
||||
});
|
||||
this.getNode().rotation(attrs.rotation);
|
||||
}
|
||||
var pure = node.getClientRect({ skipTransform: true });
|
||||
var scaleX = attrs.width / pure.width;
|
||||
var scaleY = attrs.height / pure.height;
|
||||
|
||||
var rotation = Konva.getAngle(node.getRotation());
|
||||
// debugger;
|
||||
var dx = pure.x * scaleX;
|
||||
var dy = pure.y * scaleY;
|
||||
this.getNode().setAttrs({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
|
||||
y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
|
||||
});
|
||||
this._settings = false;
|
||||
|
||||
this.fire('transform');
|
||||
this._el.fire('transform');
|
||||
this.getNode().fire('transform');
|
||||
this._update();
|
||||
this.getLayer().batchDraw();
|
||||
},
|
||||
_update: function() {
|
||||
var x = this._el.x();
|
||||
var y = this._el.y();
|
||||
var width = this._el.width() * this._el.scaleX();
|
||||
var height = this._el.height() * this._el.scaleY();
|
||||
var attrs = this._getNodeRect();
|
||||
var x = attrs.x;
|
||||
var y = attrs.y;
|
||||
var width = attrs.width;
|
||||
var height = attrs.height;
|
||||
this.x(x);
|
||||
this.y(y);
|
||||
this.rotation(this._el.rotation());
|
||||
|
||||
if (this._el._centroid) {
|
||||
this.offset({
|
||||
x: width / 2,
|
||||
y: height / 2
|
||||
});
|
||||
}
|
||||
this.rotation(attrs.rotation);
|
||||
|
||||
var enabledResizers = this.enabledResizers();
|
||||
var resizeEnabled = this.resizeEnabled();
|
||||
@ -457,7 +477,7 @@
|
||||
},
|
||||
destroy: function() {
|
||||
Konva.Group.prototype.destroy.call(this);
|
||||
this._el.off('.resizer');
|
||||
this.getNode().off('.resizer');
|
||||
this._removeEvents();
|
||||
}
|
||||
};
|
||||
@ -497,6 +517,7 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
|
||||
Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
|
||||
|
||||
Konva.Collection.mapMethods(Konva.Transformer);
|
||||
})(Konva);
|
||||
|
||||
340
test/runner.html
340
test/runner.html
@ -1,187 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KonvaJS Mocha Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
<style>
|
||||
#mocha {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#mocha .test {
|
||||
overflow: auto;
|
||||
}
|
||||
h1 {
|
||||
font-family: Calibri;
|
||||
margin-left: 10px;
|
||||
}
|
||||
h2.konva-title {
|
||||
font-family: Calibri;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
border-top: 2px solid #999;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>KonvaJS Test</h1>
|
||||
<div id="mocha"></div>
|
||||
<div id="konva-container"></div>
|
||||
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="lib/stats.js"></script>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KonvaJS Mocha Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
<style>
|
||||
#mocha {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
<!--<script src="lib/blanket.js"></script>-->
|
||||
#mocha .test {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
<!--CORE-->
|
||||
<script src="../src/Global.js" data-cover></script>
|
||||
<script src="../src/Util.js" data-cover></script>
|
||||
<script src="../src/Canvas.js" data-cover></script>
|
||||
<script src="../src/Context.js" data-cover></script>
|
||||
<script src="../src/Factory.js" data-cover></script>
|
||||
<script src="../src/Node.js" data-cover></script>
|
||||
h1 {
|
||||
font-family: Calibri;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
<!--FILTERS-->
|
||||
<script src="../src/filters/Grayscale.js" data-cover></script>
|
||||
<script src="../src/filters/Brighten.js" data-cover></script>
|
||||
<script src="../src/filters/Invert.js" data-cover></script>
|
||||
<script src="../src/filters/Blur.js" data-cover></script>
|
||||
<script src="../src/filters/Mask.js" data-cover></script>
|
||||
<script src="../src/filters/RGB.js" data-cover></script>
|
||||
<script src="../src/filters/RGBA.js" data-cover></script>
|
||||
<script src="../src/filters/HSV.js" data-cover></script>
|
||||
<script src="../src/filters/HSL.js" data-cover></script>
|
||||
<script src="../src/filters/Emboss.js" data-cover></script>
|
||||
<script src="../src/filters/Enhance.js" data-cover></script>
|
||||
<script src="../src/filters/Posterize.js" data-cover></script>
|
||||
<script src="../src/filters/Noise.js" data-cover></script>
|
||||
<script src="../src/filters/Pixelate.js" data-cover></script>
|
||||
<script src="../src/filters/Threshold.js" data-cover></script>
|
||||
<script src="../src/filters/Sepia.js" data-cover></script>
|
||||
<script src="../src/filters/Contrast.js" data-cover></script>
|
||||
<script src="../src/filters/Solarize.js" data-cover></script>
|
||||
<script src="../src/filters/Kaleidoscope.js" data-cover></script>
|
||||
h2.konva-title {
|
||||
font-family: Calibri;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
border-top: 2px solid #999;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!--MAIN ELEMENTS-->
|
||||
<body>
|
||||
<h1>KonvaJS Test</h1>
|
||||
<div id="mocha"></div>
|
||||
<div id="konva-container"></div>
|
||||
|
||||
<script src="../src/Container.js" data-cover></script>
|
||||
<script src="../src/Shape.js" data-cover></script>
|
||||
<script src="../src/Stage.js" data-cover></script>
|
||||
<script src="../src/BaseLayer.js" data-cover></script>
|
||||
<script src="../src/Layer.js" data-cover></script>
|
||||
<script src="../src/FastLayer.js" data-cover></script>
|
||||
<script src="../src/Group.js" data-cover></script>
|
||||
<script src="../src/Animation.js" data-cover></script>
|
||||
<script src="../src/Tween.js" data-cover></script>
|
||||
<script src="../src/DragAndDrop.js" data-cover></script>
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="lib/stats.js"></script>
|
||||
|
||||
<!--SHAPES-->
|
||||
<script src="../src/shapes/Rect.js" data-cover></script>
|
||||
<script src="../src/shapes/Circle.js" data-cover></script>
|
||||
<script src="../src/shapes/Ellipse.js" data-cover></script>
|
||||
<script src="../src/shapes/Ring.js" data-cover></script>
|
||||
<script src="../src/shapes/Wedge.js" data-cover></script>
|
||||
<script src="../src/shapes/Arc.js" data-cover></script>
|
||||
<script src="../src/shapes/Image.js" data-cover></script>
|
||||
<script src="../src/shapes/Text.js" data-cover></script>
|
||||
<script src="../src/shapes/Line.js" data-cover></script>
|
||||
<script src="../src/shapes/Sprite.js" data-cover></script>
|
||||
<script src="../src/shapes/Path.js" data-cover></script>
|
||||
<script src="../src/shapes/TextPath.js" data-cover></script>
|
||||
<script src="../src/shapes/RegularPolygon.js" data-cover></script>
|
||||
<script src="../src/shapes/Star.js" data-cover></script>
|
||||
<script src="../src/shapes/Label.js" data-cover></script>
|
||||
<script src="../src/shapes/Arrow.js" data-cover></script>
|
||||
<!--<script src="lib/blanket.js"></script>-->
|
||||
|
||||
<!--<script src="../dist/konva-dev.js"></script>-->
|
||||
<!--CORE-->
|
||||
<script src="../src/Global.js" data-cover></script>
|
||||
<script src="../src/Util.js" data-cover></script>
|
||||
<script src="../src/Canvas.js" data-cover></script>
|
||||
<script src="../src/Context.js" data-cover></script>
|
||||
<script src="../src/Factory.js" data-cover></script>
|
||||
<script src="../src/Node.js" data-cover></script>
|
||||
|
||||
<script src="lib/imagediff.js"></script>
|
||||
<script src="runner.js"></script>
|
||||
<!--FILTERS-->
|
||||
<script src="../src/filters/Grayscale.js" data-cover></script>
|
||||
<script src="../src/filters/Brighten.js" data-cover></script>
|
||||
<script src="../src/filters/Invert.js" data-cover></script>
|
||||
<script src="../src/filters/Blur.js" data-cover></script>
|
||||
<script src="../src/filters/Mask.js" data-cover></script>
|
||||
<script src="../src/filters/RGB.js" data-cover></script>
|
||||
<script src="../src/filters/RGBA.js" data-cover></script>
|
||||
<script src="../src/filters/HSV.js" data-cover></script>
|
||||
<script src="../src/filters/HSL.js" data-cover></script>
|
||||
<script src="../src/filters/Emboss.js" data-cover></script>
|
||||
<script src="../src/filters/Enhance.js" data-cover></script>
|
||||
<script src="../src/filters/Posterize.js" data-cover></script>
|
||||
<script src="../src/filters/Noise.js" data-cover></script>
|
||||
<script src="../src/filters/Pixelate.js" data-cover></script>
|
||||
<script src="../src/filters/Threshold.js" data-cover></script>
|
||||
<script src="../src/filters/Sepia.js" data-cover></script>
|
||||
<script src="../src/filters/Contrast.js" data-cover></script>
|
||||
<script src="../src/filters/Solarize.js" data-cover></script>
|
||||
<script src="../src/filters/Kaleidoscope.js" data-cover></script>
|
||||
|
||||
<!-- assets -->
|
||||
<script src="assets/tiger.js"></script>
|
||||
<script src="assets/worldMap.js"></script>
|
||||
<!--MAIN ELEMENTS-->
|
||||
|
||||
<!--=============== unit tests ================-->
|
||||
<script src="../src/Container.js" data-cover></script>
|
||||
<script src="../src/Shape.js" data-cover></script>
|
||||
<script src="../src/Stage.js" data-cover></script>
|
||||
<script src="../src/BaseLayer.js" data-cover></script>
|
||||
<script src="../src/Layer.js" data-cover></script>
|
||||
<script src="../src/FastLayer.js" data-cover></script>
|
||||
<script src="../src/Group.js" data-cover></script>
|
||||
<script src="../src/Animation.js" data-cover></script>
|
||||
<script src="../src/Tween.js" data-cover></script>
|
||||
<script src="../src/DragAndDrop.js" data-cover></script>
|
||||
|
||||
<!-- core -->
|
||||
<script src="unit/Global-test.js"></script>
|
||||
<script src="unit/Util-test.js"></script>
|
||||
<script src="unit/Canvas-test.js"></script>
|
||||
<script src="unit/Context-test.js"></script>
|
||||
<script src="unit/Node-test.js"></script>
|
||||
<script src="unit/Node-cache-test.js"></script>
|
||||
<script src="unit/Container-test.js"></script>
|
||||
<script src="unit/Stage-test.js"></script>
|
||||
<script src="unit/BaseLayer-test.js"></script>
|
||||
<script src="unit/Layer-test.js"></script>
|
||||
<script src="unit/Group-test.js"></script>
|
||||
<script src="unit/FastLayer-test.js"></script>
|
||||
<script src="unit/Shape-test.js"></script>
|
||||
<script src="unit/Collection-test.js"></script>
|
||||
<!--SHAPES-->
|
||||
<script src="../src/shapes/Rect.js" data-cover></script>
|
||||
<script src="../src/shapes/Circle.js" data-cover></script>
|
||||
<script src="../src/shapes/Ellipse.js" data-cover></script>
|
||||
<script src="../src/shapes/Ring.js" data-cover></script>
|
||||
<script src="../src/shapes/Wedge.js" data-cover></script>
|
||||
<script src="../src/shapes/Arc.js" data-cover></script>
|
||||
<script src="../src/shapes/Image.js" data-cover></script>
|
||||
<script src="../src/shapes/Text.js" data-cover></script>
|
||||
<script src="../src/shapes/Line.js" data-cover></script>
|
||||
<script src="../src/shapes/Sprite.js" data-cover></script>
|
||||
<script src="../src/shapes/Path.js" data-cover></script>
|
||||
<script src="../src/shapes/TextPath.js" data-cover></script>
|
||||
<script src="../src/shapes/RegularPolygon.js" data-cover></script>
|
||||
<script src="../src/shapes/Star.js" data-cover></script>
|
||||
<script src="../src/shapes/Label.js" data-cover></script>
|
||||
<script src="../src/shapes/Arrow.js" data-cover></script>
|
||||
<script src="../src/shapes/Transformer.js" data-cover></script>
|
||||
|
||||
<!-- shapes -->
|
||||
<script src="unit/shapes/Rect-test.js"></script>
|
||||
<script src="unit/shapes/Circle-test.js"></script>
|
||||
<script src="unit/shapes/Image-test.js"></script>
|
||||
<script src="unit/shapes/Line-test.js"></script>
|
||||
<script src="unit/shapes/Text-test.js"></script>
|
||||
<script src="unit/shapes/Blob-test.js"></script>
|
||||
<script src="unit/shapes/Ellipse-test.js"></script>
|
||||
<script src="unit/shapes/Polygon-test.js"></script>
|
||||
<script src="unit/shapes/Spline-test.js"></script>
|
||||
<script src="unit/shapes/Sprite-test.js"></script>
|
||||
<script src="unit/shapes/Wedge-test.js"></script>
|
||||
<script src="unit/shapes/Arc-test.js"></script>
|
||||
<script src="unit/shapes/Ring-test.js"></script>
|
||||
<script src="unit/shapes/Label-test.js"></script>
|
||||
<script src="unit/shapes/Star-test.js"></script>
|
||||
<script src="unit/shapes/RegularPolygon-test.js"></script>
|
||||
<script src="unit/shapes/Path-test.js"></script>
|
||||
<script src="unit/shapes/TextPath-test.js"></script>
|
||||
<script src="unit/shapes/Arrow-test.js"></script>
|
||||
<!--<script src="../dist/konva-dev.js"></script>-->
|
||||
|
||||
<!-- extensions -->
|
||||
<script src="unit/Animation-test.js"></script>
|
||||
<script src="unit/DragAndDrop-test.js"></script>
|
||||
<script src="unit/Tween-test.js"></script>
|
||||
<script src="lib/imagediff.js"></script>
|
||||
<script src="runner.js"></script>
|
||||
|
||||
<!-- assets -->
|
||||
<script src="assets/tiger.js"></script>
|
||||
<script src="assets/worldMap.js"></script>
|
||||
|
||||
<!--=============== unit tests ================-->
|
||||
|
||||
<!-- core -->
|
||||
<script src="unit/Global-test.js"></script>
|
||||
<script src="unit/Util-test.js"></script>
|
||||
<script src="unit/Canvas-test.js"></script>
|
||||
<script src="unit/Context-test.js"></script>
|
||||
<script src="unit/Node-test.js"></script>
|
||||
<script src="unit/Node-cache-test.js"></script>
|
||||
<script src="unit/Container-test.js"></script>
|
||||
<script src="unit/Stage-test.js"></script>
|
||||
<script src="unit/BaseLayer-test.js"></script>
|
||||
<script src="unit/Layer-test.js"></script>
|
||||
<script src="unit/Group-test.js"></script>
|
||||
<script src="unit/FastLayer-test.js"></script>
|
||||
<script src="unit/Shape-test.js"></script>
|
||||
<script src="unit/Collection-test.js"></script>
|
||||
|
||||
<!-- shapes -->
|
||||
<script src="unit/shapes/Rect-test.js"></script>
|
||||
<script src="unit/shapes/Circle-test.js"></script>
|
||||
<script src="unit/shapes/Image-test.js"></script>
|
||||
<script src="unit/shapes/Line-test.js"></script>
|
||||
<script src="unit/shapes/Text-test.js"></script>
|
||||
<script src="unit/shapes/Blob-test.js"></script>
|
||||
<script src="unit/shapes/Ellipse-test.js"></script>
|
||||
<script src="unit/shapes/Polygon-test.js"></script>
|
||||
<script src="unit/shapes/Spline-test.js"></script>
|
||||
<script src="unit/shapes/Sprite-test.js"></script>
|
||||
<script src="unit/shapes/Wedge-test.js"></script>
|
||||
<script src="unit/shapes/Arc-test.js"></script>
|
||||
<script src="unit/shapes/Ring-test.js"></script>
|
||||
<script src="unit/shapes/Label-test.js"></script>
|
||||
<script src="unit/shapes/Star-test.js"></script>
|
||||
<script src="unit/shapes/RegularPolygon-test.js"></script>
|
||||
<script src="unit/shapes/Path-test.js"></script>
|
||||
<script src="unit/shapes/TextPath-test.js"></script>
|
||||
<script src="unit/shapes/Arrow-test.js"></script>
|
||||
<script src="unit/shapes/Transformer-test.js"></script>
|
||||
|
||||
<!-- extensions -->
|
||||
<script src="unit/Animation-test.js"></script>
|
||||
<script src="unit/DragAndDrop-test.js"></script>
|
||||
<script src="unit/Tween-test.js"></script>
|
||||
|
||||
|
||||
<!-- filters -->
|
||||
<script src="unit/filters/Filter-test.js"></script>
|
||||
<script src="unit/filters/Blur-test.js"></script>
|
||||
<script src="unit/filters/Brighten-test.js"></script>
|
||||
<script src="unit/filters/RGB-test.js"></script>
|
||||
<script src="unit/filters/RGBA-test.js"></script>
|
||||
<script src="unit/filters/HSV-test.js"></script>
|
||||
<script src="unit/filters/HSL-test.js"></script>
|
||||
<script src="unit/filters/Invert-test.js"></script>
|
||||
<script src="unit/filters/Mask-test.js"></script>
|
||||
<script src="unit/filters/Grayscale-test.js"></script>
|
||||
<script src="unit/filters/Enhance-test.js"></script>
|
||||
<script src="unit/filters/Pixelate-test.js"></script>
|
||||
<script src="unit/filters/Noise-test.js"></script>
|
||||
<script src="unit/filters/Threshold-test.js"></script>
|
||||
<script src="unit/filters/Posterize-test.js"></script>
|
||||
<script src="unit/filters/Sepia-test.js"></script>
|
||||
<script src="unit/filters/Contrast-test.js"></script>
|
||||
<script src="unit/filters/Emboss-test.js"></script>
|
||||
<script src="unit/filters/Solarize-test.js"></script>
|
||||
<script src="unit/filters/Kaleidoscope-test.js"></script>
|
||||
<!-- filters -->
|
||||
<script src="unit/filters/Filter-test.js"></script>
|
||||
<script src="unit/filters/Blur-test.js"></script>
|
||||
<script src="unit/filters/Brighten-test.js"></script>
|
||||
<script src="unit/filters/RGB-test.js"></script>
|
||||
<script src="unit/filters/RGBA-test.js"></script>
|
||||
<script src="unit/filters/HSV-test.js"></script>
|
||||
<script src="unit/filters/HSL-test.js"></script>
|
||||
<script src="unit/filters/Invert-test.js"></script>
|
||||
<script src="unit/filters/Mask-test.js"></script>
|
||||
<script src="unit/filters/Grayscale-test.js"></script>
|
||||
<script src="unit/filters/Enhance-test.js"></script>
|
||||
<script src="unit/filters/Pixelate-test.js"></script>
|
||||
<script src="unit/filters/Noise-test.js"></script>
|
||||
<script src="unit/filters/Threshold-test.js"></script>
|
||||
<script src="unit/filters/Posterize-test.js"></script>
|
||||
<script src="unit/filters/Sepia-test.js"></script>
|
||||
<script src="unit/filters/Contrast-test.js"></script>
|
||||
<script src="unit/filters/Emboss-test.js"></script>
|
||||
<script src="unit/filters/Solarize-test.js"></script>
|
||||
<script src="unit/filters/Kaleidoscope-test.js"></script>
|
||||
|
||||
<!--=============== functional tests ================-->
|
||||
<!--=============== functional tests ================-->
|
||||
|
||||
<script src="functional/MouseEvents-test.js"></script>
|
||||
<script src="functional/TouchEvents-test.js"></script>
|
||||
<script src="functional/DragAndDropEvents-test.js"></script>
|
||||
<script src="functional/MouseEvents-test.js"></script>
|
||||
<script src="functional/TouchEvents-test.js"></script>
|
||||
<script src="functional/DragAndDropEvents-test.js"></script>
|
||||
|
||||
<!--=============== manual tests ================-->
|
||||
<script src="manual/manual-test.js"></script>
|
||||
<!--=============== manual tests ================-->
|
||||
<script src="manual/manual-test.js"></script>
|
||||
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
else { mocha.run(); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
else { mocha.run(); }
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
599
test/unit/shapes/Transformer-test.js
Normal file
599
test/unit/shapes/Transformer-test.js
Normal file
@ -0,0 +1,599 @@
|
||||
suite('Transformer', function() {
|
||||
// ======================================================
|
||||
test('init transformer on simple rectangle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 60,
|
||||
draggable: true,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
assert.equal(tr.x(), rect.x());
|
||||
assert.equal(tr.y(), rect.y());
|
||||
assert.equal(tr.width(), rect.width());
|
||||
assert.equal(tr.height(), rect.height());
|
||||
});
|
||||
|
||||
test('try to fit simple rectangle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 60,
|
||||
draggable: true,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 120,
|
||||
y: 60,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: 45
|
||||
});
|
||||
|
||||
assert.equal(tr.x(), rect.x());
|
||||
assert.equal(tr.y(), rect.y());
|
||||
assert.equal(tr.width(), 50);
|
||||
assert.equal(tr.height(), 50);
|
||||
assert.equal(tr.rotation(), rect.rotation());
|
||||
});
|
||||
|
||||
test('listen shape changes', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
draggable: true,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
rect.setAttrs({
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
layer.draw();
|
||||
assert.equal(tr.x(), rect.x());
|
||||
assert.equal(tr.y(), rect.y());
|
||||
assert.equal(tr.width(), rect.width());
|
||||
assert.equal(tr.height(), rect.height());
|
||||
});
|
||||
|
||||
test('add transformer for transformed rect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 150,
|
||||
y: 60,
|
||||
draggable: true,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow',
|
||||
rotation: 90,
|
||||
scaleY: 1.5
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
assert.equal(tr.x(), rect.x());
|
||||
assert.equal(tr.y(), rect.y());
|
||||
assert.equal(tr.width(), rect.width() * rect.scaleX());
|
||||
assert.equal(tr.height(), rect.height() * rect.scaleY());
|
||||
assert.equal(tr.rotation(), rect.rotation());
|
||||
});
|
||||
|
||||
test('try to fit a transformed rect', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 150,
|
||||
y: 60,
|
||||
draggable: true,
|
||||
width: 150,
|
||||
height: 100,
|
||||
fill: 'yellow',
|
||||
rotation: 90,
|
||||
scaleY: 1.5
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 100,
|
||||
y: 70,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 100);
|
||||
assert.equal(rect.y(), 70);
|
||||
assert.equal(rect.width() * rect.scaleX(), 100);
|
||||
assert.equal(rect.height() * rect.scaleY(), 100);
|
||||
assert.equal(rect.rotation(), rect.rotation());
|
||||
});
|
||||
|
||||
test('add transformer for transformed rect with offset', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 50,
|
||||
y: 50,
|
||||
draggable: true,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow',
|
||||
offsetX: 50,
|
||||
offsetY: 50
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
assert.equal(tr.x(), rect.x() - 50);
|
||||
assert.equal(tr.y(), rect.y() - 50);
|
||||
assert.equal(tr.width(), rect.width() * rect.scaleX());
|
||||
assert.equal(tr.height(), rect.height() * rect.scaleY());
|
||||
assert.equal(tr.rotation(), rect.rotation());
|
||||
});
|
||||
|
||||
test.skip('fit rect with offset', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 50,
|
||||
y: 50,
|
||||
draggable: true,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow',
|
||||
offsetX: 50,
|
||||
offsetY: 50
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(rect);
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 120,
|
||||
height: 120
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 100);
|
||||
assert.equal(rect.y(), 100);
|
||||
assert.equal(rect.width() * rect.scaleX(), 120);
|
||||
assert.equal(rect.height() * rect.scaleY(), 100);
|
||||
assert.equal(rect.rotation(), rect.rotation());
|
||||
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
test('add transformer for circle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
draggable: true,
|
||||
radius: 40,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(circle);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(circle);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
assert.equal(tr.x(), 0);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), circle.width() * circle.scaleX());
|
||||
assert.equal(tr.height(), circle.height() * circle.scaleY());
|
||||
assert.equal(tr.rotation(), circle.rotation());
|
||||
});
|
||||
|
||||
test('fit a circle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
draggable: true,
|
||||
radius: 40,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(circle);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(circle);
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 40,
|
||||
y: 40,
|
||||
width: 160,
|
||||
height: 80
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(circle.x(), 120);
|
||||
assert.equal(circle.y(), 80);
|
||||
assert.equal(circle.width() * circle.scaleX(), 160);
|
||||
assert.equal(circle.height() * circle.scaleY(), 80);
|
||||
|
||||
assert.equal(tr.x(), 40);
|
||||
assert.equal(tr.y(), 40);
|
||||
assert.equal(tr.width(), 160);
|
||||
assert.equal(tr.height(), 80);
|
||||
});
|
||||
|
||||
test('fit a rotated circle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
draggable: true,
|
||||
radius: 40,
|
||||
fill: 'yellow'
|
||||
});
|
||||
layer.add(circle);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(circle);
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 80,
|
||||
y: 0,
|
||||
width: 80,
|
||||
height: 80,
|
||||
rotation: 90
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(circle.x(), 40);
|
||||
assert.equal(circle.y(), 40);
|
||||
assert.equal(circle.width() * circle.scaleX(), 80);
|
||||
assert.equal(circle.height() * circle.scaleY(), 80);
|
||||
assert.equal(circle.rotation(), 90);
|
||||
|
||||
assert.equal(tr.x(), 80);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), 80);
|
||||
assert.equal(tr.height(), 80);
|
||||
});
|
||||
|
||||
test('add transformer for transformed circle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true,
|
||||
radius: 40,
|
||||
fill: 'yellow',
|
||||
scaleX: 1.5
|
||||
});
|
||||
layer.add(circle);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(circle);
|
||||
|
||||
layer.draw();
|
||||
assert.equal(tr.getClassName(), 'Transformer');
|
||||
|
||||
assert.equal(tr.x(), 40);
|
||||
assert.equal(tr.y(), 60);
|
||||
assert.equal(tr.width(), 120);
|
||||
assert.equal(tr.height(), 80);
|
||||
assert.equal(tr.rotation(), 0);
|
||||
});
|
||||
|
||||
test('add transformer for rotated circle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true,
|
||||
radius: 40,
|
||||
fill: 'yellow',
|
||||
scaleX: 1.5,
|
||||
rotation: 90
|
||||
});
|
||||
layer.add(circle);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(circle);
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(tr.x(), 140);
|
||||
assert.equal(tr.y(), 40);
|
||||
assert.equal(tr.width(), 120);
|
||||
assert.equal(tr.height(), 80);
|
||||
assert.equal(tr.rotation(), circle.rotation());
|
||||
});
|
||||
|
||||
test('add transformer to group', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 50,
|
||||
y: 50,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(group);
|
||||
|
||||
var shape1 = new Konva.Rect({
|
||||
radius: 100,
|
||||
fill: 'red',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
|
||||
group.add(shape1);
|
||||
|
||||
var shape2 = new Konva.Rect({
|
||||
radius: 100,
|
||||
fill: 'yellow',
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
group.add(shape2);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(group);
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(tr.x(), group.x());
|
||||
assert.equal(tr.y(), group.y());
|
||||
assert.equal(tr.width(), 150);
|
||||
assert.equal(tr.height(), 150);
|
||||
assert.equal(tr.rotation(), 0);
|
||||
});
|
||||
|
||||
test('rotated fit group', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(group);
|
||||
|
||||
var shape1 = new Konva.Rect({
|
||||
fill: 'red',
|
||||
x: -50,
|
||||
y: -50,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
|
||||
group.add(shape1);
|
||||
|
||||
var shape2 = new Konva.Rect({
|
||||
fill: 'yellow',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
group.add(shape2);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(group);
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 100,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
rotation: 90
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
var rect = group.getClientRect();
|
||||
|
||||
assert.equal(group.x(), 50);
|
||||
assert.equal(group.y(), 50);
|
||||
assert.equal(rect.width, 100);
|
||||
assert.equal(rect.height, 100);
|
||||
assert.equal(group.rotation(), 90);
|
||||
|
||||
assert.equal(tr.x(), 100);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), 100);
|
||||
assert.equal(tr.height(), 100);
|
||||
});
|
||||
|
||||
test('add transformer to another group', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(group);
|
||||
|
||||
var shape1 = new Konva.Rect({
|
||||
fill: 'red',
|
||||
x: -50,
|
||||
y: -50,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
|
||||
group.add(shape1);
|
||||
|
||||
var shape2 = new Konva.Rect({
|
||||
fill: 'yellow',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
group.add(shape2);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(group);
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(tr.x(), 50);
|
||||
assert.equal(tr.y(), 50);
|
||||
assert.equal(tr.width(), 100);
|
||||
assert.equal(tr.height(), 100);
|
||||
assert.equal(tr.rotation(), 0);
|
||||
});
|
||||
|
||||
test('fit group', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var group = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true
|
||||
});
|
||||
layer.add(group);
|
||||
|
||||
var shape1 = new Konva.Rect({
|
||||
fill: 'red',
|
||||
x: -50,
|
||||
y: -50,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
|
||||
group.add(shape1);
|
||||
|
||||
var shape2 = new Konva.Rect({
|
||||
fill: 'yellow',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
group.add(shape2);
|
||||
|
||||
var tr = new Konva.Transformer();
|
||||
layer.add(tr);
|
||||
tr.attachTo(group);
|
||||
|
||||
tr._fitNodeInto({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 100
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
var rect = group.getClientRect();
|
||||
|
||||
assert.equal(group.x(), 100);
|
||||
assert.equal(group.y(), 50);
|
||||
assert.equal(rect.width, 200);
|
||||
assert.equal(rect.height, 100);
|
||||
|
||||
assert.equal(tr.x(), 0);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), 200);
|
||||
assert.equal(tr.height(), 100);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user