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,
       });
     }
   }
@@ -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 () {