@nmmty/lazycanvas 0.4.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/ReadMe.md +1 -0
  2. package/dist/helpers/Filters.d.ts +10 -10
  3. package/dist/helpers/Fonts.d.ts +1 -1
  4. package/dist/helpers/FontsList.d.ts +1 -1
  5. package/dist/helpers/FontsList.js +19 -19
  6. package/dist/index.d.ts +11 -20
  7. package/dist/index.js +40 -47
  8. package/dist/structures/LazyCanvas.d.ts +126 -19
  9. package/dist/structures/LazyCanvas.js +100 -35
  10. package/dist/structures/components/BaseLayer.d.ts +188 -38
  11. package/dist/structures/components/BaseLayer.js +89 -43
  12. package/dist/structures/components/BezierLayer.d.ts +111 -33
  13. package/dist/structures/components/BezierLayer.js +72 -32
  14. package/dist/structures/components/ClearLayer.d.ts +120 -17
  15. package/dist/structures/components/ClearLayer.js +83 -22
  16. package/dist/structures/components/Group.d.ts +88 -20
  17. package/dist/structures/components/Group.js +69 -29
  18. package/dist/structures/components/ImageLayer.d.ts +76 -12
  19. package/dist/structures/components/ImageLayer.js +43 -39
  20. package/dist/structures/components/LineLayer.d.ts +111 -18
  21. package/dist/structures/components/LineLayer.js +57 -29
  22. package/dist/structures/components/MorphLayer.d.ts +109 -21
  23. package/dist/structures/components/MorphLayer.js +52 -33
  24. package/dist/structures/components/Path2DLayer.d.ts +164 -0
  25. package/dist/structures/components/Path2DLayer.js +293 -0
  26. package/dist/structures/components/QuadraticLayer.d.ts +108 -22
  27. package/dist/structures/components/QuadraticLayer.js +64 -38
  28. package/dist/structures/components/TextLayer.d.ts +201 -40
  29. package/dist/structures/components/TextLayer.js +98 -55
  30. package/dist/structures/components/index.d.ts +10 -0
  31. package/dist/structures/components/index.js +26 -0
  32. package/dist/structures/helpers/Exporter.d.ts +52 -0
  33. package/dist/structures/helpers/Exporter.js +168 -0
  34. package/dist/structures/helpers/Font.d.ts +64 -10
  35. package/dist/structures/helpers/Font.js +38 -11
  36. package/dist/structures/helpers/Gradient.d.ts +96 -9
  37. package/dist/structures/helpers/Gradient.js +49 -19
  38. package/dist/structures/helpers/Link.d.ts +52 -8
  39. package/dist/structures/helpers/Link.js +42 -11
  40. package/dist/structures/helpers/Pattern.d.ts +52 -7
  41. package/dist/structures/helpers/Pattern.js +48 -42
  42. package/dist/structures/helpers/index.d.ts +6 -0
  43. package/dist/structures/helpers/index.js +22 -0
  44. package/dist/structures/helpers/readers/JSONReader.d.ts +49 -0
  45. package/dist/structures/helpers/readers/JSONReader.js +172 -0
  46. package/dist/structures/helpers/readers/SVGReader.d.ts +20 -0
  47. package/dist/structures/helpers/readers/SVGReader.js +577 -0
  48. package/dist/structures/helpers/readers/YAMLReader.d.ts +0 -0
  49. package/dist/structures/helpers/readers/YAMLReader.js +1 -0
  50. package/dist/structures/managers/AnimationManager.d.ts +96 -20
  51. package/dist/structures/managers/AnimationManager.js +54 -26
  52. package/dist/structures/managers/FontsManager.d.ts +76 -32
  53. package/dist/structures/managers/FontsManager.js +70 -45
  54. package/dist/structures/managers/LayersManager.d.ts +84 -32
  55. package/dist/structures/managers/LayersManager.js +66 -28
  56. package/dist/structures/managers/RenderManager.d.ts +60 -6
  57. package/dist/structures/managers/RenderManager.js +120 -40
  58. package/dist/types/enum.d.ts +11 -6
  59. package/dist/types/enum.js +17 -12
  60. package/dist/types/index.d.ts +2 -19
  61. package/dist/types/index.js +17 -0
  62. package/dist/utils/LazyUtil.js +2 -2
  63. package/dist/utils/utils.d.ts +9 -11
  64. package/dist/utils/utils.js +163 -234
  65. package/package.json +4 -5
@@ -1,25 +1,89 @@
1
- import { BaseLayer } from "./BaseLayer";
2
- import { IImageLayer, IImageLayerProps, ScaleType } from "../../types";
3
- import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
1
+ /// <reference types="node" />
2
+ /// <reference types="node" />
3
+ import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
4
+ import { ScaleType, LayerType } from "../../types";
5
+ import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
4
6
  import { LayersManager } from "../managers/LayersManager";
7
+ /**
8
+ * Interface representing an Image Layer.
9
+ */
10
+ export interface IImageLayer extends IBaseLayer {
11
+ /**
12
+ * The type of the layer, which is `Image`.
13
+ */
14
+ type: LayerType.Image;
15
+ /**
16
+ * The properties specific to the Image Layer.
17
+ */
18
+ props: IImageLayerProps;
19
+ }
20
+ /**
21
+ * Interface representing the properties of an Image Layer.
22
+ */
23
+ export interface IImageLayerProps extends IBaseLayerProps {
24
+ /**
25
+ * The source of the image, which can be a URL or a Buffer.
26
+ */
27
+ src: string | Buffer;
28
+ /**
29
+ * The size of the image, including width, height, and radius.
30
+ */
31
+ size: {
32
+ /**
33
+ * The width of the image.
34
+ */
35
+ width: ScaleType;
36
+ /**
37
+ * The height of the image.
38
+ */
39
+ height: ScaleType;
40
+ /**
41
+ * The radius of the image.
42
+ */
43
+ radius: ScaleType;
44
+ };
45
+ }
46
+ /**
47
+ * Class representing an Image Layer, extending the BaseLayer class.
48
+ */
5
49
  export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
50
+ /**
51
+ * The properties of the Image Layer.
52
+ */
6
53
  props: IImageLayerProps;
7
- constructor(props?: IImageLayerProps);
8
54
  /**
9
- * @description Sets the source of the image, it can be like link to website or path to file.
10
- * @param src {string} - The `src` of the image.
55
+ * Constructs a new ImageLayer instance.
56
+ * @param props {IImageLayerProps} - The properties of the Image Layer.
57
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
58
+ */
59
+ constructor(props?: IImageLayerProps, misc?: IBaseLayerMisc);
60
+ /**
61
+ * Sets the source of the image.
62
+ * @param src {string} - The source of the image, which can be a URL or file path.
63
+ * @returns {this} The current instance for chaining.
64
+ * @throws {LazyError} If the source is not a valid URL.
11
65
  */
12
66
  setSrc(src: string): this;
13
67
  /**
14
- * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
15
- * @param width {ScaleType} - The `width` of the image.
16
- * @param height {ScaleType} - The `height` of the image.
17
- * @param radius {ScaleType} - The `radius` of the image. (optional)
68
+ * Sets the size of the image.
69
+ * @param width {ScaleType} - The width of the image.
70
+ * @param height {ScaleType} - The height of the image.
71
+ * @param radius {ScaleType} - The radius of the image (optional).
72
+ * @returns {this} The current instance for chaining.
18
73
  */
19
74
  setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
20
- draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
21
75
  /**
22
- * @returns {IImageLayer}
76
+ * Draws the Image Layer on the canvas.
77
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
78
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
79
+ * @param manager {LayersManager} - The layers manager.
80
+ * @param debug {boolean} - Whether to enable debug logging.
81
+ * @throws {LazyError} If the image could not be loaded.
82
+ */
83
+ draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
84
+ /**
85
+ * Converts the Image Layer to a JSON representation.
86
+ * @returns {IImageLayer} The JSON representation of the Image Layer.
23
87
  */
24
88
  toJSON(): IImageLayer;
25
89
  }
@@ -1,45 +1,34 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
2
  Object.defineProperty(exports, "__esModule", { value: true });
26
3
  exports.ImageLayer = void 0;
27
4
  const BaseLayer_1 = require("./BaseLayer");
28
- const enum_1 = require("../../types/enum");
5
+ const types_1 = require("../../types");
29
6
  const canvas_1 = require("@napi-rs/canvas");
30
7
  const utils_1 = require("../../utils/utils");
31
8
  const LazyUtil_1 = require("../../utils/LazyUtil");
32
- const jimp = __importStar(require("jimp"));
9
+ /**
10
+ * Class representing an Image Layer, extending the BaseLayer class.
11
+ */
33
12
  class ImageLayer extends BaseLayer_1.BaseLayer {
13
+ /**
14
+ * The properties of the Image Layer.
15
+ */
34
16
  props;
35
- constructor(props) {
36
- super(enum_1.LayerType.Image, props || {});
17
+ /**
18
+ * Constructs a new ImageLayer instance.
19
+ * @param props {IImageLayerProps} - The properties of the Image Layer.
20
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
21
+ */
22
+ constructor(props, misc) {
23
+ super(types_1.LayerType.Image, props || {}, misc);
37
24
  this.props = props ? props : {};
38
- this.props.centring = enum_1.Centring.Center;
25
+ this.props.centring = types_1.Centring.Center;
39
26
  }
40
27
  /**
41
- * @description Sets the source of the image, it can be like link to website or path to file.
42
- * @param src {string} - The `src` of the image.
28
+ * Sets the source of the image.
29
+ * @param src {string} - The source of the image, which can be a URL or file path.
30
+ * @returns {this} The current instance for chaining.
31
+ * @throws {LazyError} If the source is not a valid URL.
43
32
  */
44
33
  setSrc(src) {
45
34
  if (!(0, utils_1.isImageUrlValid)(src))
@@ -48,10 +37,11 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
48
37
  return this;
49
38
  }
50
39
  /**
51
- * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
52
- * @param width {ScaleType} - The `width` of the image.
53
- * @param height {ScaleType} - The `height` of the image.
54
- * @param radius {ScaleType} - The `radius` of the image. (optional)
40
+ * Sets the size of the image.
41
+ * @param width {ScaleType} - The width of the image.
42
+ * @param height {ScaleType} - The height of the image.
43
+ * @param radius {ScaleType} - The radius of the image (optional).
44
+ * @returns {this} The current instance for chaining.
55
45
  */
56
46
  setSize(width, height, radius) {
57
47
  this.props.size = {
@@ -61,6 +51,14 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
61
51
  };
62
52
  return this;
63
53
  }
54
+ /**
55
+ * Draws the Image Layer on the canvas.
56
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
57
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
58
+ * @param manager {LayersManager} - The layers manager.
59
+ * @param debug {boolean} - Whether to enable debug logging.
60
+ * @throws {LazyError} If the image could not be loaded.
61
+ */
64
62
  async draw(ctx, canvas, manager, debug) {
65
63
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
66
64
  const { xs, ys, w } = parcer.parseBatch({
@@ -78,9 +76,9 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
78
76
  (0, utils_1.drawShadow)(ctx, this.props.shadow);
79
77
  (0, utils_1.opacity)(ctx, this.props.opacity);
80
78
  (0, utils_1.filters)(ctx, this.props.filter);
81
- let jmp = await jimp.read(this.props.src);
82
- jmp.resize(w, h);
83
- let image = await (0, canvas_1.loadImage)(await jmp.getBufferAsync('image/png'));
79
+ let image = await (0, canvas_1.loadImage)(this.props.src);
80
+ image.width = w;
81
+ image.height = h;
84
82
  if (!image)
85
83
  throw new LazyUtil_1.LazyError('The image could not be loaded');
86
84
  if (r) {
@@ -100,11 +98,17 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
100
98
  ctx.restore();
101
99
  }
102
100
  /**
103
- * @returns {IImageLayer}
101
+ * Converts the Image Layer to a JSON representation.
102
+ * @returns {IImageLayer} The JSON representation of the Image Layer.
104
103
  */
105
104
  toJSON() {
106
105
  let data = super.toJSON();
107
- data.props = this.props;
106
+ let copy = { ...this.props };
107
+ for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius']) {
108
+ if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
109
+ copy[key] = copy[key].toJSON();
110
+ }
111
+ }
108
112
  return { ...data };
109
113
  }
110
114
  }
@@ -1,32 +1,114 @@
1
- import { BaseLayer } from "./BaseLayer";
2
- import { ColorType, ILineLayer, ILineLayerProps, ScaleType } from "../../types/";
3
- import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
1
+ import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
2
+ import { ColorType, ScaleType, LayerType } from "../../types";
3
+ import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
4
4
  import { LayersManager } from "../managers/LayersManager";
5
+ /**
6
+ * Interface representing a Line Layer.
7
+ */
8
+ export interface ILineLayer extends IBaseLayer {
9
+ /**
10
+ * The type of the layer, which is `Line`.
11
+ */
12
+ type: LayerType.Line;
13
+ /**
14
+ * The properties specific to the Line Layer.
15
+ */
16
+ props: ILineLayerProps;
17
+ }
18
+ /**
19
+ * Interface representing the properties of a Line Layer.
20
+ */
21
+ export interface ILineLayerProps extends IBaseLayerProps {
22
+ /**
23
+ * The end point of the line, including x and y coordinates.
24
+ */
25
+ endPoint: {
26
+ /**
27
+ * The x-coordinate of the end point.
28
+ */
29
+ x: ScaleType;
30
+ /**
31
+ * The y-coordinate of the end point.
32
+ */
33
+ y: ScaleType;
34
+ };
35
+ /**
36
+ * The stroke properties of the line.
37
+ */
38
+ stroke: {
39
+ /**
40
+ * The width of the stroke.
41
+ */
42
+ width: number;
43
+ /**
44
+ * The cap style of the stroke.
45
+ */
46
+ cap: CanvasLineCap;
47
+ /**
48
+ * The join style of the stroke.
49
+ */
50
+ join: CanvasLineJoin;
51
+ /**
52
+ * The dash offset of the stroke.
53
+ */
54
+ dashOffset: number;
55
+ /**
56
+ * The dash pattern of the stroke.
57
+ */
58
+ dash: number[];
59
+ /**
60
+ * The miter limit of the stroke.
61
+ */
62
+ miterLimit: number;
63
+ };
64
+ }
65
+ /**
66
+ * Class representing a Line Layer, extending the BaseLayer class.
67
+ */
5
68
  export declare class LineLayer extends BaseLayer<ILineLayerProps> {
69
+ /**
70
+ * The properties of the Line Layer.
71
+ */
6
72
  props: ILineLayerProps;
7
- constructor(props?: ILineLayerProps);
8
73
  /**
9
- * @description Sets the end point of the line layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
10
- * @param x {ScaleType} - The end `x` of the line layer.
11
- * @param y {ScaleType} - The end `y` of the line layer.
74
+ * Constructs a new LineLayer instance.
75
+ * @param props {ILineLayerProps} - The properties of the Line Layer.
76
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
77
+ */
78
+ constructor(props?: ILineLayerProps, misc?: IBaseLayerMisc);
79
+ /**
80
+ * Sets the end position of the line layer.
81
+ * @param x {ScaleType} - The x-coordinate of the end point.
82
+ * @param y {ScaleType} - The y-coordinate of the end point.
83
+ * @returns {this} The current instance for chaining.
12
84
  */
13
85
  setEndPosition(x: ScaleType, y: ScaleType): this;
14
86
  /**
15
- * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
16
- * @param color {string} - The `color` of the layer.
87
+ * Sets the color of the line layer.
88
+ * @param color {ColorType} - The color of the line.
89
+ * @returns {this} The current instance for chaining.
90
+ * @throws {LazyError} If the color is not provided or invalid.
17
91
  */
18
92
  setColor(color: ColorType): this;
19
93
  /**
20
- * @description Sets the stroke of the layer.
21
- * @param width {number} - The `width` of the stroke.
22
- * @param cap {string} - The `cap` of the stroke.
23
- * @param join {string} - The `join` of the stroke.
24
- * @param dash {number[]} - The `dash` of the stroke.
25
- * @param dashOffset {number} - The `dashOffset` of the stroke.
26
- * @param miterLimit {number} - The `miterLimit` of the stroke.
94
+ * Sets the stroke properties of the line layer.
95
+ * @param width {number} - The width of the stroke.
96
+ * @param cap {CanvasLineCap} - The cap style of the stroke.
97
+ * @param join {CanvasLineJoin} - The join style of the stroke.
98
+ * @param dash {number[]} - The dash pattern of the stroke.
99
+ * @param dashOffset {number} - The dash offset of the stroke.
100
+ * @param miterLimit {number} - The miter limit of the stroke.
101
+ * @returns {this} The current instance for chaining.
27
102
  */
28
103
  setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
29
- getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
104
+ /**
105
+ * Calculates the bounding box of the line layer.
106
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
107
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
108
+ * @param manager {LayersManager} - The layers manager.
109
+ * @returns {Object} The bounding box details including start and end points, width, and height.
110
+ */
111
+ getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
30
112
  xs: number;
31
113
  ys: number;
32
114
  xe: number;
@@ -34,6 +116,17 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
34
116
  width: number;
35
117
  height: number;
36
118
  };
37
- draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
119
+ /**
120
+ * Draws the line layer on the canvas.
121
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
122
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
123
+ * @param manager {LayersManager} - The layers manager.
124
+ * @param debug {boolean} - Whether to enable debug logging.
125
+ */
126
+ draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
127
+ /**
128
+ * Converts the Line Layer to a JSON representation.
129
+ * @returns {ILineLayer} The JSON representation of the Line Layer.
130
+ */
38
131
  toJSON(): ILineLayer;
39
132
  }
@@ -2,57 +2,62 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LineLayer = void 0;
4
4
  const BaseLayer_1 = require("./BaseLayer");
5
- const enum_1 = require("../../types/enum");
5
+ const types_1 = require("../../types");
6
6
  const LazyUtil_1 = require("../../utils/LazyUtil");
7
7
  const utils_1 = require("../../utils/utils");
8
- const Gradient_1 = require("../helpers/Gradient");
9
- const Pattern_1 = require("../helpers/Pattern");
8
+ /**
9
+ * Class representing a Line Layer, extending the BaseLayer class.
10
+ */
10
11
  class LineLayer extends BaseLayer_1.BaseLayer {
12
+ /**
13
+ * The properties of the Line Layer.
14
+ */
11
15
  props;
12
- constructor(props) {
13
- super(enum_1.LayerType.Line, props || {});
16
+ /**
17
+ * Constructs a new LineLayer instance.
18
+ * @param props {ILineLayerProps} - The properties of the Line Layer.
19
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
20
+ */
21
+ constructor(props, misc) {
22
+ super(types_1.LayerType.Line, props || {}, misc);
14
23
  this.props = props ? props : {};
15
24
  if (!this.props.fillStyle)
16
25
  this.props.fillStyle = '#000000';
17
- this.props.centring = enum_1.Centring.None;
26
+ this.props.centring = types_1.Centring.None;
18
27
  }
19
28
  /**
20
- * @description Sets the end point of the line layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
21
- * @param x {ScaleType} - The end `x` of the line layer.
22
- * @param y {ScaleType} - The end `y` of the line layer.
29
+ * Sets the end position of the line layer.
30
+ * @param x {ScaleType} - The x-coordinate of the end point.
31
+ * @param y {ScaleType} - The y-coordinate of the end point.
32
+ * @returns {this} The current instance for chaining.
23
33
  */
24
34
  setEndPosition(x, y) {
25
35
  this.props.endPoint = { x, y };
26
36
  return this;
27
37
  }
28
38
  /**
29
- * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
30
- * @param color {string} - The `color` of the layer.
39
+ * Sets the color of the line layer.
40
+ * @param color {ColorType} - The color of the line.
41
+ * @returns {this} The current instance for chaining.
42
+ * @throws {LazyError} If the color is not provided or invalid.
31
43
  */
32
44
  setColor(color) {
33
45
  if (!color)
34
46
  throw new LazyUtil_1.LazyError('The color of the layer must be provided');
35
47
  if (!(0, utils_1.isColor)(color))
36
48
  throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
37
- let fill = (0, utils_1.parseColor)(color);
38
- if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
39
- this.props.fillStyle = fill;
40
- }
41
- else {
42
- let arr = fill.split(':');
43
- this.props.fillStyle = arr[0];
44
- this.props.opacity = parseFloat(arr[1]) || 1;
45
- }
49
+ this.props.fillStyle = color;
46
50
  return this;
47
51
  }
48
52
  /**
49
- * @description Sets the stroke of the layer.
50
- * @param width {number} - The `width` of the stroke.
51
- * @param cap {string} - The `cap` of the stroke.
52
- * @param join {string} - The `join` of the stroke.
53
- * @param dash {number[]} - The `dash` of the stroke.
54
- * @param dashOffset {number} - The `dashOffset` of the stroke.
55
- * @param miterLimit {number} - The `miterLimit` of the stroke.
53
+ * Sets the stroke properties of the line layer.
54
+ * @param width {number} - The width of the stroke.
55
+ * @param cap {CanvasLineCap} - The cap style of the stroke.
56
+ * @param join {CanvasLineJoin} - The join style of the stroke.
57
+ * @param dash {number[]} - The dash pattern of the stroke.
58
+ * @param dashOffset {number} - The dash offset of the stroke.
59
+ * @param miterLimit {number} - The miter limit of the stroke.
60
+ * @returns {this} The current instance for chaining.
56
61
  */
57
62
  setStroke(width, cap, join, dash, dashOffset, miterLimit) {
58
63
  this.props.stroke = {
@@ -65,6 +70,13 @@ class LineLayer extends BaseLayer_1.BaseLayer {
65
70
  };
66
71
  return this;
67
72
  }
73
+ /**
74
+ * Calculates the bounding box of the line layer.
75
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
76
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
77
+ * @param manager {LayersManager} - The layers manager.
78
+ * @returns {Object} The bounding box details including start and end points, width, and height.
79
+ */
68
80
  getBoundingBox(ctx, canvas, manager) {
69
81
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
70
82
  const { xs, ys, xe, ye } = parcer.parseBatch({
@@ -77,6 +89,13 @@ class LineLayer extends BaseLayer_1.BaseLayer {
77
89
  let height = ye - ys;
78
90
  return { xs, ys, xe, ye, width, height };
79
91
  }
92
+ /**
93
+ * Draws the line layer on the canvas.
94
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
95
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
96
+ * @param manager {LayersManager} - The layers manager.
97
+ * @param debug {boolean} - Whether to enable debug logging.
98
+ */
80
99
  async draw(ctx, canvas, manager, debug) {
81
100
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
82
101
  const { xs, ys, xe, ye } = parcer.parseBatch({
@@ -109,10 +128,19 @@ class LineLayer extends BaseLayer_1.BaseLayer {
109
128
  ctx.closePath();
110
129
  ctx.restore();
111
130
  }
131
+ /**
132
+ * Converts the Line Layer to a JSON representation.
133
+ * @returns {ILineLayer} The JSON representation of the Line Layer.
134
+ */
112
135
  toJSON() {
113
136
  let data = super.toJSON();
114
- data.props = this.props;
115
- return { ...data };
137
+ let copy = { ...this.props };
138
+ for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
139
+ if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
140
+ copy[key] = copy[key].toJSON();
141
+ }
142
+ }
143
+ return { ...data, props: copy };
116
144
  }
117
145
  }
118
146
  exports.LineLayer = LineLayer;
@@ -1,40 +1,128 @@
1
- import { BaseLayer } from "./BaseLayer";
2
- import { IMorphLayer, IMorphLayerProps, ColorType, ScaleType } from "../../types";
3
- import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
1
+ import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
2
+ import { ColorType, ScaleType, LayerType } from "../../types";
3
+ import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
4
4
  import { LayersManager } from "../managers/LayersManager";
5
+ /**
6
+ * Interface representing a Morph Layer.
7
+ */
8
+ export interface IMorphLayer extends IBaseLayer {
9
+ /**
10
+ * The type of the layer, which is `Morph`.
11
+ */
12
+ type: LayerType.Morph;
13
+ /**
14
+ * The properties specific to the Morph Layer.
15
+ */
16
+ props: IMorphLayerProps;
17
+ }
18
+ /**
19
+ * Interface representing the properties of a Morph Layer.
20
+ */
21
+ export interface IMorphLayerProps extends IBaseLayerProps {
22
+ /**
23
+ * The size of the Morph Layer, including width, height, and radius.
24
+ */
25
+ size: {
26
+ /**
27
+ * The width of the Morph Layer.
28
+ */
29
+ width: ScaleType;
30
+ /**
31
+ * The height of the Morph Layer.
32
+ */
33
+ height: ScaleType;
34
+ /**
35
+ * The radius of the Morph Layer.
36
+ */
37
+ radius: ScaleType;
38
+ };
39
+ /**
40
+ * The stroke properties of the morph.
41
+ */
42
+ stroke: {
43
+ /**
44
+ * The width of the stroke.
45
+ */
46
+ width: number;
47
+ /**
48
+ * The cap style of the stroke.
49
+ */
50
+ cap: CanvasLineCap;
51
+ /**
52
+ * The join style of the stroke.
53
+ */
54
+ join: CanvasLineJoin;
55
+ /**
56
+ * The dash offset of the stroke.
57
+ */
58
+ dashOffset: number;
59
+ /**
60
+ * The dash pattern of the stroke.
61
+ */
62
+ dash: number[];
63
+ /**
64
+ * The miter limit of the stroke.
65
+ */
66
+ miterLimit: number;
67
+ };
68
+ }
69
+ /**
70
+ * Class representing a Morph Layer, extending the BaseLayer class.
71
+ */
5
72
  export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
73
+ /**
74
+ * The properties of the Morph Layer.
75
+ */
6
76
  props: IMorphLayerProps;
7
- constructor(props?: IMorphLayerProps);
8
77
  /**
9
- * @description Sets size of the morph layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
10
- * @param width {ScaleType} - The `width` of the morph layer.
11
- * @param height {ScaleType} - The `height` of the morph layer.
12
- * @param radius {ScaleType} - The `radius` of the morph layer. (optional)
78
+ * Constructs a new MorphLayer instance.
79
+ * @param props {IMorphLayerProps} - The properties of the Morph Layer.
80
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
81
+ */
82
+ constructor(props?: IMorphLayerProps, misc?: IBaseLayerMisc);
83
+ /**
84
+ * Sets the size of the Morph Layer.
85
+ * @param width {ScaleType} - The width of the Morph Layer.
86
+ * @param height {ScaleType} - The height of the Morph Layer.
87
+ * @param radius {ScaleType} - The radius of the Morph Layer (optional).
88
+ * @returns {this} The current instance for chaining.
13
89
  */
14
90
  setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
15
91
  /**
16
- * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
17
- * @param color {string} - The `color` of the layer.
92
+ * Sets the color of the Morph Layer.
93
+ * @param color {string} - The color of the Morph Layer.
94
+ * @returns {this} The current instance for chaining.
95
+ * @throws {LazyError} If the color is not provided or invalid.
18
96
  */
19
97
  setColor(color: ColorType): this;
20
98
  /**
21
- * @description Sets the stroke of the layer.
22
- * @param width {number} - The `width` of the stroke.
23
- * @param cap {string} - The `cap` of the stroke.
24
- * @param join {string} - The `join` of the stroke.
25
- * @param dash {number[]} - The `dash` of the stroke.
26
- * @param dashOffset {number} - The `dashOffset` of the stroke.
27
- * @param miterLimit {number} - The `miterLimit` of the stroke.
99
+ * Sets the stroke properties of the Morph Layer.
100
+ * @param width {number} - The width of the stroke.
101
+ * @param cap {string} - The cap style of the stroke.
102
+ * @param join {string} - The join style of the stroke.
103
+ * @param dash {number[]} - The dash pattern of the stroke.
104
+ * @param dashOffset {number} - The dash offset of the stroke.
105
+ * @param miterLimit {number} - The miter limit of the stroke.
106
+ * @returns {this} The current instance for chaining.
28
107
  */
29
108
  setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
30
109
  /**
31
- * @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
32
- * @param filled {boolean} - The `filled` of the layer.
110
+ * Sets whether the Morph Layer should be filled or stroked.
111
+ * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
112
+ * @returns {this} The current instance for chaining.
33
113
  */
34
114
  setFilled(filled: boolean): this;
35
- draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
36
115
  /**
37
- * @returns {IMorphLayer}
116
+ * Draws the Morph Layer on the canvas.
117
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
118
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
119
+ * @param manager {LayersManager} - The layers manager.
120
+ * @param debug {boolean} - Whether to enable debug logging.
121
+ */
122
+ draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
123
+ /**
124
+ * Converts the Morph Layer to a JSON representation.
125
+ * @returns {IMorphLayer} The JSON representation of the Morph Layer.
38
126
  */
39
127
  toJSON(): IMorphLayer;
40
128
  }