web-to-print 0.1.0

package/dist/cjs/wtp-print-area-editor.cjs.entry.js

@@ -0,0 +1,431 @@
+'use strict';
+
+var index = require('./index-IFGFRm-i.js');
+var canvasHelpers = require('./canvas-helpers-A6rp5rPD.js');
+
+const wtpPrintAreaEditorCss = () => `*.sc-wtp-print-area-editor,*.sc-wtp-print-area-editor::before,*.sc-wtp-print-area-editor::after{box-sizing:border-box}.sc-wtp-print-area-editor-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-print-area-editor.sc-wtp-print-area-editor{display:inline-block;line-height:0;border:1px solid var(--wtp-color-border, #e2e8f0);border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50%/20px 20px}`;
+
+const CORNER_RADIUS = 7;
+/**
+ * Custom Fabric.js object that renders a quadrilateral defined by 4 corner
+ * offsets from the bounding-box center. Top/bottom edges can be curved
+ * via `bulge` (-1 to 1) using quadratic Bezier curves.
+ */
+class PrintAreaQuad extends canvasHelpers.J {
+    constructor(options) {
+        super(options);
+        this.cornerOffsets = options?.cornerOffsets ?? [
+            new canvasHelpers.N(-50, -50), new canvasHelpers.N(50, -50),
+            new canvasHelpers.N(50, 50), new canvasHelpers.N(-50, 50),
+        ];
+        this.bulge = options?.bulge ?? 0;
+        this.objectCaching = false;
+    }
+    _render(ctx) {
+        const [tl, tr, br, bl] = this.cornerOffsets;
+        ctx.beginPath();
+        ctx.moveTo(tl.x, tl.y);
+        if (this.bulge !== 0) {
+            // Curved top edge: control point at midpoint shifted by bulge
+            const topMidX = (tl.x + tr.x) / 2;
+            const topMidY = (tl.y + tr.y) / 2;
+            const bulgePixels = this.bulge * (this.height ?? 1);
+            ctx.quadraticCurveTo(topMidX, topMidY - bulgePixels, tr.x, tr.y);
+        }
+        else {
+            ctx.lineTo(tr.x, tr.y);
+        }
+        ctx.lineTo(br.x, br.y);
+        if (this.bulge !== 0) {
+            // Curved bottom edge: same direction as top for cylindrical appearance
+            const botMidX = (br.x + bl.x) / 2;
+            const botMidY = (br.y + bl.y) / 2;
+            const bulgePixels = this.bulge * (this.height ?? 1);
+            ctx.quadraticCurveTo(botMidX, botMidY - bulgePixels, bl.x, bl.y);
+        }
+        else {
+            ctx.lineTo(bl.x, bl.y);
+        }
+        ctx.closePath();
+        this._renderPaintInOrder(ctx);
+    }
+    /** Recompute left/top/width/height from absolute corner positions. */
+    recalcBounds() {
+        const center = this.getCenterPoint();
+        const abs = this.cornerOffsets.map(o => new canvasHelpers.N(center.x + o.x, center.y + o.y));
+        const xs = abs.map(p => p.x);
+        const ys = abs.map(p => p.y);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const newCenterX = (minX + maxX) / 2;
+        const newCenterY = (minY + maxY) / 2;
+        this.cornerOffsets = abs.map(p => new canvasHelpers.N(p.x - newCenterX, p.y - newCenterY));
+        this.set({
+            left: newCenterX,
+            top: newCenterY,
+            width: Math.max(maxX - minX, 1),
+            height: Math.max(maxY - minY, 1),
+        });
+        this.setCoords();
+    }
+}
+function buildCornerControl(index) {
+    return new canvasHelpers.q({
+        x: 0,
+        y: 0,
+        sizeX: CORNER_RADIUS * 2,
+        sizeY: CORNER_RADIUS * 2,
+        touchSizeX: CORNER_RADIUS * 4,
+        touchSizeY: CORNER_RADIUS * 4,
+        cursorStyleHandler: () => 'move',
+        positionHandler: (_dim, finalMatrix, fabricObject) => {
+            const quad = fabricObject;
+            return new canvasHelpers.N(quad.cornerOffsets[index].x, quad.cornerOffsets[index].y).transform(finalMatrix);
+        },
+        actionHandler: (_eventData, transformData, x, y) => {
+            const quad = transformData.target;
+            const center = quad.getCenterPoint();
+            quad.cornerOffsets[index] = new canvasHelpers.N(x - center.x, y - center.y);
+            quad.recalcBounds();
+            return true;
+        },
+        render: (ctx, left, top) => {
+            ctx.save();
+            ctx.fillStyle = '#2563eb';
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(left, top, CORNER_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.restore();
+        },
+    });
+}
+function buildBulgeControl() {
+    const HANDLE_OFFSET_X = 24;
+    const TRACK_GAP = 4;
+    return new canvasHelpers.q({
+        x: 0.5,
+        y: 0,
+        offsetX: HANDLE_OFFSET_X,
+        sizeX: CORNER_RADIUS * 2,
+        sizeY: CORNER_RADIUS * 2,
+        touchSizeX: CORNER_RADIUS * 4,
+        touchSizeY: CORNER_RADIUS * 4,
+        cursorStyleHandler: () => 'ns-resize',
+        positionHandler: (dim, finalMatrix, fabricObject) => {
+            const quad = fabricObject;
+            return new canvasHelpers.N(0.5 * dim.x + HANDLE_OFFSET_X, -quad.bulge * dim.y / 2).transform(finalMatrix);
+        },
+        actionHandler: (_eventData, transformData, _x, y) => {
+            const quad = transformData.target;
+            const center = quad.getCenterPoint();
+            const halfH = (quad.height ?? 0) * (quad.scaleY ?? 1) / 2;
+            const bulge = Math.max(-1, Math.min(1, (center.y - y) / Math.max(halfH, 1)));
+            quad.bulge = bulge;
+            return true;
+        },
+        render: (ctx, left, top, _styleOverride, fabricObject) => {
+            const quad = fabricObject;
+            const halfH = ((quad.height ?? 0) * (quad.scaleY ?? 1)) / 2;
+            const angleRad = ((quad.angle ?? 0) * Math.PI) / 180;
+            const trackTopX = left + Math.sin(angleRad) * halfH;
+            const trackTopY = top - Math.cos(angleRad) * halfH;
+            const trackBotX = left - Math.sin(angleRad) * halfH;
+            const trackBotY = top + Math.cos(angleRad) * halfH;
+            ctx.save();
+            // Track line
+            ctx.strokeStyle = 'rgba(37, 99, 235, 0.3)';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([3, 3]);
+            ctx.beginPath();
+            ctx.moveTo(trackTopX, trackTopY - TRACK_GAP);
+            ctx.lineTo(trackBotX, trackBotY + TRACK_GAP);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            // Handle circle
+            ctx.fillStyle = '#2563eb';
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(left, top, CORNER_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            // Arrow up + "+" label
+            ctx.fillStyle = 'rgba(37, 99, 235, 0.5)';
+            ctx.beginPath();
+            ctx.moveTo(trackTopX, trackTopY - TRACK_GAP);
+            ctx.lineTo(trackTopX - 4, trackTopY - TRACK_GAP + 6);
+            ctx.lineTo(trackTopX + 4, trackTopY - TRACK_GAP + 6);
+            ctx.closePath();
+            ctx.fill();
+            ctx.font = 'bold 10px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.fillText('+', trackTopX, trackTopY - TRACK_GAP - 4);
+            // Arrow down + "\u2212" label
+            ctx.beginPath();
+            ctx.moveTo(trackBotX, trackBotY + TRACK_GAP);
+            ctx.lineTo(trackBotX - 4, trackBotY + TRACK_GAP - 6);
+            ctx.lineTo(trackBotX + 4, trackBotY + TRACK_GAP - 6);
+            ctx.closePath();
+            ctx.fill();
+            ctx.fillText('\u2212', trackBotX, trackBotY + TRACK_GAP + 12);
+            ctx.restore();
+        },
+    });
+}
+const WtpPrintAreaEditor = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wtpPrintAreaChange = index.createEvent(this, "wtpPrintAreaChange");
+    }
+    get el() { return index.getElement(this); }
+    /** Product background image URL. */
+    productImage;
+    /** Canvas width in pixels. */
+    width = 800;
+    /** Canvas height in pixels. */
+    height = 600;
+    /** Current print area (relative 0-1 coordinates). */
+    printArea;
+    /** Fires when the print area rectangle is modified. */
+    wtpPrintAreaChange;
+    canvas;
+    canvasEl;
+    areaQuad;
+    /** Generation counter to discard stale background loads. */
+    bgLoadGen = 0;
+    componentDidLoad() {
+        this.initCanvas();
+    }
+    disconnectedCallback() {
+        ++this.bgLoadGen;
+        this.canvas?.dispose();
+    }
+    async onProductImageChange() {
+        if (this.canvas === undefined || this.productImage === undefined)
+            return;
+        await this.reloadCanvas();
+    }
+    async onSizeChange() {
+        if (this.canvas === undefined)
+            return;
+        await this.reloadCanvas();
+    }
+    onPrintAreaChange() {
+        this.syncQuadFromPrintArea();
+    }
+    /** Get the current print area as relative 0-1 coordinates. */
+    async getPrintArea() {
+        return this.readQuadAsPrintArea();
+    }
+    /** Set the print area and update the quad on canvas. */
+    async setPrintArea(printArea) {
+        this.printArea = printArea;
+        this.syncQuadFromPrintArea();
+    }
+    /** Create the Fabric Canvas once and perform the initial load. */
+    async initCanvas() {
+        if (this.canvasEl === undefined)
+            return;
+        this.canvas = new canvasHelpers.ho(this.canvasEl, {
+            width: this.width,
+            height: this.height,
+            backgroundColor: '#ffffff',
+            selection: false,
+        });
+        this.canvas.on('object:modified', (e) => {
+            if (e.target === this.areaQuad) {
+                this.emitPrintArea();
+            }
+        });
+        this.canvas.on('object:moving', (e) => {
+            if (e.target === this.areaQuad) {
+                this.clampQuadToBounds();
+            }
+        });
+        await this.reloadCanvas();
+    }
+    /**
+     * Clear the canvas and reload background + quad.
+     * Keeps the Fabric Canvas instance alive (no dispose/recreate) to avoid
+     * stale DOM state from async dispose in Fabric v7.
+     */
+    async reloadCanvas() {
+        if (this.canvas === undefined)
+            return;
+        const gen = ++this.bgLoadGen;
+        // Remove all objects (background image + quad)
+        this.areaQuad = undefined;
+        this.canvas.discardActiveObject();
+        for (const obj of this.canvas.getObjects().slice()) {
+            this.canvas.remove(obj);
+        }
+        // Reset internal state to bounding-box dimensions
+        this.canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
+        this.canvas.setDimensions({ width: this.width, height: this.height });
+        this.canvas.backgroundColor = '#ffffff';
+        this.canvas.requestRenderAll();
+        // Load product image (may auto-resize canvas in contain mode)
+        if (this.productImage !== undefined && this.productImage !== '') {
+            await canvasHelpers.setCanvasBackground(this.canvas, this.productImage);
+        }
+        if (gen !== this.bgLoadGen)
+            return;
+        this.createAreaQuad();
+        this.canvas.renderAll();
+    }
+    createAreaQuad() {
+        if (this.canvas === undefined)
+            return;
+        const pa = this.printArea ?? canvasHelpers.defaultPrintArea();
+        // Convert relative coords directly to canvas pixels (image-relative coordinates)
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        const [tl, tr, br, bl] = canvasHelpers.printAreaToPixelCorners(pa, cw, ch);
+        // Compute centroid and bounding box
+        const cx = (tl.x + tr.x + br.x + bl.x) / 4;
+        const cy = (tl.y + tr.y + br.y + bl.y) / 4;
+        const xs = [tl.x, tr.x, br.x, bl.x];
+        const ys = [tl.y, tr.y, br.y, bl.y];
+        const bbW = Math.max(Math.max(...xs) - Math.min(...xs), 1);
+        const bbH = Math.max(Math.max(...ys) - Math.min(...ys), 1);
+        this.areaQuad = new PrintAreaQuad({
+            left: cx,
+            top: cy,
+            width: bbW,
+            height: bbH,
+            cornerOffsets: [
+                new canvasHelpers.N(tl.x - cx, tl.y - cy),
+                new canvasHelpers.N(tr.x - cx, tr.y - cy),
+                new canvasHelpers.N(br.x - cx, br.y - cy),
+                new canvasHelpers.N(bl.x - cx, bl.y - cy),
+            ],
+            bulge: pa.bulge ?? 0,
+            originX: 'center',
+            originY: 'center',
+            fill: 'rgba(37, 99, 235, 0.15)',
+            stroke: '#2563eb',
+            strokeWidth: 2,
+            strokeDashArray: [6, 4],
+            // Disable standard resize/rotate controls
+            lockScalingX: true,
+            lockScalingY: true,
+            lockRotation: true,
+            hasRotatingPoint: false,
+            borderColor: '#2563eb',
+        });
+        // Replace all controls with corner handles + bulge
+        this.areaQuad.controls = {
+            corner0: buildCornerControl(0),
+            corner1: buildCornerControl(1),
+            corner2: buildCornerControl(2),
+            corner3: buildCornerControl(3),
+            bulgeHandle: buildBulgeControl(),
+        };
+        this.canvas.add(this.areaQuad);
+        this.canvas.renderAll();
+    }
+    syncQuadFromPrintArea() {
+        if (this.areaQuad === undefined || this.canvas === undefined)
+            return;
+        const pa = this.printArea ?? canvasHelpers.defaultPrintArea();
+        // Convert relative coords directly to canvas pixels (image-relative coordinates)
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        const [tl, tr, br, bl] = canvasHelpers.printAreaToPixelCorners(pa, cw, ch);
+        const cx = (tl.x + tr.x + br.x + bl.x) / 4;
+        const cy = (tl.y + tr.y + br.y + bl.y) / 4;
+        const xs = [tl.x, tr.x, br.x, bl.x];
+        const ys = [tl.y, tr.y, br.y, bl.y];
+        this.areaQuad.cornerOffsets = [
+            new canvasHelpers.N(tl.x - cx, tl.y - cy),
+            new canvasHelpers.N(tr.x - cx, tr.y - cy),
+            new canvasHelpers.N(br.x - cx, br.y - cy),
+            new canvasHelpers.N(bl.x - cx, bl.y - cy),
+        ];
+        this.areaQuad.bulge = pa.bulge ?? 0;
+        this.areaQuad.set({
+            left: cx,
+            top: cy,
+            width: Math.max(Math.max(...xs) - Math.min(...xs), 1),
+            height: Math.max(Math.max(...ys) - Math.min(...ys), 1),
+            scaleX: 1,
+            scaleY: 1,
+        });
+        this.areaQuad.setCoords();
+        this.canvas.renderAll();
+    }
+    clampQuadToBounds() {
+        if (this.areaQuad === undefined)
+            return;
+        const center = this.areaQuad.getCenterPoint();
+        const abs = this.areaQuad.cornerOffsets.map(o => ({
+            x: center.x + o.x,
+            y: center.y + o.y,
+        }));
+        // Find how much the quad exceeds canvas bounds
+        let dx = 0;
+        let dy = 0;
+        for (const p of abs) {
+            if (p.x < 0)
+                dx = Math.max(dx, -p.x);
+            if (p.x > this.canvas.getWidth())
+                dx = Math.min(dx, this.canvas.getWidth() - p.x);
+            if (p.y < 0)
+                dy = Math.max(dy, -p.y);
+            if (p.y > this.canvas.getHeight())
+                dy = Math.min(dy, this.canvas.getHeight() - p.y);
+        }
+        if (dx !== 0 || dy !== 0) {
+            this.areaQuad.set({
+                left: (this.areaQuad.left ?? 0) + dx,
+                top: (this.areaQuad.top ?? 0) + dy,
+            });
+        }
+    }
+    readQuadAsPrintArea() {
+        if (this.areaQuad === undefined) {
+            return this.printArea ?? canvasHelpers.defaultPrintArea();
+        }
+        const center = this.areaQuad.getCenterPoint();
+        const corners = [
+            { x: center.x + this.areaQuad.cornerOffsets[0].x, y: center.y + this.areaQuad.cornerOffsets[0].y },
+            { x: center.x + this.areaQuad.cornerOffsets[1].x, y: center.y + this.areaQuad.cornerOffsets[1].y },
+            { x: center.x + this.areaQuad.cornerOffsets[2].x, y: center.y + this.areaQuad.cornerOffsets[2].y },
+            { x: center.x + this.areaQuad.cornerOffsets[3].x, y: center.y + this.areaQuad.cornerOffsets[3].y },
+        ];
+        // Convert canvas pixels directly to 0-1 image-relative coordinates
+        const cw = this.canvas.getWidth();
+        const ch = this.canvas.getHeight();
+        return canvasHelpers.pixelCornersToPrintArea(corners, cw, ch, this.areaQuad.bulge);
+    }
+    emitPrintArea() {
+        const area = this.readQuadAsPrintArea();
+        this.printArea = area;
+        this.wtpPrintAreaChange.emit(area);
+    }
+    render() {
+        return (index.h("div", { key: 'fbeaeb8ac49780440ceb1bffa38689a23aeef66a', class: "wtp-print-area-editor" }, index.h("canvas", { key: 'b7e97909efaa17c7ffb4b089cf31e508e20c094e', ref: el => (this.canvasEl = el) })));
+    }
+    static get watchers() { return {
+        "productImage": [{
+                "onProductImageChange": 0
+            }],
+        "width": [{
+                "onSizeChange": 0
+            }],
+        "height": [{
+                "onSizeChange": 0
+            }],
+        "printArea": [{
+                "onPrintAreaChange": 0
+            }]
+    }; }
+};
+WtpPrintAreaEditor.style = wtpPrintAreaEditorCss();
+
+exports.wtp_print_area_editor = WtpPrintAreaEditor;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,16 @@
+{
+  "entries": [
+    "components/wtp-editor/wtp-editor.js",
+    "components/wtp-logo-renderer/wtp-logo-renderer.js",
+    "components/wtp-logo-upload/wtp-logo-upload.js",
+    "components/wtp-print-area-editor/wtp-print-area-editor.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.4",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/wtp-editor/wtp-editor.css

@@ -0,0 +1,124 @@
+*,
+*::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-editor {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--wtp-color-bg, #ffffff);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--wtp-color-border, #e2e8f0);
+  background: var(--wtp-color-bg-muted, #f8fafc);
+  flex-wrap: wrap;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-family: var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  background: var(--wtp-color-bg, #ffffff);
+  color: var(--wtp-color-text, #1e293b);
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.toolbar-btn:hover {
+  background: var(--wtp-color-bg-muted, #f8fafc);
+}
+.toolbar-btn:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+.toolbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.toolbar-btn {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.toolbar-btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.toolbar-btn.danger:hover:not(:disabled) {
+  background: var(--wtp-color-error-light, #fee2e2);
+  color: var(--wtp-color-error, #dc2626);
+  border-color: var(--wtp-color-error, #dc2626);
+}
+
+.font-select {
+  padding: 4px 8px;
+  font-family: var(--wtp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 12px;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+  background: var(--wtp-color-bg, #ffffff);
+  color: var(--wtp-color-text, #1e293b);
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.font-select:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+.color-input {
+  width: 32px;
+  height: 28px;
+  padding: 2px;
+  border: 1px solid var(--wtp-color-border, #e2e8f0);
+  border-radius: 8px;
+  background: var(--wtp-color-bg, #ffffff);
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+.color-input:focus-visible {
+  outline: 2px solid var(--wtp-color-primary, #2563eb);
+  outline-offset: 2px;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background: var(--wtp-color-border, #e2e8f0);
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.canvas-container {
+  line-height: 0;
+  overflow: auto;
+  background: repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50%/20px 20px;
+}