analytics/webcontent/bi/js/gemini/dashboard/layout/authoring/views/ScalingAbsolute.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2013, 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./Absolute', 'jquery', 'underscore', '../../../util/PxPercentUtil', '../../../../app/util/DeepClone'], function (BaseLayout, $, _, PxPercentUtil) {

	var PageLayout = null;
	var SQUARES_INFO = 60;
	var SQUARES = 100;

	PageLayout = BaseLayout.extend({

		init: function init(options) {
			PageLayout.inherited('init', this, arguments);

			this.model.on('insert:item', this._onNewItem, this);

			if (this.model.items) {
				for (var i = 0; i < this.model.items.length; i++) {
					this._setChildMonitors(this.model.items[i]);
				}
			}

			//This is temporary until the property to change the aspect ratio gets up in. Then I'll use that to create the svg.
			this.specializeConsumeView(['setPreferredLocation']);
			this.dashboardApi = options.dashboardApi;
		},

		/**
   * Called when the view is destroyed
   */
		destroy: function destroy() {
			this.model.off('insert:item', this._onNewItem, this);
			this.$el.find('.relativeLayoutGrid').remove();
			if (this.model.items) {
				for (var i = 0; i < this.model.items.length; i++) {
					this._setChildMonitors(this.model.items[i], 'off');
				}
			}

			PageLayout.inherited('destroy', this, arguments);
		},

		/**
   * Set or Remove the event listeners to monitor when the layout model changes.
   * @param childModel
   * @param {String} sOff (Optional) Set to 'off' to remove listeners.
   */
		_setChildMonitors: function _setChildMonitors(childModel, sOff) {
			var sOnOrOff = sOff === 'off' ? 'off' : 'on';
			childModel[sOnOrOff]('change:style', this._onChildModelStyleChange, this);
			childModel[sOnOrOff]('prechange:style', this._onChildModelStylePreChange, this);
			childModel[sOnOrOff]('change:parent', this._onChildModelUpdateParent, this);
		},

		/**
   * Called when a new layout model is added to this layout.
   *
   */
		_onNewItem: function _onNewItem(payload) {
			var model = this.model.findModel(payload.value.parameter.model.id);
			this._setChildMonitors(model);

			this.updateStyleToPercent(model, payload.data);
		},

		/**
   * Called when the parent of a child model has changed.
   */
		_onChildModelUpdateParent: function _onChildModelUpdateParent(payload) {
			if (payload.value.parameter.parentId !== this.model.id) {
				var model = this.layoutController.topLayoutModel.findModel(payload.modelId);
				this._setChildMonitors(model, 'off');
			}
		},

		/**
   * Called when the layout style has changed
   */
		_onChildModelStyleChange: function _onChildModelStyleChange(payload) {
			// No need to do anything if the operation was caused by the 'updateStyleToPercent' method.
			// This means we already converted the pixels to percent
			if (payload.data && payload.data.hint !== 'updateStyleToPercent' && payload.sender !== 'UndoRedoController') {
				var model = this.layoutController.topLayoutModel.findModel(payload.modelId);
				this.updateStyleToPercent(model, payload.data);
			}
		},

		_onChildModelStylePreChange: function _onChildModelStylePreChange(payload) {
			if (payload.sender !== 'UndoRedoController') {
				var style = payload.value && payload.value.style;
				this._changePixelModelToPercent(style);
			}
		},

		/**
   * Modify the 'top,left,width, height' property in style object to use percent
   * @param {*} style
   */
		_changePixelModelToPercent: function _changePixelModelToPercent(style) {
			var $referenceView = this.$el;

			// this view could be hidden, so find a view that isn't hidden.
			if (!$referenceView.is(':visible')) {
				$referenceView = $(this.layoutController.getLastVisiblePage());
			}
			var referenceViewSize = { width: $referenceView.width(), height: $referenceView.height() };
			PxPercentUtil.changePixelPropertiesToPercent(style, referenceViewSize);
		},

		/**
   * Update the dimensions/positions in the model from pixel to percent
   *
   */
		updateStyleToPercent: function updateStyleToPercent(model, payloadData) {
			var _this = this;

			// TODO This should be changed to the way it is done in WA
			// https://github.ibm.com/WatsonAnalytics/wa-cardpage-client/pull/1760/files
			// insert:item needs to happen after add:item so currently a timeout is being used
			//  Both events are triggered from add() of LayoutModel.js

			// We set the style once the layout is ready so that any pending layout view updates for the original change are complete.
			// We will only update the child model if it belongs to this layout
			return this.layoutController.layoutReady(model.id).then(function () {
				return new Promise(function (resolve, reject) {
					try {
						if (model.getParent() && model.getParent().id === _this.model.id) {

							if (model.style) {
								var newModelStyle = _.extend({}, model.style);
								_this._changePixelModelToPercent(newModelStyle);

								// Add a hint to the data that the operation is caused by updating the style to percent
								// This is to avoid doing an extra call to 'updateStyleToPercent' as a result of a layout style change
								var data = _.deepClone(payloadData);
								data.hint = 'updateStyleToPercent';
								data.triggerResize = false;
								model.updateModel({
									updateArray: [{
										style: newModelStyle,
										id: model.id
									}]
								}, null, data);
							}
						}
						resolve();
					} catch (error) {
						reject(error);
					}
				});
			});
		},

		_moveDrop: function _moveDrop(dragObject) {
			var nodeInfo = dragObject.data.nodeInfoList[0];
			var nodeModel = nodeInfo.node._layout.model;
			var currentParent = nodeModel.getParent();
			PageLayout.inherited('_moveDrop', this, arguments);

			if (currentParent.id !== this.model.id) {
				// Monitor the child for changes to get a chance to convert pixels to percent
				var childModel = this.model.findModel(nodeModel.id);
				this._setChildMonitors(childModel);
				currentParent.deselect(nodeModel.id);
			}
		},

		getMinimumTop: function getMinimumTop() {
			var parentMinimum = this.consumeView.parentLayout ? this.consumeView.parentLayout.getMinimumTop() : 0;
			var position = this.$el.position();
			return -1 * (position.top + this.$el.parent().scrollTop()) + parentMinimum;
		},

		getMinimumLeft: function getMinimumLeft() {
			var parentMinimum = this.consumeView.parentLayout ? this.consumeView.parentLayout.getMinimumLeft() : 0;
			var position = this.$el.position();
			return -1 * (position.left + this.$el.parent().scrollLeft()) + parentMinimum;
		},

		getScrollAreaNode: function getScrollAreaNode() {
			// the scaling layout does not provide a scrollable area. We use the parent view as scrollable area.
			return this.consumeView.parentLayout.$el;
		},

		renderGrid: function renderGrid() {
			var showGridProp = this.model.getValueFromSelfOrParent('showGrid');
			var showGrid = showGridProp === undefined ? false : showGridProp;
			var layoutPositioning = this.model.getValueFromSelfOrParent('layoutPositioning');
			if (showGrid && layoutPositioning === 'relative') {
				if (this.$el.hasClass('gridCapable')) {
					this.$el.find('.relativeLayoutGrid').remove();
					this.$el.prepend(this._createGridSvg(this.$el[0].id, this.$el.hasClass('infoGraphic')));
				}
			} else {
				this.$el.find('.relativeLayoutGrid').remove();
			}
		},

		_createGridSvg: function _createGridSvg(id, isInfographic) {
			var layoutPositioning = this.model.getValueFromSelfOrParent('layoutPositioning');
			var pageSize = this.getPhysicalPageSize(layoutPositioning, id);
			var gridSize = 0;
			if (isInfographic) {
				gridSize = pageSize.width / SQUARES_INFO;
			} else {
				gridSize = pageSize.width / SQUARES;
			}
			return '<div class="relativeLayoutGrid">\
				<svg viewBox="0 0 ' + pageSize.width + ' ' + pageSize.height + '" xmlns="http://www.w3.org/2000/svg">\
					<defs>\
						<pattern id="grid' + id + '" width="' + gridSize + '" height="' + gridSize + '" patternUnits="userSpaceOnUse">\
							<path d="M ' + gridSize + ' 0 L 0 0 0 ' + gridSize + '" fill="none" stroke-width="0.5"/>\
						</pattern>\
					</defs>\
					<rect width="100%" height="100%" fill="url(#grid' + id + ')" />\
				</svg>\
			</div>';
		}
	});

	return PageLayout;
});
//# sourceMappingURL=ScalingAbsolute.js.map