text-to-canvas 1.0.0

package/dist/text-to-canvas.cjs

@@ -0,0 +1,569 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_FONT_FAMILY = "Arial";
+const DEFAULT_FONT_SIZE = 14;
+const DEFAULT_FONT_COLOR = "black";
+const getTextFormat = (format, baseFormat) => {
+  return Object.assign(
+    {},
+    {
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fontSize: DEFAULT_FONT_SIZE,
+      fontWeight: "400",
+      fontStyle: "",
+      fontVariant: "",
+      fontColor: DEFAULT_FONT_COLOR
+    },
+    baseFormat,
+    format
+  );
+};
+const getTextStyle = ({
+  fontFamily,
+  fontSize,
+  fontStyle,
+  fontVariant,
+  fontWeight
+}) => {
+  return `${fontStyle || ""} ${fontVariant || ""} ${fontWeight || ""} ${fontSize ?? DEFAULT_FONT_SIZE}px ${fontFamily || DEFAULT_FONT_FAMILY}`.trim();
+};
+const isWhitespace = (text) => {
+  return !!text.match(/^\s+$/);
+};
+const _extractWords = (line) => {
+  return line.filter((word) => !isWhitespace(word.text));
+};
+const _cloneWord = (word) => {
+  const clone = { ...word };
+  if (word.format) {
+    clone.format = { ...word.format };
+  }
+  return clone;
+};
+const _joinWords = (words, joiner) => {
+  if (words.length <= 1 || joiner.length < 1) {
+    return [...words];
+  }
+  const phrase = [];
+  words.forEach((word, wordIdx) => {
+    phrase.push(word);
+    if (wordIdx < words.length - 1) {
+      joiner.forEach((jw) => phrase.push(_cloneWord(jw)));
+    }
+  });
+  return phrase;
+};
+const justifyLine = ({
+  line,
+  spaceWidth,
+  spaceChar,
+  boxWidth
+}) => {
+  const words = _extractWords(line);
+  if (words.length <= 1) {
+    return line.concat();
+  }
+  const wordsWidth = words.reduce(
+    (width, word) => width + (word.metrics?.width ?? 0),
+    0
+  );
+  const noOfSpacesToInsert = (boxWidth - wordsWidth) / spaceWidth;
+  if (words.length > 2) {
+    const spacesPerWord = Math.ceil(noOfSpacesToInsert / (words.length - 1));
+    const spaces2 = Array.from({ length: spacesPerWord }, () => ({
+      text: spaceChar
+    }));
+    const firstWords = words.slice(0, words.length - 1);
+    const firstPart = _joinWords(firstWords, spaces2);
+    const remainingSpaces = spaces2.slice(
+      0,
+      Math.floor(noOfSpacesToInsert) - (firstWords.length - 1) * spaces2.length
+    );
+    const lastWord = words[words.length - 1];
+    return [...firstPart, ...remainingSpaces, lastWord];
+  }
+  const spaces = Array.from(
+    { length: Math.floor(noOfSpacesToInsert) },
+    () => ({ text: spaceChar })
+  );
+  return _joinWords(words, spaces);
+};
+const trimLine = (line, side = "both") => {
+  let leftTrim = 0;
+  if (side === "left" || side === "both") {
+    for (; leftTrim < line.length; leftTrim++) {
+      if (!isWhitespace(line[leftTrim].text)) {
+        break;
+      }
+    }
+    if (leftTrim >= line.length) {
+      return {
+        trimmedLeft: line.concat(),
+        trimmedRight: [],
+        trimmedLine: []
+      };
+    }
+  }
+  let rightTrim = line.length;
+  if (side === "right" || side === "both") {
+    rightTrim--;
+    for (; rightTrim >= 0; rightTrim--) {
+      if (!isWhitespace(line[rightTrim].text)) {
+        break;
+      }
+    }
+    rightTrim++;
+    if (rightTrim <= 0) {
+      return {
+        trimmedLeft: [],
+        trimmedRight: line.concat(),
+        trimmedLine: []
+      };
+    }
+  }
+  return {
+    trimmedLeft: line.slice(0, leftTrim),
+    trimmedRight: line.slice(rightTrim),
+    trimmedLine: line.slice(leftTrim, rightTrim)
+  };
+};
+const HAIR = " ";
+const SPACE = " ";
+let fontBoundingBoxSupported;
+const _getWordHash = (word) => {
+  return `${word.text}${word.format ? JSON.stringify(word.format) : ""}`;
+};
+const _splitIntoLines = (words, inferWhitespace = true) => {
+  const lines = [[]];
+  let wasWhitespace = false;
+  words.forEach((word, wordIdx) => {
+    if (word.text.match(/^\n+$/)) {
+      for (let i = 0; i < word.text.length; i++) {
+        lines.push([]);
+      }
+      wasWhitespace = true;
+      return;
+    }
+    if (isWhitespace(word.text)) {
+      lines.at(-1)?.push(word);
+      wasWhitespace = true;
+      return;
+    }
+    if (word.text === "") {
+      return;
+    }
+    if (inferWhitespace && !wasWhitespace && wordIdx > 0) {
+      lines.at(-1)?.push({ text: SPACE });
+    }
+    lines.at(-1)?.push(word);
+    wasWhitespace = false;
+  });
+  return lines;
+};
+const _generateSpec = ({
+  wrappedLines,
+  wordMap,
+  positioning: {
+    width: boxWidth,
+    height: boxHeight,
+    x: boxX = 0,
+    y: boxY = 0,
+    align,
+    vAlign
+  }
+}) => {
+  const xEnd = boxX + boxWidth;
+  const yEnd = boxY + boxHeight;
+  const getHeight = (word) => (
+    // NOTE: `metrics` must exist as every `word` MUST have been measured at this point
+    word.metrics.fontBoundingBoxAscent + word.metrics.fontBoundingBoxDescent
+  );
+  const lineHeights = wrappedLines.map(
+    (line) => line.reduce((acc, word) => {
+      return Math.max(acc, getHeight(word));
+    }, 0)
+  );
+  const totalHeight = lineHeights.reduce((acc, h) => acc + h, 0);
+  let lineY;
+  let textBaseline;
+  if (vAlign === "top") {
+    textBaseline = "top";
+    lineY = boxY;
+  } else if (vAlign === "bottom") {
+    textBaseline = "bottom";
+    lineY = yEnd - totalHeight;
+  } else {
+    textBaseline = "top";
+    lineY = boxY + boxHeight / 2 - totalHeight / 2;
+  }
+  const lines = wrappedLines.map((line, lineIdx) => {
+    const lineWidth = line.reduce(
+      // NOTE: `metrics` must exist as every `word` MUST have been measured at this point
+      (acc, word) => acc + word.metrics.width,
+      0
+    );
+    const lineHeight = lineHeights[lineIdx];
+    let lineX;
+    if (align === "right") {
+      lineX = xEnd - lineWidth;
+    } else if (align === "left") {
+      lineX = boxX;
+    } else {
+      lineX = boxX + boxWidth / 2 - lineWidth / 2;
+    }
+    let wordX = lineX;
+    const posWords = line.map((word) => {
+      const hash = _getWordHash(word);
+      const { format } = wordMap.get(hash);
+      const x = wordX;
+      const height = getHeight(word);
+      let y;
+      if (vAlign === "top") {
+        y = lineY;
+      } else if (vAlign === "bottom") {
+        y = lineY + lineHeight;
+      } else {
+        y = lineY + (lineHeight - height) / 2;
+      }
+      wordX += word.metrics.width;
+      return {
+        word,
+        format,
+        // undefined IF base formatting should be used when rendering (i.e. `word.format` is undefined)
+        x,
+        y,
+        width: word.metrics.width,
+        height,
+        isWhitespace: isWhitespace(word.text)
+      };
+    });
+    lineY += lineHeight;
+    return posWords;
+  });
+  return {
+    lines,
+    textBaseline,
+    textAlign: "left",
+    // always per current algorithm
+    width: boxWidth,
+    height: totalHeight
+  };
+};
+const _jsonReplacer = function(key, value) {
+  if (key === "metrics" && value && typeof value === "object") {
+    const metrics = value;
+    return {
+      width: metrics.width,
+      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+      fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
+    };
+  }
+  return value;
+};
+const specToJson = (specs) => {
+  return JSON.stringify(specs, _jsonReplacer);
+};
+const wordsToJson = (words) => {
+  return JSON.stringify(words, _jsonReplacer);
+};
+const _measureWord = ({
+  ctx,
+  word,
+  wordMap,
+  baseTextFormat
+}) => {
+  const hash = _getWordHash(word);
+  if (word.metrics) {
+    if (!wordMap.has(hash)) {
+      let format2 = void 0;
+      if (word.format) {
+        format2 = getTextFormat(word.format, baseTextFormat);
+      }
+      wordMap.set(hash, { metrics: word.metrics, format: format2 });
+    }
+    return word.metrics.width;
+  }
+  if (wordMap.has(hash)) {
+    const { metrics: metrics2 } = wordMap.get(hash);
+    word.metrics = metrics2;
+    return metrics2.width;
+  }
+  let ctxSaved = false;
+  let format = void 0;
+  if (word.format) {
+    ctx.save();
+    ctxSaved = true;
+    format = getTextFormat(word.format, baseTextFormat);
+    ctx.font = getTextStyle(format);
+  }
+  if (!fontBoundingBoxSupported) {
+    if (!ctxSaved) {
+      ctx.save();
+      ctxSaved = true;
+    }
+    ctx.textBaseline = "bottom";
+  }
+  const metrics = ctx.measureText(word.text);
+  if (typeof metrics.fontBoundingBoxAscent === "number") {
+    fontBoundingBoxSupported = true;
+  } else {
+    fontBoundingBoxSupported = false;
+    metrics.fontBoundingBoxAscent = metrics.actualBoundingBoxAscent;
+    metrics.fontBoundingBoxDescent = 0;
+  }
+  word.metrics = metrics;
+  wordMap.set(hash, { metrics, format });
+  if (ctxSaved) {
+    ctx.restore();
+  }
+  return metrics.width;
+};
+const splitWords = ({
+  ctx,
+  words,
+  justify,
+  format: baseFormat,
+  inferWhitespace = true,
+  ...positioning
+  // rest of params are related to positioning
+}) => {
+  const wordMap = /* @__PURE__ */ new Map();
+  const baseTextFormat = getTextFormat(baseFormat);
+  const { width: boxWidth } = positioning;
+  const measureLine = (lineWords, force = false) => {
+    let lineWidth = 0;
+    let splitPoint = 0;
+    lineWords.every((word, idx) => {
+      const wordWidth = _measureWord({ ctx, word, wordMap, baseTextFormat });
+      if (!force && lineWidth + wordWidth > boxWidth) {
+        if (idx === 0) {
+          splitPoint = 1;
+          lineWidth = wordWidth;
+        }
+        return false;
+      }
+      splitPoint++;
+      lineWidth += wordWidth;
+      return true;
+    });
+    return { lineWidth, splitPoint };
+  };
+  ctx.save();
+  const hardLines = _splitIntoLines(
+    trimLine(words).trimmedLine,
+    inferWhitespace
+  );
+  if (hardLines.length <= 0 || boxWidth <= 0 || positioning.height <= 0 || baseFormat && typeof baseFormat.fontSize === "number" && baseFormat.fontSize <= 0) {
+    return {
+      lines: [],
+      textAlign: "center",
+      textBaseline: "middle",
+      width: positioning.width,
+      height: 0
+    };
+  }
+  ctx.font = getTextStyle(baseTextFormat);
+  const hairWidth = justify ? _measureWord({ ctx, word: { text: HAIR }, wordMap, baseTextFormat }) : 0;
+  const wrappedLines = [];
+  for (const hardLine of hardLines) {
+    let { splitPoint } = measureLine(hardLine);
+    if (splitPoint >= hardLine.length) {
+      wrappedLines.push(hardLine);
+    } else {
+      let softLine = hardLine.concat();
+      while (splitPoint < softLine.length) {
+        const splitLine = trimLine(
+          softLine.slice(0, splitPoint),
+          "right"
+        ).trimmedLine;
+        wrappedLines.push(splitLine);
+        softLine = trimLine(softLine.slice(splitPoint), "left").trimmedLine;
+        ({ splitPoint } = measureLine(softLine));
+      }
+      wrappedLines.push(softLine);
+    }
+  }
+  if (justify && wrappedLines.length > 1) {
+    wrappedLines.forEach((wrappedLine, idx) => {
+      if (idx < wrappedLines.length - 1) {
+        const justifiedLine = justifyLine({
+          line: wrappedLine,
+          spaceWidth: hairWidth,
+          spaceChar: HAIR,
+          boxWidth
+        });
+        measureLine(justifiedLine, true);
+        wrappedLines[idx] = justifiedLine;
+      }
+    });
+  }
+  const spec = _generateSpec({
+    wrappedLines,
+    wordMap,
+    positioning
+  });
+  ctx.restore();
+  return spec;
+};
+const textToWords = (text) => {
+  const words = [];
+  let word = void 0;
+  let wasWhitespace = false;
+  Array.from(text.trim()).forEach((c) => {
+    const charIsWhitespace = isWhitespace(c);
+    if (charIsWhitespace && !wasWhitespace || !charIsWhitespace && wasWhitespace) {
+      wasWhitespace = charIsWhitespace;
+      if (word) {
+        words.push(word);
+      }
+      word = { text: c };
+    } else {
+      if (!word) {
+        word = { text: "" };
+      }
+      word.text += c;
+    }
+  });
+  if (word) {
+    words.push(word);
+  }
+  return words;
+};
+const splitText = ({ text, ...params }) => {
+  const words = textToWords(text);
+  const results = splitWords({
+    ...params,
+    words,
+    inferWhitespace: false
+  });
+  return results.lines.map(
+    (line) => line.map(({ word: { text: t } }) => t).join("")
+  );
+};
+const _getHeight = (ctx, text, style) => {
+  const previousTextBaseline = ctx.textBaseline;
+  const previousFont = ctx.font;
+  ctx.textBaseline = "bottom";
+  if (style) {
+    ctx.font = style;
+  }
+  const { actualBoundingBoxAscent: height } = ctx.measureText(text);
+  ctx.textBaseline = previousTextBaseline;
+  if (style) {
+    ctx.font = previousFont;
+  }
+  return height;
+};
+const getWordHeight = ({
+  ctx,
+  word
+}) => {
+  return _getHeight(ctx, word.text, word.format && getTextStyle(word.format));
+};
+const getTextHeight = ({
+  ctx,
+  text,
+  style
+}) => {
+  return _getHeight(ctx, text, style);
+};
+const drawText = (ctx, text, config) => {
+  const baseFormat = getTextFormat({
+    fontFamily: config.fontFamily,
+    fontSize: config.fontSize,
+    fontStyle: config.fontStyle,
+    fontVariant: config.fontVariant,
+    fontWeight: config.fontWeight
+  });
+  const {
+    lines: richLines,
+    height: totalHeight,
+    textBaseline,
+    textAlign
+  } = splitWords({
+    ctx,
+    words: Array.isArray(text) ? text : textToWords(text),
+    inferWhitespace: Array.isArray(text) ? config.inferWhitespace === void 0 || config.inferWhitespace : void 0,
+    // ignore since `text` is a string; we assume it already has all the whitespace it needs
+    x: config.x || 0,
+    y: config.y || 0,
+    width: config.width,
+    height: config.height,
+    align: config.align,
+    vAlign: config.vAlign,
+    justify: config.justify,
+    format: baseFormat
+  });
+  ctx.save();
+  ctx.textAlign = textAlign;
+  ctx.textBaseline = textBaseline;
+  ctx.font = getTextStyle(baseFormat);
+  ctx.fillStyle = baseFormat.fontColor || DEFAULT_FONT_COLOR;
+  richLines.forEach((line) => {
+    line.forEach((pw) => {
+      if (!pw.isWhitespace) {
+        if (pw.format) {
+          ctx.save();
+          ctx.font = getTextStyle(pw.format);
+          if (pw.format.fontColor) {
+            ctx.fillStyle = pw.format.fontColor;
+          }
+        }
+        ctx.fillText(pw.word.text, pw.x, pw.y);
+        if (pw.format) {
+          ctx.restore();
+        }
+      }
+    });
+  });
+  if (config.debug) {
+    const { width, height, x = 0, y = 0 } = config;
+    const xEnd = x + width;
+    const yEnd = y + height;
+    let textAnchor;
+    if (config.align === "right") {
+      textAnchor = xEnd;
+    } else if (config.align === "left") {
+      textAnchor = x;
+    } else {
+      textAnchor = x + width / 2;
+    }
+    let debugY = y;
+    if (config.vAlign === "bottom") {
+      debugY = yEnd;
+    } else if (config.vAlign === "middle") {
+      debugY = y + height / 2;
+    }
+    const debugColor = "#0C8CE9";
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = debugColor;
+    ctx.strokeRect(x, y, width, height);
+    ctx.lineWidth = 1;
+    if (!config.align || config.align === "center") {
+      ctx.strokeStyle = debugColor;
+      ctx.beginPath();
+      ctx.moveTo(textAnchor, y);
+      ctx.lineTo(textAnchor, yEnd);
+      ctx.stroke();
+    }
+    if (!config.vAlign || config.vAlign === "middle") {
+      ctx.strokeStyle = debugColor;
+      ctx.beginPath();
+      ctx.moveTo(x, debugY);
+      ctx.lineTo(xEnd, debugY);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+  return { height: totalHeight };
+};
+exports.drawText = drawText;
+exports.getTextFormat = getTextFormat;
+exports.getTextHeight = getTextHeight;
+exports.getTextStyle = getTextStyle;
+exports.getWordHeight = getWordHeight;
+exports.specToJson = specToJson;
+exports.splitText = splitText;
+exports.splitWords = splitWords;
+exports.textToWords = textToWords;
+exports.wordsToJson = wordsToJson;