| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368 |
- 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
- */
- class MultipleSelectionHandles extends BasePlugin {
- /**
- * @param {Object} hotInstance
- */
- constructor(hotInstance) {
- super(hotInstance);
- /**
- * @type {Array}
- */
- this.dragged = [];
- /**
- * Instance of EventManager.
- *
- * @type {EventManager}
- */
- this.eventManager = null;
- /**
- * @type {null}
- */
- this.lastSetCell = null;
- }
- /**
- * Check if the plugin is enabled in the handsontable settings.
- *
- * @returns {Boolean}
- */
- isEnabled() {
- return isMobileBrowser();
- }
- /**
- * Enable plugin for this Handsontable instance.
- */
- enablePlugin() {
- if (this.enabled) {
- return;
- }
- if (!this.eventManager) {
- this.eventManager = new EventManager(this);
- }
- this.registerListeners();
- super.enablePlugin();
- }
- /**
- * Bind the touch events
- * @private
- */
- 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', (event) => {
- let selectedRange;
- 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', (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', (event) => {
- let scrollTop = getWindowScrollTop(),
- scrollLeft = getWindowScrollLeft(),
- endTarget,
- targetCoords,
- selectedRange,
- rangeWidth,
- rangeHeight,
- rangeDirection,
- newRangeCoords;
- 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();
- });
- }
- 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
- */
- isDragged() {
- return this.dragged.length > 0;
- }
- }
- registerPlugin('multipleSelectionHandles', MultipleSelectionHandles);
- export default MultipleSelectionHandles;
|