fabric/dist/src/shapes/Polyline.mjs.map

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

{"version":3,"file":"Polyline.mjs","names":[],"sources":["../../../src/shapes/Polyline.ts"],"sourcesContent":["import { config } from '../config';\nimport { SHARED_ATTRIBUTES } from '../parser/attributes';\nimport { parseAttributes } from '../parser/parseAttributes';\nimport { parsePointsAttribute } from '../parser/parsePointsAttribute';\nimport type { XY } from '../Point';\nimport { Point } from '../Point';\nimport type { Abortable, TClassProperties, TOptions } from '../typedefs';\nimport { classRegistry } from '../ClassRegistry';\nimport { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';\nimport { calcDimensionsMatrix, transformPoint } from '../util/misc/matrix';\nimport { projectStrokeOnPoints } from '../util/misc/projectStroke';\nimport type { TProjectStrokeOnPointsOptions } from '../util/misc/projectStroke/types';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport { toFixed } from '../util/misc/toFixed';\nimport { FabricObject, cacheProperties } from './Object/FabricObject';\nimport type { FabricObjectProps, SerializedObjectProps } from './Object/types';\nimport type { ObjectEvents } from '../EventTypeDefs';\nimport {\n  CENTER,\n  LEFT,\n  SCALE_X,\n  SCALE_Y,\n  SKEW_X,\n  SKEW_Y,\n  TOP,\n} from '../constants';\nimport type { CSSRules } from '../parser/typedefs';\nimport { escapeXml } from '../util/lang_string';\n\nexport const polylineDefaultValues: Partial<TClassProperties<Polyline>> = {\n  /**\n   * @deprecated transient option soon to be removed in favor of a different design\n   */\n  exactBoundingBox: false,\n};\n\nexport interface SerializedPolylineProps extends SerializedObjectProps {\n  points: XY[];\n}\n\nexport class Polyline<\n  Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,\n  SProps extends SerializedPolylineProps = SerializedPolylineProps,\n  EventSpec extends ObjectEvents = ObjectEvents,\n> extends FabricObject<Props, SProps, EventSpec> {\n  /**\n   * Points array\n   * @type Array\n   */\n  declare points: XY[];\n\n  /**\n   * WARNING: Feature in progress\n   * Calculate the exact bounding box taking in account strokeWidth on acute angles\n   * this will be turned to true by default on fabric 6.0\n   * maybe will be left in as an optimization since calculations may be slow\n   * @deprecated transient option soon to be removed in favor of a different design\n   * @type Boolean\n   * @default false\n   */\n  declare exactBoundingBox: boolean;\n\n  declare private initialized: true | undefined;\n\n  static ownDefaults = polylineDefaultValues;\n\n  static type = 'Polyline';\n\n  static getDefaults(): Record<string, any> {\n    return {\n      ...super.getDefaults(),\n      ...Polyline.ownDefaults,\n    };\n  }\n\n  /**\n   * A list of properties that if changed trigger a recalculation of dimensions\n   * @todo check if you really need to recalculate for all cases\n   */\n  static layoutProperties: (keyof Polyline)[] = [\n    SKEW_X,\n    SKEW_Y,\n    'strokeLineCap',\n    'strokeLineJoin',\n    'strokeMiterLimit',\n    'strokeWidth',\n    'strokeUniform',\n    'points',\n  ];\n\n  declare pathOffset: Point;\n\n  declare strokeOffset: Point;\n\n  static cacheProperties = [...cacheProperties, 'points'];\n\n  strokeDiff: Point;\n\n  /**\n   * Constructor\n   * @param {Array} points Array of points (where each point is an object with x and y)\n   * @param {Object} [options] Options object\n   * @return {Polyline} thisArg\n   * @example\n   * var poly = new Polyline([\n   *     { x: 10, y: 10 },\n   *     { x: 50, y: 30 },\n   *     { x: 40, y: 70 },\n   *     { x: 60, y: 50 },\n   *     { x: 100, y: 150 },\n   *     { x: 40, y: 100 }\n   *   ], {\n   *   stroke: 'red',\n   *   left: 100,\n   *   top: 100\n   * });\n   */\n  constructor(points: XY[] = [], options: Props = {} as Props) {\n    super();\n    Object.assign(this, Polyline.ownDefaults);\n    this.setOptions(options);\n    this.points = points;\n    const { left, top } = options;\n    this.initialized = true;\n    this.setBoundingBox(true);\n    typeof left === 'number' && this.set(LEFT, left);\n    typeof top === 'number' && this.set(TOP, top);\n  }\n\n  protected isOpen() {\n    return true;\n  }\n\n  private _projectStrokeOnPoints(options: TProjectStrokeOnPointsOptions) {\n    return projectStrokeOnPoints(this.points, options, this.isOpen());\n  }\n\n  /**\n   * Calculate the polygon bounding box\n   * @private\n   */\n  _calcDimensions(options?: Partial<TProjectStrokeOnPointsOptions>) {\n    options = {\n      scaleX: this.scaleX,\n      scaleY: this.scaleY,\n      skewX: this.skewX,\n      skewY: this.skewY,\n      strokeLineCap: this.strokeLineCap,\n      strokeLineJoin: this.strokeLineJoin,\n      strokeMiterLimit: this.strokeMiterLimit,\n      strokeUniform: this.strokeUniform,\n      strokeWidth: this.strokeWidth,\n      ...(options || {}),\n    };\n    const points = this.exactBoundingBox\n      ? this._projectStrokeOnPoints(\n          options as TProjectStrokeOnPointsOptions,\n        ).map((projection) => projection.projectedPoint)\n      : this.points;\n    if (points.length === 0) {\n      return {\n        left: 0,\n        top: 0,\n        width: 0,\n        height: 0,\n        pathOffset: new Point(),\n        strokeOffset: new Point(),\n        strokeDiff: new Point(),\n      };\n    }\n    const bbox = makeBoundingBoxFromPoints(points),\n      // Remove scale effect, since it's applied after\n      matrix = calcDimensionsMatrix({ ...options, scaleX: 1, scaleY: 1 }),\n      bboxNoStroke = makeBoundingBoxFromPoints(\n        this.points.map((p) => transformPoint(p, matrix, true)),\n      ),\n      scale = new Point(this.scaleX, this.scaleY);\n    let offsetX = bbox.left + bbox.width / 2,\n      offsetY = bbox.top + bbox.height / 2;\n    if (this.exactBoundingBox) {\n      offsetX = offsetX - offsetY * Math.tan(degreesToRadians(this.skewX));\n      // Order of those assignments is important.\n      // offsetY relies on offsetX being already changed by the line above\n      offsetY = offsetY - offsetX * Math.tan(degreesToRadians(this.skewY));\n    }\n\n    return {\n      ...bbox,\n      pathOffset: new Point(offsetX, offsetY),\n      strokeOffset: new Point(bboxNoStroke.left, bboxNoStroke.top)\n        .subtract(new Point(bbox.left, bbox.top))\n        .multiply(scale),\n      strokeDiff: new Point(bbox.width, bbox.height)\n        .subtract(new Point(bboxNoStroke.width, bboxNoStroke.height))\n        .multiply(scale),\n    };\n  }\n\n  /**\n   * This function is an helper for svg import. it returns the center of the object in the svg\n   * untransformed coordinates, by look at the polyline/polygon points.\n   * @private\n   * @return {Point} center point from element coordinates\n   */\n  _findCenterFromElement(): Point {\n    const bbox = makeBoundingBoxFromPoints(this.points);\n    return new Point(bbox.left + bbox.width / 2, bbox.top + bbox.height / 2);\n  }\n\n  setDimensions() {\n    this.setBoundingBox();\n  }\n\n  setBoundingBox(adjustPosition?: boolean) {\n    const { left, top, width, height, pathOffset, strokeOffset, strokeDiff } =\n      this._calcDimensions();\n    this.set({ width, height, pathOffset, strokeOffset, strokeDiff });\n    adjustPosition &&\n      this.setPositionByOrigin(\n        new Point(left + width / 2, top + height / 2),\n        CENTER,\n        CENTER,\n      );\n  }\n\n  /**\n   * @deprecated intermidiate method to be removed, do not use\n   */\n  protected isStrokeAccountedForInDimensions() {\n    return this.exactBoundingBox;\n  }\n\n  /**\n   * @override stroke is taken in account in size\n   */\n  _getNonTransformedDimensions() {\n    return this.exactBoundingBox\n      ? // TODO: fix this\n        new Point(this.width, this.height)\n      : super._getNonTransformedDimensions();\n  }\n\n  /**\n   * @override stroke and skewing are taken into account when projecting stroke on points,\n   * therefore we don't want the default calculation to account for skewing as well.\n   * Though it is possible to pass `width` and `height` in `options`, doing so is very strange, use with discretion.\n   *\n   * @private\n   */\n  _getTransformedDimensions(options: any = {}) {\n    if (this.exactBoundingBox) {\n      let size: Point;\n      /* When `strokeUniform = true`, any changes to the properties require recalculating the `width` and `height` because\n        the stroke projections are affected.\n        When `strokeUniform = false`, we don't need to recalculate for scale transformations, as the effect of scale on\n        projections follows a linear function (e.g. scaleX of 2 just multiply width by 2)*/\n      if (\n        Object.keys(options).some(\n          (key) =>\n            this.strokeUniform ||\n            (this.constructor as typeof Polyline).layoutProperties.includes(\n              key as keyof TProjectStrokeOnPointsOptions,\n            ),\n        )\n      ) {\n        const { width, height } = this._calcDimensions(options);\n        size = new Point(options.width ?? width, options.height ?? height);\n      } else {\n        size = new Point(\n          options.width ?? this.width,\n          options.height ?? this.height,\n        );\n      }\n      return size.multiply(\n        new Point(options.scaleX || this.scaleX, options.scaleY || this.scaleY),\n      );\n    } else {\n      return super._getTransformedDimensions(options);\n    }\n  }\n\n  /**\n   * Recalculates dimensions when changing skew and scale\n   * @private\n   */\n  _set(key: string, value: any) {\n    const changed = this.initialized && this[key as keyof this] !== value;\n    const output = super._set(key, value);\n    if (\n      this.exactBoundingBox &&\n      changed &&\n      (((key === SCALE_X || key === SCALE_Y) &&\n        this.strokeUniform &&\n        (this.constructor as typeof Polyline).layoutProperties.includes(\n          'strokeUniform',\n        )) ||\n        (this.constructor as typeof Polyline).layoutProperties.includes(\n          key as keyof Polyline,\n        ))\n    ) {\n      this.setDimensions();\n    }\n    return output;\n  }\n\n  /**\n   * Returns object representation of an instance\n   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n   * @return {Object} Object representation of an instance\n   */\n  toObject<\n    T extends Omit<Props & TClassProperties<this>, keyof SProps>,\n    K extends keyof T = never,\n  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {\n    return {\n      ...super.toObject(propertiesToInclude),\n      points: this.points.map(({ x, y }) => ({ x, y })),\n    };\n  }\n\n  /**\n   * Returns svg representation of an instance\n   * @return {Array} an array of strings with the specific svg representation\n   * of the instance\n   */\n  _toSVG() {\n    const diffX = this.pathOffset.x,\n      diffY = this.pathOffset.y,\n      NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;\n\n    const points = this.points\n      .map(\n        ({ x, y }) =>\n          `${toFixed(x - diffX, NUM_FRACTION_DIGITS)},${toFixed(y - diffY, NUM_FRACTION_DIGITS)}`,\n      )\n      .join(' ');\n\n    return [\n      `<${\n        escapeXml((this.constructor as typeof Polyline).type).toLowerCase() as\n          | 'polyline'\n          | 'polygon'\n      } `,\n      'COMMON_PARTS',\n      `points=\"${points}\" />\\n`,\n    ];\n  }\n\n  /**\n   * @private\n   * @param {CanvasRenderingContext2D} ctx Context to render on\n   */\n  _render(ctx: CanvasRenderingContext2D) {\n    const len = this.points.length,\n      x = this.pathOffset.x,\n      y = this.pathOffset.y;\n\n    if (!len || isNaN(this.points[len - 1].y)) {\n      // do not draw if no points or odd points\n      // NaN comes from parseFloat of a empty string in parser\n      return;\n    }\n    ctx.beginPath();\n    ctx.moveTo(this.points[0].x - x, this.points[0].y - y);\n    for (let i = 0; i < len; i++) {\n      const point = this.points[i];\n      ctx.lineTo(point.x - x, point.y - y);\n    }\n    !this.isOpen() && ctx.closePath();\n    this._renderPaintInOrder(ctx);\n  }\n\n  /**\n   * Returns complexity of an instance\n   * @return {Number} complexity of this instance\n   */\n  complexity(): number {\n    return this.points.length;\n  }\n\n  /* _FROM_SVG_START_ */\n\n  /**\n   * List of attribute names to account for when parsing SVG element (used by {@link Polyline.fromElement})\n   * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement\n   */\n  static ATTRIBUTE_NAMES = [...SHARED_ATTRIBUTES];\n\n  /**\n   * Returns Polyline instance from an SVG element\n   * @param {HTMLElement} element Element to parser\n   * @param {Object} [options] Options object\n   */\n  static async fromElement(\n    element: HTMLElement | SVGElement,\n    options?: Abortable,\n    cssRules?: CSSRules,\n  ) {\n    const points = parsePointsAttribute(element.getAttribute('points')),\n      // we omit left and top to instruct the constructor to position the object using the bbox\n\n      { left, top, ...parsedAttributes } = parseAttributes(\n        element,\n        this.ATTRIBUTE_NAMES,\n        cssRules,\n      );\n    return new this(points, {\n      ...parsedAttributes,\n      ...options,\n    });\n  }\n\n  /* _FROM_SVG_END_ */\n\n  /**\n   * Returns Polyline instance from an object representation\n   * @param {Object} object Object to create an instance from\n   * @returns {Promise<Polyline>}\n   */\n  static fromObject<T extends TOptions<SerializedPolylineProps>>(object: T) {\n    return this._fromObject<Polyline>(object, {\n      extraParam: 'points',\n    });\n  }\n}\n\nclassRegistry.setClass(Polyline);\nclassRegistry.setSVGClass(Polyline);\n"],"mappings":"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"}