@antv/g/es/services/TextService.js

import { __decorate, __metadata, __read, __spreadArray } from "tslib";
import { singleton, inject } from 'mana-syringe';
import { toFontString } from '../utils';
import { Rectangle } from '../shapes';
import { OffscreenCanvasCreator } from './OffscreenCanvasCreator';
var TEXT_METRICS = {
  MetricsString: '|ÉqÅ',
  BaselineSymbol: 'M',
  BaselineMultiplier: 1.4,
  HeightMultiplier: 2,
  Newlines: [0x000a, 0x000d // carriage return
  ],
  BreakingSpaces: [0x0009, 0x0020, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2008, 0x2009, 0x200a, 0x205f, 0x3000 // ideographic space
  ]
};
var LATIN_REGEX = /[a-zA-Z0-9\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff!"#$%&'()*+,-./:;]/; // Line breaking rules in CJK (Kinsoku Shori)
// Refer from https://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages

var regexCannotStartZhCn = /[!%),.:;?\]}¢°·'""†‡›℃∶、。〃〆〕〗〞﹚﹜！＂％＇），．：；？！］｝～]/;
var regexCannotEndZhCn = /[$(£¥·'"〈《「『【〔〖〝﹙﹛＄（．［｛￡￥]/;
var regexCannotStartZhTw = /[!),.:;?\]}¢·–—'"•"、。〆〞〕〉》」︰︱︲︳﹐﹑﹒﹓﹔﹕﹖﹘﹚﹜！），．：；？︶︸︺︼︾﹀﹂﹗］｜｝､]/;
var regexCannotEndZhTw = /[([{£¥'"‵〈《「『〔〝︴﹙﹛（｛︵︷︹︻︽︿﹁﹃﹏]/;
var regexCannotStartJaJp = /[)\]｝〕〉》」』】〙〗〟'"｠»ヽヾーァィゥェォッャュョヮヵヶぁぃぅぇぉっゃゅょゎゕゖㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ々〻‐゠–〜?!‼⁇⁈⁉・、:;,。.]/;
var regexCannotEndJaJp = /[([｛〔〈《「『【〘〖〝'"｟«—...‥〳〴〵]/;
var regexCannotStartKoKr = /[!%),.:;?\]}¢°'"†‡℃〆〈《「『〕！％），．：；？］｝]/;
var regexCannotEndKoKr = /[$([{£¥'"々〇〉》」〔＄（［｛｠￥￦#]/;
var regexCannotStart = new RegExp("".concat(regexCannotStartZhCn.source, "|").concat(regexCannotStartZhTw.source, "|").concat(regexCannotStartJaJp.source, "|").concat(regexCannotStartKoKr.source));
var regexCannotEnd = new RegExp("".concat(regexCannotEndZhCn.source, "|").concat(regexCannotEndZhTw.source, "|").concat(regexCannotEndJaJp.source, "|").concat(regexCannotEndKoKr.source));

var TextService =
/** @class */
function () {
  function TextService() {
    var _this = this;

    this.cache = {};

    this.shouldBreakByKinsokuShorui = function (char, nextChar) {
      if (_this.isBreakingSpace(nextChar)) return false;

      if (char) {
        // Line breaking rules in CJK (Kinsoku Shori)
        if (regexCannotEnd.exec(nextChar) || regexCannotStart.exec(char)) {
          return true;
        }
      }

      return false;
    };

    this.trimByKinsokuShorui = function (prev) {
      var next = __spreadArray([], __read(prev), false);

      var prevLine = next[next.length - 2];

      if (!prevLine) {
        return prev;
      }

      var lastChar = prevLine[prevLine.length - 1];
      next[next.length - 2] = prevLine.slice(0, -1);
      next[next.length - 1] = lastChar + next[next.length - 1];
      return next;
    };
  }

  TextService.prototype.measureFont = function (font, offscreenCanvas) {
    // as this method is used for preparing assets, don't recalculate things if we don't need to
    if (this.cache[font]) {
      return this.cache[font];
    }

    var properties = {
      ascent: 0,
      descent: 0,
      fontSize: 0
    };
    var canvas = this.offscreenCanvas.getOrCreateCanvas(offscreenCanvas);
    var context = this.offscreenCanvas.getOrCreateContext(offscreenCanvas);
    context.font = font;
    var metricsString = TEXT_METRICS.MetricsString + TEXT_METRICS.BaselineSymbol;
    var width = Math.ceil(context.measureText(metricsString).width);
    var baseline = Math.ceil(context.measureText(TEXT_METRICS.BaselineSymbol).width);
    var height = TEXT_METRICS.HeightMultiplier * baseline;
    baseline = baseline * TEXT_METRICS.BaselineMultiplier | 0; // @ts-ignore

    canvas.width = width; // @ts-ignore

    canvas.height = height;
    context.fillStyle = '#f00';
    context.fillRect(0, 0, width, height);
    context.font = font;
    context.textBaseline = 'alphabetic';
    context.fillStyle = '#000';
    context.fillText(metricsString, 0, baseline);
    var imagedata = context.getImageData(0, 0, width || 1, height || 1).data;
    var pixels = imagedata.length;
    var line = width * 4;
    var i = 0;
    var idx = 0;
    var stop = false; // ascent. scan from top to bottom until we find a non red pixel

    for (i = 0; i < baseline; ++i) {
      for (var j = 0; j < line; j += 4) {
        if (imagedata[idx + j] !== 255) {
          stop = true;
          break;
        }
      }

      if (!stop) {
        idx += line;
      } else {
        break;
      }
    }

    properties.ascent = baseline - i;
    idx = pixels - line;
    stop = false; // descent. scan from bottom to top until we find a non red pixel

    for (i = height; i > baseline; --i) {
      for (var j = 0; j < line; j += 4) {
        if (imagedata[idx + j] !== 255) {
          stop = true;
          break;
        }
      }

      if (!stop) {
        idx -= line;
      } else {
        break;
      }
    }

    properties.descent = i - baseline;
    properties.fontSize = properties.ascent + properties.descent;
    this.cache[font] = properties;
    return properties;
  };

  TextService.prototype.measureText = function (text, parsedStyle, offscreenCanvas) {
    var fontSize = parsedStyle.fontSize,
        wordWrap = parsedStyle.wordWrap,
        _a = parsedStyle.lineHeight,
        strokeHeight = _a === void 0 ? 0 : _a,
        lineWidth = parsedStyle.lineWidth,
        textBaseline = parsedStyle.textBaseline,
        textAlign = parsedStyle.textAlign,
        _b = parsedStyle.letterSpacing,
        letterSpacing = _b === void 0 ? 0 : _b,
        // dropShadow = 0,
    // dropShadowDistance = 0,
    _c = parsedStyle.leading,
        // dropShadow = 0,
    // dropShadowDistance = 0,
    leading = _c === void 0 ? 0 : _c;
    var font = toFontString(parsedStyle);
    var fontProperties = this.measureFont(font, offscreenCanvas); // fallback in case UA disallow canvas data extraction
    // (toDataURI, getImageData functions)

    if (fontProperties.fontSize === 0) {
      fontProperties.fontSize = fontSize.value;
      fontProperties.ascent = fontSize.value;
    }

    var context = this.offscreenCanvas.getOrCreateContext(offscreenCanvas);
    context.font = font;
    var outputText = wordWrap ? this.wordWrap(text, parsedStyle, offscreenCanvas) : text;
    var lines = outputText.split(/(?:\r\n|\r|\n)/);
    var lineWidths = new Array(lines.length);
    var maxLineWidth = 0;

    for (var i = 0; i < lines.length; i++) {
      var lineWidth_1 = context.measureText(lines[i]).width + (lines[i].length - 1) * letterSpacing;
      lineWidths[i] = lineWidth_1;
      maxLineWidth = Math.max(maxLineWidth, lineWidth_1);
    }

    var width = maxLineWidth + lineWidth.value; // if (dropShadow) {
    //   width += dropShadowDistance;
    // }

    var lineHeight = strokeHeight || fontProperties.fontSize + lineWidth.value;
    var height = Math.max(lineHeight, fontProperties.fontSize + lineWidth.value) + (lines.length - 1) * (lineHeight + leading); // if (dropShadow) {
    //   height += dropShadowDistance;
    // }

    lineHeight += leading; // handle vertical text baseline

    var offsetY = 0;

    if (textBaseline.value === 'middle') {
      offsetY = -height / 2;
    } else if (textBaseline.value === 'bottom' || textBaseline.value === 'alphabetic' || textBaseline.value === 'ideographic') {
      offsetY = -height;
    } else if (textBaseline.value === 'top' || textBaseline.value === 'hanging') {
      offsetY = 0;
    }

    return {
      font: font,
      width: width,
      height: height,
      lines: lines,
      lineWidths: lineWidths,
      lineHeight: lineHeight,
      maxLineWidth: maxLineWidth,
      fontProperties: fontProperties,
      lineMetrics: lineWidths.map(function (width, i) {
        var offsetX = 0; // handle horizontal text align

        if (textAlign.value === 'center') {
          offsetX -= width / 2;
        } else if (textAlign.value === 'right' || textAlign.value === 'end') {
          offsetX -= width;
        }

        return new Rectangle(offsetX - lineWidth.value / 2, offsetY + i * lineHeight, width + lineWidth.value, lineHeight);
      })
    };
  };

  TextService.prototype.wordWrap = function (text, _a, offscreenCanvas) {
    var _this = this;

    var _b = _a.wordWrapWidth,
        wordWrapWidth = _b === void 0 ? 0 : _b,
        _c = _a.letterSpacing,
        letterSpacing = _c === void 0 ? 0 : _c;
    var context = this.offscreenCanvas.getOrCreateContext(offscreenCanvas);
    var maxWidth = wordWrapWidth + letterSpacing;
    var lines = [];
    var currentIndex = 0;
    var currentWidth = 0;
    var cache = {};

    var calcWidth = function calcWidth(char) {
      return _this.getFromCache(char, letterSpacing, cache, context);
    };

    Array.from(text).forEach(function (char, i) {
      var prevChar = text[i - 1];
      var nextChar = text[i + 1];
      var width = calcWidth(char);

      if (_this.isNewline(char)) {
        currentIndex++;
        currentWidth = 0;
        lines[currentIndex] = '';
        return;
      }

      if (currentWidth > 0 && currentWidth + width > maxWidth) {
        currentIndex++;
        currentWidth = 0;
        lines[currentIndex] = '';

        if (_this.isBreakingSpace(char)) {
          return;
        }

        if (!_this.canBreakInLastChar(char)) {
          lines = _this.trimToBreakable(lines);
          currentWidth = _this.sumTextWidthByCache(lines[currentIndex] || '', cache);
        }

        if (_this.shouldBreakByKinsokuShorui(char, nextChar)) {
          lines = _this.trimByKinsokuShorui(lines);
          currentWidth += calcWidth(prevChar || '');
        }
      }

      currentWidth += width;
      lines[currentIndex] = (lines[currentIndex] || '') + char;
    });
    return lines.join('\n');
  };

  TextService.prototype.isBreakingSpace = function (char) {
    if (typeof char !== 'string') {
      return false;
    }

    return TEXT_METRICS.BreakingSpaces.indexOf(char.charCodeAt(0)) >= 0;
  };

  TextService.prototype.isNewline = function (char) {
    if (typeof char !== 'string') {
      return false;
    }

    return TEXT_METRICS.Newlines.indexOf(char.charCodeAt(0)) >= 0;
  };

  TextService.prototype.trimToBreakable = function (prev) {
    var next = __spreadArray([], __read(prev), false);

    var prevLine = next[next.length - 2];
    var index = this.findBreakableIndex(prevLine);
    if (index === -1 || !prevLine) return next;
    var trimmedChar = prevLine.slice(index, index + 1);
    var isTrimmedWithSpace = this.isBreakingSpace(trimmedChar);
    var trimFrom = index + 1;
    var trimTo = index + (isTrimmedWithSpace ? 0 : 1);
    next[next.length - 1] += prevLine.slice(trimFrom, prevLine.length);
    next[next.length - 2] = prevLine.slice(0, trimTo);
    return next;
  };

  TextService.prototype.canBreakInLastChar = function (char) {
    if (char && LATIN_REGEX.test(char)) return false;
    return true;
  };

  TextService.prototype.sumTextWidthByCache = function (text, cache) {
    return text.split('').reduce(function (sum, c) {
      if (!cache[c]) throw Error('cannot count the word without cache');
      return sum + cache[c];
    }, 0);
  };

  TextService.prototype.findBreakableIndex = function (line) {
    for (var i = line.length - 1; i >= 0; i--) {
      if (!LATIN_REGEX.test(line[i])) return i;
    }

    return -1;
  };

  TextService.prototype.getFromCache = function (key, letterSpacing, cache, context) {
    var width = cache[key];

    if (typeof width !== 'number') {
      var spacing = key.length * letterSpacing;
      width = context.measureText(key).width + spacing;
      cache[key] = width;
    }

    return width;
  };

  __decorate([inject(OffscreenCanvasCreator), __metadata("design:type", OffscreenCanvasCreator)], TextService.prototype, "offscreenCanvas", void 0);

  TextService = __decorate([singleton()], TextService);
  return TextService;
}();

export { TextService };