@merchi/product-editor 0.1.9

package/src/context/ProductEditorContext.tsx

@@ -0,0 +1,829 @@
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { fabric } from 'fabric';
+import { Product, Job, DraftTemplate, DraftTemplateData, DraftPreview, SavedCanvasObject, RenderedDraftPreview } from '../types';
+import { drawGrid } from '../utils/grid';
+import { initDraftTemplates } from '../utils/job';
+import { renderEditorOrPreview } from '../utils/renderUtils';
+import { setupKeyboardEvents } from '../utils/keyboard';
+import { haveDraftTemplatesChanged } from '../utils/draftTemplateUtils';
+import { setNewDraftPreviews } from '../utils/previewUtils';
+import { debounce } from 'lodash';
+import { renderClippedImage, renderCanvasWithoutGrid } from '../utils/canvasUtils';
+import { FontOption, defaultFontOptions } from '../config/fontConfig';
+import { defaultPalette } from '../config/colorConfig';
+import { v4 as uuidv4 } from 'uuid';
+import { UseFormReturn } from 'react-hook-form';
+import { getDeviceAdjustedDimensions } from '../utils/deviceUtils';
+
+
+interface ProductEditorContextType {
+  // States
+  canvas: fabric.Canvas | null;
+  draftPreviews: DraftPreview[];
+  draftTemplates: DraftTemplateData[]; // Updated to use the new type
+  isCanvasLoading: boolean;
+  isMobileView: boolean;
+  loadingPreviews: boolean;
+  renderedDraftPreviews: RenderedDraftPreview[];
+  savedObjects: SavedCanvasObject[];
+  selectedTemplate: number | null;
+  selectedTextObject: fabric.IText | null;
+  showGrid: boolean;
+  showPreview: boolean;
+
+  // State Setters
+  setCanvas: (canvas: fabric.Canvas) => void;
+  setSelectedTemplate: (templateId: number) => void;
+  setShowGrid: (show: boolean) => void;
+
+  // Functions
+  handleCancel: () => void;
+  handleSave: () => void;
+  handleTemplateChange: (draftTemplate: DraftTemplate) => void;
+  recordVariationFieldObjectsOnCanvas: () => void;
+  togglePreview: () => void;
+  updateSelectedText: (props: Partial<fabric.IText>) => void;
+  fontOptions: FontOption[];
+  colorPalette: (string | null)[][];
+  showLayerPanel: boolean;
+  toggleLayerPanel: () => void;
+  selectedObjectId: string | null;
+  setSelectedObjectId: (id: string | null) => void;
+  selectObject: (obj: fabric.Object | null) => void;
+  deleteObject: (obj: fabric.Object) => void;
+
+  // Props
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+  groupIndex: number;
+  height: number;
+  inputName: string;
+  job: Job;
+  product: Product;
+  width: number;
+  hookForm: UseFormReturn<any> | null;
+}
+
+const ProductEditorContext = createContext<ProductEditorContextType | undefined>(undefined);
+
+interface ProductEditorProviderProps {
+  children: React.ReactNode;
+  groupIndex?: number;
+  product: Product;
+  width?: number;
+  height?: number;
+  job: Job;
+  onSave: () => void;
+  onCancel: () => void;
+  hookForm?: UseFormReturn<any> | null; // Type the form methods prop
+  fontOptions?: FontOption[];
+  colorPalette?: (string | null)[][];
+}
+
+export const ProductEditorProvider: React.FC<ProductEditorProviderProps> = ({
+  children,
+  groupIndex = 0,
+  product,
+  width: initialWidth = 800, // Rename prop
+  height: initialHeight = 600, // Rename prop
+  job,
+  onSave,
+  onCancel,
+  hookForm = null, // Initialize with null
+  fontOptions = defaultFontOptions,
+  colorPalette = defaultPalette,
+}) => {
+
+  const inputName = `ownDrafts[0].images[${groupIndex || 0}]`;
+
+  // Create refs to store the latest values to prevent excessive re-renders
+  const allVariationsRef = useRef<any[]>([]);
+  const productRef = useRef(product);
+
+  // Update product ref when it changes
+  useEffect(() => {
+    productRef.current = product;
+  }, [product]);
+
+  // Determine dimensions and mobile status once at initialization
+  const deviceSettings = useMemo(() =>
+    getDeviceAdjustedDimensions(initialWidth, initialHeight),
+    [initialWidth, initialHeight]
+  );
+
+  // Use dimensions from device settings
+  const canvasWidth = deviceSettings.width;
+  const canvasHeight = deviceSettings.height;
+  const isMobileView = deviceSettings.isMobile;
+
+  const [
+    draftTemplates,
+    setDraftTemplates
+  ] = useState<DraftTemplateData[]>([]);
+  const [draftPreviews, setDraftPreviews] = useState<DraftPreview[]>([]);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [canvas, setCanvas] = useState<fabric.Canvas | null>(null);
+  const [selectedTemplate, setSelectedTemplate] = useState<number | null>(
+    draftTemplates?.[0]?.template?.id || null
+  );
+  const [showGrid, setShowGrid] = useState(true);
+  const [showPreview, setShowPreview] = useState(true);
+  const [isCanvasLoading, setIsCanvasLoading] = useState(true);
+  const [selectedTextObject, setSelectedTextObject] = useState<fabric.IText | null>(null);
+
+  const [showLayerPanel, setShowLayerPanel] = useState(false);
+  const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null);
+
+  // Add a new state to track saved objects
+  const [savedObjects, setSavedObjects] = useState<SavedCanvasObject[]>([]);
+
+  // Add this ref to track initial mounting
+  const initialMountRef = useRef(false);
+
+  // Initialize savedObjects from localStorage on component mount
+  useEffect(() => {
+    // Only reset on initial mount
+    if (!initialMountRef.current) {
+      initialMountRef.current = true;
+      // Reset savedObjects on page reload instead of loading from localStorage
+      setSavedObjects([]);
+    }
+  }, [product]);
+
+  // Function to record the current state of variation field objects
+  const recordVariationFieldObjectsOnCanvas = useCallback(() => {
+    if (!canvas || selectedTemplate === null) return;
+    // Create a fresh array instead of appending to existing
+    const updatedSavedObjects: SavedCanvasObject[] = [];
+    let hasChanges = false;
+
+    // Get all objects from the canvas
+    const objects = canvas.getObjects();
+
+    // Filter for objects that have a fieldId property (variation field objects)
+    objects.forEach((obj: any) => {
+      // Get fieldId from either direct property or from variationField
+
+      const { fieldId } = obj;
+
+      if (fieldId) {
+        // Also save a serialized version for the savedObjects state
+        const updatedObject = {
+          ...obj,
+        };
+
+        if (obj instanceof fabric.Image) {
+          Object.assign(updatedObject, {
+            width: obj.width,
+            height: obj.height,
+            src: obj.getSrc(),
+          });
+        }
+
+        updatedSavedObjects.push(updatedObject);
+        hasChanges = true;
+      }
+    });
+
+    // Only update state if we found objects with fieldIds
+    if (hasChanges) {
+      // Update the savedObjects state with the new complete array
+      setSavedObjects(updatedSavedObjects);
+    }
+  }, [canvas, selectedTemplate]); // Remove savedObjects from the dependencies
+
+  // Function to toggle preview visibility
+  const togglePreview = () => {
+    setShowPreview(prev => !prev);
+  };
+
+  // Function to toggle layer panel visibility
+  const toggleLayerPanel = () => {
+    setShowLayerPanel(prev => !prev);
+  };
+
+  // Function to update selected text object properties
+  const updateSelectedText = (props: Partial<fabric.IText>) => {
+    if (selectedTextObject && canvas && selectedTemplate !== null) {
+      selectedTextObject.set(props);
+      canvas.requestRenderAll();
+
+      // Record the state changes after updating text properties
+      // This ensures color changes and other styling updates are saved
+      setTimeout(() => {
+        if (canvas && selectedTemplate !== null) {
+          recordVariationFieldObjectsOnCanvas();
+        }
+      }, 50);
+    } else {
+      console.warn('Cannot update text - missing canvas, text object, or template');
+    }
+  };
+
+  const handleSave = () => {
+    if (canvas) {
+      const dataUrl = canvas.toDataURL();
+      onSave();
+    }
+  };
+
+  // Handle template change with improved state tracking
+  const handleTemplateChange = async (draftTemplate: DraftTemplate) => {
+    if (!canvas) return;
+
+    // Record the current state of variation field objects
+    recordVariationFieldObjectsOnCanvas();
+
+    // Check if this is already the selected template - prevent reloading the same template
+    if (draftTemplate.id && selectedTemplate === draftTemplate.id) {
+      return;
+    }
+
+    // Update the selected template
+    if (draftTemplate.id) {
+      setSelectedTemplate(draftTemplate.id);
+    }
+
+    // Create a clean canvas reference for tracking
+    const currentCanvas = canvas;
+
+    // Create a new canvas before disposing the old one
+    if (canvasRef.current) {
+      // Dispose the old canvas properly
+      try {
+        currentCanvas.dispose();
+
+        // Remove any lingering canvas containers to prevent duplicates
+        if (canvasRef.current.parentElement) {
+          const containers = canvasRef.current.parentElement.querySelectorAll('.canvas-container');
+          if (containers.length > 1) {
+            // Keep only the first container
+            for (let i = 1; i < containers.length; i++) {
+              containers[i].remove();
+            }
+          }
+        }
+      } catch (e) {
+        console.error('Error during canvas cleanup:', e);
+      }
+
+      const newCanvas = new fabric.Canvas(canvasRef.current, {
+        width: canvasWidth,
+        height: canvasHeight,
+        backgroundColor: '#ffffff',
+        // not to bring the selected object to the top visually
+        preserveObjectStacking: true
+      });
+
+      // Now load the template image and add variations
+      const templateData = draftTemplates.find(dt => dt.template.id === draftTemplate.id);
+
+      await renderEditorOrPreview(
+        newCanvas,
+        (templateData as any).template,
+        (templateData as any).variationObjects,
+        savedObjects,
+        canvasHeight,
+        canvasWidth,
+      );
+
+      // Update the state with the new canvas
+      setCanvas(newCanvas);
+
+      // Since selectedTemplate was just updated, we need a slight delay to ensure
+      // grid is drawn and loading is set to false
+      setTimeout(() => {
+        // Draw grid if needed
+        if (showGrid) {
+          try {
+            if (newCanvas.getElement() && newCanvas.getElement().parentNode) {
+              drawGrid(newCanvas, canvasWidth, canvasHeight, 20, '#a0a0a0', showGrid);
+            }
+          } catch (e) {
+            console.error('Error drawing grid after template change:', e);
+          }
+        }
+        setIsCanvasLoading(false);
+      }, 50);
+
+      // Re-setup keyboard events for the new canvas
+      setupKeyboardEvents(newCanvas, (dataUrl: any) => {
+        if (document.activeElement === newCanvas.upperCanvasEl) {
+          onSave && onSave();
+        }
+      });
+    }
+  };
+
+  // Add cleanup event handlers that properly use the callback function
+  const createEventHandler = useCallback((callback: Function) => {
+    return () => {
+      if (callback) callback();
+    };
+  }, []);
+
+  // Replace the direct watch with a debounced version
+  const debouncedWatch = useMemo(() => {
+    return debounce(async (watchValues: { variationsGroups?: any; variations?: any }) => {
+      // Start loading
+      setIsCanvasLoading(true);
+
+      // Record the current state of variation field objects before changes
+      if (canvas) {
+        recordVariationFieldObjectsOnCanvas();
+      }
+
+      // Extract the variations from the watch values
+      const variationsGroups = watchValues.variationsGroups;
+      const variations = watchValues.variations;
+
+      // Process the latest variations to update allVariationsRef
+      const newAllVariations = variationsGroups?.[groupIndex]?.variations
+        ? [...variationsGroups[groupIndex].variations]
+        : variations || [];
+
+      // Store in ref to avoid triggering effects
+      allVariationsRef.current = newAllVariations;
+
+      const newDraftTemplates = initDraftTemplates(newAllVariations, productRef.current);
+
+      // Check if the currently selected template ID still exists in the new list
+      const currentSelectedIdStillExists = newDraftTemplates.some(
+        dt => dt.template.id === selectedTemplate);
+
+      // Store the canvas instance for this effect run
+      let fabricCanvasInstance = canvas;
+
+      // Only update if they've actually changed
+      if (haveDraftTemplatesChanged(draftTemplates, newDraftTemplates)) {
+        setDraftTemplates(newDraftTemplates);
+        setDraftPreviews(setNewDraftPreviews(newDraftTemplates));
+      }
+
+      // Determine the template to load
+      let templateToLoad: DraftTemplate | undefined = newDraftTemplates[0]?.template;
+
+      if (currentSelectedIdStillExists && selectedTemplate) {
+        const previouslySelected = newDraftTemplates.find(dt => dt.template.id === selectedTemplate);
+        templateToLoad = previouslySelected?.template || templateToLoad;
+      }
+
+      setSelectedTemplate(templateToLoad?.id || null);
+
+      // Handle canvas setup
+      if (fabricCanvasInstance) {
+        // if we have a canvas we need to clear all the old templates
+        fabricCanvasInstance.clear();
+        fabricCanvasInstance.setBackgroundColor(
+          '#ffffff',
+          () => fabricCanvasInstance?.renderAll()
+        );
+      } else if (canvasRef.current) {
+        fabricCanvasInstance = new fabric.Canvas(canvasRef.current, {
+          width: canvasWidth,
+          height: canvasHeight,
+          backgroundColor: '#ffffff',
+          preserveObjectStacking: true
+        });
+
+        // Update state immediately to ensure it's available for event handlers
+        setCanvas(fabricCanvasInstance);
+      } else {
+        console.error('No canvas ref available');
+        setIsCanvasLoading(false);
+        return;
+      }
+
+      if (templateToLoad && templateToLoad.id) {
+        const templateData = newDraftTemplates.find(
+          dt => dt.template.id === (templateToLoad as any).id);
+
+        // Render the template onto the canvas
+        await renderEditorOrPreview(
+          fabricCanvasInstance,
+          templateData?.template || {},
+          templateData?.variationObjects || [],
+          savedObjects,
+          canvasHeight,
+          canvasWidth,
+        );
+
+        if (fabricCanvasInstance.getElement() && fabricCanvasInstance.getElement().parentNode) {
+          drawGrid(fabricCanvasInstance, canvasWidth, canvasHeight, 20, '#a0a0a0', showGrid);
+        }
+
+        setIsCanvasLoading(false);
+      } else {
+        setIsCanvasLoading(false);
+      }
+    }, 500);
+  }, [
+    groupIndex,
+    draftTemplates,
+    canvasRef,
+    showGrid,
+    canvasWidth,
+    canvasHeight,
+    savedObjects,
+    canvas,
+    selectedTemplate,
+    recordVariationFieldObjectsOnCanvas,
+    setSelectedTemplate
+  ]);
+
+  // Set up the debounced watch subscription
+  useEffect(() => {
+    if (!hookForm) return;
+
+    // Subscribe to form changes
+    const subscription = hookForm.watch((value: any) => {
+      debouncedWatch({
+        variationsGroups: value.variationsGroups,
+        variations: value.variations,
+      });
+    });
+
+    // Clean up subscription
+    return () => subscription.unsubscribe();
+  }, [hookForm, debouncedWatch]);
+
+  // This effect is used to trigger the debounced watch when the selected template is not set
+  // This helps with things like add group.
+  useEffect(() => {
+    if (!selectedTemplate) {
+      debouncedWatch({
+        variationsGroups: job.variationsGroups,
+        variations: job.variations,
+      });
+    }
+  }, [groupIndex]);
+
+
+  const [loadingPreviews, setLoadingPreviews] = useState(false);
+  const [renderedDraftPreviews, setRenderedDraftPreviews] = useState<RenderedDraftPreview[]>([]);
+
+  // Extract event handler setup to a separate function to avoid recreating in debounced watch
+  const setupEventHandlers = (fabricCanvasInstance: fabric.Canvas, selectedTemplate: number | null) => {
+    if (!fabricCanvasInstance) return () => { };
+
+    // Add a flag to prevent recursive calls
+    let isRendering = false;
+
+    // Define the record changes function with canvas and template closure
+    const recordChanges = () => {
+      // Use the passed instance and template ID instead of state variables
+      if (fabricCanvasInstance) {
+        const objects = fabricCanvasInstance.getObjects();
+
+        const updatedSavedObjects: SavedCanvasObject[] = [];
+        let hasChanges = false;
+
+        objects.forEach((obj: any) => {
+          const { fieldId } = obj;
+          if (fieldId) {
+            const updatedObject = {
+              ...obj,
+            };
+
+            if (obj instanceof fabric.Image) {
+              Object.assign(updatedObject, {
+                width: obj.width,
+                height: obj.height,
+                src: obj.getSrc(),
+              });
+            }
+
+            updatedSavedObjects.push(updatedObject);
+            hasChanges = true;
+          }
+        });
+
+        if (hasChanges) {
+          setSavedObjects(updatedSavedObjects);
+        }
+      } else {
+        console.warn('Cannot record changes - missing canvas or templateId');
+      }
+    };
+
+    // Create a bound version for event handling
+    const boundRecordChanges = createEventHandler(recordChanges);
+
+    // Add Text Toolbar Event Listener
+    const handleSelection = (e: fabric.IEvent) => {
+      const activeObject = fabricCanvasInstance.getActiveObject();
+      // Check if the active object is an IText instance
+
+      // Ensure the selected object has an ID
+      if (activeObject && !(activeObject as any).id) {
+        (activeObject as any).id = uuidv4();
+      }
+      setSelectedObjectId((activeObject as any)?.id || null);
+
+      if (activeObject instanceof fabric.IText) {
+        setSelectedTextObject(activeObject);
+      } else {
+        setSelectedTextObject(null);
+      }
+    };
+
+    const handleSelectionCleared = (e: fabric.IEvent) => {
+      setSelectedObjectId(null); // Clear selection in context
+      setSelectedTextObject(null);
+    };
+
+    const updateRenderedDraftPreviews = async () => {
+      const templateId = selectedTemplate;
+      const renderedImage = await renderClippedImage(fabricCanvasInstance, { format: 'png' });
+      const fullCanvasImage = await renderCanvasWithoutGrid(fabricCanvasInstance, { format: 'png' });
+      const activeTemplateIds = draftTemplates.map(dt => dt.template.id);
+
+      if (renderedImage && templateId) {
+        const previews = [...renderedDraftPreviews.filter(rdp => activeTemplateIds.includes(rdp.templateId))];
+        const existingPreviewIndex = previews.findIndex(preview => preview.templateId === templateId);
+        if (existingPreviewIndex !== -1) {
+          // Update existing preview
+          previews[existingPreviewIndex] = {
+            templateId,
+            draft: renderedImage,
+            canvasPreview: fullCanvasImage || '',
+          };
+        } else {
+          // Add new preview
+          previews.push({
+            templateId,
+            draft: renderedImage,
+            canvasPreview: fullCanvasImage || '',
+          });
+        }
+
+        // Save the rendered draft previews and previews to local storage
+        const productDraftTemplate = localStorage.getItem(`productDraftTemplate-${product.id}`);
+        const storedData = productDraftTemplate ? JSON.parse(productDraftTemplate) : [];
+        storedData[groupIndex] = {
+          groupIndex,
+          productId: product.id,
+          templateData: [...previews],
+          previews: [...previews],
+        }
+        localStorage.setItem(`productDraftTemplate-${product.id}`, JSON.stringify(storedData));
+        setRenderedDraftPreviews(previews);
+
+        setLoadingPreviews(false);
+      }
+    };
+
+    // Add after:render event listener to call renderClippedImage
+    const handleAfterRender = async () => {
+      // Prevent recursive calls
+      if (isRendering) return;
+
+      try {
+        isRendering = true;
+        setLoadingPreviews(true);
+        await updateRenderedDraftPreviews();
+      } catch (error) {
+        console.error('Error rendering clipped image after render:', error);
+      } finally {
+        isRendering = false;
+      }
+    };
+
+    // Add unique ID to objects if they don't have one
+    const ensureObjectIds = (canvasInstance: fabric.Canvas) => {
+      canvasInstance.getObjects().forEach(obj => {
+        if (!(obj as any).id) {
+          (obj as any).id = uuidv4();
+        }
+      });
+    };
+    // Ensure initial objects have IDs
+    if (fabricCanvasInstance) {
+      ensureObjectIds(fabricCanvasInstance);
+    }
+
+    // Attach listeners
+    fabricCanvasInstance?.on('selection:created', handleSelection);
+    fabricCanvasInstance?.on('selection:updated', handleSelection);
+    fabricCanvasInstance?.on('selection:cleared', handleSelectionCleared);
+    // Also update IDs when new objects are added
+    fabricCanvasInstance?.on('object:added', (e) => {
+      if (e.target && !(e.target as any).id) {
+        (e.target as any).id = uuidv4();
+      }
+    });
+
+    // setup keyboard events
+    const cleanupKeyboardEvents = setupKeyboardEvents(fabricCanvasInstance, () => {
+      if (document.activeElement === fabricCanvasInstance.upperCanvasEl) {
+        onSave && onSave();
+      }
+    });
+
+    fabricCanvasInstance.on('selection:created', handleSelection);
+    fabricCanvasInstance.on('selection:updated', handleSelection);
+    fabricCanvasInstance.on('selection:cleared', handleSelectionCleared);
+    fabricCanvasInstance.on('after:render', handleAfterRender);
+
+    // Add event listeners for object modifications
+    fabricCanvasInstance.on('object:modified', boundRecordChanges);
+    fabricCanvasInstance.on('object:moved', boundRecordChanges);
+    fabricCanvasInstance.on('object:scaled', boundRecordChanges);
+    fabricCanvasInstance.on('object:rotated', boundRecordChanges);
+    fabricCanvasInstance.on('text:changed', boundRecordChanges);
+
+    // Add handlers for more specific events that might be triggered by color changes
+    fabricCanvasInstance.on('object:changed', boundRecordChanges);
+    fabricCanvasInstance.on('canvas:updated', boundRecordChanges);
+
+    // Return cleanup function
+    return () => {
+      fabricCanvasInstance.off('selection:created', handleSelection);
+      fabricCanvasInstance.off('selection:updated', handleSelection);
+      fabricCanvasInstance.off('selection:cleared', handleSelectionCleared);
+      fabricCanvasInstance.off('after:render', handleAfterRender);
+
+      fabricCanvasInstance.off('object:modified', boundRecordChanges);
+      fabricCanvasInstance.off('object:moved', boundRecordChanges);
+      fabricCanvasInstance.off('object:scaled', boundRecordChanges);
+      fabricCanvasInstance.off('object:rotated', boundRecordChanges);
+      fabricCanvasInstance.off('text:changed', boundRecordChanges);
+      fabricCanvasInstance.off('object:changed', boundRecordChanges);
+      fabricCanvasInstance.off('canvas:updated', boundRecordChanges);
+
+      cleanupKeyboardEvents();
+    };
+  };
+
+  // Move setupEventHandlers call to a useEffect hook
+  useEffect(() => {
+    if (canvas) {
+      try {
+        if (canvas.getElement() && canvas.getElement().parentNode) {
+          drawGrid(canvas, canvasWidth, canvasHeight, 20, '#a0a0a0', showGrid);
+          canvas.renderAll();
+        }
+      } catch (error) {
+        console.error('Error drawing/clearing grid:', error);
+      }
+
+      // Setup event handlers
+      const cleanupEventHandlers = setupEventHandlers(canvas, selectedTemplate);
+      return () => {
+        cleanupEventHandlers();
+      };
+    }
+  }, [canvas, selectedTemplate, showGrid, canvasWidth, canvasHeight]);
+
+  const selectObject = (obj: fabric.Object | null) => {
+    if (canvas) {
+      if (obj) {
+        if (!(obj as any).id) {
+          (obj as any).id = uuidv4();
+        }
+        canvas.setActiveObject(obj);
+        setSelectedObjectId((obj as any).id);
+      } else {
+        canvas.discardActiveObject();
+        setSelectedObjectId(null);
+      }
+      canvas.requestRenderAll();
+    }
+  };
+
+  const deleteObject = useCallback((obj: fabric.Object) => {
+    if (!canvas || !obj) return;
+
+    try {
+      setIsCanvasLoading(true);
+
+      // remove the object from the canvas
+      canvas.remove(obj);
+      canvas.renderAll();
+
+      const fieldId = (obj as any)?.fieldId;
+      const fileId = (obj as any)?.fileId;
+
+      if (fieldId) {
+        const currentTemplateId = selectedTemplate;
+
+        // update draftTemplates
+        const updatedDraftTemplates = draftTemplates.map(dt => {
+          if (dt.template.id === currentTemplateId) {
+            return {
+              ...dt,
+              variationObjects: dt.variationObjects.filter((vo: any) => vo.fieldId !== fieldId)
+            };
+          }
+          return dt;
+        });
+        setDraftTemplates(updatedDraftTemplates);
+
+        // update the form state
+        if (hookForm) {
+          const hasVariationsGroups = 'variationsGroups' in hookForm.getValues();
+          const variationsField = hasVariationsGroups ?
+            `variationsGroups.${groupIndex}.variations` : 'variations';
+          const values = hookForm.getValues(variationsField) || [];
+
+          const updatedValues = values.map((variation: any) => {
+            if (variation?.variationField?.id === fieldId) {
+              // file type variation and has fileId
+              // only delete the specific file
+              if (variation.variationFiles?.length > 0 && fileId) {
+                const updatedFiles = variation.variationFiles.filter((file: any) => file.id !== fileId);
+                return {
+                  ...variation,
+                  value: updatedFiles.length === 0 ? null : variation.value,
+                  variationFiles: updatedFiles
+                };
+              }
+              // non file type or no fileId
+              // clear the whole field
+              else if (!fileId) {
+                return {
+                  ...variation,
+                  value: null,
+                  variationFiles: variation.variationFiles ? [] : undefined
+                };
+              }
+            }
+            return variation;
+          });
+
+          hookForm.setValue(variationsField, updatedValues);
+        }
+      }
+
+      // clear the selection state
+      setSelectedObjectId(null);
+      setSelectedTextObject(null);
+      setIsCanvasLoading(false);
+
+      onSave && onSave();
+    } catch (error) {
+      console.error('Error in deleteObject:', error);
+      setIsCanvasLoading(false);
+    }
+  }, [canvas, draftTemplates, selectedTemplate, hookForm, groupIndex, onSave]);
+
+  return (
+    <ProductEditorContext.Provider
+      value={{
+        // States
+        canvas,
+        draftPreviews,
+        draftTemplates,
+        isCanvasLoading,
+        isMobileView,
+        loadingPreviews,
+        renderedDraftPreviews,
+        savedObjects,
+        selectedTemplate,
+        selectedTextObject,
+        showGrid,
+        showPreview,
+
+        // State Setters
+        setCanvas,
+        setSelectedTemplate,
+        setShowGrid,
+
+        // Functions
+        handleCancel: () => onCancel(),
+        handleSave,
+        handleTemplateChange,
+        recordVariationFieldObjectsOnCanvas,
+        togglePreview,
+        updateSelectedText,
+        fontOptions,
+        colorPalette,
+        showLayerPanel,
+        toggleLayerPanel,
+        selectedObjectId,
+        setSelectedObjectId,
+        selectObject,
+        deleteObject,
+
+        // Props
+        canvasRef,
+        groupIndex,
+        height: canvasHeight,
+        inputName,
+        job,
+        product,
+        width: canvasWidth,
+        hookForm,
+      }}
+    >
+      {children}
+    </ProductEditorContext.Provider>
+  );
+};
+
+export const useProductEditor = () => {
+  const context = useContext(ProductEditorContext);
+  if (context === undefined) {
+    throw new Error('useProductEditor must be used within a ProductEditorProvider');
+  }
+  return context;
+};