@silly_yi/easyprint-designer 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,386 @@
+interface PageConfig {
+    widthMm: number;
+    heightMm: number;
+    dpi: number;
+    background: string;
+    showGrid: boolean;
+    gridSizePx: number;
+    paper: string;
+    unit?: "mm" | "px" | "pt";
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    showPageNumber?: boolean;
+    pageNumberFormat?: string;
+    pageNumberPosition?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    pageNumberColor?: string;
+    pageNumberSize?: number;
+}
+type ElementType = "text" | "rect" | "line" | "image" | "table" | "barcode" | "qrcode";
+interface TableCellConfig {
+    id: string;
+    text: string;
+    renderFn?: string;
+    rowSpan: number;
+    colSpan: number;
+    bgColor?: string;
+    color?: string;
+    hidden?: boolean;
+    fontFamily?: string;
+    fontSize?: number;
+    bold?: boolean;
+    italic?: boolean;
+    align?: "left" | "center" | "right";
+    valign?: "top" | "middle" | "bottom";
+}
+interface ElementConfig {
+    id: string;
+    type: ElementType;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    rotation?: number;
+    locked?: boolean;
+    renderFn?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeStyle?: "solid" | "dashed" | "dotted";
+    borderRadius?: number;
+    text?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    color?: string;
+    align?: "left" | "center" | "right";
+    valign?: "top" | "middle" | "bottom";
+    bold?: boolean;
+    italic?: boolean;
+    src?: string;
+    objectFit?: "fill" | "contain" | "cover";
+    rows?: number;
+    cols?: number;
+    headerRows?: number;
+    dataRowRenderFn?: string;
+    showSummaryRow?: boolean;
+    summaryColumns?: number[];
+    borderColor?: string;
+    borderWidth?: number;
+    borderStyle?: "solid" | "dashed" | "dotted" | "none";
+    cells?: TableCellConfig[][];
+    colWidths?: number[];
+    rowHeights?: number[];
+    value?: string;
+    narrow?: number;
+    wide?: number;
+    quietZone?: number;
+    eccLevel?: "L" | "M" | "Q" | "H";
+    darkColor?: string;
+    lightColor?: string;
+    margin?: number;
+}
+interface DesignerOptions {
+    paper?: string;
+    pageWidthMm?: number;
+    pageHeightMm?: number;
+    dpi?: number;
+    gridSizePx?: number;
+    onSelect?: (el: ElementConfig | null) => void;
+    onChange?: (config: DesignerConfig) => void;
+}
+interface DesignerConfig {
+    version: number;
+    page: PageConfig;
+    elements: ElementConfig[];
+}
+interface PreviewerOptions$1 {
+    data?: any;
+}
+interface Point {
+    x: number;
+    y: number;
+}
+interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+declare const PAPER_PRESETS: {
+    key: string;
+    label: string;
+    wMm: number;
+    hMm: number;
+}[];
+declare const CODE39_PATTERNS: {
+    [key: string]: string;
+};
+
+declare class Renderer {
+    ctx: CanvasRenderingContext2D;
+    imageCache: {
+        [key: string]: HTMLImageElement;
+    };
+    lastDpiScale: number;
+    constructor(ctx: CanvasRenderingContext2D);
+    setDpiScale(scale: number): void;
+    getImage(src: string, onLoad?: () => void): HTMLImageElement | null;
+    clear(w: number, h: number): void;
+    drawGrid(page: PageConfig, w: number, h: number): void;
+    drawElement(el: ElementConfig, onInvalidate?: () => void): void;
+    drawGuideLines(guides: {
+        type: 'h' | 'v';
+        pos: number;
+        hideLine?: boolean;
+        distanceLines?: {
+            start: number;
+            end: number;
+            valuePx: number;
+        }[];
+    }[], w: number, h: number, unit?: "mm" | "px" | "pt", dpi?: number): void;
+    drawText(el: ElementConfig): void;
+    wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[];
+    drawRect(el: ElementConfig): void;
+    drawLine(el: ElementConfig): void;
+    drawImage(el: ElementConfig, onInvalidate?: () => void): void;
+    drawTable(el: ElementConfig): void;
+    drawBarcode(el: ElementConfig): void;
+    drawQRCode(el: ElementConfig, onInvalidate?: () => void): void;
+}
+
+declare class Designer {
+    options: DesignerOptions;
+    $container: JQuery;
+    $root: JQuery;
+    $left: JQuery;
+    $center: JQuery;
+    $right: JQuery;
+    $toolbar: JQuery;
+    $stageScroll: JQuery;
+    $stage: JQuery;
+    $pageWrap: JQuery;
+    $page: JQuery;
+    $canvas: JQuery;
+    $overlay: JQuery;
+    $selection: JQuery;
+    $props: JQuery;
+    $layers: JQuery;
+    $contextMenu: JQuery;
+    page: PageConfig;
+    elements: ElementConfig[];
+    selectedIds: string[];
+    groupRotation: number;
+    tool: string;
+    zoom: number;
+    drag: {
+        mode: "move";
+        startX: number;
+        startY: number;
+        elIds: string[];
+        origins: {
+            [id: string]: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+            };
+        };
+    } | null;
+    resize: {
+        handle: string;
+        startX: number;
+        startY: number;
+        elIds: string[];
+        origins: {
+            [id: string]: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                rotation: number;
+                fontSize?: number;
+            };
+        };
+        groupOrigin?: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+    } | null;
+    rotate: {
+        startAngle: number;
+        startRotations: {
+            [id: string]: number;
+        };
+        elIds: string[];
+        cx: number;
+        cy: number;
+        origins?: {
+            [id: string]: {
+                x: number;
+                y: number;
+            };
+        };
+        groupRect?: {
+            w: number;
+            h: number;
+        };
+        currentDelta?: number;
+        groupStartAngle?: number;
+    } | null;
+    tableSelect: {
+        elId: string;
+        startR: number;
+        startC: number;
+        currentR: number;
+        currentC: number;
+    } | null;
+    tableResize: {
+        elId: string;
+        type: 'col' | 'row';
+        index: number;
+        startX: number;
+        startY: number;
+        originalSize: number;
+        nextOriginalSize?: number;
+    } | null;
+    tableEditMode: string | null;
+    marquee: {
+        startX: number;
+        startY: number;
+        currentX: number;
+        currentY: number;
+    } | null;
+    guideLines: {
+        type: 'h' | 'v';
+        pos: number;
+        hideLine?: boolean;
+        distanceLines?: {
+            start: number;
+            end: number;
+            valuePx: number;
+        }[];
+    }[];
+    selectedTableCells: {
+        r: number;
+        c: number;
+    }[];
+    ctx: CanvasRenderingContext2D;
+    renderer: Renderer;
+    _renderQueued: boolean;
+    _destroyed: boolean;
+    _changeTimer: any;
+    _history: string[];
+    _historyIndex: number;
+    constructor(container: HTMLElement | string, options?: DesignerOptions);
+    _buildDom(): void;
+    _bindEvents(): void;
+    _showContextMenu(e: JQuery.Event): void;
+    _handleContextMenuAction(action: string): void;
+    _mergeSelectedCells(el: ElementConfig): void;
+    _unmergeSelectedCells(el: ElementConfig): void;
+    _showInPlaceEdit(el: ElementConfig, targetCell?: {
+        r: number;
+        c: number;
+    }): void;
+    _pushHistory(): void;
+    undo(): void;
+    redo(): void;
+    _loadConfigInternal(config: DesignerConfig): void;
+    _syncStageSize(): void;
+    render(): void;
+    _renderPageNumber(ctx: CanvasRenderingContext2D, pagePxW: number, pagePxH: number): void;
+    _hitTest(mx: number, my: number): ElementConfig | null;
+    _hitTestTableCell(el: ElementConfig, mx: number, my: number): {
+        r: number;
+        c: number;
+    } | null;
+    _hitTestTableBorder(el: ElementConfig, mx: number, my: number): {
+        type: 'col' | 'row';
+        index: number;
+    } | null;
+    _toModelPoint(evt: JQuery.Event): Point;
+    _onStageMouseDown(evt: JQuery.Event): void;
+    _onHandleMouseDown(evt: JQuery.Event, handle: string): void;
+    _onRotateMouseDown(evt: JQuery.Event): void;
+    _onDocMouseMove(evt: JQuery.Event): void;
+    _onDocMouseUp(evt: JQuery.Event): void;
+    _syncSelectionBox(): void;
+    _renderLayers(): void;
+    _reorderLayer(srcId: string, targetId: string): void;
+    _renderProps(): void;
+    _renderField(scope: string, key: string, type: string, value: any, extra?: any, label?: string): string;
+    _onPropsChange(e?: JQuery.Event): void;
+    getSelected(): ElementConfig | null;
+    _updateSelectedTableCells(): void;
+    selectById(id: string | null): void;
+    toggleSelect(id: string): void;
+    addElement(el: ElementConfig): void;
+    removeSelected(): void;
+    getConfig(): DesignerConfig;
+    setConfig(config: DesignerConfig): void;
+    _emitChange(): void;
+    setZoom(z: number): void;
+    setTool(tool: string): void;
+    _showColorDialog(title: string, initialColor: string, onConfirm: (color: string) => void): void;
+    fillData(data: any): void;
+    _openJsonModal(title: string, content: string, onOk?: (val: string) => void): void;
+}
+
+interface PreviewerOptions {
+    data?: any;
+}
+declare class Previewer {
+    config: DesignerConfig;
+    data: any;
+    $container: JQuery<HTMLElement>;
+    pages: {
+        $page: JQuery<HTMLElement>;
+        $canvas: JQuery<HTMLElement>;
+        ctx: CanvasRenderingContext2D;
+        renderer: Renderer;
+    }[];
+    constructor(container: HTMLElement | string, config: DesignerConfig, options?: PreviewerOptions);
+    _createPage(): {
+        $page: any;
+        $canvas: any;
+        ctx: CanvasRenderingContext2D;
+        renderer: Renderer;
+    };
+    _buildDomAndRender(): void;
+    _renderPageNumbers(): void;
+    _evalRenderFn(fnBody: string, data: any, extraArgs?: {
+        rowIndex?: number;
+        colIndex?: number;
+        rowItem?: any;
+    }): any;
+    _populateElement(el: ElementConfig): ElementConfig;
+    _renderSplitTable(table: ElementConfig, firstPage: any, pagePxH: number): void;
+    /**
+     * Export the canvas as a JPEG image and trigger download
+     * If there are multiple pages, it exports a zip containing all pages.
+     */
+    exportJPG(filename?: string, quality?: number): Promise<void>;
+    /**
+     * Export the canvas as a PNG image and trigger download
+     * If there are multiple pages, it exports a zip containing all pages.
+     */
+    exportPNG(filename?: string): Promise<void>;
+    /**
+     * Export the canvas to a PDF document using jsPDF and trigger download
+     * Supports multiple pages
+     */
+    exportPDF(filename?: string): void;
+    /**
+     * Helper to trigger file download from data URL
+     */
+    private _downloadDataUrl;
+}
+
+declare function create(container: HTMLElement | string, options?: DesignerOptions): Designer;
+declare function preview(container: HTMLElement | string, config: DesignerConfig, options?: PreviewerOptions$1): Previewer;
+
+export { CODE39_PATTERNS, Designer, type DesignerConfig, type DesignerOptions, type ElementConfig, type ElementType, PAPER_PRESETS, type PageConfig, type Point, Previewer, type PreviewerOptions$1 as PreviewerOptions, type Rect, Renderer, type TableCellConfig, create, preview };