fabric 6.0.0-beta19 → 6.0.0-beta20

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## [next]
 
+## [6.0.0-beta20]
+
+- chore(TS): minor changes to typescript notation to be compatible with a 5.3.3 [#9725](https://github.com/fabricjs/fabric.js/pull/9725)
+- fix(InteractiveObject): "borderOpacityWhenMoving" does not take effect on the child shapes within the group [#9374](https://github.com/fabricjs/fabric.js/issues/9734)
+- fix(SVGParser): Consider the transformMatrix of the clipPath owner as part of the clipPath trasnformation [#9750](https://github.com/fabricjs/fabric.js/pull/9750)
+- fix(StaticCanvas): setDimensions not requesting a render if options are not passed [#9710](https://github.com/fabricjs/fabric.js/pull/9710)
+- fix(LayoutManager): wrong bounding box position when activeSelection has originX/originY that are not default left/top [#9649](https://github.com/fabricjs/fabric.js/pull/9649)
+- fix(ActiveSelection): block ancestors/descendants of selected objects from being selected [#9732](https://github.com/fabricjs/fabric.js/pull/9732)
+- fix(Image): typo in style property for svg export [#9717](https://github.com/fabricjs/fabric.js/pull/9717)
+- ci(): Update the changelog and stats action to work from forks
+- fix(Shadow): Cloning a shape with shadow throws an error[#9711](https://github.com/fabricjs/fabric.js/issues/9711)
+- chore(TS): use consistent and improved types for getDefaults and ownDefaults [#9698](https://github.com/fabricjs/fabric.js/pull/9698)
+- fix(SVGParser): Don't crash on nested CSS at-rules [#9707](https://github.com/fabricjs/fabric.js/pull/9707)
+- perf(): measuring canvas size [#9697](https://github.com/fabricjs/fabric.js/pull/9697)
+- chore(TS): Add type for options in toCanvasElement and toDataUrl [#9673](https://github.com/fabricjs/fabric.js/pull/9673)
+- ci(): add source map support to node sandbox [#9686](https://github.com/fabricjs/fabric.js/pull/9686)
+- fix(Canvas): Correct type mainTouchId initialization [#9684](https://github.com/fabricjs/fabric.js/pull/9684)
+- feat(Circle): Add counterclockwise parameter to Circle class [#9670](https://github.com/fabricjs/fabric.js/pull/9670)
+
 ## [6.0.0-beta19]
 
 - feat(LayoutManager): Expose objects registration [#9661](https://github.com/fabricjs/fabric.js/pull/9661)

package/dist/index.js

@@ -423,7 +423,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta19";
+  var version = "6.0.0-beta20";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -3252,7 +3252,7 @@
 
     setDimensions(dimensions, options) {
       this._setDimensionsImpl(dimensions, options);
-      if (options && !options.cssOnly) {
+      if (!options || !options.cssOnly) {
         this.requestRenderAll();
       }
     }
@@ -6777,7 +6777,7 @@
       const defaults = Shadow.ownDefaults;
       return !this.includeDefaultValues ? pickBy(data, (value, key) => value !== defaults[key]) : data;
     }
-    static fromObject(options) {
+    static async fromObject(options) {
       return new this(options);
     }
   }
@@ -7874,7 +7874,7 @@
      * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it.
      * toCanvasElement and then toBlob from the obtained canvas is also a good option.
      * @todo fix the export type, it could not be Image but the type that getClass return for 'image'.
-     * @param {Object} [options] for clone as image, passed to toDataURL
+     * @param {ObjectToCanvasElementOptions} [options] for clone as image, passed to toDataURL
      * @param {Number} [options.multiplier=1] Multiplier to scale by
      * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
      * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
@@ -7894,7 +7894,7 @@
 
     /**
      * Converts an object into a HTMLCanvas element
-     * @param {Object} options Options object
+     * @param {ObjectToCanvasElementOptions} options Options object
      * @param {Number} [options.multiplier=1] Multiplier to scale by
      * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
      * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
@@ -7904,7 +7904,7 @@
      * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
      * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
      * @param {Boolean} [options.viewportTransform] Account for canvas viewport transform
-     * @param {(el: HTMLCanvasElement) => Canvas} [options.canvasProvider] Create the output canvas
+     * @param {(el?: HTMLCanvasElement) => StaticCanvas} [options.canvasProvider] Create the output canvas
      * @return {HTMLCanvasElement} Returns DOM element <canvas> with the FabricObject
      */
     toCanvasElement() {
@@ -9392,7 +9392,12 @@
       ctx.save();
       ctx.translate(options.translateX, options.translateY);
       ctx.lineWidth = 1 * this.borderScaleFactor;
-      if (!this.group) {
+      // since interactive groups have been introduced, an object could be inside a group and needing controls
+      // the following equality check `this.group === this.parent` covers:
+      // object without a group ( undefined === undefined )
+      // object inside a group
+      // excludes object inside a group but multi selected since group and parent will differ in value
+      if (this.group === this.parent) {
         ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
       }
       if (this.flipX) {
@@ -10939,14 +10944,11 @@
           size: bboxSize,
           center: bboxCenter
         });
-        const originFactor = new Point(-resolveOrigin(target.originX), -resolveOrigin(target.originY));
-        const sizeCorrection = actualSize.subtract(bboxSize).multiply(originFactor);
-        // translate the layout origin from left top to target's origin
-        const center = bboxLeftTop.add(bboxSize.multiply(originFactor));
         return {
           // in `initialization` we do not account for target's transformation matrix
-          center: center.add(sizeCorrection),
-          relativeCorrection: center.subtract(bboxCenter),
+          center: bboxCenter,
+          // TODO: investigate if this is still necessary
+          relativeCorrection: new Point(0, 0),
           size: actualSize
         };
       } else {
@@ -11155,6 +11157,9 @@
       let {
         offset
       } = _ref;
+      // TODO: this is here for cache invalidation.
+      // verify if this is necessary since we have explicit
+      // cache invalidation at the end of commitLayout
       object.set({
         left: object.left + offset.x,
         top: object.top + offset.y
@@ -14651,7 +14656,7 @@
      */
     _onTouchStart(e) {
       e.preventDefault();
-      if (this.mainTouchId === null) {
+      if (this.mainTouchId === undefined) {
         this.mainTouchId = this.getPointerId(e);
       }
       this.__onMouseDown(e);
@@ -14691,7 +14696,7 @@
       }
       this.__onMouseUp(e);
       this._resetTransformEventData();
-      this.mainTouchId = null;
+      delete this.mainTouchId;
       const eventTypePrefix = this._getEventPrefix();
       const doc = getDocumentFromElement(this.upperCanvasEl);
       removeListener(doc, 'touchend', this._onTouchEnd, addEventOptions);
@@ -16738,11 +16743,12 @@
   }
 
   const _excluded$9 = ["left", "top", "radius"];
-  const CIRCLE_PROPS = ['radius', 'startAngle', 'endAngle'];
+  const CIRCLE_PROPS = ['radius', 'startAngle', 'endAngle', 'counterClockwise'];
   const circleDefaultValues = {
     radius: 0,
     startAngle: 0,
-    endAngle: 360
+    endAngle: 360,
+    counterClockwise: false
   };
   class Circle extends FabricObject {
     static getDefaults() {
@@ -16768,7 +16774,7 @@
      */
     _render(ctx) {
       ctx.beginPath();
-      ctx.arc(0, 0, this.radius, degreesToRadians(this.startAngle), degreesToRadians(this.endAngle), false);
+      ctx.arc(0, 0, this.radius, degreesToRadians(this.startAngle), degreesToRadians(this.endAngle), this.counterClockwise);
       this._renderPaintInOrder(ctx);
     }
 
@@ -16830,8 +16836,9 @@
           startY = sin(start) * radius,
           endX = cos(end) * radius,
           endY = sin(end) * radius,
-          largeFlag = angle > 180 ? '1' : '0';
-        return ["<path d=\"M ".concat(startX, " ").concat(startY), " A ".concat(radius, " ").concat(radius), ' 0 ', "".concat(largeFlag, " 1"), " ".concat(endX, " ").concat(endY), '" ', 'COMMON_PARTS', ' />\n'];
+          largeFlag = angle > 180 ? 1 : 0,
+          sweepFlag = this.counterClockwise ? 0 : 1;
+        return ["<path d=\"M ".concat(startX, " ").concat(startY, " A ").concat(radius, " ").concat(radius, " 0 ").concat(largeFlag, " ").concat(sweepFlag, " ").concat(endX, " ").concat(endY, "\" "), 'COMMON_PARTS', ' />\n'];
       }
     }
     /* _TO_SVG_END_ */
@@ -18539,7 +18546,8 @@
      * @return {String}
      */
     getSvgStyles(skipShadow) {
-      // @ts-expect-error TS doesn't respect this type casting
+      // cant use ts-expect-error because of ts 5.3 cross check
+      // @ts-ignore TS doesn't respect this type casting
       return "".concat(super.getSvgStyles(skipShadow), " white-space: pre;");
     }
 
@@ -18583,7 +18591,9 @@
    */
   function getMeasuringContext() {
     if (!measuringContext) {
-      measuringContext = createCanvasElement().getContext('2d');
+      const canvas = createCanvasElement();
+      canvas.width = canvas.height = 0;
+      measuringContext = canvas.getContext('2d');
     }
     return measuringContext;
   }
@@ -21942,7 +21952,13 @@
     65: 'selectAll'
   };
 
-  const iTextDefaultValues = {
+  // Declare IText protected properties to workaround TS
+  const protectedDefaultValues = {
+    _selectionDirection: null,
+    _reSpace: /\s|\r?\n/,
+    inCompositionMode: false
+  };
+  const iTextDefaultValues = _objectSpread2({
     selectionStart: 0,
     selectionEnd: 0,
     selectionColor: 'rgba(17,119,255,0.3)',
@@ -21955,14 +21971,11 @@
     cursorDuration: 600,
     caching: true,
     hiddenTextareaContainer: null,
-    _selectionDirection: null,
-    _reSpace: /\s|\r?\n/,
-    inCompositionMode: false,
     keysMap,
     keysMapRtl,
     ctrlKeysMapDown,
     ctrlKeysMapUp
-  };
+  }, protectedDefaultValues);
 
   // @TODO this is not complete
 
@@ -22937,7 +22950,8 @@
      * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
      * @return {Object} object representation of an instance
      */
-    // @ts-expect-error TS this typing limitations
+    // cant use ts-expect-error because of ts 5.3 cross check
+    // @ts-ignore TS this typing limitations
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return super.toObject(['minWidth', 'splitByGrapheme', ...propertiesToInclude]);
@@ -23047,6 +23061,10 @@
   _defineProperty(FixedLayout, "type", 'fixed');
   classRegistry.setClass(FixedLayout);
 
+  const activeSelectionDefaultValues = {
+    multiSelectionStacking: 'canvas-stacking'
+  };
+
   /**
    * Used by Canvas to manage selection.
    *
@@ -23109,6 +23127,18 @@
       }
     }
 
+    /**
+     * @override block ancestors/descendants of selected objects from being selected to prevent a circular object tree
+     */
+    canEnterGroup(object) {
+      if (this.getObjects().some(o => o.isDescendantOf(object) || object.isDescendantOf(o))) {
+        //  prevent circular object tree
+        log('error', 'ActiveSelection: circular object trees are not supported, this call has no effect');
+        return false;
+      }
+      return super.canEnterGroup(object);
+    }
+
     /**
      * Change an object so that it can be part of an active selection.
      * this method is called by multiselectAdd from canvas code.
@@ -23232,9 +23262,7 @@
     }
   }
   _defineProperty(ActiveSelection, "type", 'ActiveSelection');
-  _defineProperty(ActiveSelection, "ownDefaults", {
-    multiSelectionStacking: 'canvas-stacking'
-  });
+  _defineProperty(ActiveSelection, "ownDefaults", activeSelectionDefaultValues);
   classRegistry.setClass(ActiveSelection);
   classRegistry.setClass(ActiveSelection, 'activeSelection');
 
@@ -23875,7 +23903,7 @@
       if (this.stroke || this.strokeDashArray) {
         const origFill = this.fill;
         this.fill = null;
-        strokeSvg = ["\t<rect x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(this.width, "\" height=\"").concat(this.height, "\" styles=\"").concat(this.getSvgStyles(), "\" />\n")];
+        strokeSvg = ["\t<rect x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(this.width, "\" height=\"").concat(this.height, "\" style=\"").concat(this.getSvgStyles(), "\" />\n")];
         this.fill = origFill;
       }
       if (this.paintFirst !== 'fill') {
@@ -24046,7 +24074,8 @@
      */
     drawCacheOnCanvas(ctx) {
       ctx.imageSmoothingEnabled = this.imageSmoothing;
-      // @ts-expect-error TS doesn't respect this type casting
+      // cant use ts-expect-error because of ts 5.3 cross check
+      // @ts-ignore TS doesn't respect this type casting
       super.drawCacheOnCanvas(ctx);
     }
 
@@ -24410,11 +24439,13 @@
     return parsedDim;
   }
 
+  const getTagName = node => node.tagName.replace('svg:', '');
+
   const svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors);
   function hasInvalidAncestor(element) {
     let _element = element;
     while (_element && (_element = _element.parentElement)) {
-      if (_element && _element.nodeName && svgInvalidAncestorsRegEx.test(_element.nodeName.replace('svg:', '')) && !_element.getAttribute('instantiated_by_use')) {
+      if (_element && _element.nodeName && svgInvalidAncestorsRegEx.test(getTagName(_element)) && !_element.getAttribute('instantiated_by_use')) {
         return true;
       }
     }
@@ -24575,6 +24606,12 @@
       .filter((rule, index, array) => array.length > 1 && rule.trim())
       // at this point we have hopefully an array of rules `body { style code... `
       .forEach(rule => {
+        // if there is more than one opening bracket and the rule starts with '@', it is likely
+        // a nested at-rule like @media, @supports, @scope, etc. Ignore these as the code below
+        // can not handle it.
+        if ((rule.match(/{/g) || []).length > 1 && rule.trim().startsWith('@')) {
+          return;
+        }
         const match = rule.split('{'),
           ruleObj = {},
           declaration = match[1].trim(),
@@ -24600,7 +24637,7 @@
     return allRules;
   }
 
-  const findTag = el => classRegistry.getSVGClass(el.tagName.toLowerCase().replace('svg:', ''));
+  const findTag = el => classRegistry.getSVGClass(getTagName(el).toLowerCase());
   class ElementsParser {
     constructor(elements, options, reviver, doc, clipPaths) {
       this.elements = elements;
@@ -24656,17 +24693,27 @@
         obj.set(property, gradient);
       }
     }
+
+    // TODO: resolveClipPath could be run once per clippath with minor work per object.
+    // is a refactor that i m not sure is worth on this code
     async resolveClipPath(obj, usingElement) {
       const clipPathElements = this.extractPropertyDefinition(obj, 'clipPath', this.clipPaths);
       if (clipPathElements) {
         const objTransformInv = invertTransform(obj.calcTransformMatrix());
-        // move the clipPath tag as sibling to the real element that is using it
         const clipPathTag = clipPathElements[0].parentElement;
         let clipPathOwner = usingElement;
         while (clipPathOwner.parentElement && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) {
           clipPathOwner = clipPathOwner.parentElement;
         }
+        // move the clipPath tag as sibling to the real element that is using it
         clipPathOwner.parentElement.appendChild(clipPathTag);
+
+        // this multiplication order could be opposite.
+        // but i don't have an svg to test it
+        // at the first SVG that has a transform on both places and is misplaced
+        // try to invert this multiplication order
+        const finalTransform = parseTransformAttribute("".concat(clipPathOwner.getAttribute('transform') || '', " ").concat(clipPathTag.getAttribute('originalTransform') || ''));
+        clipPathTag.setAttribute('transform', "matrix(".concat(finalTransform.join(','), ")"));
         const container = await Promise.all(clipPathElements.map(clipPathElement => {
           return findTag(clipPathElement).fromElement(clipPathElement, this.options, this.cssRules).then(enlivedClippath => {
             removeTransformMatrixForSvgParsing(enlivedClippath);
@@ -24709,7 +24756,7 @@
     }
   }
 
-  const isValidSvgTag = el => svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));
+  const isValidSvgTag = el => svgValidTagNamesRegEx.test(getTagName(el));
   const createEmptyResponse = () => ({
     objects: [],
     elements: [],
@@ -24763,7 +24810,8 @@
       });
     }
     const localClipPaths = {};
-    descendants.filter(el => el.nodeName.replace('svg:', '') === 'clipPath').forEach(el => {
+    descendants.filter(el => getTagName(el) === 'clipPath').forEach(el => {
+      el.setAttribute('originalTransform', el.getAttribute('transform') || '');
       const id = el.getAttribute('id');
       localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(el => isValidSvgTag(el));
     });