@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.4

package/dist/types/types.d.ts

@@ -1,107 +1,232 @@
-import { Gradient, Link, Pattern } from "../structures/helpers";
-import {
-    MorphLayer,
-    ImageLayer,
-    TextLayer,
-    BezierLayer,
-    QuadraticLayer,
-    LineLayer,
-    ClearLayer,
-    Path2DLayer,
-    IMorphLayer,
-    IBezierLayer,
-    IClearLayer,
-    IImageLayer,
-    ITextLayer,
-    IQuadraticLayer,
-    ILineLayer,
-    IPath2DLayer,
-    IPolygonLayer,
-    PolygonLayer
-} from "../structures/components";
-import {
-    FontWeight,
-    GradientType,
-    TextAlign,
-    TextBaseline,
-    TextDirection,
-    LineCap,
-    LineJoin,
-    Export,
-    Centring,
-    PatternType,
-    LinkType,
-    GlobalCompositeOperation,
-    ColorSpace,
-} from "./enum";
-
-export type ScaleType = `link-w-${string}-${number}` | `link-h-${string}-${number}` | `link-x-${string}-${number}` | `link-y-${string}-${number}` | `${number}%` | `${number}px` | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
-
-export type StringColorType = `rgba(${number}, ${number}, ${number}, ${number})` | `rgb(${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | `#${string}` | string;
-
-export type ColorType = Gradient | Pattern | StringColorType;
-
-export type JSONLayer = IMorphLayer | IImageLayer | ITextLayer | IBezierLayer | IQuadraticLayer | ILineLayer | IClearLayer | IPath2DLayer | IPolygonLayer;
-
-export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Path2DLayer | PolygonLayer;
-
-export type AnyWeight = FontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
-
-export type AnyGradientType = GradientType | 'linear' | 'radial' | 'conic';
-
-export type AnyTextAlign = TextAlign | 'left' | 'right' | 'center' | 'start' | 'end';
-
-export type AnyTextBaseline = TextBaseline | 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
-
-export type AnyTextDirection = TextDirection | 'ltr' | 'rtl' | 'inherit';
-
-export type AnyLineCap = LineCap | 'butt' | 'round' | 'square';
-
-export type AnyLineJoin = LineJoin | 'bevel' | 'round' | 'miter';
-
-export type AnyExport = Export | 'canvas' | 'ctx' | 'buffer' | 'svg' | 'png' | 'jpeg' | 'jpg' | 'gif' | 'webp' | 'yaml' | 'json';
-
-export type AnyCentring = Centring | 'start' | 'start-top' | 'start-bottom' | 'center' | 'center-top' | 'center-bottom' | 'end' | 'end-top' | 'end-bottom' | 'none';
-
-export type AnyPatternType = PatternType | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
-
-export type AnyLinkType = LinkType | 'width' | 'height' | 'x' | 'y';
-
-export type AnyGlobalCompositeOperation = GlobalCompositeOperation | 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'lighter' | 'copy' | 'xor' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
-
-export type AnyColorSpace = ColorSpace | 'rgb565' | 'rgba4444' | 'rgba444';
-
-export type AnyFilter = `sepia(${number}%)` | `saturate(${number}%)` | `opacity(${number}%)` | `invert(${number}%)` | `hue-rotate(${number}deg)` | `grayscale(${number}%)` | `drop-shadow(${number}px ${number}px ${number}px ${string})` | `contrast(${number}%)` | `brightness(${number}%)` | `blur(${number}px)`;
-
-export type Point = {
-    x: ScaleType;
-    y: ScaleType;
-}
-
-export type PointNumber = {
-    x: number;
-    y: number;
-};
-
-export type Extensions = 'svg' | 'png' | 'jpeg' | 'jpg' | 'gif' | 'webp' | 'yaml' | 'json';
-
-export interface Transform {
-    rotate: number;
-    scale: {
-        x: number;
-        y: number;
-    };
-    translate: {
-        x: number;
-        y: number;
-    };
-    matrix: DOMMatrix2DInit;
-}
-
-export type RadiusCorner = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'all';
-
-export type SubStringColor = {
-    color: StringColorType;
-    start: number;
-    end: number;
-}
+import { Gradient, Link, Pattern } from "../structures/helpers";
+import {
+  MorphLayer,
+  ImageLayer,
+  TextLayer,
+  BezierLayer,
+  QuadraticLayer,
+  LineLayer,
+  Path2DLayer,
+  IMorphLayer,
+  IBezierLayer,
+  IImageLayer,
+  ITextLayer,
+  IQuadraticLayer,
+  ILineLayer,
+  IPath2DLayer,
+  IPolygonLayer,
+  PolygonLayer,
+} from "../structures/components";
+import {
+  FontWeight,
+  GradientType,
+  TextAlign,
+  TextBaseline,
+  TextDirection,
+  LineCap,
+  LineJoin,
+  Export,
+  Centring,
+  PatternType,
+  LinkType,
+  GlobalCompositeOperation,
+  ColorSpace,
+} from "./enum";
+import {
+  Signal,
+  ThreadGenerator,
+  SignalOptions,
+  TweenConfig,
+  unwrap,
+  isSignal,
+} from "../core/Signal";
+
+// Utility type for signal-enabled values
+export type Signalable<T> = T | Signal<T>;
+
+// Re-export for convenience
+export type { ThreadGenerator, SignalOptions, TweenConfig };
+export { unwrap, isSignal };
+
+// Core types with Signal support
+export type ScaleType =
+  | `link-w-${string}-${number}`
+  | `link-h-${string}-${number}`
+  | `link-x-${string}-${number}`
+  | `link-y-${string}-${number}`
+  | `${number}%`
+  | `${number}px`
+  | number
+  | "vw"
+  | "vh"
+  | "vmin"
+  | "vmax"
+  | Link
+  | Signal<number>;
+
+export type StringColorType =
+  | `rgba(${number}, ${number}, ${number}, ${number})`
+  | `rgb(${number}, ${number}, ${number})`
+  | `hsl(${number}, ${number}%, ${number}%)`
+  | `hsla(${number}, ${number}%, ${number}%, ${number})`
+  | `#${string}`
+  | string
+  | Signal<string>;
+
+export type ColorType = Gradient | Pattern | StringColorType;
+
+export type JSONLayer =
+  | IMorphLayer
+  | IImageLayer
+  | ITextLayer
+  | IBezierLayer
+  | IQuadraticLayer
+  | ILineLayer
+  | IPath2DLayer
+  | IPolygonLayer;
+
+export type AnyLayer =
+  | MorphLayer
+  | ImageLayer
+  | TextLayer
+  | BezierLayer
+  | QuadraticLayer
+  | LineLayer
+  | Path2DLayer
+  | PolygonLayer;
+
+export type AnyWeight = FontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+export type AnyGradientType = GradientType | "linear" | "radial" | "conic";
+
+export type AnyTextAlign = TextAlign | "left" | "right" | "center" | "start" | "end";
+
+export type AnyTextBaseline =
+  | TextBaseline
+  | "top"
+  | "hanging"
+  | "middle"
+  | "alphabetic"
+  | "ideographic"
+  | "bottom";
+
+export type AnyTextDirection = TextDirection | "ltr" | "rtl" | "inherit";
+
+export type AnyLineCap = LineCap | "butt" | "round" | "square";
+
+export type AnyLineJoin = LineJoin | "bevel" | "round" | "miter";
+
+export type AnyExport =
+  | Export
+  | "canvas"
+  | "ctx"
+  | "buffer"
+  | "svg"
+  | "png"
+  | "apng"
+  | "jpg"
+  | "webp"
+  | "yaml"
+  | "json";
+
+export type AnyCentring =
+  | Centring
+  | "start"
+  | "start-top"
+  | "start-bottom"
+  | "center"
+  | "center-top"
+  | "center-bottom"
+  | "end"
+  | "end-top"
+  | "end-bottom"
+  | "none";
+
+export type AnyPatternType = PatternType | "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
+
+export type AnyLinkType = LinkType | "width" | "height" | "x" | "y";
+
+export type AnyGlobalCompositeOperation =
+  | GlobalCompositeOperation
+  | "source-over"
+  | "source-in"
+  | "source-out"
+  | "source-atop"
+  | "destination-over"
+  | "destination-in"
+  | "destination-out"
+  | "destination-atop"
+  | "lighter"
+  | "copy"
+  | "xor"
+  | "multiply"
+  | "screen"
+  | "overlay"
+  | "darken"
+  | "lighten"
+  | "color-dodge"
+  | "color-burn"
+  | "hard-light"
+  | "soft-light"
+  | "difference"
+  | "exclusion"
+  | "hue"
+  | "saturation"
+  | "color"
+  | "luminosity";
+
+export type AnyColorSpace = ColorSpace | "rgb565" | "rgba4444" | "rgba444";
+
+export type AnyFilter =
+  | `sepia(${number}%)`
+  | `saturate(${number}%)`
+  | `opacity(${number}%)`
+  | `invert(${number}%)`
+  | `hue-rotate(${number}deg)`
+  | `grayscale(${number}%)`
+  | `drop-shadow(${number}px ${number}px ${number}px ${string})`
+  | `contrast(${number}%)`
+  | `brightness(${number}%)`
+  | `blur(${number}px)`;
+
+export type Point = {
+  x: ScaleType;
+  y: ScaleType;
+};
+
+export type PointNumber = {
+  x: number;
+  y: number;
+};
+
+export type Extensions = "svg" | "png" | "jpeg" | "jpg" | "gif" | "webp" | "yaml" | "json";
+
+export interface Transform {
+  rotate?: number;
+  scale?: {
+    x: number;
+    y: number;
+  };
+  translate?: {
+    x: number;
+    y: number;
+  };
+  matrix?: DOMMatrix2DInit;
+}
+
+export type RadiusCorner = "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "all";
+
+export type SubStringColor = {
+  color: StringColorType;
+  start: number;
+  end: number;
+};
+
+export type StrokeOptions = {
+  width: number;
+  cap?: CanvasLineCap;
+  join?: CanvasLineJoin;
+  dashOffset?: number;
+  dash?: number[];
+  miterLimit?: number;
+};

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 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 };
-    }
+    },
 };