Fix correct rendering of Konva.Label when heigh of text is changed

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+* Fix correct rendering of `Konva.Label` when heigh of text is changed
+
 ## 7.2.0
 
 * New property `fillAfterStrokeEnabled` for `Konva.Shape`. See API docs for more information.

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.2.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Nov 23 2020
+   * Date: Wed Nov 25 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -11272,7 +11272,8 @@
       'padding',
       'lineHeight',
       'text',
-      'width'
+      'width',
+      'height',
   ], CHANGE_KONVA = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', DOWN = 'down', LEFT = 'left', 
   // cached variables
   attrChangeListLen = ATTR_CHANGE_LIST.length;
@@ -11411,11 +11412,11 @@
                   x: -1 * x,
                   y: -1 * y,
                   width: width,
-                  height: height
+                  height: height,
               });
               text.setAttrs({
                   x: -1 * x,
-                  y: -1 * y
+                  y: -1 * y,
               });
           }
       };
@@ -11510,7 +11511,7 @@
               x: x,
               y: y,
               width: width,
-              height: height
+              height: height,
           };
       };
       return Tag;

src/shapes/Label.ts

@@ -3,7 +3,10 @@ import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
 import { Group } from '../Group';
 import { ContainerConfig } from '../Container';
-import {getNumberOrArrayOfNumbersValidator, getNumberValidator} from '../Validators';
+import {
+  getNumberOrArrayOfNumbersValidator,
+  getNumberValidator,
+} from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
@@ -18,7 +21,8 @@ var ATTR_CHANGE_LIST = [
     'padding',
     'lineHeight',
     'text',
-    'width'
+    'width',
+    'height',
   ],
   CHANGE_KONVA = 'Change.konva',
   NONE = 'none',
@@ -70,7 +74,7 @@ var ATTR_CHANGE_LIST = [
 export class Label extends Group {
   constructor(config) {
     super(config);
-    this.on('add.konva', function(evt) {
+    this.on('add.konva', function (evt) {
       this._addListeners(evt.child);
       this._sync();
     });
@@ -99,7 +103,7 @@ export class Label extends Group {
   _addListeners(text) {
     var that = this,
       n;
-    var func = function() {
+    var func = function () {
       that._sync();
     };
 
@@ -157,12 +161,12 @@ export class Label extends Group {
         x: -1 * x,
         y: -1 * y,
         width: width,
-        height: height
+        height: height,
       });
 
       text.setAttrs({
         x: -1 * x,
-        y: -1 * y
+        y: -1 * y,
       });
     }
   }
@@ -195,11 +199,11 @@ export interface TagConfig extends ShapeConfig {
 export class Tag extends Shape<TagConfig> {
   _sceneFunc(context) {
     var width = this.width(),
-        height = this.height(),
+      height = this.height(),
-        pointerDirection = this.pointerDirection(),
+      pointerDirection = this.pointerDirection(),
-        pointerWidth = this.pointerWidth(),
+      pointerWidth = this.pointerWidth(),
-        pointerHeight = this.pointerHeight(),
+      pointerHeight = this.pointerHeight(),
-        cornerRadius = this.cornerRadius();
+      cornerRadius = this.cornerRadius();
 
     let topLeft = 0;
     let topRight = 0;
@@ -208,9 +212,9 @@ export class Tag extends Shape<TagConfig> {
 
     if (typeof cornerRadius === 'number') {
       topLeft = topRight = bottomLeft = bottomRight = Math.min(
-          cornerRadius,
+        cornerRadius,
-          width / 2,
+        width / 2,
-          height / 2
+        height / 2
       );
     } else {
       topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
@@ -230,12 +234,12 @@ export class Tag extends Shape<TagConfig> {
 
     context.lineTo(width - topRight, 0);
     context.arc(
-        width - topRight,
+      width - topRight,
-        topRight,
+      topRight,
-        topRight,
+      topRight,
-        (Math.PI * 3) / 2,
+      (Math.PI * 3) / 2,
-        0,
+      0,
-        false
+      false
     );
 
     if (pointerDirection === RIGHT) {
@@ -246,12 +250,12 @@ export class Tag extends Shape<TagConfig> {
 
     context.lineTo(width, height - bottomRight);
     context.arc(
-        width - bottomRight,
+      width - bottomRight,
-        height - bottomRight,
+      height - bottomRight,
-        bottomRight,
+      bottomRight,
-        0,
+      0,
-        Math.PI / 2,
+      Math.PI / 2,
-        false
+      false
     );
 
     if (pointerDirection === DOWN) {
@@ -262,12 +266,12 @@ export class Tag extends Shape<TagConfig> {
 
     context.lineTo(bottomLeft, height);
     context.arc(
-        bottomLeft,
+      bottomLeft,
-        height - bottomLeft,
+      height - bottomLeft,
-        bottomLeft,
+      bottomLeft,
-        Math.PI / 2,
+      Math.PI / 2,
-        Math.PI,
+      Math.PI,
-        false
+      false
     );
 
     if (pointerDirection === LEFT) {
@@ -277,13 +281,7 @@ export class Tag extends Shape<TagConfig> {
     }
 
     context.lineTo(0, topLeft);
-    context.arc(
+    context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
-        topLeft,
-        topLeft,
-        topLeft,
-        Math.PI,
-        (Math.PI * 3) / 2,
-        false);
 
     context.closePath();
     context.fillStrokeShape(this);
@@ -313,7 +311,7 @@ export class Tag extends Shape<TagConfig> {
       x: x,
       y: y,
       width: width,
-      height: height
+      height: height,
     };
   }
 
@@ -374,6 +372,11 @@ Factory.addGetterSetter(Tag, 'pointerHeight', 0, getNumberValidator());
  * tag.cornerRadius([0, 10, 20, 30]);
  */
 
-Factory.addGetterSetter(Tag, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
+Factory.addGetterSetter(
+  Tag,
+  'cornerRadius',
+  0,
+  getNumberOrArrayOfNumbersValidator(4)
+);
 
 Collection.mapMethods(Tag);

test/unit/shapes/Label-test.js

@@ -277,6 +277,9 @@ suite('Label', function () {
 
     layer.draw();
     assert.equal(tag.width(), text.width());
+
+    text.height(200);
+    assert.equal(tag.height(), text.height());
   });
 
   test('tag cornerRadius', function () {