customized-fabric 1.3.1 → 1.3.3

package/lib/ImagePlaceholderObject/constants.d.ts

@@ -7,3 +7,4 @@ export declare const IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES: {
         strokeWidth: number;
     };
 };
+export declare const IMAGE_FILTER_TYPES: any;

package/lib/ImagePlaceholderObject/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = void 0;
+exports.IMAGE_FILTER_TYPES = exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = void 0;
 exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
     name: "Image placeholder",
     type: "IMAGE_PLACEHOLDER",
@@ -10,3 +10,8 @@ exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
         strokeWidth: 2,
     },
 };
+exports.IMAGE_FILTER_TYPES = {
+    blendColor: "Blend color",
+    fullColor: "Full color",
+    grayscale: "Grayscale",
+};

package/lib/ImagePlaceholderObject/index.d.ts

@@ -1,5 +1,5 @@
 import { fabric } from "fabric";
-import { IImageOptions, IImagePlaceholderOptions } from "./interfaces";
+import { IImageOptions, IImagePlaceholderOptions, ImageFilterType } from "./interfaces";
 import { ObjectId } from "../utils/objectId";
 export declare const toImagePlaceholderObject: (imagePlaceholderObject: ImagePlaceholder) => {
     _id: ObjectId | undefined;
@@ -10,6 +10,8 @@ export declare const toImagePlaceholderObject: (imagePlaceholderObject: ImagePla
     locked: boolean | undefined;
     isAdditional: boolean | undefined;
     maskUrl: string | undefined;
+    imageType: string | undefined;
+    imageColor: string | undefined;
 };
 export default class ImagePlaceholder extends fabric.Group {
     _id?: ObjectId;
@@ -19,6 +21,8 @@ export default class ImagePlaceholder extends fabric.Group {
     maskFile?: File;
     maskUrl?: string;
     isAdditional?: boolean;
+    imageColor?: string;
+    imageType?: string;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;
@@ -31,5 +35,8 @@ export default class ImagePlaceholder extends fabric.Group {
     loadMask?: (maskInput: File | string) => void;
     removeMask?: () => void;
     loadCustomizedImage?: (image: IImageOptions) => Promise<void>;
+    setImageType?: (type: ImageFilterType) => void;
+    setImageColor?: (color: string) => void;
+    applyImageFilters?: (image: fabric.Image) => void;
     constructor(options?: IImagePlaceholderOptions);
 }

package/lib/ImagePlaceholderObject/index.js

@@ -30,6 +30,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             type: constants_1.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
             ...options,
             layerId: options?.personalizeId ?? options?.layerId,
+            imageType: "Full color",
             objectCaching: false,
         });
         if (options?.imageFile) {
@@ -43,6 +44,9 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 this.loadMask(options?.maskFile ?? options?.maskUrl);
             }
         }
+        if (options?.imageType) {
+            this.setImageType(options?.imageType, { color: options?.imageColor });
+        }
     },
     loadImage: async function (image) {
         const loadedImage = await (0, utils_1.loadImage)(image);
@@ -55,6 +59,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             this.imageObject = loadedImage;
             this.add(this.imageObject);
             this.fitImage(this.imageObject);
+            this.applyImageFilters(this.imageObject);
             this.canvas?.renderAll();
         }
     },
@@ -222,6 +227,22 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             }
         }
     },
+    setImageType: function (type, options) {
+        this.imageType = type;
+        this.imageFilters = (0, utils_1.getImageFilters)(type, options);
+        this.imageObject && this.applyImageFilters(this.imageObject);
+    },
+    setImageColor: function (color) {
+        this.imageColor = color;
+        this.imageFilters = (0, utils_1.getImageFilters)(this.imageType, { color });
+        this.imageObject && this.applyImageFilters(this.imageObject);
+    },
+    applyImageFilters: function (image) {
+        const imageFilters = this.imageFilters ?? [];
+        image.filters = imageFilters;
+        image.applyFilters();
+        this.canvas.renderAll();
+    },
 });
 const toImagePlaceholderObject = (imagePlaceholderObject) => {
     return {
@@ -233,6 +254,8 @@ const toImagePlaceholderObject = (imagePlaceholderObject) => {
         locked: imagePlaceholderObject?.locked,
         isAdditional: imagePlaceholderObject?.isAdditional,
         maskUrl: imagePlaceholderObject?.maskUrl,
+        imageType: imagePlaceholderObject?.imageType,
+        imageColor: imagePlaceholderObject?.imageColor,
     };
 };
 exports.toImagePlaceholderObject = toImagePlaceholderObject;

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -41,9 +41,12 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     personalizeId?: number;
     layerId: number;
     imageFile?: File;
+    imageType?: string;
+    imageColor?: string;
     isOriginal?: boolean;
     isAdditional?: boolean;
     image?: IImageOptions;
     maskUrl?: string;
     maskFile?: File;
 }
+export declare type ImageFilterType = "Full color" | "Grayscale" | "Blend color";

package/lib/index.d.ts

@@ -3,4 +3,5 @@ import Clipart from "./ClipartObject";
 import ImagePlaceholder from "./ImagePlaceholderObject";
 import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
 import { OBJECT_TYPES } from "./constants";
-export { fabric, TextInput, Clipart, ImagePlaceholder, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, };
+import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
+export { fabric, TextInput, Clipart, ImagePlaceholder, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };

package/lib/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
+exports.IMAGE_FILTER_TYPES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const ClipartObject_1 = __importDefault(require("./ClipartObject"));
@@ -43,3 +43,5 @@ Object.defineProperty(exports, "getObject", { enumerable: true, get: function ()
 Object.defineProperty(exports, "asyncGetObject", { enumerable: true, get: function () { return utils_1.asyncGetObject; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "OBJECT_TYPES", { enumerable: true, get: function () { return constants_1.OBJECT_TYPES; } });
+const constants_2 = require("./ImagePlaceholderObject/constants");
+Object.defineProperty(exports, "IMAGE_FILTER_TYPES", { enumerable: true, get: function () { return constants_2.IMAGE_FILTER_TYPES; } });

package/lib/utils/index.d.ts

@@ -2,11 +2,15 @@ import { fabric } from "fabric";
 import Clipart from "../ClipartObject";
 import ImagePlaceholder from "../ImagePlaceholderObject";
 import TextInput from "../TextInputObject";
+import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
 export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
 export declare const loadImageFromUrl: (url: string) => Promise<fabric.Image>;
 export declare const loadImage: (imageInput: File | string) => Promise<fabric.Image>;
+export declare const getImageFilters: (type: ImageFilterType, options?: {
+    color?: string;
+}) => fabric.IGrayscaleFilter[];
 export declare const lockObject: (object: fabric.Object | any, locked: boolean, selectable?: boolean) => void;
 export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, selectable?: boolean) => void;
 export declare const getObject: (object: any, options?: {

package/lib/utils/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.asyncGetObject = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+exports.asyncGetObject = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.getImageFilters = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
 const fabric_1 = require("fabric");
 const constants_1 = require("../constants");
 const ClipartObject_1 = __importStar(require("../ClipartObject"));
@@ -86,6 +86,22 @@ const loadImage = async (imageInput) => {
     return loadedImage;
 };
 exports.loadImage = loadImage;
+const getImageFilters = (type, options = {}) => {
+    const filters = fabric_1.fabric.Image.filters;
+    const { color = "#ffffff" } = options;
+    switch (type) {
+        case "Blend color": {
+            return [new filters.BlendColor({ color })];
+        }
+        case "Full color": {
+            return [];
+        }
+        case "Grayscale": {
+            return [new filters.Grayscale()];
+        }
+    }
+};
+exports.getImageFilters = getImageFilters;
 const lockObject = (object, locked, selectable) => {
     object.set({
         hasControls: !locked,
@@ -123,6 +139,9 @@ const getObject = (object, options) => {
                 ...object,
                 isOriginal: options?.isOriginal,
             });
+            if (object?.clipartUrl) {
+                clipartObject?.loadImage?.(object?.clipartUrl);
+            }
             return clipartObject;
         }
         case constants_1.OBJECT_TYPES.imagePlaceHolder: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",