analytics/webcontent/bi/js/dashboard-analytics/visualizations/renderer/grid/GridDnDManager.js

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Dashboard
 * (C) Copyright IBM Corp. 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *
 * This manager is responsible for registering and handing drop events in the crosstab.
 */
define(['underscore', '../../../dataSources/utils/ShapingConstants'], function (_, ShapingConstants) {

	var GRID_ROW_EDGE = 'row';
	var GRID_COLUMN_EDGE = 'column';
	var GRID_VALUES_EDGE = 'values';

	return function () {
		function GridDnDManager() {
			var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			_classCallCheck(this, GridDnDManager);

			this.grid = options.grid;
			this.dashboardApi = options.dashboardApi;
			this.content = options.content;
			this.gridEdgeMappedToId = options.gridEdgeMappedToId;
			this.visualization = this.content.getFeature('Visualization');
			this.visDnDUtils = this.content.getFeature('VisDnD.utils');
		}

		/**
   *
   * @param {React Component} component
   */


		GridDnDManager.prototype.registerElement = function registerElement(component, domNode) {
			var DndManager = this.dashboardApi.getFeature('DashboardDnd.internal');
			DndManager.addDropTarget(domNode, {
				accepts: this.accepts.bind(this, component, domNode),
				onDrop: this.onDrop.bind(this, component),
				onDragEnter: this.onDragEnter.bind(this),
				onDragMove: this.onDragMove.bind(this, component),
				onDragLeave: this.onDragLeave.bind(this, component)
			});
		};

		GridDnDManager.prototype.deregisterElement = function deregisterElement(domNode) {
			var DndManager = this.dashboardApi.getFeature('DashboardDnd.internal');
			DndManager.removeDropTarget(domNode);
		};

		//DND callbacks


		GridDnDManager.prototype.accepts = function accepts(component, targetNode, dragObject) {
			if (!component || !component.props) {
				return false;
			}

			var acceptsOptions = { dropTarget: ShapingConstants.DROP_TARGET_OPTIONS.SLOT };
			if (targetNode) {
				acceptsOptions.targetNode = targetNode;
			}

			var content = this._getContent();
			var visualization = content.getFeature('Visualization');
			var dropAction = void 0;
			var expandCollapseFeatureFlag = !this.dashboardApi.getGlassCoreSvc('.FeatureChecker').checkValue('dashboard', 'expandCollapse', 'disabled');
			if (expandCollapseFeatureFlag && visualization.getType() === 'Crosstab') {
				dropAction = targetNode && this._getDropAction(component, dragObject, targetNode);
				if (dropAction) {
					dropAction.actionSpec.slot = this._findSlot(dropAction.actionSpec.gridEdge);
					acceptsOptions.dropAction = dropAction;
				}
			}
			var accept = this.visDnDUtils.accepts(dragObject, acceptsOptions);

			// check if the current activate dropZone is visible, if not visible, we are not going to accept it
			if (accept) {
				var gridDom = this.grid.$el[0];
				var gridDomRect = gridDom && gridDom.getBoundingClientRect();
				var componentDom = component.ref.current;
				var componentDomRect = componentDom && componentDom.getBoundingClientRect();
				// allow tolerance for 3px regarding to vertical scroll bar and the padding on the right
				var tolerance = 3;
				if (!gridDomRect || !componentDomRect || parseInt(gridDomRect.bottom) < parseInt(componentDomRect.bottom) || parseInt(gridDomRect.right) < parseInt(componentDomRect.right) && Math.abs(componentDomRect.right - gridDomRect.right) > tolerance) {
					accept = false;
				}
			}

			return accept;
		};

		GridDnDManager.prototype.onDragEnter = function onDragEnter() {};

		GridDnDManager.prototype._findSlot = function _findSlot(gridEdge) {
			var _this = this;

			var slots = this.visualization.getSlots();
			var slot = _.find(slots.getSlotList(), function (slot) {
				switch (gridEdge) {
					case GRID_ROW_EDGE:
						return slot.getId() === _this.gridEdgeMappedToId.row;
					case GRID_COLUMN_EDGE:
						return slot.getId() === _this.gridEdgeMappedToId.column;
					case GRID_VALUES_EDGE:
						return slot.getId() === _this.gridEdgeMappedToId.values;
				}
			});
			return slot;
		};

		GridDnDManager.prototype._insertDataItems = function _insertDataItems(_ref) {
			var gridEdge = _ref.gridEdge,
			    droppedColumns = _ref.droppedColumns,
			    position = _ref.position;

			var slot = this._findSlot(gridEdge);
			if (slot) {
				this.visDnDUtils.mapColumns(slot.getId(), droppedColumns, { position: position, bReplace: false });
			}
		};

		GridDnDManager.prototype._replaceDataItems = function _replaceDataItems(_ref2) {
			var gridEdge = _ref2.gridEdge,
			    droppedColumns = _ref2.droppedColumns,
			    position = _ref2.position;

			var slot = this._findSlot(gridEdge);
			if (slot) {
				var slotDataItemList = slot.getDataItemList();
				if (_.isEmpty(slotDataItemList)) {
					return;
				}

				this.visDnDUtils.mapColumns(slot.getId(), droppedColumns, { position: position, bReplace: true });
			}
		};

		GridDnDManager.prototype._findValuesSlotPosition = function _findValuesSlotPosition(component) {
			var slot = this._findSlot(GRID_VALUES_EDGE);
			var index = -1;
			if (slot) {
				var dataItemList = slot.getDataItemList();
				if (!_.isEmpty(dataItemList)) {
					index = dataItemList.findIndex(function (dataItem) {
						return dataItem.getLabel() === component.props.useValue;
					});
				}
			}
			return index;
		};

		GridDnDManager.prototype._getDropAction = function _getDropAction(component, dragObject, node) {
			var droppedColumns = dragObject.data.columns;
			var metadataColumns = _.pluck(droppedColumns, 'metadataColumn');

			if (metadataColumns.length > 0) {
				var _getDropZoneInfo2 = this._getDropZoneInfo(dragObject, node, component),
				    action = _getDropZoneInfo2.action,
				    idx = _getDropZoneInfo2.idx;

				switch (action) {
					case 'insertLeft':
						return this._getInsertLeftAction(component, droppedColumns, idx);
					case 'insertRight':
						return this._getInsertRightAction(component, droppedColumns, idx);
					case 'replaceRow':
						return this._getReplaceRowAction(component, droppedColumns, idx);
					case 'insertAbove':
						return this._getInsertAboveAction(droppedColumns, idx);
					case 'insertBelow':
						return this._getInsertBelowAction(droppedColumns, idx);
					case 'replaceCol':
						return this._getReplaceColumnAction(component, droppedColumns, idx);
				}
			}
		};

		GridDnDManager.prototype.onDrop = function onDrop(component, dragObject, node) {
			var dropAction = this._getDropAction(component, dragObject, node);
			this.grid.hideDropZones();
			return dropAction.action(dropAction.actionSpec);
		};

		GridDnDManager.prototype.onDragMove = function onDragMove(component, dragObject, node) {
			var _getDropZoneInfo3 = this._getDropZoneInfo(dragObject, node, component),
			    action = _getDropZoneInfo3.action,
			    idx = _getDropZoneInfo3.idx;

			switch (action) {
				case 'insertLeft':
					return this.grid.showLeftDropZone(idx);
				case 'insertRight':
					return this.grid.showRightDropZone(idx);
				case 'replaceRow':
					{
						if (component.props.isMeasure && component.props.cellType !== 'corner') {
							return this.grid.showReplaceDropZone(component.props.row, 'row', component.props.useValue);
						} else {
							return this.grid.showReplaceDropZone(idx, 'col');
						}
					}
				case 'insertAbove':
					return this.grid.showTopDropZone(idx);
				case 'insertBelow':
					return this.grid.showBottomDropZone(idx);
				case 'replaceCol':
					return this.grid.showReplaceDropZone(idx, 'row');
			}
		};

		GridDnDManager.prototype.onDragLeave = function onDragLeave() {
			this.grid.hideDropZones();
		};

		GridDnDManager.prototype._getInsertLeftAction = function _getInsertLeftAction(component, droppedColumns, position) {
			var actionSpec = void 0;
			if (component.props.cellType === 'corner') {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: 0
				};
			} else if (component.props.isMeasure) {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: this._findValuesSlotPosition(component)
				};
			} else {
				actionSpec = {
					gridEdge: GRID_ROW_EDGE,
					droppedColumns: droppedColumns,
					position: parseInt(position)
				};
			}
			actionSpec.replace = false;
			return {
				actionSpec: actionSpec,
				action: this._insertDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getInsertRightAction = function _getInsertRightAction(component, droppedColumns, position) {
			var actionSpec = void 0;
			if (component.props.cellType === 'corner') {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: -1
				};
			} else if (component.props.isMeasure) {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: this._findValuesSlotPosition(component) + 1
				};
			} else {
				actionSpec = {
					gridEdge: GRID_ROW_EDGE,
					droppedColumns: droppedColumns,
					position: parseInt(position) + 1
				};
			}
			actionSpec.replace = false;
			return {
				actionSpec: actionSpec,
				action: this._insertDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getReplaceRowAction = function _getReplaceRowAction(component, droppedColumns, position) {
			var actionSpec = void 0;
			if (component.props.cellType === 'corner') {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: 0
				};
			} else if (component.props.isMeasure) {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: this._findValuesSlotPosition(component)
				};
			} else {
				actionSpec = {
					gridEdge: GRID_ROW_EDGE,
					droppedColumns: droppedColumns,
					position: parseInt(position)
				};
			}
			actionSpec.replace = true;
			return {
				actionSpec: actionSpec,
				action: this._replaceDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getInsertAboveAction = function _getInsertAboveAction(droppedColumns, position) {
			var actionSpec = {
				gridEdge: GRID_COLUMN_EDGE,
				droppedColumns: droppedColumns,
				position: parseInt(position),
				replace: false
			};
			return {
				actionSpec: actionSpec,
				action: this._insertDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getInsertBelowAction = function _getInsertBelowAction(droppedColumns, position) {
			var actionSpec = {
				gridEdge: GRID_COLUMN_EDGE,
				droppedColumns: droppedColumns,
				position: parseInt(position) + 1
			};
			actionSpec.replace = false;
			return {
				actionSpec: actionSpec,
				action: this._insertDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getReplaceColumnAction = function _getReplaceColumnAction(component, droppedColumns, position) {
			var actionSpec = void 0;
			if (component.props.isMeasure) {
				actionSpec = {
					gridEdge: GRID_VALUES_EDGE,
					droppedColumns: droppedColumns,
					position: this._findValuesSlotPosition(component)
				};
			} else {
				actionSpec = {
					gridEdge: GRID_COLUMN_EDGE,
					droppedColumns: droppedColumns,
					position: parseInt(position)
				};
			}
			actionSpec.replace = true;
			return {
				actionSpec: actionSpec,
				action: this._replaceDataItems.bind(this)
			};
		};

		GridDnDManager.prototype._getDropZoneInfo = function _getDropZoneInfo(dragObject, node, component) {
			if (component.props.cellType === 'column') {
				return this._getColumnDropZoneInfo(dragObject, node, component);
			} else if (component.props.cellType === 'row') {
				return this._getRowDropZoneInfo(dragObject, node, component);
			} else if (component.props.cellType === 'corner') {
				return this._getCornerDropZoneInfo(dragObject, node, component);
			}
		};

		GridDnDManager.prototype._getColumnDropZoneInfo = function _getColumnDropZoneInfo(dragObject, node) {
			var clientRect = node.getBoundingClientRect();
			var col = node && node.getAttribute('col');
			var diff = dragObject.position.x - clientRect.left;
			var percent = 100 * (diff / clientRect.width);
			if (percent < 33) {
				return { action: 'insertLeft', idx: col };
			} else if (percent > 66) {
				return { action: 'insertRight', idx: col };
			} else {
				return { action: 'replaceRow', idx: col };
			}
		};

		GridDnDManager.prototype._getRowDropZoneInfo = function _getRowDropZoneInfo(dragObject, node, component) {
			var clientRect = node.getBoundingClientRect();
			if (component.props.isMeasure) {
				return this._getColumnDropZoneInfo(dragObject, node);
			} else {
				var row = node && node.getAttribute('row');
				var diff = dragObject.position.y - clientRect.top;
				var percent = 100 * (diff / clientRect.height);
				if (percent < 33) {
					return { action: 'insertAbove', idx: row };
				} else if (percent > 66) {
					return { action: 'insertBelow', idx: row };
				} else {
					return { action: 'replaceCol', idx: row };
				}
			}
		};

		GridDnDManager.prototype._getCornerDropZoneInfo = function _getCornerDropZoneInfo(dragObject, node) {
			var clientRect = node.getBoundingClientRect();
			var diff = dragObject.position.x - clientRect.left;
			var percent = 100 * (diff / clientRect.width);
			if (percent < 33) {
				return { action: 'insertLeft', idx: 'corner' };
			} else if (percent > 66) {
				return { action: 'insertRight', idx: 'corner' };
			} else {
				return { action: 'replaceRow', idx: 'corner' };
			}
		};

		GridDnDManager.prototype._getContent = function _getContent() {
			if (!this.content) {
				var view = this.grid.gridView || this.grid.crosstabView;
				this.content = this.dashboardApi.getCanvas() && this.dashboardApi.getCanvas().getContent(view.ownerWidget.getId());
			}
			return this.content;
		};

		return GridDnDManager;
	}();
});
//# sourceMappingURL=GridDnDManager.js.map