Konva.Text will interpret undefined width and height as AUTO

This commit is contained in:
Anton Lavrenov
2016-07-08 10:44:15 +07:00
parent d466c01deb
commit 885a390277
3 changed files with 38 additions and 12 deletions

View File

@@ -4,6 +4,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released] ## [Not released][Not released]
## [1.0.2][2016-07-08]
## Changed
- `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
## [1.0.1][2016-07-05] ## [1.0.1][2016-07-05]
### Changed ### Changed

View File

@@ -39,8 +39,6 @@
* @param {String} config.text * @param {String} config.text
* @param {String} [config.align] can be left, center, or right * @param {String} [config.align] can be left, center, or right
* @param {Number} [config.padding] * @param {Number} [config.padding]
* @param {Number} [config.width] default is auto
* @param {Number} [config.height] default is auto
* @param {Number} [config.lineHeight] default is 1 * @param {Number} [config.lineHeight] default is 1
* @param {String} [config.wrap] can be word, char, or none. Default is word * @param {String} [config.wrap] can be word, char, or none. Default is word
* @@shapeParams * @@shapeParams
@@ -73,13 +71,13 @@
if (!config.fillLinearGradientColorStops && !config.fillRadialGradientColorStops) { if (!config.fillLinearGradientColorStops && !config.fillRadialGradientColorStops) {
config.fill = config.fill || 'black'; config.fill = config.fill || 'black';
} }
//
if (config.width === undefined) { // if (config.width === undefined) {
config.width = AUTO; // config.width = AUTO;
} // }
if (config.height === undefined) { // if (config.height === undefined) {
config.height = AUTO; // config.height = AUTO;
} // }
// call super constructor // call super constructor
Konva.Shape.call(this, config); Konva.Shape.call(this, config);
@@ -163,7 +161,8 @@
* @returns {Number} * @returns {Number}
*/ */
getWidth: function() { getWidth: function() {
return this.attrs.width === AUTO ? this.getTextWidth() + this.getPadding() * 2 : this.attrs.width; var isAuto = (this.attrs.width === AUTO) || (this.attrs.width === undefined);
return isAuto ? this.getTextWidth() + this.getPadding() * 2 : this.attrs.width;
}, },
/** /**
* get the height of the text area, which takes into account multi-line text, line heights, and padding * get the height of the text area, which takes into account multi-line text, line heights, and padding
@@ -172,7 +171,8 @@
* @returns {Number} * @returns {Number}
*/ */
getHeight: function() { getHeight: function() {
return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.getLineHeight()) + this.getPadding() * 2 : this.attrs.height; var isAuto = (this.attrs.height === AUTO) || (this.attrs.height === undefined);
return isAuto ? (this.getTextHeight() * this.textArr.length * this.getLineHeight()) + this.getPadding() * 2 : this.attrs.height;
}, },
/** /**
* get text width * get text width

View File

@@ -168,6 +168,26 @@ suite('Text', function(){
}); });
// ======================================================
test('reset text auto width', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
text: 'Hello World!',
fontSize: 50,
draggable: true,
width: 10
});
assert.equal(text.width(), 10);
text.setAttr('width', undefined);
assert.equal(text.width() > 100, true);
layer.add(text);
stage.add(layer);
});
// ====================================================== // ======================================================
test('text multi line', function() { test('text multi line', function() {
var stage = addStage(); var stage = addStage();