@merchi/product-editor 0.1.9

package/dist/utils/imageUtils.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadRegularImagePromise = void 0;
+var fabric_1 = require("fabric");
+/**
+ * Loads a template image onto a canvas with enhanced error handling and fallbacks
+ *
+ * @param fabricCanvas The Fabric.js canvas instance
+ * @param template The template containing image information
+ * @param width The canvas width
+ * @param height The canvas height
+ * @returns Promise that resolves when the image is loaded
+ */
+var loadRegularImagePromise = function (fabricCanvas, template, width, height) {
+    // Get the canvas ID for tracking if it exists
+    var canvasId = fabricCanvas.loadingId;
+    var trackingEnabled = !!canvasId;
+    return new Promise(function (resolve) {
+        var _a, _b;
+        // Check if canvas is still valid when tracking is enabled
+        if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+            resolve();
+            return;
+        }
+        // Make sure template has a file with a viewUrl
+        if (!template.file || !template.file.viewUrl) {
+            console.error('Template has no viewUrl:', template);
+            resolve();
+            return;
+        }
+        var imageUrl = template.file.viewUrl;
+        // Check if this might be a problematic file format
+        var isPossiblyUnsupported = !imageUrl.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+        // If we have a thumbnailUrl or previewUrl, use that instead for unsupported formats
+        var urlToUse = imageUrl;
+        if (isPossiblyUnsupported) {
+            // Try to use alternative URLs if available
+            if ((_a = template.file) === null || _a === void 0 ? void 0 : _a.thumbnailUrl) {
+                urlToUse = template.file.thumbnailUrl;
+            }
+            else if ((_b = template.file) === null || _b === void 0 ? void 0 : _b.previewUrl) {
+                urlToUse = template.file.previewUrl;
+            }
+        }
+        // Add error handling for image loading
+        fabric_1.fabric.Image.fromURL(urlToUse, function (img) {
+            // Check if canvas is still valid when tracking is enabled
+            if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                console.warn('Canvas changed after image loaded, aborting');
+                resolve();
+                return;
+            }
+            if (!img || !img.width || !img.height) {
+                console.error('Failed to load image or image has invalid dimensions:', img);
+                // Try loading the image with a different approach - create an HTML image first
+                var imgElement_1 = new Image();
+                imgElement_1.crossOrigin = 'anonymous';
+                imgElement_1.onload = function () {
+                    // Check if canvas is still valid when tracking is enabled
+                    if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                        console.warn('Canvas changed after alternative image loaded, aborting');
+                        resolve();
+                        return;
+                    }
+                    var fabricImg = new fabric_1.fabric.Image(imgElement_1);
+                    // Continue with the same scaling and positioning logic
+                    var scale = Math.min(width / fabricImg.width, height / fabricImg.height);
+                    fabricImg.scale(scale);
+                    fabricImg.set({
+                        left: (width - fabricImg.width * scale) / 2,
+                        top: (height - fabricImg.height * scale) / 2,
+                        selectable: false,
+                        evented: false,
+                    });
+                    // Check again before adding to canvas when tracking is enabled
+                    if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                        console.warn('Canvas changed before adding alternative image, aborting');
+                        resolve();
+                        return;
+                    }
+                    fabricCanvas.add(fabricImg);
+                    fabricCanvas.sendToBack(fabricImg);
+                    // Final check before render when tracking is enabled
+                    if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                        console.warn('Canvas changed before rendering alternative image, aborting');
+                        resolve();
+                        return;
+                    }
+                    try {
+                        fabricCanvas.renderAll();
+                    }
+                    catch (e) {
+                        console.error('Error rendering canvas with alternative image:', e);
+                    }
+                    resolve();
+                };
+                imgElement_1.onerror = function () {
+                    // Check if canvas is still valid when tracking is enabled
+                    if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                        console.warn('Canvas changed after image load error, aborting');
+                        resolve();
+                        return;
+                    }
+                    console.error('Alternative loading also failed. Using placeholder image.');
+                    // Use a placeholder SVG as absolute fallback
+                    var placeholderURL = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22600%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20600%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1891%20text%20%7Bfill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A40pt%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder%22%3E%3Crect%20width%3D%22800%22%20height%3D%22600%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285%22%20y%3D%22300%22%3EThumbnail%20Unavailable%3C%2Ftext%3E%3Ctext%20x%3D%22205%22%20y%3D%22350%22%3ETemplate%3A%20' + template.name + '%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+                    fabric_1.fabric.Image.fromURL(placeholderURL, function (placeholderImg) {
+                        // Check if canvas is still valid when tracking is enabled
+                        if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                            console.warn('Canvas changed before adding placeholder image, aborting');
+                            resolve();
+                            return;
+                        }
+                        placeholderImg.set({
+                            left: 0,
+                            top: 0,
+                            width: width,
+                            height: height,
+                            selectable: false,
+                            evented: false,
+                        });
+                        fabricCanvas.add(placeholderImg);
+                        // Final check before render when tracking is enabled
+                        if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                            console.warn('Canvas changed before rendering placeholder image, aborting');
+                            resolve();
+                            return;
+                        }
+                        try {
+                            fabricCanvas.renderAll();
+                        }
+                        catch (e) {
+                            console.error('Error rendering canvas with placeholder image:', e);
+                        }
+                        resolve();
+                    });
+                };
+                imgElement_1.src = urlToUse;
+                return;
+            }
+            // Scale image to fit canvas while maintaining aspect ratio
+            var scale = Math.min(width / img.width, height / img.height);
+            img.scale(scale);
+            // Center the image
+            img.set({
+                left: (width - img.width * scale) / 2,
+                top: (height - img.height * scale) / 2,
+                selectable: false,
+                evented: false,
+                crossOrigin: 'anonymous',
+            });
+            // Check if canvas is still valid when tracking is enabled
+            if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                console.warn('Canvas changed before adding image, aborting');
+                resolve();
+                return;
+            }
+            // Add the image to the canvas
+            fabricCanvas.add(img);
+            // Send the template image to the back
+            fabricCanvas.sendToBack(img);
+            // Final check before render when tracking is enabled
+            if (trackingEnabled && fabricCanvas.loadingId !== canvasId) {
+                console.warn('Canvas changed before rendering, aborting');
+                resolve();
+                return;
+            }
+            try {
+                fabricCanvas.renderAll();
+            }
+            catch (e) {
+                console.error('Error rendering canvas:', e);
+            }
+            resolve();
+        }, { crossOrigin: 'anonymous' });
+    });
+};
+exports.loadRegularImagePromise = loadRegularImagePromise;

package/dist/utils/job.d.ts

@@ -0,0 +1,40 @@
+import { MerchiFile, Product, Variation, DraftTemplate, DraftTemplateData } from '../types';
+export declare const generateUniqueId: () => string;
+export declare function findTemplatesSelectedByVarations(draftTemplates: DraftTemplate[], variations: Variation[]): DraftTemplate[];
+export declare function filterVariationsByTemplate(variations: Variation[], template: DraftTemplate): Variation[];
+export declare function buildVariationFieldCanvasObject(variation: Variation): {
+    canvasObjectType: string;
+    fieldId: number | undefined;
+    fileId: number | undefined;
+    value: string | null | undefined;
+    file: MerchiFile;
+    uniqueId: string;
+}[] | {
+    fieldId: number | undefined;
+    value: null;
+    uniqueId: string;
+} | {
+    canvasObjectType: string;
+    value: string;
+    fieldId: number | undefined;
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    uniqueId: string;
+}[] | {
+    canvasObjectType: string;
+    fieldId: number | undefined;
+    value: string | null | undefined;
+    colour: string | null | undefined;
+    uniqueId: string;
+}[] | {
+    fieldId: number | undefined;
+    value: string | null | undefined;
+    uniqueId: string;
+}[];
+export declare function canvasTemplateVariationObjects(variations: Variation[], template: DraftTemplate): {
+    fieldId: number | undefined;
+    value: string | null | undefined;
+    uniqueId: string;
+}[];
+export declare function initDraftTemplates(variations: Variation[], product: Product): DraftTemplateData[];

package/dist/utils/job.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initDraftTemplates = exports.canvasTemplateVariationObjects = exports.buildVariationFieldCanvasObject = exports.filterVariationsByTemplate = exports.findTemplatesSelectedByVarations = exports.generateUniqueId = void 0;
+var types_1 = require("../types");
+// Add a UUID generator for unique IDs
+var generateUniqueId = function () {
+    return 'canvas-obj-' + Math.random().toString(36).substring(2, 11) + Date.now().toString(36);
+};
+exports.generateUniqueId = generateUniqueId;
+function findTemplatesSelectedByVarations(draftTemplates, variations) {
+    // filter all the selected variation values
+    var selectedVarationValues = variations
+        .filter(function (v) { return v.value !== undefined && v.value !== null && v.value !== ''; })
+        .map(function (v) { return String(v.value); });
+    // return all the draft templates that have a selectedByVariationFieldOptions that includes
+    // any of the selected variation values
+    return draftTemplates.filter(function (template) {
+        var _a;
+        if (!(template === null || template === void 0 ? void 0 : template.selectedByVariationFieldOptions)) {
+            return false;
+        }
+        return !!((_a = template.selectedByVariationFieldOptions) === null || _a === void 0 ? void 0 : _a.find(function (o) { return selectedVarationValues.includes(String(o.id)); }));
+    });
+}
+exports.findTemplatesSelectedByVarations = findTemplatesSelectedByVarations;
+function filterVariationsByTemplate(variations, template) {
+    var _a;
+    // filter the variations by the template and only return the variations which edit the template
+    // we will use these variations to add canvas objects to the canvas
+    var editFieldIds = (_a = template.editedByVariationFields) === null || _a === void 0 ? void 0 : _a.map(function (field) { return field.id; });
+    return variations.filter(function (v) { var _a; return editFieldIds === null || editFieldIds === void 0 ? void 0 : editFieldIds.includes((_a = v.variationField) === null || _a === void 0 ? void 0 : _a.id); });
+}
+exports.filterVariationsByTemplate = filterVariationsByTemplate;
+function buildVariationFieldCanvasObject(variation) {
+    // takes a variation and returns an associated canvas object to redner
+    var value = variation.value, variationField = variation.variationField, _a = variation.variationFiles, variationFiles = _a === void 0 ? [] : _a;
+    var _b = variationField || {}, _c = _b.fieldType, fieldType = _c === void 0 ? types_1.FieldType.TEXT_INPUT : _c, id = _b.id;
+    if ([types_1.FieldType.TEXT_INPUT, types_1.FieldType.TEXT_AREA, types_1.FieldType.NUMBER_INPUT].includes(fieldType)) {
+        // if value is null or empty, do not create a text object
+        if (value === null || value === undefined || value === '') {
+            return {
+                fieldId: id,
+                value: null,
+                uniqueId: (0, exports.generateUniqueId)()
+            };
+        }
+        // Used to add a text to the canvas
+        return [{
+                canvasObjectType: 'text',
+                value: value,
+                fieldId: id,
+                text: value,
+                fontSize: 24,
+                fontFamily: 'Nunito',
+                uniqueId: (0, exports.generateUniqueId)(),
+            }];
+    }
+    if (fieldType === types_1.FieldType.FILE_UPLOAD) {
+        // Used to add an image to the canvas
+        return variationFiles.map(function (file) { return ({
+            canvasObjectType: 'image',
+            fieldId: id,
+            fileId: file.id,
+            value: value,
+            file: file,
+            uniqueId: (0, exports.generateUniqueId)(),
+        }); });
+    }
+    if ([types_1.FieldType.COLOUR_PICKER, types_1.FieldType.COLOUR_SELECT].includes(fieldType)) {
+        // Used to add a colour to the canvas
+        return [{
+                canvasObjectType: 'colour',
+                fieldId: id,
+                value: value,
+                colour: value,
+                uniqueId: (0, exports.generateUniqueId)(),
+            }];
+    }
+    return [{
+            fieldId: id,
+            value: value,
+            uniqueId: (0, exports.generateUniqueId)(),
+        }];
+}
+exports.buildVariationFieldCanvasObject = buildVariationFieldCanvasObject;
+function canvasTemplateVariationObjects(variations, template) {
+    // takes a list of variations and a template and returns a list of canvas objects to render
+    var templateVariations = filterVariationsByTemplate(variations, template);
+    return templateVariations
+        .flatMap(function (v) { return buildVariationFieldCanvasObject(v); })
+        .filter(function (obj) { return obj.canvasObjectType; });
+}
+exports.canvasTemplateVariationObjects = canvasTemplateVariationObjects;
+function initDraftTemplates(variations, product) {
+    var _a = product.draftTemplates, draftTemplates = _a === void 0 ? [] : _a;
+    // Check for any templates that are selected by the variation options
+    var templates = findTemplatesSelectedByVarations(draftTemplates, variations) || [];
+    // If there are no templates selected, return the draft templates
+    var useTemplates = templates.length ? templates : draftTemplates;
+    return useTemplates.map(function (template) {
+        // find the variations which edit the template
+        var templateVariations = filterVariationsByTemplate(variations, template);
+        // build the canvas objects for the template
+        var variationObjects = canvasTemplateVariationObjects(templateVariations, template);
+        return {
+            template: template,
+            variationFieldIds: templateVariations
+                .map(function (v) { var _a; return (_a = v.variationField) === null || _a === void 0 ? void 0 : _a.id; })
+                .filter(Boolean)
+                .map(function (id) { return Number(id); }),
+            variationObjects: variationObjects,
+        };
+    });
+}
+exports.initDraftTemplates = initDraftTemplates;

package/dist/utils/keyboard.d.ts

@@ -0,0 +1 @@
+export declare const setupKeyboardEvents: (canvas: fabric.Canvas, onObjectRemoved?: ((dataUrl: string) => void) | undefined) => () => void;

package/dist/utils/keyboard.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupKeyboardEvents = void 0;
+var setupKeyboardEvents = function (canvas, onObjectRemoved) {
+    var handleKeyDown = function (e) {
+        if (e.key === 'Delete') {
+            var activeObject = canvas.getActiveObject();
+            if (activeObject) {
+                canvas.remove(activeObject);
+                canvas.renderAll();
+                if (onObjectRemoved) {
+                    var dataUrl = canvas.toDataURL({
+                        format: 'png',
+                        quality: 1,
+                    });
+                    onObjectRemoved(dataUrl);
+                }
+            }
+        }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+        document.removeEventListener('keydown', handleKeyDown);
+    };
+};
+exports.setupKeyboardEvents = setupKeyboardEvents;

package/dist/utils/previewUtils.d.ts

@@ -0,0 +1,9 @@
+import { DraftTemplateData, DraftPreview } from '../types';
+/**
+ * Gets all unique draft previews from the draft templates
+ * Loops through each template's draftPreviewLayers to collect associated previews
+ *
+ * @param draftTemplates Array of draft templates with their variation data
+ * @returns Array of unique draft previews
+ */
+export declare function setNewDraftPreviews(draftTemplates: DraftTemplateData[]): DraftPreview[];

package/dist/utils/previewUtils.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNewDraftPreviews = void 0;
+/**
+ * Gets all unique draft previews from the draft templates
+ * Loops through each template's draftPreviewLayers to collect associated previews
+ *
+ * @param draftTemplates Array of draft templates with their variation data
+ * @returns Array of unique draft previews
+ */
+function setNewDraftPreviews(draftTemplates) {
+    // Create a map to track which previews we've already included by ID
+    var includedPreviewIds = new Set();
+    var draftPreviews = [];
+    // Loop through each draft template
+    draftTemplates.forEach(function (draftTemplateData) {
+        var template = draftTemplateData.template;
+        // Skip if the template doesn't have preview layers
+        if (!template.draftPreviewLayers || template.draftPreviewLayers.length === 0) {
+            return;
+        }
+        // Look through each preview layer to find associated previews
+        template.draftPreviewLayers.forEach(function (layer) {
+            // If the layer has a preview and we haven't already included it
+            if (layer.draftPreview && layer.draftPreview.id) {
+                var previewId = layer.draftPreview.id;
+                if (!includedPreviewIds.has(previewId)) {
+                    // Add to our tracking set
+                    includedPreviewIds.add(previewId);
+                    // Add the preview to our result array
+                    draftPreviews.push(layer.draftPreview);
+                }
+            }
+        });
+    });
+    // Return the unique list of previews
+    return draftPreviews;
+}
+exports.setNewDraftPreviews = setNewDraftPreviews;

package/dist/utils/psdConverter.d.ts

@@ -0,0 +1,40 @@
+import { fabric } from 'fabric';
+import { SavedCanvasObject } from '../types';
+interface ExtendedCanvas extends fabric.Canvas {
+    designBounds?: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    psdUrl?: string;
+    anythingABC?: string;
+}
+/**
+ * Extracts layers from a PSD file and renders them to a PNG
+ *
+ * @param psdUrl URL to the PSD file
+ * @returns Promise that resolves to a PNG data URL
+ */
+export declare const extractPsdBaseLayer: (psdUrl: string) => Promise<{
+    dataUrl: string;
+    designBounds?: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+}>;
+/**
+ * Loads a PSD file onto a fabric.js canvas
+ *
+ * @param canvas fabric.js Canvas instance
+ * @param psdUrl URL to the PSD file
+ * @param width Canvas width
+ * @param height Canvas height
+ * @returns Promise that resolves when the image is added to the canvas
+ */
+export declare const loadPsdOntoCanvas: (canvas: ExtendedCanvas, psdUrl: string, variations: any[], savedObjects: SavedCanvasObject[], width: number, height: number) => Promise<void>;
+export {};