fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
1 lines • 12.4 kB
Source Map (JSON)
{"version":3,"file":"Circle.mjs","sources":["../../../src/shapes/Circle.ts"],"sourcesContent":["import type { ObjectEvents } from '../EventTypeDefs';\nimport { SHARED_ATTRIBUTES } from '../parser/attributes';\nimport { parseAttributes } from '../parser/parseAttributes';\nimport { cos } from '../util/misc/cos';\nimport { degreesToRadians } from '../util/misc/radiansDegreesConversion';\nimport { sin } from '../util/misc/sin';\nimport { classRegistry } from '../ClassRegistry';\nimport { FabricObject, cacheProperties } from './Object/FabricObject';\nimport type { Abortable, TClassProperties, TOptions } from '../typedefs';\nimport type { FabricObjectProps, SerializedObjectProps } from './Object/types';\nimport type { CSSRules } from '../parser/typedefs';\nimport { SCALE_X, SCALE_Y } from '../constants';\n\ninterface UniqueCircleProps {\n /**\n * Radius of this circle\n * @type Number\n * @default 0\n */\n radius: number;\n\n /**\n * Angle for the start of the circle, in degrees.\n * @type TDegree 0 - 359\n * @default 0\n */\n startAngle: number;\n\n /**\n * Angle for the end of the circle, in degrees\n * @type TDegree 1 - 360\n * @default 360\n */\n endAngle: number;\n\n /**\n * Orientation for the direction of the circle.\n * Setting to true will switch the arc of the circle to traverse from startAngle to endAngle in a counter-clockwise direction.\n * Note: this will only change how the circle is drawn, and does not affect rotational transformation.\n * @default false\n */\n counterClockwise: boolean;\n}\n\nexport interface SerializedCircleProps\n extends SerializedObjectProps,\n UniqueCircleProps {}\n\nexport interface CircleProps extends FabricObjectProps, UniqueCircleProps {}\n\nconst CIRCLE_PROPS = [\n 'radius',\n 'startAngle',\n 'endAngle',\n 'counterClockwise',\n] as const;\n\nexport const circleDefaultValues: Partial<TClassProperties<Circle>> = {\n radius: 0,\n startAngle: 0,\n endAngle: 360,\n counterClockwise: false,\n};\n\nexport class Circle<\n Props extends TOptions<CircleProps> = Partial<CircleProps>,\n SProps extends SerializedCircleProps = SerializedCircleProps,\n EventSpec extends ObjectEvents = ObjectEvents,\n >\n extends FabricObject<Props, SProps, EventSpec>\n implements UniqueCircleProps\n{\n declare radius: number;\n declare startAngle: number;\n declare endAngle: number;\n declare counterClockwise: boolean;\n\n static type = 'Circle';\n\n static cacheProperties = [...cacheProperties, ...CIRCLE_PROPS];\n\n static ownDefaults = circleDefaultValues;\n\n static getDefaults(): Record<string, any> {\n return {\n ...super.getDefaults(),\n ...Circle.ownDefaults,\n };\n }\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n */\n constructor(options?: Props) {\n super();\n Object.assign(this, Circle.ownDefaults);\n this.setOptions(options);\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\n if (key === 'radius') {\n this.setRadius(value);\n }\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 ctx.arc(\n 0,\n 0,\n this.radius,\n degreesToRadians(this.startAngle),\n degreesToRadians(this.endAngle),\n this.counterClockwise,\n );\n this._renderPaintInOrder(ctx);\n }\n\n /**\n * Returns horizontal radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRadiusX(): number {\n return this.get('radius') * this.get(SCALE_X);\n }\n\n /**\n * Returns vertical radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRadiusY(): number {\n return this.get('radius') * this.get(SCALE_Y);\n }\n\n /**\n * Sets radius of an object (and updates width accordingly)\n */\n setRadius(value: number) {\n this.radius = value;\n this.set({ width: value * 2, height: value * 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 super.toObject([...CIRCLE_PROPS, ...propertiesToInclude]);\n }\n\n /* _TO_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(): string[] {\n const angle = (this.endAngle - this.startAngle) % 360;\n\n if (angle === 0) {\n return [\n '<circle ',\n 'COMMON_PARTS',\n 'cx=\"0\" cy=\"0\" ',\n 'r=\"',\n `${this.radius}`,\n '\" />\\n',\n ];\n } else {\n const { radius } = this;\n const start = degreesToRadians(this.startAngle),\n end = degreesToRadians(this.endAngle),\n startX = cos(start) * radius,\n startY = sin(start) * radius,\n endX = cos(end) * radius,\n endY = sin(end) * radius,\n largeFlag = angle > 180 ? 1 : 0,\n sweepFlag = this.counterClockwise ? 0 : 1;\n return [\n `<path d=\"M ${startX} ${startY} A ${radius} ${radius} 0 ${largeFlag} ${sweepFlag} ${endX} ${endY}\" `,\n 'COMMON_PARTS',\n ' />\\n',\n ];\n }\n }\n /* _TO_SVG_END_ */\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link Circle.fromElement})\n * @static\n * @memberOf Circle\n * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement\n */\n static ATTRIBUTE_NAMES = ['cx', 'cy', 'r', ...SHARED_ATTRIBUTES];\n\n /**\n * Returns {@link Circle} instance from an SVG element\n * @static\n * @memberOf Circle\n * @param {HTMLElement} element Element to parse\n * @param {Object} [options] Partial Circle object to default missing properties on the element.\n * @throws {Error} If value of `r` attribute is missing or invalid\n */\n static async fromElement(\n element: HTMLElement,\n options: Abortable,\n cssRules?: CSSRules,\n ): Promise<Circle> {\n const {\n left = 0,\n top = 0,\n radius = 0,\n ...otherParsedAttributes\n } = parseAttributes(\n element,\n this.ATTRIBUTE_NAMES,\n cssRules,\n ) as Partial<CircleProps>;\n\n // this probably requires to be fixed for default origins not being top/left.\n\n return new this({\n ...otherParsedAttributes,\n radius,\n left: left - radius,\n top: top - radius,\n });\n }\n\n /* _FROM_SVG_END_ */\n\n /**\n * @todo how do we declare this??\n */\n static fromObject<T extends TOptions<SerializedCircleProps>>(object: T) {\n return super._fromObject<Circle>(object);\n }\n}\n\nclassRegistry.setClass(Circle);\nclassRegistry.setSVGClass(Circle);\n"],"names":["CIRCLE_PROPS","circleDefaultValues","radius","startAngle","endAngle","counterClockwise","Circle","FabricObject","getDefaults","_objectSpread","ownDefaults","constructor","options","Object","assign","setOptions","_set","key","value","setRadius","_render","ctx","beginPath","arc","degreesToRadians","_renderPaintInOrder","getRadiusX","get","SCALE_X","getRadiusY","SCALE_Y","set","width","height","toObject","propertiesToInclude","arguments","length","undefined","_toSVG","angle","concat","start","end","startX","cos","startY","sin","endX","endY","largeFlag","sweepFlag","fromElement","element","cssRules","_ref","parseAttributes","ATTRIBUTE_NAMES","left","top","otherParsedAttributes","_objectWithoutProperties","_excluded","fromObject","object","_fromObject","_defineProperty","cacheProperties","SHARED_ATTRIBUTES","classRegistry","setClass","setSVGClass"],"mappings":"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"}