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
-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]

13
src/Container.js
View File

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

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

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