@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
155 lines (154 loc) • 4.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Group = void 0;
const types_1 = require("../../types");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
/**
* Class representing a group of layers.
*/
class Group {
/**
* The unique identifier of the group.
*/
id;
/**
* The type of the group, which is `Group`.
*/
type = types_1.LayerType.Group;
/**
* The visibility of the group.
*/
visible;
/**
* The z-index of the group, determining its stacking order.
*/
zIndex;
/**
* The layers contained within the group.
*/
layers;
props;
/**
* Constructs a new Group instance.
* @param opts {Object} - Optional parameters for the group.
* @param opts.id {string} - The unique identifier of the group.
* @param opts.visible {boolean} - The visibility of the group.
* @param opts.zIndex {number} - The z-index of the group.
*/
constructor(opts) {
this.id = opts?.id || (0, utils_1.generateID)(types_1.LayerType.Group);
this.visible = opts?.visible || true;
this.zIndex = opts?.zIndex || 1;
this.layers = [];
this.props = {};
}
/**
* Sets the ID of the group.
* @param id {string} - The unique identifier of the group.
* @returns {this} The current instance for chaining.
*/
setID(id) {
this.id = id;
return this;
}
/**
* Sets the visibility of the group.
* @param visible {boolean} - The visibility state of the group.
* @returns {this} The current instance for chaining.
*/
setVisible(visible) {
this.visible = visible;
return this;
}
/**
* Sets the z-index of the group.
* @param zIndex {number} - The z-index value of the group.
* @returns {this} The current instance for chaining.
*/
setZIndex(zIndex) {
this.zIndex = zIndex;
return this;
}
/**
* Adds components to the group.
* @param components {AnyLayer[]} - The components to add to the group.
* @returns {this} The current instance for chaining.
*/
add(...components) {
let layersArray = components.flat();
layersArray = layersArray.filter(l => l !== undefined);
layersArray = layersArray.sort((a, b) => a.zIndex - b.zIndex);
this.layers.push(...layersArray);
return this;
}
/**
* Removes a component from the group by its ID.
* @param id {string} - The unique identifier of the component to remove.
* @returns {this} The current instance for chaining.
*/
remove(id) {
this.layers = this.layers.filter(c => c.id !== id);
return this;
}
/**
* Clears all components from the group.
* @returns {this} The current instance for chaining.
*/
clear() {
this.layers = [];
return this;
}
/**
* Retrieves a component from the group by its ID.
* @param id {string} - The unique identifier of the component to retrieve.
* @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
*/
get(id) {
return this.layers.find(c => c.id === id);
}
/**
* Retrieves all components from the group.
* @returns {AnyLayer[]} An array of all components in the group.
*/
getAll() {
return this.layers;
}
/**
* Gets the number of components in the group.
* @returns {number} The number of components in the group.
*/
get length() {
return this.layers.length;
}
async draw(ctx, canvas, manager, debug) {
for (const subLayer of this.layers) {
if (debug)
LazyUtil_1.LazyLog.log('info', `Rendering ${subLayer.id}...\nData:`, subLayer.toJSON());
if (subLayer.visible) {
if ('globalComposite' in subLayer.props && subLayer.props.globalComposite) {
ctx.globalCompositeOperation = subLayer.props.globalComposite;
}
else {
ctx.globalCompositeOperation = 'source-over';
}
await subLayer.draw(ctx, canvas, manager, debug);
ctx.shadowColor = 'transparent';
}
}
}
/**
* Converts the group to a JSON representation.
* @returns {IGroup} The JSON representation of the group.
*/
toJSON() {
return {
id: this.id,
type: this.type,
visible: this.visible,
zIndex: this.zIndex,
layers: this.layers.map(c => c.toJSON())
};
}
}
exports.Group = Group;