fabric 6.7.0 → 6.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [next]
+
+## [6.8.0]
+
+- fix(): CWE-1333 CWE-400 CWE-730 Simplify some regexes in order to avoid slowness with craft bad string #10746
+- fix(): CWE-1333 CWE-400 CWE-730 in Text.ts regex #10745
+- fix(StaticCanvas): After executing loadFromJSON, it unexpectedly adds an objects property to the canvas. #10741
+- fix(textarea): A form field element has neither an id nor a name attribute. #10172
+- fix(Canvas): The mouse enter and leave events of child elements will be executed twice. #10699
+- chore(): Remove mouse wheel console warning by setting default explicitly. #10712
+- fix(): fix rendering of text when line height is set to 0 #10785
+
+## [6.7.1]
+
+- fix(SVGParser): Corrected CSS rule parsing for multiple style tags. [#10688](https://github.com/fabricjs/fabric.js/issues/10683)
+
 ## [6.7.0]
 
 - feat(Text): Add support for text decoration tickness [#10643](https://github.com/fabricjs/fabric.js/pull/10643)

package/dist/index.js

@@ -411,7 +411,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.7.0";
+  var version = "6.8.0";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -2255,6 +2255,8 @@
     viewportTransform: [...iMatrix]
   };
 
+  const _excluded$j = ["objects"];
+
   /**
    * Having both options in TCanvasSizeOptions set to true transform the call in a calcOffset
    * Better try to restrict with types to avoid confusion.
@@ -3272,9 +3274,12 @@
       }
 
       // parse json if it wasn't already
-      const serialized = typeof json === 'string' ? JSON.parse(json) : json;
+      const _ref2 = typeof json === 'string' ? JSON.parse(json) : json,
+        {
+          objects = []
+        } = _ref2,
+        serialized = _objectWithoutProperties(_ref2, _excluded$j);
       const {
-        objects = [],
         backgroundImage,
         background,
         overlayImage,
@@ -3294,8 +3299,8 @@
         clipPath
       }, {
         signal
-      })]).then(_ref2 => {
-        let [enlived, enlivedMap] = _ref2;
+      })]).then(_ref3 => {
+        let [enlived, enlivedMap] = _ref3;
         this.clear();
         this.add(...enlived);
         this.set(serialized);
@@ -3893,6 +3898,8 @@
     return moveX || moveY;
   };
 
+  const normalizeWs = value => value.replace(/\s+/g, ' ');
+
   /**
    * Map of the 148 color names with HEX code
    * @see: https://www.w3.org/TR/css3-color/#svg-color
@@ -4052,6 +4059,10 @@
    * Regex matching color in RGB or RGBA formats (ex: `rgb(0, 0, 0)`, `rgba(255, 100, 10, 0.5)`, `rgba( 255 , 100 , 10 , 0.5 )`, `rgb(1,1,1)`, `rgba(100%, 60%, 10%, 0.5)`)
    * Also matching rgba(r g b / a) as per new specs
    * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
+   *
+   * In order to avoid performance issues, you have to clean the input string for this regex from multiple spaces before.
+   * ex: colorString.replace(/\s+/g, ' ');
+   *
    * Formal syntax at the time of writing:
    * <rgb()> =
    *  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
@@ -4063,35 +4074,35 @@
    *
    * /^          # Beginning of the string
    * rgba?       # "rgb" or "rgba"
-   * \(\s*       # Opening parenthesis and optional whitespace
+   * \(\s?       # Opening parenthesis and zero or one whitespace character
    * (\d{0,3}    # 0 to three digits R channel
    *  (?:\.\d+)? # Optional decimal with one or more digits
    * )           # End of capturing group for the first color component
    * %?          # Optional percent sign after the first color component
-   * \s*         # Optional whitespace
+   * \s?         # Zero or one whitespace character
    * [\s|,]      # Separator between color components can be a space or comma
-   * \s*         # Optional whitespace
+   * \s?         # Zero or one whitespace character
    * (\d{0,3}    # 0 to three digits G channel
    *  (?:\.\d+)? # Optional decimal with one or more digits
    * )           # End of capturing group for the second color component
    * %?          # Optional percent sign after the second color component
-   * \s*         # Optional whitespace
+   * \s?         # Zero or one whitespace character
    * [\s|,]      # Separator between color components can be a space or comma
-   * \s*         # Optional whitespace
+   * \s?         # Zero or one whitespace character
    * (\d{0,3}    # 0 to three digits B channel
    *  (?:\.\d+)? # Optional decimal with one or more digits
    * )           # End of capturing group for the third color component
    * %?          # Optional percent sign after the third color component
-   * \s*         # Optional whitespace
+   * \s?         # Zero or one whitespace character
    * (?:         # Beginning of non-capturing group for alpha value
-   *  \s*        # Optional whitespace
+   *  \s?        # Zero or one whitespace character
    *  [,/]       # Comma or slash separator for alpha value
-   *  \s*        # Optional whitespace
+   *  \s?        # Zero or one whitespace character
    *  (\d{0,3}   # Zero to three digits
    *    (?:\.\d+)? # Optional decimal with one or more digits
    *  )          # End of capturing group for alpha value
    *  %?         # Optional percent sign after alpha value
-   *  \s*        # Optional whitespace
+   *  \s?        # Zero or one whitespace character
    * )?          # End of non-capturing group for alpha value (optional)
    * \)          # Closing parenthesis
    * $           # End of the string
@@ -4101,12 +4112,14 @@
    * WARNING this regex doesn't fail on off spec colors. it matches everything that could be a color.
    * So the spec does not allow for `rgba(30 , 45%  35, 49%)` but this will work anyways for us
    */
-  const reRGBa = () => /^rgba?\(\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*(?:\s*[,/]\s*(\d{0,3}(?:\.\d+)?%?)\s*)?\)$/i;
+  const reRGBa = () => /^rgba?\(\s?(\d{0,3}(?:\.\d+)?%?)\s?[\s|,]\s?(\d{0,3}(?:\.\d+)?%?)\s?[\s|,]\s?(\d{0,3}(?:\.\d+)?%?)\s?(?:\s?[,/]\s?(\d{0,3}(?:\.\d+)?%?)\s?)?\)$/i;
 
   /**
-   * Regex matching color in HSL or HSLA formats (ex: hsl(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))
-   * Also matching rgba(r g b / a) as per new specs
+   * Regex matching color in HSL or HSLA formats (ex: hsl(0deg 0%, 0%), hsla(160, 100, 10, 0.5), hsla( 180 , 100 , 10 , 0.5 ), hsl(1,1,1))
+   * Also matching hsla(h s l / a) as per new specs
    * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+   * In order to avoid performance issues, you have to clean the input string for this regex from multiple spaces before.
+   * ex: colorString.replace(/\s+/g, ' ');
    * Formal syntax at the time of writing:
    * <hsl()> =
    *   hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
@@ -4123,30 +4136,30 @@
    * Regular expression for matching an hsla or hsl CSS color value
    *
    * /^hsla?\(         // Matches the beginning of the string and the opening parenthesis of "hsl" or "hsla"
-   * \s*               // Matches any whitespace characters (space, tab, etc.) zero or more times
+   * \s?               // Matches any whitespace character (space, tab, etc.) zero or one time
    * (\d{0,3}          // Hue: 0 to three digits - start capture in a group
    * (?:\.\d+)?        // Hue: Optional (non capture group) decimal with one or more digits.
    * (?:deg|turn|rad)? // Hue: Optionally include suffix deg or turn or rad
    * )                 // Hue: End capture group
-   * \s*               // Matches any whitespace characters zero or more times
+   * \s?               // Matches any whitespace character zero or one time
    * [\s|,]            // Matches a space, tab or comma
-   * \s*               // Matches any whitespace characters zero or more times
+   * \s?               // Matches any whitespace character zero or one time
    * (\d{0,3}          // Saturation: 0 to three digits - start capture in a group
    * (?:\.\d+)?        // Saturation: Optional decimal with one or more digits in a non-capturing group
    * %?)               // Saturation: match optional % character and end capture group
-   * \s*               // Matches any whitespace characters zero or more times
+   * \s?               // Matches any whitespace character zero or one time
    * [\s|,]            // Matches a space, tab or comma
-   * \s*               // Matches any whitespace characters zero or more times
+   * \s?               // Matches any whitespace character zero or one time
    * (\d{0,3}          // Lightness: 0 to three digits - start capture in a group
    * (?:\.\d+)?        // Lightness: Optional decimal with one or more digits in a non-capturing group
    * %?)                // Lightness: match % character and end capture group
-   * \s*               // Matches any whitespace characters zero or more times
+   * \s?               // Matches any whitespace character zero or one time
    * (?:               // Alpha: Begins a non-capturing group for the alpha value
-   *   \s*             // Matches any whitespace characters zero or more times
+   *   \s?             // Matches any whitespace character zero or one time
    *   [,/]            // Matches a comma or forward slash
-   *   \s*             // Matches any whitespace characters zero or more times
+   *   \s?             // Matches any whitespace character zero or one time
    *   (\d*(?:\.\d+)?%?) // Matches zero or more digits, optionally followed by a decimal point and one or more digits, followed by an optional percentage sign and captures it in a group
-   *   \s*             // Matches any whitespace characters zero or more times
+   *   \s?             // Matches any whitespace character zero or one time
    * )?                // Makes the alpha value group optional
    * \)                // Matches the closing parenthesis
    * $/i               // Matches the end of the string and sets the regular expression to case-insensitive mode
@@ -4154,7 +4167,7 @@
    * WARNING this regex doesn't fail on off spec colors. It matches everything that could be a color.
    * So the spec does not allow `hsl(30 , 45%  35, 49%)` but this will work anyways for us.
    */
-  const reHSLa = () => /^hsla?\(\s*([+-]?\d{0,3}(?:\.\d+)?(?:deg|turn|rad)?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i;
+  const reHSLa = () => /^hsla?\(\s?([+-]?\d{0,3}(?:\.\d+)?(?:deg|turn|rad)?)\s?[\s|,]\s?(\d{0,3}(?:\.\d+)?%?)\s?[\s|,]\s?(\d{0,3}(?:\.\d+)?%?)\s?(?:\s?[,/]\s?(\d*(?:\.\d+)?%?)\s?)?\)$/i;
 
   /**
    * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)
@@ -4436,7 +4449,7 @@
      * @return {TRGBAColorSource | undefined} source
      */
     static sourceFromRgb(color) {
-      const match = color.match(reRGBa());
+      const match = normalizeWs(color).match(reRGBa());
       if (match) {
         const [r, g, b] = match.slice(1, 4).map(value => {
           const parsedValue = parseFloat(value);
@@ -4477,7 +4490,7 @@
      * @see http://http://www.w3.org/TR/css3-color/#hsl-color
      */
     static sourceFromHsl(color) {
-      const match = color.match(reHSLa());
+      const match = normalizeWs(color).match(reHSLa());
       if (!match) {
         return;
       }
@@ -10600,9 +10613,9 @@
   };
 
   const regex$1 = new RegExp("(".concat(reNum, ")"), 'gi');
-  const cleanupSvgAttribute = attributeValue => attributeValue.replace(regex$1, ' $1 ')
+  const cleanupSvgAttribute = attributeValue => normalizeWs(attributeValue.replace(regex$1, ' $1 ')
   // replace annoying commas and arbitrary whitespace with single spaces
-  .replace(/,/gi, ' ').replace(/\s+/gi, ' ');
+  .replace(/,/gi, ' '));
 
   var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
@@ -13429,17 +13442,11 @@
        */
       _defineProperty(this, "targets", []);
       /**
-       * hold the list of nested targets hovered
+       * hold the list of nested targets hovered in the previous events
        * @type FabricObject[]
        * @private
        */
       _defineProperty(this, "_hoveredTargets", []);
-      /**
-       * hold the list of objects to render
-       * @type FabricObject[]
-       * @private
-       */
-      _defineProperty(this, "_objectsToRender", void 0);
       /**
        * hold a reference to a data structure that contains information
        * on the current on going transform
@@ -14591,7 +14598,9 @@
       functor(canvasElement, "".concat(eventTypePrefix, "move"), this._onMouseMove, addEventOptions);
       functor(canvasElement, "".concat(eventTypePrefix, "out"), this._onMouseOut);
       functor(canvasElement, "".concat(eventTypePrefix, "enter"), this._onMouseEnter);
-      functor(canvasElement, 'wheel', this._onMouseWheel);
+      functor(canvasElement, 'wheel', this._onMouseWheel, {
+        passive: false
+      });
       functor(canvasElement, 'contextmenu', this._onContextMenu);
       functor(canvasElement, 'click', this._onClick);
       // decide if to remove in fabric 7.0
@@ -15464,6 +15473,9 @@
         fireCanvas: true
       });
       for (let i = 0; i < length; i++) {
+        if (targets[i] === target || _hoveredTargets[i] && _hoveredTargets[i] === _hoveredTarget) {
+          continue;
+        }
         this.fireSyntheticInOutEvents('mouse', {
           e,
           target: targets[i],
@@ -15811,15 +15823,20 @@
     return isNaN(value) && typeof valueIfNaN === 'number' ? valueIfNaN : value;
   };
 
-  const RE_PERCENT = /^(\d+\.\d+)%|(\d+)%$/;
+  /**
+   * Will loosely accept as percent numbers that are not like
+   * 3.4a%. This function does not check for the correctness of a percentage
+   * but it checks that values that are in theory correct are or arent percentages
+   */
   function isPercent(value) {
-    return value && RE_PERCENT.test(value);
+    // /%$/ Matches strings that end with a percent sign (%)
+    return value && /%$/.test(value) && Number.isFinite(parseFloat(value));
   }
 
   /**
-   *
+   * Parse a percentage value in an svg.
    * @param value
-   * @param valueIfNaN
+   * @param fallback in case of not possible to parse the number
    * @returns ∈ [0, 1]
    */
   function parsePercent(value, valueIfNaN) {
@@ -15877,15 +15894,16 @@
       gradientUnits
     } = _ref;
     let finalValue;
-    return Object.keys(valuesToConvert).reduce((acc, prop) => {
-      const propValue = valuesToConvert[prop];
+    return Object.entries(valuesToConvert).reduce((acc, _ref2) => {
+      let [prop, propValue] = _ref2;
       if (propValue === 'Infinity') {
         finalValue = 1;
       } else if (propValue === '-Infinity') {
         finalValue = 0;
       } else {
-        finalValue = typeof propValue === 'string' ? parseFloat(propValue) : propValue;
-        if (typeof propValue === 'string' && isPercent(propValue)) {
+        const isString = typeof propValue === 'string';
+        finalValue = isString ? parseFloat(propValue) : propValue;
+        if (isString && isPercent(propValue)) {
           finalValue *= 0.01;
           if (gradientUnits === 'pixels') {
             // then we need to fix those percentages here in svg parsing
@@ -19302,6 +19320,7 @@
         let drawStart;
         let currentColor;
         let lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor');
+        const bgHeight = this.getHeightOfLineImpl(i);
         for (let j = 0; j < jlen; j++) {
           // at this point charbox are either standard or full with pathInfo if there is a path.
           const charBox = this.__charBounds[i][j];
@@ -19311,7 +19330,7 @@
             ctx.translate(charBox.renderLeft, charBox.renderTop);
             ctx.rotate(charBox.angle);
             ctx.fillStyle = currentColor;
-            currentColor && ctx.fillRect(-charBox.width / 2, -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), charBox.width, heightOfLine / this.lineHeight);
+            currentColor && ctx.fillRect(-charBox.width / 2, -bgHeight * (1 - this._fontSizeFraction), charBox.width, bgHeight);
             ctx.restore();
           } else if (currentColor !== lastColor) {
             drawStart = leftOffset + lineLeftOffset + boxStart;
@@ -19319,7 +19338,7 @@
               drawStart = this.width - drawStart - boxWidth;
             }
             ctx.fillStyle = lastColor;
-            lastColor && ctx.fillRect(drawStart, lineTopOffset, boxWidth, heightOfLine / this.lineHeight);
+            lastColor && ctx.fillRect(drawStart, lineTopOffset, boxWidth, bgHeight);
             boxStart = charBox.left;
             boxWidth = charBox.width;
             lastColor = currentColor;
@@ -19333,7 +19352,7 @@
             drawStart = this.width - drawStart - boxWidth;
           }
           ctx.fillStyle = currentColor;
-          ctx.fillRect(drawStart, lineTopOffset, boxWidth, heightOfLine / this.lineHeight);
+          ctx.fillRect(drawStart, lineTopOffset, boxWidth, bgHeight);
         }
         lineTopOffset += heightOfLine;
       }
@@ -19542,13 +19561,16 @@
     }
 
     /**
-     * Calculate height of line at 'lineIndex'
+     * Calculate height of line at 'lineIndex',
+     * without the lineHeigth multiplication factor
+     * @private
      * @param {Number} lineIndex index of line to calculate
      * @return {Number}
      */
-    getHeightOfLine(lineIndex) {
-      if (this.__lineHeights[lineIndex]) {
-        return this.__lineHeights[lineIndex];
+    getHeightOfLineImpl(lineIndex) {
+      const lh = this.__lineHeights;
+      if (lh[lineIndex]) {
+        return lh[lineIndex];
       }
 
       // char 0 is measured before the line cycle because it needs to char
@@ -19557,18 +19579,25 @@
       for (let i = 1, len = this._textLines[lineIndex].length; i < len; i++) {
         maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight);
       }
-      return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
+      return lh[lineIndex] = maxHeight * this._fontSizeMult;
+    }
+
+    /**
+     * Calculate height of line at 'lineIndex'
+     * @param {Number} lineIndex index of line to calculate
+     * @return {Number}
+     */
+    getHeightOfLine(lineIndex) {
+      return this.getHeightOfLineImpl(lineIndex) * this.lineHeight;
     }
 
     /**
      * Calculate text box height
      */
     calcTextHeight() {
-      let lineHeight,
-        height = 0;
+      let height = 0;
       for (let i = 0, len = this._textLines.length; i < len; i++) {
-        lineHeight = this.getHeightOfLine(i);
-        height += i === len - 1 ? lineHeight / this.lineHeight : lineHeight;
+        height += i === len - 1 ? this.getHeightOfLineImpl(i) : this.getHeightOfLine(i);
       }
       return height;
     }
@@ -19600,11 +19629,8 @@
       const left = this._getLeftOffset(),
         top = this._getTopOffset();
       for (let i = 0, len = this._textLines.length; i < len; i++) {
-        const heightOfLine = this.getHeightOfLine(i),
-          maxHeight = heightOfLine / this.lineHeight,
-          leftOffset = this._getLineLeftOffset(i);
-        this._renderTextLine(method, ctx, this._textLines[i], left + leftOffset, top + lineHeights + maxHeight, i);
-        lineHeights += heightOfLine;
+        this._renderTextLine(method, ctx, this._textLines[i], left + this._getLineLeftOffset(i), top + lineHeights + this.getHeightOfLineImpl(i), i);
+        lineHeights += this.getHeightOfLine(i);
       }
       ctx.restore();
     }
@@ -19649,8 +19675,7 @@
      * @param {Number} lineIndex
      */
     _renderChars(method, ctx, line, left, top, lineIndex) {
-      const lineHeight = this.getHeightOfLine(lineIndex),
-        isJustify = this.textAlign.includes(JUSTIFY),
+      const isJustify = this.textAlign.includes(JUSTIFY),
         path = this.path,
         shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path,
         isLtr = this.direction === 'ltr',
@@ -19671,7 +19696,7 @@
         ctx.direction = isLtr ? 'ltr' : 'rtl';
         ctx.textAlign = isLtr ? LEFT : RIGHT;
       }
-      top -= lineHeight * this._fontSizeFraction / this.lineHeight;
+      top -= this.getHeightOfLineImpl(lineIndex) * this._fontSizeFraction;
       if (shortCut) {
         // render all the line in one pass without checking
         // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex);
@@ -20210,7 +20235,7 @@
           strokeWidth = 1
         } = _options$parsedAttrib,
         restOfOptions = _objectWithoutProperties(_options$parsedAttrib, _excluded$3);
-      const textContent = (element.textContent || '').replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' ');
+      const textContent = normalizeWs(element.textContent || '').trim();
 
       // this code here is probably the usual issue for SVG center find
       // this can later looked at again and probably removed.
@@ -21581,7 +21606,8 @@
         autocomplete: 'off',
         spellcheck: 'false',
         'data-fabric': 'textarea',
-        wrap: 'off'
+        wrap: 'off',
+        name: 'fabricTextarea'
       }).map(_ref => {
         let [attribute, value] = _ref;
         return textarea.setAttribute(attribute, value);
@@ -25211,12 +25237,10 @@
    */
   function getCSSRules(doc) {
     const styles = doc.getElementsByTagName('style');
-    let i;
-    let len;
     const allRules = {};
 
     // very crude parsing of style contents
-    for (i = 0, len = styles.length; i < len; i++) {
+    for (let i = 0; i < styles.length; i++) {
       const styleContents = (styles[i].textContent || '').replace(
       // remove comments
       /\/\*[\s\S]*?\*\//g, '');
@@ -25242,8 +25266,8 @@
           propertyValuePairs = declaration.split(';').filter(function (pair) {
             return pair.trim();
           });
-        for (i = 0, len = propertyValuePairs.length; i < len; i++) {
-          const pair = propertyValuePairs[i].split(':'),
+        for (let j = 0; j < propertyValuePairs.length; j++) {
+          const pair = propertyValuePairs[j].split(':'),
             property = pair[0].trim(),
             value = pair[1].trim();
           ruleObj[property] = value;