fabric 6.6.4 → 6.6.6

package/CHANGELOG.md

@@ -1,8 +1,17 @@
 # Changelog
 
+## [6.6.6]
+
+- fix(): Polygon controls util should invalidate cache [#10628](https://github.com/fabricjs/fabric.js/pull/10628)
+- fix(): Remove black border in blur and also align JS with WEBGL blur filtering [#10623](https://github.com/fabricjs/fabric.js/pull/10623)
+
+## [6.6.5]
+
+- feat(Text): Support for intl.segmenter in fabric.Text [#10595](https://github.com/fabricjs/fabric.js/pull/10595)
+
 ## [6.6.4]
 
-- chore() properly updated version number
+- chore(): properly updated version number
 
 ## [6.6.3]
 

package/dist/index.js

@@ -411,7 +411,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.6.4";
+  var version = "6.6.6";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -10271,6 +10271,15 @@
    * @return {String} Escaped version of a string
    */
   const escapeXml = string => string.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  let segmenter;
+  const getSegmenter = () => {
+    if (!segmenter) {
+      segmenter = 'Intl' in getFabricWindow() && 'Segmenter' in Intl && new Intl.Segmenter(undefined, {
+        granularity: 'grapheme'
+      });
+    }
+    return segmenter;
+  };
 
   /**
    * Divide a string in the user perceived single units
@@ -10278,6 +10287,21 @@
    * @return {Array} array containing the graphemes
    */
   const graphemeSplit = textstring => {
+    segmenter || getSegmenter();
+    if (segmenter) {
+      const segments = segmenter.segment(textstring);
+      return Array.from(segments).map(_ref => {
+        let {
+          segment
+        } = _ref;
+        return segment;
+      });
+    }
+
+    //Fallback
+    return graphemeSplitImpl(textstring);
+  };
+  const graphemeSplitImpl = textstring => {
     const graphemes = [];
     for (let i = 0, chr; i < textstring.length; i++) {
       if ((chr = getWholeChar(textstring, i)) === false) {
@@ -25493,6 +25517,7 @@
     const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, poly.calcOwnMatrix());
     poly.points[pointIndex] = mouseLocalPosition.add(poly.pathOffset);
     poly.setDimensions();
+    poly.set('dirty', true);
     return true;
   };
 
@@ -26414,7 +26439,7 @@
   _defineProperty(BlendImage, "uniformLocations", ['uTransformMatrix', 'uImage']);
   classRegistry.setClass(BlendImage);
 
-  const fragmentSource$b = "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform vec2 uDelta;\n    varying vec2 vTexCoord;\n    const float nSamples = 15.0;\n    vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n    float random(vec3 scale) {\n      /* use the fragment position for a different seed per-pixel */\n      return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n    }\n    void main() {\n      vec4 color = vec4(0.0);\n      float total = 0.0;\n      float offset = random(v3offset);\n      for (float t = -nSamples; t <= nSamples; t++) {\n        float percent = (t + offset - 0.5) / nSamples;\n        float weight = 1.0 - abs(percent);\n        color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n        total += weight;\n      }\n      gl_FragColor = color / total;\n    }\n  ";
+  const fragmentSource$b = "\n    precision highp float;\n    uniform sampler2D uTexture;\n    uniform vec2 uDelta;\n    varying vec2 vTexCoord;\n    const float nSamples = 15.0;\n    vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n    float random(vec3 scale) {\n      /* use the fragment position for a different seed per-pixel */\n      return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n    }\n    void main() {\n      vec4 color = vec4(0.0);\n      float totalC = 0.0;\n      float totalA = 0.0;\n      float offset = random(v3offset);\n      for (float t = -nSamples; t <= nSamples; t++) {\n        float percent = (t + offset - 0.5) / nSamples;\n        vec4 sample = texture2D(uTexture, vTexCoord + uDelta * percent);\n        float weight = 1.0 - abs(percent);\n        float alpha = weight * sample.a;\n        color.rgb += sample.rgb * alpha;\n        color.a += alpha;\n        totalA += weight;\n        totalC += alpha;\n      }\n      gl_FragColor.rgb = color.rgb / totalC;\n      gl_FragColor.a = color.a / totalA;\n    }\n  ";
 
   const blurDefaultValues = {
     blur: 0
@@ -26451,65 +26476,102 @@
         this.applyTo2d(options);
       }
     }
-    applyTo2d(options) {
-      options.imageData = this.simpleBlur(options);
-    }
-    simpleBlur(_ref) {
+    applyTo2d(_ref) {
       let {
-        ctx,
-        imageData,
-        filterBackend: {
-          resources
+        imageData: {
+          data,
+          width,
+          height
         }
       } = _ref;
-      const {
-        width,
-        height
-      } = imageData;
-      if (!resources.blurLayer1) {
-        resources.blurLayer1 = createCanvasElement();
-        resources.blurLayer2 = createCanvasElement();
+      // this code mimic the shader for output consistency
+      // it samples 31 pixels across the image over a distance that depends from the blur value.
+      this.aspectRatio = width / height;
+      this.horizontal = true;
+      let blurValue = this.getBlurValue() * width;
+      const imageData = new Uint8ClampedArray(data);
+      const samples = 15;
+      const bytesInRow = 4 * width;
+      for (let i = 0; i < data.length; i += 4) {
+        let r = 0.0,
+          g = 0.0,
+          b = 0.0,
+          a = 0.0,
+          totalA = 0;
+        const minIRow = i - i % bytesInRow;
+        const maxIRow = minIRow + bytesInRow;
+        // for now let's keep noise out of the way
+        // let pixelOffset = 0;
+        // const offset = Math.random() * 3;
+        // if (offset > 2) {
+        //   pixelOffset = 4;
+        // } else if (offset < 1) {
+        //   pixelOffset = -4;
+        // }
+        for (let j = -samples + 1; j < samples; j++) {
+          const percent = j / samples;
+          const distance = Math.floor(blurValue * percent) * 4;
+          const weight = 1 - Math.abs(percent);
+          let sampledPixel = i + distance; // + pixelOffset;
+          // try to implement edge mirroring
+          if (sampledPixel < minIRow) {
+            sampledPixel = minIRow;
+          } else if (sampledPixel > maxIRow) {
+            sampledPixel = maxIRow;
+          }
+          const localAlpha = data[sampledPixel + 3] * weight;
+          r += data[sampledPixel] * localAlpha;
+          g += data[sampledPixel + 1] * localAlpha;
+          b += data[sampledPixel + 2] * localAlpha;
+          a += localAlpha;
+          totalA += weight;
+        }
+        imageData[i] = r / a;
+        imageData[i + 1] = g / a;
+        imageData[i + 2] = b / a;
+        imageData[i + 3] = a / totalA;
+      }
+      this.horizontal = false;
+      blurValue = this.getBlurValue() * height;
+      for (let i = 0; i < imageData.length; i += 4) {
+        let r = 0.0,
+          g = 0.0,
+          b = 0.0,
+          a = 0.0,
+          totalA = 0;
+        const minIRow = i % bytesInRow;
+        const maxIRow = imageData.length - bytesInRow + minIRow;
+        // for now let's keep noise out of the way
+        // let pixelOffset = 0;
+        // const offset = Math.random() * 3;
+        // if (offset > 2) {
+        //   pixelOffset = bytesInRow;
+        // } else if (offset < 1) {
+        //   pixelOffset = -bytesInRow;
+        // }
+        for (let j = -samples + 1; j < samples; j++) {
+          const percent = j / samples;
+          const distance = Math.floor(blurValue * percent) * bytesInRow;
+          const weight = 1 - Math.abs(percent);
+          let sampledPixel = i + distance; // + pixelOffset;
+          // try to implement edge mirroring
+          if (sampledPixel < minIRow) {
+            sampledPixel = minIRow;
+          } else if (sampledPixel > maxIRow) {
+            sampledPixel = maxIRow;
+          }
+          const localAlpha = imageData[sampledPixel + 3] * weight;
+          r += imageData[sampledPixel] * localAlpha;
+          g += imageData[sampledPixel + 1] * localAlpha;
+          b += imageData[sampledPixel + 2] * localAlpha;
+          a += localAlpha;
+          totalA += weight;
+        }
+        data[i] = r / a;
+        data[i + 1] = g / a;
+        data[i + 2] = b / a;
+        data[i + 3] = a / totalA;
       }
-      const canvas1 = resources.blurLayer1;
-      const canvas2 = resources.blurLayer2;
-      if (canvas1.width !== width || canvas1.height !== height) {
-        canvas2.width = canvas1.width = width;
-        canvas2.height = canvas1.height = height;
-      }
-      const ctx1 = canvas1.getContext('2d'),
-        ctx2 = canvas2.getContext('2d'),
-        nSamples = 15,
-        blur = this.blur * 0.06 * 0.5;
-      let random, percent, j, i;
-
-      // load first canvas
-      ctx1.putImageData(imageData, 0, 0);
-      ctx2.clearRect(0, 0, width, height);
-      for (i = -nSamples; i <= nSamples; i++) {
-        random = (Math.random() - 0.5) / 4;
-        percent = i / nSamples;
-        j = blur * percent * width + random;
-        ctx2.globalAlpha = 1 - Math.abs(percent);
-        ctx2.drawImage(canvas1, j, random);
-        ctx1.drawImage(canvas2, 0, 0);
-        ctx2.globalAlpha = 1;
-        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
-      }
-      for (i = -nSamples; i <= nSamples; i++) {
-        random = (Math.random() - 0.5) / 4;
-        percent = i / nSamples;
-        j = blur * percent * height + random;
-        ctx2.globalAlpha = 1 - Math.abs(percent);
-        ctx2.drawImage(canvas1, random, j);
-        ctx1.drawImage(canvas2, 0, 0);
-        ctx2.globalAlpha = 1;
-        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
-      }
-      ctx.drawImage(canvas1, 0, 0);
-      const newImageData = ctx.getImageData(0, 0, canvas1.width, canvas1.height);
-      ctx1.globalAlpha = 1;
-      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
-      return newImageData;
     }
 
     /**
@@ -26525,32 +26587,33 @@
     isNeutralState() {
       return this.blur === 0;
     }
-
-    /**
-     * choose right value of image percentage to blur with
-     * @returns {Array} a numeric array with delta values
-     */
-    chooseRightDelta() {
+    getBlurValue() {
       let blurScale = 1;
-      const delta = [0, 0];
-      if (this.horizontal) {
-        if (this.aspectRatio > 1) {
+      const {
+        horizontal,
+        aspectRatio
+      } = this;
+      if (horizontal) {
+        if (aspectRatio > 1) {
           // image is wide, i want to shrink radius horizontal
-          blurScale = 1 / this.aspectRatio;
+          blurScale = 1 / aspectRatio;
         }
       } else {
-        if (this.aspectRatio < 1) {
+        if (aspectRatio < 1) {
           // image is tall, i want to shrink radius vertical
-          blurScale = this.aspectRatio;
+          blurScale = aspectRatio;
         }
       }
-      const blur = blurScale * this.blur * 0.12;
-      if (this.horizontal) {
-        delta[0] = blur;
-      } else {
-        delta[1] = blur;
-      }
-      return delta;
+      return blurScale * this.blur * 0.12;
+    }
+
+    /**
+     * choose right value of image percentage to blur with
+     * @returns {Array} a numeric array with delta values
+     */
+    chooseRightDelta() {
+      const blur = this.getBlurValue();
+      return this.horizontal ? [blur, 0] : [0, blur];
     }
   }
   /**