2021-07-16Movidea開発日記

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

実際「そういえば実装すべき機能のリストを作ったはずだな」と日記を遡ってみて「この段落、何度も参照するなら別ページに切り出して日付ではないタイトルがあるべきだな」となってMovidea実際に使えるようにするために必要な機能のページができた

Cypressの試行錯誤と機能追加が渾然一体となっててページへの分離に余計な認知的コストが掛かるから、まずはコストを掛けずに書き出そうとしてるのかな？

今日は色々と会議のインタラプトがあるし、振り返りなどを中心に。

昨日作ったドラッグの機能はHTML5 Drag&Drop APIを使っていて、これは初のことだったので色々書くことがあるけど書いてないなぁ

ドラッグ対象

draggableにする

ドラッグ開始時のマウスダウンの位置が中心からどの程度ずれているか記録する

code:tsx

code:ts

const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {

updateGlobal((g) => {

const x, y = value.position;

const cx, cy = screen_to_world(event.clientX, event.clientY);

g.dragstart_position = cx - x, cy - y;

g.drag_target = value.id;

});

};

ドロップ対象

onDragOverでpreventDefaultすることがドロップ受け入れの条件

code:ts

code:ts

export const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {

event.preventDefault();

};

export const onDrop = (event: React.DragEvent<HTMLDivElement>) => {

updateGlobal((g) => {

const dsx, dsy = g.dragstart_position;

const x, y = screen_to_world(event.clientX, event.clientY);

g.itemStoreg.drag_target.position = x - dsx, y - dsy;

});

event.preventDefault();

};

ドラッグ時にプラスマークを表示しないために修正

Cypressでテストする時、onDragStartでevent.dataTransferがundefinedなので、ない時には無視する形にする必要があった

code:ts

const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {

if (event.dataTransfer !== undefined) {

event.dataTransfer.effectAllowed = "move";

}...

code:ts

export const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {

event.dataTransfer.dropEffect = "move";

event.preventDefault();

};

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

逆に、前回Regroupでは不安だったから早く試したクラウド保存機能に関しては今回は後回しにする予定

今週のまとめ

immerで更新してCypressでテスト

CypressのTypeScript化

2021-07-13Movidea開発日記

2021-07-14Movidea開発日記

2021-07-15Movidea開発日記

DOMによる矩形範囲の表現

矩形範囲との交差判定

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

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

許さないイメージ