@elastic/eui
Version:
Elastic UI Component Library
63 lines (61 loc) • 3.89 kB
JavaScript
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.
*/
export var 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;
}
}]);
}();