@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3
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 -1
- package/biome.json +41 -0
- package/dist/core/Interpolation.d.ts +30 -0
- package/dist/core/Interpolation.js +200 -0
- package/dist/core/Scene.d.ts +96 -0
- package/dist/core/Scene.js +172 -0
- package/dist/core/Signal.d.ts +133 -0
- package/dist/core/Signal.js +255 -0
- package/dist/core/SignalUtils.d.ts +133 -0
- package/dist/core/SignalUtils.js +333 -0
- package/dist/core/ThreadScheduler.d.ts +38 -0
- package/dist/core/ThreadScheduler.js +74 -0
- package/dist/helpers/Filters.js +1 -1
- package/dist/helpers/FontsList.js +18 -18
- package/dist/helpers/Utlis.d.ts +3 -3
- package/dist/helpers/Utlis.js +15 -18
- package/dist/helpers/index.d.ts +3 -3
- package/dist/index.d.ts +10 -0
- package/dist/index.js +10 -0
- package/dist/jsx-runtime.d.ts +17 -0
- package/dist/jsx-runtime.js +111 -0
- package/dist/structures/LazyCanvas.d.ts +3 -45
- package/dist/structures/LazyCanvas.js +11 -74
- package/dist/structures/components/BaseLayer.d.ts +34 -12
- package/dist/structures/components/BaseLayer.js +68 -35
- package/dist/structures/components/BezierLayer.d.ts +18 -39
- package/dist/structures/components/BezierLayer.js +85 -48
- package/dist/structures/components/{Group.d.ts → Div.d.ts} +26 -20
- package/dist/structures/components/{Group.js → Div.js} +39 -40
- package/dist/structures/components/ImageLayer.d.ts +2 -2
- package/dist/structures/components/ImageLayer.js +25 -26
- package/dist/structures/components/LineLayer.d.ts +13 -39
- package/dist/structures/components/LineLayer.js +44 -44
- package/dist/structures/components/MorphLayer.d.ts +4 -33
- package/dist/structures/components/MorphLayer.js +33 -47
- package/dist/structures/components/Path2DLayer.d.ts +4 -32
- package/dist/structures/components/Path2DLayer.js +28 -33
- package/dist/structures/components/PolygonLayer.d.ts +95 -0
- package/dist/structures/components/PolygonLayer.js +205 -0
- package/dist/structures/components/QuadraticLayer.d.ts +27 -44
- package/dist/structures/components/QuadraticLayer.js +87 -49
- package/dist/structures/components/TextLayer.d.ts +16 -45
- package/dist/structures/components/TextLayer.js +66 -68
- package/dist/structures/components/index.d.ts +10 -10
- package/dist/structures/components/index.js +2 -2
- package/dist/structures/helpers/Exporter.d.ts +13 -4
- package/dist/structures/helpers/Exporter.js +79 -42
- package/dist/structures/helpers/Font.js +1 -17
- package/dist/structures/helpers/Gradient.js +32 -45
- package/dist/structures/helpers/Link.js +2 -14
- package/dist/structures/helpers/Pattern.js +9 -17
- package/dist/structures/helpers/index.d.ts +7 -7
- package/dist/structures/helpers/readers/JSONReader.d.ts +4 -4
- package/dist/structures/helpers/readers/JSONReader.js +34 -40
- package/dist/structures/helpers/readers/YAMLReader.js +5 -5
- package/dist/structures/managers/FontsManager.js +9 -18
- package/dist/structures/managers/LayersManager.d.ts +18 -28
- package/dist/structures/managers/LayersManager.js +14 -36
- package/dist/structures/managers/RenderManager.d.ts +1 -15
- package/dist/structures/managers/RenderManager.js +17 -110
- package/dist/structures/managers/index.d.ts +3 -5
- package/dist/structures/managers/index.js +0 -2
- package/dist/types/enum.d.ts +4 -3
- package/dist/types/enum.js +3 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/utils/APNGEncoder.d.ts +67 -0
- package/dist/utils/APNGEncoder.js +205 -0
- package/dist/utils/DrawUtils.d.ts +9 -0
- package/dist/utils/DrawUtils.js +42 -0
- package/dist/utils/LazyUtil.js +1 -2
- package/dist/utils/utils.d.ts +5 -9
- package/dist/utils/utils.js +148 -77
- package/package.json +62 -59
- package/dist/structures/components/ClearLayer.d.ts +0 -147
- package/dist/structures/components/ClearLayer.js +0 -158
- package/dist/structures/managers/AnimationManager.d.ts +0 -120
- package/dist/structures/managers/AnimationManager.js +0 -99
- package/dist/structures/managers/PluginManager.d.ts +0 -230
- package/dist/structures/managers/PluginManager.js +0 -182
- package/dist/types/types.d.ts +0 -105
package/dist/utils/utils.js
CHANGED
|
@@ -4,9 +4,6 @@ exports.generateID = generateID;
|
|
|
4
4
|
exports.isColor = isColor;
|
|
5
5
|
exports.parseToNormal = parseToNormal;
|
|
6
6
|
exports.parser = parser;
|
|
7
|
-
exports.drawShadow = drawShadow;
|
|
8
|
-
exports.opacity = opacity;
|
|
9
|
-
exports.filters = filters;
|
|
10
7
|
exports.parseFillStyle = parseFillStyle;
|
|
11
8
|
exports.transform = transform;
|
|
12
9
|
exports.generateRandomName = generateRandomName;
|
|
@@ -20,6 +17,7 @@ const helpers_1 = require("../structures/helpers");
|
|
|
20
17
|
const canvas_1 = require("@napi-rs/canvas");
|
|
21
18
|
const LazyUtil_1 = require("./LazyUtil");
|
|
22
19
|
const components_1 = require("../structures/components");
|
|
20
|
+
const Signal_1 = require("../core/Signal");
|
|
23
21
|
function generateID(type) {
|
|
24
22
|
return `${type}-${Math.random().toString(36).substr(2, 9)}`;
|
|
25
23
|
}
|
|
@@ -33,16 +31,41 @@ let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
|
|
|
33
31
|
let hslReg = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/;
|
|
34
32
|
let hslaReg = /^hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*(0|0?\.\d+|1(\.0)?)\)$/;
|
|
35
33
|
function isColor(v) {
|
|
36
|
-
|
|
34
|
+
if ((0, Signal_1.isSignal)(v)) {
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
37
|
+
if (typeof v === "object" &&
|
|
38
|
+
v !== null &&
|
|
39
|
+
!(0, Signal_1.isSignal)(v) &&
|
|
40
|
+
"start" in v &&
|
|
41
|
+
"end" in v &&
|
|
42
|
+
"color" in v) {
|
|
43
|
+
return true;
|
|
44
|
+
}
|
|
45
|
+
if (v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern) {
|
|
46
|
+
return true;
|
|
47
|
+
}
|
|
48
|
+
if (typeof v === "string") {
|
|
49
|
+
return hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v);
|
|
50
|
+
}
|
|
51
|
+
return false;
|
|
37
52
|
}
|
|
38
53
|
function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
|
|
39
|
-
|
|
54
|
+
// Unwrap signal if present
|
|
55
|
+
if ((0, Signal_1.isSignal)(v)) {
|
|
56
|
+
v = (0, Signal_1.unwrap)(v);
|
|
57
|
+
}
|
|
58
|
+
if (typeof v === "number")
|
|
40
59
|
return v;
|
|
41
|
-
if (typeof v ===
|
|
60
|
+
if (typeof v === "string") {
|
|
42
61
|
if (percentReg.test(v)) {
|
|
43
62
|
const base = options.layer
|
|
44
|
-
? options.vertical
|
|
45
|
-
|
|
63
|
+
? options.vertical
|
|
64
|
+
? layer.height
|
|
65
|
+
: layer.width
|
|
66
|
+
: options.vertical
|
|
67
|
+
? canvas.height
|
|
68
|
+
: canvas.width;
|
|
46
69
|
return (parseFloat(v) / 100) * base;
|
|
47
70
|
}
|
|
48
71
|
if (pxReg.test(v))
|
|
@@ -50,10 +73,14 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
|
|
|
50
73
|
if (canvasReg.test(v)) {
|
|
51
74
|
const base = options.layer ? layer : canvas;
|
|
52
75
|
switch (v) {
|
|
53
|
-
case
|
|
54
|
-
|
|
55
|
-
case
|
|
56
|
-
|
|
76
|
+
case "vw":
|
|
77
|
+
return base.width;
|
|
78
|
+
case "vh":
|
|
79
|
+
return base.height;
|
|
80
|
+
case "vmin":
|
|
81
|
+
return Math.min(base.width, base.height);
|
|
82
|
+
case "vmax":
|
|
83
|
+
return Math.max(base.width, base.height);
|
|
57
84
|
}
|
|
58
85
|
}
|
|
59
86
|
if (linkReg.test(v)) {
|
|
@@ -61,15 +88,19 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
|
|
|
61
88
|
if (!manager)
|
|
62
89
|
return 0;
|
|
63
90
|
const anyLayer = manager.get(match[2], true);
|
|
64
|
-
if (!anyLayer || anyLayer instanceof components_1.
|
|
91
|
+
if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
|
|
65
92
|
return 0;
|
|
66
93
|
const parserInstance = parser(ctx, canvas, manager);
|
|
67
94
|
const additionalSpacing = parseInt(match[3]) || 0;
|
|
68
95
|
switch (match[1]) {
|
|
69
|
-
case
|
|
70
|
-
|
|
71
|
-
case
|
|
72
|
-
|
|
96
|
+
case "link-w":
|
|
97
|
+
return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
|
|
98
|
+
case "link-h":
|
|
99
|
+
return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
|
|
100
|
+
case "link-x":
|
|
101
|
+
return parserInstance.parse(anyLayer.props.position.x) + additionalSpacing;
|
|
102
|
+
case "link-y":
|
|
103
|
+
return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
|
|
73
104
|
}
|
|
74
105
|
}
|
|
75
106
|
}
|
|
@@ -77,21 +108,27 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
|
|
|
77
108
|
if (!manager)
|
|
78
109
|
return 0;
|
|
79
110
|
const anyLayer = manager.get(v.source, true);
|
|
80
|
-
if (!anyLayer || anyLayer instanceof components_1.
|
|
111
|
+
if (!anyLayer || anyLayer instanceof components_1.Div || anyLayer instanceof components_1.Path2DLayer)
|
|
81
112
|
return 0;
|
|
82
113
|
const parserInstance = parser(ctx, canvas, manager);
|
|
83
114
|
const additionalSpacing = parserInstance.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0;
|
|
84
115
|
switch (v.type) {
|
|
85
|
-
case types_1.LinkType.Width:
|
|
86
|
-
|
|
87
|
-
case types_1.LinkType.
|
|
88
|
-
|
|
116
|
+
case types_1.LinkType.Width:
|
|
117
|
+
return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
|
|
118
|
+
case types_1.LinkType.Height:
|
|
119
|
+
return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
|
|
120
|
+
case types_1.LinkType.X:
|
|
121
|
+
return parserInstance.parse(anyLayer.props.position.x) + additionalSpacing;
|
|
122
|
+
case types_1.LinkType.Y:
|
|
123
|
+
return parserInstance.parse(anyLayer.props.position.y) + additionalSpacing;
|
|
89
124
|
}
|
|
90
125
|
}
|
|
91
126
|
return 0;
|
|
92
127
|
}
|
|
93
128
|
function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
|
|
94
|
-
if (anyLayer instanceof components_1.LineLayer ||
|
|
129
|
+
if (anyLayer instanceof components_1.LineLayer ||
|
|
130
|
+
anyLayer instanceof components_1.BezierLayer ||
|
|
131
|
+
anyLayer instanceof components_1.QuadraticLayer) {
|
|
95
132
|
return anyLayer.getBoundingBox(ctx, canvas, manager).width;
|
|
96
133
|
}
|
|
97
134
|
if (anyLayer instanceof components_1.TextLayer) {
|
|
@@ -100,13 +137,17 @@ function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
|
|
|
100
137
|
return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.width) || 0;
|
|
101
138
|
}
|
|
102
139
|
function getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) {
|
|
103
|
-
if (anyLayer instanceof components_1.LineLayer ||
|
|
140
|
+
if (anyLayer instanceof components_1.LineLayer ||
|
|
141
|
+
anyLayer instanceof components_1.BezierLayer ||
|
|
142
|
+
anyLayer instanceof components_1.QuadraticLayer) {
|
|
104
143
|
return anyLayer.getBoundingBox(ctx, canvas, manager).height;
|
|
105
144
|
}
|
|
106
145
|
if (anyLayer instanceof components_1.TextLayer) {
|
|
107
146
|
return anyLayer.measureText(ctx, canvas).height;
|
|
108
147
|
}
|
|
109
|
-
return anyLayer instanceof components_1.Path2DLayer
|
|
148
|
+
return anyLayer instanceof components_1.Path2DLayer
|
|
149
|
+
? 0
|
|
150
|
+
: parserInstance.parse(anyLayer.props.size.height) || 0;
|
|
110
151
|
}
|
|
111
152
|
function parser(ctx, canvas, manager) {
|
|
112
153
|
return {
|
|
@@ -120,44 +161,44 @@ function parser(ctx, canvas, manager) {
|
|
|
120
161
|
result[key] = parseToNormal(v, ctx, canvas, layer ?? LazyUtil_1.defaultArg.wh(), options ?? LazyUtil_1.defaultArg.vl(), manager);
|
|
121
162
|
}
|
|
122
163
|
return result;
|
|
123
|
-
}
|
|
164
|
+
},
|
|
124
165
|
};
|
|
125
166
|
}
|
|
126
|
-
function drawShadow(ctx, shadow) {
|
|
127
|
-
if (shadow) {
|
|
128
|
-
ctx.shadowColor = shadow.color;
|
|
129
|
-
ctx.shadowBlur = shadow.blur || 0;
|
|
130
|
-
ctx.shadowOffsetX = shadow.offsetX || 0;
|
|
131
|
-
ctx.shadowOffsetY = shadow.offsetY || 0;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
function opacity(ctx, opacity = 1) {
|
|
135
|
-
if (opacity < 1) {
|
|
136
|
-
ctx.globalAlpha = opacity;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
function filters(ctx, filters) {
|
|
140
|
-
if (filters) {
|
|
141
|
-
ctx.filter = filters;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
167
|
function parseFillStyle(ctx, color, opts) {
|
|
145
168
|
if (!ctx)
|
|
146
|
-
throw new LazyUtil_1.LazyError(
|
|
169
|
+
throw new LazyUtil_1.LazyError("The context is not defined");
|
|
147
170
|
if (!color)
|
|
148
|
-
throw new LazyUtil_1.LazyError(
|
|
171
|
+
throw new LazyUtil_1.LazyError("The color is not defined");
|
|
149
172
|
if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
|
|
150
173
|
return color.draw(ctx, opts);
|
|
151
174
|
}
|
|
152
|
-
if (
|
|
153
|
-
return
|
|
175
|
+
if ((0, Signal_1.isSignal)(color)) {
|
|
176
|
+
return parseFillStyle(ctx, (0, Signal_1.unwrap)(color), opts);
|
|
177
|
+
}
|
|
178
|
+
if (typeof color === "object" &&
|
|
179
|
+
color !== null &&
|
|
180
|
+
"start" in color &&
|
|
181
|
+
"end" in color &&
|
|
182
|
+
"color" in color) {
|
|
183
|
+
return (0, Signal_1.unwrap)(color.color);
|
|
154
184
|
}
|
|
155
|
-
|
|
185
|
+
if (typeof color === "string") {
|
|
156
186
|
return color;
|
|
157
187
|
}
|
|
158
|
-
return
|
|
188
|
+
return "#000000";
|
|
159
189
|
}
|
|
160
|
-
function transform(ctx, transform, layer = {
|
|
190
|
+
function transform(ctx, transform, layer = {
|
|
191
|
+
width: 0,
|
|
192
|
+
height: 0,
|
|
193
|
+
x: 0,
|
|
194
|
+
y: 0,
|
|
195
|
+
type: types_1.LayerType.Morph,
|
|
196
|
+
}, extra = {
|
|
197
|
+
text: "",
|
|
198
|
+
textAlign: types_1.TextAlign.Left,
|
|
199
|
+
fontSize: 0,
|
|
200
|
+
multiline: false,
|
|
201
|
+
}) {
|
|
161
202
|
if (transform) {
|
|
162
203
|
if (transform.translate) {
|
|
163
204
|
ctx.translate(transform.translate.x, transform.translate.y);
|
|
@@ -169,15 +210,16 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
|
|
|
169
210
|
case types_1.LayerType.BezierCurve:
|
|
170
211
|
case types_1.LayerType.QuadraticCurve:
|
|
171
212
|
case types_1.LayerType.Line:
|
|
172
|
-
|
|
213
|
+
case types_1.LayerType.Polygon:
|
|
214
|
+
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
|
|
173
215
|
ctx.rotate((Math.PI / 180) * transform.rotate);
|
|
174
|
-
ctx.translate(-(layer.x +
|
|
216
|
+
ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
|
|
175
217
|
break;
|
|
176
218
|
case types_1.LayerType.Text:
|
|
177
219
|
if (extra.multiline) {
|
|
178
|
-
ctx.translate(layer.x +
|
|
220
|
+
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
|
|
179
221
|
ctx.rotate((Math.PI / 180) * transform.rotate);
|
|
180
|
-
ctx.translate(-(layer.x +
|
|
222
|
+
ctx.translate(-(layer.x + layer.width / 2), -(layer.y + layer.height / 2));
|
|
181
223
|
}
|
|
182
224
|
else {
|
|
183
225
|
if (extra.textAlign === types_1.TextAlign.Center) {
|
|
@@ -203,8 +245,13 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
|
|
|
203
245
|
ctx.scale(transform.scale.x, transform.scale.y);
|
|
204
246
|
}
|
|
205
247
|
if (transform.matrix) {
|
|
206
|
-
if (!transform.matrix.a ||
|
|
207
|
-
|
|
248
|
+
if (!transform.matrix.a ||
|
|
249
|
+
!transform.matrix.b ||
|
|
250
|
+
!transform.matrix.c ||
|
|
251
|
+
!transform.matrix.d ||
|
|
252
|
+
!transform.matrix.e ||
|
|
253
|
+
!transform.matrix.f)
|
|
254
|
+
throw new LazyUtil_1.LazyError("The matrix transformation must be a valid matrix");
|
|
208
255
|
ctx.transform(transform.matrix.a, transform.matrix.b, transform.matrix.c, transform.matrix.d, transform.matrix.e, transform.matrix.f);
|
|
209
256
|
}
|
|
210
257
|
}
|
|
@@ -229,6 +276,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
229
276
|
case types_1.LayerType.Image:
|
|
230
277
|
case types_1.LayerType.Morph:
|
|
231
278
|
case types_1.LayerType.Clear:
|
|
279
|
+
case types_1.LayerType.Polygon:
|
|
232
280
|
x -= width / 2;
|
|
233
281
|
y -= height / 2;
|
|
234
282
|
break;
|
|
@@ -240,6 +288,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
240
288
|
case types_1.LayerType.Image:
|
|
241
289
|
case types_1.LayerType.Morph:
|
|
242
290
|
case types_1.LayerType.Clear:
|
|
291
|
+
case types_1.LayerType.Polygon:
|
|
243
292
|
x -= width / 2;
|
|
244
293
|
y -= height;
|
|
245
294
|
break;
|
|
@@ -251,6 +300,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
251
300
|
case types_1.LayerType.Image:
|
|
252
301
|
case types_1.LayerType.Morph:
|
|
253
302
|
case types_1.LayerType.Clear:
|
|
303
|
+
case types_1.LayerType.Polygon:
|
|
254
304
|
x -= width / 2;
|
|
255
305
|
y -= height;
|
|
256
306
|
break;
|
|
@@ -262,6 +312,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
262
312
|
case types_1.LayerType.Image:
|
|
263
313
|
case types_1.LayerType.Morph:
|
|
264
314
|
case types_1.LayerType.Clear:
|
|
315
|
+
case types_1.LayerType.Polygon:
|
|
265
316
|
y -= height / 2;
|
|
266
317
|
break;
|
|
267
318
|
}
|
|
@@ -272,6 +323,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
272
323
|
case types_1.LayerType.Image:
|
|
273
324
|
case types_1.LayerType.Morph:
|
|
274
325
|
case types_1.LayerType.Clear:
|
|
326
|
+
case types_1.LayerType.Polygon:
|
|
275
327
|
y -= height;
|
|
276
328
|
break;
|
|
277
329
|
}
|
|
@@ -285,6 +337,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
285
337
|
case types_1.LayerType.Image:
|
|
286
338
|
case types_1.LayerType.Morph:
|
|
287
339
|
case types_1.LayerType.Clear:
|
|
340
|
+
case types_1.LayerType.Polygon:
|
|
288
341
|
x -= width;
|
|
289
342
|
y -= height / 2;
|
|
290
343
|
break;
|
|
@@ -296,6 +349,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
296
349
|
case types_1.LayerType.Image:
|
|
297
350
|
case types_1.LayerType.Morph:
|
|
298
351
|
case types_1.LayerType.Clear:
|
|
352
|
+
case types_1.LayerType.Polygon:
|
|
299
353
|
x -= width;
|
|
300
354
|
y -= height;
|
|
301
355
|
break;
|
|
@@ -307,6 +361,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
307
361
|
case types_1.LayerType.Image:
|
|
308
362
|
case types_1.LayerType.Morph:
|
|
309
363
|
case types_1.LayerType.Clear:
|
|
364
|
+
case types_1.LayerType.Polygon:
|
|
310
365
|
x -= width;
|
|
311
366
|
break;
|
|
312
367
|
}
|
|
@@ -345,13 +400,23 @@ function getBoundingBoxBezier(points, steps = 100) {
|
|
|
345
400
|
maxX = Math.max(maxX, p.x);
|
|
346
401
|
maxY = Math.max(maxY, p.y);
|
|
347
402
|
}
|
|
348
|
-
return {
|
|
403
|
+
return {
|
|
404
|
+
min: { x: minX, y: minY },
|
|
405
|
+
max: { x: maxX, y: maxY },
|
|
406
|
+
center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 },
|
|
407
|
+
width: maxX - minX,
|
|
408
|
+
height: maxY - minY,
|
|
409
|
+
};
|
|
349
410
|
}
|
|
350
411
|
function resize(value, ratio) {
|
|
351
|
-
|
|
412
|
+
// Handle Signal - return as is (signals are not resized)
|
|
413
|
+
if ((0, Signal_1.isSignal)(value)) {
|
|
414
|
+
return resize((0, Signal_1.unwrap)(value), ratio);
|
|
415
|
+
}
|
|
416
|
+
if (typeof value === "number") {
|
|
352
417
|
return value * ratio;
|
|
353
418
|
}
|
|
354
|
-
else if (typeof value ===
|
|
419
|
+
else if (typeof value === "string") {
|
|
355
420
|
if (pxReg.test(value)) {
|
|
356
421
|
return parseFloat(value) * ratio;
|
|
357
422
|
}
|
|
@@ -359,46 +424,52 @@ function resize(value, ratio) {
|
|
|
359
424
|
let match = value.match(linkReg);
|
|
360
425
|
return `${match[1]}-${match[2]}-${parseFloat(match[3]) * ratio}`;
|
|
361
426
|
}
|
|
427
|
+
return value;
|
|
362
428
|
}
|
|
363
429
|
else if (value instanceof helpers_1.Link) {
|
|
364
430
|
return `${value.type}-${value.source}-${resize(value.additionalSpacing, ratio)}`;
|
|
365
431
|
}
|
|
366
|
-
return
|
|
432
|
+
return 0;
|
|
367
433
|
}
|
|
368
434
|
function resizeLayers(layers, ratio) {
|
|
369
435
|
let newLayers = [];
|
|
370
436
|
if (layers.length > 0) {
|
|
371
437
|
for (const layer of layers) {
|
|
372
|
-
if (!(layer instanceof components_1.
|
|
373
|
-
layer.props.x = resize(layer.props.x, ratio);
|
|
374
|
-
layer.props.y = resize(layer.props.y, ratio);
|
|
375
|
-
if (
|
|
438
|
+
if (!(layer instanceof components_1.Div || layer instanceof components_1.Path2DLayer)) {
|
|
439
|
+
layer.props.position.x = resize(layer.props.position.x, ratio);
|
|
440
|
+
layer.props.position.y = resize(layer.props.position.y, ratio);
|
|
441
|
+
if ("size" in layer.props && layer.props.size) {
|
|
376
442
|
layer.props.size.width = resize(layer.props.size.width, ratio);
|
|
377
443
|
layer.props.size.height = resize(layer.props.size.height, ratio);
|
|
378
|
-
if (
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
444
|
+
if ("radius" in layer.props.size) {
|
|
445
|
+
if (typeof layer.props.size.radius === "number") {
|
|
446
|
+
layer.props.size.radius = resize(layer.props.size.radius, ratio);
|
|
447
|
+
}
|
|
448
|
+
else if (typeof layer.props.size.radius === "object") {
|
|
449
|
+
for (const corner in layer.props.size.radius) {
|
|
450
|
+
// @ts-ignore
|
|
451
|
+
layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
|
|
452
|
+
}
|
|
382
453
|
}
|
|
383
454
|
}
|
|
384
455
|
}
|
|
385
|
-
if (
|
|
456
|
+
if ("stroke" in layer.props && layer.props.stroke) {
|
|
386
457
|
layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
|
|
387
458
|
}
|
|
388
|
-
if (
|
|
389
|
-
layer.props.
|
|
390
|
-
layer.props.
|
|
459
|
+
if ("endX" in layer.props.position && "endY" in layer.props.position) {
|
|
460
|
+
layer.props.position.endX = resize(layer.props.position.endX, ratio);
|
|
461
|
+
layer.props.position.endY = resize(layer.props.position.endY, ratio);
|
|
391
462
|
}
|
|
392
|
-
if (
|
|
463
|
+
if ("controlPoints" in layer.props) {
|
|
393
464
|
for (const point of layer.props.controlPoints) {
|
|
394
465
|
point.x = resize(point.x, ratio);
|
|
395
466
|
point.y = resize(point.y, ratio);
|
|
396
467
|
}
|
|
397
468
|
}
|
|
398
|
-
if (
|
|
469
|
+
if ("font" in layer.props) {
|
|
399
470
|
layer.props.font.size = resize(layer.props.font.size, ratio);
|
|
400
471
|
}
|
|
401
|
-
if (
|
|
472
|
+
if ("transform" in layer.props && layer.props.transform) {
|
|
402
473
|
if (layer.props.transform.translate) {
|
|
403
474
|
layer.props.transform.translate.x = resize(layer.props.transform.translate.x, ratio);
|
|
404
475
|
layer.props.transform.translate.y = resize(layer.props.transform.translate.y, ratio);
|
|
@@ -409,7 +480,7 @@ function resizeLayers(layers, ratio) {
|
|
|
409
480
|
}
|
|
410
481
|
}
|
|
411
482
|
}
|
|
412
|
-
else if (layer instanceof components_1.
|
|
483
|
+
else if (layer instanceof components_1.Div) {
|
|
413
484
|
layer.layers = resizeLayers(layer.layers, ratio);
|
|
414
485
|
}
|
|
415
486
|
newLayers.push(layer);
|
package/package.json
CHANGED
|
@@ -1,59 +1,62 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@nmmty/lazycanvas",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
|
|
5
|
-
"main": "./dist/index.js",
|
|
6
|
-
"types": "./dist/index.d.ts",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@nmmty/lazycanvas",
|
|
3
|
+
"version": "1.0.0-dev.3",
|
|
4
|
+
"description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/NMMTY/LazyCanvas.git"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"canvas",
|
|
13
|
+
"@napi-rs/canvas",
|
|
14
|
+
"node-canvas",
|
|
15
|
+
"easy",
|
|
16
|
+
"simple"
|
|
17
|
+
],
|
|
18
|
+
"author": "NMMTY",
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/NMMTY/LazyCanvas/issues"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://github.com/NMMTY/LazyCanvas#readme",
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@napi-rs/canvas": "^0.1.88",
|
|
26
|
+
"gifenc": "^1.0.3",
|
|
27
|
+
"js-yaml": "^4.1.0",
|
|
28
|
+
"path": "^0.12.7",
|
|
29
|
+
"svgson": "^5.3.1",
|
|
30
|
+
"zlib": "^1.0.5"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@biomejs/biome": "1.9.4",
|
|
34
|
+
"@hitomihiumi/colors.ts": "^1.0.3",
|
|
35
|
+
"@types/js-yaml": "^4.0.9",
|
|
36
|
+
"@types/node": "^22.10.2",
|
|
37
|
+
"@typescript-eslint/utils": "^8.39.1",
|
|
38
|
+
"ava": "^6.2.0",
|
|
39
|
+
"eslint": "^9.23.0",
|
|
40
|
+
"eslint-config-neon": "^0.2.7",
|
|
41
|
+
"lodash.merge": "^4.6.2",
|
|
42
|
+
"tslib": "^2.8.1",
|
|
43
|
+
"tsx": "^4.19.2",
|
|
44
|
+
"typescript": "^5.4.5",
|
|
45
|
+
"@hitomihiumi/micro-docgen": "0.4.2"
|
|
46
|
+
},
|
|
47
|
+
"scripts": {
|
|
48
|
+
"test": "tsc ./test/test.ts && node ./test/test.js",
|
|
49
|
+
"centring": "tsc ./test/centring.ts && node ./test/centring.js",
|
|
50
|
+
"logo": "tsc ./test/logo.ts && node ./test/logo.js",
|
|
51
|
+
"text": "tsc ./test/text.ts && node ./test/text.js",
|
|
52
|
+
"animation": "tsc ./test/animation.ts && node ./test/animation.js",
|
|
53
|
+
"iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
|
|
54
|
+
"gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
|
|
55
|
+
"docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
|
|
56
|
+
"lint": "eslint ./src --ext .ts",
|
|
57
|
+
"lint:fix": "eslint ./src --ext .ts --fix",
|
|
58
|
+
"font": "tsx ./scripts/font-gen.ts",
|
|
59
|
+
"build": "tsc && tsx ./scripts/post-build.ts",
|
|
60
|
+
"biome-write": "npx @biomejs/biome format --write ."
|
|
61
|
+
}
|
|
62
|
+
}
|