2021-07-19Movidea開発日記

prev 2021-07-16Movidea開発日記 §

pMovidea作った

• 2021-07-16Movidea開発日記にこう書いたばっかりなのになぜ？

  • 最近Movideaの開発がこのページみたいに日記スタイルなんだけどpRegroupやpKeichoみたいにやらないのは「構造が事後的に発生するのでは」というような気持ちなのです

• 週が空けて続きをやろうと思ったら前回のページを見つけるのに手間取ったから
  • 週明けには週末に書いたものが沈んでるからな
  • 週末に「来週はこれをやろう」と思ったものを書いてpMovideaに書いておこうと思う

不安なことは早く試す原則からすると、DOMに対して範囲選択するのを次は試すべき

• これをやる
• DOMによる矩形範囲の表現
  • canvasでのドラッグ開始でdivを作る
    • マウスイベントをどう整理するのがいいか、前回もカオスになった
    • 既にグループのドラッグが開始と終了で別なファイルに分かれてるしな、よくない
    • とりあえず一つにまとめた
  • 一つの状態遷移図になるべきか？
• 矩形範囲との交差判定
  • 部分交差で選択するか全体包含で選択するか
    • グループの中の一部の選択を許すか
      • 許さないイメージ

• borderないほうがいいかも？

コンテンツの更新がないのにバウンディングボックスを再計算するの無駄な気がするけど、バウンディングボックスの値をキャッシュして適切に再計算するのも「余計な状態の導入」だから、まずは素朴に計算してテストでカバーしてから、計測して遅かった場合だけキャッシュする仕組みを入れるべきだろうなぁ

できた。

テストケースを作る

• 付箋を9個くらい置いて選択

test.ts

cy.get("#canvas").trigger("mousedown", 150, 150);
cy.get("#canvas").trigger("mouseup", 450, 450);
cy.movidea((m) => {
  cy.wrap(m.getGlobal().selected_items).should("to.deep.equal", [
    "0,0",
    "0,1",
    "1,0",
    "1,1",
  ]);
});
 
cy.get("#canvas").trigger("mousedown", 250, 250);
cy.get("#canvas").trigger("mouseup", 150, 150);
cy.movidea((m) => {
  cy.wrap(m.getGlobal().selected_items).should("to.deep.equal", ["0,0"]);
});

cy.movidea((m) => {cy.wrap(m.getGlobal().selected_items).should("to.deep.equal"までカスタムコマンドにできないか？

• いやしかし、アサーションを自前拡張するのはChaiで書かないといけないから面倒だな
• とりあえずChaiのドキュメントを確認したらto.deep.equal は to.eqlでいいみたいだ

index.ts

Cypress.Commands.add("getGlobal", (callback: (g: State) => unknown) => {
  return cy.movidea((movidea) => {
    return cy.wrap(callback(movidea.getGlobal()));
  });
});

test.ts

cy.get("#canvas").trigger("mousedown", 250, 250);
cy.get("#canvas").trigger("mouseup", 150, 150);
cy.getGlobal((g) => g.selected_items).should("to.eql", ["0,0"]);

まあこんなものかな

選択範囲の移動、できる？

• 単体のドラッグ移動はDragDrop APIを使ったが今回は複数ある
  • 一つのDIVに入れる？
    • 選択範囲DIVがあるしな
  • 各IDの位置更新をforでやる？
    • 微妙

選択範囲でのマウスダウンか、選択完了かのどちらかのタイミングで選択されたもののDOMを選択範囲divにいれる