Skip to content
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

Release #1655

Merged
merged 3 commits into from
Mar 28, 2024
Merged

Release #1655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6f01de
fix: update geometry before getting computed length #1651 (#1652)
xiaoiver Mar 28, 2024
acabbcb
chore: commit changeset (#1653)
xiaoiver Mar 28, 2024
ea784d3
chore(release): bump version (#1654)
github-actions[bot] Mar 28, 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
297 changes: 135 additions & 162 deletions __tests__/unit/display-objects/text.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
import { vec3 } from 'gl-matrix';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note test

Unused import vec3.
import { Renderer as CanvasRenderer } from '../../../packages/g-svg/src';
import { Canvas, Group, Rect, Text } from '../../../packages/g/src';
import { Canvas, Text } from '../../../packages/g/src';
import { OffscreenCanvasContext } from '../offscreenCanvasContext';

const $container = document.createElement('div');
$container.id = 'container';
document.body.prepend($container);

const renderer = new CanvasRenderer();

const offscreenNodeCanvas = {
getContext: () => context,
} as unknown as HTMLCanvasElement;
const context = new OffscreenCanvasContext(offscreenNodeCanvas);

// create a canvas
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer,
offscreenCanvas: offscreenNodeCanvas as any,
});

describe.skip('Text', () => {
describe('Text', () => {
// afterEach(() => {
// canvas.destroyChildren();
// });
Expand All @@ -31,77 +39,73 @@
},
});
expect(text.style.text).toBe(1);
expect(text.parsedStyle.text).toBe('1');
expect(text.parsedStyle.text).toBe(1);
});

it('should calc global bounds correctly', () => {
const text = new Text({
style: {
text: '这是测试文本This is text',
text: '这',
fontFamily: 'PingFang SC',
fontSize: 60,
fontSize: 100,
fontWeight: 'normal',
fontStyle: 'normal',
fontVariant: 'normal',
fill: '#1890FF',
stroke: '#F04864',
lineWidth: 5,
lineWidth: 0,
textAlign: 'center',
textBaseline: 'middle',
},
});

// @ts-ignore
text.setAttribute('font-size', 30);
text.setAttribute('fontSize', 30);
expect(text.style.fontSize).toBe(30);

// parse font size with unit
text.style.fontSize = '40px';
expect(text.parsedStyle.fontSize).toBe(40);
// text.style.fontSize = '40px';
// expect(text.parsedStyle.fontSize).toBe(40);

expect(text.nodeValue).toBe('这是测试文本This is text');
expect(text.textContent).toBe('这是测试文本This is text');
// expect(text.nodeValue).toBe('这是测试文本This is text');
// expect(text.textContent).toBe('这是测试文本This is text');

// get local position
expect(text.getLocalPosition()).toStrictEqual([0, 0, 0]);

text.style.text = 'changed';
expect(text.nodeValue).toBe('changed');
expect(text.textContent).toBe('changed');
// text.style.text = 'changed';
// expect(text.nodeValue).toBe('changed');
// expect(text.textContent).toBe('changed');

const group = new Group();
expect(group.nodeValue).toBeNull();
expect(group.textContent).toBe('');
group.appendChild(text);
expect(group.nodeValue).toBeNull();
expect(group.textContent).toBe('changed');
// const group = new Group();
// expect(group.nodeValue).toBeNull();
// expect(group.textContent).toBe('');
// group.appendChild(text);
// expect(group.nodeValue).toBeNull();
// expect(group.textContent).toBe('changed');

text.textContent = 'changed again';
expect(text.nodeValue).toBe('changed again');
expect(text.textContent).toBe('changed again');
// text.textContent = 'changed again';
// expect(text.nodeValue).toBe('changed again');
// expect(text.textContent).toBe('changed again');

// empty text should return empty AABB
text.style.text = '';
const bounds = text.getBounds();
expect(bounds.center[0]).toBeCloseTo(0);
expect(bounds.center[1]).toBeCloseTo(0);
expect(bounds.halfExtents[0]).toBeCloseTo(0);
expect(bounds.halfExtents[1]).toBeCloseTo(0);

// // get bounds
// let bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center[0]).toBeCloseTo(336.61);
// expect(bounds.center[1]).toBeCloseTo(-19.5);
// expect(bounds.halfExtents[0]).toBeCloseTo(341.6);
// expect(bounds.halfExtents[1]).toBeCloseTo(41.5);
// }

// // change lineWidth
// line.style.lineWidth = 20;
// bounds = line.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(300, 100, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(120, 20, 0));
// }
let bounds = text.getBounds();
expect(bounds.center).toEqual([0, 0, 0]);
expect(bounds.halfExtents).toEqual([0, 0, 0]);

text.style.text = '这';
text.style.fontSize = 100;
bounds = text.getBounds();
expect(bounds.center).toEqual([0, 0, 0]);
expect(bounds.halfExtents).toEqual([50, 89, 0]);

// change lineWidth
text.style.lineWidth = 20;
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([10, 0, 0]);
expect(bounds.halfExtents).toEqual([60, 99, 0]);
}
});

it('should overflow correctly.', async () => {
Expand All @@ -111,8 +115,8 @@
style: {
x: 100,
y: 100,
text: '这是测试文本This is text',
fontSize: 60,
text: '这是一段测试文本',
fontSize: 100,
fill: '#1890FF',
stroke: '#F04864',
lineWidth: 5,
Expand All @@ -121,118 +125,116 @@

canvas.appendChild(text);

// let bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(436.60992431640625, 80.5, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(336.60992431640625, 36.5, 0));
// }
// let bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(436.60992431640625, 80.5, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(339.10992431640625, 39, 0));
// }
let bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([402.5, 91.5, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([405, 94, 0]);
}

// word wrap
text.style.wordWrap = true;
text.style.wordWrapWidth = 200;
text.style.wordWrapWidth = 1000;
expect(text.isOverflowing()).toBe(false);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(193.39996337890625, -29, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(93.39996337890625, 146, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(193.39996337890625, -29, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95.89996337890625, 148.5, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([402.5, 91.5, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([405, 94, 0]);
}

// restore
text.style.wordWrap = true;
text.style.wordWrapWidth = 2000;
text.style.wordWrapWidth = 20000;
expect(text.isOverflowing()).toBe(false);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(436.60992431640625, 80.5, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(336.60992431640625, 36.5, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(436.60992431640625, 80.5, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(339.10992431640625, 39, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([402.5, 91.5, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([502.5, 8.5, 0]);
expect(bounds.halfExtents).toEqual([405, 94, 0]);
}

// clip
text.style.wordWrapWidth = 200;
text.style.maxLines = 2;

const r = text.isOverflowing();
expect(r).toBe(true);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(92.5, 73, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95, 75.5, 0));
// }
expect(text.isOverflowing()).toBe(true);
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([102.5, 183, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([105, 185.5, 0]);
}

// overflow with ellipsis
text.style.textOverflow = 'ellipsis';
expect(text.isOverflowing()).toBe(true);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(92.5, 73, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95, 75.5, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([102.5, 183, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([105, 185.5, 0]);
}

// overflow with clip
text.style.textOverflow = 'clip';
expect(text.isOverflowing()).toBe(true);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(92.5, 73, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95, 75.5, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([102.5, 183, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([105, 185.5, 0]);
}

// overflow with custom long string
text.style.textOverflow = 'long long long long long long long text';
expect(text.isOverflowing()).toBe(true);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(92.5, 73, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95, 75.5, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([102.5, 183, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([105, 185.5, 0]);
}

text.style.textOverflow = '..';
expect(text.isOverflowing()).toBe(true);
// bounds = text.getBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(92.5, 73, 0));
// }
// bounds = text.getRenderBounds();
// if (bounds) {
// expect(bounds.center).toBe(vec3.fromValues(192.5, 44, 0));
// expect(bounds.halfExtents).toBe(vec3.fromValues(95, 75.5, 0));
// }
bounds = text.getBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([102.5, 183, 0]);
}
bounds = text.getRenderBounds();
if (bounds) {
expect(bounds.center).toEqual([202.5, -83, 0]);
expect(bounds.halfExtents).toEqual([105, 185.5, 0]);
}

// no overflowing content
text.style.wordWrapWidth = 2000;
Expand All @@ -249,33 +251,4 @@
text.style.wordWrap = false;
expect(text.isOverflowing()).toBe(false);
});

// it.only('should calc global bounds correctly', async () => {
// await canvas.ready;

// const group = new Group();
// const rect = new Rect({
// style: {
// width: 50,
// height: 50,
// stroke: 'black',
// lineWidth: 2,
// fill: 'red',
// },
// });
// const text = new Text({
// style: {
// text: '这是测试文本This is text',
// fontSize: 60,
// fill: '#1890FF',
// },
// });

// rect.appendChild(text);

// group.appendChild(rect);
// canvas.appendChild(group);

// console.log(text);
// });
});
Loading
Loading