2021-07-16Movidea開発日記
最近Movideaの開発がこのページみたいに日記スタイルなんだけどpRegroupやpKeichoみたいにやらないのは「構造が事後的に発生するのでは」というような気持ちなのです Cypressの試行錯誤と機能追加が渾然一体となっててページへの分離に余計な認知的コストが掛かるから、まずはコストを掛けずに書き出そうとしてるのかな?
今日は色々と会議のインタラプトがあるし、振り返りなどを中心に。
ドラッグ対象
draggableにする
ドラッグ開始時のマウスダウンの位置が中心からどの程度ずれているか記録する
code:tsx
<GroupDiv ... onDragStart={onDragStart} draggable={true}>
code:ts
const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
updateGlobal((g) => {
const x, y = value.position; g.drag_target = value.id;
});
};
ドロップ対象
onDragOverでpreventDefaultすることがドロップ受け入れの条件
code:ts
<div id="canvas" onDrop={onDrop} onDragOver={allowDrop}>
code:ts
export const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
};
export const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
updateGlobal((g) => {
});
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();
};
逆に、前回Regroupでは不安だったから早く試したクラウド保存機能に関しては今回は後回しにする予定
今週のまとめ
DOMによる矩形範囲の表現
矩形範囲との交差判定
部分交差で選択するか全体包含で選択するか
グループの中の一部の選択を許すか
許さないイメージ