@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
139 lines (138 loc) • 5.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MorphLayer = void 0;
const BaseLayer_1 = require("./BaseLayer");
const enum_1 = require("../../types/enum");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
const Gradient_1 = require("../helpers/Gradient");
const Pattern_1 = require("../helpers/Pattern");
class MorphLayer extends BaseLayer_1.BaseLayer {
props;
constructor(props) {
super(enum_1.LayerType.Morph, props || {});
this.props = props ? props : {};
if (!this.props.fillStyle)
this.props.fillStyle = '#000000';
if (!this.props.filled && this.props.filled !== false)
this.props.filled = true;
this.props.centring = enum_1.Centring.Center;
}
/**
* @description Sets size of the morph layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
* @param width {ScaleType} - The `width` of the morph layer.
* @param height {ScaleType} - The `height` of the morph layer.
* @param radius {ScaleType} - The `radius` of the morph layer. (optional)
*/
setSize(width, height, radius) {
this.props.size = {
width: width,
height: height,
radius: radius || 0,
};
return this;
}
/**
* @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
* @param color {string} - The `color` of the layer.
*/
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');
let fill = (0, utils_1.parseColor)(color);
if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
this.props.fillStyle = fill;
}
else {
let arr = fill.split(':');
this.props.fillStyle = arr[0];
this.props.opacity = parseFloat(arr[1]) || 1;
}
return this;
}
/**
* @description Sets the stroke of the layer.
* @param width {number} - The `width` of the stroke.
* @param cap {string} - The `cap` of the stroke.
* @param join {string} - The `join` of the stroke.
* @param dash {number[]} - The `dash` of the stroke.
* @param dashOffset {number} - The `dashOffset` of the stroke.
* @param miterLimit {number} - The `miterLimit` of the stroke.
*/
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;
}
/**
* @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
* @param filled {boolean} - The `filled` of the layer.
*/
setFilled(filled) {
this.props.filled = filled;
return this;
}
async draw(ctx, canvas, manager, debug) {
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
const { xs, ys, w } = parcer.parseBatch({
xs: { v: this.props.x },
ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
w: { v: this.props.size.width },
});
const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
if (debug)
LazyUtil_1.LazyLog.log('none', `MorphLayer:`, { x, y, w, h, r });
ctx.save();
(0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
ctx.beginPath();
if (r) {
ctx.moveTo(x + (w / 2), y);
ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
ctx.arcTo(x, y + h, x, y + (h / 2), r);
ctx.arcTo(x, y, x + (w / 2), y, r);
}
else {
ctx.rect(x, y, w, h);
}
ctx.closePath();
(0, utils_1.drawShadow)(ctx, this.props.shadow);
(0, utils_1.opacity)(ctx, this.props.opacity);
(0, utils_1.filters)(ctx, this.props.filter);
if (this.props.filled) {
ctx.fillStyle = fillStyle;
ctx.fill();
}
else {
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.stroke();
}
ctx.restore();
}
/**
* @returns {IMorphLayer}
*/
toJSON() {
let data = super.toJSON();
data.props = this.props;
return { ...data };
}
}
exports.MorphLayer = MorphLayer;