Сообщение от Kolyaj
|
|
Для чего реализовывать автомат, если обработка mousemove зависит только от того, нажата в данный момент кнопка мыши или нет, и больше ни от чего?
|
Так это... конечный автомат и будет зависеть только от этих событий (скопипасчено с flapjax-lang.org/demos/drag.html и заботливо откомментировано):
// dragE(element) -> EventStream { left: int, top: int }
function dragE(target) {
// начинаем в состоянии покоя
// moveEe :: EventStream (EventStream { left: int, top: int })
var moveEe = extractEventE(target,'mousedown').mapE(function(md) {
// переходим из начального состояния в состояние переноса
var startX = md.layerX;
var startY = md.layerY;
// в состоянии переноса отлавливаем все события mousemove
// и сохраняем в особый объект
return extractEventE(document,'mousemove').mapE(function(mm) {
mm.preventDefault(); // отменяем выделение текста
return { element: target, // ради удобства
left: mm.clientX - startX,
top: mm.clientY - startY };
});
});
// терминирующее состояние
// dropEe :: EventStream (EventStream 'a)
var dropEe = extractEventE(document,'mouseup').mapE(function() {
return zeroE();
});
// switchE "смешивает" перемещение и окончание, то есть,
// когда поступает mouseup, то mousemove нас уже не интересуют,
// и мы на этом заканчиваем
return switchE(mergeE(moveEe,dropEe));
}
(беспроблемно расширяется до
http://flapjax-lang.org/try/index.ht...=listdrag.html)
Этот подход таки лучше указанного в статье, потому что callback'ов нету, а есть потоки событий, с которыми можно обращаться также, как и с переменными (передавать в функции, возвращать из функций, "изменять", etc.).
Еще раз повторю: сначала спецификация, затем код. Иначе не будет четкого понимания, что и зачем делаем, лапша получится.
