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