lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:07:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

getClientRect cals fixes

Browse Source
This commit is contained in:
Anton Lavrenov 2018-03-21 12:04:57 +07:00
parent f48e21450e
commit 1930ffc9d7
6 changed files with 501 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -14,6 +14,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Fixed flow for `contextmenu` event. Not it will be triggered on shapes too
## Fixed
* some bugs fixes for `group.getClientRect()`
## [2.0.2][2018-03-15]
## Fixed

19
konva.js
View File

@ -8006,7 +8006,10 @@
context.rect(clipX, clipY, clipWidth, clipHeight);
}
context.clip();
m = transform.copy().invert().getMatrix();
m = transform
.copy()
.invert()
.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
@ -8051,6 +8054,7 @@
if (!child.isVisible()) {
return;
}
var rect = child.getClientRect({ relativeTo: that });
// skip invisible children (like empty groups)
@ -8073,7 +8077,18 @@
}
});
if (this.children.length !== 0) {
// if child is group we need to make sure it has visible shapes inside
var shapes = this.find('Shape');
var hasVisible = false;
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.isVisible()) {
hasVisible = true;
break;
}
}
if (hasVisible) {
selfRect = {
x: minX,
y: minY,

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
src/Container.js
View File

@ -395,7 +395,10 @@
context.rect(clipX, clipY, clipWidth, clipHeight);
}
context.clip();
m = transform.copy().invert().getMatrix();
m = transform
.copy()
.invert()
.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
@ -440,6 +443,7 @@
if (!child.isVisible()) {
return;
}
var rect = child.getClientRect({ relativeTo: that });
// skip invisible children (like empty groups)
@ -462,7 +466,18 @@
}
});
if (this.children.length !== 0) {
// if child is group we need to make sure it has visible shapes inside
var shapes = this.find('Shape');
var hasVisible = false;
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.isVisible()) {
hasVisible = true;
break;
}
}
if (hasVisible) {
selfRect = {
x: minX,
y: minY,

72
test/unit/Container-test.js
View File

@ -2140,6 +2140,7 @@ suite('Container', function() {
y: 10
});
group.add(new Konva.Group());
console.log(group.getClientRect());
assert.deepEqual(group.getClientRect(), {
x: 10,
y: 10,
@ -2148,6 +2149,46 @@ suite('Container', function() {
});
});
test('get client rect with deep nested hidden shape', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group({
draggable: true,
x: 100,
y: 40
});
var rect = new Konva.Rect({
height: 100,
width: 100,
fill: 'red'
});
group.add(rect);
layer.add(group);
var subGroup = new Konva.Group();
group.add(subGroup);
subGroup.add(
new Konva.Rect({
visible: false
})
);
stage.add(layer);
stage.draw();
var clientRect = group.getClientRect();
assert.deepEqual(clientRect, {
x: 100,
y: 40,
width: 100,
height: 100
});
});
test('getClientRect - test empty group with invisible child', function() {
var stage = addStage();
var layer = new Konva.Layer();
@ -2256,7 +2297,10 @@ suite('Container', function() {
data[3]
);
data = layer.getHitCanvas().getContext().getImageData(76, 50, 1, 1).data;
data = layer
.getHitCanvas()
.getContext()
.getImageData(76, 50, 1, 1).data;
isTransparent = data[3] == 0;
assert.equal(
@ -2272,7 +2316,10 @@ suite('Container', function() {
data[3]
);
data = layer.getHitCanvas().getContext().getImageData(50, 76, 1, 1).data;
data = layer
.getHitCanvas()
.getContext()
.getImageData(50, 76, 1, 1).data;
isTransparent = data[3] == 0;
assert.equal(
isTransparent,
@ -2369,8 +2416,10 @@ suite('Container', function() {
stage.scale({ x: 2, y: 2 });
stage.draw();
var data = layer.getHitCanvas().getContext().getImageData(48, 100, 1, 1)
.data;
var data = layer
.getHitCanvas()
.getContext()
.getImageData(48, 100, 1, 1).data;
var isTransparent = data[3] == 0;
assert.equal(
isTransparent,
@ -2385,7 +2434,10 @@ suite('Container', function() {
data[3]
);
data = layer.getHitCanvas().getContext().getImageData(100, 48, 1, 1).data;
data = layer
.getHitCanvas()
.getContext()
.getImageData(100, 48, 1, 1).data;
isTransparent = data[3] == 0;
assert.equal(
isTransparent,
@ -2400,7 +2452,10 @@ suite('Container', function() {
data[3]
);
data = layer.getHitCanvas().getContext().getImageData(152, 100, 1, 1).data;
data = layer
.getHitCanvas()
.getContext()
.getImageData(152, 100, 1, 1).data;
isTransparent = data[3] == 0;
assert.equal(
isTransparent,
@ -2415,7 +2470,10 @@ suite('Container', function() {
data[3]
);
data = layer.getHitCanvas().getContext().getImageData(100, 152, 1, 1).data;
data = layer
.getHitCanvas()
.getContext()
.getImageData(100, 152, 1, 1).data;
isTransparent = data[3] == 0;
assert.equal(
isTransparent,

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

@ -883,4 +883,31 @@ suite('Transformer', function() {
y: 30
});
});
test('with strokes', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 20,
y: 60,
draggable: true,
width: 10,
height: 10,
fill: 'yellow',
strokeWidth: 2,
stroke: 'black',
scaleX: 10,
scaleY: 10
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
});
});