lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge upstream

Browse Source 
#79
This commit is contained in:
Gleb Pospelov 2015-07-30 04:23:16 +03:00
parent 268c6bef26
commit 29ba8e7c65
8 changed files with 165 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
### Fixed
- Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
### Changed
- Dragging now works much better. If your pointer is out of stage content dragging will still continue.

1
bower.json
View File

@ -1,6 +1,5 @@
{
"name": "konva",
"version": "0.9.5",
"authors": [
"Anton Lavrenov", "Eric Rowell"
],

61
konva.js
View File

@ -3,7 +3,7 @@
* Konva JavaScript Framework v0.9.9
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Thu Jul 30 2015
* Date: Fri Jun 19 2015
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -6723,6 +6723,12 @@ var Konva = {};
},
getClientRect: function(skipTransform) {
var minX, minY, maxX, maxY;
var selfRect = {
x: 0,
y: 0,
width: 0,
height: 0
};
this.children.each(function(child) {
var rect = child.getClientRect();
if (minX === undefined) { // initial value for first child
@ -6739,12 +6745,15 @@ var Konva = {};
});
var selfRect = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
if (this.children.length !== 0) {
selfRect = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
}
if (!skipTransform) {
return this._transformedRect(selfRect);
}
@ -12996,7 +13005,7 @@ var Konva = {};
Konva.Collection.mapMethods(Konva.Text);
})();
(function() {
(function () {
/**
* Line constructor.  Lines are defined by an array of points and
* a tension
@ -13088,23 +13097,23 @@ var Konva = {};
* tension: 1
* });
*/
Konva.Line = function(config) {
Konva.Line = function (config) {
this.___init(config);
};
Konva.Line.prototype = {
___init: function(config) {
___init: function (config) {
// call super constructor
Konva.Shape.call(this, config);
this.className = 'Line';
this.on('pointsChange.konva tensionChange.konva closedChange.konva', function() {
this.on('pointsChange.konva tensionChange.konva closedChange.konva', function () {
this._clearCache('tensionPoints');
});
this.sceneFunc(this._sceneFunc);
},
_sceneFunc: function(context) {
_sceneFunc: function (context) {
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
@ -13119,7 +13128,7 @@ var Konva = {};
context.moveTo(points[0], points[1]);
// tension
if(tension !== 0 && length > 4) {
if (tension !== 0 && length > 4) {
tp = this.getTensionPoints();
len = tp.length;
n = closed ? 0 : 4;
@ -13128,7 +13137,7 @@ var Konva = {};
context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
}
while(n < len - 2) {
while (n < len - 2) {
context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
}
@ -13138,7 +13147,7 @@ var Konva = {};
}
// no tension
else {
for(n = 2; n < length; n += 2) {
for (n = 2; n < length; n += 2) {
context.lineTo(points[n], points[n + 1]);
}
}
@ -13153,18 +13162,17 @@ var Konva = {};
context.strokeShape(this);
}
},
getTensionPoints: function() {
getTensionPoints: function () {
return this._getCache('tensionPoints', this._getTensionPoints);
},
_getTensionPoints: function() {
_getTensionPoints: function () {
if (this.getClosed()) {
return this._getTensionPointsClosed();
}
else {
} else {
return Konva.Util._expandPoints(this.getPoints(), this.getTension());
}
},
_getTensionPointsClosed: function() {
_getTensionPointsClosed: function () {
var p = this.getPoints(),
len = p.length,
tension = this.getTension(),
@ -13208,14 +13216,14 @@ var Konva = {};
return tp;
},
getWidth: function() {
getWidth: function () {
return this.getSelfRect().width;
},
getHeight: function() {
getHeight: function () {
return this.getSelfRect().height;
},
// overload size detection
getSelfRect: function() {
getSelfRect: function () {
var points;
if (this.getTension() !== 0) {
points = this._getTensionPoints();
@ -13224,11 +13232,12 @@ var Konva = {};
}
var minX = points[0];
var maxX = points[0];
var minY = points[0];
var maxY = points[0];
var minY = points[1];
var maxY = points[1];
var x, y;
for (var i = 0; i < points.length / 2; i++) {
x = points[i * 2]; y = points[i * 2 + 1];
x = points[i * 2];
y = points[i * 2 + 1];
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);

9
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/Container.js
View File

@ -410,6 +410,12 @@
},
getClientRect: function(skipTransform) {
var minX, minY, maxX, maxY;
var selfRect = {
x: 0,
y: 0,
width: 0,
height: 0
};
this.children.each(function(child) {
var rect = child.getClientRect();
if (minX === undefined) { // initial value for first child
@ -426,12 +432,15 @@
});
var selfRect = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
if (this.children.length !== 0) {
selfRect = {
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
};
}
if (!skipTransform) {
return this._transformedRect(selfRect);
}

38
src/shapes/Line.js
View File

@ -1,4 +1,4 @@
(function() {
(function () {
/**
* Line constructor.&nbsp; Lines are defined by an array of points and
* a tension
@ -21,23 +21,23 @@
* tension: 1
* });
*/
Konva.Line = function(config) {
Konva.Line = function (config) {
this.___init(config);
};
Konva.Line.prototype = {
___init: function(config) {
___init: function (config) {
// call super constructor
Konva.Shape.call(this, config);
this.className = 'Line';
this.on('pointsChange.konva tensionChange.konva closedChange.konva', function() {
this.on('pointsChange.konva tensionChange.konva closedChange.konva', function () {
this._clearCache('tensionPoints');
});
this.sceneFunc(this._sceneFunc);
},
_sceneFunc: function(context) {
_sceneFunc: function (context) {
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
@ -52,7 +52,7 @@
context.moveTo(points[0], points[1]);
// tension
if(tension !== 0 && length > 4) {
if (tension !== 0 && length > 4) {
tp = this.getTensionPoints();
len = tp.length;
n = closed ? 0 : 4;
@ -61,7 +61,7 @@
context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
}
while(n < len - 2) {
while (n < len - 2) {
context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
}
@ -71,7 +71,7 @@
}
// no tension
else {
for(n = 2; n < length; n += 2) {
for (n = 2; n < length; n += 2) {
context.lineTo(points[n], points[n + 1]);
}
}
@ -86,18 +86,17 @@
context.strokeShape(this);
}
},
getTensionPoints: function() {
getTensionPoints: function () {
return this._getCache('tensionPoints', this._getTensionPoints);
},
_getTensionPoints: function() {
_getTensionPoints: function () {
if (this.getClosed()) {
return this._getTensionPointsClosed();
}
else {
} else {
return Konva.Util._expandPoints(this.getPoints(), this.getTension());
}
},
_getTensionPointsClosed: function() {
_getTensionPointsClosed: function () {
var p = this.getPoints(),
len = p.length,
tension = this.getTension(),
@ -141,14 +140,14 @@
return tp;
},
getWidth: function() {
getWidth: function () {
return this.getSelfRect().width;
},
getHeight: function() {
getHeight: function () {
return this.getSelfRect().height;
},
// overload size detection
getSelfRect: function() {
getSelfRect: function () {
var points;
if (this.getTension() !== 0) {
points = this._getTensionPoints();
@ -157,11 +156,12 @@
}
var minX = points[0];
var maxX = points[0];
var minY = points[0];
var maxY = points[0];
var minY = points[1];
var maxY = points[1];
var x, y;
for (var i = 0; i < points.length / 2; i++) {
x = points[i * 2]; y = points[i * 2 + 1];
x = points[i * 2];
y = points[i * 2 + 1];
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);

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

@ -1616,4 +1616,17 @@ suite('Container', function() {
layer.add(circle1, circle2, circle3);
assert.equal(layer.getChildren().length, 3, 'layer has exactly three children');
});
test('getClientRect - test empty case', 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.Group());
assert.deepEqual(group.getClientRect(), {x:10, y:10, width: 0, height:0});
});
});

111
test/unit/shapes/Line-test.js
View File

@ -1,6 +1,6 @@
suite('Line', function() {
suite('Line', function () {
// ======================================================
test('add line', function() {
test('add line', function () {
var stage = addStage();
var layer = new Konva.Layer();
@ -19,7 +19,7 @@ suite('Line', function() {
line.setPoints([1, 2, 3, 4]);
assert.equal(line.getPoints()[0], 1);
line.setPoints([5,6,7,8]);
line.setPoints([5, 6, 7, 8]);
assert.equal(line.getPoints()[0], 5);
line.setPoints([73, 160, 340, 23, 340, 80]);
@ -32,7 +32,7 @@ suite('Line', function() {
});
// ======================================================
test('test default ponts array for two lines', function() {
test('test default ponts array for two lines', function () {
var stage = addStage();
var layer = new Konva.Layer();
@ -53,8 +53,8 @@ suite('Line', function() {
draggable: true
});
line.setPoints([0,1,2,3]);
redLine.setPoints([4,5,6,7]);
line.setPoints([0, 1, 2, 3]);
redLine.setPoints([4, 5, 6, 7]);
layer.add(line).add(redLine);
stage.add(layer);
@ -65,7 +65,7 @@ suite('Line', function() {
});
// ======================================================
test('add dashed line', function() {
test('add dashed line', function () {
var stage = addStage();
var layer = new Konva.Layer();
@ -96,7 +96,10 @@ suite('Line', function() {
dash: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: {x:20, y:20}
shadowOffset: {
x: 20,
y: 20
}
//opacity: 0.2
});
@ -111,20 +114,23 @@ suite('Line', function() {
});
// ======================================================
test('add line with shadow', function() {
// ======================================================
test('add line with shadow', function () {
var stage = addStage();
var layer = new Konva.Layer();
var line = new Konva.Line({
points: [73,160,340,23],
points: [73, 160, 340, 23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 20,
shadowOffset: {x: 10, y: 10},
shadowOffset: {
x: 10,
y: 10
},
shadowOpacity: 0.5,
draggable: true
});
@ -160,15 +166,15 @@ suite('Line', function() {
});
test('line hit test with strokeScaleEnabled = false', function() {
test('line hit test with strokeScaleEnabled = false', function () {
var stage = addStage();
var scale = 0.1;
var layer = new Konva.Layer();
var group = new Konva.Group({
scale: {
x :scale,
y : scale
x: scale,
y: scale
}
});
@ -177,7 +183,7 @@ suite('Line', function() {
stroke: 'red',
strokeScaleEnabled: false,
strokeWidth: 10,
y : 0
y: 0
});
group.add(line1);
@ -185,7 +191,7 @@ suite('Line', function() {
points: [0, 0, 300, 0],
stroke: 'green',
strokeWidth: 40 / scale,
y : 60 / scale
y: 60 / scale
});
group.add(line2);
@ -194,19 +200,19 @@ suite('Line', function() {
showHit(layer);
var shape = layer.getIntersection({
x : 10,
y : 60
x: 10,
y: 60
});
assert.equal(shape, line2, 'second line detected');
shape = layer.getIntersection({
x : 10,
y : 4
x: 10,
y: 4
});
assert.equal(shape, line1, 'first line detected');
});
test('line get size', function() {
test('line get size', function () {
var stage = addStage();
var layer = new Konva.Layer();
@ -221,18 +227,18 @@ suite('Line', function() {
stage.add(layer);
assert.deepEqual(line.size(), {
width : 500 - 73,
height : 180 - 23
width: 500 - 73,
height: 180 - 23
});
});
test('getSelfRect', function() {
test('getSelfRect', function () {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x : 50,
y : 50,
points: [-25,50,250,-30,150,50,250,110],
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
@ -244,30 +250,59 @@ suite('Line', function() {
stage.add(layer);
assert.deepEqual(blob.getSelfRect(), {
x : -25,
y : -30,
width : 275,
height : 140
x: -25,
y: -30,
width: 275,
height: 140
});
});
test('line caching', function() {
test('getClientRect', function () {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.Line({
x: 0,
y: 0,
points: [-100, 0, +100, 0, +100, 100, -100, 100],
closed: true,
fill: '#0f0'
});
stage.position({
x: 150,
y: 50
});
layer.add(poly);
stage.add(layer);
var rect = layer.getClientRect();
assert.deepEqual(rect, {
x: -100,
y: 0,
width: 200,
height: 100
});
});
test('line caching', function () {
var stage = addStage();
var layer = new Konva.Layer();
var blob = new Konva.Line({
x : 50,
y : 50,
points: [-25,50,250,-30,150,50,250,110],
x: 50,
y: 50,
points: [-25, 50, 250, -30, 150, 50, 250, 110],
stroke: 'blue',
strokeWidth: 10,
draggable: true,
closed : true
closed: true
});
layer.add(blob);
var layer2 = layer.clone();
blob.cache({
offset : 30
offset: 30
});
stage.add(layer);
stage.add(layer2);