@kritzel/engine 0.4.31

package/dist/types/classes/tools/shape-tool.class.d.ts

@@ -0,0 +1,90 @@
+import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
+import { ShapeType } from '../../enums/shape-type.enum';
+import { ThemeAwareColor } from '../../constants/color-palette.constants';
+/**
+ * Shape tool for drawing geometric shapes (rectangles, ellipses, etc.) on the canvas.
+ * Creates shapes by tracking a drag gesture to define the bounding box.
+ * Supports configurable shape type, fill color, stroke color, stroke width, opacity, and text properties.
+ * Automatically switches to selection tool after shape completion.
+ */
+export declare class KritzelShapeTool extends KritzelBaseTool {
+    toolType: "shape";
+    /** The type of shape to create (rectangle, ellipse, etc.) */
+    shapeType: ShapeType;
+    /** The fill color of the shape (supports theme-aware light/dark colors) */
+    fillColor: ThemeAwareColor;
+    /** The stroke color of the shape border */
+    strokeColor: ThemeAwareColor;
+    /** The stroke width of the shape border in pixels */
+    strokeWidth: number;
+    /** The opacity of the shape (0-1) */
+    opacity: number;
+    /** The font family for text inside the shape */
+    fontFamily: string;
+    /** The font size for text inside the shape in pixels */
+    fontSize: number;
+    /** The font color for text inside the shape */
+    fontColor: ThemeAwareColor;
+    /** Available color palette for the shape tool */
+    palette: ThemeAwareColor[];
+    /** Available stroke size presets for the shape tool */
+    sizes: number[];
+    /** X coordinate where the shape drawing started */
+    private startX;
+    /** Y coordinate where the shape drawing started */
+    private startY;
+    /** Whether currently drawing a shape */
+    private isDrawing;
+    /** Reference to the shape being drawn */
+    private currentShape;
+    /**
+     * Creates a new instance of KritzelShapeTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core: KritzelCore);
+    /**
+     * Handles pointer down events to start drawing a new shape or edit an existing one.
+     * If clicking on an existing shape, enters edit mode to modify its text content.
+     * Otherwise, begins drawing a new shape at the pointer position.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event: PointerEvent): void;
+    /**
+     * Handles pointer move events to update the shape size while drawing.
+     * Updates the current shape's dimensions based on the distance from the start point.
+     * Only processes events when actively drawing a shape.
+     * @param event - The PointerEvent containing the current pointer position
+     */
+    handlePointerMove(event: PointerEvent): void;
+    /**
+     * Handles pointer up events to complete the shape drawing.
+     * Finalizes the shape if large enough, or removes it if too small (accidental click).
+     * Switches to selection tool with the shape selected after completion.
+     * @param event - The PointerEvent indicating the end of the drawing gesture
+     */
+    handlePointerUp(event: PointerEvent): void;
+    /**
+     * Initializes the shape drawing process at the given screen coordinates.
+     * Creates a new KritzelShape object with initial dimensions of 1x1 pixel.
+     * Follows the same coordinate pattern as LineTool/BrushTool for consistency.
+     * @param clientX - The X coordinate in screen/client space
+     * @param clientY - The Y coordinate in screen/client space
+     */
+    private startDrawing;
+    /**
+     * Updates the shape's dimensions based on the current pointer position.
+     * Calculates the bounding box from start point to current point and updates
+     * the shape's position and size accordingly. Handles negative drag directions.
+     * @param clientX - The current X coordinate in screen/client space
+     * @param clientY - The current Y coordinate in screen/client space
+     */
+    private updateShapeSize;
+    /**
+     * Completes the shape drawing process.
+     * Removes shapes smaller than 10x10 pixels (accidental clicks).
+     * For valid shapes, assigns z-index, updates the store, emits change event,
+     * selects the shape, and switches to selection tool.
+     */
+    private finishDrawing;
+}

package/dist/types/classes/tools/text-tool.class.d.ts

@@ -0,0 +1,66 @@
+import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
+import { ThemeAwareColor } from '../../constants/color-palette.constants';
+import { KritzelFontRegistration } from '../../interfaces/font.interface';
+/**
+ * Text tool for creating and editing text objects on the canvas.
+ * Clicking creates a new text object at the pointer position and enters edit mode.
+ * Clicking on an existing text object enters edit mode for that object.
+ * Supports configurable font family, size, color, and opacity.
+ */
+export declare class KritzelTextTool extends KritzelBaseTool {
+    toolType: "text";
+    /** Backing field for {@link fontFamily}. */
+    private _fontFamily;
+    /** Backing field for {@link fontSize}. */
+    private _fontSize;
+    /** Backing field for {@link fontColor}. */
+    private _fontColor;
+    /** Backing field for {@link opacity}. */
+    private _opacity;
+    /** The font family for new text objects. */
+    get fontFamily(): string;
+    set fontFamily(value: string);
+    /** The font size for new text objects in pixels. */
+    get fontSize(): number;
+    set fontSize(value: number);
+    /** The font color for new text objects (supports theme-aware light/dark colors). */
+    get fontColor(): ThemeAwareColor;
+    set fontColor(value: ThemeAwareColor);
+    /** The opacity of new text objects (0-1). */
+    get opacity(): number;
+    set opacity(value: number);
+    /** Available color palette for the text tool */
+    palette: ThemeAwareColor[];
+    /** Available font size presets for the text tool */
+    sizes: number[];
+    /** Optional custom font options supplied through tool config. */
+    availableFonts?: KritzelFontRegistration[];
+    /**
+     * Creates a new instance of KritzelTextTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core: KritzelCore);
+    /**
+     * Propagates a property change to the text object that is currently being edited, if any.
+     * Mirrors the selection tool pattern of pushing tool-config changes down to live objects,
+     * but scoped to the single text in edit mode rather than the current selection.
+     */
+    private applyToActiveText;
+    /**
+     * Handles pointer down events for text creation and editing.
+     * If clicking on an existing text object, enters edit mode for that object.
+     * If there's an active text being edited and clicking elsewhere, saves the active text
+     * and switches to selection tool. If clicking on empty space, creates a new text object
+     * at that position and enters edit mode.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event: PointerEvent): void;
+    /**
+     * Handles pointer up events for text editing focus management.
+     * If there's an active text that is mounted but doesn't have focus,
+     * focuses the text editor at the pointer position to allow typing.
+     * @param event - The PointerEvent containing the pointer position for focus placement
+     */
+    handlePointerUp(event: PointerEvent): void;
+}

package/dist/types/components/kritzel-awareness-cursors/kritzel-awareness-cursors.d.ts

@@ -0,0 +1,29 @@
+import { KritzelCore } from '../../classes/core/core.class';
+import { KritzelRemoteCursorState } from '../../interfaces/remote-cursor.interface';
+export declare class KritzelAwarenessCursors {
+    core: KritzelCore;
+    showEdgeIndicators: boolean;
+    edgeIndicatorPadding: number;
+    remoteCursors: Map<number, KritzelRemoteCursorState>;
+    objectVersion: number;
+    private cleanupIntervalId;
+    private objectChangeRafId;
+    private removeAwarenessChangeListener;
+    private removeObjectsChangeListener;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleAwarenessChange;
+    private cleanupStaleCursors;
+    private isStale;
+    private hasActiveDrawingCursors;
+    private handleRemoteObjectChange;
+    private getActiveObjectTip;
+    private worldToScreen;
+    private isInViewport;
+    private clampToEdge;
+    private getUserDisplayName;
+    private getInitials;
+    render(): any;
+    private renderCursor;
+    private renderEdgeIndicator;
+}

package/dist/types/components/kritzel-cursor-trail/kritzel-cursor-trail.d.ts

@@ -0,0 +1,19 @@
+import { KritzelCore } from '../../classes/core/core.class';
+export declare class KritzelCursorTrail {
+    core: KritzelCore;
+    cursorTrailPoints: Array<{
+        x: number;
+        y: number;
+        timestamp: number;
+    }>;
+    isLeftButtonDown: boolean;
+    handleMouseDown(ev: PointerEvent): void;
+    handlePointerMove(ev: PointerEvent): void;
+    handlePointerUp(ev: PointerEvent): void;
+    private trailCleanupIntervalId;
+    private readonly TRAIL_DURATION_MS;
+    private readonly MAX_TRAIL_POINTS;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}