customized-fabric 1.1.3 → 1.1.5

package/lib/ImagePlaceholderObject/index.d.ts

@@ -17,10 +17,12 @@ export default class ImagePlaceholder extends fabric.Group {
     isAdditional?: boolean;
     loadImageFromFile?: (imageFile: File) => void;
     loadImageFromUrl?: (imageUrl: string) => void;
+    loadUploadedImage?: (imageFile: File) => Promise<fabric.Image>;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;
         height?: number;
     }) => void;
+    toImageObject?: () => void;
     constructor(options?: IImagePlaceholderOptions);
 }

package/lib/ImagePlaceholderObject/index.js

@@ -97,28 +97,59 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
     getSettings: function (attribute) {
         return this.get(attribute);
     },
-    loadUploadedImage: function (imageFile) {
-        (0, utils_1.loadImageFromFile)(imageFile).then((loadedImage) => {
-            const clipPath = new fabric_1.fabric.Rect({
-                width: this.width,
-                height: this.height,
-                top: this.top,
-                left: this.left,
-                absolutePositioned: true,
-            });
-            loadedImage.set({ top: this.top, left: this.left, clipPath: clipPath });
-            this.fitImage(loadedImage);
-            this.uploadedImage = loadedImage;
-            const canvas = this?.canvas;
-            canvas?.add(this.uploadedImage);
-            canvas?.renderAll();
+    loadUploadedImage: async function (imageFile) {
+        const loadedImage = await (0, utils_1.loadImageFromFile)(imageFile);
+        const clipPath = new fabric_1.fabric.Rect({
+            width: this.width,
+            height: this.height,
+            top: this.top,
+            left: this.left,
+            absolutePositioned: true,
+        });
+        loadedImage.set({
+            originX: "left",
+            originY: "top",
+            top: this.top,
+            left: this.left,
+            clipPath: clipPath,
         });
+        this.fitImage(loadedImage);
+        this.uploadedImage = loadedImage;
+        const canvas = this?.canvas;
+        canvas?.add(this.uploadedImage);
+        canvas?.renderAll();
+        return this.uploadedImage;
     },
     removeUploadedImage: function () {
         const canvas = this?.canvas;
         canvas?.remove(this.uploadedImage);
+        this.uploadedImage = undefined;
         canvas?.renderAll();
     },
+    toImageObject: function () {
+        if (this.uploadedImage) {
+            const { originX, originY, left = 0, top = 0, width, height, scaleX, scaleY, angle, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
+            return {
+                originX,
+                originY,
+                left: left - this.left,
+                top: top - this.top,
+                width,
+                height,
+                scaleX,
+                scaleY,
+                angle,
+                flipX,
+                flipY,
+                skewX,
+                skewY,
+                opacity,
+            };
+        }
+        else {
+            return {};
+        }
+    },
 });
 const toImagePlaceholderObject = (imagePlaceholderObject) => {
     return {

package/lib/TextInputObject/index.js

@@ -56,7 +56,7 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             width: this.width,
         });
         if (options?.fontUrl) {
-            (0, utils_1.loadFontFromUrl)(text?.fontFamily ?? "", options?.fontUrl).then(() => {
+            (0, utils_1.loadFontFromUrl)(options?.fontUrl, text?.fontFamily ?? "").then(() => {
                 this.canvas?.renderAll?.();
             });
         }
@@ -114,7 +114,7 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     setFontFamily: async function (fontName, fontUrl) {
         if (!(0, utils_1.isFontLoaded)(fontName)) {
-            await (0, utils_1.loadFontFromUrl)(fontName, fontUrl ?? "");
+            await (0, utils_1.loadFontFromUrl)(fontUrl ?? "", fontName);
         }
         this.textObject.set({ fontFamily: fontName });
         this.autoChangeFontSize(0.1);

package/lib/utils/index.d.ts

@@ -2,7 +2,7 @@ import { fabric } from "fabric";
 import Clipart from "../ClipartObject";
 import ImagePlaceholder from "../ImagePlaceholderObject";
 import TextInput from "../TextInputObject";
-export declare const loadFontFromUrl: (name: string, url: string) => Promise<void>;
+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>;
@@ -11,5 +11,4 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean) =>
 export declare const getObject: (object: any, options?: {
     isOriginal?: boolean;
 }) => Clipart | ImagePlaceholder | TextInput | undefined;
-export declare const downloadFileFromUrl: (url: string, filePath: string, fileName: string) => Promise<string>;
 export default fabric;

package/lib/utils/index.js

@@ -22,23 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.downloadFileFromUrl = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+exports.getObject = exports.lockAllObjects = exports.lockObject = 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"));
 const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject"));
 const TextInputObject_1 = __importStar(require("../TextInputObject"));
-const https_1 = __importDefault(require("https"));
-const fs_1 = require("fs");
-const loadFontFromUrl = async (name, url) => {
+const loadFontFromUrl = async (url, name) => {
     if (!name || !url)
         return;
-    const fontFilePath = await (0, exports.downloadFileFromUrl)(url, "fonts", `${name}.ttf`);
-    fabric_1.fabric.nodeCanvas.registerFont(fontFilePath, { family: name });
     if (typeof window === "undefined") {
     }
     else {
@@ -156,25 +149,4 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
         }
     };
 })(fabric_1.fabric.Object.prototype.toObject);
-const downloadFileFromUrl = async (url, filePath, fileName) => {
-    return new Promise((resolve, reject) => {
-        https_1.default
-            .get(url, (res) => {
-            if (!(0, fs_1.existsSync)(`${"."}/${filePath}`)) {
-                (0, fs_1.mkdirSync)(`${"."}/${filePath}`);
-            }
-            const path = `${"."}/${filePath}/${fileName}`;
-            const fileWriter = (0, fs_1.createWriteStream)(path);
-            res.pipe(fileWriter);
-            fileWriter.on("finish", () => {
-                fileWriter.close();
-                resolve(path);
-            });
-        })
-            .on("error", (error) => {
-            reject(error);
-        });
-    });
-};
-exports.downloadFileFromUrl = downloadFileFromUrl;
 exports.default = fabric_1.fabric;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -21,10 +21,5 @@
   "devDependencies": {
     "@types/fabric": "^5.3.3",
     "typescript": "^5.2.2"
-  },
-  "browser": {
-    "fs": false,
-    "path": false,
-    "os": false
   }
 }