2021-06-30
https://gyazo.com/d07514b6dfc0497ba911331f8aa711cb
滑らかに動いてもGyazoGIFの再生がカクカクだとわからないね。
441枚出しているのでズームアウトするともっさりする
逆に言えばoverflow: hiddenだけでブラウザがレンダリングの枝刈りをしてくれてるってことか
ほぼブラウザのネイティブ実装に丸投げしている
まあ状態更新はReactを使っているのでここだけ自前管理にするという手もあるが(前回はそうした)それによってメリットがあったかどうかはイマイチ微妙
https://gyazo.com/c6e0f8d95cbf7aafb6e531acd36fd247
うーん、何をしたらいいかわからないな
一部の付箋でフォントサイズ調整が失敗しているのが気になる
直した
付箋をstyledに変えた時にフォントサイズ計測用の隠し付箋がクラス名ベースでスタイルを共有してたのにそちらのケアを忘れてた
グループのレンダリングのテスト
まずテストケースを作るか
付箋は雑にオブジェクトのリストを作ってテストしてたが、グループをやるとなるとそろそろJSONのインポートを。
まずはグループの前に付箋だけでインポートを作るか
付箋だけのJSONからのインポート、できた
本当はJSONのバージョン番号を見て分岐すべき
だけどテストのおかげでそれは必要になってからリファクタリングしたらいいやという気持ちになった
今回も、まず付箋を描くのに必要なオブジェクトのリストがfusensに入るところからスタートして型の支援でするんと移行したから
一度「JSONから付箋は読めたが位置がおかしい」が発生した
元の構造では{x: number, y: number}
新しい構造では{position: number[]}
構造が違うのだから型エラーになるべきだがならなかったのはなぜかというと、テストコードがJSだからanyの状態で渡ってしまうせい
テストコードをTSにすべきかなぁ
Firestoreから読んだ時でも型がないのは同じなので「型がないものに対して期待通りの構造か確認して型をつけて返す関数」が必要だとは思う