@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
199 lines (198 loc) • 9.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BezierLayer = void 0;
const BaseLayer_1 = require("./BaseLayer");
const types_1 = require("../../types");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
/**
* Class representing a Bezier layer, extending the BaseLayer class.
*/
class BezierLayer extends BaseLayer_1.BaseLayer {
/**
* The properties of the Bezier layer.
*/
props;
/**
* Constructs a new BezierLayer instance.
* @param {IBezierLayerProps} [props] - The properties of the Bezier layer.
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
*/
constructor(props, misc) {
super(types_1.LayerType.BezierCurve, props || {}, misc);
this.props = props ? props : {};
this.props = this.validateProps(this.props);
}
/**
* Sets the control points of the Bezier layer.
* @param {Array<{ x: ScaleType, y: ScaleType }>} [controlPoints] - The control points of the Bezier layer.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the number of control points is not exactly 2.
*/
setControlPoints(...controlPoints) {
if (controlPoints.length !== 2)
throw new LazyUtil_1.LazyError('The control points of the layer must be provided');
this.props.controlPoints = controlPoints.flat();
return this;
}
/**
* Sets the end position of the Bezier layer.
* @param {ScaleType} [x] - The x-coordinate of the end point.
* @param {ScaleType} [y] - The y-coordinate of the end point.
* @returns {this} The current instance for chaining.
*/
setEndPosition(x, y) {
this.props.endPoint = { x, y };
return this;
}
/**
* Sets the color of the Bezier layer.
* @param {ColorType} [color] - The color of the layer.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the color is not provided or invalid.
*/
setColor(color) {
if (!color)
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
if (!(0, utils_1.isColor)(color))
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
this.props.fillStyle = color;
return this;
}
/**
* Sets the stroke properties of the Bezier layer.
* @param {number} [width] - The width of the stroke.
* @param {string} [cap] - The cap style of the stroke.
* @param {string} [join] - The join style of the stroke.
* @param {number[]} [dash] - The dash pattern of the stroke.
* @param {number} [dashOffset] - The dash offset of the stroke.
* @param {number} [miterLimit] - The miter limit of the stroke.
* @returns {this} The current instance for chaining.
*/
setStroke(width, cap, join, dash, dashOffset, miterLimit) {
this.props.stroke = {
width,
cap: cap || 'butt',
join: join || 'miter',
dash: dash || [],
dashOffset: dashOffset || 0,
miterLimit: miterLimit || 10,
};
return this;
}
/**
* Calculates the bounding box of the Bezier layer.
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
* @param {LayersManager} [manager] - The layer's manager.
* @returns {Object} The bounding box details including max, min, center, width, and height.
*/
getBoundingBox(ctx, canvas, manager) {
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
xs: { v: this.props.x },
ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
cp1x: { v: this.props.controlPoints[0].x },
cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
cp2x: { v: this.props.controlPoints[1].x },
cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
xe: { v: this.props.endPoint.x },
ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
});
const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
return { max, min, center, width, height };
}
/**
* Draws the Bezier layer on the canvas.
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
* @param {LayersManager} [manager] - The layer's manager.
* @param {boolean} [debug] - Whether to enable debug logging.
*/
async draw(ctx, canvas, manager, debug) {
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
xs: { v: this.props.x },
ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
cp1x: { v: this.props.controlPoints[0].x },
cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
cp2x: { v: this.props.controlPoints[1].x },
cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
xe: { v: this.props.endPoint.x },
ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
});
const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width, height, x: min.x, y: min.y, align: 'none' }, manager });
if (debug)
LazyUtil_1.LazyLog.log('none', `BezierLayer:`, { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye, max, min, center, width, height, fillStyle });
ctx.save();
(0, utils_1.transform)(ctx, this.props.transform, { x: center.x, y: center.y, width, height, type: this.type });
(0, utils_1.drawShadow)(ctx, this.props.shadow);
(0, utils_1.opacity)(ctx, this.props.opacity);
(0, utils_1.filters)(ctx, this.props.filter);
ctx.beginPath();
ctx.moveTo(xs, ys);
ctx.strokeStyle = fillStyle;
ctx.lineWidth = this.props.stroke?.width || 1;
ctx.lineCap = this.props.stroke?.cap || 'butt';
ctx.lineJoin = this.props.stroke?.join || 'miter';
ctx.miterLimit = this.props.stroke?.miterLimit || 10;
ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
ctx.setLineDash(this.props.stroke?.dash || []);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, xe, ye);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
/**
* Converts the Bezier layer to a JSON representation.
* @returns {IBezierLayer} The JSON representation of the Bezier layer.
*/
toJSON() {
let data = super.toJSON();
let copy = { ...this.props };
for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
copy[key] = copy[key].toJSON();
}
}
if (copy.controlPoints) {
copy.controlPoints = copy.controlPoints.map((point) => {
if (point.x && typeof point.x === 'object' && 'toJSON' in point.x) {
// @ts-ignore
point.x = point.x.toJSON();
}
if (point.y && typeof point.y === 'object' && 'toJSON' in point.y) {
// @ts-ignore
point.y = point.y.toJSON();
}
return point;
});
}
return { ...data, props: copy };
}
/**
* Validates the properties of the Bezier layer.
* @param {IBezierLayerProps} [data] - The properties to validate.
* @returns {IBezierLayerProps} The validated properties.
*/
validateProps(data) {
return {
...super.validateProps(data),
filled: data.filled || false,
fillStyle: data.fillStyle || '#000000',
centring: data.centring || types_1.Centring.None,
controlPoints: data.controlPoints || [{ x: 0, y: 0 }, { x: 0, y: 0 }],
endPoint: data.endPoint || { x: 0, y: 0 },
stroke: {
width: data.stroke?.width || 1,
cap: data.stroke?.cap || 'butt',
join: data.stroke?.join || 'miter',
dashOffset: data.stroke?.dashOffset || 0,
dash: data.stroke?.dash || [],
miterLimit: data.stroke?.miterLimit || 10,
}
};
}
}
exports.BezierLayer = BezierLayer;