'use strict'; /** * Licensed Materials - Property of IBM * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2018 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */ define(['jquery', 'underscore', '../../../../lib/@waca/core-client/js/core-client/ui/core/Class'], function ($, _, Class) { var Guidlines = Class.extend({ THRESHOLD: 5, /** * Find widgets and create guidelines for them, to align with top,middle,bottom,left,center,right. * @param nPage {domNode} Container of the widgets to create guidelines for. * @param dragObject {object} A drag object used by move and resize. Essentially, we only needs the IDs of the widgets being resized/moved, so they are excluded from the guidelines */ setup: function setup(nPage, dragObject, snapGuidelines) { this._aGuidelines = []; this.snapGuidelines = snapGuidelines; this.domNode = nPage; var $page = $(this.domNode); _.each($page.children('.widget,.pagegroup,.pagetemplateDropZone'), function (n) { if (dragObject && dragObject.dragBox && dragObject.dragBox.ids.indexOf(n.id) > -1) { return; } var $n = $(n), rect = $n.position(); var leftOffset = 0, topOffset = 0, height, width; var isDropZone = $n.is('.pagetemplateDropZone'); height = $n.outerHeight(); width = $n.outerWidth(); var left = Math.round(rect.left + nPage.scrollLeft + leftOffset), right = Math.round(left + width); var top = Math.round(rect.top + nPage.scrollTop + topOffset), bottom = Math.round(top + height); this._addGuideline('x', left, top, bottom, isDropZone ? 'left' : null); this._addGuideline('x', right, top, bottom, isDropZone ? 'right' : null); this._addGuideline('x', (left + right) / 2, top, bottom); this._addGuideline('y', top, left, right, isDropZone ? 'top' : null); this._addGuideline('y', bottom, left, right, isDropZone ? 'bottom' : null); this._addGuideline('y', (top + bottom) / 2, left, right); }.bind(this)); this._addGuideline('x', nPage.scrollWidth / 2); this._addGuideline('y', nPage.scrollHeight / 2); }, /** * Create a guideline object. Adds it to the internal array. A guideline object the position (x/y) and the dom node to represent it (axis_x/axis_y). * @param {string} sAxis Can be 'x' or 'y'. Sets the orientation of the guideline. * @param {int} iPos The x or y coordinates where to create a guideline. * @param {int} topOrLeft (Optional) Top or Left position of the marker, depending if sAxis is x or y. * @param {int} bottomOrRight (Optional) Bottom or Right position of the marker, depending if sAxis is x or y. * @param {string} restrictedTo Can be 'top', 'bottom', 'left' or 'right'. It specifies if the guideline must only be used with a specific edge */ _addGuideline: function _addGuideline(sAxis, iPos, topOrLeft, bottomOrRight, restrictedTo) { var $page = $(this.domNode), h = this.domNode.scrollHeight - 10 + 'px', w = this.domNode.scrollWidth - 10 + 'px'; var cssPosition = sAxis === 'x' ? { left: iPos + 'px', height: h } : { top: iPos + 'px', width: w }; var $marker1 = $('
'); var $marker2 = $('
'); if (topOrLeft !== undefined) { $marker1.css(sAxis === 'x' ? 'top' : 'left', topOrLeft - 5 + 'px'); } if (bottomOrRight !== undefined) { var css = { bottom: 'auto', right: 'auto' }; css[sAxis === 'x' ? 'top' : 'left'] = bottomOrRight - 5 + 'px'; $marker2.css(css); } var nAxis = $('
').css(cssPosition).append($marker1).append($marker2); var g = {}; if (restrictedTo) { g.restricted = restrictedTo; } g[sAxis] = iPos; g['axis_' + sAxis] = nAxis; this._aGuidelines.push(g); $page.append(nAxis); }, calculateSnapPoint: function calculateSnapPoint(dragEdge, axis) { var guidelineDistance = null; var guideLine = {}; if (this._aGuidelines && this.snapGuidelines) { this._aGuidelines.forEach(function (guideline) { if (!isNaN(Math.abs(dragEdge - guideline[axis])) && Math.abs(dragEdge - guideline[axis]) < this.THRESHOLD) { if (guidelineDistance === null || guidelineDistance > Math.abs(dragEdge - guideline[axis])) { guidelineDistance = dragEdge - guideline[axis]; guideLine = guideline; } } else if (guideline[axis]) { if (Math.abs(dragEdge - guideline[axis]) < this.THRESHOLD) { guidelineDistance = dragEdge - guideline[axis]; guideLine = guideline; } } }.bind(this)); } var showGuideline = function showGuideline() { guideLine['axis_' + axis].show(); }; return { 'distance': guidelineDistance, 'show': showGuideline }; }, /** * Returns current guidelines. If undefined, an empty array. * @returns {Array} */ getAll: function getAll() { return this._aGuidelines || []; }, clear: function clear() { $(this.domNode).children('.guideline').remove(); this._aGuidelines = null; this.domNode = null; } }); return Guidlines; }); //# sourceMappingURL=LayoutGuidelines.js.map