@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
215 lines (214 loc) • 7.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseLayer = void 0;
const types_1 = require("../../types");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
/**
* Represents a base layer with generic properties and methods for managing
* its position, visibility, transformations, and other attributes.
*
* @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
*/
class BaseLayer {
/**
* The unique identifier of the layer.
* @type {string}
*/
id;
/**
* The type of the layer.
* @type {LayerType}
*/
type;
/**
* The z-index of the layer, determining its stacking order.
* @type {number}
*/
zIndex;
/**
* The visibility of the layer.
* @type {boolean}
*/
visible;
/**
* The properties of the layer, defined by the generic type `T`.
* @type {T}
*/
props;
/**
* Constructs a new `BaseLayer` instance.
* @param {LayerType} [type] - The type of the layer.
* @param {T} [props] - The properties of the layer.
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
*/
constructor(type, props, misc) {
this.id = misc?.id || (0, utils_1.generateID)(type ? type : types_1.LayerType.Base);
this.type = type ? type : types_1.LayerType.Base;
this.zIndex = misc?.zIndex || 1;
this.visible = misc?.visible || true;
this.props = props ? props : {};
this.props = this.validateProps(this.props);
}
/**
* Sets the position of the layer in the 2D plane.
* @param {ScaleType} [x] - The x-coordinate of the layer.
* @param {ScaleType} [y] - The y-coordinate of the layer.
* @returns {this} The current instance for chaining.
*/
setPosition(x, y) {
this.props.x = x;
this.props.y = y;
return this;
}
/**
* Sets the opacity of the layer.
* @param {number} [opacity] - The opacity value, between 0 and 1.
* @returns {this} The current instance for chaining.
*/
setOpacity(opacity) {
this.props.opacity = opacity;
return this;
}
/**
* Sets the unique identifier of the layer.
*
* @param {string} [id] - The unique identifier.
* @returns {this} The current instance for chaining.
*/
setID(id) {
this.id = id;
return this;
}
/**
* Sets the shadow properties of the layer.
* @param {string} [color] - The color of the shadow.
* @param {number} [blur] - The blur radius of the shadow.
* @param {number} [offsetX] - The horizontal offset of the shadow.
* @param {number} [offsetY] - The vertical offset of the shadow.
* @returns {this} The current instance for chaining.
* @throws {LazyError} If the color is invalid or not provided.
*/
setShadow(color, blur, offsetX, offsetY) {
if (!color)
throw new LazyUtil_1.LazyError('The color of the shadow must be provided');
if (!(0, utils_1.isColor)(color))
throw new LazyUtil_1.LazyError('The color of the shadow must be a valid color');
this.props.shadow = {
color: color,
blur: blur || 0,
offsetX: offsetX || 0,
offsetY: offsetY || 0,
};
return this;
}
/**
* Sets the transformation matrix of the layer.
* @param {DOMMatrix2DInit} [matrix] - The transformation matrix.
* @returns {this} The current instance for chaining.
*/
setMatrix(matrix) {
this.props.transform = { ...this.props.transform, matrix };
return this;
}
/**
* Sets the scale of the layer in the x and y directions.
* @param {number} [x] - The scale factor in the x direction.
* @param {number} [y] - The scale factor in the y direction.
* @returns {this} The current instance for chaining.
*/
setScale(x, y) {
this.props.transform = { ...this.props.transform, scale: { x, y } };
return this;
}
/**
* Sets the rotation of the layer.
* @param {number} [rotate] - The rotation angle in degrees.
* @returns {this} The current instance for chaining.
*/
setRotate(rotate) {
this.props.transform = { ...this.props.transform, rotate };
return this;
}
/**
* Sets the translation of the layer in the x and y directions.
* @param {number} [x] - The translation in the x direction.
* @param {number} [y] - The translation in the y direction.
* @returns {this} The current instance for chaining.
*/
setTranslate(x, y) {
this.props.transform = { ...this.props.transform, translate: { x, y } };
return this;
}
/**
* Sets the filter effects for the layer.
* @param {...AnyFilter} [filter] - The filter effects to apply.
* @returns {this} The current instance for chaining.
*/
setFilters(...filter) {
this.props.filter = filter.join(' ');
return this;
}
/**
* Sets the centring type of the layer. **Don't affect on Bezier, Line, Quadratic and Text layers**.
* @param {AnyCentring} [centring] - The centring type.
* @returns {this} The current instance for chaining.
*/
setCentring(centring) {
this.props.centring = centring;
return this;
}
/**
* Sets the visibility of the layer.
* @param {boolean} [visible] - The visibility state.
* @returns {this} The current instance for chaining.
*/
setVisible(visible) {
this.visible = visible;
return this;
}
/**
* Sets the z-index of the layer.
* @param {number} [zIndex] - The z-index value.
* @returns {this} The current instance for chaining.
*/
setZIndex(zIndex) {
this.zIndex = zIndex;
return this;
}
/**
* Sets the global composite operation for the layer.
* @param {AnyGlobalCompositeOperation} [operation] - The composite operation.
* @returns {this} The current instance for chaining.
*/
setGlobalCompositeOperation(operation) {
this.props.globalComposite = operation;
return this;
}
/**
* Converts the layer to a JSON representation.
* @returns {IBaseLayer} The JSON representation of the layer.
*/
toJSON() {
return {
id: this.id,
type: this.type,
zIndex: this.zIndex,
visible: this.visible,
props: this.props,
};
}
validateProps(data) {
return {
...data,
x: data.x || 0,
y: data.y || 0,
centring: data.centring || types_1.Centring.Center,
filter: data.filter || '',
opacity: data.opacity || 1,
transform: data.transform || {},
globalComposite: data.globalComposite || 'source-over',
};
}
}
exports.BaseLayer = BaseLayer;