@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.4

package/dist/structures/managers/LayersManager.d.ts

@@ -1,18 +1,13 @@
 import { AnyLayer } from "../../types";
-import { Group } from "../components";
-import { LazyCanvas } from "../LazyCanvas";
+import { Div } from "../components";
 /**
  * Interface representing the LayersManager.
  */
 export interface ILayersManager {
-    /**
-     * The LazyCanvas instance associated with this manager.
-     */
-    lazyCanvas: LazyCanvas;
     /**
      * A map storing layers or groups with their IDs as keys.
      */
-    map: Map<string, AnyLayer | Group>;
+    map: Map<string, AnyLayer | Div>;
     /**
      * Whether debugging is enabled.
      */
@@ -22,34 +17,29 @@ export interface ILayersManager {
  * Class representing a manager for handling layers and groups.
  */
 export declare class LayersManager implements ILayersManager {
-    /**
-     * The LazyCanvas instance associated with this manager.
-     */
-    lazyCanvas: LazyCanvas;
     /**
      * A map storing layers or groups with their IDs as keys.
      */
-    map: Map<string, AnyLayer | Group>;
+    map: Map<string, AnyLayer | Div>;
     /**
      * Whether debugging is enabled.
      */
     debug: boolean;
     /**
      * Constructs a new LayersManager instance.
-     * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to associate with this manager.
      * @param {Object} [opts] - Optional settings for the LayersManager.
      * @param {boolean} [opts.debug] - Whether debugging is enabled.
      */
-    constructor(lazyCanvas: LazyCanvas, opts?: {
+    constructor(opts?: {
         debug?: boolean;
     });
     /**
      * Adds layers or groups to the map.
-     * @param {Array<AnyLayer | Group>} [layers] - The layers or groups to add to the map.
+     * @param {Array<AnyLayer | Div>} [layers] - The layers or groups to add to the map.
      * @returns {this} The current instance for chaining.
      * @throws {LazyError} If a layer with the same ID already exists.
      */
-    add(...layers: Array<AnyLayer | Group>): this;
+    add(...layers: Array<AnyLayer | Div>): this;
     /**
      * Removes layers or groups from the map by their IDs.
      * @param {string[]} [ids] - The IDs of the layers or groups to remove.
@@ -65,9 +55,9 @@ export declare class LayersManager implements ILayersManager {
      * Retrieves a layer or group from the map by its ID.
      * @param {string} [id] - The ID of the layer or group to retrieve.
      * @param {boolean} [cross] - Whether to search within groups for the ID.
-     * @returns {AnyLayer | Group | undefined} The retrieved layer or group, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The retrieved layer or group, or undefined if not found.
      */
-    get(id: string, cross?: boolean): AnyLayer | Group | undefined;
+    get(id: string, cross?: boolean): AnyLayer | Div | undefined;
     /**
      * Checks if a layer or group exists in the map by its ID.
      * @param {string} [id] - The ID of the layer or group to check.
@@ -81,9 +71,9 @@ export declare class LayersManager implements ILayersManager {
     size(): number;
     /**
      * Retrieves the values (layers and groups) from the map.
-     * @returns {IterableIterator<AnyLayer | Group>} An iterator for the map values.
+     * @returns {IterableIterator<AnyLayer | Div>} An iterator for the map values.
      */
-    values(): IterableIterator<AnyLayer | Group>;
+    values(): IterableIterator<AnyLayer | Div>;
     /**
      * Retrieves the keys (IDs) from the map.
      * @returns {IterableIterator<string>} An iterator for the map keys.
@@ -91,15 +81,15 @@ export declare class LayersManager implements ILayersManager {
     keys(): IterableIterator<string>;
     /**
      * Retrieves the entries (key-value pairs) from the map.
-     * @returns {IterableIterator<[string, AnyLayer | Group]>} An iterator for the map entries.
+     * @returns {IterableIterator<[string, AnyLayer | Div]>} An iterator for the map entries.
      */
-    entries(): IterableIterator<[string, AnyLayer | Group]>;
+    entries(): IterableIterator<[string, AnyLayer | Div]>;
     /**
      * Executes a callback function for each layer or group in the map.
      * @param {Function} [callbackfn] - The callback function to execute.
      * @returns {this} The current instance for chaining.
      */
-    forEach(callbackfn: (value: AnyLayer | Group, key: string, map: Map<string, AnyLayer | Group>) => void): this;
+    forEach(callbackfn: (value: AnyLayer | Div, key: string, map: Map<string, AnyLayer | Div>) => void): this;
     /**
      * Converts the map to a JSON object.
      * @returns {object} The JSON representation of the map.
@@ -113,15 +103,15 @@ export declare class LayersManager implements ILayersManager {
     fromJSON(json: object): this;
     /**
      * Converts the map to an array of layers and groups.
-     * @returns {Array<AnyLayer | Group>} An array of layers and groups.
+     * @returns {Array<AnyLayer | Div>} An array of layers and groups.
      */
-    toArray(): Array<AnyLayer | Group>;
+    toArray(): Array<AnyLayer | Div>;
     /**
      * Populates the map from an array of layers and groups.
-     * @param {Array<AnyLayer | Group>} [array] - The array of layers and groups to populate the map from.
+     * @param {Array<AnyLayer | Div>} [array] - The array of layers and groups to populate the map from.
      * @returns {this} The current instance for chaining.
      */
-    fromArray(array: Array<AnyLayer | Group>): this;
+    fromArray(array: Array<AnyLayer | Div>): this;
     /**
      * Sorts the layers and groups in the map by their zIndex property.
      * @returns {void}
@@ -130,7 +120,7 @@ export declare class LayersManager implements ILayersManager {
     /**
      * Searches for a layer or group by its ID, including within groups.
      * @param {string} [id] - The ID of the layer or group to search for.
-     * @returns {AnyLayer | Group | undefined} The found layer or group, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The found layer or group, or undefined if not found.
      */
     private crossSearch;
 }

package/dist/structures/managers/LayersManager.js

@@ -7,50 +7,32 @@ const LazyUtil_1 = require("../../utils/LazyUtil");
  * Class representing a manager for handling layers and groups.
  */
 class LayersManager {
-    /**
-     * The LazyCanvas instance associated with this manager.
-     */
-    lazyCanvas;
-    /**
-     * A map storing layers or groups with their IDs as keys.
-     */
-    map;
-    /**
-     * Whether debugging is enabled.
-     */
-    debug;
     /**
      * Constructs a new LayersManager instance.
-     * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to associate with this manager.
      * @param {Object} [opts] - Optional settings for the LayersManager.
      * @param {boolean} [opts.debug] - Whether debugging is enabled.
      */
-    constructor(lazyCanvas, opts) {
-        this.lazyCanvas = lazyCanvas;
+    constructor(opts) {
         this.map = new Map();
         this.debug = opts?.debug || false;
     }
     /**
      * Adds layers or groups to the map.
-     * @param {Array<AnyLayer | Group>} [layers] - The layers or groups to add to the map.
+     * @param {Array<AnyLayer | Div>} [layers] - The layers or groups to add to the map.
      * @returns {this} The current instance for chaining.
      * @throws {LazyError} If a layer with the same ID already exists.
      */
     add(...layers) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Adding layers...\nlength: ${layers.length}`);
+            LazyUtil_1.LazyLog.log("info", `Adding layers...\nlength: ${layers.length}`);
         let layersArray = layers.flat();
-        layersArray = layersArray.filter(l => l !== undefined);
+        layersArray = layersArray.filter((l) => l !== undefined);
         for (const layer of layersArray) {
             if (this.debug)
-                LazyUtil_1.LazyLog.log('none', `Data:`, 'toJSON' in layer ? layer.toJSON() : layer);
+                LazyUtil_1.LazyLog.log("none", `Data:`, "toJSON" in layer ? layer.toJSON() : layer);
             if (this.map.has(layer.id))
                 throw new LazyUtil_1.LazyError("Layer already exists");
             this.map.set(layer.id, layer);
-            // onLayerAdded hook
-            if (this.lazyCanvas && this.lazyCanvas.manager?.plugins) {
-                this.lazyCanvas.manager.plugins.executeHook('onLayerAdded', this.lazyCanvas, layer);
-            }
         }
         this.sort();
         return this;
@@ -64,10 +46,6 @@ class LayersManager {
         for (const id of ids) {
             const layer = this.map.get(id);
             this.map.delete(id);
-            // onLayerRemoved hook
-            if (this.lazyCanvas && this.lazyCanvas.manager?.plugins) {
-                this.lazyCanvas.manager.plugins.executeHook('onLayerRemoved', this.lazyCanvas, id);
-            }
         }
         return this;
     }
@@ -83,7 +61,7 @@ class LayersManager {
      * Retrieves a layer or group from the map by its ID.
      * @param {string} [id] - The ID of the layer or group to retrieve.
      * @param {boolean} [cross] - Whether to search within groups for the ID.
-     * @returns {AnyLayer | Group | undefined} The retrieved layer or group, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The retrieved layer or group, or undefined if not found.
      */
     get(id, cross = false) {
         if (cross)
@@ -108,7 +86,7 @@ class LayersManager {
     }
     /**
      * Retrieves the values (layers and groups) from the map.
-     * @returns {IterableIterator<AnyLayer | Group>} An iterator for the map values.
+     * @returns {IterableIterator<AnyLayer | Div>} An iterator for the map values.
      */
     values() {
         return this.map.values();
@@ -122,7 +100,7 @@ class LayersManager {
     }
     /**
      * Retrieves the entries (key-value pairs) from the map.
-     * @returns {IterableIterator<[string, AnyLayer | Group]>} An iterator for the map entries.
+     * @returns {IterableIterator<[string, AnyLayer | Div]>} An iterator for the map entries.
      */
     entries() {
         return this.map.entries();
@@ -154,18 +132,18 @@ class LayersManager {
     }
     /**
      * Converts the map to an array of layers and groups.
-     * @returns {Array<AnyLayer | Group>} An array of layers and groups.
+     * @returns {Array<AnyLayer | Div>} An array of layers and groups.
      */
     toArray() {
         return Array.from(this.map.values());
     }
     /**
      * Populates the map from an array of layers and groups.
-     * @param {Array<AnyLayer | Group>} [array] - The array of layers and groups to populate the map from.
+     * @param {Array<AnyLayer | Div>} [array] - The array of layers and groups to populate the map from.
      * @returns {this} The current instance for chaining.
      */
     fromArray(array) {
-        this.map = new Map(array.map(l => [l.id, l]));
+        this.map = new Map(array.map((l) => [l.id, l]));
         return this;
     }
     /**
@@ -178,14 +156,14 @@ class LayersManager {
     /**
      * Searches for a layer or group by its ID, including within groups.
      * @param {string} [id] - The ID of the layer or group to search for.
-     * @returns {AnyLayer | Group | undefined} The found layer or group, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The found layer or group, or undefined if not found.
      */
     crossSearch(id) {
         for (const layer of Array.from(this.map.values())) {
             if (layer.id === id)
                 return layer;
-            if (layer instanceof components_1.Group) {
-                const result = layer.layers.find(l => l.id === id);
+            if (layer instanceof components_1.Div) {
+                const result = layer.layers.find((l) => l.id === id);
                 if (result)
                     return result;
             }

package/dist/structures/managers/RenderManager.d.ts

@@ -35,18 +35,9 @@ export declare class RenderManager implements IRenderManager {
     constructor(lazyCanvas: LazyCanvas, opts?: {
         debug?: boolean;
     });
-    /**
-     * Merges multiple ImageData objects into a single ImageData object.
-     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
-     * @param {ImageData[]} [imageDataList] - The list of ImageData objects to merge.
-     * @param {number} [width] - The width of the resulting ImageData.
-     * @param {number} [height] - The height of the resulting ImageData.
-     * @returns {ImageData} The merged ImageData object.
-     */
-    private mergeImageData;
     /**
      * Renders a single layer or group of layers.
-     * @param {AnyLayer | Group} [layer] - The layer or group to render.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
      * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
      */
     private renderLayer;
@@ -56,11 +47,6 @@ export declare class RenderManager implements IRenderManager {
      * @returns {Promise<Buffer | SKRSContext2D | string>} The rendered output in the specified format.
      */
     private renderStatic;
-    /**
-     * Renders an animated sequence of layers and exports it as a GIF.
-     * @returns {Promise<Buffer>} The rendered animation as a Buffer.
-     */
-    private renderAnimation;
     /**
      * Renders all layers and exports the result in the specified format.
      * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).

package/dist/structures/managers/RenderManager.js

@@ -3,20 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManager = void 0;
 const types_1 = require("../../types");
 const LazyUtil_1 = require("../../utils/LazyUtil");
-// @ts-ignore
-const gifenc_1 = require("gifenc");
 /**
  * Class responsible for managing rendering operations, including static and animated exports.
  */
 class RenderManager {
-    /**
-     * The LazyCanvas instance used for rendering.
-     */
-    lazyCanvas;
-    /**
-     * Whether debugging is enabled.
-     */
-    debug;
     /**
      * Constructs a new RenderManager instance.
      * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to use for rendering.
@@ -27,48 +17,18 @@ class RenderManager {
         this.lazyCanvas = lazyCanvas;
         this.debug = opts?.debug || false;
     }
-    /**
-     * Merges multiple ImageData objects into a single ImageData object.
-     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
-     * @param {ImageData[]} [imageDataList] - The list of ImageData objects to merge.
-     * @param {number} [width] - The width of the resulting ImageData.
-     * @param {number} [height] - The height of the resulting ImageData.
-     * @returns {ImageData} The merged ImageData object.
-     */
-    mergeImageData(ctx, imageDataList, width, height) {
-        const mergedData = ctx.createImageData(width, height);
-        const mergedPixels = mergedData.data;
-        for (const imageData of imageDataList) {
-            const pixels = imageData.data;
-            for (let i = 0; i < pixels.length; i += 4) {
-                const r = pixels[i];
-                const g = pixels[i + 1];
-                const b = pixels[i + 2];
-                const a = pixels[i + 3] / 255;
-                const existingAlpha = mergedPixels[i + 3] / 255;
-                const newAlpha = a + existingAlpha * (1 - a);
-                if (newAlpha > 0) {
-                    mergedPixels[i] = (r * a + mergedPixels[i] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 1] = (g * a + mergedPixels[i + 1] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 2] = (b * a + mergedPixels[i + 2] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 3] = newAlpha * 255;
-                }
-            }
-        }
-        return mergedData;
-    }
     /**
      * Renders a single layer or group of layers.
-     * @param {AnyLayer | Group} [layer] - The layer or group to render.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
      * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
      */
     async renderLayer(layer) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering ${layer.id}...\nData:`, layer.toJSON());
+            LazyUtil_1.LazyLog.log("info", `Rendering ${layer.id}...\nData:`, layer.toJSON());
         if (layer.visible) {
-            this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || 'source-over';
+            this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || "source-over";
             await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.manager.layers, this.debug);
-            this.lazyCanvas.ctx.shadowColor = 'transparent';
+            this.lazyCanvas.ctx.shadowColor = "transparent";
         }
         return this.lazyCanvas.ctx;
     }
@@ -79,7 +39,7 @@ class RenderManager {
      */
     async renderStatic(exportType) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering static...`);
+            LazyUtil_1.LazyLog.log("info", `Rendering static...`);
         for (const layer of this.lazyCanvas.manager.layers.toArray()) {
             await this.renderLayer(layer);
         }
@@ -88,96 +48,43 @@ class RenderManager {
             case "buffer":
             case types_1.Export.SVG:
             case "svg":
-                if ('getContent' in this.lazyCanvas.canvas) {
-                    return this.lazyCanvas.canvas.getContent().toString('utf8');
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
                 }
-                return this.lazyCanvas.canvas.toBuffer('image/png');
+                return this.lazyCanvas.canvas.toBuffer("image/png");
             case types_1.Export.CTX:
             case "ctx":
                 return this.lazyCanvas.ctx;
             default:
-                if ('getContent' in this.lazyCanvas.canvas) {
-                    return this.lazyCanvas.canvas.getContent().toString('utf8');
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
                 }
-                return this.lazyCanvas.canvas.toBuffer('image/png');
+                return this.lazyCanvas.canvas.toBuffer("image/png");
         }
     }
-    /**
-     * Renders an animated sequence of layers and exports it as a GIF.
-     * @returns {Promise<Buffer>} The rendered animation as a Buffer.
-     */
-    async renderAnimation() {
-        const encoder = new gifenc_1.GIFEncoder();
-        if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering animation...\nData:`, this.lazyCanvas.manager.animation.options);
-        const frameBuffer = [];
-        const { width, height } = this.lazyCanvas.options;
-        const delay = 1000 / this.lazyCanvas.manager.animation.options.frameRate;
-        const { loop, colorSpace, maxColors, transparency, utils } = this.lazyCanvas.manager.animation.options;
-        let frameNumber = 0;
-        for (const layer of this.lazyCanvas.manager.layers.toArray()) {
-            // onAnimationFrame hook
-            this.lazyCanvas.manager.plugins.executeHook('onAnimationFrame', this.lazyCanvas, frameNumber);
-            const ctx = await this.renderLayer(layer);
-            frameBuffer.push(ctx.getImageData(0, 0, width, height));
-            if (frameBuffer.length > utils.buffer.size) {
-                frameBuffer.shift();
-            }
-            const mergeData = this.mergeImageData(ctx, frameBuffer, width, height);
-            const palette = (0, gifenc_1.quantize)(mergeData.data, maxColors, { format: colorSpace });
-            const index = (0, gifenc_1.applyPalette)(mergeData.data, palette, colorSpace);
-            encoder.writeFrame(index, width, height, {
-                palette,
-                transparent: transparency,
-                delay,
-                loop
-            });
-            if (utils.clear)
-                ctx.clearRect(0, 0, width, height);
-            frameNumber++;
-        }
-        encoder.finish();
-        return encoder.bytesView();
-    }
     /**
      * Renders all layers and exports the result in the specified format.
      * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).
      * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The rendered output in the specified format.
      */
     async render(format) {
-        let result;
-        // beforeRender hook
-        this.lazyCanvas.manager.plugins.executeHook('beforeRender', this.lazyCanvas);
         switch (format) {
             case types_1.Export.BUFFER:
             case "buffer":
-                if (this.lazyCanvas.options.animated) {
-                    result = await this.renderAnimation();
-                }
-                else {
-                    result = await this.renderStatic(types_1.Export.BUFFER);
-                }
-                break;
+                return await this.renderStatic(types_1.Export.BUFFER);
             case types_1.Export.CTX:
             case "ctx":
-                result = this.lazyCanvas.ctx;
-                break;
+                return this.lazyCanvas.ctx;
             case types_1.Export.SVG:
             case "svg":
-                result = await this.renderStatic(types_1.Export.SVG);
-                break;
+                return await this.renderStatic(types_1.Export.SVG);
             case types_1.Export.CANVAS:
             case "canvas":
-                await this.renderStatic(this.lazyCanvas.options.exportType === 'svg' ? types_1.Export.SVG : types_1.Export.BUFFER);
-                result = this.lazyCanvas.canvas;
-                break;
+                await this.renderStatic(this.lazyCanvas.options.exportType === "svg" ? types_1.Export.SVG : types_1.Export.BUFFER);
+                return this.lazyCanvas.canvas;
             default:
-                result = await this.renderStatic(types_1.Export.BUFFER);
-                break;
+                return await this.renderStatic(types_1.Export.BUFFER);
         }
-        // afterRender hook
-        this.lazyCanvas.manager.plugins.executeHook('afterRender', this.lazyCanvas);
-        return result;
     }
 }
 exports.RenderManager = RenderManager;

package/dist/structures/managers/index.d.ts

@@ -1,5 +1,3 @@
-export * from './LayersManager';
-export * from './PluginManager';
-export * from './FontsManager';
-export * from './RenderManager';
-export * from './AnimationManager';
+export * from "./LayersManager";
+export * from "./FontsManager";
+export * from "./RenderManager";

package/dist/structures/managers/index.js

@@ -15,7 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./LayersManager"), exports);
-__exportStar(require("./PluginManager"), exports);
 __exportStar(require("./FontsManager"), exports);
 __exportStar(require("./RenderManager"), exports);
-__exportStar(require("./AnimationManager"), exports);

package/dist/types/enum.d.ts

@@ -73,10 +73,9 @@ export declare enum Export {
     CTX = "ctx",
     BUFFER = "buffer",
     PNG = "png",
-    JPEG = "jpeg",
+    APNG = "apng",
     JPG = "jpg",
     SVG = "svg",
-    GIF = "gif",
     WEBP = "webp",
     YAML = "yaml",
     JSON = "json"

package/dist/types/enum.js

@@ -86,10 +86,9 @@ var Export;
     Export["CTX"] = "ctx";
     Export["BUFFER"] = "buffer";
     Export["PNG"] = "png";
-    Export["JPEG"] = "jpeg";
+    Export["APNG"] = "apng";
     Export["JPG"] = "jpg";
     Export["SVG"] = "svg";
-    Export["GIF"] = "gif";
     Export["WEBP"] = "webp";
     Export["YAML"] = "yaml";
     Export["JSON"] = "json";

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export type * from "./types";
-export * from './enum';
+export * from "./enum";