text-to-canvas 1.0.0

package/dist/text-to-canvas.mjs

@@ -0,0 +1,569 @@
+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 };
+};
+export {
+  drawText,
+  getTextFormat,
+  getTextHeight,
+  getTextStyle,
+  getWordHeight,
+  specToJson,
+  splitText,
+  splitWords,
+  textToWords,
+  wordsToJson
+};

package/dist/text-to-canvas.umd.min.js

@@ -0,0 +1,2 @@
+(function(g,A){typeof exports=="object"&&typeof module!="undefined"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(g=typeof globalThis!="undefined"?globalThis:g||self,A(g.textToCanvas={}))})(this,function(g){"use strict";const A="Arial",j="black",_=(t,n)=>Object.assign({},{fontFamily:A,fontSize:14,fontWeight:"400",fontStyle:"",fontVariant:"",fontColor:j},n,t),L=({fontFamily:t,fontSize:n,fontStyle:e,fontVariant:s,fontWeight:i})=>`${e||""} ${s||""} ${i||""} ${n!=null?n:14}px ${t||A}`.trim(),S=t=>!!t.match(/^\s+$/),U=t=>t.filter(n=>!S(n.text)),M=t=>{const n={...t};return t.format&&(n.format={...t.format}),n},k=(t,n)=>{if(t.length<=1||n.length<1)return[...t];const e=[];return t.forEach((s,i)=>{e.push(s),i<t.length-1&&n.forEach(r=>e.push(M(r)))}),e},V=({line:t,spaceWidth:n,spaceChar:e,boxWidth:s})=>{const i=U(t);if(i.length<=1)return t.concat();const r=i.reduce((l,o)=>{var m,p;return l+((p=(m=o.metrics)==null?void 0:m.width)!=null?p:0)},0),a=(s-r)/n;if(i.length>2){const l=Math.ceil(a/(i.length-1)),o=Array.from({length:l},()=>({text:e})),m=i.slice(0,i.length-1),p=k(m,o),u=o.slice(0,Math.floor(a)-(m.length-1)*o.length),T=i[i.length-1];return[...p,...u,T]}const h=Array.from({length:Math.floor(a)},()=>({text:e}));return k(i,h)},b=(t,n="both")=>{let e=0;if(n==="left"||n==="both"){for(;e<t.length&&S(t[e].text);e++);if(e>=t.length)return{trimmedLeft:t.concat(),trimmedRight:[],trimmedLine:[]}}let s=t.length;if(n==="right"||n==="both"){for(s--;s>=0&&S(t[s].text);s--);if(s++,s<=0)return{trimmedLeft:[],trimmedRight:t.concat(),trimmedLine:[]}}return{trimmedLeft:t.slice(0,e),trimmedRight:t.slice(s),trimmedLine:t.slice(e,s)}},D=" ",Z=" ";let F;const $=t=>`${t.text}${t.format?JSON.stringify(t.format):""}`,z=(t,n=!0)=>{const e=[[]];let s=!1;return t.forEach((i,r)=>{var a,h,l;if(i.text.match(/^\n+$/)){for(let o=0;o<i.text.length;o++)e.push([]);s=!0;return}if(S(i.text)){(a=e.at(-1))==null||a.push(i),s=!0;return}i.text!==""&&(n&&!s&&r>0&&((h=e.at(-1))==null||h.push({text:Z})),(l=e.at(-1))==null||l.push(i),s=!1)}),e},Y=({wrappedLines:t,wordMap:n,positioning:{width:e,height:s,x:i=0,y:r=0,align:a,vAlign:h}})=>{const l=i+e,o=r+s,m=f=>f.metrics.fontBoundingBoxAscent+f.metrics.fontBoundingBoxDescent,p=t.map(f=>f.reduce((y,E)=>Math.max(y,m(E)),0)),u=p.reduce((f,y)=>f+y,0);let T,c;return h==="top"?(c="top",T=r):h==="bottom"?(c="bottom",T=o-u):(c="top",T=r+s/2-u/2),{lines:t.map((f,y)=>{const E=f.reduce((B,C)=>B+C.metrics.width,0),v=p[y];let W;a==="right"?W=l-E:a==="left"?W=i:W=i+e/2-E/2;let J=W;const tt=f.map(B=>{const C=$(B),{format:et}=n.get(C),nt=J,R=m(B);let x;return h==="top"?x=T:h==="bottom"?x=T+v:x=T+(v-R)/2,J+=B.metrics.width,{word:B,format:et,x:nt,y:x,width:B.metrics.width,height:R,isWhitespace:S(B.text)}});return T+=v,tt}),textBaseline:c,textAlign:"left",width:e,height:u}},I=function(t,n){if(t==="metrics"&&n&&typeof n=="object"){const e=n;return{width:e.width,fontBoundingBoxAscent:e.fontBoundingBoxAscent,fontBoundingBoxDescent:e.fontBoundingBoxDescent}}return n},q=t=>JSON.stringify(t,I),G=t=>JSON.stringify(t,I),N=({ctx:t,word:n,wordMap:e,baseTextFormat:s})=>{const i=$(n);if(n.metrics){if(!e.has(i)){let l;n.format&&(l=_(n.format,s)),e.set(i,{metrics:n.metrics,format:l})}return n.metrics.width}if(e.has(i)){const{metrics:l}=e.get(i);return n.metrics=l,l.width}let r=!1,a;n.format&&(t.save(),r=!0,a=_(n.format,s),t.font=L(a)),F||(r||(t.save(),r=!0),t.textBaseline="bottom");const h=t.measureText(n.text);return typeof h.fontBoundingBoxAscent=="number"?F=!0:(F=!1,h.fontBoundingBoxAscent=h.actualBoundingBoxAscent,h.fontBoundingBoxDescent=0),n.metrics=h,e.set(i,{metrics:h,format:a}),r&&t.restore(),h.width},O=({ctx:t,words:n,justify:e,format:s,inferWhitespace:i=!0,...r})=>{const a=new Map,h=_(s),{width:l}=r,o=(c,d=!1)=>{let f=0,y=0;return c.every((E,v)=>{const W=N({ctx:t,word:E,wordMap:a,baseTextFormat:h});return!d&&f+W>l?(v===0&&(y=1,f=W),!1):(y++,f+=W,!0)}),{lineWidth:f,splitPoint:y}};t.save();const m=z(b(n).trimmedLine,i);if(m.length<=0||l<=0||r.height<=0||s&&typeof s.fontSize=="number"&&s.fontSize<=0)return{lines:[],textAlign:"center",textBaseline:"middle",width:r.width,height:0};t.font=L(h);const p=e?N({ctx:t,word:{text:D},wordMap:a,baseTextFormat:h}):0,u=[];for(const c of m){let{splitPoint:d}=o(c);if(d>=c.length)u.push(c);else{let f=c.concat();for(;d<f.length;){const y=b(f.slice(0,d),"right").trimmedLine;u.push(y),f=b(f.slice(d),"left").trimmedLine,{splitPoint:d}=o(f)}u.push(f)}}e&&u.length>1&&u.forEach((c,d)=>{if(d<u.length-1){const f=V({line:c,spaceWidth:p,spaceChar:D,boxWidth:l});o(f,!0),u[d]=f}});const T=Y({wrappedLines:u,wordMap:a,positioning:r});return t.restore(),T},H=t=>{const n=[];let e,s=!1;return Array.from(t.trim()).forEach(i=>{const r=S(i);r&&!s||!r&&s?(s=r,e&&n.push(e),e={text:i}):(e||(e={text:""}),e.text+=i)}),e&&n.push(e),n},K=({text:t,...n})=>{const e=H(t);return O({...n,words:e,inferWhitespace:!1}).lines.map(i=>i.map(({word:{text:r}})=>r).join(""))},P=(t,n,e)=>{const s=t.textBaseline,i=t.font;t.textBaseline="bottom",e&&(t.font=e);const{actualBoundingBoxAscent:r}=t.measureText(n);return t.textBaseline=s,e&&(t.font=i),r},Q=({ctx:t,word:n})=>P(t,n.text,n.format&&L(n.format)),X=({ctx:t,text:n,style:e})=>P(t,n,e),w=(t,n,e)=>{const s=_({fontFamily:e.fontFamily,fontSize:e.fontSize,fontStyle:e.fontStyle,fontVariant:e.fontVariant,fontWeight:e.fontWeight}),{lines:i,height:r,textBaseline:a,textAlign:h}=O({ctx:t,words:Array.isArray(n)?n:H(n),inferWhitespace:Array.isArray(n)?e.inferWhitespace===void 0||e.inferWhitespace:void 0,x:e.x||0,y:e.y||0,width:e.width,height:e.height,align:e.align,vAlign:e.vAlign,justify:e.justify,format:s});if(t.save(),t.textAlign=h,t.textBaseline=a,t.font=L(s),t.fillStyle=s.fontColor||j,i.forEach(l=>{l.forEach(o=>{o.isWhitespace||(o.format&&(t.save(),t.font=L(o.format),o.format.fontColor&&(t.fillStyle=o.format.fontColor)),t.fillText(o.word.text,o.x,o.y),o.format&&t.restore())})}),e.debug){const{width:l,height:o,x:m=0,y:p=0}=e,u=m+l,T=p+o;let c;e.align==="right"?c=u:e.align==="left"?c=m:c=m+l/2;let d=p;e.vAlign==="bottom"?d=T:e.vAlign==="middle"&&(d=p+o/2);const f="#0C8CE9";t.lineWidth=1,t.strokeStyle=f,t.strokeRect(m,p,l,o),t.lineWidth=1,(!e.align||e.align==="center")&&(t.strokeStyle=f,t.beginPath(),t.moveTo(c,p),t.lineTo(c,T),t.stroke()),(!e.vAlign||e.vAlign==="middle")&&(t.strokeStyle=f,t.beginPath(),t.moveTo(m,d),t.lineTo(u,d),t.stroke())}return t.restore(),{height:r}};g.drawText=w,g.getTextFormat=_,g.getTextHeight=X,g.getTextStyle=L,g.getWordHeight=Q,g.specToJson=q,g.splitText=K,g.splitWords=O,g.textToWords=H,g.wordsToJson=G,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=text-to-canvas.umd.min.js.map