web-to-print 0.1.0

package/dist/collection/components/wtp-logo-renderer/wtp-logo-renderer.css

@@ -0,0 +1,30 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  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 {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+}
+
+.product-bg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.logo-layer {
+  pointer-events: none;
+}

package/dist/collection/components/wtp-logo-renderer/wtp-logo-renderer.js

@@ -0,0 +1,455 @@
+import { h } from "@stencil/core";
+import { fitLogoToPrintArea, printAreaToPixelCorners, warpImageForBulge, upscaleSvgDataUrl } from "../../utils/canvas-helpers";
+import { loadImage, computeContainFit, centerOriginToTopLeft, getSvgIntrinsicSize, renderToCanvas } from "../../utils/html-render-helpers";
+export class WtpLogoRenderer {
+    el;
+    /** 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 is() { return "wtp-logo-renderer"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wtp-logo-renderer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wtp-logo-renderer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "productImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product background image URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "product-image"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Container width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "600"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Container height in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "400"
+            },
+            "logos": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlacedLogo[]",
+                    "resolved": "PlacedLogo[]",
+                    "references": {
+                        "PlacedLogo": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PlacedLogo",
+                            "referenceLocation": "PlacedLogo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of logos to place on the renderer."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'#ffffff'"
+            },
+            "printArea": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "PrintArea | undefined",
+                    "resolved": "PrintArea",
+                    "references": {
+                        "PrintArea": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::PrintArea",
+                            "referenceLocation": "PrintArea"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Print area definition for auto-fitting logos (relative 0-1 coordinates)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "layers": {},
+            "containerWidth": {},
+            "containerHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wtpRenderComplete",
+                "name": "wtpRenderComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the renderer has finished rendering all logos."
+                },
+                "complexType": {
+                    "original": "{ dataUrl: string }",
+                    "resolved": "{ dataUrl: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "wtpRenderError",
+                "name": "wtpRenderError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a rendering error occurs."
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "exportImage": {
+                "complexType": {
+                    "signature": "(format?: \"png\" | \"jpeg\", quality?: number) => Promise<string>",
+                    "parameters": [{
+                            "name": "format",
+                            "type": "\"png\" | \"jpeg\"",
+                            "docs": ""
+                        }, {
+                            "name": "quality",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RenderLayer": {
+                            "location": "import",
+                            "path": "../../utils/html-render-helpers",
+                            "id": "src/utils/html-render-helpers.ts::RenderLayer",
+                            "referenceLocation": "RenderLayer"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Export the rendered scene as a data URL image.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "productImage",
+                "methodName": "onProductImageChange"
+            }, {
+                "propName": "logos",
+                "methodName": "onLogosChange"
+            }, {
+                "propName": "printArea",
+                "methodName": "onPrintAreaChange"
+            }, {
+                "propName": "width",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "height",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "backgroundColor",
+                "methodName": "onBackgroundColorChange"
+            }];
+    }
+}