@snowcone-app/canvas 0.1.0

package/dist/core/ResizeHandler.d.ts

@@ -0,0 +1,51 @@
+import { TextElement } from './TextElement.js';
+import { Point, ResizeAnchor, TransformStartData } from '../types/index.js';
+interface HandleInfo {
+    anchor: ResizeAnchor;
+    type?: string;
+    cursor?: string;
+    x?: number;
+    y?: number;
+}
+export declare class ResizeHandler {
+    /**
+     * Calculate new dimensions and position for a resize operation
+     */
+    static calculateResize({ element, handle, dx, dy, startData, snapSystem, }: {
+        element: TextElement;
+        handle: HandleInfo;
+        dx: number;
+        dy: number;
+        startData: TransformStartData;
+        snapSystem?: {
+            activeSnaps?: {
+                x?: unknown;
+                y?: unknown;
+            };
+        } | null;
+    }): {
+        element: TextElement;
+        isFrozen?: boolean;
+        unfrozenDimensions?: {
+            width: number;
+            height: number;
+        };
+    };
+    /**
+     * Calculate position offset to keep opposite corner fixed
+     * Uses visual bounding box and rotation anchor for proper rotated resize
+     * @private
+     */
+    static _calculateFixedCornerOffset({ element, updatedElement, handle, rotationAnchor, }: {
+        element: TextElement;
+        updatedElement: TextElement;
+        handle: HandleInfo;
+        rotationAnchor: Point;
+    }): Point;
+    /**
+     * Get local coordinates of the fixed point for a given handle
+     * @private
+     */
+    static _getFixedLocalCoords(anchor: ResizeAnchor, width: number, height: number): Point;
+}
+export default ResizeHandler;

package/dist/core/ResizePipeline.d.ts

@@ -0,0 +1,83 @@
+import { BaseElement } from './BaseElement.js';
+import { TextElement } from './TextElement.js';
+import { TransformStartData, ResizeAnchor } from '../types/index.js';
+type HookStage = 'beforeResize' | 'afterResize' | 'beforePositionUpdate' | 'afterPositionUpdate';
+interface HandleInfo {
+    anchor: ResizeAnchor;
+    type?: string;
+    cursor?: string;
+    x?: number;
+    y?: number;
+}
+interface ResizeParams {
+    element: TextElement;
+    handle: HandleInfo;
+    dx: number;
+    dy: number;
+    startData: TransformStartData;
+    allElements?: BaseElement[] | null;
+    snapSystem?: {
+        activeSnaps?: {
+            x?: unknown;
+            y?: unknown;
+        };
+    } | null;
+}
+interface ResizeResult {
+    element: TextElement;
+    isFrozen?: boolean;
+    unfrozenDimensions?: {
+        width: number;
+        height: number;
+    };
+    handle?: HandleInfo;
+    startData?: TransformStartData;
+}
+type HookFn<T> = (data: T) => T | undefined;
+export declare class ResizePipeline {
+    hooks: Record<HookStage, HookFn<unknown>[]>;
+    constructor();
+    /**
+     * Add a hook at a specific stage
+     * @param stage - 'beforeResize', 'afterResize', 'beforePositionUpdate', 'afterPositionUpdate'
+     * @param fn - Hook function
+     */
+    addHook(stage: HookStage, fn: HookFn<unknown>): void;
+    /**
+     * Remove a hook
+     */
+    removeHook(stage: HookStage, fn: HookFn<unknown>): void;
+    /**
+     * Clear all hooks at a stage
+     */
+    clearHooks(stage: HookStage): void;
+    /**
+     * Clear all hooks
+     */
+    clearAllHooks(): void;
+    /**
+     * Run hooks at a specific stage
+     */
+    runHooks<T>(stage: HookStage, data: T): T;
+    /**
+     * Execute resize with hooks
+     */
+    executeResize(params: ResizeParams): ResizeResult;
+    /**
+     * Execute position update with hooks
+     * Used for drag operations
+     */
+    executePositionUpdate(position: {
+        x: number;
+        y: number;
+    }, element: BaseElement): {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Singleton instance for the application
+ * This allows hooking into resize operations globally
+ */
+export declare const globalResizePipeline: ResizePipeline;
+export {};

package/dist/core/ResizeUtils.d.ts

@@ -0,0 +1,17 @@
+import { TextElement } from './TextElement.js';
+import { TransformStartData } from '../types/index.js';
+/**
+ * Handle corner resize (uniform scaling)
+ * Corner handles scale both fontSize and width proportionally
+ */
+export declare function handleCornerResize(element: TextElement, newWidth: number, startData: TransformStartData): void;
+/**
+ * Handle side resize (width only, no fontSize change)
+ * Side handles only change width while keeping fontSize constant
+ */
+export declare function handleSideResize(element: TextElement, anchor: string, newWidth: number, startData: TransformStartData): void;
+/**
+ * Standard resize implementation for transforms with width-based containers
+ * Handles both corner (uniform scale) and side (width only) handles
+ */
+export declare function standardResize(element: TextElement, anchor: string, newWidth: number, _newHeight: number, startData: TransformStartData): void;

package/dist/core/RotationAnchorResolver.d.ts

@@ -0,0 +1,60 @@
+import { BaseElement } from './BaseElement.js';
+import { Point } from '../types/index.js';
+/** Named anchor points for snap alignment */
+interface SnapAnchors {
+    topLeft: Point;
+    topRight: Point;
+    bottomLeft: Point;
+    bottomRight: Point;
+    topCenter: Point;
+    rightCenter: Point;
+    bottomCenter: Point;
+    leftCenter: Point;
+    center: Point;
+    rotation: Point;
+    [key: string]: Point;
+}
+/** Edge line represented by start and end points */
+interface EdgeLine {
+    start: Point;
+    end: Point;
+}
+export declare class RotationAnchorResolver {
+    /**
+     * Resolve rotation anchor with clear precedence:
+     * 1. Transform's getRotationAnchor() if overridden
+     * 2. Center of visual bounding box (default)
+     */
+    static resolve(element: BaseElement): Point;
+    /**
+     * Get all snap-able anchor points for an element
+     * Used for alignment snapping feature
+     *
+     * Returns 9 standard anchor points plus the rotation anchor:
+     * - 4 corners (top-left, top-right, bottom-left, bottom-right)
+     * - 4 edge midpoints (top, right, bottom, left)
+     * - 1 center
+     * - 1 rotation anchor (may be same as center)
+     */
+    static getSnapAnchors(element: BaseElement): SnapAnchors;
+    /**
+     * Get edge lines for an element (for edge-to-edge snapping)
+     *
+     * Returns 4 lines representing the element's edges:
+     * - top: left to right
+     * - right: top to bottom
+     * - bottom: right to left
+     * - left: bottom to top
+     */
+    static getEdgeLines(element: BaseElement): Record<string, EdgeLine>;
+    /**
+     * Get all anchor types as array (for iteration)
+     */
+    static getAnchorTypes(): string[];
+    /**
+     * Check if an element has a custom rotation anchor
+     * (different from center of visual bbox)
+     */
+    static hasCustomRotationAnchor(element: BaseElement): boolean;
+}
+export {};

package/dist/core/RotationUtils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * RotationUtils - Centralized rotation convention utilities
+ *
+ * Convention: Clockwise rotations in UI are represented as positive degrees,
+ * but canvas rendering uses counter-clockwise rotation (hence the negative sign).
+ */
+export declare const RotationUtils: {
+    /**
+     * Forward transform (local → world, for rendering)
+     * Converts degrees to radians with the canvas convention (negative = clockwise)
+     * @param {number} degrees - Rotation in degrees (positive = clockwise in UI)
+     * @returns {number} Rotation in radians for canvas context
+     */
+    toRadians(degrees: number): number;
+    /**
+     * Inverse transform (world → local, for hit testing)
+     * Converts degrees to radians without negation
+     * @param {number} degrees - Rotation in degrees
+     * @returns {number} Rotation in radians
+     */
+    toRadiansInverse(degrees: number): number;
+    /**
+     * Normalize angle to -180 to +180 range
+     * @param {number} degrees - Angle in degrees
+     * @returns {number} Normalized angle in range [-180, 180]
+     */
+    normalize(degrees: number): number;
+};

package/dist/core/SelectionRenderer.d.ts

@@ -0,0 +1,24 @@
+import { BaseElement } from './BaseElement.js';
+import { TransformHandles } from './TransformHandles.js';
+import { InteractionStateMachine } from './InteractionStateMachine.js';
+import { HandleInfo } from '../types/index.js';
+interface HoverState {
+    type: 'element' | 'resize-handle' | 'rotation-handle' | null;
+    data?: BaseElement | HandleInfo | null;
+}
+export declare class SelectionRenderer {
+    /**
+     * Render selection box layer
+     */
+    static renderSelectionLayer(ctx: CanvasRenderingContext2D, selectedElement: BaseElement | null, stateMachine: InteractionStateMachine, zoom?: number): void;
+    /**
+     * Render position and size info below the selected element
+     * Only shows dimensions (width x height) while resizing
+     */
+    static renderPositionSizeInfo(ctx: CanvasRenderingContext2D, selectedElement: BaseElement | null, transformHandles: TransformHandles | null, stateMachine: InteractionStateMachine | null, zoom?: number): void;
+    /**
+     * Render transform handles layer
+     */
+    static renderHandlesLayer(ctx: CanvasRenderingContext2D, selectedElement: BaseElement | null, transformHandles: TransformHandles, currentRotation: number, isRotating: boolean, hoverState: HoverState, stateMachine: InteractionStateMachine, zoom?: number, showRotationHandle?: boolean): void;
+}
+export {};

package/dist/core/ShapeElement.d.ts

@@ -0,0 +1,121 @@
+import { BaseElement } from './BaseElement.js';
+import { ShapeTransformData, ShapeElementConfig, ResizeAnchor, BoundingBox, Point, TransformStartData } from '../types/index.js';
+export declare class ShapeElement extends BaseElement {
+    transformType: 'shape';
+    transformData: ShapeTransformData;
+    constructor(config?: Partial<ShapeElementConfig>);
+    /**
+     * Get bounding box in world coordinates
+     * Returns the unrotated dimensions - rotation is handled by the renderer
+     */
+    getBoundingBox(): BoundingBox;
+    /**
+     * Tight visual bounding box for selection chrome.
+     *
+     * `getBoundingBox()` returns the conceptual `width × height` rect
+     * the resize handles act on. Many shape types (circle, polygon,
+     * star) render *inscribed* in that rect — their visible extent is
+     * smaller than the box, leaving empty corners. The selection
+     * border / handles use this tighter bbox so it hugs what the user
+     * actually sees instead of including the empty padding.
+     *
+     * For shapes that fill their box (rectangle, ellipse, triangle,
+     * line) this falls through to `getBoundingBox()`.
+     *
+     * Stroke is intentionally excluded — same convention as
+     * `getBoundingBox()`. The chrome aligns with the *fill* edge.
+     */
+    getVisualBoundingBox(): BoundingBox;
+    /**
+     * Get rotation anchor point (center of the shape)
+     */
+    getRotationAnchor(): Point;
+    /**
+     * Render the shape
+     */
+    render(ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    /**
+     * Render fill+stroke to a temporary canvas at full opacity, then composite
+     * at element opacity. Prevents fill/stroke overlap from compounding.
+     */
+    private renderWithOffscreen;
+    /**
+     * Direct render (no offscreen) — used as fallback
+     */
+    private renderDirect;
+    /**
+     * Trace the shape path without filling or stroking — used by offscreen render
+     */
+    private traceShapePath;
+    /**
+     * Render the stroke for this shape element
+     */
+    private renderStroke;
+    /**
+     * Render the specific shape based on shapeType
+     */
+    private renderShape;
+    /**
+     * Render a rectangle (with optional border radius)
+     */
+    private renderRectangle;
+    /**
+     * Render a circle
+     */
+    private renderCircle;
+    /**
+     * Render an ellipse
+     */
+    private renderEllipse;
+    /**
+     * Render a triangle (isosceles, pointing up)
+     */
+    private renderTriangle;
+    /**
+     * Render a regular polygon
+     */
+    private renderPolygon;
+    /**
+     * Render a star
+     */
+    private renderStar;
+    /**
+     * Render a line
+     */
+    private renderLine;
+    /**
+     * Handle resize - maintain aspect ratio for circles, free resize for others
+     */
+    resize(anchor: ResizeAnchor, newWidth: number, newHeight: number, startData: TransformStartData): boolean;
+    /**
+     * Get the opposite anchor (the one that should stay fixed during resize)
+     */
+    private getOppositeAnchor;
+    /**
+     * Get the position of the fixed corner (opposite of dragged anchor)
+     */
+    private getFixedCorner;
+    /**
+     * Get the offset of a corner from the center
+     */
+    private getCornerOffset;
+    /**
+     * Get enabled anchors - all 8 anchors for most shapes, only corners for circles/polygons
+     */
+    getEnabledAnchors(): ResizeAnchor[];
+    /**
+     * Clone this element
+     */
+    clone(): ShapeElement;
+    /**
+     * Serialize to JSON
+     */
+    toJSON(): ShapeElementConfig & {
+        id: string;
+        type: 'shape';
+        x: number;
+        y: number;
+        rotation: number;
+    };
+}
+export default ShapeElement;

package/dist/core/SpacingSystem.d.ts

@@ -0,0 +1,73 @@
+import { BaseElement } from './BaseElement.js';
+import { SpacingIndicator } from '../types/index.js';
+interface SpacingSystemOptions {
+    detectionThreshold?: number;
+    minDistance?: number;
+    enabled?: boolean;
+    showLabels?: boolean;
+}
+export declare class SpacingSystem {
+    detectionThreshold: number;
+    minDistance: number;
+    enabled: boolean;
+    showLabels: boolean;
+    indicators: SpacingIndicator[];
+    lastSnapTarget: {
+        x: number;
+        y: number;
+    } | null;
+    constructor(options?: SpacingSystemOptions);
+    /**
+     * Enable or disable spacing detection
+     */
+    setEnabled(enabled: boolean): void;
+    /**
+     * Set detection threshold in pixels
+     */
+    setDetectionThreshold(threshold: number): void;
+    /**
+     * Get current spacing indicators for rendering
+     */
+    getIndicators(): SpacingIndicator[];
+    /**
+     * Clear all spacing indicators
+     */
+    clearIndicators(): void;
+    /**
+     * Snap position to match consistent spacing patterns
+     * Returns adjusted position if spacing snap is detected, otherwise returns original position
+     */
+    snapToSpacing(position: {
+        x: number;
+        y: number;
+    }, movingElement: BaseElement, allElements: BaseElement[] | null): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Detect spacing between a moving element and other elements
+     * Returns spacing indicators for the closest elements in each direction
+     * Also detects consistent spacing patterns (e.g., evenly spaced rows/columns)
+     * @param showAllMeasurements - When true (Alt key held), shows all spacing measurements, not just to moving element
+     */
+    detectSpacing(movingElement: BaseElement, allElements: BaseElement[] | null, showAllMeasurements?: boolean): SpacingIndicator[];
+    /**
+     * Detect spacing from hovered element to ALL nearby elements (when Alt key is held)
+     * Shows measurements from the hovered element to other elements within detection threshold
+     */
+    private detectAllMeasurements;
+    /**
+     * Detect consistent spacing patterns (e.g., evenly spaced rows/columns)
+     * and create indicators for all matching spacings
+     */
+    private detectConsistentSpacing;
+    /**
+     * Check if spacing would snap to a pattern
+     */
+    private checkIfWouldSnap;
+    /**
+     * Helper method to add a spacing indicator in a specific direction
+     */
+    private addIndicatorForDirection;
+}
+export {};

package/dist/core/SpatialGrid.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SpatialGrid - Grid-based spatial index for O(1) amortized position lookups.
+ *
+ * Used by AlignmentSnapSystem to avoid scanning all elements when looking
+ * for snap candidates. Points are bucketed into grid cells of fixed size.
+ * Queries check only the cells that overlap the search radius, giving
+ * O(1) amortized lookup when the number of results is small relative to
+ * the total item count.
+ */
+/** An item stored in the spatial grid. */
+export interface SpatialGridItem {
+    x: number;
+    y: number;
+    id: string;
+}
+export declare class SpatialGrid {
+    private cellSize;
+    private cells;
+    /** Reverse index: id -> set of cell keys that contain items with that id */
+    private idIndex;
+    constructor(cellSize: number);
+    /** Clear all entries */
+    clear(): void;
+    /** Insert a point into the grid */
+    insert(item: SpatialGridItem): void;
+    /** Remove all items with matching id */
+    removeById(id: string): void;
+    /**
+     * Query all items within `radius` of point (x, y), excluding given id.
+     *
+     * Checks all cells that overlap the axis-aligned bounding box
+     * [x - radius, x + radius] x [y - radius, y + radius].
+     * Each candidate is then distance-checked against the radius.
+     */
+    queryNear(x: number, y: number, radius: number, excludeId?: string): SpatialGridItem[];
+    /**
+     * Query all items whose coordinate on `axis` is within `radius` of the
+     * given value, excluding a given id. Unlike `queryNear` (Euclidean),
+     * this checks only one axis -- essential for alignment snapping where
+     * two anchors may be far apart on one axis but perfectly aligned on
+     * the other.
+     *
+     * For axis='x': finds items where |item.x - value| <= radius
+     * For axis='y': finds items where |item.y - value| <= radius
+     *
+     * Scans all cells in the band along the target axis.
+     */
+    queryNearAxis(axis: 'x' | 'y', value: number, radius: number, excludeId?: string): SpatialGridItem[];
+    /** Rebuild from a full list of items (clears existing data first) */
+    rebuild(items: SpatialGridItem[]): void;
+    /** Get the cell key for a given world-space coordinate */
+    private getCellKey;
+}

package/dist/core/TextElement.d.ts

@@ -0,0 +1,80 @@
+import { BaseElement } from './BaseElement.js';
+import { TextAlign, BoundingBox, BaseTextElementConfig, ResizeAnchor, GlyphOverride, OpenTypeFeatures, CharacterStyle, TransformStartData, RichText } from '../types/index.js';
+export declare class TextElement extends BaseElement {
+    richText?: RichText;
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    color: string;
+    textAlign: TextAlign;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    glyphOverrides?: GlyphOverride[];
+    openTypeFeatures?: OpenTypeFeatures;
+    constructor(config?: Partial<BaseTextElementConfig>);
+    /**
+     * Get bounding box in world coordinates
+     * Must be implemented by subclasses
+     */
+    getBoundingBox(): BoundingBox;
+    /**
+     * Render the element
+     * Must be implemented by subclasses
+     */
+    render(_ctx: CanvasRenderingContext2D, _isSelected?: boolean, _isHovered?: boolean): void;
+    /**
+     * Serialize to JSON
+     */
+    toJSON(): BaseTextElementConfig;
+    /**
+     * Clone this element
+     */
+    clone(): TextElement;
+    /**
+     * Update text content
+     * @param newText - Plain text to set (resets to element defaults)
+     */
+    setText(newText: string): void;
+    /**
+     * Get the plain text content
+     */
+    getText(): string;
+    /**
+     * Get the rich text object
+     */
+    getRichText(): RichText;
+    /**
+     * Set the rich text object
+     */
+    setRichText(newRichText: RichText): void;
+    /**
+     * Get the element-level default style
+     */
+    getDefaultStyle(): CharacterStyle;
+    /**
+     * Apply character-level formatting to a text range
+     */
+    applyFormatting(start: number, end: number, style: CharacterStyle): void;
+    /**
+     * Update font size
+     */
+    setFontSize(newFontSize: number): void;
+    /**
+     * Update color
+     * Updates both element-level default and all rich text spans that currently match the old color
+     */
+    setColor(newColor: string): void;
+    /**
+     * Handle resize transform
+     * Must be implemented by subclasses
+     */
+    resize(_anchor: ResizeAnchor, _newWidth: number, _newHeight: number, _startData: TransformStartData): void | boolean;
+    /**
+     * Called when transform starts
+     * Returns data to be passed to resize()
+     */
+    getTransformStartData(): TransformStartData;
+}
+export default TextElement;