text rendering fixes

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.1.3
+
+* Text rendering fixes
+
 ## 7.1.2
 
 * fix ellipses behavior for `Konva.Text`.

src/Node.ts

@@ -491,7 +491,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   abstract drawHit(canvas?: Canvas, top?: Node): void;
   /**
    * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
-   * The rectangle position is relative to parent container.
    * The purpose of the method is similar to getBoundingClientRect API of the DOM.
    * @method
    * @name Konva.Node#getClientRect

src/shapes/Text.ts

@@ -500,16 +500,16 @@ export class Text extends Shape<TextConfig> {
             ) {
               var lastLine = this.textArr[this.textArr.length - 1];
               if (lastLine) {
-                var haveSpace =
-                  this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
-                if (!haveSpace) {
-                  lastLine.text = lastLine.text.slice(
-                    0,
-                    lastLine.text.length - 3
-                  );
-                }
-
                 if (shouldAddEllipsis) {
+                  var haveSpace =
+                    this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
+                  if (!haveSpace) {
+                    lastLine.text = lastLine.text.slice(
+                      0,
+                      lastLine.text.length - 3
+                    );
+                  }
+
                   this.textArr.splice(this.textArr.length - 1, 1);
                   this._addTextLine(lastLine.text + ELLIPSIS);
                 }

test/unit/shapes/Text-test.js

@@ -498,6 +498,40 @@ suite('Text', function () {
     assert.equal(text.textArr[0].text, 'Hello foo');
   });
 
+  // ======================================================
+  test.only('wrap none check', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'Hello foo bar',
+      wrap: 'none',
+      ellipsis: false,
+      width: 60,
+      height: 20,
+    });
+
+    layer.add(
+      new Konva.Rect({
+        ...text.getClientRect(),
+        fill: 'rgba(0, 0, 0, 0.4)',
+      })
+    );
+
+    layer.add(text);
+    stage.add(layer);
+
+    assert.equal(text.textArr.length, 1);
+    assert.equal(text.textArr[0].text, 'Hello foo b');
+
+    var trace =
+      'fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(true), trace);
+  });
+
   // ======================================================
   test('text multi line with justify align', function () {
     var stage = addStage();