fabric 6.0.2 → 6.2.0

package/dist/index.mjs

@@ -401,7 +401,7 @@ class Cache {
 }
 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;
@@ -430,6 +430,7 @@ const ROTATE = 'rotate';
 const SKEWING = 'skewing';
 const RESIZING = 'resizing';
 const MODIFY_POLY = 'modifyPoly';
+const MODIFY_PATH = 'modifyPath';
 const CHANGED = 'changed';
 const SCALE = 'scale';
 const SCALE_X = 'scaleX';
@@ -459,6 +460,9 @@ class ClassRegistry {
     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) {
@@ -1953,8 +1957,13 @@ const enlivenObjectEnlivables = function (serializedObject) {
       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 => {
@@ -1963,15 +1972,6 @@ const enlivenObjectEnlivables = function (serializedObject) {
           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);
@@ -2845,6 +2845,7 @@ function getScrollLeftTop(element) {
       top
     };
   }
+  let elementLoop = element;
   const docElement = doc.documentElement,
     body = doc.body || {
       scrollLeft: 0,
@@ -2854,19 +2855,16 @@ function getScrollLeftTop(element) {
   //  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;
     }
   }
@@ -2939,29 +2937,23 @@ const setCSSDimensions = (el, _ref2) => {
  */
 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();
@@ -6737,11 +6729,7 @@ class Shadow {
 
   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();
   }
 
@@ -8190,14 +8178,16 @@ classRegistry.setClass(FabricObject$1, 'object');
 
 /**
  * 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;
   };
@@ -10669,6 +10659,7 @@ function parseStyleObject(style, oStyle) {
  */
 function parseStyleString(style, oStyle) {
   style.replace(/;\s*$/, '').split(';').forEach(chunk => {
+    if (!chunk) return;
     const [attr, value] = chunk.split(':');
     oStyle[attr.trim().toLowerCase()] = value.trim();
   });
@@ -11098,7 +11089,7 @@ class LayoutManager {
     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,
@@ -12035,7 +12026,7 @@ const arcToSegments = (toX, toY, rx, ry, large, sweep, rotateX) => {
 
   // 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;
@@ -12586,7 +12577,6 @@ const rePathCmd = new RegExp(rePathCommand, 'i');
  *   ['Q', 3, 5, 2, 1, 4, 0],
  *   ['Q', 9, 12, 2, 1, 4, 0],
  * ];
- *
  */
 const parsePath = pathString => {
   // clean the string
@@ -14046,6 +14036,9 @@ class SelectableCanvas extends StaticCanvas {
       if (this._currentTransform && this._currentTransform.target === obj) {
         this.endCurrentTransform(e);
       }
+      if (isActiveSelection(obj) && obj === this._hoveredTarget) {
+        this._hoveredTarget = undefined;
+      }
       this._activeObject = undefined;
       return true;
     }
@@ -18707,8 +18700,6 @@ class TextSVGExportMixin extends FabricObjectSVGExportMixin {
    * @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;");
   }
 
@@ -20661,7 +20652,6 @@ class ITextBehavior extends FabricText {
     } : 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
@@ -23157,8 +23147,6 @@ class Textbox extends IText {
    * @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]);
@@ -24350,8 +24338,6 @@ class FabricImage extends FabricObject {
    */
   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);
   }
 
@@ -24741,65 +24727,82 @@ function getMultipleNodes(doc, nodeNames) {
 
 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);
   }
 }
 
@@ -25156,7 +25159,7 @@ function loadSVGFromURL(url, reviver) {
   });
 }
 
-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.
@@ -25208,13 +25211,13 @@ const factoryPolyActionHandler = (pointIndex, fn) => {
     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));
@@ -25222,10 +25225,157 @@ function createPolyControls(arg0) {
   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,
@@ -25584,7 +25734,6 @@ class BaseFilter {
     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;
     }, {}));