@nasser-sw/fabric 7.0.0-beta1

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

@@ -0,0 +1,229 @@
+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 { ControlRenderingStyleOverride } from './controlRendering';
+export declare class Control {
+    /**
+     * keep track of control visibility.
+     * mainly for backward compatibility.
+     * if you do not want to see a control, you can remove it
+     * from the control set.
+     * @type {Boolean}
+     * @default true
+     */
+    visible: boolean;
+    /**
+     * Name of the action that the control will likely execute.
+     * This is optional. FabricJS uses to identify what the user is doing for some
+     * extra optimizations. If you are writing a custom control and you want to know
+     * somewhere else in the code what is going on, you can use this string here.
+     * you can also provide a custom getActionName if your control run multiple actions
+     * depending on some external state.
+     * default to scale since is the most common, used on 4 corners by default
+     * @type {String}
+     * @default 'scale'
+     */
+    actionName: string;
+    /**
+     * Drawing angle of the control.
+     * NOT used for now, but name marked as needed for internal logic
+     * example: to reuse the same drawing function for different rotated controls
+     * @type {Number}
+     * @default 0
+     */
+    angle: number;
+    /**
+     * Relative position of the control. X
+     * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    x: number;
+    /**
+     * Relative position of the control. Y
+     * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    y: number;
+    /**
+     * Horizontal offset of the control from the defined position. In pixels
+     * Positive offset moves the control to the right, negative to the left.
+     * It used when you want to have position of control that does not scale with
+     * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on
+     * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will
+     * stay 30 pixels no matter how the object is big. Another example is having 2
+     * controls in the corner, that stay in the same position when the object scale.
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    offsetX: number;
+    /**
+     * Vertical offset of the control from the defined position. In pixels
+     * Positive offset moves the control to the bottom, negative to the top.
+     * @type {Number}
+     * @default 0
+     */
+    offsetY: number;
+    /**
+     * Sets the length of the control. If null, defaults to object's cornerSize.
+     * Expects both sizeX and sizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    sizeX: number;
+    /**
+     * Sets the height of the control. If null, defaults to object's cornerSize.
+     * Expects both sizeX and sizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    sizeY: number;
+    /**
+     * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.
+     * Expects both touchSizeX and touchSizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    touchSizeX: number;
+    /**
+     * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.
+     * Expects both touchSizeX and touchSizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    touchSizeY: number;
+    /**
+     * Css cursor style to display when the control is hovered.
+     * if the method `cursorStyleHandler` is provided, this property is ignored.
+     * @type {String}
+     * @default 'crosshair'
+     */
+    cursorStyle: string;
+    /**
+     * If controls has an offsetY or offsetX, draw a line that connects
+     * the control to the bounding box
+     * @type {Boolean}
+     * @default false
+     */
+    withConnection: boolean;
+    constructor(options?: Partial<Control>);
+    /**
+     * The control actionHandler, provide one to handle action ( control being moved )
+     * @param {Event} eventData the native mouse event
+     * @param {Transform} transformData properties of the current transform
+     * @param {Number} x x position of the cursor
+     * @param {Number} y y position of the cursor
+     * @return {Boolean} true if the action/event modified the object
+     */
+    actionHandler: TransformActionHandler;
+    /**
+     * The control handler for mouse down, provide one to handle mouse down on control
+     * @param {Event} eventData the native mouse event
+     * @param {Transform} transformData properties of the current transform
+     * @param {Number} x x position of the cursor
+     * @param {Number} y y position of the cursor
+     * @return {Boolean} true if the action/event modified the object
+     */
+    mouseDownHandler?: ControlActionHandler;
+    /**
+     * The control mouseUpHandler, provide one to handle an effect on mouse up.
+     * @param {Event} eventData the native mouse event
+     * @param {Transform} transformData properties of the current transform
+     * @param {Number} x x position of the cursor
+     * @param {Number} y y position of the cursor
+     * @return {Boolean} true if the action/event modified the object
+     */
+    mouseUpHandler?: ControlActionHandler;
+    shouldActivate(controlKey: string, fabricObject: InteractiveFabricObject, pointer: Point, { tl, tr, br, bl }: TCornerPoint): boolean;
+    /**
+     * Returns control actionHandler
+     * @param {Event} eventData the native mouse event
+     * @param {FabricObject} fabricObject on which the control is displayed
+     * @param {Control} control control for which the action handler is being asked
+     * @return {Function} the action handler
+     */
+    getActionHandler(eventData: TPointerEvent, fabricObject: InteractiveFabricObject, control: Control): TransformActionHandler | undefined;
+    /**
+     * Returns control mouseDown handler
+     * @param {Event} eventData the native mouse event
+     * @param {FabricObject} fabricObject on which the control is displayed
+     * @param {Control} control control for which the action handler is being asked
+     * @return {Function} the action handler
+     */
+    getMouseDownHandler(eventData: TPointerEvent, fabricObject: InteractiveFabricObject, control: Control): ControlActionHandler | undefined;
+    /**
+     * Returns control mouseUp handler.
+     * During actions the fabricObject or the control can be of different obj
+     * @param {Event} eventData the native mouse event
+     * @param {FabricObject} fabricObject on which the control is displayed
+     * @param {Control} control control for which the action handler is being asked
+     * @return {Function} the action handler
+     */
+    getMouseUpHandler(eventData: TPointerEvent, fabricObject: InteractiveFabricObject, control: Control): ControlActionHandler | undefined;
+    /**
+     * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate
+     * function you can pass one in the constructor
+     * the cursorStyle property
+     * @param {Event} eventData the native mouse event
+     * @param {Control} control the current control ( likely this)
+     * @param {FabricObject} object on which the control is displayed
+     * @return {String}
+     */
+    cursorStyleHandler(eventData: TPointerEvent, control: Control, fabricObject: InteractiveFabricObject, coord: TOCoord): string;
+    /**
+     * Returns the action name. The basic implementation just return the actionName property.
+     * @param {Event} eventData the native mouse event
+     * @param {Control} control the current control ( likely this)
+     * @param {FabricObject} object on which the control is displayed
+     * @return {String}
+     */
+    getActionName(eventData: TPointerEvent, control: Control, fabricObject: InteractiveFabricObject): string;
+    /**
+     * Returns controls visibility
+     * @param {FabricObject} object on which the control is displayed
+     * @param {String} controlKey key where the control is memorized on the
+     * @return {Boolean}
+     */
+    getVisibility(fabricObject: InteractiveFabricObject, controlKey: string): boolean;
+    /**
+     * Sets controls visibility
+     * @param {Boolean} visibility for the object
+     * @return {Void}
+     */
+    setVisibility(visibility: boolean, name?: string, fabricObject?: InteractiveFabricObject): void;
+    positionHandler(dim: Point, finalMatrix: TMat2D, fabricObject: InteractiveFabricObject, currentControl: Control): Point;
+    /**
+     * Returns the coords for this control based on object values.
+     * @param {Number} objectAngle angle from the fabric object holding the control
+     * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if
+     *   isTouch is true)
+     * @param {Number} centerX x coordinate where the control center should be
+     * @param {Number} centerY y coordinate where the control center should be
+     * @param {boolean} isTouch true if touch corner, false if normal corner
+     */
+    calcCornerCoords(angle: TDegree, objectCornerSize: number, centerX: number, centerY: number, isTouch: boolean, fabricObject: InteractiveFabricObject): {
+        tl: Point;
+        tr: Point;
+        br: Point;
+        bl: Point;
+    };
+    /**
+     * Render function for the control.
+     * When this function runs the context is unscaled. unrotate. Just retina scaled.
+     * all the functions will have to translate to the point left,top before starting Drawing
+     * if they want to draw a control where the position is detected.
+     * left and top are the result of the positionHandler function
+     * @param {RenderingContext2D} ctx the context where the control will be drawn
+     * @param {Number} left position of the canvas where we are about to render the control.
+     * @param {Number} top position of the canvas where we are about to render the control.
+     * @param {Object} styleOverride
+     * @param {FabricObject} fabricObject the object where the control is about to be rendered
+     */
+    render(ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: ControlRenderingStyleOverride | undefined, fabricObject: InteractiveFabricObject): void;
+}
+//# sourceMappingURL=Control.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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};
+//# sourceMappingURL=Control.min.mjs.map

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

@@ -0,0 +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"}

package/dist/src/controls/Control.mjs

@@ -0,0 +1,286 @@
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { Intersection } from '../Intersection.mjs';
+import { Point } from '../Point.mjs';
+import { SCALE } from '../constants.mjs';
+import { multiplyTransformMatrixArray, createTranslateMatrix, createRotateMatrix, createScaleMatrix } from '../util/misc/matrix.mjs';
+import { renderSquareControl, renderCircleControl } from './controlRendering.mjs';
+
+class Control {
+  constructor(options) {
+    /**
+     * keep track of control visibility.
+     * mainly for backward compatibility.
+     * if you do not want to see a control, you can remove it
+     * from the control set.
+     * @type {Boolean}
+     * @default true
+     */
+    _defineProperty(this, "visible", true);
+    /**
+     * Name of the action that the control will likely execute.
+     * This is optional. FabricJS uses to identify what the user is doing for some
+     * extra optimizations. If you are writing a custom control and you want to know
+     * somewhere else in the code what is going on, you can use this string here.
+     * you can also provide a custom getActionName if your control run multiple actions
+     * depending on some external state.
+     * default to scale since is the most common, used on 4 corners by default
+     * @type {String}
+     * @default 'scale'
+     */
+    _defineProperty(this, "actionName", SCALE);
+    /**
+     * Drawing angle of the control.
+     * NOT used for now, but name marked as needed for internal logic
+     * example: to reuse the same drawing function for different rotated controls
+     * @type {Number}
+     * @default 0
+     */
+    _defineProperty(this, "angle", 0);
+    /**
+     * Relative position of the control. X
+     * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    _defineProperty(this, "x", 0);
+    /**
+     * Relative position of the control. Y
+     * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    _defineProperty(this, "y", 0);
+    /**
+     * Horizontal offset of the control from the defined position. In pixels
+     * Positive offset moves the control to the right, negative to the left.
+     * It used when you want to have position of control that does not scale with
+     * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on
+     * the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will
+     * stay 30 pixels no matter how the object is big. Another example is having 2
+     * controls in the corner, that stay in the same position when the object scale.
+     * of the bounding box.
+     * @type {Number}
+     * @default 0
+     */
+    _defineProperty(this, "offsetX", 0);
+    /**
+     * Vertical offset of the control from the defined position. In pixels
+     * Positive offset moves the control to the bottom, negative to the top.
+     * @type {Number}
+     * @default 0
+     */
+    _defineProperty(this, "offsetY", 0);
+    /**
+     * Sets the length of the control. If null, defaults to object's cornerSize.
+     * Expects both sizeX and sizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    _defineProperty(this, "sizeX", 0);
+    /**
+     * Sets the height of the control. If null, defaults to object's cornerSize.
+     * Expects both sizeX and sizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    _defineProperty(this, "sizeY", 0);
+    /**
+     * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.
+     * Expects both touchSizeX and touchSizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    _defineProperty(this, "touchSizeX", 0);
+    /**
+     * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.
+     * Expects both touchSizeX and touchSizeY to be set when set.
+     * @type {?Number}
+     * @default null
+     */
+    _defineProperty(this, "touchSizeY", 0);
+    /**
+     * Css cursor style to display when the control is hovered.
+     * if the method `cursorStyleHandler` is provided, this property is ignored.
+     * @type {String}
+     * @default 'crosshair'
+     */
+    _defineProperty(this, "cursorStyle", 'crosshair');
+    /**
+     * If controls has an offsetY or offsetX, draw a line that connects
+     * the control to the bounding box
+     * @type {Boolean}
+     * @default false
+     */
+    _defineProperty(this, "withConnection", false);
+    Object.assign(this, options);
+  }
+
+  /**
+   * The control actionHandler, provide one to handle action ( control being moved )
+   * @param {Event} eventData the native mouse event
+   * @param {Transform} transformData properties of the current transform
+   * @param {Number} x x position of the cursor
+   * @param {Number} y y position of the cursor
+   * @return {Boolean} true if the action/event modified the object
+   */
+
+  /**
+   * The control handler for mouse down, provide one to handle mouse down on control
+   * @param {Event} eventData the native mouse event
+   * @param {Transform} transformData properties of the current transform
+   * @param {Number} x x position of the cursor
+   * @param {Number} y y position of the cursor
+   * @return {Boolean} true if the action/event modified the object
+   */
+
+  /**
+   * The control mouseUpHandler, provide one to handle an effect on mouse up.
+   * @param {Event} eventData the native mouse event
+   * @param {Transform} transformData properties of the current transform
+   * @param {Number} x x position of the cursor
+   * @param {Number} y y position of the cursor
+   * @return {Boolean} true if the action/event modified the object
+   */
+
+  shouldActivate(controlKey, fabricObject, pointer, _ref) {
+    var _fabricObject$canvas;
+    let {
+      tl,
+      tr,
+      br,
+      bl
+    } = _ref;
+    // TODO: locking logic can be handled here instead of in the control handler logic
+    return ((_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.getActiveObject()) === fabricObject && fabricObject.isControlVisible(controlKey) && Intersection.isPointInPolygon(pointer, [tl, tr, br, bl]);
+  }
+
+  /**
+   * Returns control actionHandler
+   * @param {Event} eventData the native mouse event
+   * @param {FabricObject} fabricObject on which the control is displayed
+   * @param {Control} control control for which the action handler is being asked
+   * @return {Function} the action handler
+   */
+  getActionHandler(eventData, fabricObject, control) {
+    return this.actionHandler;
+  }
+
+  /**
+   * Returns control mouseDown handler
+   * @param {Event} eventData the native mouse event
+   * @param {FabricObject} fabricObject on which the control is displayed
+   * @param {Control} control control for which the action handler is being asked
+   * @return {Function} the action handler
+   */
+  getMouseDownHandler(eventData, fabricObject, control) {
+    return this.mouseDownHandler;
+  }
+
+  /**
+   * Returns control mouseUp handler.
+   * During actions the fabricObject or the control can be of different obj
+   * @param {Event} eventData the native mouse event
+   * @param {FabricObject} fabricObject on which the control is displayed
+   * @param {Control} control control for which the action handler is being asked
+   * @return {Function} the action handler
+   */
+  getMouseUpHandler(eventData, fabricObject, control) {
+    return this.mouseUpHandler;
+  }
+
+  /**
+   * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate
+   * function you can pass one in the constructor
+   * the cursorStyle property
+   * @param {Event} eventData the native mouse event
+   * @param {Control} control the current control ( likely this)
+   * @param {FabricObject} object on which the control is displayed
+   * @return {String}
+   */
+  cursorStyleHandler(eventData, control, fabricObject, coord) {
+    return control.cursorStyle;
+  }
+
+  /**
+   * Returns the action name. The basic implementation just return the actionName property.
+   * @param {Event} eventData the native mouse event
+   * @param {Control} control the current control ( likely this)
+   * @param {FabricObject} object on which the control is displayed
+   * @return {String}
+   */
+  getActionName(eventData, control, fabricObject) {
+    return control.actionName;
+  }
+
+  /**
+   * Returns controls visibility
+   * @param {FabricObject} object on which the control is displayed
+   * @param {String} controlKey key where the control is memorized on the
+   * @return {Boolean}
+   */
+  getVisibility(fabricObject, controlKey) {
+    var _fabricObject$_contro, _fabricObject$_contro2;
+    return (_fabricObject$_contro = (_fabricObject$_contro2 = fabricObject._controlsVisibility) === null || _fabricObject$_contro2 === void 0 ? void 0 : _fabricObject$_contro2[controlKey]) !== null && _fabricObject$_contro !== void 0 ? _fabricObject$_contro : this.visible;
+  }
+
+  /**
+   * Sets controls visibility
+   * @param {Boolean} visibility for the object
+   * @return {Void}
+   */
+  setVisibility(visibility, name, fabricObject) {
+    this.visible = visibility;
+  }
+  positionHandler(dim, finalMatrix, fabricObject, currentControl) {
+    return new Point(this.x * dim.x + this.offsetX, this.y * dim.y + this.offsetY).transform(finalMatrix);
+  }
+
+  /**
+   * Returns the coords for this control based on object values.
+   * @param {Number} objectAngle angle from the fabric object holding the control
+   * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if
+   *   isTouch is true)
+   * @param {Number} centerX x coordinate where the control center should be
+   * @param {Number} centerY y coordinate where the control center should be
+   * @param {boolean} isTouch true if touch corner, false if normal corner
+   */
+  calcCornerCoords(angle, objectCornerSize, centerX, centerY, isTouch, fabricObject) {
+    const t = multiplyTransformMatrixArray([createTranslateMatrix(centerX, centerY), createRotateMatrix({
+      angle
+    }), createScaleMatrix((isTouch ? this.touchSizeX : this.sizeX) || objectCornerSize, (isTouch ? this.touchSizeY : this.sizeY) || objectCornerSize)]);
+    return {
+      tl: new Point(-0.5, -0.5).transform(t),
+      tr: new Point(0.5, -0.5).transform(t),
+      br: new Point(0.5, 0.5).transform(t),
+      bl: new Point(-0.5, 0.5).transform(t)
+    };
+  }
+
+  /**
+   * Render function for the control.
+   * When this function runs the context is unscaled. unrotate. Just retina scaled.
+   * all the functions will have to translate to the point left,top before starting Drawing
+   * if they want to draw a control where the position is detected.
+   * left and top are the result of the positionHandler function
+   * @param {RenderingContext2D} ctx the context where the control will be drawn
+   * @param {Number} left position of the canvas where we are about to render the control.
+   * @param {Number} top position of the canvas where we are about to render the control.
+   * @param {Object} styleOverride
+   * @param {FabricObject} fabricObject the object where the control is about to be rendered
+   */
+  render(ctx, left, top, styleOverride, fabricObject) {
+    styleOverride = styleOverride || {};
+    switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {
+      case 'circle':
+        renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
+        break;
+      default:
+        renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);
+    }
+  }
+}
+
+export { Control };
+//# sourceMappingURL=Control.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,13 @@
+import type { TransformActionHandler } from '../EventTypeDefs';
+/**
+ * Action handler to change object's height
+ * 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
+ */
+export declare const changeObjectHeight: TransformActionHandler;
+export declare const changeHeight: TransformActionHandler<import("../EventTypeDefs").Transform>;
+//# sourceMappingURL=changeHeight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"changeHeight.d.ts","sourceRoot":"","sources":["../../../src/controls/changeHeight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAO/D;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,sBAiChC,CAAC;AAEF,eAAO,MAAM,YAAY,8DAGxB,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { TransformActionHandler } from '../EventTypeDefs';
+/**
+ * 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
+ */
+export declare const changeObjectWidth: TransformActionHandler;
+export declare const changeWidth: TransformActionHandler<import("../EventTypeDefs").Transform>;
+//# sourceMappingURL=changeWidth.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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};
+//# sourceMappingURL=changeWidth.min.mjs.map