misskey-dev / misskey

🌎 A completely free and open interplanetary microblogging platform 🚀
https://misskey-hub.net/
GNU Affero General Public License v3.0
9.95k stars 1.35k forks source link

refactor(frontend): vuedraggableを`@formkit/drag-and-drop`に変更 #14486

Open kakkokari-gtyih opened 1 month ago

kakkokari-gtyih commented 1 month ago

What

vuedraggable@next@formkit/drag-and-drop に置き換えた

Why

https://github.com/misskey-dev/misskey/issues/7681 の実現に必要

Additional info (optional)

次のリリースで onSort イベントハンドラが実装され、値の変更時にwatchを呼ぶ必要がなくなる( https://github.com/formkit/drag-and-drop/commit/a09cfcfdec827e5cbfbbbc6e27ad5240b6e4aee1→v0.2.0で来た

Checklist

codecov[bot] commented 1 month ago

Codecov Report

Attention: Patch coverage is 10.96606% with 341 lines in your changes missing coverage. Please review.

Project coverage is 19.37%. Comparing base (ed89b4b) to head (dfdf714). Report is 2 commits behind head on develop.

Files with missing lines Patch % Lines
...es/frontend/src/pages/admin/RolesEditorFormula.vue 0.00% 85 Missing :warning:
...kages/frontend/src/pages/settings/emoji-picker.vue 0.00% 63 Missing :warning:
packages/frontend/src/components/MkWidgets.vue 0.00% 46 Missing :warning:
packages/frontend/src/pages/admin/server-rules.vue 0.00% 33 Missing :warning:
packages/frontend/src/pages/settings/profile.vue 0.00% 33 Missing :warning:
...ntend/src/pages/page-editor/page-editor.blocks.vue 0.00% 25 Missing :warning:
packages/frontend/src/pages/settings/navbar.vue 0.00% 25 Missing :warning:
packages/frontend/src/pages/channel-editor.vue 0.00% 18 Missing :warning:
packages/frontend/src/widgets/widget.ts 0.00% 10 Missing :warning:
packages/frontend/src/store.ts 0.00% 3 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## develop #14486 +/- ## ============================================ - Coverage 39.57% 19.37% -20.20% ============================================ Files 1553 721 -832 Lines 195043 102444 -92599 Branches 3561 992 -2569 ============================================ - Hits 77183 19851 -57332 + Misses 117257 82042 -35215 + Partials 603 551 -52 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

kakkokari-gtyih commented 1 month ago

親子関係があるドラッグ(ページエディタとかコンディショナルロールエディタとか)では若干動きがぎこちなくなったけど概ねちゃんとうごく

kakkokari-gtyih commented 1 month ago

MkWidgetの挙動が奇妙なので一旦draft

kakkokari-gtyih commented 1 month ago

有識者募集中

kakkokari-gtyih commented 5 days ago

MkWidgetの挙動が奇妙なので一旦draft

これはなおった

RoleCondEditorのand/orロジックの入れ子になっている場合その親子間でドラッグできるっていう機能が依然として不安定なので一旦無効化した(and/orロジック内でドラッグするのに関してはまともに動くので)

syuilo commented 5 days ago

オッ

syuilo commented 5 days ago

Pageのブロックの入れ子のドラッグとかは問題ないのかしら

kakkokari-gtyih commented 5 days ago

Pageのブロックの入れ子のドラッグとかは問題ないのかしら

あーまだ試してないけどそれもだめな可能性がある

syuilo commented 5 days ago

コード見た感じvue上で動くのではなく直接DOMをいじって実現するタイプっぽいからvueのvaporモードとかその他の機能と相性が悪い可能性があるのが懸念点だわね

kakkokari-gtyih commented 5 days ago

コード見た感じvue上で動くのではなく直接DOMをいじって実現するタイプっぽいからvueのvaporモードとかその他の機能と相性が悪い可能性があるのが懸念点だわね

これ、ドラッグ系のイベントのハンドリングだけして要素の入れ替えはrefを更新することによりvueがやるというしくみだったはず(なので他の機能を通して要素に変更が入るとうまくいかず工夫が必要なケースがあったりした)

syuilo commented 5 days ago

オッ

syuilo commented 5 days ago

目が節穴だったかも

kakkokari-gtyih commented 5 days ago

https://drag-and-drop.formkit.com/

Dragging items within your list will automatically change your list’s state to reflect the new order (which in turn allows the framework to re-render to the correct order)