lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 18:24:17 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Centered resize with ALT key for Konva.Transformer

Browse Source
This commit is contained in:
Anton Lavrenov 2018-09-11 16:15:42 +03:00
parent b0c2112ec8
commit 4f70edc8c1
5 changed files with 251 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -9,6 +9,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Tween support for gradient properties
### Added
* Centered resize with ALT key for `Konva.Transformer`
## [2.3.0][2018-08-30]
### Added

70
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.3.0
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Mon Sep 10 2018
* Date: Tue Sep 11 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -19565,7 +19565,7 @@
this.____init(config);
};
var RESIZERS_NAMES = [
var ANCHORS_NAMES = [
'top-left',
'top-center',
'top-right',
@ -19721,7 +19721,7 @@
_createElements: function() {
this._createBack();
RESIZERS_NAMES.forEach(
ANCHORS_NAMES.forEach(
function(name) {
this._createAnchor(name);
}.bind(this)
@ -19758,25 +19758,8 @@
var layer = this.getLayer();
var tr = this.getParent();
// TODO: I guess there are some ways to simplify that calculations
// the basic idea is to find "angle" of handler
var rad = Konva.getAngle(tr.rotation());
// var cdx = tr.getWidth() / 2;
// var cdy = tr.getHeight() / 2;
// var parentPos = tr.getAbsolutePosition(tr.getParent());
// var center = {
// x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),
// y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))
// };
// var pos = this.getAbsolutePosition(tr.getParent());
// var dx = -pos.x + center.x;
// var dy = -pos.y + center.y;
// var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
var scale = tr.getNode().getAbsoluteScale();
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
var isMirrored = scale.y * scale.x < 0;
@ -20014,6 +19997,43 @@
this.getParent()
);
// we need to refactor that centeredScaling ASAP!
if (e.altKey) {
var topLeft = this.findOne('.top-left');
var bottomRight = this.findOne('.bottom-right');
var topOffsetX = topLeft.x();
var topOffsetY = topLeft.y();
var bottomOffsetX = this.getWidth() - bottomRight.x();
var bottomOffsetY = this.getHeight() - bottomRight.y();
bottomRight.move({
x: -topOffsetX,
y: -topOffsetY
});
topLeft.move({
x: bottomOffsetX,
y: bottomOffsetY
});
absPos = topLeft.getAbsolutePosition(this.getParent());
// if (topOffsetX) {
// }
// var pos = this.findOne('.top-left').position();
// if (pos.x === 0 && pos.y === 0) {
// this.findOne('.top-left').setAttrs({
// x: this.getWidth() - this.findOne('.bottom-right').x(),
// y: this.getWidth() - this.findOne('.bottom-right').y()
// });
// absPos = this.findOne('.top-left').getAbsolutePosition(
// this.getParent()
// );
// } else {
// }
}
x = absPos.x;
y = absPos.y;
var width =
@ -20233,12 +20253,12 @@
}
if (val instanceof Array) {
val.forEach(function(name) {
if (RESIZERS_NAMES.indexOf(name) === -1) {
if (ANCHORS_NAMES.indexOf(name) === -1) {
Konva.Util.warn(
'Unknown resizer name: ' +
'Unknown anchor name: ' +
name +
'. Available names are: ' +
RESIZERS_NAMES.join(', ')
ANCHORS_NAMES.join(', ')
);
}
});
@ -20263,7 +20283,7 @@
Konva.Factory.addGetterSetter(
Konva.Transformer,
'enabledAnchors',
RESIZERS_NAMES,
ANCHORS_NAMES,
validateResizers
);
@ -20487,7 +20507,7 @@
Konva.Factory.addGetterSetter(Konva.Transformer, 'borderDash');
/**
* get/set should we keep ration of resize?
* get/set should we keep ratio while resize anchors at corners
* @name keepRatio
* @method
* @memberof Konva.Transformer.prototype

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

53
src/shapes/Transformer.js
View File

@ -140,7 +140,7 @@
this.____init(config);
};
var RESIZERS_NAMES = [
var ANCHORS_NAMES = [
'top-left',
'top-center',
'top-right',
@ -296,7 +296,7 @@
_createElements: function() {
this._createBack();
RESIZERS_NAMES.forEach(
ANCHORS_NAMES.forEach(
function(name) {
this._createAnchor(name);
}.bind(this)
@ -333,25 +333,8 @@
var layer = this.getLayer();
var tr = this.getParent();
// TODO: I guess there are some ways to simplify that calculations
// the basic idea is to find "angle" of handler
var rad = Konva.getAngle(tr.rotation());
// var cdx = tr.getWidth() / 2;
// var cdy = tr.getHeight() / 2;
// var parentPos = tr.getAbsolutePosition(tr.getParent());
// var center = {
// x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),
// y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))
// };
// var pos = this.getAbsolutePosition(tr.getParent());
// var dx = -pos.x + center.x;
// var dy = -pos.y + center.y;
// var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
var scale = tr.getNode().getAbsoluteScale();
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
var isMirrored = scale.y * scale.x < 0;
@ -589,6 +572,28 @@
this.getParent()
);
if (e.altKey) {
var topLeft = this.findOne('.top-left');
var bottomRight = this.findOne('.bottom-right');
var topOffsetX = topLeft.x();
var topOffsetY = topLeft.y();
var bottomOffsetX = this.getWidth() - bottomRight.x();
var bottomOffsetY = this.getHeight() - bottomRight.y();
bottomRight.move({
x: -topOffsetX,
y: -topOffsetY
});
topLeft.move({
x: bottomOffsetX,
y: bottomOffsetY
});
absPos = topLeft.getAbsolutePosition(this.getParent());
}
x = absPos.x;
y = absPos.y;
var width =
@ -808,12 +813,12 @@
}
if (val instanceof Array) {
val.forEach(function(name) {
if (RESIZERS_NAMES.indexOf(name) === -1) {
if (ANCHORS_NAMES.indexOf(name) === -1) {
Konva.Util.warn(
'Unknown resizer name: ' +
'Unknown anchor name: ' +
name +
'. Available names are: ' +
RESIZERS_NAMES.join(', ')
ANCHORS_NAMES.join(', ')
);
}
});
@ -838,7 +843,7 @@
Konva.Factory.addGetterSetter(
Konva.Transformer,
'enabledAnchors',
RESIZERS_NAMES,
ANCHORS_NAMES,
validateResizers
);
@ -1062,7 +1067,7 @@
Konva.Factory.addGetterSetter(Konva.Transformer, 'borderDash');
/**
* get/set should we keep ration of resize?
* get/set should we keep ratio while resize anchors at corners
* @name keepRatio
* @method
* @memberof Konva.Transformer.prototype

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

@ -1234,4 +1234,175 @@ suite('Transformer', function() {
// pos.y === (y * scaleY - (height * scaleY / 2))
assert.equal(pos.y, 110);
});
test.only('if alt is pressed should transform around center', 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({
node: rect
});
layer.add(tr);
var tests = [
{
name: 'top-left',
startPos: {
x: 0,
y: 0
},
endPos: {
x: 25,
y: 25
},
expectedWidth: 50,
expectedHeight: 50
},
{
name: 'top-center',
startPos: {
x: 50,
y: 0
},
endPos: {
x: 50,
y: 25
},
expectedWidth: 100,
expectedHeight: 50
},
{
name: 'top-right',
startPos: {
x: 100,
y: 0
},
endPos: {
x: 75,
y: 25
},
expectedWidth: 50,
expectedHeight: 50
},
{
name: 'middle-left',
startPos: {
x: 0,
y: 50
},
endPos: {
x: 25,
y: 50
},
expectedWidth: 50,
expectedHeight: 100
},
{
name: 'middle-right',
startPos: {
x: 100,
y: 50
},
endPos: {
x: 75,
y: 50
},
expectedWidth: 50,
expectedHeight: 100
},
{
name: 'bottom-left',
startPos: {
x: 0,
y: 100
},
endPos: {
x: 25,
y: 75
},
expectedWidth: 50,
expectedHeight: 50
},
{
name: 'bottom-center',
startPos: {
x: 50,
y: 100
},
endPos: {
x: 50,
y: 75
},
expectedWidth: 100,
expectedHeight: 50
},
{
name: 'bottom-right',
startPos: {
x: 100,
y: 100
},
endPos: {
x: 75,
y: 75
},
expectedWidth: 50,
expectedHeight: 50
}
];
tests.forEach(test => {
rect.setAttrs({
x: 0,
y: 0,
width: 100,
height: 100,
scaleX: 1,
scaleY: 1
});
tr.update();
layer.draw();
stage.simulateMouseDown(test.startPos);
var target = stage.getIntersection(test.startPos);
var top = stage.content.getBoundingClientRect().top;
tr._handleMouseMove({
target: target,
clientX: test.endPos.x,
clientY: test.endPos.y + top,
altKey: true
});
// here is duplicate, because transformer is listening window events
tr._handleMouseUp({
clientX: test.endPos.x,
clientY: test.endPos.y + top
});
stage.simulateMouseUp({
x: test.endPos.x,
y: test.endPos.y
});
layer.draw();
assert.equal(
rect.width() * rect.scaleX(),
test.expectedWidth,
test.name + ' width check'
);
assert.equal(
rect.height() * rect.scaleY(),
test.expectedHeight,
test.name + ' height check'
);
});
});
});