@nasser-sw/fabric 7.0.0-beta1

package/debug/konva/src/shapes/Text.ts

@@ -0,0 +1,1065 @@
+import { Util } from '../Util.ts';
+import type { Context } from '../Context.ts';
+import { Factory } from '../Factory.ts';
+import type { ShapeConfig } from '../Shape.ts';
+import { Shape } from '../Shape.ts';
+import { Konva } from '../Global.ts';
+import {
+  getNumberValidator,
+  getStringValidator,
+  getNumberOrAutoValidator,
+  getBooleanValidator,
+} from '../Validators.ts';
+import { _registerNode } from '../Global.ts';
+
+import type { GetSet } from '../types.ts';
+
+export interface CharRenderProps {
+  char: string;
+  index: number;
+  x: number;
+  y: number;
+  lineIndex: number;
+  column: number;
+  isLastInLine: boolean;
+  width: number;
+  context: Context;
+}
+
+export function stringToArray(string: string): string[] {
+  // Use Unicode-aware splitting
+  return [...string].reduce((acc, char, index, array) => {
+    // Handle emoji with skin tone modifiers and ZWJ sequences
+    if (/\p{Emoji}/u.test(char)) {
+      // Check if next character is a modifier or ZWJ sequence
+      const nextChar = array[index + 1];
+      if (nextChar && /\p{Emoji_Modifier}|\u200D/u.test(nextChar)) {
+        // If we have a modifier, combine with current emoji
+        acc.push(char + nextChar);
+        // Skip the next character since we've used it
+        array[index + 1] = '';
+      } else {
+        // No modifier - treat as separate emoji
+        acc.push(char);
+      }
+    }
+    // Handle regional indicator symbols (flags)
+    else if (
+      /\p{Regional_Indicator}{2}/u.test(char + (array[index + 1] || ''))
+    ) {
+      acc.push(char + array[index + 1]);
+    }
+    // Handle Indic scripts and other combining characters
+    else if (index > 0 && /\p{Mn}|\p{Me}|\p{Mc}/u.test(char)) {
+      acc[acc.length - 1] += char;
+    }
+    // Handle other characters
+    else if (char) {
+      // Only push if not an empty string (skipped modifier)
+      acc.push(char);
+    }
+    return acc;
+  }, [] as string[]);
+}
+
+export interface TextConfig extends ShapeConfig {
+  direction?: string;
+  text?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: string;
+  fontVariant?: string;
+  textDecoration?: string;
+  align?: string;
+  verticalAlign?: string;
+  padding?: number;
+  lineHeight?: number;
+  letterSpacing?: number;
+  wrap?: string;
+  ellipsis?: boolean;
+}
+
+// constants
+const AUTO = 'auto',
+  //CANVAS = 'canvas',
+  CENTER = 'center',
+  INHERIT = 'inherit',
+  JUSTIFY = 'justify',
+  CHANGE_KONVA = 'Change.konva',
+  CONTEXT_2D = '2d',
+  DASH = '-',
+  LEFT = 'left',
+  TEXT = 'text',
+  TEXT_UPPER = 'Text',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  MIDDLE = 'middle',
+  NORMAL = 'normal',
+  PX_SPACE = 'px ',
+  SPACE = ' ',
+  RIGHT = 'right',
+  RTL = 'rtl',
+  WORD = 'word',
+  CHAR = 'char',
+  NONE = 'none',
+  ELLIPSIS = '…',
+  ATTR_CHANGE_LIST = [
+    'direction',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'padding',
+    'align',
+    'verticalAlign',
+    'lineHeight',
+    'text',
+    'width',
+    'height',
+    'wrap',
+    'ellipsis',
+    'letterSpacing',
+  ],
+  // cached variables
+  attrChangeListLen = ATTR_CHANGE_LIST.length;
+
+function normalizeFontFamily(fontFamily: string) {
+  return fontFamily
+    .split(',')
+    .map((family) => {
+      family = family.trim();
+      const hasSpace = family.indexOf(' ') >= 0;
+      const hasQuotes = family.indexOf('"') >= 0 || family.indexOf("'") >= 0;
+      if (hasSpace && !hasQuotes) {
+        family = `"${family}"`;
+      }
+      return family;
+    })
+    .join(', ');
+}
+
+let dummyContext: CanvasRenderingContext2D;
+function getDummyContext() {
+  if (dummyContext) {
+    return dummyContext;
+  }
+  dummyContext = Util.createCanvasElement().getContext(
+    CONTEXT_2D
+  ) as CanvasRenderingContext2D;
+  return dummyContext;
+}
+
+function _fillFunc(this: Text, context: Context) {
+  context.fillText(this._partialText, this._partialTextX, this._partialTextY);
+}
+function _strokeFunc(this: Text, context: Context) {
+  context.setAttr('miterLimit', 2);
+  context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
+}
+
+function checkDefaultFill(config?: TextConfig) {
+  config = config || {};
+
+  // set default color to black
+  if (
+    !config.fillLinearGradientColorStops &&
+    !config.fillRadialGradientColorStops &&
+    !config.fillPatternImage
+  ) {
+    config.fill = config.fill || 'black';
+  }
+  return config;
+}
+
+/**
+ * Text constructor
+ * @constructor
+ * @memberof Konva
+ * @augments Konva.Shape
+ * @param {Object} config
+ * @param {String} [config.direction] default is inherit
+ * @param {String} [config.fontFamily] default is Arial
+ * @param {Number} [config.fontSize] in pixels.  Default is 12
+ * @param {String} [config.fontStyle] can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
+ * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
+ * @param {String} [config.textDecoration] can be line-through, underline or empty string. Default is empty string.
+ * @param {String} config.text
+ * @param {String} [config.align] can be left, center, right or justify
+ * @param {String} [config.verticalAlign] can be top, middle or bottom
+ * @param {Number} [config.padding]
+ * @param {Number} [config.lineHeight] default is 1
+ * @param {String} [config.wrap] can be "word", "char", or "none". Default is word
+ * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * var text = new Konva.Text({
+ *   x: 10,
+ *   y: 15,
+ *   text: 'Simple Text',
+ *   fontSize: 30,
+ *   fontFamily: 'Calibri',
+ *   fill: 'green'
+ * });
+ */
+export class Text extends Shape<TextConfig> {
+  textArr: Array<{ text: string; width: number; lastInParagraph: boolean }>;
+  _partialText: string;
+  _partialTextX = 0;
+  _partialTextY = 0;
+
+  textWidth: number;
+  textHeight: number;
+  constructor(config?: TextConfig) {
+    super(checkDefaultFill(config));
+    // update text data for certain attr changes
+    for (let n = 0; n < attrChangeListLen; n++) {
+      this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);
+    }
+    this._setTextData();
+  }
+
+  _sceneFunc(context: Context) {
+    const textArr = this.textArr,
+      textArrLen = textArr.length;
+
+    if (!this.text()) {
+      return;
+    }
+
+    let padding = this.padding(),
+      fontSize = this.fontSize(),
+      lineHeightPx = this.lineHeight() * fontSize,
+      verticalAlign = this.verticalAlign(),
+      direction = this.direction(),
+      alignY = 0,
+      align = this.align(),
+      totalWidth = this.getWidth(),
+      letterSpacing = this.letterSpacing(),
+      charRenderFunc = this.charRenderFunc(),
+      fill = this.fill(),
+      textDecoration = this.textDecoration(),
+      shouldUnderline = textDecoration.indexOf('underline') !== -1,
+      shouldLineThrough = textDecoration.indexOf('line-through') !== -1,
+      n;
+
+    direction = direction === INHERIT ? context.direction : direction;
+
+    let translateY = lineHeightPx / 2;
+    let baseline = MIDDLE;
+    if (!Konva.legacyTextRendering) {
+      const metrics = this.measureSize('M'); // Use a sample character to get the ascent
+
+      baseline = 'alphabetic';
+      const ascent =
+        metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+      const descent =
+        metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+
+      translateY = (ascent - descent) / 2 + lineHeightPx / 2;
+    }
+
+    if (direction === RTL) {
+      context.setAttr('direction', direction);
+    }
+
+    context.setAttr('font', this._getContextFont());
+
+    context.setAttr('textBaseline', baseline);
+
+    context.setAttr('textAlign', LEFT);
+
+    // handle vertical alignment
+    if (verticalAlign === MIDDLE) {
+      alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;
+    } else if (verticalAlign === BOTTOM) {
+      alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
+    }
+
+    context.translate(padding, alignY + padding);
+
+    // draw text lines
+    for (n = 0; n < textArrLen; n++) {
+      let lineTranslateX = 0;
+      let lineTranslateY = 0;
+      const obj = textArr[n],
+        text = obj.text,
+        width = obj.width,
+        lastLine = obj.lastInParagraph;
+
+      // horizontal alignment
+      context.save();
+      if (align === RIGHT) {
+        lineTranslateX += totalWidth - width - padding * 2;
+      } else if (align === CENTER) {
+        lineTranslateX += (totalWidth - width - padding * 2) / 2;
+      }
+
+      if (shouldUnderline) {
+        context.save();
+        context.beginPath();
+
+        const yOffset = !Konva.legacyTextRendering
+          ? Math.round(fontSize / 4)
+          : Math.round(fontSize / 2);
+        const x = lineTranslateX;
+        const y = translateY + lineTranslateY + yOffset;
+        context.moveTo(x, y);
+        const lineWidth =
+          align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+        context.lineTo(x + Math.round(lineWidth), y);
+
+        // I have no idea what is real ratio
+        // just /15 looks good enough
+        context.lineWidth = fontSize / 15;
+
+        const gradient = this._getLinearGradient();
+        context.strokeStyle = gradient || fill;
+        context.stroke();
+        context.restore();
+      }
+      // draw line-through above the text content
+
+      // As `letterSpacing` isn't supported on Safari, we use this polyfill.
+      // The exception is for RTL text, which we rely on native as it cannot
+      // be supported otherwise.
+      if (
+        direction !== RTL &&
+        (letterSpacing !== 0 || align === JUSTIFY || charRenderFunc)
+      ) {
+        //   var words = text.split(' ');
+        const spacesNumber = text.split(' ').length - 1;
+        const array = stringToArray(text);
+        for (let li = 0; li < array.length; li++) {
+          const letter = array[li];
+          // skip justify for the last line
+          if (letter === ' ' && !lastLine && align === JUSTIFY) {
+            lineTranslateX += (totalWidth - padding * 2 - width) / spacesNumber;
+            // context.translate(
+            //   Math.floor((totalWidth - padding * 2 - width) / spacesNumber),
+            //   0
+            // );
+          }
+          this._partialTextX = lineTranslateX;
+          this._partialTextY = translateY + lineTranslateY;
+          this._partialText = letter;
+
+          if (charRenderFunc) {
+            context.save();
+            const previousLines = textArr.slice(0, n);
+            const previousGraphemes = previousLines.reduce(
+              (acc, line) => acc + stringToArray(line.text).length,
+              0
+            );
+            const charIndex = li + previousGraphemes;
+            charRenderFunc({
+              char: letter,
+              index: charIndex,
+              x: lineTranslateX,
+              y: translateY + lineTranslateY,
+              lineIndex: n,
+              column: li,
+              isLastInLine: lastLine,
+              width: this.measureSize(letter).width,
+              context,
+            });
+          }
+          context.fillStrokeShape(this);
+          if (charRenderFunc) {
+            context.restore();
+          }
+          lineTranslateX += this.measureSize(letter).width + letterSpacing;
+        }
+      } else {
+        if (letterSpacing !== 0) {
+          context.setAttr('letterSpacing', `${letterSpacing}px`);
+        }
+        this._partialTextX = lineTranslateX;
+        this._partialTextY = translateY + lineTranslateY;
+        this._partialText = text;
+
+        context.fillStrokeShape(this);
+      }
+      // draw line-through above the text content
+      if (shouldLineThrough) {
+        context.save();
+        context.beginPath();
+        const yOffset = !Konva.legacyTextRendering
+          ? -Math.round(fontSize / 4)
+          : 0;
+        context.moveTo(0, translateY + lineTranslateY + yOffset);
+        const lineWidth =
+          align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+        context.lineTo(
+          Math.round(lineWidth),
+          translateY + lineTranslateY + yOffset
+        );
+        context.lineWidth = fontSize / 15;
+        const gradient = this._getLinearGradient();
+        context.strokeStyle = gradient || fill;
+        context.stroke();
+        context.restore();
+      }
+      context.restore();
+      if (textArrLen > 1) {
+        translateY += lineHeightPx;
+      }
+    }
+  }
+  _hitFunc(context: Context) {
+    const width = this.getWidth(),
+      height = this.getHeight();
+
+    context.beginPath();
+    context.rect(0, 0, width, height);
+    context.closePath();
+    context.fillStrokeShape(this);
+  }
+  setText(text: string) {
+    const str = Util._isString(text)
+      ? text
+      : text === null || text === undefined
+        ? ''
+        : text + '';
+    this._setAttr(TEXT, str);
+    return this;
+  }
+  getWidth() {
+    const isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
+    return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
+  }
+  getHeight() {
+    const isAuto =
+      this.attrs.height === AUTO || this.attrs.height === undefined;
+    return isAuto
+      ? this.fontSize() * this.textArr.length * this.lineHeight() +
+          this.padding() * 2
+      : this.attrs.height;
+  }
+  /**
+   * get pure text width without padding
+   * @method
+   * @name Konva.Text#getTextWidth
+   * @returns {Number}
+   */
+  getTextWidth() {
+    return this.textWidth;
+  }
+  getTextHeight() {
+    Util.warn(
+      'text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height.'
+    );
+    return this.textHeight;
+  }
+
+  /**
+   * measure string with the font of current text shape.
+   * That method can't handle multiline text.
+   * @method
+   * @name Konva.Text#measureSize
+   * @param {String} text text to measure
+   * @returns {Object} { width , height } of measured text
+   */
+  measureSize(text: string) {
+    let _context = getDummyContext(),
+      fontSize = this.fontSize(),
+      metrics: TextMetrics;
+
+    _context.save();
+    _context.font = this._getContextFont();
+
+    metrics = _context.measureText(text);
+    _context.restore();
+
+    // Scale the fallback values based on the provided fontSize compared to the sample size (100 in your new case)
+    const scaleFactor = fontSize / 100;
+
+    // Note, fallback values are from chrome browser with 100px font size and font-family "Arial"
+    return {
+      actualBoundingBoxAscent:
+        metrics.actualBoundingBoxAscent ?? 71.58203125 * scaleFactor,
+      actualBoundingBoxDescent: metrics.actualBoundingBoxDescent ?? 0, // Remains zero as there is no descent in the provided metrics
+      actualBoundingBoxLeft:
+        metrics.actualBoundingBoxLeft ?? -7.421875 * scaleFactor,
+      actualBoundingBoxRight:
+        metrics.actualBoundingBoxRight ?? 75.732421875 * scaleFactor,
+      alphabeticBaseline: metrics.alphabeticBaseline ?? 0, // Remains zero as it's typically relative to the baseline itself
+      emHeightAscent: metrics.emHeightAscent ?? 100 * scaleFactor,
+      emHeightDescent: metrics.emHeightDescent ?? -20 * scaleFactor,
+      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent ?? 91 * scaleFactor,
+      fontBoundingBoxDescent:
+        metrics.fontBoundingBoxDescent ?? 21 * scaleFactor,
+      hangingBaseline:
+        metrics.hangingBaseline ?? 72.80000305175781 * scaleFactor,
+      ideographicBaseline: metrics.ideographicBaseline ?? -21 * scaleFactor,
+      width: metrics.width,
+      height: fontSize, // Typically set to the font size
+    };
+  }
+  _getContextFont() {
+    return (
+      this.fontStyle() +
+      SPACE +
+      this.fontVariant() +
+      SPACE +
+      (this.fontSize() + PX_SPACE) +
+      // wrap font family into " so font families with spaces works ok
+      normalizeFontFamily(this.fontFamily())
+    );
+  }
+  _addTextLine(line: string) {
+    const align = this.align();
+    if (align === JUSTIFY) {
+      line = line.trim();
+    }
+    const width = this._getTextWidth(line);
+    return this.textArr.push({
+      text: line,
+      width: width,
+      lastInParagraph: false,
+    });
+  }
+  _getTextWidth(text: string) {
+    const letterSpacing = this.letterSpacing();
+    const length = text.length;
+    // letterSpacing * length is the total letter spacing for the text
+    // previously we used letterSpacing * (length - 1) but it doesn't match DOM behavior
+    return getDummyContext().measureText(text).width + letterSpacing * length;
+  }
+  _setTextData() {
+    let lines = this.text().split('\n'),
+      fontSize = +this.fontSize(),
+      textWidth = 0,
+      lineHeightPx = this.lineHeight() * fontSize,
+      width = this.attrs.width,
+      height = this.attrs.height,
+      fixedWidth = width !== AUTO && width !== undefined,
+      fixedHeight = height !== AUTO && height !== undefined,
+      padding = this.padding(),
+      maxWidth = width - padding * 2,
+      maxHeightPx = height - padding * 2,
+      currentHeightPx = 0,
+      wrap = this.wrap(),
+      // align = this.align(),
+      shouldWrap = wrap !== NONE,
+      wrapAtWord = wrap !== CHAR && shouldWrap,
+      shouldAddEllipsis = this.ellipsis();
+
+    this.textArr = [];
+    getDummyContext().font = this._getContextFont();
+    const additionalWidth = shouldAddEllipsis
+      ? this._getTextWidth(ELLIPSIS)
+      : 0;
+    for (let i = 0, max = lines.length; i < max; ++i) {
+      let line = lines[i];
+
+      let lineWidth = this._getTextWidth(line);
+      if (fixedWidth && lineWidth > maxWidth) {
+        /*
+         * if width is fixed and line does not fit entirely
+         * break the line into multiple fitting lines
+         */
+        while (line.length > 0) {
+          /*
+           * use binary search to find the longest substring that
+           * that would fit in the specified width
+           */
+          let low = 0,
+            high = stringToArray(line).length, // Convert to array for proper emoji handling
+            match = '',
+            matchWidth = 0;
+          while (low < high) {
+            const mid = (low + high) >>> 1,
+              // Convert array indices to string
+              lineArray = stringToArray(line),
+              substr = lineArray.slice(0, mid + 1).join(''),
+              substrWidth = this._getTextWidth(substr);
+
+            // Only add ellipsis width when we need to consider truncation
+            // for the current line (when it might be the last visible line)
+            const shouldConsiderEllipsis =
+              shouldAddEllipsis &&
+              fixedHeight &&
+              currentHeightPx + lineHeightPx > maxHeightPx;
+
+            const effectiveWidth = shouldConsiderEllipsis
+              ? substrWidth + additionalWidth
+              : substrWidth;
+
+            if (effectiveWidth <= maxWidth) {
+              low = mid + 1;
+              match = substr;
+              matchWidth = substrWidth; // Store actual text width without ellipsis
+            } else {
+              high = mid;
+            }
+          }
+          /*
+           * 'low' is now the index of the substring end
+           * 'match' is the substring
+           * 'matchWidth' is the substring width in px
+           */
+          if (match) {
+            // a fitting substring was found
+            if (wrapAtWord) {
+              // try to find a space or dash where wrapping could be done
+              const lineArray = stringToArray(line);
+              const matchArray = stringToArray(match);
+              const nextChar = lineArray[matchArray.length];
+              const nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
+
+              let wrapIndex;
+              if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
+                wrapIndex = matchArray.length;
+              } else {
+                // Find last space or dash in the array
+                const lastSpaceIndex = matchArray.lastIndexOf(SPACE);
+                const lastDashIndex = matchArray.lastIndexOf(DASH);
+                wrapIndex = Math.max(lastSpaceIndex, lastDashIndex) + 1;
+              }
+
+              if (wrapIndex > 0) {
+                low = wrapIndex;
+                match = lineArray.slice(0, low).join('');
+                matchWidth = this._getTextWidth(match);
+              }
+            }
+            // if (align === 'right') {
+            match = match.trimRight();
+            // }
+            this._addTextLine(match);
+            textWidth = Math.max(textWidth, matchWidth);
+            currentHeightPx += lineHeightPx;
+
+            const shouldHandleEllipsis =
+              this._shouldHandleEllipsis(currentHeightPx);
+            if (shouldHandleEllipsis) {
+              this._tryToAddEllipsisToLastLine();
+              /*
+               * stop wrapping if wrapping is disabled or if adding
+               * one more line would overflow the fixed height
+               */
+              break;
+            }
+
+            // Convert remaining text using array operations
+            const lineArray = stringToArray(line);
+            line = lineArray.slice(low).join('').trimLeft();
+
+            if (line.length > 0) {
+              lineWidth = this._getTextWidth(line);
+              if (lineWidth <= maxWidth) {
+                this._addTextLine(line);
+                currentHeightPx += lineHeightPx;
+                textWidth = Math.max(textWidth, lineWidth);
+                break;
+              }
+            }
+          } else {
+            // not even one character could fit in the element, abort
+            break;
+          }
+        }
+      } else {
+        // element width is automatically adjusted to max line width
+        this._addTextLine(line);
+        currentHeightPx += lineHeightPx;
+        textWidth = Math.max(textWidth, lineWidth);
+        if (this._shouldHandleEllipsis(currentHeightPx) && i < max - 1) {
+          this._tryToAddEllipsisToLastLine();
+        }
+      }
+      // if element height is fixed, abort if adding one more line would overflow
+      if (this.textArr[this.textArr.length - 1]) {
+        this.textArr[this.textArr.length - 1].lastInParagraph = true;
+      }
+      if (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx) {
+        break;
+      }
+    }
+    this.textHeight = fontSize;
+    // var maxTextWidth = 0;
+    // for(var j = 0; j < this.textArr.length; j++) {
+    //     maxTextWidth = Math.max(maxTextWidth, this.textArr[j].width);
+    // }
+    this.textWidth = textWidth;
+  }
+
+  /**
+   * whether to handle ellipsis, there are two cases:
+   * 1. the current line is the last line
+   * 2. wrap is NONE
+   * @param {Number} currentHeightPx
+   * @returns {Boolean}
+   */
+  _shouldHandleEllipsis(currentHeightPx: number): boolean {
+    const fontSize = +this.fontSize(),
+      lineHeightPx = this.lineHeight() * fontSize,
+      height = this.attrs.height,
+      fixedHeight = height !== AUTO && height !== undefined,
+      padding = this.padding(),
+      maxHeightPx = height - padding * 2,
+      wrap = this.wrap(),
+      shouldWrap = wrap !== NONE;
+
+    return (
+      !shouldWrap ||
+      (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx)
+    );
+  }
+
+  _tryToAddEllipsisToLastLine(): void {
+    const width = this.attrs.width,
+      fixedWidth = width !== AUTO && width !== undefined,
+      padding = this.padding(),
+      maxWidth = width - padding * 2,
+      shouldAddEllipsis = this.ellipsis();
+
+    const lastLine = this.textArr[this.textArr.length - 1];
+    if (!lastLine || !shouldAddEllipsis) {
+      return;
+    }
+
+    if (fixedWidth) {
+      const 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);
+  }
+
+  // for text we can't disable stroke scaling
+  // if we do, the result will be unexpected
+  getStrokeScaleEnabled() {
+    return true;
+  }
+
+  _useBufferCanvas() {
+    const hasLine =
+      this.textDecoration().indexOf('underline') !== -1 ||
+      this.textDecoration().indexOf('line-through') !== -1;
+    const hasShadow = this.hasShadow();
+    if (hasLine && hasShadow) {
+      return true;
+    }
+    return super._useBufferCanvas();
+  }
+
+  direction: GetSet<string, this>;
+  fontFamily: GetSet<string, this>;
+  fontSize: GetSet<number, this>;
+  fontStyle: GetSet<string, this>;
+  fontVariant: GetSet<string, this>;
+  align: GetSet<string, this>;
+  letterSpacing: GetSet<number, this>;
+  verticalAlign: GetSet<string, this>;
+  padding: GetSet<number, this>;
+  lineHeight: GetSet<number, this>;
+  textDecoration: GetSet<string, this>;
+  text: GetSet<string, this>;
+  wrap: GetSet<string, this>;
+  ellipsis: GetSet<boolean, this>;
+  charRenderFunc: GetSet<null | ((props: CharRenderProps) => void), this>;
+}
+
+Text.prototype._fillFunc = _fillFunc;
+Text.prototype._strokeFunc = _strokeFunc;
+Text.prototype.className = TEXT_UPPER;
+Text.prototype._attrsAffectingSize = [
+  'text',
+  'fontSize',
+  'padding',
+  'wrap',
+  'lineHeight',
+  'letterSpacing',
+];
+_registerNode(Text);
+
+/**
+ * get/set width of text area, which includes padding.
+ * @name Konva.Text#width
+ * @method
+ * @param {Number} width
+ * @returns {Number}
+ * @example
+ * // get width
+ * var width = text.width();
+ *
+ * // set width
+ * text.width(20);
+ *
+ * // set to auto
+ * text.width('auto');
+ * text.width() // will return calculated width, and not "auto"
+ */
+Factory.overWriteSetter(Text, 'width', getNumberOrAutoValidator());
+
+/**
+ * get/set the height of the text area, which takes into account multi-line text, line heights, and padding.
+ * @name Konva.Text#height
+ * @method
+ * @param {Number} height
+ * @returns {Number}
+ * @example
+ * // get height
+ * var height = text.height();
+ *
+ * // set height
+ * text.height(20);
+ *
+ * // set to auto
+ * text.height('auto');
+ * text.height() // will return calculated height, and not "auto"
+ */
+
+Factory.overWriteSetter(Text, 'height', getNumberOrAutoValidator());
+
+/**
+ * get/set direction
+ * @name Konva.Text#direction
+ * @method
+ * @param {String} direction
+ * @returns {String}
+ * @example
+ * // get direction
+ * var direction = text.direction();
+ *
+ * // set direction
+ * text.direction('rtl');
+ */
+Factory.addGetterSetter(Text, 'direction', INHERIT);
+
+/**
+ * get/set font family
+ * @name Konva.Text#fontFamily
+ * @method
+ * @param {String} fontFamily
+ * @returns {String}
+ * @example
+ * // get font family
+ * var fontFamily = text.fontFamily();
+ *
+ * // set font family
+ * text.fontFamily('Arial');
+ */
+Factory.addGetterSetter(Text, 'fontFamily', 'Arial');
+
+/**
+ * get/set font size in pixels
+ * @name Konva.Text#fontSize
+ * @method
+ * @param {Number} fontSize
+ * @returns {Number}
+ * @example
+ * // get font size
+ * var fontSize = text.fontSize();
+ *
+ * // set font size to 22px
+ * text.fontSize(22);
+ */
+Factory.addGetterSetter(Text, 'fontSize', 12, getNumberValidator());
+
+/**
+ * get/set font style.  Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
+ * @name Konva.Text#fontStyle
+ * @method
+ * @param {String} fontStyle
+ * @returns {String}
+ * @example
+ * // get font style
+ * var fontStyle = text.fontStyle();
+ *
+ * // set font style
+ * text.fontStyle('bold');
+ */
+
+Factory.addGetterSetter(Text, 'fontStyle', NORMAL);
+
+/**
+ * get/set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+ * @name Konva.Text#fontVariant
+ * @method
+ * @param {String} fontVariant
+ * @returns {String}
+ * @example
+ * // get font variant
+ * var fontVariant = text.fontVariant();
+ *
+ * // set font variant
+ * text.fontVariant('small-caps');
+ */
+
+Factory.addGetterSetter(Text, 'fontVariant', NORMAL);
+
+/**
+ * get/set padding
+ * @name Konva.Text#padding
+ * @method
+ * @param {Number} padding
+ * @returns {Number}
+ * @example
+ * // get padding
+ * var padding = text.padding();
+ *
+ * // set padding to 10 pixels
+ * text.padding(10);
+ */
+
+Factory.addGetterSetter(Text, 'padding', 0, getNumberValidator());
+
+/**
+ * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
+ * @name Konva.Text#align
+ * @method
+ * @param {String} align
+ * @returns {String}
+ * @example
+ * // get text align
+ * var align = text.align();
+ *
+ * // center text
+ * text.align('center');
+ *
+ * // align text to right
+ * text.align('right');
+ *
+ * // justify text
+ */
+
+Factory.addGetterSetter(Text, 'align', LEFT);
+
+/**
+ * get/set vertical align of text.  Can be 'top', 'middle', 'bottom'.
+ * @name Konva.Text#verticalAlign
+ * @method
+ * @param {String} verticalAlign
+ * @returns {String}
+ * @example
+ * // get text vertical align
+ * var verticalAlign = text.verticalAlign();
+ *
+ * // center text
+ * text.verticalAlign('middle');
+ */
+
+Factory.addGetterSetter(Text, 'verticalAlign', TOP);
+
+/**
+ * get/set line height.  The default is 1.
+ * @name Konva.Text#lineHeight
+ * @method
+ * @param {Number} lineHeight
+ * @returns {Number}
+ * @example
+ * // get line height
+ * var lineHeight = text.lineHeight();
+ *
+ * // set the line height
+ * text.lineHeight(2);
+ */
+
+Factory.addGetterSetter(Text, 'lineHeight', 1, getNumberValidator());
+
+/**
+ * get/set wrap.  Can be "word", "char", or "none". Default is "word".
+ * In "word" wrapping any word still can be wrapped if it can't be placed in the required width
+ * without breaks.
+ * @name Konva.Text#wrap
+ * @method
+ * @param {String} wrap
+ * @returns {String}
+ * @example
+ * // get wrap
+ * var wrap = text.wrap();
+ *
+ * // set wrap
+ * text.wrap('word');
+ */
+
+Factory.addGetterSetter(Text, 'wrap', WORD);
+
+/**
+ * get/set ellipsis. Can be true or false. Default is false. If ellipses is true,
+ * Konva will add "..." at the end of the text if it doesn't have enough space to write characters.
+ * That is possible only when you limit both width and height of the text
+ * @name Konva.Text#ellipsis
+ * @method
+ * @param {Boolean} ellipsis
+ * @returns {Boolean}
+ * @example
+ * // get ellipsis param, returns true or false
+ * var ellipsis = text.ellipsis();
+ *
+ * // set ellipsis
+ * text.ellipsis(true);
+ */
+
+Factory.addGetterSetter(Text, 'ellipsis', false, getBooleanValidator());
+
+/**
+ * set letter spacing property. Default value is 0.
+ * @name Konva.Text#letterSpacing
+ * @method
+ * @param {Number} letterSpacing
+ */
+
+Factory.addGetterSetter(Text, 'letterSpacing', 0, getNumberValidator());
+
+/**
+ * get/set text
+ * @name Konva.Text#text
+ * @method
+ * @param {String} text
+ * @returns {String}
+ * @example
+ * // get text
+ * var text = text.text();
+ *
+ * // set text
+ * text.text('Hello world!');
+ */
+
+Factory.addGetterSetter(Text, 'text', '', getStringValidator());
+
+/**
+ * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
+ * @name Konva.Text#textDecoration
+ * @method
+ * @param {String} textDecoration
+ * @returns {String}
+ * @example
+ * // get text decoration
+ * var textDecoration = text.textDecoration();
+ *
+ * // underline text
+ * text.textDecoration('underline');
+ *
+ * // strike text
+ * text.textDecoration('line-through');
+ *
+ * // underline and strike text
+ * text.textDecoration('underline line-through');
+ */
+
+Factory.addGetterSetter(Text, 'textDecoration', '');
+
+/**
+ * get/set per-character render hook. The callback is invoked for each grapheme before drawing.
+ * It can mutate the provided context (e.g. translate, rotate, change styles) and should return void.
+ * Note: per-character rendering may disable native kerning/ligatures.
+ * @name Konva.Text#charRenderFunc
+ * @method
+ * @param {(props: {char: string, index: number, x: number, y: number, lineIndex: number, column: number, isLastInLine: boolean, width: number, context: Konva.Context}) => void} charRenderFunc
+ * @returns {(props: CharRenderProps) => void}
+ * @example
+ * // apply small x-translation to every second character
+ * text.charRenderFunc(function(props) {
+ *   if (props.index % 2 === 1) {
+ *     props.context.translate(2, 0);
+ *   }
+ * });
+ */
+Factory.addGetterSetter(Text, 'charRenderFunc', undefined);