Kozaneba開発日記2022-06-08

• グループの中の矢印の描画位置がズレるバグを直す
  • この前の修正でエンバグした？
  • テストケース作る
• こざねの枚数とレンダリング時間の表示をつける

11:00

• 🍅11:56-12:21 テストケース作る
  • 再現テストケースできた
  • グループをドラッグした場合に、中身のバウンディングボックスは更新されないが、線分の始点終点は更新されて、計算された交点がずれるバグ
  • あれれ？今まではなぜ動いてたのか？今までも動いてなかったのか？
    • 前のバージョンをcheckoutしてみたけどバグが再現しないな

12:00

• わかった、元から交点計算関数に渡してた引数は間違っていて、グループの中にいる場合はズレていたのだが、古いアルゴリズムは「始点がボックスの中心から出ていると仮定して傾きだけに注目して交点を計算する」というものだったので発覚しなかったんだ

15:00

• 🍅15:44-16:09 続き
  • fixed, released✅

16:00

• 🍅16:42-17:07 枚数とレンダリング時間の表示

  • とりあえずUIは抜きで、windowに表示する関数を生やそう

  • 表示してるものが500個ちょいあることがわかった

    • 

  • 数を数えるのは簡単だけど、時間の計測はどこを測ればいいかよくわからないな…

17:00

• うーん、onWheelの処理に掛かってる時間を計ろうかと思ったがこれはReactの状態更新を行うだけでイベントハンドラ自体はすぐ終わるなぁ
  • 状態管理をReactに任せないで自前でやると動きがなめらかになるのかな？
  • 今それをやってないのはwheelイベントにマウスのドラッグとかと違って「終わり」を示すイベントがないから

21:00

• 処理時間が1フレームに収まってない部分。onWheelの中ではReactNのGlobalStateManager.setを呼んでるだけなのだけどそれが1フレーム16.7msecのうちの3.7msecを食っている。削れるのはここくらいか
  • 
  • やはり状態更新と画面更新をReactを通さずに自前でやるしかないかなー？？
  • さくさく動いてる時は2msecくらい
  • 
  • うーん、これ、Paint(とそれと同程度の内容不明の時間)が伸びてるのが主要因だから状態更新を削っても改善しないな。「解決したければ新しいMacBookを買ってください」って感じだ

23:00

• CPUタブのこの斜線が何なのか気になって調べたら「メインスレッド以外の処理」とのこと。
  • 
  • メインスレッド以外の処理がこんなにいっぱいいっぱいなのって、なんだろう？
  • Reactがメインスレッドの外で状態管理をしてるってこと？
    • そんなわけないか…？？？
  • 射線だけのゾーンを範囲選択すると、サマリー表示としてはIdleになりますが、実際には処理が間に合わなくてDropped Frameになっています
    • 
    • コールツリーなどの表示も全部空っぽ、多分メインスレッドの処理しか情報を集められてないのだと思います

考察

• 600枚くらいのこざねを出してるの、ユーザとしてはレアだと思う
  • メインスレッド外で時間が取られてるので、多分スクリプトで実装されてる処理を頑張って改良しても解決しない
  • むしろ頑張らないでイベントを間引こう
    • https://developer.mozilla.org/ja/docs/Web/API/Element/scroll_event

現在の固定サイズのグループタイトルはズームアウトすると読めない件 なんらかのアルゴリズムでタイトルのフォントサイズが大きくなるのが良いと思う

• 今まで固定サイズだったものが可変になるとバグりそう〜〜〜
• 最大フォントサイズを決めて、長さがオーバーしたら縮小、かな

ロード時のプチハングについて

• フォントサイズの計算を非同期にする？
• 非同期にするとまあプチハングしてるのと同程度の時間「小さい文字」で表示されるんだよな
• 計算済みの値をサーバに保存する方がいいかなー
  • 「なければ再計算」なら過去のデータも問題なく読めるし

Scrapboxからコピペした時にリンク記法がどうなるべきか

• ScrapboxモードであるならScrapboxとしてパースしても良いのでは
• こざねになるべきか、Scrapboxカードになるべきか
• /villagepump/Kozaneba+Scrapbox
• こざねになって、そこから展開ができるのが良さそう