fabric 6.5.3 → 6.6.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## [next]
 
+## [6.6.0]
+
+- feat(): Add webp to ImageFormat [#10435](https://github.com/fabricjs/fabric.js/pull/10435)
+- fix(): Allow for node-canvas images to work with the FabricImage class by making classList optional. [#10412](https://github.com/fabricjs/fabric.js/pull/10412)
+- fix(): Allow for brush subclassing moving some properties from private to protected. [#10416](https://github.com/fabricjs/fabric.js/pull/10416)
+- feat(): Add method toBlob. [#3283](https://github.com/fabricjs/fabric.js/issues/3283)
+
+## [6.5.4]
+
+- docs() perf(): Reorder caching conditions for most common scenario and docs fixes. [#10366](https://github.com/fabricjs/fabric.js/pull/10366)
+
 ## [6.5.3]
 
 - fix(ColorMatrix): Restore correct alpha for JS colorMatrix filter [#10313](https://github.com/fabricjs/fabric.js/pull/10313)

package/CONTRIBUTING.md

@@ -254,7 +254,7 @@ Don't forget to unlink the package once you're done.
 [website]: http://fabricjs.com/
 [docs]: http://fabricjs.com/docs
 [demos]: http://fabricjs.com/demos/
-[gotchas]: http://fabricjs.com/fabric-gotchas
+[gotchas]: https://fabricjs.com/docs/old-docs/gotchas/
 [demo_file]: https://github.com/fabricjs/fabricjs.com/blob/gh-pages/posts/demos/_posts/2020-2-15-custom-control-render.md
 [jsfiddles]: https://jsfiddle.net/user/fabricjs/fiddles/
 [codepens]: https://codepen.io/tag/fabricjs

package/README.md

@@ -5,6 +5,7 @@
 A **simple and powerful Javascript HTML5 canvas library**.
 
 - [**Website**][website]
+- [**Old V5 documentation**](https://fabric5.fabricjs.com)
 - [**GOTCHAS**][gotchas]
 - [**Contributing, Developing and More**](CONTRIBUTING.md)
 
@@ -42,8 +43,8 @@ A **simple and powerful Javascript HTML5 canvas library**.
 - Out of the box interactions such as scale, move, rotate, skew, group...
 - Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
 - `JPG`, `PNG`, `JSON` and `SVG` i/o
-- [Typed and modular](#migrating-to-v6)
-- [Unit tested](CONTRIBUTING.md#%F0%9F%A7%AA%20testing)
+- Typed and modular
+- [Unit tested](CONTRIBUTING.md#-testing)
 
 #### Supported Browsers/Environments
 
@@ -58,14 +59,16 @@ A **simple and powerful Javascript HTML5 canvas library**.
 |    IE11     |        ❌         |
 |   Node.js   |        ✔️         | [Node.js installation](#nodejs) |
 
-Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
+Fabric.js does not use polyfills by default, or tries to keep it at minimum. the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
 
 ## Installation
 
 ```bash
 $ npm install fabric --save
-// or
+# or use yarn
 $ yarn add fabric
+# or use pnpm
+$ pnpm install fabric
 ```
 
 #### Browser
@@ -114,7 +117,7 @@ import { fabric } from 'fabric';
 
 </details>
 
-<details><summary><b>ReactJS</b></summary>
+<details><summary><b>React.js</b></summary>
 
 ```tsx
 import React, { useEffect, useRef } from 'react';
@@ -224,7 +227,7 @@ See our ready to use [templates](./.codesandbox/templates/).
 [codepens]: https://codepen.io/tag/fabricjs
 [contributors]: https://github.com/fabricjs/fabric.js/graphs/contributors
 [demos]: http://fabricjs.com/demos/
-[gotchas]: http://fabricjs.com/fabric-gotchas
+[gotchas]: https://fabricjs.com/docs/old-docs/gotchas/
 [html-to-image]: https://github.com/bubkoo/html-to-image
 [jsdelivr]: https://www.jsdelivr.com/package/npm/fabric
 [jsdom]: https://github.com/jsdom/jsdom

package/dist/index.js

@@ -411,7 +411,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.5.3";
+  var version = "6.6.0";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -1585,6 +1585,9 @@
   const isHTMLCanvas = canvas => {
     return !!canvas && canvas.getContext !== undefined;
   };
+  const toBlob = (canvasEl, format, quality) => new Promise((resolve, _) => {
+    canvasEl.toBlob(resolve, "image/".concat(format), quality);
+  });
 
   /**
    * Transforms degrees to radians.
@@ -4146,6 +4149,17 @@
       const finalMultiplier = multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
       return toDataURL(this.toCanvasElement(finalMultiplier, options), format, quality);
     }
+    toBlob() {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        format = 'png',
+        quality = 1,
+        multiplier = 1,
+        enableRetinaScaling = false
+      } = options;
+      const finalMultiplier = multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
+      return toBlob(this.toCanvasElement(finalMultiplier, options), format, quality);
+    }
 
     /**
      * Create a new HTMLCanvas element painted with the current canvas content.
@@ -7129,7 +7143,7 @@
     }
 
     /**
-     * When set to `true`, force the object to have its own cache, even if it is inside a group
+     * When returns `true`, force the object to have its own cache, even if it is inside a group
      * it may be needed when your object behave in a particular way on the cache and always needs
      * its own isolated canvas to render correctly.
      * Created to be overridden
@@ -7137,6 +7151,7 @@
      * @returns Boolean
      */
     needsItsOwnCache() {
+      // TODO re-evaluate this shadow condition
       if (this.paintFirst === STROKE && this.hasFill() && this.hasStroke() && !!this.shadow) {
         return true;
       }
@@ -7150,13 +7165,13 @@
      * Decide if the object should cache or not. Create its own cache level
      * objectCaching is a global flag, wins over everything
      * needsItsOwnCache should be used when the object drawing method requires
-     * a cache step. None of the fabric classes requires it.
+     * a cache step.
      * Generally you do not cache objects in groups because the group outside is cached.
      * Read as: cache if is needed, or if the feature is enabled but we are not already caching.
      * @return {Boolean}
      */
     shouldCache() {
-      this.ownCaching = this.needsItsOwnCache() || this.objectCaching && (!this.parent || !this.parent.isOnACache());
+      this.ownCaching = this.objectCaching && (!this.parent || !this.parent.isOnACache()) || this.needsItsOwnCache();
       return this.ownCaching;
     }
 
@@ -7256,7 +7271,10 @@
     }
 
     /**
-     * Check if cache is dirty
+     * Check if cache is dirty and if is dirty clear the context.
+     * This check has a big side effect, it changes the underlying cache canvas if necessary.
+     * Do not call this method on your own to check if the cache is dirty, because if it is,
+     * it is also going to wipe the cache. This is badly designed and needs to be fixed.
      * @param {Boolean} skipCanvas skip canvas checks because this object is painted
      * on parent canvas.
      */
@@ -7689,6 +7707,10 @@
       let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1);
     }
+    toBlob() {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return toBlob(this.toCanvasElement(options), options.format || 'png', options.quality || 1);
+    }
 
     /**
      * Returns true if any of the specified types is identical to the type of an instance
@@ -11668,9 +11690,9 @@
     }
 
     /**
-     * Decide if the object should cache or not. Create its own cache level
+     * Decide if the group should cache or not. Create its own cache level
      * needsItsOwnCache should be used when the object drawing method requires
-     * a cache step. None of the fabric classes requires it.
+     * a cache step.
      * Generally you do not cache objects in groups because the group is already cached.
      * @return {Boolean}
      */
@@ -13042,6 +13064,7 @@
     string: lang_string,
     stylesFromArray: stylesFromArray,
     stylesToArray: stylesToArray,
+    toBlob: toBlob,
     toDataURL: toDataURL,
     toFixed: toFixed,
     transformPath: transformPath,
@@ -23668,11 +23691,7 @@
     }
 
     /**
-     * Decide if the object should cache or not. Create its own cache level
-     * objectCaching is a global flag, wins over everything
-     * needsItsOwnCache should be used when the object drawing method requires
-     * a cache step. None of the fabric classes requires it.
-     * Generally you do not cache objects in groups because the group outside is cached.
+     * Decide if the object should cache or not. The Active selection never caches
      * @return {Boolean}
      */
     shouldCache() {
@@ -24198,13 +24217,14 @@
      * @param {Partial<TSize>} [size] Options object
      */
     setElement(element) {
+      var _element$classList;
       let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       this.removeTexture(this.cacheKey);
       this.removeTexture("".concat(this.cacheKey, "_filtered"));
       this._element = element;
       this._originalElement = element;
       this._setWidthHeight(size);
-      element.classList.add(FabricImage.CSS_CANVAS);
+      (_element$classList = element.classList) === null || _element$classList === void 0 || _element$classList.add(FabricImage.CSS_CANVAS);
       if (this.filters.length !== 0) {
         this.applyFilters();
       }
@@ -24523,11 +24543,11 @@
     }
 
     /**
-     * Decide if the object should cache or not. Create its own cache level
+     * Decide if the FabricImage should cache or not. Create its own cache level
      * needsItsOwnCache should be used when the object drawing method requires
-     * a cache step. None of the fabric classes requires it.
+     * a cache step.
      * Generally you do not cache objects in groups because the group outside is cached.
-     * This is the special image version where we would like to avoid caching where possible.
+     * This is the special Image version where we would like to avoid caching where possible.
      * Essentially images do not benefit from caching. They may require caching, and in that
      * case we do it. Also caching an image usually ends in a loss of details.
      * A full performance audit should be done.
@@ -24671,7 +24691,9 @@
 
     /**
      * Default CSS class name for canvas
+     * Will be removed from fabric 7
      * @static
+     * @deprecated
      * @type String
      * @default
      */