@merchi/product-editor 0.1.9

package/src/utils/imageUtils.ts

@@ -0,0 +1,218 @@
+import { fabric } from 'fabric';
+import { DraftTemplate } from '../types';
+
+/**
+ * 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
+ */
+export const loadRegularImagePromise = (
+  fabricCanvas: fabric.Canvas,
+  template: DraftTemplate,
+  width: number,
+  height: number,
+): Promise<void> => {
+  // Get the canvas ID for tracking if it exists
+  const canvasId = (fabricCanvas as any).loadingId;
+  const trackingEnabled = !!canvasId;
+
+  return new Promise((resolve) => {
+    // Check if canvas is still valid when tracking is enabled
+    if (trackingEnabled && (fabricCanvas as any).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;
+    }
+
+    const imageUrl = template.file.viewUrl;
+
+    // Check if this might be a problematic file format
+    const isPossiblyUnsupported = !imageUrl.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+
+    // If we have a thumbnailUrl or previewUrl, use that instead for unsupported formats
+    let urlToUse = imageUrl;
+    if (isPossiblyUnsupported) {
+
+      // Try to use alternative URLs if available
+      if (template.file?.thumbnailUrl) {
+        urlToUse = template.file.thumbnailUrl;
+      } else if (template.file?.previewUrl) {
+        urlToUse = template.file.previewUrl;
+      }
+    }
+
+    // Add error handling for image loading
+    fabric.Image.fromURL(
+      urlToUse,
+      (img: fabric.Image) => {
+        // Check if canvas is still valid when tracking is enabled
+        if (trackingEnabled && (fabricCanvas as any).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
+          const imgElement = new Image();
+          imgElement.crossOrigin = 'anonymous';
+          imgElement.onload = () => {
+            // Check if canvas is still valid when tracking is enabled
+            if (trackingEnabled && (fabricCanvas as any).loadingId !== canvasId) {
+              console.warn('Canvas changed after alternative image loaded, aborting');
+              resolve();
+              return;
+            }
+
+            const fabricImg = new fabric.Image(imgElement);
+
+            // Continue with the same scaling and positioning logic
+            const 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 as any).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 as any).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.onerror = () => {
+            // Check if canvas is still valid when tracking is enabled
+            if (trackingEnabled && (fabricCanvas as any).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
+            const 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.Image.fromURL(placeholderURL, (placeholderImg) => {
+              // Check if canvas is still valid when tracking is enabled
+              if (trackingEnabled && (fabricCanvas as any).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 as any).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.src = urlToUse;
+          return;
+        }
+
+        // Scale image to fit canvas while maintaining aspect ratio
+        const 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, // template image is not selectable
+          evented: false,    // template image is not responsive to events
+          crossOrigin: 'anonymous',
+        });
+
+        // Check if canvas is still valid when tracking is enabled
+        if (trackingEnabled && (fabricCanvas as any).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 as any).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' }
+    );
+  });
+};

package/src/utils/job.ts

@@ -0,0 +1,128 @@
+import {
+  FieldType,
+  MerchiFile,
+  Product,
+  Variation,
+  VariationField,
+  VariationFieldsOption,
+  DraftTemplate,
+  DraftTemplateData,
+} from '../types';
+
+// Add a UUID generator for unique IDs
+export const generateUniqueId = () => {
+  return 'canvas-obj-' + Math.random().toString(36).substring(2, 11) + Date.now().toString(36);
+};
+
+export function findTemplatesSelectedByVarations(draftTemplates: DraftTemplate[], variations: Variation[]) {
+  // filter all the selected variation values
+  const selectedVarationValues: string[] = variations
+    .filter((v: Variation) => v.value !== undefined && v.value !== null && v.value !== '')
+    .map((v: Variation) => String(v.value));
+
+  // return all the draft templates that have a selectedByVariationFieldOptions that includes
+  // any of the selected variation values
+  return draftTemplates.filter((template: DraftTemplate) => {
+    if (!template?.selectedByVariationFieldOptions) {
+      return false;
+    }
+    return !!template.selectedByVariationFieldOptions?.find(
+      (o: VariationFieldsOption) => selectedVarationValues.includes(String(o.id))
+    );
+  });
+}
+
+export function filterVariationsByTemplate(variations: Variation[], template: DraftTemplate) {
+  // 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
+  const editFieldIds = template.editedByVariationFields?.map((field: VariationField) => field.id);
+  return variations.filter(
+    (v: Variation) => editFieldIds?.includes(v.variationField?.id)
+  );
+}
+
+export function buildVariationFieldCanvasObject(variation: Variation) {
+  // takes a variation and returns an associated canvas object to redner
+  const { value, variationField, variationFiles = [] } = variation;
+  const { fieldType = FieldType.TEXT_INPUT, id } = variationField || {};
+  if ([FieldType.TEXT_INPUT, FieldType.TEXT_AREA, 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: generateUniqueId()
+      };
+    }
+    // Used to add a text to the canvas
+    return [{
+      canvasObjectType: 'text',
+      value,
+      fieldId: id,
+      text: value,
+      fontSize: 24,
+      fontFamily: 'Nunito',
+      uniqueId: generateUniqueId(),
+    }];
+  }
+  if (fieldType === FieldType.FILE_UPLOAD) {
+    // Used to add an image to the canvas
+    return variationFiles.map((file: MerchiFile) => ({
+      canvasObjectType: 'image',
+      fieldId: id,
+      fileId: file.id,
+      value,
+      file: file,
+      uniqueId: generateUniqueId(),
+    }));
+  }
+  if ([FieldType.COLOUR_PICKER, FieldType.COLOUR_SELECT].includes(fieldType)) {
+    // Used to add a colour to the canvas
+    return [{
+      canvasObjectType: 'colour',
+      fieldId: id,
+      value,
+      colour: value,
+      uniqueId: generateUniqueId(),
+    }];
+  }
+  return [{
+    fieldId: id,
+    value,
+    uniqueId: generateUniqueId(),
+  }];
+}
+
+export function canvasTemplateVariationObjects(variations: Variation[], template: DraftTemplate) {
+  // takes a list of variations and a template and returns a list of canvas objects to render
+  const templateVariations = filterVariationsByTemplate(variations, template);
+
+  return templateVariations
+    .flatMap((v: Variation) => buildVariationFieldCanvasObject(v))
+    .filter((obj: any) => obj.canvasObjectType);
+}
+
+export function initDraftTemplates(variations: Variation[], product: Product): DraftTemplateData[] {
+  const { draftTemplates = [] } = product;
+
+  // Check for any templates that are selected by the variation options
+  const templates = findTemplatesSelectedByVarations(draftTemplates, variations) || [];
+
+  // If there are no templates selected, return the draft templates
+  const useTemplates = templates.length ? templates : draftTemplates;
+
+  return useTemplates.map((template: DraftTemplate) => {
+    // find the variations which edit the template
+    const templateVariations = filterVariationsByTemplate(variations, template);
+    // build the canvas objects for the template
+    const variationObjects = canvasTemplateVariationObjects(templateVariations, template);
+    return {
+      template,
+      variationFieldIds: templateVariations
+        .map((v: Variation) => v.variationField?.id)
+        .filter(Boolean)
+        .map(id => Number(id)),
+      variationObjects,
+    };
+  });
+}

package/src/utils/keyboard.ts

@@ -0,0 +1,28 @@
+export const setupKeyboardEvents = (
+  canvas: fabric.Canvas,
+  onObjectRemoved?: (dataUrl: string) => void
+) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Delete') {
+      const activeObject = canvas.getActiveObject();
+      if (activeObject) {
+        canvas.remove(activeObject);
+        canvas.renderAll();
+
+        if (onObjectRemoved) {
+          const dataUrl = canvas.toDataURL({
+            format: 'png',
+            quality: 1,
+          });
+          onObjectRemoved(dataUrl);
+        }
+      }
+    }
+  };
+
+  document.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    document.removeEventListener('keydown', handleKeyDown);
+  };
+}; 

package/src/utils/previewUtils.ts

@@ -0,0 +1,43 @@
+import { DraftTemplateData, DraftPreview, DraftPreviewLayer } 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 function setNewDraftPreviews(draftTemplates: DraftTemplateData[]): DraftPreview[] {
+  // Create a map to track which previews we've already included by ID
+  const includedPreviewIds = new Set<number>();
+  const draftPreviews: DraftPreview[] = [];
+
+  // Loop through each draft template
+  draftTemplates.forEach((draftTemplateData) => {
+    const { template } = draftTemplateData;
+    
+    // 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((layer: DraftPreviewLayer) => {
+      // If the layer has a preview and we haven't already included it
+      if (layer.draftPreview && layer.draftPreview.id) {
+        const 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;
+}