TextFieldの文字入力のUndoをDebounceで実現 – 開発日記(57)

2023/09/30

アイディア・レーンでは、テキストの入力を原則1行1アイディアという形で表現している。このテキスト入力のUndo/Redo実装は避けて通れない話だ。

そしてついにテキスト入力のUndoの実装に着手。

  • 結果かなり苦戦。
  • TextFieldのundoControllerに任せると、”複数のTextField”にまたがった処理をうまく成り立たせることが難しい。
    • テキスト入力中どのタイミングでUndoが追加された事を外から知ることが出来ない。CanUndoがONになったタイミングは分かるが、それ以降に追加になったタイミングが分からない。
    • 全体を管理するUndoRedoControllerで関与できず
    • 単体でもバグっているように見える事がある。

かなり時間を使って調べたり工夫したが、独自実装しかないかもしれない……。

[参考リンク]

  • Flutter – Text undo and redo button
    • 複数のTextFieldをまたがるUndo/Redoを独自実装している例。ソースが古いうえFreezedを使っているのでビルドが面倒。結局TextFieldのonChangedで500ミリ秒のdebounceをしてUndoタイミングを検知している
  • How to debounce Textfield onChange in Dart?
    • Undoの話題ではないが、FireStoreへ遅延反映させるためのディスカッションなので参考になりそう

2023/10/01

引き続きテキスト入力のUndoを実装。

結局DeBounceを使って入力後の遅延検知の形で独自実装することに。

※パッケージとしては easy_debounce を利用。但しカスタマイズしたい箇所があり、後にこのソースを参考に独自実装しています

デバウンスというのは、「何かの処理が短い期間内に行われる可能性があり、それらの呼び出しの最後だけをきっかけに別の処理を呼び出す」というものの総称らしい。今回の目的で言うと、テキスト入力時にキーボード1回1回ではなく、ある程度打ち終わったときだけUndo用の状態保存を行いたい。まさにそれ。

ただ半分予想はしていたが、これはこれで制御が面倒だ。単純なケースならうまくいくものの、遅延中でまだ反映されていない段階で他のコマンドを実行した場合など、やはり対応が簡単には行かない。

flutterでコードを実装していて無限ループを起こしたのは久々かもしれない……。

2023/10/02

引き続きテキスト入力のUndoを実装。細かい制御をしないと、Undo時に違和感を感じてしまうので試しながら色々調整。

その途中で別の不具合も見つけたりしてなかなか進まない。Stableバージョンだとキーボードを押すだけでエラーが出るが、Master Channelだと出ないなど謎なので、様子見。

2023/10/03

テキスト入力のUndoを実装したり、その他細かい不具合修正を実施。

DeBounceを呼ぶときにIMEの入力状態を考慮するなど、色々とやらないといけないことが出てくる出てくる……。

しかもIMEで確定状態になったかどうかが、TextFieldのonChangedだと取れない。かといってTextEditingControllerのリスナーを使うと、なぜかTextFieldにフォーカスされただけで発動してしまう。文字が変わっていなくても呼ばれるのか。しかも公式ドキュメントにはそういった情報まで書いていない。

結局、毎回テキストの値を覚えておいて比較し、変更があったときだけトリガーするように組まないとダメそうだ。

参考記事:Flutter TextEditingController listener being triggered when TextField is focused

このようにちょっとした修正だけでもかなり手間と時間を取られてしまう毎日。

2023/10/05

Undoの不具合修正。テキスト入力状態の復帰は、文字を戻すだけで無く、カーソルも戻してかつバウンス状況も考慮しないと快適にいかないことが判明。本当に複雑になっている……。

その他、ファイル一覧リストの表示や、仮エリアをタップしたときのフォーカス処理など挙動改善を実施。

2023/10/06

主にUndo周りの不具合修正。

Undo/Redo周りの対応は、なんだかんだ2ヶ月くらいかかっているが、だいぶ動くようになってきた。

2023/10/07

アイディアのドラッグ&ドロップ周りの挙動改善を実施。Undoの動作も調整。気になる点はまだあるが、以前に比べればだいぶ操作しやすくなってきた。


※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています

この記事はアイディア整理ソフト「idea Lane」の開発記録です

どなたでも、ユーザ登録だけで無料ですぐに使えます
テキストベースの思考整理ツール「idea Lane」


コメント

タイトルとURLをコピーしました