customized-fabric 2.0.8 → 2.0.10

package/lib/ImagePlaceholderObject/index.d.ts

@@ -50,7 +50,7 @@ export default class ImagePlaceholder extends fabric.Group {
     removeUploadedImage?: () => void;
     loadMask?: (maskInput: File | string) => void;
     removeMask?: () => void;
-    loadCustomizedImage?: (image: IImageOptions) => Promise<void>;
+    loadCustomImage?: (image: IImageOptions) => Promise<void>;
     setImageType?: (type: ImageFilterType) => void;
     setImageColor?: (color: string) => void;
     applyImageFilters?: (image: fabric.Image | undefined) => void;

package/lib/ImagePlaceholderObject/index.js

@@ -153,17 +153,23 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
     },
     toImageObject: function () {
         if (this.uploadedImage) {
-            const { originX, originY, left = 0, top = 0, width, height, scaleX, scaleY, angle = 0, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
+            const { originX, originY, left = 0, top = 0, width = 0, height = 0, scaleX = 0, scaleY = 0, angle = 0, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
+            const { relativeLeft, relativeTop } = (0, utils_1.getRelativePosition)(this.uploadedImage, this);
             return {
+                relativeLeftRatio: relativeLeft / this.width,
+                relativeTopRatio: relativeTop / this.height,
+                relativeScaleX: (width * scaleX) / this.width,
+                relativeScaleY: (height * scaleY) / this.height,
+                relativeAngle: angle - this.angle,
                 originX,
                 originY,
-                left: left - this.left,
-                top: top - this.top,
+                left,
+                top,
                 width,
                 height,
                 scaleX,
                 scaleY,
-                angle: angle - this.angle,
+                angle,
                 flipX,
                 flipY,
                 skewX,
@@ -174,6 +180,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                     color: this?.imageColor,
                     removeBackground: this?.removeBackground,
                     faceCutout: this?.faceCutout,
+                    advancedFilter: this?.advancedFilter,
                 },
             };
         }
@@ -242,23 +249,23 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             return mask;
         }
     },
-    loadCustomizedImage: async function (image) {
+    loadCustomImage: async function (image) {
         if (image) {
-            const { url, filteredUrl, data, clipPath } = image;
+            const { url, filteredUrl, data } = image;
             const imageUrl = filteredUrl ?? url;
-            if (imageUrl && data && clipPath) {
+            if (imageUrl && data) {
                 const loadedImage = await (0, utils_1.loadImageFromUrl)(imageUrl);
                 if (loadedImage) {
                     const mask = await this.getMask();
-                    const { top, left, scaleX, width, angle, flipX, flipY, settings = {}, } = data;
+                    const { relativeLeftRatio, relativeTopRatio, relativeScaleX, relativeScaleY, relativeAngle, width, height, flipX, flipY, settings = {}, } = data;
                     const { color, type } = settings;
-                    const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
-                    const ratioPosition = this.width / clipPath.width;
-                    loadedImage.scaleToWidth(ratioWidth * this.width);
+                    const { absoluteLeft, absoluteRight } = (0, utils_1.getAbsolutePosition)(relativeLeftRatio, relativeTopRatio, this);
                     loadedImage.set({
-                        top: this.top + ratioPosition * top,
-                        left: this.left + ratioPosition * left,
-                        angle: this.angle + angle,
+                        left: absoluteLeft,
+                        top: absoluteRight,
+                        scaleX: (relativeScaleX * this.width) / width,
+                        scaleY: (relativeScaleY * this.height) / height,
+                        angle: this.angle + relativeAngle,
                         originX: "center",
                         originY: "center",
                         flipX,

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -22,6 +22,11 @@ export interface IImageOptions {
     data: {
         originX: string;
         originY: string;
+        relativeLeftRatio: number;
+        relativeTopRatio: number;
+        relativeScaleX: number;
+        relativeScaleY: number;
+        relativeAngle: number;
         left: number;
         top: number;
         width: number;
@@ -39,7 +44,6 @@ export interface IImageOptions {
             type?: ImageFilterType;
         };
     };
-    clipPath: IClipPathOptions;
 }
 export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     _id?: ObjectId;

package/lib/index.d.ts

@@ -5,8 +5,8 @@ import ImagePlaceholder from "./ImagePlaceholderObject";
 import LayoutGroup from "./LayoutGroupObject";
 import Calendar from "./CalendarObject";
 import QRCode from "./QRCodeObject";
-import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
 import { OBJECT_TYPES } from "./constants";
 import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
 import { IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES } from "./ImagePlaceholderObject/constants";
-export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, QRCode, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES, IMAGE_FILTER_TYPES, };
+export * from "./utils";
+export { TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, QRCode, OBJECT_TYPES, IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES, IMAGE_FILTER_TYPES, };

package/lib/index.js

@@ -10,23 +10,14 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_FILTER_TYPES = exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.QRCode = exports.Calendar = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
+exports.IMAGE_FILTER_TYPES = exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = exports.OBJECT_TYPES = exports.QRCode = exports.Calendar = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = void 0;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
@@ -41,17 +32,10 @@ const CalendarObject_1 = __importDefault(require("./CalendarObject"));
 exports.Calendar = CalendarObject_1.default;
 const QRCodeObject_1 = __importDefault(require("./QRCodeObject"));
 exports.QRCode = QRCodeObject_1.default;
-const utils_1 = __importStar(require("./utils"));
-exports.fabric = utils_1.default;
-Object.defineProperty(exports, "lockObject", { enumerable: true, get: function () { return utils_1.lockObject; } });
-Object.defineProperty(exports, "lockAllObjects", { enumerable: true, get: function () { return utils_1.lockAllObjects; } });
-Object.defineProperty(exports, "loadImageFromFile", { enumerable: true, get: function () { return utils_1.loadImageFromFile; } });
-Object.defineProperty(exports, "loadImageFromUrl", { enumerable: true, get: function () { return utils_1.loadImageFromUrl; } });
-Object.defineProperty(exports, "getObject", { enumerable: true, get: function () { return utils_1.getObject; } });
-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; } });
 const constants_3 = require("./ImagePlaceholderObject/constants");
 Object.defineProperty(exports, "IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES", { enumerable: true, get: function () { return constants_3.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES; } });
+__exportStar(require("./utils"), exports);

package/lib/utils/common.util.d.ts

@@ -1 +1,10 @@
+import { fabric } from "fabric";
 export declare const removeValueKeys: (object: any, value?: any) => any;
+export declare const getRelativePosition: (relativeObject: fabric.Object, objectToRelate: fabric.Object) => {
+    relativeLeft: number;
+    relativeTop: number;
+};
+export declare const getAbsolutePosition: (relativeLeftRatio: number, relativeTopRatio: number, objectToApply: any) => {
+    absoluteLeft: number;
+    absoluteRight: any;
+};

package/lib/utils/common.util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeValueKeys = void 0;
+exports.getAbsolutePosition = exports.getRelativePosition = exports.removeValueKeys = void 0;
+const fabric_1 = require("fabric");
 const removeValueKeys = (object, value = null) => {
     const newObject = {};
     for (const key in object) {
@@ -11,3 +12,29 @@ const removeValueKeys = (object, value = null) => {
     return newObject;
 };
 exports.removeValueKeys = removeValueKeys;
+const getRelativePosition = (relativeObject, objectToRelate) => {
+    const rLeft = relativeObject.left || 0;
+    const rTop = relativeObject.top || 0;
+    const oLeft = objectToRelate.left || 0;
+    const oTop = objectToRelate.top || 0;
+    const oAngle = fabric_1.fabric.util.degreesToRadians(objectToRelate.angle || 0);
+    const relativeLeft = Math.cos(-oAngle) * (rLeft - oLeft) - Math.sin(-oAngle) * (rTop - oTop);
+    const relativeTop = Math.sin(-oAngle) * (rLeft - oLeft) + Math.cos(-oAngle) * (rTop - oTop);
+    return { relativeLeft, relativeTop };
+};
+exports.getRelativePosition = getRelativePosition;
+const getAbsolutePosition = (relativeLeftRatio, relativeTopRatio, objectToApply) => {
+    const targetX = objectToApply.left;
+    const targetY = objectToApply.top;
+    const targetAngle = fabric_1.fabric.util.degreesToRadians(objectToApply.angle);
+    const targetWidth = objectToApply.width;
+    const targetHeight = objectToApply.height;
+    const absoluteLeft = targetX +
+        Math.cos(targetAngle) * (relativeLeftRatio * targetWidth) -
+        Math.sin(targetAngle) * (relativeTopRatio * targetHeight);
+    const absoluteRight = targetY +
+        Math.sin(targetAngle) * (relativeLeftRatio * targetWidth) +
+        Math.cos(targetAngle) * (relativeTopRatio * targetHeight);
+    return { absoluteLeft, absoluteRight };
+};
+exports.getAbsolutePosition = getAbsolutePosition;

package/lib/utils/index.d.ts

@@ -24,4 +24,5 @@ export declare const getObject: (object: any, options?: {
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
 }) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined>;
-export default fabric;
+export { fabric };
+export * from "./common.util";

package/lib/utils/index.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.asyncGetObject = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.getImageFilters = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+exports.fabric = 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");
+Object.defineProperty(exports, "fabric", { enumerable: true, get: function () { return fabric_1.fabric; } });
 const constants_1 = require("../constants");
 const ClipartObject_1 = __importStar(require("../ClipartObject"));
 const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject"));
@@ -204,7 +208,7 @@ const asyncGetObject = async (object, options) => {
                 isOriginal: options?.isOriginal,
             });
             if (object?.image) {
-                const image = await imagePlaceHolderObject?.loadCustomizedImage?.(object?.image);
+                const image = await imagePlaceHolderObject?.loadCustomImage?.(object?.image);
                 if (image) {
                     return image;
                 }
@@ -272,4 +276,4 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
         }
     };
 })(fabric_1.fabric.Object.prototype.toObject);
-exports.default = fabric_1.fabric;
+__exportStar(require("./common.util"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -22,4 +22,4 @@
     "@types/fabric": "^5.3.3",
     "typescript": "^5.2.2"
   }
-}
+}