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

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

389
konva.js
View File

@ -7587,13 +7587,13 @@
(function() {
'use strict';
/**
* Container constructor.  Containers are used to contain nodes or other containers
* @constructor
* @memberof Konva
* @augments Konva.Node
* @abstract
* @param {Object} config
* @param {Number} [config.x]
* Container constructor.  Containers are used to contain nodes or other containers
* @constructor
* @memberof Konva
* @augments Konva.Node
* @abstract
* @param {Object} config
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
@ -7613,14 +7613,14 @@
* the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc]
* * @param {Object} [config.clip] set clip
* * @param {Object} [config.clip] set clip
* @param {Number} [config.clipX] set clip x
* @param {Number} [config.clipY] set clip y
* @param {Number} [config.clipWidth] set clip width
* @param {Number} [config.clipHeight] set clip height
* @param {Function} [config.clipFunc] set clip func
*/
*/
Konva.Container = function(config) {
this.__init(config);
};
@ -7631,20 +7631,20 @@
Konva.Node.call(this, config);
},
/**
* returns a {@link Konva.Collection} of direct descendant nodes
* @method
* @memberof Konva.Container.prototype
* @param {Function} [filterFunc] filter function
* @returns {Konva.Collection}
* @example
* // get all children
* var children = layer.getChildren();
*
* // get only circles
* var circles = layer.getChildren(function(node){
* return node.getClassName() === 'Circle';
* });
*/
* returns a {@link Konva.Collection} of direct descendant nodes
* @method
* @memberof Konva.Container.prototype
* @param {Function} [filterFunc] filter function
* @returns {Konva.Collection}
* @example
* // get all children
* var children = layer.getChildren();
*
* // get only circles
* var circles = layer.getChildren(function(node){
* return node.getClassName() === 'Circle';
* });
*/
getChildren: function(filterFunc) {
if (!filterFunc) {
return this.children;
@ -7659,19 +7659,19 @@
return results;
},
/**
* determine if node has children
* @method
* @memberof Konva.Container.prototype
* @returns {Boolean}
*/
* determine if node has children
* @method
* @memberof Konva.Container.prototype
* @returns {Boolean}
*/
hasChildren: function() {
return this.getChildren().length > 0;
},
/**
* remove all children
* @method
* @memberof Konva.Container.prototype
*/
* remove all children
* @method
* @memberof Konva.Container.prototype
*/
removeChildren: function() {
var children = Konva.Collection.toCollection(this.children);
var child;
@ -7687,10 +7687,10 @@
return this;
},
/**
* destroy all children
* @method
* @memberof Konva.Container.prototype
*/
* destroy all children
* @method
* @memberof Konva.Container.prototype
*/
destroyChildren: function() {
var children = Konva.Collection.toCollection(this.children);
var child;
@ -7706,14 +7706,14 @@
return this;
},
/**
* Add node or nodes to container.
* @method
* @memberof Konva.Container.prototype
* @param {...Konva.Node} child
* @returns {Container}
* @example
* layer.add(shape1, shape2, shape3);
*/
* Add node or nodes to container.
* @method
* @memberof Konva.Container.prototype
* @param {...Konva.Node} child
* @returns {Container}
* @example
* layer.add(shape1, shape2, shape3);
*/
add: function(child) {
if (arguments.length > 1) {
for (var i = 0; i < arguments.length; i++) {
@ -7752,29 +7752,29 @@
return this;
},
/**
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections
* and '.' for name selections. You can also select by type or class name. Pass multiple selectors
* separated by a space.
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Collection}
* @example
* // select node with id foo
* var node = stage.find('#foo');
*
* // select nodes with name bar inside layer
* var nodes = layer.find('.bar');
*
* // select all groups inside layer
* var nodes = layer.find('Group');
*
* // select all rectangles inside layer
* var nodes = layer.find('Rect');
*
* // select node with an id of foo or a name of bar inside layer
* var nodes = layer.find('#foo, .bar');
*/
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections
* and '.' for name selections. You can also select by type or class name. Pass multiple selectors
* separated by a space.
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Collection}
* @example
* // select node with id foo
* var node = stage.find('#foo');
*
* // select nodes with name bar inside layer
* var nodes = layer.find('.bar');
*
* // select all groups inside layer
* var nodes = layer.find('Group');
*
* // select all rectangles inside layer
* var nodes = layer.find('Rect');
*
* // select node with an id of foo or a name of bar inside layer
* var nodes = layer.find('#foo, .bar');
*/
find: function(selector) {
var retArr = [],
selectorArr = selector.replace(/ /g, '').split(','),
@ -7823,18 +7823,18 @@
return Konva.Collection.toCollection(retArr);
},
/**
* return a first node from `find` method
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Konva.Node}
* @example
* // select node with id foo
* var node = stage.findOne('#foo');
*
* // select node with name bar inside layer
* var nodes = layer.findOne('.bar');
*/
* return a first node from `find` method
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Konva.Node}
* @example
* // select node with id foo
* var node = stage.findOne('#foo');
*
* // select node with name bar inside layer
* var nodes = layer.findOne('.bar');
*/
findOne: function(selector) {
return this.find(selector)[0];
},
@ -7887,12 +7887,12 @@
return retArr;
},
/**
* determine if node is an ancestor
* of descendant
* @method
* @memberof Konva.Container.prototype
* @param {Konva.Node} node
*/
* determine if node is an ancestor
* of descendant
* @method
* @memberof Konva.Container.prototype
* @param {Konva.Node} node
*/
isAncestorOf: function(node) {
var parent = node.getParent();
while (parent) {
@ -7914,17 +7914,17 @@
return node;
},
/**
* get all shapes that intersect a point. Note: because this method must clear a temporary
* canvas and redraw every shape inside the container, it should only be used for special sitations
* because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible
* because it performs much better
* @method
* @memberof Konva.Container.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Array} array of shapes
*/
* get all shapes that intersect a point. Note: because this method must clear a temporary
* canvas and redraw every shape inside the container, it should only be used for special sitations
* because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible
* because it performs much better
* @method
* @memberof Konva.Container.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Array} array of shapes
*/
getAllIntersections: function(pos) {
var arr = [];
@ -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,
@ -8101,110 +8116,110 @@
'height'
]);
/**
* get/set clip
* @method
* @name clip
* @memberof Konva.Container.prototype
* @param {Object} clip
* @param {Number} clip.x
* @param {Number} clip.y
* @param {Number} clip.width
* @param {Number} clip.height
* @returns {Object}
* @example
* // get clip
* var clip = container.clip();
*
* // set clip
* container.setClip({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
* get/set clip
* @method
* @name clip
* @memberof Konva.Container.prototype
* @param {Object} clip
* @param {Number} clip.x
* @param {Number} clip.y
* @param {Number} clip.width
* @param {Number} clip.height
* @returns {Object}
* @example
* // get clip
* var clip = container.clip();
*
* // set clip
* container.setClip({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipX');
/**
* get/set clip x
* @name clipX
* @method
* @memberof Konva.Container.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get clip x
* var clipX = container.clipX();
*
* // set clip x
* container.clipX(10);
*/
* get/set clip x
* @name clipX
* @method
* @memberof Konva.Container.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get clip x
* var clipX = container.clipX();
*
* // set clip x
* container.clipX(10);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipY');
/**
* get/set clip y
* @name clipY
* @method
* @memberof Konva.Container.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get clip y
* var clipY = container.clipY();
*
* // set clip y
* container.clipY(10);
*/
* get/set clip y
* @name clipY
* @method
* @memberof Konva.Container.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get clip y
* var clipY = container.clipY();
*
* // set clip y
* container.clipY(10);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipWidth');
/**
* get/set clip width
* @name clipWidth
* @method
* @memberof Konva.Container.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get clip width
* var clipWidth = container.clipWidth();
*
* // set clip width
* container.clipWidth(100);
*/
* get/set clip width
* @name clipWidth
* @method
* @memberof Konva.Container.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get clip width
* var clipWidth = container.clipWidth();
*
* // set clip width
* container.clipWidth(100);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipHeight');
/**
* get/set clip height
* @name clipHeight
* @method
* @memberof Konva.Container.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get clip height
* var clipHeight = container.clipHeight();
*
* // set clip height
* container.clipHeight(100);
*/
* get/set clip height
* @name clipHeight
* @method
* @memberof Konva.Container.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get clip height
* var clipHeight = container.clipHeight();
*
* // set clip height
* container.clipHeight(100);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipFunc');
/**
* get/set clip function
* @name clipFunc
* @method
* @memberof Konva.Container.prototype
* @param {Function} function
* @returns {Function}
* @example
* // get clip function
* var clipFunction = container.clipFunc();
*
* // set clip height
* container.clipFunc(function(ctx) {
* ctx.rect(0, 0, 100, 100);
* });
*/
* get/set clip function
* @name clipFunc
* @method
* @memberof Konva.Container.prototype
* @param {Function} function
* @returns {Function}
* @example
* // get clip function
* var clipFunction = container.clipFunc();
*
* // set clip height
* container.clipFunc(function(ctx) {
* ctx.rect(0, 0, 100, 100);
* });
*/
Konva.Collection.mapMethods(Konva.Container);
})();

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

389
src/Container.js
View File

@ -1,15 +1,15 @@
(function() {
'use strict';
/**
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
* @constructor
* @memberof Konva
* @augments Konva.Node
* @abstract
* @param {Object} config
* @@nodeParams
* @@containerParams
*/
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
* @constructor
* @memberof Konva
* @augments Konva.Node
* @abstract
* @param {Object} config
* @@nodeParams
* @@containerParams
*/
Konva.Container = function(config) {
this.__init(config);
};
@ -20,20 +20,20 @@
Konva.Node.call(this, config);
},
/**
* returns a {@link Konva.Collection} of direct descendant nodes
* @method
* @memberof Konva.Container.prototype
* @param {Function} [filterFunc] filter function
* @returns {Konva.Collection}
* @example
* // get all children
* var children = layer.getChildren();
*
* // get only circles
* var circles = layer.getChildren(function(node){
* return node.getClassName() === 'Circle';
* });
*/
* returns a {@link Konva.Collection} of direct descendant nodes
* @method
* @memberof Konva.Container.prototype
* @param {Function} [filterFunc] filter function
* @returns {Konva.Collection}
* @example
* // get all children
* var children = layer.getChildren();
*
* // get only circles
* var circles = layer.getChildren(function(node){
* return node.getClassName() === 'Circle';
* });
*/
getChildren: function(filterFunc) {
if (!filterFunc) {
return this.children;
@ -48,19 +48,19 @@
return results;
},
/**
* determine if node has children
* @method
* @memberof Konva.Container.prototype
* @returns {Boolean}
*/
* determine if node has children
* @method
* @memberof Konva.Container.prototype
* @returns {Boolean}
*/
hasChildren: function() {
return this.getChildren().length > 0;
},
/**
* remove all children
* @method
* @memberof Konva.Container.prototype
*/
* remove all children
* @method
* @memberof Konva.Container.prototype
*/
removeChildren: function() {
var children = Konva.Collection.toCollection(this.children);
var child;
@ -76,10 +76,10 @@
return this;
},
/**
* destroy all children
* @method
* @memberof Konva.Container.prototype
*/
* destroy all children
* @method
* @memberof Konva.Container.prototype
*/
destroyChildren: function() {
var children = Konva.Collection.toCollection(this.children);
var child;
@ -95,14 +95,14 @@
return this;
},
/**
* Add node or nodes to container.
* @method
* @memberof Konva.Container.prototype
* @param {...Konva.Node} child
* @returns {Container}
* @example
* layer.add(shape1, shape2, shape3);
*/
* Add node or nodes to container.
* @method
* @memberof Konva.Container.prototype
* @param {...Konva.Node} child
* @returns {Container}
* @example
* layer.add(shape1, shape2, shape3);
*/
add: function(child) {
if (arguments.length > 1) {
for (var i = 0; i < arguments.length; i++) {
@ -141,29 +141,29 @@
return this;
},
/**
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections
* and '.' for name selections. You can also select by type or class name. Pass multiple selectors
* separated by a space.
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Collection}
* @example
* // select node with id foo
* var node = stage.find('#foo');
*
* // select nodes with name bar inside layer
* var nodes = layer.find('.bar');
*
* // select all groups inside layer
* var nodes = layer.find('Group');
*
* // select all rectangles inside layer
* var nodes = layer.find('Rect');
*
* // select node with an id of foo or a name of bar inside layer
* var nodes = layer.find('#foo, .bar');
*/
* return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections
* and '.' for name selections. You can also select by type or class name. Pass multiple selectors
* separated by a space.
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Collection}
* @example
* // select node with id foo
* var node = stage.find('#foo');
*
* // select nodes with name bar inside layer
* var nodes = layer.find('.bar');
*
* // select all groups inside layer
* var nodes = layer.find('Group');
*
* // select all rectangles inside layer
* var nodes = layer.find('Rect');
*
* // select node with an id of foo or a name of bar inside layer
* var nodes = layer.find('#foo, .bar');
*/
find: function(selector) {
var retArr = [],
selectorArr = selector.replace(/ /g, '').split(','),
@ -212,18 +212,18 @@
return Konva.Collection.toCollection(retArr);
},
/**
* return a first node from `find` method
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Konva.Node}
* @example
* // select node with id foo
* var node = stage.findOne('#foo');
*
* // select node with name bar inside layer
* var nodes = layer.findOne('.bar');
*/
* return a first node from `find` method
* @method
* @memberof Konva.Container.prototype
* @param {String} selector
* @returns {Konva.Node}
* @example
* // select node with id foo
* var node = stage.findOne('#foo');
*
* // select node with name bar inside layer
* var nodes = layer.findOne('.bar');
*/
findOne: function(selector) {
return this.find(selector)[0];
},
@ -276,12 +276,12 @@
return retArr;
},
/**
* determine if node is an ancestor
* of descendant
* @method
* @memberof Konva.Container.prototype
* @param {Konva.Node} node
*/
* determine if node is an ancestor
* of descendant
* @method
* @memberof Konva.Container.prototype
* @param {Konva.Node} node
*/
isAncestorOf: function(node) {
var parent = node.getParent();
while (parent) {
@ -303,17 +303,17 @@
return node;
},
/**
* get all shapes that intersect a point. Note: because this method must clear a temporary
* canvas and redraw every shape inside the container, it should only be used for special sitations
* because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible
* because it performs much better
* @method
* @memberof Konva.Container.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Array} array of shapes
*/
* get all shapes that intersect a point. Note: because this method must clear a temporary
* canvas and redraw every shape inside the container, it should only be used for special sitations
* because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible
* because it performs much better
* @method
* @memberof Konva.Container.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Array} array of shapes
*/
getAllIntersections: function(pos) {
var arr = [];
@ -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,
@ -490,110 +505,110 @@
'height'
]);
/**
* get/set clip
* @method
* @name clip
* @memberof Konva.Container.prototype
* @param {Object} clip
* @param {Number} clip.x
* @param {Number} clip.y
* @param {Number} clip.width
* @param {Number} clip.height
* @returns {Object}
* @example
* // get clip
* var clip = container.clip();
*
* // set clip
* container.setClip({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
* get/set clip
* @method
* @name clip
* @memberof Konva.Container.prototype
* @param {Object} clip
* @param {Number} clip.x
* @param {Number} clip.y
* @param {Number} clip.width
* @param {Number} clip.height
* @returns {Object}
* @example
* // get clip
* var clip = container.clip();
*
* // set clip
* container.setClip({
* x: 20,
* y: 20,
* width: 20,
* height: 20
* });
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipX');
/**
* get/set clip x
* @name clipX
* @method
* @memberof Konva.Container.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get clip x
* var clipX = container.clipX();
*
* // set clip x
* container.clipX(10);
*/
* get/set clip x
* @name clipX
* @method
* @memberof Konva.Container.prototype
* @param {Number} x
* @returns {Number}
* @example
* // get clip x
* var clipX = container.clipX();
*
* // set clip x
* container.clipX(10);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipY');
/**
* get/set clip y
* @name clipY
* @method
* @memberof Konva.Container.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get clip y
* var clipY = container.clipY();
*
* // set clip y
* container.clipY(10);
*/
* get/set clip y
* @name clipY
* @method
* @memberof Konva.Container.prototype
* @param {Number} y
* @returns {Number}
* @example
* // get clip y
* var clipY = container.clipY();
*
* // set clip y
* container.clipY(10);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipWidth');
/**
* get/set clip width
* @name clipWidth
* @method
* @memberof Konva.Container.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get clip width
* var clipWidth = container.clipWidth();
*
* // set clip width
* container.clipWidth(100);
*/
* get/set clip width
* @name clipWidth
* @method
* @memberof Konva.Container.prototype
* @param {Number} width
* @returns {Number}
* @example
* // get clip width
* var clipWidth = container.clipWidth();
*
* // set clip width
* container.clipWidth(100);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipHeight');
/**
* get/set clip height
* @name clipHeight
* @method
* @memberof Konva.Container.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get clip height
* var clipHeight = container.clipHeight();
*
* // set clip height
* container.clipHeight(100);
*/
* get/set clip height
* @name clipHeight
* @method
* @memberof Konva.Container.prototype
* @param {Number} height
* @returns {Number}
* @example
* // get clip height
* var clipHeight = container.clipHeight();
*
* // set clip height
* container.clipHeight(100);
*/
Konva.Factory.addGetterSetter(Konva.Container, 'clipFunc');
/**
* get/set clip function
* @name clipFunc
* @method
* @memberof Konva.Container.prototype
* @param {Function} function
* @returns {Function}
* @example
* // get clip function
* var clipFunction = container.clipFunc();
*
* // set clip height
* container.clipFunc(function(ctx) {
* ctx.rect(0, 0, 100, 100);
* });
*/
* get/set clip function
* @name clipFunc
* @method
* @memberof Konva.Container.prototype
* @param {Function} function
* @returns {Function}
* @example
* // get clip function
* var clipFunction = container.clipFunc();
*
* // set clip height
* container.clipFunc(function(ctx) {
* ctx.rect(0, 0, 100, 100);
* });
*/
Konva.Collection.mapMethods(Konva.Container);
})();

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