lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +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
Download Patch File Download Diff File Expand all files Collapse all files

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'
);
});
});
});