kritzel-react 0.1.30 → 0.1.32

package/dist/types/kritzel-stencil/src/helpers/object.helper.d.ts

@@ -0,0 +1,4 @@
+export declare class ObjectHelper {
+    static generateUUID(): string;
+    static isEmpty(obj: any): boolean;
+}

package/dist/types/kritzel-stencil/src/helpers/theme.helper.d.ts

@@ -0,0 +1,41 @@
+import { KritzelTheme } from '../interfaces/theme.interface';
+export declare class ThemeHelper {
+    /**
+     * Converts a camelCase string to kebab-case.
+     * @example ThemeHelper.camelToKebab('controlHoverBackgroundColor') → 'control-hover-background-color'
+     * @example ThemeHelper.camelToKebab('backgroundColor') → 'background-color'
+     * @example ThemeHelper.camelToKebab('gap') → 'gap'
+     */
+    static camelToKebab(str: string): string;
+    /**
+     * Recursively flattens a theme object into a map of CSS variable names to values.
+     * Skips the 'name' property at the root level since it's the theme identifier, not a CSS value.
+     *
+     * @param theme - The theme object to flatten
+     * @param prefix - The CSS variable prefix (default: '--kritzel')
+     * @returns A Map of CSS variable names to their values
+     *
+     * @example
+     * ThemeHelper.flattenThemeToVariables(lightTheme)
+     * // Returns Map {
+     * //   '--kritzel-global-pointer-cursor' => 'pointer',
+     * //   '--kritzel-controls-gap' => '8px',
+     * //   ...
+     * // }
+     */
+    static flattenThemeToVariables(theme: KritzelTheme, prefix?: string): Map<string, string>;
+    /**
+     * Applies a map of CSS variables to an HTML element.
+     *
+     * @param element - The target HTML element
+     * @param variables - A Map of CSS variable names to values
+     */
+    static applyVariablesToElement(element: HTMLElement, variables: Map<string, string>): void;
+    /**
+     * Convenience method that flattens a theme and applies it to an element in one call.
+     *
+     * @param element - The target HTML element
+     * @param theme - The theme object to apply
+     */
+    static applyThemeToElement(element: HTMLElement, theme: KritzelTheme): void;
+}

package/dist/types/kritzel-stencil/src/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export type * from './components';
+export * from './classes/objects/text.class';
+export * from './classes/objects/path.class';
+export * from './classes/objects/image.class';
+export * from './classes/objects/line.class';
+export * from './classes/objects/group.class';
+export * from './classes/tools/brush-tool.class';
+export * from './classes/tools/line-tool.class';
+export * from './classes/tools/eraser-tool.class';
+export * from './classes/tools/image-tool.class';
+export * from './classes/tools/text-tool.class';
+export * from './helpers/cursor.helper';
+export * from './classes/tools/selection-tool.class';
+export * from './classes/providers/broadcast-sync-provider.class';
+export * from './classes/providers/indexeddb-sync-provider.class';
+export * from './classes/providers/websocket-sync-provider.class';
+export * from './classes/providers/hocuspocus-sync-provider.class';
+export * from './classes/structures/app-state-map.structure';
+export * from './classes/core/workspace.class';
+export * from './classes/managers/anchor.manager';
+export * from './interfaces/toolbar-control.interface';
+export * from './interfaces/menu-item.interface';
+export * from './interfaces/sync-provider.interface';
+export * from './interfaces/sync-config.interface';
+export * from './interfaces/anchor.interface';
+export * from './configs/default-brush-tool.config';
+export * from './configs/default-text-tool.config';
+export * from './configs/default-line-tool.config';
+export * from './interfaces/theme.interface';
+export * from './interfaces/shortcut.interface';
+export * from './themes/light-theme';
+export * from './themes/dark-theme';
+export * from './classes/managers/theme.manager';

package/dist/types/kritzel-stencil/src/interfaces/anchor.interface.d.ts

@@ -0,0 +1,137 @@
+/**
+ * Represents an anchor connection from a line endpoint to another object's center.
+ */
+export interface LineAnchor {
+    /** The ID of the object that this line endpoint is anchored to */
+    objectId: string;
+}
+/**
+ * Entry in the anchor index that tracks which lines are anchored to an object.
+ */
+export interface AnchorIndexEntry {
+    /** The ID of the line that has an anchor */
+    lineId: string;
+    /** Which endpoint of the line is anchored */
+    endpoint: 'start' | 'end';
+}
+/**
+ * Represents a potential snap target during line endpoint dragging.
+ */
+export interface SnapTarget {
+    /** The ID of the object that can be snapped to */
+    objectId: string;
+    /** The center X coordinate of the snap target in world coordinates */
+    centerX: number;
+    /** The center Y coordinate of the snap target in world coordinates */
+    centerY: number;
+}
+/**
+ * Represents the current snap candidate state during dragging.
+ */
+export interface SnapCandidate {
+    /** The ID of the object being snapped to */
+    objectId: string;
+    /** Which endpoint of the line is being snapped */
+    endpoint: 'start' | 'end';
+    /** The center X coordinate for the snap indicator */
+    centerX: number;
+    /** The center Y coordinate for the snap indicator */
+    centerY: number;
+    /** The X coordinate of the line endpoint (world coords) */
+    lineEndpointX: number;
+    /** The Y coordinate of the line endpoint (world coords) */
+    lineEndpointY: number;
+    /** The X coordinate where the line intersects the object's edge (world coords) */
+    edgeX?: number;
+    /** The Y coordinate where the line intersects the object's edge (world coords) */
+    edgeY?: number;
+    /** The stroke color of the line being snapped */
+    lineStroke?: string;
+    /** The stroke width of the line being snapped */
+    lineStrokeWidth?: number;
+    /** Arrow offset to apply to the edge point (in world coords) */
+    arrowOffset?: number;
+    /** Arrow style for the snapping endpoint */
+    arrowStyle?: 'triangle' | 'open' | 'diamond' | 'circle';
+    /** Arrow fill color */
+    arrowFill?: string;
+    /** The X coordinate of the control point (world coords), if any */
+    controlX?: number;
+    /** The Y coordinate of the control point (world coords), if any */
+    controlY?: number;
+    /** The t parameter on the curve where the edge intersection occurs (0-1) */
+    t?: number;
+}
+/**
+ * Visualization data for rendering anchor indicator lines.
+ */
+export interface AnchorVisualization {
+    /** The X coordinate where the line intersects the object's edge */
+    edgeX: number;
+    /** The Y coordinate where the line intersects the object's edge */
+    edgeY: number;
+    /** The center X coordinate of the anchored object */
+    centerX: number;
+    /** The center Y coordinate of the anchored object */
+    centerY: number;
+    /** Optional SVG path describing the curved dashed segment */
+    pathD?: string;
+}
+/**
+ * Render data for anchor lines visualization (dashed lines from edge to center).
+ */
+export interface AnchorLinesRenderData {
+    /** The stroke width of the line */
+    lineStrokeWidth: number;
+    /** The stroke width for the indicator circle */
+    indicatorStrokeWidth: string;
+    /** The dash array for the dashed line */
+    dashArray: string;
+    /** The radius of the indicator circle */
+    indicatorRadius: number;
+    /** Visualization data for the start anchor, if any */
+    startAnchorViz: AnchorVisualization | null;
+    /** Visualization data for the end anchor, if any */
+    endAnchorViz: AnchorVisualization | null;
+}
+/**
+ * Render data for snap indicator visualization.
+ */
+export interface SnapIndicatorRenderData {
+    /** The radius of the indicator circle */
+    indicatorRadius: number;
+    /** The stroke width for the indicator circle */
+    indicatorStrokeWidth: string;
+    /** The stroke width for the line */
+    lineStrokeWidth: string;
+    /** The dash array for the dashed line */
+    dashArray: string;
+    /** The stroke color of the line */
+    lineStroke: string;
+    /** The center X coordinate */
+    centerX: number;
+    /** The center Y coordinate */
+    centerY: number;
+    /** The X coordinate of the line endpoint */
+    lineEndpointX: number;
+    /** The Y coordinate of the line endpoint */
+    lineEndpointY: number;
+    /** The X coordinate where the line intersects the object's edge */
+    edgeX?: number;
+    /** The Y coordinate where the line intersects the object's edge */
+    edgeY?: number;
+    /** Arrow offset to apply to the edge point */
+    arrowOffset?: number;
+    /** Arrow style for the snapping endpoint */
+    arrowStyle?: 'triangle' | 'open' | 'diamond' | 'circle';
+    /** Arrow fill color */
+    arrowFill?: string;
+    /** The X coordinate for the end of the solid line part (accounting for arrow offset) */
+    solidLineEndX?: number;
+    /** The Y coordinate for the end of the solid line part (accounting for arrow offset) */
+    solidLineEndY?: number;
+    /** SVG points string for the arrow head at the edge */
+    arrowPoints?: string;
+    /** SVG path d string for the dashed line part (if curved) */
+    snapLinePath?: string;
+}

package/dist/types/kritzel-stencil/src/interfaces/arrow-head.interface.d.ts

@@ -0,0 +1,27 @@
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+/**
+ * Arrow head style types
+ */
+export type ArrowHeadStyle = 'triangle' | 'open' | 'diamond' | 'circle';
+/**
+ * Configuration for a single arrow head
+ */
+export interface ArrowHeadConfig {
+    /** Whether to display the arrow head */
+    enabled: boolean;
+    /** Arrow head style (defaults to 'triangle') */
+    style?: ArrowHeadStyle;
+    /** Size of the arrow head in pixels (defaults to strokeWidth * 3) */
+    size?: number;
+    /** Fill color (defaults to stroke color of the line) */
+    fill?: ThemeAwareColor;
+}
+/**
+ * Configuration for arrow heads at both ends of a line
+ */
+export interface LineArrowConfig {
+    /** Arrow head at the start of the line */
+    start?: ArrowHeadConfig;
+    /** Arrow head at the end of the line */
+    end?: ArrowHeadConfig;
+}

package/dist/types/kritzel-stencil/src/interfaces/bounding-box.interface.d.ts

@@ -0,0 +1,8 @@
+export interface KritzelBoundingBox {
+    x: number;
+    y: number;
+    z: number;
+    width: number;
+    height: number;
+    depth?: number;
+}

package/dist/types/kritzel-stencil/src/interfaces/clonable.interface.d.ts

@@ -0,0 +1,3 @@
+export interface KritzelClonable<T> {
+    clone(): T;
+}

package/dist/types/kritzel-stencil/src/interfaces/context-menu-item.interface.d.ts

@@ -0,0 +1,17 @@
+import { KritzelBaseObject } from "../classes/objects/base-object.class";
+export interface ContextMenuItem {
+    label: string;
+    action: (menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => void;
+    icon?: string;
+    visible?: boolean | ((menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);
+    disabled?: boolean | ((menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);
+}

package/dist/types/kritzel-stencil/src/interfaces/debug-info.interface.d.ts

@@ -0,0 +1,4 @@
+export interface KritzelDebugInfo {
+    showViewportInfo: boolean;
+    showObjectInfo: boolean;
+}

package/dist/types/kritzel-stencil/src/interfaces/dialog.interface.d.ts

@@ -0,0 +1,4 @@
+export type KritzelDialogCloseReason = 'backdrop' | 'escape' | 'close-button' | 'programmatic';
+export interface IKritzelDialogCloseEvent {
+    reason: KritzelDialogCloseReason;
+}

package/dist/types/kritzel-stencil/src/interfaces/displayable-shortcut.interface.d.ts

@@ -0,0 +1,5 @@
+export interface KritzelDisplayableShortcut {
+    label: string;
+    keyCombo: string;
+    category: 'General' | 'Undo/Redo' | 'Tool Selection' | 'Clipboard' | 'Object Layering' | 'Grouping';
+}

package/dist/types/kritzel-stencil/src/interfaces/engine-state.interface.d.ts

@@ -0,0 +1,73 @@
+import { KritzelBaseObject } from "../classes/objects/base-object.class";
+import { KritzelObjectMap } from "../classes/structures/object-map.structure";
+import { KritzelBaseTool } from "../classes/tools/base-tool.class";
+import { KritzelWorkspace } from "../classes/core/workspace.class";
+import { KritzelHandleType } from "../enums/handle-type.enum";
+import { ContextMenuItem } from "./context-menu-item.interface";
+import { KritzelDebugInfo } from "./debug-info.interface";
+import { LineHandleType } from "../classes/handlers/line-handle.handler";
+import { SnapCandidate } from "./anchor.interface";
+export interface KritzelEngineState {
+    activeWorkspace: KritzelWorkspace;
+    activeTool: KritzelBaseTool;
+    copiedObjects?: KritzelBaseObject<any>[];
+    /** Maps copied object IDs to their original source object IDs (for anchor remapping during paste) */
+    copiedObjectIdMapping?: Map<string, string>;
+    objects: KritzelObjectMap<KritzelBaseObject<Element>>;
+    snapCandidate?: SnapCandidate | null;
+    resizeHandleType: KritzelHandleType;
+    lineHandleType: LineHandleType;
+    hasViewportChanged: boolean;
+    hasObjectsChanged: boolean;
+    isReady: boolean;
+    isEnabled: boolean;
+    isScaling: boolean;
+    isPanning: boolean;
+    isSelecting: boolean;
+    isResizing: boolean;
+    isResizeHandleHovered: boolean;
+    isResizeHandleSelected: boolean;
+    isRotating: boolean;
+    isRotationHandleHovered: boolean;
+    isRotationHandleSelected: boolean;
+    isLineHandleSelected: boolean;
+    isLineHandleDragging: boolean;
+    isDragging: boolean;
+    isDrawing: boolean;
+    isErasing: boolean;
+    isWriting: boolean;
+    isCtrlKeyPressed: boolean;
+    isContextMenuVisible: boolean;
+    contextMenuItems: ContextMenuItem[];
+    contextMenuX: number;
+    contextMenuY: number;
+    skipContextMenu: boolean;
+    debugInfo: KritzelDebugInfo;
+    host: HTMLElement;
+    pointerX: number;
+    pointerY: number;
+    scale: number;
+    scaleMax: number;
+    scaleMin: number;
+    startX: number;
+    startY: number;
+    translateX: number;
+    translateXMax: number;
+    translateXMin: number;
+    translateY: number;
+    translateYMax: number;
+    translateYMin: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    longTouchTimeout: number;
+    longTouchDelay: number;
+    pointers: Map<number, PointerEvent>;
+    workspaces: KritzelWorkspace[];
+    cursor: {
+        icon: string;
+        iconActive?: string;
+        rotation?: number;
+    };
+    /** When true, objects are drawn at a fixed visual size regardless of zoom level */
+    lockDrawingScale: boolean;
+}

package/dist/types/kritzel-stencil/src/interfaces/line-options.interface.d.ts

@@ -0,0 +1,23 @@
+import { LineAnchor } from './anchor.interface';
+import { LineArrowConfig } from './arrow-head.interface';
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+export interface KritzelLineOptions {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    controlX?: number;
+    controlY?: number;
+    translateX?: number;
+    translateY?: number;
+    scale?: number;
+    stroke?: ThemeAwareColor;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Anchor connection for the start point */
+    startAnchor?: LineAnchor;
+    /** Anchor connection for the end point */
+    endAnchor?: LineAnchor;
+    /** Arrow head configuration for start and end of line */
+    arrows?: LineArrowConfig;
+}

package/dist/types/kritzel-stencil/src/interfaces/master-detail.interface.d.ts

@@ -0,0 +1,14 @@
+export interface IKritzelMasterDetailItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Optional icon name (for kritzel-icon) */
+    icon?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+export interface IKritzelMasterDetailSelectEvent {
+    /** The selected item */
+    item: IKritzelMasterDetailItem;
+}

package/dist/types/kritzel-stencil/src/interfaces/menu-item.interface.d.ts

@@ -0,0 +1,24 @@
+export interface IKritzelMenuItem<T = any> {
+    id: string;
+    label: string;
+    icon?: string;
+    value?: T;
+    children?: IKritzelMenuItem[];
+    isSelectable?: boolean;
+    isSelected?: boolean;
+    isEditing?: boolean;
+    isDisabled?: boolean;
+    isChildMenuOpen?: boolean;
+    isNewItem?: boolean;
+    childMenuAnchor?: HTMLElement;
+    unchangedState?: Partial<IKritzelMenuItem>;
+    action?: (item: IKritzelMenuItem, parent: IKritzelMenuItem) => void;
+}
+export interface IKritzelMenuItemSelectEvent {
+    item: IKritzelMenuItem;
+    parent: IKritzelMenuItem;
+}
+export interface IKritzelMenuItemToggleChildMenuEvent {
+    item: IKritzelMenuItem;
+    childMenuAnchor: HTMLElement;
+}

package/dist/types/kritzel-stencil/src/interfaces/object.interface.d.ts

@@ -0,0 +1,53 @@
+import { KritzelBaseObject } from '../classes/objects/base-object.class';
+import { KritzelBoundingBox } from './bounding-box.interface';
+import { KritzelPolygon } from './polygon.interface';
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+export interface KritzelObject<T = Element> {
+    _elementRef: T;
+    id: string;
+    workspaceId: string;
+    x: number;
+    y: number;
+    translateX: number;
+    translateY: number;
+    height: number;
+    width: number;
+    backgroundColor?: ThemeAwareColor;
+    borderColor?: ThemeAwareColor;
+    borderWidth: number;
+    opacity: number;
+    scale: number;
+    resizing: boolean;
+    rotation: number;
+    markedForRemoval: boolean;
+    zIndex: number;
+    isVisible: boolean;
+    isSelected: boolean;
+    isHovered: boolean;
+    isMounted: boolean;
+    isEditable: boolean;
+    isInteractive: boolean;
+    isDebugInfoVisible: boolean;
+    set elementRef(element: T);
+    get elementRef(): T;
+    get boundingBox(): KritzelBoundingBox;
+    get totalWidth(): number;
+    get totalHeight(): number;
+    get rotationDegrees(): number;
+    get centerX(): number;
+    get centerY(): number;
+    mount(element: T): void;
+    generateId(): string;
+    isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;
+    centerInViewport(): void;
+    update(): void;
+    move(startX: number, startY: number, endX: number, endY: number): void;
+    resize(x: number, y: number, width: number, height: number): void;
+    rotate(value: number): void;
+    copy(): KritzelBaseObject<Element>;
+    isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;
+    edit(event?: PointerEvent): void;
+    hitTest(x: number, y: number): boolean;
+    hitTestPolygon(polygon: KritzelPolygon): boolean;
+    updatePosition(x: number, y: number): void;
+}

package/dist/types/kritzel-stencil/src/interfaces/path-options.interface.d.ts

@@ -0,0 +1,11 @@
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+export interface KritzelPathOptions {
+    points: number[][];
+    translateX?: number;
+    translateY?: number;
+    scale?: number;
+    stroke?: ThemeAwareColor;
+    strokeWidth?: number;
+    fill?: ThemeAwareColor;
+    opacity?: number;
+}

package/dist/types/kritzel-stencil/src/interfaces/point.interface.d.ts

@@ -0,0 +1,4 @@
+export interface KritzelPoint {
+    x: number;
+    y: number;
+}

package/dist/types/kritzel-stencil/src/interfaces/polygon.interface.d.ts

@@ -0,0 +1,7 @@
+import { KritzelPoint } from "./point.interface";
+export interface KritzelPolygon {
+    bottomLeft: KritzelPoint;
+    bottomRight: KritzelPoint;
+    topLeft: KritzelPoint;
+    topRight: KritzelPoint;
+}

package/dist/types/kritzel-stencil/src/interfaces/serializable.interface.d.ts

@@ -0,0 +1,5 @@
+export interface KritzelSerializable {
+    __class__: string;
+    serialize(): any;
+    deserialize(object: any): KritzelSerializable;
+}

package/dist/types/kritzel-stencil/src/interfaces/settings.interface.d.ts

@@ -0,0 +1,11 @@
+import { ThemeName } from './theme.interface';
+export interface KritzelSettingsConfig {
+    /** Minimum zoom level allowed (0.0001 to 1) */
+    scaleMin: number;
+    /** Maximum zoom level allowed (1 to 1000) */
+    scaleMax: number;
+    /** When true, objects are drawn at a fixed visual size regardless of zoom level */
+    lockDrawingScale: boolean;
+    /** The current theme name */
+    theme: ThemeName;
+}

package/dist/types/kritzel-stencil/src/interfaces/shortcut.interface.d.ts

@@ -0,0 +1,10 @@
+import { KritzelCore } from '..';
+export interface KritzelShortcut {
+    key: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    label: string;
+    category: string;
+    condition?: (core: KritzelCore) => boolean;
+    action: (core: KritzelCore) => void;
+}

package/dist/types/kritzel-stencil/src/interfaces/sync-config.interface.d.ts

@@ -0,0 +1,22 @@
+import { ProviderConfig } from './sync-provider.interface';
+/**
+ * Configuration for workspace synchronization providers
+ */
+export interface KritzelSyncConfig {
+    /**
+     * Array of provider configurations to enable for synchronization.
+     * Can include provider classes directly or factory functions with options.
+     *
+     * @example
+     * // Simple providers
+     * providers: [IndexedDBSyncProvider, BroadcastSyncProvider]
+     *
+     * @example
+     * // Provider with options using factory
+     * providers: [
+     *   IndexedDBSyncProvider,
+     *   WebSocketSyncProvider.with({ url: 'wss://example.com' })
+     * ]
+     */
+    providers: ProviderConfig[];
+}

package/dist/types/kritzel-stencil/src/interfaces/sync-provider.interface.d.ts

@@ -0,0 +1,29 @@
+import * as Y from 'yjs';
+/**
+ * Interface for sync providers that handle data synchronization across different mediums
+ * (IndexedDB, BroadcastChannel, WebSocket, etc.)
+ */
+export interface ISyncProvider {
+    /**
+     * Initialize and connect the provider
+     */
+    connect(): Promise<void>;
+    /**
+     * Disconnect the provider (can be reconnected later)
+     */
+    disconnect(): void;
+    /**
+     * Destroy the provider and clean up all resources
+     */
+    destroy(): void;
+}
+/**
+ * Factory function type for creating provider instances
+ */
+export interface ProviderFactory {
+    create(docName: string, doc: Y.Doc): ISyncProvider;
+}
+/**
+ * Type for provider configuration - either a class constructor or a factory
+ */
+export type ProviderConfig = (new (docName: string, doc: Y.Doc, options?: any) => ISyncProvider) | ProviderFactory;