@codehz/draw-call 0.5.1 → 0.5.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/{browser → dist/browser}/index.cjs +2 -40
- package/{node → dist/browser}/index.d.cts +1 -1
- package/dist/browser/index.d.ts +454 -0
- package/{browser → dist/browser}/index.js +1 -39
- package/{node → dist/node}/index.cjs +2 -40
- package/dist/node/index.d.cts +454 -0
- package/{node → dist/node}/index.d.mts +1 -1
- package/{node → dist/node}/index.mjs +1 -40
- package/examples/card.ts +1 -1
- package/examples/customdraw-basic.ts +1 -1
- package/examples/customdraw.ts +1 -1
- package/examples/demo.html +114 -0
- package/examples/demo.ts +1 -1
- package/examples/image-smoothing.ts +1 -1
- package/examples/richtext.ts +1 -1
- package/examples/transform.ts +1 -1
- package/package.json +55 -32
- package/browser/index.d.cts +0 -998
- package/browser/index.d.ts +0 -998
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
//#region src/compat/index.ts
|
|
3
3
|
const DOMMatrix = typeof window !== "undefined" ? window.DOMMatrix : void 0;
|
|
4
4
|
const Path2D = typeof window !== "undefined" ? window.Path2D : void 0;
|
|
@@ -8,7 +8,6 @@ function createRawCanvas(width, height) {
|
|
|
8
8
|
canvas.height = height;
|
|
9
9
|
return canvas;
|
|
10
10
|
}
|
|
11
|
-
|
|
12
11
|
//#endregion
|
|
13
12
|
//#region src/types/base.ts
|
|
14
13
|
function linearGradient(angle, ...stops) {
|
|
@@ -79,7 +78,6 @@ function normalizeBorderRadius(value) {
|
|
|
79
78
|
];
|
|
80
79
|
return value;
|
|
81
80
|
}
|
|
82
|
-
|
|
83
81
|
//#endregion
|
|
84
82
|
//#region src/layout/components/box.ts
|
|
85
83
|
/**
|
|
@@ -192,7 +190,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
|
|
|
192
190
|
height: typeof element.height === "number" ? element.height : intrinsicHeight
|
|
193
191
|
};
|
|
194
192
|
}
|
|
195
|
-
|
|
196
193
|
//#endregion
|
|
197
194
|
//#region src/layout/components/customDraw.ts
|
|
198
195
|
/**
|
|
@@ -209,7 +206,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
|
|
|
209
206
|
height: 0
|
|
210
207
|
};
|
|
211
208
|
}
|
|
212
|
-
|
|
213
209
|
//#endregion
|
|
214
210
|
//#region src/layout/components/image.ts
|
|
215
211
|
/**
|
|
@@ -235,7 +231,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
|
|
|
235
231
|
height: 0
|
|
236
232
|
};
|
|
237
233
|
}
|
|
238
|
-
|
|
239
234
|
//#endregion
|
|
240
235
|
//#region src/layout/components/richtext.ts
|
|
241
236
|
/**
|
|
@@ -403,7 +398,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
|
|
|
403
398
|
}];
|
|
404
399
|
return lines;
|
|
405
400
|
}
|
|
406
|
-
|
|
407
401
|
//#endregion
|
|
408
402
|
//#region src/layout/components/stack.ts
|
|
409
403
|
/**
|
|
@@ -440,7 +434,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
|
|
|
440
434
|
height: typeof element.height === "number" ? element.height : intrinsicHeight
|
|
441
435
|
};
|
|
442
436
|
}
|
|
443
|
-
|
|
444
437
|
//#endregion
|
|
445
438
|
//#region src/layout/components/svg.ts
|
|
446
439
|
/**
|
|
@@ -474,7 +467,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
|
|
|
474
467
|
height: 0
|
|
475
468
|
};
|
|
476
469
|
}
|
|
477
|
-
|
|
478
470
|
//#endregion
|
|
479
471
|
//#region src/render/utils/font.ts
|
|
480
472
|
/**
|
|
@@ -485,7 +477,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
|
|
|
485
477
|
function buildFontString(font) {
|
|
486
478
|
return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
|
|
487
479
|
}
|
|
488
|
-
|
|
489
480
|
//#endregion
|
|
490
481
|
//#region src/layout/utils/measure.ts
|
|
491
482
|
function createCanvasMeasureContext(ctx) {
|
|
@@ -577,7 +568,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
|
|
|
577
568
|
offset
|
|
578
569
|
};
|
|
579
570
|
}
|
|
580
|
-
|
|
581
571
|
//#endregion
|
|
582
572
|
//#region src/layout/components/text.ts
|
|
583
573
|
/**
|
|
@@ -603,7 +593,6 @@ function measureTextSize(element, ctx, availableWidth) {
|
|
|
603
593
|
height: Math.max(height, lineHeightPx)
|
|
604
594
|
};
|
|
605
595
|
}
|
|
606
|
-
|
|
607
596
|
//#endregion
|
|
608
597
|
//#region src/layout/components/transform.ts
|
|
609
598
|
/**
|
|
@@ -614,7 +603,6 @@ function measureTextSize(element, ctx, availableWidth) {
|
|
|
614
603
|
function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
|
|
615
604
|
return measureIntrinsicSize(element.children, ctx, availableWidth);
|
|
616
605
|
}
|
|
617
|
-
|
|
618
606
|
//#endregion
|
|
619
607
|
//#region src/layout/components/index.ts
|
|
620
608
|
/**
|
|
@@ -636,7 +624,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
|
|
|
636
624
|
};
|
|
637
625
|
}
|
|
638
626
|
}
|
|
639
|
-
|
|
640
627
|
//#endregion
|
|
641
628
|
//#region src/layout/utils/offset.ts
|
|
642
629
|
/**
|
|
@@ -649,7 +636,6 @@ function applyOffset(node, dx, dy) {
|
|
|
649
636
|
node.layout.contentY += dy;
|
|
650
637
|
for (const child of node.children) applyOffset(child, dx, dy);
|
|
651
638
|
}
|
|
652
|
-
|
|
653
639
|
//#endregion
|
|
654
640
|
//#region src/types/layout.ts
|
|
655
641
|
function resolveSize(size, available, auto) {
|
|
@@ -664,7 +650,6 @@ function sizeNeedsParent(size) {
|
|
|
664
650
|
if (typeof size === "string" && size.endsWith("%")) return true;
|
|
665
651
|
return false;
|
|
666
652
|
}
|
|
667
|
-
|
|
668
653
|
//#endregion
|
|
669
654
|
//#region src/layout/engine.ts
|
|
670
655
|
/**
|
|
@@ -1082,7 +1067,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
|
|
|
1082
1067
|
}
|
|
1083
1068
|
return node;
|
|
1084
1069
|
}
|
|
1085
|
-
|
|
1086
1070
|
//#endregion
|
|
1087
1071
|
//#region src/render/utils/colors.ts
|
|
1088
1072
|
function isGradientDescriptor$1(color) {
|
|
@@ -1118,7 +1102,6 @@ function resolveColor$1(ctx, color, x, y, width, height) {
|
|
|
1118
1102
|
if (isGradientDescriptor$1(color)) return resolveGradient$1(ctx, color, x, y, width, height);
|
|
1119
1103
|
return color;
|
|
1120
1104
|
}
|
|
1121
|
-
|
|
1122
1105
|
//#endregion
|
|
1123
1106
|
//#region src/render/utils/shadows.ts
|
|
1124
1107
|
function applyShadow$1(ctx, shadow) {
|
|
@@ -1140,7 +1123,6 @@ function clearShadow$1(ctx) {
|
|
|
1140
1123
|
ctx.shadowBlur = 0;
|
|
1141
1124
|
ctx.shadowColor = "transparent";
|
|
1142
1125
|
}
|
|
1143
|
-
|
|
1144
1126
|
//#endregion
|
|
1145
1127
|
//#region src/render/utils/shapes.ts
|
|
1146
1128
|
function roundRectPath(ctx, x, y, width, height, radius) {
|
|
@@ -1157,7 +1139,6 @@ function roundRectPath(ctx, x, y, width, height, radius) {
|
|
|
1157
1139
|
ctx.quadraticCurveTo(x, y, x + tl, y);
|
|
1158
1140
|
ctx.closePath();
|
|
1159
1141
|
}
|
|
1160
|
-
|
|
1161
1142
|
//#endregion
|
|
1162
1143
|
//#region src/render/components/box.ts
|
|
1163
1144
|
function renderBox(ctx, node) {
|
|
@@ -1186,7 +1167,6 @@ function renderBox(ctx, node) {
|
|
|
1186
1167
|
}
|
|
1187
1168
|
if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
|
|
1188
1169
|
}
|
|
1189
|
-
|
|
1190
1170
|
//#endregion
|
|
1191
1171
|
//#region src/render/components/ProxiedCanvasContext.ts
|
|
1192
1172
|
/**
|
|
@@ -1304,7 +1284,6 @@ function createProxiedCanvasContext(ctx, baseTransform) {
|
|
|
1304
1284
|
}
|
|
1305
1285
|
});
|
|
1306
1286
|
}
|
|
1307
|
-
|
|
1308
1287
|
//#endregion
|
|
1309
1288
|
//#region src/render/components/customDraw.ts
|
|
1310
1289
|
/**
|
|
@@ -1332,7 +1311,6 @@ function renderCustomDraw(ctx, node) {
|
|
|
1332
1311
|
proxyCtx.destroy();
|
|
1333
1312
|
ctx.restore();
|
|
1334
1313
|
}
|
|
1335
|
-
|
|
1336
1314
|
//#endregion
|
|
1337
1315
|
//#region src/render/components/image.ts
|
|
1338
1316
|
function renderImage(ctx, node) {
|
|
@@ -1418,7 +1396,6 @@ function renderImage(ctx, node) {
|
|
|
1418
1396
|
}
|
|
1419
1397
|
if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
|
|
1420
1398
|
}
|
|
1421
|
-
|
|
1422
1399
|
//#endregion
|
|
1423
1400
|
//#region src/render/components/richtext.ts
|
|
1424
1401
|
function renderRichText(ctx, node) {
|
|
@@ -1469,7 +1446,6 @@ function renderRichText(ctx, node) {
|
|
|
1469
1446
|
currentY += line.height;
|
|
1470
1447
|
}
|
|
1471
1448
|
}
|
|
1472
|
-
|
|
1473
1449
|
//#endregion
|
|
1474
1450
|
//#region src/render/components/svg.ts
|
|
1475
1451
|
function isGradientDescriptor(color) {
|
|
@@ -1741,7 +1717,6 @@ function renderSvg(ctx, node) {
|
|
|
1741
1717
|
for (const child of element.children) renderSvgChild(ctx, child, transform, bounds, baseTransform);
|
|
1742
1718
|
ctx.restore();
|
|
1743
1719
|
}
|
|
1744
|
-
|
|
1745
1720
|
//#endregion
|
|
1746
1721
|
//#region src/render/components/text.ts
|
|
1747
1722
|
function renderText(ctx, node) {
|
|
@@ -1776,7 +1751,6 @@ function renderText(ctx, node) {
|
|
|
1776
1751
|
}
|
|
1777
1752
|
if (element.shadow) clearShadow$1(ctx);
|
|
1778
1753
|
}
|
|
1779
|
-
|
|
1780
1754
|
//#endregion
|
|
1781
1755
|
//#region src/render/components/transform.ts
|
|
1782
1756
|
/**
|
|
@@ -1852,7 +1826,6 @@ function renderTransform(ctx, node) {
|
|
|
1852
1826
|
renderNode(ctx, childNode);
|
|
1853
1827
|
ctx.restore();
|
|
1854
1828
|
}
|
|
1855
|
-
|
|
1856
1829
|
//#endregion
|
|
1857
1830
|
//#region src/render/index.ts
|
|
1858
1831
|
function renderNode(ctx, node) {
|
|
@@ -1892,7 +1865,6 @@ function renderNode(ctx, node) {
|
|
|
1892
1865
|
break;
|
|
1893
1866
|
}
|
|
1894
1867
|
}
|
|
1895
|
-
|
|
1896
1868
|
//#endregion
|
|
1897
1869
|
//#region src/canvas.ts
|
|
1898
1870
|
/**
|
|
@@ -1962,7 +1934,6 @@ function createCanvas(options) {
|
|
|
1962
1934
|
}
|
|
1963
1935
|
};
|
|
1964
1936
|
}
|
|
1965
|
-
|
|
1966
1937
|
//#endregion
|
|
1967
1938
|
//#region src/components/Box.ts
|
|
1968
1939
|
function Box(props) {
|
|
@@ -1971,7 +1942,6 @@ function Box(props) {
|
|
|
1971
1942
|
...props
|
|
1972
1943
|
};
|
|
1973
1944
|
}
|
|
1974
|
-
|
|
1975
1945
|
//#endregion
|
|
1976
1946
|
//#region src/components/CustomDraw.ts
|
|
1977
1947
|
function CustomDraw(props) {
|
|
@@ -1980,7 +1950,6 @@ function CustomDraw(props) {
|
|
|
1980
1950
|
...props
|
|
1981
1951
|
};
|
|
1982
1952
|
}
|
|
1983
|
-
|
|
1984
1953
|
//#endregion
|
|
1985
1954
|
//#region src/components/Image.ts
|
|
1986
1955
|
function Image(props) {
|
|
@@ -1989,7 +1958,6 @@ function Image(props) {
|
|
|
1989
1958
|
...props
|
|
1990
1959
|
};
|
|
1991
1960
|
}
|
|
1992
|
-
|
|
1993
1961
|
//#endregion
|
|
1994
1962
|
//#region src/components/RichText.ts
|
|
1995
1963
|
function RichText(props) {
|
|
@@ -1998,7 +1966,6 @@ function RichText(props) {
|
|
|
1998
1966
|
...props
|
|
1999
1967
|
};
|
|
2000
1968
|
}
|
|
2001
|
-
|
|
2002
1969
|
//#endregion
|
|
2003
1970
|
//#region src/components/Stack.ts
|
|
2004
1971
|
function Stack(props) {
|
|
@@ -2007,7 +1974,6 @@ function Stack(props) {
|
|
|
2007
1974
|
...props
|
|
2008
1975
|
};
|
|
2009
1976
|
}
|
|
2010
|
-
|
|
2011
1977
|
//#endregion
|
|
2012
1978
|
//#region src/components/Svg.ts
|
|
2013
1979
|
function Svg(props) {
|
|
@@ -2054,7 +2020,6 @@ const svg = {
|
|
|
2054
2020
|
...props
|
|
2055
2021
|
})
|
|
2056
2022
|
};
|
|
2057
|
-
|
|
2058
2023
|
//#endregion
|
|
2059
2024
|
//#region src/components/Text.ts
|
|
2060
2025
|
function Text(props) {
|
|
@@ -2063,7 +2028,6 @@ function Text(props) {
|
|
|
2063
2028
|
...props
|
|
2064
2029
|
};
|
|
2065
2030
|
}
|
|
2066
|
-
|
|
2067
2031
|
//#endregion
|
|
2068
2032
|
//#region src/components/Transform.ts
|
|
2069
2033
|
function Transform(props) {
|
|
@@ -2072,7 +2036,6 @@ function Transform(props) {
|
|
|
2072
2036
|
...props
|
|
2073
2037
|
};
|
|
2074
2038
|
}
|
|
2075
|
-
|
|
2076
2039
|
//#endregion
|
|
2077
2040
|
//#region src/layout/utils/print.ts
|
|
2078
2041
|
/**
|
|
@@ -2132,7 +2095,6 @@ function printLayout(node) {
|
|
|
2132
2095
|
function layoutToString(node, _indent = " ") {
|
|
2133
2096
|
return printLayoutToString(node, "", true).join("\n");
|
|
2134
2097
|
}
|
|
2135
|
-
|
|
2136
2098
|
//#endregion
|
|
2137
2099
|
exports.Box = Box;
|
|
2138
2100
|
exports.CustomDraw = CustomDraw;
|
|
@@ -2149,4 +2111,4 @@ exports.layoutToString = layoutToString;
|
|
|
2149
2111
|
exports.linearGradient = linearGradient;
|
|
2150
2112
|
exports.printLayout = printLayout;
|
|
2151
2113
|
exports.radialGradient = radialGradient;
|
|
2152
|
-
exports.svg = svg;
|
|
2114
|
+
exports.svg = svg;
|
|
@@ -451,4 +451,4 @@ declare function printLayout(node: LayoutNode): void;
|
|
|
451
451
|
*/
|
|
452
452
|
declare function layoutToString(node: LayoutNode, _indent?: string): string;
|
|
453
453
|
//#endregion
|
|
454
|
-
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|
|
454
|
+
export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutElement, type LayoutNode, type LayoutProps, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
|