lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 13:03:10 +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 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] ## [2.0.2][2018-03-15]
## Fixed ## Fixed

389
konva.js
View File

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

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

@ -2140,6 +2140,7 @@ suite('Container', function() {
y: 10 y: 10
}); });
group.add(new Konva.Group()); group.add(new Konva.Group());
console.log(group.getClientRect());
assert.deepEqual(group.getClientRect(), { assert.deepEqual(group.getClientRect(), {
x: 10, x: 10,
y: 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() { test('getClientRect - test empty group with invisible child', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
@ -2256,7 +2297,10 @@ suite('Container', function() {
data[3] 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; isTransparent = data[3] == 0;
assert.equal( assert.equal(
@ -2272,7 +2316,10 @@ suite('Container', function() {
data[3] 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; isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,
@ -2369,8 +2416,10 @@ suite('Container', function() {
stage.scale({ x: 2, y: 2 }); stage.scale({ x: 2, y: 2 });
stage.draw(); stage.draw();
var data = layer.getHitCanvas().getContext().getImageData(48, 100, 1, 1) var data = layer
.data; .getHitCanvas()
.getContext()
.getImageData(48, 100, 1, 1).data;
var isTransparent = data[3] == 0; var isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,
@ -2385,7 +2434,10 @@ suite('Container', function() {
data[3] 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; isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,
@ -2400,7 +2452,10 @@ suite('Container', function() {
data[3] 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; isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,
@ -2415,7 +2470,10 @@ suite('Container', function() {
data[3] 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; isTransparent = data[3] == 0;
assert.equal( assert.equal(
isTransparent, isTransparent,

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

@ -883,4 +883,31 @@ suite('Transformer', function() {
y: 30 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();
});
}); });