@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3

package/dist/structures/managers/RenderManager.js

@@ -3,20 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderManager = void 0;
 const types_1 = require("../../types");
 const LazyUtil_1 = require("../../utils/LazyUtil");
-// @ts-ignore
-const gifenc_1 = require("gifenc");
 /**
  * Class responsible for managing rendering operations, including static and animated exports.
  */
 class RenderManager {
-    /**
-     * The LazyCanvas instance used for rendering.
-     */
-    lazyCanvas;
-    /**
-     * Whether debugging is enabled.
-     */
-    debug;
     /**
      * Constructs a new RenderManager instance.
      * @param {LazyCanvas} [lazyCanvas] - The LazyCanvas instance to use for rendering.
@@ -27,48 +17,18 @@ class RenderManager {
         this.lazyCanvas = lazyCanvas;
         this.debug = opts?.debug || false;
     }
-    /**
-     * Merges multiple ImageData objects into a single ImageData object.
-     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
-     * @param {ImageData[]} [imageDataList] - The list of ImageData objects to merge.
-     * @param {number} [width] - The width of the resulting ImageData.
-     * @param {number} [height] - The height of the resulting ImageData.
-     * @returns {ImageData} The merged ImageData object.
-     */
-    mergeImageData(ctx, imageDataList, width, height) {
-        const mergedData = ctx.createImageData(width, height);
-        const mergedPixels = mergedData.data;
-        for (const imageData of imageDataList) {
-            const pixels = imageData.data;
-            for (let i = 0; i < pixels.length; i += 4) {
-                const r = pixels[i];
-                const g = pixels[i + 1];
-                const b = pixels[i + 2];
-                const a = pixels[i + 3] / 255;
-                const existingAlpha = mergedPixels[i + 3] / 255;
-                const newAlpha = a + existingAlpha * (1 - a);
-                if (newAlpha > 0) {
-                    mergedPixels[i] = (r * a + mergedPixels[i] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 1] = (g * a + mergedPixels[i + 1] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 2] = (b * a + mergedPixels[i + 2] * existingAlpha * (1 - a)) / newAlpha;
-                    mergedPixels[i + 3] = newAlpha * 255;
-                }
-            }
-        }
-        return mergedData;
-    }
     /**
      * Renders a single layer or group of layers.
-     * @param {AnyLayer | Group} [layer] - The layer or group to render.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
      * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
      */
     async renderLayer(layer) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering ${layer.id}...\nData:`, layer.toJSON());
+            LazyUtil_1.LazyLog.log("info", `Rendering ${layer.id}...\nData:`, layer.toJSON());
         if (layer.visible) {
-            this.lazyCanvas.ctx.globalCompositeOperation = layer.props?.globalComposite || 'source-over';
+            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';
+            this.lazyCanvas.ctx.shadowColor = "transparent";
         }
         return this.lazyCanvas.ctx;
     }
@@ -79,7 +39,7 @@ class RenderManager {
      */
     async renderStatic(exportType) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering static...`);
+            LazyUtil_1.LazyLog.log("info", `Rendering static...`);
         for (const layer of this.lazyCanvas.manager.layers.toArray()) {
             await this.renderLayer(layer);
         }
@@ -88,96 +48,43 @@ class RenderManager {
             case "buffer":
             case types_1.Export.SVG:
             case "svg":
-                if ('getContent' in this.lazyCanvas.canvas) {
-                    return this.lazyCanvas.canvas.getContent().toString('utf8');
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
                 }
-                return this.lazyCanvas.canvas.toBuffer('image/png');
+                return this.lazyCanvas.canvas.toBuffer("image/png");
             case types_1.Export.CTX:
             case "ctx":
                 return this.lazyCanvas.ctx;
             default:
-                if ('getContent' in this.lazyCanvas.canvas) {
-                    return this.lazyCanvas.canvas.getContent().toString('utf8');
+                if ("getContent" in this.lazyCanvas.canvas) {
+                    return this.lazyCanvas.canvas.getContent().toString("utf8");
                 }
-                return this.lazyCanvas.canvas.toBuffer('image/png');
+                return this.lazyCanvas.canvas.toBuffer("image/png");
         }
     }
-    /**
-     * Renders an animated sequence of layers and exports it as a GIF.
-     * @returns {Promise<Buffer>} The rendered animation as a Buffer.
-     */
-    async renderAnimation() {
-        const encoder = new gifenc_1.GIFEncoder();
-        if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Rendering animation...\nData:`, this.lazyCanvas.manager.animation.options);
-        const frameBuffer = [];
-        const { width, height } = this.lazyCanvas.options;
-        const delay = 1000 / this.lazyCanvas.manager.animation.options.frameRate;
-        const { loop, colorSpace, maxColors, transparency, utils } = this.lazyCanvas.manager.animation.options;
-        let frameNumber = 0;
-        for (const layer of this.lazyCanvas.manager.layers.toArray()) {
-            // onAnimationFrame hook
-            this.lazyCanvas.manager.plugins.executeHook('onAnimationFrame', this.lazyCanvas, frameNumber);
-            const ctx = await this.renderLayer(layer);
-            frameBuffer.push(ctx.getImageData(0, 0, width, height));
-            if (frameBuffer.length > utils.buffer.size) {
-                frameBuffer.shift();
-            }
-            const mergeData = this.mergeImageData(ctx, frameBuffer, width, height);
-            const palette = (0, gifenc_1.quantize)(mergeData.data, maxColors, { format: colorSpace });
-            const index = (0, gifenc_1.applyPalette)(mergeData.data, palette, colorSpace);
-            encoder.writeFrame(index, width, height, {
-                palette,
-                transparent: transparency,
-                delay,
-                loop
-            });
-            if (utils.clear)
-                ctx.clearRect(0, 0, width, height);
-            frameNumber++;
-        }
-        encoder.finish();
-        return encoder.bytesView();
-    }
     /**
      * Renders all layers and exports the result in the specified format.
      * @param {AnyExport} [format] - The export format (e.g., buffer, context, SVG, or canvas).
      * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The rendered output in the specified format.
      */
     async render(format) {
-        let result;
-        // beforeRender hook
-        this.lazyCanvas.manager.plugins.executeHook('beforeRender', this.lazyCanvas);
         switch (format) {
             case types_1.Export.BUFFER:
             case "buffer":
-                if (this.lazyCanvas.options.animated) {
-                    result = await this.renderAnimation();
-                }
-                else {
-                    result = await this.renderStatic(types_1.Export.BUFFER);
-                }
-                break;
+                return await this.renderStatic(types_1.Export.BUFFER);
             case types_1.Export.CTX:
             case "ctx":
-                result = this.lazyCanvas.ctx;
-                break;
+                return this.lazyCanvas.ctx;
             case types_1.Export.SVG:
             case "svg":
-                result = await this.renderStatic(types_1.Export.SVG);
-                break;
+                return await this.renderStatic(types_1.Export.SVG);
             case types_1.Export.CANVAS:
             case "canvas":
-                await this.renderStatic(this.lazyCanvas.options.exportType === 'svg' ? types_1.Export.SVG : types_1.Export.BUFFER);
-                result = this.lazyCanvas.canvas;
-                break;
+                await this.renderStatic(this.lazyCanvas.options.exportType === "svg" ? types_1.Export.SVG : types_1.Export.BUFFER);
+                return this.lazyCanvas.canvas;
             default:
-                result = await this.renderStatic(types_1.Export.BUFFER);
-                break;
+                return await this.renderStatic(types_1.Export.BUFFER);
         }
-        // afterRender hook
-        this.lazyCanvas.manager.plugins.executeHook('afterRender', this.lazyCanvas);
-        return result;
     }
 }
 exports.RenderManager = RenderManager;

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

@@ -1,5 +1,3 @@
-export * from './LayersManager';
-export * from './PluginManager';
-export * from './FontsManager';
-export * from './RenderManager';
-export * from './AnimationManager';
+export * from "./LayersManager";
+export * from "./FontsManager";
+export * from "./RenderManager";

package/dist/structures/managers/index.js

@@ -15,7 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./LayersManager"), exports);
-__exportStar(require("./PluginManager"), exports);
 __exportStar(require("./FontsManager"), exports);
 __exportStar(require("./RenderManager"), exports);
-__exportStar(require("./AnimationManager"), exports);

package/dist/types/enum.d.ts

@@ -11,7 +11,9 @@ export declare enum LayerType {
     Morph = "morph",
     Text = "text",
     Group = "group",
-    Clear = "clear"
+    Clear = "clear",
+    Polygon = "polygon",
+    Custom = "custom"
 }
 export declare enum LayerScaleType {
     Pixel = "px",
@@ -71,10 +73,9 @@ export declare enum Export {
     CTX = "ctx",
     BUFFER = "buffer",
     PNG = "png",
-    JPEG = "jpeg",
+    APNG = "apng",
     JPG = "jpg",
     SVG = "svg",
-    GIF = "gif",
     WEBP = "webp",
     YAML = "yaml",
     JSON = "json"

package/dist/types/enum.js

@@ -16,6 +16,8 @@ var LayerType;
     LayerType["Text"] = "text";
     LayerType["Group"] = "group";
     LayerType["Clear"] = "clear";
+    LayerType["Polygon"] = "polygon";
+    LayerType["Custom"] = "custom";
 })(LayerType || (exports.LayerType = LayerType = {}));
 var LayerScaleType;
 (function (LayerScaleType) {
@@ -84,10 +86,9 @@ var Export;
     Export["CTX"] = "ctx";
     Export["BUFFER"] = "buffer";
     Export["PNG"] = "png";
-    Export["JPEG"] = "jpeg";
+    Export["APNG"] = "apng";
     Export["JPG"] = "jpg";
     Export["SVG"] = "svg";
-    Export["GIF"] = "gif";
     Export["WEBP"] = "webp";
     Export["YAML"] = "yaml";
     Export["JSON"] = "json";

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export type * from "./types";
-export * from './enum';
+export * from "./enum";

package/dist/utils/APNGEncoder.d.ts

@@ -0,0 +1,67 @@
+/**
+ * APNG Encoder that works directly with Uint8ClampedArray (ImageData)
+ * Much faster than encoding each frame to PNG separately
+ */
+export declare class APNGEncoder {
+    private frames;
+    private width;
+    private height;
+    private fps;
+    constructor(width: number, height: number, fps?: number);
+    /**
+     * Add a frame from ImageData
+     */
+    addFrame(imageData: Uint8ClampedArray): this;
+    addFrames(...imageDatas: Uint8ClampedArray[]): this;
+    /**
+     * Encode all frames to APNG buffer
+     */
+    encode(): Buffer;
+    /**
+     * Create IHDR chunk (image header)
+     */
+    private createIHDR;
+    /**
+     * Create acTL chunk (animation control)
+     */
+    private createACTL;
+    /**
+     * Create frame chunks (fcTL + fdAT or IDAT)
+     * @param frameIndex - Index of the frame (0-based)
+     * @param sequenceNumber - Global sequence number for fcTL/fdAT chunks
+     */
+    private createFrame;
+    /**
+     * Compress ImageData using PNG filter and zlib
+     */
+    private compressImageData;
+    /**
+     * Create IEND chunk
+     */
+    private createIEND;
+    /**
+     * Create a PNG chunk with length, type, data, and CRC
+     */
+    private createChunk;
+    /**
+     * Calculate CRC32 checksum
+     */
+    private crc32;
+    /**
+     * CRC32 lookup table
+     */
+    private crcTable;
+    /**
+     * Get number of frames
+     */
+    getFrameCount(): number;
+    /**
+     * Clear all frames
+     */
+    clear(): void;
+}
+export default APNGEncoder;
+/**
+ * Helper function to create APNG from ImageData array
+ */
+export declare function createAPNG(frames: Uint8ClampedArray[], width: number, height: number, fps?: number): Buffer;

package/dist/utils/APNGEncoder.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APNGEncoder = void 0;
+exports.createAPNG = createAPNG;
+const zlib_1 = require("zlib");
+/**
+ * APNG Encoder that works directly with Uint8ClampedArray (ImageData)
+ * Much faster than encoding each frame to PNG separately
+ */
+class APNGEncoder {
+    constructor(width, height, fps = 30) {
+        this.frames = [];
+        /**
+         * CRC32 lookup table
+         */
+        this.crcTable = (() => {
+            const table = new Uint32Array(256);
+            for (let i = 0; i < 256; i++) {
+                let c = i;
+                for (let k = 0; k < 8; k++) {
+                    c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+                }
+                table[i] = c;
+            }
+            return table;
+        })();
+        this.width = width;
+        this.height = height;
+        this.fps = fps;
+    }
+    /**
+     * Add a frame from ImageData
+     */
+    addFrame(imageData) {
+        if (imageData.length !== this.width * this.height * 4) {
+            throw new Error(`Invalid ImageData size. Expected ${this.width * this.height * 4}, got ${imageData.length}`);
+        }
+        this.frames.push(imageData);
+        return this;
+    }
+    addFrames(...imageDatas) {
+        for (const imageData of imageDatas) {
+            this.addFrame(imageData);
+        }
+        return this;
+    }
+    /**
+     * Encode all frames to APNG buffer
+     */
+    encode() {
+        if (this.frames.length === 0) {
+            throw new Error("No frames to encode");
+        }
+        const chunks = [];
+        // PNG signature
+        chunks.push(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]));
+        // IHDR chunk
+        chunks.push(this.createIHDR());
+        // acTL chunk (animation control)
+        chunks.push(this.createACTL());
+        // Add all frames with proper sequence numbering
+        let sequenceNumber = 0;
+        for (let i = 0; i < this.frames.length; i++) {
+            chunks.push(...this.createFrame(i, sequenceNumber));
+            // First frame: fcTL (0) + IDAT = 1 chunk with sequence
+            // Other frames: fcTL (n) + fdAT (n+1) = 2 chunks with sequences
+            sequenceNumber += i === 0 ? 1 : 2;
+        }
+        // IEND chunk
+        chunks.push(this.createIEND());
+        return Buffer.concat(chunks);
+    }
+    /**
+     * Create IHDR chunk (image header)
+     */
+    createIHDR() {
+        const data = Buffer.alloc(13);
+        data.writeUInt32BE(this.width, 0);
+        data.writeUInt32BE(this.height, 4);
+        data[8] = 8; // bit depth
+        data[9] = 6; // color type: RGBA
+        data[10] = 0; // compression method
+        data[11] = 0; // filter method
+        data[12] = 0; // interlace method
+        return this.createChunk("IHDR", data);
+    }
+    /**
+     * Create acTL chunk (animation control)
+     */
+    createACTL() {
+        const data = Buffer.alloc(8);
+        data.writeUInt32BE(this.frames.length, 0); // num_frames
+        data.writeUInt32BE(0, 4); // num_plays (0 = infinite)
+        return this.createChunk("acTL", data);
+    }
+    /**
+     * Create frame chunks (fcTL + fdAT or IDAT)
+     * @param frameIndex - Index of the frame (0-based)
+     * @param sequenceNumber - Global sequence number for fcTL/fdAT chunks
+     */
+    createFrame(frameIndex, sequenceNumber) {
+        const chunks = [];
+        // fcTL chunk (frame control) - always comes first
+        const fctl = Buffer.alloc(26);
+        fctl.writeUInt32BE(sequenceNumber, 0); // sequence_number
+        fctl.writeUInt32BE(this.width, 4); // width
+        fctl.writeUInt32BE(this.height, 8); // height
+        fctl.writeUInt32BE(0, 12); // x_offset
+        fctl.writeUInt32BE(0, 16); // y_offset
+        // Frame delay (delay_num / delay_den seconds)
+        const delayNum = 1;
+        const delayDen = this.fps;
+        fctl.writeUInt16BE(delayNum, 20);
+        fctl.writeUInt16BE(delayDen, 22);
+        fctl[24] = 0; // dispose_op: APNG_DISPOSE_OP_NONE
+        fctl[25] = 0; // blend_op: APNG_BLEND_OP_SOURCE
+        chunks.push(this.createChunk("fcTL", fctl));
+        // Compress frame data
+        const imageData = this.frames[frameIndex];
+        const compressed = this.compressImageData(imageData);
+        // First frame uses IDAT (no sequence number), subsequent frames use fdAT
+        if (frameIndex === 0) {
+            chunks.push(this.createChunk("IDAT", compressed));
+        }
+        else {
+            // fdAT includes sequence number (sequenceNumber + 1 for the data chunk)
+            const fdatData = Buffer.alloc(4 + compressed.length);
+            fdatData.writeUInt32BE(sequenceNumber + 1, 0);
+            compressed.copy(fdatData, 4);
+            chunks.push(this.createChunk("fdAT", fdatData));
+        }
+        return chunks;
+    }
+    /**
+     * Compress ImageData using PNG filter and zlib
+     */
+    compressImageData(imageData) {
+        const bytesPerPixel = 4; // RGBA
+        const stride = this.width * bytesPerPixel;
+        const filtered = Buffer.alloc(imageData.length + this.height);
+        // Apply PNG filter type 0 (None) to each scanline
+        for (let y = 0; y < this.height; y++) {
+            const offset = y * stride;
+            const filteredOffset = y * (stride + 1);
+            filtered[filteredOffset] = 0; // Filter type: None
+            imageData.subarray(offset, offset + stride).forEach((byte, i) => {
+                filtered[filteredOffset + 1 + i] = byte;
+            });
+        }
+        // Compress with zlib
+        return (0, zlib_1.deflateSync)(filtered, { level: 6 });
+    }
+    /**
+     * Create IEND chunk
+     */
+    createIEND() {
+        return this.createChunk("IEND", Buffer.alloc(0));
+    }
+    /**
+     * Create a PNG chunk with length, type, data, and CRC
+     */
+    createChunk(type, data) {
+        const length = Buffer.alloc(4);
+        length.writeUInt32BE(data.length, 0);
+        const typeBuffer = Buffer.from(type, "ascii");
+        const crc = this.crc32(Buffer.concat([typeBuffer, data]));
+        const crcBuffer = Buffer.alloc(4);
+        crcBuffer.writeUInt32BE(crc, 0);
+        return Buffer.concat([length, typeBuffer, data, crcBuffer]);
+    }
+    /**
+     * Calculate CRC32 checksum
+     */
+    crc32(data) {
+        let crc = 0xffffffff;
+        for (let i = 0; i < data.length; i++) {
+            crc = this.crcTable[(crc ^ data[i]) & 0xff] ^ (crc >>> 8);
+        }
+        return (crc ^ 0xffffffff) >>> 0;
+    }
+    /**
+     * Get number of frames
+     */
+    getFrameCount() {
+        return this.frames.length;
+    }
+    /**
+     * Clear all frames
+     */
+    clear() {
+        this.frames = [];
+    }
+}
+exports.APNGEncoder = APNGEncoder;
+exports.default = APNGEncoder;
+/**
+ * Helper function to create APNG from ImageData array
+ */
+function createAPNG(frames, width, height, fps = 30) {
+    const encoder = new APNGEncoder(width, height, fps);
+    for (const frame of frames) {
+        encoder.addFrame(frame);
+    }
+    return encoder.encode();
+}

package/dist/utils/DrawUtils.d.ts

@@ -0,0 +1,9 @@
+import { SKRSContext2D } from "@napi-rs/canvas";
+import { Signal } from "../core/Signal";
+import { StrokeOptions } from "../types";
+export declare class DrawUtils {
+    static drawShadow(ctx: SKRSContext2D, shadow: any): void;
+    static opacity(ctx: SKRSContext2D, opacity?: number | Signal<number>): void;
+    static filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
+    static fillStyle(ctx: SKRSContext2D, color: string | CanvasGradient | CanvasPattern, fillStyle?: StrokeOptions): void;
+}

package/dist/utils/DrawUtils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawUtils = void 0;
+const Signal_1 = require("../core/Signal");
+class DrawUtils {
+    static drawShadow(ctx, shadow) {
+        if (shadow) {
+            ctx.shadowColor = shadow.color;
+            ctx.shadowBlur = shadow.blur || 0;
+            ctx.shadowOffsetX = shadow.offsetX || 0;
+            ctx.shadowOffsetY = shadow.offsetY || 0;
+        }
+    }
+    static opacity(ctx, opacity = 1) {
+        const opacityValue = (0, Signal_1.unwrap)(opacity);
+        if (opacityValue < 1) {
+            ctx.globalAlpha = opacityValue;
+        }
+    }
+    static filters(ctx, filters) {
+        if (filters) {
+            ctx.filter = filters;
+        }
+    }
+    static fillStyle(ctx, color, fillStyle) {
+        if (fillStyle) {
+            ctx.lineWidth = fillStyle.width;
+            ctx.lineCap = fillStyle.cap || "butt";
+            ctx.lineJoin = fillStyle.join || "miter";
+            ctx.miterLimit = fillStyle.miterLimit || 10;
+            if (fillStyle.dash) {
+                ctx.setLineDash(fillStyle.dash);
+                ctx.lineDashOffset = fillStyle.dashOffset || 0;
+            }
+            ctx.strokeStyle = color;
+        }
+        else {
+            ctx.fillStyle = color;
+        }
+    }
+}
+exports.DrawUtils = DrawUtils;

package/dist/utils/LazyUtil.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultArg = exports.LazyLog = exports.LazyError = void 0;
 class LazyError extends Error {
-    message;
     constructor(message) {
         super(message);
         this.message = "[LazyCanvas] [ERROR] " + message;
@@ -31,5 +30,5 @@ exports.defaultArg = {
     },
     vl(vertical, layer) {
         return { vertical: vertical || false, layer: layer || false };
-    }
+    },
 };

package/dist/utils/utils.d.ts

@@ -1,10 +1,9 @@
-import type { AnyCentring, AnyLayer, AnyTextAlign, ColorType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
-import { LayerType } from "../types";
+import { AnyCentring, AnyLayer, AnyTextAlign, ColorType, LayerType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers";
-import { Group } from "../structures/components";
+import { Div } from "../structures/components";
 export declare function generateID(type: string): string;
-export declare function isColor(v: ColorType | SubStringColor): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare function isColor(v: ColorType | SubStringColor): boolean;
 export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, layer?: {
     width: number;
     height: number;
@@ -32,9 +31,6 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
         };
     }>): Record<string, number>;
 };
-export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
-export declare function opacity(ctx: SKRSContext2D, opacity?: number): void;
-export declare function filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
 export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | SubStringColor, opts: {
     debug?: boolean;
     layer?: {
@@ -45,7 +41,7 @@ export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | Su
         align: AnyCentring;
     };
     manager?: LayersManager;
-}): string | CanvasGradient | Promise<CanvasPattern>;
+}): string | Promise<CanvasPattern> | CanvasGradient;
 export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
     width: number;
     height: number;
@@ -81,4 +77,4 @@ export declare function getBoundingBoxBezier(points: PointNumber[], steps?: numb
     height: number;
 };
 export declare function resize(value: ScaleType, ratio: number): number | string;
-export declare function resizeLayers(layers: Array<AnyLayer | Group>, ratio: number): (AnyLayer | Group)[];
+export declare function resizeLayers(layers: Array<AnyLayer | Div>, ratio: number): (AnyLayer | Div)[];