@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

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 node_zlib_1 = require("node: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, node_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();
+}

package/dist/utils/DrawUtils.d.ts

@@ -0,0 +1,9 @@
+import { SKRSContext2D } from "@napi-rs/canvas";
+import { Signal } from "../core/Signal";
+import { StrokeOptions } from "../types";
+export declare class DrawUtils {
+    static drawShadow(ctx: SKRSContext2D, shadow: any): void;
+    static opacity(ctx: SKRSContext2D, opacity?: number | Signal<number>): void;
+    static filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
+    static fillStyle(ctx: SKRSContext2D, color: string | CanvasGradient | CanvasPattern, fillStyle?: StrokeOptions): void;
+}

package/dist/utils/DrawUtils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawUtils = void 0;
+const Signal_1 = require("../core/Signal");
+class DrawUtils {
+    static drawShadow(ctx, shadow) {
+        if (shadow) {
+            ctx.shadowColor = shadow.color;
+            ctx.shadowBlur = shadow.blur || 0;
+            ctx.shadowOffsetX = shadow.offsetX || 0;
+            ctx.shadowOffsetY = shadow.offsetY || 0;
+        }
+    }
+    static opacity(ctx, opacity = 1) {
+        const opacityValue = (0, Signal_1.unwrap)(opacity);
+        if (opacityValue < 1) {
+            ctx.globalAlpha = opacityValue;
+        }
+    }
+    static filters(ctx, filters) {
+        if (filters) {
+            ctx.filter = filters;
+        }
+    }
+    static fillStyle(ctx, color, fillStyle) {
+        if (fillStyle) {
+            ctx.lineWidth = fillStyle.width;
+            ctx.lineCap = fillStyle.cap || "butt";
+            ctx.lineJoin = fillStyle.join || "miter";
+            ctx.miterLimit = fillStyle.miterLimit || 10;
+            if (fillStyle.dash) {
+                ctx.setLineDash(fillStyle.dash);
+                ctx.lineDashOffset = fillStyle.dashOffset || 0;
+            }
+            ctx.strokeStyle = color;
+        }
+        else {
+            ctx.fillStyle = color;
+        }
+    }
+}
+exports.DrawUtils = DrawUtils;

package/dist/utils/LazyUtil.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultArg = exports.LazyLog = exports.LazyError = void 0;
 class LazyError extends Error {
-    message;
     constructor(message) {
         super(message);
         this.message = "[LazyCanvas] [ERROR] " + message;
@@ -31,5 +30,5 @@ exports.defaultArg = {
     },
     vl(vertical, layer) {
         return { vertical: vertical || false, layer: layer || false };
-    }
+    },
 };

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./APNGEncoder";
+export * from "./DrawUtils";
+export * from "./LazyUtil";
+export * from "./utils";

package/dist/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./APNGEncoder"), exports);
+__exportStar(require("./DrawUtils"), exports);
+__exportStar(require("./LazyUtil"), exports);
+__exportStar(require("./utils"), exports);

package/dist/utils/utils.d.ts

@@ -1,9 +1,9 @@
 import { AnyCentring, AnyLayer, AnyTextAlign, ColorType, LayerType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers";
-import { Group } from "../structures/components";
+import { Div } from "../structures/components";
 export declare function generateID(type: string): string;
-export declare function isColor(v: ColorType | SubStringColor): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare function isColor(v: ColorType | SubStringColor): boolean;
 export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, layer?: {
     width: number;
     height: number;
@@ -31,9 +31,6 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
         };
     }>): Record<string, number>;
 };
-export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
-export declare function opacity(ctx: SKRSContext2D, opacity?: number): void;
-export declare function filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
 export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | SubStringColor, opts: {
     debug?: boolean;
     layer?: {
@@ -44,7 +41,7 @@ export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | Su
         align: AnyCentring;
     };
     manager?: LayersManager;
-}): string | CanvasGradient | Promise<CanvasPattern>;
+}): string | Promise<CanvasPattern> | CanvasGradient;
 export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
     width: number;
     height: number;
@@ -80,4 +77,4 @@ export declare function getBoundingBoxBezier(points: PointNumber[], steps?: numb
     height: number;
 };
 export declare function resize(value: ScaleType, ratio: number): number | string;
-export declare function resizeLayers(layers: Array<AnyLayer | Group>, ratio: number): (AnyLayer | Group)[];
+export declare function resizeLayers(layers: Array<AnyLayer | Div>, ratio: number): (AnyLayer | Div)[];