Skip to content

Commit abc6ece

Browse files
frank-weindelfrank-weindel
authored
Implement text scaling/rotation transformations (#76)
Resolves #35 (scaling / rotation only)
2 parents 7290bc1 + b5c1f29 commit abc6ece

File tree

30 files changed

+938
-8639
lines changed

30 files changed

+938
-8639
lines changed

‎examples/common/constructTestRow.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export async function constructTestRow(
3434
if (typeof testNode === 'string') {
3535
const dimensions = await waitForTextDimensions(
3636
renderer.createTextNode({
37-
mount: 0.5,
37+
mountY: 0.5,
3838
x: curX,
3939
y: SQUARE_SIZE / 2,
4040
text: testNode,

‎examples/tests/text-rotation.ts‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/*
2+
* If not stated otherwise in this file or this component's LICENSE file the
3+
* following copyright and licenses apply:
4+
*
5+
* Copyright 2023 Comcast Cable Communications Management, LLC.
6+
*
7+
* Licensed under the Apache License, Version 2.0 (the License);
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
*/
19+
20+
import type { ExampleSettings } from '../common/ExampleSettings.js';
21+
import { paginateTestRows, type TestRow } from '../common/paginateTestRows.js';
22+
import { PageContainer } from '../common/PageContainer.js';
23+
import { waitForTextDimensions } from '../common/utils.js';
24+
import type {
25+
ITextNodeWritableProps,
26+
RendererMain,
27+
} from '../../dist/exports/main-api.js';
28+
import { constructTestRow } from '../common/constructTestRow.js';
29+
30+
const NODE_PROPS = {
31+
x: 100,
32+
y: 100,
33+
color: 0x000000ff,
34+
text: 'abc',
35+
fontFamily: 'Ubuntu',
36+
textRendererOverride: 'sdf',
37+
fontSize: 50,
38+
} satisfies Partial<ITextNodeWritableProps>;
39+
40+
function generateRotationTest(
41+
renderer: RendererMain,
42+
textRenderer: 'canvas' | 'sdf',
43+
): TestRow[] {
44+
return [
45+
{
46+
title: `Text Node ('rotation', ${textRenderer}, mount = 0)`,
47+
content: async (rowNode) => {
48+
const nodeProps = {
49+
...NODE_PROPS,
50+
textRendererOverride: textRenderer,
51+
} satisfies Partial<ITextNodeWritableProps>;
52+
53+
const baselineNode = renderer.createTextNode({
54+
...nodeProps,
55+
});
56+
const dimensions = await waitForTextDimensions(baselineNode);
57+
58+
// Get the position for the center of the container based on mount = 0
59+
const position = {
60+
x: 100 - dimensions.width / 2,
61+
y: 100 - dimensions.height / 2,
62+
};
63+
64+
baselineNode.x = position.x;
65+
baselineNode.y = position.y;
66+
67+
return await constructTestRow(renderer, rowNode, [
68+
baselineNode,
69+
'rotation 45 deg ->\npivot 0.5 ->',
70+
renderer.createTextNode({
71+
...nodeProps,
72+
...position,
73+
rotation: Math.PI / 4,
74+
// pivot: 0.5, (should be default)
75+
}),
76+
'pivot 0 ->',
77+
renderer.createTextNode({
78+
...nodeProps,
79+
...position,
80+
pivot: 0,
81+
rotation: Math.PI / 4,
82+
}),
83+
'pivot 1 ->',
84+
renderer.createTextNode({
85+
...nodeProps,
86+
...position,
87+
pivot: 1,
88+
rotation: Math.PI / 4,
89+
}),
90+
]);
91+
},
92+
},
93+
{
94+
title: `Text Node ('rotation', ${textRenderer}, mount = 0.5)`,
95+
content: async (rowNode) => {
96+
const nodeProps = {
97+
...NODE_PROPS,
98+
mount: 0.5,
99+
x: 100,
100+
y: 100,
101+
textRendererOverride: textRenderer,
102+
} satisfies Partial<ITextNodeWritableProps>;
103+
104+
return await constructTestRow(renderer, rowNode, [
105+
renderer.createTextNode({
106+
...nodeProps,
107+
}),
108+
'scale 2 ->\npivot 0.5 ->',
109+
renderer.createTextNode({
110+
...nodeProps,
111+
rotation: Math.PI / 4,
112+
// pivot: 0.5, (should be default)
113+
}),
114+
'pivot 0 ->',
115+
renderer.createTextNode({
116+
...nodeProps,
117+
pivot: 0,
118+
rotation: Math.PI / 4,
119+
}),
120+
'pivot 1 ->',
121+
renderer.createTextNode({
122+
...nodeProps,
123+
pivot: 1,
124+
rotation: Math.PI / 4,
125+
}),
126+
]);
127+
},
128+
},
129+
{
130+
title: `Text Node ('rotation', ${textRenderer}, mount = 1)`,
131+
content: async (rowNode) => {
132+
const nodeProps = {
133+
...NODE_PROPS,
134+
mount: 1,
135+
textRendererOverride: textRenderer,
136+
} satisfies Partial<ITextNodeWritableProps>;
137+
138+
const baselineNode = renderer.createTextNode({
139+
...nodeProps,
140+
});
141+
const dimensions = await waitForTextDimensions(baselineNode);
142+
143+
// Get the position for the center of the container based on mount = 1
144+
const position = {
145+
x: 100 + dimensions.width / 2,
146+
y: 100 + dimensions.height / 2,
147+
};
148+
149+
baselineNode.x = position.x;
150+
baselineNode.y = position.y;
151+
152+
return await constructTestRow(renderer, rowNode, [
153+
baselineNode,
154+
'scale 2 ->\npivot 0.5 ->',
155+
renderer.createTextNode({
156+
...nodeProps,
157+
...position,
158+
rotation: Math.PI / 4,
159+
// pivot: 0.5, (should be default)
160+
}),
161+
'pivot 0 ->',
162+
renderer.createTextNode({
163+
...nodeProps,
164+
...position,
165+
pivot: 0,
166+
rotation: Math.PI / 4,
167+
}),
168+
'pivot 1 ->',
169+
renderer.createTextNode({
170+
...nodeProps,
171+
...position,
172+
pivot: 1,
173+
rotation: Math.PI / 4,
174+
}),
175+
]);
176+
},
177+
},
178+
] satisfies TestRow[];
179+
}
180+
181+
export default async function ({ testName, renderer }: ExampleSettings) {
182+
const pageContainer = new PageContainer(renderer, {
183+
width: renderer.settings.appWidth,
184+
height: renderer.settings.appHeight,
185+
parent: renderer.root,
186+
title: 'Text Rotation',
187+
testName,
188+
});
189+
190+
await paginateTestRows(pageContainer, [
191+
...generateRotationTest(renderer, 'sdf'),
192+
...generateRotationTest(renderer, 'canvas'),
193+
]);
194+
195+
pageContainer.bindWindowKeys();
196+
}

0 commit comments

Comments
 (0)