@remotion/layout-utils 4.0.139 → 4.0.140
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/layouts/fill-text-box.d.ts +1 -1
- package/dist/cjs/layouts/fill-text-box.js +3 -1
- package/dist/cjs/layouts/fit-text.d.ts +4 -1
- package/dist/cjs/layouts/fit-text.js +3 -1
- package/dist/cjs/layouts/measure-text.d.ts +13 -4
- package/dist/cjs/layouts/measure-text.js +12 -2
- package/dist/esm/index.mjs +18 -4
- package/dist/esm/layouts/fill-text-box.d.ts +1 -1
- package/dist/esm/layouts/fit-text.d.ts +4 -1
- package/dist/esm/layouts/measure-text.d.ts +13 -4
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
|
|
|
3
3
|
maxBoxWidth: number;
|
|
4
4
|
maxLines: number;
|
|
5
5
|
}) => {
|
|
6
|
-
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => {
|
|
6
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }: Word) => {
|
|
7
7
|
exceedsBox: boolean;
|
|
8
8
|
newLine: boolean;
|
|
9
9
|
};
|
|
@@ -5,7 +5,7 @@ const measure_text_1 = require("./measure-text");
|
|
|
5
5
|
const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
6
6
|
const lines = new Array(maxLines).fill(0).map(() => []);
|
|
7
7
|
return {
|
|
8
|
-
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
|
|
8
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }) => {
|
|
9
9
|
const lastLineIndex = lines.reduceRight((acc, curr, index) => {
|
|
10
10
|
if (acc === -1 && curr.length > 0) {
|
|
11
11
|
return index;
|
|
@@ -24,6 +24,8 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
|
24
24
|
letterSpacing,
|
|
25
25
|
fontVariantNumeric,
|
|
26
26
|
validateFontIsLoaded,
|
|
27
|
+
textTransform,
|
|
28
|
+
additionalStyles,
|
|
27
29
|
},
|
|
28
30
|
];
|
|
29
31
|
const widths = lineWithWord.map((w) => (0, measure_text_1.measureText)(w).width);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ModifyableCSSProperties, TextTransform } from '../layouts/measure-text';
|
|
2
|
+
export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }: {
|
|
2
3
|
text: string;
|
|
3
4
|
withinWidth: number;
|
|
4
5
|
fontFamily: string;
|
|
@@ -6,6 +7,8 @@ export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumer
|
|
|
6
7
|
letterSpacing?: string | undefined;
|
|
7
8
|
fontVariantNumeric?: string | undefined;
|
|
8
9
|
validateFontIsLoaded?: boolean | undefined;
|
|
10
|
+
textTransform?: TextTransform | undefined;
|
|
11
|
+
additionalStyles?: ModifyableCSSProperties<Partial<CSSStyleDeclaration>> | undefined;
|
|
9
12
|
}) => {
|
|
10
13
|
fontSize: number;
|
|
11
14
|
};
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.fitText = void 0;
|
|
4
4
|
const measure_text_1 = require("../layouts/measure-text");
|
|
5
5
|
const sampleSize = 100;
|
|
6
|
-
const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }) => {
|
|
6
|
+
const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }) => {
|
|
7
7
|
const estimate = (0, measure_text_1.measureText)({
|
|
8
8
|
text,
|
|
9
9
|
fontFamily,
|
|
@@ -12,6 +12,8 @@ const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight
|
|
|
12
12
|
fontVariantNumeric,
|
|
13
13
|
letterSpacing,
|
|
14
14
|
validateFontIsLoaded,
|
|
15
|
+
textTransform,
|
|
16
|
+
additionalStyles,
|
|
15
17
|
});
|
|
16
18
|
return { fontSize: (withinWidth / estimate.width) * sampleSize };
|
|
17
19
|
};
|
|
@@ -2,13 +2,22 @@ export type Dimensions = {
|
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
4
|
};
|
|
5
|
-
export type
|
|
6
|
-
|
|
5
|
+
export type ModifyableCSSProperties<T = Partial<CSSStyleDeclaration>> = {
|
|
6
|
+
[P in keyof T as P extends 'length' ? never : P extends keyof CSSPropertiesOnWord ? never : T[P] extends string | number ? P : never]: T[P];
|
|
7
|
+
};
|
|
8
|
+
export type TextTransform = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset' | 'none' | 'capitalize' | 'full-size-kana' | 'full-width' | 'lowercase' | 'uppercase';
|
|
9
|
+
type CSSPropertiesOnWord = {
|
|
7
10
|
fontFamily: string;
|
|
8
11
|
fontSize: number | string;
|
|
9
12
|
fontWeight?: number | string;
|
|
10
13
|
letterSpacing?: string;
|
|
11
14
|
fontVariantNumeric?: string;
|
|
12
|
-
|
|
15
|
+
textTransform?: TextTransform;
|
|
13
16
|
};
|
|
14
|
-
export
|
|
17
|
+
export type Word = {
|
|
18
|
+
text: string;
|
|
19
|
+
validateFontIsLoaded?: boolean;
|
|
20
|
+
additionalStyles?: ModifyableCSSProperties;
|
|
21
|
+
} & CSSPropertiesOnWord;
|
|
22
|
+
export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, }: Word) => Dimensions;
|
|
23
|
+
export {};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.measureText = void 0;
|
|
4
4
|
const wordCache = new Map();
|
|
5
|
-
const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
|
|
5
|
+
const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, additionalStyles, textTransform, }) => {
|
|
6
6
|
if (typeof document === 'undefined') {
|
|
7
7
|
throw new Error('measureText() can only be called in a browser.');
|
|
8
8
|
}
|
|
@@ -16,6 +16,11 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
16
16
|
node.style.whiteSpace = 'pre';
|
|
17
17
|
node.style.fontSize =
|
|
18
18
|
typeof fontSize === 'string' ? fontSize : `${fontSize}px`;
|
|
19
|
+
if (additionalStyles) {
|
|
20
|
+
for (const key of Object.keys(additionalStyles)) {
|
|
21
|
+
node.style[key] = additionalStyles[key];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
19
24
|
if (fontWeight) {
|
|
20
25
|
node.style.fontWeight = fontWeight.toString();
|
|
21
26
|
}
|
|
@@ -25,6 +30,9 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
25
30
|
if (fontVariantNumeric) {
|
|
26
31
|
node.style.fontVariantNumeric = fontVariantNumeric;
|
|
27
32
|
}
|
|
33
|
+
if (textTransform) {
|
|
34
|
+
node.style.textTransform = textTransform;
|
|
35
|
+
}
|
|
28
36
|
node.innerText = text;
|
|
29
37
|
document.body.appendChild(node);
|
|
30
38
|
const computedFontFamily = window.getComputedStyle(node).fontFamily;
|
|
@@ -35,7 +43,7 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
35
43
|
computedFontFamily,
|
|
36
44
|
};
|
|
37
45
|
};
|
|
38
|
-
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
|
|
46
|
+
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, }) => {
|
|
39
47
|
const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
|
|
40
48
|
if (wordCache.has(key)) {
|
|
41
49
|
return wordCache.get(key);
|
|
@@ -47,6 +55,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
|
|
|
47
55
|
fontVariantNumeric,
|
|
48
56
|
fontWeight,
|
|
49
57
|
letterSpacing,
|
|
58
|
+
additionalStyles,
|
|
50
59
|
});
|
|
51
60
|
if (validateFontIsLoaded) {
|
|
52
61
|
const { boundingBox: boundingBoxOfFallbackFont, computedFontFamily: computedFallback, } = takeMeasurement({
|
|
@@ -56,6 +65,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
|
|
|
56
65
|
fontVariantNumeric,
|
|
57
66
|
fontWeight,
|
|
58
67
|
letterSpacing,
|
|
68
|
+
additionalStyles,
|
|
59
69
|
});
|
|
60
70
|
const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
|
|
61
71
|
boundingBox.width === boundingBoxOfFallbackFont.width;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const wordCache = new Map();
|
|
2
|
-
const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
|
|
2
|
+
const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, additionalStyles, textTransform, }) => {
|
|
3
3
|
if (typeof document === 'undefined') {
|
|
4
4
|
throw new Error('measureText() can only be called in a browser.');
|
|
5
5
|
}
|
|
@@ -13,6 +13,11 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
13
13
|
node.style.whiteSpace = 'pre';
|
|
14
14
|
node.style.fontSize =
|
|
15
15
|
typeof fontSize === 'string' ? fontSize : `${fontSize}px`;
|
|
16
|
+
if (additionalStyles) {
|
|
17
|
+
for (const key of Object.keys(additionalStyles)) {
|
|
18
|
+
node.style[key] = additionalStyles[key];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
16
21
|
if (fontWeight) {
|
|
17
22
|
node.style.fontWeight = fontWeight.toString();
|
|
18
23
|
}
|
|
@@ -22,6 +27,9 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
22
27
|
if (fontVariantNumeric) {
|
|
23
28
|
node.style.fontVariantNumeric = fontVariantNumeric;
|
|
24
29
|
}
|
|
30
|
+
if (textTransform) {
|
|
31
|
+
node.style.textTransform = textTransform;
|
|
32
|
+
}
|
|
25
33
|
node.innerText = text;
|
|
26
34
|
document.body.appendChild(node);
|
|
27
35
|
const computedFontFamily = window.getComputedStyle(node).fontFamily;
|
|
@@ -32,7 +40,7 @@ const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing
|
|
|
32
40
|
computedFontFamily,
|
|
33
41
|
};
|
|
34
42
|
};
|
|
35
|
-
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
|
|
43
|
+
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, }) => {
|
|
36
44
|
const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
|
|
37
45
|
if (wordCache.has(key)) {
|
|
38
46
|
return wordCache.get(key);
|
|
@@ -44,6 +52,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
|
|
|
44
52
|
fontVariantNumeric,
|
|
45
53
|
fontWeight,
|
|
46
54
|
letterSpacing,
|
|
55
|
+
additionalStyles,
|
|
47
56
|
});
|
|
48
57
|
if (validateFontIsLoaded) {
|
|
49
58
|
const { boundingBox: boundingBoxOfFallbackFont, computedFontFamily: computedFallback, } = takeMeasurement({
|
|
@@ -53,6 +62,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
|
|
|
53
62
|
fontVariantNumeric,
|
|
54
63
|
fontWeight,
|
|
55
64
|
letterSpacing,
|
|
65
|
+
additionalStyles,
|
|
56
66
|
});
|
|
57
67
|
const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
|
|
58
68
|
boundingBox.width === boundingBoxOfFallbackFont.width;
|
|
@@ -73,7 +83,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
|
|
|
73
83
|
const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
74
84
|
const lines = new Array(maxLines).fill(0).map(() => []);
|
|
75
85
|
return {
|
|
76
|
-
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
|
|
86
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }) => {
|
|
77
87
|
const lastLineIndex = lines.reduceRight((acc, curr, index) => {
|
|
78
88
|
if (acc === -1 && curr.length > 0) {
|
|
79
89
|
return index;
|
|
@@ -92,6 +102,8 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
|
92
102
|
letterSpacing,
|
|
93
103
|
fontVariantNumeric,
|
|
94
104
|
validateFontIsLoaded,
|
|
105
|
+
textTransform,
|
|
106
|
+
additionalStyles,
|
|
95
107
|
},
|
|
96
108
|
];
|
|
97
109
|
const widths = lineWithWord.map((w) => measureText(w).width);
|
|
@@ -126,7 +138,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
|
126
138
|
};
|
|
127
139
|
|
|
128
140
|
const sampleSize = 100;
|
|
129
|
-
const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }) => {
|
|
141
|
+
const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }) => {
|
|
130
142
|
const estimate = measureText({
|
|
131
143
|
text,
|
|
132
144
|
fontFamily,
|
|
@@ -135,6 +147,8 @@ const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight
|
|
|
135
147
|
fontVariantNumeric,
|
|
136
148
|
letterSpacing,
|
|
137
149
|
validateFontIsLoaded,
|
|
150
|
+
textTransform,
|
|
151
|
+
additionalStyles,
|
|
138
152
|
});
|
|
139
153
|
return { fontSize: (withinWidth / estimate.width) * sampleSize };
|
|
140
154
|
};
|
|
@@ -3,7 +3,7 @@ export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
|
|
|
3
3
|
maxBoxWidth: number;
|
|
4
4
|
maxLines: number;
|
|
5
5
|
}) => {
|
|
6
|
-
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => {
|
|
6
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, }: Word) => {
|
|
7
7
|
exceedsBox: boolean;
|
|
8
8
|
newLine: boolean;
|
|
9
9
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ModifyableCSSProperties, TextTransform } from '../layouts/measure-text';
|
|
2
|
+
export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, additionalStyles, textTransform, }: {
|
|
2
3
|
text: string;
|
|
3
4
|
withinWidth: number;
|
|
4
5
|
fontFamily: string;
|
|
@@ -6,6 +7,8 @@ export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumer
|
|
|
6
7
|
letterSpacing?: string | undefined;
|
|
7
8
|
fontVariantNumeric?: string | undefined;
|
|
8
9
|
validateFontIsLoaded?: boolean | undefined;
|
|
10
|
+
textTransform?: TextTransform | undefined;
|
|
11
|
+
additionalStyles?: ModifyableCSSProperties<Partial<CSSStyleDeclaration>> | undefined;
|
|
9
12
|
}) => {
|
|
10
13
|
fontSize: number;
|
|
11
14
|
};
|
|
@@ -2,13 +2,22 @@ export type Dimensions = {
|
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
4
|
};
|
|
5
|
-
export type
|
|
6
|
-
|
|
5
|
+
export type ModifyableCSSProperties<T = Partial<CSSStyleDeclaration>> = {
|
|
6
|
+
[P in keyof T as P extends 'length' ? never : P extends keyof CSSPropertiesOnWord ? never : T[P] extends string | number ? P : never]: T[P];
|
|
7
|
+
};
|
|
8
|
+
export type TextTransform = '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset' | 'none' | 'capitalize' | 'full-size-kana' | 'full-width' | 'lowercase' | 'uppercase';
|
|
9
|
+
type CSSPropertiesOnWord = {
|
|
7
10
|
fontFamily: string;
|
|
8
11
|
fontSize: number | string;
|
|
9
12
|
fontWeight?: number | string;
|
|
10
13
|
letterSpacing?: string;
|
|
11
14
|
fontVariantNumeric?: string;
|
|
12
|
-
|
|
15
|
+
textTransform?: TextTransform;
|
|
13
16
|
};
|
|
14
|
-
export
|
|
17
|
+
export type Word = {
|
|
18
|
+
text: string;
|
|
19
|
+
validateFontIsLoaded?: boolean;
|
|
20
|
+
additionalStyles?: ModifyableCSSProperties;
|
|
21
|
+
} & CSSPropertiesOnWord;
|
|
22
|
+
export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, additionalStyles, }: Word) => Dimensions;
|
|
23
|
+
export {};
|