@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

package/dist/utils/utils.js

@@ -4,9 +4,6 @@ exports.generateID = generateID;
 exports.isColor = isColor;
 exports.parseToNormal = parseToNormal;
 exports.parser = parser;
-exports.drawShadow = drawShadow;
-exports.opacity = opacity;
-exports.filters = filters;
 exports.parseFillStyle = parseFillStyle;
 exports.transform = transform;
 exports.generateRandomName = generateRandomName;
@@ -20,6 +17,7 @@ const helpers_1 = require("../structures/helpers");
 const canvas_1 = require("@napi-rs/canvas");
 const LazyUtil_1 = require("./LazyUtil");
 const components_1 = require("../structures/components");
+const core_1 = require("../core");
 function generateID(type) {
     return `${type}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -33,16 +31,41 @@ let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
 let hslReg = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/;
 let hslaReg = /^hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*(0|0?\.\d+|1(\.0)?)\)$/;
 function isColor(v) {
-    return typeof (v === 'string' && (hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v))) || v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern || (typeof v === 'object' && (v.start && v.end && v.color));
+    if ((0, core_1.isSignal)(v)) {
+        return true;
+    }
+    if (typeof v === "object" &&
+        v !== null &&
+        !(0, core_1.isSignal)(v) &&
+        "start" in v &&
+        "end" in v &&
+        "color" in v) {
+        return true;
+    }
+    if (v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern) {
+        return true;
+    }
+    if (typeof v === "string") {
+        return hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v);
+    }
+    return false;
 }
 function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
-    if (typeof v === 'number')
+    // Unwrap signal if present
+    if ((0, core_1.isSignal)(v)) {
+        v = (0, core_1.unwrap)(v);
+    }
+    if (typeof v === "number")
         return v;
-    if (typeof v === 'string') {
+    if (typeof v === "string") {
         if (percentReg.test(v)) {
             const base = options.layer
-                ? options.vertical ? layer.height : layer.width
-                : options.vertical ? canvas.height : canvas.width;
+                ? options.vertical
+                    ? layer.height
+                    : layer.width
+                : options.vertical
+                    ? canvas.height
+                    : canvas.width;
             return (parseFloat(v) / 100) * base;
         }
         if (pxReg.test(v))
@@ -50,10 +73,14 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
         if (canvasReg.test(v)) {
             const base = options.layer ? layer : canvas;
             switch (v) {
-                case 'vw': return base.width;
-                case 'vh': return base.height;
-                case 'vmin': return Math.min(base.width, base.height);
-                case 'vmax': return Math.max(base.width, base.height);
+                case "vw":
+                    return base.width;
+                case "vh":
+                    return base.height;
+                case "vmin":
+                    return Math.min(base.width, base.height);
+                case "vmax":
+                    return Math.max(base.width, base.height);
             }
         }
         if (linkReg.test(v)) {
@@ -61,15 +88,19 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
             if (!manager)
                 return 0;
             const anyLayer = manager.get(match[2], true);
-            if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
+            if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
                 return 0;
             const parserInstance = parser(ctx, canvas, manager);
             const additionalSpacing = parseInt(match[3]) || 0;
             switch (match[1]) {
-                case 'link-w': return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-                case 'link-h': return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-                case 'link-x': return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
-                case 'link-y': return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
+                case "link-w":
+                    return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case "link-h":
+                    return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case "link-x":
+                    return parserInstance.parse(anyLayer.props.position?.x || 0) + additionalSpacing;
+                case "link-y":
+                    return parserInstance.parse(anyLayer.props.position?.y || 0) + additionalSpacing;
             }
         }
     }
@@ -77,21 +108,27 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
         if (!manager)
             return 0;
         const anyLayer = manager.get(v.source, true);
-        if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
+        if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
             return 0;
         const parserInstance = parser(ctx, canvas, manager);
         const additionalSpacing = parserInstance.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0;
         switch (v.type) {
-            case types_1.LinkType.Width: return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-            case types_1.LinkType.Height: return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
-            case types_1.LinkType.X: return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
-            case types_1.LinkType.Y: return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
+            case types_1.LinkType.Width:
+                return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.Height:
+                return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.X:
+                return parserInstance.parse(anyLayer.props.position?.x || 0) + additionalSpacing;
+            case types_1.LinkType.Y:
+                return parserInstance.parse(anyLayer.props.position?.y || 0) + additionalSpacing;
         }
     }
     return 0;
 }
 function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
-    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+    if (anyLayer instanceof components_1.LineLayer ||
+        anyLayer instanceof components_1.BezierLayer ||
+        anyLayer instanceof components_1.QuadraticLayer) {
         return anyLayer.getBoundingBox(ctx, canvas, manager).width;
     }
     if (anyLayer instanceof components_1.TextLayer) {
@@ -100,13 +137,17 @@ function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
     return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.width) || 0;
 }
 function getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) {
-    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+    if (anyLayer instanceof components_1.LineLayer ||
+        anyLayer instanceof components_1.BezierLayer ||
+        anyLayer instanceof components_1.QuadraticLayer) {
         return anyLayer.getBoundingBox(ctx, canvas, manager).height;
     }
     if (anyLayer instanceof components_1.TextLayer) {
         return anyLayer.measureText(ctx, canvas).height;
     }
-    return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.height) || 0;
+    return anyLayer instanceof components_1.Path2DLayer
+        ? 0
+        : parserInstance.parse(anyLayer.props.size.height) || 0;
 }
 function parser(ctx, canvas, manager) {
     return {
@@ -120,44 +161,44 @@ function parser(ctx, canvas, manager) {
                 result[key] = parseToNormal(v, ctx, canvas, layer ?? LazyUtil_1.defaultArg.wh(), options ?? LazyUtil_1.defaultArg.vl(), manager);
             }
             return result;
-        }
+        },
     };
 }
-function drawShadow(ctx, shadow) {
-    if (shadow) {
-        ctx.shadowColor = shadow.color;
-        ctx.shadowBlur = shadow.blur || 0;
-        ctx.shadowOffsetX = shadow.offsetX || 0;
-        ctx.shadowOffsetY = shadow.offsetY || 0;
-    }
-}
-function opacity(ctx, opacity = 1) {
-    if (opacity < 1) {
-        ctx.globalAlpha = opacity;
-    }
-}
-function filters(ctx, filters) {
-    if (filters) {
-        ctx.filter = filters;
-    }
-}
 function parseFillStyle(ctx, color, opts) {
     if (!ctx)
-        throw new LazyUtil_1.LazyError('The context is not defined');
+        throw new LazyUtil_1.LazyError("The context is not defined");
     if (!color)
-        throw new LazyUtil_1.LazyError('The color is not defined');
+        throw new LazyUtil_1.LazyError("The color is not defined");
     if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
         return color.draw(ctx, opts);
     }
-    if (typeof color === 'object' && color.start && color.end && color.color) {
-        return color.color;
+    if ((0, core_1.isSignal)(color)) {
+        return parseFillStyle(ctx, (0, core_1.unwrap)(color), opts);
+    }
+    if (typeof color === "object" &&
+        color !== null &&
+        "start" in color &&
+        "end" in color &&
+        "color" in color) {
+        return (0, core_1.unwrap)(color.color);
     }
-    else if (typeof color === 'string') {
+    if (typeof color === "string") {
         return color;
     }
-    return '#000000';
+    return "#000000";
 }
-function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, type: types_1.LayerType.Morph }, extra = { text: '', textAlign: types_1.TextAlign.Left, fontSize: 0, multiline: false }) {
+function transform(ctx, transform, layer = {
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    type: types_1.LayerType.Morph,
+}, extra = {
+    text: "",
+    textAlign: types_1.TextAlign.Left,
+    fontSize: 0,
+    multiline: false,
+}) {
     if (transform) {
         if (transform.translate) {
             ctx.translate(transform.translate.x, transform.translate.y);
@@ -170,15 +211,15 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
                 case types_1.LayerType.QuadraticCurve:
                 case types_1.LayerType.Line:
                 case types_1.LayerType.Polygon:
-                    ctx.translate(layer.x + (layer.width / 2), layer.y + (layer.height / 2));
+                    ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
                     ctx.rotate((Math.PI / 180) * transform.rotate);
-                    ctx.translate(-(layer.x + (layer.width / 2)), -(layer.y + (layer.height / 2)));
+                    ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
                     break;
                 case types_1.LayerType.Text:
                     if (extra.multiline) {
-                        ctx.translate(layer.x + (layer.width / 2), layer.y + (layer.height / 2));
+                        ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
                         ctx.rotate((Math.PI / 180) * transform.rotate);
-                        ctx.translate(-(layer.x + (layer.width / 2)), -(layer.y + (layer.height / 2)));
+                        ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
                     }
                     else {
                         if (extra.textAlign === types_1.TextAlign.Center) {
@@ -204,8 +245,13 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
             ctx.scale(transform.scale.x, transform.scale.y);
         }
         if (transform.matrix) {
-            if (!transform.matrix.a || !transform.matrix.b || !transform.matrix.c || !transform.matrix.d || !transform.matrix.e || !transform.matrix.f)
-                throw new LazyUtil_1.LazyError('The matrix transformation must be a valid matrix');
+            if (!transform.matrix.a ||
+                !transform.matrix.b ||
+                !transform.matrix.c ||
+                !transform.matrix.d ||
+                !transform.matrix.e ||
+                !transform.matrix.f)
+                throw new LazyUtil_1.LazyError("The matrix transformation must be a valid matrix");
             ctx.transform(transform.matrix.a, transform.matrix.b, transform.matrix.c, transform.matrix.d, transform.matrix.e, transform.matrix.f);
         }
     }
@@ -244,7 +290,6 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Clear:
                 case types_1.LayerType.Polygon:
                     x -= width / 2;
-                    y -= height;
                     break;
             }
             return { x, y };
@@ -354,13 +399,23 @@ function getBoundingBoxBezier(points, steps = 100) {
         maxX = Math.max(maxX, p.x);
         maxY = Math.max(maxY, p.y);
     }
-    return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }, width: maxX - minX, height: maxY - minY };
+    return {
+        min: { x: minX, y: minY },
+        max: { x: maxX, y: maxY },
+        center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 },
+        width: maxX - minX,
+        height: maxY - minY,
+    };
 }
 function resize(value, ratio) {
-    if (typeof value === 'number') {
+    // Handle Signal - return as is (signals are not resized)
+    if ((0, core_1.isSignal)(value)) {
+        return resize((0, core_1.unwrap)(value), ratio);
+    }
+    if (typeof value === "number") {
         return value * ratio;
     }
-    else if (typeof value === 'string') {
+    else if (typeof value === "string") {
         if (pxReg.test(value)) {
             return parseFloat(value) * ratio;
         }
@@ -368,51 +423,58 @@ function resize(value, ratio) {
             let match = value.match(linkReg);
             return `${match[1]}-${match[2]}-${parseFloat(match[3]) * ratio}`;
         }
+        return value;
     }
     else if (value instanceof helpers_1.Link) {
         return `${value.type}-${value.source}-${resize(value.additionalSpacing, ratio)}`;
     }
-    return value;
+    return 0;
 }
 function resizeLayers(layers, ratio) {
     let newLayers = [];
     if (layers.length > 0) {
         for (const layer of layers) {
-            if (!(layer instanceof components_1.Group || layer instanceof components_1.Path2DLayer)) {
-                layer.props.x = resize(layer.props.x, ratio);
-                layer.props.y = resize(layer.props.y, ratio);
-                if ('size' in layer.props) {
+            if (!(layer instanceof components_1.Div || layer instanceof components_1.Path2DLayer)) {
+                if (layer.props.position) {
+                    layer.props.position.x = resize(layer.props.position.x, ratio);
+                    layer.props.position.y = resize(layer.props.position.y, ratio);
+                }
+                if ("size" in layer.props && layer.props.size) {
                     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) {
-                        if (typeof layer.props.size.radius === 'number') {
+                    if ("radius" in layer.props.size) {
+                        if (typeof layer.props.size.radius === "number") {
                             layer.props.size.radius = resize(layer.props.size.radius, ratio);
                         }
-                        else if (typeof layer.props.size.radius === 'object') {
+                        else if (typeof layer.props.size.radius === "object") {
                             for (const corner in layer.props.size.radius) {
                                 // @ts-ignore
-                                layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
+                                layer.props.size.radius[corner] = resize(
+                                // @ts-ignore
+                                layer.props.size.radius[corner], ratio);
                             }
                         }
                     }
                 }
-                if ('stroke' in layer.props && layer.props.stroke) {
+                if ("stroke" in layer.props && layer.props.stroke) {
                     layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
                 }
-                if ('endPoint' in layer.props) {
-                    layer.props.endPoint.x = resize(layer.props.endPoint.x, ratio);
-                    layer.props.endPoint.y = resize(layer.props.endPoint.y, ratio);
+                if (layer.props.position &&
+                    "endX" in layer.props.position &&
+                    "endY" in layer.props.position) {
+                    layer.props.position.endX = resize(layer.props.position.endX, ratio);
+                    layer.props.position.endY = resize(layer.props.position.endY, ratio);
                 }
-                if ('controlPoints' in layer.props) {
+                if ("controlPoints" in layer.props) {
                     for (const point of layer.props.controlPoints) {
                         point.x = resize(point.x, ratio);
                         point.y = resize(point.y, ratio);
                     }
                 }
-                if ('font' in layer.props) {
+                if ("font" in layer.props) {
                     layer.props.font.size = resize(layer.props.font.size, ratio);
                 }
-                if ('transform' in layer.props) {
+                if ("transform" in layer.props && layer.props.transform) {
                     if (layer.props.transform.translate) {
                         layer.props.transform.translate.x = resize(layer.props.transform.translate.x, ratio);
                         layer.props.transform.translate.y = resize(layer.props.transform.translate.y, ratio);
@@ -423,7 +485,7 @@ function resizeLayers(layers, ratio) {
                     }
                 }
             }
-            else if (layer instanceof components_1.Group) {
+            else if (layer instanceof components_1.Div) {
                 layer.layers = resizeLayers(layer.layers, ratio);
             }
             newLayers.push(layer);

package/package.json

@@ -1,59 +1,61 @@
-{
-  "name": "@nmmty/lazycanvas",
-  "version": "0.6.5",
-  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "test": "tsc ./test/test.ts && node ./test/test.js",
-    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
-    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
-    "text": "tsc ./test/text.ts && node ./test/text.js",
-    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
-    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
-    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
-    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
-    "lint": "eslint ./src --ext .ts",
-    "lint:fix": "eslint ./src --ext .ts --fix",
-    "font": "tsx ./scripts/font-gen.ts",
-    "build": "tsc && tsx ./scripts/post-build.ts"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
-  },
-  "keywords": [
-    "canvas",
-    "@napi-rs/canvas",
-    "node-canvas",
-    "easy",
-    "simple"
-  ],
-  "author": "NMMTY",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/NMMTY/LazyCanvas/issues"
-  },
-  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
-  "dependencies": {
-    "@napi-rs/canvas": "^0.1.72",
-    "gifenc": "^1.0.3",
-    "js-yaml": "^4.1.0",
-    "path": "^0.12.7",
-    "svgson": "^5.3.1"
-  },
-  "devDependencies": {
-    "@hitomihiumi/colors.ts": "^1.0.3",
-    "@hitomihiumi/micro-docgen": "workspace:*",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/utils": "^8.39.1",
-    "ava": "^6.2.0",
-    "eslint": "^9.23.0",
-    "eslint-config-neon": "^0.2.7",
-    "lodash.merge": "^4.6.2",
-    "tslib": "^2.8.1",
-    "tsx": "^4.19.2",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "@nmmty/lazycanvas",
+  "version": "1.0.0-dev.10",
+  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
+  },
+  "keywords": [
+    "canvas",
+    "@napi-rs/canvas",
+    "node-canvas",
+    "easy",
+    "simple"
+  ],
+  "author": "NMMTY",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NMMTY/LazyCanvas/issues"
+  },
+  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.88",
+    "gifenc": "^1.0.3",
+    "js-yaml": "^4.1.0",
+    "svgson": "^5.3.1",
+    "yoga-layout": "^3.2.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@hitomihiumi/colors.ts": "^1.0.3",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/utils": "^8.39.1",
+    "ava": "^6.2.0",
+    "eslint": "^9.23.0",
+    "eslint-config-neon": "^0.2.7",
+    "lodash.merge": "^4.6.2",
+    "tslib": "^2.8.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5",
+    "@hitomihiumi/micro-docgen": "0.4.2"
+  },
+  "scripts": {
+    "test": "tsc ./test/test.ts && node ./test/test.js",
+    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
+    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
+    "text": "tsc ./test/text.ts && node ./test/text.js",
+    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
+    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
+    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
+    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
+    "lint": "eslint ./src --ext .ts",
+    "lint:fix": "eslint ./src --ext .ts --fix",
+    "font": "tsx ./scripts/font-gen.ts",
+    "build": "tsc && tsx ./scripts/post-build.ts",
+    "biome-write": "npx @biomejs/biome format --write ."
+  }
+}

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

@@ -1,147 +0,0 @@
-import { ScaleType, LayerType, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
-import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
-import { LayersManager } from "../managers";
-import { IBaseLayerMisc } from "./BaseLayer";
-/**
- * Interface representing a Clear Layer.
- */
-export interface IClearLayer {
-    /**
-     * The unique identifier of the layer.
-     */
-    id: string;
-    /**
-     * The type of the layer, which is `Clear`.
-     */
-    type: LayerType.Clear;
-    /**
-     * The z-index of the layer, determining its stacking order.
-     */
-    zIndex: number;
-    /**
-     * The visibility of the layer.
-     */
-    visible: boolean;
-    /**
-     * The properties of the Clear Layer.
-     */
-    props: IClearLayerProps;
-}
-/**
- * Interface representing the properties of a Clear Layer.
- */
-export interface IClearLayerProps {
-    /**
-     * The x-coordinate of the layer.
-     */
-    x: ScaleType;
-    /**
-     * The y-coordinate of the layer.
-     */
-    y: ScaleType;
-    /**
-     * The size of the layer, including width and height.
-     */
-    size: {
-        /**
-         * The width of the layer.
-         */
-        width: ScaleType;
-        /**
-         * The height of the layer.
-         */
-        height: ScaleType;
-    };
-    /**
-     * The centring type of the layer.
-     */
-    centring: AnyCentring;
-    /**
-     * Don't use, this is just for compatibility.
-     */
-    globalComposite: AnyGlobalCompositeOperation;
-}
-/**
- * Class representing a Clear Layer.
- */
-export declare class ClearLayer implements IClearLayer {
-    /**
-     * The unique identifier of the layer.
-     */
-    id: string;
-    /**
-     * The type of the layer, which is `Clear`.
-     */
-    type: LayerType.Clear;
-    /**
-     * The z-index of the layer, determining its stacking order.
-     */
-    zIndex: number;
-    /**
-     * The visibility of the layer.
-     */
-    visible: boolean;
-    /**
-     * The properties of the Clear Layer.
-     */
-    props: IClearLayerProps;
-    /**
-     * Constructs a new ClearLayer instance.
-     * @param {IClearLayerProps} [props] - The properties of the Clear Layer.
-     * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
-     */
-    constructor(props?: IClearLayerProps, misc?: IBaseLayerMisc);
-    /**
-     * Sets the position of the layer in the 2D plane.
-     * @param {ScaleType} [x] - The x-coordinate of the layer.
-     * @param {ScaleType} [y] - The y-coordinate of the layer.
-     * @returns {this} The current instance for chaining.
-     */
-    setPosition(x: ScaleType, y: ScaleType): this;
-    /**
-     * Sets the size of the layer.
-     * @param {ScaleType} [width] - The width of the layer.
-     * @param {ScaleType} [height] - The height of the layer.
-     * @returns {this} The current instance for chaining.
-     */
-    setSize(width: ScaleType, height: ScaleType): this;
-    /**
-     * Sets the unique identifier of the layer.
-     *
-     * @param {string} [id] - The unique identifier.
-     * @returns {this} The current instance for chaining.
-     */
-    setID(id: string): this;
-    /**
-     * Sets the centring type of the layer.
-     * @param {AnyCentring} [centring] - The centring type of the layer.
-     * @returns {this} The current instance for chaining.
-     */
-    setCentring(centring: AnyCentring): this;
-    /**
-     * Sets the visibility of the layer.
-     * @param {boolean} [visible] - The visibility state of the layer.
-     * @returns {this} The current instance for chaining.
-     */
-    setVisible(visible: boolean): this;
-    /**
-     * Sets the z-index of the layer.
-     * @param {number} [zIndex] - The z-index value of the layer.
-     * @returns {this} The current instance for chaining.
-     */
-    setZIndex(zIndex: number): this;
-    /**
-     * Draws the Clear Layer on the canvas.
-     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
-     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layer's manager.
-     * @param {boolean} [debug] - Whether to enable debug logging.
-     */
-    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
-    /**
-     * Converts the Clear Layer to a JSON representation.
-     * @returns {IClearLayer} The JSON representation of the Clear Layer.
-     */
-    toJSON(): IClearLayer;
-    protected validateProps(props: IClearLayerProps): IClearLayerProps;
-}