@nmmty/lazycanvas 0.2.0

package/dist/structures/components/Group.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = void 0;
+const enum_1 = require("../../types/enum");
+const utils_1 = require("../../utils/utils");
+class Group {
+    id;
+    visible;
+    zIndex;
+    components;
+    constructor() {
+        this.id = (0, utils_1.generateID)(enum_1.LayerType.Group);
+        this.visible = true;
+        this.zIndex = 1;
+        this.components = [];
+    }
+    /**
+     * Set the ID of the group
+     * @param id {string} - The `id` of the group
+     */
+    setID(id) {
+        this.id = id;
+        return this;
+    }
+    /**
+     * Set the visibility of the group
+     * @param visible {boolean} - The `visibility` of the group
+     */
+    setVisible(visible) {
+        this.visible = visible;
+        return this;
+    }
+    /**
+     * Set the zIndex of the group
+     * @param zIndex {number} - The `zIndex` of the group
+     */
+    setZIndex(zIndex) {
+        this.zIndex = zIndex;
+        return this;
+    }
+    /**
+     * Add a component to the group
+     * @param components {any[]} - The `components` to add to the group
+     */
+    add(...components) {
+        let layersArray = components.flat();
+        layersArray = layersArray.filter(l => l !== undefined);
+        layersArray = layersArray.sort((a, b) => a.zIndex - b.zIndex);
+        this.components.push(...layersArray);
+        return this;
+    }
+    /**
+     * Remove a component from the group
+     * @param id {any} - The `id` of the component to remove
+     */
+    remove(id) {
+        this.components = this.components.filter(c => c.id !== id);
+        return this;
+    }
+    /**
+     * Clear all components from the group
+     */
+    clear() {
+        this.components = [];
+        return this;
+    }
+    /**
+     * Get a component from the group
+     * @param id {string} - The `id` of the component to get
+     */
+    get(id) {
+        return this.components.find(c => c.id === id);
+    }
+    /**
+     * Get all components from the group
+     */
+    getAll() {
+        return this.components;
+    }
+    /**
+     * Get the length of the components
+     */
+    get length() {
+        return this.components.length;
+    }
+}
+exports.Group = Group;

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

@@ -0,0 +1,24 @@
+import { BaseLayer } from "./BaseLayer";
+import { IImageLayer, IImageLayerProps, ScaleType } from "../../types";
+import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
+    props: IImageLayerProps;
+    constructor(props?: IImageLayerProps);
+    /**
+     * @description Sets the source of the image, it can be like link to website or path to file.
+     * @param src {string} - The `src` of the image.
+     */
+    setSrc(src: string): this;
+    /**
+     * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param width {ScaleType} - The `width` of the image.
+     * @param height {ScaleType} - The `height` of the image.
+     * @param radius {ScaleType} - The `radius` of the image. (optional)
+     */
+    setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
+    draw(ctx: SKRSContext2D, canvas: Canvas): Promise<void>;
+    /**
+     * @returns {IImageLayer}
+     */
+    toJSON(): IImageLayer;
+}

package/dist/structures/components/ImageLayer.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const enum_1 = require("../../types/enum");
+const canvas_1 = require("@napi-rs/canvas");
+const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const jimp = __importStar(require("jimp"));
+class ImageLayer extends BaseLayer_1.BaseLayer {
+    props;
+    constructor(props) {
+        super(enum_1.LayerType.Image, props);
+        this.props = props ? props : {};
+        this.props.centring = enum_1.Centring.Center;
+    }
+    /**
+     * @description Sets the source of the image, it can be like link to website or path to file.
+     * @param src {string} - The `src` of the image.
+     */
+    setSrc(src) {
+        if (!(0, utils_1.isImageUrlValid)(src))
+            throw new LazyUtil_1.LazyError('The src of the image must be a valid URL');
+        this.props.src = src;
+        return this;
+    }
+    /**
+     * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param width {ScaleType} - The `width` of the image.
+     * @param height {ScaleType} - The `height` of the image.
+     * @param radius {ScaleType} - The `radius` of the image. (optional)
+     */
+    setSize(width, height, radius) {
+        this.props.size = {
+            width: width,
+            height: height,
+            radius: radius || 0,
+        };
+        return this;
+    }
+    async draw(ctx, canvas) {
+        let xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
+        let ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
+        let w = (0, utils_1.parseToNormal)(this.props.size.width, canvas);
+        let h = (0, utils_1.parseToNormal)(this.props.size.height, canvas, { width: w, height: 0 }, { vertical: true });
+        let r = (0, utils_1.parseToNormal)(this.props.size.radius, canvas, { width: w, height: h }, { layer: true });
+        let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
+        ctx.save();
+        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        (0, utils_1.drawShadow)(ctx, this.props.shadow);
+        (0, utils_1.opacity)(ctx, this.props.opacity);
+        (0, utils_1.filters)(ctx, this.props.filter);
+        let jmp = await jimp.read(this.props.src);
+        jmp.resize(w, h);
+        let image = await (0, canvas_1.loadImage)(await jmp.getBufferAsync('image/png'));
+        if (!image)
+            throw new LazyUtil_1.LazyError('The image could not be loaded');
+        if (r) {
+            ctx.beginPath();
+            ctx.moveTo(x + (w / 2), y);
+            ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
+            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
+            ctx.arcTo(x, y + h, x, y + (h / 2), r);
+            ctx.arcTo(x, y, x + (w / 2), y, r);
+            ctx.closePath();
+            ctx.clip();
+            ctx.drawImage(image, x, y, w, h);
+        }
+        else {
+            ctx.drawImage(image, x, y, w, h);
+        }
+        ctx.restore();
+    }
+    /**
+     * @returns {IImageLayer}
+     */
+    toJSON() {
+        let data = super.toJSON();
+        data.props = this.props;
+        return { ...data };
+    }
+}
+exports.ImageLayer = ImageLayer;

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

@@ -0,0 +1,39 @@
+import { BaseLayer } from "./BaseLayer";
+import { IMorphLayer, IMorphLayerProps, ColorType, ScaleType } from "../../types";
+import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
+    props: IMorphLayerProps;
+    constructor(props?: IMorphLayerProps);
+    /**
+     * @description Sets size of the morph layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param width {ScaleType} - The `width` of the morph layer.
+     * @param height {ScaleType} - The `height` of the morph layer.
+     * @param radius {ScaleType} - The `radius` of the morph layer. (optional)
+     */
+    setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
+    /**
+     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
+     * @param color {string} - The `color` of the layer.
+     */
+    setColor(color: ColorType): this;
+    /**
+     * @description Sets the stroke of the layer.
+     * @param width {number} - The `width` of the stroke.
+     * @param cap {string} - The `cap` of the stroke.
+     * @param join {string} - The `join` of the stroke.
+     * @param dash {number[]} - The `dash` of the stroke.
+     * @param dashOffset {number} - The `dashOffset` of the stroke.
+     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     */
+    setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    /**
+     * @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
+     * @param filled {boolean} - The `filled` of the layer.
+     */
+    setFilled(filled: boolean): this;
+    draw(ctx: SKRSContext2D, canvas: Canvas): Promise<void>;
+    /**
+     * @returns {IMorphLayer}
+     */
+    toJSON(): IMorphLayer;
+}

package/dist/structures/components/MorphLayer.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MorphLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const enum_1 = require("../../types/enum");
+const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const Gradient_1 = require("../helpers/Gradient");
+const Pattern_1 = require("../helpers/Pattern");
+class MorphLayer extends BaseLayer_1.BaseLayer {
+    props;
+    constructor(props) {
+        super(enum_1.LayerType.Morph, props);
+        this.props = props ? props : {};
+        if (!this.props.fillStyle)
+            this.props.fillStyle = '#000000';
+        if (!this.props.filled && this.props.filled !== false)
+            this.props.filled = true;
+        this.props.centring = enum_1.Centring.Center;
+    }
+    /**
+     * @description Sets size of the morph layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param width {ScaleType} - The `width` of the morph layer.
+     * @param height {ScaleType} - The `height` of the morph layer.
+     * @param radius {ScaleType} - The `radius` of the morph layer. (optional)
+     */
+    setSize(width, height, radius) {
+        this.props.size = {
+            width: width,
+            height: height,
+            radius: radius || 0,
+        };
+        return this;
+    }
+    /**
+     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
+     * @param color {string} - The `color` of the layer.
+     */
+    setColor(color) {
+        if (!color)
+            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+        if (!(0, utils_1.isColor)(color))
+            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
+        let fill = (0, utils_1.parseColor)(color);
+        if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
+            this.props.fillStyle = fill;
+        }
+        else {
+            let arr = fill.split(':');
+            this.props.fillStyle = arr[0];
+            this.props.opacity = parseFloat(arr[1]) || 1;
+        }
+        return this;
+    }
+    /**
+     * @description Sets the stroke of the layer.
+     * @param width {number} - The `width` of the stroke.
+     * @param cap {string} - The `cap` of the stroke.
+     * @param join {string} - The `join` of the stroke.
+     * @param dash {number[]} - The `dash` of the stroke.
+     * @param dashOffset {number} - The `dashOffset` of the stroke.
+     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     */
+    setStroke(width, cap, join, dash, dashOffset, miterLimit) {
+        this.props.stroke = {
+            width,
+            cap: cap || 'butt',
+            join: join || 'miter',
+            dash: dash || [],
+            dashOffset: dashOffset || 0,
+            miterLimit: miterLimit || 10,
+        };
+        return this;
+    }
+    /**
+     * @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
+     * @param filled {boolean} - The `filled` of the layer.
+     */
+    setFilled(filled) {
+        this.props.filled = filled;
+        return this;
+    }
+    async draw(ctx, canvas) {
+        const xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
+        const ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
+        const w = (0, utils_1.parseToNormal)(this.props.size.width, canvas);
+        const h = (0, utils_1.parseToNormal)(this.props.size.height, canvas, { width: w, height: 0 }, { vertical: true });
+        const r = (0, utils_1.parseToNormal)(this.props.size.radius, canvas, { width: w, height: h }, { layer: true });
+        let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
+        ctx.save();
+        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        ctx.beginPath();
+        if (r) {
+            ctx.moveTo(x + (w / 2), y);
+            ctx.arcTo(x + w, y, x + w, y + (h / 2), r);
+            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, r);
+            ctx.arcTo(x, y + h, x, y + (h / 2), r);
+            ctx.arcTo(x, y, x + (w / 2), y, r);
+        }
+        else {
+            ctx.rect(x, y, w, h);
+        }
+        ctx.closePath();
+        (0, utils_1.drawShadow)(ctx, this.props.shadow);
+        (0, utils_1.opacity)(ctx, this.props.opacity);
+        (0, utils_1.filters)(ctx, this.props.filter);
+        let base = (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        let fillStyle;
+        if (base instanceof Promise) {
+            fillStyle = await base;
+        }
+        else {
+            fillStyle = base;
+        }
+        if (this.props.filled) {
+            ctx.fillStyle = fillStyle;
+            ctx.fill();
+        }
+        else {
+            ctx.strokeStyle = fillStyle;
+            ctx.lineWidth = this.props.stroke?.width || 1;
+            ctx.lineCap = this.props.stroke?.cap || 'butt';
+            ctx.lineJoin = this.props.stroke?.join || 'miter';
+            ctx.miterLimit = this.props.stroke?.miterLimit || 10;
+            ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
+            ctx.setLineDash(this.props.stroke?.dash || []);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    /**
+     * @returns {IMorphLayer}
+     */
+    toJSON() {
+        let data = super.toJSON();
+        data.props = this.props;
+        return { ...data };
+    }
+}
+exports.MorphLayer = MorphLayer;

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

@@ -0,0 +1,69 @@
+import { BaseLayer } from "./BaseLayer";
+import { FontWeight, LineCap, LineJoin, TextAlign, TextBaseline, TextDirection } from "../../types/enum";
+import { ITextLayer, ITextLayerProps, ScaleType, ColorType } from "../../types";
+import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+export declare class TextLayer extends BaseLayer<ITextLayerProps> {
+    props: ITextLayerProps;
+    constructor(props?: ITextLayerProps);
+    /**
+     * @description Sets the text of the text layer.
+     * @param text {string} - The `text` of the text layer.
+     */
+    setText(text: string): this;
+    /**
+     * @description Set the font of the text layer. You can use `Geist` and `GeistMono`, or you can upload your own font from file/base64 buffer.
+     * @param family {string} - The `family` of the font.
+     * @param size {number} - The `size` of the font.
+     * @param weight {FontWeight} - The `weight` of the font.
+     */
+    setFont(family: string, size: number, weight: FontWeight): this;
+    /**
+     * @description Set the multiline of the text layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param enabled {boolean} - Whether the text is multiline.
+     * @param width {ScaleType} - width of "window" the multiline text. Can be used in one line text for text max width.
+     * @param height {ScaleType} - height of "window" the multiline text.
+     * @param spacing {number} - The space between the lines.
+     */
+    setMultiline(enabled: boolean, width: ScaleType, height: ScaleType, spacing?: number): this;
+    /**
+     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
+     * @param color {string} - The `color` of the layer.
+     */
+    setColor(color: ColorType): this;
+    /**
+     * @description Set the align of the text layer.
+     * @param align {TextAlign} - The `align` of the text layer.
+     */
+    setAlign(align: TextAlign): this;
+    /**
+     * @description Set the baseline of the text layer.
+     * @param baseline {TextBaseline} - The `baseline` of the text layer.
+     */
+    setBaseline(baseline: TextBaseline): this;
+    /**
+     * @description Set the direction of the text layer.
+     * @param direction {TextDirection} - The `direction` of the text layer.
+     */
+    setDirection(direction: TextDirection): this;
+    /**
+     * @description Set the stroke of the layer.
+     * @param width {number} - The `width` of the stroke.
+     * @param cap {string} - The `cap` of the stroke.
+     * @param join {string} - The `join` of the stroke.
+     * @param dash {number[]} - The `dash` of the stroke.
+     * @param dashOffset {number} - The `dashOffset` of the stroke.
+     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     */
+    setStroke(width: number, cap?: LineCap, join?: LineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    /**
+     * @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
+     * @param filled {boolean} - The `filled` of the layer.
+     */
+    setFilled(filled: boolean): this;
+    draw(ctx: SKRSContext2D, canvas: Canvas): Promise<void>;
+    private drawText;
+    /**
+     * @returns {ITextLayer}
+     */
+    toJSON(): ITextLayer;
+}