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

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

{"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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"}