fabric 6.0.2 → 6.2.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## [next]
 
+## [6.2.0]
+
+- fix(): Parse use directive attribute issues [#10053](https://github.com/fabricjs/fabric.js/pull/10053)
+- fix(parseUseDirectives): Fix style tag processing in use tag when reference also has a style [#10050](https://github.com/fabricjs/fabric.js/pull/10050)
+- fix(): Fix path Arc parsing regression issue [#10048](https://github.com/fabricjs/fabric.js/pull/10048)
+- chore(TS): Update TS to latest [#10044](https://github.com/fabricjs/fabric.js/pull/10044)
+- feat(): Add has method to classRegistry to allow to check if a class exists. (fixes #10001)
+
+## [6.1.0]
+
+- fix(): Avoid errors on restoring custom properties that pass the lazy detection of shadow,gradient,pattern and clipPath. [#10001](https://github.com/fabricjs/fabric.js/issues/10001)
+- fix(): When deselecting an active selection remove its reference from hoveredTarget [#9961](https://github.com/fabricjs/fabric.js/pull/9961)
+- feat(): Path controls utility [#9998](https://github.com/fabricjs/fabric.js/pull/9998)
+- chore(): Removed website submodule
+
 ## [6.0.2]
 
 - fix(TS): Type fixes and improved JSDOCS. [#9978](https://github.com/fabricjs/fabric.js/pull/9978)

package/dist/index.js

@@ -407,7 +407,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.2";
+  var version = "6.2.0";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -436,6 +436,7 @@
   const SKEWING = 'skewing';
   const RESIZING = 'resizing';
   const MODIFY_POLY = 'modifyPoly';
+  const MODIFY_PATH = 'modifyPath';
   const CHANGED = 'changed';
   const SCALE = 'scale';
   const SCALE_X = 'scaleX';
@@ -465,6 +466,9 @@
       this[JSON$1] = new Map();
       this[SVG] = new Map();
     }
+    has(classType) {
+      return this[JSON$1].has(classType);
+    }
     getClass(classType) {
       const constructor = this[JSON$1].get(classType);
       if (!constructor) {
@@ -1959,8 +1963,13 @@
         if (!value) {
           return value;
         }
-        // clipPath or shadow or gradient
-        if (value.type) {
+        /**
+         * clipPath or shadow or gradient or text on a path or a pattern,
+         * or the backgroundImage or overlayImage of canvas
+         * If we have a type and there is a classe registered for it, we enlive it.
+         * If there is no class registered for it we return the value as is
+         * */
+        if (value.type && classRegistry.has(value.type)) {
           return enlivenObjects([value], {
             signal
           }).then(_ref => {
@@ -1969,15 +1978,6 @@
             return enlived;
           });
         }
-        // pattern
-        if (value.source) {
-          return classRegistry.getClass('pattern').fromObject(value, {
-            signal
-          }).then(pattern => {
-            instances.push(pattern);
-            return pattern;
-          });
-        }
         return value;
       });
       const keys = Object.keys(serializedObject);
@@ -2851,6 +2851,7 @@
         top
       };
     }
+    let elementLoop = element;
     const docElement = doc.documentElement,
       body = doc.body || {
         scrollLeft: 0,
@@ -2860,19 +2861,16 @@
     //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
     //  but the .parentNode of a root ShadowDOM node will always be null, instead
     //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
-    // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-    while (element && (element.parentNode || element.host)) {
-      // @ts-expect-error Set element to element parent, or 'host' in case of ShadowDOM
-      element = element.parentNode || element.host;
-      // @ts-expect-error because element is typed as HTMLElement but it can go up to document
-      if (element === doc) {
+    while (elementLoop && (elementLoop.parentNode || elementLoop.host)) {
+      elementLoop = elementLoop.parentNode || elementLoop.host;
+      if (elementLoop === doc) {
         left = body.scrollLeft || docElement.scrollLeft || 0;
         top = body.scrollTop || docElement.scrollTop || 0;
       } else {
-        left += element.scrollLeft || 0;
-        top += element.scrollTop || 0;
+        left += elementLoop.scrollLeft || 0;
+        top += elementLoop.scrollTop || 0;
       }
-      if (element.nodeType === 1 && element.style.position === 'fixed') {
+      if (elementLoop.nodeType === 1 && elementLoop.style.position === 'fixed') {
         break;
       }
     }
@@ -2945,29 +2943,23 @@
    */
   function getElementOffset(element) {
     var _getWindowFromElement;
-    let box = {
-      left: 0,
-      top: 0
-    };
     const doc = element && getDocumentFromElement(element),
       offset = {
         left: 0,
         top: 0
-      },
-      offsetAttributes = {
-        borderLeftWidth: LEFT,
-        borderTopWidth: TOP,
-        paddingLeft: LEFT,
-        paddingTop: TOP
       };
     if (!doc) {
       return offset;
     }
     const elemStyle = ((_getWindowFromElement = getWindowFromElement(element)) === null || _getWindowFromElement === void 0 ? void 0 : _getWindowFromElement.getComputedStyle(element, null)) || {};
-    for (const attr in offsetAttributes) {
-      // @ts-expect-error TS learn to iterate!
-      offset[offsetAttributes[attr]] += parseInt(elemStyle[attr], 10) || 0;
-    }
+    offset.left += parseInt(elemStyle.borderLeftWidth, 10) || 0;
+    offset.top += parseInt(elemStyle.borderTopWidth, 10) || 0;
+    offset.left += parseInt(elemStyle.paddingLeft, 10) || 0;
+    offset.top += parseInt(elemStyle.paddingTop, 10) || 0;
+    let box = {
+      left: 0,
+      top: 0
+    };
     const docElem = doc.documentElement;
     if (typeof element.getBoundingClientRect !== 'undefined') {
       box = element.getBoundingClientRect();
@@ -6743,11 +6735,7 @@
 
     constructor(arg0) {
       const options = typeof arg0 === 'string' ? Shadow.parseShadow(arg0) : arg0;
-      Object.assign(this, Shadow.ownDefaults);
-      for (const prop in options) {
-        // @ts-expect-error for loops are so messy in TS
-        this[prop] = options[prop];
-      }
+      Object.assign(this, Shadow.ownDefaults, options);
       this.id = uid();
     }
 
@@ -8196,14 +8184,16 @@
 
   /**
    * Wrap an action handler with firing an event if the action is performed
-   * @param {Function} actionHandler the function to wrap
-   * @return {Function} a function with an action handler signature
+   * @param {TModificationEvents} eventName the event we want to fire
+   * @param {TransformActionHandler<T>} actionHandler the function to wrap
+   * @param {object} extraEventInfo extra information to pas to the event handler
+   * @return {TransformActionHandler<T>} a function with an action handler signature
    */
-  const wrapWithFireEvent = (eventName, actionHandler) => {
+  const wrapWithFireEvent = (eventName, actionHandler, extraEventInfo) => {
     return (eventData, transform, x, y) => {
       const actionPerformed = actionHandler(eventData, transform, x, y);
       if (actionPerformed) {
-        fireEvent(eventName, commonEventInfo(eventData, transform, x, y));
+        fireEvent(eventName, _objectSpread2(_objectSpread2({}, commonEventInfo(eventData, transform, x, y)), extraEventInfo));
       }
       return actionPerformed;
     };
@@ -10675,6 +10665,7 @@
    */
   function parseStyleString(style, oStyle) {
     style.replace(/;\s*$/, '').split(';').forEach(chunk => {
+      if (!chunk) return;
       const [attr, value] = chunk.split(':');
       oStyle[attr.trim().toLowerCase()] = value.trim();
     });
@@ -11104,7 +11095,7 @@
       const {
         target
       } = context;
-      return [MODIFIED, MOVING, RESIZING, ROTATING, SCALING, SKEWING, CHANGED, MODIFY_POLY].map(key => object.on(key, e => this.performLayout(key === MODIFIED ? {
+      return [MODIFIED, MOVING, RESIZING, ROTATING, SCALING, SKEWING, CHANGED, MODIFY_POLY, MODIFY_PATH].map(key => object.on(key, e => this.performLayout(key === MODIFIED ? {
         type: LAYOUT_TYPE_OBJECT_MODIFIED,
         trigger: key,
         e,
@@ -12041,7 +12032,7 @@
 
     // Convert into cubic bezier segments <= 90deg
     const segments = Math.ceil(Math.abs(dtheta / PI * 2)),
-      result = new Array(segments),
+      result = [],
       mDelta = dtheta / segments,
       mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2);
     let th3 = mTheta + mDelta;
@@ -12592,7 +12583,6 @@
    *   ['Q', 3, 5, 2, 1, 4, 0],
    *   ['Q', 9, 12, 2, 1, 4, 0],
    * ];
-   *
    */
   const parsePath = pathString => {
     // clean the string
@@ -14052,6 +14042,9 @@
         if (this._currentTransform && this._currentTransform.target === obj) {
           this.endCurrentTransform(e);
         }
+        if (isActiveSelection(obj) && obj === this._hoveredTarget) {
+          this._hoveredTarget = undefined;
+        }
         this._activeObject = undefined;
         return true;
       }
@@ -18713,8 +18706,6 @@
      * @return {String}
      */
     getSvgStyles(skipShadow) {
-      // 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;");
     }
 
@@ -20667,7 +20658,6 @@
       } : undefined);
       this._fireSelectionChanged();
       if (this.canvas) {
-        // @ts-expect-error in reality it is an IText instance
         this.canvas.fire('text:editing:entered', {
           target: this,
           e
@@ -23163,8 +23153,6 @@
      * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
      * @return {Object} object representation of an instance
      */
-    // 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]);
@@ -24356,8 +24344,6 @@
      */
     drawCacheOnCanvas(ctx) {
       ctx.imageSmoothingEnabled = this.imageSmoothing;
-      // cant use ts-expect-error because of ts 5.3 cross check
-      // @ts-ignore TS doesn't respect this type casting
       super.drawCacheOnCanvas(ctx);
     }
 
@@ -24747,65 +24733,82 @@
 
   function parseUseDirectives(doc) {
     const nodelist = getMultipleNodes(doc, ['use', 'svg:use']);
-    let i = 0;
-    while (nodelist.length && i < nodelist.length) {
-      const el = nodelist[i],
-        xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');
-      if (xlinkAttribute === null) {
+    const skipAttributes = ['x', 'y', 'xlink:href', 'href', 'transform'];
+    for (const useElement of nodelist) {
+      const useAttributes = useElement.attributes;
+      const useAttrMap = {};
+      for (const attr of useAttributes) {
+        attr.value && (useAttrMap[attr.name] = attr.value);
+      }
+      const xlink = (useAttrMap['xlink:href'] || useAttrMap.href || '').slice(1);
+      if (xlink === '') {
         return;
       }
-      const xlink = xlinkAttribute.slice(1);
-      const x = el.getAttribute('x') || 0;
-      const y = el.getAttribute('y') || 0;
-      const el2Orig = doc.getElementById(xlink);
-      if (el2Orig === null) {
+      const referencedElement = doc.getElementById(xlink);
+      if (referencedElement === null) {
         // if we can't find the target of the xlink, consider this use tag bad, similar to no xlink
         return;
       }
-      let el2 = el2Orig.cloneNode(true);
-      let currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')';
-      const oldLength = nodelist.length;
-      const namespace = svgNS;
-      applyViewboxTransform(el2);
-      if (/^svg$/i.test(el2.nodeName)) {
-        const el3 = el2.ownerDocument.createElementNS(namespace, 'g');
-        for (let j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {
-          const attr = attrs.item(j);
-          attr && el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue);
-        }
-        // el2.firstChild != null
-        while (el2.firstChild) {
-          el3.appendChild(el2.firstChild);
-        }
-        el2 = el3;
+      let clonedOriginal = referencedElement.cloneNode(true);
+      const originalAttributes = clonedOriginal.attributes;
+      const originalAttrMap = {};
+      for (const attr of originalAttributes) {
+        attr.value && (originalAttrMap[attr.name] = attr.value);
       }
-      for (let j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {
-        const attr = attrs.item(j);
+
+      // Transform attribute needs to be merged in a particular way
+      const {
+        x = 0,
+        y = 0,
+        transform = ''
+      } = useAttrMap;
+      const currentTrans = "".concat(transform, " ").concat(originalAttrMap.transform || '', " translate(").concat(x, ", ").concat(y, ")");
+      applyViewboxTransform(clonedOriginal);
+      if (/^svg$/i.test(clonedOriginal.nodeName)) {
+        // if is an SVG, create a group and apply all the attributes on top of it
+        const el3 = clonedOriginal.ownerDocument.createElementNS(svgNS, 'g');
+        Object.entries(originalAttrMap).forEach(_ref => {
+          let [name, value] = _ref;
+          return el3.setAttributeNS(svgNS, name, value);
+        });
+        el3.append(...clonedOriginal.childNodes);
+        clonedOriginal = el3;
+      }
+      for (const attr of useAttributes) {
         if (!attr) {
           continue;
         }
         const {
-          nodeName,
-          nodeValue
+          name,
+          value
         } = attr;
-        if (nodeName === 'x' || nodeName === 'y' || nodeName === 'xlink:href' || nodeName === 'href') {
+        if (skipAttributes.includes(name)) {
           continue;
         }
-        if (nodeName === 'transform') {
-          currentTrans = nodeValue + ' ' + currentTrans;
+        if (name === 'style') {
+          // when use has a style, merge the two styles, with the ref being priority (not use)
+          // priority is by feature. an attribute for fill on the original element
+          // will overwrite the fill in style or attribute for tha use
+          const styleRecord = {};
+          parseStyleString(value, styleRecord);
+          // cleanup styleRecord from attributes of original
+          Object.entries(originalAttrMap).forEach(_ref2 => {
+            let [name, value] = _ref2;
+            styleRecord[name] = value;
+          });
+          // now we can put in the style of the original that will overwrite the original attributes
+          parseStyleString(originalAttrMap.style || '', styleRecord);
+          const mergedStyles = Object.entries(styleRecord).map(entry => entry.join(':')).join(';');
+          clonedOriginal.setAttribute(name, mergedStyles);
         } else {
-          el2.setAttribute(nodeName, nodeValue);
+          // set the attribute from use element only if the original does not have it already
+          !originalAttrMap[name] && clonedOriginal.setAttribute(name, value);
         }
       }
-      el2.setAttribute('transform', currentTrans);
-      el2.setAttribute('instantiated_by_use', '1');
-      el2.removeAttribute('id');
-      const parentNode = el.parentNode;
-      parentNode.replaceChild(el2, el);
-      // some browsers do not shorten nodelist after replaceChild (IE8)
-      if (nodelist.length === oldLength) {
-        i++;
-      }
+      clonedOriginal.setAttribute('transform', currentTrans);
+      clonedOriginal.setAttribute('instantiated_by_use', '1');
+      clonedOriginal.removeAttribute('id');
+      useElement.parentNode.replaceChild(clonedOriginal, useElement);
     }
   }
 
@@ -25162,7 +25165,7 @@
     });
   }
 
-  const ACTION_NAME = MODIFY_POLY;
+  const ACTION_NAME$1 = MODIFY_POLY;
   /**
    * This function locates the controls.
    * It'll be used both for drawing and for interaction.
@@ -25214,13 +25217,13 @@
       return actionPerformed;
     };
   };
-  const createPolyActionHandler = pointIndex => wrapWithFireEvent(ACTION_NAME, factoryPolyActionHandler(pointIndex, polyActionHandler));
+  const createPolyActionHandler = pointIndex => wrapWithFireEvent(ACTION_NAME$1, factoryPolyActionHandler(pointIndex, polyActionHandler));
   function createPolyControls(arg0) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const controls = {};
     for (let idx = 0; idx < (typeof arg0 === 'number' ? arg0 : arg0.points.length); idx++) {
       controls["p".concat(idx)] = new Control(_objectSpread2({
-        actionName: ACTION_NAME,
+        actionName: ACTION_NAME$1,
         positionHandler: createPolyPositionHandler(idx),
         actionHandler: createPolyActionHandler(idx)
       }, options));
@@ -25228,10 +25231,157 @@
     return controls;
   }
 
+  const ACTION_NAME = 'modifyPath';
+  const calcPathPointPosition = (pathObject, commandIndex, pointIndex) => {
+    const {
+      path,
+      pathOffset
+    } = pathObject;
+    const command = path[commandIndex];
+    return new Point(command[pointIndex] - pathOffset.x, command[pointIndex + 1] - pathOffset.y).transform(multiplyTransformMatrices(pathObject.getViewportTransform(), pathObject.calcTransformMatrix()));
+  };
+  const movePathPoint = (pathObject, x, y, commandIndex, pointIndex) => {
+    const {
+      path,
+      pathOffset
+    } = pathObject;
+    const anchorCommand = path[(commandIndex > 0 ? commandIndex : path.length) - 1];
+    const anchorPoint = new Point(anchorCommand[pointIndex], anchorCommand[pointIndex + 1]);
+    const anchorPointInParentPlane = anchorPoint.subtract(pathOffset).transform(pathObject.calcOwnMatrix());
+    const mouseLocalPosition = sendPointToPlane(new Point(x, y), undefined, pathObject.calcOwnMatrix());
+    path[commandIndex][pointIndex] = mouseLocalPosition.x + pathOffset.x;
+    path[commandIndex][pointIndex + 1] = mouseLocalPosition.y + pathOffset.y;
+    pathObject.setDimensions();
+    const newAnchorPointInParentPlane = anchorPoint.subtract(pathObject.pathOffset).transform(pathObject.calcOwnMatrix());
+    const diff = newAnchorPointInParentPlane.subtract(anchorPointInParentPlane);
+    pathObject.left -= diff.x;
+    pathObject.top -= diff.y;
+    pathObject.set('dirty', true);
+    return true;
+  };
+
+  /**
+   * This function locates the controls.
+   * It'll be used both for drawing and for interaction.
+   */
+  function pathPositionHandler(dim, finalMatrix, pathObject) {
+    const {
+      commandIndex,
+      pointIndex
+    } = this;
+    return calcPathPointPosition(pathObject, commandIndex, pointIndex);
+  }
+
+  /**
+   * This function defines what the control does.
+   * It'll be called on every mouse move after a control has been clicked and is being dragged.
+   * The function receives as argument the mouse event, the current transform object
+   * and the current position in canvas coordinate `transform.target` is a reference to the
+   * current object being transformed.
+   */
+  function pathActionHandler(eventData, transform, x, y) {
+    const {
+      target
+    } = transform;
+    const {
+      commandIndex,
+      pointIndex
+    } = this;
+    const actionPerformed = movePathPoint(target, x, y, commandIndex, pointIndex);
+    {
+      fireEvent(this.actionName, _objectSpread2(_objectSpread2({}, commonEventInfo(eventData, transform, x, y)), {}, {
+        commandIndex,
+        pointIndex
+      }));
+    }
+    return actionPerformed;
+  }
+  const indexFromPrevCommand = previousCommandType => previousCommandType === 'C' ? 5 : previousCommandType === 'Q' ? 3 : 1;
+  class PathPointControl extends Control {
+    constructor(options) {
+      super(options);
+    }
+    render(ctx, left, top, styleOverride, fabricObject) {
+      const overrides = _objectSpread2(_objectSpread2({}, styleOverride), {}, {
+        cornerColor: this.controlFill,
+        cornerStrokeColor: this.controlStroke,
+        transparentCorners: !this.controlFill
+      });
+      super.render(ctx, left, top, overrides, fabricObject);
+    }
+  }
+  class PathControlPointControl extends PathPointControl {
+    constructor(options) {
+      super(options);
+    }
+    render(ctx, left, top, styleOverride, fabricObject) {
+      const {
+        path
+      } = fabricObject;
+      const {
+        commandIndex,
+        pointIndex,
+        connectToCommandIndex,
+        connectToPointIndex
+      } = this;
+      ctx.save();
+      ctx.strokeStyle = this.controlStroke;
+      if (this.connectionDashArray) {
+        ctx.setLineDash(this.connectionDashArray);
+      }
+      const [commandType] = path[commandIndex];
+      const point = calcPathPointPosition(fabricObject, connectToCommandIndex, connectToPointIndex);
+      if (commandType === 'Q') {
+        // one control point connects to 2 points
+        const point2 = calcPathPointPosition(fabricObject, commandIndex, pointIndex + 2);
+        ctx.moveTo(point2.x, point2.y);
+        ctx.lineTo(left, top);
+      } else {
+        ctx.moveTo(left, top);
+      }
+      ctx.lineTo(point.x, point.y);
+      ctx.stroke();
+      ctx.restore();
+      super.render(ctx, left, top, styleOverride, fabricObject);
+    }
+  }
+  const createControl = (commandIndexPos, pointIndexPos, isControlPoint, options, connectToCommandIndex, connectToPointIndex) => new (isControlPoint ? PathControlPointControl : PathPointControl)(_objectSpread2(_objectSpread2({
+    commandIndex: commandIndexPos,
+    pointIndex: pointIndexPos,
+    actionName: ACTION_NAME,
+    positionHandler: pathPositionHandler,
+    actionHandler: pathActionHandler,
+    connectToCommandIndex,
+    connectToPointIndex
+  }, options), isControlPoint ? options.controlPointStyle : options.pointStyle));
+  function createPathControls(path) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const controls = {};
+    let previousCommandType = 'M';
+    path.path.forEach((command, commandIndex) => {
+      const commandType = command[0];
+      if (commandType !== 'Z') {
+        controls["c_".concat(commandIndex, "_").concat(commandType)] = createControl(commandIndex, command.length - 2, false, options);
+      }
+      switch (commandType) {
+        case 'C':
+          controls["c_".concat(commandIndex, "_C_CP_1")] = createControl(commandIndex, 1, true, options, commandIndex - 1, indexFromPrevCommand(previousCommandType));
+          controls["c_".concat(commandIndex, "_C_CP_2")] = createControl(commandIndex, 3, true, options, commandIndex, 5);
+          break;
+        case 'Q':
+          controls["c_".concat(commandIndex, "_Q_CP_1")] = createControl(commandIndex, 1, true, options, commandIndex, 3);
+          break;
+      }
+      previousCommandType = commandType;
+    });
+    return controls;
+  }
+
   var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     changeWidth: changeWidth,
     createObjectDefaultControls: createObjectDefaultControls,
+    createPathControls: createPathControls,
     createPolyActionHandler: createPolyActionHandler,
     createPolyControls: createPolyControls,
     createPolyPositionHandler: createPolyPositionHandler,
@@ -25590,7 +25740,6 @@
       return _objectSpread2({
         type: this.type
       }, defaultKeys.reduce((acc, key) => {
-        //@ts-expect-error TS doesn't get i want an object that looks like this
         acc[key] = this[key];
         return acc;
       }, {}));