@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
159 lines (158 loc) • 5.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ClearLayer = void 0;
const types_1 = require("../../types");
const utils_1 = require("../../utils/utils");
const LazyUtil_1 = require("../../utils/LazyUtil");
const utils_2 = require("../../utils/utils");
/**
* Class representing a Clear Layer.
*/
class ClearLayer {
/**
* The unique identifier of the layer.
*/
id;
/**
* The type of the layer, which is `Clear`.
*/
type = types_1.LayerType.Clear;
/**
* The z-index of the layer, determining its stacking order.
*/
zIndex;
/**
* The visibility of the layer.
*/
visible;
/**
* The properties of the Clear Layer.
*/
props;
/**
* Constructs a new ClearLayer instance.
* @param {IClearLayerProps} [props] - The properties of the Clear Layer.
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
*/
constructor(props, misc) {
this.id = misc?.id || (0, utils_2.generateID)(types_1.LayerType.Clear);
this.type = types_1.LayerType.Clear;
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 size of the layer.
* @param {ScaleType} [width] - The width of the layer.
* @param {ScaleType} [height] - The height of the layer.
* @returns {this} The current instance for chaining.
*/
setSize(width, height) {
this.props.size = {
width,
height
};
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 centring type of the layer.
* @param {AnyCentring} [centring] - The centring type of the layer.
* @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 of the layer.
* @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 of the layer.
* @returns {this} The current instance for chaining.
*/
setZIndex(zIndex) {
this.zIndex = zIndex;
return this;
}
/**
* Draws the Clear 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, 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);
if (debug)
LazyUtil_1.LazyLog.log('none', `ClearLayer:`, { x, y, w, h });
ctx.clearRect(x, y, w, h);
}
/**
* Converts the Clear Layer to a JSON representation.
* @returns {IClearLayer} The JSON representation of the Clear Layer.
*/
toJSON() {
let copy = { ...this.props };
for (const key of ['x', 'y', 'size.width', 'size.height']) {
if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
copy[key] = copy[key].toJSON();
}
}
return {
id: this.id,
type: this.type,
zIndex: this.zIndex,
visible: this.visible,
props: copy,
};
}
validateProps(props) {
return {
x: props.x || 0,
y: props.y || 0,
size: {
width: props.size?.width || 0,
height: props.size?.height || 0
},
centring: props.centring || 'none',
globalComposite: props.globalComposite || 'source-over'
};
}
}
exports.ClearLayer = ClearLayer;