'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