@nmmty/lazycanvas 0.5.1 → 0.5.3

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

@@ -1,4 +1,4 @@
-import { ScaleType, LayerType, AnyCentring } from "../../types";
+import { ScaleType, LayerType, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
 import { IBaseLayerMisc } from "./BaseLayer";
@@ -56,6 +56,10 @@ export interface IClearLayerProps {
      * The centring type of the layer.
      */
     centring: AnyCentring;
+    /**
+     * Don't use, this is just for compatibility.
+     */
+    globalComposite: AnyGlobalCompositeOperation;
 }
 /**
  * Class representing a Clear Layer.

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

@@ -1,4 +1,6 @@
-import { AnyLayer, LayerType } from "../../types";
+import { AnyGlobalCompositeOperation, AnyLayer, LayerType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 /**
  * Interface representing a group of layers.
  */
@@ -23,6 +25,16 @@ export interface IGroup {
      * The layers contained within the group.
      */
     layers: Array<AnyLayer>;
+    /**
+     *
+     */
+    props?: IGroupProps;
+}
+export interface IGroupProps {
+    /**
+     * Don't use, this is just for compatibility.
+     */
+    globalComposite: AnyGlobalCompositeOperation;
 }
 /**
  * Class representing a group of layers.
@@ -48,6 +60,7 @@ export declare class Group implements IGroup {
      * The layers contained within the group.
      */
     layers: Array<any>;
+    props?: IGroupProps;
     /**
      * Constructs a new Group instance.
      * @param opts {Object} - Optional parameters for the group.
@@ -111,6 +124,7 @@ export declare class Group implements IGroup {
      * @returns {number} The number of components in the group.
      */
     get length(): number;
+    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * Converts the group to a JSON representation.
      * @returns {IGroup} The JSON representation of the group.

package/dist/structures/components/Group.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = void 0;
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
 /**
  * Class representing a group of layers.
  */
@@ -27,6 +28,7 @@ class Group {
      * The layers contained within the group.
      */
     layers;
+    props;
     /**
      * Constructs a new Group instance.
      * @param opts {Object} - Optional parameters for the group.
@@ -39,6 +41,7 @@ class Group {
         this.visible = opts?.visible || true;
         this.zIndex = opts?.zIndex || 1;
         this.layers = [];
+        this.props = {};
     }
     /**
      * Sets the ID of the group.
@@ -118,6 +121,22 @@ class Group {
     get length() {
         return this.layers.length;
     }
+    async draw(ctx, canvas, manager, debug) {
+        for (const subLayer of this.layers) {
+            if (debug)
+                LazyUtil_1.LazyLog.log('info', `Rendering ${subLayer.id}...\nData:`, subLayer.toJSON());
+            if (subLayer.visible) {
+                if ('globalComposite' in subLayer.props && subLayer.props.globalComposite) {
+                    ctx.globalCompositeOperation = subLayer.props.globalComposite;
+                }
+                else {
+                    ctx.globalCompositeOperation = 'source-over';
+                }
+                await subLayer.draw(ctx, canvas, manager, debug);
+                ctx.shadowColor = 'transparent';
+            }
+        }
+    }
     /**
      * Converts the group to a JSON representation.
      * @returns {IGroup} The JSON representation of the group.

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

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 /// <reference types="node" />
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ScaleType, LayerType } from "../../types";
+import { ScaleType, LayerType, radiusCorner } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
 /**
@@ -40,7 +40,9 @@ export interface IImageLayerProps extends IBaseLayerProps {
         /**
          * The radius of the image.
          */
-        radius: ScaleType;
+        radius: {
+            [corner in radiusCorner]?: ScaleType;
+        };
     };
 }
 /**
@@ -68,10 +70,12 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * Sets the size of the image.
      * @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).
+     * @param radius {{ [corner in radiusCorner]?: ScaleType }} - The radius of the image (optional).
      * @returns {this} The current instance for chaining.
      */
-    setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
+    setSize(width: ScaleType, height: ScaleType, radius?: {
+        [corner in radiusCorner]?: ScaleType;
+    }): this;
     /**
      * Draws the Image Layer on the canvas.
      * @param ctx {SKRSContext2D} - The canvas rendering context.

package/dist/structures/components/ImageLayer.js

@@ -6,6 +6,7 @@ const types_1 = require("../../types");
 const canvas_1 = require("@napi-rs/canvas");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const helpers_1 = require("../helpers");
 /**
  * Class representing an Image Layer, extending the BaseLayer class.
  */
@@ -40,14 +41,14 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
      * Sets the size of the image.
      * @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).
+     * @param radius {{ [corner in radiusCorner]?: ScaleType }} - The radius of the image (optional).
      * @returns {this} The current instance for chaining.
      */
     setSize(width, height, radius) {
         this.props.size = {
             width: width,
             height: height,
-            radius: radius || 0,
+            radius: radius || { all: 0 },
         };
         return this;
     }
@@ -67,10 +68,16 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
             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);
+        const rad = {};
+        if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
+            for (const corner in this.props.size.radius) {
+                // @ts-ignore
+                rad[corner] = parcer.parse(this.props.size.radius[corner], LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
+            }
+        }
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, r });
+            LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, rad });
         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);
@@ -81,13 +88,13 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         image.height = h;
         if (!image)
             throw new LazyUtil_1.LazyError('The image could not be loaded');
-        if (r) {
+        if (Object.keys(rad).length > 0) {
             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.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
+            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
+            ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
+            ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
             ctx.closePath();
             ctx.clip();
             ctx.drawImage(image, x, y, w, h);

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, ScaleType, LayerType } from "../../types";
+import { ColorType, ScaleType, LayerType, radiusCorner } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
 /**
@@ -34,7 +34,9 @@ export interface IMorphLayerProps extends IBaseLayerProps {
         /**
          * The radius of the Morph Layer.
          */
-        radius: ScaleType;
+        radius: {
+            [corner in radiusCorner]?: ScaleType;
+        };
     };
     /**
      * The stroke properties of the morph.
@@ -84,10 +86,12 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * Sets the size of the Morph Layer.
      * @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).
+     * @param radius {{ [corner in radiusCorner]?: ScaleType }} - The radius of the Morph Layer (optional).
      * @returns {this} The current instance for chaining.
      */
-    setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
+    setSize(width: ScaleType, height: ScaleType, radius?: {
+        [corner in radiusCorner]?: ScaleType;
+    }): this;
     /**
      * Sets the color of the Morph Layer.
      * @param color {string} - The color of the Morph Layer.

package/dist/structures/components/MorphLayer.js

@@ -5,6 +5,7 @@ const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const helpers_1 = require("../helpers");
 /**
  * Class representing a Morph Layer, extending the BaseLayer class.
  */
@@ -31,14 +32,14 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
      * Sets the size of the Morph Layer.
      * @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).
+     * @param radius {{ [corner in radiusCorner]?: ScaleType }} - The radius of the Morph Layer (optional).
      * @returns {this} The current instance for chaining.
      */
     setSize(width, height, radius) {
         this.props.size = {
             width: width,
             height: height,
-            radius: radius || 0,
+            radius: radius || { all: 0 },
         };
         return this;
     }
@@ -101,20 +102,26 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
             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));
+        const rad = {};
+        if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
+            for (const corner in this.props.size.radius) {
+                // @ts-ignore
+                rad[corner] = parcer.parse(this.props.size.radius[corner], 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);
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `MorphLayer:`, { x, y, w, h, r });
+            LazyUtil_1.LazyLog.log('none', `MorphLayer:`, { x, y, w, h, rad });
         ctx.save();
         (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
         ctx.beginPath();
-        if (r) {
+        if (Object.keys(rad).length > 0) {
             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.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
+            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
+            ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
+            ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
         }
         else {
             ctx.rect(x, y, w, h);

package/dist/structures/managers/RenderManager.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManager = void 0;
 const types_1 = require("../../types");
-const components_1 = require("../components");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 // @ts-ignore
 const gifenc_1 = require("gifenc");
@@ -67,28 +66,8 @@ class RenderManager {
         if (this.debug)
             LazyUtil_1.LazyLog.log('info', `Rendering ${layer.id}...\nData:`, layer.toJSON());
         if (layer.visible) {
-            if (layer instanceof components_1.Group) {
-                for (const subLayer of layer.layers) {
-                    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.manager.layers, this.debug);
-                    }
-                }
-            }
-            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.manager.layers, this.debug);
-            }
+            this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || 'source-over';
+            await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.manager.layers, this.debug);
             this.lazyCanvas.ctx.shadowColor = 'transparent';
         }
         return this.lazyCanvas.ctx;

package/dist/types/types.d.ts

@@ -1,14 +1,22 @@
-import { Gradient } from "../structures/helpers/Gradient";
-import { Pattern } from "../structures/helpers/Pattern";
-import { MorphLayer } from "../structures/components/MorphLayer";
-import { ImageLayer } from "../structures/components/ImageLayer";
-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 { Group } from "../structures/components/Group";
-import { ClearLayer } from "../structures/components/ClearLayer";
-import { Link } from "../structures/helpers/Link";
+import { Gradient, Link, Pattern } from "../structures/helpers";
+import {
+    MorphLayer,
+    ImageLayer,
+    TextLayer,
+    BezierLayer,
+    QuadraticLayer,
+    LineLayer,
+    ClearLayer,
+    Path2DLayer,
+    IMorphLayer,
+    IBezierLayer,
+    IClearLayer,
+    IImageLayer,
+    ITextLayer,
+    IQuadraticLayer,
+    ILineLayer,
+    IPath2DLayer
+} from "../structures/components";
 import {
     FontWeight,
     GradientType,
@@ -20,17 +28,20 @@ import {
     Export,
     Centring,
     PatternType,
-    SaveFormat,
     LinkType,
     GlobalCompositeOperation,
-    ColorSpace
+    ColorSpace,
 } from "./enum";
 
-export type ScaleType = string | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
+export type ScaleType = `link-w-${string}-${number}` | `link-h-${string}-${number}` | `link-x-${string}-${number}` | `link-y-${string}-${number}` | `${number}%` | `${number}px` | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
+
+export type StringColorType = `rgba(${number}, ${number}, ${number}, ${number})` | `rgb(${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | `#${string}` | string;
 
-export type ColorType = string | Gradient | Pattern;
+export type ColorType = Gradient | Pattern | StringColorType;
 
-export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Group;
+export type JSONLayer = IMorphLayer | IImageLayer | ITextLayer | IBezierLayer | IQuadraticLayer | ILineLayer | IClearLayer | IPath2DLayer;
+
+export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Path2DLayer;
 
 export type AnyWeight = FontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
@@ -46,20 +57,20 @@ export type AnyLineCap = LineCap | 'butt' | 'round' | 'square';
 
 export type AnyLineJoin = LineJoin | 'bevel' | 'round' | 'miter';
 
-export type AnyExport = Export | 'buffer' | 'svg' | 'ctx';
+export type AnyExport = Export | 'canvas' | 'ctx' | 'buffer' | 'svg' | 'png' | 'jpeg' | 'jpg' | 'gif' | 'webp' | 'yaml' | 'json';
 
 export type AnyCentring = Centring | 'start' | 'start-top' | 'start-bottom' | 'center' | 'center-top' | 'center-bottom' | 'end' | 'end-top' | 'end-bottom' | 'none';
 
 export type AnyPatternType = PatternType | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
 
-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 AnyFilter = `sepia(${number}%)` | `saturate(${number}%)` | `opacity(${number}%)` | `invert(${number}%)` | `hue-rotate(${number}deg)` | `grayscale(${number}%)` | `drop-shadow(${number}px ${number}px ${number}px ${string})` | `contrast(${number}%)` | `brightness(${number}%)` | `blur(${number}px)`;
+
 export type Point = {
     x: ScaleType;
     y: ScaleType;
@@ -68,4 +79,21 @@ export type Point = {
 export type PointNumber = {
     x: number;
     y: number;
-};
+};
+
+export type Extensions = 'svg' | 'png' | 'jpeg' | 'jpg' | 'gif' | 'webp' | 'yaml' | 'json';
+
+export interface Transform {
+    rotate: number;
+    scale: {
+        x: number;
+        y: number;
+    };
+    translate: {
+        x: number;
+        y: number;
+    };
+    matrix: DOMMatrix2DInit;
+}
+
+export type radiusCorner = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'all';

package/dist/utils/utils.js

@@ -29,7 +29,8 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
     }
     else if (typeof v === 'string') {
         if (percentReg.test(v)) {
-            return (parseFloat(v) / 100) * (options.layer ? (options.vertical ? layer.width : layer.height) : (options.vertical ? canvas.width : canvas.height));
+            console.log(options, layer, canvas.width, canvas.height, parseFloat(v));
+            return (parseFloat(v) / 100) * (options.layer ? (options.vertical ? layer.height : layer.width) : (options.vertical ? canvas.height : canvas.width));
         }
         else if (pxReg.test(v)) {
             return parseFloat(v);
@@ -402,7 +403,10 @@ function resizeLayers(layers, ratio) {
                     layer.props.size.width = resize(layer.props.size.width, ratio);
                     layer.props.size.height = resize(layer.props.size.height, ratio);
                     if ('radius' in layer.props.size) {
-                        layer.props.size.radius = resize(layer.props.size.radius, ratio);
+                        for (const corner in layer.props.size.radius) {
+                            // @ts-ignore
+                            layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
+                        }
                     }
                 }
                 if ('stroke' in layer.props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/structures/helpers/readers/SVGReader.d.ts

@@ -1,20 +0,0 @@
-export declare class SVGReader {
-    private static parseSVG;
-    private static createImageLayer;
-    private static createEllipseImageLayer;
-    private static createRectLayer;
-    private static createEllipseLayer;
-    private static createCircleLayer;
-    private static createLineLayer;
-    private static createGradient;
-    private static createPattern;
-    private static createPath2DLayer;
-    private static createClipPathLayer;
-    private static createGroupLayer;
-    private static applyTransform;
-    private static findElementById;
-    private static extractIdFromUrl;
-    private fillStyle;
-    private static handleUseElement;
-    static readSVG(svg: string): Promise<any>;
-}