最近Movideaの開発がこのページみたいに日記スタイルなんだけどpRegroupやpKeichoみたいにやらないのは「構造が事後的に発生するのでは」というような気持ちなのです
実際「そういえば実装すべき機能のリストを作ったはずだな」と日記を遡ってみて「この段落、何度も参照するなら別ページに切り出して日付ではないタイトルがあるべきだな」となってMovidea実際に使えるようにするために必要な機能のページができた
Cypressの試行錯誤と機能追加が渾然一体となっててページへの分離に余計な認知的コストが掛かるから、まずはコストを掛けずに書き出そうとしてるのかな？
今日は色々と会議のインタラプトがあるし、振り返りなどを中心に。
昨日作ったドラッグの機能はHTML5 Drag&Drop APIを使っていて、これは初のことだったので色々書くことがあるけど書いてないなぁ
<GroupDiv ... onDragStart={onDragStart} draggable={true}>
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;
});
};
<div id="canvas" onDrop={onDrop} onDragOver={allowDrop}>
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.itemStore[g.drag_target].position = [x - dsx, y - dsy];
});
event.preventDefault();
};
ドラッグ時にプラスマークを表示しないために修正
onDragStartでevent.dataTransferがundefinedなので、ない時には無視する形にする必要があった
ts const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
if (event.dataTransfer !== undefined) {
event.dataTransfer.effectAllowed = "move";
}...
ts
export const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.dropEffect = "move";
event.preventDefault();
};
不安なことは早く試す原則からすると、DOMに対して範囲選択するのを次は試すべき 逆に、前回Regroupでは不安だったから早く試したクラウド保存機能に関しては今回は後回しにする予定
今週のまとめ
DOMによる矩形範囲の表現 矩形範囲との交差判定