feat(editor): kanban mobile drag and drop.

[alsuren]

this is based on toeverything/blocksuite#9048

This PR includes:

• A fix for when the drag and drop can get into a bad state after the browser sends us a pointercancel event
• An implementation of drag and drop for mobile
  • kanban/mobile/controller/drag.ts is mostly copy-paste from kanban/pc/controller/drag.ts . Do you want me to DRY it out at all?
  • I have disabled the "mobile databases are readonly" logic from toeverything/blocksuite@d90ff22 until someone can give me a bit more context (I have asked in #technical-discussion on discord). If you have a suggested fix for this, please leave a comment (or just push your proposed fix to my branch).

• I haven't worked out the best way to port my tests yet. Should I add the mobile configs to blocksuite/tests-legacy, or try to port them to tests/affine-mobile or somewhere? I've not worked out who to add a kanban view on affine yet, so this might take more time.

This is based on top of toeverything/blocksuite#9044 so it included a basic playwright test. I'm happy to merge this as two separate PRs or close the other one if you prefer.

[CLAassistant]

All committers have signed the CLA.

[graphite-app]

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[codecov]

Codecov Report

Attention: Patch coverage is 5.83333% with 113 lines in your changes missing coverage. Please review.

Project coverage is 51.46%. Comparing base (b96a03b) to head (d99feaa).
Report is 2 commits behind head on canary.

Files with missing lines	Patch %	Lines
.../src/view-presets/kanban/mobile/controller/drag.ts	6.19%	105 Missing and 1 partial ⚠️
...ffine/data-view/src/view-presets/kanban/pc/card.ts	0.00%	3 Missing ⚠️
blocksuite/affine/data-view/src/core/utils/drag.ts	0.00%	2 Missing ⚠️
...view/src/view-presets/kanban/mobile/kanban-view.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           canary    #9411      +/-   ##
==========================================
- Coverage   51.54%   51.46%   -0.08%     
==========================================
  Files        2146     2147       +1     
  Lines       97097    97216     +119     
  Branches    16266    16283      +17     
==========================================
- Hits        50046    50037       -9     
- Misses      45668    45795     +127     
- Partials     1383     1384       +1     

Flag	Coverage Δ
server-test	78.09% <ø> (-0.07%)	⬇️
unittest	30.91% <2.50%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[zzj3720]

Thank you for your pull request!

To enhance the development experience and code maintainability, we should consider generalizing the current drag-and-drop functionality to support long-press dragging on mobile devices. At present, the key difference between mobile and PC drag-and-drop is the initiation: long-press on mobile versus click on PC. We can make the code adaptable for both platforms.

Previously, the mobile version was set to readonly due to some database issues. Now that these issues have been resolved, we can safely remove this restriction.

Moreover, to ensure consistency and maintainability, please avoid adding new test code to blocksuite/tests-legacy. Instead, it would be more efficient to integrate blocksuite’s test code with AFFiNE's existing test framework.

Thank you for your efforts and understanding!

[alsuren]

To enhance the development experience and code maintainability, we should consider generalizing the current drag-and-drop functionality to support long-press dragging on mobile devices. At present, the key difference between mobile and PC drag-and-drop is the initiation: long-press on mobile versus click on PC. We can make the code adaptable for both platforms.

I haven't explicitly implemented the long press thing. I just make all touch events on cards route through the same logic as the desktop version. We are just using pointer events, rather than the web platform's native drag and drop.

If we want to emulate the web platform's native long-press drag and drop behaviour, we would need to add extra logic for that. I have chosen not to do this because:

1. it's fiddly and hard
2. I'm not sure how to say touch-action: none and then translate non-long-press events back into scroll events
3. long press on chrome brings up the context menu by default on mobile (and on desktop Chrome when in mobile device emulation mode). We would need to disable this to make testing possible.

I'm not using the web drag and drop functionality because of 3 and because it's not implemented on mobile Firefox (Which is the browser I use)

Previously, the mobile version was set to readonly due to some database issues. Now that these issues have been resolved, we can safely remove this restriction.

That's fantastic news. I will clean that up.

Moreover, to ensure consistency and maintainability, please avoid adding new test code to blocksuite/tests-legacy. Instead, it would be more efficient to integrate blocksuite’s test code with AFFiNE's existing test framework.

Okay. I'll have another go at that.

I noticed in passing that the affine playwright tests take a lot longer per test than the blocksuite ones (I may have picked an unlucky set of tests though, or imagined it). Should I try to write these as vitest tests instead, or is that going to be too much pain?

[Sorry for the edit. I pressed the send button by accident]