@nmmty/lazycanvas 0.6.0 → 0.6.2
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.
- package/dist/helpers/index.d.ts +3 -0
- package/dist/helpers/index.js +19 -0
- package/dist/index.d.ts +5 -12
- package/dist/index.js +5 -31
- package/dist/structures/LazyCanvas.d.ts +12 -16
- package/dist/structures/LazyCanvas.js +24 -27
- package/dist/structures/components/BaseLayer.d.ts +17 -25
- package/dist/structures/components/BaseLayer.js +16 -18
- package/dist/structures/components/BezierLayer.d.ts +29 -21
- package/dist/structures/components/BezierLayer.js +22 -20
- package/dist/structures/components/ClearLayer.d.ts +15 -15
- package/dist/structures/components/ClearLayer.js +14 -14
- package/dist/structures/components/Group.d.ts +10 -11
- package/dist/structures/components/Group.js +9 -10
- package/dist/structures/components/ImageLayer.d.ts +15 -15
- package/dist/structures/components/ImageLayer.js +11 -11
- package/dist/structures/components/LineLayer.d.ts +28 -20
- package/dist/structures/components/LineLayer.js +21 -19
- package/dist/structures/components/MorphLayer.d.ts +29 -21
- package/dist/structures/components/MorphLayer.js +19 -17
- package/dist/structures/components/Path2DLayer.d.ts +21 -72
- package/dist/structures/components/Path2DLayer.js +4 -108
- package/dist/structures/components/QuadraticLayer.d.ts +30 -22
- package/dist/structures/components/QuadraticLayer.js +23 -21
- package/dist/structures/components/TextLayer.d.ts +54 -41
- package/dist/structures/components/TextLayer.js +165 -69
- package/dist/structures/helpers/Exporter.d.ts +9 -9
- package/dist/structures/helpers/Exporter.js +9 -9
- package/dist/structures/helpers/Font.d.ts +4 -4
- package/dist/structures/helpers/Font.js +4 -4
- package/dist/structures/helpers/Gradient.d.ts +15 -10
- package/dist/structures/helpers/Gradient.js +14 -9
- package/dist/structures/helpers/Link.d.ts +5 -5
- package/dist/structures/helpers/Link.js +5 -5
- package/dist/structures/helpers/Pattern.d.ts +5 -5
- package/dist/structures/helpers/Pattern.js +5 -5
- package/dist/structures/helpers/index.d.ts +7 -7
- package/dist/structures/helpers/readers/JSONReader.d.ts +12 -12
- package/dist/structures/helpers/readers/JSONReader.js +12 -12
- package/dist/structures/helpers/readers/YAMLReader.d.ts +4 -4
- package/dist/structures/helpers/readers/YAMLReader.js +4 -4
- package/dist/structures/managers/AnimationManager.d.ts +11 -11
- package/dist/structures/managers/AnimationManager.js +11 -11
- package/dist/structures/managers/FontsManager.d.ts +14 -15
- package/dist/structures/managers/FontsManager.js +14 -15
- package/dist/structures/managers/LayersManager.d.ts +15 -15
- package/dist/structures/managers/LayersManager.js +19 -19
- package/dist/structures/managers/PluginManager.d.ts +11 -9
- package/dist/structures/managers/PluginManager.js +9 -8
- package/dist/structures/managers/RenderManager.d.ts +10 -10
- package/dist/structures/managers/RenderManager.js +10 -10
- package/dist/structures/managers/index.d.ts +5 -0
- package/dist/structures/managers/index.js +21 -0
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.js +0 -1
- package/dist/types/types.d.ts +7 -1
- package/dist/utils/utils.d.ts +5 -5
- package/dist/utils/utils.js +8 -2
- package/package.json +1 -2
|
@@ -15,8 +15,8 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
15
15
|
props;
|
|
16
16
|
/**
|
|
17
17
|
* Constructs a new LineLayer instance.
|
|
18
|
-
* @param
|
|
19
|
-
* @param
|
|
18
|
+
* @param {ILineLayerProps} [props] - The properties of the Line Layer.
|
|
19
|
+
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
|
|
20
20
|
*/
|
|
21
21
|
constructor(props, misc) {
|
|
22
22
|
super(types_1.LayerType.Line, props || {}, misc);
|
|
@@ -25,8 +25,8 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
27
|
* Sets the end position of the line layer.
|
|
28
|
-
* @param
|
|
29
|
-
* @param
|
|
28
|
+
* @param {ScaleType} [x] - The x-coordinate of the end point.
|
|
29
|
+
* @param {ScaleType} [y] - The y-coordinate of the end point.
|
|
30
30
|
* @returns {this} The current instance for chaining.
|
|
31
31
|
*/
|
|
32
32
|
setEndPosition(x, y) {
|
|
@@ -35,7 +35,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
37
|
* Sets the color of the line layer.
|
|
38
|
-
* @param
|
|
38
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
39
39
|
* @returns {this} The current instance for chaining.
|
|
40
40
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
41
41
|
*/
|
|
@@ -49,12 +49,12 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
49
49
|
}
|
|
50
50
|
/**
|
|
51
51
|
* Sets the stroke properties of the line layer.
|
|
52
|
-
* @param
|
|
53
|
-
* @param
|
|
54
|
-
* @param
|
|
55
|
-
* @param
|
|
56
|
-
* @param
|
|
57
|
-
* @param
|
|
52
|
+
* @param {number} [width] - The width of the stroke.
|
|
53
|
+
* @param {string} [cap] - The cap style of the stroke.
|
|
54
|
+
* @param {string} [join] - The join style of the stroke.
|
|
55
|
+
* @param {number[]} [dash] - The dash pattern of the stroke.
|
|
56
|
+
* @param {number} [dashOffset] - The dash offset of the stroke.
|
|
57
|
+
* @param {number} [miterLimit] - The miter limit of the stroke.
|
|
58
58
|
* @returns {this} The current instance for chaining.
|
|
59
59
|
*/
|
|
60
60
|
setStroke(width, cap, join, dash, dashOffset, miterLimit) {
|
|
@@ -70,9 +70,9 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
72
|
* Calculates the bounding box of the line layer.
|
|
73
|
-
* @param
|
|
74
|
-
* @param
|
|
75
|
-
* @param
|
|
73
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
74
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
75
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
76
76
|
* @returns {Object} The bounding box details including start and end points, width, and height.
|
|
77
77
|
*/
|
|
78
78
|
getBoundingBox(ctx, canvas, manager) {
|
|
@@ -89,10 +89,10 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
89
89
|
}
|
|
90
90
|
/**
|
|
91
91
|
* Draws the line layer on the canvas.
|
|
92
|
-
* @param
|
|
93
|
-
* @param
|
|
94
|
-
* @param
|
|
95
|
-
* @param
|
|
92
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
93
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
94
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
95
|
+
* @param {boolean} [debug] - Whether to enable debug logging.
|
|
96
96
|
*/
|
|
97
97
|
async draw(ctx, canvas, manager, debug) {
|
|
98
98
|
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
|
|
@@ -142,12 +142,14 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
142
142
|
}
|
|
143
143
|
/**
|
|
144
144
|
* Validates the properties of the Line Layer.
|
|
145
|
-
* @param
|
|
145
|
+
* @param {ILineLayerProps} [data] - The properties to validate.
|
|
146
146
|
* @returns {ILineLayerProps} The validated properties.
|
|
147
147
|
*/
|
|
148
148
|
validateProps(data) {
|
|
149
149
|
return {
|
|
150
150
|
...super.validateProps(data),
|
|
151
|
+
filled: data.filled || false,
|
|
152
|
+
fillStyle: data.fillStyle || '#000000',
|
|
151
153
|
centring: data.centring || types_1.Centring.None,
|
|
152
154
|
endPoint: {
|
|
153
155
|
x: data.endPoint?.x || 0,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
|
|
2
|
-
import { ColorType, ScaleType, LayerType,
|
|
2
|
+
import { ColorType, ScaleType, LayerType, RadiusCorner } from "../../types";
|
|
3
3
|
import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
|
|
4
|
-
import { LayersManager } from "../managers
|
|
4
|
+
import { LayersManager } from "../managers";
|
|
5
5
|
/**
|
|
6
6
|
* Interface representing a Morph Layer.
|
|
7
7
|
*/
|
|
@@ -35,9 +35,17 @@ export interface IMorphLayerProps extends IBaseLayerProps {
|
|
|
35
35
|
* The radius of the Morph Layer.
|
|
36
36
|
*/
|
|
37
37
|
radius: {
|
|
38
|
-
[corner in
|
|
38
|
+
[corner in RadiusCorner]?: ScaleType;
|
|
39
39
|
};
|
|
40
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* Whether the layer is filled.
|
|
43
|
+
*/
|
|
44
|
+
filled: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* The fill style (color or pattern) of the layer.
|
|
47
|
+
*/
|
|
48
|
+
fillStyle: ColorType;
|
|
41
49
|
/**
|
|
42
50
|
* The stroke properties of the morph.
|
|
43
51
|
*/
|
|
@@ -78,44 +86,44 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
|
|
|
78
86
|
props: IMorphLayerProps;
|
|
79
87
|
/**
|
|
80
88
|
* Constructs a new MorphLayer instance.
|
|
81
|
-
* @param
|
|
82
|
-
* @param
|
|
89
|
+
* @param {IMorphLayerProps} [props] - The properties of the Morph Layer.
|
|
90
|
+
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
|
|
83
91
|
*/
|
|
84
92
|
constructor(props?: IMorphLayerProps, misc?: IBaseLayerMisc);
|
|
85
93
|
/**
|
|
86
94
|
* Sets the size of the Morph Layer.
|
|
87
|
-
* @param
|
|
88
|
-
* @param
|
|
89
|
-
* @param
|
|
95
|
+
* @param {ScaleType} [width] - The width of the Morph Layer.
|
|
96
|
+
* @param {ScaleType} [height] - The height of the Morph Layer.
|
|
97
|
+
* @param {{ [corner in radiusCorner]?: ScaleType }} [radius] - The radius of the Morph Layer (optional).
|
|
90
98
|
* @returns {this} The current instance for chaining.
|
|
91
99
|
*/
|
|
92
100
|
setSize(width: ScaleType, height: ScaleType, radius?: {
|
|
93
|
-
[corner in
|
|
101
|
+
[corner in RadiusCorner]?: ScaleType;
|
|
94
102
|
}): this;
|
|
95
103
|
/**
|
|
96
104
|
* Sets the color of the Morph Layer.
|
|
97
|
-
* @param
|
|
105
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
98
106
|
* @returns {this} The current instance for chaining.
|
|
99
107
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
100
108
|
*/
|
|
101
109
|
setColor(color: ColorType): this;
|
|
102
110
|
/**
|
|
103
111
|
* Sets the stroke properties of the Morph Layer.
|
|
104
|
-
* @param
|
|
105
|
-
* @param
|
|
106
|
-
* @param
|
|
107
|
-
* @param
|
|
108
|
-
* @param
|
|
109
|
-
* @param
|
|
112
|
+
* @param {number} [width] - The width of the stroke.
|
|
113
|
+
* @param {string} [cap] - The cap style of the stroke.
|
|
114
|
+
* @param {string} [join] - The join style of the stroke.
|
|
115
|
+
* @param {number[]} [dash] - The dash pattern of the stroke.
|
|
116
|
+
* @param {number} [dashOffset] - The dash offset of the stroke.
|
|
117
|
+
* @param {number} [miterLimit] - The miter limit of the stroke.
|
|
110
118
|
* @returns {this} The current instance for chaining.
|
|
111
119
|
*/
|
|
112
120
|
setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
|
|
113
121
|
/**
|
|
114
122
|
* Draws the Morph Layer on the canvas.
|
|
115
|
-
* @param
|
|
116
|
-
* @param
|
|
117
|
-
* @param
|
|
118
|
-
* @param
|
|
123
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
124
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
125
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
126
|
+
* @param {boolean} [debug] - Whether to enable debug logging.
|
|
119
127
|
*/
|
|
120
128
|
draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
|
|
121
129
|
/**
|
|
@@ -125,7 +133,7 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
|
|
|
125
133
|
toJSON(): IMorphLayer;
|
|
126
134
|
/**
|
|
127
135
|
* Validates the properties of the Morph Layer.
|
|
128
|
-
* @param
|
|
136
|
+
* @param {IMorphLayerProps} [data] - The properties to validate.
|
|
129
137
|
* @returns {IMorphLayerProps} The validated properties.
|
|
130
138
|
*/
|
|
131
139
|
protected validateProps(data: IMorphLayerProps): IMorphLayerProps;
|
|
@@ -16,8 +16,8 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
16
16
|
props;
|
|
17
17
|
/**
|
|
18
18
|
* Constructs a new MorphLayer instance.
|
|
19
|
-
* @param
|
|
20
|
-
* @param
|
|
19
|
+
* @param {IMorphLayerProps} [props] - The properties of the Morph Layer.
|
|
20
|
+
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
|
|
21
21
|
*/
|
|
22
22
|
constructor(props, misc) {
|
|
23
23
|
super(types_1.LayerType.Morph, props || {}, misc);
|
|
@@ -26,9 +26,9 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Sets the size of the Morph Layer.
|
|
29
|
-
* @param
|
|
30
|
-
* @param
|
|
31
|
-
* @param
|
|
29
|
+
* @param {ScaleType} [width] - The width of the Morph Layer.
|
|
30
|
+
* @param {ScaleType} [height] - The height of the Morph Layer.
|
|
31
|
+
* @param {{ [corner in radiusCorner]?: ScaleType }} [radius] - The radius of the Morph Layer (optional).
|
|
32
32
|
* @returns {this} The current instance for chaining.
|
|
33
33
|
*/
|
|
34
34
|
setSize(width, height, radius) {
|
|
@@ -41,7 +41,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
41
41
|
}
|
|
42
42
|
/**
|
|
43
43
|
* Sets the color of the Morph Layer.
|
|
44
|
-
* @param
|
|
44
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
45
45
|
* @returns {this} The current instance for chaining.
|
|
46
46
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
47
47
|
*/
|
|
@@ -55,12 +55,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
55
55
|
}
|
|
56
56
|
/**
|
|
57
57
|
* Sets the stroke properties of the Morph Layer.
|
|
58
|
-
* @param
|
|
59
|
-
* @param
|
|
60
|
-
* @param
|
|
61
|
-
* @param
|
|
62
|
-
* @param
|
|
63
|
-
* @param
|
|
58
|
+
* @param {number} [width] - The width of the stroke.
|
|
59
|
+
* @param {string} [cap] - The cap style of the stroke.
|
|
60
|
+
* @param {string} [join] - The join style of the stroke.
|
|
61
|
+
* @param {number[]} [dash] - The dash pattern of the stroke.
|
|
62
|
+
* @param {number} [dashOffset] - The dash offset of the stroke.
|
|
63
|
+
* @param {number} [miterLimit] - The miter limit of the stroke.
|
|
64
64
|
* @returns {this} The current instance for chaining.
|
|
65
65
|
*/
|
|
66
66
|
setStroke(width, cap, join, dash, dashOffset, miterLimit) {
|
|
@@ -77,10 +77,10 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
79
|
* Draws the Morph Layer on the canvas.
|
|
80
|
-
* @param
|
|
81
|
-
* @param
|
|
82
|
-
* @param
|
|
83
|
-
* @param
|
|
80
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
81
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
82
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
83
|
+
* @param {boolean} [debug] - Whether to enable debug logging.
|
|
84
84
|
*/
|
|
85
85
|
async draw(ctx, canvas, manager, debug) {
|
|
86
86
|
const parcer = (0, utils_1.parser)(ctx, canvas, manager);
|
|
@@ -150,12 +150,14 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
150
150
|
}
|
|
151
151
|
/**
|
|
152
152
|
* Validates the properties of the Morph Layer.
|
|
153
|
-
* @param
|
|
153
|
+
* @param {IMorphLayerProps} [data] - The properties to validate.
|
|
154
154
|
* @returns {IMorphLayerProps} The validated properties.
|
|
155
155
|
*/
|
|
156
156
|
validateProps(data) {
|
|
157
157
|
return {
|
|
158
158
|
...super.validateProps(data),
|
|
159
|
+
filled: data.filled || true,
|
|
160
|
+
fillStyle: data.fillStyle || '#000000',
|
|
159
161
|
size: {
|
|
160
162
|
width: data.size?.width || 100,
|
|
161
163
|
height: data.size?.height || 100,
|
|
@@ -1,13 +1,30 @@
|
|
|
1
1
|
import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, StrokeOptions, SvgCanvas } from "@napi-rs/canvas";
|
|
2
|
-
import {
|
|
2
|
+
import { ColorType, LayerType } from "../../types";
|
|
3
3
|
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
|
|
4
|
-
import { LayersManager } from "../managers
|
|
4
|
+
import { LayersManager } from "../managers";
|
|
5
5
|
export interface IPath2DLayer extends IBaseLayer {
|
|
6
|
+
/**
|
|
7
|
+
* The type of the layer, which is `Path`.
|
|
8
|
+
*/
|
|
6
9
|
type: LayerType.Path;
|
|
10
|
+
/**
|
|
11
|
+
* The properties specific to the Path2D Layer.
|
|
12
|
+
*/
|
|
7
13
|
props: IPath2DLayerProps;
|
|
8
14
|
}
|
|
9
15
|
export interface IPath2DLayerProps extends IBaseLayerProps {
|
|
16
|
+
/**
|
|
17
|
+
* The Path2D object representing the shape of the layer.
|
|
18
|
+
*/
|
|
10
19
|
path2D: Path2D;
|
|
20
|
+
/**
|
|
21
|
+
* Whether the layer is filled.
|
|
22
|
+
*/
|
|
23
|
+
filled: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The fill style (color or pattern) of the layer.
|
|
26
|
+
*/
|
|
27
|
+
fillStyle: ColorType;
|
|
11
28
|
/**
|
|
12
29
|
* The stroke properties of the Path2D.
|
|
13
30
|
*/
|
|
@@ -47,77 +64,9 @@ export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
|
|
|
47
64
|
visible: boolean;
|
|
48
65
|
props: IPath2DLayerProps;
|
|
49
66
|
constructor(props?: IPath2DLayerProps, misc?: IBaseLayerMisc);
|
|
50
|
-
/**
|
|
51
|
-
* Sets the unique identifier of the layer.
|
|
52
|
-
*
|
|
53
|
-
* @param {string} id - The unique identifier.
|
|
54
|
-
* @returns {this} The current instance for chaining.
|
|
55
|
-
*/
|
|
56
|
-
setID(id: string): this;
|
|
57
|
-
/**
|
|
58
|
-
* Sets the visibility of the layer.
|
|
59
|
-
* @param visible {boolean} - The visibility state of the layer.
|
|
60
|
-
* @returns {this} The current instance for chaining.
|
|
61
|
-
*/
|
|
62
|
-
setVisible(visible: boolean): this;
|
|
63
|
-
/**
|
|
64
|
-
* Sets the z-index of the layer.
|
|
65
|
-
* @param zIndex {number} - The z-index value of the layer.
|
|
66
|
-
* @returns {this} The current instance for chaining.
|
|
67
|
-
*/
|
|
68
|
-
setZIndex(zIndex: number): this;
|
|
69
|
-
/**
|
|
70
|
-
* Sets the global composite operation for the layer.
|
|
71
|
-
* @param {AnyGlobalCompositeOperation} operation - The composite operation.
|
|
72
|
-
* @returns {this} The current instance for chaining.
|
|
73
|
-
*/
|
|
74
|
-
setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
|
|
75
|
-
/**
|
|
76
|
-
* Sets the filter effects for the layer.
|
|
77
|
-
* @param {...AnyFilter} filter - The filter effects to apply.
|
|
78
|
-
* @returns {this} The current instance for chaining.
|
|
79
|
-
*/
|
|
80
|
-
setFilters(...filter: AnyFilter[]): this;
|
|
81
|
-
/**
|
|
82
|
-
* Sets the transformation matrix of the layer.
|
|
83
|
-
* @param {DOMMatrix2DInit} matrix - The transformation matrix.
|
|
84
|
-
* @returns {this} The current instance for chaining.
|
|
85
|
-
*/
|
|
86
|
-
setMatrix(matrix: DOMMatrix2DInit): this;
|
|
87
|
-
/**
|
|
88
|
-
* Sets the scale of the layer in the x and y directions.
|
|
89
|
-
* @param {number} x - The scale factor in the x direction.
|
|
90
|
-
* @param {number} y - The scale factor in the y direction.
|
|
91
|
-
* @returns {this} The current instance for chaining.
|
|
92
|
-
*/
|
|
93
|
-
setScale(x: number, y: number): this;
|
|
94
|
-
/**
|
|
95
|
-
* Sets the translation of the layer in the x and y directions.
|
|
96
|
-
* @param {number} x - The translation in the x direction.
|
|
97
|
-
* @param {number} y - The translation in the y direction.
|
|
98
|
-
* @returns {this} The current instance for chaining.
|
|
99
|
-
*/
|
|
100
|
-
setTranslate(x: number, y: number): this;
|
|
101
|
-
/**
|
|
102
|
-
* Sets the opacity of the layer.
|
|
103
|
-
* @param {number} opacity - The opacity value, between 0 and 1.
|
|
104
|
-
* @returns {this} The current instance for chaining.
|
|
105
|
-
*/
|
|
106
|
-
setOpacity(opacity: number): this;
|
|
107
|
-
/**
|
|
108
|
-
* Sets the stroke properties of the Path2D Layer.
|
|
109
|
-
* @param width {number} - The width of the stroke.
|
|
110
|
-
* @param cap {string} - The cap style of the stroke.
|
|
111
|
-
* @param join {string} - The join style of the stroke.
|
|
112
|
-
* @param dash {number[]} - The dash pattern of the stroke.
|
|
113
|
-
* @param dashOffset {number} - The dash offset of the stroke.
|
|
114
|
-
* @param miterLimit {number} - The miter limit of the stroke.
|
|
115
|
-
* @returns {this} The current instance for chaining.
|
|
116
|
-
*/
|
|
117
|
-
setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
|
|
118
67
|
/**
|
|
119
68
|
* Sets the color of the Path2D Layer.
|
|
120
|
-
* @param
|
|
69
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
121
70
|
* @returns {this} The current instance for chaining.
|
|
122
71
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
123
72
|
*/
|
|
@@ -157,7 +106,7 @@ export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
|
|
|
157
106
|
toJSON(): IPath2DLayer;
|
|
158
107
|
/**
|
|
159
108
|
* Validates the properties of the Path2D Layer.
|
|
160
|
-
* @param
|
|
109
|
+
* @param {IPath2DLayerProps} [data] - The properties to validate.
|
|
161
110
|
* @returns {IPath2DLayerProps} The validated properties.
|
|
162
111
|
*/
|
|
163
112
|
protected validateProps(data: IPath2DLayerProps): IPath2DLayerProps;
|
|
@@ -20,115 +20,9 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
|
|
|
20
20
|
this.props = props ? props : {};
|
|
21
21
|
this.props = this.validateProps(this.props);
|
|
22
22
|
}
|
|
23
|
-
/**
|
|
24
|
-
* Sets the unique identifier of the layer.
|
|
25
|
-
*
|
|
26
|
-
* @param {string} id - The unique identifier.
|
|
27
|
-
* @returns {this} The current instance for chaining.
|
|
28
|
-
*/
|
|
29
|
-
setID(id) {
|
|
30
|
-
this.id = id;
|
|
31
|
-
return this;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* Sets the visibility of the layer.
|
|
35
|
-
* @param visible {boolean} - The visibility state of the layer.
|
|
36
|
-
* @returns {this} The current instance for chaining.
|
|
37
|
-
*/
|
|
38
|
-
setVisible(visible) {
|
|
39
|
-
this.visible = visible;
|
|
40
|
-
return this;
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Sets the z-index of the layer.
|
|
44
|
-
* @param zIndex {number} - The z-index value of the layer.
|
|
45
|
-
* @returns {this} The current instance for chaining.
|
|
46
|
-
*/
|
|
47
|
-
setZIndex(zIndex) {
|
|
48
|
-
this.zIndex = zIndex;
|
|
49
|
-
return this;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Sets the global composite operation for the layer.
|
|
53
|
-
* @param {AnyGlobalCompositeOperation} operation - The composite operation.
|
|
54
|
-
* @returns {this} The current instance for chaining.
|
|
55
|
-
*/
|
|
56
|
-
setGlobalCompositeOperation(operation) {
|
|
57
|
-
this.props.globalComposite = operation;
|
|
58
|
-
return this;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Sets the filter effects for the layer.
|
|
62
|
-
* @param {...AnyFilter} filter - The filter effects to apply.
|
|
63
|
-
* @returns {this} The current instance for chaining.
|
|
64
|
-
*/
|
|
65
|
-
setFilters(...filter) {
|
|
66
|
-
this.props.filter = filter.join(' ');
|
|
67
|
-
return this;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Sets the transformation matrix of the layer.
|
|
71
|
-
* @param {DOMMatrix2DInit} matrix - The transformation matrix.
|
|
72
|
-
* @returns {this} The current instance for chaining.
|
|
73
|
-
*/
|
|
74
|
-
setMatrix(matrix) {
|
|
75
|
-
this.props.transform = { ...this.props.transform, matrix };
|
|
76
|
-
return this;
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* Sets the scale of the layer in the x and y directions.
|
|
80
|
-
* @param {number} x - The scale factor in the x direction.
|
|
81
|
-
* @param {number} y - The scale factor in the y direction.
|
|
82
|
-
* @returns {this} The current instance for chaining.
|
|
83
|
-
*/
|
|
84
|
-
setScale(x, y) {
|
|
85
|
-
this.props.transform = { ...this.props.transform, scale: { x, y } };
|
|
86
|
-
return this;
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Sets the translation of the layer in the x and y directions.
|
|
90
|
-
* @param {number} x - The translation in the x direction.
|
|
91
|
-
* @param {number} y - The translation in the y direction.
|
|
92
|
-
* @returns {this} The current instance for chaining.
|
|
93
|
-
*/
|
|
94
|
-
setTranslate(x, y) {
|
|
95
|
-
this.props.transform = { ...this.props.transform, translate: { x, y } };
|
|
96
|
-
return this;
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* Sets the opacity of the layer.
|
|
100
|
-
* @param {number} opacity - The opacity value, between 0 and 1.
|
|
101
|
-
* @returns {this} The current instance for chaining.
|
|
102
|
-
*/
|
|
103
|
-
setOpacity(opacity) {
|
|
104
|
-
this.props.opacity = opacity;
|
|
105
|
-
return this;
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Sets the stroke properties of the Path2D Layer.
|
|
109
|
-
* @param width {number} - The width of the stroke.
|
|
110
|
-
* @param cap {string} - The cap style of the stroke.
|
|
111
|
-
* @param join {string} - The join style of the stroke.
|
|
112
|
-
* @param dash {number[]} - The dash pattern of the stroke.
|
|
113
|
-
* @param dashOffset {number} - The dash offset of the stroke.
|
|
114
|
-
* @param miterLimit {number} - The miter limit of the stroke.
|
|
115
|
-
* @returns {this} The current instance for chaining.
|
|
116
|
-
*/
|
|
117
|
-
setStroke(width, cap, join, dash, dashOffset, miterLimit) {
|
|
118
|
-
this.props.stroke = {
|
|
119
|
-
width,
|
|
120
|
-
cap: cap || 'butt',
|
|
121
|
-
join: join || 'miter',
|
|
122
|
-
dash: dash || [],
|
|
123
|
-
dashOffset: dashOffset || 0,
|
|
124
|
-
miterLimit: miterLimit || 10,
|
|
125
|
-
};
|
|
126
|
-
this.props.filled = false; // Ensure filled is false when stroke is set
|
|
127
|
-
return this;
|
|
128
|
-
}
|
|
129
23
|
/**
|
|
130
24
|
* Sets the color of the Path2D Layer.
|
|
131
|
-
* @param
|
|
25
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
132
26
|
* @returns {this} The current instance for chaining.
|
|
133
27
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
134
28
|
*/
|
|
@@ -284,12 +178,14 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
|
|
|
284
178
|
}
|
|
285
179
|
/**
|
|
286
180
|
* Validates the properties of the Path2D Layer.
|
|
287
|
-
* @param
|
|
181
|
+
* @param {IPath2DLayerProps} [data] - The properties to validate.
|
|
288
182
|
* @returns {IPath2DLayerProps} The validated properties.
|
|
289
183
|
*/
|
|
290
184
|
validateProps(data) {
|
|
291
185
|
return {
|
|
292
186
|
...super.validateProps(data),
|
|
187
|
+
filled: data.filled || true,
|
|
188
|
+
fillStyle: data.fillStyle || '#000000',
|
|
293
189
|
path2D: data.path2D || new canvas_1.Path2D(),
|
|
294
190
|
stroke: {
|
|
295
191
|
width: data.stroke?.width || 1,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
|
|
2
2
|
import { ColorType, ScaleType, Point, LayerType } from "../../types";
|
|
3
3
|
import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
|
|
4
|
-
import { LayersManager } from "../managers
|
|
4
|
+
import { LayersManager } from "../managers";
|
|
5
5
|
/**
|
|
6
6
|
* Interface representing a Quadratic Layer.
|
|
7
7
|
*/
|
|
@@ -27,6 +27,14 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
|
|
|
27
27
|
* The end point of the quadratic curve, including x and y coordinates.
|
|
28
28
|
*/
|
|
29
29
|
endPoint: Point;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the layer is filled.
|
|
32
|
+
*/
|
|
33
|
+
filled: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* The fill style (color or pattern) of the layer.
|
|
36
|
+
*/
|
|
37
|
+
fillStyle: ColorType;
|
|
30
38
|
/**
|
|
31
39
|
* The stroke properties of the quadratic curve.
|
|
32
40
|
*/
|
|
@@ -67,47 +75,47 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
|
|
|
67
75
|
props: IQuadraticLayerProps;
|
|
68
76
|
/**
|
|
69
77
|
* Constructs a new QuadraticLayer instance.
|
|
70
|
-
* @param
|
|
71
|
-
* @param
|
|
78
|
+
* @param {IQuadraticLayerProps} [props] - The properties of the Quadratic Layer.
|
|
79
|
+
* @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
|
|
72
80
|
*/
|
|
73
81
|
constructor(props?: IQuadraticLayerProps, misc?: IBaseLayerMisc);
|
|
74
82
|
/**
|
|
75
83
|
* Sets the control point of the quadratic layer.
|
|
76
|
-
* @param
|
|
77
|
-
* @param
|
|
84
|
+
* @param {ScaleType} [x] - The x-coordinate of the control point.
|
|
85
|
+
* @param {ScaleType} [y] - The y-coordinate of the control point.
|
|
78
86
|
* @returns {this} The current instance for chaining.
|
|
79
87
|
*/
|
|
80
88
|
setControlPoint(x: ScaleType, y: ScaleType): this;
|
|
81
89
|
/**
|
|
82
90
|
* Sets the end point of the quadratic layer.
|
|
83
|
-
* @param
|
|
84
|
-
* @param
|
|
91
|
+
* @param {ScaleType} [x] - The x-coordinate of the end point.
|
|
92
|
+
* @param {ScaleType} [y] - The y-coordinate of the end point.
|
|
85
93
|
* @returns {this} The current instance for chaining.
|
|
86
94
|
*/
|
|
87
95
|
setEndPosition(x: ScaleType, y: ScaleType): this;
|
|
88
96
|
/**
|
|
89
97
|
* Sets the color of the layer.
|
|
90
|
-
* @param
|
|
98
|
+
* @param {ColorType} [color] - The color of the layer.
|
|
91
99
|
* @returns {this} The current instance for chaining.
|
|
92
100
|
* @throws {LazyError} If the color is not provided or invalid.
|
|
93
101
|
*/
|
|
94
102
|
setColor(color: ColorType): this;
|
|
95
103
|
/**
|
|
96
104
|
* Sets the stroke properties of the layer.
|
|
97
|
-
* @param
|
|
98
|
-
* @param
|
|
99
|
-
* @param
|
|
100
|
-
* @param
|
|
101
|
-
* @param
|
|
102
|
-
* @param
|
|
105
|
+
* @param {number} [width] - The width of the stroke.
|
|
106
|
+
* @param {string} [cap] - The cap style of the stroke.
|
|
107
|
+
* @param {string} [join] - The join style of the stroke.
|
|
108
|
+
* @param {number[]} [dash] - The dash pattern of the stroke.
|
|
109
|
+
* @param {number} [dashOffset] - The dash offset of the stroke.
|
|
110
|
+
* @param {number} [miterLimit] - The miter limit of the stroke.
|
|
103
111
|
* @returns {this} The current instance for chaining.
|
|
104
112
|
*/
|
|
105
113
|
setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
|
|
106
114
|
/**
|
|
107
115
|
* Calculates the bounding box of the quadratic curve.
|
|
108
|
-
* @param
|
|
109
|
-
* @param
|
|
110
|
-
* @param
|
|
116
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
117
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
118
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
111
119
|
* @returns {Object} The bounding box details including max, min, center, width, and height.
|
|
112
120
|
*/
|
|
113
121
|
getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
|
|
@@ -128,10 +136,10 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
|
|
|
128
136
|
};
|
|
129
137
|
/**
|
|
130
138
|
* Draws the quadratic curve on the canvas.
|
|
131
|
-
* @param
|
|
132
|
-
* @param
|
|
133
|
-
* @param
|
|
134
|
-
* @param
|
|
139
|
+
* @param {SKRSContext2D} [ctx] - The canvas rendering context.
|
|
140
|
+
* @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
|
|
141
|
+
* @param {LayersManager} [manager] - The layers manager.
|
|
142
|
+
* @param {boolean} [debug] - Whether to enable debug logging.
|
|
135
143
|
*/
|
|
136
144
|
draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
|
|
137
145
|
/**
|
|
@@ -141,7 +149,7 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
|
|
|
141
149
|
toJSON(): IQuadraticLayer;
|
|
142
150
|
/**
|
|
143
151
|
* Validates the properties of the Quadratic Layer.
|
|
144
|
-
* @param
|
|
152
|
+
* @param {IQuadraticLayerProps} [data] - The properties to validate.
|
|
145
153
|
* @returns {IQuadraticLayerProps} The validated properties.
|
|
146
154
|
*/
|
|
147
155
|
protected validateProps(data: IQuadraticLayerProps): IQuadraticLayerProps;
|