web-to-print 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,228 @@
+export { a as DEFAULT_BG_REMOVAL_CONFIG, D as DEFAULT_VALIDATION_CONFIG } from './logo-D8pVJRuX.js';
+import { u as upscaleSvgDataUrl, p as printAreaToPixelCorners } from './canvas-helpers-CK8OAq2J.js';
+
+const DEFAULT_PDF_CONFIG = {
+    pageFormat: 'a4',
+    orientation: 'portrait',
+    marginMm: 15,
+    showPrintAreaGuides: true,
+    title: 'Logo Print Specification',
+};
+/**
+ * Get the jsPDF constructor from the global scope.
+ * jsPDF must be loaded via script tag (e.g. from unpkg CDN) before calling exportProductPdf().
+ * This avoids bundling jsPDF into the Stencil build (which fails due to Rollup/CommonJS conflicts).
+ */
+function getJsPDF() {
+    const global = typeof window !== 'undefined' ? window : undefined;
+    const jspdfModule = global?.['jspdf'];
+    if (jspdfModule?.jsPDF != null) {
+        return jspdfModule.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>');
+}
+/** Detect image format from a data URL for jsPDF's addImage(). */
+function dataUrlToImageFormat(dataUrl) {
+    if (dataUrl.startsWith('data:image/jpeg') || dataUrl.startsWith('data:image/jpg')) {
+        return 'JPEG';
+    }
+    return 'PNG';
+}
+/** Returns true if the data URL is an SVG (which jsPDF cannot embed directly). */
+function isSvgDataUrl(dataUrl) {
+    return dataUrl.startsWith('data:image/svg+xml');
+}
+/**
+ * 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.
+ */
+function rasterizeDataUrl(dataUrl, maxSize = 4000) {
+    if (!isSvgDataUrl(dataUrl))
+        return Promise.resolve(dataUrl);
+    // Upscale SVG so the browser rasterizes vectors at high resolution
+    const { dataUrl: upscaledUrl } = upscaleSvgDataUrl(dataUrl, maxSize);
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            const w = img.naturalWidth || maxSize;
+            const h = img.naturalHeight || maxSize;
+            const canvas = document.createElement('canvas');
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            if (ctx == null) {
+                reject(new Error('Failed to get 2D context for SVG rasterization'));
+                return;
+            }
+            ctx.drawImage(img, 0, 0, w, h);
+            resolve(canvas.toDataURL('image/png'));
+        };
+        img.onerror = () => reject(new Error('Failed to load image for rasterization'));
+        img.src = upscaledUrl;
+    });
+}
+/** Merge partial config with defaults. */
+function buildPdfConfig(partial) {
+    return { ...DEFAULT_PDF_CONFIG, ...partial };
+}
+/** Format a file size in bytes as a human-readable string. */
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** Render page 1: logo at full quality with metadata table. */
+function renderLogoPage(doc, logo, rasterLogoDataUrl, config) {
+    const pageW = doc.internal.pageSize.getWidth();
+    const pageH = doc.internal.pageSize.getHeight();
+    const margin = config.marginMm;
+    const contentW = pageW - 2 * margin;
+    // Title
+    doc.setFontSize(18);
+    doc.setFont('helvetica', 'bold');
+    doc.text(config.title, pageW / 2, margin + 8, { align: 'center' });
+    // Logo image — centered, filling available width while maintaining aspect ratio
+    const logoFormat = dataUrlToImageFormat(rasterLogoDataUrl);
+    const logoY = margin + 16;
+    const maxLogoH = pageH * 0.5;
+    const aspectRatio = logo.metadata.width / Math.max(logo.metadata.height, 1);
+    let imgW = contentW;
+    let imgH = imgW / aspectRatio;
+    if (imgH > maxLogoH) {
+        imgH = maxLogoH;
+        imgW = imgH * aspectRatio;
+    }
+    const imgX = (pageW - imgW) / 2;
+    doc.addImage(rasterLogoDataUrl, logoFormat, imgX, logoY, imgW, imgH);
+    // Metadata table below the logo
+    const tableY = logoY + imgH + 10;
+    const meta = logo.metadata;
+    const rows = [
+        ['Format', meta.format.toUpperCase()],
+        ['Dimensions', `${meta.width} x ${meta.height} px`],
+        ['DPI', meta.dpiX !== null ? `${meta.dpiX} x ${meta.dpiY ?? meta.dpiX}` : 'Not available'],
+        ['File Size', formatFileSize(meta.fileSize)],
+        ['Transparency', meta.hasTransparency ? 'Yes' : 'No'],
+        ['File Name', meta.fileName],
+    ];
+    doc.setFontSize(10);
+    const rowH = 7;
+    const col1W = 30;
+    rows.forEach((row, i) => {
+        const y = tableY + i * rowH;
+        doc.setFont('helvetica', 'bold');
+        doc.text(row[0], margin, y);
+        doc.setFont('helvetica', 'normal');
+        doc.text(row[1], margin + col1W, y);
+    });
+    // Separator line above the table
+    doc.setDrawColor(200, 200, 200);
+    doc.setLineWidth(0.3);
+    doc.line(margin, tableY - 4, margin + contentW, tableY - 4);
+}
+/** Draw dashed print area guide overlay on the product mockup. */
+function drawPrintAreaGuide(doc, printArea, imgX, imgY, imgW, imgH, canvasW, canvasH) {
+    const corners = printAreaToPixelCorners(printArea, canvasW, canvasH);
+    const scaleX = imgW / canvasW;
+    const scaleY = imgH / canvasH;
+    const pdfCorners = corners.map(c => ({
+        x: imgX + c.x * scaleX,
+        y: imgY + c.y * scaleY,
+    }));
+    doc.setDrawColor(37, 99, 235);
+    doc.setLineWidth(0.4);
+    doc.setLineDashPattern([2, 1.5], 0);
+    for (let i = 0; i < 4; i++) {
+        const from = pdfCorners[i];
+        const to = pdfCorners[(i + 1) % 4];
+        doc.line(from.x, from.y, to.x, to.y);
+    }
+    doc.setLineDashPattern([], 0);
+}
+/** Render page 2: product mockup with header and print area guides. */
+function renderProductPage(doc, article, viewIndex, mockupDataUrl, canvasW, canvasH, config) {
+    const pageW = doc.internal.pageSize.getWidth();
+    const pageH = doc.internal.pageSize.getHeight();
+    const margin = config.marginMm;
+    const contentW = pageW - 2 * margin;
+    doc.setFontSize(16);
+    doc.setFont('helvetica', 'bold');
+    doc.text(article.name, pageW / 2, margin + 8, { align: 'center' });
+    // Article details table
+    const view = article.views[viewIndex];
+    const detailRows = [['Article ID', article.id]];
+    if (view?.impMethod)
+        detailRows.push(['Print Method', view.impMethod]);
+    if (view?.impLocation)
+        detailRows.push(['Print Location', view.impLocation]);
+    if (view?.impDiameterMm && view.impDiameterMm > 0) {
+        detailRows.push(['Print Area', `\u00D8 ${view.impDiameterMm} mm`]);
+    }
+    else if (view?.impWidthMm && view?.impHeightMm) {
+        detailRows.push(['Print Area', `${view.impWidthMm} \u00D7 ${view.impHeightMm} mm`]);
+    }
+    if (view?.maxColours)
+        detailRows.push(['Max Colors', `${view.maxColours}`]);
+    const detailRowH = 6;
+    const detailCol1W = 30;
+    const detailTableY = margin + 16;
+    doc.setFontSize(9);
+    detailRows.forEach((row, i) => {
+        const y = detailTableY + i * detailRowH;
+        doc.setFont('helvetica', 'bold');
+        doc.text(row[0], margin, y);
+        doc.setFont('helvetica', 'normal');
+        doc.text(row[1], margin + detailCol1W, y);
+    });
+    doc.setDrawColor(200, 200, 200);
+    doc.setLineWidth(0.3);
+    doc.line(margin, detailTableY + detailRows.length * detailRowH + 2, margin + contentW, detailTableY + detailRows.length * detailRowH + 2);
+    const mockupFormat = dataUrlToImageFormat(mockupDataUrl);
+    const mockupY = detailTableY + detailRows.length * detailRowH + 6;
+    const maxMockupH = pageH - mockupY - margin;
+    const aspectRatio = canvasW / Math.max(canvasH, 1);
+    let imgW = contentW;
+    let imgH = imgW / aspectRatio;
+    if (imgH > maxMockupH) {
+        imgH = maxMockupH;
+        imgW = imgH * aspectRatio;
+    }
+    const imgX = (pageW - imgW) / 2;
+    doc.addImage(mockupDataUrl, mockupFormat, imgX, mockupY, imgW, imgH);
+    if (config.showPrintAreaGuides && view?.printArea != null) {
+        drawPrintAreaGuide(doc, view.printArea, imgX, mockupY, imgW, imgH, canvasW, canvasH);
+    }
+}
+/**
+ * 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.
+ */
+async function exportProductPdf(logo, article, viewIndex, productMockupDataUrl, canvasWidth, canvasHeight, config) {
+    const cfg = buildPdfConfig(config);
+    const JsPDF = getJsPDF();
+    // Rasterize SVG data URLs — jsPDF only accepts PNG/JPEG
+    const rasterLogoDataUrl = await rasterizeDataUrl(logo.dataUrl);
+    const doc = new JsPDF({
+        orientation: cfg.orientation,
+        unit: 'mm',
+        format: cfg.pageFormat,
+    });
+    // Page 1: Logo source
+    renderLogoPage(doc, logo, rasterLogoDataUrl, cfg);
+    // Page 2: Product mockup
+    doc.addPage();
+    renderProductPage(doc, article, viewIndex, productMockupDataUrl, canvasWidth, canvasHeight, cfg);
+    doc.save(`${article.id}.pdf`);
+}
+
+export { exportProductPdf };

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-CUetmLbL.js';
+export { s as setNonce } from './index-CUetmLbL.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["wtp-editor_2",[[514,"wtp-editor",{"width":[2],"height":[2],"productImage":[1,"product-image"],"initialState":[1,"initial-state"],"fonts":[16],"printArea":[16],"debug":[4],"labels":[16],"selectedObjectId":[32],"selectedObjectType":[32],"selectedFont":[32],"selectedTextColor":[32],"addLogo":[64],"addText":[64],"removeObject":[64],"exportState":[64],"loadState":[64],"resetCanvas":[64],"exportImage":[64],"exportImageHighRes":[64],"getObjects":[64],"updateText":[64]},null,{"productImage":[{"onProductImageChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"debug":[{"onDebugChange":0}],"printArea":[{"onPrintAreaChange":0}]}],[769,"wtp-logo-upload",{"config":[16],"accept":[1],"multiple":[4],"disabled":[4],"enableBackgroundRemoval":[4,"enable-background-removal"],"bgRemovalConfig":[16],"labels":[16],"isDragOver":[32],"previews":[32],"selectedIndex":[32],"rejections":[32],"isProcessing":[32],"pendingChoices":[32],"urlInput":[32],"urlError":[32],"isUrlFetching":[32]}]]],["wtp-logo-renderer",[[514,"wtp-logo-renderer",{"productImage":[1,"product-image"],"width":[2],"height":[2],"logos":[16],"backgroundColor":[1,"background-color"],"printArea":[1040],"layers":[32],"containerWidth":[32],"containerHeight":[32],"exportImage":[64]},null,{"productImage":[{"onProductImageChange":0}],"logos":[{"onLogosChange":0}],"printArea":[{"onPrintAreaChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"backgroundColor":[{"onBackgroundColorChange":0}]}]]],["wtp-print-area-editor",[[514,"wtp-print-area-editor",{"productImage":[1,"product-image"],"width":[2],"height":[2],"printArea":[1040],"getPrintArea":[64],"setPrintArea":[64]},null,{"productImage":[{"onProductImageChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"printArea":[{"onPrintAreaChange":0}]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/esm/logo-D8pVJRuX.js

@@ -0,0 +1,15 @@
+const DEFAULT_VALIDATION_CONFIG = {
+    minDpi: 300,
+    maxFileSize: 50 * 1024 * 1024, // 50MB
+    minWidth: 100,
+    minHeight: 100,
+    allowedFormats: ['png', 'jpeg', 'svg', 'tiff', 'avif'],
+};
+const DEFAULT_BG_REMOVAL_CONFIG = {
+    tolerance: 40,
+    minEdgeRatio: 0.3,
+    autoCrop: true,
+    autoCropPadding: 2,
+};
+
+export { DEFAULT_VALIDATION_CONFIG as D, DEFAULT_BG_REMOVAL_CONFIG as a };

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

@@ -0,0 +1,21 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-CUetmLbL.js';
+export { s as setNonce } from './index-CUetmLbL.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+/*
+ Stencil Client Patch Browser v4.43.4 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["wtp-editor_2",[[514,"wtp-editor",{"width":[2],"height":[2],"productImage":[1,"product-image"],"initialState":[1,"initial-state"],"fonts":[16],"printArea":[16],"debug":[4],"labels":[16],"selectedObjectId":[32],"selectedObjectType":[32],"selectedFont":[32],"selectedTextColor":[32],"addLogo":[64],"addText":[64],"removeObject":[64],"exportState":[64],"loadState":[64],"resetCanvas":[64],"exportImage":[64],"exportImageHighRes":[64],"getObjects":[64],"updateText":[64]},null,{"productImage":[{"onProductImageChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"debug":[{"onDebugChange":0}],"printArea":[{"onPrintAreaChange":0}]}],[769,"wtp-logo-upload",{"config":[16],"accept":[1],"multiple":[4],"disabled":[4],"enableBackgroundRemoval":[4,"enable-background-removal"],"bgRemovalConfig":[16],"labels":[16],"isDragOver":[32],"previews":[32],"selectedIndex":[32],"rejections":[32],"isProcessing":[32],"pendingChoices":[32],"urlInput":[32],"urlError":[32],"isUrlFetching":[32]}]]],["wtp-logo-renderer",[[514,"wtp-logo-renderer",{"productImage":[1,"product-image"],"width":[2],"height":[2],"logos":[16],"backgroundColor":[1,"background-color"],"printArea":[1040],"layers":[32],"containerWidth":[32],"containerHeight":[32],"exportImage":[64]},null,{"productImage":[{"onProductImageChange":0}],"logos":[{"onLogosChange":0}],"printArea":[{"onPrintAreaChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"backgroundColor":[{"onBackgroundColorChange":0}]}]]],["wtp-print-area-editor",[[514,"wtp-print-area-editor",{"productImage":[1,"product-image"],"width":[2],"height":[2],"printArea":[1040],"getPrintArea":[64],"setPrintArea":[64]},null,{"productImage":[{"onProductImageChange":0}],"width":[{"onSizeChange":0}],"height":[{"onSizeChange":0}],"printArea":[{"onPrintAreaChange":0}]}]]]], options);
+});