@nmmty/lazycanvas 0.3.6 → 0.4.0

package/dist/index.d.ts

@@ -5,10 +5,10 @@ import { TextLayer } from "./structures/components/TextLayer";
 import { BezierLayer } from "./structures/components/BezierLayer";
 import { QuadraticLayer } from "./structures/components/QuadraticLayer";
 import { LineLayer } from "./structures/components/LineLayer";
+import { ClearLayer } from "./structures/components/ClearLayer";
 import { BaseLayer } from "./structures/components/BaseLayer";
 import { Group } from "./structures/components/Group";
 import { LayerType, LayerScaleType, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, FontWeight, Export, Centring, PatternType, SaveFormat, GradientType, LinkType } from "./types/enum";
-import type { AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, AnyLinkType, ScaleType, ColorType, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IBaseLayer, IBaseLayerProps, IGroup } from "./types";
 import { Font } from "./structures/helpers/Font";
 import { Gradient } from "./structures/helpers/Gradient";
 import { Pattern } from "./structures/helpers/Pattern";
@@ -16,5 +16,5 @@ import { Link } from "./structures/helpers/Link";
 import { saveFile } from "./utils/utils";
 import { Filters } from "./helpers/Filters";
 import { FontsList } from "./helpers/FontsList";
-export { LazyCanvas, ImageLayer, MorphLayer, TextLayer, BezierLayer, QuadraticLayer, LineLayer, BaseLayer, Group, Font, Gradient, Pattern, Link, LayerScaleType, LayerType, FontWeight, GradientType, Export, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, SaveFormat, Centring, PatternType, LinkType, saveFile, Filters, FontsList, };
-export type { IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBaseLayer, IBaseLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IGroup, AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, AnyLinkType, ScaleType, ColorType };
+export { LazyCanvas, ImageLayer, MorphLayer, TextLayer, BezierLayer, QuadraticLayer, LineLayer, ClearLayer, BaseLayer, Group, Font, Gradient, Pattern, Link, LayerScaleType, LayerType, FontWeight, GradientType, Export, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, SaveFormat, Centring, PatternType, LinkType, saveFile, Filters, FontsList, };
+export type { AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, AnyLinkType, AnyGlobalCompositeOperation, AnyColorSpace, ScaleType, ColorType, Point, PointNumber, GradientPoint, GradientColorStop, Transform, ILazyCanvas, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IBaseLayer, IBaseLayerProps, IGroup, ILink, IFontsManager, ILayersManager, IRenderManager } from "./types";

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontsList = exports.Filters = exports.saveFile = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.Export = exports.GradientType = exports.FontWeight = exports.LayerType = exports.LayerScaleType = exports.Link = exports.Pattern = exports.Gradient = exports.Font = exports.Group = exports.BaseLayer = exports.LineLayer = exports.QuadraticLayer = exports.BezierLayer = exports.TextLayer = exports.MorphLayer = exports.ImageLayer = exports.LazyCanvas = void 0;
+exports.FontsList = exports.Filters = exports.saveFile = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.Export = exports.GradientType = exports.FontWeight = exports.LayerType = exports.LayerScaleType = exports.Link = exports.Pattern = exports.Gradient = exports.Font = exports.Group = exports.BaseLayer = exports.ClearLayer = exports.LineLayer = exports.QuadraticLayer = exports.BezierLayer = exports.TextLayer = exports.MorphLayer = exports.ImageLayer = exports.LazyCanvas = void 0;
 const LazyCanvas_1 = require("./structures/LazyCanvas");
 Object.defineProperty(exports, "LazyCanvas", { enumerable: true, get: function () { return LazyCanvas_1.LazyCanvas; } });
 const ImageLayer_1 = require("./structures/components/ImageLayer");
@@ -15,6 +15,8 @@ const QuadraticLayer_1 = require("./structures/components/QuadraticLayer");
 Object.defineProperty(exports, "QuadraticLayer", { enumerable: true, get: function () { return QuadraticLayer_1.QuadraticLayer; } });
 const LineLayer_1 = require("./structures/components/LineLayer");
 Object.defineProperty(exports, "LineLayer", { enumerable: true, get: function () { return LineLayer_1.LineLayer; } });
+const ClearLayer_1 = require("./structures/components/ClearLayer");
+Object.defineProperty(exports, "ClearLayer", { enumerable: true, get: function () { return ClearLayer_1.ClearLayer; } });
 const BaseLayer_1 = require("./structures/components/BaseLayer");
 Object.defineProperty(exports, "BaseLayer", { enumerable: true, get: function () { return BaseLayer_1.BaseLayer; } });
 const Group_1 = require("./structures/components/Group");

package/dist/structures/LazyCanvas.d.ts

@@ -3,6 +3,7 @@ import { Canvas, SKRSContext2D, SvgExportFlag } from "@napi-rs/canvas";
 import { LayersManager } from "./managers/LayersManager";
 import { RenderManager } from "./managers/RenderManager";
 import { FontsManager } from "./managers/FontsManager";
+import { AnimationManager } from "./managers/AnimationManager";
 export declare class LazyCanvas implements ILazyCanvas {
     width: number | 0;
     height: number | 0;
@@ -11,6 +12,7 @@ export declare class LazyCanvas implements ILazyCanvas {
     layers: LayersManager;
     render: RenderManager;
     fonts: FontsManager;
+    animation: AnimationManager;
     exportType: AnyExport;
     constructor(debug?: boolean);
     /**

package/dist/structures/LazyCanvas.js

@@ -6,6 +6,7 @@ const canvas_1 = require("@napi-rs/canvas");
 const LayersManager_1 = require("./managers/LayersManager");
 const RenderManager_1 = require("./managers/RenderManager");
 const FontsManager_1 = require("./managers/FontsManager");
+const AnimationManager_1 = require("./managers/AnimationManager");
 class LazyCanvas {
     width;
     height;
@@ -14,6 +15,7 @@ class LazyCanvas {
     layers;
     render;
     fonts;
+    animation;
     exportType;
     constructor(debug = false) {
         this.width = 0;
@@ -23,6 +25,7 @@ class LazyCanvas {
         this.layers = new LayersManager_1.LayersManager(debug);
         this.render = new RenderManager_1.RenderManager(this, debug);
         this.fonts = new FontsManager_1.FontsManager(debug);
+        this.animation = new AnimationManager_1.AnimationManager(debug);
         this.exportType = enum_1.Export.Buffer;
     }
     /**

package/dist/structures/components/ClearLayer.d.ts

@@ -0,0 +1,39 @@
+import { IClearLayer, IClearLayerProps, ScaleType } from "../../types";
+import { LayerType } from "../../types/enum";
+import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
+export declare class ClearLayer implements IClearLayer {
+    id: string;
+    type: LayerType;
+    zIndex: number;
+    visible: boolean;
+    props: IClearLayerProps;
+    constructor(props?: IClearLayerProps);
+    /**
+     * @description Position of the layer in the 2D plane. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param x {ScaleType} - The `x` position of the layer
+     * @param y {ScaleType} - The `y` position of the layer
+     */
+    setPosition(x: ScaleType, y: ScaleType): this;
+    /**
+     * @description Sets the size of the layer.
+     * @param width {ScaleType} - The `width` of the layer
+     * @param height {ScaleType} - The `height` of the
+     */
+    setSize(width: ScaleType, height: ScaleType): this;
+    /**
+     * @description Sets the visibility of the layer.
+     * @param visible {boolean} - The `visibility` of the layer
+     */
+    setVisible(visible: boolean): this;
+    /**
+     * @description Sets zIndex of the layer.
+     * @param zIndex {number} - The `zIndex` of the layer
+     */
+    setZIndex(zIndex: number): this;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * @returns {IClearLayer}
+     */
+    toJSON(): IClearLayer;
+}

package/dist/structures/components/ClearLayer.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearLayer = void 0;
+const enum_1 = require("../../types/enum");
+const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_2 = require("../../utils/utils");
+class ClearLayer {
+    id;
+    type;
+    zIndex;
+    visible;
+    props;
+    constructor(props) {
+        this.id = (0, utils_2.generateID)(enum_1.LayerType.Clear);
+        this.type = enum_1.LayerType.Clear;
+        this.zIndex = 1;
+        this.visible = true;
+        this.props = props ? props : {
+            x: 0,
+            y: 0,
+            size: {
+                width: 0,
+                height: 0
+            }
+        };
+    }
+    /**
+     * @description Position of the layer in the 2D plane. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param x {ScaleType} - The `x` position of the layer
+     * @param y {ScaleType} - The `y` position of the layer
+     */
+    setPosition(x, y) {
+        this.props.x = x;
+        this.props.y = y;
+        return this;
+    }
+    /**
+     * @description Sets the size of the layer.
+     * @param width {ScaleType} - The `width` of the layer
+     * @param height {ScaleType} - The `height` of the
+     */
+    setSize(width, height) {
+        this.props.size = {
+            width,
+            height
+        };
+        return this;
+    }
+    /**
+     * @description Sets the visibility of the layer.
+     * @param visible {boolean} - The `visibility` of the layer
+     */
+    setVisible(visible) {
+        this.visible = visible;
+        return this;
+    }
+    /**
+     * @description Sets zIndex of the layer.
+     * @param zIndex {number} - The `zIndex` of the layer
+     */
+    setZIndex(zIndex) {
+        this.zIndex = zIndex;
+        return this;
+    }
+    async draw(ctx, canvas, manager, debug) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { x, y, w } = parcer.parseBatch({
+            x: { v: this.props.x },
+            y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
+        });
+        const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
+        if (debug)
+            LazyUtil_1.LazyLog.log('none', `ClearLayer:`, { x, y, w, h });
+        ctx.clearRect(x, y, w, h);
+    }
+    /**
+     * @returns {IClearLayer}
+     */
+    toJSON() {
+        return {
+            id: this.id,
+            type: this.type,
+            zIndex: this.zIndex,
+            visible: this.visible,
+            props: this.props,
+        };
+    }
+}
+exports.ClearLayer = ClearLayer;

package/dist/structures/components/Group.d.ts

@@ -31,7 +31,7 @@ export declare class Group implements IGroup {
      */
     remove(id: string): this;
     /**
-     * Clear all components from the group
+     * ClearLayer all components from the group
      */
     clear(): this;
     /**

package/dist/structures/components/Group.js

@@ -58,7 +58,7 @@ class Group {
         return this;
     }
     /**
-     * Clear all components from the group
+     * ClearLayer all components from the group
      */
     clear() {
         this.components = [];

package/dist/structures/components/ImageLayer.js

@@ -63,12 +63,12 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
     }
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
-        const { xs, ys, w, h } = parcer.parseBatch({
+        const { xs, ys, w } = parcer.parseBatch({
             xs: { v: this.props.x },
             ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            w: { v: this.props.size.width },
-            h: { v: this.props.size.height, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width }
         });
+        const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         if (debug)

package/dist/structures/components/MorphLayer.js

@@ -82,12 +82,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     }
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
-        const { xs, ys, w, h } = parcer.parseBatch({
+        const { xs, ys, w } = parcer.parseBatch({
             xs: { v: this.props.x },
             ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
             w: { v: this.props.size.width },
-            h: { v: this.props.size.height, options: LazyUtil_1.defaultArg.vl(true) },
         });
+        const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);

package/dist/structures/components/TextLayer.js

@@ -187,12 +187,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     }
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
-        const { x, y, w, h } = parcer.parseBatch({
+        const { x, y, w } = parcer.parseBatch({
             x: { v: this.props.x },
             y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
             w: { v: this.props.size?.width },
-            h: { v: this.props.size?.height, options: LazyUtil_1.defaultArg.vl(true) },
         });
+        const h = parcer.parse(this.props.size?.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         if (debug)
             LazyUtil_1.LazyLog.log('none', `TextLayer:`, { x, y, w, h });
         ctx.save();

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

@@ -0,0 +1,44 @@
+import type { IAnimationManager, AnyColorSpace } from "../../types";
+export declare class AnimationManager implements IAnimationManager {
+    opts: {
+        frameRate: number;
+        maxColors: number;
+        colorSpace: AnyColorSpace;
+        loop: boolean;
+        transparency: boolean;
+        clear: boolean;
+    };
+    animated: boolean;
+    debug: boolean;
+    constructor(debug?: boolean);
+    /**
+     * Sets the frame rate of the animation.
+     * @param frameRate {number} - The frame rate of the animation (by default 30).
+     */
+    setFrameRate(frameRate: number): this;
+    /**
+     * Sets the loop of the animation.
+     * @param loop {boolean} - Whether the animation should loop or not (by default true).
+     */
+    setLoop(loop: boolean): this;
+    /**
+     * Sets the transparency of the animation.
+     * @param transparency {boolean} - Whether the animation should have transparency or not (by default true).
+     */
+    setTransparent(transparency: boolean): this;
+    /**
+     * Sets the RGB format of the animation.
+     * @param rgb {ColorSpace} - The RGB format of the animation (by default RGB565).
+     */
+    setRGBFormat(rgb: AnyColorSpace): this;
+    /**
+     * Sets the maximum colors of the animation.
+     * @param maxColors {number} - The maximum colors of the animation (by default 256).
+     */
+    setMaxColors(maxColors: number): this;
+    /**
+     * Sets whether the content of previous frames will be cleared.
+     * @param clear {boolean} - Whether the animation should clear or not (by default true).
+     */
+    setClear(clear: boolean): this;
+}

package/dist/structures/managers/AnimationManager.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationManager = void 0;
+const enum_1 = require("../../types/enum");
+class AnimationManager {
+    opts;
+    animated;
+    debug;
+    constructor(debug = false) {
+        this.opts = {
+            frameRate: 30,
+            maxColors: 256,
+            colorSpace: enum_1.ColorSpace.RGB565,
+            loop: true,
+            transparency: true,
+            clear: true
+        };
+        this.animated = false;
+        this.debug = debug;
+    }
+    /**
+     * Sets the frame rate of the animation.
+     * @param frameRate {number} - The frame rate of the animation (by default 30).
+     */
+    setFrameRate(frameRate) {
+        this.opts.frameRate = frameRate;
+        this.animated = true;
+        return this;
+    }
+    /**
+     * Sets the loop of the animation.
+     * @param loop {boolean} - Whether the animation should loop or not (by default true).
+     */
+    setLoop(loop) {
+        this.opts.loop = loop;
+        return this;
+    }
+    /**
+     * Sets the transparency of the animation.
+     * @param transparency {boolean} - Whether the animation should have transparency or not (by default true).
+     */
+    setTransparent(transparency) {
+        this.opts.transparency = transparency;
+        return this;
+    }
+    /**
+     * Sets the RGB format of the animation.
+     * @param rgb {ColorSpace} - The RGB format of the animation (by default RGB565).
+     */
+    setRGBFormat(rgb) {
+        this.opts.colorSpace = rgb;
+        return this;
+    }
+    /**
+     * Sets the maximum colors of the animation.
+     * @param maxColors {number} - The maximum colors of the animation (by default 256).
+     */
+    setMaxColors(maxColors) {
+        this.opts.maxColors = maxColors;
+        return this;
+    }
+    /**
+     * Sets whether the content of previous frames will be cleared.
+     * @param clear {boolean} - Whether the animation should clear or not (by default true).
+     */
+    setClear(clear) {
+        this.opts.clear = clear;
+        return this;
+    }
+}
+exports.AnimationManager = AnimationManager;

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

@@ -26,7 +26,7 @@ export declare class FontsManager implements IFontsManager {
         weight: string;
     }>): this;
     /**
-     * Clear all fonts from the map
+     * ClearLayer all fonts from the map
      */
     clear(): this;
     /**

package/dist/structures/managers/FontsManager.js

@@ -73,7 +73,7 @@ class FontsManager {
         return this;
     }
     /**
-     * Clear all fonts from the map
+     * ClearLayer all fonts from the map
      */
     clear() {
         this.map.clear();

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

@@ -16,7 +16,7 @@ export declare class LayersManager implements ILayersManager {
      */
     remove(...ids: string[]): this;
     /**
-     * Clear all layers from the map
+     * ClearLayer all layers from the map
      */
     clear(): this;
     /**

package/dist/structures/managers/LayersManager.js

@@ -40,7 +40,7 @@ class LayersManager {
         return this;
     }
     /**
-     * Clear all layers from the map
+     * ClearLayer all layers from the map
      */
     clear() {
         this.map.clear();
@@ -128,7 +128,7 @@ class LayersManager {
         this.fromArray(this.toArray().sort((a, b) => a.zIndex - b.zIndex));
     }
     crossSearch(id) {
-        for (const layer of this.map.values()) {
+        for (const layer of Array.from(this.map.values())) {
             if (layer.id === id)
                 return layer;
             if (layer instanceof Group_1.Group) {

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

@@ -7,6 +7,9 @@ export declare class RenderManager implements IRenderManager {
     lazyCanvas: LazyCanvas;
     debug: boolean;
     constructor(lazyCanvas: LazyCanvas, debug?: boolean);
+    private renderLayer;
+    private renderStatic;
+    private renderAnimation;
     /**
      * This will render all the layers and return the rendered canvas buffer or ctx.
      * @returns {Promise<Buffer | SKRSContext2D>}

package/dist/structures/managers/RenderManager.js

@@ -4,6 +4,8 @@ exports.RenderManager = void 0;
 const enum_1 = require("../../types/enum");
 const Group_1 = require("../components/Group");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+// @ts-ignore
+const gifenc_1 = require("gifenc");
 class RenderManager {
     lazyCanvas;
     debug;
@@ -11,37 +13,39 @@ class RenderManager {
         this.lazyCanvas = lazyCanvas;
         this.debug = debug;
     }
-    /**
-     * This will render all the layers and return the rendered canvas buffer or ctx.
-     * @returns {Promise<Buffer | SKRSContext2D>}
-     */
-    async render() {
-        for (const layer of this.lazyCanvas.layers.toArray()) {
-            if (this.debug)
-                LazyUtil_1.LazyLog.log('info', `Rendering ${layer.id}...\nData:`, layer.toJSON());
-            if (layer.visible) {
-                if (layer instanceof Group_1.Group) {
-                    for (const subLayer of layer.components) {
-                        if (subLayer.visible) {
-                            if (!subLayer.props.globalComposite)
-                                this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
-                            else
-                                this.lazyCanvas.ctx.globalCompositeOperation = subLayer.props.globalComposite;
-                            await subLayer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
-                        }
+    async renderLayer(layer) {
+        if (this.debug)
+            LazyUtil_1.LazyLog.log('info', `Rendering ${layer.id}...\nData:`, layer.toJSON());
+        if (layer.visible) {
+            if (layer instanceof Group_1.Group) {
+                for (const subLayer of layer.components) {
+                    if (subLayer.visible) {
+                        if ('globalComposite' in subLayer.props && subLayer.props.globalComposite)
+                            this.lazyCanvas.ctx.globalCompositeOperation = subLayer.props.globalComposite;
+                        else
+                            this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
+                        await subLayer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
                     }
                 }
-                else {
-                    if (!layer.props.globalComposite)
-                        this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
-                    else
-                        this.lazyCanvas.ctx.globalCompositeOperation = layer.props.globalComposite;
-                    await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
-                }
-                this.lazyCanvas.ctx.shadowColor = 'transparent';
             }
+            else {
+                if ('globalComposite' in layer.props && layer.props.globalComposite)
+                    this.lazyCanvas.ctx.globalCompositeOperation = layer.props.globalComposite;
+                else
+                    this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
+                await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
+            }
+            this.lazyCanvas.ctx.shadowColor = 'transparent';
         }
-        switch (this.lazyCanvas.exportType) {
+        return this.lazyCanvas.ctx;
+    }
+    async renderStatic(exportType) {
+        if (this.debug)
+            LazyUtil_1.LazyLog.log('info', `Rendering static...`);
+        for (const layer of this.lazyCanvas.layers.toArray()) {
+            await this.renderLayer(layer);
+        }
+        switch (exportType) {
             case enum_1.Export.Buffer:
             case "buffer":
                 return this.lazyCanvas.canvas.toBuffer('image/png');
@@ -56,5 +60,50 @@ class RenderManager {
                 return this.lazyCanvas.canvas.toBuffer('image/png');
         }
     }
+    async renderAnimation() {
+        const encoder = new gifenc_1.GIFEncoder();
+        if (this.debug)
+            LazyUtil_1.LazyLog.log('info', `Rendering animation...\nData:`, this.lazyCanvas.animation.opts);
+        for (const layer of this.lazyCanvas.layers.toArray()) {
+            const ctx = await this.renderLayer(layer);
+            let { data, width, height } = ctx.getImageData(0, 0, this.lazyCanvas.width, this.lazyCanvas.height);
+            const palette = (0, gifenc_1.quantize)(data, this.lazyCanvas.animation.opts.maxColors, { format: this.lazyCanvas.animation.opts.colorSpace });
+            const index = (0, gifenc_1.applyPalette)(data, palette, this.lazyCanvas.animation.opts.colorSpace);
+            encoder.writeFrame(index, width, height, {
+                palette,
+                transparent: this.lazyCanvas.animation.opts.transparency,
+                delay: 1000 / this.lazyCanvas.animation.opts.frameRate,
+                loop: this.lazyCanvas.animation.opts.loop
+            });
+            if (this.lazyCanvas.animation.opts.clear)
+                ctx.clearRect(0, 0, this.lazyCanvas.width, this.lazyCanvas.height);
+        }
+        encoder.finish();
+        return encoder.bytesView();
+    }
+    /**
+     * This will render all the layers and return the rendered canvas buffer or ctx.
+     * @returns {Promise<Buffer | SKRSContext2D>}
+     */
+    async render() {
+        switch (this.lazyCanvas.exportType) {
+            case enum_1.Export.Buffer:
+            case "buffer":
+                if (this.lazyCanvas.animation.animated) {
+                    return await this.renderAnimation();
+                }
+                else {
+                    return await this.renderStatic(enum_1.Export.Buffer);
+                }
+            case enum_1.Export.CTX:
+            case "ctx":
+                return this.lazyCanvas.ctx;
+            case enum_1.Export.SVG:
+            case "svg":
+                return this.renderStatic(enum_1.Export.SVG);
+            default:
+                return this.renderStatic(enum_1.Export.Buffer);
+        }
+    }
 }
 exports.RenderManager = RenderManager;

package/dist/types/LazyCanvas.d.ts

@@ -2,6 +2,7 @@ import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers/LayersManager";
 import { RenderManager } from "../structures/managers/RenderManager";
 import { FontsManager } from "../structures/managers/FontsManager";
+import { AnimationManager } from "../structures/managers/AnimationManager";
 import { AnyExport } from "../";
 
 export interface ILazyCanvas {
@@ -12,5 +13,6 @@ export interface ILazyCanvas {
     layers: LayersManager;
     render: RenderManager;
     fonts: FontsManager;
+    animation: AnimationManager;
     exportType: AnyExport;
 }

package/dist/types/components/ClearLayer.d.ts

@@ -0,0 +1,19 @@
+import { ScaleType } from "../types";
+import { LayerType } from "../enum";
+
+export interface IClearLayer {
+    id: string;
+    type: LayerType;
+    zIndex: number;
+    visible: boolean;
+    props: IClearLayerProps;
+}
+
+export interface IClearLayerProps {
+    x: ScaleType;
+    y: ScaleType;
+    size: {
+        width: ScaleType;
+        height: ScaleType;
+    };
+}

package/dist/types/enum.d.ts

@@ -10,7 +10,8 @@ export declare enum LayerType {
     QuadraticCurve = "quadraticCurve",
     Morph = "morph",
     Text = "text",
-    Group = "group"
+    Group = "group",
+    Clear = "clear"
 }
 export declare enum LayerScaleType {
     Pixel = "px",
@@ -74,7 +75,9 @@ export declare enum SaveFormat {
     PNG = "png",
     JPEG = "jpeg",
     JPG = "jpg",
-    SVG = "svg"
+    SVG = "svg",
+    GIF = "gif",
+    WEBP = "webp"
 }
 export declare enum Centring {
     Start = "start",
@@ -128,3 +131,8 @@ export declare enum GlobalCompositeOperation {
     Color = "color",
     Luminosity = "luminosity"
 }
+export declare enum ColorSpace {
+    RGB565 = "rgb565",
+    RGBA4444 = "rgba4444",
+    RGBA444 = "rgba444"
+}

package/dist/types/enum.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalCompositeOperation = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
+exports.ColorSpace = exports.GlobalCompositeOperation = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
 var LayerType;
 (function (LayerType) {
     LayerType["Base"] = "base";
@@ -15,6 +15,7 @@ var LayerType;
     LayerType["Morph"] = "morph";
     LayerType["Text"] = "text";
     LayerType["Group"] = "group";
+    LayerType["Clear"] = "clear";
 })(LayerType || (exports.LayerType = LayerType = {}));
 var LayerScaleType;
 (function (LayerScaleType) {
@@ -89,6 +90,8 @@ var SaveFormat;
     SaveFormat["JPEG"] = "jpeg";
     SaveFormat["JPG"] = "jpg";
     SaveFormat["SVG"] = "svg";
+    SaveFormat["GIF"] = "gif";
+    SaveFormat["WEBP"] = "webp";
 })(SaveFormat || (exports.SaveFormat = SaveFormat = {}));
 var Centring;
 (function (Centring) {
@@ -146,3 +149,9 @@ var GlobalCompositeOperation;
     GlobalCompositeOperation["Color"] = "color";
     GlobalCompositeOperation["Luminosity"] = "luminosity";
 })(GlobalCompositeOperation || (exports.GlobalCompositeOperation = GlobalCompositeOperation = {}));
+var ColorSpace;
+(function (ColorSpace) {
+    ColorSpace["RGB565"] = "rgb565";
+    ColorSpace["RGBA4444"] = "rgba4444";
+    ColorSpace["RGBA444"] = "rgba444";
+})(ColorSpace || (exports.ColorSpace = ColorSpace = {}));

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export type * from "./components/BezierLayer";
 export type * from "./components/QuadraticLayer";
 export type * from "./components/LineLayer";
 export type * from "./components/Group";
+export type * from "./components/ClearLayer";
 export type * from "./helpers/Font";
 export type * from "./helpers/Gradient";
 export type * from "./helpers/Pattern";
@@ -14,4 +15,5 @@ export type * from "./helpers/Link";
 export type * from "./managers/LayersManager";
 export type * from "./managers/RenderManager";
 export type * from "./managers/FontsManager";
+export type * from "./managers/AnimationManager";
 export type * from "./LazyCanvas";

package/dist/types/managers/AnimationManager.d.ts

@@ -0,0 +1,14 @@
+import { AnyColorSpace } from "../types";
+
+export interface IAnimationManager {
+    opts: {
+        frameRate: number;
+        maxColors: number;
+        colorSpace: AnyColorSpace;
+        loop: boolean;
+        transparency: boolean;
+        clear: boolean;
+    };
+    animated: boolean;
+    debug: boolean;
+}

package/dist/types/types.d.ts

@@ -7,6 +7,7 @@ import { BezierLayer } from "../structures/components/BezierLayer";
 import { QuadraticLayer } from "../structures/components/QuadraticLayer";
 import { LineLayer } from "../structures/components/LineLayer";
 import { Group } from "../structures/components/Group";
+import { ClearLayer } from "../structures/components/ClearLayer";
 import { Link } from "../structures/helpers/Link";
 import {
     FontWeight,
@@ -21,14 +22,15 @@ import {
     PatternType,
     SaveFormat,
     LinkType,
-    GlobalCompositeOperation
+    GlobalCompositeOperation,
+    ColorSpace
 } from "./enum";
 
 export type ScaleType = string | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
 
 export type ColorType = string | Gradient | Pattern;
 
-export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | Group;
+export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Group;
 
 export type AnyWeight = FontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
@@ -50,12 +52,14 @@ export type AnyCentring = Centring | 'start' | 'start-top' | 'start-bottom' | 'c
 
 export type AnyPatternType = PatternType | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
 
-export type AnySaveFormat = SaveFormat | 'png' | 'jpeg' | 'jpg' | 'svg';
+export type AnySaveFormat = SaveFormat | 'png' | 'jpeg' | 'jpg' | 'svg' | 'gif' | 'webp';
 
 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 Point = {
     x: ScaleType;
     y: ScaleType;

package/dist/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { LayerType, SaveFormat } from "../types/enum";
-import { Transform, ScaleType, ColorType, PointNumber, AnyCentring, AnyTextAlign } from "../types";
+import { LayerType } from "../types/enum";
+import { Transform, ScaleType, ColorType, PointNumber, AnyCentring, AnyTextAlign, AnySaveFormat } from "../types";
 import { Gradient } from "../structures/helpers/Gradient";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
 import { Pattern } from "../structures/helpers/Pattern";
@@ -51,7 +51,7 @@ export declare function transform(ctx: SKRSContext2D, transform: Transform, laye
     fontSize: number;
     multiline: boolean;
 }): void;
-export declare function saveFile(buffer: any, extension: SaveFormat, name: string): Promise<void>;
+export declare function saveFile(buffer: any, extension: AnySaveFormat, name: string): Promise<void>;
 export declare function generateRandomName(): string;
 export declare function isImageUrlValid(src: string): boolean;
 export declare function centring(centring: AnyCentring, type: LayerType, width: number, height: number, x: number, y: number): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -9,6 +9,7 @@
     "centring": "tsc ./test/centring.ts && node ./test/centring.js",
     "logo": "tsc ./test/logo.ts && node ./test/logo.js",
     "text": "tsc ./test/text.ts && node ./test/text.js",
+    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
     "doc": "tsx docgen.ts",
     "font": "tsc ./scripts/font-gen.ts && node ./scripts/font-gen.js",
     "build": "tsc"
@@ -32,6 +33,7 @@
   "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
   "dependencies": {
     "@napi-rs/canvas": "^0.1.68",
+    "gifenc": "^1.0.3",
     "jimp": "0.22.12",
     "path": "^0.12.7",
     "svgson": "^5.3.1"
@@ -43,7 +45,10 @@
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "ava": "^6.2.0",
+    "eslint": "^9.23.0",
+    "eslint-config-neon": "^0.2.7",
     "globals": "^15.14.0",
+    "lodash.merge": "^4.6.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
     "typescript": "^5.4.5"