2021-07-19Movidea開発日記

https://gyazo.com/7f992e21a62701c5b74dbb7f46e5914e

---

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

週が空けて続きをやろうと思ったら前回のページを見つけるのに手間取ったから

週明けには週末に書いたものが沈んでるからな

週末に「来週はこれをやろう」と思ったものを書いてpMovideaに書いておこうと思う

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

これをやる

DOMによる矩形範囲の表現

canvasでのドラッグ開始でdivを作る

マウスイベントをどう整理するのがいいか、前回もカオスになった

既にグループのドラッグが開始と終了で別なファイルに分かれてるしな、よくない

とりあえず一つにまとめた

一つの状態遷移図になるべきか？

矩形範囲との交差判定

部分交差で選択するか全体包含で選択するか

グループの中の一部の選択を許すか

許さないイメージ

https://gyazo.com/6a6e4e44896ffa94875026803d31033a

borderないほうがいいかも？

https://gyazo.com/98018d5b2d2252fc48a31e5bdb3d21f4

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

できた。

テストケースを作る

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

https://gyazo.com/7f992e21a62701c5b74dbb7f46e5914e

code: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) => {

});

いやしかし、アサーションを自前拡張するのはChaiで書かないといけないから面倒だな

code:index.ts

Cypress.Commands.add("getGlobal", (callback: (g: State) => unknown) => {

return cy.movidea((movidea) => {

return cy.wrap(callback(movidea.getGlobal()));

});

});

code:test.ts

cy.get("#canvas").trigger("mousedown", 250, 250);

cy.get("#canvas").trigger("mouseup", 150, 150);

まあこんなものかな

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

単体のドラッグ移動はDragDrop APIを使ったが今回は複数ある

一つのDIVに入れる？

選択範囲DIVがあるしな

各IDの位置更新をforでやる？

微妙

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