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

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

{"version":3,"file":"Line.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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"}