@meonode/canvas 1.0.0-beta.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/canvas/canvas.helper.d.ts +9 -11
- package/dist/cjs/canvas/canvas.helper.d.ts.map +1 -1
- package/dist/cjs/canvas/canvas.helper.js +39 -47
- package/dist/cjs/canvas/canvas.helper.js.map +1 -1
- package/dist/cjs/canvas/canvas.type.d.ts +1 -1
- package/dist/cjs/canvas/canvas.type.d.ts.map +1 -1
- package/dist/cjs/canvas/grid.canvas.util.d.ts +4 -4
- package/dist/cjs/canvas/grid.canvas.util.d.ts.map +1 -1
- package/dist/cjs/canvas/grid.canvas.util.js +21 -4
- package/dist/cjs/canvas/grid.canvas.util.js.map +1 -1
- package/dist/cjs/canvas/image.canvas.util.d.ts +0 -1
- package/dist/cjs/canvas/image.canvas.util.d.ts.map +1 -1
- package/dist/cjs/canvas/image.canvas.util.js +72 -72
- package/dist/cjs/canvas/image.canvas.util.js.map +1 -1
- package/dist/cjs/canvas/layout.canvas.util.d.ts +16 -17
- package/dist/cjs/canvas/layout.canvas.util.d.ts.map +1 -1
- package/dist/cjs/canvas/layout.canvas.util.js +17 -24
- package/dist/cjs/canvas/layout.canvas.util.js.map +1 -1
- package/dist/cjs/canvas/root.canvas.util.d.ts +4 -2
- package/dist/cjs/canvas/root.canvas.util.d.ts.map +1 -1
- package/dist/cjs/canvas/root.canvas.util.js +7 -3
- package/dist/cjs/canvas/root.canvas.util.js.map +1 -1
- package/dist/cjs/canvas/text.canvas.util.d.ts +20 -27
- package/dist/cjs/canvas/text.canvas.util.d.ts.map +1 -1
- package/dist/cjs/canvas/text.canvas.util.js +27 -45
- package/dist/cjs/canvas/text.canvas.util.js.map +1 -1
- package/dist/esm/canvas/canvas.helper.d.ts +9 -11
- package/dist/esm/canvas/canvas.helper.d.ts.map +1 -1
- package/dist/esm/canvas/canvas.helper.js +39 -47
- package/dist/esm/canvas/canvas.type.d.ts +1 -1
- package/dist/esm/canvas/canvas.type.d.ts.map +1 -1
- package/dist/esm/canvas/grid.canvas.util.d.ts +4 -4
- package/dist/esm/canvas/grid.canvas.util.d.ts.map +1 -1
- package/dist/esm/canvas/grid.canvas.util.js +21 -4
- package/dist/esm/canvas/image.canvas.util.d.ts +0 -1
- package/dist/esm/canvas/image.canvas.util.d.ts.map +1 -1
- package/dist/esm/canvas/image.canvas.util.js +72 -72
- package/dist/esm/canvas/layout.canvas.util.d.ts +16 -17
- package/dist/esm/canvas/layout.canvas.util.d.ts.map +1 -1
- package/dist/esm/canvas/layout.canvas.util.js +17 -24
- package/dist/esm/canvas/root.canvas.util.d.ts +4 -2
- package/dist/esm/canvas/root.canvas.util.d.ts.map +1 -1
- package/dist/esm/canvas/root.canvas.util.js +7 -3
- package/dist/esm/canvas/text.canvas.util.d.ts +20 -27
- package/dist/esm/canvas/text.canvas.util.d.ts.map +1 -1
- package/dist/esm/canvas/text.canvas.util.js +27 -45
- package/package.json +5 -9
|
@@ -32,14 +32,13 @@ const drawBorders = ({ ctx, node, x, y, width, height, radii, borderColor, borde
|
|
|
32
32
|
};
|
|
33
33
|
/**
|
|
34
34
|
* Draws a rounded corner arc for the border.
|
|
35
|
-
*
|
|
36
|
-
* @param
|
|
37
|
-
* @param
|
|
38
|
-
* @param
|
|
39
|
-
* @param
|
|
40
|
-
* @param
|
|
41
|
-
* @param
|
|
42
|
-
* @param border2 - The border width leading out of the corner.
|
|
35
|
+
* @param cx The x-coordinate of the visual center of the corner curve.
|
|
36
|
+
* @param cy The y-coordinate of the visual center of the corner curve.
|
|
37
|
+
* @param radius The visual radius of the corner curve.
|
|
38
|
+
* @param startAngle The starting angle of the arc in radians.
|
|
39
|
+
* @param endAngle The ending angle of the arc in radians.
|
|
40
|
+
* @param border1 The border width leading into the corner.
|
|
41
|
+
* @param border2 The border width leading out of the corner.
|
|
43
42
|
*/
|
|
44
43
|
const drawCornerArc = (cx, cy, radius, startAngle, endAngle, border1, border2) => {
|
|
45
44
|
if (radius <= 0)
|
|
@@ -75,12 +74,11 @@ const drawBorders = ({ ctx, node, x, y, width, height, radii, borderColor, borde
|
|
|
75
74
|
};
|
|
76
75
|
/**
|
|
77
76
|
* Draws a straight line segment for the border.
|
|
78
|
-
*
|
|
79
|
-
* @param
|
|
80
|
-
* @param
|
|
81
|
-
* @param
|
|
82
|
-
* @param
|
|
83
|
-
* @param borderWidth - The width of the border.
|
|
77
|
+
* @param x1 The x-coordinate of the starting point.
|
|
78
|
+
* @param y1 The y-coordinate of the starting point.
|
|
79
|
+
* @param x2 The x-coordinate of the ending point.
|
|
80
|
+
* @param y2 The y-coordinate of the ending point.
|
|
81
|
+
* @param borderWidth The width of the border.
|
|
84
82
|
*/
|
|
85
83
|
const drawLine = (x1, y1, x2, y2, borderWidth) => {
|
|
86
84
|
if (borderWidth <= 0)
|
|
@@ -108,34 +106,34 @@ const drawBorders = ({ ctx, node, x, y, width, height, radii, borderColor, borde
|
|
|
108
106
|
// For content-box, coordinates are offset *outwards* from x, y, width, height
|
|
109
107
|
if (boxSizing === Style.BoxSizing.ContentBox) {
|
|
110
108
|
// Top line segment
|
|
111
|
-
drawLine(x + rTL, y - halfBt, x + width - rTR, y - halfBt, borderTop);
|
|
109
|
+
void drawLine(x + rTL, y - halfBt, x + width - rTR, y - halfBt, borderTop);
|
|
112
110
|
// Right line segment
|
|
113
|
-
drawLine(x + width + halfBr, y + rTR, x + width + halfBr, y + height - rBR, borderRight);
|
|
111
|
+
void drawLine(x + width + halfBr, y + rTR, x + width + halfBr, y + height - rBR, borderRight);
|
|
114
112
|
// Bottom line segment
|
|
115
|
-
drawLine(x + width - rBR, y + height + halfBb, x + rBL, y + height + halfBb, borderBottom);
|
|
113
|
+
void drawLine(x + width - rBR, y + height + halfBb, x + rBL, y + height + halfBb, borderBottom);
|
|
116
114
|
// Left line segment
|
|
117
|
-
drawLine(x - halfBl, y + height - rBL, x - halfBl, y + rTL, borderLeft);
|
|
118
|
-
drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop);
|
|
119
|
-
drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight);
|
|
120
|
-
drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom);
|
|
121
|
-
drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft);
|
|
115
|
+
void drawLine(x - halfBl, y + height - rBL, x - halfBl, y + rTL, borderLeft);
|
|
116
|
+
void drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop);
|
|
117
|
+
void drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight);
|
|
118
|
+
void drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom);
|
|
119
|
+
void drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft);
|
|
122
120
|
}
|
|
123
121
|
else {
|
|
124
122
|
// For border-box, coordinates are offset *inwards* from x, y, width, height
|
|
125
123
|
// Top line segment
|
|
126
|
-
drawLine(x + rTL, y + halfBt, x + width - rTR, y + halfBt, borderTop);
|
|
124
|
+
void drawLine(x + rTL, y + halfBt, x + width - rTR, y + halfBt, borderTop);
|
|
127
125
|
// Right line segment
|
|
128
|
-
drawLine(x + width - halfBr, y + rTR, x + width - halfBr, y + height - rBR, borderRight);
|
|
126
|
+
void drawLine(x + width - halfBr, y + rTR, x + width - halfBr, y + height - rBR, borderRight);
|
|
129
127
|
// Bottom line segment
|
|
130
|
-
drawLine(x + width - rBR, y + height - halfBb, x + rBL, y + height - halfBb, borderBottom);
|
|
128
|
+
void drawLine(x + width - rBR, y + height - halfBb, x + rBL, y + height - halfBb, borderBottom);
|
|
131
129
|
// Left line segment
|
|
132
|
-
drawLine(x + halfBl, y + height - rBL, x + halfBl, y + rTL, borderLeft);
|
|
130
|
+
void drawLine(x + halfBl, y + height - rBL, x + halfBl, y + rTL, borderLeft);
|
|
133
131
|
// Draw corner arcs (centers relative to layout box corners, adjusted for inward border)
|
|
134
132
|
// Pass visual radius (rTL, rTR etc.) to drawCornerArc
|
|
135
|
-
drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop); // Top-Left
|
|
136
|
-
drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight); // Top-Right
|
|
137
|
-
drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom); // Bottom-Right
|
|
138
|
-
drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft); // Bottom-Left
|
|
133
|
+
void drawCornerArc(x + rTL, y + rTL, rTL, Math.PI, 1.5 * Math.PI, borderLeft, borderTop); // Top-Left
|
|
134
|
+
void drawCornerArc(x + width - rTR, y + rTR, rTR, 1.5 * Math.PI, 2 * Math.PI, borderTop, borderRight); // Top-Right
|
|
135
|
+
void drawCornerArc(x + width - rBR, y + height - rBR, rBR, 0, 0.5 * Math.PI, borderRight, borderBottom); // Bottom-Right
|
|
136
|
+
void drawCornerArc(x + rBL, y + height - rBL, rBL, 0.5 * Math.PI, Math.PI, borderBottom, borderLeft); // Bottom-Left
|
|
139
137
|
}
|
|
140
138
|
}
|
|
141
139
|
};
|
|
@@ -143,13 +141,12 @@ const drawBorders = ({ ctx, node, x, y, width, height, radii, borderColor, borde
|
|
|
143
141
|
* Draws an optimized rounded rectangle path on the canvas context.
|
|
144
142
|
* Automatically clamps radius values to prevent visual artifacts based on box dimensions.
|
|
145
143
|
* Uses arc-based rendering for crisp corners and consistent border appearance.
|
|
146
|
-
*
|
|
147
|
-
* @param
|
|
148
|
-
* @param
|
|
149
|
-
* @param
|
|
150
|
-
* @param
|
|
151
|
-
* @param
|
|
152
|
-
* @param radii - Corner radius values for each corner. Values are clamped to box constraints.
|
|
144
|
+
* @param ctx The canvas 2D rendering context to draw on
|
|
145
|
+
* @param x Left position of the rectangle
|
|
146
|
+
* @param y Top position of the rectangle
|
|
147
|
+
* @param width Width of the rectangle
|
|
148
|
+
* @param height Height of the rectangle
|
|
149
|
+
* @param radii Corner radius values for each corner. Values are clamped to box constraints.
|
|
153
150
|
*/
|
|
154
151
|
const drawRoundedRectPath = (ctx, x, y, width, height, radii) => {
|
|
155
152
|
if (width <= 0 || height <= 0) {
|
|
@@ -170,14 +167,10 @@ const drawRoundedRectPath = (ctx, x, y, width, height, radii) => {
|
|
|
170
167
|
clampedTR > 0 ? ctx.arc(x + width - clampedTR, y + clampedTR, clampedTR, 1.5 * Math.PI, 0) : ctx.lineTo(x + width, y);
|
|
171
168
|
// Draw right edge and bottom-right corner
|
|
172
169
|
ctx.lineTo(x + width, y + height - clampedBR);
|
|
173
|
-
clampedBR > 0
|
|
174
|
-
? ctx.arc(x + width - clampedBR, y + height - clampedBR, clampedBR, 0, 0.5 * Math.PI)
|
|
175
|
-
: ctx.lineTo(x + width, y + height);
|
|
170
|
+
clampedBR > 0 ? ctx.arc(x + width - clampedBR, y + height - clampedBR, clampedBR, 0, 0.5 * Math.PI) : ctx.lineTo(x + width, y + height);
|
|
176
171
|
// Draw bottom edge and bottom-left corner
|
|
177
172
|
ctx.lineTo(x + clampedBL, y + height);
|
|
178
|
-
clampedBL > 0
|
|
179
|
-
? ctx.arc(x + clampedBL, y + height - clampedBL, clampedBL, 0.5 * Math.PI, Math.PI)
|
|
180
|
-
: ctx.lineTo(x, y + height);
|
|
173
|
+
clampedBL > 0 ? ctx.arc(x + clampedBL, y + height - clampedBL, clampedBL, 0.5 * Math.PI, Math.PI) : ctx.lineTo(x, y + height);
|
|
181
174
|
// Draw left edge and top-left corner
|
|
182
175
|
ctx.lineTo(x, y + clampedTL);
|
|
183
176
|
clampedTL > 0 ? ctx.arc(x + clampedTL, y + clampedTL, clampedTL, Math.PI, 1.5 * Math.PI) : ctx.lineTo(x, y);
|
|
@@ -185,7 +178,7 @@ const drawRoundedRectPath = (ctx, x, y, width, height, radii) => {
|
|
|
185
178
|
};
|
|
186
179
|
/**
|
|
187
180
|
* Calculates border radius values from props
|
|
188
|
-
* @param radiusProp
|
|
181
|
+
* @param radiusProp Border radius property value
|
|
189
182
|
* @returns Calculated border radii for all corners
|
|
190
183
|
*/
|
|
191
184
|
const parseBorderRadius = (radiusProp) => {
|
|
@@ -203,9 +196,8 @@ const parseBorderRadius = (radiusProp) => {
|
|
|
203
196
|
};
|
|
204
197
|
/**
|
|
205
198
|
* Parses a percentage value or a number, returning the calculated value based on the base.
|
|
206
|
-
*
|
|
207
|
-
* @param
|
|
208
|
-
* @param base - The base value to calculate the percentage from.
|
|
199
|
+
* @param value The value to parse, can be a number, a percentage string, or undefined.
|
|
200
|
+
* @param base The base value to calculate the percentage from.
|
|
209
201
|
* @returns The parsed number, or 0 if the value is not a number or a valid percentage.
|
|
210
202
|
*/
|
|
211
203
|
function parsePercentage(value, base) {
|
|
@@ -650,7 +650,7 @@ export interface ImageProps extends Omit<BoxProps, 'children'> {
|
|
|
650
650
|
onLoad?: () => void;
|
|
651
651
|
/**
|
|
652
652
|
* Callback function that executes when the image fails to load.
|
|
653
|
-
* @param error
|
|
653
|
+
* @param error The error that occurred during loading.
|
|
654
654
|
*/
|
|
655
655
|
onError?: (error: Error) => void;
|
|
656
656
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.type.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,4BAA4B,CAAA;AAEnD,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"canvas.type.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,4BAA4B,CAAA;AAEnD,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;AAEpF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAElC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAElC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAEhC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAEjC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAEhC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAEjC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAEnC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAA;IAE9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,KAAK,CAAA;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,CAAA;IAEvB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,KAAK,CAAA;IAE1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE1C;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAEjC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAElG;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAA;IAElH;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAEjG;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,CAAA;IAElE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,MAAM,EAAE,CAAA;IAEnC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAA;IAEjG;;;;;OAKG;IACH,YAAY,CAAC,EACT,OAAO,CAAC;QACN,OAAO,EAAE,MAAM,CAAA;QACf,QAAQ,EAAE,MAAM,CAAA;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,WAAW,EAAE,MAAM,CAAA;KACpB,CAAC,GACF,MAAM,CAAA;IAEV;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAA;IAEzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAA;IAEvB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAA;IAErB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE/F;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;;;OAKG;IACH,QAAQ,CAAC,EACL;QACE,IAAI,EAAE,QAAQ,CAAA;QACd,MAAM,EAAE,MAAM,EAAE,CAAA;QAChB,SAAS,EACL,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChC,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,cAAc,GACd,aAAa,GACb,iBAAiB,GACjB,gBAAgB,CAAA;KACrB,GACD;QACE,IAAI,EAAE,QAAQ,CAAA;QACd,MAAM,EAAE,MAAM,EAAE,CAAA;QAChB,SAAS,CAAC,EACN,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChC,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,cAAc,GACd,aAAa,GACb,iBAAiB,GACjB,gBAAgB,CAAA;KACrB,CAAA;IAEL;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAE1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,GAAG,cAAc,EAAE,CAAA;IAI7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;IAE/G;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAE/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IAErE;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAE3C;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAEhC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,QAAQ,CAAA;IAEjE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,QAAQ,CAAA;IAG/D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAA;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;CAChE;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;IAC/B,CAAC,CAAC,EAAE,OAAO,CAAA;IACX,CAAC,CAAC,EAAE,OAAO,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,GAAG,eAAe,GAAG,gBAAgB,GAAG,cAAc,GAAG,YAAY,CAAC;IACxI,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAE3B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;CACjD;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5D;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,CAAA;IAErC;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAA;IAEhE;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAA;IAE5F;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC"}
|
|
@@ -12,14 +12,14 @@ export declare class GridNode extends RowNode {
|
|
|
12
12
|
private readonly isVertical;
|
|
13
13
|
/**
|
|
14
14
|
* Creates a new grid layout node
|
|
15
|
-
* @param props
|
|
15
|
+
* @param props Grid configuration properties
|
|
16
16
|
*/
|
|
17
17
|
constructor(props: GridProps);
|
|
18
18
|
/**
|
|
19
19
|
* Appends a child node to this grid.
|
|
20
20
|
* Overridden primarily for documentation/clarity, functionality is inherited.
|
|
21
|
-
* @param child
|
|
22
|
-
* @param index
|
|
21
|
+
* @param child Child node to append
|
|
22
|
+
* @param index Index at which to insert the child
|
|
23
23
|
*/
|
|
24
24
|
protected appendChild(child: BoxNode, index: number): void;
|
|
25
25
|
/**
|
|
@@ -32,7 +32,7 @@ export declare class GridNode extends RowNode {
|
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
34
34
|
* Factory function to create a new GridNode instance.
|
|
35
|
-
* @param props
|
|
35
|
+
* @param props Grid configuration properties.
|
|
36
36
|
* @returns A new GridNode instance.
|
|
37
37
|
*/
|
|
38
38
|
export declare const Grid: (props: GridProps) => GridNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGjE;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAuB;IACtD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAuB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;IAEpC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAqE5B;;;;;OAKG;cACgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAI5D;;;;;OAKG;cACgB,+BAA+B;CAwLnD;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { RowNode } from './layout.canvas.util.js';
|
|
2
2
|
import { Style } from '../constant/common.const.js';
|
|
3
3
|
|
|
4
|
+
// TODO: Add comprehensive unit tests for this file.
|
|
4
5
|
/**
|
|
5
6
|
* Grid layout node that arranges children in a configurable number of columns or rows.
|
|
6
7
|
* Uses Yoga's flexbox capabilities with wrapping and gap properties to simulate a grid.
|
|
@@ -13,7 +14,7 @@ class GridNode extends RowNode {
|
|
|
13
14
|
isVertical; // True if the main axis is vertical (flexDirection: column or column-reverse)
|
|
14
15
|
/**
|
|
15
16
|
* Creates a new grid layout node
|
|
16
|
-
* @param props
|
|
17
|
+
* @param props Grid configuration properties
|
|
17
18
|
*/
|
|
18
19
|
constructor(props) {
|
|
19
20
|
const columns = Math.max(1, props.columns || 1);
|
|
@@ -58,17 +59,33 @@ class GridNode extends RowNode {
|
|
|
58
59
|
...props,
|
|
59
60
|
// Explicitly remove the 'direction' prop passed to super, as it's handled by flexDirection
|
|
60
61
|
direction: undefined,
|
|
62
|
+
// Pass undefined for gap to prevent BoxNode from trying to parse it
|
|
63
|
+
gap: undefined,
|
|
61
64
|
});
|
|
62
65
|
this.columns = columns;
|
|
63
66
|
this.columnGapValue = columnGap;
|
|
64
67
|
this.rowGapValue = rowGap;
|
|
65
68
|
this.isVertical = isVertical;
|
|
69
|
+
// Explicitly set gaps on this.node after super() call
|
|
70
|
+
// These will be updated again in updateLayoutBasedOnComputedSize, but this ensures initial setup
|
|
71
|
+
if (typeof columnGap === 'number') {
|
|
72
|
+
this.node.setGap(Style.Gutter.Column, columnGap);
|
|
73
|
+
}
|
|
74
|
+
else if (typeof columnGap === 'string' && columnGap.endsWith('%')) {
|
|
75
|
+
this.node.setGapPercent(Style.Gutter.Column, parseFloat(columnGap));
|
|
76
|
+
}
|
|
77
|
+
if (typeof rowGap === 'number') {
|
|
78
|
+
this.node.setGap(Style.Gutter.Row, rowGap);
|
|
79
|
+
}
|
|
80
|
+
else if (typeof rowGap === 'string' && rowGap.endsWith('%')) {
|
|
81
|
+
this.node.setGapPercent(Style.Gutter.Row, parseFloat(rowGap));
|
|
82
|
+
}
|
|
66
83
|
}
|
|
67
84
|
/**
|
|
68
85
|
* Appends a child node to this grid.
|
|
69
86
|
* Overridden primarily for documentation/clarity, functionality is inherited.
|
|
70
|
-
* @param child
|
|
71
|
-
* @param index
|
|
87
|
+
* @param child Child node to append
|
|
88
|
+
* @param index Index at which to insert the child
|
|
72
89
|
*/
|
|
73
90
|
appendChild(child, index) {
|
|
74
91
|
super.appendChild(child, index);
|
|
@@ -251,7 +268,7 @@ class GridNode extends RowNode {
|
|
|
251
268
|
}
|
|
252
269
|
/**
|
|
253
270
|
* Factory function to create a new GridNode instance.
|
|
254
|
-
* @param props
|
|
271
|
+
* @param props Grid configuration properties.
|
|
255
272
|
* @returns A new GridNode instance.
|
|
256
273
|
*/
|
|
257
274
|
const Grid = (props) => new GridNode(props);
|
|
@@ -15,7 +15,6 @@ export declare class ImageNode extends BoxNode {
|
|
|
15
15
|
/**
|
|
16
16
|
* Loads and processes an image from various sources (URL, file path, or Buffer).
|
|
17
17
|
* Handles SVG color modifications and sets natural dimensions with an aspect ratio.
|
|
18
|
-
*
|
|
19
18
|
* @returns Promise that resolves when image loading completes
|
|
20
19
|
* @throws Error if image loading fails
|
|
21
20
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/image.canvas.util.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"image.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/image.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,KAAK,wBAAwB,EAAmC,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAsBxD;;;GAGG;AACH,qBAAa,SAAU,SAAQ,OAAO;IAC5B,KAAK,EAAE,UAAU,GAAG,SAAS,CAAA;IACrC,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA6B;gBAEhD,KAAK,EAAE,UAAU;IAc7B;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IA8GX,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAIzC;;;OAGG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAoJrH;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,cAAyB,CAAA"}
|
|
@@ -4,6 +4,7 @@ import { parseBorderRadius, drawRoundedRectPath } from './canvas.helper.js';
|
|
|
4
4
|
import { promises } from 'fs';
|
|
5
5
|
import { Style } from '../constant/common.const.js';
|
|
6
6
|
|
|
7
|
+
// TODO: Add comprehensive unit tests for this file.
|
|
7
8
|
/**
|
|
8
9
|
* Calculates pixel offset for image positioning based on percentage or pixel values.
|
|
9
10
|
* This handles centering, edge alignment, and percentage-based positioning.
|
|
@@ -43,7 +44,6 @@ class ImageNode extends BoxNode {
|
|
|
43
44
|
/**
|
|
44
45
|
* Loads and processes an image from various sources (URL, file path, or Buffer).
|
|
45
46
|
* Handles SVG color modifications and sets natural dimensions with an aspect ratio.
|
|
46
|
-
*
|
|
47
47
|
* @returns Promise that resolves when image loading completes
|
|
48
48
|
* @throws Error if image loading fails
|
|
49
49
|
*/
|
|
@@ -59,92 +59,92 @@ class ImageNode extends BoxNode {
|
|
|
59
59
|
this.naturalHeight = 0;
|
|
60
60
|
return Promise.resolve();
|
|
61
61
|
}
|
|
62
|
-
return new Promise(
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (this.props.src
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
isSvg = detectedMime === 'image/svg+xml';
|
|
81
|
-
if ((!detectedMime || detectedMime === 'application/xml') &&
|
|
82
|
-
contentBuffer.toString('utf-8').includes('<svg')) {
|
|
83
|
-
isSvg = true;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
finalSource = this.props.src;
|
|
88
|
-
const filePath = this.props.src;
|
|
89
|
-
try {
|
|
90
|
-
const fileTypeResult = await fileTypeFromFile(filePath);
|
|
62
|
+
return new Promise(resolve => {
|
|
63
|
+
const load = async () => {
|
|
64
|
+
const { fileTypeFromBuffer, fileTypeFromFile } = await import('file-type');
|
|
65
|
+
let finalSource = this.props.src;
|
|
66
|
+
let isSvg = false;
|
|
67
|
+
let contentBuffer = null;
|
|
68
|
+
let detectedMime;
|
|
69
|
+
try {
|
|
70
|
+
if (typeof this.props.src === 'string') {
|
|
71
|
+
if (this.props.src.startsWith('http')) {
|
|
72
|
+
const response = await fetch(this.props.src);
|
|
73
|
+
if (!response.ok) {
|
|
74
|
+
throw new Error(`HTTP error ${response.status} fetching image: ${this.props.src}`);
|
|
75
|
+
}
|
|
76
|
+
const imageArrayBuffer = await response.arrayBuffer();
|
|
77
|
+
contentBuffer = Buffer.from(imageArrayBuffer);
|
|
78
|
+
finalSource = contentBuffer;
|
|
79
|
+
const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
|
|
91
80
|
detectedMime = fileTypeResult?.mime;
|
|
92
81
|
isSvg = detectedMime === 'image/svg+xml';
|
|
93
|
-
if ((!detectedMime || detectedMime === 'application/xml') &&
|
|
82
|
+
if ((!detectedMime || detectedMime === 'application/xml') && contentBuffer.toString('utf-8').includes('<svg')) {
|
|
94
83
|
isSvg = true;
|
|
95
84
|
}
|
|
96
85
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
if (isSvg && this.props.color) {
|
|
86
|
+
else {
|
|
87
|
+
finalSource = this.props.src;
|
|
88
|
+
const filePath = this.props.src;
|
|
101
89
|
try {
|
|
102
|
-
|
|
90
|
+
const fileTypeResult = await fileTypeFromFile(filePath);
|
|
91
|
+
detectedMime = fileTypeResult?.mime;
|
|
92
|
+
isSvg = detectedMime === 'image/svg+xml';
|
|
93
|
+
if ((!detectedMime || detectedMime === 'application/xml') && filePath.toLowerCase().endsWith('.svg')) {
|
|
94
|
+
isSvg = true;
|
|
95
|
+
}
|
|
103
96
|
}
|
|
104
97
|
catch {
|
|
105
|
-
isSvg =
|
|
106
|
-
|
|
98
|
+
isSvg = filePath.toLowerCase().endsWith('.svg');
|
|
99
|
+
}
|
|
100
|
+
if (isSvg && this.props.color) {
|
|
101
|
+
try {
|
|
102
|
+
contentBuffer = await promises.readFile(filePath);
|
|
103
|
+
}
|
|
104
|
+
catch {
|
|
105
|
+
isSvg = false;
|
|
106
|
+
contentBuffer = null;
|
|
107
|
+
}
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
|
-
}
|
|
111
|
-
else {
|
|
112
|
-
contentBuffer = this.props.src;
|
|
113
|
-
finalSource = contentBuffer;
|
|
114
|
-
const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
|
|
115
|
-
detectedMime = fileTypeResult?.mime;
|
|
116
|
-
isSvg = detectedMime === 'image/svg+xml';
|
|
117
|
-
}
|
|
118
|
-
if (isSvg && this.props.color && contentBuffer) {
|
|
119
|
-
const svgString = contentBuffer.toString('utf-8');
|
|
120
|
-
const modifiedSvgString = svgString.replace(/fill="[^"]*"/g, `fill="${this.props.color}"`);
|
|
121
|
-
if (modifiedSvgString !== svgString) {
|
|
122
|
-
finalSource = Buffer.from(modifiedSvgString);
|
|
123
|
-
}
|
|
124
111
|
else {
|
|
112
|
+
contentBuffer = this.props.src;
|
|
125
113
|
finalSource = contentBuffer;
|
|
114
|
+
const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
|
|
115
|
+
detectedMime = fileTypeResult?.mime;
|
|
116
|
+
isSvg = detectedMime === 'image/svg+xml';
|
|
126
117
|
}
|
|
118
|
+
if (isSvg && this.props.color && contentBuffer) {
|
|
119
|
+
const svgString = contentBuffer.toString('utf-8');
|
|
120
|
+
const modifiedSvgString = svgString.replace(/fill="[^"]*"/g, `fill="${this.props.color}"`);
|
|
121
|
+
if (modifiedSvgString !== svgString) {
|
|
122
|
+
finalSource = Buffer.from(modifiedSvgString);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
finalSource = contentBuffer;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
const img = await loadImage(finalSource);
|
|
129
|
+
this.loadedImage = img;
|
|
130
|
+
this.naturalWidth = img.width;
|
|
131
|
+
this.naturalHeight = img.height;
|
|
132
|
+
const calculatedAspectRatio = this.naturalWidth > 0 && this.naturalHeight > 0 ? this.naturalWidth / this.naturalHeight : undefined;
|
|
133
|
+
const finalAspectRatio = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : calculatedAspectRatio;
|
|
134
|
+
this.node.setAspectRatio(finalAspectRatio);
|
|
135
|
+
this.props.onLoad?.();
|
|
136
|
+
resolve();
|
|
127
137
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
resolve();
|
|
139
|
-
}
|
|
140
|
-
catch (error) {
|
|
141
|
-
this.naturalWidth = 0;
|
|
142
|
-
this.naturalHeight = 0;
|
|
143
|
-
const finalAspectRatioOnError = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined;
|
|
144
|
-
this.node.setAspectRatio(finalAspectRatioOnError);
|
|
145
|
-
this.props.onError?.(error);
|
|
146
|
-
resolve();
|
|
147
|
-
}
|
|
138
|
+
catch (error) {
|
|
139
|
+
this.naturalWidth = 0;
|
|
140
|
+
this.naturalHeight = 0;
|
|
141
|
+
const finalAspectRatioOnError = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined;
|
|
142
|
+
this.node.setAspectRatio(finalAspectRatioOnError);
|
|
143
|
+
this.props.onError?.(error);
|
|
144
|
+
resolve();
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
load();
|
|
148
148
|
});
|
|
149
149
|
}
|
|
150
150
|
getLoadingPromise() {
|
|
@@ -33,7 +33,7 @@ export declare class BoxNode {
|
|
|
33
33
|
key?: string;
|
|
34
34
|
/**
|
|
35
35
|
* Creates a new BoxNode instance
|
|
36
|
-
* @param props
|
|
36
|
+
* @param props Initial box properties and styling
|
|
37
37
|
*/
|
|
38
38
|
constructor(props?: BoxProps & BaseProps);
|
|
39
39
|
/**
|
|
@@ -42,7 +42,7 @@ export declare class BoxNode {
|
|
|
42
42
|
processInitialChildren(): void;
|
|
43
43
|
/**
|
|
44
44
|
* Inherits styles from the parent node.
|
|
45
|
-
* @param {BoxProps & BaseProps} parentProps
|
|
45
|
+
* @param {BoxProps & BaseProps} parentProps Parent node properties to inherit from.
|
|
46
46
|
*/
|
|
47
47
|
protected resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
|
|
48
48
|
/**
|
|
@@ -51,8 +51,8 @@ export declare class BoxNode {
|
|
|
51
51
|
protected applyDefaults(): void;
|
|
52
52
|
/**
|
|
53
53
|
* Appends a child node at the specified index.
|
|
54
|
-
* @param {BoxNode} child
|
|
55
|
-
* @param index
|
|
54
|
+
* @param {BoxNode} child Child node to append.
|
|
55
|
+
* @param index Index to insert child at
|
|
56
56
|
*/
|
|
57
57
|
protected appendChild(child: BoxNode, index: number): void;
|
|
58
58
|
/**
|
|
@@ -66,31 +66,30 @@ export declare class BoxNode {
|
|
|
66
66
|
protected updateLayoutBasedOnComputedSize(): void;
|
|
67
67
|
/**
|
|
68
68
|
* Applies layout properties to the Yoga node.
|
|
69
|
-
* @param props
|
|
69
|
+
* @param props Box properties containing layout values
|
|
70
70
|
*/
|
|
71
71
|
protected setLayout(props: BoxProps): void;
|
|
72
72
|
/**
|
|
73
73
|
* Renders the node and its children to the canvas.
|
|
74
|
-
* @param {CanvasRenderingContext2D} ctx
|
|
75
|
-
* @param {number} offsetX
|
|
76
|
-
* @param {number} offsetY
|
|
74
|
+
* @param {CanvasRenderingContext2D} ctx Canvas rendering context (from skia-canvas).
|
|
75
|
+
* @param {number} offsetX X offset for rendering.
|
|
76
|
+
* @param {number} offsetY Y offset for rendering.
|
|
77
77
|
*/
|
|
78
78
|
render(ctx: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): void;
|
|
79
79
|
/**
|
|
80
80
|
* Renders the node's visual content including background fills, shadows, and borders.
|
|
81
81
|
* This is an internal method used by the render() pipeline.
|
|
82
|
-
*
|
|
83
|
-
* @param
|
|
84
|
-
* @param
|
|
85
|
-
* @param
|
|
86
|
-
* @param
|
|
87
|
-
* @param height - The height of the content area to render
|
|
82
|
+
* @param ctx The skia-canvas 2D rendering context to draw into
|
|
83
|
+
* @param x The absolute x-coordinate where drawing should begin
|
|
84
|
+
* @param y The absolute y-coordinate where drawing should begin
|
|
85
|
+
* @param width The width of the content area to render
|
|
86
|
+
* @param height The height of the content area to render
|
|
88
87
|
*/
|
|
89
88
|
protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
|
|
90
89
|
}
|
|
91
90
|
/**
|
|
92
91
|
* Creates a new BoxNode instance.
|
|
93
|
-
* @param {BoxProps} props
|
|
92
|
+
* @param {BoxProps} props Box properties and configuration.
|
|
94
93
|
* @returns {BoxNode} New BoxNode instance.
|
|
95
94
|
*/
|
|
96
95
|
export declare const Box: (props: BoxProps) => BoxNode;
|
|
@@ -103,7 +102,7 @@ export declare class ColumnNode extends BoxNode {
|
|
|
103
102
|
}
|
|
104
103
|
/**
|
|
105
104
|
* Creates a new ColumnNode instance.
|
|
106
|
-
* @param {BoxProps} props
|
|
105
|
+
* @param {BoxProps} props Column properties and configuration.
|
|
107
106
|
* @returns {ColumnNode} New ColumnNode instance.
|
|
108
107
|
*/
|
|
109
108
|
export declare const Column: (props: BoxProps) => ColumnNode;
|
|
@@ -116,7 +115,7 @@ export declare class RowNode extends BoxNode {
|
|
|
116
115
|
}
|
|
117
116
|
/**
|
|
118
117
|
* Creates a new RowNode instance.
|
|
119
|
-
* @param {BoxProps} props
|
|
118
|
+
* @param {BoxProps} props Row properties and configuration.
|
|
120
119
|
* @returns {RowNode} New RowNode instance.
|
|
121
120
|
*/
|
|
122
121
|
export declare const Row: (props: BoxProps) => RowNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/layout.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,yBAAyB,CAAA;AAGlF,OAAa,EAAS,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;;GAIG;AACH,qBAAa,OAAO;IAClB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"layout.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/layout.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,yBAAyB,CAAA;AAGlF,OAAa,EAAS,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;;GAIG;AACH,qBAAa,OAAO;IAClB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAE/B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IAEV;;OAEG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAA;IAEnB;;OAEG;IACH,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;OAGG;gBACS,KAAK,GAAE,QAAQ,GAAG,SAAc;IAqB5C;;OAEG;IACI,sBAAsB;IAW7B;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS;IAkClE;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;OAIG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAanD;;;OAGG;IACI,cAAc,IAAI,OAAO;IAiBhC;;OAEG;IACH,SAAS,CAAC,+BAA+B;IAIzC;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ;IAqInC;;;;;OAKG;IACH,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,OAAO,GAAE,MAAU,EAAE,OAAO,GAAE,MAAU;IA+J9E;;;;;;;;OAQG;IACH,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAoR5G;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,KAAG,OAA6B,CAAA;AAEnE;;;GAGG;AACH,qBAAa,UAAW,SAAQ,OAAO;gBACzB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,QAAQ,KAAG,UAAmC,CAAA;AAE5E;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,OAAO;gBACtB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,KAAG,OAA6B,CAAA"}
|