web-to-print 0.1.0

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

@@ -0,0 +1,1114 @@
+import { h } from "@stencil/core";
+import { Canvas, FabricImage, IText } from "fabric";
+import { DEFAULT_EDITOR_LABELS } from "../../types";
+import { setCanvasBackground, generateObjectId, upscaleSvgDataUrl, fitLogoToPrintArea, printAreaToPixelCorners } from "../../utils/canvas-helpers";
+export class WtpEditor {
+    el;
+    /** Canvas width in pixels. */
+    width = 800;
+    /** Canvas height in pixels. */
+    height = 600;
+    /** Product background image URL. */
+    productImage;
+    /** JSON-serialized initial editor state. */
+    initialState;
+    /** Available font families for the text tool. */
+    fonts = ['Arial', 'Helvetica', 'Times New Roman', 'Georgia', 'Verdana'];
+    /** Print area definition (0-1 relative coordinates) to constrain objects. */
+    printArea;
+    /** Show print area overlay and bounding box for debugging. */
+    debug = false;
+    /** Override any of the user-facing toolbar strings. Missing keys fall back to English defaults. */
+    labels = {};
+    getLabels() {
+        return { ...DEFAULT_EDITOR_LABELS, ...this.labels };
+    }
+    selectedObjectId = null;
+    selectedObjectType = null;
+    selectedFont = 'Arial';
+    selectedTextColor = '#000000';
+    /** Fires when the canvas is initialized and ready. */
+    wtpEditorReady;
+    /** Fires when the editor state changes (object add/move/remove). */
+    wtpEditorStateChanged;
+    /** Fires when an object is selected on the canvas. */
+    wtpEditorObjectSelected;
+    /** Fires when the current selection is cleared. */
+    wtpEditorObjectDeselected;
+    canvas;
+    canvasEl;
+    objectMap = new Map();
+    previewUrlMap = new Map();
+    /** Resolves when the current background image has been loaded and the canvas resized. */
+    backgroundReady = Promise.resolve();
+    componentDidLoad() {
+        this.initCanvas();
+    }
+    disconnectedCallback() {
+        this.canvas?.dispose();
+    }
+    onProductImageChange() {
+        if (this.canvas !== undefined && this.productImage !== undefined) {
+            // Reset to bounding box before setCanvasBackground auto-sizes
+            this.canvas.setDimensions({ width: this.width, height: this.height });
+            this.backgroundReady = setCanvasBackground(this.canvas, this.productImage);
+        }
+    }
+    onSizeChange() {
+        if (this.canvas !== undefined) {
+            this.canvas.setDimensions({ width: this.width, height: this.height });
+            if (this.productImage !== undefined && this.productImage !== '') {
+                this.backgroundReady = setCanvasBackground(this.canvas, this.productImage);
+            }
+            this.canvas.renderAll();
+        }
+    }
+    onDebugChange() {
+        this.canvas?.renderAll();
+    }
+    async onPrintAreaChange() {
+        // Wait for background to finish loading so canvas dimensions are final
+        await this.backgroundReady;
+        // Re-constrain existing user objects to the new bounds
+        if (this.canvas !== undefined) {
+            for (const obj of this.objectMap.values()) {
+                this.clampObjectToPrintArea(obj);
+            }
+            this.canvas.renderAll();
+        }
+    }
+    /** Add a logo image to the canvas and return its object ID. */
+    async addLogo(logoData) {
+        if (this.canvas === undefined)
+            throw new Error('Canvas not initialized');
+        // Wait for background image to load so canvas dimensions are final
+        await this.backgroundReady;
+        const id = generateObjectId();
+        const { dataUrl } = upscaleSvgDataUrl(logoData.dataUrl);
+        const img = await FabricImage.fromURL(dataUrl);
+        const canvasWidth = this.canvas.getWidth();
+        const canvasHeight = this.canvas.getHeight();
+        if (this.printArea !== undefined) {
+            // Fit logo into the print area: 0-1 coords map directly to canvas pixels
+            const transform = fitLogoToPrintArea(img.width ?? 100, img.height ?? 100, this.printArea, canvasWidth, canvasHeight);
+            img.set({
+                left: transform.x,
+                top: transform.y,
+                originX: 'center',
+                originY: 'center',
+                scaleX: transform.scaleX,
+                scaleY: transform.scaleY,
+                angle: transform.angle,
+            });
+        }
+        else {
+            // Scale logo to fit within 30% of canvas
+            const maxScale = Math.min((canvasWidth * 0.3) / (img.width ?? 100), (canvasHeight * 0.3) / (img.height ?? 100));
+            const scale = Math.min(maxScale, 1);
+            img.set({
+                left: canvasWidth / 2,
+                top: canvasHeight / 2,
+                originX: 'center',
+                originY: 'center',
+                scaleX: scale,
+                scaleY: scale,
+            });
+        }
+        img._objectId = id;
+        this.objectMap.set(id, img);
+        if (logoData.previewDataUrl !== undefined) {
+            this.previewUrlMap.set(id, logoData.previewDataUrl);
+        }
+        this.canvas.add(img);
+        this.canvas.setActiveObject(img);
+        this.canvas.renderAll();
+        this.emitStateChanged();
+        return id;
+    }
+    /** Add a text object to the canvas and return its object ID. */
+    async addText(text, options) {
+        if (this.canvas === undefined)
+            throw new Error('Canvas not initialized');
+        // Wait for background image to load so canvas dimensions are final
+        await this.backgroundReady;
+        const id = generateObjectId();
+        let centerX = this.canvas.getWidth() / 2;
+        let centerY = this.canvas.getHeight() / 2;
+        if (this.printArea !== undefined) {
+            const corners = printAreaToPixelCorners(this.printArea, this.canvas.getWidth(), this.canvas.getHeight());
+            centerX = (corners[0].x + corners[1].x + corners[2].x + corners[3].x) / 4;
+            centerY = (corners[0].y + corners[1].y + corners[2].y + corners[3].y) / 4;
+        }
+        const iText = new IText(text, {
+            left: centerX,
+            top: centerY,
+            originX: 'center',
+            originY: 'center',
+            fontFamily: options?.fontFamily ?? this.selectedFont,
+            fontSize: options?.fontSize ?? 24,
+            fill: options?.fill ?? '#000000',
+        });
+        iText._objectId = id;
+        this.objectMap.set(id, iText);
+        this.canvas.add(iText);
+        this.canvas.setActiveObject(iText);
+        this.canvas.renderAll();
+        this.emitStateChanged();
+        return id;
+    }
+    /** Remove an object from the canvas by its ID. */
+    async removeObject(id) {
+        if (this.canvas === undefined)
+            return;
+        const obj = this.objectMap.get(id);
+        if (obj !== undefined) {
+            this.canvas.remove(obj);
+            this.objectMap.delete(id);
+            this.canvas.renderAll();
+            this.emitStateChanged();
+        }
+    }
+    /** Export the current editor state as a serializable object. */
+    async exportState() {
+        return this.buildEditorState();
+    }
+    /** Load a previously exported editor state. */
+    async loadState(state) {
+        if (this.canvas === undefined)
+            throw new Error('Canvas not initialized');
+        // Clear canvas
+        this.canvas.clear();
+        this.objectMap.clear();
+        this.previewUrlMap.clear();
+        // Rebuild preview URL map from state
+        for (const logo of state.logos) {
+            if (logo.previewDataUrl !== undefined) {
+                this.previewUrlMap.set(logo.id, logo.previewDataUrl);
+            }
+        }
+        this.canvas.setDimensions({ width: state.width, height: state.height });
+        // Restore from fabricJson first (loadFromJSON clears the canvas)
+        if (state.fabricJson !== undefined && state.fabricJson !== '') {
+            await this.canvas.loadFromJSON(state.fabricJson);
+            // Rebuild object map from loaded objects
+            for (const obj of this.canvas.getObjects()) {
+                const id = obj._objectId;
+                if (id !== undefined && id !== '') {
+                    this.objectMap.set(id, obj);
+                }
+            }
+        }
+        // Restore product image after JSON load so it inserts at index 0
+        if (state.productImage !== null && state.productImage !== undefined && state.productImage !== '') {
+            this.backgroundReady = setCanvasBackground(this.canvas, state.productImage);
+            await this.backgroundReady;
+        }
+        this.canvas.renderAll();
+    }
+    /** Clear all user objects from the canvas, keeping the instance alive. */
+    async resetCanvas() {
+        if (this.canvas === undefined)
+            return;
+        this.canvas.discardActiveObject();
+        for (const obj of this.canvas.getObjects().slice()) {
+            this.canvas.remove(obj);
+        }
+        this.objectMap.clear();
+        this.previewUrlMap.clear();
+        this.selectedObjectId = null;
+        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();
+    }
+    /** Export the canvas as a data URL image. */
+    async exportImage(format = 'png', quality = 1) {
+        if (this.canvas === undefined)
+            throw new Error('Canvas not initialized');
+        try {
+            return this.canvas.toDataURL({ multiplier: 1, format, quality });
+        }
+        catch (e) {
+            if (e instanceof DOMException && e.name === 'SecurityError') {
+                throw new Error('Cannot export: product image is cross-origin. Use a CORS proxy or serve images from the same domain.');
+            }
+            throw e;
+        }
+    }
+    /** Export the canvas as a high-resolution data URL image (for PDF/print).
+     *  Returns the data URL plus the actual canvas dimensions (which may differ
+     *  from the width/height props after setCanvasBackground resizes the canvas). */
+    async exportImageHighRes(format = 'png', quality = 1, multiplier = 3) {
+        if (this.canvas === undefined)
+            throw new Error('Canvas not initialized');
+        // Hide selection handles
+        this.canvas.discardActiveObject();
+        // Temporarily disable debug overlay during export
+        const wasDebug = this.debug;
+        this.debug = false;
+        this.canvas.renderAll();
+        let dataUrl;
+        try {
+            dataUrl = this.canvas.toDataURL({ multiplier, format, quality });
+        }
+        catch (e) {
+            this.debug = wasDebug;
+            this.canvas.renderAll();
+            if (e instanceof DOMException && e.name === 'SecurityError') {
+                throw new Error('Cannot export: product image is cross-origin. Use a CORS proxy or serve images from the same domain.');
+            }
+            throw e;
+        }
+        const width = this.canvas.getWidth();
+        const height = this.canvas.getHeight();
+        // Restore debug state
+        this.debug = wasDebug;
+        this.canvas.renderAll();
+        return { dataUrl, width, height };
+    }
+    /** Get a list of all objects on the canvas with their IDs and types. */
+    async getObjects() {
+        const result = [];
+        for (const [id, obj] of this.objectMap) {
+            result.push({ id, type: obj.type ?? 'unknown' });
+        }
+        return result;
+    }
+    /** Update the text content of a text object by its ID. */
+    async updateText(id, text) {
+        if (this.canvas === undefined)
+            return;
+        const obj = this.objectMap.get(id);
+        if (obj !== undefined && obj.type === 'i-text') {
+            obj.set('text', text);
+            this.canvas.renderAll();
+            this.emitStateChanged();
+        }
+    }
+    initCanvas() {
+        if (this.canvasEl === undefined)
+            return;
+        this.canvas = new Canvas(this.canvasEl, {
+            width: this.width,
+            height: this.height,
+            backgroundColor: '#ffffff',
+        });
+        this.canvas.on('selection:created', e => {
+            this.handleSelection(e.selected?.[0]);
+        });
+        this.canvas.on('selection:updated', e => {
+            this.handleSelection(e.selected?.[0]);
+        });
+        this.canvas.on('selection:cleared', () => {
+            this.selectedObjectId = null;
+            this.selectedObjectType = null;
+            this.wtpEditorObjectDeselected.emit();
+        });
+        this.canvas.on('object:modified', () => {
+            this.emitStateChanged();
+        });
+        this.canvas.on('text:changed', () => {
+            this.emitStateChanged();
+        });
+        this.canvas.on('object:moving', e => {
+            if (e.target !== undefined)
+                this.clampObjectToPrintArea(e.target);
+        });
+        this.canvas.on('object:scaling', e => {
+            if (e.target !== undefined)
+                this.clampObjectToPrintArea(e.target);
+        });
+        this.canvas.on('after:render', () => this.drawDebugOverlay());
+        // Load initial state if provided
+        if (this.initialState !== undefined && this.initialState !== '') {
+            try {
+                const state = JSON.parse(this.initialState);
+                this.loadState(state);
+            }
+            catch {
+                // Invalid JSON, ignore
+            }
+        }
+        else if (this.productImage !== undefined && this.productImage !== '') {
+            this.backgroundReady = setCanvasBackground(this.canvas, this.productImage);
+        }
+        this.wtpEditorReady.emit();
+    }
+    /** Draw print area outline and bounding box on the canvas when debug mode is active. */
+    drawDebugOverlay() {
+        if (!this.debug || this.canvas === undefined || this.printArea === undefined)
+            return;
+        const ctx = this.canvas.getContext();
+        const corners = printAreaToPixelCorners(this.printArea, this.canvas.getWidth(), this.canvas.getHeight());
+        ctx.save();
+        // Draw the quad outline (actual print area shape)
+        ctx.beginPath();
+        ctx.moveTo(corners[0].x, corners[0].y);
+        ctx.lineTo(corners[1].x, corners[1].y);
+        ctx.lineTo(corners[2].x, corners[2].y);
+        ctx.lineTo(corners[3].x, corners[3].y);
+        ctx.closePath();
+        ctx.fillStyle = 'rgba(37, 99, 235, 0.08)';
+        ctx.fill();
+        ctx.strokeStyle = '#2563eb';
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([6, 4]);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Draw corner dots
+        for (const c of corners) {
+            ctx.beginPath();
+            ctx.arc(c.x, c.y, 4, 0, Math.PI * 2);
+            ctx.fillStyle = '#2563eb';
+            ctx.fill();
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+        }
+        // Draw axis-aligned bounding box (used for clamping)
+        const xs = corners.map(c => c.x);
+        const ys = corners.map(c => c.y);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        ctx.strokeStyle = 'rgba(220, 38, 38, 0.5)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
+        ctx.setLineDash([]);
+        // Corner labels
+        ctx.font = '10px monospace';
+        ctx.fillStyle = '#2563eb';
+        const labels = ['TL', 'TR', 'BR', 'BL'];
+        for (let i = 0; i < 4; i++) {
+            ctx.fillText(labels[i], corners[i].x + 6, corners[i].y - 6);
+        }
+        ctx.restore();
+    }
+    /**
+     * Get the print area's rotated frame: center, local axes, and dimensions
+     * along those axes. This lets us clamp in the print area's own coordinate
+     * system instead of using an axis-aligned bounding box.
+     */
+    getPrintAreaFrame() {
+        if (this.printArea === undefined || this.canvas === undefined)
+            return null;
+        const corners = printAreaToPixelCorners(this.printArea, this.canvas.getWidth(), this.canvas.getHeight());
+        const [tl, tr, br, bl] = corners;
+        const cx = (tl.x + tr.x + br.x + bl.x) / 4;
+        const cy = (tl.y + tr.y + br.y + bl.y) / 4;
+        const topLen = Math.hypot(tr.x - tl.x, tr.y - tl.y);
+        const botLen = Math.hypot(br.x - bl.x, br.y - bl.y);
+        const leftLen = Math.hypot(bl.x - tl.x, bl.y - tl.y);
+        const rightLen = Math.hypot(br.x - tr.x, br.y - tr.y);
+        const halfW = (topLen + botLen) / 4;
+        const halfH = (leftLen + rightLen) / 4;
+        // Angle from bottom edge (same as fitLogoToPrintArea)
+        const angle = Math.atan2(br.y - bl.y, br.x - bl.x);
+        return { cx, cy, halfW, halfH, cos: Math.cos(angle), sin: Math.sin(angle) };
+    }
+    clampObjectToPrintArea(obj) {
+        const frame = this.getPrintAreaFrame();
+        if (frame === null)
+            return;
+        // Skip background objects
+        if (obj._isBackground === true)
+            return;
+        const { cx, cy, halfW, halfH, cos, sin } = frame;
+        // Use the actual visual size of the object (not getBoundingRect which includes control handles)
+        const objW = (obj.width ?? 0) * (obj.scaleX ?? 1);
+        const objH = (obj.height ?? 0) * (obj.scaleY ?? 1);
+        // Relative angle between object and print area frame
+        const objAngleRad = ((obj.angle ?? 0) * Math.PI) / 180;
+        const frameAngle = Math.atan2(sin, cos);
+        const relAngle = objAngleRad - frameAngle;
+        const relCos = Math.abs(Math.cos(relAngle));
+        const relSin = Math.abs(Math.sin(relAngle));
+        // Object's half-size projected onto the print area's local axes
+        let projHalfW = (objW * relCos + objH * relSin) / 2;
+        let projHalfH = (objW * relSin + objH * relCos) / 2;
+        // Cap scale if the object exceeds the print area in its local frame
+        if (projHalfW > halfW || projHalfH > halfH) {
+            const scaleRatio = Math.min(halfW / Math.max(projHalfW, 1), halfH / Math.max(projHalfH, 1));
+            obj.set({
+                scaleX: (obj.scaleX ?? 1) * scaleRatio,
+                scaleY: (obj.scaleY ?? 1) * scaleRatio,
+            });
+            obj.setCoords();
+            // Recompute projected sizes after scaling
+            const newObjW = (obj.width ?? 0) * (obj.scaleX ?? 1);
+            const newObjH = (obj.height ?? 0) * (obj.scaleY ?? 1);
+            projHalfW = (newObjW * relCos + newObjH * relSin) / 2;
+            projHalfH = (newObjW * relSin + newObjH * relCos) / 2;
+        }
+        // Object center in world coords (use getCenterPoint for accuracy with all origins)
+        obj.setCoords();
+        const objCenter = obj.getCenterPoint();
+        // Transform object center into the print area's local frame
+        const relX = objCenter.x - cx;
+        const relY = objCenter.y - cy;
+        const localX = relX * cos + relY * sin;
+        const localY = -relX * sin + relY * cos;
+        // Clamp in local frame so the visual object stays within the print area
+        const clampedX = Math.max(-halfW + projHalfW, Math.min(halfW - projHalfW, localX));
+        const clampedY = Math.max(-halfH + projHalfH, Math.min(halfH - projHalfH, localY));
+        if (clampedX !== localX || clampedY !== localY) {
+            // Transform back to world coordinates
+            const newCx = cx + clampedX * cos - clampedY * sin;
+            const newCy = cy + clampedX * sin + clampedY * cos;
+            const dx = newCx - objCenter.x;
+            const dy = newCy - objCenter.y;
+            obj.set({
+                left: (obj.left ?? 0) + dx,
+                top: (obj.top ?? 0) + dy,
+            });
+            obj.setCoords();
+        }
+    }
+    handleSelection(obj) {
+        if (obj === undefined)
+            return;
+        const id = obj._objectId;
+        if (id !== undefined && id !== '') {
+            this.selectedObjectId = id;
+            this.selectedObjectType = obj.type ?? null;
+            if (obj.type === 'i-text') {
+                const textObj = obj;
+                this.selectedFont = textObj.fontFamily ?? 'Arial';
+                this.selectedTextColor = textObj.fill ?? '#000000';
+            }
+            this.wtpEditorObjectSelected.emit({ id, type: obj.type ?? 'unknown' });
+        }
+    }
+    getObjectTransform(obj) {
+        return {
+            x: obj.left ?? 0,
+            y: obj.top ?? 0,
+            scaleX: obj.scaleX ?? 1,
+            scaleY: obj.scaleY ?? 1,
+            angle: obj.angle ?? 0,
+        };
+    }
+    buildEditorState() {
+        const logos = [];
+        const texts = [];
+        for (const [id, obj] of this.objectMap) {
+            if (obj.type === 'image') {
+                const previewDataUrl = this.previewUrlMap.get(id);
+                logos.push({
+                    id,
+                    dataUrl: obj.getSrc(),
+                    ...(previewDataUrl !== undefined ? { previewDataUrl } : {}),
+                    transform: this.getObjectTransform(obj),
+                });
+            }
+            else if (obj.type === 'i-text') {
+                const textObj = obj;
+                texts.push({
+                    id,
+                    text: textObj.text ?? '',
+                    fontFamily: textObj.fontFamily ?? 'Arial',
+                    fontSize: textObj.fontSize ?? 24,
+                    fill: textObj.fill ?? '#000000',
+                    transform: this.getObjectTransform(obj),
+                });
+            }
+        }
+        return {
+            fabricJson: this.canvas !== undefined ? JSON.stringify(this.canvas.toJSON()) : '',
+            logos,
+            texts,
+            productImage: this.productImage ?? null,
+            width: this.width,
+            height: this.height,
+        };
+    }
+    emitStateChanged() {
+        this.wtpEditorStateChanged.emit(this.buildEditorState());
+    }
+    handleAddText = () => {
+        this.addText(this.getLabels().defaultText, { fontFamily: this.selectedFont });
+    };
+    handleFontChange = (e) => {
+        const select = e.target;
+        this.selectedFont = select.value;
+        // Update selected text object's font
+        if (this.canvas !== undefined && this.selectedObjectId !== null) {
+            const obj = this.objectMap.get(this.selectedObjectId);
+            if (obj !== undefined && obj.type === 'i-text') {
+                obj.set('fontFamily', this.selectedFont);
+                this.canvas.renderAll();
+                this.emitStateChanged();
+            }
+        }
+    };
+    handleColorChange = (e) => {
+        const input = e.target;
+        this.selectedTextColor = input.value;
+        if (this.canvas !== undefined && this.selectedObjectId !== null) {
+            const obj = this.objectMap.get(this.selectedObjectId);
+            if (obj !== undefined && obj.type === 'i-text') {
+                obj.set('fill', this.selectedTextColor);
+                this.canvas.renderAll();
+                this.emitStateChanged();
+            }
+        }
+    };
+    handleDeleteSelected = () => {
+        if (this.selectedObjectId !== null) {
+            this.removeObject(this.selectedObjectId);
+            this.selectedObjectId = null;
+        }
+    };
+    render() {
+        const labels = this.getLabels();
+        return (h("div", { key: 'c9ef130a1fa731852990de6c3c926d0bc52e628d', class: "wtp-editor" }, h("div", { key: '80f434e1784fdbe1ffc48686a2eb05e8db522dec', class: "toolbar" }, h("button", { key: '8f03a61f63a605ca732f227e709db12f005888a3', class: "toolbar-btn", onClick: this.handleAddText, title: labels.addTextTooltip }, h("svg", { key: '990dad4cdb46e74fae7c887dde4416f5f16ac1fc', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'a1182b18466e0f31b95648543bd436e743a0bc09', points: "4 7 4 4 20 4 20 7" }), h("line", { key: 'bb74bd40a58c5cb25a9842989bc7f5dbe94df684', x1: "9", y1: "20", x2: "15", y2: "20" }), h("line", { key: 'be1eee4ddee7fadddfe00f694196861d582950e7', x1: "12", y1: "4", x2: "12", y2: "20" })), h("span", { key: '6d95e21682aa3a14de50c1b19c6f9ff01b0ba9e6' }, labels.addTextButton)), h("div", { key: '7180e61d20f4a5a6420dd313c78df5809a2e258e', class: "toolbar-separator" }), h("select", { key: 'e44709cb401e316392dc178e2173dec0990cbadc', class: "font-select", onChange: this.handleFontChange, title: labels.fontSelectTooltip }, this.fonts.map(font => (h("option", { value: font, style: { fontFamily: font } }, font)))), this.selectedObjectType === 'i-text' && (h("input", { key: '1f369b84753de1f363e76d0b6815318055738b9c', class: "color-input", type: "color", value: this.selectedTextColor, onInput: this.handleColorChange, title: labels.colorPickerTooltip })), h("div", { key: 'abed11c63044bf6d27ab59ed7262e665ddf6ea32', class: "toolbar-separator" }), h("button", { key: 'a7fa4df142fca5d1160a801731c3be41bddf6373', class: "toolbar-btn danger", onClick: this.handleDeleteSelected, disabled: this.selectedObjectId === null, title: labels.deleteButtonTooltip }, h("svg", { key: 'a41f1fb373bdd2d1830b7627f6c3f9234a2a86ce', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'c731ac84aec857802f1ea1b85268c880c85ab254', points: "3 6 5 6 21 6" }), h("path", { key: '70a5b08147e64f940f55afd4680e9a8b5a8ec0ab', d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })))), h("div", { key: '1f04ba454f9c834a4554b018be6dba40607dbebc', class: "canvas-container" }, h("canvas", { key: '4894f481c67e7021cdd575f276ac1b4c5d20951d', ref: el => (this.canvasEl = el) }))));
+    }
+    static get is() { return "wtp-editor"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wtp-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wtp-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canvas width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "800"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canvas height in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "600"
+            },
+            "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"
+            },
+            "initialState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON-serialized initial editor state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-state"
+            },
+            "fonts": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available font families for the text tool."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['Arial', 'Helvetica', 'Times New Roman', 'Georgia', 'Verdana']"
+            },
+            "printArea": {
+                "type": "unknown",
+                "mutable": false,
+                "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 (0-1 relative coordinates) to constrain objects."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "debug": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show print area overlay and bounding box for debugging."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debug",
+                "defaultValue": "false"
+            },
+            "labels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<EditorLabels>",
+                    "resolved": "EditorLabels",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "EditorLabels": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::EditorLabels",
+                            "referenceLocation": "EditorLabels"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override any of the user-facing toolbar strings. Missing keys fall back to English defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedObjectId": {},
+            "selectedObjectType": {},
+            "selectedFont": {},
+            "selectedTextColor": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wtpEditorReady",
+                "name": "wtpEditorReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the canvas is initialized and ready."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wtpEditorStateChanged",
+                "name": "wtpEditorStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the editor state changes (object add/move/remove)."
+                },
+                "complexType": {
+                    "original": "EditorState",
+                    "resolved": "EditorState",
+                    "references": {
+                        "EditorState": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::EditorState",
+                            "referenceLocation": "EditorState"
+                        }
+                    }
+                }
+            }, {
+                "method": "wtpEditorObjectSelected",
+                "name": "wtpEditorObjectSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an object is selected on the canvas."
+                },
+                "complexType": {
+                    "original": "{ id: string; type: string }",
+                    "resolved": "{ id: string; type: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "wtpEditorObjectDeselected",
+                "name": "wtpEditorObjectDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the current selection is cleared."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "addLogo": {
+                "complexType": {
+                    "signature": "(logoData: LogoData) => Promise<string>",
+                    "parameters": [{
+                            "name": "logoData",
+                            "type": "LogoData",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LogoData": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::LogoData",
+                            "referenceLocation": "LogoData"
+                        },
+                        "FabricObject": {
+                            "location": "import",
+                            "path": "fabric",
+                            "id": "node_modules::FabricObject",
+                            "referenceLocation": "FabricObject"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Add a logo image to the canvas and return its object ID.",
+                    "tags": []
+                }
+            },
+            "addText": {
+                "complexType": {
+                    "signature": "(text: string, options?: { fontFamily?: string; fontSize?: number; fill?: string; }) => Promise<string>",
+                    "parameters": [{
+                            "name": "text",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "options",
+                            "type": "{ fontFamily?: string; fontSize?: number; fill?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FabricObject": {
+                            "location": "import",
+                            "path": "fabric",
+                            "id": "node_modules::FabricObject",
+                            "referenceLocation": "FabricObject"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Add a text object to the canvas and return its object ID.",
+                    "tags": []
+                }
+            },
+            "removeObject": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove an object from the canvas by its ID.",
+                    "tags": []
+                }
+            },
+            "exportState": {
+                "complexType": {
+                    "signature": "() => Promise<EditorState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "EditorState": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::EditorState",
+                            "referenceLocation": "EditorState"
+                        }
+                    },
+                    "return": "Promise<EditorState>"
+                },
+                "docs": {
+                    "text": "Export the current editor state as a serializable object.",
+                    "tags": []
+                }
+            },
+            "loadState": {
+                "complexType": {
+                    "signature": "(state: EditorState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "EditorState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "EditorState": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::EditorState",
+                            "referenceLocation": "EditorState"
+                        },
+                        "FabricObject": {
+                            "location": "import",
+                            "path": "fabric",
+                            "id": "node_modules::FabricObject",
+                            "referenceLocation": "FabricObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Load a previously exported editor state.",
+                    "tags": []
+                }
+            },
+            "resetCanvas": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all user objects from the canvas, keeping the instance alive.",
+                    "tags": []
+                }
+            },
+            "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"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Export the canvas as a data URL image.",
+                    "tags": []
+                }
+            },
+            "exportImageHighRes": {
+                "complexType": {
+                    "signature": "(format?: \"png\" | \"jpeg\", quality?: number, multiplier?: number) => Promise<{ dataUrl: string; width: number; height: number; }>",
+                    "parameters": [{
+                            "name": "format",
+                            "type": "\"png\" | \"jpeg\"",
+                            "docs": ""
+                        }, {
+                            "name": "quality",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "multiplier",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ dataUrl: string; width: number; height: number; }>"
+                },
+                "docs": {
+                    "text": "Export the canvas as a high-resolution data URL image (for PDF/print).\nReturns the data URL plus the actual canvas dimensions (which may differ\nfrom the width/height props after setCanvasBackground resizes the canvas).",
+                    "tags": []
+                }
+            },
+            "getObjects": {
+                "complexType": {
+                    "signature": "() => Promise<{ id: string; type: string; }[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ id: string; type: string; }[]>"
+                },
+                "docs": {
+                    "text": "Get a list of all objects on the canvas with their IDs and types.",
+                    "tags": []
+                }
+            },
+            "updateText": {
+                "complexType": {
+                    "signature": "(id: string, text: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "text",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IText": {
+                            "location": "import",
+                            "path": "fabric",
+                            "id": "node_modules::IText",
+                            "referenceLocation": "IText"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Update the text content of a text object by its ID.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "productImage",
+                "methodName": "onProductImageChange"
+            }, {
+                "propName": "width",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "height",
+                "methodName": "onSizeChange"
+            }, {
+                "propName": "debug",
+                "methodName": "onDebugChange"
+            }, {
+                "propName": "printArea",
+                "methodName": "onPrintAreaChange"
+            }];
+    }
+}