Skip to content

Commit 296cadd

Browse files
sametcodessametcodes
authored
Merge pull request #196 from sametcodes/194-adjusting-performance-of-font-preloading
refactor(#194): added web-safe Tahoma font
2 parents 0ca87ed + 42f0313 commit 296cadd

File tree

14 files changed

+67
-25
lines changed

14 files changed

+67
-25
lines changed

‎lib/@dsvgui/components/article/index.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
3232
const titleWidth =
3333
Math.max(
3434
...articles.map((article) =>
35-
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 700 })
35+
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 500 })
3636
),
3737
400
3838
) + 20;
@@ -52,9 +52,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
5252

5353
const title = wrapText(
5454
article.meta.title,
55-
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: 700 },
55+
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: 500 },
5656
(line: string, index: number) => (
57-
<Text x={0} y={index * 25} option={{ size: 16, weight: 700 }}>
57+
<Text x={0} y={index * 25} option={{ size: 16, weight: 500 }}>
5858
{line}
5959
</Text>
6060
)
@@ -85,8 +85,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
8585
(line: string, index) => (
8686
<Text
8787
x={0}
88-
y={20 + title.length + index * 13}
89-
option={{ size: 12, weight: 400 }}
88+
y={17 + title.length + index * 13}
89+
option={{ size: 12, weight: 500 }}
90+
className="subtitle"
9091
>
9192
{line}
9293
</Text>

‎lib/@dsvgui/components/barstats/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const BarStats: React.FC<IBarStats> = ({
8686
size: 14,
8787
weight: 500,
8888
}}
89+
className="subtitle"
8990
>
9091
{`${item.name} %${(
9192
(item.value / totalValue) *

‎lib/@dsvgui/components/calendar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export const Calendar: React.FC<ICalendar> = ({
149149
key={monthString}
150150
x={x > 0 ? x : 0}
151151
y={166}
152-
option={{ size: 12, weight: 400 }}
152+
option={{ size: 12, weight: 500 }}
153153
>
154154
{monthString}
155155
</Text>

‎lib/@dsvgui/components/fallback/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
1313

1414
const subtitle = wrapText(
1515
message,
16-
{ maxLineWidth: width - 60, fontSize: 14, fontWeight: 400 },
16+
{ maxLineWidth: width - 60, fontSize: 14, fontWeight: 500 },
1717
(line, index) => (
18-
<Text x={67} y={index * 16 + 40} option={{ size: 14, weight: 400 }}>
18+
<Text x={67} y={index * 16 + 40} option={{ size: 14, weight: 500 }}>
1919
{line}
2020
</Text>
2121
)

‎lib/@dsvgui/components/flock/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ export const Flock: React.FC<IFlock> = ({
3535
};
3636

3737
const titleWidth = title
38-
? getTextWidth(title.trim(), { fontSize: titleFontSize, fontWeight: 700 })
38+
? getTextWidth(title.trim(), { fontSize: titleFontSize, fontWeight: 500 })
3939
: 0;
4040
const subtitleWidth = subtitle
4141
? getTextWidth(subtitle.trim(), {
4242
fontSize: subtitleFontSize,
43-
fontWeight: 400,
43+
fontWeight: 500,
4444
})
4545
: 0;
4646

‎lib/@dsvgui/components/line/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export const Line: React.FC<ILine> = ({ items }) => {
128128
key={index}
129129
x={(textWidth) => i * xGap - textWidth / 2}
130130
y={0}
131-
option={{ size: 8, weight: 300 }}
131+
option={{ size: 8, weight: 500 }}
132132
>
133133
{periodLabel}
134134
</Text>

‎lib/@dsvgui/components/metrics/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
4242
});
4343
const wValue = getTextWidth(item.value.toString(), {
4444
fontSize: 22,
45-
fontWeight: 800,
45+
fontWeight: 700,
4646
});
4747
const wText = Math.max(wValue, wTitle);
4848

@@ -55,7 +55,7 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
5555
<Text x={xText} y={10} option="subtitle">
5656
{item.title}
5757
</Text>
58-
<Text x={xText} y={33.51} option={{ size: 22, weight: 800 }}>
58+
<Text x={xText} y={33.51} option={{ size: 22, weight: 500 }}>
5959
{item.value.toString()}
6060
</Text>
6161
{index !== 0 && (

‎lib/@dsvgui/document/branding.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ type IBranding = {
77

88
export const Branding: React.FC<IBranding> = ({ x, y }) => {
99
return (
10-
<Text x={x} y={y} option={{ size: 8, weight: 400 }}>
10+
<Text
11+
x={x}
12+
y={y}
13+
option={{ size: 8, weight: 500 }}
14+
id="dsvguibranding"
15+
className="text"
16+
>
1117
readme.rocks
1218
</Text>
1319
);

‎lib/@dsvgui/document/fonts/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
import * as Manrope from "./manrope";
44
import * as OpenSans from "./opensans";
5+
import * as Tahoma from "./tahoma";
56

6-
const fonts = { Manrope, OpenSans };
7+
const fonts = { Manrope, OpenSans, Tahoma };
78

89
export type FontFamily = keyof typeof fonts;
9-
export const defaultFont: FontFamily = "Manrope";
10+
export const defaultFont: FontFamily = "Tahoma";
1011

1112
export default fonts;

‎lib/@dsvgui/document/fonts/tahoma/Tahoma-500.ttf

140 KB
Binary file not shown.

‎lib/@dsvgui/document/fonts/tahoma/Tahoma-700.ttf

134 KB
Binary file not shown.

‎lib/@dsvgui/document/fonts/tahoma/index.ts

+4
Large diffs are not rendered by default.

‎lib/@dsvgui/document/style.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ export const Style: React.FC = () => {
22
return (
33
<defs>
44
<style>{`
5-
.text{ fill: #32373e;}
6-
.text.subtitle{ fill: #5c5c5c; }
5+
.websafe{ font-family: Tahoma, Verdana, sans-serif }
6+
.text{ fill: #22272e;}
7+
.text.subtitle{ fill: #6c6c6c; }
78
89
.dsvgui-container{ fill: #fbfbfb; }
910
stop[offset='0']{ stop-color: #fbfbfb; }

‎lib/@dsvgui/document/text.tsx

+35-7
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,31 @@ type IText = {
1313
y: number;
1414
option: IFontType | IFontOptions;
1515
children: string | number | undefined;
16+
as?: "path" | "text";
17+
className?: string;
18+
id?: string;
1619
};
1720

1821
const onHandFonts = {
1922
title: {
2023
size: 22,
21-
weight: 700,
24+
weight: 500,
2225
},
2326
subtitle: {
2427
size: 16,
2528
weight: 500,
2629
},
2730
};
2831

29-
export const Text: React.FC<IText> = ({ x, y, option, children }) => {
32+
export const Text: React.FC<IText> = ({
33+
x,
34+
y,
35+
option,
36+
children,
37+
as = "text",
38+
className = " ",
39+
id,
40+
}) => {
3041
if (!children) return <></>;
3142
const defaultFontFamily = defaultFont;
3243

@@ -40,10 +51,27 @@ export const Text: React.FC<IText> = ({ x, y, option, children }) => {
4051
if (typeof x === "function")
4152
x = x(openTypeFont.getAdvanceWidth(children.toString(), font.size));
4253

43-
const path = openTypeFont.getPath(children.toString(), x, y, font.size);
44-
const pathSVG = path.toPathData(1);
45-
46-
const classNames = ["text"];
54+
const classNames = ["text", className];
4755
if (typeof option === "string") classNames.push(option);
48-
return <path className={classNames.join(" ")} d={pathSVG} />;
56+
57+
if (as === "path") {
58+
const path = openTypeFont.getPath(children.toString(), x, y, font.size);
59+
const pathSVG = path.toPathData(1);
60+
61+
return <path id={id} className={classNames.join(" ")} d={pathSVG} />;
62+
} else {
63+
classNames.push("websafe");
64+
return (
65+
<text
66+
id={id}
67+
x={x}
68+
y={y}
69+
className={classNames.join(" ")}
70+
fontSize={font.size}
71+
fontWeight={font.weight}
72+
>
73+
<tspan>{children}</tspan>
74+
</text>
75+
);
76+
}
4977
};

0 commit comments

Comments
 (0)