@nmmty/lazycanvas 0.3.4 → 0.3.6

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

@@ -1,4 +1,4 @@
-import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring } from "../../types";
+import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
 import { LayerType } from "../../types/enum";
 export declare class BaseLayer<T extends IBaseLayerProps> {
     id: string;
@@ -74,6 +74,11 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
      * @param zIndex {number} - The `zIndex` of the layer
      */
     setZIndex(zIndex: number): this;
+    /**
+     * @description Sets global composite operation of the layer.
+     * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
+     */
+    setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
     /**
      * @returns {IBaseLayer}
      */

package/dist/structures/components/BaseLayer.js

@@ -141,6 +141,14 @@ class BaseLayer {
         this.zIndex = zIndex;
         return this;
     }
+    /**
+     * @description Sets global composite operation of the layer.
+     * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
+     */
+    setGlobalCompositeOperation(operation) {
+        this.props.globalComposite = operation;
+        return this;
+    }
     /**
      * @returns {IBaseLayer}
      */

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

@@ -65,6 +65,16 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * @param filled {boolean} - The `filled` of the layer.
      */
     setFilled(filled: boolean): this;
+    /**
+     * @description Sets the spacing between the words.
+     * @param wordSpacing {number} - The `wordSpacing` of the text layer.
+     */
+    setWordSpacing(wordSpacing: number): this;
+    /**
+     * @description Sets the letter spacing.
+     * @param letterSpacing {number} - The `letterSpacing` of the text layer.
+     */
+    setLetterSpacing(letterSpacing: number): this;
     measureText(ctx: SKRSContext2D, canvas: Canvas): {
         width: number;
         height: number;

package/dist/structures/components/TextLayer.js

@@ -29,6 +29,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             height: 0,
         };
         this.props.centring = enum_1.Centring.Center;
+        this.props.wordSpacing = 0;
+        this.props.letterSpacing = 0;
     }
     /**
      * @description Sets the text of the text layer.
@@ -155,6 +157,22 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         this.props.filled = filled;
         return this;
     }
+    /**
+     * @description Sets the spacing between the words.
+     * @param wordSpacing {number} - The `wordSpacing` of the text layer.
+     */
+    setWordSpacing(wordSpacing) {
+        this.props.wordSpacing = wordSpacing;
+        return this;
+    }
+    /**
+     * @description Sets the letter spacing.
+     * @param letterSpacing {number} - The `letterSpacing` of the text layer.
+     */
+    setLetterSpacing(letterSpacing) {
+        this.props.letterSpacing = letterSpacing;
+        return this;
+    }
     measureText(ctx, canvas) {
         const w = (0, utils_1.parseToNormal)(this.props.size?.width, ctx, canvas);
         const h = (0, utils_1.parseToNormal)(this.props.size?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
@@ -184,6 +202,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         (0, utils_1.opacity)(ctx, this.props.opacity);
         (0, utils_1.filters)(ctx, this.props.filter);
         ctx.textAlign = this.props.align;
+        ctx.letterSpacing = `${this.props.letterSpacing}px`;
+        ctx.wordSpacing = `${this.props.wordSpacing}px`;
         if (this.props.baseline)
             ctx.textBaseline = this.props.baseline;
         if (this.props.direction)

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

@@ -7,9 +7,9 @@ export declare class LayersManager implements ILayersManager {
     constructor(debug?: boolean);
     /**
      * Add a layer to the map
-     * @param layers {AnyLayer[] | Group[]} - The `layer` or `group` to add to the map
+     * @param layers {AnyLayer[]} - The `layer` or `group` to add to the map
      */
-    add(...layers: AnyLayer[] | Group[]): this;
+    add(...layers: AnyLayer[]): this;
     /**
      * Remove a layer from the map
      * @param ids {string[]} - The `id` of the layer or group to remove
@@ -22,8 +22,9 @@ export declare class LayersManager implements ILayersManager {
     /**
      * Get a layer from the map
      * @param id {string} - The `id` of the layer or group to get
+     * @param cross {boolean} - Whether to search in groups or not
      */
-    get(id: string): AnyLayer | Group | undefined;
+    get(id: string, cross?: boolean): AnyLayer | undefined;
     /**
      * Check if a layer exists in the map
      * @param id {string} - The `id` of the layer or group to check
@@ -36,7 +37,7 @@ export declare class LayersManager implements ILayersManager {
     /**
      * Get the values of the map
      */
-    values(): IterableIterator<AnyLayer | Group>;
+    values(): IterableIterator<AnyLayer>;
     /**
      * Get the keys of the map
      */
@@ -44,12 +45,12 @@ export declare class LayersManager implements ILayersManager {
     /**
      * Get the entries of the map
      */
-    entries(): IterableIterator<[string, AnyLayer | Group]>;
+    entries(): IterableIterator<[string, AnyLayer]>;
     /**
      * 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;
+    forEach(callbackfn: (value: AnyLayer, key: string, map: Map<string, AnyLayer>) => void): this;
     /**
      * Convert the map to a JSON object
      */
@@ -62,11 +63,12 @@ export declare class LayersManager implements ILayersManager {
     /**
      * Convert the map to an array
      */
-    toArray(): Array<AnyLayer | Group>;
+    toArray(): Array<AnyLayer>;
     /**
      * Convert an array to the map
-     * @param array {Array<AnyLayer | Group>} - The `array` to convert
+     * @param array {Array<AnyLayer>} - The `array` to convert
      */
-    fromArray(array: Array<AnyLayer | Group>): this;
+    fromArray(array: Array<AnyLayer>): this;
     sort(): void;
+    private crossSearch;
 }

package/dist/structures/managers/LayersManager.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayersManager = void 0;
+const Group_1 = require("../components/Group");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 class LayersManager {
     map;
@@ -11,7 +12,7 @@ class LayersManager {
     }
     /**
      * Add a layer to the map
-     * @param layers {AnyLayer[] | Group[]} - The `layer` or `group` to add to the map
+     * @param layers {AnyLayer[]} - The `layer` or `group` to add to the map
      */
     add(...layers) {
         if (this.debug)
@@ -48,9 +49,13 @@ class LayersManager {
     /**
      * Get a layer from the map
      * @param id {string} - The `id` of the layer or group to get
+     * @param cross {boolean} - Whether to search in groups or not
      */
-    get(id) {
-        return this.map.get(id);
+    get(id, cross = false) {
+        if (cross)
+            return this.crossSearch(id);
+        else
+            return this.map.get(id);
     }
     /**
      * Check if a layer exists in the map
@@ -113,7 +118,7 @@ class LayersManager {
     }
     /**
      * Convert an array to the map
-     * @param array {Array<AnyLayer | Group>} - The `array` to convert
+     * @param array {Array<AnyLayer>} - The `array` to convert
      */
     fromArray(array) {
         this.map = new Map(array.map(l => [l.id, l]));
@@ -122,5 +127,17 @@ class LayersManager {
     sort() {
         this.fromArray(this.toArray().sort((a, b) => a.zIndex - b.zIndex));
     }
+    crossSearch(id) {
+        for (const layer of this.map.values()) {
+            if (layer.id === id)
+                return layer;
+            if (layer instanceof Group_1.Group) {
+                const result = layer.components.find(l => l.id === id);
+                if (result)
+                    return result;
+            }
+        }
+        return undefined;
+    }
 }
 exports.LayersManager = LayersManager;

package/dist/structures/managers/RenderManager.js

@@ -23,11 +23,19 @@ class RenderManager {
                 if (layer instanceof Group_1.Group) {
                     for (const subLayer of layer.components) {
                         if (subLayer.visible) {
+                            if (!subLayer.props.globalComposite)
+                                this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
+                            else
+                                this.lazyCanvas.ctx.globalCompositeOperation = subLayer.props.globalComposite;
                             await subLayer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
                         }
                     }
                 }
                 else {
+                    if (!layer.props.globalComposite)
+                        this.lazyCanvas.ctx.globalCompositeOperation = 'source-over';
+                    else
+                        this.lazyCanvas.ctx.globalCompositeOperation = layer.props.globalComposite;
                     await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
                 }
                 this.lazyCanvas.ctx.shadowColor = 'transparent';

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

@@ -1,4 +1,4 @@
-import { ColorType, ScaleType, AnyCentring } from "../";
+import { ColorType, ScaleType, AnyCentring, AnyGlobalCompositeOperation } from "../";
 import { LayerType } from "../enum";
 
 export interface IBaseLayer {
@@ -32,6 +32,7 @@ export interface IBaseLayerProps {
         offsetY: number;
     };
     transform: Transform;
+    globalComposite: AnyGlobalCompositeOperation;
 }
 
 export interface Transform {

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

@@ -23,4 +23,6 @@ export interface ITextLayerProps extends IBaseLayerProps {
     align: AnyTextAlign;
     baseline: AnyTextBaseline;
     direction: AnyTextDirection;
+    letterSpacing: number;
+    wordSpacing: number;
 }

package/dist/types/enum.d.ts

@@ -100,3 +100,31 @@ export declare enum LinkType {
     X = "x",
     Y = "y"
 }
+export declare enum GlobalCompositeOperation {
+    SourceOver = "source-over",
+    SourceIn = "source-in",
+    SourceOut = "source-out",
+    SourceAtop = "source-atop",
+    DestinationOver = "destination-over",
+    DestinationIn = "destination-in",
+    DestinationOut = "destination-out",
+    DestinationAtop = "destination-atop",
+    Lighter = "lighter",
+    Copy = "copy",
+    Xor = "xor",
+    Multiply = "multiply",
+    Screen = "screen",
+    Overlay = "overlay",
+    Darken = "darken",
+    Lighten = "lighten",
+    ColorDodge = "color-dodge",
+    ColorBurn = "color-burn",
+    HardLight = "hard-light",
+    SoftLight = "soft-light",
+    Difference = "difference",
+    Exclusion = "exclusion",
+    Hue = "hue",
+    Saturation = "saturation",
+    Color = "color",
+    Luminosity = "luminosity"
+}

package/dist/types/enum.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
+exports.GlobalCompositeOperation = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
 var LayerType;
 (function (LayerType) {
     LayerType["Base"] = "base";
@@ -117,3 +117,32 @@ var LinkType;
     LinkType["X"] = "x";
     LinkType["Y"] = "y";
 })(LinkType || (exports.LinkType = LinkType = {}));
+var GlobalCompositeOperation;
+(function (GlobalCompositeOperation) {
+    GlobalCompositeOperation["SourceOver"] = "source-over";
+    GlobalCompositeOperation["SourceIn"] = "source-in";
+    GlobalCompositeOperation["SourceOut"] = "source-out";
+    GlobalCompositeOperation["SourceAtop"] = "source-atop";
+    GlobalCompositeOperation["DestinationOver"] = "destination-over";
+    GlobalCompositeOperation["DestinationIn"] = "destination-in";
+    GlobalCompositeOperation["DestinationOut"] = "destination-out";
+    GlobalCompositeOperation["DestinationAtop"] = "destination-atop";
+    GlobalCompositeOperation["Lighter"] = "lighter";
+    GlobalCompositeOperation["Copy"] = "copy";
+    GlobalCompositeOperation["Xor"] = "xor";
+    GlobalCompositeOperation["Multiply"] = "multiply";
+    GlobalCompositeOperation["Screen"] = "screen";
+    GlobalCompositeOperation["Overlay"] = "overlay";
+    GlobalCompositeOperation["Darken"] = "darken";
+    GlobalCompositeOperation["Lighten"] = "lighten";
+    GlobalCompositeOperation["ColorDodge"] = "color-dodge";
+    GlobalCompositeOperation["ColorBurn"] = "color-burn";
+    GlobalCompositeOperation["HardLight"] = "hard-light";
+    GlobalCompositeOperation["SoftLight"] = "soft-light";
+    GlobalCompositeOperation["Difference"] = "difference";
+    GlobalCompositeOperation["Exclusion"] = "exclusion";
+    GlobalCompositeOperation["Hue"] = "hue";
+    GlobalCompositeOperation["Saturation"] = "saturation";
+    GlobalCompositeOperation["Color"] = "color";
+    GlobalCompositeOperation["Luminosity"] = "luminosity";
+})(GlobalCompositeOperation || (exports.GlobalCompositeOperation = GlobalCompositeOperation = {}));

package/dist/types/types.d.ts

@@ -20,7 +20,8 @@ import {
     Centring,
     PatternType,
     SaveFormat,
-    LinkType
+    LinkType,
+    GlobalCompositeOperation
 } from "./enum";
 
 export type ScaleType = string | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
@@ -53,6 +54,8 @@ export type AnySaveFormat = SaveFormat | 'png' | 'jpeg' | 'jpg' | 'svg';
 
 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 Point = {
     x: ScaleType;
     y: ScaleType;

package/dist/utils/utils.js

@@ -35,6 +35,7 @@ const Group_1 = require("../structures/components/Group");
 const LineLayer_1 = require("../structures/components/LineLayer");
 const BezierLayer_1 = require("../structures/components/BezierLayer");
 const QuadraticLayer_1 = require("../structures/components/QuadraticLayer");
+const TextLayer_1 = require("../structures/components/TextLayer");
 function generateID(type) {
     return `${type}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -149,7 +150,7 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
             let match = v.match(linkReg);
             if (!manager)
                 return 0;
-            let anyLayer = manager.get(match[2]);
+            let anyLayer = manager.get(match[2], true);
             const parcer = parser(ctx, canvas, manager);
             switch (match[1]) {
                 case 'link-w':
@@ -157,6 +158,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
                         if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
                             return anyLayer.getBoundingBox(ctx, canvas, manager).width + (parseInt(match[3]) || 0);
                         }
+                        else if (anyLayer instanceof TextLayer_1.TextLayer) {
+                            return anyLayer.measureText(ctx, canvas).width + (parseInt(match[3]) || 0);
+                        }
                         else {
                             return (parcer.parse(anyLayer.props.size.width) || 0) + (parseInt(match[3]) || 0);
                         }
@@ -170,6 +174,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
                         if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
                             return anyLayer.getBoundingBox(ctx, canvas, manager).height + (parseInt(match[3]) || 0);
                         }
+                        else if (anyLayer instanceof TextLayer_1.TextLayer) {
+                            return anyLayer.measureText(ctx, canvas).height + (parseInt(match[3]) || 0);
+                        }
                         else {
                             return (parcer.parse(anyLayer.props.size.height, LazyUtil_1.defaultArg.wh(parcer.parse(anyLayer.props.size.width)), LazyUtil_1.defaultArg.vl(true)) || 0) + (parseInt(match[3]) || 0);
                         }
@@ -200,7 +207,7 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
     else if (v instanceof Link_1.Link) {
         if (!manager)
             return 0;
-        let anyLayer = manager.get(v.source);
+        let anyLayer = manager.get(v.source, true);
         const parcer = parser(ctx, canvas, manager);
         switch (v.type) {
             case enum_1.LinkType.Width:
@@ -209,6 +216,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
                     if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
                         return anyLayer.getBoundingBox(ctx, canvas, manager).width + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
                     }
+                    else if (anyLayer instanceof TextLayer_1.TextLayer) {
+                        return anyLayer.measureText(ctx, canvas).width + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
+                    }
                     else {
                         return (parcer.parse(anyLayer.props.size.width) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
                     }
@@ -223,6 +233,9 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
                     if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
                         return anyLayer.getBoundingBox(ctx, canvas, manager).height + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
                     }
+                    else if (anyLayer instanceof TextLayer_1.TextLayer) {
+                        return anyLayer.measureText(ctx, canvas).height + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
+                    }
                     else {
                         return (parcer.parse(anyLayer.props.size.height, LazyUtil_1.defaultArg.wh(parcer.parse(anyLayer.props.size.width)), LazyUtil_1.defaultArg.vl(true)) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
                     }

package/package.json

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