fabric 7.0.0 → 7.2.0

package/dist-extensions/cropping_controls/croppingHandlers.mjs

@@ -0,0 +1,228 @@
+import { controlsUtils, util, Point } from 'fabric';
+
+const {
+  wrapWithFixedAnchor,
+  wrapWithFireEvent
+} = controlsUtils;
+
+/**
+ * Wrap controlsUtils.changeObjectWidth with image constrains
+ */
+const changeImageWidth = (eventData, transform, x, y) => {
+  const {
+    target
+  } = transform;
+  const {
+    width
+  } = target;
+  const image = target;
+  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
+  const availableWidth = image._element.width - image.cropX;
+  if (modified) {
+    if (image.width > availableWidth) {
+      image.width = availableWidth;
+    }
+    if (image.width < 1) {
+      image.width = 1;
+    }
+  }
+  return width !== image.width;
+};
+const changeCropWidth = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageWidth));
+
+/**
+ * Wrap controlsUtils.changeObjectHeight with image constrains
+ */
+const changeImageHeight = (eventData, transform, x, y) => {
+  const {
+    target
+  } = transform;
+  const {
+    height
+  } = target;
+  const image = target;
+  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
+  const availableHeight = image._element.height - image.cropY;
+  if (modified) {
+    if (image.height > availableHeight) {
+      image.height = availableHeight;
+    }
+    if (image.height < 1) {
+      image.height = 1;
+    }
+  }
+  return height !== image.height;
+};
+const changeCropHeight = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageHeight));
+const changeImageCropX = (eventData, transform, x, y) => {
+  const {
+    target
+  } = transform;
+  const image = target;
+  const {
+    width,
+    cropX
+  } = image;
+  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);
+  let newCropX = cropX + width - image.width;
+  image.width = width;
+  if (modified) {
+    if (newCropX < 0) {
+      newCropX = 0;
+    }
+    image.cropX = newCropX;
+    // calculate new width on the base of how much crop we have now
+    image.width += cropX - newCropX;
+  }
+  return newCropX !== cropX;
+};
+const changeImageCropY = (eventData, transform, x, y) => {
+  const {
+    target
+  } = transform;
+  const image = target;
+  const {
+    height,
+    cropY
+  } = image;
+  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);
+  let newCropY = cropY + height - image.height;
+  image.height = height;
+  if (modified) {
+    if (newCropY < 0) {
+      newCropY = 0;
+    }
+    image.cropY = newCropY;
+    image.height += cropY - newCropY;
+  }
+  return newCropY !== cropY;
+};
+const changeCropX = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageCropX));
+const changeCropY = wrapWithFireEvent('CROPPING', wrapWithFixedAnchor(changeImageCropY));
+
+/**
+ * A function to counter the move action and change cropX/cropY of an image
+ * Keep the image steady, but moves it inside its own cropping rectangle
+ */
+const cropPanMoveHandler = _ref => {
+  let {
+    transform
+  } = _ref;
+  // this makes the image pan too fast.
+  const {
+    target,
+    original
+  } = transform;
+  const fabricImage = target;
+  const p = new Point(target.left - original.left, target.top - original.top).transform(util.invertTransform(util.createRotateMatrix({
+    angle: fabricImage.getTotalAngle()
+  })));
+  let cropX = original.cropX - p.x / fabricImage.scaleX;
+  let cropY = original.cropY - p.y / fabricImage.scaleY;
+  const {
+    width,
+    height,
+    _element
+  } = fabricImage;
+  if (cropX < 0) {
+    cropX = 0;
+  }
+  if (cropY < 0) {
+    cropY = 0;
+  }
+  if (cropX + width > _element.width) {
+    cropX = _element.width - width;
+  }
+  if (cropY + height > _element.height) {
+    cropY = _element.height - height;
+  }
+  fabricImage.cropX = cropX;
+  fabricImage.cropY = cropY;
+  fabricImage.left = original.left;
+  fabricImage.top = original.top;
+};
+
+/**
+ * This position handler works only for this specific use case.
+ * It does not support padding nor offset, and it reduces all possible positions
+ * to the main 4 corners only.
+ * Any position that is < 0 is the extreme left/top, the rest are right/bottom
+ */
+function ghostScalePositionHandler(dim,
+// currentDimension
+finalMatrix, fabricObject
+// currentControl: Control,
+) {
+  const matrix = fabricObject.calcTransformMatrix();
+  const vpt = fabricObject.getViewportTransform();
+  const _finalMatrix = util.multiplyTransformMatrices(vpt, matrix);
+  let x = 0;
+  let y = 0;
+  if (this.x < 0) {
+    x = -fabricObject.width / 2 - fabricObject.cropX;
+  } else {
+    x = fabricObject.getElement().width - fabricObject.width / 2 - fabricObject.cropX;
+  }
+  if (this.y < 0) {
+    y = -fabricObject.height / 2 - fabricObject.cropY;
+  } else {
+    y = fabricObject.getElement().height - fabricObject.height / 2 - fabricObject.cropY;
+  }
+  return new Point(x, y).transform(_finalMatrix);
+}
+const calcScale = (currentPoint, height, width) => Math.min(Math.abs(currentPoint.x / width), Math.abs(currentPoint.y / height));
+
+/**
+ * Action handler generator that handles scaling of an image in crop mode.
+ * The goal is to keep the current bounding box steady.
+ * So this action handler has its own calculations for a dynamic anchor point
+ */
+const scaleEquallyCropGenerator = (cx, cy) => (eventData, transform, x, y) => {
+  const {
+    target
+  } = transform;
+  const {
+    width: fullWidth,
+    height: fullHeight
+  } = target.getElement();
+  const remainderX = fullWidth - target.width - target.cropX;
+  const remainderY = fullHeight - target.height - target.cropY;
+  const anchorOriginX = cx < 0 ? 1 + remainderX / target.width : -target.cropX / target.width;
+  const anchorOriginY = cy < 0 ? 1 + remainderY / target.height : -target.cropY / target.height;
+  const constraint = target.translateToOriginPoint(target.getCenterPoint(), anchorOriginX, anchorOriginY);
+  const newPoint = controlsUtils.getLocalPoint(transform, anchorOriginX, anchorOriginY, x, y);
+  const scale = calcScale(newPoint, fullHeight, fullWidth);
+  const scaleChangeX = scale / target.scaleX;
+  const scaleChangeY = scale / target.scaleY;
+  const scaledRemainderX = remainderX / scaleChangeX;
+  const scaledRemainderY = remainderY / scaleChangeY;
+  const newWidth = target.width / scaleChangeX;
+  const newHeight = target.height / scaleChangeY;
+  const newCropX = cx < 0 ? fullWidth - newWidth - scaledRemainderX : target.cropX / scaleChangeX;
+  const newCropY = cy < 0 ? fullHeight - newHeight - scaledRemainderY : target.cropY / scaleChangeY;
+  if ((cx < 0 ? scaledRemainderX : newCropX) + newWidth > fullWidth || (cy < 0 ? scaledRemainderY : newCropY) + newHeight > fullHeight) {
+    return false;
+  }
+  target.scaleX = scale;
+  target.scaleY = scale;
+  target.width = newWidth;
+  target.height = newHeight;
+  target.cropX = newCropX;
+  target.cropY = newCropY;
+  const newAnchorOriginX = cx < 0 ? 1 + scaledRemainderX / newWidth : -newCropX / newWidth;
+  const newAnchorOriginY = cy < 0 ? 1 + scaledRemainderY / newHeight : -newCropY / newHeight;
+  target.setPositionByOrigin(constraint, newAnchorOriginX, newAnchorOriginY);
+  return true;
+};
+function renderGhostImage(_ref2) {
+  let {
+    ctx
+  } = _ref2;
+  const alpha = ctx.globalAlpha;
+  ctx.globalAlpha *= 0.5;
+  ctx.drawImage(this._element, -this.width / 2 - this.cropX, -this.height / 2 - this.cropY);
+  ctx.globalAlpha = alpha;
+}
+
+export { changeCropHeight, changeCropWidth, changeCropX, changeCropY, changeImageCropX, changeImageCropY, changeImageHeight, changeImageWidth, cropPanMoveHandler, ghostScalePositionHandler, renderGhostImage, scaleEquallyCropGenerator };
+//# sourceMappingURL=croppingHandlers.mjs.map

package/dist-extensions/cropping_controls/croppingHandlers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"croppingHandlers.mjs","sources":["../../extensions/cropping_controls/croppingHandlers.ts"],"sourcesContent":["import type {\n  TModificationEvents,\n  Transform,\n  TransformActionHandler,\n  FabricImage,\n  ObjectEvents,\n  Control,\n  TMat2D,\n} from 'fabric';\nimport { controlsUtils, Point, util } from 'fabric';\n\nconst { wrapWithFixedAnchor, wrapWithFireEvent } = controlsUtils;\n\n/**\n * Wrap controlsUtils.changeObjectWidth with image constrains\n */\nexport const changeImageWidth: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const { target } = transform;\n  const { width } = target;\n  const image = target as FabricImage;\n  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);\n  const availableWidth = image._element.width - image.cropX;\n  if (modified) {\n    if (image.width > availableWidth) {\n      image.width = availableWidth;\n    }\n    if (image.width < 1) {\n      image.width = 1;\n    }\n  }\n  return width !== image.width;\n};\n\nexport const changeCropWidth = wrapWithFireEvent(\n  'CROPPING' as TModificationEvents,\n  wrapWithFixedAnchor(changeImageWidth),\n);\n\n/**\n * Wrap controlsUtils.changeObjectHeight with image constrains\n */\nexport const changeImageHeight: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const { target } = transform;\n  const { height } = target;\n  const image = target as FabricImage;\n  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);\n  const availableHeight = image._element.height - image.cropY;\n  if (modified) {\n    if (image.height > availableHeight) {\n      image.height = availableHeight;\n    }\n    if (image.height < 1) {\n      image.height = 1;\n    }\n  }\n  return height !== image.height;\n};\n\nexport const changeCropHeight = wrapWithFireEvent(\n  'CROPPING' as TModificationEvents,\n  wrapWithFixedAnchor(changeImageHeight),\n);\n\nexport const changeImageCropX: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const { target } = transform;\n  const image = target as FabricImage;\n  const { width, cropX } = image;\n  const modified = controlsUtils.changeObjectWidth(eventData, transform, x, y);\n  let newCropX = cropX + width - image.width;\n  image.width = width;\n  if (modified) {\n    if (newCropX < 0) {\n      newCropX = 0;\n    }\n    image.cropX = newCropX;\n    // calculate new width on the base of how much crop we have now\n    image.width += cropX - newCropX;\n  }\n  return newCropX !== cropX;\n};\n\nexport const changeImageCropY: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const { target } = transform;\n  const image = target as FabricImage;\n  const { height, cropY } = image;\n  const modified = controlsUtils.changeObjectHeight(eventData, transform, x, y);\n  let newCropY = cropY + height - image.height;\n  image.height = height;\n  if (modified) {\n    if (newCropY < 0) {\n      newCropY = 0;\n    }\n    image.cropY = newCropY;\n    image.height += cropY - newCropY;\n  }\n  return newCropY !== cropY;\n};\n\nexport const changeCropX = wrapWithFireEvent(\n  'CROPPING' as TModificationEvents,\n  wrapWithFixedAnchor(changeImageCropX),\n);\n\nexport const changeCropY = wrapWithFireEvent(\n  'CROPPING' as TModificationEvents,\n  wrapWithFixedAnchor(changeImageCropY),\n);\n\n/**\n * A function to counter the move action and change cropX/cropY of an image\n * Keep the image steady, but moves it inside its own cropping rectangle\n */\nexport const cropPanMoveHandler = ({ transform }: ObjectEvents['moving']) => {\n  // this makes the image pan too fast.\n  const { target, original } = transform as Transform;\n  const fabricImage = target as FabricImage;\n  const p = new Point(\n    target.left - original.left,\n    target.top - original.top,\n  ).transform(\n    util.invertTransform(\n      util.createRotateMatrix({ angle: fabricImage.getTotalAngle() }),\n    ),\n  );\n  let cropX = original.cropX! - p.x / fabricImage.scaleX;\n  let cropY = original.cropY! - p.y / fabricImage.scaleY;\n  const { width, height, _element } = fabricImage;\n  if (cropX < 0) {\n    cropX = 0;\n  }\n  if (cropY < 0) {\n    cropY = 0;\n  }\n  if (cropX + width > _element.width) {\n    cropX = _element.width - width;\n  }\n  if (cropY + height > _element.height) {\n    cropY = _element.height - height;\n  }\n  fabricImage.cropX = cropX;\n  fabricImage.cropY = cropY;\n  fabricImage.left = original.left;\n  fabricImage.top = original.top;\n};\n\n/**\n * This position handler works only for this specific use case.\n * It does not support padding nor offset, and it reduces all possible positions\n * to the main 4 corners only.\n * Any position that is < 0 is the extreme left/top, the rest are right/bottom\n */\nexport function ghostScalePositionHandler(\n  this: Control,\n  dim: Point, // currentDimension\n  finalMatrix: TMat2D,\n  fabricObject: FabricImage,\n  // currentControl: Control,\n) {\n  const matrix = fabricObject.calcTransformMatrix();\n  const vpt = fabricObject.getViewportTransform();\n  const _finalMatrix = util.multiplyTransformMatrices(vpt, matrix);\n\n  let x = 0;\n  let y = 0;\n  if (this.x < 0) {\n    x = -fabricObject.width / 2 - fabricObject.cropX;\n  } else {\n    x =\n      fabricObject.getElement().width -\n      fabricObject.width / 2 -\n      fabricObject.cropX;\n  }\n\n  if (this.y < 0) {\n    y = -fabricObject.height / 2 - fabricObject.cropY;\n  } else {\n    y =\n      fabricObject.getElement().height -\n      fabricObject.height / 2 -\n      fabricObject.cropY;\n  }\n  return new Point(x, y).transform(_finalMatrix);\n}\n\nconst calcScale = (currentPoint: Point, height: number, width: number) =>\n  Math.min(Math.abs(currentPoint.x / width), Math.abs(currentPoint.y / height));\n\n/**\n * Action handler generator that handles scaling of an image in crop mode.\n * The goal is to keep the current bounding box steady.\n * So this action handler has its own calculations for a dynamic anchor point\n */\nexport const scaleEquallyCropGenerator =\n  (cx: number, cy: number): TransformActionHandler =>\n  (eventData, transform, x, y) => {\n    const { target } = transform as unknown as { target: FabricImage };\n    const { width: fullWidth, height: fullHeight } = target.getElement();\n    const remainderX = fullWidth - target.width - target.cropX;\n    const remainderY = fullHeight - target.height - target.cropY;\n    const anchorOriginX =\n      cx < 0 ? 1 + remainderX / target.width : -target.cropX / target.width;\n    const anchorOriginY =\n      cy < 0 ? 1 + remainderY / target.height : -target.cropY / target.height;\n    const constraint = target.translateToOriginPoint(\n      target.getCenterPoint(),\n      anchorOriginX,\n      anchorOriginY,\n    );\n    const newPoint = controlsUtils.getLocalPoint(\n      transform,\n      anchorOriginX,\n      anchorOriginY,\n      x,\n      y,\n    );\n    const scale = calcScale(newPoint, fullHeight, fullWidth);\n    const scaleChangeX = scale / target.scaleX;\n    const scaleChangeY = scale / target.scaleY;\n    const scaledRemainderX = remainderX / scaleChangeX;\n    const scaledRemainderY = remainderY / scaleChangeY;\n    const newWidth = target.width / scaleChangeX;\n    const newHeight = target.height / scaleChangeY;\n    const newCropX =\n      cx < 0\n        ? fullWidth - newWidth - scaledRemainderX\n        : target.cropX / scaleChangeX;\n    const newCropY =\n      cy < 0\n        ? fullHeight - newHeight - scaledRemainderY\n        : target.cropY / scaleChangeY;\n\n    if (\n      (cx < 0 ? scaledRemainderX : newCropX) + newWidth > fullWidth ||\n      (cy < 0 ? scaledRemainderY : newCropY) + newHeight > fullHeight\n    ) {\n      return false;\n    }\n\n    target.scaleX = scale;\n    target.scaleY = scale;\n    target.width = newWidth;\n    target.height = newHeight;\n    target.cropX = newCropX;\n    target.cropY = newCropY;\n    const newAnchorOriginX =\n      cx < 0 ? 1 + scaledRemainderX / newWidth : -newCropX / newWidth;\n    const newAnchorOriginY =\n      cy < 0 ? 1 + scaledRemainderY / newHeight : -newCropY / newHeight;\n    target.setPositionByOrigin(constraint, newAnchorOriginX, newAnchorOriginY);\n    return true;\n  };\n\nexport function renderGhostImage(\n  this: FabricImage,\n  { ctx }: { ctx: CanvasRenderingContext2D },\n) {\n  const alpha = ctx.globalAlpha;\n  ctx.globalAlpha *= 0.5;\n  ctx.drawImage(\n    this._element,\n    -this.width / 2 - this.cropX,\n    -this.height / 2 - this.cropY,\n  );\n  ctx.globalAlpha = alpha;\n}\n"],"names":["wrapWithFixedAnchor","wrapWithFireEvent","controlsUtils","changeImageWidth","eventData","transform","x","y","target","width","image","modified","changeObjectWidth","availableWidth","_element","cropX","changeCropWidth","changeImageHeight","height","changeObjectHeight","availableHeight","cropY","changeCropHeight","changeImageCropX","newCropX","changeImageCropY","newCropY","changeCropX","changeCropY","cropPanMoveHandler","_ref","original","fabricImage","p","Point","left","top","util","invertTransform","createRotateMatrix","angle","getTotalAngle","scaleX","scaleY","ghostScalePositionHandler","dim","finalMatrix","fabricObject","matrix","calcTransformMatrix","vpt","getViewportTransform","_finalMatrix","multiplyTransformMatrices","getElement","calcScale","currentPoint","Math","min","abs","scaleEquallyCropGenerator","cx","cy","fullWidth","fullHeight","remainderX","remainderY","anchorOriginX","anchorOriginY","constraint","translateToOriginPoint","getCenterPoint","newPoint","getLocalPoint","scale","scaleChangeX","scaleChangeY","scaledRemainderX","scaledRemainderY","newWidth","newHeight","newAnchorOriginX","newAnchorOriginY","setPositionByOrigin","renderGhostImage","_ref2","ctx","alpha","globalAlpha","drawImage"],"mappings":"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"}

package/dist-extensions/cropping_controls/enterCropMode.mjs

@@ -0,0 +1,38 @@
+import { createImageCroppingControls } from './croppingControls.mjs';
+import { cropPanMoveHandler, renderGhostImage } from './croppingHandlers.mjs';
+
+/**
+ * Coordinates the change to image to enter crop mode and returns
+ * a function to exit crop mode
+ */
+const enterCropMode = function enterCropMode(_ref) {
+  var _fabricImage$canvas2;
+  let {
+    target
+  } = _ref;
+  const fabricImage = target;
+  const {
+    controls,
+    padding
+  } = fabricImage;
+  fabricImage.padding = 0;
+  fabricImage.controls = createImageCroppingControls();
+  fabricImage.on('moving', cropPanMoveHandler);
+  fabricImage.on('before:render', renderGhostImage);
+  fabricImage.setCoords();
+  const exitCropMode = () => {
+    var _fabricImage$canvas;
+    fabricImage.padding = padding;
+    fabricImage.off('moving', cropPanMoveHandler);
+    fabricImage.off('before:render', renderGhostImage);
+    fabricImage.controls = controls;
+    fabricImage.setCoords();
+    fabricImage.once('mousedblclick', enterCropMode);
+    (_fabricImage$canvas = fabricImage.canvas) === null || _fabricImage$canvas === void 0 || _fabricImage$canvas.requestRenderAll();
+  };
+  fabricImage.once('mousedblclick', exitCropMode);
+  (_fabricImage$canvas2 = fabricImage.canvas) === null || _fabricImage$canvas2 === void 0 || _fabricImage$canvas2.requestRenderAll();
+};
+
+export { enterCropMode };
+//# sourceMappingURL=enterCropMode.mjs.map

package/dist-extensions/cropping_controls/enterCropMode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"enterCropMode.mjs","sources":["../../extensions/cropping_controls/enterCropMode.ts"],"sourcesContent":["import { type FabricImage, type TPointerEventInfo } from 'fabric';\nimport { createImageCroppingControls } from './croppingControls';\nimport { cropPanMoveHandler, renderGhostImage } from './croppingHandlers';\n/**\n * Coordinates the change to image to enter crop mode and returns\n * a function to exit crop mode\n */\nexport const enterCropMode = function enterCropMode(\n  this: (args: TPointerEventInfo) => void,\n  { target }: TPointerEventInfo,\n) {\n  const fabricImage = target as FabricImage;\n  const { controls, padding } = fabricImage;\n  fabricImage.padding = 0;\n  fabricImage.controls = createImageCroppingControls();\n  fabricImage.on('moving', cropPanMoveHandler);\n  fabricImage.on('before:render', renderGhostImage);\n  fabricImage.setCoords();\n  const exitCropMode = () => {\n    fabricImage.padding = padding;\n    fabricImage.off('moving', cropPanMoveHandler);\n    fabricImage.off('before:render', renderGhostImage);\n    fabricImage.controls = controls;\n    fabricImage.setCoords();\n    fabricImage.once('mousedblclick', enterCropMode);\n    fabricImage.canvas?.requestRenderAll();\n  };\n  fabricImage.once('mousedblclick', exitCropMode);\n  fabricImage.canvas?.requestRenderAll();\n};\n"],"names":["enterCropMode","_ref","_fabricImage$canvas2","target","fabricImage","controls","padding","createImageCroppingControls","on","cropPanMoveHandler","renderGhostImage","setCoords","exitCropMode","_fabricImage$canvas","off","once","canvas","requestRenderAll"],"mappings":";;;AAGA;AACA;AACA;AACA;MACaA,aAAa,GAAG,SAASA,aAAaA,CAAAC,IAAA,EAGjD;AAAA,EAAA,IAAAC,oBAAA;EAAA,IADA;AAAEC,IAAAA;AAA0B,GAAC,GAAAF,IAAA;EAE7B,MAAMG,WAAW,GAAGD,MAAqB;EACzC,MAAM;IAAEE,QAAQ;AAAEC,IAAAA;AAAQ,GAAC,GAAGF,WAAW;EACzCA,WAAW,CAACE,OAAO,GAAG,CAAC;AACvBF,EAAAA,WAAW,CAACC,QAAQ,GAAGE,2BAA2B,EAAE;AACpDH,EAAAA,WAAW,CAACI,EAAE,CAAC,QAAQ,EAAEC,kBAAkB,CAAC;AAC5CL,EAAAA,WAAW,CAACI,EAAE,CAAC,eAAe,EAAEE,gBAAgB,CAAC;EACjDN,WAAW,CAACO,SAAS,EAAE;EACvB,MAAMC,YAAY,GAAGA,MAAM;AAAA,IAAA,IAAAC,mBAAA;IACzBT,WAAW,CAACE,OAAO,GAAGA,OAAO;AAC7BF,IAAAA,WAAW,CAACU,GAAG,CAAC,QAAQ,EAAEL,kBAAkB,CAAC;AAC7CL,IAAAA,WAAW,CAACU,GAAG,CAAC,eAAe,EAAEJ,gBAAgB,CAAC;IAClDN,WAAW,CAACC,QAAQ,GAAGA,QAAQ;IAC/BD,WAAW,CAACO,SAAS,EAAE;AACvBP,IAAAA,WAAW,CAACW,IAAI,CAAC,eAAe,EAAEf,aAAa,CAAC;AAChD,IAAA,CAAAa,mBAAA,GAAAT,WAAW,CAACY,MAAM,MAAA,IAAA,IAAAH,mBAAA,KAAA,MAAA,IAAlBA,mBAAA,CAAoBI,gBAAgB,EAAE;EACxC,CAAC;AACDb,EAAAA,WAAW,CAACW,IAAI,CAAC,eAAe,EAAEH,YAAY,CAAC;AAC/C,EAAA,CAAAV,oBAAA,GAAAE,WAAW,CAACY,MAAM,MAAA,IAAA,IAAAd,oBAAA,KAAA,MAAA,IAAlBA,oBAAA,CAAoBe,gBAAgB,EAAE;AACxC;;;;"}

package/dist-extensions/cropping_controls/renderCornerControl.mjs

@@ -0,0 +1,45 @@
+import { util } from 'fabric';
+
+const {
+  degreesToRadians
+} = util;
+
+/**
+ * Render a control for the main corners of a cropping image
+ * This function is written to respect object properties like transparentCorners, cornerSize
+ * cornerColor, cornerStrokeColor
+ * plus the addition of offsetY and offsetX.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+function renderCornerControl(ctx, left, top, styleOverride, fabricObject) {
+  ctx.save();
+  const {
+      stroke,
+      xSize,
+      ySize,
+      opName
+    } = this.commonRenderProps(ctx, left, top, fabricObject, styleOverride),
+    xSizeBy2 = xSize / 2,
+    ySizeBy2 = ySize / 2;
+  //  angle is relative to canvas plane
+  ctx.rotate(degreesToRadians(this.angle));
+  ctx.beginPath();
+  ctx.moveTo(-ySizeBy2, 0);
+  ctx.lineTo(-ySizeBy2, xSizeBy2);
+  ctx.lineTo(ySizeBy2, xSizeBy2);
+  ctx.lineTo(ySizeBy2, ySizeBy2);
+  ctx.lineTo(xSizeBy2, ySizeBy2);
+  ctx.lineTo(xSizeBy2, -ySizeBy2);
+  ctx.lineTo(-ySizeBy2, -ySizeBy2);
+  ctx.closePath();
+  ctx[opName]();
+  stroke && ctx.stroke();
+  ctx.restore();
+}
+
+export { renderCornerControl };
+//# sourceMappingURL=renderCornerControl.mjs.map

package/dist-extensions/cropping_controls/renderCornerControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCornerControl.mjs","sources":["../../extensions/cropping_controls/renderCornerControl.ts"],"sourcesContent":["import {\n  type ControlRenderingStyleOverride,\n  type InteractiveFabricObject,\n  util,\n  type Control,\n} from 'fabric';\n\nconst { degreesToRadians } = util;\n\n/**\n * Render a control for the main corners of a cropping image\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for FabricObject controls style\n * @param {FabricObject} fabricObject the fabric object for which we are rendering controls\n */\nexport function renderCornerControl(\n  this: Control,\n  ctx: CanvasRenderingContext2D,\n  left: number,\n  top: number,\n  styleOverride: ControlRenderingStyleOverride,\n  fabricObject: InteractiveFabricObject,\n) {\n  ctx.save();\n  const { stroke, xSize, ySize, opName } = this.commonRenderProps(\n      ctx,\n      left,\n      top,\n      fabricObject,\n      styleOverride,\n    ),\n    xSizeBy2 = xSize / 2,\n    ySizeBy2 = ySize / 2;\n  //  angle is relative to canvas plane\n  ctx.rotate(degreesToRadians(this.angle));\n  ctx.beginPath();\n  ctx.moveTo(-ySizeBy2, 0);\n  ctx.lineTo(-ySizeBy2, xSizeBy2);\n  ctx.lineTo(ySizeBy2, xSizeBy2);\n  ctx.lineTo(ySizeBy2, ySizeBy2);\n  ctx.lineTo(xSizeBy2, ySizeBy2);\n  ctx.lineTo(xSizeBy2, -ySizeBy2);\n  ctx.lineTo(-ySizeBy2, -ySizeBy2);\n  ctx.closePath();\n  ctx[opName]();\n  stroke && ctx.stroke();\n  ctx.restore();\n}\n"],"names":["degreesToRadians","util","renderCornerControl","ctx","left","top","styleOverride","fabricObject","save","stroke","xSize","ySize","opName","commonRenderProps","xSizeBy2","ySizeBy2","rotate","angle","beginPath","moveTo","lineTo","closePath","restore"],"mappings":";;AAOA,MAAM;AAAEA,EAAAA;AAAiB,CAAC,GAAGC,IAAI;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAEjCC,GAA6B,EAC7BC,IAAY,EACZC,GAAW,EACXC,aAA4C,EAC5CC,YAAqC,EACrC;EACAJ,GAAG,CAACK,IAAI,EAAE;EACV,MAAM;MAAEC,MAAM;MAAEC,KAAK;MAAEC,KAAK;AAAEC,MAAAA;AAAO,KAAC,GAAG,IAAI,CAACC,iBAAiB,CAC3DV,GAAG,EACHC,IAAI,EACJC,GAAG,EACHE,YAAY,EACZD,aACF,CAAC;IACDQ,QAAQ,GAAGJ,KAAK,GAAG,CAAC;IACpBK,QAAQ,GAAGJ,KAAK,GAAG,CAAC;AACtB;EACAR,GAAG,CAACa,MAAM,CAAChB,gBAAgB,CAAC,IAAI,CAACiB,KAAK,CAAC,CAAC;EACxCd,GAAG,CAACe,SAAS,EAAE;AACff,EAAAA,GAAG,CAACgB,MAAM,CAAC,CAACJ,QAAQ,EAAE,CAAC,CAAC;AACxBZ,EAAAA,GAAG,CAACiB,MAAM,CAAC,CAACL,QAAQ,EAAED,QAAQ,CAAC;AAC/BX,EAAAA,GAAG,CAACiB,MAAM,CAACL,QAAQ,EAAED,QAAQ,CAAC;AAC9BX,EAAAA,GAAG,CAACiB,MAAM,CAACL,QAAQ,EAAEA,QAAQ,CAAC;AAC9BZ,EAAAA,GAAG,CAACiB,MAAM,CAACN,QAAQ,EAAEC,QAAQ,CAAC;AAC9BZ,EAAAA,GAAG,CAACiB,MAAM,CAACN,QAAQ,EAAE,CAACC,QAAQ,CAAC;EAC/BZ,GAAG,CAACiB,MAAM,CAAC,CAACL,QAAQ,EAAE,CAACA,QAAQ,CAAC;EAChCZ,GAAG,CAACkB,SAAS,EAAE;AACflB,EAAAA,GAAG,CAACS,MAAM,CAAC,EAAE;AACbH,EAAAA,MAAM,IAAIN,GAAG,CAACM,MAAM,EAAE;EACtBN,GAAG,CAACmB,OAAO,EAAE;AACf;;;;"}

package/dist-extensions/extensions/cropping_controls/croppingControls.d.ts

@@ -0,0 +1,16 @@
+import { Control } from 'fabric';
+export declare const createImageCroppingControls: () => {
+    tls: Control;
+    brs: Control;
+    trs: Control;
+    bls: Control;
+    mlc: Control;
+    mrc: Control;
+    mbc: Control;
+    mtc: Control;
+    tlc: Control;
+    trc: Control;
+    blc: Control;
+    brc: Control;
+};
+//# sourceMappingURL=croppingControls.d.ts.map

package/dist-extensions/extensions/cropping_controls/croppingControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"croppingControls.d.ts","sourceRoot":"","sources":["../../../extensions/cropping_controls/croppingControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAehD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;CAsItC,CAAC"}

package/dist-extensions/extensions/cropping_controls/croppingHandlers.d.ts

@@ -0,0 +1,39 @@
+import type { Transform, TransformActionHandler, FabricImage, ObjectEvents, Control, TMat2D } from 'fabric';
+import { Point } from 'fabric';
+/**
+ * Wrap controlsUtils.changeObjectWidth with image constrains
+ */
+export declare const changeImageWidth: TransformActionHandler;
+export declare const changeCropWidth: TransformActionHandler<Transform>;
+/**
+ * Wrap controlsUtils.changeObjectHeight with image constrains
+ */
+export declare const changeImageHeight: TransformActionHandler;
+export declare const changeCropHeight: TransformActionHandler<Transform>;
+export declare const changeImageCropX: TransformActionHandler;
+export declare const changeImageCropY: TransformActionHandler;
+export declare const changeCropX: TransformActionHandler<Transform>;
+export declare const changeCropY: TransformActionHandler<Transform>;
+/**
+ * A function to counter the move action and change cropX/cropY of an image
+ * Keep the image steady, but moves it inside its own cropping rectangle
+ */
+export declare const cropPanMoveHandler: ({ transform }: ObjectEvents["moving"]) => void;
+/**
+ * This position handler works only for this specific use case.
+ * It does not support padding nor offset, and it reduces all possible positions
+ * to the main 4 corners only.
+ * Any position that is < 0 is the extreme left/top, the rest are right/bottom
+ */
+export declare function ghostScalePositionHandler(this: Control, dim: Point, // currentDimension
+finalMatrix: TMat2D, fabricObject: FabricImage): Point;
+/**
+ * Action handler generator that handles scaling of an image in crop mode.
+ * The goal is to keep the current bounding box steady.
+ * So this action handler has its own calculations for a dynamic anchor point
+ */
+export declare const scaleEquallyCropGenerator: (cx: number, cy: number) => TransformActionHandler;
+export declare function renderGhostImage(this: FabricImage, { ctx }: {
+    ctx: CanvasRenderingContext2D;
+}): void;
+//# sourceMappingURL=croppingHandlers.d.ts.map

package/dist-extensions/extensions/cropping_controls/croppingHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"croppingHandlers.d.ts","sourceRoot":"","sources":["../../../extensions/cropping_controls/croppingHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,SAAS,EACT,sBAAsB,EACtB,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACP,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAiB,KAAK,EAAQ,MAAM,QAAQ,CAAC;AAIpD;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,sBAoB9B,CAAC;AAEF,eAAO,MAAM,eAAe,mCAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,sBAoB/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAG5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,sBAqB9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,sBAoB9B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAGvB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAGvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAAe,YAAY,CAAC,QAAQ,CAAC,SA+BvE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,KAAK,EAAE,mBAAmB;AAC/B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,WAAW,SA2B1B;AAKD;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACnC,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,sBAyDzB,CAAC;AAEJ,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,wBAAwB,CAAA;CAAE,QAU3C"}

package/dist-extensions/extensions/cropping_controls/enterCropMode.d.ts

@@ -0,0 +1,7 @@
+import { type TPointerEventInfo } from 'fabric';
+/**
+ * Coordinates the change to image to enter crop mode and returns
+ * a function to exit crop mode
+ */
+export declare const enterCropMode: (this: (args: TPointerEventInfo) => void, { target }: TPointerEventInfo) => void;
+//# sourceMappingURL=enterCropMode.d.ts.map

package/dist-extensions/extensions/cropping_controls/enterCropMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enterCropMode.d.ts","sourceRoot":"","sources":["../../../extensions/cropping_controls/enterCropMode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,EACvC,YAAY,iBAAiB,SAoB9B,CAAC"}

package/dist-extensions/extensions/cropping_controls/renderCornerControl.d.ts

@@ -0,0 +1,14 @@
+import { type ControlRenderingStyleOverride, type InteractiveFabricObject, type Control } from 'fabric';
+/**
+ * Render a control for the main corners of a cropping image
+ * This function is written to respect object properties like transparentCorners, cornerSize
+ * cornerColor, cornerStrokeColor
+ * plus the addition of offsetY and offsetX.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export declare function renderCornerControl(this: Control, ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: ControlRenderingStyleOverride, fabricObject: InteractiveFabricObject): void;
+//# sourceMappingURL=renderCornerControl.d.ts.map

package/dist-extensions/extensions/cropping_controls/renderCornerControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCornerControl.d.ts","sourceRoot":"","sources":["../../../extensions/cropping_controls/renderCornerControl.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAE5B,KAAK,OAAO,EACb,MAAM,QAAQ,CAAC;AAIhB;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,uBAAuB,QA0BtC"}

package/dist-extensions/extensions/index.d.ts

@@ -3,4 +3,7 @@ export type * from './aligning_guidelines/typedefs';
 export { originUpdaterWrapper, installOriginWrapperUpdater, } from './data_updaters/origins';
 export { gradientUpdaterWrapper, installGradientUpdater, } from './data_updaters/gradient';
 export { addGestures, pinchEventHandler, rotateEventHandler, } from './westures_integration';
+export { createImageCroppingControls } from './cropping_controls/croppingControls';
+export { changeCropY, changeCropX, changeCropWidth, changeCropHeight, } from './cropping_controls/croppingHandlers';
+export { enterCropMode } from './cropping_controls/enterCropMode';
 //# sourceMappingURL=index.d.ts.map

package/dist-extensions/extensions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../extensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,mBAAmB,gCAAgC,CAAC;AAEpD,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../extensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,mBAAmB,gCAAgC,CAAC;AAEpD,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC"}

package/dist-extensions/fabric-extensions.min.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("fabric"),require("westures")):"function"==typeof define&&define.amd?define(["exports","fabric","westures"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).fabricExtensions={},t.fabric,t.westures)}(this,function(t,e,i){"use strict";function n(t,e,i){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t,e){return Math.abs(t-e)}function s(t,e,i){let n=1/0,s=[];for(const o of e){const e=r(t[i],o[i]);n>e&&(s=[],n=e),n==e&&s.push(o)}return{dis:n,arr:s}}function o(t){const{target:e,isScale:i,isUniform:n,corner:r,point:o,diagonalPoint:a,list:c,isCenter:l}=t,{dis:h,arr:f}=s(o,c,"x");if(h>this.margin/this.canvas.getZoom())return[];let d=f[f.length-1].x-o.x;d*=r.includes("l")?-1:1;const{width:g,height:u,scaleX:v,scaleY:p}=e,m=v*g+(e.strokeUniform?0:e.strokeWidth),b=(d+m)/m;if(0==b)return[];if(i?(e.set("scaleX",v*b),n&&e.set("scaleY",p*b)):(e.set("width",g*b),n&&e.set("height",u*b)),l)e.setRelativeXY(a,"center","center");else{const t=this.contraryOriginMap;e.setRelativeXY(a,...t[r])}return e.setCoords(),f.map(t=>({origin:o,target:t}))}function a(t){const{target:e,isScale:i,isUniform:n,corner:r,point:o,diagonalPoint:a,list:c,isCenter:l}=t,{dis:h,arr:f}=s(o,c,"y");if(h>this.margin/this.canvas.getZoom())return[];let d=f[f.length-1].y-o.y;d*=r.includes("t")?-1:1;const{width:g,height:u,scaleX:v,scaleY:p}=e,m=p*u+(e.strokeUniform?0:e.strokeWidth),b=(d+m)/m;if(0==b)return[];if(i?(e.set("scaleY",p*b),n&&e.set("scaleX",v*b)):(e.set("height",u*b),n&&e.set("width",g*b)),l)e.setRelativeXY(a,"center","center");else{const t=this.contraryOriginMap;e.setRelativeXY(a,...t[r])}return e.setCoords(),f.map(t=>({origin:o,target:t}))}function c(t,e){const i=this.canvas.getTopContext(),n=this.canvas.viewportTransform,r=this.canvas.getZoom();i.save(),i.transform(...n),i.lineWidth=this.width/r,this.lineDash&&i.setLineDash(this.lineDash),i.strokeStyle=this.color,i.beginPath(),i.moveTo(t.x,t.y),i.lineTo(e.x,e.y),i.stroke(),this.lineDash&&i.setLineDash([]),this.drawX(t,-1),this.drawX(e,1),i.restore()}function l(t,e){const i=this.canvas.getTopContext(),n=this.canvas.getZoom(),r=this.xSize/n;i.save(),i.translate(t.x,t.y),i.beginPath(),i.moveTo(-r,-r),i.lineTo(r,r),i.moveTo(r,-r),i.lineTo(-r,r),i.stroke(),i.restore()}function h(t){const e=this.canvas.getTopContext(),i=this.canvas.viewportTransform,n=this.canvas.getZoom();e.save(),e.transform(...i),e.lineWidth=this.width/n,e.strokeStyle=this.color;for(const e of t)this.drawX(e,0);e.restore()}function f(){const t=[];if(!this.closeVLine)for(const e of this.verticalLines)t.push(JSON.parse(e));if(!this.closeHLine)for(const e of this.horizontalLines)t.push(JSON.parse(e));const e=t.map(t=>t.target);h.call(this,e)}function d(){if(!this.closeVLine)for(const t of this.verticalLines){const{origin:i,target:n}=JSON.parse(t),r=new e.Point(n.x,i.y);this.drawLine(r,n)}}function g(){if(!this.closeHLine)for(const t of this.horizontalLines){const{origin:i,target:n}=JSON.parse(t),r=new e.Point(i.x,n.y);this.drawLine(r,n)}}function u(t,e){const i=t.getCoords();i.push(t.getCenterPoint());const n={target:t,list:i,points:e,margin:this.margin/this.canvas.getZoom()};return{vLines:p({...n,type:"x"}),hLines:p({...n,type:"y"})}}const v=[["left","top"],["right","top"],["right","bottom"],["left","bottom"],["center","center"]];function p(t){const{target:e,list:i,points:n,margin:r,type:o}=t,a=[],c=[];let l=1/0;for(const t of i){const e=s(t,n,o);c.push(e),l>e.dis&&(l=e.dis)}if(l>r)return a;let h=!1;for(let t=0;t<i.length;t++){if(c[t].dis!=l)continue;for(const e of c[t].arr)a.push({origin:i[t],target:e});if(h)continue;h=!0;const n=c[t].arr[0][o]-i[t][o];i.forEach(t=>{t[o]+=n}),e.setXY(i[t],...v[t]),e.setCoords()}return a}function m(t){const i=new Set,n=t.canvas;if(!n)return i;const r=t instanceof e.ActiveSelection?t.getObjects():[t];return n.forEachObject(t=>{t.isOnScreen()&&t.visible&&(t.constructor!=e.Group?i.add(t):y(i,t))}),b(i,r),i}function b(t,i){for(const n of i)n.constructor==e.Group?b(t,n.getObjects()):t.delete(n)}function y(t,i){const n=i.getObjects();for(const i of n)i.visible&&(i.constructor!=e.Group?t.add(i):y(t,i))}const w=function(t){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"left",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"top";return async function(r){const{originX:s=i,originY:o=n}=r;delete r.originX,delete r.originY;for(var a=arguments.length,c=new Array(a>1?a-1:0),l=1;l<a;l++)c[l-1]=arguments[l];const h=await t.call(this,r,...c),f=new e.Point(h.left,h.top);return h.setPositionByOrigin(f,s,o),h}},O=t=>async function(i){const{colorStops:n}=i,r=null==n?void 0:n.map(t=>{let{color:i,opacity:n,offset:r}=t;if(void 0===n||1===n)return{color:i,offset:r};return{color:new e.Color(i).setAlpha(n).toRgba(),offset:r}});return await t.call(this,{...i,colorStops:r})};t.AligningGuidelines=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,"canvas",void 0),n(this,"horizontalLines",new Set),n(this,"verticalLines",new Set),n(this,"cacheMap",new Map),n(this,"onlyDrawPoint",!1),n(this,"contraryOriginMap",{tl:["right","bottom"],tr:["left","bottom"],br:["left","top"],bl:["right","top"],mt:["center","bottom"],mr:["left","center"],mb:["center","top"],ml:["right","center"]}),n(this,"xSize",2.4),n(this,"lineDash",void 0),n(this,"margin",4),n(this,"width",1),n(this,"color","rgba(255,0,0,0.9)"),n(this,"closeVLine",!1),n(this,"closeHLine",!1),this.canvas=t,Object.assign(this,e),this.mouseUp=this.mouseUp.bind(this),this.scalingOrResizing=this.scalingOrResizing.bind(this),this.moving=this.moving.bind(this),this.beforeRender=this.beforeRender.bind(this),this.afterRender=this.afterRender.bind(this),this.initBehavior()}initBehavior(){this.canvas.on("mouse:up",this.mouseUp),this.canvas.on("object:resizing",this.scalingOrResizing),this.canvas.on("object:scaling",this.scalingOrResizing),this.canvas.on("object:moving",this.moving),this.canvas.on("before:render",this.beforeRender),this.canvas.on("after:render",this.afterRender)}getObjectsByTarget(t){return m(t)}getPointMap(t){return function(t){const e=t.getCoords();return{tl:e[0],tr:e[1],br:e[2],bl:e[3],mt:e[0].add(e[1]).scalarDivide(2),mr:e[1].add(e[2]).scalarDivide(2),mb:e[2].add(e[3]).scalarDivide(2),ml:e[3].add(e[0]).scalarDivide(2)}}(t)}getContraryMap(t){return function(t){var e;const i=null!==(e=t.aCoords)&&void 0!==e?e:t.calcACoords();return{tl:i.br,tr:i.bl,br:i.tl,bl:i.tr,mt:i.br.add(i.bl).scalarDivide(2),mr:i.bl.add(i.tl).scalarDivide(2),mb:i.tl.add(i.tr).scalarDivide(2),ml:i.tr.add(i.br).scalarDivide(2)}}(t)}getCaCheMapValue(t){const e=[t.calcTransformMatrix().toString(),t.width,t.height].join(),i=this.cacheMap.get(e);if(i)return i;const n=t.getCoords();return n.push(t.getCenterPoint()),this.cacheMap.set(e,n),n}drawLine(t,e){c.call(this,t,e)}drawX(t,e){l.call(this,t,e)}mouseUp(){this.verticalLines.clear(),this.horizontalLines.clear(),this.cacheMap.clear(),this.canvas.requestRenderAll()}scalingOrResizing(t){const i=t.target;i.setCoords();const n=String(t.transform.action).startsWith("scale");this.verticalLines.clear(),this.horizontalLines.clear();const r=this.getObjectsByTarget(i);let s=t.transform.corner;i.flipX&&(s.includes("l")?s=s.replace("l","r"):s.includes("r")&&(s=s.replace("r","l"))),i.flipY&&(s.includes("t")?s=s.replace("t","b"):s.includes("b")&&(s=s.replace("b","t")));const c=this.getPointMap(i);if(!(s in c))return;if(this.onlyDrawPoint=s.includes("m"),this.onlyDrawPoint){if(i.getTotalAngle()%90!=0)return}const l=this.getContraryMap(i),h=c[s];let f=l[s];const d="center"==t.transform.original.originX&&"center"==t.transform.original.originY;if(d){const t=i.group?h.transform(e.util.invertTransform(i.group.calcTransformMatrix())):h;f=f.add(t).scalarDivide(2)}const g=t.e[this.canvas.uniScaleKey];let u=this.canvas.uniformScaling&&!g||!this.canvas.uniformScaling&&g;this.onlyDrawPoint&&(u=!1);const v=[];for(const t of r){const e=this.getCaCheMapValue(t);v.push(...e)}const p={target:i,point:h,diagonalPoint:f,corner:s,list:v,isScale:n,isUniform:u,isCenter:d},m=this.onlyDrawPoint&&(s.includes("t")||s.includes("b")),b=this.onlyDrawPoint&&(s.includes("l")||s.includes("r")),y=m?[]:o.call(this,p),w=b?[]:a.call(this,p);y.forEach(t=>{this.verticalLines.add(JSON.stringify(t))}),w.forEach(t=>{this.horizontalLines.add(JSON.stringify(t))})}moving(t){const e=t.target;e.setCoords(),this.onlyDrawPoint=!1,this.verticalLines.clear(),this.horizontalLines.clear();const i=this.getObjectsByTarget(e),n=[];for(const t of i)n.push(...this.getCaCheMapValue(t));const{vLines:r,hLines:s}=u.call(this,e,n);r.forEach(t=>{this.verticalLines.add(JSON.stringify(t))}),s.forEach(t=>{this.horizontalLines.add(JSON.stringify(t))})}beforeRender(){this.canvas.clearContext(this.canvas.contextTop)}afterRender(){this.onlyDrawPoint?f.call(this):(d.call(this),g.call(this))}dispose(){this.canvas.off("mouse:up",this.mouseUp),this.canvas.off("object:resizing",this.scalingOrResizing),this.canvas.off("object:scaling",this.scalingOrResizing),this.canvas.off("object:moving",this.moving),this.canvas.off("before:render",this.beforeRender),this.canvas.off("after:render",this.afterRender)}},t.addGestures=t=>{const e=new i.Region(t.upperCanvasEl);t.addOrRemove(function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];return t.removeEventListener(...i)}),e.addGesture((t=>new i.Rotate(t.upperCanvasEl,e=>{let{rotation:i,event:n}=e;t.fireEventFromPointerEvent(n,"rotate","rotate",{rotation:i})}))(t)),e.addGesture((t=>new i.Pinch(t.upperCanvasEl,e=>{let{scale:i,event:n}=e;t.fireEventFromPointerEvent(n,"pinch","pinch",{scale:i})}))(t)),e.addGesture((t=>new i.Tap(t.upperCanvasEl,e=>{let{event:i}=e;t.fireEventFromPointerEvent(i,"mouse:tripleclick","mousetripleclick",void 0),i.preventDefault()},{numTaps:3,maxRetain:400}))(t)),e.addGesture((t=>new i.Tap(t.upperCanvasEl,e=>{let{event:i}=e;t.fireEventFromPointerEvent(i,"mouse:dblclick","mousedblclick",void 0),i.preventDefault()},{numTaps:2,maxRetain:300}))(t)),t.addOrRemove(function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];return t.addEventListener(...i)},!0)},t.gradientUpdaterWrapper=O,t.installGradientUpdater=()=>{e.Gradient.fromObject=O(e.Gradient.fromObject)},t.installOriginWrapperUpdater=(t,i)=>{e.BaseFabricObject._fromObject=w(e.BaseFabricObject._fromObject,t,i),e.FabricImage.fromObject=w(e.FabricImage.fromObject,t,i),e.Group.fromObject=w(e.Group.fromObject,t,i)},t.originUpdaterWrapper=w,t.pinchEventHandler=function(t){let{scale:e,target:i,scenePoint:n}=t;i&&this.getActiveObject()===i?(i.scaleX*=e,i.scaleY*=e):this.zoomToPoint(n,this.getZoom()*e)},t.rotateEventHandler=function(t){let{rotation:i,target:n}=t;n&&this.getActiveObject()===n&&n.rotate(n.angle+e.util.radiansToDegrees(i))}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("fabric"),require("westures")):"function"==typeof define&&define.amd?define(["exports","fabric","westures"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).fabricExtensions={},t.fabric,t.westures)}(this,function(t,e,n){"use strict";function i(t,e,n){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,e);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){return Math.abs(t-e)}function o(t,e,n){let i=1/0,o=[];for(const s of e){const e=r(t[n],s[n]);i>e&&(o=[],i=e),i==e&&o.push(s)}return{dis:i,arr:o}}function s(t){const{target:e,isScale:n,isUniform:i,corner:r,point:s,diagonalPoint:a,list:c,isCenter:l}=t,{dis:h,arr:d}=o(s,c,"x");if(h>this.margin/this.canvas.getZoom())return[];let g=d[d.length-1].x-s.x;g*=r.includes("l")?-1:1;const{width:f,height:u,scaleX:p,scaleY:m}=e,v=p*f+(e.strokeUniform?0:e.strokeWidth),b=(g+v)/v;if(0==b)return[];if(n?(e.set("scaleX",p*b),i&&e.set("scaleY",m*b)):(e.set("width",f*b),i&&e.set("height",u*b)),l)e.setRelativeXY(a,"center","center");else{const t=this.contraryOriginMap;e.setRelativeXY(a,...t[r])}return e.setCoords(),d.map(t=>({origin:s,target:t}))}function a(t){const{target:e,isScale:n,isUniform:i,corner:r,point:s,diagonalPoint:a,list:c,isCenter:l}=t,{dis:h,arr:d}=o(s,c,"y");if(h>this.margin/this.canvas.getZoom())return[];let g=d[d.length-1].y-s.y;g*=r.includes("t")?-1:1;const{width:f,height:u,scaleX:p,scaleY:m}=e,v=m*u+(e.strokeUniform?0:e.strokeWidth),b=(g+v)/v;if(0==b)return[];if(n?(e.set("scaleY",m*b),i&&e.set("scaleX",p*b)):(e.set("height",u*b),i&&e.set("width",f*b)),l)e.setRelativeXY(a,"center","center");else{const t=this.contraryOriginMap;e.setRelativeXY(a,...t[r])}return e.setCoords(),d.map(t=>({origin:s,target:t}))}function c(t,e){const n=this.canvas.getTopContext(),i=this.canvas.viewportTransform,r=this.canvas.getZoom();n.save(),n.transform(...i),n.lineWidth=this.width/r,this.lineDash&&n.setLineDash(this.lineDash),n.strokeStyle=this.color,n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.stroke(),this.lineDash&&n.setLineDash([]),this.drawX(t,-1),this.drawX(e,1),n.restore()}function l(t,e){const n=this.canvas.getTopContext(),i=this.canvas.getZoom(),r=this.xSize/i;n.save(),n.translate(t.x,t.y),n.beginPath(),n.moveTo(-r,-r),n.lineTo(r,r),n.moveTo(r,-r),n.lineTo(-r,r),n.stroke(),n.restore()}function h(t){const e=this.canvas.getTopContext(),n=this.canvas.viewportTransform,i=this.canvas.getZoom();e.save(),e.transform(...n),e.lineWidth=this.width/i,e.strokeStyle=this.color;for(const e of t)this.drawX(e,0);e.restore()}function d(){const t=[];if(!this.closeVLine)for(const e of this.verticalLines)t.push(JSON.parse(e));if(!this.closeHLine)for(const e of this.horizontalLines)t.push(JSON.parse(e));const e=t.map(t=>t.target);h.call(this,e)}function g(){if(!this.closeVLine)for(const t of this.verticalLines){const{origin:n,target:i}=JSON.parse(t),r=new e.Point(i.x,n.y);this.drawLine(r,i)}}function f(){if(!this.closeHLine)for(const t of this.horizontalLines){const{origin:n,target:i}=JSON.parse(t),r=new e.Point(n.x,i.y);this.drawLine(r,i)}}function u(t,e){const n=t.getCoords();n.push(t.getCenterPoint());const i={target:t,list:n,points:e,margin:this.margin/this.canvas.getZoom()};return{vLines:m({...i,type:"x"}),hLines:m({...i,type:"y"})}}const p=[["left","top"],["right","top"],["right","bottom"],["left","bottom"],["center","center"]];function m(t){const{target:e,list:n,points:i,margin:r,type:s}=t,a=[],c=[];let l=1/0;for(const t of n){const e=o(t,i,s);c.push(e),l>e.dis&&(l=e.dis)}if(l>r)return a;let h=!1;for(let t=0;t<n.length;t++){if(c[t].dis!=l)continue;for(const e of c[t].arr)a.push({origin:n[t],target:e});if(h)continue;h=!0;const i=c[t].arr[0][s]-n[t][s];n.forEach(t=>{t[s]+=i}),e.setXY(n[t],...p[t]),e.setCoords()}return a}function v(t){const n=new Set,i=t.canvas;if(!i)return n;const r=t instanceof e.ActiveSelection?t.getObjects():[t];return i.forEachObject(t=>{t.isOnScreen()&&t.visible&&(t.constructor!=e.Group?n.add(t):w(n,t))}),b(n,r),n}function b(t,n){for(const i of n)i.constructor==e.Group?b(t,i.getObjects()):t.delete(i)}function w(t,n){const i=n.getObjects();for(const n of i)n.visible&&(n.constructor!=e.Group?t.add(n):w(t,n))}const y=function(t){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"left",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"top";return async function(r){const{originX:o=n,originY:s=i}=r;delete r.originX,delete r.originY;for(var a=arguments.length,c=new Array(a>1?a-1:0),l=1;l<a;l++)c[l-1]=arguments[l];const h=await t.call(this,r,...c),d=new e.Point(h.left,h.top);return h.setPositionByOrigin(d,o,s),h}},C=t=>async function(n){const{colorStops:i}=n,r=null==i?void 0:i.map(t=>{let{color:n,opacity:i,offset:r}=t;if(void 0===i||1===i)return{color:n,offset:r};return{color:new e.Color(n).setAlpha(i).toRgba(),offset:r}});return await t.call(this,{...n,colorStops:r})};const{wrapWithFixedAnchor:O,wrapWithFireEvent:P}=e.controlsUtils,x=P("CROPPING",O((t,n,i,r)=>{const{target:o}=n,{width:s}=o,a=o,c=e.controlsUtils.changeObjectWidth(t,n,i,r),l=a._element.width-a.cropX;return c&&(a.width>l&&(a.width=l),a.width<1&&(a.width=1)),s!==a.width})),S=P("CROPPING",O((t,n,i,r)=>{const{target:o}=n,{height:s}=o,a=o,c=e.controlsUtils.changeObjectHeight(t,n,i,r),l=a._element.height-a.cropY;return c&&(a.height>l&&(a.height=l),a.height<1&&(a.height=1)),s!==a.height})),T=P("CROPPING",O((t,n,i,r)=>{const{target:o}=n,s=o,{width:a,cropX:c}=s,l=e.controlsUtils.changeObjectWidth(t,n,i,r);let h=c+a-s.width;return s.width=a,l&&(h<0&&(h=0),s.cropX=h,s.width+=c-h),h!==c})),X=P("CROPPING",O((t,n,i,r)=>{const{target:o}=n,s=o,{height:a,cropY:c}=s,l=e.controlsUtils.changeObjectHeight(t,n,i,r);let h=c+a-s.height;return s.height=a,l&&(h<0&&(h=0),s.cropY=h,s.height+=c-h),h!==c})),z=t=>{let{transform:n}=t;const{target:i,original:r}=n,o=i,s=new e.Point(i.left-r.left,i.top-r.top).transform(e.util.invertTransform(e.util.createRotateMatrix({angle:o.getTotalAngle()})));let a=r.cropX-s.x/o.scaleX,c=r.cropY-s.y/o.scaleY;const{width:l,height:h,_element:d}=o;a<0&&(a=0),c<0&&(c=0),a+l>d.width&&(a=d.width-l),c+h>d.height&&(c=d.height-h),o.cropX=a,o.cropY=c,o.left=r.left,o.top=r.top};function R(t,n,i){const r=i.calcTransformMatrix(),o=i.getViewportTransform(),s=e.util.multiplyTransformMatrices(o,r);let a=0,c=0;return a=this.x<0?-i.width/2-i.cropX:i.getElement().width-i.width/2-i.cropX,c=this.y<0?-i.height/2-i.cropY:i.getElement().height-i.height/2-i.cropY,new e.Point(a,c).transform(s)}const Y=(t,n)=>(i,r,o,s)=>{const{target:a}=r,{width:c,height:l}=a.getElement(),h=c-a.width-a.cropX,d=l-a.height-a.cropY,g=t<0?1+h/a.width:-a.cropX/a.width,f=n<0?1+d/a.height:-a.cropY/a.height,u=a.translateToOriginPoint(a.getCenterPoint(),g,f),p=e.controlsUtils.getLocalPoint(r,g,f,o,s),m=(v=p,b=l,w=c,Math.min(Math.abs(v.x/w),Math.abs(v.y/b)));var v,b,w;const y=m/a.scaleX,C=m/a.scaleY,O=h/y,P=d/C,x=a.width/y,S=a.height/C,T=t<0?c-x-O:a.cropX/y,X=n<0?l-S-P:a.cropY/C;if((t<0?O:T)+x>c||(n<0?P:X)+S>l)return!1;a.scaleX=m,a.scaleY=m,a.width=x,a.height=S,a.cropX=T,a.cropY=X;const z=t<0?1+O/x:-T/x,R=n<0?1+P/S:-X/S;return a.setPositionByOrigin(u,z,R),!0};function H(t){let{ctx:e}=t;const n=e.globalAlpha;e.globalAlpha*=.5,e.drawImage(this._element,-this.width/2-this.cropX,-this.height/2-this.cropY),e.globalAlpha=n}const{degreesToRadians:j}=e.util;function L(t,e,n,i,r){t.save();const{stroke:o,xSize:s,ySize:a,opName:c}=this.commonRenderProps(t,e,n,r,i),l=s/2,h=a/2;t.rotate(j(this.angle)),t.beginPath(),t.moveTo(-h,0),t.lineTo(-h,l),t.lineTo(h,l),t.lineTo(h,h),t.lineTo(l,h),t.lineTo(l,-h),t.lineTo(-h,-h),t.closePath(),t[c](),o&&t.stroke(),t.restore()}const{scaleCursorStyleHandler:E}=e.controlsUtils,A=()=>"crop",D=()=>({tls:new e.Control({x:-.5,y:-.5,cursorStyleHandler:E,positionHandler:R,actionHandler:Y(-.5,-.5)}),brs:new e.Control({x:.5,y:.5,cursorStyleHandler:E,positionHandler:R,actionHandler:Y(.5,.5)}),trs:new e.Control({x:.5,y:-.5,cursorStyleHandler:E,positionHandler:R,actionHandler:Y(.5,-.5)}),bls:new e.Control({x:-.5,y:.5,cursorStyleHandler:E,positionHandler:R,actionHandler:Y(-.5,.5)}),mlc:new e.Control({x:-.5,y:0,sizeX:4,sizeY:20,cursorStyleHandler:E,actionHandler:T,getActionName:A}),mrc:new e.Control({x:.5,y:0,sizeX:4,sizeY:20,cursorStyleHandler:E,actionHandler:x,getActionName:A}),mbc:new e.Control({x:0,y:.5,sizeX:20,sizeY:4,cursorStyleHandler:E,actionHandler:S,getActionName:A}),mtc:new e.Control({x:0,y:-.5,sizeX:20,sizeY:4,cursorStyleHandler:E,actionHandler:X,getActionName:A}),tlc:new e.Control({angle:0,x:-.5,y:-.5,sizeX:20,sizeY:4,render:L,cursorStyleHandler:E,actionHandler:function(){const t=T(...arguments),e=X(...arguments);return t||e},getActionName:A}),trc:new e.Control({angle:90,x:.5,y:-.5,sizeX:20,sizeY:4,render:L,cursorStyleHandler:E,actionHandler:function(){const t=x(...arguments),e=X(...arguments);return t||e},getActionName:A}),blc:new e.Control({angle:270,x:-.5,y:.5,sizeX:20,sizeY:4,render:L,cursorStyleHandler:E,actionHandler:function(){const t=S(...arguments),e=T(...arguments);return t||e},getActionName:A}),brc:new e.Control({angle:180,x:.5,y:.5,sizeX:20,sizeY:4,render:L,cursorStyleHandler:E,actionHandler:function(){const t=S(...arguments),e=x(...arguments);return t||e},getActionName:A})});t.AligningGuidelines=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};i(this,"canvas",void 0),i(this,"horizontalLines",new Set),i(this,"verticalLines",new Set),i(this,"cacheMap",new Map),i(this,"onlyDrawPoint",!1),i(this,"contraryOriginMap",{tl:["right","bottom"],tr:["left","bottom"],br:["left","top"],bl:["right","top"],mt:["center","bottom"],mr:["left","center"],mb:["center","top"],ml:["right","center"]}),i(this,"xSize",2.4),i(this,"lineDash",void 0),i(this,"margin",4),i(this,"width",1),i(this,"color","rgba(255,0,0,0.9)"),i(this,"closeVLine",!1),i(this,"closeHLine",!1),this.canvas=t,Object.assign(this,e),this.mouseUp=this.mouseUp.bind(this),this.scalingOrResizing=this.scalingOrResizing.bind(this),this.moving=this.moving.bind(this),this.beforeRender=this.beforeRender.bind(this),this.afterRender=this.afterRender.bind(this),this.initBehavior()}initBehavior(){this.canvas.on("mouse:up",this.mouseUp),this.canvas.on("object:resizing",this.scalingOrResizing),this.canvas.on("object:scaling",this.scalingOrResizing),this.canvas.on("object:moving",this.moving),this.canvas.on("before:render",this.beforeRender),this.canvas.on("after:render",this.afterRender)}getObjectsByTarget(t){return v(t)}getPointMap(t){return function(t){const e=t.getCoords();return{tl:e[0],tr:e[1],br:e[2],bl:e[3],mt:e[0].add(e[1]).scalarDivide(2),mr:e[1].add(e[2]).scalarDivide(2),mb:e[2].add(e[3]).scalarDivide(2),ml:e[3].add(e[0]).scalarDivide(2)}}(t)}getContraryMap(t){return function(t){var e;const n=null!==(e=t.aCoords)&&void 0!==e?e:t.calcACoords();return{tl:n.br,tr:n.bl,br:n.tl,bl:n.tr,mt:n.br.add(n.bl).scalarDivide(2),mr:n.bl.add(n.tl).scalarDivide(2),mb:n.tl.add(n.tr).scalarDivide(2),ml:n.tr.add(n.br).scalarDivide(2)}}(t)}getCaCheMapValue(t){const e=[t.calcTransformMatrix().toString(),t.width,t.height].join(),n=this.cacheMap.get(e);if(n)return n;const i=t.getCoords();return i.push(t.getCenterPoint()),this.cacheMap.set(e,i),i}drawLine(t,e){c.call(this,t,e)}drawX(t,e){l.call(this,t,e)}mouseUp(){this.verticalLines.clear(),this.horizontalLines.clear(),this.cacheMap.clear(),this.canvas.requestRenderAll()}scalingOrResizing(t){const n=t.target;n.setCoords();const i=String(t.transform.action).startsWith("scale");this.verticalLines.clear(),this.horizontalLines.clear();const r=this.getObjectsByTarget(n);let o=t.transform.corner;n.flipX&&(o.includes("l")?o=o.replace("l","r"):o.includes("r")&&(o=o.replace("r","l"))),n.flipY&&(o.includes("t")?o=o.replace("t","b"):o.includes("b")&&(o=o.replace("b","t")));const c=this.getPointMap(n);if(!(o in c))return;if(this.onlyDrawPoint=o.includes("m"),this.onlyDrawPoint){if(n.getTotalAngle()%90!=0)return}const l=this.getContraryMap(n),h=c[o];let d=l[o];const g="center"==t.transform.original.originX&&"center"==t.transform.original.originY;if(g){const t=n.group?h.transform(e.util.invertTransform(n.group.calcTransformMatrix())):h;d=d.add(t).scalarDivide(2)}const f=t.e[this.canvas.uniScaleKey];let u=this.canvas.uniformScaling&&!f||!this.canvas.uniformScaling&&f;this.onlyDrawPoint&&(u=!1);const p=[];for(const t of r){const e=this.getCaCheMapValue(t);p.push(...e)}const m={target:n,point:h,diagonalPoint:d,corner:o,list:p,isScale:i,isUniform:u,isCenter:g},v=this.onlyDrawPoint&&(o.includes("t")||o.includes("b")),b=this.onlyDrawPoint&&(o.includes("l")||o.includes("r")),w=v?[]:s.call(this,m),y=b?[]:a.call(this,m);w.forEach(t=>{this.verticalLines.add(JSON.stringify(t))}),y.forEach(t=>{this.horizontalLines.add(JSON.stringify(t))})}moving(t){const e=t.target;e.setCoords(),this.onlyDrawPoint=!1,this.verticalLines.clear(),this.horizontalLines.clear();const n=this.getObjectsByTarget(e),i=[];for(const t of n)i.push(...this.getCaCheMapValue(t));const{vLines:r,hLines:o}=u.call(this,e,i);r.forEach(t=>{this.verticalLines.add(JSON.stringify(t))}),o.forEach(t=>{this.horizontalLines.add(JSON.stringify(t))})}beforeRender(){this.canvas.clearContext(this.canvas.contextTop)}afterRender(){this.onlyDrawPoint?d.call(this):(g.call(this),f.call(this))}dispose(){this.canvas.off("mouse:up",this.mouseUp),this.canvas.off("object:resizing",this.scalingOrResizing),this.canvas.off("object:scaling",this.scalingOrResizing),this.canvas.off("object:moving",this.moving),this.canvas.off("before:render",this.beforeRender),this.canvas.off("after:render",this.afterRender)}},t.addGestures=t=>{const e=new n.Region(t.upperCanvasEl);t.addOrRemove(function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];return t.removeEventListener(...n)}),e.addGesture((t=>new n.Rotate(t.upperCanvasEl,e=>{let{rotation:n,event:i}=e;t.fireEventFromPointerEvent(i,"rotate","rotate",{rotation:n})}))(t)),e.addGesture((t=>new n.Pinch(t.upperCanvasEl,e=>{let{scale:n,event:i}=e;t.fireEventFromPointerEvent(i,"pinch","pinch",{scale:n})}))(t)),e.addGesture((t=>new n.Tap(t.upperCanvasEl,e=>{let{event:n}=e;t.fireEventFromPointerEvent(n,"mouse:tripleclick","mousetripleclick",void 0),n.preventDefault()},{numTaps:3,maxRetain:400}))(t)),e.addGesture((t=>new n.Tap(t.upperCanvasEl,e=>{let{event:n}=e;t.fireEventFromPointerEvent(n,"mouse:dblclick","mousedblclick",void 0),n.preventDefault()},{numTaps:2,maxRetain:300}))(t)),t.addOrRemove(function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];return t.addEventListener(...n)},!0)},t.changeCropHeight=S,t.changeCropWidth=x,t.changeCropX=T,t.changeCropY=X,t.createImageCroppingControls=D,t.enterCropMode=function t(e){var n;let{target:i}=e;const r=i,{controls:o,padding:s}=r;r.padding=0,r.controls=D(),r.on("moving",z),r.on("before:render",H),r.setCoords();r.once("mousedblclick",()=>{var e;r.padding=s,r.off("moving",z),r.off("before:render",H),r.controls=o,r.setCoords(),r.once("mousedblclick",t),null===(e=r.canvas)||void 0===e||e.requestRenderAll()}),null===(n=r.canvas)||void 0===n||n.requestRenderAll()},t.gradientUpdaterWrapper=C,t.installGradientUpdater=()=>{e.Gradient.fromObject=C(e.Gradient.fromObject)},t.installOriginWrapperUpdater=(t,n)=>{e.BaseFabricObject._fromObject=y(e.BaseFabricObject._fromObject,t,n),e.FabricImage.fromObject=y(e.FabricImage.fromObject,t,n),e.Group.fromObject=y(e.Group.fromObject,t,n)},t.originUpdaterWrapper=y,t.pinchEventHandler=function(t){let{scale:e,target:n,scenePoint:i}=t;n&&this.getActiveObject()===n?(n.scaleX*=e,n.scaleY*=e):this.zoomToPoint(i,this.getZoom()*e)},t.rotateEventHandler=function(t){let{rotation:n,target:i}=t;i&&this.getActiveObject()===i&&i.rotate(i.angle+e.util.radiansToDegrees(n))}});
 //# sourceMappingURL=fabric-extensions.min.js.map