2021-07-16Movidea開発日記

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

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

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

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

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

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

<GroupDiv ... onDragStart={onDragStart} draggable={true}>

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することがドロップ受け入れの条件 ts

<div id="canvas" onDrop={onDrop} onDragOver={allowDrop}>

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();
};

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

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

  const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    if (event.dataTransfer !== undefined) {
      event.dataTransfer.effectAllowed = "move";
    }...

export const allowDrop = (event: React.DragEvent<HTMLDivElement>) => {
  event.dataTransfer.dropEffect = "move";
  event.preventDefault();
};

不安なことは早く試す原則からすると、DOMに対して範囲選択するのを次は試すべき逆に、前回Regroupでは不安だったから早く試したクラウド保存機能に関しては今回は後回しにする予定

今週のまとめ

DOMによる矩形範囲の表現矩形範囲との交差判定

部分交差で選択するか全体包含で選択するか
- グループの中の一部の選択を許すか
  - 許さないイメージ

🪴 Quartz 4.0

2021-07-16Movidea開発日記

Graph View

Backlinks