lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-10 00:23:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Narrow down getIntersection() result. add optional selector parament to getIntersection function. close #74

Browse Source
This commit is contained in:
Anton Lavrenov
2015-12-26 13:12:40 +07:00
parent 28e8758d29
commit c7ae11cd01
7 changed files with 98 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Added
- event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
- new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
- optional selector parametr for `stage.getIntersection` and `layer.getIntersection`
### Changed
- `moveTo` and some other methods return `this`

27
konva.js
View File

@@ -3,7 +3,7 @@
* Konva JavaScript Framework v0.11.0
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Fri Dec 25 2015
* Date: Sat Dec 26 2015
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -8861,16 +8861,21 @@ var Konva = {};
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Konva.Shape}
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = stage.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
*/
getIntersection: function(pos) {
getIntersection: function(pos, selector) {
var layers = this.getChildren(),
len = layers.length,
end = len - 1,
n, shape;
for(n = end; n >= 0; n--) {
shape = layers[n].getIntersection(pos);
shape = layers[n].getIntersection(pos, selector);
if (shape) {
return shape;
}
@@ -9658,14 +9663,20 @@ var Konva = {};
/**
* get visible intersection shape. This is the preferred
* method for determining if a point intersects a shape or not
* also you may pass optional selector parametr to return ancestor of intersected shape
* @method
* @memberof Konva.Layer.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Konva.Shape}
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = layer.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = layer.getIntersection({x: 50, y: 50}, 'Group');
*/
getIntersection: function(pos) {
getIntersection: function(pos, selector) {
var obj, i, intersectionOffset, shape;
if(!this.hitGraphEnabled() || !this.isVisible()) {
@@ -9684,7 +9695,9 @@ var Konva = {};
y: pos.y + intersectionOffset.y * spiralSearchDistance
});
shape = obj.shape;
if (shape) {
if (shape && selector) {
return shape.findAncestor(selector, true);
} else if (shape) {
return shape;
}
// we should continue search if we found antialiased pixel

8
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
src/Layer.js
View File

@@ -66,14 +66,20 @@
/**
* get visible intersection shape. This is the preferred
* method for determining if a point intersects a shape or not
* also you may pass optional selector parametr to return ancestor of intersected shape
* @method
* @memberof Konva.Layer.prototype
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Konva.Shape}
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = layer.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = layer.getIntersection({x: 50, y: 50}, 'Group');
*/
getIntersection: function(pos) {
getIntersection: function(pos, selector) {
var obj, i, intersectionOffset, shape;
if(!this.hitGraphEnabled() || !this.isVisible()) {
@@ -92,7 +98,9 @@
y: pos.y + intersectionOffset.y * spiralSearchDistance
});
shape = obj.shape;
if (shape) {
if (shape && selector) {
return shape.findAncestor(selector, true);
} else if (shape) {
return shape;
}
// we should continue search if we found antialiased pixel

11
src/Stage.js
View File

@@ -293,16 +293,21 @@
* @param {Object} pos
* @param {Number} pos.x
* @param {Number} pos.y
* @returns {Konva.Shape}
* @param {String} [selector]
* @returns {Konva.Node}
* @example
* var shape = stage.getIntersection({x: 50, y: 50});
* // or if you interested in shape parent:
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
*/
getIntersection: function(pos) {
getIntersection: function(pos, selector) {
var layers = this.getChildren(),
len = layers.length,
end = len - 1,
n, shape;
for(n = end; n >= 0; n--) {
shape = layers[n].getIntersection(pos);
shape = layers[n].getIntersection(pos, selector);
if (shape) {
return shape;
}

27
test/unit/Layer-test.js
View File

@@ -133,8 +133,35 @@ suite('Layer', function() {
assert.equal(layer.getIntersection({x:300, y:100}).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(layer.getIntersection({x:380, y:100}).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(layer.getIntersection({x:100, y:100}), null, 'shape should be null');
});
// ======================================================
test('layer getIntersection() with selector', function() {
var stage = addStage();
var layer = new Konva.Layer({
name: 'layer'
});
var group = new Konva.Group({
name: 'group'
});
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
});
group.add(circle)
layer.add(group);
stage.add(layer);
assert.equal(layer.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, 'Circle'), circle, 'intersection with shape selector');
assert.equal(layer.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, '.group'), group, 'intersection with group selector');
assert.equal(layer.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, 'Stage'), stage, 'intersection with stage selector');
});
// ======================================================

27
test/unit/Stage-test.js
View File

@@ -181,8 +181,35 @@ suite('Stage', function() {
assert.equal(stage.getIntersection({x:300, y:100}).getId(), 'greenCircle', 'shape should be greenCircle');
assert.equal(stage.getIntersection({x:380, y:100}).getId(), 'redCircle', 'shape should be redCircle');
assert.equal(stage.getIntersection({x:100, y:100}), null, 'shape should be null');
});
// ======================================================
test('layer getIntersection() with selector', function() {
var stage = addStage();
var layer = new Konva.Layer({
name: 'layer'
});
var group = new Konva.Group({
name: 'group'
});
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
});
group.add(circle)
layer.add(group);
stage.add(layer);
assert.equal(stage.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, 'Circle'), circle, 'intersection with shape selector');
assert.equal(stage.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, '.group'), group, 'intersection with group selector');
assert.equal(stage.getIntersection({x: stage.width() / 2, y: stage.height() / 2}, 'Stage'), stage, 'intersection with stage selector');
});
// ======================================================