analytics/webcontent/bi/js/gemini/features/dashboard/actions/alignAction/impl/AlignAction.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: BI Cloud (C) Copyright IBM Corp. 2019, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['../../../../../lib/@waca/dashboard-common/dist/core/APIFactory', '../AlignAPI', '../../../../../lib/@waca/dashboard-common/dist/ui/interaction/Utils', '../../../../../app/nls/StringResources', 'jquery', '../../../../../lib/@waca/dashboard-common/dist/api/ContentActionsProviderAPI'], function (APIFactory, AlignAPI, utils, stringResources, $, ContentActionsProviderAPI) {
	var AlignAction = function () {
		function AlignAction(_ref) {
			var features = _ref.features;

			_classCallCheck(this, AlignAction);

			if (features) {
				this.dashboard = features.API;
				features.ContentActions.registerProvider('align', this.getAPI());
				this._icons = features.Icons;
			}
		}

		AlignAction.prototype.getAPI = function getAPI() {
			if (!this.api) {
				this.api = APIFactory.createAPI(this, [AlignAPI, ContentActionsProviderAPI]);
			}
			return this.api;
		};

		AlignAction.prototype.getLifeCycleHandlers = function getLifeCycleHandlers() {
			return [{
				name: 'post:dashboard.initialize',
				action: this.postDashboardInitialize.bind(this)
			}];
		};

		AlignAction.prototype.postDashboardInitialize = function postDashboardInitialize() {
			if (this.dashboard) {
				this.controller = this.dashboard.getFeature('InteractionController.internal');
			}
			return Promise.resolve();
		};

		AlignAction.prototype.destroy = function destroy() {
			this.dashboard = null;
			this.controller = null;
		};

		AlignAction.prototype.getNodes = function getNodes(idList) {
			return utils.getNodes(this.controller, idList);
		};

		AlignAction.prototype._isEnabled = function _isEnabled(idList) {
			return idList.length > 1 && this.dashboard.getMode() === this.dashboard.MODES.EDIT;
		};

		AlignAction.prototype.getContentActionList = function getContentActionList(idList) {
			if (this._isEnabled(idList)) {
				return [{
					name: 'align',
					label: stringResources.get('toolbarActionAlign'),
					icon: this._icons.getIcon('align-horizontally').id,
					type: 'NextView',
					viewModule: 'dashboard-core/js/features/dashboard/actions/alignAction/impl/AlignDialog',
					viewOptions: {
						height: 290,
						width: 110, // those are hints only; for the placement of the toolbar.
						actions: {
							apply: this.applyAlignment.bind(this, idList)
						}
					}
				}];
			}
			return [];
		};

		AlignAction.prototype.applyAction = function applyAction(selection) {
			if (selection && selection.length && selection[0].name) {
				var position = selection[0].name;
				var idList = selection[0].layoutIds;
				this.applyAlignment(idList, position);
			}
		};

		AlignAction.prototype.getWidgetBoxes = function getWidgetBoxes(node) {
			var widgetPos = utils.position(node);
			var widgetSize = utils.widgetSize(node);
			var result = {
				boundingBox: $(node).position(),
				widgetBox: {
					top: widgetPos.top,
					left: widgetPos.left,
					width: widgetSize.width,
					height: widgetSize.height
				}
			};
			var boundingRect = node.getBoundingClientRect();
			result.boundingBox.width = boundingRect.width;
			result.boundingBox.height = boundingRect.height;
			return result;
		};

		// TODO this function is called multiple times with same args when click align action
		// we need a better way to avoid this, because we only need to do once when click align action


		AlignAction.prototype.applyAlignment = function applyAlignment(idList, position) {
			var _this = this;

			var alignmentFns = {
				left: this.getLeftAlignmentStyle,
				center: this.getCenterAlignmentStyle,
				right: this.getRightAlignmentStyle,
				top: this.getTopAlignmentStyle,
				middle: this.getMiddleAlignmentStyle,
				bottom: this.getBottomAlignmentStyle
			};
			var widgetBoxes = [];
			var selectedNodes = this.getNodes(idList);
			var widgetBox = this.getWidgetBoxes(selectedNodes[0]);
			widgetBoxes.push(widgetBox);
			var bounds = {
				top: widgetBox.boundingBox.top,
				left: widgetBox.boundingBox.left,
				bottom: widgetBox.boundingBox.top + widgetBox.boundingBox.height,
				right: widgetBox.boundingBox.left + widgetBox.boundingBox.width
			};
			for (var i = 1; i < selectedNodes.length; i++) {
				var _widgetBox = this.getWidgetBoxes(selectedNodes[i]);
				widgetBoxes.push(_widgetBox);
				bounds.top = Math.min(bounds.top, _widgetBox.boundingBox.top);
				bounds.left = Math.min(bounds.left, _widgetBox.boundingBox.left);
				bounds.bottom = Math.max(bounds.bottom, _widgetBox.boundingBox.top + _widgetBox.boundingBox.height);
				bounds.right = Math.max(bounds.right, _widgetBox.boundingBox.left + _widgetBox.boundingBox.width);
			}

			var positionUpdateArray = [];
			for (var _i = 0; _i < selectedNodes.length; _i++) {
				var updatedStyle = alignmentFns[position](bounds, widgetBoxes[_i], selectedNodes[_i]);
				if (updatedStyle) {
					positionUpdateArray.push({
						style: updatedStyle,
						id: selectedNodes[_i]._layout.model.id
					});
				}
			}
			if (positionUpdateArray.length) {
				var transactionApi = this.dashboard.getFeature('Transaction');
				var transactionToken = transactionApi.startTransaction();
				positionUpdateArray.forEach(function (positionUpdate) {
					var content = _this.dashboard.getCanvas().getContent(positionUpdate.id);
					Object.keys(positionUpdate.style).forEach(function (propertyName) {
						content.setPropertyValue(propertyName, positionUpdate.style[propertyName], transactionToken);
					});
				});
				transactionApi.endTransaction(transactionToken);
			}
		};

		AlignAction.prototype.getLeftAlignmentStyle = function getLeftAlignmentStyle(bounds, widgetBox, node) {
			var leftPos = bounds.left;
			if (Math.round(widgetBox.boundingBox.left) !== Math.round(widgetBox.widgetBox.left)) {
				var offset = widgetBox.boundingBox.left - widgetBox.widgetBox.left;
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		};

		AlignAction.prototype.getCenterAlignmentStyle = function getCenterAlignmentStyle(bounds, widgetBox, node) {
			var centerLine = bounds.left + (bounds.right - bounds.left) / 2;
			var leftPos = centerLine - widgetBox.widgetBox.width / 2;
			if (Math.round(widgetBox.boundingBox.left) !== Math.round(widgetBox.widgetBox.left)) {
				var offset = widgetBox.boundingBox.left + widgetBox.boundingBox.width / 2 - (widgetBox.widgetBox.left + widgetBox.widgetBox.width / 2);
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		};

		AlignAction.prototype.getRightAlignmentStyle = function getRightAlignmentStyle(bounds, widgetBox, node) {
			var leftPos = bounds.right - widgetBox.widgetBox.width;
			if (Math.round(widgetBox.boundingBox.width) !== Math.round(widgetBox.widgetBox.width)) {
				var offset = widgetBox.boundingBox.left + widgetBox.boundingBox.width - (widgetBox.widgetBox.left + widgetBox.widgetBox.width);
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		};

		AlignAction.prototype.getTopAlignmentStyle = function getTopAlignmentStyle(bounds, widgetBox, node) {
			var topPos = bounds.top;
			if (Math.round(widgetBox.boundingBox.top) !== Math.round(widgetBox.widgetBox.top)) {
				var offset = widgetBox.boundingBox.top - widgetBox.widgetBox.top;
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		};

		AlignAction.prototype.getMiddleAlignmentStyle = function getMiddleAlignmentStyle(bounds, widgetBox, node) {
			var middleLine = bounds.top + (bounds.bottom - bounds.top) / 2;
			var topPos = middleLine - widgetBox.widgetBox.height / 2;
			if (Math.round(widgetBox.boundingBox.top) !== Math.round(widgetBox.widgetBox.top)) {
				var offset = widgetBox.boundingBox.top + widgetBox.boundingBox.height / 2 - (widgetBox.widgetBox.top + widgetBox.widgetBox.height / 2);
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		};

		AlignAction.prototype.getBottomAlignmentStyle = function getBottomAlignmentStyle(bounds, widgetBox, node) {
			var topPos = bounds.bottom - widgetBox.widgetBox.height;
			if (Math.round(widgetBox.boundingBox.height) !== Math.round(widgetBox.widgetBox.height)) {
				var offset = widgetBox.boundingBox.top + widgetBox.boundingBox.height - (widgetBox.widgetBox.top + widgetBox.widgetBox.height);
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		};

		return AlignAction;
	}();

	return AlignAction;
});
//# sourceMappingURL=AlignAction.js.map