2021-07-13Movidea開発日記

今日の一枚

https://gyazo.com/fea4976e7cd0970fa2d6215de931307d

---

グループの位置を更新

https://gyazo.com/b520f31bbd2876a31557b797babf2f5c

子要素Bの位置を更新

グループ作成後に子要素が移動した時にどうなるべきか

現状はバウンディングボックスは適切に描画されているが子要素描画のオフセットがズレている

A: 解決方法として「子要素が移動した時に親のpositionを修正する」がある

一見まどろっこしいけど実は真っ当で、子要素の位置が変わって親要素の中心が動いてるから

もちろんグループはネストしてる可能性があるから上に伝搬していく必要がある

B: レンダリング時に調整する手もある

子要素のバウンディングボックスを計算したタイミングで中心が0でないことはわかるのでオフセットをずらせば良い

この場合、画面上の「子要素の中心」のグループの「位置」がズレるので、畳んだ時に中心に畳まれない

畳んだ時に位置を更新したらいい、どっちみち畳まれ状態への更新が必要なので

これは「グループを作った後で子要素をドラッグして移動」が実装された後に必要になるものだから一旦保留して先に進もう

タイトルがある場合のマージン

https://gyazo.com/6fb2cd2980e2072a0d88e675287b8bd3

https://gyazo.com/fea4976e7cd0970fa2d6215de931307d

うーん、これは下だな

Regroupではボーダーを白にしてたんだけど

https://gyazo.com/47a2059d82ea2ca650b8778f12f81916

タイトルがつく場合にこれでいいのかは微妙かも

特に閉じた時の表現

ボーダーを残すことでグループであることを表現してるのでボーダーが白だと区別つかなくなる

Regroup

https://gyazo.com/2441807c2369e1554dd2c0c4a463836c

https://gyazo.com/29ac8099d8e59321c5ec9a2608d5d8be

あ、そうか、ボーダーを残してるのではなくて背景を残してるのか

つまりこうだな

https://gyazo.com/19496a64d88a4040247134174fc7f9cb

これならボーダーがあるかどうかは関係なくなる

今回の開発はCypressで確認したい状態にして画面を確認して期待したものになってるのをみてそれをコードで確認するように変えて…という感じで開発しているのでリファクタリングするときの安心感が高い。しかしいまだに人間が操作するためのイベントハンドラとかをつけてない。これでいいのか？

「なるべく早くユーザが実際に使えるものを作って使ってもらって観察すべき」という観点からすると遠回りしてる？

実際に使えるようにするために必要な機能を書き出す

子要素を移動した時にオフセットがずれる問題、後回しにしようかと思ったけど

シンプルな状態でテストを書いた方がいいなと思ったので明日はまずそれをやろう

後からやり方を変えたくなってもテストがあればやりやすいはずだから