@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
139 lines (138 loc) • 5.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageLayer = void 0;
const BaseLayer_1 = require("./BaseLayer");
const types_1 = require("../../types");
const canvas_1 = require("@napi-rs/canvas");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
const helpers_1 = require("../helpers");
/**
* Class representing an Image Layer, extending the BaseLayer class.
*/
class ImageLayer extends BaseLayer_1.BaseLayer {
/**
* The properties of the Image Layer.
*/
props;
/**
* Constructs a new ImageLayer instance.
* @param {IImageLayerProps} [props] - The properties of the Image Layer.
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
*/
constructor(props, misc) {
super(types_1.LayerType.Image, props || {}, misc);
this.props = props ? props : {};
this.props = this.validateProps(this.props);
}
/**
* Sets the source of the image.
* @param {string} [src] - The source of the image, which can be a URL or file path.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the source is not a valid URL.
*/
setSrc(src) {
if (!(0, utils_1.isImageUrlValid)(src))
throw new LazyUtil_1.LazyError('The src of the image must be a valid URL');
this.props.src = src;
return this;
}
/**
* Sets the size of the image.
* @param {ScaleType} [width] - The width of the image.
* @param {ScaleType} [height] - The height of the image.
* @param {{ [corner in radiusCorner]?: ScaleType }} [radius] - The radius of the image (optional).
* @returns {this} The current instance for chaining.
*/
setSize(width, height, radius) {
this.props.size = {
width: width,
height: height,
radius: radius || { all: 0 },
};
return this;
}
/**
* Draws the Image 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.
* @throws {LazyError} If the image could not be loaded.
*/
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));
let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
const rad = {};
if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
for (const corner in this.props.size.radius) {
// @ts-ignore
rad[corner] = parcer.parse(this.props.size.radius[corner], LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
}
}
if (debug)
LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, rad });
ctx.save();
let image = await (0, canvas_1.loadImage)(this.props.src);
image.width = w;
image.height = h;
if (!image)
throw new LazyUtil_1.LazyError('The image could not be loaded');
(0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, 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);
if (Object.keys(rad).length > 0) {
ctx.beginPath();
ctx.moveTo(x + (w / 2), y);
ctx.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
ctx.closePath();
ctx.clip();
ctx.drawImage(image, x, y, w, h);
}
else {
ctx.drawImage(image, x, y, w, h);
}
ctx.restore();
}
/**
* Converts the Image Layer to a JSON representation.
* @returns {IImageLayer} The JSON representation of the Image Layer.
*/
toJSON() {
let data = super.toJSON();
let copy = { ...this.props };
for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius']) {
if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
copy[key] = copy[key].toJSON();
}
}
return { ...data };
}
/**
* Validates the properties of the Image Layer.
* @param {IImageLayerProps} [data] - The properties to validate.
* @returns {IImageLayerProps} The validated properties.
*/
validateProps(data) {
return {
...super.validateProps(data),
src: data.src || '',
size: {
width: data.size?.width || 0,
height: data.size?.height || 0,
radius: data.size?.radius || { all: 0 }
}
};
}
}
exports.ImageLayer = ImageLayer;