fabric 6.5.1 → 6.5.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [next]
 
+## [6.5.3]
+
+- fix(ColorMatrix): Restore correct alpha for JS colorMatrix filter [#10313](https://github.com/fabricjs/fabric.js/pull/10313)
+
+## [6.5.2]
+
+- chore(): Reduce some verbose code [#10311](https://github.com/fabricjs/fabric.js/pull/10311)
+- ci(): Test node 22 again [#10310](https://github.com/fabricjs/fabric.js/pull/10310)
+- chore(TS): Try to remove all TS-ERROR directives [#10309](https://github.com/fabricjs/fabric.js/pull/10309)
+- chore(): Make TS config more strict [#10308](https://github.com/fabricjs/fabric.js/pull/10308)
+- fix(Color): Support uppercase keywords [#10300](https://github.com/fabricjs/fabric.js/pull/10300)
+- fix(): The \_setLineDash method has additional side effects, altering the value of strokeDashArray [#10292](https://github.com/fabricjs/fabric.js/issues/10292)
+- fix(): for object caching over invalidating the cache [#10294](https://github.com/fabricjs/fabric.js/pull/10294)
+
 ## [6.5.1]
 
 - fix(TS): Add missing export for type DrawContext [#10281](https://github.com/fabricjs/fabric.js/pull/10281)

package/dist/index.js

@@ -411,7 +411,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.5.1";
+  var version = "6.5.3";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -2381,6 +2381,7 @@
      * @returns {TRGBAColorSource}
      */
     _tryParsingColor(color) {
+      color = color.toLowerCase();
       if (color in ColorNameMap) {
         color = ColorNameMap[color];
       }
@@ -6850,8 +6851,8 @@
         // for sure this ALIASING_LIMIT is slightly creating problem
         // in situation in which the cache canvas gets an upper limit
         // also objectScale contains already scaleX and scaleY
-        width: neededX + ALIASING_LIMIT,
-        height: neededY + ALIASING_LIMIT,
+        width: Math.ceil(neededX + ALIASING_LIMIT),
+        height: Math.ceil(neededY + ALIASING_LIMIT),
         zoomX: objectScale.x,
         zoomY: objectScale.y,
         x: neededX,
@@ -6868,51 +6869,30 @@
     _updateCacheCanvas() {
       const canvas = this._cacheCanvas,
         context = this._cacheContext,
-        dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
-        minCacheSize = config.minCacheSideLimit,
-        width = dims.width,
-        height = dims.height,
-        zoomX = dims.zoomX,
-        zoomY = dims.zoomY,
+        {
+          width,
+          height,
+          zoomX,
+          zoomY,
+          x,
+          y
+        } = this._limitCacheSize(this._getCacheCanvasDimensions()),
         dimensionsChanged = width !== canvas.width || height !== canvas.height,
         zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY;
       if (!canvas || !context) {
         return false;
       }
-      let drawingWidth,
-        drawingHeight,
-        shouldRedraw = dimensionsChanged || zoomChanged,
-        additionalWidth = 0,
-        additionalHeight = 0,
-        shouldResizeCanvas = false;
-      if (dimensionsChanged) {
-        const canvasWidth = this._cacheCanvas.width,
-          canvasHeight = this._cacheCanvas.height,
-          sizeGrowing = width > canvasWidth || height > canvasHeight,
-          sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && canvasWidth > minCacheSize && canvasHeight > minCacheSize;
-        shouldResizeCanvas = sizeGrowing || sizeShrinking;
-        if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) {
-          additionalWidth = width * 0.1;
-          additionalHeight = height * 0.1;
-        }
-      }
-      if (isTextObject(this) && this.path) {
-        shouldRedraw = true;
-        shouldResizeCanvas = true;
-        // IMHO in those lines we are using zoomX and zoomY not the this version.
-        additionalWidth += this.getHeightOfLine(0) * this.zoomX;
-        additionalHeight += this.getHeightOfLine(0) * this.zoomY;
-      }
+      const shouldRedraw = dimensionsChanged || zoomChanged;
       if (shouldRedraw) {
-        if (shouldResizeCanvas) {
-          canvas.width = Math.ceil(width + additionalWidth);
-          canvas.height = Math.ceil(height + additionalHeight);
+        if (width !== canvas.width || height !== canvas.height) {
+          canvas.width = width;
+          canvas.height = height;
         } else {
           context.setTransform(1, 0, 0, 1, 0, 0);
           context.clearRect(0, 0, canvas.width, canvas.height);
         }
-        drawingWidth = dims.x / 2;
-        drawingHeight = dims.y / 2;
+        const drawingWidth = x / 2;
+        const drawingHeight = y / 2;
         this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth;
         this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight;
         context.translate(this.cacheTranslationX, this.cacheTranslationY);
@@ -7387,10 +7367,6 @@
       if (!dashArray || dashArray.length === 0) {
         return;
       }
-      // Spec requires the concatenation of two copies of the dash array when the number of elements is odd
-      if (1 & dashArray.length) {
-        dashArray.push(...dashArray);
-      }
       ctx.setLineDash(dashArray);
     }
 
@@ -15274,9 +15250,7 @@
      * @private
      */
     _resetTransformEventData() {
-      this._target = undefined;
-      this._pointer = undefined;
-      this._absolutePointer = undefined;
+      this._target = this._pointer = this._absolutePointer = undefined;
     }
 
     /**
@@ -18480,8 +18454,6 @@
      * has no other properties, then it is also deleted.  Finally,
      * if the line containing that character has no other characters
      * then it also is deleted.
-     *
-     * @param {string} property The property to compare between characters and text.
      */
     cleanStyle(property) {
       if (!this.styles) {
@@ -18527,7 +18499,6 @@
         graphemeCount += this._textLines[i].length;
       }
       if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) {
-        // @ts-expect-error conspiracy theory of TS
         this[property] = stylePropertyValue;
         this.removeStyle(property);
       }
@@ -21520,10 +21491,8 @@
       }
       const keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap;
       if (e.keyCode in keyMap) {
-        // @ts-expect-error legacy method calling pattern
         this[keyMap[e.keyCode]](e);
       } else if (e.keyCode in this.ctrlKeysMapDown && (e.ctrlKey || e.metaKey)) {
-        // @ts-expect-error legacy method calling pattern
         this[this.ctrlKeysMapDown[e.keyCode]](e);
       } else {
         return;
@@ -21552,7 +21521,6 @@
         return;
       }
       if (e.keyCode in this.ctrlKeysMapUp && (e.ctrlKey || e.metaKey)) {
-        // @ts-expect-error legacy method calling pattern
         this[this.ctrlKeysMapUp[e.keyCode]](e);
       } else {
         return;
@@ -22043,8 +22011,6 @@
       this.__lastLastClickTime = +new Date();
       this.__lastPointer = {};
       this.on('mousedown', this.onMouseDown);
-
-      // @ts-expect-error in reality it is an IText instance
       this.draggableTextDelegate = new DraggableTextDelegate(this);
       super.initBehavior();
     }
@@ -23884,12 +23850,8 @@
         cachedTexture = this.getCachedTexture(cacheKey, source);
       }
       const pipelineState = {
-        originalWidth: source.width ||
-        // @ts-expect-error is this a bug? should this be naturalWidth? or is this the pipeline state?
-        source.originalWidth || 0,
-        originalHeight: source.height ||
-        // @ts-expect-error is this a bug? should this be naturalHeight? or is this the pipeline state?
-        source.originalHeight || 0,
+        originalWidth: source.width || source.naturalWidth || 0,
+        originalHeight: source.height || source.naturalHeight || 0,
         sourceWidth: width,
         sourceHeight: height,
         destinationWidth: width,
@@ -26047,65 +26009,70 @@
         }
       } = _ref;
       const source = new Color(this.color).getSource();
-      const tr = source[0] * this.alpha;
-      const tg = source[1] * this.alpha;
-      const tb = source[2] * this.alpha;
-      const alpha1 = 1 - this.alpha;
+      const alpha = this.alpha;
+      const tr = source[0] * alpha;
+      const tg = source[1] * alpha;
+      const tb = source[2] * alpha;
+      const alpha1 = 1 - alpha;
       for (let i = 0; i < data.length; i += 4) {
         const r = data[i];
         const g = data[i + 1];
         const b = data[i + 2];
+        let oR, oG, oB;
         switch (this.mode) {
           case 'multiply':
-            data[i] = r * tr / 255;
-            data[i + 1] = g * tg / 255;
-            data[i + 2] = b * tb / 255;
+            oR = r * tr / 255;
+            oG = g * tg / 255;
+            oB = b * tb / 255;
             break;
           case 'screen':
-            data[i] = 255 - (255 - r) * (255 - tr) / 255;
-            data[i + 1] = 255 - (255 - g) * (255 - tg) / 255;
-            data[i + 2] = 255 - (255 - b) * (255 - tb) / 255;
+            oR = 255 - (255 - r) * (255 - tr) / 255;
+            oG = 255 - (255 - g) * (255 - tg) / 255;
+            oB = 255 - (255 - b) * (255 - tb) / 255;
             break;
           case 'add':
-            data[i] = r + tr;
-            data[i + 1] = g + tg;
-            data[i + 2] = b + tb;
+            oR = r + tr;
+            oG = g + tg;
+            oB = b + tb;
             break;
           case 'difference':
-            data[i] = Math.abs(r - tr);
-            data[i + 1] = Math.abs(g - tg);
-            data[i + 2] = Math.abs(b - tb);
+            oR = Math.abs(r - tr);
+            oG = Math.abs(g - tg);
+            oB = Math.abs(b - tb);
             break;
           case 'subtract':
-            data[i] = r - tr;
-            data[i + 1] = g - tg;
-            data[i + 2] = b - tb;
+            oR = r - tr;
+            oG = g - tg;
+            oB = b - tb;
             break;
           case 'darken':
-            data[i] = Math.min(r, tr);
-            data[i + 1] = Math.min(g, tg);
-            data[i + 2] = Math.min(b, tb);
+            oR = Math.min(r, tr);
+            oG = Math.min(g, tg);
+            oB = Math.min(b, tb);
             break;
           case 'lighten':
-            data[i] = Math.max(r, tr);
-            data[i + 1] = Math.max(g, tg);
-            data[i + 2] = Math.max(b, tb);
+            oR = Math.max(r, tr);
+            oG = Math.max(g, tg);
+            oB = Math.max(b, tb);
             break;
           case 'overlay':
-            data[i] = tr < 128 ? 2 * r * tr / 255 : 255 - 2 * (255 - r) * (255 - tr) / 255;
-            data[i + 1] = tg < 128 ? 2 * g * tg / 255 : 255 - 2 * (255 - g) * (255 - tg) / 255;
-            data[i + 2] = tb < 128 ? 2 * b * tb / 255 : 255 - 2 * (255 - b) * (255 - tb) / 255;
+            oR = tr < 128 ? 2 * r * tr / 255 : 255 - 2 * (255 - r) * (255 - tr) / 255;
+            oG = tg < 128 ? 2 * g * tg / 255 : 255 - 2 * (255 - g) * (255 - tg) / 255;
+            oB = tb < 128 ? 2 * b * tb / 255 : 255 - 2 * (255 - b) * (255 - tb) / 255;
             break;
           case 'exclusion':
-            data[i] = tr + r - 2 * tr * r / 255;
-            data[i + 1] = tg + g - 2 * tg * g / 255;
-            data[i + 2] = tb + b - 2 * tb * b / 255;
+            oR = tr + r - 2 * tr * r / 255;
+            oG = tg + g - 2 * tg * g / 255;
+            oB = tb + b - 2 * tb * b / 255;
             break;
           case 'tint':
-            data[i] = tr + r * alpha1;
-            data[i + 1] = tg + g * alpha1;
-            data[i + 2] = tb + b * alpha1;
+            oR = tr + r * alpha1;
+            oG = tg + g * alpha1;
+            oB = tb + b * alpha1;
         }
+        data[i] = oR;
+        data[i + 1] = oG;
+        data[i + 2] = oB;
       }
     }
 
@@ -26514,9 +26481,9 @@
       } = _ref;
       const brightness = Math.round(this.brightness * 255);
       for (let i = 0; i < data.length; i += 4) {
-        data[i] = data[i] + brightness;
-        data[i + 1] = data[i + 1] + brightness;
-        data[i + 2] = data[i + 2] + brightness;
+        data[i] += brightness;
+        data[i + 1] += brightness;
+        data[i + 2] += brightness;
       }
     }
     isNeutralState() {
@@ -26588,15 +26555,14 @@
         const r = data[i];
         const g = data[i + 1];
         const b = data[i + 2];
-        if (colorsOnly) {
-          data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255;
-          data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255;
-          data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255;
-        } else {
+        data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255;
+        data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255;
+        data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255;
+        if (!colorsOnly) {
           const a = data[i + 3];
-          data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255;
-          data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255;
-          data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255;
+          data[i] += a * m[3];
+          data[i + 1] += a * m[8];
+          data[i + 2] += a * m[13];
           data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255;
         }
       }
@@ -26643,7 +26609,6 @@
   function createColorMatrixFilter(key, matrix) {
     var _Class;
     const newClass = (_Class = class newClass extends ColorMatrix {
-      //@ts-expect-error TS wants matrix to be exported.
       toObject() {
         return {
           type: this.type,
@@ -26694,7 +26659,6 @@
      * Serialize this filter into JSON.
      * @returns {Object} A JSON representation of this filter.
      */
-    //@ts-expect-error TS doesn't like this toObject
     toObject() {
       return {
         type: this.type,
@@ -27074,20 +27038,21 @@
         }
       } = _ref;
       for (let i = 0, value; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
         switch (this.mode) {
           case 'average':
-            value = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            value = (r + g + b) / 3;
             break;
           case 'lightness':
-            value = (Math.min(data[i], data[i + 1], data[i + 2]) + Math.max(data[i], data[i + 1], data[i + 2])) / 2;
+            value = (Math.min(r, g, b) + Math.max(r, g, b)) / 2;
             break;
           case 'luminosity':
-            value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2];
+            value = 0.21 * r + 0.72 * g + 0.07 * b;
             break;
         }
-        data[i] = value;
-        data[i + 1] = value;
-        data[i + 2] = value;
+        data[i + 2] = data[i + 1] = data[i] = value;
       }
     }
     getCacheKey() {
@@ -27122,9 +27087,9 @@
   _defineProperty(Grayscale, "uniformLocations", ['uMode']);
   classRegistry.setClass(Grayscale);
 
-  const hueRotationDefaultValues = {
+  const hueRotationDefaultValues = _objectSpread2(_objectSpread2({}, colorMatrixDefaultValues), {}, {
     rotation: 0
-  };
+  });
 
   /**
    * HueRotation filter class
@@ -27143,16 +27108,7 @@
         aThird = 1 / 3,
         aThirdSqtSin = Math.sqrt(aThird) * sine,
         OneMinusCos = 1 - cosine;
-      this.matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
-      this.matrix[0] = cosine + OneMinusCos / 3;
-      this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin;
-      this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin;
-      this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin;
-      this.matrix[6] = cosine + aThird * OneMinusCos;
-      this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin;
-      this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin;
-      this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin;
-      this.matrix[12] = cosine + aThird * OneMinusCos;
+      this.matrix = [cosine + OneMinusCos / 3, aThird * OneMinusCos - aThirdSqtSin, aThird * OneMinusCos + aThirdSqtSin, 0, 0, aThird * OneMinusCos + aThirdSqtSin, cosine + aThird * OneMinusCos, aThird * OneMinusCos - aThirdSqtSin, 0, 0, aThird * OneMinusCos - aThirdSqtSin, aThird * OneMinusCos + aThirdSqtSin, cosine + aThird * OneMinusCos, 0, 0, 0, 0, 0, 1, 0];
     }
     isNeutralState() {
       return this.rotation === 0;
@@ -27161,8 +27117,6 @@
       this.calculateMatrix();
       super.applyTo(options);
     }
-
-    //@ts-expect-error TS and classes with different methods
     toObject() {
       return {
         type: this.type,
@@ -27932,10 +27886,13 @@
       } = _ref;
       const adjust = -this.saturation;
       for (let i = 0; i < data.length; i += 4) {
-        const max = Math.max(data[i], data[i + 1], data[i + 2]);
-        data[i] += max !== data[i] ? (max - data[i]) * adjust : 0;
-        data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0;
-        data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const max = Math.max(r, g, b);
+        data[i] += max !== r ? (max - r) * adjust : 0;
+        data[i + 1] += max !== g ? (max - g) * adjust : 0;
+        data[i + 2] += max !== b ? (max - b) * adjust : 0;
       }
     }
 
@@ -27999,12 +27956,15 @@
       } = _ref;
       const adjust = -this.vibrance;
       for (let i = 0; i < data.length; i += 4) {
-        const max = Math.max(data[i], data[i + 1], data[i + 2]);
-        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const max = Math.max(r, g, b);
+        const avg = (r + g + b) / 3;
         const amt = Math.abs(max - avg) * 2 / 255 * adjust;
-        data[i] += max !== data[i] ? (max - data[i]) * amt : 0;
-        data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0;
-        data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0;
+        data[i] += max !== r ? (max - r) * amt : 0;
+        data[i + 1] += max !== g ? (max - g) * amt : 0;
+        data[i + 2] += max !== b ? (max - b) * amt : 0;
       }
     }