customized-fabric 1.0.0

package/src/TextInputObject/index.ts

@@ -0,0 +1,205 @@
+import { fabric } from "fabric";
+import { PARENT_ATTRIBUTES, TEXT_INPUT_OBJECT_ATTRIBUTES } from "./constants";
+import { isFontLoaded, loadFontFromUrl } from "../utils";
+import { ITextInputOptions, TextInputObject } from "./interfaces";
+import { ObjectId } from "../objectId";
+
+const TextInputClass = fabric.util.createClass(fabric.Group, {
+  initialize: function (options?: ITextInputOptions) {
+    const { text, ...rest } = options ?? {};
+
+    this.rectObject = new fabric.Rect({
+      width: options?.width,
+      height: options?.height,
+      fill: undefined,
+      originX: "center",
+      originY: "center",
+      objectCaching: false,
+      ...TEXT_INPUT_OBJECT_ATTRIBUTES.stroke,
+    });
+
+    this.textObject = new fabric.IText("", {
+      originX: "top",
+      originY: "left",
+      textAlign: "center",
+      objectCaching: false,
+      ...text,
+    });
+
+    const group = new fabric.Group([this.rectObject, this.textObject]);
+    this.set(group);
+    this.on("scaling", () => {
+      let width = this.width * this.scaleX;
+      let height = this.height * this.scaleY;
+      const attributes = {
+        scaleX: 1,
+        scaleY: 1,
+        width,
+        height,
+      };
+      this.set(attributes);
+      this.rectObject.set(attributes);
+      this.autoChangeFontSize(0.1);
+      this.textObject.set({
+        width: width,
+      });
+      this.canvas?.renderAll?.();
+    });
+    this.set({
+      _id: new ObjectId().toString(),
+      name: TEXT_INPUT_OBJECT_ATTRIBUTES.name,
+      type: TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+      ...rest,
+      layerId: options?.personalizeId ?? options?.layerId,
+      objectCaching: false,
+    });
+    this.autoChangeFontSize(0.1);
+    this.textObject.set({
+      width: this.width,
+    });
+
+    if (options?.fontUrl) {
+      loadFontFromUrl(text?.fontFamily ?? "", options?.fontUrl).then(() => {
+        this.canvas?.renderAll?.();
+      });
+    }
+    if (options?.hideStroke) {
+      this.rectObject.set({ strokeWidth: 0 });
+    }
+  },
+
+  autoChangeFontSize: function (changeSpeed: number) {
+    if (
+      this.width <= this.textObject.__lineWidths ||
+      this.height <= this.textObject.height
+    ) {
+      while (
+        this.width <= this.textObject.__lineWidths ||
+        this.height <= this.textObject.height
+      ) {
+        this.textObject.set({
+          fontSize: this.textObject.fontSize - changeSpeed,
+        });
+      }
+    } else {
+      while (
+        this.textObject.maxFontSize > this.textObject.fontSize &&
+        this.width > this.textObject.__lineWidths &&
+        this.height > this.textObject.height
+      ) {
+        this.textObject.set({
+          fontSize: this.textObject.fontSize + changeSpeed,
+        });
+      }
+    }
+  },
+
+  setText: function (text: string) {
+    this.textObject.set({
+      text,
+    });
+    this.autoChangeFontSize(0.1);
+    this.textObject.set({
+      width: this.width,
+    });
+    this.canvas?.renderAll?.();
+  },
+
+  setMaxFontSize: function (fontSize: number) {
+    this.textObject.set({
+      fontSize,
+    });
+    if (
+      this.textObject.__lineWidths < this.width &&
+      this.textObject.height < this.height
+    ) {
+    } else {
+      this.autoChangeFontSize(1);
+    }
+    this.textObject.set({
+      width: this.width,
+    });
+    this.textObject.set({
+      maxFontSize: fontSize,
+    });
+    this.canvas?.renderAll?.();
+  },
+
+  setFontFamily: async function (fontName: string, fontUrl?: string) {
+    if (!isFontLoaded(fontName)) {
+      await loadFontFromUrl(fontName, fontUrl ?? "");
+    }
+    this.textObject.set({ fontFamily: fontName });
+    this.autoChangeFontSize(0.1);
+    this.textObject.set({
+      width: this.width,
+    });
+    this.canvas?.renderAll?.();
+  },
+
+  setSizes: function (options: { width?: number; height?: number }) {
+    const { width, height } = options;
+    if (width && width > this.textObject.__lineWidths) {
+      this.set({ width });
+      this.textObject.set({ width });
+    }
+    if (height && height > this.textObject.height) {
+      this.set({ height });
+    }
+    this.canvas?.renderAll?.();
+  },
+
+  setTextAttributes: function (options: fabric.ITextOptions) {
+    this.textObject.set(options);
+    this.textObject.set({
+      width: this.width,
+    });
+    this.canvas?.renderAll?.();
+  },
+
+  getTextAttribute: function (attribute: string) {
+    return this.textObject.get(attribute);
+  },
+
+  getSettings: function (attribute: string) {
+    if (PARENT_ATTRIBUTES.includes(attribute)) {
+      return this.get(attribute);
+    }
+    return this.textObject.get(attribute);
+  },
+});
+
+export const toTextInputObject = (textInputObject: TextInputObject) => {
+  const textObject = textInputObject.textObject;
+  return {
+    id: textInputObject?._id,
+    personalizeId: textInputObject?.layerId,
+    layerId: textInputObject?.layerId,
+    name: textInputObject?.name,
+    locked: textInputObject?.locked,
+    fontId: textInputObject?.fontId,
+    fontCategoryId: textInputObject?.fontCategoryId,
+    fontUrl: textInputObject?.fontUrl,
+    isAdditional: textInputObject?.isAdditional,
+    text: {
+      fontWeight: textObject?.fontWeight,
+      fontSize: textObject?.fontSize,
+      textAlign: textObject?.textAlign,
+      text: textObject?.text,
+      fill: textObject?.fill,
+      width: textObject?.width,
+      height: textObject?.height,
+      fontFamily: textObject?.fontFamily,
+      maxFontSize: (textObject as any)?.maxFontSize,
+      stroke: textObject?.stroke,
+      strokeWidth: textObject?.strokeWidth,
+    },
+  };
+};
+
+export class TextInput extends fabric.Group {
+  constructor(options?: ITextInputOptions) {
+    super();
+    return new TextInputClass(options);
+  }
+}

package/src/TextInputObject/interfaces.ts

@@ -0,0 +1,40 @@
+import { ObjectId } from "../objectId";
+
+export interface TextInputObject extends fabric.Group {
+  _id: ObjectId;
+  layerId: number;
+  locked: boolean;
+  textObject: fabric.IText;
+  fontId: number;
+  fontCategoryId: string;
+  fontUrl: string;
+  isAdditional: boolean;
+  setText: (text: string) => void;
+  setMaxFontSize: (fontSize: string) => void;
+  setFontFamily: (fontName: string, fontUrl?: string) => void;
+  setTextAttributes: (options: fabric.ITextOptions) => void;
+  getTextAttribute: (attribute: string) => any;
+  getSettings: (attribute: string) => any;
+  setSizes: (options: { width?: number; height?: number }) => void;
+}
+
+export interface ITextInputOptions extends fabric.IGroupOptions {
+  _id?: ObjectId;
+  personalizeId?: string;
+  layerId: number;
+  text: {
+    fontSize?: number;
+    fill?: string;
+    width?: number;
+    height?: number;
+    textAlign?: string;
+    fontWeight?: string;
+    text: string;
+    fontFamily?: string;
+    maxFontSize: number;
+    stroke?: string;
+    strokeWidth?: number;
+  };
+  fontUrl?: string;
+  hideStroke?: boolean;
+}

package/src/constants.ts

@@ -0,0 +1,10 @@
+import { CLIPART_OBJECT_ATTRIBUTES } from "./ClipartObject/constants";
+import { IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES } from "./ImagePlaceholderObject/constants";
+import { TEXT_INPUT_OBJECT_ATTRIBUTES } from "./TextInputObject/constants";
+
+export const OBJECT_TYPES = {
+  textInput: TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+  clipart: CLIPART_OBJECT_ATTRIBUTES.type,
+  imagePlaceHolder: IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
+  activeSelection: "activeSelection",
+};

package/src/index.ts

@@ -0,0 +1,62 @@
+import { fabric } from "fabric";
+import { TextInput, toTextInputObject } from "./TextInputObject";
+import { Clipart, toClipartObject } from "./ClipartObject";
+import {
+  ImagePlaceholder,
+  toImagePlaceholderObject,
+} from "./ImagePlaceholderObject";
+import {
+  ClipartObject,
+  TextInputObject,
+  ImagePlaceholderObject,
+} from "./interfaces";
+import { OBJECT_TYPES } from "./constants";
+
+(fabric as any).TextInput = TextInput;
+(fabric as any).Clipart = Clipart;
+(fabric as any).ImagePlaceholder = ImagePlaceholder;
+
+fabric.Object.prototype.transparentCorners = false;
+fabric.Object.prototype.cornerColor = "black";
+fabric.Object.prototype.cornerStyle = "circle";
+fabric.Object.prototype.cornerStrokeColor = "black";
+fabric.Object.prototype.borderColor = "black";
+
+fabric.Object.prototype.toObject = (function (toObject) {
+  return function (this: fabric.Object) {
+    switch (this.type) {
+      case OBJECT_TYPES.textInput: {
+        return fabric.util.object.extend(
+          toObject.call(this),
+          toTextInputObject(this as TextInputObject)
+        );
+      }
+
+      case OBJECT_TYPES.clipart: {
+        return fabric.util.object.extend(
+          toObject.call(this),
+          toClipartObject(this as ClipartObject)
+        );
+      }
+
+      case OBJECT_TYPES.imagePlaceHolder: {
+        return fabric.util.object.extend(
+          toObject.call(this),
+          toImagePlaceholderObject(this as ImagePlaceholderObject)
+        );
+      }
+
+      default: {
+        return {};
+      }
+    }
+  };
+})(fabric.Object.prototype.toObject);
+
+export * from "./TextInputObject";
+export * from "./ClipartObject";
+export * from "./ImagePlaceholderObject";
+
+export * from "./interfaces";
+
+export default fabric;

package/src/interfaces.ts

@@ -0,0 +1,3 @@
+export * from "./TextInputObject/interfaces";
+export * from "./ClipartObject/interfaces";
+export * from "./ImagePlaceholderObject/interfaces";

package/src/objectId/bson_value.ts

@@ -0,0 +1,18 @@
+import { BSON_MAJOR_VERSION } from "./constants";
+
+/** @public */
+export abstract class BSONValue {
+  /** @public */
+  public abstract get _bsontype(): string;
+
+  /** @internal */
+  get [Symbol.for("@@mdb.bson.version")](): typeof BSON_MAJOR_VERSION {
+    return BSON_MAJOR_VERSION;
+  }
+
+  /** @public */
+  public abstract inspect(): string;
+
+  /** @internal */
+  abstract toExtendedJSON(): unknown;
+}

package/src/objectId/constants.ts

@@ -0,0 +1,141 @@
+/** @internal */
+export const BSON_MAJOR_VERSION = 5 as const;
+
+/** @internal */
+export const BSON_INT32_MAX = 0x7fffffff;
+/** @internal */
+export const BSON_INT32_MIN = -0x80000000;
+/** @internal */
+export const BSON_INT64_MAX = Math.pow(2, 63) - 1;
+/** @internal */
+export const BSON_INT64_MIN = -Math.pow(2, 63);
+
+/**
+ * Any integer up to 2^53 can be precisely represented by a double.
+ * @internal
+ */
+export const JS_INT_MAX = Math.pow(2, 53);
+
+/**
+ * Any integer down to -2^53 can be precisely represented by a double.
+ * @internal
+ */
+export const JS_INT_MIN = -Math.pow(2, 53);
+
+/** Number BSON Type @internal */
+export const BSON_DATA_NUMBER = 1;
+
+/** String BSON Type @internal */
+export const BSON_DATA_STRING = 2;
+
+/** Object BSON Type @internal */
+export const BSON_DATA_OBJECT = 3;
+
+/** Array BSON Type @internal */
+export const BSON_DATA_ARRAY = 4;
+
+/** Binary BSON Type @internal */
+export const BSON_DATA_BINARY = 5;
+
+/** Binary BSON Type @internal */
+export const BSON_DATA_UNDEFINED = 6;
+
+/** ObjectId BSON Type @internal */
+export const BSON_DATA_OID = 7;
+
+/** Boolean BSON Type @internal */
+export const BSON_DATA_BOOLEAN = 8;
+
+/** Date BSON Type @internal */
+export const BSON_DATA_DATE = 9;
+
+/** null BSON Type @internal */
+export const BSON_DATA_NULL = 10;
+
+/** RegExp BSON Type @internal */
+export const BSON_DATA_REGEXP = 11;
+
+/** Code BSON Type @internal */
+export const BSON_DATA_DBPOINTER = 12;
+
+/** Code BSON Type @internal */
+export const BSON_DATA_CODE = 13;
+
+/** Symbol BSON Type @internal */
+export const BSON_DATA_SYMBOL = 14;
+
+/** Code with Scope BSON Type @internal */
+export const BSON_DATA_CODE_W_SCOPE = 15;
+
+/** 32 bit Integer BSON Type @internal */
+export const BSON_DATA_INT = 16;
+
+/** Timestamp BSON Type @internal */
+export const BSON_DATA_TIMESTAMP = 17;
+
+/** Long BSON Type @internal */
+export const BSON_DATA_LONG = 18;
+
+/** Decimal128 BSON Type @internal */
+export const BSON_DATA_DECIMAL128 = 19;
+
+/** MinKey BSON Type @internal */
+export const BSON_DATA_MIN_KEY = 0xff;
+
+/** MaxKey BSON Type @internal */
+export const BSON_DATA_MAX_KEY = 0x7f;
+
+/** Binary Default Type @internal */
+export const BSON_BINARY_SUBTYPE_DEFAULT = 0;
+
+/** Binary Function Type @internal */
+export const BSON_BINARY_SUBTYPE_FUNCTION = 1;
+
+/** Binary Byte Array Type @internal */
+export const BSON_BINARY_SUBTYPE_BYTE_ARRAY = 2;
+
+/** Binary Deprecated UUID Type @deprecated Please use BSON_BINARY_SUBTYPE_UUID_NEW @internal */
+export const BSON_BINARY_SUBTYPE_UUID = 3;
+
+/** Binary UUID Type @internal */
+export const BSON_BINARY_SUBTYPE_UUID_NEW = 4;
+
+/** Binary MD5 Type @internal */
+export const BSON_BINARY_SUBTYPE_MD5 = 5;
+
+/** Encrypted BSON type @internal */
+export const BSON_BINARY_SUBTYPE_ENCRYPTED = 6;
+
+/** Column BSON type @internal */
+export const BSON_BINARY_SUBTYPE_COLUMN = 7;
+
+/** Binary User Defined Type @internal */
+export const BSON_BINARY_SUBTYPE_USER_DEFINED = 128;
+
+/** @public */
+export const BSONType = Object.freeze({
+  double: 1,
+  string: 2,
+  object: 3,
+  array: 4,
+  binData: 5,
+  undefined: 6,
+  objectId: 7,
+  bool: 8,
+  date: 9,
+  null: 10,
+  regex: 11,
+  dbPointer: 12,
+  javascript: 13,
+  symbol: 14,
+  javascriptWithScope: 15,
+  int: 16,
+  timestamp: 17,
+  long: 18,
+  decimal: 19,
+  minKey: -1,
+  maxKey: 127,
+} as const);
+
+/** @public */
+export type BSONType = (typeof BSONType)[keyof typeof BSONType];

package/src/objectId/error.ts

@@ -0,0 +1,85 @@
+import { BSON_MAJOR_VERSION } from "./constants";
+
+/**
+ * @public
+ * @category Error
+ *
+ * `BSONError` objects are thrown when BSON ecounters an error.
+ *
+ * This is the parent class for all the other errors thrown by this library.
+ */
+export class BSONError extends Error {
+  /**
+   * @internal
+   * The underlying algorithm for isBSONError may change to improve how strict it is
+   * about determining if an input is a BSONError. But it must remain backwards compatible
+   * with previous minors & patches of the current major version.
+   */
+  protected get bsonError(): true {
+    return true;
+  }
+
+  override get name(): string {
+    return "BSONError";
+  }
+
+  constructor(message: string) {
+    super(message);
+  }
+
+  /**
+   * @public
+   *
+   * All errors thrown from the BSON library inherit from `BSONError`.
+   * This method can assist with determining if an error originates from the BSON library
+   * even if it does not pass an `instanceof` check against this class' constructor.
+   *
+   * @param value - any javascript value that needs type checking
+   */
+  public static isBSONError(value: unknown): value is BSONError {
+    return (
+      value != null &&
+      typeof value === "object" &&
+      "bsonError" in value &&
+      value.bsonError === true &&
+      // Do not access the following properties, just check existence
+      "name" in value &&
+      "message" in value &&
+      "stack" in value
+    );
+  }
+}
+
+/**
+ * @public
+ * @category Error
+ */
+export class BSONVersionError extends BSONError {
+  get name(): "BSONVersionError" {
+    return "BSONVersionError";
+  }
+
+  constructor() {
+    super(
+      `Unsupported BSON version, bson types must be from bson ${BSON_MAJOR_VERSION}.0 or later`
+    );
+  }
+}
+
+/**
+ * @public
+ * @category Error
+ *
+ * An error generated when BSON functions encounter an unexpected input
+ * or reaches an unexpected/invalid internal state
+ *
+ */
+export class BSONRuntimeError extends BSONError {
+  get name(): "BSONRuntimeError" {
+    return "BSONRuntimeError";
+  }
+
+  constructor(message: string) {
+    super(message);
+  }
+}