fabric 7.0.0 → 7.2.0

package/dist/src/controls/Control.d.ts

@@ -1,7 +1,7 @@
 import type { ControlActionHandler, TPointerEvent, TransformActionHandler } from '../EventTypeDefs';
 import { Point } from '../Point';
 import type { InteractiveFabricObject, TOCoord } from '../shapes/Object/InteractiveObject';
-import type { TCornerPoint, TDegree, TMat2D } from '../typedefs';
+import type { TCornerPoint, TDegree, TMat2D, TOriginX, TOriginY } from '../typedefs';
 import type { ControlRenderingStyleOverride } from './controlRendering';
 export declare class Control {
     /**
@@ -111,7 +111,15 @@ export declare class Control {
      * @default false
      */
     withConnection: boolean;
+    transformAnchorPoint?: {
+        x: TOriginX;
+        y: TOriginY;
+    };
     constructor(options?: Partial<Control>);
+    getTransformAnchorPoint(): {
+        x: TOriginX;
+        y: TOriginY;
+    };
     /**
      * The control actionHandler, provide one to handle action ( control being moved )
      * @param {Event} eventData the native mouse event
@@ -212,6 +220,19 @@ export declare class Control {
         br: Point;
         bl: Point;
     };
+    /**
+     * This is an helper method to prepare the canvas to render a control
+     * It detectes common control properties and sets the correct fill and
+     * stroke styles on the context. It does not execute translations or
+     * rotations since different controls need differnt combination of these.
+     */
+    commonRenderProps(ctx: CanvasRenderingContext2D, left: number, top: number, fabricObject: InteractiveFabricObject, styleOverride?: ControlRenderingStyleOverride): {
+        stroke: boolean;
+        xSize: number;
+        ySize: number;
+        transparentCorners: boolean;
+        opName: 'stroke' | 'fill';
+    };
     /**
      * Render function for the control.
      * When this function runs the context is unscaled. unrotate. Just retina scaled.

package/dist/src/controls/Control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../../src/controls/Control.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../../src/controls/Control.ts"],"names":[],"mappings":"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"}

package/dist/src/controls/Control.min.mjs

@@ -1,2 +1,2 @@
-import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Intersection as i}from"../Intersection.min.mjs";import{Point as r}from"../Point.min.mjs";import{SCALE as s}from"../constants.min.mjs";import{multiplyTransformMatrixArray as e,createTranslateMatrix as o,createRotateMatrix as n,createScaleMatrix as l}from"../util/misc/matrix.min.mjs";import{renderSquareControl as a,renderCircleControl as c}from"./controlRendering.min.mjs";class h{constructor(i){t(this,"visible",!0),t(this,"actionName",s),t(this,"angle",0),t(this,"x",0),t(this,"y",0),t(this,"offsetX",0),t(this,"offsetY",0),t(this,"sizeX",0),t(this,"sizeY",0),t(this,"touchSizeX",0),t(this,"touchSizeY",0),t(this,"cursorStyle","crosshair"),t(this,"withConnection",!1),Object.assign(this,i)}shouldActivate(t,r,s,e){var o;let{tl:n,tr:l,br:a,bl:c}=e;return(null===(o=r.canvas)||void 0===o?void 0:o.getActiveObject())===r&&r.isControlVisible(t)&&i.isPointInPolygon(s,[n,l,a,c])}getActionHandler(t,i,r){return this.actionHandler}getMouseDownHandler(t,i,r){return this.mouseDownHandler}getMouseUpHandler(t,i,r){return this.mouseUpHandler}cursorStyleHandler(t,i,r,s){return i.cursorStyle}getActionName(t,i,r){return i.actionName}getVisibility(t,i){var r,s;return null!==(r=null===(s=t._controlsVisibility)||void 0===s?void 0:s[i])&&void 0!==r?r:this.visible}setVisibility(t,i,r){this.visible=t}positionHandler(t,i,s,e){return new r(this.x*t.x+this.offsetX,this.y*t.y+this.offsetY).transform(i)}calcCornerCoords(t,i,s,a,c,h){const m=e([o(s,a),n({angle:t}),l((c?this.touchSizeX:this.sizeX)||i,(c?this.touchSizeY:this.sizeY)||i)]);return{tl:new r(-.5,-.5).transform(m),tr:new r(.5,-.5).transform(m),br:new r(.5,.5).transform(m),bl:new r(-.5,.5).transform(m)}}render(t,i,r,s,e){if("circle"===((s=s||{}).cornerStyle||e.cornerStyle))c.call(this,t,i,r,s,e);else a.call(this,t,i,r,s,e)}}export{h as Control};
+import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Intersection as r}from"../Intersection.min.mjs";import{Point as e}from"../Point.min.mjs";import{SCALE as i,STROKE as o,FILL as s}from"../constants.min.mjs";import{multiplyTransformMatrixArray as n,createTranslateMatrix as l,createRotateMatrix as a,createScaleMatrix as c}from"../util/misc/matrix.min.mjs";import{degreesToRadians as m}from"../util/misc/radiansDegreesConversion.min.mjs";import{renderSquareControl as h,renderCircleControl as u}from"./controlRendering.min.mjs";class f{constructor(r){t(this,"visible",!0),t(this,"actionName",i),t(this,"angle",0),t(this,"x",0),t(this,"y",0),t(this,"offsetX",0),t(this,"offsetY",0),t(this,"sizeX",0),t(this,"sizeY",0),t(this,"touchSizeX",0),t(this,"touchSizeY",0),t(this,"cursorStyle","crosshair"),t(this,"withConnection",!1),Object.assign(this,r)}getTransformAnchorPoint(){var t;return null!==(t=this.transformAnchorPoint)&&void 0!==t?t:new e(.5-this.x,.5-this.y)}shouldActivate(t,e,i,o){var s;let{tl:n,tr:l,br:a,bl:c}=o;return(null===(s=e.canvas)||void 0===s?void 0:s.getActiveObject())===e&&e.isControlVisible(t)&&r.isPointInPolygon(i,[n,l,a,c])}getActionHandler(t,r,e){return this.actionHandler}getMouseDownHandler(t,r,e){return this.mouseDownHandler}getMouseUpHandler(t,r,e){return this.mouseUpHandler}cursorStyleHandler(t,r,e,i){return r.cursorStyle}getActionName(t,r,e){return r.actionName}getVisibility(t,r){var e,i;return null!==(e=null===(i=t._controlsVisibility)||void 0===i?void 0:i[r])&&void 0!==e?e:this.visible}setVisibility(t,r,e){this.visible=t}positionHandler(t,r,i,o){return new e(this.x*t.x+this.offsetX,this.y*t.y+this.offsetY).transform(r)}calcCornerCoords(t,r,i,o,s,m){const h=n([l(i,o),a({angle:t}),c((s?this.touchSizeX:this.sizeX)||r,(s?this.touchSizeY:this.sizeY)||r)]);return{tl:new e(-.5,-.5).transform(h),tr:new e(.5,-.5).transform(h),br:new e(.5,.5).transform(h),bl:new e(-.5,.5).transform(h)}}commonRenderProps(t,r,e,i){let n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};const{cornerSize:l,cornerColor:a,transparentCorners:c,cornerStrokeColor:h}=n,u=l||i.cornerSize,f=this.sizeX||u,d=this.sizeY||u,p=void 0!==c?c:i.transparentCorners,v=p?o:s,g=h||i.cornerStrokeColor,y=!p&&!!g;return t.fillStyle=a||i.cornerColor||"",t.strokeStyle=g||"",t.translate(r,e),t.rotate(m(i.getTotalAngle())),{stroke:y,xSize:f,ySize:d,transparentCorners:p,opName:v}}render(t,r,e,i,o){if("circle"===((i=i||{}).cornerStyle||o.cornerStyle))u.call(this,t,r,e,i,o);else h.call(this,t,r,e,i,o)}}export{f as Control};
 //# sourceMappingURL=Control.min.mjs.map

package/dist/src/controls/Control.min.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Control.min.mjs","sources":["../../../src/controls/Control.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type {\n  ControlActionHandler,\n  TPointerEvent,\n  TransformActionHandler,\n} from '../EventTypeDefs';\nimport { Intersection } from '../Intersection';\nimport { Point } from '../Point';\nimport { SCALE } from '../constants';\nimport type {\n  InteractiveFabricObject,\n  TOCoord,\n} from '../shapes/Object/InteractiveObject';\nimport type { TCornerPoint, TDegree, TMat2D } from '../typedefs';\nimport {\n  createRotateMatrix,\n  createScaleMatrix,\n  createTranslateMatrix,\n  multiplyTransformMatrixArray,\n} from '../util/misc/matrix';\nimport type { ControlRenderingStyleOverride } from './controlRendering';\nimport { renderCircleControl, renderSquareControl } from './controlRendering';\n\nexport class Control {\n  /**\n   * keep track of control visibility.\n   * mainly for backward compatibility.\n   * if you do not want to see a control, you can remove it\n   * from the control set.\n   * @type {Boolean}\n   * @default true\n   */\n  visible = true;\n\n  /**\n   * Name of the action that the control will likely execute.\n   * This is optional. FabricJS uses to identify what the user is doing for some\n   * extra optimizations. If you are writing a custom control and you want to know\n   * somewhere else in the code what is going on, you can use this string here.\n   * you can also provide a custom getActionName if your control run multiple actions\n   * depending on some external state.\n   * default to scale since is the most common, used on 4 corners by default\n   * @type {String}\n   * @default 'scale'\n   */\n  actionName = SCALE;\n\n  /**\n   * Drawing angle of the control.\n   * NOT used for now, but name marked as needed for internal logic\n   * example: to reuse the same drawing function for different rotated controls\n   * @type {Number}\n   * @default 0\n   */\n  angle = 0;\n\n  /**\n   * Relative position of the control. X\n   * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  x = 0;\n\n  /**\n   * Relative position of the control. Y\n   * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  y = 0;\n\n  /**\n   * Horizontal offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the right, negative to the left.\n   * It used when you want to have position of control that does not scale with\n   * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n   * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will\n   * stay 30 pixels no matter how the object is big. Another example is having 2\n   * controls in the corner, that stay in the same position when the object scale.\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  offsetX = 0;\n\n  /**\n   * Vertical offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the bottom, negative to the top.\n   * @type {Number}\n   * @default 0\n   */\n  offsetY = 0;\n\n  /**\n   * Sets the length of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeX = 0;\n\n  /**\n   * Sets the height of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeY = 0;\n\n  /**\n   * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeX = 0;\n\n  /**\n   * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeY = 0;\n\n  /**\n   * Css cursor style to display when the control is hovered.\n   * if the method `cursorStyleHandler` is provided, this property is ignored.\n   * @type {String}\n   * @default 'crosshair'\n   */\n  cursorStyle = 'crosshair';\n\n  /**\n   * If controls has an offsetY or offsetX, draw a line that connects\n   * the control to the bounding box\n   * @type {Boolean}\n   * @default false\n   */\n  withConnection = false;\n\n  constructor(options?: Partial<Control>) {\n    Object.assign(this, options);\n  }\n\n  /**\n   * The control actionHandler, provide one to handle action ( control being moved )\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare actionHandler: TransformActionHandler;\n\n  /**\n   * The control handler for mouse down, provide one to handle mouse down on control\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseDownHandler?: ControlActionHandler;\n\n  /**\n   * The control mouseUpHandler, provide one to handle an effect on mouse up.\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseUpHandler?: ControlActionHandler;\n\n  shouldActivate(\n    controlKey: string,\n    fabricObject: InteractiveFabricObject,\n    pointer: Point,\n    { tl, tr, br, bl }: TCornerPoint,\n  ) {\n    // TODO: locking logic can be handled here instead of in the control handler logic\n    return (\n      fabricObject.canvas?.getActiveObject() === fabricObject &&\n      fabricObject.isControlVisible(controlKey) &&\n      Intersection.isPointInPolygon(pointer, [tl, tr, br, bl])\n    );\n  }\n\n  /**\n   * Returns control actionHandler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getActionHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): TransformActionHandler | undefined {\n    return this.actionHandler;\n  }\n\n  /**\n   * Returns control mouseDown handler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseDownHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseDownHandler;\n  }\n\n  /**\n   * Returns control mouseUp handler.\n   * During actions the fabricObject or the control can be of different obj\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseUpHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseUpHandler;\n  }\n\n  /**\n   * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n   * function you can pass one in the constructor\n   * the cursorStyle property\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  cursorStyleHandler(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n    coord: TOCoord,\n  ) {\n    return control.cursorStyle;\n  }\n\n  /**\n   * Returns the action name. The basic implementation just return the actionName property.\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  getActionName(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    return control.actionName;\n  }\n\n  /**\n   * Returns controls visibility\n   * @param {FabricObject} object on which the control is displayed\n   * @param {String} controlKey key where the control is memorized on the\n   * @return {Boolean}\n   */\n  getVisibility(fabricObject: InteractiveFabricObject, controlKey: string) {\n    return fabricObject._controlsVisibility?.[controlKey] ?? this.visible;\n  }\n\n  /**\n   * Sets controls visibility\n   * @param {Boolean} visibility for the object\n   * @return {Void}\n   */\n  setVisibility(\n    visibility: boolean,\n    name?: string,\n    fabricObject?: InteractiveFabricObject,\n  ) {\n    this.visible = visibility;\n  }\n\n  positionHandler(\n    dim: Point,\n    finalMatrix: TMat2D,\n    fabricObject: InteractiveFabricObject,\n    currentControl: Control,\n  ) {\n    return new Point(\n      this.x * dim.x + this.offsetX,\n      this.y * dim.y + this.offsetY,\n    ).transform(finalMatrix);\n  }\n\n  /**\n   * Returns the coords for this control based on object values.\n   * @param {Number} objectAngle angle from the fabric object holding the control\n   * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n   *   isTouch is true)\n   * @param {Number} centerX x coordinate where the control center should be\n   * @param {Number} centerY y coordinate where the control center should be\n   * @param {boolean} isTouch true if touch corner, false if normal corner\n   */\n  calcCornerCoords(\n    angle: TDegree,\n    objectCornerSize: number,\n    centerX: number,\n    centerY: number,\n    isTouch: boolean,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    const t = multiplyTransformMatrixArray([\n      createTranslateMatrix(centerX, centerY),\n      createRotateMatrix({ angle }),\n      createScaleMatrix(\n        (isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize,\n        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize,\n      ),\n    ]);\n    return {\n      tl: new Point(-0.5, -0.5).transform(t),\n      tr: new Point(0.5, -0.5).transform(t),\n      br: new Point(0.5, 0.5).transform(t),\n      bl: new Point(-0.5, 0.5).transform(t),\n    };\n  }\n\n  /**\n   * Render function for the control.\n   * When this function runs the context is unscaled. unrotate. Just retina scaled.\n   * all the functions will have to translate to the point left,top before starting Drawing\n   * if they want to draw a control where the position is detected.\n   * left and top are the result of the positionHandler function\n   * @param {RenderingContext2D} ctx the context where the control will be drawn\n   * @param {Number} left position of the canvas where we are about to render the control.\n   * @param {Number} top position of the canvas where we are about to render the control.\n   * @param {Object} styleOverride\n   * @param {FabricObject} fabricObject the object where the control is about to be rendered\n   */\n  render(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    styleOverride: ControlRenderingStyleOverride | undefined,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    styleOverride = styleOverride || {};\n    switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n      case 'circle':\n        renderCircleControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n        break;\n      default:\n        renderSquareControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n    }\n  }\n}\n"],"names":["Control","constructor","options","_defineProperty","SCALE","Object","assign","this","shouldActivate","controlKey","fabricObject","pointer","_ref","_fabricObject$canvas","tl","tr","br","bl","canvas","getActiveObject","isControlVisible","Intersection","isPointInPolygon","getActionHandler","eventData","control","actionHandler","getMouseDownHandler","mouseDownHandler","getMouseUpHandler","mouseUpHandler","cursorStyleHandler","coord","cursorStyle","getActionName","actionName","getVisibility","_fabricObject$_contro","_fabricObject$_contro2","_controlsVisibility","visible","setVisibility","visibility","name","positionHandler","dim","finalMatrix","currentControl","Point","x","offsetX","y","offsetY","transform","calcCornerCoords","angle","objectCornerSize","centerX","centerY","isTouch","t","multiplyTransformMatrixArray","createTranslateMatrix","createRotateMatrix","createScaleMatrix","touchSizeX","sizeX","touchSizeY","sizeY","render","ctx","left","top","styleOverride","cornerStyle","renderCircleControl","call","renderSquareControl"],"mappings":"8cAuBO,MAAMA,EAyHXC,WAAAA,CAAYC,GAxHZC,kBAQU,GAEVA,oBAWaC,GAEbD,eAOQ,GAERA,WAOI,GAEJA,WAOI,GAEJA,iBAYU,GAEVA,iBAMU,GAEVA,eAMQ,GAERA,eAMQ,GAERA,oBAMa,GAEbA,oBAMa,GAEbA,qBAMc,aAEdA,yBAMiB,GAGfE,OAAOC,OAAOC,KAAML,EACtB,CAgCAM,cAAAA,CACEC,EACAC,EACAC,EAAcC,GAEd,IAAAC,EAAA,IADAC,GAAEA,EAAEC,GAAEA,EAAEC,GAAEA,EAAEC,GAAEA,GAAkBL,EAGhC,OACqB,QAAnBC,EAAAH,EAAaQ,cAAM,IAAAL,OAAA,EAAnBA,EAAqBM,qBAAsBT,GAC3CA,EAAaU,iBAAiBX,IAC9BY,EAAaC,iBAAiBX,EAAS,CAACG,EAAIC,EAAIC,EAAIC,GAExD,CASAM,gBAAAA,CACEC,EACAd,EACAe,GAEA,OAAOlB,KAAKmB,aACd,CASAC,mBAAAA,CACEH,EACAd,EACAe,GAEA,OAAOlB,KAAKqB,gBACd,CAUAC,iBAAAA,CACEL,EACAd,EACAe,GAEA,OAAOlB,KAAKuB,cACd,CAWAC,kBAAAA,CACEP,EACAC,EACAf,EACAsB,GAEA,OAAOP,EAAQQ,WACjB,CASAC,aAAAA,CACEV,EACAC,EACAf,GAEA,OAAOe,EAAQU,UACjB,CAQAC,aAAAA,CAAc1B,EAAuCD,GAAoB,IAAA4B,EAAAC,EACvE,OAAqD,QAArDD,UAAAC,EAAO5B,EAAa6B,2BAAmB,IAAAD,OAAA,EAAhCA,EAAmC7B,cAAW4B,EAAAA,EAAI9B,KAAKiC,OAChE,CAOAC,aAAAA,CACEC,EACAC,EACAjC,GAEAH,KAAKiC,QAAUE,CACjB,CAEAE,eAAAA,CACEC,EACAC,EACApC,EACAqC,GAEA,OAAO,IAAIC,EACTzC,KAAK0C,EAAIJ,EAAII,EAAI1C,KAAK2C,QACtB3C,KAAK4C,EAAIN,EAAIM,EAAI5C,KAAK6C,SACtBC,UAAUP,EACd,CAWAQ,gBAAAA,CACEC,EACAC,EACAC,EACAC,EACAC,EACAjD,GAEA,MAAMkD,EAAIC,EAA6B,CACrCC,EAAsBL,EAASC,GAC/BK,EAAmB,CAAER,UACrBS,GACGL,EAAUpD,KAAK0D,WAAa1D,KAAK2D,QAAUV,GAC3CG,EAAUpD,KAAK4D,WAAa5D,KAAK6D,QAAUZ,KAGhD,MAAO,CACL1C,GAAI,IAAIkC,GAAM,IAAM,IAAMK,UAAUO,GACpC7C,GAAI,IAAIiC,EAAM,IAAK,IAAMK,UAAUO,GACnC5C,GAAI,IAAIgC,EAAM,GAAK,IAAKK,UAAUO,GAClC3C,GAAI,IAAI+B,GAAM,GAAM,IAAKK,UAAUO,GAEvC,CAcAS,MAAAA,CACEC,EACAC,EACAC,EACAC,EACA/D,GAGA,GACO,aAFP+D,EAAgBA,GAAiB,CAAA,GACXC,aAAehE,EAAagE,aAE9CC,EAAoBC,KAClBrE,KACA+D,EACAC,EACAC,EACAC,EACA/D,QAIFmE,EAAoBD,KAClBrE,KACA+D,EACAC,EACAC,EACAC,EACA/D,EAGR"}
+{"version":3,"file":"Control.min.mjs","sources":["../../../src/controls/Control.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type {\n  ControlActionHandler,\n  TPointerEvent,\n  TransformActionHandler,\n} from '../EventTypeDefs';\nimport { Intersection } from '../Intersection';\nimport { Point } from '../Point';\nimport { FILL, SCALE, STROKE } from '../constants';\nimport type {\n  InteractiveFabricObject,\n  TOCoord,\n} from '../shapes/Object/InteractiveObject';\nimport type {\n  TCornerPoint,\n  TDegree,\n  TMat2D,\n  TOriginX,\n  TOriginY,\n} from '../typedefs';\nimport {\n  createRotateMatrix,\n  createScaleMatrix,\n  createTranslateMatrix,\n  multiplyTransformMatrixArray,\n} from '../util/misc/matrix';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport type { ControlRenderingStyleOverride } from './controlRendering';\nimport { renderCircleControl, renderSquareControl } from './controlRendering';\n\nexport class Control {\n  /**\n   * keep track of control visibility.\n   * mainly for backward compatibility.\n   * if you do not want to see a control, you can remove it\n   * from the control set.\n   * @type {Boolean}\n   * @default true\n   */\n  visible = true;\n\n  /**\n   * Name of the action that the control will likely execute.\n   * This is optional. FabricJS uses to identify what the user is doing for some\n   * extra optimizations. If you are writing a custom control and you want to know\n   * somewhere else in the code what is going on, you can use this string here.\n   * you can also provide a custom getActionName if your control run multiple actions\n   * depending on some external state.\n   * default to scale since is the most common, used on 4 corners by default\n   * @type {String}\n   * @default 'scale'\n   */\n  actionName = SCALE;\n\n  /**\n   * Drawing angle of the control.\n   * NOT used for now, but name marked as needed for internal logic\n   * example: to reuse the same drawing function for different rotated controls\n   * @type {Number}\n   * @default 0\n   */\n  angle = 0;\n\n  /**\n   * Relative position of the control. X\n   * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  x = 0;\n\n  /**\n   * Relative position of the control. Y\n   * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  y = 0;\n\n  /**\n   * Horizontal offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the right, negative to the left.\n   * It used when you want to have position of control that does not scale with\n   * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n   * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will\n   * stay 30 pixels no matter how the object is big. Another example is having 2\n   * controls in the corner, that stay in the same position when the object scale.\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  offsetX = 0;\n\n  /**\n   * Vertical offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the bottom, negative to the top.\n   * @type {Number}\n   * @default 0\n   */\n  offsetY = 0;\n\n  /**\n   * Sets the length of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeX = 0;\n\n  /**\n   * Sets the height of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeY = 0;\n\n  /**\n   * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeX = 0;\n\n  /**\n   * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeY = 0;\n\n  /**\n   * Css cursor style to display when the control is hovered.\n   * if the method `cursorStyleHandler` is provided, this property is ignored.\n   * @type {String}\n   * @default 'crosshair'\n   */\n  cursorStyle = 'crosshair';\n\n  /**\n   * If controls has an offsetY or offsetX, draw a line that connects\n   * the control to the bounding box\n   * @type {Boolean}\n   * @default false\n   */\n  withConnection = false;\n\n  declare transformAnchorPoint?: {\n    x: TOriginX;\n    y: TOriginY;\n  };\n\n  constructor(options?: Partial<Control>) {\n    Object.assign(this, options);\n  }\n\n  getTransformAnchorPoint(): {\n    x: TOriginX;\n    y: TOriginY;\n  } {\n    return (\n      // return the control transformAnchorPoint\n      this.transformAnchorPoint ??\n      // otherwise will return the opposite origin of where the control is located.\n      new Point(-this.x + 0.5, -this.y + 0.5)\n    );\n  }\n\n  /**\n   * The control actionHandler, provide one to handle action ( control being moved )\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare actionHandler: TransformActionHandler;\n\n  /**\n   * The control handler for mouse down, provide one to handle mouse down on control\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseDownHandler?: ControlActionHandler;\n\n  /**\n   * The control mouseUpHandler, provide one to handle an effect on mouse up.\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseUpHandler?: ControlActionHandler;\n\n  shouldActivate(\n    controlKey: string,\n    fabricObject: InteractiveFabricObject,\n    pointer: Point,\n    { tl, tr, br, bl }: TCornerPoint,\n  ) {\n    // TODO: locking logic can be handled here instead of in the control handler logic\n    return (\n      fabricObject.canvas?.getActiveObject() === fabricObject &&\n      fabricObject.isControlVisible(controlKey) &&\n      Intersection.isPointInPolygon(pointer, [tl, tr, br, bl])\n    );\n  }\n\n  /**\n   * Returns control actionHandler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getActionHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): TransformActionHandler | undefined {\n    return this.actionHandler;\n  }\n\n  /**\n   * Returns control mouseDown handler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseDownHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseDownHandler;\n  }\n\n  /**\n   * Returns control mouseUp handler.\n   * During actions the fabricObject or the control can be of different obj\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseUpHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseUpHandler;\n  }\n\n  /**\n   * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n   * function you can pass one in the constructor\n   * the cursorStyle property\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  cursorStyleHandler(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n    coord: TOCoord,\n  ) {\n    return control.cursorStyle;\n  }\n\n  /**\n   * Returns the action name. The basic implementation just return the actionName property.\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  getActionName(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    return control.actionName;\n  }\n\n  /**\n   * Returns controls visibility\n   * @param {FabricObject} object on which the control is displayed\n   * @param {String} controlKey key where the control is memorized on the\n   * @return {Boolean}\n   */\n  getVisibility(fabricObject: InteractiveFabricObject, controlKey: string) {\n    return fabricObject._controlsVisibility?.[controlKey] ?? this.visible;\n  }\n\n  /**\n   * Sets controls visibility\n   * @param {Boolean} visibility for the object\n   * @return {Void}\n   */\n  setVisibility(\n    visibility: boolean,\n    name?: string,\n    fabricObject?: InteractiveFabricObject,\n  ) {\n    this.visible = visibility;\n  }\n\n  positionHandler(\n    dim: Point,\n    finalMatrix: TMat2D,\n    fabricObject: InteractiveFabricObject,\n    currentControl: Control,\n  ) {\n    return new Point(\n      this.x * dim.x + this.offsetX,\n      this.y * dim.y + this.offsetY,\n    ).transform(finalMatrix);\n  }\n\n  /**\n   * Returns the coords for this control based on object values.\n   * @param {Number} objectAngle angle from the fabric object holding the control\n   * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n   *   isTouch is true)\n   * @param {Number} centerX x coordinate where the control center should be\n   * @param {Number} centerY y coordinate where the control center should be\n   * @param {boolean} isTouch true if touch corner, false if normal corner\n   */\n  calcCornerCoords(\n    angle: TDegree,\n    objectCornerSize: number,\n    centerX: number,\n    centerY: number,\n    isTouch: boolean,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    const t = multiplyTransformMatrixArray([\n      createTranslateMatrix(centerX, centerY),\n      createRotateMatrix({ angle }),\n      createScaleMatrix(\n        (isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize,\n        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize,\n      ),\n    ]);\n    return {\n      tl: new Point(-0.5, -0.5).transform(t),\n      tr: new Point(0.5, -0.5).transform(t),\n      br: new Point(0.5, 0.5).transform(t),\n      bl: new Point(-0.5, 0.5).transform(t),\n    };\n  }\n\n  /**\n   * This is an helper method to prepare the canvas to render a control\n   * It detectes common control properties and sets the correct fill and\n   * stroke styles on the context. It does not execute translations or\n   * rotations since different controls need differnt combination of these.\n   */\n  commonRenderProps(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    fabricObject: InteractiveFabricObject,\n    styleOverride: ControlRenderingStyleOverride = {},\n  ): {\n    stroke: boolean;\n    xSize: number;\n    ySize: number;\n    transparentCorners: boolean;\n    opName: 'stroke' | 'fill';\n  } {\n    const { cornerSize, cornerColor, transparentCorners, cornerStrokeColor } =\n        styleOverride,\n      sizeFromProps = cornerSize || fabricObject.cornerSize,\n      xSize = this.sizeX || sizeFromProps,\n      ySize = this.sizeY || sizeFromProps,\n      transparent =\n        typeof transparentCorners !== 'undefined'\n          ? transparentCorners\n          : fabricObject.transparentCorners,\n      opName = transparent ? STROKE : FILL,\n      strokeColor = cornerStrokeColor || fabricObject.cornerStrokeColor,\n      stroke = !transparent && !!strokeColor;\n    ctx.fillStyle = cornerColor || fabricObject.cornerColor || '';\n    ctx.strokeStyle = strokeColor || '';\n    ctx.translate(left, top);\n    //  angle is relative to canvas plane\n    ctx.rotate(degreesToRadians(fabricObject.getTotalAngle()));\n    return {\n      stroke,\n      xSize,\n      ySize,\n      transparentCorners: transparent,\n      opName,\n    };\n  }\n\n  /**\n   * Render function for the control.\n   * When this function runs the context is unscaled. unrotate. Just retina scaled.\n   * all the functions will have to translate to the point left,top before starting Drawing\n   * if they want to draw a control where the position is detected.\n   * left and top are the result of the positionHandler function\n   * @param {RenderingContext2D} ctx the context where the control will be drawn\n   * @param {Number} left position of the canvas where we are about to render the control.\n   * @param {Number} top position of the canvas where we are about to render the control.\n   * @param {Object} styleOverride\n   * @param {FabricObject} fabricObject the object where the control is about to be rendered\n   */\n  render(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    styleOverride: ControlRenderingStyleOverride | undefined,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    styleOverride = styleOverride || {};\n    switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n      case 'circle':\n        renderCircleControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n        break;\n      default:\n        renderSquareControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n    }\n  }\n}\n"],"names":["Control","constructor","options","_defineProperty","SCALE","Object","assign","this","getTransformAnchorPoint","_this$transformAnchor","transformAnchorPoint","Point","x","y","shouldActivate","controlKey","fabricObject","pointer","_ref","_fabricObject$canvas","tl","tr","br","bl","canvas","getActiveObject","isControlVisible","Intersection","isPointInPolygon","getActionHandler","eventData","control","actionHandler","getMouseDownHandler","mouseDownHandler","getMouseUpHandler","mouseUpHandler","cursorStyleHandler","coord","cursorStyle","getActionName","actionName","getVisibility","_fabricObject$_contro","_fabricObject$_contro2","_controlsVisibility","visible","setVisibility","visibility","name","positionHandler","dim","finalMatrix","currentControl","offsetX","offsetY","transform","calcCornerCoords","angle","objectCornerSize","centerX","centerY","isTouch","t","multiplyTransformMatrixArray","createTranslateMatrix","createRotateMatrix","createScaleMatrix","touchSizeX","sizeX","touchSizeY","sizeY","commonRenderProps","ctx","left","top","styleOverride","arguments","length","undefined","cornerSize","cornerColor","transparentCorners","cornerStrokeColor","sizeFromProps","xSize","ySize","transparent","opName","STROKE","FILL","strokeColor","stroke","fillStyle","strokeStyle","translate","rotate","degreesToRadians","getTotalAngle","render","cornerStyle","renderCircleControl","call","renderSquareControl"],"mappings":"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"}

package/dist/src/controls/Control.mjs

@@ -1,8 +1,9 @@
 import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
 import { Intersection } from '../Intersection.mjs';
 import { Point } from '../Point.mjs';
-import { SCALE } from '../constants.mjs';
+import { SCALE, STROKE, FILL } from '../constants.mjs';
 import { multiplyTransformMatrixArray, createTranslateMatrix, createRotateMatrix, createScaleMatrix } from '../util/misc/matrix.mjs';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion.mjs';
 import { renderSquareControl, renderCircleControl } from './controlRendering.mjs';
 
 class Control {
@@ -116,6 +117,14 @@ class Control {
     _defineProperty(this, "withConnection", false);
     Object.assign(this, options);
   }
+  getTransformAnchorPoint() {
+    var _this$transformAnchor;
+    return (// return the control transformAnchorPoint
+      (_this$transformAnchor = this.transformAnchorPoint) !== null && _this$transformAnchor !== void 0 ? _this$transformAnchor :
+      // otherwise will return the opposite origin of where the control is located.
+      new Point(-this.x + 0.5, -this.y + 0.5)
+    );
+  }
 
   /**
    * The control actionHandler, provide one to handle action ( control being moved )
@@ -258,6 +267,41 @@ class Control {
     };
   }
 
+  /**
+   * This is an helper method to prepare the canvas to render a control
+   * It detectes common control properties and sets the correct fill and
+   * stroke styles on the context. It does not execute translations or
+   * rotations since different controls need differnt combination of these.
+   */
+  commonRenderProps(ctx, left, top, fabricObject) {
+    let styleOverride = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    const {
+        cornerSize,
+        cornerColor,
+        transparentCorners,
+        cornerStrokeColor
+      } = styleOverride,
+      sizeFromProps = cornerSize || fabricObject.cornerSize,
+      xSize = this.sizeX || sizeFromProps,
+      ySize = this.sizeY || sizeFromProps,
+      transparent = typeof transparentCorners !== 'undefined' ? transparentCorners : fabricObject.transparentCorners,
+      opName = transparent ? STROKE : FILL,
+      strokeColor = cornerStrokeColor || fabricObject.cornerStrokeColor,
+      stroke = !transparent && !!strokeColor;
+    ctx.fillStyle = cornerColor || fabricObject.cornerColor || '';
+    ctx.strokeStyle = strokeColor || '';
+    ctx.translate(left, top);
+    //  angle is relative to canvas plane
+    ctx.rotate(degreesToRadians(fabricObject.getTotalAngle()));
+    return {
+      stroke,
+      xSize,
+      ySize,
+      transparentCorners: transparent,
+      opName
+    };
+  }
+
   /**
    * Render function for the control.
    * When this function runs the context is unscaled. unrotate. Just retina scaled.

package/dist/src/controls/Control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Control.mjs","sources":["../../../src/controls/Control.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type {\n  ControlActionHandler,\n  TPointerEvent,\n  TransformActionHandler,\n} from '../EventTypeDefs';\nimport { Intersection } from '../Intersection';\nimport { Point } from '../Point';\nimport { SCALE } from '../constants';\nimport type {\n  InteractiveFabricObject,\n  TOCoord,\n} from '../shapes/Object/InteractiveObject';\nimport type { TCornerPoint, TDegree, TMat2D } from '../typedefs';\nimport {\n  createRotateMatrix,\n  createScaleMatrix,\n  createTranslateMatrix,\n  multiplyTransformMatrixArray,\n} from '../util/misc/matrix';\nimport type { ControlRenderingStyleOverride } from './controlRendering';\nimport { renderCircleControl, renderSquareControl } from './controlRendering';\n\nexport class Control {\n  /**\n   * keep track of control visibility.\n   * mainly for backward compatibility.\n   * if you do not want to see a control, you can remove it\n   * from the control set.\n   * @type {Boolean}\n   * @default true\n   */\n  visible = true;\n\n  /**\n   * Name of the action that the control will likely execute.\n   * This is optional. FabricJS uses to identify what the user is doing for some\n   * extra optimizations. If you are writing a custom control and you want to know\n   * somewhere else in the code what is going on, you can use this string here.\n   * you can also provide a custom getActionName if your control run multiple actions\n   * depending on some external state.\n   * default to scale since is the most common, used on 4 corners by default\n   * @type {String}\n   * @default 'scale'\n   */\n  actionName = SCALE;\n\n  /**\n   * Drawing angle of the control.\n   * NOT used for now, but name marked as needed for internal logic\n   * example: to reuse the same drawing function for different rotated controls\n   * @type {Number}\n   * @default 0\n   */\n  angle = 0;\n\n  /**\n   * Relative position of the control. X\n   * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  x = 0;\n\n  /**\n   * Relative position of the control. Y\n   * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  y = 0;\n\n  /**\n   * Horizontal offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the right, negative to the left.\n   * It used when you want to have position of control that does not scale with\n   * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n   * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will\n   * stay 30 pixels no matter how the object is big. Another example is having 2\n   * controls in the corner, that stay in the same position when the object scale.\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  offsetX = 0;\n\n  /**\n   * Vertical offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the bottom, negative to the top.\n   * @type {Number}\n   * @default 0\n   */\n  offsetY = 0;\n\n  /**\n   * Sets the length of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeX = 0;\n\n  /**\n   * Sets the height of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeY = 0;\n\n  /**\n   * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeX = 0;\n\n  /**\n   * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeY = 0;\n\n  /**\n   * Css cursor style to display when the control is hovered.\n   * if the method `cursorStyleHandler` is provided, this property is ignored.\n   * @type {String}\n   * @default 'crosshair'\n   */\n  cursorStyle = 'crosshair';\n\n  /**\n   * If controls has an offsetY or offsetX, draw a line that connects\n   * the control to the bounding box\n   * @type {Boolean}\n   * @default false\n   */\n  withConnection = false;\n\n  constructor(options?: Partial<Control>) {\n    Object.assign(this, options);\n  }\n\n  /**\n   * The control actionHandler, provide one to handle action ( control being moved )\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare actionHandler: TransformActionHandler;\n\n  /**\n   * The control handler for mouse down, provide one to handle mouse down on control\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseDownHandler?: ControlActionHandler;\n\n  /**\n   * The control mouseUpHandler, provide one to handle an effect on mouse up.\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseUpHandler?: ControlActionHandler;\n\n  shouldActivate(\n    controlKey: string,\n    fabricObject: InteractiveFabricObject,\n    pointer: Point,\n    { tl, tr, br, bl }: TCornerPoint,\n  ) {\n    // TODO: locking logic can be handled here instead of in the control handler logic\n    return (\n      fabricObject.canvas?.getActiveObject() === fabricObject &&\n      fabricObject.isControlVisible(controlKey) &&\n      Intersection.isPointInPolygon(pointer, [tl, tr, br, bl])\n    );\n  }\n\n  /**\n   * Returns control actionHandler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getActionHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): TransformActionHandler | undefined {\n    return this.actionHandler;\n  }\n\n  /**\n   * Returns control mouseDown handler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseDownHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseDownHandler;\n  }\n\n  /**\n   * Returns control mouseUp handler.\n   * During actions the fabricObject or the control can be of different obj\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseUpHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseUpHandler;\n  }\n\n  /**\n   * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n   * function you can pass one in the constructor\n   * the cursorStyle property\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  cursorStyleHandler(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n    coord: TOCoord,\n  ) {\n    return control.cursorStyle;\n  }\n\n  /**\n   * Returns the action name. The basic implementation just return the actionName property.\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  getActionName(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    return control.actionName;\n  }\n\n  /**\n   * Returns controls visibility\n   * @param {FabricObject} object on which the control is displayed\n   * @param {String} controlKey key where the control is memorized on the\n   * @return {Boolean}\n   */\n  getVisibility(fabricObject: InteractiveFabricObject, controlKey: string) {\n    return fabricObject._controlsVisibility?.[controlKey] ?? this.visible;\n  }\n\n  /**\n   * Sets controls visibility\n   * @param {Boolean} visibility for the object\n   * @return {Void}\n   */\n  setVisibility(\n    visibility: boolean,\n    name?: string,\n    fabricObject?: InteractiveFabricObject,\n  ) {\n    this.visible = visibility;\n  }\n\n  positionHandler(\n    dim: Point,\n    finalMatrix: TMat2D,\n    fabricObject: InteractiveFabricObject,\n    currentControl: Control,\n  ) {\n    return new Point(\n      this.x * dim.x + this.offsetX,\n      this.y * dim.y + this.offsetY,\n    ).transform(finalMatrix);\n  }\n\n  /**\n   * Returns the coords for this control based on object values.\n   * @param {Number} objectAngle angle from the fabric object holding the control\n   * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n   *   isTouch is true)\n   * @param {Number} centerX x coordinate where the control center should be\n   * @param {Number} centerY y coordinate where the control center should be\n   * @param {boolean} isTouch true if touch corner, false if normal corner\n   */\n  calcCornerCoords(\n    angle: TDegree,\n    objectCornerSize: number,\n    centerX: number,\n    centerY: number,\n    isTouch: boolean,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    const t = multiplyTransformMatrixArray([\n      createTranslateMatrix(centerX, centerY),\n      createRotateMatrix({ angle }),\n      createScaleMatrix(\n        (isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize,\n        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize,\n      ),\n    ]);\n    return {\n      tl: new Point(-0.5, -0.5).transform(t),\n      tr: new Point(0.5, -0.5).transform(t),\n      br: new Point(0.5, 0.5).transform(t),\n      bl: new Point(-0.5, 0.5).transform(t),\n    };\n  }\n\n  /**\n   * Render function for the control.\n   * When this function runs the context is unscaled. unrotate. Just retina scaled.\n   * all the functions will have to translate to the point left,top before starting Drawing\n   * if they want to draw a control where the position is detected.\n   * left and top are the result of the positionHandler function\n   * @param {RenderingContext2D} ctx the context where the control will be drawn\n   * @param {Number} left position of the canvas where we are about to render the control.\n   * @param {Number} top position of the canvas where we are about to render the control.\n   * @param {Object} styleOverride\n   * @param {FabricObject} fabricObject the object where the control is about to be rendered\n   */\n  render(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    styleOverride: ControlRenderingStyleOverride | undefined,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    styleOverride = styleOverride || {};\n    switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n      case 'circle':\n        renderCircleControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n        break;\n      default:\n        renderSquareControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n    }\n  }\n}\n"],"names":["Control","constructor","options","_defineProperty","SCALE","Object","assign","shouldActivate","controlKey","fabricObject","pointer","_ref","_fabricObject$canvas","tl","tr","br","bl","canvas","getActiveObject","isControlVisible","Intersection","isPointInPolygon","getActionHandler","eventData","control","actionHandler","getMouseDownHandler","mouseDownHandler","getMouseUpHandler","mouseUpHandler","cursorStyleHandler","coord","cursorStyle","getActionName","actionName","getVisibility","_fabricObject$_contro","_fabricObject$_contro2","_controlsVisibility","visible","setVisibility","visibility","name","positionHandler","dim","finalMatrix","currentControl","Point","x","offsetX","y","offsetY","transform","calcCornerCoords","angle","objectCornerSize","centerX","centerY","isTouch","t","multiplyTransformMatrixArray","createTranslateMatrix","createRotateMatrix","createScaleMatrix","touchSizeX","sizeX","touchSizeY","sizeY","render","ctx","left","top","styleOverride","cornerStyle","renderCircleControl","call","renderSquareControl"],"mappings":";;;;;;;AAuBO,MAAMA,OAAO,CAAC;EAyHnBC,WAAWA,CAACC,OAA0B,EAAE;AAxHxC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AAPEC,IAAAA,eAAA,kBAQU,IAAI,CAAA;AAEd;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVEA,IAAAA,eAAA,qBAWaC,KAAK,CAAA;AAElB;AACF;AACA;AACA;AACA;AACA;AACA;AANED,IAAAA,eAAA,gBAOQ,CAAC,CAAA;AAET;AACF;AACA;AACA;AACA;AACA;AACA;AANEA,IAAAA,eAAA,YAOI,CAAC,CAAA;AAEL;AACF;AACA;AACA;AACA;AACA;AACA;AANEA,IAAAA,eAAA,YAOI,CAAC,CAAA;AAEL;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAXEA,IAAAA,eAAA,kBAYU,CAAC,CAAA;AAEX;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,kBAMU,CAAC,CAAA;AAEX;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,gBAMQ,CAAC,CAAA;AAET;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,gBAMQ,CAAC,CAAA;AAET;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,qBAMa,CAAC,CAAA;AAEd;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,qBAMa,CAAC,CAAA;AAEd;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,sBAMc,WAAW,CAAA;AAEzB;AACF;AACA;AACA;AACA;AACA;AALEA,IAAAA,eAAA,yBAMiB,KAAK,CAAA;AAGpBE,IAAAA,MAAM,CAACC,MAAM,CAAC,IAAI,EAAEJ,OAAO,CAAC;AAC9B,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;;AAGE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;;AAGE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;;EAGEK,cAAcA,CACZC,UAAkB,EAClBC,YAAqC,EACrCC,OAA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"}
+{"version":3,"file":"Control.mjs","sources":["../../../src/controls/Control.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type {\n  ControlActionHandler,\n  TPointerEvent,\n  TransformActionHandler,\n} from '../EventTypeDefs';\nimport { Intersection } from '../Intersection';\nimport { Point } from '../Point';\nimport { FILL, SCALE, STROKE } from '../constants';\nimport type {\n  InteractiveFabricObject,\n  TOCoord,\n} from '../shapes/Object/InteractiveObject';\nimport type {\n  TCornerPoint,\n  TDegree,\n  TMat2D,\n  TOriginX,\n  TOriginY,\n} from '../typedefs';\nimport {\n  createRotateMatrix,\n  createScaleMatrix,\n  createTranslateMatrix,\n  multiplyTransformMatrixArray,\n} from '../util/misc/matrix';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport type { ControlRenderingStyleOverride } from './controlRendering';\nimport { renderCircleControl, renderSquareControl } from './controlRendering';\n\nexport class Control {\n  /**\n   * keep track of control visibility.\n   * mainly for backward compatibility.\n   * if you do not want to see a control, you can remove it\n   * from the control set.\n   * @type {Boolean}\n   * @default true\n   */\n  visible = true;\n\n  /**\n   * Name of the action that the control will likely execute.\n   * This is optional. FabricJS uses to identify what the user is doing for some\n   * extra optimizations. If you are writing a custom control and you want to know\n   * somewhere else in the code what is going on, you can use this string here.\n   * you can also provide a custom getActionName if your control run multiple actions\n   * depending on some external state.\n   * default to scale since is the most common, used on 4 corners by default\n   * @type {String}\n   * @default 'scale'\n   */\n  actionName = SCALE;\n\n  /**\n   * Drawing angle of the control.\n   * NOT used for now, but name marked as needed for internal logic\n   * example: to reuse the same drawing function for different rotated controls\n   * @type {Number}\n   * @default 0\n   */\n  angle = 0;\n\n  /**\n   * Relative position of the control. X\n   * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  x = 0;\n\n  /**\n   * Relative position of the control. Y\n   * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  y = 0;\n\n  /**\n   * Horizontal offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the right, negative to the left.\n   * It used when you want to have position of control that does not scale with\n   * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n   * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will\n   * stay 30 pixels no matter how the object is big. Another example is having 2\n   * controls in the corner, that stay in the same position when the object scale.\n   * of the bounding box.\n   * @type {Number}\n   * @default 0\n   */\n  offsetX = 0;\n\n  /**\n   * Vertical offset of the control from the defined position. In pixels\n   * Positive offset moves the control to the bottom, negative to the top.\n   * @type {Number}\n   * @default 0\n   */\n  offsetY = 0;\n\n  /**\n   * Sets the length of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeX = 0;\n\n  /**\n   * Sets the height of the control. If null, defaults to object's cornerSize.\n   * Expects both sizeX and sizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  sizeY = 0;\n\n  /**\n   * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeX = 0;\n\n  /**\n   * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n   * Expects both touchSizeX and touchSizeY to be set when set.\n   * @type {?Number}\n   * @default null\n   */\n  touchSizeY = 0;\n\n  /**\n   * Css cursor style to display when the control is hovered.\n   * if the method `cursorStyleHandler` is provided, this property is ignored.\n   * @type {String}\n   * @default 'crosshair'\n   */\n  cursorStyle = 'crosshair';\n\n  /**\n   * If controls has an offsetY or offsetX, draw a line that connects\n   * the control to the bounding box\n   * @type {Boolean}\n   * @default false\n   */\n  withConnection = false;\n\n  declare transformAnchorPoint?: {\n    x: TOriginX;\n    y: TOriginY;\n  };\n\n  constructor(options?: Partial<Control>) {\n    Object.assign(this, options);\n  }\n\n  getTransformAnchorPoint(): {\n    x: TOriginX;\n    y: TOriginY;\n  } {\n    return (\n      // return the control transformAnchorPoint\n      this.transformAnchorPoint ??\n      // otherwise will return the opposite origin of where the control is located.\n      new Point(-this.x + 0.5, -this.y + 0.5)\n    );\n  }\n\n  /**\n   * The control actionHandler, provide one to handle action ( control being moved )\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare actionHandler: TransformActionHandler;\n\n  /**\n   * The control handler for mouse down, provide one to handle mouse down on control\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseDownHandler?: ControlActionHandler;\n\n  /**\n   * The control mouseUpHandler, provide one to handle an effect on mouse up.\n   * @param {Event} eventData the native mouse event\n   * @param {Transform} transformData properties of the current transform\n   * @param {Number} x x position of the cursor\n   * @param {Number} y y position of the cursor\n   * @return {Boolean} true if the action/event modified the object\n   */\n  declare mouseUpHandler?: ControlActionHandler;\n\n  shouldActivate(\n    controlKey: string,\n    fabricObject: InteractiveFabricObject,\n    pointer: Point,\n    { tl, tr, br, bl }: TCornerPoint,\n  ) {\n    // TODO: locking logic can be handled here instead of in the control handler logic\n    return (\n      fabricObject.canvas?.getActiveObject() === fabricObject &&\n      fabricObject.isControlVisible(controlKey) &&\n      Intersection.isPointInPolygon(pointer, [tl, tr, br, bl])\n    );\n  }\n\n  /**\n   * Returns control actionHandler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getActionHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): TransformActionHandler | undefined {\n    return this.actionHandler;\n  }\n\n  /**\n   * Returns control mouseDown handler\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseDownHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseDownHandler;\n  }\n\n  /**\n   * Returns control mouseUp handler.\n   * During actions the fabricObject or the control can be of different obj\n   * @param {Event} eventData the native mouse event\n   * @param {FabricObject} fabricObject on which the control is displayed\n   * @param {Control} control control for which the action handler is being asked\n   * @return {Function} the action handler\n   */\n  getMouseUpHandler(\n    eventData: TPointerEvent,\n    fabricObject: InteractiveFabricObject,\n    control: Control,\n  ): ControlActionHandler | undefined {\n    return this.mouseUpHandler;\n  }\n\n  /**\n   * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n   * function you can pass one in the constructor\n   * the cursorStyle property\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  cursorStyleHandler(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n    coord: TOCoord,\n  ) {\n    return control.cursorStyle;\n  }\n\n  /**\n   * Returns the action name. The basic implementation just return the actionName property.\n   * @param {Event} eventData the native mouse event\n   * @param {Control} control the current control ( likely this)\n   * @param {FabricObject} object on which the control is displayed\n   * @return {String}\n   */\n  getActionName(\n    eventData: TPointerEvent,\n    control: Control,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    return control.actionName;\n  }\n\n  /**\n   * Returns controls visibility\n   * @param {FabricObject} object on which the control is displayed\n   * @param {String} controlKey key where the control is memorized on the\n   * @return {Boolean}\n   */\n  getVisibility(fabricObject: InteractiveFabricObject, controlKey: string) {\n    return fabricObject._controlsVisibility?.[controlKey] ?? this.visible;\n  }\n\n  /**\n   * Sets controls visibility\n   * @param {Boolean} visibility for the object\n   * @return {Void}\n   */\n  setVisibility(\n    visibility: boolean,\n    name?: string,\n    fabricObject?: InteractiveFabricObject,\n  ) {\n    this.visible = visibility;\n  }\n\n  positionHandler(\n    dim: Point,\n    finalMatrix: TMat2D,\n    fabricObject: InteractiveFabricObject,\n    currentControl: Control,\n  ) {\n    return new Point(\n      this.x * dim.x + this.offsetX,\n      this.y * dim.y + this.offsetY,\n    ).transform(finalMatrix);\n  }\n\n  /**\n   * Returns the coords for this control based on object values.\n   * @param {Number} objectAngle angle from the fabric object holding the control\n   * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n   *   isTouch is true)\n   * @param {Number} centerX x coordinate where the control center should be\n   * @param {Number} centerY y coordinate where the control center should be\n   * @param {boolean} isTouch true if touch corner, false if normal corner\n   */\n  calcCornerCoords(\n    angle: TDegree,\n    objectCornerSize: number,\n    centerX: number,\n    centerY: number,\n    isTouch: boolean,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    const t = multiplyTransformMatrixArray([\n      createTranslateMatrix(centerX, centerY),\n      createRotateMatrix({ angle }),\n      createScaleMatrix(\n        (isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize,\n        (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize,\n      ),\n    ]);\n    return {\n      tl: new Point(-0.5, -0.5).transform(t),\n      tr: new Point(0.5, -0.5).transform(t),\n      br: new Point(0.5, 0.5).transform(t),\n      bl: new Point(-0.5, 0.5).transform(t),\n    };\n  }\n\n  /**\n   * This is an helper method to prepare the canvas to render a control\n   * It detectes common control properties and sets the correct fill and\n   * stroke styles on the context. It does not execute translations or\n   * rotations since different controls need differnt combination of these.\n   */\n  commonRenderProps(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    fabricObject: InteractiveFabricObject,\n    styleOverride: ControlRenderingStyleOverride = {},\n  ): {\n    stroke: boolean;\n    xSize: number;\n    ySize: number;\n    transparentCorners: boolean;\n    opName: 'stroke' | 'fill';\n  } {\n    const { cornerSize, cornerColor, transparentCorners, cornerStrokeColor } =\n        styleOverride,\n      sizeFromProps = cornerSize || fabricObject.cornerSize,\n      xSize = this.sizeX || sizeFromProps,\n      ySize = this.sizeY || sizeFromProps,\n      transparent =\n        typeof transparentCorners !== 'undefined'\n          ? transparentCorners\n          : fabricObject.transparentCorners,\n      opName = transparent ? STROKE : FILL,\n      strokeColor = cornerStrokeColor || fabricObject.cornerStrokeColor,\n      stroke = !transparent && !!strokeColor;\n    ctx.fillStyle = cornerColor || fabricObject.cornerColor || '';\n    ctx.strokeStyle = strokeColor || '';\n    ctx.translate(left, top);\n    //  angle is relative to canvas plane\n    ctx.rotate(degreesToRadians(fabricObject.getTotalAngle()));\n    return {\n      stroke,\n      xSize,\n      ySize,\n      transparentCorners: transparent,\n      opName,\n    };\n  }\n\n  /**\n   * Render function for the control.\n   * When this function runs the context is unscaled. unrotate. Just retina scaled.\n   * all the functions will have to translate to the point left,top before starting Drawing\n   * if they want to draw a control where the position is detected.\n   * left and top are the result of the positionHandler function\n   * @param {RenderingContext2D} ctx the context where the control will be drawn\n   * @param {Number} left position of the canvas where we are about to render the control.\n   * @param {Number} top position of the canvas where we are about to render the control.\n   * @param {Object} styleOverride\n   * @param {FabricObject} fabricObject the object where the control is about to be rendered\n   */\n  render(\n    ctx: CanvasRenderingContext2D,\n    left: number,\n    top: number,\n    styleOverride: ControlRenderingStyleOverride | undefined,\n    fabricObject: InteractiveFabricObject,\n  ) {\n    styleOverride = styleOverride || {};\n    switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n      case 'circle':\n        renderCircleControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n        break;\n      default:\n        renderSquareControl.call(\n          this,\n          ctx,\n          left,\n          top,\n          styleOverride,\n          fabricObject,\n        );\n    }\n  }\n}\n"],"names":["Control","constructor","options","_defineProperty","SCALE","Object","assign","getTransformAnchorPoint","_this$transformAnchor","transformAnchorPoint","Point","x","y","shouldActivate","controlKey","fabricObject","pointer","_ref","_fabricObject$canvas","tl","tr","br","bl","canvas","getActiveObject","isControlVisible","Intersection","isPointInPolygon","getActionHandler","eventData","control","actionHandler","getMouseDownHandler","mouseDownHandler","getMouseUpHandler","mouseUpHandler","cursorStyleHandler","coord","cursorStyle","getActionName","actionName","getVisibility","_fabricObject$_contro","_fabricObject$_contro2","_controlsVisibility","visible","setVisibility","visibility","name","positionHandler","dim","finalMatrix","currentControl","offsetX","offsetY","transform","calcCornerCoords","angle","objectCornerSize","centerX","centerY","isTouch","t","multiplyTransformMatrixArray","createTranslateMatrix","createRotateMatrix","createScaleMatrix","touchSizeX","sizeX","touchSizeY","sizeY","commonRenderProps","ctx","left","top","styleOverride","arguments","length","undefined","cornerSize","cornerColor","transparentCorners","cornerStrokeColor","sizeFromProps","xSize","ySize","transparent","opName","STROKE","FILL","strokeColor","stroke","fillStyle","strokeStyle","translate","rotate","degreesToRadians","getTotalAngle","render","cornerStyle","renderCircleControl","call","renderSquareControl"],"mappings":"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"}

package/dist/src/controls/changeWidth.d.ts

@@ -1,7 +1,10 @@
 import type { TransformActionHandler } from '../EventTypeDefs';
+export declare const changeObjectDimensionGen: (dimension: "width" | "height", origin: "originX" | "originY", xorY: "x" | "y", scale: "scaleX" | "scaleY") => TransformActionHandler;
 /**
  * Action handler to change object's width
  * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeWidth" if you are looking to just use a control for width
  * @param {Event} eventData javascript event that is doing the transform
  * @param {Object} transform javascript object containing a series of information around the current transform
  * @param {number} x current mouse x position, canvas normalized
@@ -9,5 +12,24 @@ import type { TransformActionHandler } from '../EventTypeDefs';
  * @return {Boolean} true if some change happened
  */
 export declare const changeObjectWidth: TransformActionHandler;
+/**
+ * Action handler to change object's height
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeHeight" if you are looking to just use a control for height
+ * @param {Event} eventData javascript event that is doing the transform
+ * @param {Object} transform javascript object containing a series of information around the current transform
+ * @param {number} x current mouse x position, canvas normalized
+ * @param {number} y current mouse y position, canvas normalized
+ * @return {Boolean} true if some change happened
+ */
+export declare const changeObjectHeight: TransformActionHandler;
+/**
+ * Control handler for changing width
+ */
 export declare const changeWidth: TransformActionHandler<import("../EventTypeDefs").Transform>;
+/**
+ * Control handler for changing height
+ */
+export declare const changeHeight: TransformActionHandler<import("../EventTypeDefs").Transform>;
 //# sourceMappingURL=changeWidth.d.ts.map

package/dist/src/controls/changeWidth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changeWidth.d.ts","sourceRoot":"","sources":["../../../src/controls/changeWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAO/D;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,EAAE,sBAiC/B,CAAC;AAEF,eAAO,MAAM,WAAW,8DAGvB,CAAC"}
+{"version":3,"file":"changeWidth.d.ts","sourceRoot":"","sources":["../../../src/controls/changeWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,eAAO,MAAM,wBAAwB,GAEjC,WAAW,OAAO,GAAG,QAAQ,EAC7B,QAAQ,SAAS,GAAG,SAAS,EAC7B,MAAM,GAAG,GAAG,GAAG,EACf,OAAO,QAAQ,GAAG,QAAQ,KACzB,sBA8BF,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,EAAE,sBAC6B,CAAC;AAE9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,sBAC6B,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,WAAW,8DAGvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,8DAGxB,CAAC"}

package/dist/src/controls/changeWidth.min.mjs

@@ -1,2 +1,2 @@
-import{RESIZING as i,CENTER as r,RIGHT as t,LEFT as o}from"../constants.min.mjs";import{resolveOrigin as m}from"../util/misc/resolveOrigin.min.mjs";import{getLocalPoint as n,isTransformCentered as s}from"./util.min.mjs";import{wrapWithFireEvent as e}from"./wrapWithFireEvent.min.mjs";import{wrapWithFixedAnchor as a}from"./wrapWithFixedAnchor.min.mjs";const h=(i,e,a,h)=>{const c=n(e,e.originX,e.originY,a,h);if(m(e.originX)===m(r)||m(e.originX)===m(t)&&c.x<0||m(e.originX)===m(o)&&c.x>0){const{target:i}=e,r=i.strokeWidth/(i.strokeUniform?i.scaleX:1),t=s(e)?2:1,o=i.width,m=Math.abs(c.x*t/i.scaleX)-r;return i.set("width",Math.max(m,1)),o!==i.width}return!1},c=e(i,a(h));export{h as changeObjectWidth,c as changeWidth};
+import{RESIZING as i}from"../constants.min.mjs";import{resolveOrigin as r}from"../util/misc/resolveOrigin.min.mjs";import{getLocalPoint as t,isTransformCentered as o}from"./util.min.mjs";import{wrapWithFireEvent as m}from"./wrapWithFireEvent.min.mjs";import{wrapWithFixedAnchor as n}from"./wrapWithFixedAnchor.min.mjs";const s=(i,m,n,s)=>(e,a,h,c)=>{const p=t(a,a.originX,a.originY,h,c)[n],f=r(a[m]);if(0===f||f>0&&p<0||f<0&&p>0){const{target:r}=a,t=r.strokeWidth/(r.strokeUniform?r[s]:1),m=o(a)?2:1,n=r[i],e=Math.abs(p*m/r[s])-t;return r.set(i,Math.max(e,1)),n!==r[i]}return!1},e=s("width","originX","x","scaleX"),a=s("height","originY","y","scaleY"),h=m(i,n(e)),c=m(i,n(a));export{c as changeHeight,s as changeObjectDimensionGen,a as changeObjectHeight,e as changeObjectWidth,h as changeWidth};
 //# sourceMappingURL=changeWidth.min.mjs.map

package/dist/src/controls/changeWidth.min.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"changeWidth.min.mjs","sources":["../../../src/controls/changeWidth.ts"],"sourcesContent":["import type { TransformActionHandler } from '../EventTypeDefs';\nimport { CENTER, LEFT, RESIZING, RIGHT } from '../constants';\nimport { resolveOrigin } from '../util/misc/resolveOrigin';\nimport { getLocalPoint, isTransformCentered } from './util';\nimport { wrapWithFireEvent } from './wrapWithFireEvent';\nimport { wrapWithFixedAnchor } from './wrapWithFixedAnchor';\n\n/**\n * Action handler to change object's width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectWidth: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const localPoint = getLocalPoint(\n    transform,\n    transform.originX,\n    transform.originY,\n    x,\n    y,\n  );\n  //  make sure the control changes width ONLY from it's side of target\n  if (\n    resolveOrigin(transform.originX) === resolveOrigin(CENTER) ||\n    (resolveOrigin(transform.originX) === resolveOrigin(RIGHT) &&\n      localPoint.x < 0) ||\n    (resolveOrigin(transform.originX) === resolveOrigin(LEFT) &&\n      localPoint.x > 0)\n  ) {\n    const { target } = transform,\n      strokePadding =\n        target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),\n      multiplier = isTransformCentered(transform) ? 2 : 1,\n      oldWidth = target.width,\n      newWidth =\n        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding;\n    target.set('width', Math.max(newWidth, 1));\n    //  check against actual target width in case `newWidth` was rejected\n    return oldWidth !== target.width;\n  }\n  return false;\n};\n\nexport const changeWidth = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectWidth),\n);\n"],"names":["changeObjectWidth","eventData","transform","x","y","localPoint","getLocalPoint","originX","originY","resolveOrigin","CENTER","RIGHT","LEFT","target","strokePadding","strokeWidth","strokeUniform","scaleX","multiplier","isTransformCentered","oldWidth","width","newWidth","Math","abs","set","max","changeWidth","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor"],"mappings":"gWAgBO,MAAMA,EAA4CA,CACvDC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAAaC,EACjBJ,EACAA,EAAUK,QACVL,EAAUM,QACVL,EACAC,GAGF,GACEK,EAAcP,EAAUK,WAAaE,EAAcC,IAClDD,EAAcP,EAAUK,WAAaE,EAAcE,IAClDN,EAAWF,EAAI,GAChBM,EAAcP,EAAUK,WAAaE,EAAcG,IAClDP,EAAWF,EAAI,EACjB,CACA,MAAMU,OAAEA,GAAWX,EACjBY,EACED,EAAOE,aAAeF,EAAOG,cAAgBH,EAAOI,OAAS,GAC/DC,EAAaC,EAAoBjB,GAAa,EAAI,EAClDkB,EAAWP,EAAOQ,MAClBC,EACEC,KAAKC,IAAKnB,EAAWF,EAAIe,EAAcL,EAAOI,QAAUH,EAG5D,OAFAD,EAAOY,IAAI,QAASF,KAAKG,IAAIJ,EAAU,IAEhCF,IAAaP,EAAOQ,KAC7B,CACA,OAAO,GAGIM,EAAcC,EACzBC,EACAC,EAAoB9B"}
+{"version":3,"file":"changeWidth.min.mjs","sources":["../../../src/controls/changeWidth.ts"],"sourcesContent":["import type { TransformActionHandler } from '../EventTypeDefs';\nimport { RESIZING } from '../constants';\nimport { resolveOrigin } from '../util/misc/resolveOrigin';\nimport { getLocalPoint, isTransformCentered } from './util';\nimport { wrapWithFireEvent } from './wrapWithFireEvent';\nimport { wrapWithFixedAnchor } from './wrapWithFixedAnchor';\n\nexport const changeObjectDimensionGen =\n  (\n    dimension: 'width' | 'height',\n    origin: 'originX' | 'originY',\n    xorY: 'x' | 'y',\n    scale: 'scaleX' | 'scaleY',\n  ): TransformActionHandler =>\n  (eventData, transform, x, y) => {\n    const localPoint = getLocalPoint(\n      transform,\n      transform.originX,\n      transform.originY,\n      x,\n      y,\n    );\n    const localPointValue = localPoint[xorY];\n    //  make sure the control changes width ONLY from it's side of target\n    const originValue = resolveOrigin(transform[origin]);\n    if (\n      originValue === 0 ||\n      (originValue > 0 && localPointValue < 0) ||\n      (originValue < 0 && localPointValue > 0)\n    ) {\n      const { target } = transform,\n        strokePadding =\n          target.strokeWidth / (target.strokeUniform ? target[scale] : 1),\n        multiplier = isTransformCentered(transform) ? 2 : 1,\n        oldWidth = target[dimension],\n        newWidth =\n          Math.abs((localPointValue * multiplier) / target[scale]) -\n          strokePadding;\n      target.set(dimension, Math.max(newWidth, 1));\n      //  check against actual target width in case `newWidth` was rejected\n      return oldWidth !== target[dimension];\n    }\n    return false;\n  };\n\n/**\n * Action handler to change object's width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * You want to use this only if you are building a new control handler and you want\n * to reuse some logic. use \"changeWidth\" if you are looking to just use a control for width\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectWidth: TransformActionHandler =\n  changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');\n\n/**\n * Action handler to change object's height\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * You want to use this only if you are building a new control handler and you want\n * to reuse some logic. use \"changeHeight\" if you are looking to just use a control for height\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectHeight: TransformActionHandler =\n  changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');\n\n/**\n * Control handler for changing width\n */\nexport const changeWidth = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectWidth),\n);\n\n/**\n * Control handler for changing height\n */\nexport const changeHeight = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectHeight),\n);\n"],"names":["changeObjectDimensionGen","dimension","origin","xorY","scale","eventData","transform","x","y","localPointValue","getLocalPoint","originX","originY","originValue","resolveOrigin","target","strokePadding","strokeWidth","strokeUniform","multiplier","isTransformCentered","oldWidth","newWidth","Math","abs","set","max","changeObjectWidth","changeObjectHeight","changeWidth","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor","changeHeight"],"mappings":"+TAOO,MAAMA,EACXA,CACEC,EACAC,EACAC,EACAC,IAEF,CAACC,EAAWC,EAAWC,EAAGC,KACxB,MAOMC,EAPaC,EACjBJ,EACAA,EAAUK,QACVL,EAAUM,QACVL,EACAC,GAEiCL,GAE7BU,EAAcC,EAAcR,EAAUJ,IAC5C,GACkB,IAAhBW,GACCA,EAAc,GAAKJ,EAAkB,GACrCI,EAAc,GAAKJ,EAAkB,EACtC,CACA,MAAMM,OAAEA,GAAWT,EACjBU,EACED,EAAOE,aAAeF,EAAOG,cAAgBH,EAAOX,GAAS,GAC/De,EAAaC,EAAoBd,GAAa,EAAI,EAClDe,EAAWN,EAAOd,GAClBqB,EACEC,KAAKC,IAAKf,EAAkBU,EAAcJ,EAAOX,IACjDY,EAGJ,OAFAD,EAAOU,IAAIxB,EAAWsB,KAAKG,IAAIJ,EAAU,IAElCD,IAAaN,EAAOd,EAC7B,CACA,OAAO,GAcE0B,EACX3B,EAAyB,QAAS,UAAW,IAAK,UAavC4B,EACX5B,EAAyB,SAAU,UAAW,IAAK,UAKxC6B,EAAcC,EACzBC,EACAC,EAAoBL,IAMTM,EAAeH,EAC1BC,EACAC,EAAoBJ"}

package/dist/src/controls/changeWidth.mjs

@@ -1,36 +1,64 @@
-import { RESIZING, CENTER, RIGHT, LEFT } from '../constants.mjs';
+import { RESIZING } from '../constants.mjs';
 import { resolveOrigin } from '../util/misc/resolveOrigin.mjs';
 import { getLocalPoint, isTransformCentered } from './util.mjs';
 import { wrapWithFireEvent } from './wrapWithFireEvent.mjs';
 import { wrapWithFixedAnchor } from './wrapWithFixedAnchor.mjs';
 
-/**
- * Action handler to change object's width
- * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
- * @param {Event} eventData javascript event that is doing the transform
- * @param {Object} transform javascript object containing a series of information around the current transform
- * @param {number} x current mouse x position, canvas normalized
- * @param {number} y current mouse y position, canvas normalized
- * @return {Boolean} true if some change happened
- */
-const changeObjectWidth = (eventData, transform, x, y) => {
+const changeObjectDimensionGen = (dimension, origin, xorY, scale) => (eventData, transform, x, y) => {
   const localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);
+  const localPointValue = localPoint[xorY];
   //  make sure the control changes width ONLY from it's side of target
-  if (resolveOrigin(transform.originX) === resolveOrigin(CENTER) || resolveOrigin(transform.originX) === resolveOrigin(RIGHT) && localPoint.x < 0 || resolveOrigin(transform.originX) === resolveOrigin(LEFT) && localPoint.x > 0) {
+  const originValue = resolveOrigin(transform[origin]);
+  if (originValue === 0 || originValue > 0 && localPointValue < 0 || originValue < 0 && localPointValue > 0) {
     const {
         target
       } = transform,
-      strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),
+      strokePadding = target.strokeWidth / (target.strokeUniform ? target[scale] : 1),
       multiplier = isTransformCentered(transform) ? 2 : 1,
-      oldWidth = target.width,
-      newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding;
-    target.set('width', Math.max(newWidth, 1));
+      oldWidth = target[dimension],
+      newWidth = Math.abs(localPointValue * multiplier / target[scale]) - strokePadding;
+    target.set(dimension, Math.max(newWidth, 1));
     //  check against actual target width in case `newWidth` was rejected
-    return oldWidth !== target.width;
+    return oldWidth !== target[dimension];
   }
   return false;
 };
+
+/**
+ * Action handler to change object's width
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeWidth" if you are looking to just use a control for width
+ * @param {Event} eventData javascript event that is doing the transform
+ * @param {Object} transform javascript object containing a series of information around the current transform
+ * @param {number} x current mouse x position, canvas normalized
+ * @param {number} y current mouse y position, canvas normalized
+ * @return {Boolean} true if some change happened
+ */
+const changeObjectWidth = changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');
+
+/**
+ * Action handler to change object's height
+ * Needs to be wrapped with `wrapWithFixedAnchor` to be effective
+ * You want to use this only if you are building a new control handler and you want
+ * to reuse some logic. use "changeHeight" if you are looking to just use a control for height
+ * @param {Event} eventData javascript event that is doing the transform
+ * @param {Object} transform javascript object containing a series of information around the current transform
+ * @param {number} x current mouse x position, canvas normalized
+ * @param {number} y current mouse y position, canvas normalized
+ * @return {Boolean} true if some change happened
+ */
+const changeObjectHeight = changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');
+
+/**
+ * Control handler for changing width
+ */
 const changeWidth = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectWidth));
 
-export { changeObjectWidth, changeWidth };
+/**
+ * Control handler for changing height
+ */
+const changeHeight = wrapWithFireEvent(RESIZING, wrapWithFixedAnchor(changeObjectHeight));
+
+export { changeHeight, changeObjectDimensionGen, changeObjectHeight, changeObjectWidth, changeWidth };
 //# sourceMappingURL=changeWidth.mjs.map

package/dist/src/controls/changeWidth.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"changeWidth.mjs","sources":["../../../src/controls/changeWidth.ts"],"sourcesContent":["import type { TransformActionHandler } from '../EventTypeDefs';\nimport { CENTER, LEFT, RESIZING, RIGHT } from '../constants';\nimport { resolveOrigin } from '../util/misc/resolveOrigin';\nimport { getLocalPoint, isTransformCentered } from './util';\nimport { wrapWithFireEvent } from './wrapWithFireEvent';\nimport { wrapWithFixedAnchor } from './wrapWithFixedAnchor';\n\n/**\n * Action handler to change object's width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectWidth: TransformActionHandler = (\n  eventData,\n  transform,\n  x,\n  y,\n) => {\n  const localPoint = getLocalPoint(\n    transform,\n    transform.originX,\n    transform.originY,\n    x,\n    y,\n  );\n  //  make sure the control changes width ONLY from it's side of target\n  if (\n    resolveOrigin(transform.originX) === resolveOrigin(CENTER) ||\n    (resolveOrigin(transform.originX) === resolveOrigin(RIGHT) &&\n      localPoint.x < 0) ||\n    (resolveOrigin(transform.originX) === resolveOrigin(LEFT) &&\n      localPoint.x > 0)\n  ) {\n    const { target } = transform,\n      strokePadding =\n        target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),\n      multiplier = isTransformCentered(transform) ? 2 : 1,\n      oldWidth = target.width,\n      newWidth =\n        Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding;\n    target.set('width', Math.max(newWidth, 1));\n    //  check against actual target width in case `newWidth` was rejected\n    return oldWidth !== target.width;\n  }\n  return false;\n};\n\nexport const changeWidth = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectWidth),\n);\n"],"names":["changeObjectWidth","eventData","transform","x","y","localPoint","getLocalPoint","originX","originY","resolveOrigin","CENTER","RIGHT","LEFT","target","strokePadding","strokeWidth","strokeUniform","scaleX","multiplier","isTransformCentered","oldWidth","width","newWidth","Math","abs","set","max","changeWidth","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor"],"mappings":";;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,iBAAyC,GAAGA,CACvDC,SAAS,EACTC,SAAS,EACTC,CAAC,EACDC,CAAC,KACE;AACH,EAAA,MAAMC,UAAU,GAAGC,aAAa,CAC9BJ,SAAS,EACTA,SAAS,CAACK,OAAO,EACjBL,SAAS,CAACM,OAAO,EACjBL,CAAC,EACDC,CACF,CAAC;AACD;EACA,IACEK,aAAa,CAACP,SAAS,CAACK,OAAO,CAAC,KAAKE,aAAa,CAACC,MAAM,CAAC,IACzDD,aAAa,CAACP,SAAS,CAACK,OAAO,CAAC,KAAKE,aAAa,CAACE,KAAK,CAAC,IACxDN,UAAU,CAACF,CAAC,GAAG,CAAE,IAClBM,aAAa,CAACP,SAAS,CAACK,OAAO,CAAC,KAAKE,aAAa,CAACG,IAAI,CAAC,IACvDP,UAAU,CAACF,CAAC,GAAG,CAAE,EACnB;IACA,MAAM;AAAEU,QAAAA;AAAO,OAAC,GAAGX,SAAS;AAC1BY,MAAAA,aAAa,GACXD,MAAM,CAACE,WAAW,IAAIF,MAAM,CAACG,aAAa,GAAGH,MAAM,CAACI,MAAM,GAAG,CAAC,CAAC;MACjEC,UAAU,GAAGC,mBAAmB,CAACjB,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;MACnDkB,QAAQ,GAAGP,MAAM,CAACQ,KAAK;AACvBC,MAAAA,QAAQ,GACNC,IAAI,CAACC,GAAG,CAAEnB,UAAU,CAACF,CAAC,GAAGe,UAAU,GAAIL,MAAM,CAACI,MAAM,CAAC,GAAGH,aAAa;AACzED,IAAAA,MAAM,CAACY,GAAG,CAAC,OAAO,EAAEF,IAAI,CAACG,GAAG,CAACJ,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC1C;AACA,IAAA,OAAOF,QAAQ,KAAKP,MAAM,CAACQ,KAAK;AAClC,EAAA;AACA,EAAA,OAAO,KAAK;AACd;AAEO,MAAMM,WAAW,GAAGC,iBAAiB,CAC1CC,QAAQ,EACRC,mBAAmB,CAAC9B,iBAAiB,CACvC;;;;"}
+{"version":3,"file":"changeWidth.mjs","sources":["../../../src/controls/changeWidth.ts"],"sourcesContent":["import type { TransformActionHandler } from '../EventTypeDefs';\nimport { RESIZING } from '../constants';\nimport { resolveOrigin } from '../util/misc/resolveOrigin';\nimport { getLocalPoint, isTransformCentered } from './util';\nimport { wrapWithFireEvent } from './wrapWithFireEvent';\nimport { wrapWithFixedAnchor } from './wrapWithFixedAnchor';\n\nexport const changeObjectDimensionGen =\n  (\n    dimension: 'width' | 'height',\n    origin: 'originX' | 'originY',\n    xorY: 'x' | 'y',\n    scale: 'scaleX' | 'scaleY',\n  ): TransformActionHandler =>\n  (eventData, transform, x, y) => {\n    const localPoint = getLocalPoint(\n      transform,\n      transform.originX,\n      transform.originY,\n      x,\n      y,\n    );\n    const localPointValue = localPoint[xorY];\n    //  make sure the control changes width ONLY from it's side of target\n    const originValue = resolveOrigin(transform[origin]);\n    if (\n      originValue === 0 ||\n      (originValue > 0 && localPointValue < 0) ||\n      (originValue < 0 && localPointValue > 0)\n    ) {\n      const { target } = transform,\n        strokePadding =\n          target.strokeWidth / (target.strokeUniform ? target[scale] : 1),\n        multiplier = isTransformCentered(transform) ? 2 : 1,\n        oldWidth = target[dimension],\n        newWidth =\n          Math.abs((localPointValue * multiplier) / target[scale]) -\n          strokePadding;\n      target.set(dimension, Math.max(newWidth, 1));\n      //  check against actual target width in case `newWidth` was rejected\n      return oldWidth !== target[dimension];\n    }\n    return false;\n  };\n\n/**\n * Action handler to change object's width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * You want to use this only if you are building a new control handler and you want\n * to reuse some logic. use \"changeWidth\" if you are looking to just use a control for width\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectWidth: TransformActionHandler =\n  changeObjectDimensionGen('width', 'originX', 'x', 'scaleX');\n\n/**\n * Action handler to change object's height\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * You want to use this only if you are building a new control handler and you want\n * to reuse some logic. use \"changeHeight\" if you are looking to just use a control for height\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\nexport const changeObjectHeight: TransformActionHandler =\n  changeObjectDimensionGen('height', 'originY', 'y', 'scaleY');\n\n/**\n * Control handler for changing width\n */\nexport const changeWidth = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectWidth),\n);\n\n/**\n * Control handler for changing height\n */\nexport const changeHeight = wrapWithFireEvent(\n  RESIZING,\n  wrapWithFixedAnchor(changeObjectHeight),\n);\n"],"names":["changeObjectDimensionGen","dimension","origin","xorY","scale","eventData","transform","x","y","localPoint","getLocalPoint","originX","originY","localPointValue","originValue","resolveOrigin","target","strokePadding","strokeWidth","strokeUniform","multiplier","isTransformCentered","oldWidth","newWidth","Math","abs","set","max","changeObjectWidth","changeObjectHeight","changeWidth","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor","changeHeight"],"mappings":";;;;;;AAOO,MAAMA,wBAAwB,GACnCA,CACEC,SAA6B,EAC7BC,MAA6B,EAC7BC,IAAe,EACfC,KAA0B,KAE5B,CAACC,SAAS,EAAEC,SAAS,EAAEC,CAAC,EAAEC,CAAC,KAAK;AAC9B,EAAA,MAAMC,UAAU,GAAGC,aAAa,CAC9BJ,SAAS,EACTA,SAAS,CAACK,OAAO,EACjBL,SAAS,CAACM,OAAO,EACjBL,CAAC,EACDC,CACF,CAAC;AACD,EAAA,MAAMK,eAAe,GAAGJ,UAAU,CAACN,IAAI,CAAC;AACxC;EACA,MAAMW,WAAW,GAAGC,aAAa,CAACT,SAAS,CAACJ,MAAM,CAAC,CAAC;AACpD,EAAA,IACEY,WAAW,KAAK,CAAC,IAChBA,WAAW,GAAG,CAAC,IAAID,eAAe,GAAG,CAAE,IACvCC,WAAW,GAAG,CAAC,IAAID,eAAe,GAAG,CAAE,EACxC;IACA,MAAM;AAAEG,QAAAA;AAAO,OAAC,GAAGV,SAAS;AAC1BW,MAAAA,aAAa,GACXD,MAAM,CAACE,WAAW,IAAIF,MAAM,CAACG,aAAa,GAAGH,MAAM,CAACZ,KAAK,CAAC,GAAG,CAAC,CAAC;MACjEgB,UAAU,GAAGC,mBAAmB,CAACf,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;AACnDgB,MAAAA,QAAQ,GAAGN,MAAM,CAACf,SAAS,CAAC;AAC5BsB,MAAAA,QAAQ,GACNC,IAAI,CAACC,GAAG,CAAEZ,eAAe,GAAGO,UAAU,GAAIJ,MAAM,CAACZ,KAAK,CAAC,CAAC,GACxDa,aAAa;AACjBD,IAAAA,MAAM,CAACU,GAAG,CAACzB,SAAS,EAAEuB,IAAI,CAACG,GAAG,CAACJ,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC5C;AACA,IAAA,OAAOD,QAAQ,KAAKN,MAAM,CAACf,SAAS,CAAC;AACvC,EAAA;AACA,EAAA,OAAO,KAAK;AACd;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM2B,iBAAyC,GACpD5B,wBAAwB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ;;AAE5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM6B,kBAA0C,GACrD7B,wBAAwB,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ;;AAE7D;AACA;AACA;AACO,MAAM8B,WAAW,GAAGC,iBAAiB,CAC1CC,QAAQ,EACRC,mBAAmB,CAACL,iBAAiB,CACvC;;AAEA;AACA;AACA;AACO,MAAMM,YAAY,GAAGH,iBAAiB,CAC3CC,QAAQ,EACRC,mBAAmB,CAACJ,kBAAkB,CACxC;;;;"}

package/dist/src/controls/controlRendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controlRendering.d.ts","sourceRoot":"","sources":["../../../src/controls/controlRendering.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAElF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,IAAI,CACF,uBAAuB,EACrB,aAAa,GACb,YAAY,GACZ,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,oBAAoB,CACvB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,IACzD,CACF,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,CAAC,KACZ,IAAI,CAAC;AAEV;;;;;;;;;;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,QAwCtC;AAED;;;;;;;;;;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,QAgCtC"}
+{"version":3,"file":"controlRendering.d.ts","sourceRoot":"","sources":["../../../src/controls/controlRendering.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,IAAI,CACF,uBAAuB,EACrB,aAAa,GACb,YAAY,GACZ,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,oBAAoB,CACvB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,IACzD,CACF,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,6BAA6B,EAC5C,YAAY,EAAE,CAAC,KACZ,IAAI,CAAC;AAEV;;;;;;;;;;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,QAyBtC;AAED;;;;;;;;;;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,QAoBtC"}

package/dist/src/controls/controlRendering.min.mjs

@@ -1,2 +1,2 @@
-import{STROKE as r,FILL as e,twoMathPi as o}from"../constants.min.mjs";import{degreesToRadians as n}from"../util/misc/radiansDegreesConversion.min.mjs";function t(n,t,s,c,i){c=c||{};const l=this.sizeX||c.cornerSize||i.cornerSize,a=this.sizeY||c.cornerSize||i.cornerSize,S=void 0!==c.transparentCorners?c.transparentCorners:i.transparentCorners,C=S?r:e,k=!S&&(c.cornerStrokeColor||i.cornerStrokeColor);let z,m=t,p=s;n.save(),n.fillStyle=c.cornerColor||i.cornerColor||"",n.strokeStyle=c.cornerStrokeColor||i.cornerStrokeColor||"",l>a?(z=l,n.scale(1,a/l),p=s*l/a):a>l?(z=a,n.scale(l/a,1),m=t*a/l):z=l,n.beginPath(),n.arc(m,p,z/2,0,o,!1),n[C](),k&&n.stroke(),n.restore()}function s(o,t,s,c,i){c=c||{};const l=this.sizeX||c.cornerSize||i.cornerSize,a=this.sizeY||c.cornerSize||i.cornerSize,S=void 0!==c.transparentCorners?c.transparentCorners:i.transparentCorners,C=S?r:e,k=!S&&(c.cornerStrokeColor||i.cornerStrokeColor),z=l/2,m=a/2;o.save(),o.fillStyle=c.cornerColor||i.cornerColor||"",o.strokeStyle=c.cornerStrokeColor||i.cornerStrokeColor||"",o.translate(t,s);const p=i.getTotalAngle();o.rotate(n(p)),o[`${C}Rect`](-z,-m,l,a),k&&o.strokeRect(-z,-m,l,a),o.restore()}export{t as renderCircleControl,s as renderSquareControl};
+import{twoMathPi as e}from"../constants.min.mjs";function o(o,t,s,r,n){o.save();const{stroke:c,xSize:i,ySize:m,opName:a}=this.commonRenderProps(o,t,s,n,r);let p=i;i>m?o.scale(1,m/i):m>i&&(p=m,o.scale(i/m,1)),o.beginPath(),o.arc(0,0,p/2,0,e,!1),o[a](),c&&o.stroke(),o.restore()}function t(e,o,t,s,r){e.save();const{stroke:n,xSize:c,ySize:i,opName:m}=this.commonRenderProps(e,o,t,r,s),a=c/2,p=i/2;e[`${m}Rect`](-a,-p,c,i),n&&e.strokeRect(-a,-p,c,i),e.restore()}export{o as renderCircleControl,t as renderSquareControl};
 //# sourceMappingURL=controlRendering.min.mjs.map

package/dist/src/controls/controlRendering.min.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"controlRendering.min.mjs","sources":["../../../src/controls/controlRendering.ts"],"sourcesContent":["import { FILL, STROKE, twoMathPi } from '../constants';\nimport type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport type { Control } from './Control';\n\nexport type ControlRenderingStyleOverride = Partial<\n  Pick<\n    InteractiveFabricObject,\n    | 'cornerStyle'\n    | 'cornerSize'\n    | 'cornerColor'\n    | 'cornerStrokeColor'\n    | 'cornerDashArray'\n    | 'transparentCorners'\n  >\n>;\n\nexport type ControlRenderer<\n  O extends InteractiveFabricObject = InteractiveFabricObject,\n> = (\n  ctx: CanvasRenderingContext2D,\n  left: number,\n  top: number,\n  styleOverride: ControlRenderingStyleOverride,\n  fabricObject: O,\n) => void;\n\n/**\n * Render a round control, as per fabric features.\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 renderCircleControl(\n  this: Control,\n  ctx: CanvasRenderingContext2D,\n  left: number,\n  top: number,\n  styleOverride: ControlRenderingStyleOverride,\n  fabricObject: InteractiveFabricObject,\n) {\n  styleOverride = styleOverride || {};\n  const xSize =\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n    transparentCorners =\n      typeof styleOverride.transparentCorners !== 'undefined'\n        ? styleOverride.transparentCorners\n        : fabricObject.transparentCorners,\n    methodName = transparentCorners ? STROKE : FILL,\n    stroke =\n      !transparentCorners &&\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);\n  let myLeft = left,\n    myTop = top,\n    size;\n  ctx.save();\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\n  ctx.strokeStyle =\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\n  // TODO: use proper ellipse code.\n  if (xSize > ySize) {\n    size = xSize;\n    ctx.scale(1.0, ySize / xSize);\n    myTop = (top * xSize) / ySize;\n  } else if (ySize > xSize) {\n    size = ySize;\n    ctx.scale(xSize / ySize, 1.0);\n    myLeft = (left * ySize) / xSize;\n  } else {\n    size = xSize;\n  }\n  ctx.beginPath();\n  ctx.arc(myLeft, myTop, size / 2, 0, twoMathPi, false);\n  ctx[methodName]();\n  if (stroke) {\n    ctx.stroke();\n  }\n  ctx.restore();\n}\n\n/**\n * Render a square control, as per fabric features.\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 renderSquareControl(\n  this: Control,\n  ctx: CanvasRenderingContext2D,\n  left: number,\n  top: number,\n  styleOverride: ControlRenderingStyleOverride,\n  fabricObject: InteractiveFabricObject,\n) {\n  styleOverride = styleOverride || {};\n  const xSize =\n      this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n    ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n    transparentCorners =\n      typeof styleOverride.transparentCorners !== 'undefined'\n        ? styleOverride.transparentCorners\n        : fabricObject.transparentCorners,\n    methodName = transparentCorners ? STROKE : FILL,\n    stroke =\n      !transparentCorners &&\n      (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\n    xSizeBy2 = xSize / 2,\n    ySizeBy2 = ySize / 2;\n  ctx.save();\n  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '';\n  ctx.strokeStyle =\n    styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '';\n  ctx.translate(left, top);\n  //  angle is relative to canvas plane\n  const angle = fabricObject.getTotalAngle();\n  ctx.rotate(degreesToRadians(angle));\n  // this does not work, and fixed with ( && ) does not make sense.\n  // to have real transparent corners we need the controls on upperCanvas\n  // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n  ctx[`${methodName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);\n  if (stroke) {\n    ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n  }\n  ctx.restore();\n}\n"],"names":["renderCircleControl","ctx","left","top","styleOverride","fabricObject","xSize","this","sizeX","cornerSize","ySize","sizeY","transparentCorners","methodName","STROKE","FILL","stroke","cornerStrokeColor","size","myLeft","myTop","save","fillStyle","cornerColor","strokeStyle","scale","beginPath","arc","twoMathPi","restore","renderSquareControl","xSizeBy2","ySizeBy2","translate","angle","getTotalAngle","rotate","degreesToRadians","strokeRect"],"mappings":"wJAsCO,SAASA,EAEdC,EACAC,EACAC,EACAC,EACAC,GAEAD,EAAgBA,GAAiB,CAAA,EACjC,MAAME,EACFC,KAAKC,OAASJ,EAAcK,YAAcJ,EAAaI,WACzDC,EAAQH,KAAKI,OAASP,EAAcK,YAAcJ,EAAaI,WAC/DG,OAC8C,IAArCR,EAAcQ,mBACjBR,EAAcQ,mBACdP,EAAaO,mBACnBC,EAAaD,EAAqBE,EAASC,EAC3CC,GACGJ,IACAR,EAAca,mBAAqBZ,EAAaY,mBACrD,IAEEC,EAFEC,EAASjB,EACXkB,EAAQjB,EAEVF,EAAIoB,OACJpB,EAAIqB,UAAYlB,EAAcmB,aAAelB,EAAakB,aAAe,GACzEtB,EAAIuB,YACFpB,EAAca,mBAAqBZ,EAAaY,mBAAqB,GAEnEX,EAAQI,GACVQ,EAAOZ,EACPL,EAAIwB,MAAM,EAAKf,EAAQJ,GACvBc,EAASjB,EAAMG,EAASI,GACfA,EAAQJ,GACjBY,EAAOR,EACPT,EAAIwB,MAAMnB,EAAQI,EAAO,GACzBS,EAAUjB,EAAOQ,EAASJ,GAE1BY,EAAOZ,EAETL,EAAIyB,YACJzB,EAAI0B,IAAIR,EAAQC,EAAOF,EAAO,EAAG,EAAGU,GAAW,GAC/C3B,EAAIY,KACAG,GACFf,EAAIe,SAENf,EAAI4B,SACN,CAaO,SAASC,EAEd7B,EACAC,EACAC,EACAC,EACAC,GAEAD,EAAgBA,GAAiB,CAAA,EACjC,MAAME,EACFC,KAAKC,OAASJ,EAAcK,YAAcJ,EAAaI,WACzDC,EAAQH,KAAKI,OAASP,EAAcK,YAAcJ,EAAaI,WAC/DG,OAC8C,IAArCR,EAAcQ,mBACjBR,EAAcQ,mBACdP,EAAaO,mBACnBC,EAAaD,EAAqBE,EAASC,EAC3CC,GACGJ,IACAR,EAAca,mBAAqBZ,EAAaY,mBACnDc,EAAWzB,EAAQ,EACnB0B,EAAWtB,EAAQ,EACrBT,EAAIoB,OACJpB,EAAIqB,UAAYlB,EAAcmB,aAAelB,EAAakB,aAAe,GACzEtB,EAAIuB,YACFpB,EAAca,mBAAqBZ,EAAaY,mBAAqB,GACvEhB,EAAIgC,UAAU/B,EAAMC,GAEpB,MAAM+B,EAAQ7B,EAAa8B,gBAC3BlC,EAAImC,OAAOC,EAAiBH,IAI5BjC,EAAI,GAAGY,UAAmBkB,GAAWC,EAAU1B,EAAOI,GAClDM,GACFf,EAAIqC,YAAYP,GAAWC,EAAU1B,EAAOI,GAE9CT,EAAI4B,SACN"}
+{"version":3,"file":"controlRendering.min.mjs","sources":["../../../src/controls/controlRendering.ts"],"sourcesContent":["import { twoMathPi } from '../constants';\nimport type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject';\nimport type { Control } from './Control';\n\nexport type ControlRenderingStyleOverride = Partial<\n  Pick<\n    InteractiveFabricObject,\n    | 'cornerStyle'\n    | 'cornerSize'\n    | 'cornerColor'\n    | 'cornerStrokeColor'\n    | 'cornerDashArray'\n    | 'transparentCorners'\n  >\n>;\n\nexport type ControlRenderer<\n  O extends InteractiveFabricObject = InteractiveFabricObject,\n> = (\n  ctx: CanvasRenderingContext2D,\n  left: number,\n  top: number,\n  styleOverride: ControlRenderingStyleOverride,\n  fabricObject: O,\n) => void;\n\n/**\n * Render a round control, as per fabric features.\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 renderCircleControl(\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  let size = xSize;\n  // TODO: use proper ellipse code.\n  if (xSize > ySize) {\n    ctx.scale(1.0, ySize / xSize);\n  } else if (ySize > xSize) {\n    size = ySize;\n    ctx.scale(xSize / ySize, 1.0);\n  }\n  ctx.beginPath();\n  ctx.arc(0, 0, size / 2, 0, twoMathPi, false);\n  ctx[opName]();\n  if (stroke) {\n    ctx.stroke();\n  }\n  ctx.restore();\n}\n\n/**\n * Render a square control, as per fabric features.\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 renderSquareControl(\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  // this does not work, and fixed with ( && ) does not make sense.\n  // to have real transparent corners we need the controls on upperCanvas\n  // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n  ctx[`${opName}Rect`](-xSizeBy2, -ySizeBy2, xSize, ySize);\n  if (stroke) {\n    ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n  }\n  ctx.restore();\n}\n"],"names":["renderCircleControl","ctx","left","top","styleOverride","fabricObject","save","stroke","xSize","ySize","opName","this","commonRenderProps","size","scale","beginPath","arc","twoMathPi","restore","renderSquareControl","xSizeBy2","ySizeBy2","strokeRect"],"mappings":"iDAqCO,SAASA,EAEdC,EACAC,EACAC,EACAC,EACAC,GAEAJ,EAAIK,OACJ,MAAMC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,GAAWC,KAAKC,kBAC5CX,EACAC,EACAC,EACAE,EACAD,GAEF,IAAIS,EAAOL,EAEPA,EAAQC,EACVR,EAAIa,MAAM,EAAKL,EAAQD,GACdC,EAAQD,IACjBK,EAAOJ,EACPR,EAAIa,MAAMN,EAAQC,EAAO,IAE3BR,EAAIc,YACJd,EAAIe,IAAI,EAAG,EAAGH,EAAO,EAAG,EAAGI,GAAW,GACtChB,EAAIS,KACAH,GACFN,EAAIM,SAENN,EAAIiB,SACN,CAaO,SAASC,EAEdlB,EACAC,EACAC,EACAC,EACAC,GAEAJ,EAAIK,OACJ,MAAMC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,OAAEA,GAAWC,KAAKC,kBAC1CX,EACAC,EACAC,EACAE,EACAD,GAEFgB,EAAWZ,EAAQ,EACnBa,EAAWZ,EAAQ,EAIrBR,EAAI,GAAGS,UAAeU,GAAWC,EAAUb,EAAOC,GAC9CF,GACFN,EAAIqB,YAAYF,GAAWC,EAAUb,EAAOC,GAE9CR,EAAIiB,SACN"}