@nmmty/lazycanvas 0.3.5 → 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/BaseLayer.d.ts

@@ -1,4 +1,4 @@
-import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring } from "../../types";
+import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
 import { LayerType } from "../../types/enum";
 export declare class BaseLayer<T extends IBaseLayerProps> {
     id: string;
@@ -74,6 +74,11 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
      * @param zIndex {number} - The `zIndex` of the layer
      */
     setZIndex(zIndex: number): this;
+    /**
+     * @description Sets global composite operation of the layer.
+     * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
+     */
+    setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
     /**
      * @returns {IBaseLayer}
      */

package/dist/structures/components/BaseLayer.js

@@ -141,6 +141,14 @@ class BaseLayer {
         this.zIndex = zIndex;
         return this;
     }
+    /**
+     * @description Sets global composite operation of the layer.
+     * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
+     */
+    setGlobalCompositeOperation(operation) {
+        this.props.globalComposite = operation;
+        return this;
+    }
     /**
      * @returns {IBaseLayer}
      */

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.d.ts

@@ -65,6 +65,16 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * @param filled {boolean} - The `filled` of the layer.
      */
     setFilled(filled: boolean): this;
+    /**
+     * @description Sets the spacing between the words.
+     * @param wordSpacing {number} - The `wordSpacing` of the text layer.
+     */
+    setWordSpacing(wordSpacing: number): this;
+    /**
+     * @description Sets the letter spacing.
+     * @param letterSpacing {number} - The `letterSpacing` of the text layer.
+     */
+    setLetterSpacing(letterSpacing: number): this;
     measureText(ctx: SKRSContext2D, canvas: Canvas): {
         width: number;
         height: number;

package/dist/structures/components/TextLayer.js

@@ -29,6 +29,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             height: 0,
         };
         this.props.centring = enum_1.Centring.Center;
+        this.props.wordSpacing = 0;
+        this.props.letterSpacing = 0;
     }
     /**
      * @description Sets the text of the text layer.
@@ -155,6 +157,22 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         this.props.filled = filled;
         return this;
     }
+    /**
+     * @description Sets the spacing between the words.
+     * @param wordSpacing {number} - The `wordSpacing` of the text layer.
+     */
+    setWordSpacing(wordSpacing) {
+        this.props.wordSpacing = wordSpacing;
+        return this;
+    }
+    /**
+     * @description Sets the letter spacing.
+     * @param letterSpacing {number} - The `letterSpacing` of the text layer.
+     */
+    setLetterSpacing(letterSpacing) {
+        this.props.letterSpacing = letterSpacing;
+        return this;
+    }
     measureText(ctx, canvas) {
         const w = (0, utils_1.parseToNormal)(this.props.size?.width, ctx, canvas);
         const h = (0, utils_1.parseToNormal)(this.props.size?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
@@ -169,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();
@@ -184,6 +202,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         (0, utils_1.opacity)(ctx, this.props.opacity);
         (0, utils_1.filters)(ctx, this.props.filter);
         ctx.textAlign = this.props.align;
+        ctx.letterSpacing = `${this.props.letterSpacing}px`;
+        ctx.wordSpacing = `${this.props.wordSpacing}px`;
         if (this.props.baseline)
             ctx.textBaseline = this.props.baseline;
         if (this.props.direction)

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,29 +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) {
-                            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 {
-                    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');
@@ -48,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/BaseLayer.d.ts

@@ -1,4 +1,4 @@
-import { ColorType, ScaleType, AnyCentring } from "../";
+import { ColorType, ScaleType, AnyCentring, AnyGlobalCompositeOperation } from "../";
 import { LayerType } from "../enum";
 
 export interface IBaseLayer {
@@ -32,6 +32,7 @@ export interface IBaseLayerProps {
         offsetY: number;
     };
     transform: Transform;
+    globalComposite: AnyGlobalCompositeOperation;
 }
 
 export interface Transform {

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/components/TextLayer.d.ts

@@ -23,4 +23,6 @@ export interface ITextLayerProps extends IBaseLayerProps {
     align: AnyTextAlign;
     baseline: AnyTextBaseline;
     direction: AnyTextDirection;
+    letterSpacing: number;
+    wordSpacing: number;
 }

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",
@@ -100,3 +103,36 @@ export declare enum LinkType {
     X = "x",
     Y = "y"
 }
+export declare enum GlobalCompositeOperation {
+    SourceOver = "source-over",
+    SourceIn = "source-in",
+    SourceOut = "source-out",
+    SourceAtop = "source-atop",
+    DestinationOver = "destination-over",
+    DestinationIn = "destination-in",
+    DestinationOut = "destination-out",
+    DestinationAtop = "destination-atop",
+    Lighter = "lighter",
+    Copy = "copy",
+    Xor = "xor",
+    Multiply = "multiply",
+    Screen = "screen",
+    Overlay = "overlay",
+    Darken = "darken",
+    Lighten = "lighten",
+    ColorDodge = "color-dodge",
+    ColorBurn = "color-burn",
+    HardLight = "hard-light",
+    SoftLight = "soft-light",
+    Difference = "difference",
+    Exclusion = "exclusion",
+    Hue = "hue",
+    Saturation = "saturation",
+    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.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) {
@@ -117,3 +120,38 @@ var LinkType;
     LinkType["X"] = "x";
     LinkType["Y"] = "y";
 })(LinkType || (exports.LinkType = LinkType = {}));
+var GlobalCompositeOperation;
+(function (GlobalCompositeOperation) {
+    GlobalCompositeOperation["SourceOver"] = "source-over";
+    GlobalCompositeOperation["SourceIn"] = "source-in";
+    GlobalCompositeOperation["SourceOut"] = "source-out";
+    GlobalCompositeOperation["SourceAtop"] = "source-atop";
+    GlobalCompositeOperation["DestinationOver"] = "destination-over";
+    GlobalCompositeOperation["DestinationIn"] = "destination-in";
+    GlobalCompositeOperation["DestinationOut"] = "destination-out";
+    GlobalCompositeOperation["DestinationAtop"] = "destination-atop";
+    GlobalCompositeOperation["Lighter"] = "lighter";
+    GlobalCompositeOperation["Copy"] = "copy";
+    GlobalCompositeOperation["Xor"] = "xor";
+    GlobalCompositeOperation["Multiply"] = "multiply";
+    GlobalCompositeOperation["Screen"] = "screen";
+    GlobalCompositeOperation["Overlay"] = "overlay";
+    GlobalCompositeOperation["Darken"] = "darken";
+    GlobalCompositeOperation["Lighten"] = "lighten";
+    GlobalCompositeOperation["ColorDodge"] = "color-dodge";
+    GlobalCompositeOperation["ColorBurn"] = "color-burn";
+    GlobalCompositeOperation["HardLight"] = "hard-light";
+    GlobalCompositeOperation["SoftLight"] = "soft-light";
+    GlobalCompositeOperation["Difference"] = "difference";
+    GlobalCompositeOperation["Exclusion"] = "exclusion";
+    GlobalCompositeOperation["Hue"] = "hue";
+    GlobalCompositeOperation["Saturation"] = "saturation";
+    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,
@@ -20,14 +21,16 @@ import {
     Centring,
     PatternType,
     SaveFormat,
-    LinkType
+    LinkType,
+    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;
 
@@ -49,10 +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.5",
+  "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"