@nmmty/lazycanvas 0.2.0

package/dist/structures/managers/FontsManager.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontsManager = void 0;
+const Font_1 = require("../helpers/Font");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const Fonts_1 = require("../../helpers/Fonts");
+const canvas_1 = require("@napi-rs/canvas");
+class FontsManager {
+    map;
+    constructor(fonts) {
+        this.map = new Map();
+        let fontList = fonts || Fonts_1.Fonts;
+        for (const fontFamily in fontList) {
+            if (fontList.hasOwnProperty(fontFamily)) {
+                for (const weight in fontList[fontFamily]) {
+                    if (fontList[fontFamily].hasOwnProperty(weight)) {
+                        this.add(new Font_1.Font()
+                            .setFamily(fontFamily)
+                            .setWeight(Number(weight))
+                            // @ts-ignore
+                            .setBase64(fontList[fontFamily][weight]));
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Add a font to the map
+     * @param fonts {Font[]} - The `font` to add to the map
+     */
+    add(...fonts) {
+        for (const font of fonts) {
+            if (!font.family)
+                throw new LazyUtil_1.LazyError("Family must be provided");
+            if (!font.weight)
+                throw new LazyUtil_1.LazyError("Weight must be provided");
+            if (!font.path && !font.base64)
+                throw new LazyUtil_1.LazyError("Path or base64 must be provided");
+            if (this.map.has(`${font.family}_${font.weight}`))
+                throw new LazyUtil_1.LazyError("Font already exists");
+            this.map.set(`${font.family}_${font.weight}`, font);
+            if (font.path)
+                canvas_1.GlobalFonts.registerFromPath(font.path, font.family);
+            if (font.base64)
+                canvas_1.GlobalFonts.register(font.base64, font.family);
+        }
+        return this;
+    }
+    /**
+     * Remove a font from the map
+     * @param array {Array<{ family: string, weight: string }>} - The `family` and `weight` of the font to remove
+     */
+    remove(...array) {
+        for (const font of array) {
+            this.map.delete(`${font.family}_${font.weight}`);
+        }
+        return this;
+    }
+    /**
+     * Clear all fonts from the map
+     */
+    clear() {
+        this.map.clear();
+        return this;
+    }
+    /**
+     * Get a font from the map
+     * @param family {string} - The `family` of the font to get
+     * @param weight {string} - The `weight` of the font to get
+     */
+    get(family, weight) {
+        if (weight)
+            return this.map.get(`${family}_${weight}`);
+        return Array.from(this.map.values()).filter(font => font.family === family);
+    }
+    /**
+     * Check if a font exists in the map
+     * @param family {string} - The `family` of the font to check
+     * @param weight {string} - The `weight` of the font to check
+     */
+    has(family, weight) {
+        if (weight)
+            return this.map.has(`${family}_${weight}`);
+        return Array.from(this.map.values()).some(font => font.family === family);
+    }
+    /**
+     * Get the size of the map
+     */
+    size() {
+        return this.map.size;
+    }
+    /**
+     * Get the values of the map
+     */
+    values() {
+        return this.map.values();
+    }
+    /**
+     * Get the keys of the map
+     */
+    keys() {
+        return this.map.keys();
+    }
+    /**
+     * Get the entries of the map
+     */
+    entries() {
+        return this.map.entries();
+    }
+    /**
+     * Iterate over the map
+     * @param callbackfn {Function} - The function to execute on each font
+     * @param thisArg {any} - The `this` context to use
+     */
+    forEach(callbackfn, thisArg) {
+        this.map.forEach(callbackfn, thisArg);
+        return this;
+    }
+    /**
+     * Convert the map to a JSON object
+     */
+    toJSON() {
+        return Object.fromEntries(this.map);
+    }
+    /**
+     * Convert the map from a JSON object
+     * @param json {object} - The JSON object to convert
+     */
+    fromJSON(json) {
+        this.map = new Map(Object.entries(json));
+        return this;
+    }
+    /**
+     * Convert the map to an array
+     */
+    toArray() {
+        return Array.from(this.map.values());
+    }
+    /**
+     * Convert an array to the map
+     * @param array {Font[]} - The `array` to convert
+     */
+    fromArray(array) {
+        for (const font of array) {
+            this.map.set(`${font.family}_${font.weight}`, font);
+        }
+        return this;
+    }
+}
+exports.FontsManager = FontsManager;

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

@@ -0,0 +1,71 @@
+import { AnyLayer } from "../../types";
+import { ILayersManager } from "../../types";
+import { Group } from "../components/Group";
+export declare class LayersManager implements ILayersManager {
+    map: Map<string, AnyLayer | Group>;
+    constructor();
+    /**
+     * Add a layer to the map
+     * @param layers {AnyLayer[] | Group[]} - The `layer` or `group` to add to the map
+     */
+    add(...layers: AnyLayer[] | Group[]): this;
+    /**
+     * Remove a layer from the map
+     * @param ids {string[]} - The `id` of the layer or group to remove
+     */
+    remove(...ids: string[]): this;
+    /**
+     * Clear all layers from the map
+     */
+    clear(): this;
+    /**
+     * Get a layer from the map
+     * @param id {string} - The `id` of the layer or group to get
+     */
+    get(id: string): AnyLayer | Group | undefined;
+    /**
+     * Check if a layer exists in the map
+     * @param id {string} - The `id` of the layer or group to check
+     */
+    has(id: string): boolean;
+    /**
+     * Get the size of the map
+     */
+    size(): number;
+    /**
+     * Get the values of the map
+     */
+    values(): IterableIterator<AnyLayer | Group>;
+    /**
+     * Get the keys of the map
+     */
+    keys(): IterableIterator<string>;
+    /**
+     * Get the entries of the map
+     */
+    entries(): IterableIterator<[string, AnyLayer | Group]>;
+    /**
+     * For each layer in the map
+     * @param callbackfn {Function} - The `callback` function to execute
+     */
+    forEach(callbackfn: (value: AnyLayer | Group, key: string, map: Map<string, AnyLayer | Group>) => void): this;
+    /**
+     * Convert the map to a JSON object
+     */
+    toJSON(): object;
+    /**
+     * Convert a JSON object to the map
+     * @param json {object} - The `json` object to convert
+     */
+    fromJSON(json: object): this;
+    /**
+     * Convert the map to an array
+     */
+    toArray(): Array<AnyLayer | Group>;
+    /**
+     * Convert an array to the map
+     * @param array {Array<AnyLayer | Group>} - The `array` to convert
+     */
+    fromArray(array: Array<AnyLayer | Group>): this;
+    sort(): void;
+}

package/dist/structures/managers/LayersManager.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayersManager = void 0;
+class LayersManager {
+    map;
+    constructor() {
+        this.map = new Map();
+    }
+    /**
+     * Add a layer to the map
+     * @param layers {AnyLayer[] | Group[]} - The `layer` or `group` to add to the map
+     */
+    add(...layers) {
+        let layersArray = layers.flat();
+        layersArray = layersArray.filter(l => l !== undefined);
+        for (const layer of layersArray) {
+            if (this.map.has(layer.id))
+                throw new Error("Layer already exists");
+            this.map.set(layer.id, layer);
+        }
+        this.sort();
+        return this;
+    }
+    /**
+     * Remove a layer from the map
+     * @param ids {string[]} - The `id` of the layer or group to remove
+     */
+    remove(...ids) {
+        for (const id of ids) {
+            this.map.delete(id);
+        }
+        return this;
+    }
+    /**
+     * Clear all layers from the map
+     */
+    clear() {
+        this.map.clear();
+        return this;
+    }
+    /**
+     * Get a layer from the map
+     * @param id {string} - The `id` of the layer or group to get
+     */
+    get(id) {
+        return this.map.get(id);
+    }
+    /**
+     * Check if a layer exists in the map
+     * @param id {string} - The `id` of the layer or group to check
+     */
+    has(id) {
+        return this.map.has(id);
+    }
+    /**
+     * Get the size of the map
+     */
+    size() {
+        return this.map.size;
+    }
+    /**
+     * Get the values of the map
+     */
+    values() {
+        return this.map.values();
+    }
+    /**
+     * Get the keys of the map
+     */
+    keys() {
+        return this.map.keys();
+    }
+    /**
+     * Get the entries of the map
+     */
+    entries() {
+        return this.map.entries();
+    }
+    /**
+     * For each layer in the map
+     * @param callbackfn {Function} - The `callback` function to execute
+     */
+    forEach(callbackfn) {
+        this.map.forEach(callbackfn);
+        return this;
+    }
+    /**
+     * Convert the map to a JSON object
+     */
+    toJSON() {
+        return Object.fromEntries(this.map);
+    }
+    /**
+     * Convert a JSON object to the map
+     * @param json {object} - The `json` object to convert
+     */
+    fromJSON(json) {
+        this.map = new Map(Object.entries(json));
+        return this;
+    }
+    /**
+     * Convert the map to an array
+     */
+    toArray() {
+        return Array.from(this.map.values());
+    }
+    /**
+     * Convert an array to the map
+     * @param array {Array<AnyLayer | Group>} - The `array` to convert
+     */
+    fromArray(array) {
+        this.map = new Map(array.map(l => [l.id, l]));
+        return this;
+    }
+    sort() {
+        this.fromArray(this.toArray().sort((a, b) => a.zIndex - b.zIndex));
+    }
+}
+exports.LayersManager = LayersManager;

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

@@ -0,0 +1,14 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import { IRenderManager } from "../../types";
+import { LazyCanvas } from "../LazyCanvas";
+import { SKRSContext2D } from "@napi-rs/canvas";
+export declare class RenderManager implements IRenderManager {
+    lazyCanvas: LazyCanvas;
+    constructor(lazyCanvas: LazyCanvas);
+    /**
+     * This will render all the layers and return the rendered canvas buffer or ctx.
+     * @returns {Promise<Buffer | SKRSContext2D>}
+     */
+    render(): Promise<Buffer | SKRSContext2D>;
+}

package/dist/structures/managers/RenderManager.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderManager = void 0;
+const enum_1 = require("../../types/enum");
+const Group_1 = require("../components/Group");
+class RenderManager {
+    lazyCanvas;
+    constructor(lazyCanvas) {
+        this.lazyCanvas = lazyCanvas;
+    }
+    /**
+     * 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 (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);
+                        }
+                    }
+                }
+                else {
+                    await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas);
+                }
+                this.lazyCanvas.ctx.shadowColor = 'transparent';
+            }
+        }
+        switch (this.lazyCanvas.exportType) {
+            case enum_1.Export.Buffer:
+                return this.lazyCanvas.canvas.toBuffer('image/png');
+            case enum_1.Export.CTX:
+                return this.lazyCanvas.ctx;
+            case enum_1.Export.SVG:
+                // @ts-ignore
+                return this.lazyCanvas.canvas.getContent().toString('utf8');
+            default:
+                return this.lazyCanvas.canvas.toBuffer('image/png');
+        }
+    }
+}
+exports.RenderManager = RenderManager;

package/dist/types/LazyCanvas.d.ts

@@ -0,0 +1,16 @@
+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 { Export } from "./enum";
+
+export interface ILazyCanvas {
+    width: number;
+    height: number;
+    canvas: Canvas;
+    ctx: SKRSContext2D;
+    layers: LayersManager;
+    render: RenderManager;
+    fonts: FontsManager;
+    exportType: Export;
+}

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

@@ -0,0 +1,48 @@
+import { ColorType, ScaleType } from "../";
+import { Centring, LayerType } from "../enum";
+
+export interface IBaseLayer {
+    id: string;
+    type: LayerType;
+    zIndex: number;
+    visible: boolean;
+    props: IBaseLayerProps;
+}
+
+export interface IBaseLayerProps {
+    x: ScaleType;
+    y: ScaleType;
+    centring: Centring;
+    filter: string;
+    opacity: number;
+    filled: boolean;
+    fillStyle: ColorType;
+    shadow: {
+        color: string;
+        blur: number;
+        offsetX: number;
+        offsetY: number;
+    };
+    stroke: {
+        width: number;
+        cap: CanvasLineCap;
+        join: CanvasLineJoin;
+        dashOffset: number;
+        dash: number[];
+        miterLimit: number;
+    };
+    transform: Transform;
+}
+
+export interface Transform {
+    rotate: number;
+    scale: {
+        x: number;
+        y: number;
+    };
+    translate: {
+        x: number;
+        y: number;
+    };
+    matrix: DOMMatrix2DInit;
+}

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

@@ -0,0 +1,6 @@
+export interface IGroup {
+    id: string;
+    visible: boolean;
+    zIndex: number;
+    components: Array<any>;
+}

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

@@ -0,0 +1,15 @@
+import { IBaseLayer, IBaseLayerProps } from "./BaseLayer";
+import { ScaleType } from "../";
+
+export interface IImageLayer extends IBaseLayer {
+    props: IImageLayerProps;
+}
+
+export interface IImageLayerProps extends IBaseLayerProps {
+    src: string;
+    size: {
+        width: ScaleType;
+        height: ScaleType;
+        radius: ScaleType;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { IBaseLayer, IBaseLayerProps } from "./BaseLayer";
+import { ScaleType } from "../";
+
+export interface IMorphLayer extends IBaseLayer {
+    props: IMorphLayerProps;
+}
+
+export interface IMorphLayerProps extends IBaseLayerProps {
+    size: {
+        width: ScaleType;
+        height: ScaleType;
+        radius: ScaleType;
+    };
+}

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

@@ -0,0 +1,26 @@
+import { ColorType, ScaleType } from "../";
+import { IBaseLayer, IBaseLayerProps } from "./BaseLayer";
+import { FontWeight, TextAlign, TextBaseline, TextDirection } from "../enum";
+
+export interface ITextLayer extends IBaseLayer {
+    props: ITextLayerProps;
+}
+
+export interface ITextLayerProps extends IBaseLayerProps {
+    text: string;
+    font: {
+        family: string;
+        size: number;
+        weight: FontWeight;
+    };
+    multiline: {
+        enabled: boolean;
+        width: ScaleType;
+        height: ScaleType;
+        spacing?: number;
+    };
+    color: ColorType;
+    align: TextAlign;
+    baseline: TextBaseline;
+    direction: TextDirection;
+}

package/dist/types/enum.d.ts

@@ -0,0 +1,88 @@
+export declare enum LayerType {
+    Base = "base",
+    Arc = "arc",
+    ArcTo = "arcTo",
+    BezierCurve = "bezierCurve",
+    Clip = "clip",
+    Image = "image",
+    Line = "line",
+    Path = "path",
+    QuadraticCurve = "quadraticCurve",
+    Morph = "morph",
+    Text = "text",
+    Group = "group"
+}
+export declare enum LayerScaleType {
+    Pixel = "px",
+    Percent = "%",
+    Canvas = "canvas",
+    None = "none"
+}
+export declare enum GradientType {
+    Linear = "linear",
+    Radial = "radial",
+    Conic = "conic"
+}
+export declare enum FontWeight {
+    Thin = 100,
+    ExtraLight = 200,
+    Light = 300,
+    Normal = 400,
+    Medium = 500,
+    SemiBold = 600,
+    Bold = 700,
+    ExtraBold = 800,
+    Black = 900,
+    ExtraBlack = 950
+}
+export declare enum TextAlign {
+    Left = "left",
+    Right = "right",
+    Center = "center",
+    Start = "start",
+    End = "end"
+}
+export declare enum TextBaseline {
+    Top = "top",
+    Hanging = "hanging",
+    Middle = "middle",
+    Alphabetic = "alphabetic",
+    Ideographic = "ideographic",
+    Bottom = "bottom"
+}
+export declare enum TextDirection {
+    LeftToRight = "ltr",
+    RightToLeft = "rtl",
+    Inherit = "inherit"
+}
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square"
+}
+export declare enum LineJoin {
+    Bevel = "bevel",
+    Round = "round",
+    Miter = "miter"
+}
+export declare enum Export {
+    Buffer = "buffer",
+    SVG = "svg",
+    CTX = "ctx"
+}
+export declare enum SaveFormat {
+    PNG = "png",
+    JPEG = "jpeg",
+    JPG = "jpg",
+    SVG = "svg"
+}
+export declare enum Centring {
+    Start = "start",
+    Center = "center"
+}
+export declare enum PatternType {
+    Repeat = "repeat",
+    RepeatX = "repeat-x",
+    RepeatY = "repeat-y",
+    NoRepeat = "no-repeat"
+}