2021-07-01

今日の一枚 §

まだ実はグループのdivが付箋のdivを包んでない

普通のDOMでは「中身の位置が先に確定していて、それを包むように親要素のサイズが決まる」ではないので、自前でバウンディングボックスを計算する必要があった

• とりあえずそのバウンディングボックス計算がうまく行ったことを確認した

DOMの包含関係によってズレる計算は後回しにしようと思ってグループの中心を0にしたのだが、よく考えたら位置の起点は親要素の左上隅であった

親要素のバウンディングボックスが決まった時点で起点の位置はわかるので、それを子要素に伝搬すればいいかな

2021-07-02 キチンと座標をテストした まだグループは付箋を包含してない Group.tsx

<>
  <GroupDiv style={style} key={value.id} data-testid={value.id}></GroupDiv>
  {idsToDom(value.items, offset)}
</>

包含させると当然ズレる Group.tsx

<GroupDiv style={style} key={value.id} data-testid={value.id}>
  {idsToDom(value.items, offset)}
</GroupDiv>

ここでoffsetを伝搬していくように変えると…あれ、見た目は正しそうなのにテストがこけるな？5pxズレてる。

なるほど、ボーダーの太さの分だけズレるのか

無事元通り

---

Regroupからガチの複雑なグループをインポート 中身の描画位置がズレてるね これはまあ、RegroupとMovideaの座標の持ち方が違うせい。 Regroupは枝葉の付箋も絶対座標を持っているがMovideaは親からの相対座標になってる。 Regroupからのインポートの時だけ直してやらなければならない。

相対座標スタイルだと、グループ化の際に子要素の座標が書き換わる必要がある。グループのドラッグでは必要ない。

あー、そもそも付箋の拡大機能が未実装だった それと「グループの中のグループ」がおかしいみたいね インポートが間違ってるのか描画が間違ってるのか確認のためにもっとシンプルなもので試そう

scaled できた

nested これはグループの中のグループのオフセットが狂ってるな 治った

もう一度確認してみる Regroupでの見え方 だいぶマシになった。あれ、これそもそも付箋の縦横比とかグループのマージンが違うのでは？

直した うーむ、これグループのネストと無関係に拡大した付箋のバウンディングボックスが違うよな

最小限にした あ、なるほど、バウンディングボックスの計算で高さと幅が逆だ

うーむ、まだ少しおかしいな。 これは複合的な問題だからRegroupからのインポートは一旦脇に置いとこうかな。 これ単体で使う機能を使っている間にもっとシンプルな形で解消しそう。

次にやること

• immerで更新
  • 付箋を動かしたり追加したり
  • immerで更新してCypressでテスト
• その後、そういう操作はJS APIとして露出する

--- this week done ・CypressとReactNを組み合わせてテストできるようにする ・タッチパッドでの平行移動拡大縮小 ・グループの描画(基本的なもの) ・RegroupのJSONからインポート doing ・RegroupのJSONからインポートした時、グループの中の付箋の位置が狂う ・拡大した付箋を表示する機能がまだだった