Merge pull request #13 from guesant/next

next

docs/examples/README.md

@@ -3,7 +3,7 @@ title: Examples
 sidebar: auto
 ---
 
-<style>
+<style scoped>
   .theme-default-content:not(.custom) {
     max-width: 1280px;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-object-fit",
-  "version": "0.0.0-beta.3",
+  "version": "0.0.0-beta.5",
   "description": "CSS-like 'object-fit' and 'object-position' behavior for FabricJS.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

src/createObjectFitClass.ts

@@ -1,4 +1,6 @@
 import { fabric } from "fabric";
+import { FitMode } from "./enums/FitMode";
+import { detachObjectFromGroup } from "./misc/Fabric/detachObjectFromGroup";
 import { fabricObjectDefaults } from "./misc/Fabric/fabricObjectDefaults";
 import { getEnlivedObject } from "./misc/Fabric/getEnlivedObject";
 import { defaultPosition } from "./misc/Position/defaultPosition";
@@ -81,7 +83,7 @@ export const createObjectFitClass = (ns: IFabricNS): IObjectFitConstructor => {
         object.set(resetTransformOptions);
         object.setCoords();
 
-        object.group?.removeWithUpdate(object);
+        detachObjectFromGroup(object);
 
         this._object = object;
 
@@ -90,15 +92,15 @@ export const createObjectFitClass = (ns: IFabricNS): IObjectFitConstructor => {
     }
 
     constructor(
-      object: fabric.Object | null | undefined,
-      options: IObjectFitConstructorOptions
+      object?: fabric.Object | null | undefined,
+      options: IObjectFitConstructorOptions = {}
     ) {
       super(undefined, { ...fabricObjectDefaults });
 
       const {
-        mode,
-        width,
-        height,
+        width = NaN,
+        height = NaN,
+        mode = FitMode.FILL,
         useObjectTransform = true,
         enableRecomputeOnScaled = true,
         enableRecomputeOnScaling = false,
@@ -156,13 +158,23 @@ export const createObjectFitClass = (ns: IFabricNS): IObjectFitConstructor => {
     }
 
     recompute() {
+      if (this._objectGroup) {
+        if (Number.isNaN(this.width)) {
+          this.width = this._objectGroup.width!;
+        }
+
+        if (Number.isNaN(this.height)) {
+          this.height = this._objectGroup.height!;
+        }
+      }
+
       const { width, height, mode, position } = this;
 
       const currentTransformOptions = this.getCurrentTransformOptions();
 
       this.resetContainer();
 
-      if (this._objectGroup) {
+      if (this._objectGroup && !Number.isNaN(width) && !Number.isNaN(height)) {
         const fittedObject = getFittedObject(
           this._objectGroup,
           {
@@ -236,12 +248,12 @@ export const createObjectFitClass = (ns: IFabricNS): IObjectFitConstructor => {
       const currentObject = this._object;
 
       if (this._objectGroup) {
-        this._objectGroup.group?.removeWithUpdate(this._objectGroup);
+        detachObjectFromGroup(this._objectGroup);
         this._objectGroup = null;
       }
 
       if (this._object) {
-        this._object.group?.removeWithUpdate(this._object);
+        detachObjectFromGroup(this._object);
 
         this._object.setCoords();
 
@@ -259,17 +271,20 @@ export const createObjectFitClass = (ns: IFabricNS): IObjectFitConstructor => {
       return currentObject;
     }
 
-    toObject(): IObjectFitSerialized {
-      return ns.util.object.extend((this as any).callSuper("toObject"), {
-        mode: this.mode,
-        width: this.width,
-        height: this.height,
-        position: {
-          x: this.position.x?.toJSON(),
-          y: this.position.y?.toJSON()
-        },
-        object: this.object?.toObject()
-      });
+    toObject(propertiesToInclude?: string[]): IObjectFitSerialized {
+      return ns.util.object.extend(
+        (this as any).callSuper(
+          "toObject",
+          ["mode", "width", "height"].concat(propertiesToInclude ?? [])
+        ),
+        {
+          position: {
+            x: this.position.x?.toJSON(),
+            y: this.position.y?.toJSON()
+          },
+          object: this.object?.toObject()
+        }
+      );
     }
 
     static fromObject(objectFitObject: IObjectFitSerialized, callback?: any) {

src/misc/Fabric/detachObjectFromGroup.ts

@@ -1,7 +1,5 @@
 import { fabric } from "fabric";
 
 export const detachObjectFromGroup = (object: fabric.Object) => {
-  if (object.group) {
-    object.group.removeWithUpdate(object);
-  }
+  object.group?.removeWithUpdate(object);
 };

src/misc/Point/parsePoint.ts

@@ -30,7 +30,7 @@ export const parsePoint = (
 
       default: {
         const type = (serializedPoint as IPointSerialized).type;
-        throw new Error(`The point type "${type}" are not implemented`);
+        throw new Error(`The point type "${type}" are not implemented.`);
       }
     }
   } catch (_err) {

src/misc/getObjectMaskedByRectangle.ts

@@ -31,8 +31,10 @@ export const getObjectMaskedByRectangle = (
 
   group.add(object);
   group._updateObjectsCoords();
+
   group.clipPath = groupMask;
 
   group.setCoords();
+
   return group;
 };

src/types/IObjectFit.ts

@@ -34,5 +34,5 @@ export interface IObjectFit extends fabric.Group {
 
   recompute(): void;
 
-  toObject(): IObjectFitSerialized;
+  toObject(propertiesToInclude?: string[]): IObjectFitSerialized;
 }

src/types/IObjectFitConstructor.ts

@@ -5,8 +5,8 @@ import { IObjectFitSerialized } from "./IObjectFitSerialized";
 
 export interface IObjectFitConstructor {
   new (
-    object: fabric.Object | null | undefined,
-    options: IObjectFitConstructorOptions
+    object?: fabric.Object | null | undefined,
+    options?: IObjectFitConstructorOptions
   ): IObjectFit;
 
   fromObject(

src/types/IObjectFitConstructorOptions.ts

@@ -1,12 +1,12 @@
-import { IObjectFit } from "..";
+import { IObjectFit } from "../types/IObjectFit";
 import { IGetFittedObjectOptions } from "./IGetFittedObjectOptions";
 
-export type IObjectFitConstructorOptions = IGetFittedObjectOptions &
-  Partial<
+export type IObjectFitConstructorOptions = Partial<
+  IGetFittedObjectOptions &
     Pick<
       IObjectFit,
       | "useObjectTransform"
       | "enableRecomputeOnScaled"
       | "enableRecomputeOnScaling"
     >
-  >;
+>;