@nmmty/lazycanvas 0.2.0

package/dist/structures/components/TextLayer.js

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const enum_1 = require("../../types/enum");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const Gradient_1 = require("../helpers/Gradient");
+const utils_1 = require("../../utils/utils");
+const Pattern_1 = require("../helpers/Pattern");
+class TextLayer extends BaseLayer_1.BaseLayer {
+    props;
+    constructor(props) {
+        super(enum_1.LayerType.Text, props);
+        this.props = props ? props : {};
+        this.props.align = enum_1.TextAlign.Left;
+        this.props.font = {
+            family: 'Geist',
+            size: 16,
+            weight: enum_1.FontWeight.Normal,
+        };
+        this.props.fillStyle = '#ffffff';
+        this.props.filled = true;
+        this.props.multiline = {
+            enabled: false,
+            width: 'vw',
+            height: 0,
+            spacing: 1.1,
+        };
+        this.props.centring = enum_1.Centring.Center;
+    }
+    /**
+     * @description Sets the text of the text layer.
+     * @param text {string} - The `text` of the text layer.
+     */
+    setText(text) {
+        this.props.text = text;
+        return 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, size, weight) {
+        if (!family)
+            throw new LazyUtil_1.LazyError('The family of the font must be provided');
+        if (!size)
+            throw new LazyUtil_1.LazyError('The size of the font must be provided');
+        if (!weight)
+            throw new LazyUtil_1.LazyError('The weight of the font must be provided');
+        this.props.font = {
+            family: family,
+            size: size,
+            weight: weight,
+        };
+        return 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, width, height, spacing) {
+        this.props.multiline = {
+            enabled: enabled,
+            width: width,
+            height: height,
+            spacing: spacing || 1.1,
+        };
+        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 Set the align of the text layer.
+     * @param align {TextAlign} - The `align` of the text layer.
+     */
+    setAlign(align) {
+        this.props.align = align;
+        return this;
+    }
+    /**
+     * @description Set the baseline of the text layer.
+     * @param baseline {TextBaseline} - The `baseline` of the text layer.
+     */
+    setBaseline(baseline) {
+        this.props.baseline = baseline;
+        return this;
+    }
+    /**
+     * @description Set the direction of the text layer.
+     * @param direction {TextDirection} - The `direction` of the text layer.
+     */
+    setDirection(direction) {
+        this.props.direction = direction;
+        return 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, 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 x = (0, utils_1.parseToNormal)(this.props.x, canvas);
+        const y = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
+        const w = (0, utils_1.parseToNormal)(this.props.multiline?.width, canvas);
+        const h = (0, utils_1.parseToNormal)(this.props.multiline?.height, canvas, { width: w, height: 0 }, { vertical: true });
+        ctx.save();
+        console.log(this.props);
+        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type }, { text: this.props.text, textAlign: this.props.align, fontSize: this.props.font.size, multiline: this.props.multiline.enabled });
+        ctx.beginPath();
+        (0, utils_1.drawShadow)(ctx, this.props.shadow);
+        (0, utils_1.opacity)(ctx, this.props.opacity);
+        (0, utils_1.filters)(ctx, this.props.filter);
+        ctx.textAlign = this.props.align;
+        if (this.props.baseline)
+            ctx.textBaseline = this.props.baseline;
+        if (this.props.direction)
+            ctx.direction = this.props.direction;
+        if (this.props.multiline.enabled) {
+            const words = this.props.text.split(' ');
+            let lines = [];
+            for (let fontSize = 1; fontSize <= this.props.font.size; fontSize++) {
+                let lineHeight = fontSize * (this.props.multiline.spacing || 1.1);
+                ctx.font = `${this.props.font.weight} ${fontSize}px ${this.props.font.family}`;
+                let xm = x;
+                let ym = y;
+                lines = [];
+                let line = '';
+                for (let word of words) {
+                    let linePlus = line + word + ' ';
+                    if (ctx.measureText(linePlus).width > w) {
+                        lines.push({ text: line, x: xm, y: ym });
+                        line = word + ' ';
+                        ym += lineHeight;
+                    }
+                    else {
+                        line = linePlus;
+                    }
+                }
+                lines.push({ text: line, x: xm, y: ym });
+                if (ym > ym + h)
+                    break;
+            }
+            for (let line of lines) {
+                this.drawText(this.props, ctx, await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle), line.text, line.x, line.y, w, h);
+            }
+        }
+        else {
+            ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
+            this.drawText(this.props, ctx, await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle), this.props.text, x, y, w, h);
+        }
+        ctx.closePath();
+        ctx.restore();
+    }
+    drawText(props, ctx, fillStyle, text, x, y, w, h) {
+        if (props.filled) {
+            ctx.fillStyle = fillStyle;
+            ctx.fillText(text, x, y, w);
+        }
+        else {
+            ctx.strokeStyle = fillStyle;
+            ctx.lineWidth = props.stroke?.width || 1;
+            ctx.lineCap = props.stroke?.cap || 'butt';
+            ctx.lineJoin = props.stroke?.join || 'miter';
+            ctx.miterLimit = props.stroke?.miterLimit || 10;
+            ctx.lineDashOffset = props.stroke?.dashOffset || 0;
+            ctx.setLineDash(props.stroke?.dash || []);
+            ctx.strokeText(text, x, y, w);
+        }
+    }
+    /**
+     * @returns {ITextLayer}
+     */
+    toJSON() {
+        let data = super.toJSON();
+        data.props = this.props;
+        return { ...data };
+    }
+}
+exports.TextLayer = TextLayer;

package/dist/structures/helpers/Font.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import { FontWeight } from "../../types/enum";
+import { IFont } from "../../types";
+export declare class Font implements IFont {
+    family: string;
+    weight: FontWeight;
+    path?: string;
+    base64?: Buffer;
+    constructor();
+    /**
+     * Set the font family
+     * @param family {string} - The `family` of the font
+     */
+    setFamily(family: string): this;
+    /**
+     * Set the font weight
+     * @param weight {FontWeight} - The `weight` of the font
+     */
+    setWeight(weight: FontWeight): this;
+    /**
+     * Set the path of the font
+     * @param path {string} - The `path` of the font
+     */
+    setPath(path: string): this;
+    /**
+     * Set the base64 of the font
+     * @param base64 {string} - The `base64` of the font
+     */
+    setBase64(base64: Buffer): this;
+    /**
+     * @returns {IFont}
+     */
+    toJSON(): IFont;
+}

package/dist/structures/helpers/Font.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Font = void 0;
+const enum_1 = require("../../types/enum");
+class Font {
+    family;
+    weight;
+    path;
+    base64;
+    constructor() {
+        this.family = "Arial";
+        this.weight = enum_1.FontWeight.Normal;
+    }
+    /**
+     * Set the font family
+     * @param family {string} - The `family` of the font
+     */
+    setFamily(family) {
+        if (!family)
+            throw new Error("Family must be provided");
+        this.family = family;
+        return this;
+    }
+    /**
+     * Set the font weight
+     * @param weight {FontWeight} - The `weight` of the font
+     */
+    setWeight(weight) {
+        if (!weight)
+            throw new Error("Weight must be provided");
+        this.weight = weight;
+        return this;
+    }
+    /**
+     * Set the path of the font
+     * @param path {string} - The `path` of the font
+     */
+    setPath(path) {
+        if (!path)
+            throw new Error("Path must be provided");
+        this.path = path;
+        return this;
+    }
+    /**
+     * Set the base64 of the font
+     * @param base64 {string} - The `base64` of the font
+     */
+    setBase64(base64) {
+        if (!base64)
+            throw new Error("Base64 must be provided");
+        this.base64 = base64;
+        return this;
+    }
+    /**
+     * @returns {IFont}
+     */
+    toJSON() {
+        return {
+            family: this.family,
+            weight: this.weight,
+            path: this.path
+        };
+    }
+}
+exports.Font = Font;

package/dist/structures/helpers/Gradient.d.ts

@@ -0,0 +1,29 @@
+import { GradientType } from "../../types/enum";
+import { IGradient, GradientPoint, GradientColorStop } from "../../types";
+import { SKRSContext2D } from "@napi-rs/canvas";
+export declare class Gradient implements IGradient {
+    type: GradientType;
+    points: Array<GradientPoint>;
+    stops: Array<GradientColorStop>;
+    constructor();
+    /**
+     * Set the type of the gradient
+     * @param type {GradientType} - The `type` of the gradient. Can be `linear`, `radial`, or `conic`
+     */
+    setType(type: GradientType): this;
+    /**
+     * Add a point to the gradient
+     * @param points {GradientPoint[]} - The `points` to add to the gradient. `{ x: number, y: number }`
+     */
+    addPoints(...points: GradientPoint[]): this;
+    /**
+     * Add a stop to the gradient
+     * @param stops {GradientColorStop[]} - The `stops` to add to the gradient. `{ color: string, position: number }`
+     */
+    addStops(...stops: GradientColorStop[]): this;
+    draw(ctx: SKRSContext2D): CanvasGradient;
+    /**
+     * @returns {IGradient}
+     */
+    toJSON(): IGradient;
+}

package/dist/structures/helpers/Gradient.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gradient = void 0;
+const enum_1 = require("../../types/enum");
+const utils_1 = require("../../utils/utils");
+class Gradient {
+    type;
+    points;
+    stops;
+    constructor() {
+        this.type = enum_1.GradientType.Linear;
+        this.points = [];
+        this.stops = [];
+    }
+    /**
+     * Set the type of the gradient
+     * @param type {GradientType} - The `type` of the gradient. Can be `linear`, `radial`, or `conic`
+     */
+    setType(type) {
+        this.type = type;
+        return this;
+    }
+    /**
+     * Add a point to the gradient
+     * @param points {GradientPoint[]} - The `points` to add to the gradient. `{ x: number, y: number }`
+     */
+    addPoints(...points) {
+        this.points.push(...points);
+        return this;
+    }
+    /**
+     * Add a stop to the gradient
+     * @param stops {GradientColorStop[]} - The `stops` to add to the gradient. `{ color: string, position: number }`
+     */
+    addStops(...stops) {
+        this.stops.push(...stops);
+        return this;
+    }
+    draw(ctx) {
+        let gradientData = this.toJSON();
+        let gradient;
+        switch (gradientData.type) {
+            case enum_1.GradientType.Linear:
+                gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
+                break;
+            case enum_1.GradientType.Radial:
+                gradient = ctx.createRadialGradient(gradientData.points[0].x, gradientData.points[0].y, (gradientData.points[0].r || 0), (gradientData.points[1].x || gradientData.points[0].x), (gradientData.points[1].y || gradientData.points[0].y), (gradientData.points[1].r || 0));
+                break;
+            case enum_1.GradientType.Conic:
+                gradient = ctx.createConicGradient((gradientData.points[0].startAngle || 0), gradientData.points[0].x, gradientData.points[0].y);
+                break;
+            default:
+                gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
+                break;
+        }
+        for (let stop of gradientData.stops) {
+            gradient.addColorStop(stop.offset, (0, utils_1.parseHex)(stop.color));
+        }
+        return gradient;
+    }
+    /**
+     * @returns {IGradient}
+     */
+    toJSON() {
+        return {
+            type: this.type,
+            points: this.points,
+            stops: this.stops,
+        };
+    }
+}
+exports.Gradient = Gradient;

package/dist/structures/helpers/Pattern.d.ts

@@ -0,0 +1,24 @@
+import { PatternType } from "../../types/enum";
+import { IPattern } from "../../types";
+import { LazyCanvas } from "../LazyCanvas";
+import { SKRSContext2D } from "@napi-rs/canvas";
+export declare class Pattern implements IPattern {
+    type: PatternType;
+    src: string | LazyCanvas;
+    constructor();
+    /**
+     * Set the type of the pattern
+     * @param type {PatternType} - The `type` of the pattern
+     */
+    setType(type: PatternType): this;
+    /**
+     * Set the source of the pattern
+     * @param src {string | LazyCanvas} - The `src` of the pattern
+     */
+    setSrc(src: string | LazyCanvas): this;
+    draw(ctx: SKRSContext2D): Promise<CanvasPattern>;
+    /**
+     * @returns {IPattern}
+     */
+    toJSON(): IPattern;
+}

package/dist/structures/helpers/Pattern.js

@@ -0,0 +1,76 @@
+"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.Pattern = void 0;
+const enum_1 = require("../../types/enum");
+const LazyCanvas_1 = require("../LazyCanvas");
+const canvas_1 = require("@napi-rs/canvas");
+const jimp = __importStar(require("jimp"));
+class Pattern {
+    type;
+    src;
+    constructor() {
+        this.type = enum_1.PatternType.Repeat;
+        this.src = '';
+    }
+    /**
+     * Set the type of the pattern
+     * @param type {PatternType} - The `type` of the pattern
+     */
+    setType(type) {
+        this.type = type;
+        return this;
+    }
+    /**
+     * Set the source of the pattern
+     * @param src {string | LazyCanvas} - The `src` of the pattern
+     */
+    setSrc(src) {
+        this.src = src;
+        return this;
+    }
+    async draw(ctx) {
+        if (this.src instanceof LazyCanvas_1.LazyCanvas) {
+            let jmp = await this.src.render.render();
+            let image = await (0, canvas_1.loadImage)(jmp);
+            return ctx.createPattern(image, this.type);
+        }
+        else {
+            let jmp = await jimp.read(this.src);
+            let image = await (0, canvas_1.loadImage)(await jmp.getBufferAsync('image/png'));
+            return ctx.createPattern(image, this.type);
+        }
+    }
+    /**
+     * @returns {IPattern}
+     */
+    toJSON() {
+        return {
+            type: this.type,
+            src: this.src
+        };
+    }
+}
+exports.Pattern = Pattern;

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

@@ -0,0 +1,75 @@
+import { IFontsManager, IFonts } from "../../types";
+import { Font } from "../helpers/Font";
+export declare class FontsManager implements IFontsManager {
+    map: Map<string, Font>;
+    constructor(fonts?: IFonts);
+    /**
+     * Add a font to the map
+     * @param fonts {Font[]} - The `font` to add to the map
+     */
+    add(...fonts: Font[]): 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: Array<{
+        family: string;
+        weight: string;
+    }>): this;
+    /**
+     * Clear all fonts from the map
+     */
+    clear(): 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: string, weight?: string): Font | Font[] | undefined;
+    /**
+     * 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: string, weight?: string): boolean;
+    /**
+     * Get the size of the map
+     */
+    size(): number;
+    /**
+     * Get the values of the map
+     */
+    values(): IterableIterator<Font>;
+    /**
+     * Get the keys of the map
+     */
+    keys(): IterableIterator<string>;
+    /**
+     * Get the entries of the map
+     */
+    entries(): IterableIterator<[string, Font]>;
+    /**
+     * Iterate over the map
+     * @param callbackfn {Function} - The function to execute on each font
+     * @param thisArg {any} - The `this` context to use
+     */
+    forEach(callbackfn: (value: Font, key: string, map: Map<string, Font>) => void, thisArg?: any): this;
+    /**
+     * Convert the map to a JSON object
+     */
+    toJSON(): object;
+    /**
+     * Convert the map from a JSON object
+     * @param json {object} - The JSON object to convert
+     */
+    fromJSON(json: object): this;
+    /**
+     * Convert the map to an array
+     */
+    toArray(): Font[];
+    /**
+     * Convert an array to the map
+     * @param array {Font[]} - The `array` to convert
+     */
+    fromArray(array: Font[]): this;
+}