update CHANGELOG with new version

CHANGELOG.md

@@ -3,9 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-Not released:
+### 8.3.12 (2022-08-29)
 
--Allow reset component attributes via overloader
+- `ellipsis` fixes for `Konva.Text`
+- Allow reset component attributes via overloader
 
 ### 8.3.11 (2022-08-05)
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.3.11
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Aug 09 2022
+   * Date: Mon Aug 29 2022
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -1171,6 +1171,12 @@
   function getNumberArrayValidator() {
       if (Konva$2.isUnminified) {
           return function (val, attr) {
+              // Retrieve TypedArray constructor as found in MDN (if TypedArray is available)
+              // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#description
+              const TypedArray = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
+              if (TypedArray && val instanceof TypedArray) {
+                  return val;
+              }
               if (!Util._isArray(val)) {
                   Util.warn(_formatValue(val) +
                       ' is a not valid value for "' +
@@ -1209,6 +1215,10 @@
   function getComponentValidator(components) {
       if (Konva$2.isUnminified) {
           return function (val, attr) {
+              // ignore validation on undefined value, because it will reset to defalt
+              if (val === undefined || val === null) {
+                  return val;
+              }
               if (!Util.isObject(val)) {
                   Util.warn(_formatValue(val) +
                       ' is a not valid value for "' +
@@ -1283,6 +1293,11 @@
                   }
                   this._setAttr(attr + capitalize(key), val[key]);
               }
+              if (!val) {
+                  components.forEach((component) => {
+                      this._setAttr(attr + capitalize(component), undefined);
+                  });
+              }
               this._fireChangeEvent(attr, oldVal, val);
               if (after) {
                   after.call(this);
@@ -4090,33 +4105,33 @@
           });
       }
       /**
-        * Converts node into a blob.  Since the toBlob method is asynchronous,
+       * Converts node into a blob.  Since the toBlob method is asynchronous,
-        *  the resulting blob can only be retrieved from the config callback
+       *  the resulting blob can only be retrieved from the config callback
-        *  or the returned Promise.
+       *  or the returned Promise.
-        * @method
+       * @method
-        * @name Konva.Node#toBlob
+       * @name Konva.Node#toBlob
-        * @param {Object} config
+       * @param {Object} config
-        * @param {Function} [config.callback] function executed when the composite has completed
+       * @param {Function} [config.callback] function executed when the composite has completed
-        * @param {Number} [config.x] x position of canvas section
+       * @param {Number} [config.x] x position of canvas section
-        * @param {Number} [config.y] y position of canvas section
+       * @param {Number} [config.y] y position of canvas section
-        * @param {Number} [config.width] width of canvas section
+       * @param {Number} [config.width] width of canvas section
-        * @param {Number} [config.height] height of canvas section
+       * @param {Number} [config.height] height of canvas section
-        * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
+       * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
-        * You can use that property to increase quality of the image, for example for super hight quality exports
+       * You can use that property to increase quality of the image, for example for super hight quality exports
-        * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+       * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
-        * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
-        * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
+       * @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
-        * @example
+       * @example
-        * var blob = await node.toBlob({});
+       * var blob = await node.toBlob({});
-        * @returns {Promise<Blob>}
+       * @returns {Promise<Blob>}
-        */
+       */
       toBlob(config) {
           return new Promise((resolve, reject) => {
               try {
                   const callback = config === null || config === void 0 ? void 0 : config.callback;
                   if (callback)
                       delete config.callback;
-                  this.toCanvas(config).toBlob(blob => {
+                  this.toCanvas(config).toBlob((blob) => {
                       resolve(blob);
                       callback === null || callback === void 0 ? void 0 : callback(blob);
                   });
@@ -13626,7 +13641,7 @@
                   this._addTextLine(line);
                   currentHeightPx += lineHeightPx;
                   textWidth = Math.max(textWidth, lineWidth);
-                  if (this._shouldHandleEllipsis(currentHeightPx)) {
+                  if (this._shouldHandleEllipsis(currentHeightPx) && i < max - 1) {
                       this._tryToAddEllipsisToLastLine();
                   }
               }
@@ -14213,7 +14228,7 @@
                           pathCmd = undefined;
                       }
                   }
-                  if (pathCmd === {} || p0 === undefined) {
+                  if (Object.keys(pathCmd).length === 0 || p0 === undefined) {
                       return undefined;
                   }
                   var needNewSegment = false;
@@ -15577,9 +15592,14 @@
           return Node.prototype.toObject.call(this);
       }
       getClientRect() {
-          // return zero size
+          if (this.nodes().length > 0) {
-          // so it will be skipped in calculations
+              return super.getClientRect();
-          return { x: 0, y: 0, width: 0, height: 0 };
+          }
+          else {
+              // if we are detached return zero size
+              // so it will be skipped in calculations
+              return { x: 0, y: 0, width: 0, height: 0 };
+          }
       }
   }
   function validateAnchors(val) {

src/shapes/Text.ts

@@ -526,8 +526,7 @@ export class Text extends Shape<TextConfig> {
         this._addTextLine(line);
         currentHeightPx += lineHeightPx;
         textWidth = Math.max(textWidth, lineWidth);
-
+        if (this._shouldHandleEllipsis(currentHeightPx) && i < max - 1) {
-        if (this._shouldHandleEllipsis(currentHeightPx)) {
           this._tryToAddEllipsisToLastLine();
         }
       }

test/unit/Text-test.ts

@@ -12,7 +12,7 @@ import {
   assertAlmostEqual,
 } from './test-utils';
 
-describe('Text', function () {
+describe.only('Text', function () {
   // ======================================================
   it('text with empty config is allowed', function () {
     var stage = addStage();
@@ -454,6 +454,39 @@ describe('Text', function () {
     assert.equal(text.textArr[2].text.slice(-1), '…');
   });
 
+  // ======================================================
+  it('text single line with ellipsis when there is no need in them', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 10,
+      y: 10,
+      width: 380,
+      height: 300,
+      fill: 'red',
+    });
+
+    var text = new Konva.Text({
+      width: 497,
+      height: 49,
+      text: 'Body text',
+      fill: 'black',
+      fontSize: 40,
+      shadowColor: 'black',
+      shadowOpacity: 1,
+      lineHeight: 1.2,
+      letterSpacing: 0,
+      ellipsis: true,
+    });
+
+    layer.add(rect).add(text);
+    stage.add(layer);
+
+    assert.equal(text.textArr.length, 1);
+    assert.equal(text.textArr[0].text.slice(-1), 't');
+  });
+
   // ======================================================
   it('multiline with ellipsis', function () {
     var stage = addStage();