@elastic/eui/lib/services/canvas/canvas_text_utils.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CanvasTextUtils = void 0;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
/**
 * Creates a temporary Canvas element for manipulating text & determining text width.
 *
 * To accurately measure text, canvas rendering requires either a container to
 * compute/derive font styles from, or a static font string (useful for usage
 * outside the DOM). Particular care should be applied when fallback fonts are
 * used, as more fallback fonts can lead to less precision.
 *
 * Please note that while canvas is more significantly more performant than DOM
 * measurement, there are subpixel to single digit pixel differences between
 * DOM and canvas measurement due to the different rendering engines used.
 */
var CanvasTextUtils = exports.CanvasTextUtils = /*#__PURE__*/function () {
  function CanvasTextUtils(_ref) {
    var _this = this;
    var font = _ref.font,
      container = _ref.container;
    _classCallCheck(this, CanvasTextUtils);
    _defineProperty(this, "context", void 0);
    _defineProperty(this, "currentText", '');
    _defineProperty(this, "computeFontFromElement", function (element) {
      var computedStyles = window.getComputedStyle(element);
      // TODO: font-stretch is not included even though it potentially should be
      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
      // It appears to be unsupported and/or breaks font computation in canvas
      return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
        return computedStyles.getPropertyValue(prop);
      }).join(' ').trim();
    });
    _defineProperty(this, "setTextToCheck", function (text) {
      _this.currentText = text;
    });
    this.context = document.createElement('canvas').getContext('2d');

    // Set the canvas font to ensure text width calculations are correct
    if (font) {
      this.context.font = font;
    } else if (container) {
      this.context.font = this.computeFontFromElement(container);
    }
  }
  return _createClass(CanvasTextUtils, [{
    key: "textWidth",
    get: function get() {
      return this.context.measureText(this.currentText).width;
    }
  }]);
}();