@remotion/layout-utils 4.0.55 → 4.0.57
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/index.d.ts +1 -0
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/layouts/fill-text-box.d.ts +10 -0
- package/dist/cjs/layouts/fill-text-box.js +58 -0
- package/dist/cjs/layouts/measure-text.d.ts +6 -4
- package/dist/cjs/layouts/measure-text.js +5 -2
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.mjs +60 -3
- package/dist/esm/layouts/fill-text-box.d.ts +10 -0
- package/dist/esm/layouts/measure-text.d.ts +6 -4
- package/package.json +2 -2
package/dist/cjs/index.d.ts
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.measureText = void 0;
|
|
3
|
+
exports.measureText = exports.fillTextBox = void 0;
|
|
4
|
+
var fill_text_box_1 = require("./layouts/fill-text-box");
|
|
5
|
+
Object.defineProperty(exports, "fillTextBox", { enumerable: true, get: function () { return fill_text_box_1.fillTextBox; } });
|
|
4
6
|
var measure_text_1 = require("./layouts/measure-text");
|
|
5
7
|
Object.defineProperty(exports, "measureText", { enumerable: true, get: function () { return measure_text_1.measureText; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type Word } from './measure-text';
|
|
2
|
+
export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
|
|
3
|
+
maxBoxWidth: number;
|
|
4
|
+
maxLines: number;
|
|
5
|
+
}) => {
|
|
6
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }: Word) => {
|
|
7
|
+
exceedsBox: boolean;
|
|
8
|
+
newLine: boolean;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.fillTextBox = void 0;
|
|
4
|
+
const measure_text_1 = require("./measure-text");
|
|
5
|
+
const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
6
|
+
const lines = new Array(maxLines).fill(0).map(() => []);
|
|
7
|
+
return {
|
|
8
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }) => {
|
|
9
|
+
const lastLineIndex = lines.reduceRight((acc, curr, index) => {
|
|
10
|
+
if (acc === -1 && curr.length > 0) {
|
|
11
|
+
return index;
|
|
12
|
+
}
|
|
13
|
+
return acc;
|
|
14
|
+
}, -1);
|
|
15
|
+
const currentlyAt = lastLineIndex === -1 ? 0 : lastLineIndex;
|
|
16
|
+
const lineToUse = lines[currentlyAt];
|
|
17
|
+
const lineWithWord = [
|
|
18
|
+
...lineToUse,
|
|
19
|
+
{
|
|
20
|
+
text,
|
|
21
|
+
fontFamily,
|
|
22
|
+
fontWeight,
|
|
23
|
+
fontSize,
|
|
24
|
+
letterSpacing,
|
|
25
|
+
fontVariantNumeric,
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
const widths = lineWithWord.map((w) => (0, measure_text_1.measureText)(w).width);
|
|
29
|
+
const lineWidthWithWordAdded = widths.reduce((a, b) => a + b, 0);
|
|
30
|
+
if (lineWidthWithWordAdded <= maxBoxWidth) {
|
|
31
|
+
lines[currentlyAt].push({
|
|
32
|
+
text: lines[currentlyAt].length === 0 ? text.trimStart() : text,
|
|
33
|
+
fontFamily,
|
|
34
|
+
fontWeight,
|
|
35
|
+
fontSize,
|
|
36
|
+
letterSpacing,
|
|
37
|
+
fontVariantNumeric,
|
|
38
|
+
});
|
|
39
|
+
return { exceedsBox: false, newLine: false };
|
|
40
|
+
}
|
|
41
|
+
if (currentlyAt === maxLines - 1) {
|
|
42
|
+
return { exceedsBox: true, newLine: false };
|
|
43
|
+
}
|
|
44
|
+
lines[currentlyAt + 1] = [
|
|
45
|
+
{
|
|
46
|
+
text: text.trimStart(),
|
|
47
|
+
fontFamily,
|
|
48
|
+
fontWeight,
|
|
49
|
+
fontSize,
|
|
50
|
+
letterSpacing,
|
|
51
|
+
fontVariantNumeric,
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
return { exceedsBox: false, newLine: true };
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
exports.fillTextBox = fillTextBox;
|
|
@@ -2,11 +2,13 @@ type Dimensions = {
|
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
4
|
};
|
|
5
|
-
export
|
|
5
|
+
export type Word = {
|
|
6
6
|
text: string;
|
|
7
7
|
fontFamily: string;
|
|
8
8
|
fontSize: number;
|
|
9
|
-
fontWeight?:
|
|
10
|
-
letterSpacing?: string
|
|
11
|
-
|
|
9
|
+
fontWeight?: number | string;
|
|
10
|
+
letterSpacing?: string;
|
|
11
|
+
fontVariantNumeric?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }: Word) => Dimensions;
|
|
12
14
|
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 measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, }) => {
|
|
5
|
+
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
|
|
6
6
|
const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
|
|
7
7
|
if (wordCache.has(key)) {
|
|
8
8
|
return wordCache.get(key);
|
|
@@ -13,13 +13,16 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, })
|
|
|
13
13
|
node.style.position = 'absolute';
|
|
14
14
|
node.style.top = `-10000px`;
|
|
15
15
|
node.style.whiteSpace = 'pre';
|
|
16
|
+
node.style.fontSize = `${fontSize}px`;
|
|
16
17
|
if (fontWeight) {
|
|
17
18
|
node.style.fontWeight = fontWeight.toString();
|
|
18
19
|
}
|
|
19
|
-
node.style.fontSize = `${fontSize}px`;
|
|
20
20
|
if (letterSpacing) {
|
|
21
21
|
node.style.letterSpacing = letterSpacing;
|
|
22
22
|
}
|
|
23
|
+
if (fontVariantNumeric) {
|
|
24
|
+
node.style.fontVariantNumeric = fontVariantNumeric;
|
|
25
|
+
}
|
|
23
26
|
node.innerText = text;
|
|
24
27
|
document.body.appendChild(node);
|
|
25
28
|
const boundingBox = node.getBoundingClientRect();
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const wordCache = new Map();
|
|
2
|
-
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, }) => {
|
|
2
|
+
const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
|
|
3
3
|
const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
|
|
4
4
|
if (wordCache.has(key)) {
|
|
5
5
|
return wordCache.get(key);
|
|
@@ -10,13 +10,16 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, })
|
|
|
10
10
|
node.style.position = 'absolute';
|
|
11
11
|
node.style.top = `-10000px`;
|
|
12
12
|
node.style.whiteSpace = 'pre';
|
|
13
|
+
node.style.fontSize = `${fontSize}px`;
|
|
13
14
|
if (fontWeight) {
|
|
14
15
|
node.style.fontWeight = fontWeight.toString();
|
|
15
16
|
}
|
|
16
|
-
node.style.fontSize = `${fontSize}px`;
|
|
17
17
|
if (letterSpacing) {
|
|
18
18
|
node.style.letterSpacing = letterSpacing;
|
|
19
19
|
}
|
|
20
|
+
if (fontVariantNumeric) {
|
|
21
|
+
node.style.fontVariantNumeric = fontVariantNumeric;
|
|
22
|
+
}
|
|
20
23
|
node.innerText = text;
|
|
21
24
|
document.body.appendChild(node);
|
|
22
25
|
const boundingBox = node.getBoundingClientRect();
|
|
@@ -26,4 +29,58 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, })
|
|
|
26
29
|
return result;
|
|
27
30
|
};
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
|
|
33
|
+
const lines = new Array(maxLines).fill(0).map(() => []);
|
|
34
|
+
return {
|
|
35
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }) => {
|
|
36
|
+
const lastLineIndex = lines.reduceRight((acc, curr, index) => {
|
|
37
|
+
if (acc === -1 && curr.length > 0) {
|
|
38
|
+
return index;
|
|
39
|
+
}
|
|
40
|
+
return acc;
|
|
41
|
+
}, -1);
|
|
42
|
+
const currentlyAt = lastLineIndex === -1 ? 0 : lastLineIndex;
|
|
43
|
+
const lineToUse = lines[currentlyAt];
|
|
44
|
+
const lineWithWord = [
|
|
45
|
+
...lineToUse,
|
|
46
|
+
{
|
|
47
|
+
text,
|
|
48
|
+
fontFamily,
|
|
49
|
+
fontWeight,
|
|
50
|
+
fontSize,
|
|
51
|
+
letterSpacing,
|
|
52
|
+
fontVariantNumeric,
|
|
53
|
+
},
|
|
54
|
+
];
|
|
55
|
+
const widths = lineWithWord.map((w) => measureText(w).width);
|
|
56
|
+
const lineWidthWithWordAdded = widths.reduce((a, b) => a + b, 0);
|
|
57
|
+
if (lineWidthWithWordAdded <= maxBoxWidth) {
|
|
58
|
+
lines[currentlyAt].push({
|
|
59
|
+
text: lines[currentlyAt].length === 0 ? text.trimStart() : text,
|
|
60
|
+
fontFamily,
|
|
61
|
+
fontWeight,
|
|
62
|
+
fontSize,
|
|
63
|
+
letterSpacing,
|
|
64
|
+
fontVariantNumeric,
|
|
65
|
+
});
|
|
66
|
+
return { exceedsBox: false, newLine: false };
|
|
67
|
+
}
|
|
68
|
+
if (currentlyAt === maxLines - 1) {
|
|
69
|
+
return { exceedsBox: true, newLine: false };
|
|
70
|
+
}
|
|
71
|
+
lines[currentlyAt + 1] = [
|
|
72
|
+
{
|
|
73
|
+
text: text.trimStart(),
|
|
74
|
+
fontFamily,
|
|
75
|
+
fontWeight,
|
|
76
|
+
fontSize,
|
|
77
|
+
letterSpacing,
|
|
78
|
+
fontVariantNumeric,
|
|
79
|
+
},
|
|
80
|
+
];
|
|
81
|
+
return { exceedsBox: false, newLine: true };
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export { fillTextBox, measureText };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type Word } from './measure-text';
|
|
2
|
+
export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
|
|
3
|
+
maxBoxWidth: number;
|
|
4
|
+
maxLines: number;
|
|
5
|
+
}) => {
|
|
6
|
+
add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }: Word) => {
|
|
7
|
+
exceedsBox: boolean;
|
|
8
|
+
newLine: boolean;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
@@ -2,11 +2,13 @@ type Dimensions = {
|
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
4
|
};
|
|
5
|
-
export
|
|
5
|
+
export type Word = {
|
|
6
6
|
text: string;
|
|
7
7
|
fontFamily: string;
|
|
8
8
|
fontSize: number;
|
|
9
|
-
fontWeight?:
|
|
10
|
-
letterSpacing?: string
|
|
11
|
-
|
|
9
|
+
fontWeight?: number | string;
|
|
10
|
+
letterSpacing?: string;
|
|
11
|
+
fontVariantNumeric?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }: Word) => Dimensions;
|
|
12
14
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/layout-utils",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.57",
|
|
4
4
|
"description": "Layout Utils for Remotion",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"remotion": "4.0.
|
|
32
|
+
"remotion": "4.0.57"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@jonny/eslint-config": "3.0.276",
|