@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.3

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";

package/dist/utils/APNGEncoder.d.ts

@@ -0,0 +1,67 @@
+/**
+ * APNG Encoder that works directly with Uint8ClampedArray (ImageData)
+ * Much faster than encoding each frame to PNG separately
+ */
+export declare class APNGEncoder {
+    private frames;
+    private width;
+    private height;
+    private fps;
+    constructor(width: number, height: number, fps?: number);
+    /**
+     * Add a frame from ImageData
+     */
+    addFrame(imageData: Uint8ClampedArray): this;
+    addFrames(...imageDatas: Uint8ClampedArray[]): this;
+    /**
+     * Encode all frames to APNG buffer
+     */
+    encode(): Buffer;
+    /**
+     * Create IHDR chunk (image header)
+     */
+    private createIHDR;
+    /**
+     * Create acTL chunk (animation control)
+     */
+    private createACTL;
+    /**
+     * Create frame chunks (fcTL + fdAT or IDAT)
+     * @param frameIndex - Index of the frame (0-based)
+     * @param sequenceNumber - Global sequence number for fcTL/fdAT chunks
+     */
+    private createFrame;
+    /**
+     * Compress ImageData using PNG filter and zlib
+     */
+    private compressImageData;
+    /**
+     * Create IEND chunk
+     */
+    private createIEND;
+    /**
+     * Create a PNG chunk with length, type, data, and CRC
+     */
+    private createChunk;
+    /**
+     * Calculate CRC32 checksum
+     */
+    private crc32;
+    /**
+     * CRC32 lookup table
+     */
+    private crcTable;
+    /**
+     * Get number of frames
+     */
+    getFrameCount(): number;
+    /**
+     * Clear all frames
+     */
+    clear(): void;
+}
+export default APNGEncoder;
+/**
+ * Helper function to create APNG from ImageData array
+ */
+export declare function createAPNG(frames: Uint8ClampedArray[], width: number, height: number, fps?: number): Buffer;

package/dist/utils/APNGEncoder.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APNGEncoder = void 0;
+exports.createAPNG = createAPNG;
+const zlib_1 = require("zlib");
+/**
+ * APNG Encoder that works directly with Uint8ClampedArray (ImageData)
+ * Much faster than encoding each frame to PNG separately
+ */
+class APNGEncoder {
+    constructor(width, height, fps = 30) {
+        this.frames = [];
+        /**
+         * CRC32 lookup table
+         */
+        this.crcTable = (() => {
+            const table = new Uint32Array(256);
+            for (let i = 0; i < 256; i++) {
+                let c = i;
+                for (let k = 0; k < 8; k++) {
+                    c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+                }
+                table[i] = c;
+            }
+            return table;
+        })();
+        this.width = width;
+        this.height = height;
+        this.fps = fps;
+    }
+    /**
+     * Add a frame from ImageData
+     */
+    addFrame(imageData) {
+        if (imageData.length !== this.width * this.height * 4) {
+            throw new Error(`Invalid ImageData size. Expected ${this.width * this.height * 4}, got ${imageData.length}`);
+        }
+        this.frames.push(imageData);
+        return this;
+    }
+    addFrames(...imageDatas) {
+        for (const imageData of imageDatas) {
+            this.addFrame(imageData);
+        }
+        return this;
+    }
+    /**
+     * Encode all frames to APNG buffer
+     */
+    encode() {
+        if (this.frames.length === 0) {
+            throw new Error("No frames to encode");
+        }
+        const chunks = [];
+        // PNG signature
+        chunks.push(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]));
+        // IHDR chunk
+        chunks.push(this.createIHDR());
+        // acTL chunk (animation control)
+        chunks.push(this.createACTL());
+        // Add all frames with proper sequence numbering
+        let sequenceNumber = 0;
+        for (let i = 0; i < this.frames.length; i++) {
+            chunks.push(...this.createFrame(i, sequenceNumber));
+            // First frame: fcTL (0) + IDAT = 1 chunk with sequence
+            // Other frames: fcTL (n) + fdAT (n+1) = 2 chunks with sequences
+            sequenceNumber += i === 0 ? 1 : 2;
+        }
+        // IEND chunk
+        chunks.push(this.createIEND());
+        return Buffer.concat(chunks);
+    }
+    /**
+     * Create IHDR chunk (image header)
+     */
+    createIHDR() {
+        const data = Buffer.alloc(13);
+        data.writeUInt32BE(this.width, 0);
+        data.writeUInt32BE(this.height, 4);
+        data[8] = 8; // bit depth
+        data[9] = 6; // color type: RGBA
+        data[10] = 0; // compression method
+        data[11] = 0; // filter method
+        data[12] = 0; // interlace method
+        return this.createChunk("IHDR", data);
+    }
+    /**
+     * Create acTL chunk (animation control)
+     */
+    createACTL() {
+        const data = Buffer.alloc(8);
+        data.writeUInt32BE(this.frames.length, 0); // num_frames
+        data.writeUInt32BE(0, 4); // num_plays (0 = infinite)
+        return this.createChunk("acTL", data);
+    }
+    /**
+     * Create frame chunks (fcTL + fdAT or IDAT)
+     * @param frameIndex - Index of the frame (0-based)
+     * @param sequenceNumber - Global sequence number for fcTL/fdAT chunks
+     */
+    createFrame(frameIndex, sequenceNumber) {
+        const chunks = [];
+        // fcTL chunk (frame control) - always comes first
+        const fctl = Buffer.alloc(26);
+        fctl.writeUInt32BE(sequenceNumber, 0); // sequence_number
+        fctl.writeUInt32BE(this.width, 4); // width
+        fctl.writeUInt32BE(this.height, 8); // height
+        fctl.writeUInt32BE(0, 12); // x_offset
+        fctl.writeUInt32BE(0, 16); // y_offset
+        // Frame delay (delay_num / delay_den seconds)
+        const delayNum = 1;
+        const delayDen = this.fps;
+        fctl.writeUInt16BE(delayNum, 20);
+        fctl.writeUInt16BE(delayDen, 22);
+        fctl[24] = 0; // dispose_op: APNG_DISPOSE_OP_NONE
+        fctl[25] = 0; // blend_op: APNG_BLEND_OP_SOURCE
+        chunks.push(this.createChunk("fcTL", fctl));
+        // Compress frame data
+        const imageData = this.frames[frameIndex];
+        const compressed = this.compressImageData(imageData);
+        // First frame uses IDAT (no sequence number), subsequent frames use fdAT
+        if (frameIndex === 0) {
+            chunks.push(this.createChunk("IDAT", compressed));
+        }
+        else {
+            // fdAT includes sequence number (sequenceNumber + 1 for the data chunk)
+            const fdatData = Buffer.alloc(4 + compressed.length);
+            fdatData.writeUInt32BE(sequenceNumber + 1, 0);
+            compressed.copy(fdatData, 4);
+            chunks.push(this.createChunk("fdAT", fdatData));
+        }
+        return chunks;
+    }
+    /**
+     * Compress ImageData using PNG filter and zlib
+     */
+    compressImageData(imageData) {
+        const bytesPerPixel = 4; // RGBA
+        const stride = this.width * bytesPerPixel;
+        const filtered = Buffer.alloc(imageData.length + this.height);
+        // Apply PNG filter type 0 (None) to each scanline
+        for (let y = 0; y < this.height; y++) {
+            const offset = y * stride;
+            const filteredOffset = y * (stride + 1);
+            filtered[filteredOffset] = 0; // Filter type: None
+            imageData.subarray(offset, offset + stride).forEach((byte, i) => {
+                filtered[filteredOffset + 1 + i] = byte;
+            });
+        }
+        // Compress with zlib
+        return (0, zlib_1.deflateSync)(filtered, { level: 6 });
+    }
+    /**
+     * Create IEND chunk
+     */
+    createIEND() {
+        return this.createChunk("IEND", Buffer.alloc(0));
+    }
+    /**
+     * Create a PNG chunk with length, type, data, and CRC
+     */
+    createChunk(type, data) {
+        const length = Buffer.alloc(4);
+        length.writeUInt32BE(data.length, 0);
+        const typeBuffer = Buffer.from(type, "ascii");
+        const crc = this.crc32(Buffer.concat([typeBuffer, data]));
+        const crcBuffer = Buffer.alloc(4);
+        crcBuffer.writeUInt32BE(crc, 0);
+        return Buffer.concat([length, typeBuffer, data, crcBuffer]);
+    }
+    /**
+     * Calculate CRC32 checksum
+     */
+    crc32(data) {
+        let crc = 0xffffffff;
+        for (let i = 0; i < data.length; i++) {
+            crc = this.crcTable[(crc ^ data[i]) & 0xff] ^ (crc >>> 8);
+        }
+        return (crc ^ 0xffffffff) >>> 0;
+    }
+    /**
+     * Get number of frames
+     */
+    getFrameCount() {
+        return this.frames.length;
+    }
+    /**
+     * Clear all frames
+     */
+    clear() {
+        this.frames = [];
+    }
+}
+exports.APNGEncoder = APNGEncoder;
+exports.default = APNGEncoder;
+/**
+ * Helper function to create APNG from ImageData array
+ */
+function createAPNG(frames, width, height, fps = 30) {
+    const encoder = new APNGEncoder(width, height, fps);
+    for (const frame of frames) {
+        encoder.addFrame(frame);
+    }
+    return encoder.encode();
+}