@nmmty/lazycanvas
Version:
A simple way to interact with @napi-rs/canvas in an advanced way!
142 lines (141 loc) • 5.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LazyCanvas = void 0;
const types_1 = require("../types");
const canvas_1 = require("@napi-rs/canvas");
const LayersManager_1 = require("./managers/LayersManager");
const RenderManager_1 = require("./managers/RenderManager");
const FontsManager_1 = require("./managers/FontsManager");
const AnimationManager_1 = require("./managers/AnimationManager");
const LazyUtil_1 = require("../utils/LazyUtil");
const utils_1 = require("../utils/utils");
/**
* Class representing a LazyCanvas, which provides a structured way to manage canvas rendering.
*/
class LazyCanvas {
/**
* The canvas instance, which can be either a Canvas or SvgCanvas.
*/
canvas;
/**
* The 2D rendering context of the canvas.
*/
ctx;
/**
* The manager object containing various managers for layers, rendering, fonts, and animation.
*/
manager;
/**
* The options for configuring the LazyCanvas instance.
*/
options;
/**
* Constructs a new LazyCanvas instance.
* @param opts {Object} - Optional settings for the LazyCanvas instance.
* @param opts.debug {boolean} - Whether debugging is enabled.
* @param opts.settings {IOLazyCanvas} - The input settings for the LazyCanvas instance.
*/
constructor(opts) {
this.canvas = new canvas_1.Canvas(0, 0);
this.ctx = this.canvas.getContext('2d');
this.manager = {
layers: new LayersManager_1.LayersManager({ debug: opts?.debug }),
render: new RenderManager_1.RenderManager(this, { debug: opts?.debug }),
fonts: new FontsManager_1.FontsManager({ debug: opts?.debug }),
animation: new AnimationManager_1.AnimationManager({ debug: opts?.debug, settings: { options: opts?.settings?.animation } })
};
this.options = {
width: opts?.settings?.options.width || 0,
height: opts?.settings?.options.height || 0,
animated: opts?.settings?.options.animated || false,
exportType: opts?.settings?.options.exportType || types_1.Export.BUFFER,
flag: opts?.settings?.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding
};
if (opts?.debug)
LazyUtil_1.LazyLog.log('info', 'LazyCanvas initialized with settings:', opts.settings);
}
/**
* Sets the export type for the canvas.
* @param type {AnyExport} - The export type (e.g., buffer, SVG, etc.).
* @returns {this} The current instance for chaining.
*/
setExportType(type) {
this.options.exportType = type;
switch (type) {
case types_1.Export.BUFFER:
this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
this.ctx = this.canvas.getContext('2d');
break;
case types_1.Export.CTX:
break;
case types_1.Export.SVG:
this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
this.ctx = this.canvas.getContext('2d');
break;
}
return this;
}
/**
* Sets the SVG export flag. This method should be called after `setExportType`.
* @param flag {SvgExportFlag} - The SVG export flag.
* @returns {this} The current instance for chaining.
*/
setSvgExportFlag(flag) {
if (this.options.exportType === types_1.Export.SVG) {
this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, flag);
this.ctx = this.canvas.getContext('2d');
this.options.flag = flag;
}
return this;
}
/**
* Enables animation for the canvas.
* @returns {this} The current instance for chaining.
*/
animated() {
this.options.animated = true;
return this;
}
/**
* Resizes the canvas to the specified dimensions.
* @param ratio {number} - The ratio to resize the canvas.
* @returns {this} The current instance for chaining.
*/
resize(ratio) {
if (this.options.width <= 0 || this.options.height <= 0) {
throw new Error('Canvas dimensions are not set.');
}
this.options.width = (0, utils_1.resize)(this.options.width, ratio);
this.options.height = (0, utils_1.resize)(this.options.height, ratio);
if (this.options.exportType === types_1.Export.SVG) {
this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
}
else {
this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
}
this.ctx = this.canvas.getContext('2d');
const layers = (0, utils_1.resizeLayers)(this.manager.layers.toArray(), ratio);
this.manager.layers.fromArray(layers);
return this;
}
/**
* Creates a new canvas with the specified dimensions.
* @param width {number} - The width of the canvas.
* @param height {number} - The height of the canvas.
* @returns {this} The current instance for chaining.
*/
create(width, height) {
this.options.width = width;
this.options.height = height;
if (this.options.exportType === types_1.Export.SVG) {
this.canvas = new canvas_1.Canvas(width, height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
}
else {
this.canvas = new canvas_1.Canvas(width, height);
}
this.ctx = this.canvas.getContext('2d');
this.manager.layers = new LayersManager_1.LayersManager();
return this;
}
}
exports.LazyCanvas = LazyCanvas;