@umituz/web-canvas 1.2.0 → 1.2.2

package/src/infrastructure/services/DeviceConfigService.ts

@@ -1,14 +1,7 @@
-/**
- * Device Configuration Service
- * Manages device configurations and dimensions
- */
 
 import { DeviceType, DeviceConfig } from '../../domain/types/screenshot.types';
 import { DEVICE_DIMENSIONS } from '../../domain/config/DeviceConfig';
 
-/**
- * Device configuration service
- */
 export class DeviceConfigService {
   private static instance: DeviceConfigService;
   private devices: Map<DeviceType, DeviceConfig>;
@@ -119,7 +112,6 @@ export class DeviceConfigService {
   }
 
   public getAllDevices(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.allDevicesCache) {
       this.allDevicesCache = Array.from(this.devices.values());
     }
@@ -127,7 +119,6 @@ export class DeviceConfigService {
   }
 
   public getPhones(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.phonesCache) {
       this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
     }
@@ -135,7 +126,6 @@ export class DeviceConfigService {
   }
 
   public getTablets(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.tabletsCache) {
       this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
     }

package/src/infrastructure/services/minimalXlsx.ts

@@ -1,15 +1,6 @@
-/**
- * Minimal XLSX writer — replaces the unmaintained npm `xlsx` (SheetJS)
- * dependency, whose registry build carries open prototype-pollution and
- * ReDoS advisories with no registry fix. The report export only ever
- * writes flat tables (header row + primitive cells), so a hand-rolled
- * SpreadsheetML package on top of jszip covers the need: inline-string
- * and numeric cells, multiple sheets, Excel/LibreOffice/Sheets-compatible.
- */
 
 export interface XlsxSheet {
   name: string;
-  /** Rows of primitive cells; the first row is the header. */
   rows: (string | number | boolean | null | undefined)[][];
 }
 
@@ -24,7 +15,6 @@ function escapeXml(value: string): string {
     .replace(/'/g, ''');
 }
 
-/** Excel sheet names: max 31 chars, no : \ / ? * [ ]. */
 function safeSheetName(name: string, index: number): string {
   const cleaned = name.replace(/[:\\/?*[\]]/g, ' ').slice(0, 31).trim();
   return cleaned.length > 0 ? cleaned : `Sheet${index + 1}`;
@@ -66,7 +56,6 @@ function sheetXml(rows: XlsxSheet['rows']): string {
   return `${XML_HEADER}<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${body}</sheetData></worksheet>`;
 }
 
-/** Assembles the sheets into a .xlsx zip blob using jszip. */
 export async function writeXlsxBlob(sheets: XlsxSheet[], JSZip: typeof import('jszip')): Promise<Blob> {
   const zip = new JSZip();
   const safeNames = sheets.map((sheet, index) => safeSheetName(sheet.name, index));

package/src/presentation/hooks/useCanvasExport.ts

@@ -1,7 +1,3 @@
-/**
- * useCanvasExport Hook
- * React hook for canvas export operations
- */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { CanvasExportOptions, CanvasResult } from '../../domain/types/canvas.types';
@@ -9,16 +5,10 @@ import type { CanvasConfig } from '../../domain/config/CanvasConfig';
 import { DEFAULT_CANVAS_CONFIG } from '../../domain/config/CanvasConfig';
 import { CanvasRenderer } from '../../infrastructure/renderers/CanvasRenderer';
 
-/**
- * useCanvasExport hook options
- */
 export interface UseCanvasExportOptions {
   config?: CanvasConfig;
 }
 
-/**
- * useCanvasExport hook return
- */
 export interface UseCanvasExportReturn {
   isExporting: boolean;
   progress: number;
@@ -40,9 +30,6 @@ export interface UseCanvasExportReturn {
   cloneCanvas: (canvas: HTMLCanvasElement) => HTMLCanvasElement | null;
 }
 
-/**
- * useCanvasExport hook
- */
 export function useCanvasExport(
   options: UseCanvasExportOptions = {}
 ): UseCanvasExportReturn {
@@ -52,26 +39,22 @@ export function useCanvasExport(
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
-  // Use ref to prevent recreating renderer on every render
   const rendererRef = useRef<CanvasRenderer | null>(null);
   const urlCleanupRef = useRef<string[]>([]);
 
-  // Initialize renderer once
   if (!rendererRef.current) {
     rendererRef.current = new CanvasRenderer(config);
   }
 
-  // Cleanup URLs on unmount
   useEffect(() => {
     return () => {
-      // Clean up any remaining URLs
       urlCleanupRef.current.forEach(url => {
         try {
           URL.revokeObjectURL(url);
-        } catch (e) {
-          // Ignore errors during cleanup
+        } catch {
         }
       });
+
       urlCleanupRef.current = [];
     };
   }, []);
@@ -91,7 +74,6 @@ export function useCanvasExport(
         const result = await rendererRef.current.exportToBlob(canvas, options);
         setProgress(100);
 
-        // Track URL for cleanup
         if (result?.url) {
           urlCleanupRef.current.push(result.url);
         }
@@ -154,10 +136,8 @@ export function useCanvasExport(
 
         setProgress(100);
 
-        // Schedule URL cleanup after a delay
         setTimeout(() => {
           URL.revokeObjectURL(result.url);
-          // Remove from cleanup tracking
           const index = urlCleanupRef.current.indexOf(result.url);
           if (index > -1) {
             urlCleanupRef.current.splice(index, 1);

package/src/presentation/hooks/useFreehandCanvas.ts

@@ -1,8 +1,3 @@
-/**
- * useFreehandCanvas Hook
- * React hook for pointer-based freehand drawing on a canvas
- */
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   FreehandPoint,
@@ -12,64 +7,53 @@ import type {
 
 const DEFAULT_BRUSH_SIZE = 3;
 const DEFAULT_COLOR = '#1a1a1a';
+const DEFAULT_KEYBOARD_STEP = 4;
+const KEYBOARD_FAST_FACTOR = 4;
 
-/**
- * Width for a point: constant for mouse/touch, pressure-scaled for pens
- */
 function widthFor(stroke: FreehandStroke, point: FreehandPoint): number {
   if (!stroke.dynamic) return stroke.size;
-  // pressure is 0 (some mice) – 1 (hard press); clamp the visual range
   return stroke.size * (0.5 + Math.min(1, Math.max(0, point.pressure)));
 }
 
-/**
- * Return value of the useFreehandCanvas hook
- */
 export interface UseFreehandCanvasReturn {
-  /** Ref to attach to the <canvas> element that captures drawing. */
   canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  /** Remove the most recent stroke. */
   undo: () => void;
-  /** Remove all strokes. */
   clear: () => void;
-  /** Number of committed strokes. */
   strokeCount: number;
-  /** True when no strokes are committed. */
   isEmpty: boolean;
-  /** Snapshot of committed strokes (safe to serialize). */
   getStrokes: () => FreehandStroke[];
 }
 
-/**
- * useFreehandCanvas hook
- *
- * Attaches pointer-event drawing to a canvas element. The canvas is sized to
- * its CSS box at device-pixel resolution (and re-rendered on resize), strokes
- * are replayed from captured points so undo/clear are lossless, and stylus
- * pressure modulates line width when the pointer reports it.
- *
- * The canvas gets `touch-action: none` applied so drawing works on touch
- * screens without scrolling the page. Consumers typically layer the canvas
- * over their own guide content (e.g. a faint glyph to trace).
- */
+interface KeyboardPen {
+  x: number;
+  y: number;
+  down: boolean;
+  engaged: boolean;
+}
+
 export function useFreehandCanvas(
   options: UseFreehandCanvasOptions = {}
 ): UseFreehandCanvasReturn {
-  const { brushSize = DEFAULT_BRUSH_SIZE, color = DEFAULT_COLOR, pressureEnabled = true } = options;
+  const {
+    brushSize = DEFAULT_BRUSH_SIZE,
+    color = DEFAULT_COLOR,
+    pressureEnabled = true,
+    keyboard = false,
+    keyboardStep = DEFAULT_KEYBOARD_STEP,
+  } = options;
 
-  // Latest option values for event handlers, without re-binding listeners.
-  const optionsRef = useRef({ brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd });
-  optionsRef.current = { brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd };
+  const optionsRef = useRef({ brushSize, color, pressureEnabled, keyboardStep, onStrokeEnd: options.onStrokeEnd });
+  optionsRef.current = { brushSize, color, pressureEnabled, keyboardStep, onStrokeEnd: options.onStrokeEnd };
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const strokesRef = useRef<FreehandStroke[]>([]);
   const activeStrokeRef = useRef<FreehandStroke | null>(null);
   const activePointerIdRef = useRef<number | null>(null);
   const dprRef = useRef(1);
+  const penRef = useRef<KeyboardPen | null>(null);
 
   const [strokeCount, setStrokeCount] = useState(0);
 
-  /** Replay every committed stroke (and the active one) at current DPR. */
   const redraw = useCallback(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
@@ -103,9 +87,20 @@ export function useFreehandCanvas(
         ctx.stroke();
       }
     }
+    const pen = penRef.current;
+    if (pen?.engaged && !pen.down) {
+      const reach = 5;
+      ctx.strokeStyle = 'rgba(35, 37, 43, 0.55)';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(pen.x - reach, pen.y);
+      ctx.lineTo(pen.x + reach, pen.y);
+      ctx.moveTo(pen.x, pen.y - reach);
+      ctx.lineTo(pen.x, pen.y + reach);
+      ctx.stroke();
+    }
   }, []);
 
-  /** Match the backing store to the CSS box; returns true when it changed. */
   const syncDimensions = useCallback((): boolean => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -125,8 +120,9 @@ export function useFreehandCanvas(
 
     const el: HTMLCanvasElement = canvas;
 
-    // Touch screens must draw, not scroll, while the pointer is down.
     el.style.touchAction = 'none';
+    if (keyboard && !el.hasAttribute('tabindex')) el.tabIndex = 0;
+    if (!penRef.current) penRef.current = { x: el.clientWidth / 2, y: el.clientHeight / 2, down: false, engaged: false };
 
     syncDimensions();
     redraw();
@@ -169,8 +165,6 @@ export function useFreehandCanvas(
 
     function onPointerDown(event: PointerEvent): void {
       if (event.button !== 0 && event.pointerType === 'mouse') return;
-      // Only one stroke at a time: a resting palm or second finger touching
-      // mid-stroke must not hijack or corrupt the active stroke.
       if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
@@ -183,6 +177,7 @@ export function useFreehandCanvas(
         points: [pointFrom(event)],
       };
       activeStrokeRef.current = stroke;
+      penRef.current = { x: stroke.points[0].x, y: stroke.points[0].y, down: false, engaged: false };
       drawDot(stroke, stroke.points[0]);
     }
 
@@ -209,10 +204,76 @@ export function useFreehandCanvas(
       optionsRef.current.onStrokeEnd?.(stroke);
     }
 
+    function clampPen(pen: KeyboardPen): void {
+      pen.x = Math.min(Math.max(pen.x, 0), Math.max(0, el.clientWidth - 1));
+      pen.y = Math.min(Math.max(pen.y, 0), Math.max(0, el.clientHeight - 1));
+    }
+
+    function startKeyboardStroke(pen: KeyboardPen): void {
+      const { brushSize: size, color: ink } = optionsRef.current;
+      const stroke: FreehandStroke = {
+        size,
+        color: ink,
+        dynamic: false,
+        points: [{ x: pen.x, y: pen.y, pressure: 0.5 }],
+      };
+      activeStrokeRef.current = stroke;
+      pen.down = true;
+      drawDot(stroke, stroke.points[0]);
+    }
+
+    function commitKeyboardStroke(pen: KeyboardPen): void {
+      const stroke = activeStrokeRef.current;
+      if (!stroke) return;
+      activeStrokeRef.current = null;
+      pen.down = false;
+      strokesRef.current = [...strokesRef.current, stroke];
+      setStrokeCount(strokesRef.current.length);
+      optionsRef.current.onStrokeEnd?.(stroke);
+      redraw();
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      const pen = penRef.current;
+      if (!pen) return;
+      const fast = event.shiftKey ? KEYBOARD_FAST_FACTOR : 1;
+      const step = optionsRef.current.keyboardStep * fast;
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        pen.engaged = true;
+        pen.x += event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;
+        pen.y += event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
+        clampPen(pen);
+        const stroke = activeStrokeRef.current;
+        if (pen.down && stroke) {
+          const point: FreehandPoint = { x: pen.x, y: pen.y, pressure: 0.5 };
+          const previous = stroke.points[stroke.points.length - 1];
+          stroke.points.push(point);
+          drawSegment(stroke, previous, point);
+        } else {
+          redraw();
+        }
+        return;
+      }
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        pen.engaged = true;
+        if (pen.down) commitKeyboardStroke(pen);
+        else startKeyboardStroke(pen);
+        return;
+      }
+      if (event.key === 'Escape' && pen.down) {
+        activeStrokeRef.current = null;
+        pen.down = false;
+        redraw();
+      }
+    }
+
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointermove', onPointerMove);
     el.addEventListener('pointerup', commit);
     el.addEventListener('pointercancel', commit);
+    if (keyboard) el.addEventListener('keydown', onKeyDown);
 
     return () => {
       observer.disconnect();
@@ -220,8 +281,9 @@ export function useFreehandCanvas(
       el.removeEventListener('pointermove', onPointerMove);
       el.removeEventListener('pointerup', commit);
       el.removeEventListener('pointercancel', commit);
+      el.removeEventListener('keydown', onKeyDown);
     };
-  }, [redraw, syncDimensions]);
+  }, [redraw, syncDimensions, keyboard]);
 
   const undo = useCallback(() => {
     if (strokesRef.current.length === 0) return;

package/src/presentation/hooks/useReportExport.ts

@@ -1,7 +1,3 @@
-/**
- * useReportExport Hook
- * React hook for report export operations
- */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { ReportData } from '../../domain/types/report.types';
@@ -11,9 +7,6 @@ import type {
 } from '../../domain/types/report.types';
 import { ReportService } from '../../application/services/ReportService';
 
-/**
- * useReportExport hook return
- */
 export interface UseReportExportReturn {
   isExporting: boolean;
   error: string | null;
@@ -40,17 +33,12 @@ export interface UseReportExportReturn {
   ) => void;
 }
 
-/**
- * useReportExport hook
- */
 export function useReportExport(): UseReportExportReturn {
   const [isExporting, setIsExporting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Use ref to prevent recreating service instance on every render
   const reportServiceRef = useRef<ReportService | null>(null);
 
-  // Initialize service once
   if (!reportServiceRef.current) {
     reportServiceRef.current = ReportService.getInstance();
   }

package/src/presentation/hooks/useScreenshotStudio.ts

@@ -1,7 +1,3 @@
-/**
- * useScreenshotStudio Hook
- * React hook for screenshot studio functionality
- */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type {
@@ -20,19 +16,12 @@ import type { ScreenshotStudioConfig } from '../../domain/config/ScreenshotStudi
 import { DEFAULT_SCREENSHOT_STUDIO_CONFIG } from '../../domain/config/ScreenshotStudioConfig';
 import { ScreenshotStudioService } from '../../application/services/ScreenshotStudioService';
 
-/**
- * useScreenshotStudio hook options
- */
 export interface UseScreenshotStudioOptions {
   config?: Partial<ScreenshotStudioConfig>;
   onShowToast?: (title: string, description?: string) => void;
 }
 
-/**
- * useScreenshotStudio hook return
- */
 export interface UseScreenshotStudioReturn {
-  // State
   screens: ScreenshotContent[];
   design: ScreenshotDesign;
   currentLanguage: Language;
@@ -44,33 +33,26 @@ export interface UseScreenshotStudioReturn {
   appIcon: string | null;
   projectId: string | null;
 
-  // Design management
   updateDesign: (updates: Partial<ScreenshotDesign>) => void;
   updateActiveScreen: (updates: Partial<ScreenshotContent>) => void;
   setSelectedScreenId: (screenId: string) => void;
 
-  // Language management
   changeLanguage: (newLanguage: Language) => void;
 
-  // Screen management
   addScreen: () => void;
   removeScreen: (screenId: string) => void;
   duplicateScreen: (screenId: string) => void;
 
-  // Template management
   applyTemplate: (template: ScreenshotTemplate) => void;
 
-  // Generation
   generateDesignedScreenshot: (
     screenId: string
   ) => Promise<{ url: string; id: string } | undefined>;
 
-  // Export
   exportAllScreensAsZip: (
     format?: ScreenshotFormat
   ) => Promise<void>;
 
-  // AI features (if available)
   handleAIMagic?: (screenId: string) => Promise<void>;
   handleTranslate?: (
     screenId: string,
@@ -78,7 +60,6 @@ export interface UseScreenshotStudioReturn {
   ) => Promise<void>;
   handleGenerateMetadata?: () => Promise<void>;
 
-  // Project management
   setAppMetadata: (metadata: AppStoreMetadata) => void;
   setAppIcon: (icon: string | null) => void;
   setProjectId: (id: string | null) => void;
@@ -86,9 +67,6 @@ export interface UseScreenshotStudioReturn {
   _loadProjectState: (state: Partial<ScreenshotProject>) => void;
 }
 
-/**
- * Default screens
- */
 const DEFAULT_SCREENS: ScreenshotContent[] = [
   {
     id: '1',
@@ -132,9 +110,6 @@ const DEFAULT_SCREENS: ScreenshotContent[] = [
   },
 ];
 
-/**
- * Default design
- */
 const DEFAULT_DESIGN: ScreenshotDesign = {
   backgroundColor: '#6366f1',
   backgroundGradientEnd: '#a855f7',
@@ -169,9 +144,6 @@ const DEFAULT_DESIGN: ScreenshotDesign = {
   isPanoramic: false,
 };
 
-/**
- * Default app metadata
- */
 const DEFAULT_APP_METADATA: AppStoreMetadata = {
   appName: 'Growdo',
   subtitle: 'AI Content Generator',
@@ -182,9 +154,6 @@ const DEFAULT_APP_METADATA: AppStoreMetadata = {
   whatsNew: 'New Design Studio integration!',
 };
 
-/**
- * useScreenshotStudio hook
- */
 export function useScreenshotStudio(
   options: UseScreenshotStudioOptions = {}
 ): UseScreenshotStudioReturn {
@@ -200,21 +169,10 @@ export function useScreenshotStudio(
 
   const serviceRef = useRef<ScreenshotStudioService | null>(null);
 
-  // Initialize service once
   if (!serviceRef.current) {
     serviceRef.current = new ScreenshotStudioService(fullConfig);
   }
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      // Clean up service resources if needed
-      if (serviceRef.current) {
-        // Any cleanup logic can go here
-      }
-    };
-  }, []);
-
   const [screens, setScreens] = useState<ScreenshotContent[]>(DEFAULT_SCREENS);
   const [design, setDesign] = useState<ScreenshotDesign>(DEFAULT_DESIGN);
   const [currentLanguage, setCurrentLanguage] = useState<Language>(
@@ -414,13 +372,11 @@ export function useScreenshotStudio(
       } finally {
         setIsProcessing(false);
 
-        // Clean up object URL after a delay
         if (url) {
           setTimeout(() => {
             try {
               URL.revokeObjectURL(url!);
-            } catch (e) {
-              // Ignore cleanup errors
+            } catch {
             }
           }, 100);
         }

package/src/presentation/index.ts

@@ -1,7 +1,3 @@
-/**
- * Presentation Layer Index
- * Export all presentation hooks
- */
 
 export * from './hooks/useScreenshotStudio';
 export * from './hooks/useCanvasExport';