@umituz/web-canvas 1.0.6 → 1.1.0

package/README.md

@@ -9,6 +9,7 @@ Comprehensive canvas and screenshot generation library with device frames, patte
 - PDF export functionality
 - Pattern generation
 - HTML2Canvas integration
+- Freehand drawing (`useFreehandCanvas`): mouse, touch and stylus with pressure
 
 ## Installation
 
@@ -27,6 +28,38 @@ const screenshot = await generateScreenshot({
 });
 ```
 
+### Freehand drawing
+
+```typescript
+import { useFreehandCanvas } from '@umituz/web-canvas/hooks';
+
+function SignaturePad() {
+  const { canvasRef, undo, clear, isEmpty, strokeCount } = useFreehandCanvas({
+    brushSize: 3,
+    color: '#1a1a1a',
+  });
+
+  return (
+    <div>
+      <canvas ref={canvasRef} style={{ width: 400, height: 200 }} />
+      <button onClick={undo} disabled={strokeCount === 0}>Undo</button>
+      <button onClick={clear} disabled={isEmpty}>Clear</button>
+    </div>
+  );
+}
+```
+
+The hook attaches pointer-event drawing to the canvas, sizes the backing
+store to the CSS box at device-pixel resolution (redrawing on resize),
+replays strokes from captured points so `undo`/`clear` are lossless, and
+modulates line width with stylus pressure when the pointer reports it.
+`touch-action: none` is applied automatically so drawing works on touch
+screens. Layer the canvas over your own guide content (e.g. a faint glyph
+to trace) for handwriting practice UIs.
+
+Combine with `useCanvasExport` from the same package to download the
+drawing as PNG/JPEG/WebP.
+
 ## License
 
 MIT

package/dist/CanvasConfig-HFgH7irb.d.mts

@@ -0,0 +1,310 @@
+/**
+ * Screenshot Types
+ * Screenshot generation and device frame types
+ */
+/**
+ * Device type
+ */
+type DeviceType = 'iphone-15-pro' | 'iphone-15' | 'iphone-se' | 'ipad-pro' | 'ipad' | 'android-phone' | 'android-tablet' | 'desktop';
+/**
+ * Device type enum (for backward compatibility)
+ */
+declare const DeviceTypeEnum: {
+    readonly IPHONE_15_PRO: "iphone-15-pro";
+    readonly IPHONE_15: "iphone-15";
+    readonly IPHONE_SE: "iphone-se";
+    readonly IPAD_PRO: "ipad-pro";
+    readonly IPAD: "ipad";
+    readonly ANDROID_PHONE: "android-phone";
+    readonly ANDROID_TABLET: "android-tablet";
+    readonly DESKTOP: "desktop";
+};
+/**
+ * Frame style options
+ */
+type FrameStyle = 'realistic' | 'minimal' | 'none';
+/**
+ * Frame style enum (for backward compatibility)
+ */
+declare const FrameStyleEnum: {
+    readonly REALISTIC: "realistic";
+    readonly MINIMAL: "minimal";
+    readonly NONE: "none";
+};
+/**
+ * Layout style options
+ */
+type LayoutStyle = 'text-top' | 'text-bottom' | 'text-overlay';
+/**
+ * Layout style enum (for backward compatibility)
+ */
+declare const LayoutStyleEnum: {
+    readonly TEXT_TOP: "text-top";
+    readonly TEXT_BOTTOM: "text-bottom";
+    readonly TEXT_OVERLAY: "text-overlay";
+};
+/**
+ * Background pattern options
+ */
+type BackgroundPattern = 'none' | 'dots' | 'grid' | 'lines' | 'waves' | 'checkers';
+/**
+ * Background pattern enum (for backward compatibility)
+ */
+declare const BackgroundPatternEnum: {
+    readonly NONE: "none";
+    readonly DOTS: "dots";
+    readonly GRID: "grid";
+    readonly LINES: "lines";
+    readonly WAVES: "waves";
+    readonly CHECKERS: "checkers";
+};
+/**
+ * Screenshot format
+ */
+type ScreenshotFormat = 'png' | 'jpeg' | 'webp';
+/**
+ * Screenshot format enum (for backward compatibility)
+ */
+declare const ScreenshotFormatEnum: {
+    readonly PNG: "png";
+    readonly JPEG: "jpeg";
+    readonly WEBP: "webp";
+};
+/**
+ * Language code
+ */
+type Language = string;
+/**
+ * Device dimensions
+ */
+interface DeviceDimensions {
+    width: number;
+    height: number;
+    scale?: number;
+}
+/**
+ * Device configuration
+ */
+interface DeviceConfig {
+    type: DeviceType;
+    name: string;
+    dimensions: DeviceDimensions;
+    isPhone?: boolean;
+    isTablet?: boolean;
+    hasNotch?: boolean;
+    cornerRadius?: number;
+    frameThickness?: number;
+}
+/**
+ * Screenshot content
+ */
+interface ScreenshotContent {
+    id: string;
+    title: string;
+    subtitle: string;
+    screenshot: string | null;
+    translations: Record<Language, {
+        title: string;
+        subtitle: string;
+    }>;
+    imageFit?: 'cover' | 'contain' | 'fill';
+    imageZoom?: number;
+    imageAnchorX?: number;
+    imageAnchorY?: number;
+}
+/**
+ * Screenshot design
+ */
+interface ScreenshotDesign {
+    backgroundColor: string;
+    backgroundGradientEnd?: string | null;
+    backgroundImage?: string | null;
+    backgroundBlur?: number;
+    backgroundOverlayOpacity?: number;
+    backgroundPattern?: BackgroundPattern;
+    textColor: string;
+    highlightColor: string;
+    textAlign: 'left' | 'center' | 'right';
+    deviceColor: string;
+    deviceType: DeviceType;
+    frameStyle: FrameStyle;
+    layout: LayoutStyle;
+    scale: number;
+    fontFamily: string;
+    titleFontSize: number;
+    subtitleFontSize: number;
+    titleFontWeight: string;
+    subtitleFontWeight: string;
+    textCase?: 'uppercase' | 'lowercase' | 'none';
+    lineHeight?: number;
+    letterSpacing?: number;
+    rotation?: number;
+    rotationX?: number;
+    rotationY?: number;
+    rotationZ?: number;
+    offsetY?: number;
+    shadowIntensity?: number;
+    padding?: number;
+    gap?: number;
+    isPanoramic?: boolean;
+}
+/**
+ * Screenshot metadata
+ */
+interface ScreenshotMetadata {
+    id: string;
+    deviceType: DeviceType;
+    dimensions: DeviceDimensions;
+    format: ScreenshotFormat;
+    timestamp: Date;
+    fileSize: number;
+    url: string;
+}
+/**
+ * Screenshot generation options
+ */
+interface ScreenshotGenerationOptions {
+    deviceType: DeviceType;
+    format?: ScreenshotFormat;
+    quality?: number;
+    customDimensions?: DeviceDimensions;
+}
+/**
+ * Screenshot template
+ */
+interface ScreenshotTemplate {
+    id: string;
+    name: string;
+    description: string;
+    design: Partial<ScreenshotDesign>;
+    thumbnail?: string;
+}
+/**
+ * App Store metadata
+ */
+interface AppStoreMetadata {
+    appName: string;
+    subtitle: string;
+    promotionalText: string;
+    keywords: string;
+    description: string;
+    whatsNew: string;
+}
+/**
+ * Screenshot project
+ */
+interface ScreenshotProject {
+    id: string;
+    name: string;
+    design: ScreenshotDesign;
+    screens: ScreenshotContent[];
+    currentLanguage: Language;
+    selectedScreenId: string;
+    appMetadata: AppStoreMetadata;
+    appIcon: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+/**
+ * Canvas Types
+ * Core canvas operation types
+ */
+/**
+ * Canvas format options
+ */
+type CanvasFormat = 'png' | 'jpeg' | 'webp';
+/**
+ * Canvas render quality
+ */
+type CanvasQuality = number;
+/**
+ * Canvas dimensions
+ */
+interface CanvasDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Canvas position
+ */
+interface CanvasPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Canvas rectangle
+ */
+interface CanvasRect extends CanvasPosition, CanvasDimensions {
+}
+/**
+ * Canvas color
+ */
+type CanvasColor = string;
+/**
+ * Canvas context configuration
+ */
+interface CanvasContextConfig {
+    fillStyle?: CanvasColor;
+    strokeStyle?: CanvasColor;
+    lineWidth?: number;
+    lineCap?: 'butt' | 'round' | 'square';
+    lineJoin?: 'round' | 'bevel' | 'miter';
+    globalAlpha?: number;
+    font?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+}
+/**
+ * Canvas export options
+ */
+interface CanvasExportOptions {
+    format?: CanvasFormat;
+    quality?: CanvasQuality;
+    scale?: number;
+    backgroundColor?: string;
+    useCORS?: boolean;
+}
+/**
+ * Canvas result
+ */
+interface CanvasResult {
+    blob: Blob;
+    url: string;
+    dimensions: CanvasDimensions;
+    format: CanvasFormat;
+    size: number;
+}
+/**
+ * Canvas operation callback
+ */
+type CanvasOperation<T> = (ctx: CanvasRenderingContext2D, dimensions: CanvasDimensions) => T;
+
+/**
+ * Canvas Configuration
+ * Canvas operation configuration
+ */
+
+/**
+ * Canvas configuration
+ */
+interface CanvasConfig {
+    /** Default export format */
+    defaultFormat?: CanvasFormat;
+    /** Default quality (0.0 - 1.0) */
+    defaultQuality?: CanvasQuality;
+    /** Maximum dimension (width or height) */
+    maxDimension?: number;
+    /** Scale factor for high-resolution exports */
+    scale?: number;
+    /** Default background color */
+    backgroundColor?: string;
+    /** Enable CORS for cross-origin images */
+    useCORS?: boolean;
+}
+/**
+ * Default canvas configuration
+ */
+declare const DEFAULT_CANVAS_CONFIG: CanvasConfig;
+
+export { type AppStoreMetadata as A, type BackgroundPattern as B, type CanvasColor as C, DEFAULT_CANVAS_CONFIG as D, type FrameStyle as F, type Language as L, type ScreenshotContent as S, type CanvasConfig as a, type CanvasContextConfig as b, type CanvasDimensions as c, type CanvasExportOptions as d, type CanvasFormat as e, type CanvasOperation as f, type CanvasPosition as g, type CanvasQuality as h, type CanvasRect as i, type CanvasResult as j, type DeviceConfig as k, type DeviceDimensions as l, type DeviceType as m, type LayoutStyle as n, type ScreenshotDesign as o, type ScreenshotFormat as p, type ScreenshotGenerationOptions as q, type ScreenshotMetadata as r, type ScreenshotProject as s, type ScreenshotTemplate as t, BackgroundPatternEnum as u, DeviceTypeEnum as v, FrameStyleEnum as w, LayoutStyleEnum as x, ScreenshotFormatEnum as y };

package/dist/CanvasConfig-HFgH7irb.d.ts

@@ -0,0 +1,310 @@
+/**
+ * Screenshot Types
+ * Screenshot generation and device frame types
+ */
+/**
+ * Device type
+ */
+type DeviceType = 'iphone-15-pro' | 'iphone-15' | 'iphone-se' | 'ipad-pro' | 'ipad' | 'android-phone' | 'android-tablet' | 'desktop';
+/**
+ * Device type enum (for backward compatibility)
+ */
+declare const DeviceTypeEnum: {
+    readonly IPHONE_15_PRO: "iphone-15-pro";
+    readonly IPHONE_15: "iphone-15";
+    readonly IPHONE_SE: "iphone-se";
+    readonly IPAD_PRO: "ipad-pro";
+    readonly IPAD: "ipad";
+    readonly ANDROID_PHONE: "android-phone";
+    readonly ANDROID_TABLET: "android-tablet";
+    readonly DESKTOP: "desktop";
+};
+/**
+ * Frame style options
+ */
+type FrameStyle = 'realistic' | 'minimal' | 'none';
+/**
+ * Frame style enum (for backward compatibility)
+ */
+declare const FrameStyleEnum: {
+    readonly REALISTIC: "realistic";
+    readonly MINIMAL: "minimal";
+    readonly NONE: "none";
+};
+/**
+ * Layout style options
+ */
+type LayoutStyle = 'text-top' | 'text-bottom' | 'text-overlay';
+/**
+ * Layout style enum (for backward compatibility)
+ */
+declare const LayoutStyleEnum: {
+    readonly TEXT_TOP: "text-top";
+    readonly TEXT_BOTTOM: "text-bottom";
+    readonly TEXT_OVERLAY: "text-overlay";
+};
+/**
+ * Background pattern options
+ */
+type BackgroundPattern = 'none' | 'dots' | 'grid' | 'lines' | 'waves' | 'checkers';
+/**
+ * Background pattern enum (for backward compatibility)
+ */
+declare const BackgroundPatternEnum: {
+    readonly NONE: "none";
+    readonly DOTS: "dots";
+    readonly GRID: "grid";
+    readonly LINES: "lines";
+    readonly WAVES: "waves";
+    readonly CHECKERS: "checkers";
+};
+/**
+ * Screenshot format
+ */
+type ScreenshotFormat = 'png' | 'jpeg' | 'webp';
+/**
+ * Screenshot format enum (for backward compatibility)
+ */
+declare const ScreenshotFormatEnum: {
+    readonly PNG: "png";
+    readonly JPEG: "jpeg";
+    readonly WEBP: "webp";
+};
+/**
+ * Language code
+ */
+type Language = string;
+/**
+ * Device dimensions
+ */
+interface DeviceDimensions {
+    width: number;
+    height: number;
+    scale?: number;
+}
+/**
+ * Device configuration
+ */
+interface DeviceConfig {
+    type: DeviceType;
+    name: string;
+    dimensions: DeviceDimensions;
+    isPhone?: boolean;
+    isTablet?: boolean;
+    hasNotch?: boolean;
+    cornerRadius?: number;
+    frameThickness?: number;
+}
+/**
+ * Screenshot content
+ */
+interface ScreenshotContent {
+    id: string;
+    title: string;
+    subtitle: string;
+    screenshot: string | null;
+    translations: Record<Language, {
+        title: string;
+        subtitle: string;
+    }>;
+    imageFit?: 'cover' | 'contain' | 'fill';
+    imageZoom?: number;
+    imageAnchorX?: number;
+    imageAnchorY?: number;
+}
+/**
+ * Screenshot design
+ */
+interface ScreenshotDesign {
+    backgroundColor: string;
+    backgroundGradientEnd?: string | null;
+    backgroundImage?: string | null;
+    backgroundBlur?: number;
+    backgroundOverlayOpacity?: number;
+    backgroundPattern?: BackgroundPattern;
+    textColor: string;
+    highlightColor: string;
+    textAlign: 'left' | 'center' | 'right';
+    deviceColor: string;
+    deviceType: DeviceType;
+    frameStyle: FrameStyle;
+    layout: LayoutStyle;
+    scale: number;
+    fontFamily: string;
+    titleFontSize: number;
+    subtitleFontSize: number;
+    titleFontWeight: string;
+    subtitleFontWeight: string;
+    textCase?: 'uppercase' | 'lowercase' | 'none';
+    lineHeight?: number;
+    letterSpacing?: number;
+    rotation?: number;
+    rotationX?: number;
+    rotationY?: number;
+    rotationZ?: number;
+    offsetY?: number;
+    shadowIntensity?: number;
+    padding?: number;
+    gap?: number;
+    isPanoramic?: boolean;
+}
+/**
+ * Screenshot metadata
+ */
+interface ScreenshotMetadata {
+    id: string;
+    deviceType: DeviceType;
+    dimensions: DeviceDimensions;
+    format: ScreenshotFormat;
+    timestamp: Date;
+    fileSize: number;
+    url: string;
+}
+/**
+ * Screenshot generation options
+ */
+interface ScreenshotGenerationOptions {
+    deviceType: DeviceType;
+    format?: ScreenshotFormat;
+    quality?: number;
+    customDimensions?: DeviceDimensions;
+}
+/**
+ * Screenshot template
+ */
+interface ScreenshotTemplate {
+    id: string;
+    name: string;
+    description: string;
+    design: Partial<ScreenshotDesign>;
+    thumbnail?: string;
+}
+/**
+ * App Store metadata
+ */
+interface AppStoreMetadata {
+    appName: string;
+    subtitle: string;
+    promotionalText: string;
+    keywords: string;
+    description: string;
+    whatsNew: string;
+}
+/**
+ * Screenshot project
+ */
+interface ScreenshotProject {
+    id: string;
+    name: string;
+    design: ScreenshotDesign;
+    screens: ScreenshotContent[];
+    currentLanguage: Language;
+    selectedScreenId: string;
+    appMetadata: AppStoreMetadata;
+    appIcon: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+/**
+ * Canvas Types
+ * Core canvas operation types
+ */
+/**
+ * Canvas format options
+ */
+type CanvasFormat = 'png' | 'jpeg' | 'webp';
+/**
+ * Canvas render quality
+ */
+type CanvasQuality = number;
+/**
+ * Canvas dimensions
+ */
+interface CanvasDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Canvas position
+ */
+interface CanvasPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Canvas rectangle
+ */
+interface CanvasRect extends CanvasPosition, CanvasDimensions {
+}
+/**
+ * Canvas color
+ */
+type CanvasColor = string;
+/**
+ * Canvas context configuration
+ */
+interface CanvasContextConfig {
+    fillStyle?: CanvasColor;
+    strokeStyle?: CanvasColor;
+    lineWidth?: number;
+    lineCap?: 'butt' | 'round' | 'square';
+    lineJoin?: 'round' | 'bevel' | 'miter';
+    globalAlpha?: number;
+    font?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+}
+/**
+ * Canvas export options
+ */
+interface CanvasExportOptions {
+    format?: CanvasFormat;
+    quality?: CanvasQuality;
+    scale?: number;
+    backgroundColor?: string;
+    useCORS?: boolean;
+}
+/**
+ * Canvas result
+ */
+interface CanvasResult {
+    blob: Blob;
+    url: string;
+    dimensions: CanvasDimensions;
+    format: CanvasFormat;
+    size: number;
+}
+/**
+ * Canvas operation callback
+ */
+type CanvasOperation<T> = (ctx: CanvasRenderingContext2D, dimensions: CanvasDimensions) => T;
+
+/**
+ * Canvas Configuration
+ * Canvas operation configuration
+ */
+
+/**
+ * Canvas configuration
+ */
+interface CanvasConfig {
+    /** Default export format */
+    defaultFormat?: CanvasFormat;
+    /** Default quality (0.0 - 1.0) */
+    defaultQuality?: CanvasQuality;
+    /** Maximum dimension (width or height) */
+    maxDimension?: number;
+    /** Scale factor for high-resolution exports */
+    scale?: number;
+    /** Default background color */
+    backgroundColor?: string;
+    /** Enable CORS for cross-origin images */
+    useCORS?: boolean;
+}
+/**
+ * Default canvas configuration
+ */
+declare const DEFAULT_CANVAS_CONFIG: CanvasConfig;
+
+export { type AppStoreMetadata as A, type BackgroundPattern as B, type CanvasColor as C, DEFAULT_CANVAS_CONFIG as D, type FrameStyle as F, type Language as L, type ScreenshotContent as S, type CanvasConfig as a, type CanvasContextConfig as b, type CanvasDimensions as c, type CanvasExportOptions as d, type CanvasFormat as e, type CanvasOperation as f, type CanvasPosition as g, type CanvasQuality as h, type CanvasRect as i, type CanvasResult as j, type DeviceConfig as k, type DeviceDimensions as l, type DeviceType as m, type LayoutStyle as n, type ScreenshotDesign as o, type ScreenshotFormat as p, type ScreenshotGenerationOptions as q, type ScreenshotMetadata as r, type ScreenshotProject as s, type ScreenshotTemplate as t, BackgroundPatternEnum as u, DeviceTypeEnum as v, FrameStyleEnum as w, LayoutStyleEnum as x, ScreenshotFormatEnum as y };