選択範囲に似ているリンクを入力補完するUserScriptの開発ログ兼作業ログ
選択範囲に似ているリンクを入力補完するUserScriptの開発ログみたいな
2024-08-07
17:46:34
dependeciesをjsr: specifierとnpm: specifierに置き換えた
2023-03-24
18:50:09 終了
17:28:15 ✅project絞り込みパネルに表示するprojectの順番を、より正確にマッチしたリンクが多い順に並び替えるをやってる
projectごとの検索にしてみたが、むしろ計算が複雑になった
どのみちすべてのリンクの重複計算をしなければならない
省略されたリンクの個数をはじき出して表示するから
とりあえずbranch切って供養しておく
2023-03-23
async generatorで検索処理を書き直すところまでやった
続きは後日やる
2023-03-22
残りやること
✅検索処理をasync generatorにする
project絞り込みパネルのアイテムの並びを、似ている語句が多く見つかった順に並べる
スコア計算式：\sum_i\text{編集距離が}i\text{だった候補の数}\cdot{0.5}^i
0.5 は適当に決めたほかの候補
編集距離がiだった候補数を配列で並べたものを使って、辞書的順序で並び替える
計算が多い&データサイズが増えるので却下
また、1文字違いで30件見つかったprojectより、完全一致1件のみだったprojectが優先されてしまう
できるか微妙
2023-03-21
2022-11-12
17:58:11
リンク入力補完 (scrapbox)機能を入れた
説明とかは今度書く
2022-10-27
11:46:06 project絞り込み機能 (scrapbox-select-suggestion)を実装した
2022-10-14
2022-09-24
22:49:54 userscript更新完了
設定がちょいミスっていたところがあったので、直した
あとは
projects の設定をいじるなどしていた22:17:19 merged
22:17:07 同じprojectのときは、markを表示しないhttps://github.com/takker99/scrapbox-select-suggestion/pull/4/commits/ff83b09394f5f1849f0b0dc3a1d34aeb747ea295
22:03:50 だいたい直った
選択範囲を切り替える時のちらつき
一瞬以前の補完候補が表示されてしまう
useEffect() 開始時に、無条件で候補の配列を空にすることで解消したhttps://github.com/takker99/scrapbox-select-suggestion/pull/4/commits/ff6f706bf2f138ab50a5a13bf2219f7f3d0343f5 データの更新
Null 合体演算子の演算順位ミスだったhttps://github.com/takker99/scrapbox-select-suggestion/pull/4/commits/788ff8f9043a577967a2fe508e5247939e1a5018
21:12:21 外部projectのリンクの入力補完機能を実装した
アイコンの方をクリックすると、外部プロジェクトリンク形式でリンクが入力される
右クリックで、そのprojectのページを新しいタブで開いたりもできる
18:15:02 中断機能つき検索函数を切り出した
17:59:55 ちょっとだけrefactoring
17:27:58 gitに移した
今後外部プロジェクトのリンクも補完できるようにしようと考えている
その際、大幅にコードが書き換わると予想されるので、gitに移して古いversionを消さないようにしたかった
外部プロジェクトのデータ取得テストをIndexed DB補完ソースを格納・定期更新するテストでやった
2022-09-18
08:35:58 フレーム間の時間がいくつか気になったので調べてみた
方法
requestAnimationFrame()のcallbackの第一引数に、time originからの経過時間が渡される
これから前回呼び出しのときの時間を引けば、FPSの逆数がわかる
結果
早くて16ms、遅いと50msくらいだった
08:00:32 検索結果が猛烈な速さで変化するのが見ていて気持ち悪いので、描画頻度を調節する
08:18:50 0.5秒ごとに描画するようにした
06:56:17 requestAnimationFrame()で検索を分散させてみた
requestAnimationFrame()の最中に検索中断命令を受け付ける時間を作り、中断命令が来たら、forループを抜けて検索を中断する
最初は分散させても速度が全く変わらなかったので困惑した
その後scrapbox.Project.pagesの呼び出しに時間がかかっていることがわかったので、同じ検索ソースを使い回すようにした
これで検索速度が予想通り向上した
07:48:45 iteratorで受け取り、一定数検索するまでforループを回すのではなく、配列で受け取り、一定数ごとにsliceしてからflatMapで絞込むようにした
前者だと一回あたり15ms、後者だと一回あたり3ms程度で検索できる
結果
選択範囲操作で引っかからなくなった
代わりに検索候補がものすごい勢いで変化するようになった
2022-09-14
15:20:42 検索及び並び替え処理をConsole.time()で測定する
リンク数が1000程度なら、ラグを感じなかった
並び替えにはほとんど時間がかからない
計測をはずそう
2022-09-06
18:01:00 予め検索文字列を64文字以内に切り詰めておく
2022-09-03
useDebounceで検索を間引いた
intervalは10msにした
これでも、74000件くらいリンクがあるprojectだと固まってしまう
根本的には、WebWorkerを使って検索させるしかないだろう
ちなみに、普通のQuickSearchの検索アルゴリズム(Bitap algorithm, あいまい度1で一度だけ検索)でも、100000件近いとカクつく
/suto3で試した
10:39:03 ↓の修正終了
10:29:21 Popup menuを選択できないバグに遭遇し、調査していた
やっと原因がわかった。
opInit がObject.assign()で破壊されていたのが原因だ操作無効時の函数が上書きされてしまっていた
こんなの罠だろ……
いや違う。↓のように、
target の参照が init になってしまっていたことが原因だ const exportRef = useRef(init) に該当これで
opInit が破壊的変更を受けてしまったjs{
const init = { a: () => false };
const target = init;
Object.assign(target, init);
Object.assign(target, { a: () => true });
console.log(target.a());
console.log(init.a());
} {...init} で別のobjectにすれば上書きされない2(js){
const init = { a: () => false };
const target = {...init};
Object.assign(target, init);
Object.assign(target, { a: () => true });
console.log(target.a());
console.log(init.a());
}09:35:23 refactoring
変数名変更
変数の数を1つ減らした
09:31:42 表示状態を改善した
バグ
cancelしたあとにconfirmすると、見えない候補が確定されてしまう
表示および有効状態処理をちゃんと実装する
今までは
display: none; を適当に見ていた useStyle() などから表示状態判定を分離するしかし、表示状態ロジックを完全に分離できなかった
例えば補完候補作成
表示状態に応じて検索するかどうかを切り替えるが、検索結果の有無からさらに表示状態を決める必要がある
補完状態と表示状態を別に扱えばいいのか？
08:16:03 型チェック&テスト終了
06:55:44 外部へのAPI開放処理にだけuseRefを使うようにした
まだテストしていない
2022-08-30
22:44:38 より簡単な実装方法を思いついた
函数はふつうにuseCallback等で作る
useRefは使わなくていい
外部に吐き出す直前にuseRef()で包めばいい
ref.current 自体は書き換えず、 ref.current.selectNext = ... のようにpropertiesを書き換える外部からは
ref.current 経由でアクセスする17:48:23 未選択時に
selectPrev() を実行すると永久に選択できないバグをみつけたので直したあとCSS変数一覧表を作った
17:35:41 ↓を実装しきってしまった
30分経過したら、他のタスクに少しでいいから先に時間を割くべきか判断するできてないじゃん！！！
登山靴チェックしなきゃ‥‥
↓を書いたときまでは制御できていたんだけど……何がだめだったのか
すぐ実装できると思いこんでしまった？
いやたしかに、5~7時間かかるのが普通だとすれば、それほど時間はかかっていないけど
一気にコードが汚くなってしまった
この制約が厳しかった
外部に提供する操作函数は、renderingを通じて同一のものを提供しないといけない
直したい気持ちもあるが、時間ない&どう直せばいいかすぐ思いつかない&動いているからこれ以上直すモチベが今沸かないので、これで放置する
16:13:10 候補選択機能を入れるための下準備
文字列流し込み操作を、候補を表示する部品から分離
補完候補リストに入れた
useSelect() のmock up補完windowの表示切り替えと座標計算部分を
useStyle() として切り出したスクロール機能はいらない
overflow設定をしていない
候補が更新されたら、選択をリセットする
2022-08-29
02:44:08 userscript更新した
02:16:08 井戸端で紹介した
これで開発は終了
01:29:32 省略した候補数を表示する
ついでに候補同士の間隔を広くした
タグが違う兄弟要素も一緒くたに数えたいときは、E:first-of-typeではなくE:first-childを使うようだ
01:07:02 補完を有効化する場所を限定する
コードブロック中、タイトル、テーブル記法のタイトルでは実行しないようにする
同時に、これらの領域では検索も実行させない
01:26:04 実装完了
01:00:02 ボタンを
<a> にして、入力候補をドラッグしたり新しいタブで開いたりできるようにしたHTMLAnchorElement.hrefを指定すれば、リンクとして機能する
代わりに、text-decoration: none;とcolor: inheritを用いて、見た目を大人しくする
00:36:08 スタイルの調節中
popup menuと同じ黒にした
#2024-08-07 17:47:10
#2023-03-22 06:40:11
#2023-03-10 13:38:01
#2022-10-27 11:46:19
#2022-09-24 17:28:17
#2022-09-14 15:21:02
#2022-09-06 18:01:43
#2022-09-03 08:16:32
#2022-08-30 16:15:04
#2022-08-29 18:17:21