@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.10
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/dist/core/Interpolation.d.ts +30 -0
- package/dist/core/Interpolation.js +200 -0
- package/dist/core/Scene.d.ts +94 -0
- package/dist/core/Scene.js +157 -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/core/index.d.ts +5 -0
- package/dist/core/index.js +21 -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 +25 -36
- package/dist/helpers/index.d.ts +3 -3
- package/dist/index.d.ts +4 -1
- package/dist/index.js +4 -1
- package/dist/jsx-runtime.d.ts +17 -0
- package/dist/jsx-runtime.js +111 -0
- package/dist/structures/LazyCanvas.d.ts +10 -48
- package/dist/structures/LazyCanvas.js +17 -78
- package/dist/structures/components/BaseLayer.d.ts +78 -32
- package/dist/structures/components/BaseLayer.js +106 -37
- package/dist/structures/components/BezierLayer.d.ts +27 -40
- package/dist/structures/components/BezierLayer.js +90 -55
- package/dist/structures/components/{Group.d.ts → Div.d.ts} +41 -22
- package/dist/structures/components/Div.js +202 -0
- package/dist/structures/components/ImageLayer.d.ts +2 -2
- package/dist/structures/components/ImageLayer.js +29 -30
- package/dist/structures/components/LineLayer.d.ts +20 -38
- package/dist/structures/components/LineLayer.js +45 -47
- package/dist/structures/components/MorphLayer.d.ts +5 -34
- package/dist/structures/components/MorphLayer.js +38 -52
- package/dist/structures/components/Path2DLayer.d.ts +7 -35
- package/dist/structures/components/Path2DLayer.js +32 -41
- package/dist/structures/components/PolygonLayer.d.ts +95 -0
- package/dist/structures/components/PolygonLayer.js +203 -0
- package/dist/structures/components/QuadraticLayer.d.ts +36 -45
- package/dist/structures/components/QuadraticLayer.js +90 -54
- package/dist/structures/components/TextLayer.d.ts +17 -46
- package/dist/structures/components/TextLayer.js +94 -77
- 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 +82 -46
- package/dist/structures/helpers/Font.js +1 -17
- package/dist/structures/helpers/Gradient.js +35 -49
- package/dist/structures/helpers/Link.js +2 -14
- package/dist/structures/helpers/Pattern.js +10 -18
- 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 +46 -48
- package/dist/structures/helpers/readers/YAMLReader.js +11 -11
- 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/LayoutManager.d.ts +23 -0
- package/dist/structures/managers/LayoutManager.js +409 -0
- package/dist/structures/managers/index.d.ts +3 -5
- package/dist/structures/managers/index.js +1 -3
- package/dist/structures/managers/{RenderManager.d.ts → piplines/ClassicRenderPipeline.d.ts} +4 -30
- package/dist/structures/managers/piplines/ClassicRenderPipeline.js +90 -0
- package/dist/structures/managers/piplines/ModernRenderPipeline.d.ts +44 -0
- package/dist/structures/managers/piplines/ModernRenderPipeline.js +123 -0
- package/dist/structures/managers/piplines/index.d.ts +24 -0
- package/dist/structures/managers/piplines/index.js +18 -0
- 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/types/types.d.ts +257 -105
- 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/index.d.ts +4 -0
- package/dist/utils/index.js +20 -0
- package/dist/utils/utils.d.ts +5 -9
- package/dist/utils/utils.js +154 -78
- package/package.json +61 -59
- package/dist/structures/components/ClearLayer.d.ts +0 -147
- package/dist/structures/components/ClearLayer.js +0 -158
- package/dist/structures/components/Group.js +0 -153
- 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/structures/managers/RenderManager.js +0 -183
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 core_1 = require("../core");
|
|
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, core_1.isSignal)(v)) {
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
37
|
+
if (typeof v === "object" &&
|
|
38
|
+
v !== null &&
|
|
39
|
+
!(0, core_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, core_1.isSignal)(v)) {
|
|
56
|
+
v = (0, core_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 || 0) + additionalSpacing;
|
|
102
|
+
case "link-y":
|
|
103
|
+
return parserInstance.parse(anyLayer.props.position?.y || 0) + 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 || 0) + additionalSpacing;
|
|
122
|
+
case types_1.LinkType.Y:
|
|
123
|
+
return parserInstance.parse(anyLayer.props.position?.y || 0) + 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, core_1.isSignal)(color)) {
|
|
176
|
+
return parseFillStyle(ctx, (0, core_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, core_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,8 +288,8 @@ 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
|
-
y -= height;
|
|
245
293
|
break;
|
|
246
294
|
}
|
|
247
295
|
return { x, y };
|
|
@@ -251,6 +299,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
251
299
|
case types_1.LayerType.Image:
|
|
252
300
|
case types_1.LayerType.Morph:
|
|
253
301
|
case types_1.LayerType.Clear:
|
|
302
|
+
case types_1.LayerType.Polygon:
|
|
254
303
|
x -= width / 2;
|
|
255
304
|
y -= height;
|
|
256
305
|
break;
|
|
@@ -262,6 +311,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
262
311
|
case types_1.LayerType.Image:
|
|
263
312
|
case types_1.LayerType.Morph:
|
|
264
313
|
case types_1.LayerType.Clear:
|
|
314
|
+
case types_1.LayerType.Polygon:
|
|
265
315
|
y -= height / 2;
|
|
266
316
|
break;
|
|
267
317
|
}
|
|
@@ -272,6 +322,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
272
322
|
case types_1.LayerType.Image:
|
|
273
323
|
case types_1.LayerType.Morph:
|
|
274
324
|
case types_1.LayerType.Clear:
|
|
325
|
+
case types_1.LayerType.Polygon:
|
|
275
326
|
y -= height;
|
|
276
327
|
break;
|
|
277
328
|
}
|
|
@@ -285,6 +336,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
285
336
|
case types_1.LayerType.Image:
|
|
286
337
|
case types_1.LayerType.Morph:
|
|
287
338
|
case types_1.LayerType.Clear:
|
|
339
|
+
case types_1.LayerType.Polygon:
|
|
288
340
|
x -= width;
|
|
289
341
|
y -= height / 2;
|
|
290
342
|
break;
|
|
@@ -296,6 +348,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
296
348
|
case types_1.LayerType.Image:
|
|
297
349
|
case types_1.LayerType.Morph:
|
|
298
350
|
case types_1.LayerType.Clear:
|
|
351
|
+
case types_1.LayerType.Polygon:
|
|
299
352
|
x -= width;
|
|
300
353
|
y -= height;
|
|
301
354
|
break;
|
|
@@ -307,6 +360,7 @@ function centring(centring, type, width, height, x, y) {
|
|
|
307
360
|
case types_1.LayerType.Image:
|
|
308
361
|
case types_1.LayerType.Morph:
|
|
309
362
|
case types_1.LayerType.Clear:
|
|
363
|
+
case types_1.LayerType.Polygon:
|
|
310
364
|
x -= width;
|
|
311
365
|
break;
|
|
312
366
|
}
|
|
@@ -345,13 +399,23 @@ function getBoundingBoxBezier(points, steps = 100) {
|
|
|
345
399
|
maxX = Math.max(maxX, p.x);
|
|
346
400
|
maxY = Math.max(maxY, p.y);
|
|
347
401
|
}
|
|
348
|
-
return {
|
|
402
|
+
return {
|
|
403
|
+
min: { x: minX, y: minY },
|
|
404
|
+
max: { x: maxX, y: maxY },
|
|
405
|
+
center: { x: (minX + maxX) / 2, y: (minY + maxY) / 2 },
|
|
406
|
+
width: maxX - minX,
|
|
407
|
+
height: maxY - minY,
|
|
408
|
+
};
|
|
349
409
|
}
|
|
350
410
|
function resize(value, ratio) {
|
|
351
|
-
|
|
411
|
+
// Handle Signal - return as is (signals are not resized)
|
|
412
|
+
if ((0, core_1.isSignal)(value)) {
|
|
413
|
+
return resize((0, core_1.unwrap)(value), ratio);
|
|
414
|
+
}
|
|
415
|
+
if (typeof value === "number") {
|
|
352
416
|
return value * ratio;
|
|
353
417
|
}
|
|
354
|
-
else if (typeof value ===
|
|
418
|
+
else if (typeof value === "string") {
|
|
355
419
|
if (pxReg.test(value)) {
|
|
356
420
|
return parseFloat(value) * ratio;
|
|
357
421
|
}
|
|
@@ -359,46 +423,58 @@ function resize(value, ratio) {
|
|
|
359
423
|
let match = value.match(linkReg);
|
|
360
424
|
return `${match[1]}-${match[2]}-${parseFloat(match[3]) * ratio}`;
|
|
361
425
|
}
|
|
426
|
+
return value;
|
|
362
427
|
}
|
|
363
428
|
else if (value instanceof helpers_1.Link) {
|
|
364
429
|
return `${value.type}-${value.source}-${resize(value.additionalSpacing, ratio)}`;
|
|
365
430
|
}
|
|
366
|
-
return
|
|
431
|
+
return 0;
|
|
367
432
|
}
|
|
368
433
|
function resizeLayers(layers, ratio) {
|
|
369
434
|
let newLayers = [];
|
|
370
435
|
if (layers.length > 0) {
|
|
371
436
|
for (const layer of layers) {
|
|
372
|
-
if (!(layer instanceof components_1.
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
437
|
+
if (!(layer instanceof components_1.Div || layer instanceof components_1.Path2DLayer)) {
|
|
438
|
+
if (layer.props.position) {
|
|
439
|
+
layer.props.position.x = resize(layer.props.position.x, ratio);
|
|
440
|
+
layer.props.position.y = resize(layer.props.position.y, ratio);
|
|
441
|
+
}
|
|
442
|
+
if ("size" in layer.props && layer.props.size) {
|
|
376
443
|
layer.props.size.width = resize(layer.props.size.width, ratio);
|
|
377
444
|
layer.props.size.height = resize(layer.props.size.height, ratio);
|
|
378
|
-
if (
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
445
|
+
if ("radius" in layer.props.size) {
|
|
446
|
+
if (typeof layer.props.size.radius === "number") {
|
|
447
|
+
layer.props.size.radius = resize(layer.props.size.radius, ratio);
|
|
448
|
+
}
|
|
449
|
+
else if (typeof layer.props.size.radius === "object") {
|
|
450
|
+
for (const corner in layer.props.size.radius) {
|
|
451
|
+
// @ts-ignore
|
|
452
|
+
layer.props.size.radius[corner] = resize(
|
|
453
|
+
// @ts-ignore
|
|
454
|
+
layer.props.size.radius[corner], ratio);
|
|
455
|
+
}
|
|
382
456
|
}
|
|
383
457
|
}
|
|
384
458
|
}
|
|
385
|
-
if (
|
|
459
|
+
if ("stroke" in layer.props && layer.props.stroke) {
|
|
386
460
|
layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
|
|
387
461
|
}
|
|
388
|
-
if (
|
|
389
|
-
|
|
390
|
-
|
|
462
|
+
if (layer.props.position &&
|
|
463
|
+
"endX" in layer.props.position &&
|
|
464
|
+
"endY" in layer.props.position) {
|
|
465
|
+
layer.props.position.endX = resize(layer.props.position.endX, ratio);
|
|
466
|
+
layer.props.position.endY = resize(layer.props.position.endY, ratio);
|
|
391
467
|
}
|
|
392
|
-
if (
|
|
468
|
+
if ("controlPoints" in layer.props) {
|
|
393
469
|
for (const point of layer.props.controlPoints) {
|
|
394
470
|
point.x = resize(point.x, ratio);
|
|
395
471
|
point.y = resize(point.y, ratio);
|
|
396
472
|
}
|
|
397
473
|
}
|
|
398
|
-
if (
|
|
474
|
+
if ("font" in layer.props) {
|
|
399
475
|
layer.props.font.size = resize(layer.props.font.size, ratio);
|
|
400
476
|
}
|
|
401
|
-
if (
|
|
477
|
+
if ("transform" in layer.props && layer.props.transform) {
|
|
402
478
|
if (layer.props.transform.translate) {
|
|
403
479
|
layer.props.transform.translate.x = resize(layer.props.transform.translate.x, ratio);
|
|
404
480
|
layer.props.transform.translate.y = resize(layer.props.transform.translate.y, ratio);
|
|
@@ -409,7 +485,7 @@ function resizeLayers(layers, ratio) {
|
|
|
409
485
|
}
|
|
410
486
|
}
|
|
411
487
|
}
|
|
412
|
-
else if (layer instanceof components_1.
|
|
488
|
+
else if (layer instanceof components_1.Div) {
|
|
413
489
|
layer.layers = resizeLayers(layer.layers, ratio);
|
|
414
490
|
}
|
|
415
491
|
newLayers.push(layer);
|
package/package.json
CHANGED
|
@@ -1,59 +1,61 @@
|
|
|
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.10",
|
|
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
|
+
"svgson": "^5.3.1",
|
|
29
|
+
"yoga-layout": "^3.2.1"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@biomejs/biome": "1.9.4",
|
|
33
|
+
"@hitomihiumi/colors.ts": "^1.0.3",
|
|
34
|
+
"@types/js-yaml": "^4.0.9",
|
|
35
|
+
"@types/node": "^22.10.2",
|
|
36
|
+
"@typescript-eslint/utils": "^8.39.1",
|
|
37
|
+
"ava": "^6.2.0",
|
|
38
|
+
"eslint": "^9.23.0",
|
|
39
|
+
"eslint-config-neon": "^0.2.7",
|
|
40
|
+
"lodash.merge": "^4.6.2",
|
|
41
|
+
"tslib": "^2.8.1",
|
|
42
|
+
"tsx": "^4.19.2",
|
|
43
|
+
"typescript": "^5.4.5",
|
|
44
|
+
"@hitomihiumi/micro-docgen": "0.4.2"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"test": "tsc ./test/test.ts && node ./test/test.js",
|
|
48
|
+
"centring": "tsc ./test/centring.ts && node ./test/centring.js",
|
|
49
|
+
"logo": "tsc ./test/logo.ts && node ./test/logo.js",
|
|
50
|
+
"text": "tsc ./test/text.ts && node ./test/text.js",
|
|
51
|
+
"animation": "tsc ./test/animation.ts && node ./test/animation.js",
|
|
52
|
+
"iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
|
|
53
|
+
"gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
|
|
54
|
+
"docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
|
|
55
|
+
"lint": "eslint ./src --ext .ts",
|
|
56
|
+
"lint:fix": "eslint ./src --ext .ts --fix",
|
|
57
|
+
"font": "tsx ./scripts/font-gen.ts",
|
|
58
|
+
"build": "tsc && tsx ./scripts/post-build.ts",
|
|
59
|
+
"biome-write": "npx @biomejs/biome format --write ."
|
|
60
|
+
}
|
|
61
|
+
}
|