Skip to content

Commit

Permalink
Release (#1655)
Browse files Browse the repository at this point in the history 
* fix: update geometry before getting computed length #1651 (#1652)

* chore: commit changeset (#1653)

* chore: commit changeset

* fix: set default fill & stroke to 'none' in rough.js

* chore: commit changeset

* chore(release): bump version (#1654)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@xiaoiver @github-actions
3 people authored Mar 28, 2024
1 parent 86d200b commit 494aedc
Show file tree
Hide file tree
Showing 99 changed files with 706 additions and 213 deletions.
297 changes: 135 additions & 162 deletions __tests__/unit/display-objects/text.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
import { vec3 } from 'gl-matrix';
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 @@ describe.skip('Text', () => {
},
});
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 @@ describe.skip('Text', () => {
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 @@ describe.skip('Text', () => {

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 @@ describe.skip('Text', () => {
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

0 comments on commit 494aedc

Please sign in to comment.