Source: addons/mouse.js

  1. import register from "../util/register.js";
  3. import m_cam_fact from "../extern/camera.js";
  4. import m_cont_fact from "../extern/container.js";
  5. import m_ctl_fact from "../extern/controls.js";
  6. import m_phy_fact from "../extern/physics.js";
  7. import m_print_fact from "../intern/print.js";
  8. import m_scs_fact from "../extern/scenes.js";
  9. import m_util_fact from "../extern/util.js";
  10. import m_main_fact from "../extern/main.js";
  12. /**
  13.  * Pointer lock and mouse actions add-on.
  14.  * Provides support for mouse pointer lock and low-level movement.
  15.  * For more generic cases use {@link module:controls|sensor-based API}.
  16.  * @see http://www.w3.org/TR/pointerlock/
  17.  * @module mouse
  18.  * @local UseMouseControlCallback
  19.  * @local PointerlockEnabledCallback
  20.  * @local PointerlockDisabledCallback
  21.  * @local PointerlockMouseMoveCallback
  22.  * @local RotationCallback
  23.  */
  24. function Mouse(ns, exports) {
  26. var m_cam   = m_cam_fact(ns);
  27. var m_cont  = m_cont_fact(ns);
  28. var m_ctl   = m_ctl_fact(ns);
  29. var m_phy   = m_phy_fact(ns);
  30. var m_print = m_print_fact(ns);
  31. var m_scs   = m_scs_fact(ns);
  32. var m_util  = m_util_fact(ns);
  33. var m_main  = m_main_fact(ns);
  35. var FPS_MOUSE_MULT = 0.0004;
  36. var DRAG_MOUSE_DELTA_MULT = 2;
  38. var _smooth_factor = 1;
  39. var CAM_SMOOTH_CHARACTER_MOUSE = 0.1;
  40. var CAM_SMOOTH_CHARACTER_TOUCH = 0.2; // unused
  42. var PLS_NONE = 0;
  43. var PLS_POINTERLOCK = 1;
  44. var PLS_DRAG = 2;
  46. // mouse drag control
  47. var _mouse_x = 0;
  48. var _mouse_y = 0;
  50. var _mouse_delta = new Float32Array(2);
  52. var _vec2_tmp = new Float32Array(2);
  54. var _use_mouse_control_cb = null;
  56. var _chosen_object = null;
  58. var _plock_state = PLS_NONE;
  60. var _hover_offset = false;
  61. var _drag_offset = false;
  63. /**
  64.  * Callback which allows user to specify whether the camera/character movement
  65.  * is controlled by mouse module or not.
  66.  * @callback UseMouseControlCallback
  67.  * @returns {boolean} False to disable mouse control of active camera/character
  68.  */
  70. /**
  71.  * Callback which will be executed when pointer lock is enable.
  72.  * @callback PointerlockEnabledCallback
  73.  */
  75. /**
  76.  * Callback which will be executed when pointer lock is disabled.
  77.  * @callback PointerlockDisabledCallback
  78.  */
  80. /**
  81.  * Mouse movement event callback
  82.  * @callback PointerlockMouseMoveCallback
  83.  * @param {MouseEvent} e mousemove event
  84.  */
  86. /**
  87.  * Callback for camera/characters rotation
  88.  * @callback RotationCallback
  89.  * @param {rot_x} x rotation around X-axis
  90.  * @param {rot_y} y rotation around Y-axis
  91.  */
  93. /**
  94.  * Request pointer lock mode.
  95.  * Security issues: execute by user event.
  96.  * @method module:mouse.request_pointerlock
  97.  * @param {HTMLElement} elem Element
  98.  * @param {PointerlockEnabledCallback} [enabled_cb] Enabled callback
  99.  * @param {PointerlockDisabledCallback} [disabled_cb] Disabled callback
  100.  * @param {PointerlockMouseMoveCallback} [mouse_move_cb] Mouse movement event callback
  101.  * @param {UseMouseControlCallback} [use_mouse_control_cb] Callback to check the camera/character control
  102.  * @param {RotationCallback} [rotation_cb] Callback for camera rotation. If not specified, the default one will be used.
  103.  */
  104. exports.request_pointerlock = function(elem, enabled_cb, disabled_cb,
  105.         mouse_move_cb, use_mouse_control_cb, rotation_cb) {
  107.     if (_plock_state == PLS_POINTERLOCK)
  108.         return;
  109.     _plock_state = PLS_POINTERLOCK;
  111.     enabled_cb  = enabled_cb  || function() {};
  112.     disabled_cb = disabled_cb || function() {};
  113.     rotation_cb = rotation_cb || default_rotation_cb;
  115.     use_mouse_control_cb = use_mouse_control_cb || function() {return true};
  117.     mouse_move_cb = mouse_move_cb || function(e) {
  118.         if (use_mouse_control_cb()) {
  119.             // NOTE: for compatibility with older browsers
  120.             if (typeof e.movementX == "number") {
  121.                 var mx = e.movementX;
  122.                 var my = e.movementY;
  123.             } else if (typeof e.webkitMovementX == "number") {
  124.                 var mx = e.webkitMovementX;
  125.                 var my = e.webkitMovementY;
  126.             } else if (typeof e.mozMovementX == "number") {
  127.                 var mx = e.mozMovementX;
  128.                 var my = e.mozMovementY;
  129.             } else {
  130.                 var mx = 0;
  131.                 var my = 0;
  132.             }
  134.             _mouse_delta[0] += mx;
  135.             _mouse_delta[1] += my;
  136.         }
  137.     }
  139.     function on_pointerlock_change() {
  140.         if (document.pointerLockElement === elem ||
  141.                 document.webkitPointerLockElement === elem ||
  142.                 document.mozPointerLockElement === elem) {
  143.             //m_print.log("Pointer Lock enabled");
  145.             exit_mouse_drag(elem);
  147.             elem.addEventListener("mousemove", mouse_move_cb, false);
  149.             var camera = m_scs.get_active_camera();
  151.             if (!m_ctl.check_sensor_manifold(camera, "SMOOTH_PL")) {
  152.                 var elapsed = m_ctl.create_elapsed_sensor();
  154.                 m_ctl.create_sensor_manifold(camera, "SMOOTH_PL", m_ctl.CT_CONTINUOUS,
  155.                     [elapsed], null, smooth_cb, rotation_cb);
  156.             }
  158.             enabled_cb();
  159.         } else {
  160.             //m_print.log("Pointer Lock disabled");
  161.             
  162.             elem.removeEventListener("mousemove", mouse_move_cb, false);
  164.             _plock_state = PLS_NONE;
  165.             document.removeEventListener("pointerlockchange", on_pointerlock_change, false);
  166.             document.removeEventListener("webkitpointerlockchange", on_pointerlock_change, false);
  167.             document.removeEventListener("mozpointerlockchange", on_pointerlock_change, false);
  169.             disabled_cb();
  170.         }
  171.     }
  173.     document.addEventListener("pointerlockchange", on_pointerlock_change, false);
  174.     document.addEventListener("webkitpointerlockchange", on_pointerlock_change, false);
  175.     document.addEventListener("mozpointerlockchange", on_pointerlock_change, false);
  177.     var request_plock = elem.requestPointerLock ||
  178.             elem.webkitRequestPointerLock || elem.mozRequestPointerLock;
  180.     if (typeof request_plock === "function")
  181.         request_plock.apply(elem);
  182.     else
  183.         m_print.error("Pointer lock is not available");
  184. }
  186. /**
  187.  * Exit the pointer lock mode.
  188.  * @method module:mouse.exit_pointerlock
  189.  */
  190. exports.exit_pointerlock = exit_pointerlock;
  191. function exit_pointerlock() {
  193.     if (_plock_state == PLS_POINTERLOCK)
  194.         _plock_state = PLS_NONE;
  196.     var exit_plock = document.exitPointerLock || document.webkitExitPointerLock ||
  197.         document.mozExitPointerLock;
  199.     if (typeof exit_plock === "function")
  200.         exit_plock.apply(document);
  202.     m_ctl.remove_sensor_manifold(m_scs.get_active_camera(), "SMOOTH_PL");
  203. }
  205. /**
  206.  * Check the pointer lock.
  207.  * @method module:mouse.check_pointerlock
  208.  * @param {HTMLElement} elem Element
  209.  * @returns {boolean} Check result
  210.  */
  211. exports.check_pointerlock = function(elem) {
  212.     var request_plock = elem.requestPointerLock ||
  213.             elem.webkitRequestPointerLock || elem.mozRequestPointerLock;
  215.     if (typeof request_plock === "function")
  216.         return true;
  217.     else
  218.         return false;
  219. }
  221. /**
  222.  * Request drag mode.
  223.  * @param {HTMLElement} elem Element
  224.  * @param {UseMouseControlCallback} [use_mouse_control_cb] Callback to check the mouse control
  225.  * @param {RotationCallback} [rotation_cb] Callback for camera rotation. If not specified, the default one will be used.
  226.  * @param {boolean} [relative_canvas=false] Calculate coordinates relative to canvas.
  227.  * @method module:mouse.request_mouse_drag
  228.  */
  229. exports.request_mouse_drag = request_mouse_drag;
  230. function request_mouse_drag(elem, use_mouse_control_cb, rotation_cb, relative_canvas) {
  232.     if (_plock_state == PLS_DRAG)
  233.         return;
  234.     _plock_state = PLS_DRAG;
  236.     exit_pointerlock();
  238.     _use_mouse_control_cb = use_mouse_control_cb || function() {return true};
  239.     rotation_cb = rotation_cb || default_rotation_cb;
  240.     _drag_offset = Boolean(relative_canvas);
  242.     elem.addEventListener("mousedown", drag_mouse_down_cb, false);
  243.     elem.addEventListener("mouseup",   drag_mouse_up_cb,   false);
  245.     var camera = m_scs.get_active_camera();
  247.     if (!m_ctl.check_sensor_manifold(camera, "SMOOTH_DRAG")) {
  248.         var elapsed = m_ctl.create_elapsed_sensor();
  250.         m_ctl.create_sensor_manifold(camera, "SMOOTH_DRAG", m_ctl.CT_CONTINUOUS,
  251.             [elapsed], null, smooth_cb, rotation_cb);
  252.     }
  253. }
  255. /**
  256.  * Exit drag mode.
  257.  * @param {HTMLElement} elem Element
  258.  * @method module:mouse.exit_mouse_drag
  259.  */
  260. exports.exit_mouse_drag = exit_mouse_drag;
  261. function exit_mouse_drag(elem) {
  262.     if (_plock_state == PLS_DRAG)
  263.         _plock_state = PLS_NONE;
  264.     elem.removeEventListener("mousedown", drag_mouse_down_cb, false);
  265.     elem.removeEventListener("mouseup",   drag_mouse_up_cb,   false);
  266.     elem.removeEventListener("mousemove", drag_mouse_move_cb, false);
  268.     m_ctl.remove_sensor_manifold(m_scs.get_active_camera(), "SMOOTH_DRAG");
  269. }
  271. function drag_mouse_move_cb(e) {
  272.     if (_use_mouse_control_cb()) {
  274.         if (_drag_offset)
  275.             var coords = m_cont.get_coords_target_space(e, _vec2_tmp);
  276.         else {
  277.             var coords = _vec2_tmp;
  278.             coords[0] = e.clientX;
  279.             coords[1] = e.clientY;
  280.         }
  281.         _mouse_delta[0] += (coords[0] - _mouse_x) * DRAG_MOUSE_DELTA_MULT;
  282.         _mouse_delta[1] += (coords[1] - _mouse_y) * DRAG_MOUSE_DELTA_MULT;
  284.         _mouse_x = coords[0];
  285.         _mouse_y = coords[1];
  286.     }
  287.     e.preventDefault();
  288. }
  290. function drag_mouse_down_cb(e) {
  291.     if (_drag_offset)
  292.         var coords = m_cont.get_coords_target_space(e, _vec2_tmp);
  293.     else {
  294.         var coords = _vec2_tmp;
  295.         coords[0] = e.clientX;
  296.         coords[1] = e.clientY;
  297.     }
  299.     _mouse_x = coords[0];
  300.     _mouse_y = coords[1];
  302.     e.currentTarget.addEventListener("mousemove", drag_mouse_move_cb, false);
  303.     e.preventDefault();
  304. }
  306. function drag_mouse_up_cb(e) {
  307.     e.currentTarget.removeEventListener("mousemove", drag_mouse_move_cb, false);
  308.     e.preventDefault();
  309. }
  311. function smooth_cb(obj, id, pulse, rot_callback) {
  312.     if (Math.abs(_mouse_delta[0]) > 0.01 || Math.abs(_mouse_delta[1]) > 0.01) {
  313.         var elapsed = m_ctl.get_sensor_value(obj, id, 0);
  314.         var rot_x = m_util.smooth(_mouse_delta[0], 0, elapsed, smooth_coeff_mouse());
  315.         var rot_y = m_util.smooth(_mouse_delta[1], 0, elapsed, smooth_coeff_mouse());
  316.         _mouse_delta[0] -= rot_x;
  317.         _mouse_delta[1] -= rot_y;
  319.         rot_callback(-rot_x * FPS_MOUSE_MULT, -rot_y * FPS_MOUSE_MULT);
  320.     }
  321. }
  323. function default_rotation_cb(rot_x, rot_y) {
  324.     var character = m_scs.get_first_character();
  325.     var camera    = m_scs.get_active_camera();
  326.     m_cam.rotate_camera(camera, rot_x, rot_y);
  327.     if (character) {
  328.         var angles = m_cam.get_camera_angles_char(camera, _vec2_tmp);
  329.         m_phy.set_character_rotation_h(character, angles[0]);
  330.         m_phy.set_character_vert_move_dir_angle(character, angles[1]);
  331.     }
  332. }
  333. /**
  334.  * Enable objects outlining by mouse hover.
  335.  * @param {boolean} [relative_canvas=false] Calculate coordinates relative to canvas.
  336.  * @method module:mouse.enable_mouse_hover_outline
  337.  */
  338. exports.enable_mouse_hover_outline = enable_mouse_hover_outline;
  339. function enable_mouse_hover_outline(relative_canvas) {
  340.     _hover_offset = Boolean(relative_canvas);
  341.     if (!m_main.detect_mobile()) {
  342.         var main_canvas = m_cont.get_canvas();
  343.         main_canvas.addEventListener("mousemove", objects_outline);
  344.     }
  345. }
  347. /**
  348.  * Disable objects outlining by mouse hover.
  349.  * @method module:mouse.disable_mouse_hover_outline
  350.  */
  351. exports.disable_mouse_hover_outline = disable_mouse_hover_outline;
  352. function disable_mouse_hover_outline() {
  353.     if (!m_main.detect_mobile()) {
  354.         var main_canvas = m_cont.get_canvas();
  355.         main_canvas.removeEventListener("mousemove", objects_outline);
  356.         if (_chosen_object)
  357.             m_scs.set_outline_intensity(_chosen_object, 0);
  358.     }
  359. }
  361. function objects_outline(e) {
  362.     if (_hover_offset) {
  363.         var c_coord = m_cont.get_coords_target_space(e, false, _vec2_tmp);
  364.         var obj = m_scs.pick_object(c_coord[0], c_coord[1]);
  365.     } else
  366.         var obj = m_scs.pick_object(e.clientX, e.clientY);
  368.     if (obj) {
  369.         if (m_scs.outlining_is_enabled(obj))
  370.             m_scs.set_outline_intensity(obj, 1);
  371.         if (m_scs.outlining_is_enabled(_chosen_object) && obj != _chosen_object)
  372.             m_scs.set_outline_intensity(_chosen_object, 0);
  373.     } else
  374.         if (m_scs.outlining_is_enabled(_chosen_object))
  375.             m_scs.set_outline_intensity(_chosen_object, 0);
  376.     _chosen_object = obj;
  377. }
  378. /**
  379.  * Get mouse/touch X coordinate.
  380.  * @param {MouseEvent|TouchEvent} event Mouse/touch event
  381.  * @param {boolean} [use_target_touches=false] Use only those touches that were 
  382.  * started on the event target element (the targetTouches property).
  383.  * @param {boolean} [relative_canvas=false] Return coordinates relative to event 
  384.  * target.
  385.  * @method module:mouse.get_coords_x
  386.  * @returns {number} Mouse/touch X coordinate or -1 if not defined.
  387.  * @example
  388.  * var m_cont = require("container");
  389.  * var m_input = require("input");
  390.  * var m_mouse = require("mouse");
  391.  *
  392.  * var canvas = m_cont.get_canvas();
  393.  * m_input.add_click_listener(canvas, function(event) {
  394.  *     var x = m_mouse.get_coords_x(event);
  395.  *     var y = m_mouse.get_coords_y(event);
  396.  * });
  397.  */
  398. exports.get_coords_x = get_coords_x;
  399. function get_coords_x(event, use_target_touches, relative_canvas) {
  401.     if (relative_canvas)
  402.         return m_cont.get_coords_target_space(event, use_target_touches, 
  403.                 _vec2_tmp)[0];
  404.     
  405.     if ("clientX" in event)
  406.         return event.clientX;
  408.     if (event.type == "touchend")
  409.         var touches = event.changedTouches;
  410.     else
  411.         var touches = use_target_touches ? event.targetTouches : event.touches;
  412.     
  413.     if (touches && touches[0] && "clientX" in touches[0])
  414.         return touches[0].clientX;
  416.     return -1;
  417. }
  418. /**
  419.  * Get mouse/touch Y coordinate.
  420.  * @param {MouseEvent|TouchEvent} event Mouse/touch event
  421.  * @param {boolean} [use_target_touches=false] Use only those touches that were 
  422.  * started on the event target element (the targetTouches property).
  423.  * @param {boolean} [relative_canvas=false] Return coordinates relative to event 
  424.  * target.
  425.  * @method module:mouse.get_coords_y
  426.  * @returns {number} Mouse/touch Y coordinate or -1 if not defined.
  427.  * @example
  428.  * var m_cont = require("container");
  429.  * var m_input = require("input");
  430.  * var m_mouse = require("mouse");
  431.  *
  432.  * var canvas = m_cont.get_canvas();
  433.  * m_input.add_click_listener(canvas, function(event) {
  434.  *     var x = m_mouse.get_coords_x(event);
  435.  *     var y = m_mouse.get_coords_y(event);
  436.  * });
  437.  */
  438. exports.get_coords_y = get_coords_y;
  439. function get_coords_y(event, use_target_touches, relative_canvas) {
  441.     if (relative_canvas)
  442.         return m_cont.get_coords_target_space(event, use_target_touches, 
  443.                 _vec2_tmp)[1];
  444.     
  445.     if ("clientY" in event)
  446.         return event.clientY;
  448.     if (event.type == "touchend")
  449.         var touches = event.changedTouches;
  450.     else
  451.         var touches = use_target_touches ? event.targetTouches : event.touches;
  452.     
  453.     if (touches && touches[0] && "clientY" in touches[0])
  454.         return touches[0].clientY;
  456.     return -1;
  457. }
  459. function smooth_coeff_mouse() {
  460.     return CAM_SMOOTH_CHARACTER_MOUSE * _smooth_factor;
  461. }
  463. function smooth_coeff_touch() {
  464.     return CAM_SMOOTH_CHARACTER_TOUCH * _smooth_factor;
  465. }
  467. /**
  468.  * Set smooth factor for camera rotation while in pointerlock mode.
  469.  * @method module:mouse.set_plock_smooth_factor
  470.  * @param {number} value New smooth factor
  471.  */
  472. exports.set_plock_smooth_factor = function(value) {
  473.     _smooth_factor = value;
  474. }
  476. /**
  477.  * Get smooth factor for camera rotation while in pointerlock mode.
  478.  * @method module:mouse.get_plock_smooth_factor
  479.  * @returns {number} Smooth factor
  480.  */
  481. exports.get_plock_smooth_factor = function() {
  482.     return _smooth_factor;
  483. }
  485. };
  487. var mouse_factory = register("mouse", Mouse);
  489. export default mouse_factory;