'use strict'; /** * Licensed Materials - Property of IBM * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2018, 2020 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ define(['./BasePropertyAction', 'jquery', 'underscore', '../../../../lib/@waca/dashboard-common/dist/ui/interaction/Utils', '../../../../app/nls/StringResources'], function (BaseClass, $, _, utils, stringResources) { var Align = null; Align = BaseClass.extend({ init: function init(controller) { this.controller = controller; Align.inherited('init', this, arguments); this.selectedNodes = []; }, /** * Called by the interaction manager when there is a new selection * * @param nodes */ newSelection: function newSelection(nodes) { this.selectedNodes = nodes; }, getProperties: function getProperties() { var icons = this.dashboardApi.getFeature('Icons'); var isReadOnly = this.selectedNodes.length <= 1; return [{ 'type': 'IconPicker', 'label': stringResources.get('toolbarActionAlign'), 'name': 'alignWidget', 'id': 'alignWidget', 'tabName': stringResources.get('tabName_general'), 'sectionName': stringResources.get('sectionName_layout'), 'sectionOpened': true, 'readOnly': isReadOnly, 'items': [{ 'name': 'left', 'label': stringResources.get('alignWidgetLeft'), 'value': icons.getIcon('align-left').id }, { 'name': 'center', 'label': stringResources.get('alignWidgetCenter'), 'value': icons.getIcon('align-horizontally').id }, { 'name': 'right', 'label': stringResources.get('alignWidgetRight'), 'value': icons.getIcon('align-right').id }, { 'name': 'top', 'label': stringResources.get('alignWidgetTop'), 'value': icons.getIcon('align-top').id }, { 'name': 'middle', 'label': stringResources.get('alignWidgetMiddle'), 'value': icons.getIcon('align-vertically').id }, { 'name': 'bottom', 'label': stringResources.get('alignWidgetBottom'), 'value': icons.getIcon('align-bottom').id }], onChange: this.onAlignIconClick.bind(this), order: 10 }]; }, onAlignIconClick: function onAlignIconClick(propertyId, selection) { if (selection && selection.length && selection[0].name && this.selectedNodes.length > 1) { var position = selection[0].name; this.applyAlignment(position); } }, 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; }, applyAlignment: function applyAlignment(position) { var alignmentFns = { left: this.getLeftAlignmentStyle, center: this.getCenterAlignmentStyle, right: this.getRightAlignmentStyle, top: this.getTopAlignmentStyle, middle: this.getMiddleAlignmentStyle, bottom: this.getBottomAlignmentStyle }; var widgetBoxes = []; var widgetBox = this.getWidgetBoxes(this.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 < this.selectedNodes.length; i++) { var _widgetBox = this.getWidgetBoxes(this.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 modelInfoArray = []; for (var _i = 0; _i < this.selectedNodes.length; _i++) { var updatedStyle = alignmentFns[position](bounds, widgetBoxes[_i], this.selectedNodes[_i]); if (updatedStyle) { modelInfoArray.push({ style: updatedStyle, id: this.selectedNodes[_i]._layout.model.id }); } } if (modelInfoArray.length) { this.updateModel(modelInfoArray); this.refreshProperties(); } }, 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' }; }, 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' }; }, 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' }; }, 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' }; }, 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' }; }, 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 Align; }); //# sourceMappingURL=AlignAction.js.map