fabric/dist/src/shapes/Rect.mjs

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

import { _defineProperty } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/defineProperty.mjs";
import "../constants.mjs";
import { classRegistry } from "../ClassRegistry.mjs";
import { escapeXml } from "../util/lang_string.mjs";
import { cacheProperties } from "./Object/defaultValues.mjs";
import { FabricObject } from "./Object/FabricObject.mjs";
import { SHARED_ATTRIBUTES } from "../parser/attributes.mjs";
import { parseAttributes } from "../parser/parseAttributes.mjs";
//#region src/shapes/Rect.ts
const rectDefaultValues = {
	rx: 0,
	ry: 0
};
const RECT_PROPS = ["rx", "ry"];
var Rect = class Rect extends FabricObject {
	static getDefaults() {
		return {
			...super.getDefaults(),
			...Rect.ownDefaults
		};
	}
	/**
	* Constructor
	* @param {Object} [options] Options object
	*/
	constructor(options) {
		super();
		Object.assign(this, Rect.ownDefaults);
		this.setOptions(options);
		this._initRxRy();
	}
	/**
	* Initializes rx/ry attributes
	* @private
	*/
	_initRxRy() {
		const { rx, ry } = this;
		if (rx && !ry) this.ry = rx;
		else if (ry && !rx) this.rx = ry;
	}
	/**
	* @private
	* @param {CanvasRenderingContext2D} ctx Context to render on
	*/
	_render(ctx) {
		const { width: w, height: h } = this;
		const x = -w / 2;
		const y = -h / 2;
		const rx = this.rx ? Math.min(this.rx, w / 2) : 0;
		const ry = this.ry ? Math.min(this.ry, h / 2) : 0;
		const isRounded = rx !== 0 || ry !== 0;
		ctx.beginPath();
		ctx.moveTo(x + rx, y);
		ctx.lineTo(x + w - rx, y);
		isRounded && ctx.bezierCurveTo(x + w - .4477152502 * rx, y, x + w, y + .4477152502 * ry, x + w, y + ry);
		ctx.lineTo(x + w, y + h - ry);
		isRounded && ctx.bezierCurveTo(x + w, y + h - .4477152502 * ry, x + w - .4477152502 * rx, y + h, x + w - rx, y + h);
		ctx.lineTo(x + rx, y + h);
		isRounded && ctx.bezierCurveTo(x + .4477152502 * rx, y + h, x, y + h - .4477152502 * ry, x, y + h - ry);
		ctx.lineTo(x, y + ry);
		isRounded && ctx.bezierCurveTo(x, y + .4477152502 * ry, x + .4477152502 * rx, y, x + rx, y);
		ctx.closePath();
		this._renderPaintInOrder(ctx);
	}
	/**
	* Returns object representation of an instance
	* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
	* @return {Object} object representation of an instance
	*/
	toObject(propertiesToInclude = []) {
		return super.toObject([...RECT_PROPS, ...propertiesToInclude]);
	}
	/**
	* Returns svg representation of an instance
	* @return {Array} an array of strings with the specific svg representation
	* of the instance
	*/
	_toSVG() {
		const { width, height, rx, ry } = this;
		return [
			"<rect ",
			"COMMON_PARTS",
			`x="${-width / 2}" y="${-height / 2}" rx="${escapeXml(rx)}" ry="${escapeXml(ry)}" width="${escapeXml(width)}" height="${escapeXml(height)}" />\n`
		];
	}
	/**
	* Returns {@link Rect} instance from an SVG element
	* @param {HTMLElement} element Element to parse
	* @param {Object} [options] Options object
	*/
	static async fromElement(element, options, cssRules) {
		const { left = 0, top = 0, width = 0, height = 0, visible = true, ...restOfparsedAttributes } = parseAttributes(element, this.ATTRIBUTE_NAMES, cssRules);
		return new this({
			...options,
			...restOfparsedAttributes,
			left,
			top,
			width,
			height,
			visible: Boolean(visible && width && height)
		});
	}
};
_defineProperty(Rect, "type", "Rect");
_defineProperty(Rect, "cacheProperties", [...cacheProperties, ...RECT_PROPS]);
_defineProperty(Rect, "ownDefaults", rectDefaultValues);
_defineProperty(Rect, "ATTRIBUTE_NAMES", [
	...SHARED_ATTRIBUTES,
	"x",
	"y",
	"rx",
	"ry",
	"width",
	"height"
]);
classRegistry.setClass(Rect);
classRegistry.setSVGClass(Rect);
//#endregion
export { Rect };

//# sourceMappingURL=Rect.mjs.map