@miyamonz

s/待遇/対偶/g

s/mouseup字の処理/mouseup時の処理

ご参考までにどうぞ

code:sample.js

import {listen} from './listen.js';

for await (const event of listen(window, 'mousedown')) {

const downPos = {x: event.clinetX, y: event.clientY }

for await (const mouseEvent of listen(window, 'mousemove')) {

/* drag中の処理 downPosも参照できる */

}

ここらへんのこと一回考えた気がするのだが、忘れてしまったな

mosemoveのfor awaitのループ内のどこかの一行でupがresolveされたかチェックするのはだめ

それ以外のところでawaitして、upのチェックができないタイミングがあるから

for awaitを外側からrejectできないとだめになり、無理になる

code:sample.js

const upEvent = await mouseUpPromise()

// mouseup時の処理

}

code:listen.js

function getPromise() {

let _resolve;

const update = () => new Promise((res) => _resolve = res);

const resolve = (value) => _resolve(value);

}

code:listen.js

export async function* listen(element, type) {

let done;

const callback = e => resolve(e);

element.addEventListener(type, callback);

try {

while (true) {

const event = await done;

done = update();

yield event;

}

} finally {

// 後始末

element.removeEventListener(type, callback);

}

}

miyamonz.icon

memo

後でもうちょっと見ます

update->getPromise

最初のwhile ループでdoneに代入がされてないかeventがundefinedにならないか？

じゃあなんでこれで動いたんだろう……？

でもこの挙動は確かにおかしいですね

code:js

while(true) {

yeild await update()

}

動かしてないので想像だけど

僕もアイデアがあるので書き直してみます

code:baseline.js

// ベースライン実装

function mouseDown(event) {

console.group("mouseEvent");

console.log({ mouseDown: event, time: event.timeStamp });

window.removeEventListener("mousemove", mouseMove);

window.addEventListener("mousemove", mouseMove);

window.removeEventListener("mouseup", mouseUp);

window.addEventListener("mouseup", mouseUp);

const downPos = { x: event.clinetX, y: event.clientY };

function mouseMove(event) {

console.log({ mouseMove: event, time: event.timeStamp });

// downPos

}

function mouseUp(event) {

console.log({ mouseUp: event, time: event.timeStamp });

window.removeEventListener("mouseup", mouseUp);

window.removeEventListener("mousemove", mouseMove);

console.groupEnd("mouseEvent");

}

}

window.addEventListener("mousedown", mouseDown);

console.groupを使って、mouseDown ~ mouseUpをグループ化して表示する

多重呼び出しがあればみてすぐにわかるようになる

この実装が一番いいような気もしないでもない

thenチェーンで柔軟性を高めた実装

code:promise.js

const controller = new AbortController();

const signal = controller.signal;

function onAbort() {

console.log("aborted");

}

// controller.abort();

let promise = Promise.resolve();

const update = () => {

promise = promise.then(mouseDownChain).then(onMouseDown, onAbort);

// .catch(onHandleError);

};

update();

function mouseDownChain() {

return new Promise((resolve, reject) => {

window.addEventListener("mousedown", resolve);

signal.addEventListener("abort", reject);

});

}

function mouseMoveChain() {

return new Promise((resolve, reject) => {

window.addEventListener("mousemove", resolve);

window.addEventListener("mouseup", reject);

});

}

function onMouseDown(event) {

console.group("mouseEvent");

console.log({ mouseDown: event, time: event.timeStamp });

update();

let movingPromise = Promise.resolve();

const innerUpdate = () => {

movingPromise = movingPromise

.then(mouseMoveChain)

.then(onMouseMove, onMouseUp);

// .catch(onHandleError);

};

innerUpdate();

const downPos = { x: event.clinetX, y: event.clientY };

/* mousedown */

function onMouseMove(event) {

console.log({ mouseMove: event, time: event.timeStamp });

innerUpdate();

/*　　mousemove　　*/

}

function onMouseUp(event) {

console.log({ mouseUp: event, time: event.timeStamp });

/*　 mouseup　　*/

console.groupEnd("mouseEvent");

}

}

こうしてみるとお二人のよりかなり長い？

割と「ちゃんと」書いてしまった

コメントとかconsole APIを削ればそうでもないかもしれない

利点

abort対応済み

お好きなテイストでどうぞ

僕はresolve/reject持ち出しパターンがあまり好きでない（）

エラー処理も簡単

拡張性が高い

thenチェーンの組み替えによる処理の変更、catch functionの追加によるエラー処理、resolve, reject条件の変更など

chain functionを切り出せているのが特に強みかもしれない

resolve, reject条件の変更ができると、待機条件やthrow errorとかに柔軟性が出る（多分）

ここらへん、removeしたあとにすぐaddしてるのはなぜ？

唯一性を担保するのが面倒だからremoveとaddを同時にやってます。。。

事前に了承をとらずに使ってしまい申し訳ありません。問題があれば名前を変えようと思います

firefoxでも無理だったぞ

昨日も今日も使えてます

まさかFirefoxに個体差があるとか？

firefox普段使ってないんで追い調査めんどいけど、気が向いたらやってみます

実はそういう他のソフトもちょっとは調べてるのですが、これだ！というのを見つけられて無くて

ユーザが多いからFuson360には慣れておくと良いかも、とは思うものの、本当はコードとかパラメトリックにやりたいですね

OpenSCADとか

s/動的なimport/import

おそらく当時の記述にdynamic importがどうのこうのみたいな記述があって、それはstatic importでも普通にできるみたいなことを言いたかったのかもしれません

wandboxに投げるの、なるほど