@effing/canvas 0.38.4 → 0.39.0

package/README.md

@@ -108,7 +108,19 @@ const fontSize = findLargestUsableFontSize({
 });
 ```
 
-Supports optional `lineHeight` (`"normal"` or a numeric multiplier), `minFontSize` (default 1), and `maxFontSize` (default 1000).
+By default the text wraps to `maxWidth` and is fit into the `maxWidth` × `maxHeight` box. Pass `whiteSpace: "nowrap"` to fit the text on one line (per newline-separated paragraph) instead, where `maxWidth` constrains the full line width:
+
+```typescript
+const fontSize = findLargestUsableFontSize({
+  text: "Hello World",
+  font,
+  maxWidth: 500,
+  maxHeight: 100,
+  whiteSpace: "nowrap",
+});
+```
+
+Supports optional `lineHeight` (`"normal"` or a numeric multiplier), `whiteSpace` (`"normal"` by default; `"nowrap"`/`"pre"` for one line per paragraph), `minFontSize` (default 1), and `maxFontSize` (default 1000).
 
 ## Inline SVG
 

package/dist/index.d.ts

@@ -205,6 +205,92 @@ declare function registerFontFromPath(path: string, nameAlias?: string): void;
  */
 declare function registeredFamilies(): string[];
 
+/**
+ * Normalized, computed CSS style after shorthand expansion.
+ * All dimension values are numbers (pixels) or percentage strings.
+ */
+type ComputedStyle = {
+    display?: "flex" | "none";
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    position?: "relative" | "absolute";
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    borderTopWidth?: number | string;
+    borderRightWidth?: number | string;
+    borderBottomWidth?: number | string;
+    borderLeftWidth?: number | string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderTopStyle?: string;
+    borderRightStyle?: string;
+    borderBottomStyle?: string;
+    borderLeftStyle?: string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    rowGap?: number;
+    columnGap?: number;
+    overflow?: string;
+    overflowX?: string;
+    overflowY?: string;
+    backgroundColor?: string;
+    color?: string;
+    opacity?: number;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundRepeat?: "repeat" | "no-repeat" | "repeat-x" | "repeat-y" | "space" | "round";
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: number | string;
+    fontStyle?: "normal" | "italic";
+    textAlign?: "left" | "center" | "right" | "justify";
+    textDecoration?: string;
+    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line";
+    wordBreak?: "normal" | "break-all" | "break-word" | "keep-all";
+    textOverflow?: "clip" | "ellipsis";
+    lineClamp?: number;
+    boxShadow?: string;
+    textShadow?: string;
+    transform?: string;
+    transformOrigin?: string;
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    filter?: string;
+    textBoxTrim?: "none" | "trim-start" | "trim-end" | "trim-both";
+    textBoxEdge?: string;
+    WebkitTextStrokeWidth?: number | string;
+    WebkitTextStrokeColor?: string;
+};
+
 /**
  * Options for {@link findLargestUsableFontSize}.
  */
@@ -219,6 +305,12 @@ type FindLargestUsableFontSizeOptions = {
     maxHeight: number;
     /** Line height — `"normal"` uses font metrics, numeric values are CSS multipliers */
     lineHeight?: number | "normal";
+    /**
+     * Whitespace handling, mirroring CSS. Use `"nowrap"` (or `"pre"`) to fit text
+     * on one line (per newline-separated paragraph) instead of wrapping to
+     * `maxWidth` (default: `"normal"`).
+     */
+    whiteSpace?: ComputedStyle["whiteSpace"];
     /** Minimum font size to consider (default: 1) */
     minFontSize?: number;
     /** Maximum font size to consider (default: 1000) */
@@ -229,6 +321,11 @@ type FindLargestUsableFontSizeOptions = {
  *
  * Uses binary search over integer font sizes, measuring with {@link layoutText}
  * at each step. Returns `minFontSize` if even the smallest size overflows.
+ *
+ * By default text wraps to `maxWidth` and is fit into the `maxWidth` × `maxHeight`
+ * box. Set `whiteSpace: "nowrap"` to fit the text on one line (per
+ * newline-separated paragraph) instead, in which case `maxWidth` constrains the
+ * full line width.
  */
 declare function findLargestUsableFontSize(options: FindLargestUsableFontSizeOptions): number;
 

package/dist/index.js

@@ -4049,6 +4049,7 @@ function findLargestUsableFontSize(options) {
     maxWidth,
     maxHeight,
     lineHeight = "normal",
+    whiteSpace,
     minFontSize = 1,
     maxFontSize = 1e3
   } = options;
@@ -4063,7 +4064,8 @@ function findLargestUsableFontSize(options) {
       fontFamily: font.name,
       fontWeight: font.weight,
       fontStyle: font.style,
-      lineHeight: lineHeight === "normal" ? void 0 : lineHeight
+      lineHeight: lineHeight === "normal" ? void 0 : lineHeight,
+      whiteSpace
     };
     const result = layoutText(text, style, maxWidth);
     if (result.width <= maxWidth && result.height <= maxHeight) {