refactor(editor): highlight selected cards of TOC based on signal (#9807)

Close [BS-2314](https://linear.app/affine-design/issue/BS-2314/添加打开toc时,将note-block-高亮), [BS-1868](https://linear.app/affine-design/issue/BS-1868/toc-里面-note之间顺序可拖动性,在page和edgeless里面是不同的,这个是设计的行为么?)

This PR refactor the highlight logic of note cards of TOC panel:
- notes block selected in edgeless note
- notes block covered by text or block selection in page mode
- note cards selected in TOC for dragging

Other changes:
- remove not used codes
- add tests for highlight note cards
This commit is contained in:
L-Sun
2025-01-21 07:50:57 +00:00
parent 6470d83248
commit 7400cf225f
9 changed files with 218 additions and 162 deletions
@@ -44,20 +44,14 @@ test.describe('toc-panel', () => {
return panel.locator(`affine-outline-panel-body .title`);
}
async function toggleNoteSorting(page: Page) {
const enableSortingButton = page.locator(
'.outline-panel-header-container .note-sorting-button'
);
await enableSortingButton.click();
}
async function dragNoteCard(page: Page, fromCard: Locator, toCard: Locator) {
const fromRect = await fromCard.boundingBox();
const toRect = await toCard.boundingBox();
await page.mouse.move(fromRect!.x + 10, fromRect!.y + 10);
await page.mouse.click(fromRect!.x + 10, fromRect!.y + 10);
await page.mouse.down();
await page.mouse.move(toRect!.x + 5, toRect!.y + 5, { steps: 10 });
await page.mouse.move(toRect!.x + 5, toRect!.y + 5, { steps: 20 });
await page.mouse.up();
}
@@ -267,7 +261,6 @@ test.describe('toc-panel', () => {
await page.mouse.click(100, 100);
await toggleTocPanel(page);
await toggleNoteSorting(page);
const docVisibleCard = page.locator(
'.card-container[data-invisible="false"]'
);
@@ -311,7 +304,6 @@ test.describe('toc-panel', () => {
);
await toggleTocPanel(page);
await toggleNoteSorting(page);
const docVisibleCard = page.locator(
'.card-container[data-invisible="false"]'
);
@@ -345,7 +337,6 @@ test.describe('toc-panel', () => {
);
await toggleTocPanel(page);
await toggleNoteSorting(page);
const docVisibleCard = page.locator(
'.card-container[data-invisible="false"]'
);