2021-07-01
今日の一枚
https://gyazo.com/1c0fb6f6155aec8b129ed0644a20ffa7
---
https://gyazo.com/7875bb1e2264ad9b16d408a2267a167d
まだ実はグループのdivが付箋のdivを包んでない
普通のDOMでは「中身の位置が先に確定していて、それを包むように親要素のサイズが決まる」ではないので、自前でバウンディングボックスを計算する必要があった
とりあえずそのバウンディングボックス計算がうまく行ったことを確認した
DOMの包含関係によってズレる計算は後回しにしようと思ってグループの中心を0にしたのだが、よく考えたら位置の起点は親要素の左上隅であった
https://gyazo.com/ea95bfc5ad6e0795ab345213690d9f07
親要素のバウンディングボックスが決まった時点で起点の位置はわかるので、それを子要素に伝搬すればいいかな
2021-07-02
キチンと座標をテストした
https://gyazo.com/50795f057f8b7395ee8dd5ae469cc6b8
まだグループは付箋を包含してない
code:Group.tsx
<>
<GroupDiv style={style} key={value.id} data-testid={value.id}></GroupDiv>
{idsToDom(value.items, offset)}
</>
包含させると当然ズレる
https://gyazo.com/b7b5074d0c72df6a187f052734536aa3
code:Group.tsx
<GroupDiv style={style} key={value.id} data-testid={value.id}>
{idsToDom(value.items, offset)}
</GroupDiv>
ここでoffsetを伝搬していくように変えると…あれ、見た目は正しそうなのにテストがこけるな？5pxズレてる。
https://gyazo.com/5ea19eff6f0db85cc69c0e2fbc94a8c1
なるほど、ボーダーの太さの分だけズレるのか
https://gyazo.com/c8cfdb5438b8bccdcdf3715a0bca0e84
無事元通り
https://gyazo.com/216e21b5809daea2ff17da63d6e17228
----
Regroupからガチの複雑なグループをインポート
https://gyazo.com/0d1187d7fe01b6a4de30333c80c1948e
https://gyazo.com/9b8c7dda1fc8f68814f6cabe3d71e662
中身の描画位置がズレてるね
これはまあ、RegroupとMovideaの座標の持ち方が違うせい。
Regroupは枝葉の付箋も絶対座標を持っているがMovideaは親からの相対座標になってる。
Regroupからのインポートの時だけ直してやらなければならない。
相対座標スタイルだと、グループ化の際に子要素の座標が書き換わる必要がある。グループのドラッグでは必要ない。
https://gyazo.com/979e4781205108a6f269bd8d566689a5
あー、そもそも付箋の拡大機能が未実装だった
それと「グループの中のグループ」がおかしいみたいね
インポートが間違ってるのか描画が間違ってるのか確認のためにもっとシンプルなもので試そう
scaled
https://gyazo.com/b5c14b31074d874d9c9c6b27f836844c
できた
nested
https://gyazo.com/dffb7c53b6164bbd3f456647cefa3c56
これはグループの中のグループのオフセットが狂ってるな
https://gyazo.com/1c0fb6f6155aec8b129ed0644a20ffa7
治った
もう一度確認してみる
https://gyazo.com/3f275de44a217a88c770713ce838d9ae
Regroupでの見え方
https://gyazo.com/0d1187d7fe01b6a4de30333c80c1948e
だいぶマシになった。あれ、これそもそも付箋の縦横比とかグループのマージンが違うのでは？
直した
https://gyazo.com/4ed0dc5b0845d7b93edd9850306b247a
うーむ、これグループのネストと無関係に拡大した付箋のバウンディングボックスが違うよな
最小限にした
https://gyazo.com/d7d65a158c85aed51f547d1aa09907eb
https://gyazo.com/cb5676fc427a211dc846f98759e80d8d
あ、なるほど、バウンディングボックスの計算で高さと幅が逆だ
https://gyazo.com/03423309156ec7ab41e4a202f5f98a30
うーむ、まだ少しおかしいな。
これは複合的な問題だからRegroupからのインポートは一旦脇に置いとこうかな。
これ単体で使う機能を使っている間にもっとシンプルな形で解消しそう。
次にやること
immerで更新
付箋を動かしたり追加したり
その後、そういう操作はJS APIとして露出する
--- this week
done
・CypressとReactNを組み合わせてテストできるようにする
・タッチパッドでの平行移動拡大縮小
・グループの描画(基本的なもの)
・RegroupのJSONからインポート
doing
・RegroupのJSONからインポートした時、グループの中の付箋の位置が狂う
・拡大した付箋を表示する機能がまだだった