@nmmty/lazycanvas 0.3.5 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "0.3.5",
+  "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",