@dynatrace/strato-components 0.84.31 → 0.84.42

package/typography/utils.js

@@ -0,0 +1,119 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  _ELLIPSIS_APPROXIMATION_THRESHOLD: () => _ELLIPSIS_APPROXIMATION_THRESHOLD,
+  _ELLIPSIS_CHARACTER: () => _ELLIPSIS_CHARACTER,
+  _calculateEllipsisInfo: () => _calculateEllipsisInfo,
+  _centerEllipsizeText: () => _centerEllipsizeText,
+  _getTextHeight: () => _getTextHeight,
+  _getTextWidth: () => _getTextWidth
+});
+module.exports = __toCommonJS(utils_exports);
+const _ELLIPSIS_CHARACTER = "\u2026";
+const _ELLIPSIS_APPROXIMATION_THRESHOLD = 15;
+let inMemContext2d;
+function _getTextWidth(text, textFont) {
+  const context = getCanvasContext2d();
+  context.font = getFontString(textFont);
+  const textMetrics = context.measureText(text);
+  if (textMetrics.width < 0) {
+    return textMetrics.width;
+  }
+  const actualTextWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+  return Math.ceil(actualTextWidth);
+}
+function _getTextHeight(text, textFont) {
+  const context = getCanvasContext2d();
+  context.font = getFontString(textFont);
+  const textMetrics = context.measureText(text);
+  const actualTextHeight = Math.abs(textMetrics.actualBoundingBoxAscent) + Math.abs(textMetrics.actualBoundingBoxDescent);
+  return Math.ceil(actualTextHeight);
+}
+function _centerEllipsizeText(originalText, textFont, maxWidthInPx) {
+  const ellipsisInfo = _calculateEllipsisInfo(
+    originalText,
+    textFont,
+    maxWidthInPx
+  );
+  if (ellipsisInfo === null) {
+    return originalText;
+  }
+  const { ellipsisWidth, avgLetterWidth } = ellipsisInfo;
+  const availableTextWidth = maxWidthInPx - ellipsisWidth;
+  if (availableTextWidth <= ellipsisWidth) {
+    return _ELLIPSIS_CHARACTER;
+  }
+  const initialPrefixSuffixLength = Math.floor(availableTextWidth / avgLetterWidth / 2) + 1;
+  let prefix;
+  let suffix;
+  let ellipsizedText;
+  let approximatedTextWidth;
+  let attempt = 1;
+  let prefixLength = initialPrefixSuffixLength;
+  let suffixLength = initialPrefixSuffixLength;
+  do {
+    prefixLength -= attempt % 2 === 1 ? 1 : 0;
+    suffixLength -= attempt % 2 === 0 ? 1 : 0;
+    prefix = originalText.substring(0, prefixLength);
+    suffix = originalText.substring(originalText.length - suffixLength);
+    ellipsizedText = `${prefix}${_ELLIPSIS_CHARACTER}${suffix}`;
+    approximatedTextWidth = _getTextWidth(ellipsizedText, textFont);
+    attempt++;
+  } while (attempt <= _ELLIPSIS_APPROXIMATION_THRESHOLD && approximatedTextWidth >= maxWidthInPx);
+  return ellipsizedText;
+}
+function getFontString(textFont) {
+  const { fontStyle, fontWeight, fontSize, fontFamily } = textFont;
+  return [
+    fontStyle === "normal" ? "" : fontStyle,
+    fontWeight === "400" ? "" : fontWeight,
+    fontSize,
+    fontFamily
+  ].filter((value) => value !== void 0 && value !== "").map(
+    (value) => (
+      // we need to resolve CSS variables manually because they are not supported by the canvas API
+      value?.trim().startsWith("var(") ? value.replace(/^\s*var\(--[0-9A-Za-z-]+,\s*([^)]+)\)\s*$/, "$1") : value
+    )
+  ).join(" ");
+}
+function _calculateEllipsisInfo(originalText, textFont, maxWidthInPx) {
+  const originalTextLength = originalText.length;
+  if (originalTextLength <= 1) {
+    return null;
+  }
+  const textWidth = _getTextWidth(originalText, textFont);
+  const avgLetterWidth = textWidth / originalTextLength;
+  return textWidth > maxWidthInPx ? {
+    ellipsisWidth: _getTextWidth(_ELLIPSIS_CHARACTER, textFont),
+    avgLetterWidth
+  } : null;
+}
+function getCanvasContext2d() {
+  if (!inMemContext2d) {
+    const context = document.createElement("canvas").getContext("2d");
+    if (context !== null) {
+      context.imageSmoothingEnabled = false;
+      context.imageSmoothingQuality = "low";
+      inMemContext2d = context;
+    } else {
+      throw new Error("Failed to create a Canvas 2D context");
+    }
+  }
+  return inMemContext2d;
+}