diff --git a/CHANGELOG.md b/CHANGELOG.md index be4a8f89..348b5313 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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. + ### Changed - Dragging now works much better. If your pointer is out of stage content dragging will still continue. diff --git a/src/shapes/Line.js b/src/shapes/Line.js index 52bf8464..766ef074 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -1,4 +1,4 @@ -(function() { +(function () { /** * Line constructor.  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); @@ -236,4 +236,4 @@ */ Konva.Collection.mapMethods(Konva.Line); -})(); +})(); \ No newline at end of file diff --git a/test/unit/shapes/Line-test.js b/test/unit/shapes/Line-test.js index fc278375..3ac01bde 100644 --- a/test/unit/shapes/Line-test.js +++ b/test/unit/shapes/Line-test.js @@ -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,12 +19,12 @@ 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]); assert.equal(line.getPoints()[0], 73); - + assert.equal(line.getClassName(), 'Line'); layer.draw(); @@ -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,19 +53,19 @@ 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); assert.equal(line.getPoints()[0], 0); assert.equal(redLine.getPoints()[0], 4); - + }); // ====================================================== - 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);