fabric/dist/src/shapes/Line.min.mjs.map

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

{"version":3,"file":"Line.min.mjs","names":[],"sources":["../../../src/shapes/Line.ts"],"sourcesContent":["import { SHARED_ATTRIBUTES } from '../parser/attributes';\nimport { parseAttributes } from '../parser/parseAttributes';\nimport type { Abortable, TClassProperties, TOptions } from '../typedefs';\nimport { classRegistry } from '../ClassRegistry';\nimport { FabricObject, cacheProperties } from './Object/FabricObject';\nimport { Point } from '../Point';\nimport { isFiller } from '../util/typeAssertions';\nimport type { FabricObjectProps, SerializedObjectProps } from './Object/types';\nimport type { ObjectEvents } from '../EventTypeDefs';\nimport { makeBoundingBoxFromPoints } from '../util';\nimport { CENTER, LEFT, TOP } from '../constants';\nimport type { CSSRules } from '../parser/typedefs';\n\n// @TODO this code is terrible and Line should be a special case of polyline.\n\nconst coordProps = ['x1', 'x2', 'y1', 'y2'] as const;\n\ninterface UniqueLineProps {\n  x1: number;\n  x2: number;\n  y1: number;\n  y2: number;\n}\n\nexport interface SerializedLineProps\n  extends SerializedObjectProps, UniqueLineProps {}\n\n/**\n * A Class to draw a line\n * A bunch of methods will be added to Polyline to handle the line case\n * The line class is very strange to work with, is all special, it hardly aligns\n * to what a developer want everytime there is an angle\n * @deprecated\n */\nexport class Line<\n  Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,\n  SProps extends SerializedLineProps = SerializedLineProps,\n  EventSpec extends ObjectEvents = ObjectEvents,\n>\n  extends FabricObject<Props, SProps, EventSpec>\n  implements UniqueLineProps\n{\n  /**\n   * x value or first line edge\n   * @type number\n   */\n  declare x1: number;\n\n  /**\n   * y value or first line edge\n   * @type number\n   */\n  declare y1: number;\n\n  /**\n   * x value or second line edge\n   * @type number\n   */\n  declare x2: number;\n\n  /**\n   * y value or second line edge\n   * @type number\n   */\n  declare y2: number;\n\n  static type = 'Line';\n\n  static cacheProperties = [...cacheProperties, ...coordProps];\n  /**\n   * Constructor\n   * @param {Array} [points] Array of points\n   * @param {Object} [options] Options object\n   * @return {Line} thisArg\n   */\n  constructor([x1, y1, x2, y2] = [0, 0, 0, 0], options: Partial<Props> = {}) {\n    super();\n    Object.assign(this, Line.ownDefaults);\n    this.setOptions(options);\n    this.x1 = x1;\n    this.x2 = x2;\n    this.y1 = y1;\n    this.y2 = y2;\n    this._setWidthHeight();\n    const { left, top } = options;\n    typeof left === 'number' && this.set(LEFT, left);\n    typeof top === 'number' && this.set(TOP, top);\n  }\n\n  /**\n   * @private\n   * @param {Object} [options] Options\n   */\n  _setWidthHeight() {\n    const { x1, y1, x2, y2 } = this;\n    this.width = Math.abs(x2 - x1);\n    this.height = Math.abs(y2 - y1);\n    const { left, top, width, height } = makeBoundingBoxFromPoints([\n      { x: x1, y: y1 },\n      { x: x2, y: y2 },\n    ]);\n    const position = new Point(left + width / 2, top + height / 2);\n    this.setPositionByOrigin(position, CENTER, CENTER);\n  }\n\n  /**\n   * @private\n   * @param {String} key\n   * @param {*} value\n   */\n  _set(key: string, value: any) {\n    super._set(key, value);\n    if (coordProps.includes(key as keyof UniqueLineProps)) {\n      // this doesn't make sense very much, since setting x1 when top or left\n      // are already set, is just going to show a strange result since the\n      // line will move way more than the developer expect.\n      // in fabric5 it worked only when the line didn't have extra transformations,\n      // in fabric6 too. With extra transform they behave bad in different ways.\n      // This needs probably a good rework or a tutorial if you have to create a dynamic line\n      this._setWidthHeight();\n    }\n    return this;\n  }\n\n  /**\n   * @private\n   * @param {CanvasRenderingContext2D} ctx Context to render on\n   */\n  _render(ctx: CanvasRenderingContext2D) {\n    ctx.beginPath();\n\n    const p = this.calcLinePoints();\n    ctx.moveTo(p.x1, p.y1);\n    ctx.lineTo(p.x2, p.y2);\n\n    ctx.lineWidth = this.strokeWidth;\n\n    // TODO: test this\n    // make sure setting \"fill\" changes color of a line\n    // (by copying fillStyle to strokeStyle, since line is stroked, not filled)\n    const origStrokeStyle = ctx.strokeStyle;\n    if (isFiller(this.stroke)) {\n      ctx.strokeStyle = this.stroke.toLive(ctx)!;\n    } else {\n      ctx.strokeStyle = this.stroke ?? ctx.fillStyle;\n    }\n    this.stroke && this._renderStroke(ctx);\n    ctx.strokeStyle = origStrokeStyle;\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\n   * @private\n   * @return {Point} center point from element coordinates\n   */\n  _findCenterFromElement(): Point {\n    return new Point((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2);\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      ...this.calcLinePoints(),\n    };\n  }\n\n  /*\n   * Calculate object dimensions from its properties\n   * @private\n   */\n  _getNonTransformedDimensions(): Point {\n    const dim = super._getNonTransformedDimensions();\n    if (this.strokeLineCap === 'butt') {\n      if (this.width === 0) {\n        dim.y -= this.strokeWidth;\n      }\n      if (this.height === 0) {\n        dim.x -= this.strokeWidth;\n      }\n    }\n    return dim;\n  }\n\n  /**\n   * Recalculates line points given width and height\n   * Those points are simply placed around the center,\n   * This is not useful outside internal render functions and svg output\n   * Is not meant to be for the developer.\n   * @private\n   */\n  calcLinePoints(): UniqueLineProps {\n    const { x1: _x1, x2: _x2, y1: _y1, y2: _y2, width, height } = this;\n    const xMult = _x1 <= _x2 ? -0.5 : 0.5,\n      yMult = _y1 <= _y2 ? -0.5 : 0.5;\n\n    return {\n      x1: xMult * width,\n      x2: xMult * -width,\n      y1: yMult * height,\n      y2: yMult * -height,\n    };\n  }\n\n  /* _FROM_SVG_START_ */\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 { x1, x2, y1, y2 } = this.calcLinePoints();\n    return [\n      '<line ',\n      'COMMON_PARTS',\n      `x1=\"${x1}\" y1=\"${y1}\" x2=\"${x2}\" y2=\"${y2}\" />\\n`,\n    ];\n  }\n\n  /**\n   * List of attribute names to account for when parsing SVG element (used by {@link Line.fromElement})\n   * @see http://www.w3.org/TR/SVG/shapes.html#LineElement\n   */\n  static ATTRIBUTE_NAMES = SHARED_ATTRIBUTES.concat(coordProps);\n\n  /**\n   * Returns Line instance from an SVG element\n   * @param {HTMLElement} element Element to parse\n   * @param {Object} [options] Options object\n   * @param {Function} [callback] callback function invoked after parsing\n   */\n  static async fromElement(\n    element: HTMLElement,\n    options?: Abortable,\n    cssRules?: CSSRules,\n  ) {\n    const {\n      x1 = 0,\n      y1 = 0,\n      x2 = 0,\n      y2 = 0,\n      ...parsedAttributes\n    } = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);\n    return new this([x1, y1, x2, y2], parsedAttributes);\n  }\n\n  /* _FROM_SVG_END_ */\n\n  /**\n   * Returns Line instance from an object representation\n   * @param {Object} object Object to create an instance from\n   * @returns {Promise<Line>}\n   */\n  static fromObject<T extends TOptions<SerializedLineProps>>({\n    x1,\n    y1,\n    x2,\n    y2,\n    ...object\n  }: T) {\n    return this._fromObject<Line>(\n      {\n        ...object,\n        points: [x1, y1, x2, y2],\n      },\n      {\n        extraParam: 'points',\n      },\n    );\n  }\n}\n\nclassRegistry.setClass(Line);\nclassRegistry.setSVGClass(Line);\n"],"mappings":"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"}