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

fix getClientRect calc

Browse Source
This commit is contained in:
Anton Lavrenov 2017-07-28 18:36:08 +02:00
parent 3c2fef9414
commit f520cf34c3
3 changed files with 391 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Fixed ### Fixed
-Fix bug with double trigger wheel in Firefox -Fix bug with double trigger wheel in Firefox
-Fix `node.getClientRect()` calculation in a case of Group + invisible child
## [1.6.3][2017-05-24] ## [1.6.3][2017-05-24]

13
src/Container.js
View File

@ -410,14 +410,17 @@
shouldDrawHit: function(canvas) { shouldDrawHit: function(canvas) {
var layer = this.getLayer(); var layer = this.getLayer();
var dd = Konva.DD; var dd = Konva.DD;
var layerUnderDrag = dd && var layerUnderDrag =
dd &&
Konva.isDragging() && Konva.isDragging() &&
Konva.DD.anim.getLayers().indexOf(layer) !== -1; Konva.DD.anim.getLayers().indexOf(layer) !== -1;
return (canvas && canvas.isCache) || return (
(canvas && canvas.isCache) ||
(layer && (layer &&
layer.hitGraphEnabled() && layer.hitGraphEnabled() &&
this.isVisible() && this.isVisible() &&
!layerUnderDrag); !layerUnderDrag)
);
}, },
getClientRect: function(skipTransform) { getClientRect: function(skipTransform) {
var minX, minY, maxX, maxY; var minX, minY, maxX, maxY;
@ -428,6 +431,10 @@
height: 0 height: 0
}; };
this.children.each(function(child) { this.children.each(function(child) {
// skip invisible children
if (!child.isVisible()) {
return;
}
var rect = child.getClientRect(); var rect = child.getClientRect();
// skip invisible children (like empty groups) // skip invisible children (like empty groups)

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

@ -1122,192 +1122,186 @@ suite('Container', function() {
}); });
// ====================================================== // ======================================================
test( test('test find() selector by adding shape, then group, then layer', function() {
'test find() selector by adding shape, then group, then layer', var stage = addStage();
function() { var layer = new Konva.Layer({
var stage = addStage(); name: 'layerName',
var layer = new Konva.Layer({ id: 'layerId'
name: 'layerName', });
id: 'layerId' var group = new Konva.Group({
}); name: 'groupName',
var group = new Konva.Group({ id: 'groupId'
name: 'groupName', });
id: 'groupId' var rect = new Konva.Rect({
}); x: 200,
var rect = new Konva.Rect({ y: 20,
x: 200, width: 100,
y: 20, height: 50,
width: 100, fill: 'red',
height: 50, stroke: 'black',
fill: 'red', strokeWidth: 4,
stroke: 'black', name: 'rectName',
strokeWidth: 4, id: 'rectId'
name: 'rectName', });
id: 'rectId'
});
group.add(rect); group.add(rect);
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
assert.equal( assert.equal(
stage.find('.rectName')[0].attrs.id, stage.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
stage.find('#rectId')[0].attrs.id, stage.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
layer.find('.rectName')[0].attrs.id, layer.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
layer.find('#rectId')[0].attrs.id, layer.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
group.find('.rectName')[0].attrs.id, group.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
group.find('#rectId')[0].attrs.id, group.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
stage.find('.groupName')[0].attrs.id, stage.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
stage.find('#groupId')[0].attrs.id, stage.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
layer.find('.groupName')[0].attrs.id, layer.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
layer.find('#groupId')[0].attrs.id, layer.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
stage.find('.layerName')[0].attrs.id, stage.find('.layerName')[0].attrs.id,
'layerId', 'layerId',
'problem with layer name selector' 'problem with layer name selector'
); );
assert.equal( assert.equal(
stage.find('#layerId')[0].attrs.id, stage.find('#layerId')[0].attrs.id,
'layerId', 'layerId',
'problem with layer id selector' 'problem with layer id selector'
); );
} });
);
// ====================================================== // ======================================================
test( test('test find() selector by adding group, then shape, then layer', function() {
'test find() selector by adding group, then shape, then layer', var stage = addStage();
function() { var layer = new Konva.Layer({
var stage = addStage(); name: 'layerName',
var layer = new Konva.Layer({ id: 'layerId'
name: 'layerName', });
id: 'layerId' var group = new Konva.Group({
}); name: 'groupName',
var group = new Konva.Group({ id: 'groupId'
name: 'groupName', });
id: 'groupId' var rect = new Konva.Rect({
}); x: 200,
var rect = new Konva.Rect({ y: 20,
x: 200, width: 100,
y: 20, height: 50,
width: 100, fill: 'red',
height: 50, stroke: 'black',
fill: 'red', strokeWidth: 4,
stroke: 'black', name: 'rectName',
strokeWidth: 4, id: 'rectId'
name: 'rectName', });
id: 'rectId'
});
layer.add(group); layer.add(group);
group.add(rect); group.add(rect);
stage.add(layer); stage.add(layer);
assert.equal( assert.equal(
stage.find('.rectName')[0].attrs.id, stage.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
stage.find('#rectId')[0].attrs.id, stage.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
layer.find('.rectName')[0].attrs.id, layer.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
layer.find('#rectId')[0].attrs.id, layer.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
group.find('.rectName')[0].attrs.id, group.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
group.find('#rectId')[0].attrs.id, group.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
stage.find('.groupName')[0].attrs.id, stage.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
stage.find('#groupId')[0].attrs.id, stage.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
layer.find('.groupName')[0].attrs.id, layer.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
layer.find('#groupId')[0].attrs.id, layer.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
stage.find('.layerName')[0].attrs.id, stage.find('.layerName')[0].attrs.id,
'layerId', 'layerId',
'problem with layer name selector' 'problem with layer name selector'
); );
assert.equal( assert.equal(
stage.find('#layerId')[0].attrs.id, stage.find('#layerId')[0].attrs.id,
'layerId', 'layerId',
'problem with layer id selector' 'problem with layer id selector'
); );
} });
);
// ====================================================== // ======================================================
test('test deprecated get() method', function() { test('test deprecated get() method', function() {
@ -1344,194 +1338,188 @@ suite('Container', function() {
}); });
// ====================================================== // ======================================================
test( test('test find() selector by adding group, then layer, then shape', function() {
'test find() selector by adding group, then layer, then shape', var stage = addStage();
function() { var layer = new Konva.Layer({
var stage = addStage(); name: 'layerName',
var layer = new Konva.Layer({ id: 'layerId'
name: 'layerName', });
id: 'layerId' var group = new Konva.Group({
}); name: 'groupName',
var group = new Konva.Group({ id: 'groupId'
name: 'groupName', });
id: 'groupId' var rect = new Konva.Rect({
}); x: 200,
var rect = new Konva.Rect({ y: 20,
x: 200, width: 100,
y: 20, height: 50,
width: 100, fill: 'red',
height: 50, stroke: 'black',
fill: 'red', strokeWidth: 4,
stroke: 'black', name: 'rectName',
strokeWidth: 4, id: 'rectId'
name: 'rectName', });
id: 'rectId'
});
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
group.add(rect); group.add(rect);
assert.equal( assert.equal(
stage.find('.rectName')[0].attrs.id, stage.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
stage.find('#rectId')[0].attrs.id, stage.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
layer.find('.rectName')[0].attrs.id, layer.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
layer.find('#rectId')[0].attrs.id, layer.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
group.find('.rectName')[0].attrs.id, group.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
group.find('#rectId')[0].attrs.id, group.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
stage.find('.groupName')[0].attrs.id, stage.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
stage.find('#groupId')[0].attrs.id, stage.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
layer.find('.groupName')[0].attrs.id, layer.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
layer.find('#groupId')[0].attrs.id, layer.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
stage.find('.layerName')[0].attrs.id, stage.find('.layerName')[0].attrs.id,
'layerId', 'layerId',
'problem with layer name selector' 'problem with layer name selector'
); );
assert.equal( assert.equal(
stage.find('#layerId')[0].attrs.id, stage.find('#layerId')[0].attrs.id,
'layerId', 'layerId',
'problem with layer id selector' 'problem with layer id selector'
); );
} });
);
// ====================================================== // ======================================================
test( test('test find() selector by adding layer, then group, then shape', function() {
'test find() selector by adding layer, then group, then shape', var stage = addStage();
function() { var layer = new Konva.Layer({
var stage = addStage(); name: 'layerName',
var layer = new Konva.Layer({ id: 'layerId'
name: 'layerName', });
id: 'layerId' var group = new Konva.Group({
}); name: 'groupName',
var group = new Konva.Group({ id: 'groupId'
name: 'groupName', });
id: 'groupId' var rect = new Konva.Rect({
}); x: 200,
var rect = new Konva.Rect({ y: 20,
x: 200, width: 100,
y: 20, height: 50,
width: 100, fill: 'red',
height: 50, stroke: 'black',
fill: 'red', strokeWidth: 4,
stroke: 'black', name: 'rectName',
strokeWidth: 4, id: 'rectId'
name: 'rectName', });
id: 'rectId'
});
stage.add(layer); stage.add(layer);
layer.add(group); layer.add(group);
group.add(rect); group.add(rect);
assert.equal( assert.equal(
stage.find('.rectName')[0].attrs.id, stage.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
stage.find('#rectId')[0].attrs.id, stage.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
layer.find('.rectName')[0].attrs.id, layer.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
layer.find('#rectId')[0].attrs.id, layer.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
group.find('.rectName')[0].attrs.id, group.find('.rectName')[0].attrs.id,
'rectId', 'rectId',
'problem with shape name selector' 'problem with shape name selector'
); );
assert.equal( assert.equal(
group.find('#rectId')[0].attrs.id, group.find('#rectId')[0].attrs.id,
'rectId', 'rectId',
'problem with shape id selector' 'problem with shape id selector'
); );
assert.equal( assert.equal(
stage.find('.groupName')[0].attrs.id, stage.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
stage.find('#groupId')[0].attrs.id, stage.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
layer.find('.groupName')[0].attrs.id, layer.find('.groupName')[0].attrs.id,
'groupId', 'groupId',
'problem with group name selector' 'problem with group name selector'
); );
assert.equal( assert.equal(
layer.find('#groupId')[0].attrs.id, layer.find('#groupId')[0].attrs.id,
'groupId', 'groupId',
'problem with group id selector' 'problem with group id selector'
); );
assert.equal( assert.equal(
stage.find('.layerName')[0].attrs.id, stage.find('.layerName')[0].attrs.id,
'layerId', 'layerId',
'problem with layer name selector' 'problem with layer name selector'
); );
assert.equal( assert.equal(
stage.find('#layerId')[0].attrs.id, stage.find('#layerId')[0].attrs.id,
'layerId', 'layerId',
'problem with layer id selector' 'problem with layer id selector'
); );
layer.draw(); layer.draw();
} });
);
test('warn on invalid selector', function() { test('warn on invalid selector', function() {
var stage = addStage(); var stage = addStage();
@ -2160,6 +2148,39 @@ suite('Container', function() {
}); });
}); });
test('getClientRect - test empty group with invisible child', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var group = new Konva.Group({
x: 10,
y: 10
});
group.add(
new Konva.Rect({
x: 0,
y: 0,
width: 50,
height: 50
})
);
group.add(
new Konva.Rect({
x: 400,
y: 400,
width: 50,
height: 50,
visible: false
})
);
assert.deepEqual(group.getClientRect(), {
x: 10,
y: 10,
width: 50,
height: 50
});
});
test.skip('getClientRect - test layer', function() { test.skip('getClientRect - test layer', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
@ -2268,10 +2289,8 @@ suite('Container', function() {
var ratio = layer.getCanvas().getPixelRatio(); var ratio = layer.getCanvas().getPixelRatio();
data = layer.getContext().getImageData(26 * ratio, 50 * ratio, 1, 1).data; data = layer.getContext().getImageData(26 * ratio, 50 * ratio, 1, 1).data;
var isRed = data[0] == 255 && var isRed =
data[1] == 0 && data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
data[2] == 0 &&
data[3] == 255;
assert.equal( assert.equal(
isRed, isRed,
true, true,
@ -2350,10 +2369,8 @@ suite('Container', function() {
stage.scale({ x: 2, y: 2 }); stage.scale({ x: 2, y: 2 });
stage.draw(); stage.draw();
var data = layer var data = layer.getHitCanvas().getContext().getImageData(48, 100, 1, 1)
.getHitCanvas() .data;
.getContext()
.getImageData(48, 100, 1, 1).data;
var isTransparent = data[3] == 0; var isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,
@ -2415,10 +2432,8 @@ suite('Container', function() {
var ratio = layer.getCanvas().getPixelRatio(); var ratio = layer.getCanvas().getPixelRatio();
data = layer.getContext().getImageData(52 * ratio, 100 * ratio, 1, 1).data; data = layer.getContext().getImageData(52 * ratio, 100 * ratio, 1, 1).data;
var isRed = data[0] == 255 && var isRed =
data[1] == 0 && data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
data[2] == 0 &&
data[3] == 255;
assert.equal( assert.equal(
isRed, isRed,
true, true,