web-to-print 0.1.0

package/dist/esm/wtp-logo-renderer.entry.js

@@ -0,0 +1,351 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-CUetmLbL.js';
+import { u as upscaleSvgDataUrl, b as warpImageForBulge, f as fitLogoToPrintArea, p as printAreaToPixelCorners } from './canvas-helpers-CK8OAq2J.js';
+
+/** Utility functions for the HTML/CSS-based logo renderer and Canvas 2D export. */
+/** Load an image from a URL/data-URL and return the HTMLImageElement once loaded. */
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error(`Failed to load image: ${src.slice(0, 80)}`));
+        img.src = src;
+    });
+}
+/** Compute contain-fit dimensions (uniform scale to fit inside container). */
+function computeContainFit(containerW, containerH, imgW, imgH) {
+    const scale = Math.min(containerW / imgW, containerH / imgH);
+    return { fittedW: imgW * scale, fittedH: imgH * scale };
+}
+/**
+ * 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.
+ */
+function centerOriginToTopLeft(transform, naturalW, naturalH) {
+    return {
+        left: transform.x - naturalW / 2,
+        top: transform.y - naturalH / 2,
+    };
+}
+/**
+ * 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.
+ */
+function getSvgIntrinsicSize(svgDataUrl) {
+    if (!svgDataUrl.startsWith('data:image/svg+xml'))
+        return null;
+    let svgText;
+    const base64Idx = svgDataUrl.indexOf(';base64,');
+    if (base64Idx !== -1) {
+        svgText = atob(svgDataUrl.slice(base64Idx + 8));
+    }
+    else {
+        const commaIdx = svgDataUrl.indexOf(',');
+        if (commaIdx === -1)
+            return null;
+        svgText = decodeURIComponent(svgDataUrl.slice(commaIdx + 1));
+    }
+    // Use regex instead of DOMParser to avoid JSDOM/mock-doc XML parsing limitations
+    const svgMatch = svgText.match(/<svg[^>]*>/i);
+    if (svgMatch === null)
+        return null;
+    const svgTag = svgMatch[0];
+    const viewBoxMatch = svgTag.match(/viewBox=["']([^"']+)["']/);
+    if (viewBoxMatch !== null) {
+        const parts = viewBoxMatch[1].trim().split(/[\s,]+/);
+        const vbW = parseFloat(parts[2]);
+        const vbH = parseFloat(parts[3]);
+        if (vbW > 0 && vbH > 0)
+            return { width: vbW, height: vbH };
+    }
+    const widthMatch = svgTag.match(/\bwidth=["']([^"']+)["']/);
+    const heightMatch = svgTag.match(/\bheight=["']([^"']+)["']/);
+    if (widthMatch !== null && heightMatch !== null) {
+        const svgW = parseFloat(widthMatch[1]);
+        const svgH = parseFloat(heightMatch[1]);
+        if (svgW > 0 && svgH > 0)
+            return { width: svgW, height: svgH };
+    }
+    return null;
+}
+/**
+ * Canvas 2D export: draw product background + logo layers onto a plain canvas.
+ * Returns a data URL string.
+ */
+function renderToCanvas(containerW, containerH, bgColor, productImg, layers, format = 'png', quality = 1) {
+    const canvas = document.createElement('canvas');
+    canvas.width = containerW;
+    canvas.height = containerH;
+    const ctx = canvas.getContext('2d');
+    // Background color
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, containerW, containerH);
+    // Product image (contain-fit, centered)
+    if (productImg !== undefined) {
+        const { fittedW, fittedH } = computeContainFit(containerW, containerH, productImg.naturalWidth, productImg.naturalHeight);
+        const ox = (containerW - fittedW) / 2;
+        const oy = (containerH - fittedH) / 2;
+        ctx.drawImage(productImg, ox, oy, fittedW, fittedH);
+    }
+    // Logo layers
+    for (const layer of layers) {
+        ctx.save();
+        // Move to the center of the object (top-left + half natural size, matching CSS transform-origin: center)
+        const cx = layer.left + layer.naturalWidth / 2;
+        const cy = layer.top + layer.naturalHeight / 2;
+        ctx.translate(cx, cy);
+        // Apply transforms in Fabric.js order: rotate → skew → scale
+        ctx.rotate((layer.angle * Math.PI) / 180);
+        const tanSkX = Math.tan((layer.skewX * Math.PI) / 180);
+        const tanSkY = Math.tan((layer.skewY * Math.PI) / 180);
+        ctx.transform(1, tanSkY, tanSkX, 1, 0, 0);
+        ctx.scale(layer.scaleX, layer.scaleY);
+        // Draw image centered at origin
+        ctx.drawImage(layer.img, -layer.naturalWidth / 2, -layer.naturalHeight / 2, layer.naturalWidth, layer.naturalHeight);
+        ctx.restore();
+    }
+    return canvas.toDataURL(`image/${format}`, quality);
+}
+
+const wtpLogoRendererCss = () => `*.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}`;
+
+const WtpLogoRenderer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.wtpRenderComplete = createEvent(this, "wtpRenderComplete");
+        this.wtpRenderError = createEvent(this, "wtpRenderError");
+    }
+    get el() { return getElement(this); }
+    /** Product background image URL. */
+    productImage;
+    /** Container width in pixels. */
+    width = 600;
+    /** Container height in pixels. */
+    height = 400;
+    /** Array of logos to place on the renderer. */
+    logos = [];
+    /** Background color. */
+    backgroundColor = '#ffffff';
+    /** Print area definition for auto-fitting logos (relative 0-1 coordinates). */
+    printArea;
+    /** Fires when the renderer has finished rendering all logos. */
+    wtpRenderComplete;
+    /** Fires when a rendering error occurs. */
+    wtpRenderError;
+    layers = [];
+    containerWidth = 0;
+    containerHeight = 0;
+    productImg;
+    componentWillLoad() {
+        this.computeLayout();
+    }
+    onProductImageChange() {
+        this.computeLayout();
+    }
+    onLogosChange() {
+        this.computeLayout();
+    }
+    onPrintAreaChange() {
+        this.computeLayout();
+    }
+    onSizeChange() {
+        this.computeLayout();
+    }
+    onBackgroundColorChange() {
+        // Background color is applied via inline style in render(), so Stencil
+        // re-renders automatically. We still need to re-emit the export data URL.
+        this.emitRenderComplete();
+    }
+    /** Export the rendered scene as a data URL image. */
+    async exportImage(format = 'png', quality = 1) {
+        const w = this.containerWidth || this.width;
+        const h = this.containerHeight || this.height;
+        const exportLayers = this.layers.map(l => ({
+            img: l.exportImg,
+            naturalWidth: l.naturalWidth,
+            naturalHeight: l.naturalHeight,
+            left: l.left,
+            top: l.top,
+            scaleX: l.scaleX,
+            scaleY: l.scaleY,
+            angle: l.angle,
+            skewX: l.skewX,
+            skewY: l.skewY,
+        }));
+        return renderToCanvas(w, h, this.backgroundColor, this.productImg, exportLayers, format, quality);
+    }
+    async computeLayout() {
+        try {
+            let cw = this.width;
+            let ch = this.height;
+            // Load product image and compute contain-fit dimensions
+            if (this.productImage !== undefined && this.productImage !== '') {
+                const img = await loadImage(this.productImage);
+                this.productImg = img;
+                const { fittedW, fittedH } = computeContainFit(this.width, this.height, img.naturalWidth, img.naturalHeight);
+                cw = fittedW;
+                ch = fittedH;
+            }
+            else {
+                this.productImg = undefined;
+            }
+            this.containerWidth = cw;
+            this.containerHeight = ch;
+            const newLayers = [];
+            for (const logo of this.logos) {
+                const displayUrl = logo.previewDataUrl ?? logo.dataUrl;
+                if (logo.transform !== undefined) {
+                    // Explicit transform path
+                    const exportImg = await loadImage(logo.dataUrl);
+                    const nw = exportImg.naturalWidth;
+                    const nh = exportImg.naturalHeight;
+                    const { left, top } = centerOriginToTopLeft(logo.transform, nw, nh);
+                    newLayers.push({
+                        id: logo.id,
+                        src: displayUrl,
+                        exportImg,
+                        naturalWidth: nw,
+                        naturalHeight: nh,
+                        left,
+                        top,
+                        scaleX: logo.transform.scaleX,
+                        scaleY: logo.transform.scaleY,
+                        angle: logo.transform.angle,
+                        skewX: logo.transform.skewX ?? 0,
+                        skewY: logo.transform.skewY ?? 0,
+                    });
+                }
+                else if (this.printArea !== undefined) {
+                    // Auto-fit path: determine logo dimensions, fit into print area
+                    const hasBulge = this.printArea.bulge !== undefined && this.printArea.bulge !== 0;
+                    let logoW;
+                    let logoH;
+                    let displaySrc = displayUrl;
+                    if (hasBulge) {
+                        // Bulge path: upscale SVG first (rasters pass through unchanged), then
+                        // compute fit from actual pixel dimensions — matches the old Fabric.js flow
+                        // where FabricImage.fromURL loaded the upscaled image before fitLogoToPrintArea.
+                        const rendererMaxSize = Math.round(Math.max(cw, ch) * 2);
+                        const { dataUrl: processedUrl } = upscaleSvgDataUrl(logo.dataUrl, rendererMaxSize);
+                        const warpSrc = await loadImage(processedUrl);
+                        logoW = warpSrc.naturalWidth;
+                        logoH = warpSrc.naturalHeight;
+                        const transform = fitLogoToPrintArea(logoW, logoH, this.printArea, cw, ch);
+                        const [tl, tr, br, bl] = printAreaToPixelCorners(this.printArea, cw, ch);
+                        const leftH = Math.hypot(bl.x - tl.x, bl.y - tl.y);
+                        const rightH = Math.hypot(br.x - tr.x, br.y - tr.y);
+                        const avgHeight = (leftH + rightH) / 2;
+                        const warped = warpImageForBulge(warpSrc, this.printArea.bulge, avgHeight, transform.scaleX);
+                        displaySrc = warped.toDataURL('image/png');
+                        // Warped canvas may be taller due to displacement padding
+                        logoW = warped.width;
+                        logoH = warped.height;
+                        const exportImg = await loadImage(displaySrc);
+                        const { left, top } = centerOriginToTopLeft(transform, logoW, logoH);
+                        newLayers.push({
+                            id: logo.id,
+                            src: displaySrc,
+                            exportImg,
+                            naturalWidth: logoW,
+                            naturalHeight: logoH,
+                            left,
+                            top,
+                            scaleX: transform.scaleX,
+                            scaleY: transform.scaleY,
+                            angle: transform.angle,
+                            skewX: 0,
+                            skewY: 0,
+                        });
+                    }
+                    else {
+                        // No bulge: use intrinsic SVG dimensions (vector quality in <img>)
+                        // or raster naturalWidth/Height
+                        const svgSize = getSvgIntrinsicSize(logo.dataUrl);
+                        if (svgSize !== null) {
+                            logoW = svgSize.width;
+                            logoH = svgSize.height;
+                        }
+                        else {
+                            const tempImg = await loadImage(logo.dataUrl);
+                            logoW = tempImg.naturalWidth;
+                            logoH = tempImg.naturalHeight;
+                        }
+                        const transform = fitLogoToPrintArea(logoW, logoH, this.printArea, cw, ch);
+                        const exportImg = await loadImage(displaySrc);
+                        const { left, top } = centerOriginToTopLeft(transform, logoW, logoH);
+                        newLayers.push({
+                            id: logo.id,
+                            src: displaySrc,
+                            exportImg,
+                            naturalWidth: logoW,
+                            naturalHeight: logoH,
+                            left,
+                            top,
+                            scaleX: transform.scaleX,
+                            scaleY: transform.scaleY,
+                            angle: transform.angle,
+                            skewX: 0,
+                            skewY: 0,
+                        });
+                    }
+                }
+            }
+            this.layers = newLayers;
+            this.emitRenderComplete();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Unknown render error';
+            this.wtpRenderError.emit({ message });
+        }
+    }
+    async emitRenderComplete() {
+        try {
+            const dataUrl = await this.exportImage('png');
+            this.wtpRenderComplete.emit({ dataUrl });
+        }
+        catch {
+            // Export may fail if called before layout is ready; ignore silently
+        }
+    }
+    render() {
+        const renderW = this.containerWidth || this.width;
+        const renderH = this.containerHeight || this.height;
+        return (h("div", { key: '3a720dae0cd0ab070a90b1f20dff9adb699b0ba5', class: "wtp-logo-renderer", style: {
+                width: `${renderW}px`,
+                height: `${renderH}px`,
+                backgroundColor: this.backgroundColor,
+            } }, this.productImage !== undefined && this.productImage !== '' && (h("img", { key: '88b50d0a4fd320a935bd7008ef3ddfee1644cbab', class: "product-bg", src: this.productImage, alt: "" })), this.layers.map(layer => (h("img", { key: layer.id, class: "logo-layer", src: layer.src, alt: "", style: {
+                position: 'absolute',
+                left: `${layer.left}px`,
+                top: `${layer.top}px`,
+                width: `${layer.naturalWidth}px`,
+                height: `${layer.naturalHeight}px`,
+                transformOrigin: 'center',
+                transform: `rotate(${layer.angle}deg) skewX(${layer.skewX}deg) skewY(${layer.skewY}deg) scale(${layer.scaleX}, ${layer.scaleY})`,
+            } })))));
+    }
+    static get watchers() { return {
+        "productImage": [{
+                "onProductImageChange": 0
+            }],
+        "logos": [{
+                "onLogosChange": 0
+            }],
+        "printArea": [{
+                "onPrintAreaChange": 0
+            }],
+        "width": [{
+                "onSizeChange": 0
+            }],
+        "height": [{
+                "onSizeChange": 0
+            }],
+        "backgroundColor": [{
+                "onBackgroundColorChange": 0
+            }]
+    }; }
+};
+WtpLogoRenderer.style = wtpLogoRendererCss();
+
+export { WtpLogoRenderer as wtp_logo_renderer };