/** * Ruler Core - Framework-agnostic ruler logic * * This module provides the core functionality for rendering rulers in the document editor. * It can be used by both the DOM painter (for per-page rulers) and Vue components * (for interactive overlay rulers). * * @module ruler-core */ /** * Page size in inches */ export type PageSize = { width: number; height: number; }; /** * Page margins in inches */ export type PageMargins = { left: number; right: number; top: number; bottom: number; }; /** * A single tick mark on the ruler */ export type RulerTick = { /** CSS class name suffix (e.g., 'main', 'half', 'eighth') */ size: 'main' | 'half' | 'eighth'; /** Height as CSS percentage string (e.g., '40%') */ height: string; /** Optional inch number label (only on main ticks) */ label?: number; /** X position in pixels from left edge */ x: number; }; /** * Complete ruler definition with ticks and margin positions */ export type RulerDefinition = { /** Width of the ruler in pixels */ widthPx: number; /** Height of the ruler in pixels */ heightPx: number; /** Array of tick marks */ ticks: RulerTick[]; /** Left margin handle position in pixels */ leftMarginPx: number; /** Right margin handle position in pixels */ rightMarginPx: number; /** Page width in inches (for calculations) */ pageWidthInches: number; }; /** * Configuration for ruler generation */ export type RulerConfig = { /** Page size in inches */ pageSize: PageSize; /** Page margins in inches */ pageMargins: PageMargins; /** Pixels per inch (default: 96) */ ppi?: number; /** Ruler height in pixels (default: 25) */ heightPx?: number; }; /** * Generate a complete ruler definition based on page configuration. * * This function creates an array of tick marks representing inch markers, * half-inch markers, and eighth-inch markers, along with margin handle positions. * * @param config - Ruler configuration including page size and margins * @returns Complete ruler definition with ticks and margin positions * @throws {Error} If PPI is not positive, page dimensions are not positive, or margins exceed page dimensions * * @example * ```typescript * const ruler = generateRulerDefinition({ * pageSize: { width: 8.5, height: 11 }, * pageMargins: { left: 1, right: 1, top: 1, bottom: 1 } * }); * console.log(ruler.ticks.length); // Number of tick marks * console.log(ruler.leftMarginPx); // 96 (1 inch * 96 PPI) * ``` */ export declare function generateRulerDefinition(config: RulerConfig): RulerDefinition; /** * Convert a pixel position to inches. * * @param px - Position in pixels * @param ppi - Pixels per inch (default: 96) * @returns Position in inches */ export declare function pxToInches(px: number, ppi?: number): number; /** * Convert inches to pixels. * * @param inches - Position in inches * @param ppi - Pixels per inch (default: 96) * @returns Position in pixels */ export declare function inchesToPx(inches: number, ppi?: number): number; /** * Calculate new margin value from handle position. * * @param handleX - Handle X position in pixels * @param side - Which margin side ('left' or 'right') * @param pageWidthPx - Total page width in pixels * @param ppi - Pixels per inch (default: 96) * @returns New margin value in inches */ export declare function calculateMarginFromHandle(handleX: number, side: 'left' | 'right', pageWidthPx: number, ppi?: number): number; /** * Clamp a handle position within valid bounds. * * @param handleX - Proposed handle X position in pixels * @param side - Which margin side ('left' or 'right') * @param otherHandleX - Position of the other handle in pixels * @param pageWidthPx - Total page width in pixels * @param minContentWidthPx - Minimum content width in pixels (default: 200) * @returns Clamped handle position in pixels * @throws {Error} If any input is not a finite number */ export declare function clampHandlePosition(handleX: number, side: 'left' | 'right', otherHandleX: number, pageWidthPx: number, minContentWidthPx?: number): number; /** * Ruler handle state for drag interactions */ export type RulerHandleState = { side: 'left' | 'right'; x: number; isDragging: boolean; initialX: number; }; /** * Create initial handle states from a ruler definition. * * @param definition - Ruler definition with margin positions * @returns Object with left and right handle states */ export declare function createHandleStates(definition: RulerDefinition): { left: RulerHandleState; right: RulerHandleState; }; /** * Configuration for ruler generation using pixel values directly. * Useful when working with the layout engine which uses pixels internally. */ export type RulerConfigPx = { /** Page width in pixels */ pageWidthPx: number; /** Page height in pixels */ pageHeightPx: number; /** Left margin in pixels */ leftMarginPx: number; /** Right margin in pixels */ rightMarginPx: number; /** Pixels per inch (default: 96) - used for tick spacing */ ppi?: number; /** Ruler height in pixels (default: 25) */ heightPx?: number; }; /** * Generate a ruler definition from pixel values. * * This is useful when integrating with the layout engine, which works in pixels. * The tick marks are still generated based on inch divisions for visual consistency. * * @param config - Ruler configuration with pixel values * @returns Complete ruler definition * @throws {Error} If PPI is not positive, page dimensions are not positive, or margins exceed page dimensions * * @example * ```typescript * // In DOM painter with pixel values from layout * const ruler = generateRulerDefinitionFromPx({ * pageWidthPx: 816, // 8.5 inches * 96 * pageHeightPx: 1056, // 11 inches * 96 * leftMarginPx: 96, // 1 inch * rightMarginPx: 96, // 1 inch * }); * ``` */ export declare function generateRulerDefinitionFromPx(config: RulerConfigPx): RulerDefinition; //# sourceMappingURL=ruler-core.d.ts.map