format input.js according to new guidelines
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
096d8770f2
commit
80c446da3d
1 changed files with 208 additions and 214 deletions
422
js/input.js
422
js/input.js
|
|
@ -1,7 +1,7 @@
|
||||||
const inputConfig = {
|
const inputConfig = {
|
||||||
clickRadius: 10, // Radius to be considered a click (pixels). If farther, turns into a drag
|
clickRadius: 10, // Radius to be considered a click (pixels). If farther, turns into a drag
|
||||||
clickTiming: 500, // Timing window to be considered a click (ms). If longer, turns into a drag
|
clickTiming: 500, // Timing window to be considered a click (ms). If longer, turns into a drag
|
||||||
dClickTiming: 500, // Timing window to be considered a double click (ms).
|
dClickTiming: 500, // Timing window to be considered a double click (ms).
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -9,266 +9,260 @@ const inputConfig = {
|
||||||
*/
|
*/
|
||||||
// Base object generator functions
|
// Base object generator functions
|
||||||
function _context_coords() {
|
function _context_coords() {
|
||||||
return {
|
return {
|
||||||
dragging: {
|
dragging: {
|
||||||
left: null,
|
left: null,
|
||||||
middle: null,
|
middle: null,
|
||||||
right: null,
|
right: null,
|
||||||
},
|
},
|
||||||
|
|
||||||
prev: {
|
prev: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
pos: {
|
pos: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
function _mouse_observers() {
|
function _mouse_observers() {
|
||||||
return {
|
return {
|
||||||
// Simple click handlers
|
// Simple click handlers
|
||||||
onclick: new Observer(),
|
onclick: new Observer(),
|
||||||
// Double click handlers (will still trigger simple click handler as well)
|
// Double click handlers (will still trigger simple click handler as well)
|
||||||
ondclick: new Observer(),
|
ondclick: new Observer(),
|
||||||
// Drag handler
|
// Drag handler
|
||||||
ondragstart: new Observer(),
|
ondragstart: new Observer(),
|
||||||
ondrag: new Observer(),
|
ondrag: new Observer(),
|
||||||
ondragend: new Observer(),
|
ondragend: new Observer(),
|
||||||
// Paint handler (like drag handler, but with no delay); will trigger during clicks too
|
// Paint handler (like drag handler, but with no delay); will trigger during clicks too
|
||||||
onpaintstart: new Observer(),
|
onpaintstart: new Observer(),
|
||||||
onpaint: new Observer(),
|
onpaint: new Observer(),
|
||||||
onpaintend: new Observer(),
|
onpaintend: new Observer(),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function _context_observers() {
|
function _context_observers() {
|
||||||
return {
|
return {
|
||||||
onmousemove: new Observer(),
|
onmousemove: new Observer(),
|
||||||
left: _mouse_observers(),
|
left: _mouse_observers(),
|
||||||
middle: _mouse_observers(),
|
middle: _mouse_observers(),
|
||||||
right: _mouse_observers(),
|
right: _mouse_observers(),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const mouse = {
|
const mouse = {
|
||||||
buttons: {
|
buttons: {
|
||||||
right: null,
|
right: null,
|
||||||
left: null,
|
left: null,
|
||||||
middle: null,
|
middle: null,
|
||||||
},
|
},
|
||||||
|
|
||||||
// Mouse Actions in Window Coordinates
|
// Mouse Actions in Window Coordinates
|
||||||
window: _context_coords(),
|
window: _context_coords(),
|
||||||
|
|
||||||
// Mouse Actions in Canvas Coordinates
|
// Mouse Actions in Canvas Coordinates
|
||||||
canvas: _context_coords(),
|
canvas: _context_coords(),
|
||||||
|
|
||||||
// Mouse Actions in World Coordinates
|
// Mouse Actions in World Coordinates
|
||||||
world: _context_coords(),
|
world: _context_coords(),
|
||||||
|
|
||||||
listen: {
|
listen: {
|
||||||
window: _context_observers(),
|
window: _context_observers(),
|
||||||
canvas: _context_observers(),
|
canvas: _context_observers(),
|
||||||
world: _context_observers(),
|
world: _context_observers(),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function _mouse_state_snapshot() {
|
function _mouse_state_snapshot() {
|
||||||
return {
|
return {
|
||||||
buttons: window.structuredClone(mouse.buttons),
|
buttons: window.structuredClone(mouse.buttons),
|
||||||
window: window.structuredClone(mouse.window),
|
window: window.structuredClone(mouse.window),
|
||||||
canvas: window.structuredClone(mouse.canvas),
|
canvas: window.structuredClone(mouse.canvas),
|
||||||
world: window.structuredClone(mouse.world),
|
world: window.structuredClone(mouse.world),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const _double_click_timeout = {};
|
const _double_click_timeout = {};
|
||||||
const _drag_start_timeout = {};
|
const _drag_start_timeout = {};
|
||||||
|
|
||||||
window.onmousedown = (evn) => {
|
window.onmousedown = (evn) => {
|
||||||
const time = new Date();
|
const time = new Date();
|
||||||
|
|
||||||
// Processes for a named button
|
// Processes for a named button
|
||||||
const onhold = (key) => () => {
|
const onhold = (key) => () => {
|
||||||
if (_double_click_timeout[key]) {
|
if (_double_click_timeout[key]) {
|
||||||
// ondclick event
|
// ondclick event
|
||||||
['window', 'canvas', 'world'].forEach((ctx) =>
|
["window", "canvas", "world"].forEach((ctx) =>
|
||||||
mouse.listen[ctx][key].ondclick.emit({
|
mouse.listen[ctx][key].ondclick.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
buttonId: evn.button,
|
buttonId: evn.button,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
// Start timer
|
// Start timer
|
||||||
_double_click_timeout[key] = setTimeout(
|
_double_click_timeout[key] = setTimeout(
|
||||||
() => delete _double_click_timeout[key],
|
() => delete _double_click_timeout[key],
|
||||||
inputConfig.dClickTiming
|
inputConfig.dClickTiming
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set drag start timeout
|
// Set drag start timeout
|
||||||
_drag_start_timeout[key] = setTimeout(() => {
|
_drag_start_timeout[key] = setTimeout(() => {
|
||||||
['window', 'canvas', 'world'].forEach((ctx) => {
|
["window", "canvas", "world"].forEach((ctx) => {
|
||||||
mouse.listen[ctx][key].ondragstart.emit({
|
mouse.listen[ctx][key].ondragstart.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
buttonId: evn.button,
|
buttonId: evn.button,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
if (mouse[ctx].dragging[key])
|
if (mouse[ctx].dragging[key]) mouse[ctx].dragging[key].drag = true;
|
||||||
mouse[ctx].dragging[key].drag = true;
|
|
||||||
|
|
||||||
delete _drag_start_timeout[key];
|
delete _drag_start_timeout[key];
|
||||||
});
|
});
|
||||||
}, inputConfig.clickTiming);
|
}, inputConfig.clickTiming);
|
||||||
|
|
||||||
['window', 'canvas', 'world'].forEach((ctx) => {
|
["window", "canvas", "world"].forEach((ctx) => {
|
||||||
mouse.buttons[key] = time;
|
mouse.buttons[key] = time;
|
||||||
mouse[ctx].dragging[key] = {};
|
mouse[ctx].dragging[key] = {};
|
||||||
Object.assign(mouse[ctx].dragging[key], mouse[ctx].pos);
|
Object.assign(mouse[ctx].dragging[key], mouse[ctx].pos);
|
||||||
|
|
||||||
// onpaintstart event
|
// onpaintstart event
|
||||||
mouse.listen[ctx][key].onpaintstart.emit({
|
mouse.listen[ctx][key].onpaintstart.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
buttonId: evn.button,
|
buttonId: evn.button,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// Runs the correct handler
|
// Runs the correct handler
|
||||||
const buttons = [onhold('left'), onhold('middle'), onhold('right')];
|
const buttons = [onhold("left"), onhold("middle"), onhold("right")];
|
||||||
|
|
||||||
buttons[evn.button] && buttons[evn.button]();
|
buttons[evn.button] && buttons[evn.button]();
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onmouseup = (evn) => {
|
window.onmouseup = (evn) => {
|
||||||
const time = new Date();
|
const time = new Date();
|
||||||
|
|
||||||
// Processes for a named button
|
// Processes for a named button
|
||||||
const onrelease = (key) => () => {
|
const onrelease = (key) => () => {
|
||||||
['window', 'canvas', 'world'].forEach((ctx) => {
|
["window", "canvas", "world"].forEach((ctx) => {
|
||||||
const start = {
|
const start = {
|
||||||
x: mouse[ctx].dragging[key].x,
|
x: mouse[ctx].dragging[key].x,
|
||||||
y: mouse[ctx].dragging[key].y,
|
y: mouse[ctx].dragging[key].y,
|
||||||
};
|
};
|
||||||
|
|
||||||
// onclick event
|
// onclick event
|
||||||
const dx = mouse[ctx].pos.x - start.x;
|
const dx = mouse[ctx].pos.x - start.x;
|
||||||
const dy = mouse[ctx].pos.y - start.y;
|
const dy = mouse[ctx].pos.y - start.y;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
time.getTime() - mouse.buttons[key].getTime() <
|
time.getTime() - mouse.buttons[key].getTime() <
|
||||||
inputConfig.clickTiming &&
|
inputConfig.clickTiming &&
|
||||||
dx * dx + dy * dy <
|
dx * dx + dy * dy < inputConfig.clickRadius * inputConfig.clickRadius
|
||||||
inputConfig.clickRadius * inputConfig.clickRadius
|
)
|
||||||
)
|
mouse.listen[ctx][key].onclick.emit({
|
||||||
mouse.listen[ctx][key].onclick.emit({
|
target: evn.target,
|
||||||
target: evn.target,
|
buttonId: evn.button,
|
||||||
buttonId: evn.button,
|
x: mouse[ctx].pos.x,
|
||||||
x: mouse[ctx].pos.x,
|
y: mouse[ctx].pos.y,
|
||||||
y: mouse[ctx].pos.y,
|
timestamp: new Date(),
|
||||||
timestamp: new Date(),
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// onpaintend event
|
// onpaintend event
|
||||||
mouse.listen[ctx][key].onpaintend.emit({
|
mouse.listen[ctx][key].onpaintend.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
buttonId: evn.button,
|
buttonId: evn.button,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
|
|
||||||
// ondragend event
|
// ondragend event
|
||||||
if (mouse[ctx].dragging[key].drag)
|
if (mouse[ctx].dragging[key].drag)
|
||||||
mouse.listen[ctx][key].ondragend.emit({
|
mouse.listen[ctx][key].ondragend.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
buttonId: evn.button,
|
buttonId: evn.button,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
|
|
||||||
mouse[ctx].dragging[key] = null;
|
mouse[ctx].dragging[key] = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (_drag_start_timeout[key] !== undefined) {
|
if (_drag_start_timeout[key] !== undefined) {
|
||||||
clearTimeout(_drag_start_timeout[key]);
|
clearTimeout(_drag_start_timeout[key]);
|
||||||
delete _drag_start_timeout[key];
|
delete _drag_start_timeout[key];
|
||||||
}
|
}
|
||||||
mouse.buttons[key] = null;
|
mouse.buttons[key] = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Runs the correct handler
|
// Runs the correct handler
|
||||||
const buttons = [
|
const buttons = [onrelease("left"), onrelease("middle"), onrelease("right")];
|
||||||
onrelease('left'),
|
|
||||||
onrelease('middle'),
|
|
||||||
onrelease('right'),
|
|
||||||
];
|
|
||||||
|
|
||||||
buttons[evn.button] && buttons[evn.button]();
|
buttons[evn.button] && buttons[evn.button]();
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onmousemove = (evn) => {
|
window.onmousemove = (evn) => {
|
||||||
// Set Window Coordinates
|
// Set Window Coordinates
|
||||||
Object.assign(mouse.window.prev, mouse.window.pos);
|
Object.assign(mouse.window.prev, mouse.window.pos);
|
||||||
mouse.window.pos = { x: evn.clientX, y: evn.clientY };
|
mouse.window.pos = {x: evn.clientX, y: evn.clientY};
|
||||||
|
|
||||||
// Set Canvas Coordinates (using overlay canvas as reference)
|
// Set Canvas Coordinates (using overlay canvas as reference)
|
||||||
if (evn.target.id === 'overlayCanvas') {
|
if (evn.target.id === "overlayCanvas") {
|
||||||
Object.assign(mouse.canvas.prev, mouse.canvas.pos);
|
Object.assign(mouse.canvas.prev, mouse.canvas.pos);
|
||||||
mouse.canvas.pos = { x: evn.layerX, y: evn.layerY };
|
mouse.canvas.pos = {x: evn.layerX, y: evn.layerY};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set World Coordinates (For now the same as canvas coords; Will be useful with infinite canvas)
|
// Set World Coordinates (For now the same as canvas coords; Will be useful with infinite canvas)
|
||||||
if (evn.target.id === 'overlayCanvas') {
|
if (evn.target.id === "overlayCanvas") {
|
||||||
Object.assign(mouse.world.prev, mouse.world.pos);
|
Object.assign(mouse.world.prev, mouse.world.pos);
|
||||||
mouse.world.pos = { x: evn.layerX, y: evn.layerY };
|
mouse.world.pos = {x: evn.layerX, y: evn.layerY};
|
||||||
}
|
}
|
||||||
|
|
||||||
['window', 'canvas', 'world'].forEach((ctx) => {
|
["window", "canvas", "world"].forEach((ctx) => {
|
||||||
mouse.listen[ctx].onmousemove.emit({
|
mouse.listen[ctx].onmousemove.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
px: mouse[ctx].prev.x,
|
px: mouse[ctx].prev.x,
|
||||||
py: mouse[ctx].prev.y,
|
py: mouse[ctx].prev.y,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
['left', 'middle', 'right'].forEach((key) => {
|
["left", "middle", "right"].forEach((key) => {
|
||||||
// ondrag event
|
// ondrag event
|
||||||
if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag)
|
if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag)
|
||||||
mouse.listen[ctx][key].ondrag.emit({
|
mouse.listen[ctx][key].ondrag.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
px: mouse[ctx].prev.x,
|
px: mouse[ctx].prev.x,
|
||||||
py: mouse[ctx].prev.y,
|
py: mouse[ctx].prev.y,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
|
|
||||||
// onpaint event
|
// onpaint event
|
||||||
if (mouse[ctx].dragging[key])
|
if (mouse[ctx].dragging[key])
|
||||||
mouse.listen[ctx][key].onpaint.emit({
|
mouse.listen[ctx][key].onpaint.emit({
|
||||||
target: evn.target,
|
target: evn.target,
|
||||||
px: mouse[ctx].prev.x,
|
px: mouse[ctx].prev.x,
|
||||||
py: mouse[ctx].prev.y,
|
py: mouse[ctx].prev.y,
|
||||||
x: mouse[ctx].pos.x,
|
x: mouse[ctx].pos.x,
|
||||||
y: mouse[ctx].pos.y,
|
y: mouse[ctx].pos.y,
|
||||||
timestamp: new Date(),
|
timestamp: new Date(),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
/** MOUSE DEBUG */
|
/** MOUSE DEBUG */
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue