three.interaction.js

Source: interaction/InteractionManager.js

interaction/InteractionManager.js

  1. import '../patch/EventDispatcher';
  2. import '../patch/Object3D';
  4. import { EventDispatcher, Raycaster } from 'three';
  5. import InteractionData from './InteractionData';
  6. import InteractionEvent from './InteractionEvent';
  7. import InteractionTrackingData from './InteractionTrackingData';
  9. const MOUSE_POINTER_ID = 'MOUSE';
  11. // helpers for hitTest() - only used inside hitTest()
  12. const hitTestEvent = {
  13.   target: null,
  14.   data: {
  15.     global: null,
  16.   },
  17. };
  19. /**
  20.  * The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive
  21.  * if its interactive parameter is set to true
  22.  * This manager also supports multitouch.
  23.  *
  24.  * reference to [pixi.js](http://www.pixijs.com/) impl
  25.  *
  26.  * @private
  27.  * @class
  28.  * @extends EventDispatcher
  29.  */
  30. class InteractionManager extends EventDispatcher {
  31.   /**
  32.    * @param {WebGLRenderer} renderer - A reference to the current renderer
  33.    * @param {Scene} scene - A reference to the current scene
  34.    * @param {Camera} camera - A reference to the current camera
  35.    * @param {Object} [options] - The options for the manager.
  36.    * @param {Boolean} [options.autoPreventDefault=false] - Should the manager automatically prevent default browser actions.
  37.    * @param {Boolean} [options.autoAttach=true] - Should the manager automatically attach target element.
  38.    * @param {Number} [options.interactionFrequency=10] - Frequency increases the interaction events will be checked.
  39.    */
  40.   constructor(renderer, scene, camera, options) {
  41.     super();
  43.     options = options || {};
  45.     /**
  46.      * The renderer this interaction manager works for.
  47.      *
  48.      * @member {WebGLRenderer}
  49.      */
  50.     this.renderer = renderer;
  52.     /**
  53.      * The renderer this interaction manager works for.
  54.      *
  55.      * @member {Scene}
  56.      */
  57.     this.scene = scene;
  59.     /**
  60.      * The renderer this interaction manager works for.
  61.      *
  62.      * @member {Camera}
  63.      */
  64.     this.camera = camera;
  66.     /**
  67.      * Should default browser actions automatically be prevented.
  68.      * Does not apply to pointer events for backwards compatibility
  69.      * preventDefault on pointer events stops mouse events from firing
  70.      * Thus, for every pointer event, there will always be either a mouse of touch event alongside it.
  71.      *
  72.      * @member {boolean}
  73.      * @default false
  74.      */
  75.     this.autoPreventDefault = options.autoPreventDefault || false;
  77.     /**
  78.      * Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked.
  79.      *
  80.      * @member {number}
  81.      * @default 10
  82.      */
  83.     this.interactionFrequency = options.interactionFrequency || 10;
  85.     /**
  86.      * The mouse data
  87.      *
  88.      * @member {InteractionData}
  89.      */
  90.     this.mouse = new InteractionData();
  91.     this.mouse.identifier = MOUSE_POINTER_ID;
  93.     // setting the mouse to start off far off screen will mean that mouse over does
  94.     //  not get called before we even move the mouse.
  95.     this.mouse.global.set(-999999);
  97.     /**
  98.      * Actively tracked InteractionData
  99.      *
  100.      * @private
  101.      * @member {Object.<number,InteractionData>}
  102.      */
  103.     this.activeInteractionData = {};
  104.     this.activeInteractionData[MOUSE_POINTER_ID] = this.mouse;
  106.     /**
  107.      * Pool of unused InteractionData
  108.      *
  109.      * @private
  110.      * @member {InteractionData[]}
  111.      */
  112.     this.interactionDataPool = [];
  114.     /**
  115.      * An event data object to handle all the event tracking/dispatching
  116.      *
  117.      * @member {object}
  118.      */
  119.     this.eventData = new InteractionEvent();
  121.     /**
  122.      * The DOM element to bind to.
  123.      *
  124.      * @private
  125.      * @member {HTMLElement}
  126.      */
  127.     this.interactionDOMElement = null;
  129.     /**
  130.      * This property determines if mousemove and touchmove events are fired only when the cursor
  131.      * is over the object.
  132.      * Setting to true will make things work more in line with how the DOM verison works.
  133.      * Setting to false can make things easier for things like dragging
  134.      * It is currently set to false as this is how three.js used to work.
  135.      *
  136.      * @member {boolean}
  137.      * @default true
  138.      */
  139.     this.moveWhenInside = true;
  141.     /**
  142.      * Have events been attached to the dom element?
  143.      *
  144.      * @private
  145.      * @member {boolean}
  146.      */
  147.     this.eventsAdded = false;
  149.     /**
  150.      * Is the mouse hovering over the renderer?
  151.      *
  152.      * @private
  153.      * @member {boolean}
  154.      */
  155.     this.mouseOverRenderer = false;
  157.     /**
  158.      * Does the device support touch events
  159.      * https://www.w3.org/TR/touch-events/
  160.      *
  161.      * @readonly
  162.      * @member {boolean}
  163.      */
  164.     this.supportsTouchEvents = 'ontouchstart' in window;
  166.     /**
  167.      * Does the device support pointer events
  168.      * https://www.w3.org/Submission/pointer-events/
  169.      *
  170.      * @readonly
  171.      * @member {boolean}
  172.      */
  173.     this.supportsPointerEvents = !!window.PointerEvent;
  175.     // this will make it so that you don't have to call bind all the time
  177.     /**
  178.      * @private
  179.      * @member {Function}
  180.      */
  181.     this.onClick = this.onClick.bind(this);
  182.     this.processClick = this.processClick.bind(this);
  184.     /**
  185.      * @private
  186.      * @member {Function}
  187.      */
  188.     this.onPointerUp = this.onPointerUp.bind(this);
  189.     this.processPointerUp = this.processPointerUp.bind(this);
  191.     /**
  192.      * @private
  193.      * @member {Function}
  194.      */
  195.     this.onPointerCancel = this.onPointerCancel.bind(this);
  196.     this.processPointerCancel = this.processPointerCancel.bind(this);
  198.     /**
  199.      * @private
  200.      * @member {Function}
  201.      */
  202.     this.onPointerDown = this.onPointerDown.bind(this);
  203.     this.processPointerDown = this.processPointerDown.bind(this);
  205.     /**
  206.      * @private
  207.      * @member {Function}
  208.      */
  209.     this.onPointerMove = this.onPointerMove.bind(this);
  210.     this.processPointerMove = this.processPointerMove.bind(this);
  212.     /**
  213.      * @private
  214.      * @member {Function}
  215.      */
  216.     this.onPointerOut = this.onPointerOut.bind(this);
  217.     this.processPointerOverOut = this.processPointerOverOut.bind(this);
  219.     /**
  220.      * @private
  221.      * @member {Function}
  222.      */
  223.     this.onPointerOver = this.onPointerOver.bind(this);
  225.     /**
  226.      * Dictionary of how different cursor modes are handled. Strings are handled as CSS cursor
  227.      * values, objects are handled as dictionaries of CSS values for interactionDOMElement,
  228.      * and functions are called instead of changing the CSS.
  229.      * Default CSS cursor values are provided for 'default' and 'pointer' modes.
  230.      * @member {Object.<string, (string|Function|Object.<string, string>)>}
  231.      */
  232.     this.cursorStyles = {
  233.       default: 'inherit',
  234.       pointer: 'pointer',
  235.     };
  237.     /**
  238.      * The mode of the cursor that is being used.
  239.      * The value of this is a key from the cursorStyles dictionary.
  240.      *
  241.      * @member {string}
  242.      */
  243.     this.currentCursorMode = null;
  245.     /**
  246.      * Internal cached let.
  247.      *
  248.      * @private
  249.      * @member {string}
  250.      */
  251.     this.cursor = null;
  253.     /**
  254.      * ray caster, for survey intersects from 3d-scene
  255.      *
  256.      * @private
  257.      * @member {Raycaster}
  258.      */
  259.     this.raycaster = new Raycaster();
  261.     /**
  262.      * snippet time
  263.      *
  264.      * @private
  265.      * @member {Number}
  266.      */
  267.     this._deltaTime = 0;
  269.     this.setTargetElement(this.renderer.domElement);
  271.     /**
  272.      * Fired when a pointer device button (usually a mouse left-button) is pressed on the display
  273.      * object.
  274.      *
  275.      * @event InteractionManager#mousedown
  276.      * @param {InteractionEvent} event - Interaction event
  277.      */
  279.     /**
  280.      * Fired when a pointer device secondary button (usually a mouse right-button) is pressed
  281.      * on the display object.
  282.      *
  283.      * @event InteractionManager#rightdown
  284.      * @param {InteractionEvent} event - Interaction event
  285.      */
  287.     /**
  288.      * Fired when a pointer device button (usually a mouse left-button) is released over the display
  289.      * object.
  290.      *
  291.      * @event InteractionManager#mouseup
  292.      * @param {InteractionEvent} event - Interaction event
  293.      */
  295.     /**
  296.      * Fired when a pointer device secondary button (usually a mouse right-button) is released
  297.      * over the display object.
  298.      *
  299.      * @event InteractionManager#rightup
  300.      * @param {InteractionEvent} event - Interaction event
  301.      */
  303.     /**
  304.      * Fired when a pointer device button (usually a mouse left-button) is pressed and released on
  305.      * the display object.
  306.      *
  307.      * @event InteractionManager#click
  308.      * @param {InteractionEvent} event - Interaction event
  309.      */
  311.     /**
  312.      * Fired when a pointer device secondary button (usually a mouse right-button) is pressed
  313.      * and released on the display object.
  314.      *
  315.      * @event InteractionManager#rightclick
  316.      * @param {InteractionEvent} event - Interaction event
  317.      */
  319.     /**
  320.      * Fired when a pointer device button (usually a mouse left-button) is released outside the
  321.      * display object that initially registered a
  322.      * [mousedown]{@link InteractionManager#event:mousedown}.
  323.      *
  324.      * @event InteractionManager#mouseupoutside
  325.      * @param {InteractionEvent} event - Interaction event
  326.      */
  328.     /**
  329.      * Fired when a pointer device secondary button (usually a mouse right-button) is released
  330.      * outside the display object that initially registered a
  331.      * [rightdown]{@link InteractionManager#event:rightdown}.
  332.      *
  333.      * @event InteractionManager#rightupoutside
  334.      * @param {InteractionEvent} event - Interaction event
  335.      */
  337.     /**
  338.      * Fired when a pointer device (usually a mouse) is moved while over the display object
  339.      *
  340.      * @event InteractionManager#mousemove
  341.      * @param {InteractionEvent} event - Interaction event
  342.      */
  344.     /**
  345.      * Fired when a pointer device (usually a mouse) is moved onto the display object
  346.      *
  347.      * @event InteractionManager#mouseover
  348.      * @param {InteractionEvent} event - Interaction event
  349.      */
  351.     /**
  352.      * Fired when a pointer device (usually a mouse) is moved off the display object
  353.      *
  354.      * @event InteractionManager#mouseout
  355.      * @param {InteractionEvent} event - Interaction event
  356.      */
  358.     /**
  359.      * Fired when a pointer device button is pressed on the display object.
  360.      *
  361.      * @event InteractionManager#pointerdown
  362.      * @param {InteractionEvent} event - Interaction event
  363.      */
  365.     /**
  366.      * Fired when a pointer device button is released over the display object.
  367.      *
  368.      * @event InteractionManager#pointerup
  369.      * @param {InteractionEvent} event - Interaction event
  370.      */
  372.     /**
  373.      * Fired when the operating system cancels a pointer event
  374.      *
  375.      * @event InteractionManager#pointercancel
  376.      * @param {InteractionEvent} event - Interaction event
  377.      */
  379.     /**
  380.      * Fired when a pointer device button is pressed and released on the display object.
  381.      *
  382.      * @event InteractionManager#pointertap
  383.      * @param {InteractionEvent} event - Interaction event
  384.      */
  386.     /**
  387.      * Fired when a pointer device button is released outside the display object that initially
  388.      * registered a [pointerdown]{@link InteractionManager#event:pointerdown}.
  389.      *
  390.      * @event InteractionManager#pointerupoutside
  391.      * @param {InteractionEvent} event - Interaction event
  392.      */
  394.     /**
  395.      * Fired when a pointer device is moved while over the display object
  396.      *
  397.      * @event InteractionManager#pointermove
  398.      * @param {InteractionEvent} event - Interaction event
  399.      */
  401.     /**
  402.      * Fired when a pointer device is moved onto the display object
  403.      *
  404.      * @event InteractionManager#pointerover
  405.      * @param {InteractionEvent} event - Interaction event
  406.      */
  408.     /**
  409.      * Fired when a pointer device is moved off the display object
  410.      *
  411.      * @event InteractionManager#pointerout
  412.      * @param {InteractionEvent} event - Interaction event
  413.      */
  415.     /**
  416.      * Fired when a touch point is placed on the display object.
  417.      *
  418.      * @event InteractionManager#touchstart
  419.      * @param {InteractionEvent} event - Interaction event
  420.      */
  422.     /**
  423.      * Fired when a touch point is removed from the display object.
  424.      *
  425.      * @event InteractionManager#touchend
  426.      * @param {InteractionEvent} event - Interaction event
  427.      */
  429.     /**
  430.      * Fired when the operating system cancels a touch
  431.      *
  432.      * @event InteractionManager#touchcancel
  433.      * @param {InteractionEvent} event - Interaction event
  434.      */
  436.     /**
  437.      * Fired when a touch point is placed and removed from the display object.
  438.      *
  439.      * @event InteractionManager#tap
  440.      * @param {InteractionEvent} event - Interaction event
  441.      */
  443.     /**
  444.      * Fired when a touch point is removed outside of the display object that initially
  445.      * registered a [touchstart]{@link InteractionManager#event:touchstart}.
  446.      *
  447.      * @event InteractionManager#touchendoutside
  448.      * @param {InteractionEvent} event - Interaction event
  449.      */
  451.     /**
  452.      * Fired when a touch point is moved along the display object.
  453.      *
  454.      * @event InteractionManager#touchmove
  455.      * @param {InteractionEvent} event - Interaction event
  456.      */
  458.     /**
  459.      * Fired when a pointer device button (usually a mouse left-button) is pressed on the display.
  460.      * object. DisplayObject's `interactive` property must be set to `true` to fire event.
  461.      *
  462.      * @event Object3D#mousedown
  463.      * @param {InteractionEvent} event - Interaction event
  464.      */
  466.     /**
  467.      * Fired when a pointer device secondary button (usually a mouse right-button) is pressed
  468.      * on the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
  469.      *
  470.      * @event Object3D#rightdown
  471.      * @param {InteractionEvent} event - Interaction event
  472.      */
  474.     /**
  475.      * Fired when a pointer device button (usually a mouse left-button) is released over the display
  476.      * object. DisplayObject's `interactive` property must be set to `true` to fire event.
  477.      *
  478.      * @event Object3D#mouseup
  479.      * @param {InteractionEvent} event - Interaction event
  480.      */
  482.     /**
  483.      * Fired when a pointer device secondary button (usually a mouse right-button) is released
  484.      * over the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
  485.      *
  486.      * @event Object3D#rightup
  487.      * @param {InteractionEvent} event - Interaction event
  488.      */
  490.     /**
  491.      * Fired when a pointer device button (usually a mouse left-button) is pressed and released on
  492.      * the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
  493.      *
  494.      * @event Object3D#click
  495.      * @param {InteractionEvent} event - Interaction event
  496.      */
  498.     /**
  499.      * Fired when a pointer device secondary button (usually a mouse right-button) is pressed
  500.      * and released on the display object. DisplayObject's `interactive` property must be set to `true` to fire event.
  501.      *
  502.      * @event Object3D#rightclick
  503.      * @param {InteractionEvent} event - Interaction event
  504.      */
  506.     /**
  507.      * Fired when a pointer device button (usually a mouse left-button) is released outside the
  508.      * display object that initially registered a
  509.      * [mousedown]{@link Object3D#event:mousedown}.
  510.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  511.      *
  512.      * @event Object3D#mouseupoutside
  513.      * @param {InteractionEvent} event - Interaction event
  514.      */
  516.     /**
  517.      * Fired when a pointer device secondary button (usually a mouse right-button) is released
  518.      * outside the display object that initially registered a
  519.      * [rightdown]{@link Object3D#event:rightdown}.
  520.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  521.      *
  522.      * @event Object3D#rightupoutside
  523.      * @param {InteractionEvent} event - Interaction event
  524.      */
  526.     /**
  527.      * Fired when a pointer device (usually a mouse) is moved while over the display object.
  528.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  529.      *
  530.      * @event Object3D#mousemove
  531.      * @param {InteractionEvent} event - Interaction event
  532.      */
  534.     /**
  535.      * Fired when a pointer device (usually a mouse) is moved onto the display object.
  536.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  537.      *
  538.      * @event Object3D#mouseover
  539.      * @param {InteractionEvent} event - Interaction event
  540.      */
  542.     /**
  543.      * Fired when a pointer device (usually a mouse) is moved off the display object.
  544.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  545.      *
  546.      * @event Object3D#mouseout
  547.      * @param {InteractionEvent} event - Interaction event
  548.      */
  550.     /**
  551.      * Fired when a pointer device button is pressed on the display object.
  552.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  553.      *
  554.      * @event Object3D#pointerdown
  555.      * @param {InteractionEvent} event - Interaction event
  556.      */
  558.     /**
  559.      * Fired when a pointer device button is released over the display object.
  560.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  561.      *
  562.      * @event Object3D#pointerup
  563.      * @param {InteractionEvent} event - Interaction event
  564.      */
  566.     /**
  567.      * Fired when the operating system cancels a pointer event.
  568.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  569.      *
  570.      * @event Object3D#pointercancel
  571.      * @param {InteractionEvent} event - Interaction event
  572.      */
  574.     /**
  575.      * Fired when a pointer device button is pressed and released on the display object.
  576.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  577.      *
  578.      * @event Object3D#pointertap
  579.      * @param {InteractionEvent} event - Interaction event
  580.      */
  582.     /**
  583.      * Fired when a pointer device button is released outside the display object that initially
  584.      * registered a [pointerdown]{@link Object3D#event:pointerdown}.
  585.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  586.      *
  587.      * @event Object3D#pointerupoutside
  588.      * @param {InteractionEvent} event - Interaction event
  589.      */
  591.     /**
  592.      * Fired when a pointer device is moved while over the display object.
  593.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  594.      *
  595.      * @event Object3D#pointermove
  596.      * @param {InteractionEvent} event - Interaction event
  597.      */
  599.     /**
  600.      * Fired when a pointer device is moved onto the display object.
  601.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  602.      *
  603.      * @event Object3D#pointerover
  604.      * @param {InteractionEvent} event - Interaction event
  605.      */
  607.     /**
  608.      * Fired when a pointer device is moved off the display object.
  609.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  610.      *
  611.      * @event Object3D#pointerout
  612.      * @param {InteractionEvent} event - Interaction event
  613.      */
  615.     /**
  616.      * Fired when a touch point is placed on the display object.
  617.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  618.      *
  619.      * @event Object3D#touchstart
  620.      * @param {InteractionEvent} event - Interaction event
  621.      */
  623.     /**
  624.      * Fired when a touch point is removed from the display object.
  625.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  626.      *
  627.      * @event Object3D#touchend
  628.      * @param {InteractionEvent} event - Interaction event
  629.      */
  631.     /**
  632.      * Fired when the operating system cancels a touch.
  633.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  634.      *
  635.      * @event Object3D#touchcancel
  636.      * @param {InteractionEvent} event - Interaction event
  637.      */
  639.     /**
  640.      * Fired when a touch point is placed and removed from the display object.
  641.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  642.      *
  643.      * @event Object3D#tap
  644.      * @param {InteractionEvent} event - Interaction event
  645.      */
  647.     /**
  648.      * Fired when a touch point is removed outside of the display object that initially
  649.      * registered a [touchstart]{@link Object3D#event:touchstart}.
  650.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  651.      *
  652.      * @event Object3D#touchendoutside
  653.      * @param {InteractionEvent} event - Interaction event
  654.      */
  656.     /**
  657.      * Fired when a touch point is moved along the display object.
  658.      * DisplayObject's `interactive` property must be set to `true` to fire event.
  659.      *
  660.      * @event Object3D#touchmove
  661.      * @param {InteractionEvent} event - Interaction event
  662.      */
  663.   }
  665.   /**
  666.    * Hit tests a point against the display tree, returning the first interactive object that is hit.
  667.    *
  668.    * @param {Point} globalPoint - A point to hit test with, in global space.
  669.    * @param {Object3D} [root] - The root display object to start from. If omitted, defaults
  670.    * to the last rendered root of the associated renderer.
  671.    * @return {Object3D} The hit display object, if any.
  672.    */
  673.   hitTest(globalPoint, root) {
  674.     // clear the target for our hit test
  675.     hitTestEvent.target = null;
  676.     // assign the global point
  677.     hitTestEvent.data.global = globalPoint;
  678.     // ensure safety of the root
  679.     if (!root) {
  680.       root = this.scene;
  681.     }
  682.     // run the hit test
  683.     this.processInteractive(hitTestEvent, root, null, true);
  684.     // return our found object - it'll be null if we didn't hit anything
  686.     return hitTestEvent.target;
  687.   }
  689.   /**
  690.    * Sets the DOM element which will receive mouse/touch events. This is useful for when you have
  691.    * other DOM elements on top of the renderers Canvas element. With this you'll be bale to deletegate
  692.    * another DOM element to receive those events.
  693.    *
  694.    * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events.
  695.    */
  696.   setTargetElement(element) {
  697.     this.removeEvents();
  699.     this.interactionDOMElement = element;
  701.     this.addEvents();
  702.   }
  704.   /**
  705.    * Registers all the DOM events
  706.    *
  707.    * @private
  708.    */
  709.   addEvents() {
  710.     if (!this.interactionDOMElement || this.eventsAdded) {
  711.       return;
  712.     }
  714.     this.emit('addevents');
  716.     this.interactionDOMElement.addEventListener('click', this.onClick, true);
  718.     if (window.navigator.msPointerEnabled) {
  719.       this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
  720.       this.interactionDOMElement.style['-ms-touch-action'] = 'none';
  721.     } else if (this.supportsPointerEvents) {
  722.       this.interactionDOMElement.style['touch-action'] = 'none';
  723.     }
  725.     /**
  726.      * These events are added first, so that if pointer events are normalised, they are fired
  727.      * in the same order as non-normalised events. ie. pointer event 1st, mouse / touch 2nd
  728.      */
  729.     if (this.supportsPointerEvents) {
  730.       window.document.addEventListener('pointermove', this.onPointerMove, true);
  731.       this.interactionDOMElement.addEventListener('pointerdown', this.onPointerDown, true);
  732.       // pointerout is fired in addition to pointerup (for touch events) and pointercancel
  733.       // we already handle those, so for the purposes of what we do in onPointerOut, we only
  734.       // care about the pointerleave event
  735.       this.interactionDOMElement.addEventListener('pointerleave', this.onPointerOut, true);
  736.       this.interactionDOMElement.addEventListener('pointerover', this.onPointerOver, true);
  737.       window.addEventListener('pointercancel', this.onPointerCancel, true);
  738.       window.addEventListener('pointerup', this.onPointerUp, true);
  739.     } else {
  740.       window.document.addEventListener('mousemove', this.onPointerMove, true);
  741.       this.interactionDOMElement.addEventListener('mousedown', this.onPointerDown, true);
  742.       this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true);
  743.       this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true);
  744.       window.addEventListener('mouseup', this.onPointerUp, true);
  745.     }
  747.     // always look directly for touch events so that we can provide original data
  748.     // In a future version we should change this to being just a fallback and rely solely on
  749.     // PointerEvents whenever available
  750.     if (this.supportsTouchEvents) {
  751.       this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true);
  752.       this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true);
  753.       this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true);
  754.       this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true);
  755.     }
  757.     this.eventsAdded = true;
  758.   }
  760.   /**
  761.    * Removes all the DOM events that were previously registered
  762.    *
  763.    * @private
  764.    */
  765.   removeEvents() {
  766.     if (!this.interactionDOMElement) {
  767.       return;
  768.     }
  770.     this.emit('removeevents');
  772.     this.interactionDOMElement.removeEventListener('click', this.onClick, true);
  774.     if (window.navigator.msPointerEnabled) {
  775.       this.interactionDOMElement.style['-ms-content-zooming'] = '';
  776.       this.interactionDOMElement.style['-ms-touch-action'] = '';
  777.     } else if (this.supportsPointerEvents) {
  778.       this.interactionDOMElement.style['touch-action'] = '';
  779.     }
  781.     if (this.supportsPointerEvents) {
  782.       window.document.removeEventListener('pointermove', this.onPointerMove, true);
  783.       this.interactionDOMElement.removeEventListener('pointerdown', this.onPointerDown, true);
  784.       this.interactionDOMElement.removeEventListener('pointerleave', this.onPointerOut, true);
  785.       this.interactionDOMElement.removeEventListener('pointerover', this.onPointerOver, true);
  786.       window.removeEventListener('pointercancel', this.onPointerCancel, true);
  787.       window.removeEventListener('pointerup', this.onPointerUp, true);
  788.     } else {
  789.       window.document.removeEventListener('mousemove', this.onPointerMove, true);
  790.       this.interactionDOMElement.removeEventListener('mousedown', this.onPointerDown, true);
  791.       this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true);
  792.       this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true);
  793.       window.removeEventListener('mouseup', this.onPointerUp, true);
  794.     }
  796.     if (this.supportsTouchEvents) {
  797.       this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true);
  798.       this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true);
  799.       this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true);
  800.       this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true);
  801.     }
  803.     this.interactionDOMElement = null;
  805.     this.eventsAdded = false;
  806.   }
  808.   /**
  809.    * Updates the state of interactive objects.
  810.    * Invoked by a throttled ticker.
  811.    *
  812.    * @param {number} deltaTime - time delta since last tick
  813.    */
  814.   update({ snippet }) {
  815.     this._deltaTime += snippet;
  817.     if (this._deltaTime < this.interactionFrequency) {
  818.       return;
  819.     }
  821.     this._deltaTime = 0;
  823.     if (!this.interactionDOMElement) {
  824.       return;
  825.     }
  827.     // if the user move the mouse this check has already been done using the mouse move!
  828.     if (this.didMove) {
  829.       this.didMove = false;
  831.       return;
  832.     }
  834.     this.cursor = null;
  836.     // Resets the flag as set by a stopPropagation call. This flag is usually reset by a user interaction of any kind,
  837.     // but there was a scenario of a display object moving under a static mouse cursor.
  838.     // In this case, mouseover and mouseevents would not pass the flag test in triggerEvent function
  839.     for (const k in this.activeInteractionData) {
  840.       // eslint-disable-next-line no-prototype-builtins
  841.       if (this.activeInteractionData.hasOwnProperty(k)) {
  842.         const interactionData = this.activeInteractionData[k];
  844.         if (interactionData.originalEvent && interactionData.pointerType !== 'touch') {
  845.           const interactionEvent = this.configureInteractionEventForDOMEvent(
  846.             this.eventData,
  847.             interactionData.originalEvent,
  848.             interactionData
  849.           );
  851.           this.processInteractive(
  852.             interactionEvent,
  853.             this.scene,
  854.             this.processPointerOverOut,
  855.             true
  856.           );
  857.         }
  858.       }
  859.     }
  861.     this.setCursorMode(this.cursor);
  863.     // TODO
  864.   }
  866.   /**
  867.    * Sets the current cursor mode, handling any callbacks or CSS style changes.
  868.    *
  869.    * @param {string} mode - cursor mode, a key from the cursorStyles dictionary
  870.    */
  871.   setCursorMode(mode) {
  872.     mode = mode || 'default';
  873.     // if the mode didn't actually change, bail early
  874.     if (this.currentCursorMode === mode) {
  875.       return;
  876.     }
  877.     this.currentCursorMode = mode;
  878.     const style = this.cursorStyles[mode];
  880.     // only do things if there is a cursor style for it
  881.     if (style) {
  882.       switch (typeof style) {
  883.         case 'string':
  884.           // string styles are handled as cursor CSS
  885.           this.interactionDOMElement.style.cursor = style;
  886.           break;
  887.         case 'function':
  888.           // functions are just called, and passed the cursor mode
  889.           style(mode);
  890.           break;
  891.         case 'object':
  892.           // if it is an object, assume that it is a dictionary of CSS styles,
  893.           // apply it to the interactionDOMElement
  894.           Object.assign(this.interactionDOMElement.style, style);
  895.           break;
  896.         default:
  897.           break;
  898.       }
  899.     } else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) {
  900.       // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry
  901.       // for the mode, then assume that the dev wants it to be CSS for the cursor.
  902.       this.interactionDOMElement.style.cursor = mode;
  903.     }
  904.   }
  906.   /**
  907.    * Dispatches an event on the display object that was interacted with
  908.    *
  909.    * @param {Object3D} displayObject - the display object in question
  910.    * @param {string} eventString - the name of the event (e.g, mousedown)
  911.    * @param {object} eventData - the event data object
  912.    * @private
  913.    */
  914.   triggerEvent(displayObject, eventString, eventData) {
  915.     if (!eventData.stopped) {
  916.       eventData.currentTarget = displayObject;
  917.       eventData.type = eventString;
  919.       displayObject.emit(eventString, eventData);
  921.       if (displayObject[eventString]) {
  922.         displayObject[eventString](eventData);
  923.       }
  924.     }
  925.   }
  927.   /**
  928.    * This function is provides a neat way of crawling through the scene graph and running a
  929.    * specified function on all interactive objects it finds. It will also take care of hit
  930.    * testing the interactive objects and passes the hit across in the function.
  931.    *
  932.    * @private
  933.    * @param {InteractionEvent} interactionEvent - event containing the point that
  934.    *  is tested for collision
  935.    * @param {Object3D} displayObject - the displayObject
  936.    *  that will be hit test (recursively crawls its children)
  937.    * @param {Function} [func] - the function that will be called on each interactive object. The
  938.    *  interactionEvent, displayObject and hit will be passed to the function
  939.    * @param {boolean} [hitTest] - this indicates if the objects inside should be hit test against the point
  940.    * @param {boolean} [interactive] - Whether the displayObject is interactive
  941.    * @return {boolean} returns true if the displayObject hit the point
  942.    */
  943.   processInteractive(interactionEvent, displayObject, func, hitTest, interactive) {
  944.     if (!displayObject || !displayObject.visible) {
  945.       return false;
  946.     }
  948.     // Took a little while to rework this function correctly! But now it is done and nice and optimised. ^_^
  949.     //
  950.     // This function will now loop through all objects and then only hit test the objects it HAS
  951.     // to, not all of them. MUCH faster..
  952.     // An object will be hit test if the following is true:
  953.     //
  954.     // 1: It is interactive.
  955.     // 2: It belongs to a parent that is interactive AND one of the parents children have not already been hit.
  956.     //
  957.     // As another little optimisation once an interactive object has been hit we can carry on
  958.     // through the scenegraph, but we know that there will be no more hits! So we can avoid extra hit tests
  959.     // A final optimisation is that an object is not hit test directly if a child has already been hit.
  961.     interactive = displayObject.interactive || interactive;
  963.     let hit = false;
  964.     let interactiveParent = interactive;
  966.     if (displayObject.interactiveChildren && displayObject.children) {
  967.       const children = displayObject.children;
  969.       for (let i = children.length - 1; i >= 0; i--) {
  970.         const child = children[i];
  972.         // time to get recursive.. if this function will return if something is hit..
  973.         const childHit = this.processInteractive(interactionEvent, child, func, hitTest, interactiveParent);
  975.         if (childHit) {
  976.           // its a good idea to check if a child has lost its parent.
  977.           // this means it has been removed whilst looping so its best
  978.           if (!child.parent) {
  979.             continue;
  980.           }
  982.           // we no longer need to hit test any more objects in this container as we we
  983.           // now know the parent has been hit
  984.           interactiveParent = false;
  986.           // If the child is interactive , that means that the object hit was actually
  987.           // interactive and not just the child of an interactive object.
  988.           // This means we no longer need to hit test anything else. We still need to run
  989.           // through all objects, but we don't need to perform any hit tests.
  991.           if (childHit) {
  992.             if (interactionEvent.target) {
  993.               hitTest = false;
  994.             }
  995.             hit = true;
  996.           }
  997.         }
  998.       }
  999.     }
  1001.     // no point running this if the item is not interactive or does not have an interactive parent.
  1002.     if (interactive) {
  1003.       // if we are hit testing (as in we have no hit any objects yet)
  1004.       // We also don't need to worry about hit testing if once of the displayObjects children
  1005.       // has already been hit - but only if it was interactive, otherwise we need to keep
  1006.       // looking for an interactive child, just in case we hit one
  1007.       if (hitTest && !interactionEvent.target) {
  1008.         if (interactionEvent.intersects[0] && interactionEvent.intersects[0].object === displayObject) {
  1009.           hit = true;
  1010.         }
  1011.       }
  1013.       if (displayObject.interactive) {
  1014.         if (hit && !interactionEvent.target) {
  1015.           interactionEvent.data.target = interactionEvent.target = displayObject;
  1016.         }
  1018.         if (func) {
  1019.           func(interactionEvent, displayObject, !!hit);
  1020.         }
  1021.       }
  1022.     }
  1024.     return hit;
  1025.   }
  1028.   /**
  1029.    * Is called when the click is pressed down on the renderer element
  1030.    *
  1031.    * @private
  1032.    * @param {MouseEvent} originalEvent - The DOM event of a click being pressed down
  1033.    */
  1034.   onClick(originalEvent) {
  1035.     if (originalEvent.type !== 'click') return;
  1037.     const events = this.normalizeToPointerData(originalEvent);
  1039.     if (this.autoPreventDefault && events[0].isNormalized) {
  1040.       originalEvent.preventDefault();
  1041.     }
  1043.     const interactionData = this.getInteractionDataForPointerId(events[0]);
  1045.     const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, events[0], interactionData);
  1047.     interactionEvent.data.originalEvent = originalEvent;
  1049.     this.processInteractive(interactionEvent, this.scene, this.processClick, true);
  1051.     this.emit('click', interactionEvent);
  1052.   }
  1054.   /**
  1055.    * Processes the result of the click check and dispatches the event if need be
  1056.    *
  1057.    * @private
  1058.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1059.    * @param {Object3D} displayObject - The display object that was tested
  1060.    * @param {boolean} hit - the result of the hit test on the display object
  1061.    */
  1062.   processClick(interactionEvent, displayObject, hit) {
  1063.     if (hit) {
  1064.       this.triggerEvent(displayObject, 'click', interactionEvent);
  1065.     }
  1066.   }
  1068.   /**
  1069.    * Is called when the pointer button is pressed down on the renderer element
  1070.    *
  1071.    * @private
  1072.    * @param {PointerEvent} originalEvent - The DOM event of a pointer button being pressed down
  1073.    */
  1074.   onPointerDown(originalEvent) {
  1075.     // if we support touch events, then only use those for touch events, not pointer events
  1076.     if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return;
  1078.     const events = this.normalizeToPointerData(originalEvent);
  1080.     /**
  1081.      * No need to prevent default on natural pointer events, as there are no side effects
  1082.      * Normalized events, however, may have the double mousedown/touchstart issue on the native android browser,
  1083.      * so still need to be prevented.
  1084.      */
  1086.     // Guaranteed that there will be at least one event in events, and all events must have the same pointer type
  1088.     if (this.autoPreventDefault && events[0].isNormalized) {
  1089.       originalEvent.preventDefault();
  1090.     }
  1092.     const eventLen = events.length;
  1094.     for (let i = 0; i < eventLen; i++) {
  1095.       const event = events[i];
  1097.       const interactionData = this.getInteractionDataForPointerId(event);
  1099.       const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
  1101.       interactionEvent.data.originalEvent = originalEvent;
  1103.       this.processInteractive(interactionEvent, this.scene, this.processPointerDown, true);
  1105.       this.emit('pointerdown', interactionEvent);
  1106.       if (event.pointerType === 'touch') {
  1107.         this.emit('touchstart', interactionEvent);
  1108.       } else if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
  1109.         const isRightButton = event.button === 2;
  1111.         this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData);
  1112.       }
  1113.     }
  1114.   }
  1116.   /**
  1117.    * Processes the result of the pointer down check and dispatches the event if need be
  1118.    *
  1119.    * @private
  1120.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1121.    * @param {Object3D} displayObject - The display object that was tested
  1122.    * @param {boolean} hit - the result of the hit test on the display object
  1123.    */
  1124.   processPointerDown(interactionEvent, displayObject, hit) {
  1125.     const data = interactionEvent.data;
  1126.     const id = interactionEvent.data.identifier;
  1128.     if (hit) {
  1129.       if (!displayObject.trackedPointers[id]) {
  1130.         displayObject.trackedPointers[id] = new InteractionTrackingData(id);
  1131.       }
  1132.       this.triggerEvent(displayObject, 'pointerdown', interactionEvent);
  1134.       if (data.pointerType === 'touch') {
  1135.         displayObject.started = true;
  1136.         this.triggerEvent(displayObject, 'touchstart', interactionEvent);
  1137.       } else if (data.pointerType === 'mouse' || data.pointerType === 'pen') {
  1138.         const isRightButton = data.button === 2;
  1140.         if (isRightButton) {
  1141.           displayObject.trackedPointers[id].rightDown = true;
  1142.         } else {
  1143.           displayObject.trackedPointers[id].leftDown = true;
  1144.         }
  1146.         this.triggerEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', interactionEvent);
  1147.       }
  1148.     }
  1149.   }
  1151.   /**
  1152.    * Is called when the pointer button is released on the renderer element
  1153.    *
  1154.    * @private
  1155.    * @param {PointerEvent} originalEvent - The DOM event of a pointer button being released
  1156.    * @param {boolean} cancelled - true if the pointer is cancelled
  1157.    * @param {Function} func - Function passed to {@link processInteractive}
  1158.    */
  1159.   onPointerComplete(originalEvent, cancelled, func) {
  1160.     const events = this.normalizeToPointerData(originalEvent);
  1162.     const eventLen = events.length;
  1164.     // if the event wasn't targeting our canvas, then consider it to be pointerupoutside
  1165.     // in all cases (unless it was a pointercancel)
  1166.     const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : '';
  1168.     for (let i = 0; i < eventLen; i++) {
  1169.       const event = events[i];
  1171.       const interactionData = this.getInteractionDataForPointerId(event);
  1173.       const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
  1175.       interactionEvent.data.originalEvent = originalEvent;
  1177.       // perform hit testing for events targeting our canvas or cancel events
  1178.       this.processInteractive(interactionEvent, this.scene, func, cancelled || !eventAppend);
  1180.       this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent);
  1182.       if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
  1183.         const isRightButton = event.button === 2;
  1185.         this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent);
  1186.       } else if (event.pointerType === 'touch') {
  1187.         this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent);
  1188.         this.releaseInteractionDataForPointerId(event.pointerId, interactionData);
  1189.       }
  1190.     }
  1191.   }
  1193.   /**
  1194.    * Is called when the pointer button is cancelled
  1195.    *
  1196.    * @private
  1197.    * @param {PointerEvent} event - The DOM event of a pointer button being released
  1198.    */
  1199.   onPointerCancel(event) {
  1200.     // if we support touch events, then only use those for touch events, not pointer events
  1201.     if (this.supportsTouchEvents && event.pointerType === 'touch') return;
  1203.     this.onPointerComplete(event, true, this.processPointerCancel);
  1204.   }
  1206.   /**
  1207.    * Processes the result of the pointer cancel check and dispatches the event if need be
  1208.    *
  1209.    * @private
  1210.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1211.    * @param {Object3D} displayObject - The display object that was tested
  1212.    */
  1213.   processPointerCancel(interactionEvent, displayObject) {
  1214.     const data = interactionEvent.data;
  1216.     const id = interactionEvent.data.identifier;
  1218.     if (displayObject.trackedPointers[id] !== undefined) {
  1219.       delete displayObject.trackedPointers[id];
  1220.       this.triggerEvent(displayObject, 'pointercancel', interactionEvent);
  1222.       if (data.pointerType === 'touch') {
  1223.         this.triggerEvent(displayObject, 'touchcancel', interactionEvent);
  1224.       }
  1225.     }
  1226.   }
  1228.   /**
  1229.    * Is called when the pointer button is released on the renderer element
  1230.    *
  1231.    * @private
  1232.    * @param {PointerEvent} event - The DOM event of a pointer button being released
  1233.    */
  1234.   onPointerUp(event) {
  1235.     // if we support touch events, then only use those for touch events, not pointer events
  1236.     if (this.supportsTouchEvents && event.pointerType === 'touch') return;
  1238.     this.onPointerComplete(event, false, this.processPointerUp);
  1239.   }
  1241.   /**
  1242.    * Processes the result of the pointer up check and dispatches the event if need be
  1243.    *
  1244.    * @private
  1245.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1246.    * @param {Object3D} displayObject - The display object that was tested
  1247.    * @param {boolean} hit - the result of the hit test on the display object
  1248.    */
  1249.   processPointerUp(interactionEvent, displayObject, hit) {
  1250.     const data = interactionEvent.data;
  1252.     const id = interactionEvent.data.identifier;
  1254.     const trackingData = displayObject.trackedPointers[id];
  1256.     const isTouch = data.pointerType === 'touch';
  1258.     const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen');
  1260.     // Mouse only
  1261.     if (isMouse) {
  1262.       const isRightButton = data.button === 2;
  1264.       const flags = InteractionTrackingData.FLAGS;
  1266.       const test = isRightButton ? flags.RIGHT_DOWN : flags.LEFT_DOWN;
  1268.       const isDown = trackingData !== undefined && (trackingData.flags & test);
  1270.       if (hit) {
  1271.         this.triggerEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', interactionEvent);
  1273.         if (isDown) {
  1274.           this.triggerEvent(displayObject, isRightButton ? 'rightclick' : 'leftclick', interactionEvent);
  1275.         }
  1276.       } else if (isDown) {
  1277.         this.triggerEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', interactionEvent);
  1278.       }
  1279.       // update the down state of the tracking data
  1280.       if (trackingData) {
  1281.         if (isRightButton) {
  1282.           trackingData.rightDown = false;
  1283.         } else {
  1284.           trackingData.leftDown = false;
  1285.         }
  1286.       }
  1287.     }
  1289.     // Pointers and Touches, and Mouse
  1290.     if (isTouch && displayObject.started) {
  1291.       displayObject.started = false;
  1292.       this.triggerEvent(displayObject, 'touchend', interactionEvent);
  1293.     }
  1294.     if (hit) {
  1295.       this.triggerEvent(displayObject, 'pointerup', interactionEvent);
  1297.       if (trackingData) {
  1298.         this.triggerEvent(displayObject, 'pointertap', interactionEvent);
  1299.         if (isTouch) {
  1300.           this.triggerEvent(displayObject, 'tap', interactionEvent);
  1301.           // touches are no longer over (if they ever were) when we get the touchend
  1302.           // so we should ensure that we don't keep pretending that they are
  1303.           trackingData.over = false;
  1304.         }
  1305.       }
  1306.     } else if (trackingData) {
  1307.       this.triggerEvent(displayObject, 'pointerupoutside', interactionEvent);
  1308.       if (isTouch) this.triggerEvent(displayObject, 'touchendoutside', interactionEvent);
  1309.     }
  1310.     // Only remove the tracking data if there is no over/down state still associated with it
  1311.     if (trackingData && trackingData.none) {
  1312.       delete displayObject.trackedPointers[id];
  1313.     }
  1314.   }
  1316.   /**
  1317.    * Is called when the pointer moves across the renderer element
  1318.    *
  1319.    * @private
  1320.    * @param {PointerEvent} originalEvent - The DOM event of a pointer moving
  1321.    */
  1322.   onPointerMove(originalEvent) {
  1323.     // if we support touch events, then only use those for touch events, not pointer events
  1324.     if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return;
  1326.     const events = this.normalizeToPointerData(originalEvent);
  1328.     if (events[0].pointerType === 'mouse') {
  1329.       this.didMove = true;
  1331.       this.cursor = null;
  1332.     }
  1334.     const eventLen = events.length;
  1336.     for (let i = 0; i < eventLen; i++) {
  1337.       const event = events[i];
  1339.       const interactionData = this.getInteractionDataForPointerId(event);
  1341.       const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
  1343.       interactionEvent.data.originalEvent = originalEvent;
  1345.       const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true;
  1347.       this.processInteractive(
  1348.         interactionEvent,
  1349.         this.scene,
  1350.         this.processPointerMove,
  1351.         interactive
  1352.       );
  1353.       this.emit('pointermove', interactionEvent);
  1354.       if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent);
  1355.       if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent);
  1356.     }
  1358.     if (events[0].pointerType === 'mouse') {
  1359.       this.setCursorMode(this.cursor);
  1361.       // TODO BUG for parents interactive object (border order issue)
  1362.     }
  1363.   }
  1365.   /**
  1366.    * Processes the result of the pointer move check and dispatches the event if need be
  1367.    *
  1368.    * @private
  1369.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1370.    * @param {Object3D} displayObject - The display object that was tested
  1371.    * @param {boolean} hit - the result of the hit test on the display object
  1372.    */
  1373.   processPointerMove(interactionEvent, displayObject, hit) {
  1374.     const data = interactionEvent.data;
  1376.     const isTouch = data.pointerType === 'touch';
  1378.     const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen');
  1380.     if (isMouse) {
  1381.       this.processPointerOverOut(interactionEvent, displayObject, hit);
  1382.     }
  1384.     if (isTouch && displayObject.started) this.triggerEvent(displayObject, 'touchmove', interactionEvent);
  1385.     if (!this.moveWhenInside || hit) {
  1386.       this.triggerEvent(displayObject, 'pointermove', interactionEvent);
  1387.       if (isMouse) this.triggerEvent(displayObject, 'mousemove', interactionEvent);
  1388.     }
  1389.   }
  1391.   /**
  1392.    * Is called when the pointer is moved out of the renderer element
  1393.    *
  1394.    * @private
  1395.    * @param {PointerEvent} originalEvent - The DOM event of a pointer being moved out
  1396.    */
  1397.   onPointerOut(originalEvent) {
  1398.     // if we support touch events, then only use those for touch events, not pointer events
  1399.     if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return;
  1401.     const events = this.normalizeToPointerData(originalEvent);
  1403.     // Only mouse and pointer can call onPointerOut, so events will always be length 1
  1404.     const event = events[0];
  1406.     if (event.pointerType === 'mouse') {
  1407.       this.mouseOverRenderer = false;
  1408.       this.setCursorMode(null);
  1409.     }
  1411.     const interactionData = this.getInteractionDataForPointerId(event);
  1413.     const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
  1415.     interactionEvent.data.originalEvent = event;
  1417.     this.processInteractive(interactionEvent, this.scene, this.processPointerOverOut, false);
  1419.     this.emit('pointerout', interactionEvent);
  1420.     if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
  1421.       this.emit('mouseout', interactionEvent);
  1422.     } else {
  1423.       // we can get touchleave events after touchend, so we want to make sure we don't
  1424.       // introduce memory leaks
  1425.       this.releaseInteractionDataForPointerId(interactionData.identifier);
  1426.     }
  1427.   }
  1429.   /**
  1430.    * Processes the result of the pointer over/out check and dispatches the event if need be
  1431.    *
  1432.    * @private
  1433.    * @param {InteractionEvent} interactionEvent - The interaction event wrapping the DOM event
  1434.    * @param {Object3D} displayObject - The display object that was tested
  1435.    * @param {boolean} hit - the result of the hit test on the display object
  1436.    */
  1437.   processPointerOverOut(interactionEvent, displayObject, hit) {
  1438.     const data = interactionEvent.data;
  1440.     const id = interactionEvent.data.identifier;
  1442.     const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen');
  1444.     let trackingData = displayObject.trackedPointers[id];
  1446.     // if we just moused over the display object, then we need to track that state
  1447.     if (hit && !trackingData) {
  1448.       trackingData = displayObject.trackedPointers[id] = new InteractionTrackingData(id);
  1449.     }
  1451.     if (trackingData === undefined) return;
  1453.     if (hit && this.mouseOverRenderer) {
  1454.       if (!trackingData.over) {
  1455.         trackingData.over = true;
  1456.         this.triggerEvent(displayObject, 'pointerover', interactionEvent);
  1457.         if (isMouse) {
  1458.           this.triggerEvent(displayObject, 'mouseover', interactionEvent);
  1459.         }
  1460.       }
  1462.       // only change the cursor if it has not already been changed (by something deeper in the
  1463.       // display tree)
  1464.       if (isMouse && this.cursor === null) {
  1465.         this.cursor = displayObject.cursor;
  1466.       }
  1467.     } else if (trackingData.over) {
  1468.       trackingData.over = false;
  1469.       this.triggerEvent(displayObject, 'pointerout', this.eventData);
  1470.       if (isMouse) {
  1471.         this.triggerEvent(displayObject, 'mouseout', interactionEvent);
  1472.       }
  1473.       // if there is no mouse down information for the pointer, then it is safe to delete
  1474.       if (trackingData.none) {
  1475.         delete displayObject.trackedPointers[id];
  1476.       }
  1477.     }
  1478.   }
  1480.   /**
  1481.    * Is called when the pointer is moved into the renderer element
  1482.    *
  1483.    * @private
  1484.    * @param {PointerEvent} originalEvent - The DOM event of a pointer button being moved into the renderer view
  1485.    */
  1486.   onPointerOver(originalEvent) {
  1487.     const events = this.normalizeToPointerData(originalEvent);
  1489.     // Only mouse and pointer can call onPointerOver, so events will always be length 1
  1490.     const event = events[0];
  1492.     const interactionData = this.getInteractionDataForPointerId(event);
  1494.     const interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);
  1496.     interactionEvent.data.originalEvent = event;
  1498.     if (event.pointerType === 'mouse') {
  1499.       this.mouseOverRenderer = true;
  1500.     }
  1502.     this.emit('pointerover', interactionEvent);
  1503.     if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
  1504.       this.emit('mouseover', interactionEvent);
  1505.     }
  1506.   }
  1508.   /**
  1509.    * Get InteractionData for a given pointerId. Store that data as well
  1510.    *
  1511.    * @private
  1512.    * @param {PointerEvent} event - Normalized pointer event, output from normalizeToPointerData
  1513.    * @return {InteractionData} - Interaction data for the given pointer identifier
  1514.    */
  1515.   getInteractionDataForPointerId(event) {
  1516.     const pointerId = event.pointerId;
  1518.     let interactionData;
  1520.     if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') {
  1521.       interactionData = this.mouse;
  1522.     } else if (this.activeInteractionData[pointerId]) {
  1523.       interactionData = this.activeInteractionData[pointerId];
  1524.     } else {
  1525.       interactionData = this.interactionDataPool.pop() || new InteractionData();
  1526.       interactionData.identifier = pointerId;
  1527.       this.activeInteractionData[pointerId] = interactionData;
  1528.     }
  1529.     // copy properties from the event, so that we can make sure that touch/pointer specific
  1530.     // data is available
  1531.     interactionData._copyEvent(event);
  1533.     return interactionData;
  1534.   }
  1536.   /**
  1537.    * Return unused InteractionData to the pool, for a given pointerId
  1538.    *
  1539.    * @private
  1540.    * @param {number} pointerId - Identifier from a pointer event
  1541.    */
  1542.   releaseInteractionDataForPointerId(pointerId) {
  1543.     const interactionData = this.activeInteractionData[pointerId];
  1545.     if (interactionData) {
  1546.       delete this.activeInteractionData[pointerId];
  1547.       interactionData._reset();
  1548.       this.interactionDataPool.push(interactionData);
  1549.     }
  1550.   }
  1552.   /**
  1553.    * Maps x and y coords from a DOM object and maps them correctly to the three.js view. The
  1554.    * resulting value is stored in the point. This takes into account the fact that the DOM
  1555.    * element could be scaled and positioned anywhere on the screen.
  1556.    *
  1557.    * @param  {Vector2} point - the point that the result will be stored in
  1558.    * @param  {number} x - the x coord of the position to map
  1559.    * @param  {number} y - the y coord of the position to map
  1560.    */
  1561.   mapPositionToPoint(point, x, y) {
  1562.     let rect;
  1564.     // IE 11 fix
  1565.     if (!this.interactionDOMElement.parentElement) {
  1566.       rect = {
  1567.         x: 0,
  1568.         y: 0,
  1569.         left: 0,
  1570.         top: 0,
  1571.         width: 0,
  1572.         height: 0,
  1573.       };
  1574.     } else {
  1575.       rect = this.interactionDOMElement.getBoundingClientRect();
  1576.     }
  1578.     point.x = ((x - rect.left) / rect.width) * 2 - 1;
  1579.     point.y = -((y - rect.top) / rect.height) * 2 + 1;
  1580.   }
  1582.   /**
  1583.    * Configure an InteractionEvent to wrap a DOM PointerEvent and InteractionData
  1584.    *
  1585.    * @private
  1586.    * @param {InteractionEvent} interactionEvent - The event to be configured
  1587.    * @param {PointerEvent} pointerEvent - The DOM event that will be paired with the InteractionEvent
  1588.    * @param {InteractionData} interactionData - The InteractionData that will be paired
  1589.    *        with the InteractionEvent
  1590.    * @return {InteractionEvent} the interaction event that was passed in
  1591.    */
  1592.   configureInteractionEventForDOMEvent(interactionEvent, pointerEvent, interactionData) {
  1593.     interactionEvent.data = interactionData;
  1595.     this.mapPositionToPoint(interactionData.global, pointerEvent.clientX, pointerEvent.clientY);
  1597.     this.raycaster.setFromCamera(interactionData.global, this.camera);
  1599.     // Not really sure why this is happening, but it's how a previous version handled things TODO: there should be remove
  1600.     if (pointerEvent.pointerType === 'touch') {
  1601.       pointerEvent.globalX = interactionData.global.x;
  1602.       pointerEvent.globalY = interactionData.global.y;
  1603.     }
  1605.     interactionData.originalEvent = pointerEvent;
  1606.     interactionEvent._reset();
  1607.     interactionEvent.intersects = this.raycaster.intersectObjects(this.scene.children, true);
  1609.     return interactionEvent;
  1610.   }
  1612.   /**
  1613.    * Ensures that the original event object contains all data that a regular pointer event would have
  1614.    *
  1615.    * @private
  1616.    * @param {TouchEvent|MouseEvent|PointerEvent} event - The original event data from a touch or mouse event
  1617.    * @return {PointerEvent[]} An array containing a single normalized pointer event, in the case of a pointer
  1618.    *  or mouse event, or a multiple normalized pointer events if there are multiple changed touches
  1619.    */
  1620.   normalizeToPointerData(event) {
  1621.     const normalizedEvents = [];
  1623.     if (this.supportsTouchEvents && event instanceof TouchEvent) {
  1624.       for (let i = 0, li = event.changedTouches.length; i < li; i++) {
  1625.         const touch = event.changedTouches[i];
  1627.         if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;
  1628.         if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;
  1629.         if (typeof touch.isPrimary === 'undefined') {
  1630.           touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
  1631.         }
  1632.         if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;
  1633.         if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;
  1634.         if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;
  1635.         if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;
  1636.         if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';
  1637.         if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;
  1638.         if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;
  1639.         touch.twist = 0;
  1640.         touch.tangentialPressure = 0;
  1641.         // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven
  1642.         // support, and the fill ins are not quite the same
  1643.         // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top
  1644.         // left is not 0,0 on the page
  1645.         if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;
  1646.         if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;
  1648.         // mark the touch as normalized, just so that we know we did it
  1649.         touch.isNormalized = true;
  1651.         normalizedEvents.push(touch);
  1652.       }
  1653.     } else if (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof window.PointerEvent))) {
  1654.       if (typeof event.isPrimary === 'undefined') event.isPrimary = true;
  1655.       if (typeof event.width === 'undefined') event.width = 1;
  1656.       if (typeof event.height === 'undefined') event.height = 1;
  1657.       if (typeof event.tiltX === 'undefined') event.tiltX = 0;
  1658.       if (typeof event.tiltY === 'undefined') event.tiltY = 0;
  1659.       if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse';
  1660.       if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID;
  1661.       if (typeof event.pressure === 'undefined') event.pressure = 0.5;
  1662.       event.twist = 0;
  1663.       event.tangentialPressure = 0;
  1665.       // mark the mouse event as normalized, just so that we know we did it
  1666.       event.isNormalized = true;
  1668.       normalizedEvents.push(event);
  1669.     } else {
  1670.       normalizedEvents.push(event);
  1671.     }
  1673.     return normalizedEvents;
  1674.   }
  1676.   /**
  1677.    * Destroys the interaction manager
  1678.    *
  1679.    */
  1680.   destroy() {
  1681.     this.removeEvents();
  1683.     this.removeAllListeners();
  1685.     this.renderer = null;
  1687.     this.mouse = null;
  1689.     this.eventData = null;
  1691.     this.interactionDOMElement = null;
  1693.     this.onPointerDown = null;
  1694.     this.processPointerDown = null;
  1696.     this.onPointerUp = null;
  1697.     this.processPointerUp = null;
  1699.     this.onPointerCancel = null;
  1700.     this.processPointerCancel = null;
  1702.     this.onPointerMove = null;
  1703.     this.processPointerMove = null;
  1705.     this.onPointerOut = null;
  1706.     this.processPointerOverOut = null;
  1708.     this.onPointerOver = null;
  1710.     this._tempPoint = null;
  1711.   }
  1712. }
  1714. export default InteractionManager;