@nmmty/lazycanvas 0.2.0

package/dist/helpers/filters.d.ts

@@ -0,0 +1,68 @@
+/**
+ * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilter` on the layer.
+ */
+export declare const Filters: {
+    /**
+     * @description Applies a Gaussian blur to the input image. The value of `radius` defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no value is specified, it defaults to 0.
+     * @param radius {number} - The `radius` of the blur.
+     * @returns {string}
+     */
+    blur(radius: number): string;
+    /**
+     * @description Adjusts the brightness of the input image. A value of `0%` will create an image that is completely black, while a value of `100%` leaves the input unchanged. If no value is specified, it defaults to `100%`.
+     * @param amount {number} - The `amount` of the brightness.
+     * @returns {string}
+     */
+    brightness(amount: number): string;
+    /**
+     * @description Adjusts the contrast of the input image. A value of `0%` will create an image that is completely black, while a value of `100%` leaves the input unchanged. If no value is specified, it defaults to `100%`.
+     * @param amount {number} - The `amount` of the contrast.
+     * @returns {string}
+     */
+    contrast(amount: number): string;
+    /**
+     * @description Applies a drop shadow effect to the input image. The value of `color` is the color of the shadow. The `offsetX` and `offsetY` values are the horizontal and vertical distances of the shadow, and the `blurRadius` is the amount of blur. If no value is specified, it defaults to `0`.
+     * @param color {string} - The `color` of the shadow.
+     * @param offsetX {number} - The `offsetX` of the shadow.
+     * @param offsetY {number} - The `offsetY` of the shadow.
+     * @param blurRadius {number} - The `blurRadius` of the shadow.
+     * @returns {string}
+     */
+    dropShadow(color: string, offsetX: number, offsetY: number, blurRadius: number): string;
+    /**
+     * @description Converts the input image to grayscale. A value of `0%` is completely unmodified, while a value of `100%` will make the image completely grayscale.
+     * @param amount {number} - The `amount` of the grayscale.
+     * @returns {string}
+     */
+    grayscale(amount: number): string;
+    /**
+     * @description Applies a hue rotation to the input image. The value of `angle` defines the number of degrees around the color circle the input samples will be adjusted. A value of `0deg` leaves the input unchanged.
+     * @param angle {number} - The `angle` of the hue rotation.
+     * @returns {string}
+     */
+    hueRotate(angle: number): string;
+    /**
+     * @description Inverts the samples in the input image. A value of `0%` leaves the input unchanged, while a value of `100%` is completely inverted.
+     * @param amount {number} - The `amount` of the invert.
+     * @returns {string}
+     */
+    invert(amount: number): string;
+    /**
+     * @description Sets the opacity of the input image. A value of `0%` is completely transparent, while a value of `100%` is completely opaque.
+     * @param amount {number} - The `amount` of the opacity.
+     * @returns {string}
+     */
+    opacity(amount: number): string;
+    /**
+     * @description Saturates the input image. A value of `0%` is completely unmodified, while a value of `100%` is completely saturated.
+     * @param amount {number} - The `amount` of the saturation.
+     * @returns {string}
+     */
+    saturate(amount: number): string;
+    /**
+     * @description Converts the input image to sepia. A value of `0%` is completely unmodified, while a value of `100%` is completely sepia.
+     * @param amount {number} - The `amount` of the sepia.
+     * @returns {string}
+     */
+    sepia(amount: number): string;
+};

package/dist/helpers/filters.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = void 0;
+/**
+ * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilter` on the layer.
+ */
+exports.Filters = {
+    /**
+     * @description Applies a Gaussian blur to the input image. The value of `radius` defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no value is specified, it defaults to 0.
+     * @param radius {number} - The `radius` of the blur.
+     * @returns {string}
+     */
+    blur(radius) {
+        return `blur(${radius}px)`;
+    },
+    /**
+     * @description Adjusts the brightness of the input image. A value of `0%` will create an image that is completely black, while a value of `100%` leaves the input unchanged. If no value is specified, it defaults to `100%`.
+     * @param amount {number} - The `amount` of the brightness.
+     * @returns {string}
+     */
+    brightness(amount) {
+        return `brightness(${amount}%)`;
+    },
+    /**
+     * @description Adjusts the contrast of the input image. A value of `0%` will create an image that is completely black, while a value of `100%` leaves the input unchanged. If no value is specified, it defaults to `100%`.
+     * @param amount {number} - The `amount` of the contrast.
+     * @returns {string}
+     */
+    contrast(amount) {
+        return `contrast(${amount}%)`;
+    },
+    /**
+     * @description Applies a drop shadow effect to the input image. The value of `color` is the color of the shadow. The `offsetX` and `offsetY` values are the horizontal and vertical distances of the shadow, and the `blurRadius` is the amount of blur. If no value is specified, it defaults to `0`.
+     * @param color {string} - The `color` of the shadow.
+     * @param offsetX {number} - The `offsetX` of the shadow.
+     * @param offsetY {number} - The `offsetY` of the shadow.
+     * @param blurRadius {number} - The `blurRadius` of the shadow.
+     * @returns {string}
+     */
+    dropShadow(color, offsetX, offsetY, blurRadius) {
+        return `drop-shadow(${offsetX}px ${offsetY}px ${blurRadius}px ${color})`;
+    },
+    /**
+     * @description Converts the input image to grayscale. A value of `0%` is completely unmodified, while a value of `100%` will make the image completely grayscale.
+     * @param amount {number} - The `amount` of the grayscale.
+     * @returns {string}
+     */
+    grayscale(amount) {
+        return `grayscale(${amount}%)`;
+    },
+    /**
+     * @description Applies a hue rotation to the input image. The value of `angle` defines the number of degrees around the color circle the input samples will be adjusted. A value of `0deg` leaves the input unchanged.
+     * @param angle {number} - The `angle` of the hue rotation.
+     * @returns {string}
+     */
+    hueRotate(angle) {
+        return `hue-rotate(${angle}deg)`;
+    },
+    /**
+     * @description Inverts the samples in the input image. A value of `0%` leaves the input unchanged, while a value of `100%` is completely inverted.
+     * @param amount {number} - The `amount` of the invert.
+     * @returns {string}
+     */
+    invert(amount) {
+        return `invert(${amount}%)`;
+    },
+    /**
+     * @description Sets the opacity of the input image. A value of `0%` is completely transparent, while a value of `100%` is completely opaque.
+     * @param amount {number} - The `amount` of the opacity.
+     * @returns {string}
+     */
+    opacity(amount) {
+        return `opacity(${amount}%)`;
+    },
+    /**
+     * @description Saturates the input image. A value of `0%` is completely unmodified, while a value of `100%` is completely saturated.
+     * @param amount {number} - The `amount` of the saturation.
+     * @returns {string}
+     */
+    saturate(amount) {
+        return `saturate(${amount}%)`;
+    },
+    /**
+     * @description Converts the input image to sepia. A value of `0%` is completely unmodified, while a value of `100%` is completely sepia.
+     * @param amount {number} - The `amount` of the sepia.
+     * @returns {string}
+     */
+    sepia(amount) {
+        return `sepia(${amount}%)`;
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { LazyCanvas } from "./structures/LazyCanvas";
+import { ImageLayer } from "./structures/components/ImageLayer";
+import { MorphLayer } from "./structures/components/MorphLayer";
+import { TextLayer } from "./structures/components/TextLayer";
+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 } from "./types/enum";
+import type { AnyLayer, ScaleType, ColorType, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBaseLayer, IBaseLayerProps, IGroup } from "./types";
+import { Font } from "./structures/helpers/Font";
+import { Gradient } from "./structures/helpers/Gradient";
+import { Pattern } from "./structures/helpers/Pattern";
+import { saveFile } from "./utils/utils";
+import { Filters } from "./helpers/filters";
+export { LazyCanvas, ImageLayer, MorphLayer, TextLayer, BaseLayer, Group, Font, Gradient, Pattern, LayerScaleType, LayerType, FontWeight, GradientType, Export, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, SaveFormat, Centring, PatternType, saveFile, Filters, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBaseLayer, IBaseLayerProps, IGroup, AnyLayer, ScaleType, ColorType, };

package/dist/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filters = exports.saveFile = 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.Pattern = exports.Gradient = exports.Font = exports.Group = exports.BaseLayer = 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");
+Object.defineProperty(exports, "ImageLayer", { enumerable: true, get: function () { return ImageLayer_1.ImageLayer; } });
+const MorphLayer_1 = require("./structures/components/MorphLayer");
+Object.defineProperty(exports, "MorphLayer", { enumerable: true, get: function () { return MorphLayer_1.MorphLayer; } });
+const TextLayer_1 = require("./structures/components/TextLayer");
+Object.defineProperty(exports, "TextLayer", { enumerable: true, get: function () { return TextLayer_1.TextLayer; } });
+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");
+Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return Group_1.Group; } });
+const enum_1 = require("./types/enum");
+Object.defineProperty(exports, "LayerType", { enumerable: true, get: function () { return enum_1.LayerType; } });
+Object.defineProperty(exports, "LayerScaleType", { enumerable: true, get: function () { return enum_1.LayerScaleType; } });
+Object.defineProperty(exports, "LineCap", { enumerable: true, get: function () { return enum_1.LineCap; } });
+Object.defineProperty(exports, "LineJoin", { enumerable: true, get: function () { return enum_1.LineJoin; } });
+Object.defineProperty(exports, "TextAlign", { enumerable: true, get: function () { return enum_1.TextAlign; } });
+Object.defineProperty(exports, "TextDirection", { enumerable: true, get: function () { return enum_1.TextDirection; } });
+Object.defineProperty(exports, "TextBaseline", { enumerable: true, get: function () { return enum_1.TextBaseline; } });
+Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return enum_1.FontWeight; } });
+Object.defineProperty(exports, "Export", { enumerable: true, get: function () { return enum_1.Export; } });
+Object.defineProperty(exports, "Centring", { enumerable: true, get: function () { return enum_1.Centring; } });
+Object.defineProperty(exports, "PatternType", { enumerable: true, get: function () { return enum_1.PatternType; } });
+Object.defineProperty(exports, "SaveFormat", { enumerable: true, get: function () { return enum_1.SaveFormat; } });
+Object.defineProperty(exports, "GradientType", { enumerable: true, get: function () { return enum_1.GradientType; } });
+const Font_1 = require("./structures/helpers/Font");
+Object.defineProperty(exports, "Font", { enumerable: true, get: function () { return Font_1.Font; } });
+const Gradient_1 = require("./structures/helpers/Gradient");
+Object.defineProperty(exports, "Gradient", { enumerable: true, get: function () { return Gradient_1.Gradient; } });
+const Pattern_1 = require("./structures/helpers/Pattern");
+Object.defineProperty(exports, "Pattern", { enumerable: true, get: function () { return Pattern_1.Pattern; } });
+const utils_1 = require("./utils/utils");
+Object.defineProperty(exports, "saveFile", { enumerable: true, get: function () { return utils_1.saveFile; } });
+const filters_1 = require("./helpers/filters");
+Object.defineProperty(exports, "Filters", { enumerable: true, get: function () { return filters_1.Filters; } });

package/dist/structures/LazyCanvas.d.ts

@@ -0,0 +1,41 @@
+import { Export } from "../types/enum";
+import { IFonts, ILazyCanvas } from "../types";
+import { Canvas, SKRSContext2D, SvgExportFlag } from "@napi-rs/canvas";
+import { LayersManager } from "./managers/LayersManager";
+import { RenderManager } from "./managers/RenderManager";
+import { FontsManager } from "./managers/FontsManager";
+export declare class LazyCanvas implements ILazyCanvas {
+    width: number | 0;
+    height: number | 0;
+    canvas: Canvas;
+    ctx: SKRSContext2D;
+    layers: LayersManager;
+    render: RenderManager;
+    fonts: FontsManager;
+    exportType: Export;
+    constructor();
+    /**
+     * Set the export type
+     * @param type {Export} - The `export` type
+     */
+    setExportType(type: Export): this;
+    /**
+     * Replace base fonts with custom fonts by special file.
+     * Use this method before loading fonts by `FontManager`.
+     * The file should be generated by the following instructions:
+     * @see https://github.com/NMMTY/LazyCanvas/blob/main/scripts/FontsGenerate.md
+     * @param fonts {IFonts[]} - The `fonts` to set
+     */
+    setFonts(fonts: IFonts): this;
+    /**
+     * Set the SVG export flag. This method should be called after `setExportType` method.
+     * @param flag {SvgExportFlag} - The `flag` of the SVG export
+     */
+    setSvgExportFlag(flag: SvgExportFlag): this;
+    /**
+     * Create a new canvas. This method should be called before any other methods.
+     * @param width {number} - The `width` of the canvas
+     * @param height {number} - The `height` of the canvas
+     */
+    create(width: number, height: number): this;
+}

package/dist/structures/LazyCanvas.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyCanvas = void 0;
+const enum_1 = require("../types/enum");
+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");
+class LazyCanvas {
+    width;
+    height;
+    canvas;
+    ctx;
+    layers;
+    render;
+    fonts;
+    exportType;
+    constructor() {
+        this.width = 0;
+        this.height = 0;
+        this.canvas = new canvas_1.Canvas(0, 0);
+        this.ctx = this.canvas.getContext('2d');
+        this.layers = new LayersManager_1.LayersManager();
+        this.render = new RenderManager_1.RenderManager(this);
+        this.fonts = new FontsManager_1.FontsManager();
+        this.exportType = enum_1.Export.Buffer;
+    }
+    /**
+     * Set the export type
+     * @param type {Export} - The `export` type
+     */
+    setExportType(type) {
+        this.exportType = type;
+        switch (type) {
+            case enum_1.Export.Buffer:
+                this.canvas = new canvas_1.Canvas(this.width, this.height);
+                this.ctx = this.canvas.getContext('2d');
+                break;
+            case enum_1.Export.CTX:
+                break;
+            case enum_1.Export.SVG:
+                this.canvas = new canvas_1.Canvas(this.width, this.height, canvas_1.SvgExportFlag.RelativePathEncoding);
+                this.ctx = this.canvas.getContext('2d');
+                break;
+        }
+        return this;
+    }
+    /**
+     * Replace base fonts with custom fonts by special file.
+     * Use this method before loading fonts by `FontManager`.
+     * The file should be generated by the following instructions:
+     * @see https://github.com/NMMTY/LazyCanvas/blob/main/scripts/FontsGenerate.md
+     * @param fonts {IFonts[]} - The `fonts` to set
+     */
+    setFonts(fonts) {
+        this.fonts = new FontsManager_1.FontsManager(fonts);
+        return this;
+    }
+    /**
+     * Set the SVG export flag. This method should be called after `setExportType` method.
+     * @param flag {SvgExportFlag} - The `flag` of the SVG export
+     */
+    setSvgExportFlag(flag) {
+        if (this.exportType === enum_1.Export.SVG) {
+            this.canvas = new canvas_1.Canvas(this.width, this.height, flag);
+            this.ctx = this.canvas.getContext('2d');
+        }
+        return this;
+    }
+    /**
+     * Create a new canvas. This method should be called before any other methods.
+     * @param width {number} - The `width` of the canvas
+     * @param height {number} - The `height` of the canvas
+     */
+    create(width, height) {
+        this.width = width;
+        this.height = height;
+        this.canvas = new canvas_1.Canvas(width, height);
+        this.ctx = this.canvas.getContext('2d');
+        this.layers = new LayersManager_1.LayersManager();
+        return this;
+    }
+}
+exports.LazyCanvas = LazyCanvas;

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

@@ -0,0 +1,81 @@
+import { ScaleType, IBaseLayer, IBaseLayerProps } from "../../types";
+import { Centring, LayerType } from "../../types/enum";
+export declare class BaseLayer<T extends IBaseLayerProps> {
+    id: string;
+    type: LayerType;
+    zIndex: number;
+    visible: boolean;
+    props: T;
+    constructor(type?: LayerType, props?: T);
+    /**
+     * @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 Opacity of the layer. The value must be between `0` and `1`.
+     * @param opacity {number} - The `opacity` of the layer
+     */
+    setOpacity(opacity: number): this;
+    /**
+     * @description Sets the `id` of the layer.
+     * @param id {string} - The `id` of the layer
+     */
+    setID(id: string): this;
+    /**
+     * @description Sets shadow of layer.
+     * @param color {string} - The `color` of the filter
+     * @param blur {number} - The `blur` of the filter
+     * @param offsetX {number} - The `offsetX` of the filter
+     * @param offsetY {number} - The `offsetY` of the filter
+     */
+    setShadow(color: string, blur?: number, offsetX?: number, offsetY?: number): this;
+    /**
+     * @description Matrix of the layer in the 2D plane.
+     * @param matrix {DOMMatrix2DInit} - The `matrix` of the layer
+     */
+    setMatrix(matrix: DOMMatrix2DInit): this;
+    /**
+     * @description Scale of the layer in the x and y direction by the given amount from their current position.
+     * @param x {number} - The `x` scale of the layer
+     * @param y {number} - The `y` scale of the layer
+     */
+    setScale(x: number, y: number): this;
+    /**
+     * @description Rotate of the layer in the clockwise direction by the given amount from its current position.
+     * @param rotate {number} - The `rotate` of the layer
+     */
+    setRotate(rotate: number): this;
+    /**
+     * @description Translate of the layer in the x and y direction by the given amount from their current position.
+     * @param x {number} - The `x` translation of the layer
+     * @param y {number} - The `y` translation of the layer
+     */
+    setTranslate(x: number, y: number): this;
+    /**
+     * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
+     * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
+     * @param filter {string} - The `filter` of the layer. Not support multiple filters.
+     */
+    setFilter(filter: string): this;
+    /**
+     * @description Sets type of centring of the layer.
+     * @param centring {Centring} - The `centring` of the layer
+     */
+    setCentring(centring: Centring): 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;
+    /**
+     * @returns {IBaseLayer}
+     */
+    toJSON(): IBaseLayer;
+}

package/dist/structures/components/BaseLayer.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseLayer = void 0;
+const enum_1 = require("../../types/enum");
+const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+class BaseLayer {
+    id;
+    type;
+    zIndex;
+    visible;
+    props;
+    constructor(type, props) {
+        this.id = (0, utils_1.generateID)(type ? type : enum_1.LayerType.Base);
+        this.type = type ? type : enum_1.LayerType.Base;
+        this.zIndex = 1;
+        this.visible = true;
+        this.props = props ? props : {};
+        if (!this.props.x)
+            this.props.x = 0;
+        if (!this.props.y)
+            this.props.y = 0;
+        if (!this.props.opacity)
+            this.props.opacity = 1;
+        if (!this.props.centring)
+            this.props.centring = enum_1.Centring.Center;
+        if (!this.props.transform)
+            this.props.transform = {};
+    }
+    /**
+     * @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 Opacity of the layer. The value must be between `0` and `1`.
+     * @param opacity {number} - The `opacity` of the layer
+     */
+    setOpacity(opacity) {
+        this.props.opacity = opacity;
+        return this;
+    }
+    /**
+     * @description Sets the `id` of the layer.
+     * @param id {string} - The `id` of the layer
+     */
+    setID(id) {
+        this.id = id;
+        return this;
+    }
+    /**
+     * @description Sets shadow of layer.
+     * @param color {string} - The `color` of the filter
+     * @param blur {number} - The `blur` of the filter
+     * @param offsetX {number} - The `offsetX` of the filter
+     * @param offsetY {number} - The `offsetY` of the filter
+     */
+    setShadow(color, blur, offsetX, offsetY) {
+        if (!color)
+            throw new LazyUtil_1.LazyError('The color of the shadow must be provided');
+        if (!(0, utils_1.isColor)(color))
+            throw new LazyUtil_1.LazyError('The color of the shadow must be a valid color');
+        let parse = (0, utils_1.parseColor)(color);
+        this.props.shadow = {
+            color: parse,
+            blur: blur || 0,
+            offsetX: offsetX || 0,
+            offsetY: offsetY || 0,
+        };
+        return this;
+    }
+    /**
+     * @description Matrix of the layer in the 2D plane.
+     * @param matrix {DOMMatrix2DInit} - The `matrix` of the layer
+     */
+    setMatrix(matrix) {
+        this.props.transform = { ...this.props.transform, matrix };
+        return this;
+    }
+    /**
+     * @description Scale of the layer in the x and y direction by the given amount from their current position.
+     * @param x {number} - The `x` scale of the layer
+     * @param y {number} - The `y` scale of the layer
+     */
+    setScale(x, y) {
+        this.props.transform = { ...this.props.transform, scale: { x, y } };
+        return this;
+    }
+    /**
+     * @description Rotate of the layer in the clockwise direction by the given amount from its current position.
+     * @param rotate {number} - The `rotate` of the layer
+     */
+    setRotate(rotate) {
+        this.props.transform = { ...this.props.transform, rotate };
+        return this;
+    }
+    /**
+     * @description Translate of the layer in the x and y direction by the given amount from their current position.
+     * @param x {number} - The `x` translation of the layer
+     * @param y {number} - The `y` translation of the layer
+     */
+    setTranslate(x, y) {
+        this.props.transform = { ...this.props.transform, translate: { x, y } };
+        return this;
+    }
+    /**
+     * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
+     * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
+     * @param filter {string} - The `filter` of the layer. Not support multiple filters.
+     */
+    setFilter(filter) {
+        this.props.filter = filter;
+        return this;
+    }
+    /**
+     * @description Sets type of centring of the layer.
+     * @param centring {Centring} - The `centring` of the layer
+     */
+    setCentring(centring) {
+        this.props.centring = centring;
+        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;
+    }
+    /**
+     * @returns {IBaseLayer}
+     */
+    toJSON() {
+        return {
+            id: this.id,
+            type: this.type,
+            zIndex: this.zIndex,
+            visible: this.visible,
+            props: this.props,
+        };
+    }
+}
+exports.BaseLayer = BaseLayer;

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

@@ -0,0 +1,50 @@
+import { AnyLayer, IGroup } from "../../types";
+export declare class Group implements IGroup {
+    id: string;
+    visible: boolean;
+    zIndex: number;
+    components: Array<any>;
+    constructor();
+    /**
+     * Set the ID of the group
+     * @param id {string} - The `id` of the group
+     */
+    setID(id: string): this;
+    /**
+     * Set the visibility of the group
+     * @param visible {boolean} - The `visibility` of the group
+     */
+    setVisible(visible: boolean): this;
+    /**
+     * Set the zIndex of the group
+     * @param zIndex {number} - The `zIndex` of the group
+     */
+    setZIndex(zIndex: number): this;
+    /**
+     * Add a component to the group
+     * @param components {any[]} - The `components` to add to the group
+     */
+    add(...components: AnyLayer[]): this;
+    /**
+     * Remove a component from the group
+     * @param id {any} - The `id` of the component to remove
+     */
+    remove(id: string): this;
+    /**
+     * Clear all components from the group
+     */
+    clear(): this;
+    /**
+     * Get a component from the group
+     * @param id {string} - The `id` of the component to get
+     */
+    get(id: string): any;
+    /**
+     * Get all components from the group
+     */
+    getAll(): any[];
+    /**
+     * Get the length of the components
+     */
+    get length(): number;
+}