web-to-print 0.1.0

package/dist/types/types/editor.d.ts

@@ -0,0 +1,79 @@
+export interface CanvasTransform {
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    skewX?: number;
+    skewY?: number;
+}
+export interface PlacedLogo {
+    id: string;
+    dataUrl: string;
+    /** Downscaled preview for product catalog rendering (optional). */
+    previewDataUrl?: string;
+    transform?: CanvasTransform;
+}
+/** A point in 0-1 relative coordinates (fraction of canvas width/height). */
+export interface RelativePoint {
+    x: number;
+    y: number;
+}
+/** Print area defined by 4 independent corner points (any quadrilateral). */
+export interface PrintArea {
+    /** Top-left corner (0-1, relative to canvas) */
+    topLeft: RelativePoint;
+    /** Top-right corner (0-1, relative to canvas) */
+    topRight: RelativePoint;
+    /** Bottom-right corner (0-1, relative to canvas) */
+    bottomRight: RelativePoint;
+    /** Bottom-left corner (0-1, relative to canvas) */
+    bottomLeft: RelativePoint;
+    /** Top/bottom edge curvature (-1 to 1; positive = outward/convex, negative = inward/concave, default: 0) */
+    bulge?: number;
+}
+/** Legacy print area format (center + dimensions + transforms) for migration. */
+export interface LegacyPrintArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    angle?: number;
+    skewX?: number;
+    skewY?: number;
+    bulge?: number;
+    taper?: number;
+}
+export interface PlacedText {
+    id: string;
+    text: string;
+    fontFamily: string;
+    fontSize: number;
+    fill: string;
+    transform: CanvasTransform;
+}
+export interface EditorState {
+    fabricJson: string;
+    logos: PlacedLogo[];
+    texts: PlacedText[];
+    productImage: string | null;
+    width: number;
+    height: number;
+}
+export interface ArticleView {
+    image: string;
+    label: string;
+    printArea: PrintArea | null;
+    impMethod?: string;
+    impLocation?: string;
+    impWidthMm?: number;
+    impHeightMm?: number;
+    impDiameterMm?: number;
+    maxColours?: number;
+}
+export interface Article {
+    id: string;
+    name: string;
+    description: string;
+    views: ArticleView[];
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1,5 @@
+export type { LogoFormat, LogoMetadata, LogoValidationIssue, LogoValidationConfig, LogoValidationResult, LogoData, BgRemovalConfig } from './logo';
+export { DEFAULT_VALIDATION_CONFIG, DEFAULT_BG_REMOVAL_CONFIG } from './logo';
+export type { CanvasTransform, PlacedLogo, PlacedText, EditorState, PrintArea, RelativePoint, LegacyPrintArea, ArticleView, Article } from './editor';
+export type { LogoUploadLabels, EditorLabels } from './labels';
+export { DEFAULT_LOGO_UPLOAD_LABELS, DEFAULT_EDITOR_LABELS } from './labels';

package/dist/types/types/labels.d.ts

@@ -0,0 +1,30 @@
+export interface LogoUploadLabels {
+    urlPlaceholder: string;
+    urlSubmit: string;
+    dividerText: string;
+    dropPromptText: string;
+    dropPromptHint: string;
+    uploadAriaLabel: string;
+    removeAriaLabel: (fileName: string) => string;
+    urlErrorEmpty: string;
+    urlErrorInvalid: string;
+    urlErrorProtocol: string;
+    urlErrorHttp: (status: number, statusText: string) => string;
+    urlErrorNetwork: string;
+    urlErrorFetch: string;
+    bgRemovalProcessing: string;
+    bgRemovalUseOriginal: string;
+    bgRemovalUseRemoved: string;
+    bgRemovalFailed: string;
+    rejectionDpiUnit: string;
+}
+export declare const DEFAULT_LOGO_UPLOAD_LABELS: LogoUploadLabels;
+export interface EditorLabels {
+    addTextButton: string;
+    addTextTooltip: string;
+    fontSelectTooltip: string;
+    colorPickerTooltip: string;
+    deleteButtonTooltip: string;
+    defaultText: string;
+}
+export declare const DEFAULT_EDITOR_LABELS: EditorLabels;

package/dist/types/types/logo.d.ts

@@ -0,0 +1,47 @@
+export type LogoFormat = 'png' | 'jpeg' | 'svg' | 'tiff' | 'avif' | 'unknown';
+export interface LogoMetadata {
+    format: LogoFormat;
+    width: number;
+    height: number;
+    dpiX: number | null;
+    dpiY: number | null;
+    fileSize: number;
+    fileName: string;
+    mimeType: string;
+    hasTransparency: boolean;
+}
+export interface LogoValidationIssue {
+    code: string;
+    severity: 'error' | 'warning';
+    message: string;
+}
+export interface LogoValidationConfig {
+    minDpi: number;
+    maxFileSize: number;
+    minWidth: number;
+    minHeight: number;
+    allowedFormats: LogoFormat[];
+}
+export interface LogoValidationResult {
+    valid: boolean;
+    metadata: LogoMetadata;
+    issues: LogoValidationIssue[];
+}
+export interface LogoData {
+    dataUrl: string;
+    /** Downscaled preview for product catalog rendering (optional, for backward compat). */
+    previewDataUrl?: string;
+    metadata: LogoMetadata;
+}
+export declare const DEFAULT_VALIDATION_CONFIG: LogoValidationConfig;
+export interface BgRemovalConfig {
+    /** Color distance threshold (0-255). Default: 40 */
+    tolerance: number;
+    /** Min fraction of edge pixels sharing a color to count as background. Default: 0.3 */
+    minEdgeRatio: number;
+    /** Trim result to opaque content bounding box after background removal. Default: true */
+    autoCrop: boolean;
+    /** Padding in pixels around the opaque bounding box when auto-cropping. Default: 2 */
+    autoCropPadding: number;
+}
+export declare const DEFAULT_BG_REMOVAL_CONFIG: BgRemovalConfig;

package/dist/types/utils/background-removal.d.ts

@@ -0,0 +1,95 @@
+import { BgRemovalConfig } from '../types';
+export interface BgRemovalResult {
+    blob: Blob;
+    dataUrl: string;
+    width: number;
+    height: number;
+}
+/** Euclidean distance between two RGB colors. */
+export declare function colorDistance(r1: number, g1: number, b1: number, r2: number, g2: number, b2: number): number;
+export interface PixelData {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+/**
+ * Find the dominant color among a list of RGB samples.
+ *
+ * Phase 1: Coarse quantization (step 24) to find the candidate color cluster center.
+ * Phase 2: Count all samples within `tolerance` Euclidean RGB distance of that center.
+ * This two-phase approach handles JPEG artifacts and gradients that split across
+ * fine bucket boundaries.
+ *
+ * Returns [r, g, b] or null if no dominant color is found.
+ */
+export declare function findDominantColor(samples: [number, number, number][], minRatio: number, tolerance?: number): [number, number, number] | null;
+/**
+ * Sample all pixels along the 4 image edges.
+ * Returns array of [r, g, b] samples.
+ */
+export declare function sampleImageEdges(pixels: PixelData): [number, number, number][];
+/**
+ * Sample opaque pixels that border transparent pixels (the transparency boundary).
+ * Returns array of [r, g, b] samples.
+ */
+export declare function sampleTransparencyBoundary(pixels: PixelData): [number, number, number][];
+/** Backward-compatible wrapper: detect dominant color along image edges. */
+export declare function detectBackgroundColor(pixels: PixelData, minEdgeRatio: number, tolerance?: number): [number, number, number] | null;
+/**
+ * BFS flood-fill from all edge pixels that match the background color within tolerance.
+ * Uses 8-directional connectivity for better coverage through diagonal gaps.
+ * Sets alpha to 0 for all connected matching pixels.
+ * Modifies `data` in place.
+ */
+export declare function floodFillFromEdges(pixels: PixelData, bgColor: [number, number, number], tolerance: number): void;
+/**
+ * BFS flood-fill inward from the transparency boundary (opaque pixels adjacent to transparent).
+ * Removes connected pixels matching bgColor within tolerance.
+ * Modifies `data` in place. Returns the number of pixels removed.
+ */
+export declare function floodFillFromBoundary(pixels: PixelData, bgColor: [number, number, number], tolerance: number): number;
+/**
+ * Remove all opaque pixels matching `color` within `tolerance` (color-key removal).
+ * Unlike flood-fill, this does not require connectivity — it removes matching pixels
+ * anywhere in the image. Useful for cleaning up trapped interior regions and bypassing
+ * anti-aliased fringes that block BFS-based approaches.
+ * Modifies `data` in place. Returns the number of pixels removed.
+ */
+export declare function removeMatchingPixels(pixels: PixelData, color: [number, number, number], tolerance: number): number;
+/**
+ * Remove bg-colored pixel clusters that are fully enclosed by non-bg opaque pixels
+ * (no pixel in the cluster is adjacent to a transparent pixel). These are trapped
+ * interior regions — e.g. white background inside a letter 'O' — that edge flood fill
+ * can't reach because the foreground forms a closed boundary.
+ * Unlike removeMatchingPixels, this preserves bg-colored pixels at foreground edges
+ * (anti-aliased transitions), preventing the inner-pass safety check from failing.
+ * Modifies `data` in place. Returns the number of pixels removed.
+ */
+export declare function removeEnclosedBackground(pixels: PixelData, bgColor: [number, number, number], tolerance: number): number;
+/**
+ * Anti-alias edges between transparent (removed) and opaque (kept) pixels.
+ * For each opaque pixel adjacent to a transparent pixel, set partial alpha
+ * based on its color distance from the background — creating smooth transitions.
+ * Modifies `data` in place.
+ */
+export declare function antiAliasEdges(pixels: PixelData, bgColor: [number, number, number], tolerance: number): void;
+/**
+ * Compute the fraction of non-matching opaque pixels that sit on the transparency
+ * boundary (adjacent to a transparent pixel). A high fraction indicates the non-matching
+ * pixels are anti-aliased foreground edges, meaning the matching color IS the foreground
+ * content and should not be removed.
+ */
+export declare function nonMatchingBoundaryFraction(pixels: PixelData, color: [number, number, number], tolerance: number): number;
+/**
+ * Compute the fraction of matching pixels in the largest connected component.
+ * Text consists of multiple disconnected components (individual letters);
+ * background panels are one large contiguous region.
+ * Uses 8-directional connectivity for consistency with flood fill.
+ */
+export declare function largestMatchingComponentFraction(pixels: PixelData, color: [number, number, number], tolerance: number, matchCount: number): number;
+/**
+ * Find the bounding box of all opaque pixels (alpha > threshold).
+ * Returns [minX, minY, maxX, maxY] or null if no opaque pixels are found.
+ */
+export declare function findOpaqueBoundingBox(pixels: PixelData, alphaThreshold?: number): [number, number, number, number] | null;
+export declare function removeBackground(source: File | Blob, config?: Partial<BgRemovalConfig>): Promise<BgRemovalResult>;

package/dist/types/utils/canvas-helpers.d.ts

@@ -0,0 +1,60 @@
+import { StaticCanvas, FabricObject } from 'fabric';
+import { CanvasTransform, PrintArea, LegacyPrintArea, RelativePoint } from '../types';
+export declare function generateObjectId(): string;
+export declare function setCanvasBackground(canvas: StaticCanvas, imageUrl: string, fitMode?: 'cover' | 'contain' | 'fill'): Promise<void>;
+/** Convert PrintArea corner coordinates (0-1) to absolute pixel positions. */
+export declare function printAreaToPixelCorners(pa: PrintArea, canvasW: number, canvasH: number): [RelativePoint, RelativePoint, RelativePoint, RelativePoint];
+/** Convert absolute pixel corner positions back to 0-1 relative PrintArea. */
+export declare function pixelCornersToPrintArea(corners: [RelativePoint, RelativePoint, RelativePoint, RelativePoint], canvasW: number, canvasH: number, bulge?: number): PrintArea;
+/**
+ * Convert a legacy center+dimensions print area to the 4-corner format.
+ * Applies taper, skew, and rotation in 0-1 coordinate space.
+ */
+export declare function legacyToPrintArea(legacy: LegacyPrintArea): PrintArea;
+/** Detect whether a PrintArea uses pixel coordinates (at least one value > 1). */
+export declare function isPixelPrintArea(pa: PrintArea): boolean;
+/** Normalize a PrintArea from pixel coordinates to 0–1 relative values. Already-normalized areas are returned unchanged. */
+export declare function normalizePrintArea(pa: PrintArea, imageWidth: number, imageHeight: number): PrintArea;
+/** Returns a default centered print area (30% width x 35% height rectangle). */
+export declare function defaultPrintArea(): PrintArea;
+/**
+ * Compute a CanvasTransform to fit a logo within a 4-corner print area.
+ * Uses the centroid for position, average edge lengths for dimensions,
+ * and the bottom edge angle for rotation.
+ */
+export declare function fitLogoToPrintArea(logoWidth: number, logoHeight: number, printArea: PrintArea, canvasWidth: number, canvasHeight: number): CanvasTransform;
+/**
+ * Warp a logo image to follow the bulge curvature of a print area.
+ * Slices the image into vertical strips and displaces each vertically
+ * according to the same quadratic Bezier curve used by the print area outline.
+ */
+export declare function warpImageForBulge(sourceImg: HTMLImageElement | HTMLCanvasElement, bulge: number, areaHeight: number, logoScale: number): HTMLCanvasElement;
+/**
+ * Extract width/height from an SVG data URL by parsing viewBox or width/height attributes.
+ * Returns null for non-SVG data URLs or when dimensions cannot be determined.
+ */
+export declare function parseSvgDimensions(svgDataUrl: string): {
+    width: number;
+    height: number;
+} | null;
+/**
+ * Upscale an SVG data URL so the browser rasterizes it at high resolution.
+ * SVGs loaded via `<img src>` are rasterized at their intrinsic dimensions
+ * (from viewBox or width/height attributes), which are often small. This
+ * function sets explicit width/height on the root `<svg>` element to ensure
+ * high-resolution rasterization when loaded into Fabric.js.
+ *
+ * Returns the (possibly modified) data URL and the uniform scale factor applied.
+ * For non-SVG data URLs, returns the input unchanged with scaleApplied = 1.
+ */
+export declare function upscaleSvgDataUrl(svgDataUrl: string, maxSize?: number): {
+    dataUrl: string;
+    scaleApplied: number;
+};
+/**
+ * Trim excess whitespace from an SVG by adjusting its viewBox to the actual content bounds.
+ * Uses `getBBox()` which requires the SVG to be temporarily inserted into the DOM.
+ * Returns the input unchanged for non-SVG data URLs or when trimming is not possible.
+ */
+export declare function trimSvgWhitespace(svgDataUrl: string, padding?: number): Promise<string>;
+export declare function addLogoToCanvas(canvas: StaticCanvas, logoDataUrl: string, transform: CanvasTransform, id: string): Promise<FabricObject>;

package/dist/types/utils/format-detection.d.ts

@@ -0,0 +1,4 @@
+import { LogoFormat } from '../types';
+export declare function mimeToFormat(mime: string): LogoFormat;
+export declare function isSvgContent(text: string): boolean;
+export declare function detectFileFormat(file: File): Promise<LogoFormat>;

package/dist/types/utils/html-render-helpers.d.ts

@@ -0,0 +1,44 @@
+/** Utility functions for the HTML/CSS-based logo renderer and Canvas 2D export. */
+import { CanvasTransform } from '../types';
+/** Load an image from a URL/data-URL and return the HTMLImageElement once loaded. */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+/** Compute contain-fit dimensions (uniform scale to fit inside container). */
+export declare function computeContainFit(containerW: number, containerH: number, imgW: number, imgH: number): {
+    fittedW: number;
+    fittedH: number;
+};
+/**
+ * Convert a Fabric.js center-origin transform to CSS top-left positioning.
+ * Fabric.js stores x/y as the center of the object. CSS `transform-origin: center`
+ * means the origin is at the center of the unscaled element box, so left/top are
+ * computed by subtracting half the *natural* (unscaled) dimensions.
+ */
+export declare function centerOriginToTopLeft(transform: CanvasTransform, naturalW: number, naturalH: number): {
+    left: number;
+    top: number;
+};
+/**
+ * Parse an SVG data URL to extract intrinsic dimensions from viewBox or width/height attributes.
+ * Returns null if the data URL is not SVG or dimensions cannot be determined.
+ */
+export declare function getSvgIntrinsicSize(svgDataUrl: string): {
+    width: number;
+    height: number;
+} | null;
+export interface RenderLayer {
+    img: HTMLImageElement;
+    naturalWidth: number;
+    naturalHeight: number;
+    left: number;
+    top: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    skewX: number;
+    skewY: number;
+}
+/**
+ * Canvas 2D export: draw product background + logo layers onto a plain canvas.
+ * Returns a data URL string.
+ */
+export declare function renderToCanvas(containerW: number, containerH: number, bgColor: string, productImg: HTMLImageElement | undefined, layers: RenderLayer[], format?: 'png' | 'jpeg', quality?: number): string;

package/dist/types/utils/image-preview.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generate a downscaled preview data URL from a full-resolution data URL.
+ *
+ * - SVG data URLs are returned unchanged (vectors are compact and scale-independent).
+ * - Raster images are downscaled so the longest side is at most `maxSize` pixels.
+ *   If the image is already smaller, the original is returned unchanged.
+ * - Output is PNG to preserve transparency.
+ *
+ * @param dataUrl  Full-resolution data URL
+ * @param maxSize  Maximum pixel dimension for the longest side (default: 800)
+ * @returns  Downscaled PNG data URL, or the original for SVGs / small images
+ */
+export declare function generatePreviewDataUrl(dataUrl: string, maxSize?: number): Promise<string>;

package/dist/types/utils/logo-validation.d.ts

@@ -0,0 +1,2 @@
+import { LogoValidationConfig, LogoValidationResult } from '../types';
+export declare function validateLogo(file: File, config?: LogoValidationConfig): Promise<LogoValidationResult>;

package/dist/types/utils/pdf-export.d.ts

@@ -0,0 +1,32 @@
+import { LogoData, Article } from '../types';
+export interface PdfExportConfig {
+    pageFormat: 'a4' | 'letter';
+    orientation: 'portrait' | 'landscape';
+    marginMm: number;
+    showPrintAreaGuides: boolean;
+    title: string;
+}
+/** Detect image format from a data URL for jsPDF's addImage(). */
+export declare function dataUrlToImageFormat(dataUrl: string): 'PNG' | 'JPEG';
+/** Returns true if the data URL is an SVG (which jsPDF cannot embed directly). */
+export declare function isSvgDataUrl(dataUrl: string): boolean;
+/**
+ * Rasterize a data URL to PNG via an offscreen canvas.
+ * SVG data URLs must be rasterized because jsPDF only supports PNG/JPEG.
+ * For SVGs, upscaleSvgDataUrl is applied first so the browser rasterizes
+ * the vector artwork at high resolution (maxSize px) instead of the often
+ * tiny intrinsic SVG dimensions.
+ * Non-SVG data URLs are returned unchanged.
+ */
+export declare function rasterizeDataUrl(dataUrl: string, maxSize?: number): Promise<string>;
+/** Merge partial config with defaults. */
+export declare function buildPdfConfig(partial?: Partial<PdfExportConfig>): PdfExportConfig;
+/**
+ * Generate and download a print-shop-ready PDF for a product.
+ *
+ * Page 1: Logo at full quality with metadata table.
+ * Page 2: High-resolution product mockup with print area guides.
+ *
+ * Requires jsPDF to be loaded globally via script tag before calling this function.
+ */
+export declare function exportProductPdf(logo: LogoData, article: Article, viewIndex: number, productMockupDataUrl: string, canvasWidth: number, canvasHeight: number, config?: Partial<PdfExportConfig>): Promise<void>;

package/dist/web-to-print/index.esm.js

@@ -0,0 +1 @@
+export{a as DEFAULT_BG_REMOVAL_CONFIG,D as DEFAULT_VALIDATION_CONFIG}from"./p-D8pVJRuX.js";import{u as t,p as n}from"./p-CK8OAq2J.js";const o={pageFormat:"a4",orientation:"portrait",marginMm:15,showPrintAreaGuides:!0,title:"Logo Print Specification"};function e(t){return t.startsWith("data:image/jpeg")||t.startsWith("data:image/jpg")?"JPEG":"PNG"}async function i(i,r,a,s,c,l,m){const d=(u=m,{...o,...u});var u;const p=function(){const t="undefined"!=typeof window?window:void 0,n=t?.jspdf;if(null!=n?.jsPDF)return n.jsPDF;throw new Error('jsPDF is required for PDF export. Load it via: <script src="https://unpkg.com/jspdf@4.1.0/dist/jspdf.umd.min.js"><\/script>')}(),f=await function(n,o=4e3){if(!function(t){return t.startsWith("data:image/svg+xml")}(n))return Promise.resolve(n);const{dataUrl:e}=t(n,o);return new Promise(((t,n)=>{const i=new Image;i.onload=()=>{const e=i.naturalWidth||o,r=i.naturalHeight||o,a=document.createElement("canvas");a.width=e,a.height=r;const s=a.getContext("2d");null!=s?(s.drawImage(i,0,0,e,r),t(a.toDataURL("image/png"))):n(new Error("Failed to get 2D context for SVG rasterization"))},i.onerror=()=>n(new Error("Failed to load image for rasterization")),i.src=e}))}(i.dataUrl),g=new p({orientation:d.orientation,unit:"mm",format:d.pageFormat});!function(t,n,o,i){const r=t.internal.pageSize.getWidth(),a=t.internal.pageSize.getHeight(),s=i.marginMm,c=r-2*s;t.setFontSize(18),t.setFont("helvetica","bold"),t.text(i.title,r/2,s+8,{align:"center"});const l=e(o),m=s+16,d=.5*a,u=n.metadata.width/Math.max(n.metadata.height,1);let p=c,f=p/u;f>d&&(f=d,p=f*u),t.addImage(o,l,(r-p)/2,m,p,f);const g=m+f+10,v=n.metadata,w=[["Format",v.format.toUpperCase()],["Dimensions",`${v.width} x ${v.height} px`],["DPI",null!==v.dpiX?`${v.dpiX} x ${v.dpiY??v.dpiX}`:"Not available"],["File Size",(P=v.fileSize,P<1024?`${P} B`:P<1048576?`${(P/1024).toFixed(1)} KB`:`${(P/1048576).toFixed(1)} MB`)],["Transparency",v.hasTransparency?"Yes":"No"],["File Name",v.fileName]];var P;t.setFontSize(10),w.forEach(((n,o)=>{const e=g+7*o;t.setFont("helvetica","bold"),t.text(n[0],s,e),t.setFont("helvetica","normal"),t.text(n[1],s+30,e)})),t.setDrawColor(200,200,200),t.setLineWidth(.3),t.line(s,g-4,s+c,g-4)}(g,i,f,d),g.addPage(),function(t,o,i,r,a,s,c){const l=t.internal.pageSize.getWidth(),m=t.internal.pageSize.getHeight(),d=c.marginMm,u=l-2*d;t.setFontSize(16),t.setFont("helvetica","bold"),t.text(o.name,l/2,d+8,{align:"center"});const p=o.views[i],f=[["Article ID",o.id]];p?.impMethod&&f.push(["Print Method",p.impMethod]),p?.impLocation&&f.push(["Print Location",p.impLocation]),p?.impDiameterMm&&p.impDiameterMm>0?f.push(["Print Area",`Ø ${p.impDiameterMm} mm`]):p?.impWidthMm&&p?.impHeightMm&&f.push(["Print Area",`${p.impWidthMm} × ${p.impHeightMm} mm`]),p?.maxColours&&f.push(["Max Colors",`${p.maxColours}`]);const g=d+16;t.setFontSize(9),f.forEach(((n,o)=>{const e=g+6*o;t.setFont("helvetica","bold"),t.text(n[0],d,e),t.setFont("helvetica","normal"),t.text(n[1],d+30,e)})),t.setDrawColor(200,200,200),t.setLineWidth(.3),t.line(d,g+6*f.length+2,d+u,g+6*f.length+2);const v=e(r),w=g+6*f.length+6,P=m-w-d,h=a/Math.max(s,1);let F=u,$=F/h;$>P&&($=P,F=$*h);const D=(l-F)/2;t.addImage(r,v,D,w,F,$),c.showPrintAreaGuides&&null!=p?.printArea&&function(t,o,e,i,r,a,s,c){const l=n(o,s,c),m=r/s,d=a/c,u=l.map((t=>({x:e+t.x*m,y:i+t.y*d})));t.setDrawColor(37,99,235),t.setLineWidth(.4),t.setLineDashPattern([2,1.5],0);for(let n=0;n<4;n++){const o=u[n],e=u[(n+1)%4];t.line(o.x,o.y,e.x,e.y)}t.setLineDashPattern([],0)}(t,p.printArea,D,w,F,$,a,s)}(g,r,a,s,c,l,d),g.save(`${r.id}.pdf`)}export{i as exportProductPdf}

package/dist/web-to-print/p-611ec561.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,g as o,h as s}from"./p-CUetmLbL.js";import{u as r,b as i,f as n,p as a}from"./p-CK8OAq2J.js";function l(t){return new Promise(((e,o)=>{const s=new Image;s.onload=()=>e(s),s.onerror=()=>o(new Error(`Failed to load image: ${t.slice(0,80)}`)),s.src=t}))}function h(t,e,o,s){const r=Math.min(t/o,e/s);return{fittedW:o*r,fittedH:s*r}}function c(t,e,o){return{left:t.x-e/2,top:t.y-o/2}}function d(t){if(!t.startsWith("data:image/svg+xml"))return null;let e;const o=t.indexOf(";base64,");if(-1!==o)e=atob(t.slice(o+8));else{const o=t.indexOf(",");if(-1===o)return null;e=decodeURIComponent(t.slice(o+1))}const s=e.match(/<svg[^>]*>/i);if(null===s)return null;const r=s[0],i=r.match(/viewBox=["']([^"']+)["']/);if(null!==i){const t=i[1].trim().split(/[\s,]+/),e=parseFloat(t[2]),o=parseFloat(t[3]);if(e>0&&o>0)return{width:e,height:o}}const n=r.match(/\bwidth=["']([^"']+)["']/),a=r.match(/\bheight=["']([^"']+)["']/);if(null!==n&&null!==a){const t=parseFloat(n[1]),e=parseFloat(a[1]);if(t>0&&e>0)return{width:t,height:e}}return null}const g=class{constructor(o){t(this,o),this.wtpRenderComplete=e(this,"wtpRenderComplete"),this.wtpRenderError=e(this,"wtpRenderError")}get el(){return o(this)}productImage;width=600;height=400;logos=[];backgroundColor="#ffffff";printArea;wtpRenderComplete;wtpRenderError;layers=[];containerWidth=0;containerHeight=0;productImg;componentWillLoad(){this.computeLayout()}onProductImageChange(){this.computeLayout()}onLogosChange(){this.computeLayout()}onPrintAreaChange(){this.computeLayout()}onSizeChange(){this.computeLayout()}onBackgroundColorChange(){this.emitRenderComplete()}async exportImage(t="png",e=1){const o=this.containerWidth||this.width,s=this.containerHeight||this.height,r=this.layers.map((t=>({img:t.exportImg,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,left:t.left,top:t.top,scaleX:t.scaleX,scaleY:t.scaleY,angle:t.angle,skewX:t.skewX,skewY:t.skewY})));return function(t,e,o,s,r,i="png",n=1){const a=document.createElement("canvas");a.width=t,a.height=e;const l=a.getContext("2d");if(l.fillStyle=o,l.fillRect(0,0,t,e),void 0!==s){const{fittedW:o,fittedH:r}=h(t,e,s.naturalWidth,s.naturalHeight);l.drawImage(s,(t-o)/2,(e-r)/2,o,r)}for(const t of r){l.save(),l.translate(t.left+t.naturalWidth/2,t.top+t.naturalHeight/2),l.rotate(t.angle*Math.PI/180);const e=Math.tan(t.skewX*Math.PI/180),o=Math.tan(t.skewY*Math.PI/180);l.transform(1,o,e,1,0,0),l.scale(t.scaleX,t.scaleY),l.drawImage(t.img,-t.naturalWidth/2,-t.naturalHeight/2,t.naturalWidth,t.naturalHeight),l.restore()}return a.toDataURL(`image/${i}`,n)}(o,s,this.backgroundColor,this.productImg,r,t,e)}async computeLayout(){try{let t=this.width,e=this.height;if(void 0!==this.productImage&&""!==this.productImage){const o=await l(this.productImage);this.productImg=o;const{fittedW:s,fittedH:r}=h(this.width,this.height,o.naturalWidth,o.naturalHeight);t=s,e=r}else this.productImg=void 0;this.containerWidth=t,this.containerHeight=e;const o=[];for(const s of this.logos){const h=s.previewDataUrl??s.dataUrl;if(void 0!==s.transform){const t=await l(s.dataUrl),e=t.naturalWidth,r=t.naturalHeight,{left:i,top:n}=c(s.transform,e,r);o.push({id:s.id,src:h,exportImg:t,naturalWidth:e,naturalHeight:r,left:i,top:n,scaleX:s.transform.scaleX,scaleY:s.transform.scaleY,angle:s.transform.angle,skewX:s.transform.skewX??0,skewY:s.transform.skewY??0})}else if(void 0!==this.printArea){let g,p,f=h;if(void 0!==this.printArea.bulge&&0!==this.printArea.bulge){const h=Math.round(2*Math.max(t,e)),{dataUrl:d}=r(s.dataUrl,h),u=await l(d);g=u.naturalWidth,p=u.naturalHeight;const w=n(g,p,this.printArea,t,e),[m,b,k,C]=a(this.printArea,t,e),y=Math.hypot(C.x-m.x,C.y-m.y),v=Math.hypot(k.x-b.x,k.y-b.y),x=i(u,this.printArea.bulge,(y+v)/2,w.scaleX);f=x.toDataURL("image/png"),g=x.width,p=x.height;const $=await l(f),{left:I,top:M}=c(w,g,p);o.push({id:s.id,src:f,exportImg:$,naturalWidth:g,naturalHeight:p,left:I,top:M,scaleX:w.scaleX,scaleY:w.scaleY,angle:w.angle,skewX:0,skewY:0})}else{const r=d(s.dataUrl);if(null!==r)g=r.width,p=r.height;else{const t=await l(s.dataUrl);g=t.naturalWidth,p=t.naturalHeight}const i=n(g,p,this.printArea,t,e),a=await l(f),{left:h,top:u}=c(i,g,p);o.push({id:s.id,src:f,exportImg:a,naturalWidth:g,naturalHeight:p,left:h,top:u,scaleX:i.scaleX,scaleY:i.scaleY,angle:i.angle,skewX:0,skewY:0})}}}this.layers=o,this.emitRenderComplete()}catch(t){const e=t instanceof Error?t.message:"Unknown render error";this.wtpRenderError.emit({message:e})}}async emitRenderComplete(){try{const t=await this.exportImage("png");this.wtpRenderComplete.emit({dataUrl:t})}catch{}}render(){return s("div",{key:"3a720dae0cd0ab070a90b1f20dff9adb699b0ba5",class:"wtp-logo-renderer",style:{width:`${this.containerWidth||this.width}px`,height:`${this.containerHeight||this.height}px`,backgroundColor:this.backgroundColor}},void 0!==this.productImage&&""!==this.productImage&&s("img",{key:"88b50d0a4fd320a935bd7008ef3ddfee1644cbab",class:"product-bg",src:this.productImage,alt:""}),this.layers.map((t=>s("img",{key:t.id,class:"logo-layer",src:t.src,alt:"",style:{position:"absolute",left:`${t.left}px`,top:`${t.top}px`,width:`${t.naturalWidth}px`,height:`${t.naturalHeight}px`,transformOrigin:"center",transform:`rotate(${t.angle}deg) skewX(${t.skewX}deg) skewY(${t.skewY}deg) scale(${t.scaleX}, ${t.scaleY})`}}))))}static get watchers(){return{productImage:[{onProductImageChange:0}],logos:[{onLogosChange:0}],printArea:[{onPrintAreaChange:0}],width:[{onSizeChange:0}],height:[{onSizeChange:0}],backgroundColor:[{onBackgroundColorChange:0}]}}};g.style='*.sc-wtp-logo-renderer,*.sc-wtp-logo-renderer::before,*.sc-wtp-logo-renderer::after{box-sizing:border-box}.sc-wtp-logo-renderer-h{font-family:var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--wtp-color-text, #1e293b);line-height:1.5}.wtp-logo-renderer.sc-wtp-logo-renderer{display:inline-block;position:relative;overflow:hidden;border:1px solid var(--wtp-color-border, #e2e8f0);border-radius:8px}.product-bg.sc-wtp-logo-renderer{display:block;width:100%;height:100%;object-fit:contain}.logo-layer.sc-wtp-logo-renderer{pointer-events:none}';export{g as wtp_logo_renderer}