fix(editor): increase edgeless text init min width (#10051)

This commit is contained in:
Flrande
2025-02-14 10:46:00 +00:00
parent 9048b38069
commit 9dc81ecb99
10 changed files with 30 additions and 22 deletions
@@ -268,6 +268,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
boxShadow: editing ? '0px 0px 0px 2px rgba(30, 150, 235, 0.3)' : 'none',
fontWeight: '400',
lineHeight: 'var(--affine-line-height)',
minWidth: !hasMaxWidth ? '220px' : undefined,
};
return html`
@@ -218,7 +218,7 @@ describe('mindmap', () => {
const rootButton = mindmapView().getCollapseButton(mindmap().tree)!;
moveAndClick(gfx.viewport.toViewBound(rootButton.elementBound));
await wait();
await wait(500);
expect(rootButton.hidden).toBe(false);
expect(rootButton.opacity).toBe(1);
@@ -247,7 +247,7 @@ describe('mindmap', () => {
const childButton = mindmapView().getCollapseButton(node)!;
moveAndClick(gfx.viewport.toViewBound(childButton.elementBound));
await wait();
await wait(500);
expect(childButton.hidden).toBe(false);
expect(childButton.opacity).toBe(1);
@@ -273,6 +273,7 @@ describe('mindmap', () => {
)!;
// collapse child node
moveAndClick(gfx.viewport.toViewBound(childButton.elementBound));
await wait(500);
doc.captureSync();
await wait();
@@ -280,7 +281,7 @@ describe('mindmap', () => {
const rootButton = mindmapView().getCollapseButton(mindmap().tree)!;
// collapse root node
moveAndClick(gfx.viewport.toViewBound(rootButton.elementBound));
await wait();
await wait(500);
// child button should be hidden
expect(childButton.hidden).toBe(true);
@@ -112,12 +112,12 @@ test.describe('auto arrange align', () => {
await page.mouse.click(0, 0);
await selectAllByKeyboard(page);
await assertEdgelessSelectedModelRect(page, [0, -125, 225, 225]);
await assertEdgelessSelectedModelRect(page, [0, -125, 395, 225]);
// arrange
await triggerComponentToolbarAction(page, 'autoArrange');
await waitNextFrame(page, 200);
await assertEdgelessSelectedModelRect(page, [0, 0, 170, 100]);
await assertEdgelessSelectedModelRect(page, [0, 0, 340, 100]);
});
test('arrange note', async ({ page }) => {
@@ -317,12 +317,12 @@ test.describe('auto resize align', () => {
await page.mouse.click(0, 0);
await selectAllByKeyboard(page);
await assertEdgelessSelectedModelRect(page, [0, -125, 225, 225]);
await assertEdgelessSelectedModelRect(page, [0, -125, 395, 225]);
// arrange
await triggerComponentToolbarAction(page, 'autoResize');
await waitNextFrame(page, 200);
await assertEdgelessSelectedModelRect(page, [0, 0, 604.6, 200]);
await assertEdgelessSelectedModelRect(page, [0, 0, 1912.296875, 200]);
});
test('resize and arrange note', async ({ page }) => {
@@ -430,6 +430,6 @@ test.describe('auto resize align', () => {
// arrange
await triggerComponentToolbarAction(page, 'autoResize');
await waitNextFrame(page, 200);
await assertEdgelessSelectedModelRect(page, [0, 0, 1421.5, 420]);
await assertEdgelessSelectedModelRect(page, [0, 0, 2352.296875, 420]);
});
});
@@ -12,6 +12,7 @@ import {
getPageSnapshot,
initEmptyEdgelessState,
pasteByKeyboard,
pressArrowDown,
pressArrowLeft,
pressArrowRight,
pressArrowUp,
@@ -154,20 +155,21 @@ test.describe('edgeless text block', () => {
delay: 100,
});
await waitNextFrame(page);
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 50, 26));
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 220, 26));
await type(page, 'aaaaaaaaaa');
await type(page, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
await waitNextFrame(page, 1000);
// just width changed
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 26));
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 323, 26));
await type(page, '\nbbb');
// width not changed, height changed
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 83, 50));
await type(page, '\ncccccccccccccccc');
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 323, 50));
await type(page, '\nccccccccccccccccccccccccccccccccccccccccccccccccc');
await waitNextFrame(page, 1000);
// width and height changed
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 74));
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 395, 74));
// blur, max width set to true
await page.mouse.click(point[0] - 50, point[1], {
@@ -176,9 +178,12 @@ test.describe('edgeless text block', () => {
await page.mouse.dblclick(point[0], point[1], {
delay: 100,
});
// to end of line
await pressArrowDown(page, 3);
await type(page, 'dddddddddddddddddddd');
await waitNextFrame(page, 1000);
// width not changed, height changed
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 131, 98));
await assertEdgelessTextModelRect(page, '4', new Bound(-25, -25, 395, 98));
});
test('edgeless text width fixed when drag moving', async ({ page }) => {
@@ -369,7 +374,7 @@ test.describe('edgeless text block', () => {
await page.mouse.dblclick(point[0], point[1], {
delay: 100,
});
await waitNextFrame(page);
await waitNextFrame(page, 2000);
expect(await getPageSnapshot(page, true)).toMatchSnapshot(
`${testInfo.title}_init.json`
@@ -567,7 +572,7 @@ test('press backspace at the start of first line when edgeless text exist', asyn
await page.mouse.dblclick(point[0], point[1], {
delay: 100,
});
await waitNextFrame(page);
await waitNextFrame(page, 2000);
await type(page, 'aaa');
await waitNextFrame(page);
@@ -78,6 +78,7 @@ test.describe('pasting blocks', () => {
await pressEscape(page, 3);
await page.mouse.click(130, 140);
await copyByKeyboard(page);
await page.mouse.move(500, 500);
await pasteByKeyboard(page);
const textIds = await getAllEdgelessTextIds(page);
expect(textIds.length).toBe(2);
@@ -25,7 +25,7 @@
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[-25,-25,88.75,50]",
"xywh": "[-25,-25,220,26]",
"index": "a1",
"lockedBySelf": false,
"color": "#53b2ef",
@@ -25,7 +25,7 @@
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[-25,-25,50,26]",
"xywh": "[-25,-25,220,26]",
"index": "a1",
"lockedBySelf": false,
"color": "#53b2ef",
@@ -29,7 +29,7 @@
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[-25,-25,50,26]",
"xywh": "[-25,-25,220,26]",
"index": "a1",
"lockedBySelf": false,
"color": "#53b2ef",
@@ -25,7 +25,7 @@
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[-25,-25,50,26]",
"xywh": "[-25,-25,220,26]",
"index": "a1",
"lockedBySelf": false,
"color": "#53b2ef",
@@ -25,7 +25,7 @@
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[-25,-25,50,26]",
"xywh": "[-25,-25,220,26]",
"index": "a1",
"lockedBySelf": false,
"color": "#53b2ef",