@unmade/text-renderer 0.1.0 → 0.1.2

package/dist/node/index.d.ts

@@ -1,13 +1,91 @@
 import { default as default_2 } from 'opentype.js';
 import { SVGGlyphData } from '@unmade/svg-glyphs';
 
+export declare type BaselineType = 'flat' | 'curved';
+
+export declare type BoxDimensions = {
+    width: number;
+    height: number;
+    physicalWidth: number;
+    physicalHeight: number;
+    physicalUnits: MeasurementUnits;
+};
+
+export declare const DEFAULT_OUTLINE_FACTOR = 0.03125;
+
+/**
+ * Generate a path command to curve text and align that text to the top of the box
+ * We use two quadratic bezier curves[1] - one from the bottom left to the peak of the path, and a second, mirrored, from the peak to the end of the path
+ * Using two curves allows us to explicitly define the peak of the curve, which will be at the horizontal centre of the box, far enough down from the top of the box that there's space for the text
+ * SVG Quadratic curves require two sets of coordinates - a control point and end point, with the start point being the end point of the previous command
+ * [1] https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#B%C3%A9zier_Curves
+ *
+ * Curved text is not currently supported for multiline text so this does not handle multiline parameters
+ *
+ * @param boxWidth - the width of the box
+ * @param boxHeight - the height of the box
+ * @param textBaselineYPosition - the distance from the top of rendered text to the baseline
+ * @param textHeight - the height of the text being rendered
+ * @param verticalAlignment - the vertical alignment of the text
+ * @returns an SVG path command to draw the curve
+ */
+export declare const generateCurvedBaseline: (boxDimensions: BoxDimensions, textBaselineYPosition: number, textHeight: number, verticalAlignment: VerticalTextAlignmentValues) => string;
+
+/**
+ * Generate a path as a baseline for straight text
+ * This can be called multiple times for multiline text by incrementing the lineNumber parameter
+ *
+ * @param boxDimensions - dimensions of the box into which the text will be rendered
+ * @param totalHeightOfAllTextLines - combined measured height of all lines of text
+ * @param textBaselineYPosition - the y position of the measured baseline for this specific line of text
+ * @param heightOfThisTextLine - the height of this specific line of text
+ * @param verticalAlignment - vertical alignment of the text within the box
+ * @param lineNumber - the line number of this text line (starting from 0)
+ * @returns an SVG path command to draw the curve
+ */
+export declare const generateFlatBaseline: (boxDimensions: BoxDimensions, totalHeightOfAllTextLines: number, textBaselineYPosition: number, heightOfThisTextLine: number, verticalAlignment?: VerticalTextAlignmentValues, lineNumber?: number) => string;
+
 export declare const getFontCache: () => Map<any, any>;
 
-export declare interface LoadedFont {
-    font: default_2.Font;
+export declare const getFontSizeFromPhysicalSize: (font: LoadedFont, boxDimensions: BoxDimensions, physicalFontSize: PhysicalSize, textOutlineFactor?: number) => number;
+
+export declare const getRenderedText: (options: RenderTextOptions) => Promise<string>;
+
+export declare const getTextMetricsAtFontSize: (font: LoadedFont, text: string, fontSize: number, outlineFactor?: number) => {
+    width: number;
+    height: number;
+    baseline: number;
+};
+
+export declare type HorizontalTextAlignmentValues = 'left' | 'centre' | 'right' | 'distributed';
+
+export declare const LINE_HEIGHT = 1.1;
+
+export declare type LoadedFont = default_2.Font & LoadedFontExtras;
+
+declare interface LoadedFontExtras {
     svgGlyphs?: Map<number, SVGGlyphData>;
 }
 
 export declare const loadOpentypeFont: (fontUrl: string, fetchSVGGlyphs?: boolean) => Promise<LoadedFont>;
 
+export declare type MeasurementUnits = 'mm' | 'in';
+
+export declare type PhysicalSize = [height: number, units: MeasurementUnits];
+
+export declare interface RenderTextOptions {
+    text: string;
+    fontUrl: string;
+    physicalSize: PhysicalSize;
+    boxDimensions: BoxDimensions;
+    outlineFactor?: number;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    baseline?: BaselineType;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    fillColour?: string;
+    strokeColour?: string;
+}
+
+export declare type VerticalTextAlignmentValues = 'centre' | 'top' | 'bottom';
+
 export { }