123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 |
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
- var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- import Hooks from './../../pluginHooks';
- import { getWindowScrollTop, hasClass, getWindowScrollLeft } from './../../helpers/dom/element';
- import { isMobileBrowser } from './../../helpers/browser';
- import BasePlugin from './../_base';
- import EventManager from './../../eventManager';
- import { registerPlugin } from './../../plugins';
- import { CellCoords } from './../../3rdparty/walkontable/src';
- /**
- * @private
- * @plugin MultipleSelectionHandles
- */
- var MultipleSelectionHandles = function (_BasePlugin) {
- _inherits(MultipleSelectionHandles, _BasePlugin);
- /**
- * @param {Object} hotInstance
- */
- function MultipleSelectionHandles(hotInstance) {
- _classCallCheck(this, MultipleSelectionHandles);
- /**
- * @type {Array}
- */
- var _this2 = _possibleConstructorReturn(this, (MultipleSelectionHandles.__proto__ || Object.getPrototypeOf(MultipleSelectionHandles)).call(this, hotInstance));
- _this2.dragged = [];
- /**
- * Instance of EventManager.
- *
- * @type {EventManager}
- */
- _this2.eventManager = null;
- /**
- * @type {null}
- */
- _this2.lastSetCell = null;
- return _this2;
- }
- /**
- * Check if the plugin is enabled in the handsontable settings.
- *
- * @returns {Boolean}
- */
- _createClass(MultipleSelectionHandles, [{
- key: 'isEnabled',
- value: function isEnabled() {
- return isMobileBrowser();
- }
- /**
- * Enable plugin for this Handsontable instance.
- */
- }, {
- key: 'enablePlugin',
- value: function enablePlugin() {
- if (this.enabled) {
- return;
- }
- if (!this.eventManager) {
- this.eventManager = new EventManager(this);
- }
- this.registerListeners();
- _get(MultipleSelectionHandles.prototype.__proto__ || Object.getPrototypeOf(MultipleSelectionHandles.prototype), 'enablePlugin', this).call(this);
- }
- /**
- * Bind the touch events
- * @private
- */
- }, {
- key: 'registerListeners',
- value: function registerListeners() {
- var _this = this;
- function removeFromDragged(query) {
- if (_this.dragged.length === 1) {
- // clear array
- _this.dragged.splice(0, _this.dragged.length);
- return true;
- }
- var 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(this.hot.rootElement, 'touchstart', function (event) {
- var selectedRange = void 0;
- if (hasClass(event.target, 'topLeftSelectionHandle-HitArea')) {
- selectedRange = _this.hot.getSelectedRange();
- _this.dragged.push('topLeft');
- _this.touchStartRange = {
- width: selectedRange.getWidth(),
- height: selectedRange.getHeight(),
- direction: selectedRange.getDirection()
- };
- event.preventDefault();
- return false;
- } else if (hasClass(event.target, 'bottomRightSelectionHandle-HitArea')) {
- selectedRange = _this.hot.getSelectedRange();
- _this.dragged.push('bottomRight');
- _this.touchStartRange = {
- width: selectedRange.getWidth(),
- height: selectedRange.getHeight(),
- direction: selectedRange.getDirection()
- };
- event.preventDefault();
- return false;
- }
- });
- this.eventManager.addEventListener(this.hot.rootElement, 'touchend', function (event) {
- if (hasClass(event.target, 'topLeftSelectionHandle-HitArea')) {
- removeFromDragged.call(_this, 'topLeft');
- _this.touchStartRange = void 0;
- event.preventDefault();
- return false;
- } else if (hasClass(event.target, 'bottomRightSelectionHandle-HitArea')) {
- removeFromDragged.call(_this, 'bottomRight');
- _this.touchStartRange = void 0;
- event.preventDefault();
- return false;
- }
- });
- this.eventManager.addEventListener(this.hot.rootElement, 'touchmove', function (event) {
- var scrollTop = getWindowScrollTop(),
- scrollLeft = getWindowScrollLeft(),
- endTarget = void 0,
- targetCoords = void 0,
- selectedRange = void 0,
- rangeWidth = void 0,
- rangeHeight = void 0,
- rangeDirection = void 0,
- newRangeCoords = void 0;
- if (_this.dragged.length === 0) {
- return;
- }
- endTarget = document.elementFromPoint(event.touches[0].screenX - scrollLeft, event.touches[0].screenY - scrollTop);
- 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.getSelectedRange();
- 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();
- });
- }
- }, {
- key: 'getCurrentRangeCoords',
- value: function getCurrentRangeCoords(selectedRange, currentTouch, touchStartDirection, currentDirection, draggedHandle) {
- var topLeftCorner = selectedRange.getTopLeftCorner(),
- bottomRightCorner = selectedRange.getBottomRightCorner(),
- bottomLeftCorner = selectedRange.getBottomLeftCorner(),
- topRightCorner = selectedRange.getTopRightCorner();
- var newCoords = {
- start: null,
- end: null
- };
- switch (touchStartDirection) {
- case 'NE-SW':
- switch (currentDirection) {
- case 'NE-SW':
- case 'NW-SE':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: new CellCoords(currentTouch.row, selectedRange.highlight.col),
- end: new CellCoords(bottomLeftCorner.row, currentTouch.col)
- };
- } else {
- newCoords = {
- start: new CellCoords(selectedRange.highlight.row, currentTouch.col),
- end: new CellCoords(currentTouch.row, topLeftCorner.col)
- };
- }
- break;
- case 'SE-NW':
- if (draggedHandle == 'bottomRight') {
- newCoords = {
- start: new CellCoords(bottomRightCorner.row, currentTouch.col),
- end: new CellCoords(currentTouch.row, topLeftCorner.col)
- };
- }
- break;
- default:
- break;
- }
- break;
- case 'NW-SE':
- switch (currentDirection) {
- case 'NE-SW':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: currentTouch,
- end: bottomLeftCorner
- };
- } else {
- newCoords.end = currentTouch;
- }
- break;
- case 'NW-SE':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: currentTouch,
- end: bottomRightCorner
- };
- } else {
- newCoords.end = currentTouch;
- }
- break;
- case 'SE-NW':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: currentTouch,
- end: topLeftCorner
- };
- } else {
- newCoords.end = currentTouch;
- }
- break;
- case 'SW-NE':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: currentTouch,
- end: topRightCorner
- };
- } else {
- newCoords.end = currentTouch;
- }
- break;
- default:
- break;
- }
- break;
- case 'SW-NE':
- switch (currentDirection) {
- case 'NW-SE':
- if (draggedHandle == 'bottomRight') {
- newCoords = {
- start: new CellCoords(currentTouch.row, topLeftCorner.col),
- end: new CellCoords(bottomLeftCorner.row, currentTouch.col)
- };
- } else {
- newCoords = {
- start: new CellCoords(topLeftCorner.row, currentTouch.col),
- end: new CellCoords(currentTouch.row, bottomRightCorner.col)
- };
- }
- break;
- // case 'NE-SW':
- //
- // break;
- case 'SW-NE':
- if (draggedHandle == 'topLeft') {
- newCoords = {
- start: new CellCoords(selectedRange.highlight.row, currentTouch.col),
- end: new CellCoords(currentTouch.row, bottomRightCorner.col)
- };
- } else {
- newCoords = {
- start: new CellCoords(currentTouch.row, topLeftCorner.col),
- end: new CellCoords(topLeftCorner.row, currentTouch.col)
- };
- }
- break;
- case 'SE-NW':
- if (draggedHandle == 'bottomRight') {
- newCoords = {
- start: new CellCoords(currentTouch.row, topRightCorner.col),
- end: new CellCoords(topLeftCorner.row, currentTouch.col)
- };
- } else if (draggedHandle == 'topLeft') {
- newCoords = {
- start: bottomLeftCorner,
- end: currentTouch
- };
- }
- break;
- default:
- break;
- }
- break;
- case 'SE-NW':
- switch (currentDirection) {
- case 'NW-SE':
- case 'NE-SW':
- case 'SW-NE':
- if (draggedHandle == 'topLeft') {
- newCoords.end = currentTouch;
- }
- break;
- case 'SE-NW':
- if (draggedHandle == 'topLeft') {
- newCoords.end = currentTouch;
- } else {
- newCoords = {
- start: currentTouch,
- end: topLeftCorner
- };
- }
- break;
- default:
- break;
- }
- break;
- default:
- break;
- }
- return newCoords;
- }
- /**
- * Check if user is currently dragging the handle.
- *
- * @returns {boolean} Dragging state
- */
- }, {
- key: 'isDragged',
- value: function isDragged() {
- return this.dragged.length > 0;
- }
- }]);
- return MultipleSelectionHandles;
- }(BasePlugin);
- registerPlugin('multipleSelectionHandles', MultipleSelectionHandles);
- export default MultipleSelectionHandles;
|