UNPKG

awv3

Version:
217 lines (183 loc) 6.73 kB
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose"; import _extends from "@babel/runtime/helpers/extends"; var _templateObject = /*#__PURE__*/ _taggedTemplateLiteralLoose(["View undefined"], ["View undefined"]); import { errUndefined } from './helpers'; import Events from './events'; function createStates(dom, events, listener, options) { if (options === void 0) { options = undefined; } return events.reduce(function (prev, name) { var _extends2; dom.addEventListener(name, listener, options); return _extends({}, prev, (_extends2 = {}, _extends2[name] = { type: name, fulfilled: false, detach: function detach() { return dom.removeEventListener(name, listener); } }, _extends2)); }, {}); } var Dom = /*#__PURE__*/ function () { function Dom(view, handlers) { if (view === void 0) { view = errUndefined(_templateObject); } if (handlers === void 0) { handlers = {}; } this.view = view; this.canvas = view.canvas; this.renderer = view.renderer; this.dom = view.dom; this.recent = []; this.enabled = true; this.debounce = true; // Mix in event generic handler Events.mixin(this, handlers); // Add internal dom event handlers this.eventHandler = this.handleEvent.bind(this); this.eventHandlerDefault = this.handleEventDefault.bind(this); var passiveStates = createStates(this.dom, ['mousedown', 'mouseup', 'mousemove', 'mouseout', 'dblclick'], this.eventHandler, { passive: true }); var standardStates = createStates(this.dom, ['touchstart', 'touchmove', 'touchend', 'wheel'], this.eventHandlerDefault, { passive: false }); var globalStates = createStates(document, ['keydown', 'keyup'], this.eventHandler, { passive: true }); this.states = _extends({}, passiveStates, standardStates, globalStates); // Common last-state-data can be accessed here this.mouse = {}; this.wheel = {}; this.touch = {}; this.keys = {}; // Array of changes to be called on next update this.changes = []; } // This seems to be buggy, doesn't detach mouse event handlers for some weird reason var _proto = Dom.prototype; _proto.detach = function detach() { for (var key in this.states) { this.states[key].detach(); } }; _proto.update = function update() { if (this.changes.length > 0) { for (var _iterator = this.changes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var _change = _ref; this.emit(_change.type, _change); _change.fulfilled = false; } this.changes = []; } }; _proto.handleEventDefault = function handleEventDefault(event) { event.preventDefault(); this.handleEvent(event); }; _proto.handleEvent = function handleEvent(event) { if (!this.enabled) return; var type = event.type, pageX = event.pageX, pageY = event.pageY, clientX = event.clientX, clientY = event.clientY, button = event.button, which = event.which, deltaMode = event.deltaMode, deltaY = event.deltaY; var state = this.states[type]; if (this.debounce && state.fulfilled) return; // Wheel state.delta = deltaY * (deltaMode ? -1 : -0.03); // Generic state.fulfilled = true; state.pageX = pageX; state.pageY = pageY; state.clientX = clientX; state.clientY = clientY; state.offsetX = pageX - this.renderer.offset.left - this.view.left; state.offsetY = pageY - this.renderer.offset.top - this.view.top; // Touch state.touches = []; if (!!event.touches) { for (var _iterator2 = [].slice.call(event.touches), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var _item = _ref2; pageX = _item.pageX; pageY = _item.pageY; clientX = _item.clientX; clientY = _item.clientY; state.touches.push({ clientX: clientX, clientY: clientY, offsetX: pageX - this.renderer.offset.left - this.view.left, offsetY: pageY - this.renderer.offset.top - this.view.top, pageX: pageX, pageY: pageY }); } state.touch = true; state.multitouch = state.touches.length > 1; if (state.touches.length > 0) { state.offsetX = this.touch.offsetX = state.touches[0].offsetX; state.offsetY = this.touch.offsetX = state.touches[0].offsetY; } else { state.offsetX = this.touch.offsetX; state.offsetY = this.touch.offsetX; } } state.button = button; state.which = which; state.event = event; this.changes.push(state); var keyToName = { 16: "shift", 17: "control", 18: "alt" }; if (type === 'mousedown') { this.mouse.down = true; this.mouse.button = button; document.addEventListener('mouseup', this.eventHandlerDefault, false); document.addEventListener('mousemove', this.eventHandlerDefault, false); } else if (type === 'mouseup') { this.mouse.down = false; this.mouse.button = button; document.removeEventListener('mouseup', this.eventHandlerDefault); document.removeEventListener('mousemove', this.eventHandlerDefault); } else if (type === 'touchstart') { this.touch.down = true; document.addEventListener('touchend', this.eventHandlerDefault, false); document.addEventListener('touchmove', this.eventHandlerDefault, false); } else if (type === 'touchend') { this.touch.down = false; document.removeEventListener('touchend', this.eventHandlerDefault); document.removeEventListener('touchmove', this.eventHandlerDefault); } else if (type === 'keydown') { var name = keyToName[which]; if (name) this.keys[name] = true; } else if (type === 'keyup') { var _name = keyToName[which]; if (_name) this.keys[_name] = false; } this.recent[state.type] = state; if (!this.debounce) this.update(); }; return Dom; }(); export { Dom as default };