@merchi/product-editor 0.1.9

package/dist/types.d.ts

@@ -0,0 +1,228 @@
+export declare enum FieldType {
+    TEXT_INPUT = 1,
+    SELECT = 2,
+    FILE_UPLOAD = 3,
+    TEXT_AREA = 4,
+    NUMBER_INPUT = 5,
+    CHECKBOX = 6,
+    RADIO = 7,
+    FIELD_INSTRUCTIONS = 8,
+    IMAGE_SELECT = 9,
+    COLOUR_PICKER = 10,
+    COLOUR_SELECT = 11
+}
+export interface Draft {
+    id?: number;
+}
+export interface MerchiFile {
+    id?: number;
+    uploadId?: string;
+    name?: string | null;
+    mimetype?: string | null;
+    size?: number;
+    creationDate?: Date | null;
+    cachedViewUrl?: string | null;
+    viewUrlExpires?: Date | null;
+    cachedDownloadUrl?: string | null;
+    downloadUrlExpires?: Date | null;
+    viewUrl: string;
+    downloadUrl?: string;
+    thumbnailUrl?: string;
+    previewUrl?: string;
+}
+export interface DraftTemplate {
+    id?: number;
+    name?: string;
+    description?: string;
+    width?: number;
+    height?: number;
+    file?: MerchiFile;
+    product?: Product | null;
+    editedByVariationFields?: VariationField[];
+    selectedByVariationFieldOptions?: VariationFieldsOption[];
+    draftPreviewLayers?: DraftPreviewLayer[];
+}
+export interface DraftPreview {
+    id?: number;
+    file?: MerchiFile;
+    product?: Product;
+    description?: string | null;
+    name?: string | null;
+    date?: Date | null;
+    height?: number;
+    width?: number;
+    draftPreviewLayers?: DraftPreviewLayer[];
+}
+export interface DraftPreviewLayer {
+    id?: number;
+    layerName?: string;
+    draftPreview?: DraftPreview;
+    draftTemplate?: DraftTemplate;
+}
+export interface VariationFieldsOption {
+    id?: number;
+    archived?: Date | null;
+    value?: string | null;
+    colour?: string | null;
+    currency?: string;
+    default?: boolean;
+    include?: boolean;
+    noInventory?: boolean;
+    position?: number;
+    variationCost?: number;
+    variationUnitCost?: number;
+    buyUnitCost?: number;
+    buyCost?: number;
+    variationField?: VariationField | null;
+    linkedFile?: MerchiFile | null;
+    selectedByVariations?: Variation[];
+}
+export interface VariationField {
+    id?: number;
+    archived?: Date | null;
+    position?: number;
+    required?: boolean;
+    independent?: boolean;
+    name?: string;
+    instructions?: string;
+    placeholder?: string | null;
+    defaultValue?: string;
+    currency?: string;
+    fieldType?: FieldType;
+    margin?: number;
+    variationCost?: number;
+    variationUnitCost?: number;
+    buyUnitCost?: number;
+    buyCost?: number;
+    rows?: number;
+    fieldMin?: number | null;
+    fieldMax?: number | null;
+    allowDecimal?: boolean;
+    sellerProductEditable?: boolean;
+    multipleSelect?: boolean;
+    showFilePreview?: boolean;
+    allowFileMultiple?: boolean;
+    allowFileJpeg?: boolean;
+    allowFileGif?: boolean;
+    allowFilePdf?: boolean;
+    allowFilePng?: boolean;
+    allowFileAi?: boolean;
+    product?: Product;
+    variations?: Variation[];
+    options?: VariationFieldsOption[];
+}
+export interface VariationOption {
+    optionId?: number;
+    value?: string | null;
+    colour?: string | null;
+    position?: number;
+    available?: boolean;
+    default?: boolean;
+    include?: boolean;
+    linkedFile?: MerchiFile | null;
+    fieldName?: string;
+    quantity?: number;
+    currency?: string;
+    onceOffCost?: number;
+    unitCost?: number;
+    unitCostTotal?: number;
+    totalCost?: number;
+}
+export interface Variation {
+    id?: number;
+    archived?: Date | null;
+    value?: string | null;
+    currency?: string;
+    cost?: number;
+    quantity?: number;
+    onceOffCost?: number;
+    unitCost?: number;
+    unitCostTotal?: number;
+    variationField?: VariationField;
+    variationsGroup?: VariationsGroup | null;
+    job?: Job | null;
+    variationFiles?: MerchiFile[];
+    selectedOptions?: VariationOption[];
+    selectableOptions?: VariationOption[];
+}
+export interface VariationsGroup {
+    id?: number;
+    archived?: Date | null;
+    quantity?: number;
+    groupCost?: number | null;
+    job?: Job | null;
+    variations?: Variation[];
+    inventoryCount?: number;
+    inventorySufficient?: boolean;
+}
+export interface Product {
+    id?: number;
+    name?: string;
+    description?: string | null;
+    draftTemplates?: DraftTemplate[];
+    draftPreviews?: DraftPreview[];
+    featureImage?: MerchiFile;
+    groupVariationFields?: VariationField[];
+    independentVariationFields?: VariationField[];
+    images?: MerchiFile[];
+}
+export interface Job {
+    id?: number;
+    quantity?: number;
+    currency?: string;
+    jobInfoApprovedByClient?: boolean;
+    costPerUnit?: number | null;
+    cost?: number | null;
+    taxAmount?: number | null;
+    totalCost?: number | null;
+    drafts?: Draft[];
+    sharedDrafts?: Draft[];
+    ownDrafts?: Draft[];
+    product?: Product;
+    variationsGroups?: VariationsGroup[];
+    variations?: Variation[];
+}
+export interface ProductEditorProps {
+    product: Product;
+    width?: number;
+    height?: number;
+    onSave?: (editedImage: string) => void;
+    onCancel?: () => void;
+    psdTemplateUrl?: string;
+}
+export interface SavedCanvasObject {
+    fieldId: string;
+    fileId?: string;
+    uniqueId?: string;
+    type: string;
+    left: number;
+    top: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    text?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fill?: string;
+    width?: number;
+    height?: number;
+    src?: string;
+    [key: string]: any;
+}
+export interface DraftTemplateData {
+    template: DraftTemplate;
+    variationFieldIds: number[];
+    variationObjects: any[];
+}
+export interface RenderedDraftPreview {
+    templateId: number;
+    draft: string;
+    canvasPreview: string;
+}
+export interface MappedPreview {
+    draftPreview: DraftPreview;
+    draftPreviewLayers: {
+        layerName: string | undefined;
+        renderedLayer: RenderedDraftPreview | null;
+    }[];
+}

package/dist/types.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldType = void 0;
+var FieldType;
+(function (FieldType) {
+    FieldType[FieldType["TEXT_INPUT"] = 1] = "TEXT_INPUT";
+    FieldType[FieldType["SELECT"] = 2] = "SELECT";
+    FieldType[FieldType["FILE_UPLOAD"] = 3] = "FILE_UPLOAD";
+    FieldType[FieldType["TEXT_AREA"] = 4] = "TEXT_AREA";
+    FieldType[FieldType["NUMBER_INPUT"] = 5] = "NUMBER_INPUT";
+    FieldType[FieldType["CHECKBOX"] = 6] = "CHECKBOX";
+    FieldType[FieldType["RADIO"] = 7] = "RADIO";
+    FieldType[FieldType["FIELD_INSTRUCTIONS"] = 8] = "FIELD_INSTRUCTIONS";
+    FieldType[FieldType["IMAGE_SELECT"] = 9] = "IMAGE_SELECT";
+    FieldType[FieldType["COLOUR_PICKER"] = 10] = "COLOUR_PICKER";
+    FieldType[FieldType["COLOUR_SELECT"] = 11] = "COLOUR_SELECT";
+})(FieldType = exports.FieldType || (exports.FieldType = {}));

package/dist/utils/canvasAddText.d.ts

@@ -0,0 +1,11 @@
+import { fabric } from 'fabric';
+/**
+ * Adds an editable text object to the canvas
+ * @param canvas - The Fabric.js canvas instance
+ * @param width - The width of the canvas
+ * @param height - The height of the canvas
+ * @param defaultText - Optional default text (defaults to "Text")
+ * @param fontSize - Optional font size (defaults to 24)
+ * @param fontFamily - Optional font family (defaults to Arial)
+ */
+export declare const addText: (canvas: fabric.Canvas, width: number, height: number, defaultText?: string, fontSize?: number, fontFamily?: string) => fabric.IText | null;

package/dist/utils/canvasAddText.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addText = void 0;
+// add text to the canvas
+var fabric_1 = require("fabric");
+/**
+ * Adds an editable text object to the canvas
+ * @param canvas - The Fabric.js canvas instance
+ * @param width - The width of the canvas
+ * @param height - The height of the canvas
+ * @param defaultText - Optional default text (defaults to "Text")
+ * @param fontSize - Optional font size (defaults to 24)
+ * @param fontFamily - Optional font family (defaults to Arial)
+ */
+var addText = function (canvas, width, height, defaultText, fontSize, fontFamily) {
+    if (defaultText === void 0) { defaultText = 'Text'; }
+    if (fontSize === void 0) { fontSize = 24; }
+    if (fontFamily === void 0) { fontFamily = 'Nunito'; }
+    if (!canvas)
+        return null;
+    try {
+        // Safe check if canvas is still valid
+        if (!canvas.getElement() || !canvas.getElement().parentNode) {
+            return null;
+        }
+        // Create a new text object with minimal options
+        var text_1 = new fabric_1.fabric.IText(defaultText, {
+            left: width / 2,
+            top: height / 2,
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            fill: '#000000',
+            originX: 'center',
+            originY: 'center',
+            selectable: true,
+            editable: false
+        });
+        // Add the text to the canvas
+        canvas.add(text_1);
+        // Ensure the text is rendered
+        canvas.renderAll();
+        // Make the text active - this is critical
+        var setActiveTextObject = function () {
+            try {
+                // Check if canvas is still valid
+                if (canvas && canvas.getElement() && canvas.getElement().parentNode) {
+                    canvas.setActiveObject(text_1);
+                    canvas.renderAll();
+                }
+            }
+            catch (err) {
+                console.error('Error setting active text object:', err);
+            }
+        };
+        // Initial selection
+        setActiveTextObject();
+        // Delayed selection to ensure text becomes active
+        setTimeout(setActiveTextObject, 50);
+        return text_1;
+    }
+    catch (error) {
+        console.error('Error adding text to canvas:', error);
+        return null;
+    }
+};
+exports.addText = addText;

package/dist/utils/canvasUtils.d.ts

@@ -0,0 +1,37 @@
+import { fabric } from 'fabric';
+/**
+ * Adds an editable text object to the canvas
+ * @param canvas - The Fabric.js canvas instance
+ * @param width - The width of the canvas
+ * @param height - The height of the canvas
+ * @param defaultText - Optional default text (defaults to "Text")
+ * @param fontSize - Optional font size (defaults to 24)
+ * @param fontFamily - Optional font family (defaults to Arial)
+ */
+export declare const addTextToCanvas: (canvas: fabric.Canvas, width: number, height: number, defaultText?: string, fontSize?: number, fontFamily?: string) => fabric.IText | null;
+/**
+ * Renders the entire canvas as an image without displaying grid elements
+ *
+ * @param canvas - The Fabric.js canvas instance
+ * @param options - Optional rendering options
+ * @returns A promise that resolves to the dataURL of the canvas without grid
+ */
+export declare const renderCanvasWithoutGrid: (canvas: fabric.Canvas, options?: {
+    format?: string;
+    quality?: number;
+    multiplier?: number;
+    backgroundColor?: string | null;
+}) => Promise<string | null>;
+/**
+ * Renders an image containing only what's visible inside a clipPath on the canvas
+ *
+ * @param canvas - The Fabric.js canvas instance
+ * @param options - Optional rendering options
+ * @returns A promise that resolves to the dataURL of the contents inside the clipPath, or null if no clipped object is found
+ */
+export declare const renderClippedImage: (canvas: fabric.Canvas, options?: {
+    format?: string;
+    quality?: number;
+    multiplier?: number;
+    backgroundColor?: string;
+}) => Promise<string | null>;