customized-fabric 1.0.0 → 1.0.2

package/lib/{ClipartObject → customizedFabric/ClipartObject}/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clipart = exports.toClipartObject = void 0;
 const fabric_1 = require("fabric");
 const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
 const utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
 const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     initialize: function (options) {
         this.rectObject = new fabric_1.fabric.Rect({

package/lib/{ImagePlaceholderObject → customizedFabric/ImagePlaceholderObject}/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImagePlaceholder = exports.toImagePlaceholderObject = void 0;
 const fabric_1 = require("fabric");
 const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
 const utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
 const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     initialize: function (options) {
         this.rectObject = new fabric_1.fabric.Rect({

package/lib/{TextInputObject → customizedFabric/TextInputObject}/constants.js

@@ -4,6 +4,7 @@ exports.PARENT_ATTRIBUTES = exports.TEXT_INPUT_OBJECT_ATTRIBUTES = void 0;
 exports.TEXT_INPUT_OBJECT_ATTRIBUTES = {
     name: "Text input",
     type: "TEXT_INPUT",
+    maxFontSize: 200,
     stroke: {
         stroke: "#000000",
         strokeDashArray: [5, 5],

package/lib/{TextInputObject → customizedFabric/TextInputObject}/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = exports.toTextInputObject = void 0;
 const fabric_1 = require("fabric");
 const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
 const utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
 const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     initialize: function (options) {
         const { text, ...rest } = options ?? {};

package/lib/customizedFabric/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+const fabric_1 = require("fabric");
+const TextInputObject_1 = require("./TextInputObject");
+const ClipartObject_1 = require("./ClipartObject");
+const ImagePlaceholderObject_1 = require("./ImagePlaceholderObject");
+const constants_1 = require("./constants");
+fabric_1.fabric.TextInput = TextInputObject_1.TextInput;
+fabric_1.fabric.Clipart = ClipartObject_1.Clipart;
+fabric_1.fabric.ImagePlaceholder = ImagePlaceholderObject_1.ImagePlaceholder;
+fabric_1.fabric.Object.prototype.transparentCorners = false;
+fabric_1.fabric.Object.prototype.cornerColor = "black";
+fabric_1.fabric.Object.prototype.cornerStyle = "circle";
+fabric_1.fabric.Object.prototype.cornerStrokeColor = "black";
+fabric_1.fabric.Object.prototype.borderColor = "black";
+fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
+    return function () {
+        switch (this.type) {
+            case constants_1.OBJECT_TYPES.textInput: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, TextInputObject_1.toTextInputObject)(this));
+            }
+            case constants_1.OBJECT_TYPES.clipart: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ClipartObject_1.toClipartObject)(this));
+            }
+            case constants_1.OBJECT_TYPES.imagePlaceHolder: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ImagePlaceholderObject_1.toImagePlaceholderObject)(this));
+            }
+            default: {
+                return {};
+            }
+        }
+    };
+})(fabric_1.fabric.Object.prototype.toObject);
+__exportStar(require("./TextInputObject"), exports);
+__exportStar(require("./ClipartObject"), exports);
+__exportStar(require("./ImagePlaceholderObject"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./interfaces"), exports);
+__exportStar(require("./utils"), exports);
+exports.default = fabric_1.fabric;

package/lib/index.js

@@ -14,39 +14,4 @@ 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 });
-const fabric_1 = require("fabric");
-const TextInputObject_1 = require("./TextInputObject");
-const ClipartObject_1 = require("./ClipartObject");
-const ImagePlaceholderObject_1 = require("./ImagePlaceholderObject");
-const constants_1 = require("./constants");
-fabric_1.fabric.TextInput = TextInputObject_1.TextInput;
-fabric_1.fabric.Clipart = ClipartObject_1.Clipart;
-fabric_1.fabric.ImagePlaceholder = ImagePlaceholderObject_1.ImagePlaceholder;
-fabric_1.fabric.Object.prototype.transparentCorners = false;
-fabric_1.fabric.Object.prototype.cornerColor = "black";
-fabric_1.fabric.Object.prototype.cornerStyle = "circle";
-fabric_1.fabric.Object.prototype.cornerStrokeColor = "black";
-fabric_1.fabric.Object.prototype.borderColor = "black";
-fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
-    return function () {
-        switch (this.type) {
-            case constants_1.OBJECT_TYPES.textInput: {
-                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, TextInputObject_1.toTextInputObject)(this));
-            }
-            case constants_1.OBJECT_TYPES.clipart: {
-                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ClipartObject_1.toClipartObject)(this));
-            }
-            case constants_1.OBJECT_TYPES.imagePlaceHolder: {
-                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ImagePlaceholderObject_1.toImagePlaceholderObject)(this));
-            }
-            default: {
-                return {};
-            }
-        }
-    };
-})(fabric_1.fabric.Object.prototype.toObject);
-__exportStar(require("./TextInputObject"), exports);
-__exportStar(require("./ClipartObject"), exports);
-__exportStar(require("./ImagePlaceholderObject"), exports);
-__exportStar(require("./interfaces"), exports);
-exports.default = fabric_1.fabric;
+__exportStar(require("./customizedFabric"), exports);

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "customized-fabric",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",

package/src/ClipartObject/constants.ts

@@ -1,9 +0,0 @@
-export const CLIPART_OBJECT_ATTRIBUTES = {
-  name: "Clipart",
-  type: "CLIP_ART",
-  stroke: {
-    stroke: "#000000",
-    strokeDashArray: [5, 5],
-    strokeWidth: 2,
-  },
-};

package/src/ClipartObject/index.ts

@@ -1,156 +0,0 @@
-import { fabric } from "fabric";
-import { CLIPART_OBJECT_ATTRIBUTES } from "./constants";
-import { loadImageFromFile } from "../utils";
-import { ClipartObject, IClipartOptions } from "./interfaces";
-import { ObjectId } from "../objectId";
-
-const ClipartClass = fabric.util.createClass(fabric.Group, {
-  initialize: function (options?: IClipartOptions) {
-    this.rectObject = new fabric.Rect({
-      width: options?.width,
-      height: options?.height,
-      fill: undefined,
-      originX: "center",
-      originY: "center",
-      objectCaching: false,
-      ...CLIPART_OBJECT_ATTRIBUTES.stroke,
-    });
-
-    const imageObject = new fabric.Image("");
-    imageObject.set({
-      width: options?.width,
-      height: options?.height,
-    });
-    this.imageObject = imageObject;
-
-    const group = new fabric.Group([this.rectObject, this.imageObject]);
-    group.setControlsVisibility({
-      mt: false,
-      mr: false,
-      mb: false,
-      ml: false,
-    });
-    this.set(group);
-    this.on("scaling", () => {
-      let width = this.width * this.scaleX;
-      let height = this.height * this.scaleY;
-      const imageScaleX = width / this.imageObject.width;
-      const imageScaleY = height / this.imageObject.height;
-      this.imageObject.set({ scaleX: imageScaleX, scaleY: imageScaleY });
-      this.fitImage(this.imageObject);
-      this.canvas?.renderAll?.();
-    });
-    this.set({
-      _id: new ObjectId().toString(),
-      name: CLIPART_OBJECT_ATTRIBUTES.name,
-      type: CLIPART_OBJECT_ATTRIBUTES.type,
-      ...options,
-      layerId: options?.personalizeId ?? options?.layerId,
-      objectCaching: false,
-    });
-
-    if (options?.clipartUrl) {
-      this.loadImageFromUrl(options.clipartUrl);
-    }
-    if (options?.clipartFile) {
-      this.loadImageFromFile(options.clipartFile);
-    }
-    if (options?.hideStroke) {
-      this.rectObject.set({ strokeWidth: 0 });
-    }
-  },
-
-  loadImageFromUrl: async function (url: string) {
-    fabric.Image.fromURL(
-      url,
-      (loadedImage) => {
-        this.loadImage(loadedImage);
-      },
-      {
-        crossOrigin: "anonymous",
-      }
-    );
-  },
-
-  loadImageFromFile: async function (imageFile: File) {
-    const loadedImage = await loadImageFromFile(imageFile);
-    this.loadImage(loadedImage);
-  },
-
-  loadImage: function (image: fabric.Image) {
-    if (image.width && image.height) {
-      image.set({
-        originX: "center",
-        originY: "center",
-      });
-      image.scaleToWidth(this.width);
-      this.remove(this.imageObject);
-      this.imageObject = image;
-      this.add(this.imageObject);
-      this.fitImage(this.imageObject);
-    } else {
-      this.remove(this.imageObject);
-      const imageObject = new fabric.Image("");
-      imageObject.set({
-        width: this.width,
-        height: this.height,
-      });
-      this.imageObject = imageObject;
-      this.add(this.imageObject);
-      this.fitImage(this.imageObject);
-    }
-    this.canvas?.renderAll();
-  },
-
-  getSettings: function (attribute: string) {
-    return this.get(attribute);
-  },
-
-  setSizes: function (options: { width?: number; height?: number }) {
-    const { width, height } = options;
-    if (width) {
-      const scaleX = width / (this?.imageObject?.width ?? this.width);
-      this.imageObject.set({ scaleX, scaleY: scaleX });
-    }
-    if (height) {
-      const scaleY = height / (this?.imageObject?.height ?? this.height);
-      this.imageObject.set({ scaleX: scaleY, scaleY });
-    }
-    this.fitImage(this.imageObject);
-    this.canvas?.renderAll?.();
-  },
-
-  fitImage: function (image: fabric.Image) {
-    const attributes = {
-      scaleX: 1,
-      scaleY: 1,
-      width: (image.width ?? 0) * (image.scaleX ?? 1),
-      height: (image.height ?? 0) * (image.scaleY ?? 1),
-    };
-    this.set(attributes);
-    this.rectObject.set(attributes);
-  },
-});
-
-export const toClipartObject = (clipartObject: ClipartObject) => {
-  return {
-    id: clipartObject._id,
-    personalizeId: clipartObject.layerId,
-    layerId: clipartObject.layerId,
-    name: clipartObject.name,
-    locked: clipartObject.locked,
-    isAdditional: clipartObject?.isAdditional,
-    clipartUrl: clipartObject?.clipartUrl,
-    clipartFile: clipartObject?.clipartFile,
-    clipartRootCategoryId: clipartObject?.clipartRootCategoryId,
-    clipartCategoryId: clipartObject?.clipartCategoryId,
-    clipartOptionId: clipartObject?.clipartOptionId,
-  };
-};
-
-export class Clipart extends fabric.Group {
-  constructor(options?: IClipartOptions) {
-    super();
-    return new ClipartClass(options);
-  }
-}

package/src/ClipartObject/interfaces.ts

@@ -1,29 +0,0 @@
-import { ObjectId } from "../objectId";
-
-export interface ClipartObject extends fabric.Group {
-  _id: ObjectId;
-  layerId?: number;
-  locked?: boolean;
-  isAdditional?: boolean;
-  clipartFile?: File;
-  clipartRootCategoryId?: string;
-  clipartRootCategoryName?: string;
-  clipartCategoryId?: string;
-  clipartCategoryName?: string;
-  clipartOptionId?: number;
-  imageObject?: fabric.Image;
-  clipartUrl?: string;
-  loadImageFromFile: (imageFile: File) => void;
-  loadImageFromUrl: (imageUrl: string) => void;
-  getSettings: (attribute: string) => any;
-  setSizes: (options: { width?: number; height?: number }) => void;
-}
-
-export interface IClipartOptions extends fabric.IGroupOptions {
-  _id?: string;
-  personalizeId?: number;
-  layerId: number;
-  clipartUrl?: string;
-  clipartFile?: File;
-  hideStroke?: boolean;
-}

package/src/ImagePlaceholderObject/constants.ts

@@ -1,9 +0,0 @@
-export const IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
-  name: "Image placeholder",
-  type: "IMAGE_PLACEHOLDER",
-  stroke: {
-    stroke: "#000000",
-    strokeDashArray: [5, 5],
-    strokeWidth: 2,
-  },
-};

package/src/ImagePlaceholderObject/index.ts

@@ -1,155 +0,0 @@
-import { fabric } from "fabric";
-import { IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES } from "./constants";
-import { IImagePlaceholderOptions, ImagePlaceholderObject } from "./interfaces";
-import { loadImageFromFile } from "../utils";
-import { ObjectId } from "../objectId";
-
-const ImagePlaceholderClass = fabric.util.createClass(fabric.Group, {
-  initialize: function (options?: IImagePlaceholderOptions) {
-    this.rectObject = new fabric.Rect({
-      width: options?.width,
-      height: options?.height,
-      fill: undefined,
-      originX: "center",
-      originY: "center",
-      objectCaching: false,
-      ...IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.stroke,
-    });
-
-    this.imageObject = new fabric.Image("");
-
-    const group = new fabric.Group([this.rectObject, this.imageObject]);
-    this.set(group);
-    this.on("scaling", () => {
-      let width = this.width * this.scaleX;
-      let height = this.height * this.scaleY;
-      this.setSizes({ width, height });
-      this.canvas?.renderAll();
-    });
-    this.set({
-      _id: new ObjectId().toString(),
-      name: IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.name,
-      type: IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
-      ...options,
-      layerId: options?.personalizeId ?? options?.layerId,
-      objectCaching: false,
-    });
-
-    if (options?.imageFile) {
-      this.loadImageFromFile(options?.imageFile);
-    }
-    if (options?.hideStroke) {
-      this.rectObject.set({ strokeWidth: 0 });
-    }
-  },
-
-  loadImageFromUrl: async function (url: string) {
-    fabric.Image.fromURL(
-      url,
-      (loadedImage) => {
-        this.loadImage(loadedImage);
-      },
-      {
-        crossOrigin: "anonymous",
-      }
-    );
-  },
-
-  loadImageFromFile: async function (imageFile: File) {
-    const loadedImage = await loadImageFromFile(imageFile);
-    this.loadImage(loadedImage);
-  },
-
-  loadImage: function (image: fabric.Image) {
-    if (image.width && image.height) {
-      image.set({
-        originX: "center",
-        originY: "center",
-      });
-      this.remove(this.imageObject);
-      this.imageObject = image;
-      this.add(this.imageObject);
-      this.fitImage(this.imageObject);
-    } else {
-      this.remove(this.imageObject);
-      this.imageObject = new fabric.Image("");
-      this.add(this.imageObject);
-      this.fitImage(this.imageObject);
-    }
-    this.canvas?.renderAll();
-  },
-
-  setSizes: function (options: { width?: number; height?: number }) {
-    const { width, height } = options;
-    const attributes: any = {
-      scaleX: 1,
-      scaleY: 1,
-    };
-    if (width) {
-      attributes.width = width;
-    }
-    if (height) {
-      attributes.height = height;
-    }
-    this.set(attributes);
-    this.rectObject.set(attributes);
-    this.fitImage(this.imageObject);
-    this.canvas?.renderAll?.();
-  },
-
-  fitImage: function (image: fabric.Image) {
-    const imageScaleX = this.width / (image?.width ?? 1);
-    const imageScaleY = this.height / (image?.height ?? 1);
-    imageScaleX > imageScaleY
-      ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
-      : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
-  },
-
-  getSettings: function (attribute: string) {
-    return this.get(attribute);
-  },
-
-  loadUploadedImage: function (imageFile: File) {
-    loadImageFromFile(imageFile).then((loadedImage) => {
-      const clipPath = new 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();
-    });
-  },
-
-  removeUploadedImage: function () {
-    const canvas = this?.canvas;
-    canvas?.remove(this.uploadedImage);
-    canvas?.renderAll();
-  },
-});
-
-export const toImagePlaceholderObject = (
-  imagePlaceholderObject: ImagePlaceholderObject
-) => {
-  return {
-    id: imagePlaceholderObject._id,
-    personalizeId: imagePlaceholderObject.layerId,
-    layerId: imagePlaceholderObject.layerId,
-    name: imagePlaceholderObject.name,
-    locked: imagePlaceholderObject.locked,
-    isAdditional: imagePlaceholderObject?.isAdditional,
-  };
-};
-
-export class ImagePlaceholder extends fabric.Group {
-  constructor(options?: IImagePlaceholderOptions) {
-    super();
-    return new ImagePlaceholderClass(options);
-  }
-}

package/src/ImagePlaceholderObject/interfaces.ts

@@ -1,21 +0,0 @@
-import { ObjectId } from "../objectId";
-
-export interface ImagePlaceholderObject extends fabric.Group {
-  _id: ObjectId;
-  layerId: number;
-  locked: boolean;
-  imageFile?: File;
-  isAdditional: boolean;
-  loadImageFromFile: (imageFile: File) => void;
-  loadImageFromUrl: (imageUrl: string) => void;
-  getSettings: (attribute: string) => any;
-  setSizes: (options: { width?: number; height?: number }) => void;
-}
-
-export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
-  _id?: string;
-  personalizeId?: number;
-  layerId: number;
-  imageFile?: File;
-  hideStroke?: boolean;
-}

package/src/TextInputObject/constants.ts

@@ -1,11 +0,0 @@
-export const TEXT_INPUT_OBJECT_ATTRIBUTES = {
-  name: "Text input",
-  type: "TEXT_INPUT",
-  stroke: {
-    stroke: "#000000",
-    strokeDashArray: [5, 5],
-    strokeWidth: 2,
-  },
-};
-
-export const PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];