@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
@@ -1,86 +1,236 @@
1
- import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
2
- import { LayerType } from "../../types/enum";
1
+ import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, ColorType, Transform, AnyFilter, LayerType } from "../../types";
2
+ /**
3
+ * Interface representing the base structure of a layer.
4
+ */
5
+ export interface IBaseLayer {
6
+ /**
7
+ * The unique identifier of the layer.
8
+ */
9
+ id: string;
10
+ /**
11
+ * The type of the layer.
12
+ */
13
+ type: LayerType;
14
+ /**
15
+ * The z-index of the layer, determining its stacking order.
16
+ */
17
+ zIndex: number;
18
+ /**
19
+ * Whether the layer is visible.
20
+ */
21
+ visible: boolean;
22
+ /**
23
+ * The properties of the layer.
24
+ */
25
+ props: IBaseLayerProps;
26
+ }
27
+ /**
28
+ * Interface representing the properties of a base layer.
29
+ */
30
+ export interface IBaseLayerProps {
31
+ /**
32
+ * The x-coordinate of the layer.
33
+ */
34
+ x: ScaleType;
35
+ /**
36
+ * The y-coordinate of the layer.
37
+ */
38
+ y: ScaleType;
39
+ /**
40
+ * The centring type of the layer.
41
+ */
42
+ centring: AnyCentring;
43
+ /**
44
+ * The filter effects applied to the layer.
45
+ */
46
+ filter: string;
47
+ /**
48
+ * The opacity of the layer, ranging from 0 to 1.
49
+ */
50
+ opacity: number;
51
+ /**
52
+ * Whether the layer is filled.
53
+ */
54
+ filled: boolean;
55
+ /**
56
+ * The fill style (color or pattern) of the layer.
57
+ */
58
+ fillStyle: ColorType;
59
+ /**
60
+ * The shadow properties of the layer.
61
+ */
62
+ shadow: {
63
+ /**
64
+ * The color of the shadow.
65
+ */
66
+ color: string;
67
+ /**
68
+ * The blur radius of the shadow.
69
+ */
70
+ blur: number;
71
+ /**
72
+ * The horizontal offset of the shadow.
73
+ */
74
+ offsetX: number;
75
+ /**
76
+ * The vertical offset of the shadow.
77
+ */
78
+ offsetY: number;
79
+ };
80
+ /**
81
+ * The transformation properties of the layer.
82
+ */
83
+ transform: Transform;
84
+ /**
85
+ * The global composite operation applied to the layer.
86
+ */
87
+ globalComposite: AnyGlobalCompositeOperation;
88
+ }
89
+ /**
90
+ * Interface representing miscellaneous options for a base layer.
91
+ */
92
+ export interface IBaseLayerMisc {
93
+ /**
94
+ * The unique identifier of the layer (optional).
95
+ */
96
+ id?: string;
97
+ /**
98
+ * The z-index of the layer (optional).
99
+ */
100
+ zIndex?: number;
101
+ /**
102
+ * Whether the layer is visible (optional).
103
+ */
104
+ visible?: boolean;
105
+ }
106
+ /**
107
+ * Represents a base layer with generic properties and methods for managing
108
+ * its position, visibility, transformations, and other attributes.
109
+ *
110
+ * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
111
+ */
3
112
  export declare class BaseLayer<T extends IBaseLayerProps> {
113
+ /**
114
+ * The unique identifier of the layer.
115
+ * @type {string}
116
+ */
4
117
  id: string;
118
+ /**
119
+ * The type of the layer.
120
+ * @type {LayerType}
121
+ */
5
122
  type: LayerType;
123
+ /**
124
+ * The z-index of the layer, determining its stacking order.
125
+ * @type {number}
126
+ */
6
127
  zIndex: number;
128
+ /**
129
+ * The visibility of the layer.
130
+ * @type {boolean}
131
+ */
7
132
  visible: boolean;
133
+ /**
134
+ * The properties of the layer, defined by the generic type `T`.
135
+ * @type {T}
136
+ */
8
137
  props: T;
9
- constructor(type?: LayerType, props?: T);
10
138
  /**
11
- * @description Position of the layer in the 2D plane. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
12
- * @param x {ScaleType} - The `x` position of the layer
13
- * @param y {ScaleType} - The `y` position of the layer
139
+ * Constructs a new `BaseLayer` instance.
140
+ * @param {LayerType} [type] - The type of the layer.
141
+ * @param {T} [props] - The properties of the layer.
142
+ * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
143
+ */
144
+ constructor(type?: LayerType, props?: T, misc?: IBaseLayerMisc);
145
+ /**
146
+ * Sets the position of the layer in the 2D plane.
147
+ * @param {ScaleType} x - The x-coordinate of the layer.
148
+ * @param {ScaleType} y - The y-coordinate of the layer.
149
+ * @returns {this} The current instance for chaining.
14
150
  */
15
151
  setPosition(x: ScaleType, y: ScaleType): this;
16
152
  /**
17
- * @description Opacity of the layer. The value must be between `0` and `1`.
18
- * @param opacity {number} - The `opacity` of the layer
153
+ * Sets the opacity of the layer.
154
+ * @param {number} opacity - The opacity value, between 0 and 1.
155
+ * @returns {this} The current instance for chaining.
19
156
  */
20
157
  setOpacity(opacity: number): this;
21
158
  /**
22
- * @description Sets the `id` of the layer.
23
- * @param id {string} - The `id` of the layer
159
+ * Sets the unique identifier of the layer.
160
+ *
161
+ * @param {string} id - The unique identifier.
162
+ * @returns {this} The current instance for chaining.
24
163
  */
25
164
  setID(id: string): this;
26
165
  /**
27
- * @description Sets shadow of layer.
28
- * @param color {string} - The `color` of the filter
29
- * @param blur {number} - The `blur` of the filter
30
- * @param offsetX {number} - The `offsetX` of the filter
31
- * @param offsetY {number} - The `offsetY` of the filter
166
+ * Sets the shadow properties of the layer.
167
+ * @param {string} color - The color of the shadow.
168
+ * @param {number} [blur] - The blur radius of the shadow.
169
+ * @param {number} [offsetX] - The horizontal offset of the shadow.
170
+ * @param {number} [offsetY] - The vertical offset of the shadow.
171
+ * @returns {this} The current instance for chaining.
172
+ * @throws {LazyError} If the color is invalid or not provided.
32
173
  */
33
174
  setShadow(color: string, blur?: number, offsetX?: number, offsetY?: number): this;
34
175
  /**
35
- * @description Matrix of the layer in the 2D plane.
36
- * @param matrix {DOMMatrix2DInit} - The `matrix` of the layer
176
+ * Sets the transformation matrix of the layer.
177
+ * @param {DOMMatrix2DInit} matrix - The transformation matrix.
178
+ * @returns {this} The current instance for chaining.
37
179
  */
38
180
  setMatrix(matrix: DOMMatrix2DInit): this;
39
181
  /**
40
- * @description Scale of the layer in the x and y direction by the given amount from their current position.
41
- * @param x {number} - The `x` scale of the layer
42
- * @param y {number} - The `y` scale of the layer
182
+ * Sets the scale of the layer in the x and y directions.
183
+ * @param {number} x - The scale factor in the x direction.
184
+ * @param {number} y - The scale factor in the y direction.
185
+ * @returns {this} The current instance for chaining.
43
186
  */
44
187
  setScale(x: number, y: number): this;
45
188
  /**
46
- * @description Rotate of the layer in the clockwise direction by the given amount from its current position.
47
- * @param rotate {number} - The `rotate` of the layer
189
+ * Sets the rotation of the layer.
190
+ * @param {number} rotate - The rotation angle in degrees.
191
+ * @returns {this} The current instance for chaining.
48
192
  */
49
193
  setRotate(rotate: number): this;
50
194
  /**
51
- * @description Translate of the layer in the x and y direction by the given amount from their current position.
52
- * @param x {number} - The `x` translation of the layer
53
- * @param y {number} - The `y` translation of the layer
195
+ * Sets the translation of the layer in the x and y directions.
196
+ * @param {number} x - The translation in the x direction.
197
+ * @param {number} y - The translation in the y direction.
198
+ * @returns {this} The current instance for chaining.
54
199
  */
55
200
  setTranslate(x: number, y: number): this;
56
201
  /**
57
- * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
58
- * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
59
- * @param filter {string} - The `filter` of the layer. Multiple filters are supported.
202
+ * Sets the filter effects for the layer.
203
+ * @param {...AnyFilter} filter - The filter effects to apply.
204
+ * @returns {this} The current instance for chaining.
60
205
  */
61
- setFilters(...filter: string[]): this;
206
+ setFilters(...filter: AnyFilter[]): this;
62
207
  /**
63
- * @description Sets type of centring of the layer.
64
- * @param centring {AnyCentring} - The `centring` of the layer
208
+ * Sets the centring type of the layer. **Don't affect on Bezier, Line, Quadratic and Text layers**.
209
+ * @param {AnyCentring} centring - The centring type.
210
+ * @returns {this} The current instance for chaining.
65
211
  */
66
212
  setCentring(centring: AnyCentring): this;
67
213
  /**
68
- * @description Sets the visibility of the layer.
69
- * @param visible {boolean} - The `visibility` of the layer
214
+ * Sets the visibility of the layer.
215
+ * @param {boolean} visible - The visibility state.
216
+ * @returns {this} The current instance for chaining.
70
217
  */
71
218
  setVisible(visible: boolean): this;
72
219
  /**
73
- * @description Sets zIndex of the layer.
74
- * @param zIndex {number} - The `zIndex` of the layer
220
+ * Sets the z-index of the layer.
221
+ * @param {number} zIndex - The z-index value.
222
+ * @returns {this} The current instance for chaining.
75
223
  */
76
224
  setZIndex(zIndex: number): this;
77
225
  /**
78
- * @description Sets global composite operation of the layer.
79
- * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
226
+ * Sets the global composite operation for the layer.
227
+ * @param {AnyGlobalCompositeOperation} operation - The composite operation.
228
+ * @returns {this} The current instance for chaining.
80
229
  */
81
230
  setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
82
231
  /**
83
- * @returns {IBaseLayer}
232
+ * Converts the layer to a JSON representation.
233
+ * @returns {IBaseLayer} The JSON representation of the layer.
84
234
  */
85
235
  toJSON(): IBaseLayer;
86
236
  }
@@ -1,20 +1,52 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.BaseLayer = void 0;
4
- const enum_1 = require("../../types/enum");
4
+ const types_1 = require("../../types");
5
5
  const utils_1 = require("../../utils/utils");
6
6
  const LazyUtil_1 = require("../../utils/LazyUtil");
7
+ /**
8
+ * Represents a base layer with generic properties and methods for managing
9
+ * its position, visibility, transformations, and other attributes.
10
+ *
11
+ * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
12
+ */
7
13
  class BaseLayer {
14
+ /**
15
+ * The unique identifier of the layer.
16
+ * @type {string}
17
+ */
8
18
  id;
19
+ /**
20
+ * The type of the layer.
21
+ * @type {LayerType}
22
+ */
9
23
  type;
24
+ /**
25
+ * The z-index of the layer, determining its stacking order.
26
+ * @type {number}
27
+ */
10
28
  zIndex;
29
+ /**
30
+ * The visibility of the layer.
31
+ * @type {boolean}
32
+ */
11
33
  visible;
34
+ /**
35
+ * The properties of the layer, defined by the generic type `T`.
36
+ * @type {T}
37
+ */
12
38
  props;
13
- constructor(type, props) {
14
- this.id = (0, utils_1.generateID)(type ? type : enum_1.LayerType.Base);
15
- this.type = type ? type : enum_1.LayerType.Base;
16
- this.zIndex = 1;
17
- this.visible = true;
39
+ /**
40
+ * Constructs a new `BaseLayer` instance.
41
+ * @param {LayerType} [type] - The type of the layer.
42
+ * @param {T} [props] - The properties of the layer.
43
+ * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
44
+ */
45
+ constructor(type, props, misc) {
46
+ this.id = misc?.id || (0, utils_1.generateID)(type ? type : types_1.LayerType.Base);
47
+ this.type = type ? type : types_1.LayerType.Base;
48
+ this.zIndex = misc?.zIndex || 1;
49
+ this.visible = misc?.visible || true;
18
50
  this.props = props ? props : {};
19
51
  if (!this.props.x)
20
52
  this.props.x = 0;
@@ -23,14 +55,15 @@ class BaseLayer {
23
55
  if (!this.props.opacity)
24
56
  this.props.opacity = 1;
25
57
  if (!this.props.centring)
26
- this.props.centring = enum_1.Centring.Center;
58
+ this.props.centring = types_1.Centring.Center;
27
59
  if (!this.props.transform)
28
60
  this.props.transform = {};
29
61
  }
30
62
  /**
31
- * @description Position of the layer in the 2D plane. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
32
- * @param x {ScaleType} - The `x` position of the layer
33
- * @param y {ScaleType} - The `y` position of the layer
63
+ * Sets the position of the layer in the 2D plane.
64
+ * @param {ScaleType} x - The x-coordinate of the layer.
65
+ * @param {ScaleType} y - The y-coordinate of the layer.
66
+ * @returns {this} The current instance for chaining.
34
67
  */
35
68
  setPosition(x, y) {
36
69
  this.props.x = x;
@@ -38,27 +71,32 @@ class BaseLayer {
38
71
  return this;
39
72
  }
40
73
  /**
41
- * @description Opacity of the layer. The value must be between `0` and `1`.
42
- * @param opacity {number} - The `opacity` of the layer
74
+ * Sets the opacity of the layer.
75
+ * @param {number} opacity - The opacity value, between 0 and 1.
76
+ * @returns {this} The current instance for chaining.
43
77
  */
44
78
  setOpacity(opacity) {
45
79
  this.props.opacity = opacity;
46
80
  return this;
47
81
  }
48
82
  /**
49
- * @description Sets the `id` of the layer.
50
- * @param id {string} - The `id` of the layer
83
+ * Sets the unique identifier of the layer.
84
+ *
85
+ * @param {string} id - The unique identifier.
86
+ * @returns {this} The current instance for chaining.
51
87
  */
52
88
  setID(id) {
53
89
  this.id = id;
54
90
  return this;
55
91
  }
56
92
  /**
57
- * @description Sets shadow of layer.
58
- * @param color {string} - The `color` of the filter
59
- * @param blur {number} - The `blur` of the filter
60
- * @param offsetX {number} - The `offsetX` of the filter
61
- * @param offsetY {number} - The `offsetY` of the filter
93
+ * Sets the shadow properties of the layer.
94
+ * @param {string} color - The color of the shadow.
95
+ * @param {number} [blur] - The blur radius of the shadow.
96
+ * @param {number} [offsetX] - The horizontal offset of the shadow.
97
+ * @param {number} [offsetY] - The vertical offset of the shadow.
98
+ * @returns {this} The current instance for chaining.
99
+ * @throws {LazyError} If the color is invalid or not provided.
62
100
  */
63
101
  setShadow(color, blur, offsetX, offsetY) {
64
102
  if (!color)
@@ -75,82 +113,91 @@ class BaseLayer {
75
113
  return this;
76
114
  }
77
115
  /**
78
- * @description Matrix of the layer in the 2D plane.
79
- * @param matrix {DOMMatrix2DInit} - The `matrix` of the layer
116
+ * Sets the transformation matrix of the layer.
117
+ * @param {DOMMatrix2DInit} matrix - The transformation matrix.
118
+ * @returns {this} The current instance for chaining.
80
119
  */
81
120
  setMatrix(matrix) {
82
121
  this.props.transform = { ...this.props.transform, matrix };
83
122
  return this;
84
123
  }
85
124
  /**
86
- * @description Scale of the layer in the x and y direction by the given amount from their current position.
87
- * @param x {number} - The `x` scale of the layer
88
- * @param y {number} - The `y` scale of the layer
125
+ * Sets the scale of the layer in the x and y directions.
126
+ * @param {number} x - The scale factor in the x direction.
127
+ * @param {number} y - The scale factor in the y direction.
128
+ * @returns {this} The current instance for chaining.
89
129
  */
90
130
  setScale(x, y) {
91
131
  this.props.transform = { ...this.props.transform, scale: { x, y } };
92
132
  return this;
93
133
  }
94
134
  /**
95
- * @description Rotate of the layer in the clockwise direction by the given amount from its current position.
96
- * @param rotate {number} - The `rotate` of the layer
135
+ * Sets the rotation of the layer.
136
+ * @param {number} rotate - The rotation angle in degrees.
137
+ * @returns {this} The current instance for chaining.
97
138
  */
98
139
  setRotate(rotate) {
99
140
  this.props.transform = { ...this.props.transform, rotate };
100
141
  return this;
101
142
  }
102
143
  /**
103
- * @description Translate of the layer in the x and y direction by the given amount from their current position.
104
- * @param x {number} - The `x` translation of the layer
105
- * @param y {number} - The `y` translation of the layer
144
+ * Sets the translation of the layer in the x and y directions.
145
+ * @param {number} x - The translation in the x direction.
146
+ * @param {number} y - The translation in the y direction.
147
+ * @returns {this} The current instance for chaining.
106
148
  */
107
149
  setTranslate(x, y) {
108
150
  this.props.transform = { ...this.props.transform, translate: { x, y } };
109
151
  return this;
110
152
  }
111
153
  /**
112
- * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
113
- * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
114
- * @param filter {string} - The `filter` of the layer. Multiple filters are supported.
154
+ * Sets the filter effects for the layer.
155
+ * @param {...AnyFilter} filter - The filter effects to apply.
156
+ * @returns {this} The current instance for chaining.
115
157
  */
116
158
  setFilters(...filter) {
117
159
  this.props.filter = filter.join(' ');
118
160
  return this;
119
161
  }
120
162
  /**
121
- * @description Sets type of centring of the layer.
122
- * @param centring {AnyCentring} - The `centring` of the layer
163
+ * Sets the centring type of the layer. **Don't affect on Bezier, Line, Quadratic and Text layers**.
164
+ * @param {AnyCentring} centring - The centring type.
165
+ * @returns {this} The current instance for chaining.
123
166
  */
124
167
  setCentring(centring) {
125
168
  this.props.centring = centring;
126
169
  return this;
127
170
  }
128
171
  /**
129
- * @description Sets the visibility of the layer.
130
- * @param visible {boolean} - The `visibility` of the layer
172
+ * Sets the visibility of the layer.
173
+ * @param {boolean} visible - The visibility state.
174
+ * @returns {this} The current instance for chaining.
131
175
  */
132
176
  setVisible(visible) {
133
177
  this.visible = visible;
134
178
  return this;
135
179
  }
136
180
  /**
137
- * @description Sets zIndex of the layer.
138
- * @param zIndex {number} - The `zIndex` of the layer
181
+ * Sets the z-index of the layer.
182
+ * @param {number} zIndex - The z-index value.
183
+ * @returns {this} The current instance for chaining.
139
184
  */
140
185
  setZIndex(zIndex) {
141
186
  this.zIndex = zIndex;
142
187
  return this;
143
188
  }
144
189
  /**
145
- * @description Sets global composite operation of the layer.
146
- * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
190
+ * Sets the global composite operation for the layer.
191
+ * @param {AnyGlobalCompositeOperation} operation - The composite operation.
192
+ * @returns {this} The current instance for chaining.
147
193
  */
148
194
  setGlobalCompositeOperation(operation) {
149
195
  this.props.globalComposite = operation;
150
196
  return this;
151
197
  }
152
198
  /**
153
- * @returns {IBaseLayer}
199
+ * Converts the layer to a JSON representation.
200
+ * @returns {IBaseLayer} The JSON representation of the layer.
154
201
  */
155
202
  toJSON() {
156
203
  return {
@@ -1,40 +1,119 @@
1
- import { BaseLayer } from "./BaseLayer";
2
- import { ColorType, IBezierLayer, IBezierLayerProps, ScaleType } from "../../types";
3
- import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
1
+ import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
2
+ import { ColorType, Point, 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 Bezier layer.
7
+ */
8
+ export interface IBezierLayer extends IBaseLayer {
9
+ /**
10
+ * The type of the layer, which is a Bézier curve.
11
+ */
12
+ type: LayerType.BezierCurve;
13
+ /**
14
+ * The properties specific to the Bezier layer.
15
+ */
16
+ props: IBezierLayerProps;
17
+ }
18
+ /**
19
+ * Interface representing the properties of a Bezier layer.
20
+ */
21
+ export interface IBezierLayerProps extends IBaseLayerProps {
22
+ /**
23
+ * The control points of the Bézier curve.
24
+ */
25
+ controlPoints: Array<Point>;
26
+ /**
27
+ * The end point of the Bézier curve.
28
+ */
29
+ endPoint: Point;
30
+ /**
31
+ * The stroke properties of the Bézier curve.
32
+ */
33
+ stroke: {
34
+ /**
35
+ * The width of the stroke.
36
+ */
37
+ width: number;
38
+ /**
39
+ * The cap style of the stroke.
40
+ */
41
+ cap: CanvasLineCap;
42
+ /**
43
+ * The join style of the stroke.
44
+ */
45
+ join: CanvasLineJoin;
46
+ /**
47
+ * The dash offset of the stroke.
48
+ */
49
+ dashOffset: number;
50
+ /**
51
+ * The dash pattern of the stroke.
52
+ */
53
+ dash: number[];
54
+ /**
55
+ * The miter limit of the stroke.
56
+ */
57
+ miterLimit: number;
58
+ };
59
+ }
60
+ /**
61
+ * Class representing a Bezier layer, extending the BaseLayer class.
62
+ */
5
63
  export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
64
+ /**
65
+ * The properties of the Bezier layer.
66
+ */
6
67
  props: IBezierLayerProps;
7
- constructor(props?: IBezierLayerProps);
8
68
  /**
9
- * @description Sets the control points of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
10
- * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The `controlPoints` of the bezier layer.
69
+ * Constructs a new BezierLayer instance.
70
+ * @param props {IBezierLayerProps} - The properties of the Bezier layer.
71
+ * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
72
+ */
73
+ constructor(props?: IBezierLayerProps, misc?: IBaseLayerMisc);
74
+ /**
75
+ * Sets the control points of the Bezier layer.
76
+ * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The control points of the Bezier layer.
77
+ * @returns {this} The current instance for chaining.
78
+ * @throws {LazyError} If the number of control points is not exactly 2.
11
79
  */
12
80
  setControlPoints(...controlPoints: {
13
81
  x: ScaleType;
14
82
  y: ScaleType;
15
83
  }[]): this;
16
84
  /**
17
- * @description Sets the end point of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
18
- * @param x {ScaleType} - The end `x` of the bezier layer.
19
- * @param y {ScaleType} - The end `y` of the bezier layer.
85
+ * Sets the end position of the Bezier layer.
86
+ * @param x {ScaleType} - The x-coordinate of the end point.
87
+ * @param y {ScaleType} - The y-coordinate of the end point.
88
+ * @returns {this} The current instance for chaining.
20
89
  */
21
90
  setEndPosition(x: ScaleType, y: ScaleType): this;
22
91
  /**
23
- * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
24
- * @param color {string} - The `color` of the layer.
92
+ * Sets the color of the Bezier layer.
93
+ * @param color {ColorType} - The color of the layer.
94
+ * @returns {this} The current instance for chaining.
95
+ * @throws {LazyError} If the color is not provided or invalid.
25
96
  */
26
97
  setColor(color: ColorType): this;
27
98
  /**
28
- * @description Sets the stroke of the layer.
29
- * @param width {number} - The `width` of the stroke.
30
- * @param cap {string} - The `cap` of the stroke.
31
- * @param join {string} - The `join` of the stroke.
32
- * @param dash {number[]} - The `dash` of the stroke.
33
- * @param dashOffset {number} - The `dashOffset` of the stroke.
34
- * @param miterLimit {number} - The `miterLimit` of the stroke.
99
+ * Sets the stroke properties of the Bezier 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.
35
107
  */
36
108
  setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
37
- getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
109
+ /**
110
+ * Calculates the bounding box of the Bezier layer.
111
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
112
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
113
+ * @param manager {LayersManager} - The layers manager.
114
+ * @returns {Object} The bounding box details including max, min, center, width, and height.
115
+ */
116
+ getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
38
117
  max: {
39
118
  x: number;
40
119
  y: number;
@@ -50,9 +129,17 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
50
129
  width: number;
51
130
  height: number;
52
131
  };
53
- draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
54
132
  /**
55
- * @returns {IBezierLayer}
133
+ * Draws the Bezier layer on the canvas.
134
+ * @param ctx {SKRSContext2D} - The canvas rendering context.
135
+ * @param canvas {Canvas | SvgCanvas} - The canvas instance.
136
+ * @param manager {LayersManager} - The layers manager.
137
+ * @param debug {boolean} - Whether to enable debug logging.
138
+ */
139
+ draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
140
+ /**
141
+ * Converts the Bezier layer to a JSON representation.
142
+ * @returns {IBezierLayer} The JSON representation of the Bezier layer.
56
143
  */
57
144
  toJSON(): IBezierLayer;
58
145
  }