customized-fabric 1.0.0

package/lib/objectId/utils/web_byte_utils.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webByteUtils = exports.webMathRandomBytes = void 0;
+const error_1 = require("../error");
+function isReactNative() {
+    const { navigator } = globalThis;
+    return typeof navigator === "object" && navigator.product === "ReactNative";
+}
+/** @internal */
+function webMathRandomBytes(byteLength) {
+    if (byteLength < 0) {
+        throw new RangeError(`The argument 'byteLength' is invalid. Received ${byteLength}`);
+    }
+    return exports.webByteUtils.fromNumberArray(Array.from({ length: byteLength }, () => Math.floor(Math.random() * 256)));
+}
+exports.webMathRandomBytes = webMathRandomBytes;
+/** @internal */
+const webRandomBytes = (() => {
+    const { crypto } = globalThis;
+    if (crypto != null && typeof crypto.getRandomValues === "function") {
+        return (byteLength) => {
+            // @ts-expect-error: crypto.getRandomValues cannot actually be null here
+            // You cannot separate getRandomValues from crypto (need to have this === crypto)
+            return crypto.getRandomValues(exports.webByteUtils.allocate(byteLength));
+        };
+    }
+    else {
+        if (isReactNative()) {
+            const { console } = globalThis;
+            console?.warn?.("BSON: For React Native please polyfill crypto.getRandomValues, e.g. using: https://www.npmjs.com/package/react-native-get-random-values.");
+        }
+        return webMathRandomBytes;
+    }
+})();
+const HEX_DIGIT = /(\d|[a-f])/i;
+/** @internal */
+exports.webByteUtils = {
+    toLocalBufferType(potentialUint8array) {
+        const stringTag = potentialUint8array?.[Symbol.toStringTag] ??
+            Object.prototype.toString.call(potentialUint8array);
+        if (stringTag === "Uint8Array") {
+            return potentialUint8array;
+        }
+        if (ArrayBuffer.isView(potentialUint8array)) {
+            return new Uint8Array(potentialUint8array.buffer.slice(potentialUint8array.byteOffset, potentialUint8array.byteOffset + potentialUint8array.byteLength));
+        }
+        if (stringTag === "ArrayBuffer" ||
+            stringTag === "SharedArrayBuffer" ||
+            stringTag === "[object ArrayBuffer]" ||
+            stringTag === "[object SharedArrayBuffer]") {
+            return new Uint8Array(potentialUint8array);
+        }
+        throw new error_1.BSONError(`Cannot make a Uint8Array from ${String(potentialUint8array)}`);
+    },
+    allocate(size) {
+        if (typeof size !== "number") {
+            throw new TypeError(`The "size" argument must be of type number. Received ${String(size)}`);
+        }
+        return new Uint8Array(size);
+    },
+    equals(a, b) {
+        if (a.byteLength !== b.byteLength) {
+            return false;
+        }
+        for (let i = 0; i < a.byteLength; i++) {
+            if (a[i] !== b[i]) {
+                return false;
+            }
+        }
+        return true;
+    },
+    fromNumberArray(array) {
+        return Uint8Array.from(array);
+    },
+    fromBase64(base64) {
+        return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    },
+    toBase64(uint8array) {
+        return btoa(exports.webByteUtils.toISO88591(uint8array));
+    },
+    /** **Legacy** binary strings are an outdated method of data transfer. Do not add public API support for interpreting this format */
+    fromISO88591(codePoints) {
+        return Uint8Array.from(codePoints, (c) => c.charCodeAt(0) & 0xff);
+    },
+    /** **Legacy** binary strings are an outdated method of data transfer. Do not add public API support for interpreting this format */
+    toISO88591(uint8array) {
+        return Array.from(Uint16Array.from(uint8array), (b) => String.fromCharCode(b)).join("");
+    },
+    fromHex(hex) {
+        const evenLengthHex = hex.length % 2 === 0 ? hex : hex.slice(0, hex.length - 1);
+        const buffer = [];
+        for (let i = 0; i < evenLengthHex.length; i += 2) {
+            const firstDigit = evenLengthHex[i];
+            const secondDigit = evenLengthHex[i + 1];
+            if (!HEX_DIGIT.test(firstDigit)) {
+                break;
+            }
+            if (!HEX_DIGIT.test(secondDigit)) {
+                break;
+            }
+            const hexDigit = Number.parseInt(`${firstDigit}${secondDigit}`, 16);
+            buffer.push(hexDigit);
+        }
+        return Uint8Array.from(buffer);
+    },
+    toHex(uint8array) {
+        return Array.from(uint8array, (byte) => byte.toString(16).padStart(2, "0")).join("");
+    },
+    fromUTF8(text) {
+        return new TextEncoder().encode(text);
+    },
+    toUTF8(uint8array, start, end) {
+        return new TextDecoder("utf8", { fatal: false }).decode(uint8array.slice(start, end));
+    },
+    utf8ByteLength(input) {
+        return exports.webByteUtils.fromUTF8(input).byteLength;
+    },
+    encodeUTF8Into(buffer, source, byteOffset) {
+        const bytes = exports.webByteUtils.fromUTF8(source);
+        buffer.set(bytes, byteOffset);
+        return bytes.byteLength;
+    },
+    randomBytes: webRandomBytes,
+};

package/lib/utils.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getObject = exports.lockAllObjects = exports.lockObject = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const _1 = require(".");
+const ImagePlaceholderObject_1 = require("./ImagePlaceholderObject");
+const loadFontFromUrl = async (name, url) => {
+    if (!name || !url)
+        return;
+    const font = new FontFace(name, `url(${url})`);
+    await font.load();
+    document.fonts.add(font);
+};
+exports.loadFontFromUrl = loadFontFromUrl;
+const isFontLoaded = (name) => {
+    let isLoaded = false;
+    document.fonts.forEach((font) => {
+        if (name == font.family) {
+            isLoaded = true;
+        }
+    });
+    return isLoaded;
+};
+exports.isFontLoaded = isFontLoaded;
+const loadImageFromFile = (image) => {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            const image = new Image();
+            image.src = event?.target?.result;
+            image.onload = function () {
+                resolve(new fabric_1.fabric.Image(image));
+            };
+        };
+        reader.readAsDataURL(image);
+    });
+};
+exports.loadImageFromFile = loadImageFromFile;
+const lockObject = (object, locked, selectable) => {
+    object.set({
+        hasControls: !locked,
+        lockMovementX: locked,
+        lockMovementY: locked,
+        lockRotation: locked,
+        lockScalingX: locked,
+        lockScalingY: locked,
+        lockUniScaling: locked,
+        lockSkewingX: locked,
+        lockSkewingY: locked,
+        lockScalingFlip: locked,
+        locked: locked,
+        selectable: selectable ?? !locked,
+    });
+};
+exports.lockObject = lockObject;
+const lockAllObjects = (canvas, locked) => {
+    canvas._objects.map((object) => {
+        (0, exports.lockObject)(object, locked);
+    });
+};
+exports.lockAllObjects = lockAllObjects;
+const getObject = (object, options) => {
+    switch (object.type) {
+        case constants_1.OBJECT_TYPES.textInput: {
+            const textInputObject = new _1.TextInput({
+                ...object,
+                hideStroke: options?.isOriginal,
+            });
+            return textInputObject;
+        }
+        case constants_1.OBJECT_TYPES.clipart: {
+            const clipartObject = new _1.Clipart({
+                ...object,
+                hideStroke: options?.isOriginal,
+            });
+            return clipartObject;
+        }
+        case constants_1.OBJECT_TYPES.imagePlaceHolder: {
+            const imagePlaceHolderObject = new ImagePlaceholderObject_1.ImagePlaceholder({
+                ...object,
+                hideStroke: options?.isOriginal,
+            });
+            return imagePlaceHolderObject;
+        }
+        default:
+            return;
+    }
+};
+exports.getObject = getObject;

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "customized-fabric",
+  "version": "1.0.0",
+  "description": "Customized fabric",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "prepare" : "npm run build"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "fabric": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/fabric": "^5.3.3",
+    "typescript": "^5.2.2"
+  }
+}

package/src/ClipartObject/constants.ts

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

package/src/ClipartObject/index.ts

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,11 @@
+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"];