@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

package/dist/structures/managers/piplines/ModernRenderPipeline.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModernRenderPipeline = void 0;
+const types_1 = require("../../../types");
+const components_1 = require("../../components");
+const LazyUtil_1 = require("../../../utils/LazyUtil");
+/**
+ * Class responsible for managing rendering operations, including static and animated exports.
+ */
+class ModernRenderPipeline {
+    /**
+     * Constructs a new RenderManager instance.
+     * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to use for rendering.
+     * @param {Object} [opts] - Optional settings for the RenderManager.
+     * @param {boolean} [opts.debug] - Whether debugging is enabled.
+     */
+    constructor(lazyCanvas, opts) {
+        this.lazyCanvas = lazyCanvas;
+        this.debug = opts?.debug || false;
+    }
+    /**
+     * Renders a single layer or group of layers.
+     * @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());
+        if (layer.visible) {
+            this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || "source-over";
+            await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.manager.layers, this.debug);
+            // Draw children if any (and not a Div, as Div handles its own children)
+            // Actually, if we want to support children on any layer, we should handle it here.
+            // But Div.draw already handles children.
+            // If we handle it here for Div, we get double rendering.
+            // So we skip Div.
+            const children = layer.children;
+            if (!(layer instanceof components_1.Div) && children && Array.isArray(children) && children.length > 0) {
+                const ctx = this.lazyCanvas.ctx;
+                ctx.save();
+                // Apply parent position offset
+                // LayoutManager sets position relative to parent.
+                // We need to translate context to parent's position so children are drawn relative to it.
+                // However, layer.draw() might have already drawn the layer at that position.
+                // And layer.draw() usually restores context.
+                // So we are back at parent's parent coordinate system.
+                // We need to translate to layer's position.
+                if (layer.props.position) {
+                    const x = typeof layer.props.position.x === "number" ? layer.props.position.x : 0;
+                    const y = typeof layer.props.position.y === "number" ? layer.props.position.y : 0;
+                    ctx.translate(x, y);
+                }
+                for (const child of children) {
+                    await this.renderLayer(child);
+                }
+                ctx.restore();
+            }
+            this.lazyCanvas.ctx.shadowColor = "transparent";
+        }
+        return this.lazyCanvas.ctx;
+    }
+    /**
+     * Renders all layers statically and exports the result in the specified format.
+     * @param {AnyExport} [exportType] - The export format (e.g., buffer, SVG, or context).
+     * @returns {Promise<Buffer | SKRSContext2D | string>} The rendered output in the specified format.
+     */
+    async renderStatic(exportType) {
+        if (this.debug)
+            LazyUtil_1.LazyLog.log("info", `Rendering static...`);
+        // Wait for layout engine to be ready
+        await this.lazyCanvas.manager.layout.ready;
+        const rootLayers = this.lazyCanvas.manager.layers.toArray().filter((l) => !l.parent);
+        for (const layer of rootLayers) {
+            this.lazyCanvas.manager.layout.calculateLayout(layer, this.lazyCanvas.options.width, this.lazyCanvas.options.height, this.lazyCanvas.ctx, this.lazyCanvas.canvas);
+        }
+        for (const layer of rootLayers) {
+            await this.renderLayer(layer);
+        }
+        switch (exportType) {
+            case types_1.Export.BUFFER:
+            case "buffer":
+            case types_1.Export.SVG:
+            case "svg":
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
+                }
+                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");
+                }
+                return this.lazyCanvas.canvas.toBuffer("image/png");
+        }
+    }
+    /**
+     * 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) {
+        switch (format) {
+            case types_1.Export.BUFFER:
+            case "buffer":
+                return await this.renderStatic(types_1.Export.BUFFER);
+            case types_1.Export.CTX:
+            case "ctx":
+                return await this.renderStatic(types_1.Export.CTX);
+            case types_1.Export.SVG:
+            case "svg":
+                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);
+                return this.lazyCanvas.canvas;
+            default:
+                return await this.renderStatic(types_1.Export.BUFFER);
+        }
+    }
+}
+exports.ModernRenderPipeline = ModernRenderPipeline;

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

@@ -0,0 +1,24 @@
+import { LazyCanvas } from "../../LazyCanvas";
+import { AnyExport } from "../../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+/**
+ * Interface representing the RenderManager.
+ */
+export interface IRenderManager {
+    /**
+     * The LazyCanvas instance used for rendering.
+     */
+    lazyCanvas: LazyCanvas;
+    /**
+     * Whether debugging is enabled.
+     */
+    debug: boolean;
+    render(format: AnyExport): Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>;
+}
+export interface RenderManagerConstructor {
+    new (lazyCanvas: LazyCanvas, opts?: {
+        debug?: boolean;
+    }): IRenderManager;
+}
+export * from "./ClassicRenderPipeline";
+export * from "./ModernRenderPipeline";

package/dist/structures/managers/piplines/index.js

@@ -0,0 +1,18 @@
+"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("./ClassicRenderPipeline"), exports);
+__exportStar(require("./ModernRenderPipeline"), 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/types/types.d.ts

@@ -1,107 +1,257 @@
-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;
+};
+
+export interface ILayoutProps {
+  width?: ScaleType;
+  height?: ScaleType;
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+  justifyContent?:
+    | "flex-start"
+    | "center"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | string;
+  padding?: number | number[];
+  margin?: number | number[];
+  gap?: number;
+  position?: "absolute" | "relative";
+  top?: number | string;
+  left?: number | string;
+  right?: number | string;
+  bottom?: number | string;
+}

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;