今日の一枚
immerで更新してCypressでテストできるようになったのでimmerで色々更新してみる グループの位置を更新
子要素Bの位置を更新
グループ作成後に子要素が移動した時にどうなるべきか 現状はバウンディングボックスは適切に描画されているが子要素描画のオフセットがズレている
A: 解決方法として「子要素が移動した時に親のpositionを修正する」がある
- 一見まどろっこしいけど実は真っ当で、子要素の位置が変わって親要素の中心が動いてるから
- もちろんグループはネストしてる可能性があるから上に伝搬していく必要がある
B: レンダリング時に調整する手もある
- 子要素のバウンディングボックスを計算したタイミングで中心が0でないことはわかるのでオフセットをずらせば良い
- この場合、画面上の「子要素の中心」のグループの「位置」がズレるので、畳んだ時に中心に畳まれない
- 畳んだ時に位置を更新したらいい、どっちみち畳まれ状態への更新が必要なので
これは「グループを作った後で子要素をドラッグして移動」が実装された後に必要になるものだから一旦保留して先に進もう
タイトルがある場合のマージン
- うーん、これは下だな
Regroupではボーダーを白にしてたんだけど
- タイトルがつく場合にこれでいいのかは微妙かも
- 特に閉じた時の表現
- ボーダーを残すことでグループであることを表現してるのでボーダーが白だと区別つかなくなる
- Regroup
- あ、そうか、ボーダーを残してるのではなくて背景を残してるのか
- つまりこうだな
- これならボーダーがあるかどうかは関係なくなる
今回の開発はCypressで確認したい状態にして画面を確認して期待したものになってるのをみてそれをコードで確認するように変えて…という感じで開発しているのでリファクタリングするときの安心感が高い。しかしいまだに人間が操作するためのイベントハンドラとかをつけてない。これでいいのか？
- 「なるべく早くユーザが実際に使えるものを作って使ってもらって観察すべき」という観点からすると遠回りしてる？
実際に使えるようにするために必要な機能を書き出す
子要素を移動した時にオフセットがずれる問題、後回しにしようかと思ったけど シンプルな状態でテストを書いた方がいいなと思ったので明日はまずそれをやろう 後からやり方を変えたくなってもテストがあればやりやすいはずだから