Skip to content

SDF: Implement lineHeight, verticalAlign, maxLines, overflowSuffix #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frank-weindel merged 2 commits into from
Jan 24, 2024
Merged

SDF: Implement lineHeight, verticalAlign, maxLines, overflowSuffix #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bf8ae4
SDF: Implement lineHeight, verticalAlign, maxLines, overflowSuffix
frank-weindel Jan 24, 2024
8b261f4
SDF.layoutText: Only calculate line within window once per line
frank-weindel Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 45 additions & 35 deletions examples/tests/text-line-height.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default async function test(settings: ExampleSettings) {
const pageContainer = new PageContainer(settings, {
width: renderer.settings.appWidth,
height: renderer.settings.appHeight,
title: 'Text LineHeight',
title: 'Text Line Height',
});

await paginateTestRows(pageContainer, [
Expand All @@ -49,10 +49,11 @@ export default async function test(settings: ExampleSettings) {
}

const NODE_PROPS = {
x: 100,
y: 100,
x: 90,
y: 90,
mount: 0.5,
color: 0x000000ff,
text: 'txyz',
text: 'abcd\ntxyz',
fontFamily: 'Ubuntu',
textRendererOverride: 'sdf',
fontSize: 50,
Expand All @@ -64,8 +65,8 @@ function generateLineHeightTest(
): TestRow[] {
return [
{
title: `Text Node ('lineHeight', ${textRenderer})${
textRenderer === 'sdf' ? ', "BROKEN!"' : ''
title: `Text Node ('lineHeight', ${textRenderer}, fontSize=50)${
textRenderer === 'canvas' ? ', "BROKEN!"' : ''
}`,
content: async (rowNode) => {
const nodeProps = {
Expand All @@ -76,38 +77,47 @@ function generateLineHeightTest(
const baselineNode = renderer.createTextNode({
...nodeProps,
});
const dimensions = await waitForTextDimensions(baselineNode);
// const dimensions = await waitForTextDimensions(baselineNode);

// Get the position for the center of the container based on mount = 0
const position = {
x: 100 - dimensions.width / 2,
y: 100 - dimensions.height / 2,
};
// // Get the position for the center of the container based on mount = 0
// const position = {
// y: 100 - dimensions.height / 2,
// };

baselineNode.x = position.x;
baselineNode.y = position.y;
// baselineNode.y = position.y;

return await constructTestRow({ renderer, rowNode }, [
baselineNode,
'lineHeight 50 ->',
renderer.createTextNode({
...nodeProps,
...position,
lineHeight: 50,
}),
'lineHeight 60 ->',
renderer.createTextNode({
...nodeProps,
...position,
lineHeight: 60,
}),
'lineHeight 70 ->',
renderer.createTextNode({
...nodeProps,
...position,
lineHeight: 70,
}),
]);
return await constructTestRow(
{ renderer, rowNode, containerSize: 180 },
[
'lineHeight: fontSize\n(default)\n->',
baselineNode,
'60 ->',
renderer.createTextNode({
...nodeProps,
lineHeight: 60,
}),
'70 ->',
renderer.createTextNode({
...nodeProps,
lineHeight: 70,
}),
'25 ->',
renderer.createTextNode({
...nodeProps,
lineHeight: 25,
}),
'10 ->',
renderer.createTextNode({
...nodeProps,
lineHeight: 10,
}),
'0 ->',
renderer.createTextNode({
...nodeProps,
lineHeight: 0,
}),
],
);
},
},
] satisfies TestRow[];
Expand Down
83 changes: 75 additions & 8 deletions examples/tests/text-max-lines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,18 @@ export default async function test(settings: ExampleSettings) {

await paginateTestRows(pageContainer, [
...generateMaxLinesTest(renderer, 'sdf'),
null,
...generateMaxLinesTest(renderer, 'canvas'),
]);

return pageContainer;
}

const NODE_PROPS = {
const BASE_NODE_PROPS = {
x: 100,
y: 100,
width: 200,
color: 0x000000ff,
text: getLoremIpsum(100),
fontFamily: 'Ubuntu',
textRendererOverride: 'sdf',
fontSize: 20,
Expand All @@ -67,12 +67,11 @@ function generateMaxLinesTest(
): TestRow[] {
return [
{
title: `Text Node ('maxLines', ${textRenderer})${
textRenderer === 'sdf' ? ', "BROKEN!"' : ''
}`,
title: `Wrapped + Explicit Lines ('maxLines', ${textRenderer})`,
content: async (rowNode) => {
const nodeProps = {
...NODE_PROPS,
...BASE_NODE_PROPS,
text: 'Line1 Line1_Line1_Line1\nLine2 Line2____Line2\nLine 3\nLine 4',
textRendererOverride: textRenderer,
} satisfies Partial<ITextNodeWritableProps>;

Expand All @@ -96,18 +95,86 @@ function generateMaxLinesTest(
...position,
maxLines: 1,
}),
'maxLines: 2 ->',
'2 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 2,
}),
'maxLines: 3 ->',
'3 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 3,
}),
'4 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 4,
}),
'5 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 5,
}),
]);
},
},
{
title: `Lorem Ipsum ('maxLines', ${textRenderer})`,
content: async (rowNode) => {
const nodeProps = {
...BASE_NODE_PROPS,
text: getLoremIpsum(100),
textRendererOverride: textRenderer,
} satisfies Partial<ITextNodeWritableProps>;

const baselineNode = renderer.createTextNode({
...nodeProps,
});

const position = {
x: 0,
y: 0,
};

baselineNode.x = position.x;
baselineNode.y = position.y;

return await constructTestRow({ renderer, rowNode }, [
baselineNode,
'maxLines: 1 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 1,
}),
'2 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 2,
}),
'3 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 3,
}),
'4 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 4,
}),
'5 ->',
renderer.createTextNode({
...nodeProps,
...position,
maxLines: 5,
}),
]);
},
},
Expand Down
7 changes: 3 additions & 4 deletions examples/tests/text-overflow-suffix.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,14 @@ const NODE_PROPS = {
x: 100,
y: 100,
width: 200,
height: 200,
color: 0x000000ff,
text: getLoremIpsum(100),
fontFamily: 'Ubuntu',
textRendererOverride: 'sdf',
fontSize: 20,
lineHeight: 28,
contain: 'width',
contain: 'both',
} satisfies Partial<ITextNodeWritableProps>;

function generateOverflowSuffixTest(
Expand All @@ -67,9 +68,7 @@ function generateOverflowSuffixTest(
): TestRow[] {
return [
{
title: `Text Node ('overflowSuffix', ${textRenderer})${
textRenderer === 'sdf' ? ', "BROKEN!"' : ''
}`,
title: `Text Node ('overflowSuffix', ${textRenderer})`,
content: async (rowNode) => {
const nodeProps = {
...NODE_PROPS,
Expand Down
55 changes: 32 additions & 23 deletions examples/tests/text-vertical-align.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,15 @@ export default async function test(settings: ExampleSettings) {

await paginateTestRows(pageContainer, [
...generateVerticalAlignTest(renderer, 'sdf'),
null,
...generateVerticalAlignTest(renderer, 'canvas'),
]);

return pageContainer;
}

const NODE_PROPS = {
x: 100,
y: 100,
color: 0x000000ff,
text: 'txyz',
fontFamily: 'Ubuntu',
textRendererOverride: 'sdf',
fontSize: 50,
Expand All @@ -65,47 +63,58 @@ function generateVerticalAlignTest(
): TestRow[] {
return [
{
title: `Text Node ('verticalAlign', ${textRenderer}), lineHeight = 70${
textRenderer === 'sdf' ? ', "BROKEN!"' : ''
}`,
title: `One Line ('verticalAlign', ${textRenderer}, fontSize = 50, lineHeight = 70)`,
content: async (rowNode) => {
const nodeProps = {
...NODE_PROPS,
text: 'txyz',
textRendererOverride: textRenderer,
} satisfies Partial<ITextNodeWritableProps>;

const baselineNode = renderer.createTextNode({
...nodeProps,
});
const dimensions = await waitForTextDimensions(baselineNode);

// Get the position for the center of the container based on mount = 0
const position = {
x: 100 - dimensions.width / 2,
y: 100 - dimensions.height / 2,
};

baselineNode.x = position.x;
baselineNode.y = position.y;

return await constructTestRow({ renderer, rowNode }, [
'verticalAlign: top\n(default)\n->',
baselineNode,
'verticalAlign: top ->',
'middle ->',
renderer.createTextNode({
...nodeProps,
verticalAlign: 'middle',
}),
'bottom ->',
renderer.createTextNode({
...nodeProps,
...position,
verticalAlign: 'top',
verticalAlign: 'bottom',
}),
'verticalAlign: middle ->',
]);
},
},
{
title: `Two Lines ('verticalAlign', ${textRenderer}, fontSize = 50, lineHeight = 70)`,
content: async (rowNode) => {
const nodeProps = {
...NODE_PROPS,
text: 'abcd\ntxyz',
textRendererOverride: textRenderer,
} satisfies Partial<ITextNodeWritableProps>;

const baselineNode = renderer.createTextNode({
...nodeProps,
});

return await constructTestRow({ renderer, rowNode }, [
'verticalAlign: top\n(default)\n->',
baselineNode,
'middle ->',
renderer.createTextNode({
...nodeProps,
...position,
verticalAlign: 'middle',
}),
'verticalAlign: bottom ->',
'bottom ->',
renderer.createTextNode({
...nodeProps,
...position,
verticalAlign: 'bottom',
}),
]);
Expand Down
Loading