@nmmty/lazycanvas 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ReadMe.md +1 -0
- package/dist/structures/components/BaseLayer.js +1 -2
- package/dist/structures/components/BezierLayer.d.ts +3 -12
- package/dist/structures/components/BezierLayer.js +1 -10
- package/dist/structures/components/Group.d.ts +2 -2
- package/dist/structures/components/ImageLayer.d.ts +0 -9
- package/dist/structures/components/ImageLayer.js +0 -9
- package/dist/structures/components/LineLayer.js +1 -10
- package/dist/structures/components/MorphLayer.js +1 -10
- package/dist/structures/components/Path2DLayer.d.ts +6 -33
- package/dist/structures/components/Path2DLayer.js +5 -30
- package/dist/structures/components/QuadraticLayer.js +1 -10
- package/dist/structures/components/TextLayer.js +1 -10
- package/dist/structures/helpers/Gradient.d.ts +2 -2
- package/dist/structures/helpers/Gradient.js +1 -2
- package/dist/structures/helpers/Link.d.ts +2 -2
- package/dist/structures/helpers/Link.js +1 -1
- package/dist/structures/helpers/Pattern.d.ts +1 -1
- package/dist/structures/helpers/Pattern.js +5 -4
- package/dist/utils/utils.d.ts +1 -4
- package/dist/utils/utils.js +6 -72
- package/package.json +1 -1
package/ReadMe.md
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@nmmty/lazycanvas)
|
|
4
4
|
[](https://www.npmjs.com/package/@nmmty/lazycanvas)
|
|
5
|
+
[](https://deepwiki.com/NMMTY/LazyCanvas)
|
|
5
6
|
|
|
6
7
|
A simple way to interact with [`@napi-rs/canvas`](https://github.com/Brooooooklyn/canvas) in an advanced way!
|
|
7
8
|
LazyCanvas provides you with classes and methods to interact with canvas more easily.
|
|
@@ -103,9 +103,8 @@ class BaseLayer {
|
|
|
103
103
|
throw new LazyUtil_1.LazyError('The color of the shadow must be provided');
|
|
104
104
|
if (!(0, utils_1.isColor)(color))
|
|
105
105
|
throw new LazyUtil_1.LazyError('The color of the shadow must be a valid color');
|
|
106
|
-
let parse = (0, utils_1.parseColor)(color);
|
|
107
106
|
this.props.shadow = {
|
|
108
|
-
color:
|
|
107
|
+
color: color,
|
|
109
108
|
blur: blur || 0,
|
|
110
109
|
offsetX: offsetX || 0,
|
|
111
110
|
offsetY: offsetY || 0,
|
|
@@ -114,18 +114,9 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
|
|
|
114
114
|
* @returns {Object} The bounding box details including max, min, center, width, and height.
|
|
115
115
|
*/
|
|
116
116
|
getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
|
|
117
|
-
max:
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
};
|
|
121
|
-
min: {
|
|
122
|
-
x: number;
|
|
123
|
-
y: number;
|
|
124
|
-
};
|
|
125
|
-
center: {
|
|
126
|
-
x: number;
|
|
127
|
-
y: number;
|
|
128
|
-
};
|
|
117
|
+
max: Point;
|
|
118
|
+
min: Point;
|
|
119
|
+
center: Point;
|
|
129
120
|
width: number;
|
|
130
121
|
height: number;
|
|
131
122
|
};
|
|
@@ -5,7 +5,6 @@ const BaseLayer_1 = require("./BaseLayer");
|
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const utils_1 = require("../../utils/utils");
|
|
7
7
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
8
|
-
const helpers_1 = require("../helpers");
|
|
9
8
|
/**
|
|
10
9
|
* Class representing a Bezier layer, extending the BaseLayer class.
|
|
11
10
|
*/
|
|
@@ -59,15 +58,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
|
|
|
59
58
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
60
59
|
if (!(0, utils_1.isColor)(color))
|
|
61
60
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
62
|
-
|
|
63
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
64
|
-
this.props.fillStyle = fill;
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
let arr = fill.split(':');
|
|
68
|
-
this.props.fillStyle = arr[0];
|
|
69
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
70
|
-
}
|
|
61
|
+
this.props.fillStyle = color;
|
|
71
62
|
return this;
|
|
72
63
|
}
|
|
73
64
|
/**
|
|
@@ -100,12 +100,12 @@ export declare class Group implements IGroup {
|
|
|
100
100
|
* @param id {string} - The unique identifier of the component to retrieve.
|
|
101
101
|
* @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
|
|
102
102
|
*/
|
|
103
|
-
get(id: string):
|
|
103
|
+
get(id: string): AnyLayer | undefined;
|
|
104
104
|
/**
|
|
105
105
|
* Retrieves all components from the group.
|
|
106
106
|
* @returns {AnyLayer[]} An array of all components in the group.
|
|
107
107
|
*/
|
|
108
|
-
getAll():
|
|
108
|
+
getAll(): AnyLayer[];
|
|
109
109
|
/**
|
|
110
110
|
* Gets the number of components in the group.
|
|
111
111
|
* @returns {number} The number of components in the group.
|
|
@@ -25,10 +25,6 @@ export interface IImageLayerProps extends IBaseLayerProps {
|
|
|
25
25
|
* The source of the image, which can be a URL or a Buffer.
|
|
26
26
|
*/
|
|
27
27
|
src: string | Buffer;
|
|
28
|
-
/**
|
|
29
|
-
* Whether the image should be resized.
|
|
30
|
-
*/
|
|
31
|
-
resize: boolean;
|
|
32
28
|
/**
|
|
33
29
|
* The size of the image, including width, height, and radius.
|
|
34
30
|
*/
|
|
@@ -76,11 +72,6 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
|
|
|
76
72
|
* @returns {this} The current instance for chaining.
|
|
77
73
|
*/
|
|
78
74
|
setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
|
|
79
|
-
/**
|
|
80
|
-
* Disables resizing for the image.
|
|
81
|
-
* @returns {this} The current instance for chaining.
|
|
82
|
-
*/
|
|
83
|
-
dontResize(): this;
|
|
84
75
|
/**
|
|
85
76
|
* Draws the Image Layer on the canvas.
|
|
86
77
|
* @param ctx {SKRSContext2D} - The canvas rendering context.
|
|
@@ -23,7 +23,6 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
|
|
|
23
23
|
super(types_1.LayerType.Image, props || {}, misc);
|
|
24
24
|
this.props = props ? props : {};
|
|
25
25
|
this.props.centring = types_1.Centring.Center;
|
|
26
|
-
this.props.resize = true;
|
|
27
26
|
}
|
|
28
27
|
/**
|
|
29
28
|
* Sets the source of the image.
|
|
@@ -52,14 +51,6 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
|
|
|
52
51
|
};
|
|
53
52
|
return this;
|
|
54
53
|
}
|
|
55
|
-
/**
|
|
56
|
-
* Disables resizing for the image.
|
|
57
|
-
* @returns {this} The current instance for chaining.
|
|
58
|
-
*/
|
|
59
|
-
dontResize() {
|
|
60
|
-
this.props.resize = false;
|
|
61
|
-
return this;
|
|
62
|
-
}
|
|
63
54
|
/**
|
|
64
55
|
* Draws the Image Layer on the canvas.
|
|
65
56
|
* @param ctx {SKRSContext2D} - The canvas rendering context.
|
|
@@ -5,7 +5,6 @@ const BaseLayer_1 = require("./BaseLayer");
|
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
7
7
|
const utils_1 = require("../../utils/utils");
|
|
8
|
-
const helpers_1 = require("../helpers");
|
|
9
8
|
/**
|
|
10
9
|
* Class representing a Line Layer, extending the BaseLayer class.
|
|
11
10
|
*/
|
|
@@ -47,15 +46,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
|
|
|
47
46
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
48
47
|
if (!(0, utils_1.isColor)(color))
|
|
49
48
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
50
|
-
|
|
51
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
52
|
-
this.props.fillStyle = fill;
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
let arr = fill.split(':');
|
|
56
|
-
this.props.fillStyle = arr[0];
|
|
57
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
58
|
-
}
|
|
49
|
+
this.props.fillStyle = color;
|
|
59
50
|
return this;
|
|
60
51
|
}
|
|
61
52
|
/**
|
|
@@ -5,7 +5,6 @@ const BaseLayer_1 = require("./BaseLayer");
|
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const utils_1 = require("../../utils/utils");
|
|
7
7
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
8
|
-
const helpers_1 = require("../helpers");
|
|
9
8
|
/**
|
|
10
9
|
* Class representing a Morph Layer, extending the BaseLayer class.
|
|
11
10
|
*/
|
|
@@ -54,15 +53,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
|
|
|
54
53
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
55
54
|
if (!(0, utils_1.isColor)(color))
|
|
56
55
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
57
|
-
|
|
58
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
59
|
-
this.props.fillStyle = fill;
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
let arr = fill.split(':');
|
|
63
|
-
this.props.fillStyle = arr[0];
|
|
64
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
65
|
-
}
|
|
56
|
+
this.props.fillStyle = color;
|
|
66
57
|
return this;
|
|
67
58
|
}
|
|
68
59
|
/**
|
|
@@ -1,40 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AnyGlobalCompositeOperation, ColorType,
|
|
3
|
-
import { IBaseLayerMisc } from "./BaseLayer";
|
|
1
|
+
import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, StrokeOptions, SvgCanvas } from "@napi-rs/canvas";
|
|
2
|
+
import { AnyFilter, AnyGlobalCompositeOperation, ColorType, LayerType } from "../../types";
|
|
3
|
+
import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
|
|
4
4
|
import { LayersManager } from "../managers/LayersManager";
|
|
5
|
-
export interface IPath2DLayer {
|
|
6
|
-
id: string;
|
|
5
|
+
export interface IPath2DLayer extends IBaseLayer {
|
|
7
6
|
type: LayerType.Path;
|
|
8
|
-
zIndex: number;
|
|
9
|
-
visible: boolean;
|
|
10
7
|
props: IPath2DLayerProps;
|
|
11
8
|
}
|
|
12
|
-
export interface IPath2DLayerProps {
|
|
9
|
+
export interface IPath2DLayerProps extends IBaseLayerProps {
|
|
13
10
|
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
11
|
/**
|
|
39
12
|
* The stroke properties of the Path2D.
|
|
40
13
|
*/
|
|
@@ -67,7 +40,7 @@ export interface IPath2DLayerProps {
|
|
|
67
40
|
loadFromSVG: boolean;
|
|
68
41
|
clipPath: boolean;
|
|
69
42
|
}
|
|
70
|
-
export declare class Path2DLayer
|
|
43
|
+
export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
|
|
71
44
|
id: string;
|
|
72
45
|
type: LayerType.Path;
|
|
73
46
|
zIndex: number;
|
|
@@ -4,37 +4,20 @@ exports.Path2DLayer = void 0;
|
|
|
4
4
|
const canvas_1 = require("@napi-rs/canvas");
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const utils_1 = require("../../utils/utils");
|
|
7
|
+
const BaseLayer_1 = require("./BaseLayer");
|
|
7
8
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
8
|
-
|
|
9
|
-
class Path2DLayer {
|
|
9
|
+
class Path2DLayer extends BaseLayer_1.BaseLayer {
|
|
10
10
|
id;
|
|
11
11
|
type = types_1.LayerType.Path;
|
|
12
12
|
zIndex;
|
|
13
13
|
visible;
|
|
14
14
|
props;
|
|
15
15
|
constructor(props, misc) {
|
|
16
|
+
super(types_1.LayerType.Path, props || {}, misc);
|
|
16
17
|
this.id = misc?.id || (0, utils_1.generateID)(types_1.LayerType.Path);
|
|
17
18
|
this.zIndex = misc?.zIndex || 1;
|
|
18
19
|
this.visible = misc?.visible || true;
|
|
19
|
-
this.props = {
|
|
20
|
-
path2D: props?.path2D || new canvas_1.Path2D(),
|
|
21
|
-
filter: props?.filter || "",
|
|
22
|
-
opacity: props?.opacity || 1,
|
|
23
|
-
filled: props?.filled || true,
|
|
24
|
-
fillStyle: props?.fillStyle || "#000000",
|
|
25
|
-
transform: props?.transform || {},
|
|
26
|
-
globalComposite: props?.globalComposite || "source-over",
|
|
27
|
-
stroke: {
|
|
28
|
-
width: props?.stroke?.width || 1,
|
|
29
|
-
cap: props?.stroke?.cap || "butt",
|
|
30
|
-
join: props?.stroke?.join || "miter",
|
|
31
|
-
dashOffset: props?.stroke?.dashOffset || 0,
|
|
32
|
-
dash: props?.stroke?.dash || [],
|
|
33
|
-
miterLimit: props?.stroke?.miterLimit || 10,
|
|
34
|
-
},
|
|
35
|
-
loadFromSVG: props?.loadFromSVG || false,
|
|
36
|
-
clipPath: props?.clipPath || false,
|
|
37
|
-
};
|
|
20
|
+
this.props = props ? props : {};
|
|
38
21
|
}
|
|
39
22
|
/**
|
|
40
23
|
* Sets the unique identifier of the layer.
|
|
@@ -161,15 +144,7 @@ class Path2DLayer {
|
|
|
161
144
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
162
145
|
if (!(0, utils_1.isColor)(color))
|
|
163
146
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
164
|
-
|
|
165
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
166
|
-
this.props.fillStyle = fill;
|
|
167
|
-
}
|
|
168
|
-
else {
|
|
169
|
-
let arr = fill.split(':');
|
|
170
|
-
this.props.fillStyle = arr[0];
|
|
171
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
172
|
-
}
|
|
147
|
+
this.props.fillStyle = color;
|
|
173
148
|
return this;
|
|
174
149
|
}
|
|
175
150
|
setPath(path) {
|
|
@@ -5,7 +5,6 @@ const BaseLayer_1 = require("./BaseLayer");
|
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const utils_1 = require("../../utils/utils");
|
|
7
7
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
8
|
-
const helpers_1 = require("../helpers");
|
|
9
8
|
/**
|
|
10
9
|
* Class representing a Quadratic Layer, extending the BaseLayer class.
|
|
11
10
|
*/
|
|
@@ -57,15 +56,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
|
|
|
57
56
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
58
57
|
if (!(0, utils_1.isColor)(color))
|
|
59
58
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
60
|
-
|
|
61
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
62
|
-
this.props.fillStyle = fill;
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
let arr = fill.split(':');
|
|
66
|
-
this.props.fillStyle = arr[0];
|
|
67
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
68
|
-
}
|
|
59
|
+
this.props.fillStyle = color;
|
|
69
60
|
return this;
|
|
70
61
|
}
|
|
71
62
|
/**
|
|
@@ -4,7 +4,6 @@ exports.TextLayer = void 0;
|
|
|
4
4
|
const BaseLayer_1 = require("./BaseLayer");
|
|
5
5
|
const types_1 = require("../../types");
|
|
6
6
|
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
7
|
-
const helpers_1 = require("../helpers");
|
|
8
7
|
const utils_1 = require("../../utils/utils");
|
|
9
8
|
/**
|
|
10
9
|
* Class representing a Text Layer, extending the BaseLayer class.
|
|
@@ -110,15 +109,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
|
|
|
110
109
|
throw new LazyUtil_1.LazyError('The color of the layer must be provided');
|
|
111
110
|
if (!(0, utils_1.isColor)(color))
|
|
112
111
|
throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
|
|
113
|
-
|
|
114
|
-
if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
|
|
115
|
-
this.props.fillStyle = fill;
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
let arr = fill.split(':');
|
|
119
|
-
this.props.fillStyle = arr[0];
|
|
120
|
-
this.props.opacity = parseFloat(arr[1]) || 1;
|
|
121
|
-
}
|
|
112
|
+
this.props.fillStyle = color;
|
|
122
113
|
return this;
|
|
123
114
|
}
|
|
124
115
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnyGradientType, FillType } from "../../types";
|
|
1
|
+
import { AnyGradientType, FillType, StringColorType } from "../../types";
|
|
2
2
|
import { SKRSContext2D } from "@napi-rs/canvas";
|
|
3
3
|
/**
|
|
4
4
|
* Interface representing a gradient.
|
|
@@ -28,7 +28,7 @@ export interface GradientColorStop {
|
|
|
28
28
|
/**
|
|
29
29
|
* The color of the stop in hexadecimal format.
|
|
30
30
|
*/
|
|
31
|
-
color:
|
|
31
|
+
color: StringColorType;
|
|
32
32
|
/**
|
|
33
33
|
* The offset of the stop, ranging from 0 to 1.
|
|
34
34
|
*/
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Gradient = void 0;
|
|
4
4
|
const types_1 = require("../../types");
|
|
5
|
-
const utils_1 = require("../../utils/utils");
|
|
6
5
|
/**
|
|
7
6
|
* Class representing a gradient with properties and methods to manipulate it.
|
|
8
7
|
*/
|
|
@@ -86,7 +85,7 @@ class Gradient {
|
|
|
86
85
|
break;
|
|
87
86
|
}
|
|
88
87
|
for (let stop of gradientData.stops) {
|
|
89
|
-
gradient.addColorStop(stop.offset,
|
|
88
|
+
gradient.addColorStop(stop.offset, stop.color);
|
|
90
89
|
}
|
|
91
90
|
return gradient;
|
|
92
91
|
}
|
|
@@ -4,7 +4,7 @@ import { AnyLinkType, ScaleType } from "../../types";
|
|
|
4
4
|
*/
|
|
5
5
|
export interface ILink {
|
|
6
6
|
/**
|
|
7
|
-
* The source
|
|
7
|
+
* The source layers ID.
|
|
8
8
|
*/
|
|
9
9
|
source: string;
|
|
10
10
|
/**
|
|
@@ -21,7 +21,7 @@ export interface ILink {
|
|
|
21
21
|
*/
|
|
22
22
|
export declare class Link {
|
|
23
23
|
/**
|
|
24
|
-
* The source
|
|
24
|
+
* The source layers ID.
|
|
25
25
|
*/
|
|
26
26
|
source: string;
|
|
27
27
|
/**
|
|
@@ -57,7 +57,7 @@ export declare class Pattern implements IPattern {
|
|
|
57
57
|
/**
|
|
58
58
|
* Draws the pattern on a canvas context.
|
|
59
59
|
* @param ctx {SKRSContext2D} - The canvas rendering context.
|
|
60
|
-
* @returns {Promise<CanvasPattern
|
|
60
|
+
* @returns {Promise<CanvasPattern>} The created pattern.
|
|
61
61
|
*/
|
|
62
62
|
draw(ctx: SKRSContext2D): Promise<CanvasPattern>;
|
|
63
63
|
/**
|
|
@@ -5,6 +5,7 @@ const types_1 = require("../../types");
|
|
|
5
5
|
const LazyCanvas_1 = require("../LazyCanvas");
|
|
6
6
|
const canvas_1 = require("@napi-rs/canvas");
|
|
7
7
|
const Exporter_1 = require("./Exporter");
|
|
8
|
+
const LazyUtil_1 = require("../../utils/LazyUtil");
|
|
8
9
|
/**
|
|
9
10
|
* Class representing a pattern with properties and methods to manipulate it.
|
|
10
11
|
*/
|
|
@@ -51,15 +52,15 @@ class Pattern {
|
|
|
51
52
|
/**
|
|
52
53
|
* Draws the pattern on a canvas context.
|
|
53
54
|
* @param ctx {SKRSContext2D} - The canvas rendering context.
|
|
54
|
-
* @returns {Promise<CanvasPattern
|
|
55
|
+
* @returns {Promise<CanvasPattern>} The created pattern.
|
|
55
56
|
*/
|
|
56
57
|
async draw(ctx) {
|
|
58
|
+
if (!this.src)
|
|
59
|
+
throw new LazyUtil_1.LazyError('Pattern source is not set');
|
|
57
60
|
if (this.src instanceof LazyCanvas_1.LazyCanvas) {
|
|
58
61
|
return ctx.createPattern((await this.src.manager.render.render('canvas')), this.type);
|
|
59
62
|
}
|
|
60
|
-
|
|
61
|
-
return ctx.createPattern(await (0, canvas_1.loadImage)(this.src), this.type);
|
|
62
|
-
}
|
|
63
|
+
return ctx.createPattern(await (0, canvas_1.loadImage)(this.src), this.type);
|
|
63
64
|
}
|
|
64
65
|
/**
|
|
65
66
|
* Converts the Pattern instance to a JSON representation.
|
package/dist/utils/utils.d.ts
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import type { AnyCentring, AnyLayer, AnyTextAlign, ColorType, PointNumber, ScaleType, Transform } from "../types";
|
|
2
2
|
import { LayerType } from "../types";
|
|
3
|
-
import { Gradient, Pattern } from "../structures/helpers";
|
|
4
3
|
import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
|
|
5
4
|
import { LayersManager } from "../structures/managers/LayersManager";
|
|
6
5
|
import { Group } from "../structures/components";
|
|
7
6
|
export declare function generateID(type: string): string;
|
|
8
7
|
export declare function isColor(v: ColorType): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
|
|
9
|
-
export declare function parseHex(v: string): string;
|
|
10
|
-
export declare function parseColor(v: ColorType): string | Gradient | Pattern;
|
|
11
8
|
export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, layer?: {
|
|
12
9
|
width: number;
|
|
13
10
|
height: number;
|
|
@@ -38,7 +35,7 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
|
|
|
38
35
|
export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
|
|
39
36
|
export declare function opacity(ctx: SKRSContext2D, opacity: number): void;
|
|
40
37
|
export declare function filters(ctx: SKRSContext2D, filters: string): void;
|
|
41
|
-
export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType): string | Promise<CanvasPattern
|
|
38
|
+
export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType): string | CanvasGradient | Promise<CanvasPattern>;
|
|
42
39
|
export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
|
|
43
40
|
width: number;
|
|
44
41
|
height: number;
|
package/dist/utils/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.resizeLayers = exports.resize = exports.getBoundingBoxBezier = exports.centring = exports.isImageUrlValid = exports.generateRandomName = exports.transform = exports.parseFillStyle = exports.filters = exports.opacity = exports.drawShadow = exports.parser = exports.parseToNormal = exports.
|
|
3
|
+
exports.resizeLayers = exports.resize = exports.getBoundingBoxBezier = exports.centring = exports.isImageUrlValid = exports.generateRandomName = exports.transform = exports.parseFillStyle = exports.filters = exports.opacity = exports.drawShadow = exports.parser = exports.parseToNormal = exports.isColor = exports.generateID = void 0;
|
|
4
4
|
const types_1 = require("../types");
|
|
5
5
|
const helpers_1 = require("../structures/helpers");
|
|
6
6
|
const canvas_1 = require("@napi-rs/canvas");
|
|
@@ -23,74 +23,6 @@ function isColor(v) {
|
|
|
23
23
|
return typeof (v === 'string' && (hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v))) || v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern;
|
|
24
24
|
}
|
|
25
25
|
exports.isColor = isColor;
|
|
26
|
-
function tooShort(v) {
|
|
27
|
-
return v.length < 2 ? `0${v}` : v;
|
|
28
|
-
}
|
|
29
|
-
function parseHex(v) {
|
|
30
|
-
if (hexReg.test(v)) {
|
|
31
|
-
return v;
|
|
32
|
-
}
|
|
33
|
-
else if (rgbReg.test(v)) {
|
|
34
|
-
let match = v.match(rgbReg);
|
|
35
|
-
let r = parseInt(match[1]);
|
|
36
|
-
let g = parseInt(match[2]);
|
|
37
|
-
let b = parseInt(match[3]);
|
|
38
|
-
return `#${tooShort(r.toString(16))}${tooShort(g.toString(16))}${tooShort(b.toString(16))}`;
|
|
39
|
-
}
|
|
40
|
-
else if (rgbaReg.test(v)) {
|
|
41
|
-
let match = v.match(rgbaReg);
|
|
42
|
-
let r = parseInt(match[1]);
|
|
43
|
-
let g = parseInt(match[2]);
|
|
44
|
-
let b = parseInt(match[3]);
|
|
45
|
-
let a = parseFloat(match[4]);
|
|
46
|
-
return `#${tooShort(r.toString(16))}${tooShort(g.toString(16))}${tooShort(b.toString(16))}:${a}`;
|
|
47
|
-
}
|
|
48
|
-
else if (hslReg.test(v)) {
|
|
49
|
-
let match = v.match(hslReg);
|
|
50
|
-
let h = parseInt(match[1]);
|
|
51
|
-
let s = parseInt(match[2]);
|
|
52
|
-
let l = parseInt(match[3]);
|
|
53
|
-
l /= 100;
|
|
54
|
-
const b = s * Math.min(l, 1 - l) / 100;
|
|
55
|
-
const f = (n) => {
|
|
56
|
-
const k = (n + h / 30) % 12;
|
|
57
|
-
const color = l - b * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
58
|
-
return Math.round(255 * color).toString(16).padStart(2, '0');
|
|
59
|
-
};
|
|
60
|
-
return `#${f(0)}${f(8)}${f(4)}`;
|
|
61
|
-
}
|
|
62
|
-
else if (hslaReg.test(v)) {
|
|
63
|
-
let match = v.match(hslaReg);
|
|
64
|
-
let h = parseInt(match[1]);
|
|
65
|
-
let s = parseInt(match[2]);
|
|
66
|
-
let l = parseInt(match[3]);
|
|
67
|
-
let a = parseFloat(match[4]);
|
|
68
|
-
l /= 100;
|
|
69
|
-
const b = s * Math.min(l, 1 - l) / 100;
|
|
70
|
-
const f = (n) => {
|
|
71
|
-
const k = (n + h / 30) % 12;
|
|
72
|
-
const color = l - b * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
73
|
-
return Math.round(255 * color).toString(16).padStart(2, '0');
|
|
74
|
-
};
|
|
75
|
-
return `#${f(0)}${f(8)}${f(4)}:${a}`;
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
return '#000000';
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
exports.parseHex = parseHex;
|
|
82
|
-
function parseColor(v) {
|
|
83
|
-
if (typeof v === 'string') {
|
|
84
|
-
return parseHex(v);
|
|
85
|
-
}
|
|
86
|
-
else if (v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern) {
|
|
87
|
-
return v;
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
return '#000000';
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
exports.parseColor = parseColor;
|
|
94
26
|
function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
|
|
95
27
|
if (typeof v === 'number') {
|
|
96
28
|
return v;
|
|
@@ -236,12 +168,14 @@ function filters(ctx, filters) {
|
|
|
236
168
|
}
|
|
237
169
|
exports.filters = filters;
|
|
238
170
|
function parseFillStyle(ctx, color) {
|
|
171
|
+
if (!ctx)
|
|
172
|
+
throw new LazyUtil_1.LazyError('The context is not defined');
|
|
173
|
+
if (!color)
|
|
174
|
+
throw new LazyUtil_1.LazyError('The color is not defined');
|
|
239
175
|
if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
|
|
240
176
|
return color.draw(ctx);
|
|
241
177
|
}
|
|
242
|
-
|
|
243
|
-
return color;
|
|
244
|
-
}
|
|
178
|
+
return color;
|
|
245
179
|
}
|
|
246
180
|
exports.parseFillStyle = parseFillStyle;
|
|
247
181
|
function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, type: types_1.LayerType.Morph }, extra = { text: '', textAlign: types_1.TextAlign.Left, fontSize: 0, multiline: false }) {
|