text-to-canvas 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.1.0
+
+### Added
+
+- New `overflow?: boolean` config parameter for `drawText()` API: True (default) to allow overflow; false to clip text to box.
+
 ## v1.0.0
 
 - First official release 🎉

package/dist/text-to-canvas.cjs

@@ -475,6 +475,12 @@ const drawText = (ctx, text, config) => {
     fontVariant: config.fontVariant,
     fontWeight: config.fontWeight
   });
+  const {
+    width: boxWidth,
+    height: boxHeight,
+    x: boxX = 0,
+    y: boxY = 0
+  } = config;
   const {
     lines: richLines,
     height: totalHeight,
@@ -485,8 +491,8 @@ const drawText = (ctx, text, config) => {
     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,
+    x: boxX,
+    y: boxY,
     width: config.width,
     height: config.height,
     align: config.align,
@@ -499,6 +505,11 @@ const drawText = (ctx, text, config) => {
   ctx.textBaseline = textBaseline;
   ctx.font = getTextStyle(baseFormat);
   ctx.fillStyle = baseFormat.fontColor || DEFAULT_FONT_COLOR;
+  if (config.overflow === false) {
+    ctx.beginPath();
+    ctx.rect(boxX, boxY, boxWidth, boxHeight);
+    ctx.clip();
+  }
   richLines.forEach((line) => {
     line.forEach((pw) => {
       if (!pw.isWhitespace) {
@@ -517,39 +528,38 @@ const drawText = (ctx, text, config) => {
     });
   });
   if (config.debug) {
-    const { width, height, x = 0, y = 0 } = config;
-    const xEnd = x + width;
-    const yEnd = y + height;
+    const xEnd = boxX + boxWidth;
+    const yEnd = boxY + boxHeight;
     let textAnchor;
     if (config.align === "right") {
       textAnchor = xEnd;
     } else if (config.align === "left") {
-      textAnchor = x;
+      textAnchor = boxX;
     } else {
-      textAnchor = x + width / 2;
+      textAnchor = boxX + boxWidth / 2;
     }
-    let debugY = y;
+    let debugY = boxY;
     if (config.vAlign === "bottom") {
       debugY = yEnd;
     } else if (config.vAlign === "middle") {
-      debugY = y + height / 2;
+      debugY = boxY + boxHeight / 2;
     }
     const debugColor = "#0C8CE9";
     ctx.lineWidth = 1;
     ctx.strokeStyle = debugColor;
-    ctx.strokeRect(x, y, width, height);
+    ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);
     ctx.lineWidth = 1;
     if (!config.align || config.align === "center") {
       ctx.strokeStyle = debugColor;
       ctx.beginPath();
-      ctx.moveTo(textAnchor, y);
+      ctx.moveTo(textAnchor, boxY);
       ctx.lineTo(textAnchor, yEnd);
       ctx.stroke();
     }
     if (!config.vAlign || config.vAlign === "middle") {
       ctx.strokeStyle = debugColor;
       ctx.beginPath();
-      ctx.moveTo(x, debugY);
+      ctx.moveTo(boxX, debugY);
       ctx.lineTo(xEnd, debugY);
       ctx.stroke();
     }

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

@@ -1,8 +1,8 @@
-const H = "Arial";
+const D = "Arial";
 const $ = "black", _ = (t, n) => Object.assign(
   {},
   {
-    fontFamily: H,
+    fontFamily: D,
     fontSize: 14,
     fontWeight: "400",
     fontStyle: "",
@@ -15,49 +15,49 @@ const $ = "black", _ = (t, n) => Object.assign(
   fontFamily: t,
   fontSize: n,
   fontStyle: e,
-  fontVariant: i,
-  fontWeight: s
-}) => `${e || ""} ${i || ""} ${s || ""} ${n ?? 14}px ${t || H}`.trim(), T = (t) => !!t.match(/^\s+$/), M = (t) => t.filter((n) => !T(n.text)), V = (t) => {
+  fontVariant: s,
+  fontWeight: i
+}) => `${e || ""} ${s || ""} ${i || ""} ${n ?? 14}px ${t || D}`.trim(), T = (t) => !!t.match(/^\s+$/), M = (t) => t.filter((n) => !T(n.text)), V = (t) => {
   const n = { ...t };
   return t.format && (n.format = { ...t.format }), n;
-}, k = (t, n) => {
+}, H = (t, n) => {
   if (t.length <= 1 || n.length < 1)
     return [...t];
   const e = [];
-  return t.forEach((i, s) => {
-    e.push(i), s < t.length - 1 && n.forEach((r) => e.push(V(r)));
+  return t.forEach((s, i) => {
+    e.push(s), i < t.length - 1 && n.forEach((r) => e.push(V(r)));
   }), e;
 }, Z = ({
   line: t,
   spaceWidth: n,
   spaceChar: e,
-  boxWidth: i
+  boxWidth: s
 }) => {
-  const s = M(t);
-  if (s.length <= 1)
+  const i = M(t);
+  if (i.length <= 1)
     return t.concat();
-  const r = s.reduce(
-    (l, o) => {
-      var m;
-      return l + (((m = o.metrics) == null ? void 0 : m.width) ?? 0);
+  const r = i.reduce(
+    (a, u) => {
+      var d;
+      return a + (((d = u.metrics) == null ? void 0 : d.width) ?? 0);
     },
     0
-  ), a = (i - r) / n;
-  if (s.length > 2) {
-    const l = Math.ceil(a / (s.length - 1)), o = Array.from({ length: l }, () => ({
+  ), l = (s - r) / n;
+  if (i.length > 2) {
+    const a = Math.ceil(l / (i.length - 1)), u = Array.from({ length: a }, () => ({
       text: e
-    })), m = s.slice(0, s.length - 1), p = k(m, o), u = o.slice(
+    })), d = i.slice(0, i.length - 1), y = H(d, u), c = u.slice(
       0,
-      Math.floor(a) - (m.length - 1) * o.length
-    ), d = s[s.length - 1];
-    return [...p, ...u, d];
+      Math.floor(l) - (d.length - 1) * u.length
+    ), h = i[i.length - 1];
+    return [...y, ...c, h];
   }
-  const h = Array.from(
-    { length: Math.floor(a) },
+  const o = Array.from(
+    { length: Math.floor(l) },
     () => ({ text: e })
   );
-  return k(s, h);
-}, v = (t, n = "both") => {
+  return H(i, o);
+}, x = (t, n = "both") => {
   let e = 0;
   if (n === "left" || n === "both") {
     for (; e < t.length && T(t[e].text); e++)
@@ -69,11 +69,11 @@ const $ = "black", _ = (t, n) => Object.assign(
         trimmedLine: []
       };
   }
-  let i = t.length;
+  let s = t.length;
   if (n === "right" || n === "both") {
-    for (i--; i >= 0 && T(t[i].text); i--)
+    for (s--; s >= 0 && T(t[s].text); s--)
       ;
-    if (i++, i <= 0)
+    if (s++, s <= 0)
       return {
         trimmedLeft: [],
         trimmedRight: t.concat(),
@@ -82,61 +82,61 @@ const $ = "black", _ = (t, n) => Object.assign(
   }
   return {
     trimmedLeft: t.slice(0, e),
-    trimmedRight: t.slice(i),
-    trimmedLine: t.slice(e, i)
+    trimmedRight: t.slice(s),
+    trimmedLine: t.slice(e, s)
   };
-}, C = " ", Y = " ";
-let F;
-const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, q = (t, n = !0) => {
+}, k = " ", Y = " ";
+let v;
+const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, X = (t, n = !0) => {
   const e = [[]];
-  let i = !1;
-  return t.forEach((s, r) => {
-    var a, h, l;
-    if (s.text.match(/^\n+$/)) {
-      for (let o = 0; o < s.text.length; o++)
+  let s = !1;
+  return t.forEach((i, r) => {
+    var l, o, a;
+    if (i.text.match(/^\n+$/)) {
+      for (let u = 0; u < i.text.length; u++)
         e.push([]);
-      i = !0;
+      s = !0;
       return;
     }
-    if (T(s.text)) {
-      (a = e.at(-1)) == null || a.push(s), i = !0;
+    if (T(i.text)) {
+      (l = e.at(-1)) == null || l.push(i), s = !0;
       return;
     }
-    s.text !== "" && (n && !i && r > 0 && ((h = e.at(-1)) == null || h.push({ text: Y })), (l = e.at(-1)) == null || l.push(s), i = !1);
+    i.text !== "" && (n && !s && r > 0 && ((o = e.at(-1)) == null || o.push({ text: Y })), (a = e.at(-1)) == null || a.push(i), s = !1);
   }), e;
-}, G = ({
+}, q = ({
   wrappedLines: t,
   wordMap: n,
   positioning: {
     width: e,
-    height: i,
-    x: s = 0,
+    height: s,
+    x: i = 0,
     y: r = 0,
-    align: a,
-    vAlign: h
+    align: l,
+    vAlign: o
   }
 }) => {
-  const l = s + e, o = r + i, m = (f) => (
+  const a = i + e, u = r + s, d = (f) => (
     // NOTE: `metrics` must exist as every `word` MUST have been measured at this point
     f.metrics.fontBoundingBoxAscent + f.metrics.fontBoundingBoxDescent
-  ), p = t.map(
-    (f) => f.reduce((y, A) => Math.max(y, m(A)), 0)
-  ), u = p.reduce((f, y) => f + y, 0);
-  let d, c;
-  return h === "top" ? (c = "top", d = r) : h === "bottom" ? (c = "bottom", d = o - u) : (c = "top", d = r + i / 2 - u / 2), {
-    lines: t.map((f, y) => {
+  ), y = t.map(
+    (f) => f.reduce((p, A) => Math.max(p, d(A)), 0)
+  ), c = y.reduce((f, p) => f + p, 0);
+  let h, m;
+  return o === "top" ? (m = "top", h = r) : o === "bottom" ? (m = "bottom", h = u - c) : (m = "top", h = r + s / 2 - c / 2), {
+    lines: t.map((f, p) => {
       const A = f.reduce(
         // NOTE: `metrics` must exist as every `word` MUST have been measured at this point
-        (W, x) => W + x.metrics.width,
+        (W, b) => W + b.metrics.width,
         0
-      ), L = p[y];
+      ), L = y[p];
       let B;
-      a === "right" ? B = l - A : a === "left" ? B = s : B = s + e / 2 - A / 2;
-      let b = B;
+      l === "right" ? B = a - A : l === "left" ? B = i : B = i + e / 2 - A / 2;
+      let F = B;
       const z = f.map((W) => {
-        const x = I(W), { format: J } = n.get(x), U = b, O = m(W);
+        const b = I(W), { format: J } = n.get(b), U = F, O = d(W);
         let E;
-        return h === "top" ? E = d : h === "bottom" ? E = d + L : E = d + (L - O) / 2, b += W.metrics.width, {
+        return o === "top" ? E = h : o === "bottom" ? E = h + L : E = h + (L - O) / 2, F += W.metrics.width, {
           word: W,
           format: J,
           // undefined IF base formatting should be used when rendering (i.e. `word.format` is undefined)
@@ -147,13 +147,13 @@ const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, q = (t,
           isWhitespace: T(W.text)
         };
       });
-      return d += L, z;
+      return h += L, z;
     }),
-    textBaseline: c,
+    textBaseline: m,
     textAlign: "left",
     // always per current algorithm
     width: e,
-    height: u
+    height: c
   };
 }, N = function(t, n) {
   if (t === "metrics" && n && typeof n == "object") {
@@ -165,50 +165,50 @@ const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, q = (t,
     };
   }
   return n;
-}, K = (t) => JSON.stringify(t, N), Q = (t) => JSON.stringify(t, N), D = ({
+}, G = (t) => JSON.stringify(t, N), K = (t) => JSON.stringify(t, N), C = ({
   ctx: t,
   word: n,
   wordMap: e,
-  baseTextFormat: i
+  baseTextFormat: s
 }) => {
-  const s = I(n);
+  const i = I(n);
   if (n.metrics) {
-    if (!e.has(s)) {
-      let l;
-      n.format && (l = _(n.format, i)), e.set(s, { metrics: n.metrics, format: l });
+    if (!e.has(i)) {
+      let a;
+      n.format && (a = _(n.format, s)), e.set(i, { metrics: n.metrics, format: a });
     }
     return n.metrics.width;
   }
-  if (e.has(s)) {
-    const { metrics: l } = e.get(s);
-    return n.metrics = l, l.width;
+  if (e.has(i)) {
+    const { metrics: a } = e.get(i);
+    return n.metrics = a, a.width;
   }
-  let r = !1, a;
-  n.format && (t.save(), r = !0, a = _(n.format, i), t.font = S(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(s, { metrics: h, format: a }), r && t.restore(), h.width;
-}, j = ({
+  let r = !1, l;
+  n.format && (t.save(), r = !0, l = _(n.format, s), t.font = S(l)), v || (r || (t.save(), r = !0), t.textBaseline = "bottom");
+  const o = t.measureText(n.text);
+  return typeof o.fontBoundingBoxAscent == "number" ? v = !0 : (v = !1, o.fontBoundingBoxAscent = o.actualBoundingBoxAscent, o.fontBoundingBoxDescent = 0), n.metrics = o, e.set(i, { metrics: o, format: l }), r && t.restore(), o.width;
+}, P = ({
   ctx: t,
   words: n,
   justify: e,
-  format: i,
-  inferWhitespace: s = !0,
+  format: s,
+  inferWhitespace: i = !0,
   ...r
   // rest of params are related to positioning
 }) => {
-  const a = /* @__PURE__ */ new Map(), h = _(i), { width: l } = r, o = (c, g = !1) => {
-    let f = 0, y = 0;
-    return c.every((A, L) => {
-      const B = D({ ctx: t, word: A, wordMap: a, baseTextFormat: h });
-      return !g && f + B > l ? (L === 0 && (y = 1, f = B), !1) : (y++, f += B, !0);
-    }), { lineWidth: f, splitPoint: y };
+  const l = /* @__PURE__ */ new Map(), o = _(s), { width: a } = r, u = (m, g = !1) => {
+    let f = 0, p = 0;
+    return m.every((A, L) => {
+      const B = C({ ctx: t, word: A, wordMap: l, baseTextFormat: o });
+      return !g && f + B > a ? (L === 0 && (p = 1, f = B), !1) : (p++, f += B, !0);
+    }), { lineWidth: f, splitPoint: p };
   };
   t.save();
-  const m = q(
-    v(n).trimmedLine,
-    s
+  const d = X(
+    x(n).trimmedLine,
+    i
   );
-  if (m.length <= 0 || l <= 0 || r.height <= 0 || i && typeof i.fontSize == "number" && i.fontSize <= 0)
+  if (d.length <= 0 || a <= 0 || r.height <= 0 || s && typeof s.fontSize == "number" && s.fontSize <= 0)
     return {
       lines: [],
       textAlign: "center",
@@ -216,62 +216,62 @@ const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, q = (t,
       width: r.width,
       height: 0
     };
-  t.font = S(h);
-  const p = e ? D({ ctx: t, word: { text: C }, wordMap: a, baseTextFormat: h }) : 0, u = [];
-  for (const c of m) {
-    let { splitPoint: g } = o(c);
-    if (g >= c.length)
-      u.push(c);
+  t.font = S(o);
+  const y = e ? C({ ctx: t, word: { text: k }, wordMap: l, baseTextFormat: o }) : 0, c = [];
+  for (const m of d) {
+    let { splitPoint: g } = u(m);
+    if (g >= m.length)
+      c.push(m);
     else {
-      let f = c.concat();
+      let f = m.concat();
       for (; g < f.length; ) {
-        const y = v(
+        const p = x(
           f.slice(0, g),
           "right"
         ).trimmedLine;
-        u.push(y), f = v(f.slice(g), "left").trimmedLine, { splitPoint: g } = o(f);
+        c.push(p), f = x(f.slice(g), "left").trimmedLine, { splitPoint: g } = u(f);
       }
-      u.push(f);
+      c.push(f);
     }
   }
-  e && u.length > 1 && u.forEach((c, g) => {
-    if (g < u.length - 1) {
+  e && c.length > 1 && c.forEach((m, g) => {
+    if (g < c.length - 1) {
       const f = Z({
-        line: c,
-        spaceWidth: p,
-        spaceChar: C,
-        boxWidth: l
+        line: m,
+        spaceWidth: y,
+        spaceChar: k,
+        boxWidth: a
       });
-      o(f, !0), u[g] = f;
+      u(f, !0), c[g] = f;
     }
   });
-  const d = G({
-    wrappedLines: u,
-    wordMap: a,
+  const h = q({
+    wrappedLines: c,
+    wordMap: l,
     positioning: r
   });
-  return t.restore(), d;
-}, P = (t) => {
+  return t.restore(), h;
+}, j = (t) => {
   const n = [];
-  let e, i = !1;
-  return Array.from(t.trim()).forEach((s) => {
-    const r = T(s);
-    r && !i || !r && i ? (i = r, e && n.push(e), e = { text: s }) : (e || (e = { text: "" }), e.text += s);
+  let e, s = !1;
+  return Array.from(t.trim()).forEach((i) => {
+    const r = T(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;
-}, X = ({ text: t, ...n }) => {
-  const e = P(t);
-  return j({
+}, Q = ({ text: t, ...n }) => {
+  const e = j(t);
+  return P({
     ...n,
     words: e,
     inferWhitespace: !1
   }).lines.map(
-    (s) => s.map(({ word: { text: r } }) => r).join("")
+    (i) => i.map(({ word: { text: r } }) => r).join("")
   );
 }, R = (t, n, e) => {
-  const i = t.textBaseline, s = t.font;
+  const s = t.textBaseline, i = t.font;
   t.textBaseline = "bottom", e && (t.font = e);
   const { actualBoundingBoxAscent: r } = t.measureText(n);
-  return t.textBaseline = i, e && (t.font = s), r;
+  return t.textBaseline = s, e && (t.font = i), r;
 }, w = ({
   ctx: t,
   word: n
@@ -280,45 +280,50 @@ const I = (t) => `${t.text}${t.format ? JSON.stringify(t.format) : ""}`, q = (t,
   text: n,
   style: e
 }) => R(t, n, e), et = (t, n, e) => {
-  const i = _({
+  const s = _({
     fontFamily: e.fontFamily,
     fontSize: e.fontSize,
     fontStyle: e.fontStyle,
     fontVariant: e.fontVariant,
     fontWeight: e.fontWeight
   }), {
-    lines: s,
+    width: i,
     height: r,
-    textBaseline: a,
-    textAlign: h
-  } = j({
+    x: l = 0,
+    y: o = 0
+  } = e, {
+    lines: a,
+    height: u,
+    textBaseline: d,
+    textAlign: y
+  } = P({
     ctx: t,
-    words: Array.isArray(n) ? n : P(n),
+    words: Array.isArray(n) ? n : j(n),
     inferWhitespace: Array.isArray(n) ? e.inferWhitespace === void 0 || e.inferWhitespace : void 0,
     // ignore since `text` is a string; we assume it already has all the whitespace it needs
-    x: e.x || 0,
-    y: e.y || 0,
+    x: l,
+    y: o,
     width: e.width,
     height: e.height,
     align: e.align,
     vAlign: e.vAlign,
     justify: e.justify,
-    format: i
+    format: s
   });
-  if (t.save(), t.textAlign = h, t.textBaseline = a, t.font = S(i), t.fillStyle = i.fontColor || $, s.forEach((l) => {
-    l.forEach((o) => {
-      o.isWhitespace || (o.format && (t.save(), t.font = S(o.format), o.format.fontColor && (t.fillStyle = o.format.fontColor)), t.fillText(o.word.text, o.x, o.y), o.format && t.restore());
+  if (t.save(), t.textAlign = y, t.textBaseline = d, t.font = S(s), t.fillStyle = s.fontColor || $, e.overflow === !1 && (t.beginPath(), t.rect(l, o, i, r), t.clip()), a.forEach((c) => {
+    c.forEach((h) => {
+      h.isWhitespace || (h.format && (t.save(), t.font = S(h.format), h.format.fontColor && (t.fillStyle = h.format.fontColor)), t.fillText(h.word.text, h.x, h.y), h.format && t.restore());
     });
   }), e.debug) {
-    const { width: l, height: o, x: m = 0, y: p = 0 } = e, u = m + l, d = p + o;
-    let c;
-    e.align === "right" ? c = u : e.align === "left" ? c = m : c = m + l / 2;
-    let g = p;
-    e.vAlign === "bottom" ? g = d : e.vAlign === "middle" && (g = p + o / 2);
+    const c = l + i, h = o + r;
+    let m;
+    e.align === "right" ? m = c : e.align === "left" ? m = l : m = l + i / 2;
+    let g = o;
+    e.vAlign === "bottom" ? g = h : e.vAlign === "middle" && (g = o + r / 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, d), t.stroke()), (!e.vAlign || e.vAlign === "middle") && (t.strokeStyle = f, t.beginPath(), t.moveTo(m, g), t.lineTo(u, g), t.stroke());
+    t.lineWidth = 1, t.strokeStyle = f, t.strokeRect(l, o, i, r), t.lineWidth = 1, (!e.align || e.align === "center") && (t.strokeStyle = f, t.beginPath(), t.moveTo(m, o), t.lineTo(m, h), t.stroke()), (!e.vAlign || e.vAlign === "middle") && (t.strokeStyle = f, t.beginPath(), t.moveTo(l, g), t.lineTo(c, g), t.stroke());
   }
-  return t.restore(), { height: r };
+  return t.restore(), { height: u };
 };
 export {
   et as drawText,
@@ -326,10 +331,10 @@ export {
   tt as getTextHeight,
   S as getTextStyle,
   w as getWordHeight,
-  K as specToJson,
-  X as splitText,
-  j as splitWords,
-  P as textToWords,
-  Q as wordsToJson
+  G as specToJson,
+  Q as splitText,
+  P as splitWords,
+  j as textToWords,
+  K as wordsToJson
 };
 //# sourceMappingURL=text-to-canvas.esm.min.js.map