@nmmty/lazycanvas 0.4.0 → 0.5.0

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 (64) hide show
  1. package/dist/helpers/Filters.d.ts +10 -10
  2. package/dist/helpers/Fonts.d.ts +1 -1
  3. package/dist/helpers/FontsList.d.ts +1 -1
  4. package/dist/helpers/FontsList.js +19 -19
  5. package/dist/index.d.ts +11 -20
  6. package/dist/index.js +40 -47
  7. package/dist/structures/LazyCanvas.d.ts +126 -19
  8. package/dist/structures/LazyCanvas.js +100 -35
  9. package/dist/structures/components/BaseLayer.d.ts +188 -38
  10. package/dist/structures/components/BaseLayer.js +88 -41
  11. package/dist/structures/components/BezierLayer.d.ts +108 -21
  12. package/dist/structures/components/BezierLayer.js +73 -24
  13. package/dist/structures/components/ClearLayer.d.ts +120 -17
  14. package/dist/structures/components/ClearLayer.js +83 -22
  15. package/dist/structures/components/Group.d.ts +86 -18
  16. package/dist/structures/components/Group.js +69 -29
  17. package/dist/structures/components/ImageLayer.d.ts +85 -12
  18. package/dist/structures/components/ImageLayer.js +52 -39
  19. package/dist/structures/components/LineLayer.d.ts +111 -18
  20. package/dist/structures/components/LineLayer.js +58 -21
  21. package/dist/structures/components/MorphLayer.d.ts +109 -21
  22. package/dist/structures/components/MorphLayer.js +53 -25
  23. package/dist/structures/components/Path2DLayer.d.ts +191 -0
  24. package/dist/structures/components/Path2DLayer.js +318 -0
  25. package/dist/structures/components/QuadraticLayer.d.ts +108 -22
  26. package/dist/structures/components/QuadraticLayer.js +65 -30
  27. package/dist/structures/components/TextLayer.d.ts +201 -40
  28. package/dist/structures/components/TextLayer.js +99 -47
  29. package/dist/structures/components/index.d.ts +10 -0
  30. package/dist/structures/components/index.js +26 -0
  31. package/dist/structures/helpers/Exporter.d.ts +52 -0
  32. package/dist/structures/helpers/Exporter.js +168 -0
  33. package/dist/structures/helpers/Font.d.ts +64 -10
  34. package/dist/structures/helpers/Font.js +38 -11
  35. package/dist/structures/helpers/Gradient.d.ts +96 -9
  36. package/dist/structures/helpers/Gradient.js +48 -17
  37. package/dist/structures/helpers/Link.d.ts +52 -8
  38. package/dist/structures/helpers/Link.js +42 -11
  39. package/dist/structures/helpers/Pattern.d.ts +52 -7
  40. package/dist/structures/helpers/Pattern.js +45 -40
  41. package/dist/structures/helpers/index.d.ts +6 -0
  42. package/dist/structures/helpers/index.js +22 -0
  43. package/dist/structures/helpers/readers/JSONReader.d.ts +49 -0
  44. package/dist/structures/helpers/readers/JSONReader.js +172 -0
  45. package/dist/structures/helpers/readers/SVGReader.d.ts +20 -0
  46. package/dist/structures/helpers/readers/SVGReader.js +577 -0
  47. package/dist/structures/helpers/readers/YAMLReader.d.ts +0 -0
  48. package/dist/structures/helpers/readers/YAMLReader.js +1 -0
  49. package/dist/structures/managers/AnimationManager.d.ts +96 -20
  50. package/dist/structures/managers/AnimationManager.js +54 -26
  51. package/dist/structures/managers/FontsManager.d.ts +76 -32
  52. package/dist/structures/managers/FontsManager.js +70 -45
  53. package/dist/structures/managers/LayersManager.d.ts +84 -32
  54. package/dist/structures/managers/LayersManager.js +66 -28
  55. package/dist/structures/managers/RenderManager.d.ts +60 -6
  56. package/dist/structures/managers/RenderManager.js +120 -40
  57. package/dist/types/enum.d.ts +11 -6
  58. package/dist/types/enum.js +17 -12
  59. package/dist/types/index.d.ts +2 -19
  60. package/dist/types/index.js +17 -0
  61. package/dist/utils/LazyUtil.js +2 -2
  62. package/dist/utils/utils.d.ts +10 -9
  63. package/dist/utils/utils.js +159 -164
  64. package/package.json +4 -5
@@ -2,32 +2,45 @@
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
+ const helpers_1 = require("../helpers");
9
+ /**
10
+ * Class representing a Line Layer, extending the BaseLayer class.
11
+ */
10
12
  class LineLayer extends BaseLayer_1.BaseLayer {
13
+ /**
14
+ * The properties of the Line Layer.
15
+ */
11
16
  props;
12
- constructor(props) {
13
- super(enum_1.LayerType.Line, props || {});
17
+ /**
18
+ * Constructs a new LineLayer instance.
19
+ * @param props {ILineLayerProps} - The properties of the Line Layer.
20
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
21
+ */
22
+ constructor(props, misc) {
23
+ super(types_1.LayerType.Line, props || {}, misc);
14
24
  this.props = props ? props : {};
15
25
  if (!this.props.fillStyle)
16
26
  this.props.fillStyle = '#000000';
17
- this.props.centring = enum_1.Centring.None;
27
+ this.props.centring = types_1.Centring.None;
18
28
  }
19
29
  /**
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.
30
+ * Sets the end position of the line layer.
31
+ * @param x {ScaleType} - The x-coordinate of the end point.
32
+ * @param y {ScaleType} - The y-coordinate of the end point.
33
+ * @returns {this} The current instance for chaining.
23
34
  */
24
35
  setEndPosition(x, y) {
25
36
  this.props.endPoint = { x, y };
26
37
  return this;
27
38
  }
28
39
  /**
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.
40
+ * Sets the color of the line layer.
41
+ * @param color {ColorType} - The color of the line.
42
+ * @returns {this} The current instance for chaining.
43
+ * @throws {LazyError} If the color is not provided or invalid.
31
44
  */
32
45
  setColor(color) {
33
46
  if (!color)
@@ -35,7 +48,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
35
48
  if (!(0, utils_1.isColor)(color))
36
49
  throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
37
50
  let fill = (0, utils_1.parseColor)(color);
38
- if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
51
+ if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
39
52
  this.props.fillStyle = fill;
40
53
  }
41
54
  else {
@@ -46,13 +59,14 @@ class LineLayer extends BaseLayer_1.BaseLayer {
46
59
  return this;
47
60
  }
48
61
  /**
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.
62
+ * Sets the stroke properties of the line layer.
63
+ * @param width {number} - The width of the stroke.
64
+ * @param cap {CanvasLineCap} - The cap style of the stroke.
65
+ * @param join {CanvasLineJoin} - The join style of the stroke.
66
+ * @param dash {number[]} - The dash pattern of the stroke.
67
+ * @param dashOffset {number} - The dash offset of the stroke.
68
+ * @param miterLimit {number} - The miter limit of the stroke.
69
+ * @returns {this} The current instance for chaining.
56
70
  */
57
71
  setStroke(width, cap, join, dash, dashOffset, miterLimit) {
58
72
  this.props.stroke = {
@@ -65,6 +79,13 @@ class LineLayer extends BaseLayer_1.BaseLayer {
65
79
  };
66
80
  return this;
67
81
  }
82
+ /**
83
+ * Calculates the bounding box of the line layer.
84
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
85
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
86
+ * @param manager {LayersManager} - The layers manager.
87
+ * @returns {Object} The bounding box details including start and end points, width, and height.
88
+ */
68
89
  getBoundingBox(ctx, canvas, manager) {
69
90
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
70
91
  const { xs, ys, xe, ye } = parcer.parseBatch({
@@ -77,6 +98,13 @@ class LineLayer extends BaseLayer_1.BaseLayer {
77
98
  let height = ye - ys;
78
99
  return { xs, ys, xe, ye, width, height };
79
100
  }
101
+ /**
102
+ * Draws the line layer on the canvas.
103
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
104
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
105
+ * @param manager {LayersManager} - The layers manager.
106
+ * @param debug {boolean} - Whether to enable debug logging.
107
+ */
80
108
  async draw(ctx, canvas, manager, debug) {
81
109
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
82
110
  const { xs, ys, xe, ye } = parcer.parseBatch({
@@ -109,10 +137,19 @@ class LineLayer extends BaseLayer_1.BaseLayer {
109
137
  ctx.closePath();
110
138
  ctx.restore();
111
139
  }
140
+ /**
141
+ * Converts the Line Layer to a JSON representation.
142
+ * @returns {ILineLayer} The JSON representation of the Line Layer.
143
+ */
112
144
  toJSON() {
113
145
  let data = super.toJSON();
114
- data.props = this.props;
115
- return { ...data };
146
+ let copy = { ...this.props };
147
+ for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
148
+ if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
149
+ copy[key] = copy[key].toJSON();
150
+ }
151
+ }
152
+ return { ...data, props: copy };
116
153
  }
117
154
  }
118
155
  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
  }
@@ -2,27 +2,38 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MorphLayer = 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 utils_1 = require("../../utils/utils");
7
7
  const LazyUtil_1 = require("../../utils/LazyUtil");
8
- const Gradient_1 = require("../helpers/Gradient");
9
- const Pattern_1 = require("../helpers/Pattern");
8
+ const helpers_1 = require("../helpers");
9
+ /**
10
+ * Class representing a Morph Layer, extending the BaseLayer class.
11
+ */
10
12
  class MorphLayer extends BaseLayer_1.BaseLayer {
13
+ /**
14
+ * The properties of the Morph Layer.
15
+ */
11
16
  props;
12
- constructor(props) {
13
- super(enum_1.LayerType.Morph, props || {});
17
+ /**
18
+ * Constructs a new MorphLayer instance.
19
+ * @param props {IMorphLayerProps} - The properties of the Morph Layer.
20
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
21
+ */
22
+ constructor(props, misc) {
23
+ super(types_1.LayerType.Morph, props || {}, misc);
14
24
  this.props = props ? props : {};
15
25
  if (!this.props.fillStyle)
16
26
  this.props.fillStyle = '#000000';
17
27
  if (!this.props.filled && this.props.filled !== false)
18
28
  this.props.filled = true;
19
- this.props.centring = enum_1.Centring.Center;
29
+ this.props.centring = types_1.Centring.Center;
20
30
  }
21
31
  /**
22
- * @description Sets size of the morph layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
23
- * @param width {ScaleType} - The `width` of the morph layer.
24
- * @param height {ScaleType} - The `height` of the morph layer.
25
- * @param radius {ScaleType} - The `radius` of the morph layer. (optional)
32
+ * Sets the size of the Morph Layer.
33
+ * @param width {ScaleType} - The width of the Morph Layer.
34
+ * @param height {ScaleType} - The height of the Morph Layer.
35
+ * @param radius {ScaleType} - The radius of the Morph Layer (optional).
36
+ * @returns {this} The current instance for chaining.
26
37
  */
27
38
  setSize(width, height, radius) {
28
39
  this.props.size = {
@@ -33,8 +44,10 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
33
44
  return this;
34
45
  }
35
46
  /**
36
- * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
37
- * @param color {string} - The `color` of the layer.
47
+ * Sets the color of the Morph Layer.
48
+ * @param color {string} - The color of the Morph Layer.
49
+ * @returns {this} The current instance for chaining.
50
+ * @throws {LazyError} If the color is not provided or invalid.
38
51
  */
39
52
  setColor(color) {
40
53
  if (!color)
@@ -42,7 +55,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
42
55
  if (!(0, utils_1.isColor)(color))
43
56
  throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
44
57
  let fill = (0, utils_1.parseColor)(color);
45
- if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
58
+ if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
46
59
  this.props.fillStyle = fill;
47
60
  }
48
61
  else {
@@ -53,13 +66,14 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
53
66
  return this;
54
67
  }
55
68
  /**
56
- * @description Sets the stroke of the layer.
57
- * @param width {number} - The `width` of the stroke.
58
- * @param cap {string} - The `cap` of the stroke.
59
- * @param join {string} - The `join` of the stroke.
60
- * @param dash {number[]} - The `dash` of the stroke.
61
- * @param dashOffset {number} - The `dashOffset` of the stroke.
62
- * @param miterLimit {number} - The `miterLimit` of the stroke.
69
+ * Sets the stroke properties of the Morph Layer.
70
+ * @param width {number} - The width of the stroke.
71
+ * @param cap {string} - The cap style of the stroke.
72
+ * @param join {string} - The join style of the stroke.
73
+ * @param dash {number[]} - The dash pattern of the stroke.
74
+ * @param dashOffset {number} - The dash offset of the stroke.
75
+ * @param miterLimit {number} - The miter limit of the stroke.
76
+ * @returns {this} The current instance for chaining.
63
77
  */
64
78
  setStroke(width, cap, join, dash, dashOffset, miterLimit) {
65
79
  this.props.stroke = {
@@ -73,13 +87,21 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
73
87
  return this;
74
88
  }
75
89
  /**
76
- * @description Sets the fills of the layer. If `true` the layer will be filled, if `false` the layer will be stroked.
77
- * @param filled {boolean} - The `filled` of the layer.
90
+ * Sets whether the Morph Layer should be filled or stroked.
91
+ * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
92
+ * @returns {this} The current instance for chaining.
78
93
  */
79
94
  setFilled(filled) {
80
95
  this.props.filled = filled;
81
96
  return this;
82
97
  }
98
+ /**
99
+ * Draws the Morph Layer on the canvas.
100
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
101
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
102
+ * @param manager {LayersManager} - The layers manager.
103
+ * @param debug {boolean} - Whether to enable debug logging.
104
+ */
83
105
  async draw(ctx, canvas, manager, debug) {
84
106
  const parcer = (0, utils_1.parser)(ctx, canvas, manager);
85
107
  const { xs, ys, w } = parcer.parseBatch({
@@ -127,12 +149,18 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
127
149
  ctx.restore();
128
150
  }
129
151
  /**
130
- * @returns {IMorphLayer}
152
+ * Converts the Morph Layer to a JSON representation.
153
+ * @returns {IMorphLayer} The JSON representation of the Morph Layer.
131
154
  */
132
155
  toJSON() {
133
156
  let data = super.toJSON();
134
- data.props = this.props;
135
- return { ...data };
157
+ let copy = { ...this.props };
158
+ for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius', 'fillStyle']) {
159
+ if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
160
+ copy[key] = copy[key].toJSON();
161
+ }
162
+ }
163
+ return { ...data, props: copy };
136
164
  }
137
165
  }
138
166
  exports.MorphLayer = MorphLayer;
@@ -0,0 +1,191 @@
1
+ import { Path2D, PathOp, FillType, StrokeOptions, DOMMatrix2DInit, SKRSContext2D, Canvas, SvgCanvas } from "@napi-rs/canvas";
2
+ import { AnyGlobalCompositeOperation, ColorType, Transform, LayerType, AnyFilter } from "../../types";
3
+ import { IBaseLayerMisc } from "./BaseLayer";
4
+ import { LayersManager } from "../managers/LayersManager";
5
+ export interface IPath2DLayer {
6
+ id: string;
7
+ type: LayerType.Path;
8
+ zIndex: number;
9
+ visible: boolean;
10
+ props: IPath2DLayerProps;
11
+ }
12
+ export interface IPath2DLayerProps {
13
+ path2D: Path2D;
14
+ /**
15
+ * The filter effects applied to the layer.
16
+ */
17
+ filter: string;
18
+ /**
19
+ * The opacity of the layer, ranging from 0 to 1.
20
+ */
21
+ opacity: number;
22
+ /**
23
+ * Whether the layer is filled.
24
+ */
25
+ filled: boolean;
26
+ /**
27
+ * The fill style (color or pattern) of the layer.
28
+ */
29
+ fillStyle: ColorType;
30
+ /**
31
+ * The transformation properties of the layer.
32
+ */
33
+ transform: Transform;
34
+ /**
35
+ * The global composite operation applied to the layer.
36
+ */
37
+ globalComposite: AnyGlobalCompositeOperation;
38
+ /**
39
+ * The stroke properties of the Path2D.
40
+ */
41
+ stroke: {
42
+ /**
43
+ * The width of the stroke.
44
+ */
45
+ width: number;
46
+ /**
47
+ * The cap style of the stroke.
48
+ */
49
+ cap: CanvasLineCap;
50
+ /**
51
+ * The join style of the stroke.
52
+ */
53
+ join: CanvasLineJoin;
54
+ /**
55
+ * The dash offset of the stroke.
56
+ */
57
+ dashOffset: number;
58
+ /**
59
+ * The dash pattern of the stroke.
60
+ */
61
+ dash: number[];
62
+ /**
63
+ * The miter limit of the stroke.
64
+ */
65
+ miterLimit: number;
66
+ };
67
+ loadFromSVG: boolean;
68
+ clipPath: boolean;
69
+ }
70
+ export declare class Path2DLayer implements IPath2DLayer {
71
+ id: string;
72
+ type: LayerType.Path;
73
+ zIndex: number;
74
+ visible: boolean;
75
+ props: IPath2DLayerProps;
76
+ constructor(props?: IPath2DLayerProps, misc?: IBaseLayerMisc);
77
+ /**
78
+ * Sets the unique identifier of the layer.
79
+ *
80
+ * @param {string} id - The unique identifier.
81
+ * @returns {this} The current instance for chaining.
82
+ */
83
+ setID(id: string): this;
84
+ /**
85
+ * Sets the visibility of the layer.
86
+ * @param visible {boolean} - The visibility state of the layer.
87
+ * @returns {this} The current instance for chaining.
88
+ */
89
+ setVisible(visible: boolean): this;
90
+ /**
91
+ * Sets the z-index of the layer.
92
+ * @param zIndex {number} - The z-index value of the layer.
93
+ * @returns {this} The current instance for chaining.
94
+ */
95
+ setZIndex(zIndex: number): this;
96
+ /**
97
+ * Sets the global composite operation for the layer.
98
+ * @param {AnyGlobalCompositeOperation} operation - The composite operation.
99
+ * @returns {this} The current instance for chaining.
100
+ */
101
+ setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
102
+ /**
103
+ * Sets the filter effects for the layer.
104
+ * @param {...AnyFilter} filter - The filter effects to apply.
105
+ * @returns {this} The current instance for chaining.
106
+ */
107
+ setFilters(...filter: AnyFilter[]): this;
108
+ /**
109
+ * Sets the transformation matrix of the layer.
110
+ * @param {DOMMatrix2DInit} matrix - The transformation matrix.
111
+ * @returns {this} The current instance for chaining.
112
+ */
113
+ setMatrix(matrix: DOMMatrix2DInit): this;
114
+ /**
115
+ * Sets the scale of the layer in the x and y directions.
116
+ * @param {number} x - The scale factor in the x direction.
117
+ * @param {number} y - The scale factor in the y direction.
118
+ * @returns {this} The current instance for chaining.
119
+ */
120
+ setScale(x: number, y: number): this;
121
+ /**
122
+ * Sets the translation of the layer in the x and y directions.
123
+ * @param {number} x - The translation in the x direction.
124
+ * @param {number} y - The translation in the y direction.
125
+ * @returns {this} The current instance for chaining.
126
+ */
127
+ setTranslate(x: number, y: number): this;
128
+ /**
129
+ * Sets the opacity of the layer.
130
+ * @param {number} opacity - The opacity value, between 0 and 1.
131
+ * @returns {this} The current instance for chaining.
132
+ */
133
+ setOpacity(opacity: number): this;
134
+ /**
135
+ * Sets the stroke properties of the Path2D Layer.
136
+ * @param width {number} - The width of the stroke.
137
+ * @param cap {string} - The cap style of the stroke.
138
+ * @param join {string} - The join style of the stroke.
139
+ * @param dash {number[]} - The dash pattern of the stroke.
140
+ * @param dashOffset {number} - The dash offset of the stroke.
141
+ * @param miterLimit {number} - The miter limit of the stroke.
142
+ * @returns {this} The current instance for chaining.
143
+ */
144
+ setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
145
+ /**
146
+ * Sets whether the Path2D Layer should be filled or stroked.
147
+ * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
148
+ * @returns {this} The current instance for chaining.
149
+ */
150
+ setFilled(filled: boolean): this;
151
+ /**
152
+ * Sets the color of the Path2D Layer.
153
+ * @param color {string} - The color of the Path2D Layer.
154
+ * @returns {this} The current instance for chaining.
155
+ * @throws {LazyError} If the color is not provided or invalid.
156
+ */
157
+ setColor(color: ColorType): this;
158
+ setPath(path: Path2D | string): this;
159
+ loadFromSVG(path: true): this;
160
+ setClipPath(clipPath: boolean): this;
161
+ toSVGString(): string;
162
+ addPath(path: Path2D, transform?: DOMMatrix2DInit | undefined): this;
163
+ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
164
+ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
165
+ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
166
+ closePath(): this;
167
+ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
168
+ lineTo(x: number, y: number): this;
169
+ moveTo(x: number, y: number): this;
170
+ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
171
+ rect(x: number, y: number, width: number, height: number): this;
172
+ stroke(stroke?: StrokeOptions): this;
173
+ op(path: Path2D, op: PathOp): this;
174
+ getFillType(): FillType;
175
+ getFillTypeString(): string;
176
+ setFillType(fillType: FillType): this;
177
+ simplify(): this;
178
+ asWinding(): this;
179
+ transform(matrix: DOMMatrix2DInit): this;
180
+ getBounds(): [left: number, top: number, right: number, bottom: number];
181
+ computeTightBounds(): [left: number, top: number, right: number, bottom: number];
182
+ trim(start: number, end: number, isComplement?: boolean): this;
183
+ equals(path: Path2DLayer): boolean;
184
+ roundRect(x: number, y: number, width: number, height: number, radius: number): this;
185
+ draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
186
+ /**
187
+ * Converts the Path2D Layer to a JSON representation.
188
+ * @returns {IPath2DLayer} The JSON representation of the Path2D Layer.
189
+ */
190
+ toJSON(): IPath2DLayer;
191
+ }