merchi_product_editor
Version:
A React component for editing product images using Fabric.js
61 lines (60 loc) • 2.21 kB
TypeScript
import React from 'react';
import { fabric } from 'fabric';
import { Product, Job, DraftTemplate, DraftTemplateData, DraftPreview, SavedCanvasObject, RenderedDraftPreview } from '../types';
import { FontOption } from '../config/fontConfig';
import { UseFormReturn } from 'react-hook-form';
interface ProductEditorContextType {
canvas: fabric.Canvas | null;
draftPreviews: DraftPreview[];
draftTemplates: DraftTemplateData[];
isCanvasLoading: boolean;
isMobileView: boolean;
loadingPreviews: boolean;
renderedDraftPreviews: RenderedDraftPreview[];
savedObjects: SavedCanvasObject[];
selectedTemplate: number | null;
selectedTextObject: fabric.IText | null;
showGrid: boolean;
showPreview: boolean;
setCanvas: (canvas: fabric.Canvas) => void;
setSelectedTemplate: (templateId: number) => void;
setShowGrid: (show: boolean) => void;
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;
canvasRef: React.RefObject<HTMLCanvasElement>;
groupIndex: number;
height: number;
inputName: string;
job: Job;
product: Product;
width: number;
hookForm: UseFormReturn<any> | null;
}
interface ProductEditorProviderProps {
children: React.ReactNode;
groupIndex?: number;
product: Product;
width?: number;
height?: number;
job: Job;
onSave: () => void;
onCancel: () => void;
hookForm?: UseFormReturn<any> | null;
fontOptions?: FontOption[];
colorPalette?: (string | null)[][];
}
export declare const ProductEditorProvider: React.FC<ProductEditorProviderProps>;
export declare const useProductEditor: () => ProductEditorContextType;
export {};