fabric/dist/src/canvas/SelectableCanvas.min.mjs.map

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

{"version":3,"file":"SelectableCanvas.min.mjs","sources":["../../../src/canvas/SelectableCanvas.ts"],"sourcesContent":["import { dragHandler } from '../controls/drag';\nimport { getActionFromCorner } from '../controls/util';\nimport { Point } from '../Point';\nimport { FabricObject } from '../shapes/Object/FabricObject';\nimport type {\n  CanvasEvents,\n  ModifierKey,\n  TOptionalModifierKey,\n  TPointerEvent,\n  Transform,\n} from '../EventTypeDefs';\nimport {\n  addTransformToObject,\n  saveObjectTransform,\n} from '../util/misc/objectTransforms';\nimport type { TCanvasSizeOptions } from './StaticCanvas';\nimport { StaticCanvas } from './StaticCanvas';\nimport { isCollection } from '../Collection';\nimport { isTransparent } from '../util/misc/isTransparent';\nimport type {\n  TMat2D,\n  TOriginX,\n  TOriginY,\n  TSize,\n  TSVGReviver,\n} from '../typedefs';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport { getPointer, isTouchEvent } from '../util/dom_event';\nimport type { IText } from '../shapes/IText/IText';\nimport type { BaseBrush } from '../brushes/BaseBrush';\nimport { pick } from '../util/misc/pick';\nimport { sendPointToPlane } from '../util/misc/planeChange';\nimport { cos, createCanvasElement, sin } from '../util';\nimport { CanvasDOMManager } from './DOMManagers/CanvasDOMManager';\nimport {\n  BOTTOM,\n  CENTER,\n  LEFT,\n  MODIFIED,\n  RESIZING,\n  RIGHT,\n  ROTATE,\n  SCALE,\n  SCALE_X,\n  SCALE_Y,\n  SKEW_X,\n  SKEW_Y,\n  TOP,\n} from '../constants';\nimport type { CanvasOptions } from './CanvasOptions';\nimport { canvasDefaults } from './CanvasOptions';\nimport { Intersection } from '../Intersection';\nimport { isActiveSelection } from '../util/typeAssertions';\n\n/**\n * Canvas class\n * @class Canvas\n * @extends StaticCanvas\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas}\n *\n * @fires object:modified at the end of a transform\n * @fires object:rotating while an object is being rotated from the control\n * @fires object:scaling while an object is being scaled by controls\n * @fires object:moving while an object is being dragged\n * @fires object:skewing while an object is being skewed from the controls\n *\n * @fires before:transform before a transform is is started\n * @fires before:selection:cleared\n * @fires selection:cleared\n * @fires selection:updated\n * @fires selection:created\n *\n * @fires path:created after a drawing operation ends and the path is added\n * @fires mouse:down\n * @fires mouse:move\n * @fires mouse:up\n * @fires mouse:down:before  on mouse down, before the inner fabric logic runs\n * @fires mouse:move:before on mouse move, before the inner fabric logic runs\n * @fires mouse:up:before on mouse up, before the inner fabric logic runs\n * @fires mouse:over\n * @fires mouse:out\n * @fires mouse:dblclick whenever a native dbl click event fires on the canvas.\n *\n * @fires dragover\n * @fires dragenter\n * @fires dragleave\n * @fires drag:enter object drag enter\n * @fires drag:leave object drag leave\n * @fires drop:before before drop event. Prepare for the drop event (same native event).\n * @fires drop\n * @fires drop:after after drop event. Run logic on canvas after event has been accepted/declined (same native event).\n * @example\n * let a: fabric.Object, b: fabric.Object;\n * let flag = false;\n * canvas.add(a, b);\n * a.on('drop:before', opt => {\n *  //  we want a to accept the drop even though it's below b in the stack\n *  flag = this.canDrop(opt.e);\n * });\n * b.canDrop = function(e) {\n *  !flag && this.draggableTextDelegate.canDrop(e);\n * }\n * b.on('dragover', opt => b.set('fill', opt.dropTarget === b ? 'pink' : 'black'));\n * a.on('drop', opt => {\n *  opt.e.defaultPrevented  //  drop occurred\n *  opt.didDrop             //  drop occurred on canvas\n *  opt.target              //  drop target\n *  opt.target !== a && a.set('text', 'I lost');\n * });\n * canvas.on('drop:after', opt => {\n *  //  inform user who won\n *  if(!opt.e.defaultPrevented) {\n *    // no winners\n *  }\n *  else if(!opt.didDrop) {\n *    //  my objects didn't win, some other lucky object\n *  }\n *  else {\n *    //  we have a winner it's opt.target!!\n *  }\n * })\n *\n * @fires after:render at the end of the render process, receives the context in the callback\n * @fires before:render at start the render process, receives the context in the callback\n *\n * @fires contextmenu:before\n * @fires contextmenu\n * @example\n * let handler;\n * targets.forEach(target => {\n *   target.on('contextmenu:before', opt => {\n *     //  decide which target should handle the event before canvas hijacks it\n *     if (someCaseHappens && opt.targets.includes(target)) {\n *       handler = target;\n *     }\n *   });\n *   target.on('contextmenu', opt => {\n *     //  do something fantastic\n *   });\n * });\n * canvas.on('contextmenu', opt => {\n *   if (!handler) {\n *     //  no one takes responsibility, it's always left to me\n *     //  let's show them how it's done!\n *   }\n * });\n *\n */\nexport class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>\n  extends StaticCanvas<EventSpec>\n  implements Omit<CanvasOptions, 'enablePointerEvents'>\n{\n  declare _objects: FabricObject[];\n\n  // transform config\n  declare uniformScaling: boolean;\n  declare uniScaleKey: TOptionalModifierKey;\n  declare centeredScaling: boolean;\n  declare centeredRotation: boolean;\n  declare centeredKey: TOptionalModifierKey;\n  declare altActionKey: TOptionalModifierKey;\n\n  // selection config\n  declare selection: boolean;\n  declare selectionKey: TOptionalModifierKey | ModifierKey[];\n  declare altSelectionKey: TOptionalModifierKey;\n  declare selectionColor: string;\n  declare selectionDashArray: number[];\n  declare selectionBorderColor: string;\n  declare selectionLineWidth: number;\n  declare selectionFullyContained: boolean;\n\n  // cursors\n  declare hoverCursor: CSSStyleDeclaration['cursor'];\n  declare moveCursor: CSSStyleDeclaration['cursor'];\n  declare defaultCursor: CSSStyleDeclaration['cursor'];\n  declare freeDrawingCursor: CSSStyleDeclaration['cursor'];\n  declare notAllowedCursor: CSSStyleDeclaration['cursor'];\n\n  declare containerClass: string;\n\n  // target find config\n  declare perPixelTargetFind: boolean;\n  declare targetFindTolerance: number;\n  declare skipTargetFind: boolean;\n\n  /**\n   * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.\n   * After mousedown, mousemove creates a shape,\n   * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.\n   * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing}\n   * @type Boolean\n   * @default\n   */\n  declare isDrawingMode: boolean;\n\n  declare preserveObjectStacking: boolean;\n\n  // event config\n  declare stopContextMenu: boolean;\n  declare fireRightClick: boolean;\n  declare fireMiddleClick: boolean;\n\n  /**\n   * Keep track of the subTargets for Mouse Events, ordered bottom up from innermost nested subTarget\n   * @type FabricObject[]\n   */\n  targets: FabricObject[] = [];\n\n  /**\n   * Keep track of the hovered target\n   * @type FabricObject | null\n   * @private\n   */\n  declare _hoveredTarget?: FabricObject;\n\n  /**\n   * hold the list of nested targets hovered\n   * @type FabricObject[]\n   * @private\n   */\n  _hoveredTargets: FabricObject[] = [];\n\n  /**\n   * hold the list of objects to render\n   * @type FabricObject[]\n   * @private\n   */\n  _objectsToRender?: FabricObject[];\n\n  /**\n   * hold a reference to a data structure that contains information\n   * on the current on going transform\n   * @type\n   * @private\n   */\n  _currentTransform: Transform | null = null;\n\n  /**\n   * hold a reference to a data structure used to track the selection\n   * box on canvas drag\n   * on the current on going transform\n   * x, y, deltaX and deltaY are in scene plane\n   * @type\n   * @private\n   */\n  protected _groupSelector: {\n    x: number;\n    y: number;\n    deltaX: number;\n    deltaY: number;\n  } | null = null;\n\n  /**\n   * internal flag used to understand if the context top requires a cleanup\n   * in case this is true, the contextTop will be cleared at the next render\n   * @type boolean\n   * @private\n   */\n  contextTopDirty = false;\n\n  /**\n   * During a mouse event we may need the pointer multiple times in multiple functions.\n   * _absolutePointer holds a reference to the pointer in fabricCanvas/design coordinates that is valid for the event\n   * lifespan. Every fabricJS mouse event create and delete the cache every time\n   * We do this because there are some HTML DOM inspection functions to get the actual pointer coordinates\n   * @type {Point}\n   */\n  protected declare _absolutePointer?: Point;\n\n  /**\n   * During a mouse event we may need the pointer multiple times in multiple functions.\n   * _pointer holds a reference to the pointer in html coordinates that is valid for the event\n   * lifespan. Every fabricJS mouse event create and delete the cache every time\n   * We do this because there are some HTML DOM inspection functions to get the actual pointer coordinates\n   * @type {Point}\n   */\n  protected declare _pointer?: Point;\n\n  /**\n   * During a mouse event we may need the target multiple times in multiple functions.\n   * _target holds a reference to the target that is valid for the event\n   * lifespan. Every fabricJS mouse event create and delete the cache every time\n   * @type {FabricObject}\n   */\n  protected declare _target?: FabricObject;\n\n  static ownDefaults = canvasDefaults;\n\n  static getDefaults(): Record<string, any> {\n    return { ...super.getDefaults(), ...SelectableCanvas.ownDefaults };\n  }\n\n  declare elements: CanvasDOMManager;\n  get upperCanvasEl() {\n    return this.elements.upper?.el;\n  }\n  get contextTop() {\n    return this.elements.upper?.ctx;\n  }\n  get wrapperEl() {\n    return this.elements.container;\n  }\n  private declare pixelFindCanvasEl: HTMLCanvasElement;\n  private declare pixelFindContext: CanvasRenderingContext2D;\n\n  protected declare _isCurrentlyDrawing: boolean;\n  declare freeDrawingBrush?: BaseBrush;\n  declare _activeObject?: FabricObject;\n\n  protected initElements(el?: string | HTMLCanvasElement) {\n    this.elements = new CanvasDOMManager(el, {\n      allowTouchScrolling: this.allowTouchScrolling,\n      containerClass: this.containerClass,\n    });\n    this._createCacheCanvas();\n  }\n\n  /**\n   * @private\n   * @param {FabricObject} obj Object that was added\n   */\n  _onObjectAdded(obj: FabricObject) {\n    this._objectsToRender = undefined;\n    super._onObjectAdded(obj);\n  }\n\n  /**\n   * @private\n   * @param {FabricObject} obj Object that was removed\n   */\n  _onObjectRemoved(obj: FabricObject) {\n    this._objectsToRender = undefined;\n    // removing active object should fire \"selection:cleared\" events\n    if (obj === this._activeObject) {\n      this.fire('before:selection:cleared', { deselected: [obj] });\n      this._discardActiveObject();\n      this.fire('selection:cleared', { deselected: [obj] });\n      obj.fire('deselected', {\n        target: obj,\n      });\n    }\n    if (obj === this._hoveredTarget) {\n      this._hoveredTarget = undefined;\n      this._hoveredTargets = [];\n    }\n    super._onObjectRemoved(obj);\n  }\n\n  _onStackOrderChanged() {\n    this._objectsToRender = undefined;\n    super._onStackOrderChanged();\n  }\n\n  /**\n   * Divides objects in two groups, one to render immediately\n   * and one to render as activeGroup.\n   * @return {Array} objects to render immediately and pushes the other in the activeGroup.\n   */\n  _chooseObjectsToRender(): FabricObject[] {\n    const activeObject = this._activeObject;\n    return !this.preserveObjectStacking && activeObject\n      ? this._objects\n          .filter((object) => !object.group && object !== activeObject)\n          .concat(activeObject)\n      : this._objects;\n  }\n\n  /**\n   * Renders both the top canvas and the secondary container canvas.\n   */\n  renderAll() {\n    this.cancelRequestedRender();\n    if (this.destroyed) {\n      return;\n    }\n    if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) {\n      this.clearContext(this.contextTop);\n      this.contextTopDirty = false;\n    }\n    if (this.hasLostContext) {\n      this.renderTopLayer(this.contextTop);\n      this.hasLostContext = false;\n    }\n    !this._objectsToRender &&\n      (this._objectsToRender = this._chooseObjectsToRender());\n    this.renderCanvas(this.getContext(), this._objectsToRender);\n  }\n\n  /**\n   * text selection is rendered by the active text instance during the rendering cycle\n   */\n  renderTopLayer(ctx: CanvasRenderingContext2D): void {\n    ctx.save();\n    if (this.isDrawingMode && this._isCurrentlyDrawing) {\n      this.freeDrawingBrush && this.freeDrawingBrush._render();\n      this.contextTopDirty = true;\n    }\n    // we render the top context - last object\n    if (this.selection && this._groupSelector) {\n      this._drawSelection(ctx);\n      this.contextTopDirty = true;\n    }\n    ctx.restore();\n  }\n\n  /**\n   * Method to render only the top canvas.\n   * Also used to render the group selection box.\n   * Does not render text selection.\n   */\n  renderTop() {\n    const ctx = this.contextTop;\n    this.clearContext(ctx);\n    this.renderTopLayer(ctx);\n    // todo: how do i know if the after:render is for the top or normal contex?\n    this.fire('after:render', { ctx });\n  }\n\n  /**\n   * Set the canvas tolerance value for pixel taret find.\n   * Use only integer numbers.\n   * @private\n   */\n  setTargetFindTolerance(value: number) {\n    value = Math.round(value);\n    this.targetFindTolerance = value;\n    const retina = this.getRetinaScaling();\n    const size = Math.ceil((value * 2 + 1) * retina);\n    this.pixelFindCanvasEl.width = this.pixelFindCanvasEl.height = size;\n    this.pixelFindContext.scale(retina, retina);\n  }\n\n  /**\n   * Returns true if object is transparent at a certain location\n   * Clarification: this is `is target transparent at location X or are controls there`\n   * @TODO this seems dumb that we treat controls with transparency. we can find controls\n   * programmatically without painting them, the cache canvas optimization is always valid\n   * @param {FabricObject} target Object to check\n   * @param {Number} x Left coordinate in viewport space\n   * @param {Number} y Top coordinate in viewport space\n   * @return {Boolean}\n   */\n  isTargetTransparent(target: FabricObject, x: number, y: number): boolean {\n    const tolerance = this.targetFindTolerance;\n    const ctx = this.pixelFindContext;\n    this.clearContext(ctx);\n    ctx.save();\n    ctx.translate(-x + tolerance, -y + tolerance);\n    ctx.transform(...this.viewportTransform);\n    const selectionBgc = target.selectionBackgroundColor;\n    target.selectionBackgroundColor = '';\n    target.render(ctx);\n    target.selectionBackgroundColor = selectionBgc;\n    ctx.restore();\n    // our canvas is square, and made around tolerance.\n    // so tolerance in this case also represent the center of the canvas.\n    const enhancedTolerance = Math.round(tolerance * this.getRetinaScaling());\n    return isTransparent(\n      ctx,\n      enhancedTolerance,\n      enhancedTolerance,\n      enhancedTolerance,\n    );\n  }\n\n  /**\n   * takes an event and determines if selection key has been pressed\n   * @private\n   * @param {TPointerEvent} e Event object\n   */\n  _isSelectionKeyPressed(e: TPointerEvent): boolean {\n    const sKey = this.selectionKey;\n    if (!sKey) {\n      return false;\n    }\n    if (Array.isArray(sKey)) {\n      return !!sKey.find((key) => !!key && e[key] === true);\n    } else {\n      return e[sKey];\n    }\n  }\n\n  /**\n   * @private\n   * @param {TPointerEvent} e Event object\n   * @param {FabricObject} target\n   */\n  _shouldClearSelection(\n    e: TPointerEvent,\n    target?: FabricObject,\n  ): target is undefined {\n    const activeObjects = this.getActiveObjects(),\n      activeObject = this._activeObject;\n\n    return !!(\n      !target ||\n      (target &&\n        activeObject &&\n        activeObjects.length > 1 &&\n        activeObjects.indexOf(target) === -1 &&\n        activeObject !== target &&\n        !this._isSelectionKeyPressed(e)) ||\n      (target && !target.evented) ||\n      (target && !target.selectable && activeObject && activeObject !== target)\n    );\n  }\n\n  /**\n   * This method will take in consideration a modifier key pressed and the control we are\n   * about to drag, and try to guess the anchor point ( origin ) of the transormation.\n   * This should be really in the realm of controls, and we should remove specific code for legacy\n   * embedded actions.\n   * @TODO this probably deserve discussion/rediscovery and change/refactor\n   * @private\n   * @deprecated\n   * @param {FabricObject} target\n   * @param {string} action\n   * @param {boolean} altKey\n   * @returns {boolean} true if the transformation should be centered\n   */\n  private _shouldCenterTransform(\n    target: FabricObject,\n    action: string,\n    modifierKeyPressed: boolean,\n  ) {\n    if (!target) {\n      return;\n    }\n\n    let centerTransform;\n\n    if (\n      action === SCALE ||\n      action === SCALE_X ||\n      action === SCALE_Y ||\n      action === RESIZING\n    ) {\n      centerTransform = this.centeredScaling || target.centeredScaling;\n    } else if (action === ROTATE) {\n      centerTransform = this.centeredRotation || target.centeredRotation;\n    }\n\n    return centerTransform ? !modifierKeyPressed : modifierKeyPressed;\n  }\n\n  /**\n   * Given the control clicked, determine the origin of the transform.\n   * This is bad because controls can totally have custom names\n   * should disappear before release 4.0\n   * @private\n   * @deprecated\n   */\n  _getOriginFromCorner(\n    target: FabricObject,\n    controlName: string,\n  ): { x: TOriginX; y: TOriginY } {\n    const origin = {\n      x: target.originX,\n      y: target.originY,\n    };\n\n    if (!controlName) {\n      return origin;\n    }\n\n    // is a left control ?\n    if (['ml', 'tl', 'bl'].includes(controlName)) {\n      origin.x = RIGHT;\n      // is a right control ?\n    } else if (['mr', 'tr', 'br'].includes(controlName)) {\n      origin.x = LEFT;\n    }\n    // is a top control ?\n    if (['tl', 'mt', 'tr'].includes(controlName)) {\n      origin.y = BOTTOM;\n      // is a bottom control ?\n    } else if (['bl', 'mb', 'br'].includes(controlName)) {\n      origin.y = TOP;\n    }\n    return origin;\n  }\n\n  /**\n   * @private\n   * @param {Event} e Event object\n   * @param {FabricObject} target\n   * @param {boolean} [alreadySelected] pass true to setup the active control\n   */\n  _setupCurrentTransform(\n    e: TPointerEvent,\n    target: FabricObject,\n    alreadySelected: boolean,\n  ): void {\n    const pointer = target.group\n      ? // transform pointer to target's containing coordinate plane\n        sendPointToPlane(\n          this.getScenePoint(e),\n          undefined,\n          target.group.calcTransformMatrix(),\n        )\n      : this.getScenePoint(e);\n    const { key: corner = '', control } = target.getActiveControl() || {},\n      actionHandler =\n        alreadySelected && control\n          ? control.getActionHandler(e, target, control)?.bind(control)\n          : dragHandler,\n      action = getActionFromCorner(alreadySelected, corner, e, target),\n      altKey = e[this.centeredKey as ModifierKey],\n      origin = this._shouldCenterTransform(target, action, altKey)\n        ? ({ x: CENTER, y: CENTER } as const)\n        : this._getOriginFromCorner(target, corner),\n      /**\n       * relative to target's containing coordinate plane\n       * both agree on every point\n       **/\n      transform: Transform = {\n        target: target,\n        action,\n        actionHandler,\n        actionPerformed: false,\n        corner,\n        scaleX: target.scaleX,\n        scaleY: target.scaleY,\n        skewX: target.skewX,\n        skewY: target.skewY,\n        offsetX: pointer.x - target.left,\n        offsetY: pointer.y - target.top,\n        originX: origin.x,\n        originY: origin.y,\n        ex: pointer.x,\n        ey: pointer.y,\n        lastX: pointer.x,\n        lastY: pointer.y,\n        theta: degreesToRadians(target.angle),\n        width: target.width,\n        height: target.height,\n        shiftKey: e.shiftKey,\n        altKey,\n        original: {\n          ...saveObjectTransform(target),\n          originX: origin.x,\n          originY: origin.y,\n        },\n      };\n\n    this._currentTransform = transform;\n\n    this.fire('before:transform', {\n      e,\n      transform,\n    });\n  }\n\n  /**\n   * Set the cursor type of the canvas element\n   * @param {String} value Cursor type of the canvas element.\n   * @see http://www.w3.org/TR/css3-ui/#cursor\n   */\n  setCursor(value: CSSStyleDeclaration['cursor']): void {\n    this.upperCanvasEl.style.cursor = value;\n  }\n\n  /**\n   * @private\n   * @param {CanvasRenderingContext2D} ctx to draw the selection on\n   */\n  _drawSelection(ctx: CanvasRenderingContext2D): void {\n    const { x, y, deltaX, deltaY } = this._groupSelector!,\n      start = new Point(x, y).transform(this.viewportTransform),\n      extent = new Point(x + deltaX, y + deltaY).transform(\n        this.viewportTransform,\n      ),\n      strokeOffset = this.selectionLineWidth / 2;\n    let minX = Math.min(start.x, extent.x),\n      minY = Math.min(start.y, extent.y),\n      maxX = Math.max(start.x, extent.x),\n      maxY = Math.max(start.y, extent.y);\n\n    if (this.selectionColor) {\n      ctx.fillStyle = this.selectionColor;\n      ctx.fillRect(minX, minY, maxX - minX, maxY - minY);\n    }\n\n    if (!this.selectionLineWidth || !this.selectionBorderColor) {\n      return;\n    }\n    ctx.lineWidth = this.selectionLineWidth;\n    ctx.strokeStyle = this.selectionBorderColor;\n\n    minX += strokeOffset;\n    minY += strokeOffset;\n    maxX -= strokeOffset;\n    maxY -= strokeOffset;\n    // selection border\n    // @TODO: is _setLineDash still necessary on modern canvas?\n    FabricObject.prototype._setLineDash.call(\n      this,\n      ctx,\n      this.selectionDashArray,\n    );\n    ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);\n  }\n\n  /**\n   * Method that determines what object we are clicking on\n   * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target\n   * or the outside part of the corner.\n   * @param {Event} e mouse event\n   * @return {FabricObject | null} the target found\n   */\n  findTarget(e: TPointerEvent): FabricObject | undefined {\n    if (this.skipTargetFind) {\n      return undefined;\n    }\n\n    const pointer = this.getViewportPoint(e),\n      activeObject = this._activeObject,\n      aObjects = this.getActiveObjects();\n\n    this.targets = [];\n\n    if (activeObject && aObjects.length >= 1) {\n      if (activeObject.findControl(pointer, isTouchEvent(e))) {\n        // if we hit the corner of the active object, let's return that.\n        return activeObject;\n      } else if (\n        aObjects.length > 1 &&\n        // check pointer is over active selection and possibly perform `subTargetCheck`\n        this.searchPossibleTargets([activeObject], pointer)\n      ) {\n        // active selection does not select sub targets like normal groups\n        return activeObject;\n      } else if (\n        activeObject === this.searchPossibleTargets([activeObject], pointer)\n      ) {\n        // active object is not an active selection\n        if (!this.preserveObjectStacking) {\n          return activeObject;\n        } else {\n          const subTargets = this.targets;\n          this.targets = [];\n          const target = this.searchPossibleTargets(this._objects, pointer);\n          if (\n            e[this.altSelectionKey as ModifierKey] &&\n            target &&\n            target !== activeObject\n          ) {\n            // alt selection: select active object even though it is not the top most target\n            // restore targets\n            this.targets = subTargets;\n            return activeObject;\n          }\n          return target;\n        }\n      }\n    }\n\n    return this.searchPossibleTargets(this._objects, pointer);\n  }\n\n  /**\n   * Checks if the point is inside the object selection area including padding\n   * @param {FabricObject} obj Object to test against\n   * @param {Object} [pointer] point in scene coordinates\n   * @return {Boolean} true if point is contained within an area of given object\n   * @private\n   */\n  private _pointIsInObjectSelectionArea(obj: FabricObject, point: Point) {\n    // getCoords will already take care of group de-nesting\n    let coords = obj.getCoords();\n    const viewportZoom = this.getZoom();\n    const padding = obj.padding / viewportZoom;\n    if (padding) {\n      const [tl, tr, br, bl] = coords;\n      // what is the angle of the object?\n      // we could use getTotalAngle, but is way easier to look at it\n      // from how coords are oriented, since if something went wrong\n      // at least we are consistent.\n      const angleRadians = Math.atan2(tr.y - tl.y, tr.x - tl.x),\n        cosP = cos(angleRadians) * padding,\n        sinP = sin(angleRadians) * padding,\n        cosPSinP = cosP + sinP,\n        cosPMinusSinP = cosP - sinP;\n\n      coords = [\n        new Point(tl.x - cosPMinusSinP, tl.y - cosPSinP),\n        new Point(tr.x + cosPSinP, tr.y - cosPMinusSinP),\n        new Point(br.x + cosPMinusSinP, br.y + cosPSinP),\n        new Point(bl.x - cosPSinP, bl.y + cosPMinusSinP),\n      ];\n      // in case of padding we calculate the new coords on the fly.\n      // otherwise we have to maintain 2 sets of coordinates for everything.\n      // we can reiterate on storing them.\n      // if this is slow, for now the semplification is large and doesn't impact\n      // rendering.\n      // the idea behind this is that outside target check we don't need ot know\n      // where those coords are\n    }\n    return Intersection.isPointInPolygon(point, coords);\n  }\n\n  /**\n   * Checks point is inside the object selection condition. Either area with padding\n   * or over pixels if perPixelTargetFind is enabled\n   * @param {FabricObject} obj Object to test against\n   * @param {Object} [pointer] point from viewport.\n   * @return {Boolean} true if point is contained within an area of given object\n   * @private\n   */\n  _checkTarget(obj: FabricObject, pointer: Point): boolean {\n    if (\n      obj &&\n      obj.visible &&\n      obj.evented &&\n      this._pointIsInObjectSelectionArea(\n        obj,\n        sendPointToPlane(pointer, undefined, this.viewportTransform),\n      )\n    ) {\n      if (\n        (this.perPixelTargetFind || obj.perPixelTargetFind) &&\n        !(obj as unknown as IText).isEditing\n      ) {\n        if (!this.isTargetTransparent(obj, pointer.x, pointer.y)) {\n          return true;\n        }\n      } else {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Internal Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted\n   * @param {Array} [objects] objects array to look into\n   * @param {Object} [pointer] x,y object of point coordinates we want to check.\n   * @return {FabricObject} **top most object from given `objects`** that contains pointer\n   * @private\n   */\n  _searchPossibleTargets(\n    objects: FabricObject[],\n    pointer: Point,\n  ): FabricObject | undefined {\n    // Cache all targets where their bounding box contains point.\n    let i = objects.length;\n    // Do not check for currently grouped objects, since we check the parent group itself.\n    // until we call this function specifically to search inside the activeGroup\n    while (i--) {\n      const target = objects[i];\n      if (this._checkTarget(target, pointer)) {\n        if (isCollection(target) && target.subTargetCheck) {\n          const subTarget = this._searchPossibleTargets(\n            target._objects as FabricObject[],\n            pointer,\n          );\n          subTarget && this.targets.push(subTarget);\n        }\n        return target;\n      }\n    }\n  }\n\n  /**\n   * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted\n   * @see {@link _searchPossibleTargets}\n   * @param {FabricObject[]} [objects] objects array to look into\n   * @param {Point} [pointer] coordinates from viewport to check.\n   * @return {FabricObject} **top most object on screen** that contains pointer\n   */\n  searchPossibleTargets(\n    objects: FabricObject[],\n    pointer: Point,\n  ): FabricObject | undefined {\n    const target = this._searchPossibleTargets(objects, pointer);\n\n    // if we found something in this.targets, and the group is interactive, return the innermost subTarget\n    // that is still interactive\n    // TODO: reverify why interactive. the target should be returned always, but selected only\n    // if interactive.\n    if (\n      target &&\n      isCollection(target) &&\n      target.interactive &&\n      this.targets[0]\n    ) {\n      /** targets[0] is the innermost nested target, but it could be inside non interactive groups and so not a selection target */\n      const targets = this.targets;\n      for (let i = targets.length - 1; i > 0; i--) {\n        const t = targets[i];\n        if (!(isCollection(t) && t.interactive)) {\n          // one of the subtargets was not interactive. that is the last subtarget we can return.\n          // we can't dig more deep;\n          return t;\n        }\n      }\n      return targets[0];\n    }\n\n    return target;\n  }\n\n  /**\n   * @returns point existing in the same plane as the {@link HTMLCanvasElement},\n   * `(0, 0)` being the top left corner of the {@link HTMLCanvasElement}.\n   * This means that changes to the {@link viewportTransform} do not change the values of the point\n   * and it remains unchanged from the viewer's perspective.\n   *\n   * @example\n   * const scenePoint = sendPointToPlane(\n   *  this.getViewportPoint(e),\n   *  undefined,\n   *  canvas.viewportTransform\n   * );\n   *\n   */\n  getViewportPoint(e: TPointerEvent) {\n    if (this._pointer) {\n      return this._pointer;\n    }\n    return this.getPointer(e, true);\n  }\n\n  /**\n   * @returns point existing in the scene (the same plane as the plane {@link FabricObject#getCenterPoint} exists in).\n   * This means that changes to the {@link viewportTransform} do not change the values of the point,\n   * however, from the viewer's perspective, the point is changed.\n   *\n   * @example\n   * const viewportPoint = sendPointToPlane(\n   *  this.getScenePoint(e),\n   *  canvas.viewportTransform\n   * );\n   *\n   */\n  getScenePoint(e: TPointerEvent) {\n    if (this._absolutePointer) {\n      return this._absolutePointer;\n    }\n    return this.getPointer(e);\n  }\n\n  /**\n   * Returns pointer relative to canvas.\n   *\n   * @deprecated This method is deprecated since v6 to protect you from misuse.\n   * Use {@link getViewportPoint} or {@link getScenePoint} instead.\n   *\n   * @param {Event} e\n   * @param {Boolean} [fromViewport] whether to return the point from the viewport or in the scene\n   * @return {Point}\n   */\n  getPointer(e: TPointerEvent, fromViewport = false): Point {\n    const upperCanvasEl = this.upperCanvasEl,\n      bounds = upperCanvasEl.getBoundingClientRect();\n    let pointer = getPointer(e),\n      boundsWidth = bounds.width || 0,\n      boundsHeight = bounds.height || 0;\n\n    if (!boundsWidth || !boundsHeight) {\n      if (TOP in bounds && BOTTOM in bounds) {\n        boundsHeight = Math.abs(bounds.top - bounds.bottom);\n      }\n      if (RIGHT in bounds && LEFT in bounds) {\n        boundsWidth = Math.abs(bounds.right - bounds.left);\n      }\n    }\n\n    this.calcOffset();\n    pointer.x = pointer.x - this._offset.left;\n    pointer.y = pointer.y - this._offset.top;\n    if (!fromViewport) {\n      pointer = sendPointToPlane(pointer, undefined, this.viewportTransform);\n    }\n\n    const retinaScaling = this.getRetinaScaling();\n    if (retinaScaling !== 1) {\n      pointer.x /= retinaScaling;\n      pointer.y /= retinaScaling;\n    }\n\n    // If bounds are not available (i.e. not visible), do not apply scale.\n    const cssScale =\n      boundsWidth === 0 || boundsHeight === 0\n        ? new Point(1, 1)\n        : new Point(\n            upperCanvasEl.width / boundsWidth,\n            upperCanvasEl.height / boundsHeight,\n          );\n\n    return pointer.multiply(cssScale);\n  }\n\n  /**\n   * Internal use only\n   * @protected\n   */\n  protected _setDimensionsImpl(\n    dimensions: TSize,\n    options?: TCanvasSizeOptions,\n  ) {\n    // @ts-expect-error this method exists in the subclass - should be moved or declared as abstract\n    this._resetTransformEventData();\n    super._setDimensionsImpl(dimensions, options);\n    if (this._isCurrentlyDrawing) {\n      this.freeDrawingBrush &&\n        this.freeDrawingBrush._setBrushStyles(this.contextTop);\n    }\n  }\n\n  protected _createCacheCanvas() {\n    this.pixelFindCanvasEl = createCanvasElement();\n    this.pixelFindContext = this.pixelFindCanvasEl.getContext('2d', {\n      willReadFrequently: true,\n    })!;\n    this.setTargetFindTolerance(this.targetFindTolerance);\n  }\n\n  /**\n   * Returns context of top canvas where interactions are drawn\n   * @returns {CanvasRenderingContext2D}\n   */\n  getTopContext(): CanvasRenderingContext2D {\n    return this.elements.upper.ctx;\n  }\n\n  /**\n   * Returns context of canvas where object selection is drawn\n   * @alias\n   * @return {CanvasRenderingContext2D}\n   */\n  getSelectionContext(): CanvasRenderingContext2D {\n    return this.elements.upper.ctx;\n  }\n\n  /**\n   * Returns &lt;canvas> element on which object selection is drawn\n   * @return {HTMLCanvasElement}\n   */\n  getSelectionElement(): HTMLCanvasElement {\n    return this.elements.upper.el;\n  }\n\n  /**\n   * Returns currently active object\n   * @return {FabricObject | null} active object\n   */\n  getActiveObject(): FabricObject | undefined {\n    return this._activeObject;\n  }\n\n  /**\n   * Returns an array with the current selected objects\n   * @return {FabricObject[]} active objects array\n   */\n  getActiveObjects(): FabricObject[] {\n    const active = this._activeObject;\n    return isActiveSelection(active)\n      ? active.getObjects()\n      : active\n        ? [active]\n        : [];\n  }\n\n  /**\n   * @private\n   * Compares the old activeObject with the current one and fires correct events\n   * @param {FabricObject[]} oldObjects old activeObject\n   * @param {TPointerEvent} e mouse event triggering the selection events\n   */\n  _fireSelectionEvents(oldObjects: FabricObject[], e?: TPointerEvent) {\n    let somethingChanged = false,\n      invalidate = false;\n    const objects = this.getActiveObjects(),\n      added: FabricObject[] = [],\n      removed: FabricObject[] = [];\n\n    oldObjects.forEach((target) => {\n      if (!objects.includes(target)) {\n        somethingChanged = true;\n        target.fire('deselected', {\n          e,\n          target,\n        });\n        removed.push(target);\n      }\n    });\n\n    objects.forEach((target) => {\n      if (!oldObjects.includes(target)) {\n        somethingChanged = true;\n        target.fire('selected', {\n          e,\n          target,\n        });\n        added.push(target);\n      }\n    });\n\n    if (oldObjects.length > 0 && objects.length > 0) {\n      invalidate = true;\n      somethingChanged &&\n        this.fire('selection:updated', {\n          e,\n          selected: added,\n          deselected: removed,\n        });\n    } else if (objects.length > 0) {\n      invalidate = true;\n      this.fire('selection:created', {\n        e,\n        selected: added,\n      });\n    } else if (oldObjects.length > 0) {\n      invalidate = true;\n      this.fire('selection:cleared', {\n        e,\n        deselected: removed,\n      });\n    }\n    invalidate && (this._objectsToRender = undefined);\n  }\n\n  /**\n   * Sets given object as the only active object on canvas\n   * @param {FabricObject} object Object to set as an active one\n   * @param {TPointerEvent} [e] Event (passed along when firing \"object:selected\")\n   * @return {Boolean} true if the object has been selected\n   */\n  setActiveObject(object: FabricObject, e?: TPointerEvent) {\n    // we can't inline this, since _setActiveObject will change what getActiveObjects returns\n    const currentActives = this.getActiveObjects();\n    const selected = this._setActiveObject(object, e);\n    this._fireSelectionEvents(currentActives, e);\n    return selected;\n  }\n\n  /**\n   * This is supposed to be equivalent to setActiveObject but without firing\n   * any event. There is commitment to have this stay this way.\n   * This is the functional part of setActiveObject.\n   * @param {Object} object to set as active\n   * @param {Event} [e] Event (passed along when firing \"object:selected\")\n   * @return {Boolean} true if the object has been selected\n   */\n  _setActiveObject(object: FabricObject, e?: TPointerEvent) {\n    const prevActiveObject = this._activeObject;\n    if (prevActiveObject === object) {\n      return false;\n    }\n    // after calling this._discardActiveObject, this,_activeObject could be undefined\n    if (!this._discardActiveObject(e, object) && this._activeObject) {\n      // refused to deselect\n      return false;\n    }\n    if (object.onSelect({ e })) {\n      return false;\n    }\n\n    this._activeObject = object;\n\n    if (isActiveSelection(object) && prevActiveObject !== object) {\n      object.set('canvas', this);\n    }\n    object.setCoords();\n\n    return true;\n  }\n\n  /**\n   * This is supposed to be equivalent to discardActiveObject but without firing\n   * any selection events ( can still fire object transformation events ). There is commitment to have this stay this way.\n   * This is the functional part of discardActiveObject.\n   * @param {Event} [e] Event (passed along when firing \"object:deselected\")\n   * @param {Object} object the next object to set as active, reason why we are discarding this\n   * @return {Boolean} true if the active object has been discarded\n   */\n  _discardActiveObject(\n    e?: TPointerEvent,\n    object?: FabricObject,\n  ): this is { _activeObject: undefined } {\n    const obj = this._activeObject;\n    if (obj) {\n      // onDeselect return TRUE to cancel selection;\n      if (obj.onDeselect({ e, object })) {\n        return false;\n      }\n      if (this._currentTransform && this._currentTransform.target === obj) {\n        this.endCurrentTransform(e);\n      }\n      if (isActiveSelection(obj) && obj === this._hoveredTarget) {\n        this._hoveredTarget = undefined;\n      }\n      this._activeObject = undefined;\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * Discards currently active object and fire events. If the function is called by fabric\n   * as a consequence of a mouse event, the event is passed as a parameter and\n   * sent to the fire function for the custom events. When used as a method the\n   * e param does not have any application.\n   * @param {event} e\n   * @return {Boolean} true if the active object has been discarded\n   */\n  discardActiveObject(e?: TPointerEvent): this is { _activeObject: undefined } {\n    const currentActives = this.getActiveObjects(),\n      activeObject = this.getActiveObject();\n    if (currentActives.length) {\n      this.fire('before:selection:cleared', {\n        e,\n        deselected: [activeObject!],\n      });\n    }\n    const discarded = this._discardActiveObject(e);\n    this._fireSelectionEvents(currentActives, e);\n    return discarded;\n  }\n\n  /**\n   * End the current transform.\n   * You don't usually need to call this method unless you are interrupting a user initiated transform\n   * because of some other event ( a press of key combination, or something that block the user UX )\n   * @param {Event} [e] send the mouse event that generate the finalize down, so it can be used in the event\n   */\n  endCurrentTransform(e?: TPointerEvent) {\n    const transform = this._currentTransform;\n    this._finalizeCurrentTransform(e);\n    if (transform && transform.target) {\n      // this could probably go inside _finalizeCurrentTransform\n      transform.target.isMoving = false;\n    }\n    this._currentTransform = null;\n  }\n\n  /**\n   * @private\n   * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event\n   */\n  _finalizeCurrentTransform(e?: TPointerEvent) {\n    const transform = this._currentTransform!,\n      target = transform.target,\n      options = {\n        e,\n        target,\n        transform,\n        action: transform.action,\n      };\n\n    if (target._scaling) {\n      target._scaling = false;\n    }\n\n    target.setCoords();\n\n    if (transform.actionPerformed) {\n      this.fire('object:modified', options);\n      target.fire(MODIFIED, options);\n    }\n  }\n\n  /**\n   * Sets viewport transformation of this canvas instance\n   * @param {Array} vpt a Canvas 2D API transform matrix\n   */\n  setViewportTransform(vpt: TMat2D) {\n    super.setViewportTransform(vpt);\n    const activeObject = this._activeObject;\n    if (activeObject) {\n      activeObject.setCoords();\n    }\n  }\n\n  /**\n   * @override clears active selection ref and interactive canvas elements and contexts\n   */\n  destroy() {\n    // dispose of active selection\n    const activeObject = this._activeObject;\n    if (isActiveSelection(activeObject)) {\n      activeObject.removeAll();\n      activeObject.dispose();\n    }\n\n    delete this._activeObject;\n\n    super.destroy();\n\n    // free resources\n\n    // pixel find canvas\n    // @ts-expect-error disposing\n    this.pixelFindContext = null;\n    // @ts-expect-error disposing\n    this.pixelFindCanvasEl = undefined;\n  }\n\n  /**\n   * Clears all contexts (background, main, top) of an instance\n   */\n  clear() {\n    // discard active object and fire events\n    this.discardActiveObject();\n    // make sure we clear the active object in case it refused to be discarded\n    this._activeObject = undefined;\n    this.clearContext(this.contextTop);\n    super.clear();\n  }\n\n  /**\n   * Draws objects' controls (borders/controls)\n   * @param {CanvasRenderingContext2D} ctx Context to render controls on\n   */\n  drawControls(ctx: CanvasRenderingContext2D) {\n    const activeObject = this._activeObject;\n\n    if (activeObject) {\n      activeObject._renderControls(ctx);\n    }\n  }\n\n  /**\n   * @private\n   */\n  protected _toObject(\n    instance: FabricObject,\n    methodName: 'toObject' | 'toDatalessObject',\n    propertiesToInclude: string[],\n  ): Record<string, any> {\n    // If the object is part of the current selection group, it should\n    // be transformed appropriately\n    // i.e. it should be serialised as it would appear if the selection group\n    // were to be destroyed.\n    const originalProperties = this._realizeGroupTransformOnObject(instance),\n      object = super._toObject(instance, methodName, propertiesToInclude);\n    //Undo the damage we did by changing all of its properties\n    instance.set(originalProperties);\n    return object;\n  }\n\n  /**\n   * Realizes an object's group transformation on it\n   * @private\n   * @param {FabricObject} [instance] the object to transform (gets mutated)\n   * @returns the original values of instance which were changed\n   */\n  private _realizeGroupTransformOnObject(\n    instance: FabricObject,\n  ): Partial<typeof instance> {\n    const { group } = instance;\n    if (group && isActiveSelection(group) && this._activeObject === group) {\n      const layoutProps = [\n        'angle',\n        'flipX',\n        'flipY',\n        LEFT,\n        SCALE_X,\n        SCALE_Y,\n        SKEW_X,\n        SKEW_Y,\n        TOP,\n      ] as (keyof typeof instance)[];\n      const originalValues = pick<typeof instance>(instance, layoutProps);\n      addTransformToObject(instance, group.calcOwnMatrix());\n      return originalValues;\n    } else {\n      return {};\n    }\n  }\n\n  /**\n   * @private\n   */\n  _setSVGObject(\n    markup: string[],\n    instance: FabricObject,\n    reviver?: TSVGReviver,\n  ) {\n    // If the object is in a selection group, simulate what would happen to that\n    // object when the group is deselected\n    const originalProperties = this._realizeGroupTransformOnObject(instance);\n    super._setSVGObject(markup, instance, reviver);\n    instance.set(originalProperties);\n  }\n}\n"],"names":["SelectableCanvas","StaticCanvas","constructor","super","arguments","_defineProperty","this","getDefaults","_objectSpread","ownDefaults","upperCanvasEl","_this$elements$upper","elements","upper","el","contextTop","_this$elements$upper2","ctx","wrapperEl","container","initElements","CanvasDOMManager","allowTouchScrolling","containerClass","_createCacheCanvas","_onObjectAdded","obj","_objectsToRender","undefined","_onObjectRemoved","_activeObject","fire","deselected","_discardActiveObject","target","_hoveredTarget","_hoveredTargets","_onStackOrderChanged","_chooseObjectsToRender","activeObject","preserveObjectStacking","_objects","filter","object","group","concat","renderAll","cancelRequestedRender","destroyed","contextTopDirty","_groupSelector","isDrawingMode","clearContext","hasLostContext","renderTopLayer","renderCanvas","getContext","save","_isCurrentlyDrawing","freeDrawingBrush","_render","selection","_drawSelection","restore","renderTop","setTargetFindTolerance","value","Math","round","targetFindTolerance","retina","getRetinaScaling","size","ceil","pixelFindCanvasEl","width","height","pixelFindContext","scale","isTargetTransparent","x","y","tolerance","translate","transform","viewportTransform","selectionBgc","selectionBackgroundColor","render","enhancedTolerance","isTransparent","_isSelectionKeyPressed","e","sKey","selectionKey","Array","isArray","find","key","_shouldClearSelection","activeObjects","getActiveObjects","length","indexOf","evented","selectable","_shouldCenterTransform","action","modifierKeyPressed","centerTransform","SCALE","SCALE_X","SCALE_Y","RESIZING","centeredScaling","ROTATE","centeredRotation","_getOriginFromCorner","controlName","origin","originX","originY","includes","RIGHT","LEFT","BOTTOM","TOP","_setupCurrentTransform","alreadySelected","_control$getActionHan","pointer","sendPointToPlane","getScenePoint","calcTransformMatrix","corner","control","getActiveControl","actionHandler","getActionHandler","bind","dragHandler","getActionFromCorner","altKey","centeredKey","CENTER","actionPerformed","scaleX","scaleY","skewX","skewY","offsetX","left","offsetY","top","ex","ey","lastX","lastY","theta","degreesToRadians","angle","shiftKey","original","saveObjectTransform","_currentTransform","setCursor","style","cursor","deltaX","deltaY","start","Point","extent","strokeOffset","selectionLineWidth","minX","min","minY","maxX","max","maxY","selectionColor","fillStyle","fillRect","selectionBorderColor","lineWidth","strokeStyle","FabricObject","prototype","_setLineDash","call","selectionDashArray","strokeRect","findTarget","skipTargetFind","getViewportPoint","aObjects","targets","findControl","isTouchEvent","searchPossibleTargets","subTargets","altSelectionKey","_pointIsInObjectSelectionArea","point","coords","getCoords","viewportZoom","getZoom","padding","tl","tr","br","bl","angleRadians","atan2","cosP","cos","sinP","sin","cosPSinP","cosPMinusSinP","Intersection","isPointInPolygon","_checkTarget","visible","perPixelTargetFind","isEditing","_searchPossibleTargets","objects","i","isCollection","subTargetCheck","subTarget","push","interactive","t","_pointer","getPointer","_absolutePointer","fromViewport","bounds","getBoundingClientRect","boundsWidth","boundsHeight","abs","bottom","right","calcOffset","_offset","retinaScaling","cssScale","multiply","_setDimensionsImpl","dimensions","options","_resetTransformEventData","_setBrushStyles","createCanvasElement","willReadFrequently","getTopContext","getSelectionContext","getSelectionElement","getActiveObject","active","isActiveSelection","getObjects","_fireSelectionEvents","oldObjects","somethingChanged","invalidate","added","removed","forEach","selected","setActiveObject","currentActives","_setActiveObject","prevActiveObject","onSelect","set","setCoords","onDeselect","endCurrentTransform","discardActiveObject","discarded","_finalizeCurrentTransform","isMoving","_scaling","MODIFIED","setViewportTransform","vpt","destroy","removeAll","dispose","clear","drawControls","_renderControls","_toObject","instance","methodName","propertiesToInclude","originalProperties","_realizeGroupTransformOnObject","originalValues","pick","SKEW_X","SKEW_Y","addTransformToObject","calcOwnMatrix","_setSVGObject","markup","reviver","canvasDefaults"],"mappings":"wtDAoJO,MAAMA,UACHC,EAEVC,WAAAA,GAAAC,SAAAC,WAoDEC,iBAI0B,IAS1BA,yBAKkC,IAElCA,EAAAC,KAAA,wBAAA,GAOAD,2BAMsC,MAEtCA,wBAaW,MAEXA,0BAMkB,EAAK,CA8BvB,kBAAOE,GACL,OAAAC,EAAAA,EAAA,GAAYL,MAAMI,eAAkBP,EAAiBS,YACvD,CAGA,iBAAIC,GAAgB,IAAAC,EAClB,OAA0B,QAA1BA,EAAOL,KAAKM,SAASC,aAAK,IAAAF,OAAA,EAAnBA,EAAqBG,EAC9B,CACA,cAAIC,GAAa,IAAAC,EACf,OAA0B,QAA1BA,EAAOV,KAAKM,SAASC,aAAK,IAAAG,OAAA,EAAnBA,EAAqBC,GAC9B,CACA,aAAIC,GACF,OAAOZ,KAAKM,SAASO,SACvB,CAQUC,YAAAA,CAAaN,GACrBR,KAAKM,SAAW,IAAIS,EAAiBP,EAAI,CACvCQ,oBAAqBhB,KAAKgB,oBAC1BC,eAAgBjB,KAAKiB,iBAEvBjB,KAAKkB,oBACP,CAMAC,cAAAA,CAAeC,GACbpB,K