UNPKG

handsontable

Version:

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

335 lines (329 loc) • 11 kB
"use strict"; exports.__esModule = true; require("core-js/modules/es.error.cause.js"); require("core-js/modules/es.array.push.js"); var _element = require("../../helpers/dom/element"); var _browser = require("../../helpers/browser"); var _base = require("../base"); function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } const PLUGIN_KEY = exports.PLUGIN_KEY = 'multipleSelectionHandles'; const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 160; /** * @private * @plugin MultipleSelectionHandles * @class MultipleSelectionHandles */ class MultipleSelectionHandles extends _base.BasePlugin { constructor() { super(...arguments); /** * @type {Array} */ _defineProperty(this, "dragged", []); /** * @type {null} */ _defineProperty(this, "lastSetCell", null); } static get PLUGIN_KEY() { return PLUGIN_KEY; } static get PLUGIN_PRIORITY() { return PLUGIN_PRIORITY; } /** * Check if the plugin is enabled in the handsontable settings. * * @returns {boolean} */ isEnabled() { return (0, _browser.isMobileBrowser)(); } /** * Enable plugin for this Handsontable instance. */ enablePlugin() { if (this.enabled) { return; } this.registerListeners(); super.enablePlugin(); } /** * Bind the touch events. * * @private */ registerListeners() { const _this = this; const { rootElement } = this.hot; /** * @private * @param {string} query Query for the position. * @returns {boolean} */ function removeFromDragged(query) { if (_this.dragged.length === 1) { // clear array _this.dragged.splice(0, _this.dragged.length); return true; } const entryPosition = _this.dragged.indexOf(query); if (entryPosition === -1) { return false; } else if (entryPosition === 0) { _this.dragged = _this.dragged.slice(0, 1); } else if (entryPosition === 1) { _this.dragged = _this.dragged.slice(-1); } } this.eventManager.addEventListener(rootElement, 'touchstart', event => { let selectedRange; if ((0, _element.hasClass)(event.target, 'topSelectionHandle-HitArea')) { selectedRange = _this.hot.getSelectedRangeActive(); _this.dragged.push('top'); _this.touchStartRange = { width: selectedRange.getWidth(), height: selectedRange.getHeight(), direction: selectedRange.getDirection() }; event.preventDefault(); return false; } else if ((0, _element.hasClass)(event.target, 'bottomSelectionHandle-HitArea')) { selectedRange = _this.hot.getSelectedRangeActive(); _this.dragged.push('bottom'); _this.touchStartRange = { width: selectedRange.getWidth(), height: selectedRange.getHeight(), direction: selectedRange.getDirection() }; event.preventDefault(); return false; } }); this.eventManager.addEventListener(rootElement, 'touchend', event => { if ((0, _element.hasClass)(event.target, 'topSelectionHandle-HitArea')) { removeFromDragged.call(_this, 'top'); _this.touchStartRange = undefined; event.preventDefault(); return false; } else if ((0, _element.hasClass)(event.target, 'bottomSelectionHandle-HitArea')) { removeFromDragged.call(_this, 'bottom'); _this.touchStartRange = undefined; event.preventDefault(); return false; } }); this.eventManager.addEventListener(rootElement, 'touchmove', event => { const { rootDocument } = this.hot; let targetCoords; let selectedRange; let rangeWidth; let rangeHeight; let rangeDirection; let newRangeCoords; if (_this.dragged.length === 0) { return; } const endTarget = rootDocument.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY); if (!endTarget || endTarget === _this.lastSetCell) { return; } if (endTarget.nodeName === 'TD' || endTarget.nodeName === 'TH') { targetCoords = _this.hot.getCoords(endTarget); if (targetCoords.col === -1) { targetCoords.col = 0; } selectedRange = _this.hot.getSelectedRangeActive(); rangeWidth = selectedRange.getWidth(); rangeHeight = selectedRange.getHeight(); rangeDirection = selectedRange.getDirection(); if (rangeWidth === 1 && rangeHeight === 1) { _this.hot.selection.setRangeEnd(targetCoords); } newRangeCoords = _this.getCurrentRangeCoords(selectedRange, targetCoords, _this.touchStartRange.direction, rangeDirection, _this.dragged[0]); if (newRangeCoords.start !== null) { _this.hot.selection.setRangeStart(newRangeCoords.start); } _this.hot.selection.setRangeEnd(newRangeCoords.end); _this.lastSetCell = endTarget; } event.preventDefault(); }); } getCurrentRangeCoords(selectedRange, currentTouch, touchStartDirection, currentDirection, draggedHandle) { const topStartCorner = selectedRange.getTopStartCorner(); const bottomEndCorner = selectedRange.getBottomEndCorner(); const bottomStartCorner = selectedRange.getBottomStartCorner(); const topEndCorner = selectedRange.getTopEndCorner(); let newCoords = { start: null, end: null }; switch (touchStartDirection) { case 'NE-SW': switch (currentDirection) { case 'NE-SW': case 'NW-SE': if (draggedHandle === 'top') { newCoords = { start: this.hot._createCellCoords(currentTouch.row, selectedRange.highlight.col), end: this.hot._createCellCoords(bottomStartCorner.row, currentTouch.col) }; } else { newCoords = { start: this.hot._createCellCoords(selectedRange.highlight.row, currentTouch.col), end: this.hot._createCellCoords(currentTouch.row, topStartCorner.col) }; } break; case 'SE-NW': if (draggedHandle === 'bottom') { newCoords = { start: this.hot._createCellCoords(bottomEndCorner.row, currentTouch.col), end: this.hot._createCellCoords(currentTouch.row, topStartCorner.col) }; } break; default: break; } break; case 'NW-SE': switch (currentDirection) { case 'NE-SW': if (draggedHandle === 'top') { newCoords = { start: currentTouch, end: bottomStartCorner }; } else { newCoords.end = currentTouch; } break; case 'NW-SE': if (draggedHandle === 'top') { newCoords = { start: currentTouch, end: bottomEndCorner }; } else { newCoords.end = currentTouch; } break; case 'SE-NW': if (draggedHandle === 'top') { newCoords = { start: currentTouch, end: topStartCorner }; } else { newCoords.end = currentTouch; } break; case 'SW-NE': if (draggedHandle === 'top') { newCoords = { start: currentTouch, end: topEndCorner }; } else { newCoords.end = currentTouch; } break; default: break; } break; case 'SW-NE': switch (currentDirection) { case 'NW-SE': if (draggedHandle === 'bottom') { newCoords = { start: this.hot._createCellCoords(currentTouch.row, topStartCorner.col), end: this.hot._createCellCoords(bottomStartCorner.row, currentTouch.col) }; } else { newCoords = { start: this.hot._createCellCoords(topStartCorner.row, currentTouch.col), end: this.hot._createCellCoords(currentTouch.row, bottomEndCorner.col) }; } break; // case 'NE-SW': // // break; case 'SW-NE': if (draggedHandle === 'top') { newCoords = { start: this.hot._createCellCoords(selectedRange.highlight.row, currentTouch.col), end: this.hot._createCellCoords(currentTouch.row, bottomEndCorner.col) }; } else { newCoords = { start: this.hot._createCellCoords(currentTouch.row, topStartCorner.col), end: this.hot._createCellCoords(topStartCorner.row, currentTouch.col) }; } break; case 'SE-NW': if (draggedHandle === 'bottom') { newCoords = { start: this.hot._createCellCoords(currentTouch.row, topEndCorner.col), end: this.hot._createCellCoords(topStartCorner.row, currentTouch.col) }; } else if (draggedHandle === 'top') { newCoords = { start: bottomStartCorner, end: currentTouch }; } break; default: break; } break; case 'SE-NW': switch (currentDirection) { case 'NW-SE': case 'NE-SW': case 'SW-NE': if (draggedHandle === 'top') { newCoords.end = currentTouch; } break; case 'SE-NW': if (draggedHandle === 'top') { newCoords.end = currentTouch; } else { newCoords = { start: currentTouch, end: topStartCorner }; } break; default: break; } break; default: break; } return newCoords; } /** * Check if user is currently dragging the handle. * * @returns {boolean} Dragging state. */ isDragged() { return this.dragged.length > 0; } } exports.MultipleSelectionHandles = MultipleSelectionHandles;