diff --git a/js/input.js b/js/input.js index 095ea1f..6a76c2e 100644 --- a/js/input.js +++ b/js/input.js @@ -1,7 +1,7 @@ const inputConfig = { - 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 - dClickTiming: 500, // Timing window to be considered a double click (ms). + 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 + dClickTiming: 500, // Timing window to be considered a double click (ms). }; /** @@ -9,266 +9,260 @@ const inputConfig = { */ // Base object generator functions function _context_coords() { - return { - dragging: { - left: null, - middle: null, - right: null, - }, + return { + dragging: { + left: null, + middle: null, + right: null, + }, - prev: { - x: 0, - y: 0, - }, + prev: { + x: 0, + y: 0, + }, - pos: { - x: 0, - y: 0, - }, - }; + pos: { + x: 0, + y: 0, + }, + }; } function _mouse_observers() { - return { - // Simple click handlers - onclick: new Observer(), - // Double click handlers (will still trigger simple click handler as well) - ondclick: new Observer(), - // Drag handler - ondragstart: new Observer(), - ondrag: new Observer(), - ondragend: new Observer(), - // Paint handler (like drag handler, but with no delay); will trigger during clicks too - onpaintstart: new Observer(), - onpaint: new Observer(), - onpaintend: new Observer(), - }; + return { + // Simple click handlers + onclick: new Observer(), + // Double click handlers (will still trigger simple click handler as well) + ondclick: new Observer(), + // Drag handler + ondragstart: new Observer(), + ondrag: new Observer(), + ondragend: new Observer(), + // Paint handler (like drag handler, but with no delay); will trigger during clicks too + onpaintstart: new Observer(), + onpaint: new Observer(), + onpaintend: new Observer(), + }; } function _context_observers() { - return { - onmousemove: new Observer(), - left: _mouse_observers(), - middle: _mouse_observers(), - right: _mouse_observers(), - }; + return { + onmousemove: new Observer(), + left: _mouse_observers(), + middle: _mouse_observers(), + right: _mouse_observers(), + }; } const mouse = { - buttons: { - right: null, - left: null, - middle: null, - }, + buttons: { + right: null, + left: null, + middle: null, + }, - // Mouse Actions in Window Coordinates - window: _context_coords(), + // Mouse Actions in Window Coordinates + window: _context_coords(), - // Mouse Actions in Canvas Coordinates - canvas: _context_coords(), + // Mouse Actions in Canvas Coordinates + canvas: _context_coords(), - // Mouse Actions in World Coordinates - world: _context_coords(), + // Mouse Actions in World Coordinates + world: _context_coords(), - listen: { - window: _context_observers(), - canvas: _context_observers(), - world: _context_observers(), - }, + listen: { + window: _context_observers(), + canvas: _context_observers(), + world: _context_observers(), + }, }; function _mouse_state_snapshot() { - return { - buttons: window.structuredClone(mouse.buttons), - window: window.structuredClone(mouse.window), - canvas: window.structuredClone(mouse.canvas), - world: window.structuredClone(mouse.world), - }; + return { + buttons: window.structuredClone(mouse.buttons), + window: window.structuredClone(mouse.window), + canvas: window.structuredClone(mouse.canvas), + world: window.structuredClone(mouse.world), + }; } const _double_click_timeout = {}; const _drag_start_timeout = {}; window.onmousedown = (evn) => { - const time = new Date(); + const time = new Date(); - // Processes for a named button - const onhold = (key) => () => { - if (_double_click_timeout[key]) { - // ondclick event - ['window', 'canvas', 'world'].forEach((ctx) => - mouse.listen[ctx][key].ondclick.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }) - ); - } else { - // Start timer - _double_click_timeout[key] = setTimeout( - () => delete _double_click_timeout[key], - inputConfig.dClickTiming - ); - } + // Processes for a named button + const onhold = (key) => () => { + if (_double_click_timeout[key]) { + // ondclick event + ["window", "canvas", "world"].forEach((ctx) => + mouse.listen[ctx][key].ondclick.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }) + ); + } else { + // Start timer + _double_click_timeout[key] = setTimeout( + () => delete _double_click_timeout[key], + inputConfig.dClickTiming + ); + } - // Set drag start timeout - _drag_start_timeout[key] = setTimeout(() => { - ['window', 'canvas', 'world'].forEach((ctx) => { - mouse.listen[ctx][key].ondragstart.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); - if (mouse[ctx].dragging[key]) - mouse[ctx].dragging[key].drag = true; + // Set drag start timeout + _drag_start_timeout[key] = setTimeout(() => { + ["window", "canvas", "world"].forEach((ctx) => { + mouse.listen[ctx][key].ondragstart.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); + if (mouse[ctx].dragging[key]) mouse[ctx].dragging[key].drag = true; - delete _drag_start_timeout[key]; - }); - }, inputConfig.clickTiming); + delete _drag_start_timeout[key]; + }); + }, inputConfig.clickTiming); - ['window', 'canvas', 'world'].forEach((ctx) => { - mouse.buttons[key] = time; - mouse[ctx].dragging[key] = {}; - Object.assign(mouse[ctx].dragging[key], mouse[ctx].pos); + ["window", "canvas", "world"].forEach((ctx) => { + mouse.buttons[key] = time; + mouse[ctx].dragging[key] = {}; + Object.assign(mouse[ctx].dragging[key], mouse[ctx].pos); - // onpaintstart event - mouse.listen[ctx][key].onpaintstart.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); - }); - }; + // onpaintstart event + mouse.listen[ctx][key].onpaintstart.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); + }); + }; - // Runs the correct handler - const buttons = [onhold('left'), onhold('middle'), onhold('right')]; + // Runs the correct handler + const buttons = [onhold("left"), onhold("middle"), onhold("right")]; - buttons[evn.button] && buttons[evn.button](); + buttons[evn.button] && buttons[evn.button](); }; window.onmouseup = (evn) => { - const time = new Date(); + const time = new Date(); - // Processes for a named button - const onrelease = (key) => () => { - ['window', 'canvas', 'world'].forEach((ctx) => { - const start = { - x: mouse[ctx].dragging[key].x, - y: mouse[ctx].dragging[key].y, - }; + // Processes for a named button + const onrelease = (key) => () => { + ["window", "canvas", "world"].forEach((ctx) => { + const start = { + x: mouse[ctx].dragging[key].x, + y: mouse[ctx].dragging[key].y, + }; - // onclick event - const dx = mouse[ctx].pos.x - start.x; - const dy = mouse[ctx].pos.y - start.y; + // onclick event + const dx = mouse[ctx].pos.x - start.x; + const dy = mouse[ctx].pos.y - start.y; - if ( - time.getTime() - mouse.buttons[key].getTime() < - inputConfig.clickTiming && - dx * dx + dy * dy < - inputConfig.clickRadius * inputConfig.clickRadius - ) - mouse.listen[ctx][key].onclick.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); + if ( + time.getTime() - mouse.buttons[key].getTime() < + inputConfig.clickTiming && + dx * dx + dy * dy < inputConfig.clickRadius * inputConfig.clickRadius + ) + mouse.listen[ctx][key].onclick.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); - // onpaintend event - mouse.listen[ctx][key].onpaintend.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); + // onpaintend event + mouse.listen[ctx][key].onpaintend.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); - // ondragend event - if (mouse[ctx].dragging[key].drag) - mouse.listen[ctx][key].ondragend.emit({ - target: evn.target, - buttonId: evn.button, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); + // ondragend event + if (mouse[ctx].dragging[key].drag) + mouse.listen[ctx][key].ondragend.emit({ + target: evn.target, + buttonId: evn.button, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); - mouse[ctx].dragging[key] = null; - }); + mouse[ctx].dragging[key] = null; + }); - if (_drag_start_timeout[key] !== undefined) { - clearTimeout(_drag_start_timeout[key]); - delete _drag_start_timeout[key]; - } - mouse.buttons[key] = null; - }; + if (_drag_start_timeout[key] !== undefined) { + clearTimeout(_drag_start_timeout[key]); + delete _drag_start_timeout[key]; + } + mouse.buttons[key] = null; + }; - // Runs the correct handler - const buttons = [ - onrelease('left'), - onrelease('middle'), - onrelease('right'), - ]; + // Runs the correct handler + const buttons = [onrelease("left"), onrelease("middle"), onrelease("right")]; - buttons[evn.button] && buttons[evn.button](); + buttons[evn.button] && buttons[evn.button](); }; window.onmousemove = (evn) => { - // Set Window Coordinates - Object.assign(mouse.window.prev, mouse.window.pos); - mouse.window.pos = { x: evn.clientX, y: evn.clientY }; + // Set Window Coordinates + Object.assign(mouse.window.prev, mouse.window.pos); + mouse.window.pos = {x: evn.clientX, y: evn.clientY}; - // Set Canvas Coordinates (using overlay canvas as reference) - if (evn.target.id === 'overlayCanvas') { - Object.assign(mouse.canvas.prev, mouse.canvas.pos); - mouse.canvas.pos = { x: evn.layerX, y: evn.layerY }; - } + // Set Canvas Coordinates (using overlay canvas as reference) + if (evn.target.id === "overlayCanvas") { + Object.assign(mouse.canvas.prev, mouse.canvas.pos); + 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) - if (evn.target.id === 'overlayCanvas') { - Object.assign(mouse.world.prev, mouse.world.pos); - mouse.world.pos = { x: evn.layerX, y: evn.layerY }; - } + // Set World Coordinates (For now the same as canvas coords; Will be useful with infinite canvas) + if (evn.target.id === "overlayCanvas") { + Object.assign(mouse.world.prev, mouse.world.pos); + mouse.world.pos = {x: evn.layerX, y: evn.layerY}; + } - ['window', 'canvas', 'world'].forEach((ctx) => { - mouse.listen[ctx].onmousemove.emit({ - target: evn.target, - px: mouse[ctx].prev.x, - py: mouse[ctx].prev.y, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); - ['left', 'middle', 'right'].forEach((key) => { - // ondrag event - if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag) - mouse.listen[ctx][key].ondrag.emit({ - target: evn.target, - px: mouse[ctx].prev.x, - py: mouse[ctx].prev.y, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); + ["window", "canvas", "world"].forEach((ctx) => { + mouse.listen[ctx].onmousemove.emit({ + target: evn.target, + px: mouse[ctx].prev.x, + py: mouse[ctx].prev.y, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); + ["left", "middle", "right"].forEach((key) => { + // ondrag event + if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag) + mouse.listen[ctx][key].ondrag.emit({ + target: evn.target, + px: mouse[ctx].prev.x, + py: mouse[ctx].prev.y, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); - // onpaint event - if (mouse[ctx].dragging[key]) - mouse.listen[ctx][key].onpaint.emit({ - target: evn.target, - px: mouse[ctx].prev.x, - py: mouse[ctx].prev.y, - x: mouse[ctx].pos.x, - y: mouse[ctx].pos.y, - timestamp: new Date(), - }); - }); - }); + // onpaint event + if (mouse[ctx].dragging[key]) + mouse.listen[ctx][key].onpaint.emit({ + target: evn.target, + px: mouse[ctx].prev.x, + py: mouse[ctx].prev.y, + x: mouse[ctx].pos.x, + y: mouse[ctx].pos.y, + timestamp: new Date(), + }); + }); + }); }; /** MOUSE DEBUG */ /*