aframe-input-mapping-component - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/aframe-input-mapping-component.js

 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
-
+/******/
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-
+/******/
 /******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId])
+/******/ 		if(installedModules[moduleId]) {
 /******/ 			return installedModules[moduleId].exports;
-
+/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
 /******/ 		};
-
+/******/
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
+/******/
 /******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
-
+/******/ 		module.l = true;
+/******/
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-
-
+/******/
+/******/
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-
+/******/
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-
+/******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
 /******/ })
@@ -45,215 +68,545 @@ /************************************************************************/
 /* 0 */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-	/* global AFRAME */
+"use strict";
 
-	if (typeof AFRAME === 'undefined') {
-	  throw new Error('Component attempted to register before AFRAME was available.');
-	}
 
-	AFRAME.currentInputMapping = 'default';
-	AFRAME.inputMappings = {};
-	AFRAME.inputActions = {};
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-	AFRAME.registerSystem('input-mapping', {
-	  mappings: {},
-	  mappingsPerControllers: {},
-	  loadedControllers: [],
+/* global AFRAME */
 
-	  init: function () {
-	    var self = this;
+if (typeof AFRAME === 'undefined') {
+  throw new Error('Component attempted to register before AFRAME was available.');
+}
 
-	    this.keyboardHandler = this.keyboardHandler.bind(this);
+__webpack_require__(1);
+__webpack_require__(6);
 
-	    this.sceneEl.addEventListener('inputmappingregistered', function () {
-	      self.removeControllersListeners();
-	      for (var i = 0; i < self.loadedControllers.length; i++) {
-	        var controllerObj = self.loadedControllers[i];
-	        self.updateControllersListeners(controllerObj);
-	      }
-	    });
+AFRAME.currentInputMapping = null;
+AFRAME.inputMappings = {};
+AFRAME.inputActions = {};
 
-	    // Controllers
-	    this.sceneEl.addEventListener('controllerconnected', function (event) {
-	      var matchedController = self.findMatchingController(event.detail.target);
+var behaviour = {
+  trackpad: 'dpad'
+};
 
-	      if (matchedController) {
-	        self.updateControllersListeners(matchedController);
-	        return;
-	      }
+AFRAME.registerSystem('input-mapping', {
+  mappings: {},
+  mappingsPerControllers: {},
+  loadedControllers: [],
 
-	      var controllerObj = {
-	        name: event.detail.name,
-	        hand: event.detail.component.data.hand,
-	        element: event.detail.target,
-	        handlers: {}
-	      };
-	      self.loadedControllers.push(controllerObj);
+  init: function init() {
+    var self = this;
 
-	      self.updateControllersListeners(controllerObj);
-	    });
+    this.keyboardHandler = this.keyboardHandler.bind(this);
 
-	    this.sceneEl.addEventListener('controllerdisconnected', function (event) {
-	      var controller = self.findMatchingController(event.detail.target);
-	      if (controller) {
-	        self.removeControllerListeners(controller);
-	      }
-	    });
+    this.sceneEl.addEventListener('inputmappingregistered', function () {
+      self.removeControllersListeners();
+      for (var i = 0; i < self.loadedControllers.length; i++) {
+        var controllerObj = self.loadedControllers[i];
+        self.updateControllersListeners(controllerObj);
+      }
+    });
 
-	    // Keyboard
-	    this.addKeyboardListeners();
-	  },
+    // Controllers
+    this.sceneEl.addEventListener('controllerconnected', function (event) {
+      var matchedController = self.findMatchingController(event.target);
 
-	  findMatchingController: function (matchElement) {
-	    var controller;
-	    var i;
-	    for (i = 0; i < this.loadedControllers.length; i++) {
-	      controller = this.loadedControllers[i];
-	      if (controller.element === matchElement) {
-	        return controller;
-	      }
-	    }
-	    return undefined;
-	  },
+      if (matchedController) {
+        self.updateControllersListeners(matchedController);
+        return;
+      }
 
-	  addKeyboardListeners: function () {
-	    document.addEventListener('keyup', this.keyboardHandler);
-	    document.addEventListener('keydown', this.keyboardHandler);
-	    document.addEventListener('keypress', this.keyboardHandler);
-	  },
+      var controllerObj = {
+        name: event.detail.name,
+        hand: event.detail.component.data.hand,
+        element: event.target,
+        handlers: {},
+        activators: {}
+      };
+      self.loadedControllers.push(controllerObj);
 
-	  removeKeyboardListeners: function () {
-	    document.removeEventListener('keyup', this.keyboardHandler);
-	    document.removeEventListener('keydown', this.keyboardHandler);
-	    document.removeEventListener('keypress', this.keyboardHandler);
-	  },
+      self.updateControllersListeners(controllerObj);
+    });
 
-	  removeControllerListeners: function (controller) {
-	    for (var eventName in controller.handlers) {
-	      var handler = controller.handlers[eventName];
-	      controller.element.removeEventListener(eventName, handler);
-	    }
-	    controller.handlers = {};
-	  },
+    this.sceneEl.addEventListener('controllerdisconnected', function (event) {
+      var controller = self.findMatchingController(event.target);
+      if (controller) {
+        self.removeControllerListeners(controller);
+      }
+    });
 
-	  updateControllersListeners: function (controllerObj) {
-	    this.removeControllerListeners(controllerObj);
+    // Keyboard
+    this.addKeyboardListeners();
+  },
 
-	    if (!AFRAME.inputMappings) {
-	      console.warn('input-mapping: No mappings defined');
-	      return;
-	    }
+  findMatchingController: function findMatchingController(matchElement) {
+    var controller;
+    var i;
+    for (i = 0; i < this.loadedControllers.length; i++) {
+      controller = this.loadedControllers[i];
+      if (controller.element === matchElement) {
+        return controller;
+      }
+    }
+    return undefined;
+  },
 
-	    var mappingsPerController = this.mappingsPerControllers[controllerObj.name] = {};
+  addKeyboardListeners: function addKeyboardListeners() {
+    document.addEventListener('keyup', this.keyboardHandler);
+    document.addEventListener('keydown', this.keyboardHandler);
+    document.addEventListener('keypress', this.keyboardHandler);
+  },
 
-	    // Create the listener for each event
-	    for (var mappingName in AFRAME.inputMappings) {
-	      var mapping = AFRAME.inputMappings[mappingName];
+  removeKeyboardListeners: function removeKeyboardListeners() {
+    document.removeEventListener('keyup', this.keyboardHandler);
+    document.removeEventListener('keydown', this.keyboardHandler);
+    document.removeEventListener('keypress', this.keyboardHandler);
+  },
 
-	      var commonMappings = mapping.common;
-	      if (commonMappings) {
-	        this.updateMappingsPerController(commonMappings, mappingsPerController, mappingName);
-	      }
+  removeControllerListeners: function removeControllerListeners(controller) {
+    // Remove events handlers
+    for (var eventName in controller.handlers) {
+      var handler = controller.handlers[eventName];
+      controller.element.removeEventListener(eventName, handler);
+    }
+    controller.handlers = {};
 
-	      var controllerMappings = mapping[controllerObj.name];
-	      if (controllerMappings) {
-	        this.updateMappingsPerController(controllerMappings, mappingsPerController, mappingName);
-	      } else {
-	        console.warn('input-mapping: No mappings defined for controller type: ', controllerObj.name);
-	      }
-	    }
+    // Remove activators
+    for (var activatorName in controller.activators) {
+      var activator = controller.activators[activatorName];
+      activator.removeListeners();
+    }
 
-	    var self = this;
-	    for (var eventName in mappingsPerController) {
-	      var handler = function (event) {
-	        var mapping = mappingsPerController[event.type];
-	        var mappedEvent = mapping[AFRAME.currentInputMapping];
-	        if (mappedEvent) {
-	          if (typeof mappedEvent ==='object') {
-	            var controller = self.findMatchingController(event.detail.target);
-	            mappedEvent = mappedEvent[controller.hand];
-	            if (!mappedEvent) { return; }
-	          }
-	          event.detail.target.emit(mappedEvent, event.detail);
-	        }
-	      };
+    controller.activators = {};
+  },
 
-	      controllerObj.element.addEventListener(eventName, handler);
-	      controllerObj.handlers[eventName] = handler;
-	    }
-	  },
+  updateBehaviours: function updateBehaviours(controllerObj) {
+    var controllerBehaviour = AFRAME.inputBehaviours[controllerObj.name];
+    var behavioursPerController = this.mappingsPerControllers[controllerObj.name].behaviours;
+    if (!behavioursPerController) {
+      return;
+    }
+    for (var button in behavioursPerController) {
+      var behaviourName = behavioursPerController[button];
+      var behaviourDefinition = AFRAME.inputBehaviours[behaviourName];
+      if (behaviourDefinition) {
+        var behaviour = new behaviourDefinition(controllerObj.element, button);
+      }
+    }
+  },
 
-	  keyboardHandler: function (event) {
-	    var mappings = AFRAME.inputMappings[AFRAME.currentInputMapping];
+  updateControllersListeners: function updateControllersListeners(controllerObj) {
+    this.removeControllerListeners(controllerObj);
 
-	    if (mappings && mappings.keyboard) {
-	      mappings = mappings.keyboard;
-	      var key = event.keyCode === 32 ? 'Space' : event.key;
-	      var keyEvent = (key + '_' + event.type.substr(3)).toLowerCase();
-	      var mapEvent = mappings[keyEvent];
-	      if (mapEvent) {
-	        this.sceneEl.emit(mapEvent);
-	      }
-	    }
-	  },
+    if (!AFRAME.inputMappings) {
+      console.warn('input-mapping: No mappings defined');
+      return;
+    }
 
-	  updateMappingsPerController: function (mappings, mappingsPerController, mappingName) {
-	    // Generate a mapping for each controller: (Eg: vive-controls.triggerdown.default.paint)
-	    for (var eventName in mappings) {
-	      var mapping = mappings[eventName];
-	      if (!mappingsPerController[eventName]) {
-	        mappingsPerController[eventName] = {};
-	      }
-	      mappingsPerController[eventName][mappingName] = mapping;
-	    }
-	  },
+    var mappingsPerController = this.mappingsPerControllers[controllerObj.name] = {
+      mappings: {},
+      behaviours: {}
+    };
 
-	  removeControllersListeners: function () {
-	    for (var i = 0; i < this.loadedControllers.length; i++) {
-	      var controller = this.loadedControllers[i];
-	      this.removeControllerListeners(controller);
-	    }
-	    this.mappingsPerControllers = {};
-	  }
-	});
+    // Create the listener for each event
+    for (var mappingName in AFRAME.inputMappings.mappings) {
+      var mapping = AFRAME.inputMappings.mappings[mappingName];
 
-	AFRAME.registerInputActions = function (inputActions) {
-	  AFRAME.inputActions = inputActions;
-	};
+      var commonMappings = mapping.common;
+      if (commonMappings) {
+        this.updateMappingsPerController(commonMappings, mappingsPerController, mappingName);
+      }
 
-	AFRAME.registerInputMappings = function (data, override) {
-	  if (override || Object.keys(AFRAME.inputMappings).length === 0) {
-	    AFRAME.inputMappings = data;
-	  } else {
-	    // Merge mappings
-	    for (var mappingName in data) {
-	      var mapping = data[mappingName];
-	      if (!AFRAME.inputMappings[mappingName]) {
-	        AFRAME.inputMappings[mappingName] = mapping;
-	        continue;
-	      }
+      var controllerMappings = mapping[controllerObj.name];
+      if (controllerMappings) {
+        this.updateMappingsPerController(controllerMappings, mappingsPerController, mappingName);
+      } else {
+        console.warn('input-mapping: No mappings defined for controller type: ', controllerObj.name);
+      }
+    }
 
-	      for (var controllerName in mapping) {
-	        var controllerMapping = mapping[controllerName];
-	        if (!AFRAME.inputMappings[mappingName][controllerName]) {
-	          AFRAME.inputMappings[mappingName][controllerName] = controllerMapping;
-	          continue;
-	        }
+    // Mapping the behaviours
+    for (var mappingName in AFRAME.inputMappings.behaviours) {
+      var behaviour = AFRAME.inputMappings.behaviours[mappingName];
 
-	        for (var eventName in controllerMapping) {
-	          AFRAME.inputMappings[mappingName][controllerName][eventName] = controllerMapping[eventName];
-	        }
-	      }
-	    }
-	  }
+      var controllerBehaviours = behaviour[controllerObj.name];
+      if (controllerBehaviours) {
+        this.updateBehavioursPerController(controllerBehaviours, mappingsPerController, mappingName);
+      }
+    }
 
-	  if (!AFRAME.scenes) { return; }
+    var self = this;
 
-	  for (var i = 0; i < AFRAME.scenes.length; i++) {
-	    AFRAME.scenes[i].emit('inputmappingregistered');
-	  }
-	};
+    var OnActivate = function OnActivate(eventName) {
+      return function (event) {
+        var mapping = mappingsPerController.mappings[eventName];
+        var mappedEvent = mapping[AFRAME.currentInputMapping];
+        if ((typeof mappedEvent === 'undefined' ? 'undefined' : _typeof(mappedEvent)) === 'object') {
+          // Handedness
+          var controller = self.findMatchingController(event.target);
+          mappedEvent = mappedEvent[controller.hand];
+          if (!mappedEvent) {
+            return;
+          }
+        }
+        event.target.emit(mappedEvent, event.detail);
+      };
+    };
 
+    for (var eventName in mappingsPerController.mappings) {
+      // Check for activators
+      if (eventName.indexOf('.') !== -1) {
+        var aux = eventName.split('.');
+        var button = aux[0]; // eg: trackpad
+        var activatorName = aux[1]; // eg: doublepress
+        var onActivate = OnActivate(eventName);
+        var Activator = AFRAME.inputActivators[activatorName];
+        controllerObj.activators[eventName] = new Activator(controllerObj.element, button, onActivate);
+      }
 
+      var onActivate = OnActivate(eventName);
+      controllerObj.element.addEventListener(eventName, onActivate);
+      controllerObj.handlers[eventName] = onActivate;
+    }
+
+    this.updateBehaviours(controllerObj);
+  },
+
+  checkValidInputMapping: function checkValidInputMapping() {
+    if (AFRAME.currentInputMapping === null) {
+      console.warn('input-mapping: No current input mapping defined.');
+    }
+  },
+
+  keyboardHandler: function keyboardHandler(event) {
+    this.checkValidInputMapping();
+    if (AFRAME.inputMappings && AFRAME.inputMappings.mappings[AFRAME.currentInputMapping] && AFRAME.inputMappings.mappings[AFRAME.currentInputMapping].keyboard) {
+      var currentKeyboardMapping = AFRAME.inputMappings.mappings[AFRAME.currentInputMapping].keyboard;
+      var key = event.keyCode === 32 ? "Space" : event.key;
+      var keyEvent = (key + "_" + event.type.substr(3)).toLowerCase();
+      var mapEvent = currentKeyboardMapping[keyEvent];
+      if (mapEvent) {
+        this.sceneEl.emit(mapEvent);
+      }
+    }
+  },
+
+  updateBehavioursPerController: function updateBehavioursPerController(behaviours, mappingsPerController, mappingName) {
+    for (var button in behaviours) {
+      var behaviour = behaviours[button];
+
+      if (!mappingsPerController.behaviours[button]) {
+        mappingsPerController.behaviours[button] = behaviour;
+      }
+    }
+  },
+
+  updateMappingsPerController: function updateMappingsPerController(mappings, mappingsPerController, mappingName) {
+    // Generate a mapping for each controller: (Eg: vive-controls.triggerdown.default.paint)
+    for (var eventName in mappings) {
+      var mapping = mappings[eventName];
+      if (!mappingsPerController.mappings[eventName]) {
+        mappingsPerController.mappings[eventName] = {};
+      }
+      mappingsPerController.mappings[eventName][mappingName] = mapping;
+    }
+  },
+
+  removeControllersListeners: function removeControllersListeners() {
+    for (var i = 0; i < this.loadedControllers.length; i++) {
+      var controller = this.loadedControllers[i];
+      this.removeControllerListeners(controller);
+    }
+    this.mappingsPerControllers = {
+      mappings: {},
+      behaviours: {}
+    };
+  }
+});
+
+AFRAME.registerInputActions = function (inputActions, defaultActionSet) {
+  AFRAME.inputActions = inputActions;
+  if (typeof defaultActionSet !== 'undefined') {
+    if (AFRAME.inputActions[defaultActionSet]) {
+      AFRAME.currentInputMapping = defaultActionSet;
+    } else {
+      console.error('input-mapping: trying to set a non registered action set \'' + defaultActionSet + '\'');
+    }
+  }
+};
+
+AFRAME.registerInputMappings = function (data, override) {
+  if (override || Object.keys(AFRAME.inputMappings).length === 0) {
+    AFRAME.inputMappings = data;
+  } else {
+    // @todo Merge behaviours too
+    AFRAME.inputMappings.behaviours = data.behaviours;
+
+    // Merge mappings
+    for (var mappingName in data.mappings) {
+      var mapping = data.mappings[mappingName];
+      if (!AFRAME.inputMappings[mappingName]) {
+        AFRAME.inputMappings[mappingName] = mapping;
+        continue;
+      }
+
+      for (var controllerName in mapping) {
+        var controllerMapping = mapping[controllerName];
+        if (!AFRAME.inputMappings[mappingName][controllerName]) {
+          AFRAME.inputMappings[mappingName][controllerName] = controllerMapping;
+          continue;
+        }
+
+        for (var eventName in controllerMapping) {
+          AFRAME.inputMappings[mappingName][controllerName][eventName] = controllerMapping[eventName];
+        }
+      }
+    }
+  }
+
+  if (!AFRAME.scenes) {
+    return;
+  }
+
+  for (var i = 0; i < AFRAME.scenes.length; i++) {
+    AFRAME.scenes[i].emit('inputmappingregistered');
+  }
+};
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+AFRAME.inputActivators = {};
+
+AFRAME.registerInputActivator = function (name, definition) {
+  AFRAME.inputActivators[name] = definition;
+};
+
+__webpack_require__(2);
+__webpack_require__(3);
+__webpack_require__(4);
+__webpack_require__(5);
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function LongPress(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventNameDown = button + 'down';
+  this.eventNameUp = button + 'up';
+
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+  this.onButtonUp = this.onButtonUp.bind(this);
+
+  el.addEventListener(this.eventNameDown, this.onButtonDown);
+  el.addEventListener(this.eventNameUp, this.onButtonUp);
+}
+
+LongPress.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var self = this;
+    this.pressTimer = window.setTimeout(function () {
+      self.onActivate(event);
+    }, 1000);
+  },
+  onButtonUp: function onButtonUp(event) {
+    clearTimeout(this.pressTimer);
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventNameDown, this.onButtonDown);
+    this.el.removeEventListener(this.eventNameUp, this.onButtonUp);
+  }
+};
+
+AFRAME.registerInputActivator('longpress', LongPress);
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function DoubleTouch(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventName = button + 'touchstart';
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+
+  el.addEventListener(this.eventName, this.onButtonDown);
+}
+
+DoubleTouch.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var time = performance.now();
+    if (time - this.lastTime < this.timeOut) {
+      this.onActivate(event);
+    } else {
+      this.lastTime = time;
+    }
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventName, this.onButtonDown);
+  }
+};
+
+AFRAME.registerInputActivator('doubletouch', DoubleTouch);
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function DoublePress(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventName = button + 'down';
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+
+  el.addEventListener(this.eventName, this.onButtonDown);
+}
+
+DoublePress.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var time = performance.now();
+    if (time - this.lastTime < this.timeOut) {
+      this.onActivate(event);
+    } else {
+      this.lastTime = time;
+    }
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventName, this.onButtonDown);
+  }
+};
+
+AFRAME.registerInputActivator('doublepress', DoublePress);
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function createSimpleActivator(suffix) {
+  return function (el, button, onActivate) {
+    var eventName = button + suffix;
+
+    el.addEventListener(eventName, onActivate);
+    this.removeListeners = function () {
+      el.removeEventListener(eventName, onActivate);
+    };
+  };
+}
+
+AFRAME.registerInputActivator('down', createSimpleActivator('down'));
+AFRAME.registerInputActivator('up', createSimpleActivator('up'));
+AFRAME.registerInputActivator('touchstart', createSimpleActivator('touchstart'));
+AFRAME.registerInputActivator('touchend', createSimpleActivator('touchend'));
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+AFRAME.inputBehaviours = {};
+
+AFRAME.registerInputBehaviour = function (name, definition) {
+  AFRAME.inputBehaviours[name] = definition;
+};
+
+__webpack_require__(7);
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+function DPad(el, buttonName) {
+  this.buttonName = buttonName;
+  this.onButtonPresed = this.onButtonPresed.bind(this);
+  this.onAxisMove = this.onAxisMove.bind(this);
+  el.addEventListener('trackpaddown', this.onButtonPresed);
+  el.addEventListener('trackpadup', this.onButtonPresed);
+  el.addEventListener('axismove', this.onAxisMove);
+  this.lastPos = [0, 0];
+  this.el = el;
+};
+
+DPad.prototype = {
+  onAxisMove: function onAxisMove(event) {
+    this.lastPos = event.detail.axis;
+  },
+
+  onButtonPresed: function onButtonPresed(event) {
+    var _lastPos = _slicedToArray(this.lastPos, 2),
+        x = _lastPos[0],
+        y = _lastPos[1];
+
+    var state = 'trackpadup'.includes(event.type) ? "up" : "down";
+    var centerZone = 0.5;
+    var direction = state === "up" && this.lastDirection // Always trigger the up event for the last down event
+    ? this.lastDirection : x * x + y * y < centerZone * centerZone // If within center zone angle does not matter
+    ? "center" : angleToDirection(Math.atan2(x, y));
+
+    this.el.emit(this.buttonName + 'dpad' + direction + state);
+
+    if (state === "down") {
+      this.lastDirection = direction;
+    } else {
+      delete this.lastDirection;
+    }
+  },
+
+  removeListeners: function removeListeners() {
+    el.removeEventListener('trackpaddown', this.onButtonPresed);
+    el.removeEventListener('trackpadup', this.onButtonPresed);
+    el.removeEventListener('axismove', this.onAxisMove);
+  }
+};
+
+var angleToDirection = function angleToDirection(angle) {
+  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  if (angle > 0 && angle < 90) {
+    return "down";
+  } else if (angle >= 90 && angle < 180) {
+    return "left";
+  } else if (angle >= 180 && angle < 270) {
+    return "up";
+  } else {
+    return "right";
+  }
+};
+
+AFRAME.registerInputBehaviour('dpad', DPad);
+
 /***/ })
 /******/ ]);

dist/aframe-input-mapping-component.min.js

@@ -1,1 +0,611 @@
-!function(e){function n(t){if(r[t])return r[t].exports;var i=r[t]={exports:{},id:t,loaded:!1};return e[t].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var r={};return n.m=e,n.c=r,n.p="",n(0)}([function(e,n){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.currentInputMapping="default",AFRAME.inputMappings={},AFRAME.inputActions={},AFRAME.registerSystem("input-mapping",{mappings:{},mappingsPerControllers:{},loadedControllers:[],init:function(){var e=this;this.keyboardHandler=this.keyboardHandler.bind(this),this.sceneEl.addEventListener("inputmappingregistered",function(){e.removeControllersListeners();for(var n=0;n<e.loadedControllers.length;n++){var r=e.loadedControllers[n];e.updateControllersListeners(r)}}),this.sceneEl.addEventListener("controllerconnected",function(n){var r=e.findMatchingController(n.detail.target);if(r)return void e.updateControllersListeners(r);var t={name:n.detail.name,hand:n.detail.component.data.hand,element:n.detail.target,handlers:{}};e.loadedControllers.push(t),e.updateControllersListeners(t)}),this.sceneEl.addEventListener("controllerdisconnected",function(n){var r=e.findMatchingController(n.detail.target);r&&e.removeControllerListeners(r)}),this.addKeyboardListeners()},findMatchingController:function(e){var n,r;for(r=0;r<this.loadedControllers.length;r++)if(n=this.loadedControllers[r],n.element===e)return n},addKeyboardListeners:function(){document.addEventListener("keyup",this.keyboardHandler),document.addEventListener("keydown",this.keyboardHandler),document.addEventListener("keypress",this.keyboardHandler)},removeKeyboardListeners:function(){document.removeEventListener("keyup",this.keyboardHandler),document.removeEventListener("keydown",this.keyboardHandler),document.removeEventListener("keypress",this.keyboardHandler)},removeControllerListeners:function(e){for(var n in e.handlers){var r=e.handlers[n];e.element.removeEventListener(n,r)}e.handlers={}},updateControllersListeners:function(e){if(this.removeControllerListeners(e),!AFRAME.inputMappings)return void console.warn("input-mapping: No mappings defined");var n=this.mappingsPerControllers[e.name]={};for(var r in AFRAME.inputMappings){var t=AFRAME.inputMappings[r],i=t.common;i&&this.updateMappingsPerController(i,n,r);var o=t[e.name];o?this.updateMappingsPerController(o,n,r):console.warn("input-mapping: No mappings defined for controller type: ",e.name)}var a=this;for(var s in n){var l=function(e){var r=n[e.type],t=r[AFRAME.currentInputMapping];if(t){if("object"==typeof t){var i=a.findMatchingController(e.detail.target);if(t=t[i.hand],!t)return}e.detail.target.emit(t,e.detail)}};e.element.addEventListener(s,l),e.handlers[s]=l}},keyboardHandler:function(e){var n=AFRAME.inputMappings[AFRAME.currentInputMapping];if(n&&n.keyboard){n=n.keyboard;var r=32===e.keyCode?"Space":e.key,t=(r+"_"+e.type.substr(3)).toLowerCase(),i=n[t];i&&this.sceneEl.emit(i)}},updateMappingsPerController:function(e,n,r){for(var t in e){var i=e[t];n[t]||(n[t]={}),n[t][r]=i}},removeControllersListeners:function(){for(var e=0;e<this.loadedControllers.length;e++){var n=this.loadedControllers[e];this.removeControllerListeners(n)}this.mappingsPerControllers={}}}),AFRAME.registerInputActions=function(e){AFRAME.inputActions=e},AFRAME.registerInputMappings=function(e,n){if(n||0===Object.keys(AFRAME.inputMappings).length)AFRAME.inputMappings=e;else for(var r in e){var t=e[r];if(AFRAME.inputMappings[r])for(var i in t){var o=t[i];if(AFRAME.inputMappings[r][i])for(var a in o)AFRAME.inputMappings[r][i][a]=o[a];else AFRAME.inputMappings[r][i]=o}else AFRAME.inputMappings[r]=t}if(AFRAME.scenes)for(var s=0;s<AFRAME.scenes.length;s++)AFRAME.scenes[s].emit("inputmappingregistered")}}]);
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+/* global AFRAME */
+
+if (typeof AFRAME === 'undefined') {
+  throw new Error('Component attempted to register before AFRAME was available.');
+}
+
+__webpack_require__(1);
+__webpack_require__(6);
+
+AFRAME.currentInputMapping = null;
+AFRAME.inputMappings = {};
+AFRAME.inputActions = {};
+
+var behaviour = {
+  trackpad: 'dpad'
+};
+
+AFRAME.registerSystem('input-mapping', {
+  mappings: {},
+  mappingsPerControllers: {},
+  loadedControllers: [],
+
+  init: function init() {
+    var self = this;
+
+    this.keyboardHandler = this.keyboardHandler.bind(this);
+
+    this.sceneEl.addEventListener('inputmappingregistered', function () {
+      self.removeControllersListeners();
+      for (var i = 0; i < self.loadedControllers.length; i++) {
+        var controllerObj = self.loadedControllers[i];
+        self.updateControllersListeners(controllerObj);
+      }
+    });
+
+    // Controllers
+    this.sceneEl.addEventListener('controllerconnected', function (event) {
+      var matchedController = self.findMatchingController(event.target);
+
+      if (matchedController) {
+        self.updateControllersListeners(matchedController);
+        return;
+      }
+
+      var controllerObj = {
+        name: event.detail.name,
+        hand: event.detail.component.data.hand,
+        element: event.target,
+        handlers: {},
+        activators: {}
+      };
+      self.loadedControllers.push(controllerObj);
+
+      self.updateControllersListeners(controllerObj);
+    });
+
+    this.sceneEl.addEventListener('controllerdisconnected', function (event) {
+      var controller = self.findMatchingController(event.target);
+      if (controller) {
+        self.removeControllerListeners(controller);
+      }
+    });
+
+    // Keyboard
+    this.addKeyboardListeners();
+  },
+
+  findMatchingController: function findMatchingController(matchElement) {
+    var controller;
+    var i;
+    for (i = 0; i < this.loadedControllers.length; i++) {
+      controller = this.loadedControllers[i];
+      if (controller.element === matchElement) {
+        return controller;
+      }
+    }
+    return undefined;
+  },
+
+  addKeyboardListeners: function addKeyboardListeners() {
+    document.addEventListener('keyup', this.keyboardHandler);
+    document.addEventListener('keydown', this.keyboardHandler);
+    document.addEventListener('keypress', this.keyboardHandler);
+  },
+
+  removeKeyboardListeners: function removeKeyboardListeners() {
+    document.removeEventListener('keyup', this.keyboardHandler);
+    document.removeEventListener('keydown', this.keyboardHandler);
+    document.removeEventListener('keypress', this.keyboardHandler);
+  },
+
+  removeControllerListeners: function removeControllerListeners(controller) {
+    // Remove events handlers
+    for (var eventName in controller.handlers) {
+      var handler = controller.handlers[eventName];
+      controller.element.removeEventListener(eventName, handler);
+    }
+    controller.handlers = {};
+
+    // Remove activators
+    for (var activatorName in controller.activators) {
+      var activator = controller.activators[activatorName];
+      activator.removeListeners();
+    }
+
+    controller.activators = {};
+  },
+
+  updateBehaviours: function updateBehaviours(controllerObj) {
+    var controllerBehaviour = AFRAME.inputBehaviours[controllerObj.name];
+    var behavioursPerController = this.mappingsPerControllers[controllerObj.name].behaviours;
+    if (!behavioursPerController) {
+      return;
+    }
+    for (var button in behavioursPerController) {
+      var behaviourName = behavioursPerController[button];
+      var behaviourDefinition = AFRAME.inputBehaviours[behaviourName];
+      if (behaviourDefinition) {
+        var behaviour = new behaviourDefinition(controllerObj.element, button);
+      }
+    }
+  },
+
+  updateControllersListeners: function updateControllersListeners(controllerObj) {
+    this.removeControllerListeners(controllerObj);
+
+    if (!AFRAME.inputMappings) {
+      console.warn('input-mapping: No mappings defined');
+      return;
+    }
+
+    var mappingsPerController = this.mappingsPerControllers[controllerObj.name] = {
+      mappings: {},
+      behaviours: {}
+    };
+
+    // Create the listener for each event
+    for (var mappingName in AFRAME.inputMappings.mappings) {
+      var mapping = AFRAME.inputMappings.mappings[mappingName];
+
+      var commonMappings = mapping.common;
+      if (commonMappings) {
+        this.updateMappingsPerController(commonMappings, mappingsPerController, mappingName);
+      }
+
+      var controllerMappings = mapping[controllerObj.name];
+      if (controllerMappings) {
+        this.updateMappingsPerController(controllerMappings, mappingsPerController, mappingName);
+      } else {
+        console.warn('input-mapping: No mappings defined for controller type: ', controllerObj.name);
+      }
+    }
+
+    // Mapping the behaviours
+    for (var mappingName in AFRAME.inputMappings.behaviours) {
+      var behaviour = AFRAME.inputMappings.behaviours[mappingName];
+
+      var controllerBehaviours = behaviour[controllerObj.name];
+      if (controllerBehaviours) {
+        this.updateBehavioursPerController(controllerBehaviours, mappingsPerController, mappingName);
+      }
+    }
+
+    var self = this;
+
+    var OnActivate = function OnActivate(eventName) {
+      return function (event) {
+        var mapping = mappingsPerController.mappings[eventName];
+        var mappedEvent = mapping[AFRAME.currentInputMapping];
+        if ((typeof mappedEvent === 'undefined' ? 'undefined' : _typeof(mappedEvent)) === 'object') {
+          // Handedness
+          var controller = self.findMatchingController(event.target);
+          mappedEvent = mappedEvent[controller.hand];
+          if (!mappedEvent) {
+            return;
+          }
+        }
+        event.target.emit(mappedEvent, event.detail);
+      };
+    };
+
+    for (var eventName in mappingsPerController.mappings) {
+      // Check for activators
+      if (eventName.indexOf('.') !== -1) {
+        var aux = eventName.split('.');
+        var button = aux[0]; // eg: trackpad
+        var activatorName = aux[1]; // eg: doublepress
+        var onActivate = OnActivate(eventName);
+        var Activator = AFRAME.inputActivators[activatorName];
+        controllerObj.activators[eventName] = new Activator(controllerObj.element, button, onActivate);
+      }
+
+      var onActivate = OnActivate(eventName);
+      controllerObj.element.addEventListener(eventName, onActivate);
+      controllerObj.handlers[eventName] = onActivate;
+    }
+
+    this.updateBehaviours(controllerObj);
+  },
+
+  checkValidInputMapping: function checkValidInputMapping() {
+    if (AFRAME.currentInputMapping === null) {
+      console.warn('input-mapping: No current input mapping defined.');
+    }
+  },
+
+  keyboardHandler: function keyboardHandler(event) {
+    this.checkValidInputMapping();
+    if (AFRAME.inputMappings && AFRAME.inputMappings.mappings[AFRAME.currentInputMapping] && AFRAME.inputMappings.mappings[AFRAME.currentInputMapping].keyboard) {
+      var currentKeyboardMapping = AFRAME.inputMappings.mappings[AFRAME.currentInputMapping].keyboard;
+      var key = event.keyCode === 32 ? "Space" : event.key;
+      var keyEvent = (key + "_" + event.type.substr(3)).toLowerCase();
+      var mapEvent = currentKeyboardMapping[keyEvent];
+      if (mapEvent) {
+        this.sceneEl.emit(mapEvent);
+      }
+    }
+  },
+
+  updateBehavioursPerController: function updateBehavioursPerController(behaviours, mappingsPerController, mappingName) {
+    for (var button in behaviours) {
+      var behaviour = behaviours[button];
+
+      if (!mappingsPerController.behaviours[button]) {
+        mappingsPerController.behaviours[button] = behaviour;
+      }
+    }
+  },
+
+  updateMappingsPerController: function updateMappingsPerController(mappings, mappingsPerController, mappingName) {
+    // Generate a mapping for each controller: (Eg: vive-controls.triggerdown.default.paint)
+    for (var eventName in mappings) {
+      var mapping = mappings[eventName];
+      if (!mappingsPerController.mappings[eventName]) {
+        mappingsPerController.mappings[eventName] = {};
+      }
+      mappingsPerController.mappings[eventName][mappingName] = mapping;
+    }
+  },
+
+  removeControllersListeners: function removeControllersListeners() {
+    for (var i = 0; i < this.loadedControllers.length; i++) {
+      var controller = this.loadedControllers[i];
+      this.removeControllerListeners(controller);
+    }
+    this.mappingsPerControllers = {
+      mappings: {},
+      behaviours: {}
+    };
+  }
+});
+
+AFRAME.registerInputActions = function (inputActions, defaultActionSet) {
+  AFRAME.inputActions = inputActions;
+  if (typeof defaultActionSet !== 'undefined') {
+    if (AFRAME.inputActions[defaultActionSet]) {
+      AFRAME.currentInputMapping = defaultActionSet;
+    } else {
+      console.error('input-mapping: trying to set a non registered action set \'' + defaultActionSet + '\'');
+    }
+  }
+};
+
+AFRAME.registerInputMappings = function (data, override) {
+  if (override || Object.keys(AFRAME.inputMappings).length === 0) {
+    AFRAME.inputMappings = data;
+  } else {
+    // @todo Merge behaviours too
+    AFRAME.inputMappings.behaviours = data.behaviours;
+
+    // Merge mappings
+    for (var mappingName in data.mappings) {
+      var mapping = data.mappings[mappingName];
+      if (!AFRAME.inputMappings[mappingName]) {
+        AFRAME.inputMappings[mappingName] = mapping;
+        continue;
+      }
+
+      for (var controllerName in mapping) {
+        var controllerMapping = mapping[controllerName];
+        if (!AFRAME.inputMappings[mappingName][controllerName]) {
+          AFRAME.inputMappings[mappingName][controllerName] = controllerMapping;
+          continue;
+        }
+
+        for (var eventName in controllerMapping) {
+          AFRAME.inputMappings[mappingName][controllerName][eventName] = controllerMapping[eventName];
+        }
+      }
+    }
+  }
+
+  if (!AFRAME.scenes) {
+    return;
+  }
+
+  for (var i = 0; i < AFRAME.scenes.length; i++) {
+    AFRAME.scenes[i].emit('inputmappingregistered');
+  }
+};
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+AFRAME.inputActivators = {};
+
+AFRAME.registerInputActivator = function (name, definition) {
+  AFRAME.inputActivators[name] = definition;
+};
+
+__webpack_require__(2);
+__webpack_require__(3);
+__webpack_require__(4);
+__webpack_require__(5);
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function LongPress(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventNameDown = button + 'down';
+  this.eventNameUp = button + 'up';
+
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+  this.onButtonUp = this.onButtonUp.bind(this);
+
+  el.addEventListener(this.eventNameDown, this.onButtonDown);
+  el.addEventListener(this.eventNameUp, this.onButtonUp);
+}
+
+LongPress.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var self = this;
+    this.pressTimer = window.setTimeout(function () {
+      self.onActivate(event);
+    }, 1000);
+  },
+  onButtonUp: function onButtonUp(event) {
+    clearTimeout(this.pressTimer);
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventNameDown, this.onButtonDown);
+    this.el.removeEventListener(this.eventNameUp, this.onButtonUp);
+  }
+};
+
+AFRAME.registerInputActivator('longpress', LongPress);
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function DoubleTouch(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventName = button + 'touchstart';
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+
+  el.addEventListener(this.eventName, this.onButtonDown);
+}
+
+DoubleTouch.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var time = performance.now();
+    if (time - this.lastTime < this.timeOut) {
+      this.onActivate(event);
+    } else {
+      this.lastTime = time;
+    }
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventName, this.onButtonDown);
+  }
+};
+
+AFRAME.registerInputActivator('doubletouch', DoubleTouch);
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function DoublePress(el, button, onActivate) {
+  this.lastTime = 0;
+  this.timeOut = 250;
+  this.eventName = button + 'down';
+  this.el = el;
+  this.onActivate = onActivate;
+
+  this.onButtonDown = this.onButtonDown.bind(this);
+
+  el.addEventListener(this.eventName, this.onButtonDown);
+}
+
+DoublePress.prototype = {
+  onButtonDown: function onButtonDown(event) {
+    var time = performance.now();
+    if (time - this.lastTime < this.timeOut) {
+      this.onActivate(event);
+    } else {
+      this.lastTime = time;
+    }
+  },
+  removeListeners: function removeListeners() {
+    this.el.removeEventListener(this.eventName, this.onButtonDown);
+  }
+};
+
+AFRAME.registerInputActivator('doublepress', DoublePress);
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+function createSimpleActivator(suffix) {
+  return function (el, button, onActivate) {
+    var eventName = button + suffix;
+
+    el.addEventListener(eventName, onActivate);
+    this.removeListeners = function () {
+      el.removeEventListener(eventName, onActivate);
+    };
+  };
+}
+
+AFRAME.registerInputActivator('down', createSimpleActivator('down'));
+AFRAME.registerInputActivator('up', createSimpleActivator('up'));
+AFRAME.registerInputActivator('touchstart', createSimpleActivator('touchstart'));
+AFRAME.registerInputActivator('touchend', createSimpleActivator('touchend'));
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+AFRAME.inputBehaviours = {};
+
+AFRAME.registerInputBehaviour = function (name, definition) {
+  AFRAME.inputBehaviours[name] = definition;
+};
+
+__webpack_require__(7);
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+function DPad(el, buttonName) {
+  this.buttonName = buttonName;
+  this.onButtonPresed = this.onButtonPresed.bind(this);
+  this.onAxisMove = this.onAxisMove.bind(this);
+  el.addEventListener('trackpaddown', this.onButtonPresed);
+  el.addEventListener('trackpadup', this.onButtonPresed);
+  el.addEventListener('axismove', this.onAxisMove);
+  this.lastPos = [0, 0];
+  this.el = el;
+};
+
+DPad.prototype = {
+  onAxisMove: function onAxisMove(event) {
+    this.lastPos = event.detail.axis;
+  },
+
+  onButtonPresed: function onButtonPresed(event) {
+    var _lastPos = _slicedToArray(this.lastPos, 2),
+        x = _lastPos[0],
+        y = _lastPos[1];
+
+    var state = 'trackpadup'.includes(event.type) ? "up" : "down";
+    var centerZone = 0.5;
+    var direction = state === "up" && this.lastDirection // Always trigger the up event for the last down event
+    ? this.lastDirection : x * x + y * y < centerZone * centerZone // If within center zone angle does not matter
+    ? "center" : angleToDirection(Math.atan2(x, y));
+
+    this.el.emit(this.buttonName + 'dpad' + direction + state);
+
+    if (state === "down") {
+      this.lastDirection = direction;
+    } else {
+      delete this.lastDirection;
+    }
+  },
+
+  removeListeners: function removeListeners() {
+    el.removeEventListener('trackpaddown', this.onButtonPresed);
+    el.removeEventListener('trackpadup', this.onButtonPresed);
+    el.removeEventListener('axismove', this.onAxisMove);
+  }
+};
+
+var angleToDirection = function angleToDirection(angle) {
+  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  if (angle > 0 && angle < 90) {
+    return "down";
+  } else if (angle >= 90 && angle < 180) {
+    return "left";
+  } else if (angle >= 180 && angle < 270) {
+    return "up";
+  } else {
+    return "right";
+  }
+};
+
+AFRAME.registerInputBehaviour('dpad', DPad);
+
+/***/ })
+/******/ ]);

package.json

 {
   "name": "aframe-input-mapping-component",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A Input Mapping component for A-Frame.",
-  "main": "index.js",
+  "main": "src/index.js",
   "unpkg": "dist/aframe-input-mapping-component.min.js",
   "scripts": {
-    "dev": "budo index.js:dist/aframe-input-mapping-component.min.js --port 7000 --live --open",
-    "dist": "webpack index.js dist/aframe-input-mapping-component.js && webpack -p index.js dist/aframe-input-mapping-component.min.js",
+    "dev": "budo src/index.js:dist/aframe-input-mapping-component.min.js --port 7000 --live --open",
+    "build": "cross-env webpack --progress --colors",
+    "dist": "npm run dist:max && npm run dist:min",
+    "dist:max": "cross-env AFRAME_DIST=true npm run build",
+    "dist:min": "cross-env NODE_ENV=production AFRAME_DIST=true npm run build",
     "lint": "semistandard -v | snazzy",
@@ -39,25 +42,30 @@ "prepublish": "npm run dist",
     "aframe": "*",
-    "browserify": "^13.0.0",
-    "budo": "^8.2.2",
-    "chai": "^3.4.1",
-    "chai-shallow-deep-equal": "^1.3.0",
-    "ghpages": "^0.0.8",
-    "karma": "^0.13.15",
-    "karma-browserify": "^4.4.2",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "browserify": "^15.0.0",
+    "budo": "^10.0.4",
+    "chai": "^4.1.2",
+    "chai-shallow-deep-equal": "^1.4.6",
+    "cross-env": "^5.1.3",
+    "ghpages": "^0.0.10",
+    "karma": "^2.0.0",
+    "karma-browserify": "^5.1.3",
     "karma-chai-shallow-deep-equal": "0.0.4",
-    "karma-chrome-launcher": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-env-preprocessor": "^0.1.1",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-mocha": "^0.2.1",
-    "karma-mocha-reporter": "^1.1.3",
-    "karma-sinon-chai": "^1.1.0",
-    "mocha": "^2.3.4",
-    "randomcolor": "^0.4.4",
-    "semistandard": "^8.0.0",
-    "shelljs": "^0.7.0",
-    "sinon": "^1.17.5",
-    "sinon-chai": "^2.8.0",
-    "shx": "^0.1.1",
-    "snazzy": "^4.0.0",
-    "webpack": "^1.13.0"
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sinon-chai": "^1.3.3",
+    "mocha": "^4.1.0",
+    "randomcolor": "^0.5.3",
+    "semistandard": "^12.0.0",
+    "shelljs": "^0.7.8",
+    "shx": "^0.2.2",
+    "sinon": "^4.1.4",
+    "sinon-chai": "^2.14.0",
+    "snazzy": "^7.0.0",
+    "uglifyjs-webpack-plugin": "^1.1.6",
+    "webpack": "^3.10.0"
   },
@@ -64,0 +72,0 @@ "semistandard": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207577

increased by57.75%

Number of package files

21

increased by110%

Lines of code

2425

increased by533.16%

Worsened metrics

Dev dependency count

29

increased by20.83%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes