| // Copyright 2016 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| cr.exportPath('options'); |
| |
| /** |
| * Enumeration of display layout. These values must match the C++ values in |
| * ash::DisplayController. |
| * @enum {number} |
| */ |
| options.DisplayLayoutType = { |
| TOP: 0, |
| RIGHT: 1, |
| BOTTOM: 2, |
| LEFT: 3 |
| }; |
| |
| /** |
| * @typedef {{ |
| * left: number, |
| * top: number, |
| * width: number, |
| * height: number |
| * }} |
| */ |
| options.DisplayBounds; |
| |
| /** |
| * @typedef {{ |
| * x: number, |
| * y: number |
| * }} |
| */ |
| options.DisplayPosition; |
| |
| cr.define('options', function() { |
| 'use strict'; |
| |
| /** |
| * Snaps the region [point, width] to [basePoint, baseWidth] if |
| * the [point, width] is close enough to the base's edge. |
| * @param {number} point The starting point of the region. |
| * @param {number} width The width of the region. |
| * @param {number} basePoint The starting point of the base region. |
| * @param {number} baseWidth The width of the base region. |
| * @param {number=} opt_snapDistance Provide to override the snap distance. |
| * 0 means snap at any distance. |
| * @return {number} The moved point. Returns the point itself if it doesn't |
| * need to snap to the edge. |
| * @private |
| */ |
| function snapToEdge_(point, width, basePoint, baseWidth, opt_snapDistance) { |
| // If the edge of the region is smaller than this, it will snap to the |
| // base's edge. |
| /** @const */ var SNAP_DISTANCE_PX = 16; |
| var snapDist; |
| if (opt_snapDistance !== undefined) |
| snapDist = opt_snapDistance; |
| else |
| snapDist = SNAP_DISTANCE_PX; |
| |
| var startDiff = Math.abs(point - basePoint); |
| var endDiff = Math.abs(point + width - (basePoint + baseWidth)); |
| // Prefer the closer one if both edges are close enough. |
| if ((!snapDist || startDiff < snapDist) && startDiff < endDiff) |
| return basePoint; |
| else if (!snapDist || endDiff < snapDist) |
| return basePoint + baseWidth - width; |
| |
| return point; |
| } |
| |
| /** |
| * @constructor |
| * @param {string} id |
| * @param {string} name |
| * @param {!options.DisplayBounds} bounds |
| * @param {!options.DisplayLayoutType|undefined} layoutType |
| * @param {number|undefined} offset |
| * @param {string|undefined} parentId |
| * @return {!options.DisplayLayout} |
| */ |
| function DisplayLayout(id, name, bounds, layoutType, offset, parentId) { |
| this.bounds = bounds; |
| this.id = id; |
| if (layoutType != undefined) |
| this.layoutType = layoutType; |
| this.name = name; |
| if (offset != undefined) |
| this.offset = offset; |
| this.originalDivOffsets = {x: 0, y: 0}; |
| if (parentId != undefined) |
| this.parentId = parentId; |
| } |
| |
| // Class describing a display layout. |
| DisplayLayout.prototype = { |
| /** @type {?options.DisplayBounds} */ |
| bounds: null, |
| |
| /** @type {?HTMLElement} */ |
| div: null, |
| |
| /** @type {string} */ |
| id: '', |
| |
| /** @type {options.DisplayLayoutType} */ |
| layoutType: options.DisplayLayoutType.TOP, |
| |
| /** @type {string} */ |
| name: '', |
| |
| /** @type {number} */ |
| offset: 0, |
| |
| /** @type {?options.DisplayPosition} */ |
| originalDivOffsets: null, |
| |
| /** @type {string} */ |
| parentId: '', |
| |
| /** |
| * Calculates the div layout for displayLayout. |
| * @param {?options.DisplayPosition} offset |
| * @param {number} scale |
| * @param {?options.DisplayLayout} parentLayout |
| */ |
| layoutDivFromBounds: function(offset, scale, parentLayout) { |
| assert(offset); |
| var div = this.div; |
| var bounds = this.bounds; |
| |
| div.style.width = Math.floor(bounds.width * scale) + 'px'; |
| div.style.height = Math.floor(bounds.height * scale) + 'px'; |
| |
| if (!parentLayout) { |
| div.style.left = Math.trunc(bounds.left * scale) + offset.x + 'px'; |
| div.style.top = Math.trunc(bounds.top * scale) + offset.y + 'px'; |
| return; |
| } |
| |
| var parentDiv = parentLayout.div; |
| switch (this.layoutType) { |
| case options.DisplayLayoutType.TOP: |
| div.style.left = Math.trunc(bounds.left * scale) + offset.x + 'px'; |
| div.style.top = parentDiv.offsetTop - div.offsetHeight + 'px'; |
| break; |
| case options.DisplayLayoutType.RIGHT: |
| div.style.left = parentDiv.offsetLeft + parentDiv.offsetWidth + 'px'; |
| div.style.top = Math.trunc(bounds.top * scale) + offset.y + 'px'; |
| break; |
| case options.DisplayLayoutType.BOTTOM: |
| div.style.left = Math.trunc(bounds.left * scale) + offset.x + 'px'; |
| div.style.top = parentDiv.offsetTop + parentDiv.offsetHeight + 'px'; |
| break; |
| case options.DisplayLayoutType.LEFT: |
| div.style.left = parentDiv.offsetLeft - div.offsetWidth + 'px'; |
| div.style.top = Math.trunc(bounds.top * scale) + offset.y + 'px'; |
| break; |
| } |
| }, |
| |
| /** |
| * Calculates the offset relative to |parent|. |
| * @param {number} scale |
| * @param {?options.DisplayLayout} parent |
| */ |
| calculateOffset: function(scale, parent) { |
| // Offset is calculated from top or left edge. |
| if (!parent) { |
| this.offset = 0; |
| return; |
| } |
| assert(this.parentId == parent.id); |
| var offset; |
| if (this.layoutType == options.DisplayLayoutType.LEFT || |
| this.layoutType == options.DisplayLayoutType.RIGHT) { |
| offset = this.div.offsetTop - parent.div.offsetTop; |
| } else { |
| offset = this.div.offsetLeft - parent.div.offsetLeft; |
| } |
| this.offset = Math.trunc(offset / scale); |
| }, |
| |
| /** |
| * Calculates the bounds relative to |parentBounds|. |
| * @param {!options.DisplayBounds} parentBounds |
| * @return {!options.DisplayBounds} |
| */ |
| calculateBounds: function(parentBounds) { |
| var left = 0, top = 0; |
| switch (this.layoutType) { |
| case options.DisplayLayoutType.TOP: |
| left = parentBounds.left + this.offset; |
| top = parentBounds.top - this.bounds.height; |
| break; |
| case options.DisplayLayoutType.RIGHT: |
| left = parentBounds.left + parentBounds.width; |
| top = parentBounds.top + this.offset; |
| break; |
| case options.DisplayLayoutType.BOTTOM: |
| left = parentBounds.left + this.offset; |
| top = parentBounds.top + parentBounds.height; |
| break; |
| case options.DisplayLayoutType.LEFT: |
| left = parentBounds.left - this.bounds.width; |
| top = parentBounds.top + this.offset; |
| break; |
| } |
| return { |
| left: left, |
| top: top, |
| width: this.bounds.width, |
| height: this.bounds.height |
| }; |
| }, |
| |
| /** |
| * Return the position closest to |newPosition| along the edge of |
| * |parentDiv| specified by |layoutType|. |
| * @param {options.DisplayPosition} newPosition |
| * @param {?HTMLElement} parentDiv |
| * @param {!options.DisplayLayoutType} layoutType |
| * @return {!options.DisplayPosition} |
| */ |
| getSnapPosition: function(newPosition, parentDiv, layoutType) { |
| var x; |
| if (layoutType == options.DisplayLayoutType.LEFT) { |
| x = parentDiv.offsetLeft - this.div.offsetWidth; |
| } else if (layoutType == options.DisplayLayoutType.RIGHT) { |
| x = parentDiv.offsetLeft + parentDiv.offsetWidth; |
| } else { |
| x = this.snapToX(newPosition.x, parentDiv); |
| } |
| |
| var y; |
| if (layoutType == options.DisplayLayoutType.TOP) { |
| y = parentDiv.offsetTop - this.div.offsetHeight; |
| } else if (layoutType == options.DisplayLayoutType.BOTTOM) { |
| y = parentDiv.offsetTop + parentDiv.offsetHeight; |
| } else { |
| y = this.snapToY(newPosition.y, parentDiv); |
| } |
| |
| return {x: x, y: y}; |
| }, |
| |
| /** |
| * Update the div location to the position closest to |newPosition| along |
| * the edge of |parentDiv| specified by |layoutType|. |
| * @param {options.DisplayPosition} newPosition |
| * @param {?HTMLElement} parentDiv |
| * @param {!options.DisplayLayoutType} layoutType |
| */ |
| setDivPosition: function(newPosition, parentDiv, layoutType) { |
| var div = this.div; |
| switch (layoutType) { |
| case options.DisplayLayoutType.RIGHT: |
| div.style.left = parentDiv.offsetLeft + parentDiv.offsetWidth + 'px'; |
| div.style.top = newPosition.y + 'px'; |
| break; |
| case options.DisplayLayoutType.LEFT: |
| div.style.left = parentDiv.offsetLeft - div.offsetWidth + 'px'; |
| div.style.top = newPosition.y + 'px'; |
| break; |
| case options.DisplayLayoutType.TOP: |
| div.style.top = parentDiv.offsetTop - div.offsetHeight + 'px'; |
| div.style.left = newPosition.x + 'px'; |
| break; |
| case options.DisplayLayoutType.BOTTOM: |
| div.style.top = parentDiv.offsetTop + parentDiv.offsetHeight + 'px'; |
| div.style.left = newPosition.x + 'px'; |
| break; |
| } |
| }, |
| |
| /** |
| * Return the position of the corner of the div closest to |pos|. |
| * @param {?HTMLElement} parentDiv |
| * @param {options.DisplayPosition} pos |
| * @return {!options.DisplayPosition} |
| * @private |
| */ |
| getCornerPos: function(parentDiv, pos) { |
| var x; |
| if (pos.x > parentDiv.offsetLeft + parentDiv.offsetWidth / 2) |
| x = parentDiv.offsetLeft + parentDiv.offsetWidth; |
| else |
| x = parentDiv.offsetLeft - this.div.offsetWidth; |
| var y; |
| if (pos.y > parentDiv.offsetTop + parentDiv.offsetHeight / 2) |
| y = parentDiv.offsetTop + parentDiv.offsetHeight; |
| else |
| y = parentDiv.offsetTop - this.div.offsetHeight; |
| return {x: x, y: y}; |
| }, |
| |
| /** |
| * Ensures that there is a minimum overlap when displays meet at a corner. |
| * @param {?HTMLElement} parentDiv |
| * @param {options.DisplayLayoutType} layoutType |
| */ |
| adjustCorners: function(parentDiv, layoutType) { |
| // The number of pixels to share the edges between displays. |
| /** @const */ var MIN_OFFSET_OVERLAP = 5; |
| |
| var div = this.div; |
| if (layoutType == options.DisplayLayoutType.LEFT || |
| layoutType == options.DisplayLayoutType.RIGHT) { |
| var top = Math.max( |
| div.offsetTop, |
| parentDiv.offsetTop - div.offsetHeight + MIN_OFFSET_OVERLAP); |
| top = Math.min( |
| top, |
| parentDiv.offsetTop + parentDiv.offsetHeight - MIN_OFFSET_OVERLAP); |
| div.style.top = top + 'px'; |
| } else { |
| var left = Math.max( |
| div.offsetLeft, |
| parentDiv.offsetLeft - div.offsetWidth + MIN_OFFSET_OVERLAP); |
| left = Math.min( |
| left, |
| parentDiv.offsetLeft + parentDiv.offsetWidth - MIN_OFFSET_OVERLAP); |
| div.style.left = left + 'px'; |
| } |
| }, |
| |
| /** |
| * Calculates the layoutType for |position| relative to |parentDiv|. |
| * @param {?HTMLElement} parentDiv |
| * @param {!options.DisplayPosition} position |
| * @return {options.DisplayLayoutType} |
| */ |
| getLayoutTypeForPosition: function(parentDiv, position) { |
| var div = this.div; |
| |
| // Translate position from top-left to center. |
| var x = position.x + div.offsetWidth / 2; |
| var y = position.y + div.offsetHeight / 2; |
| |
| // Determine the distance from the new position to both of the near edges. |
| var left = parentDiv.offsetLeft; |
| var top = parentDiv.offsetTop; |
| var width = parentDiv.offsetWidth; |
| var height = parentDiv.offsetHeight; |
| |
| // Signed deltas to the center of the div. |
| var dx = x - (left + width / 2); |
| var dy = y - (top + height / 2); |
| |
| // Unsigned distance to each edge. |
| var distx = Math.abs(dx) - width / 2; |
| var disty = Math.abs(dy) - height / 2; |
| |
| if (distx > disty) { |
| if (dx < 0) |
| return options.DisplayLayoutType.LEFT; |
| else |
| return options.DisplayLayoutType.RIGHT; |
| } else { |
| if (dy < 0) |
| return options.DisplayLayoutType.TOP; |
| else |
| return options.DisplayLayoutType.BOTTOM; |
| } |
| }, |
| |
| /** |
| * Snaps a horizontal value, see SnapToEdge. |
| * @param {number} x |
| * @param {?HTMLElement} parentDiv |
| * @param {number=} opt_snapDistance Provide to override the snap distance. |
| * 0 means snap from any distance. |
| * @return {number} |
| */ |
| snapToX: function(x, parentDiv, opt_snapDistance) { |
| return snapToEdge_( |
| x, this.div.offsetWidth, parentDiv.offsetLeft, parentDiv.offsetWidth, |
| opt_snapDistance); |
| }, |
| |
| /** |
| * Snaps a vertical value, see SnapToEdge. |
| * @param {number} y |
| * @param {?HTMLElement} parentDiv |
| * @param {number=} opt_snapDistance Provide to override the snap distance. |
| * 0 means snap from any distance. |
| * @return {number} |
| */ |
| snapToY: function(y, parentDiv, opt_snapDistance) { |
| return snapToEdge_( |
| y, this.div.offsetHeight, parentDiv.offsetTop, parentDiv.offsetHeight, |
| opt_snapDistance); |
| }, |
| |
| /** |
| * Intersects this.div with |otherDiv|. If there is a collision, modifies |
| * |deltaPos| to limit movement to a single axis and avoid the collision |
| * and returns true. |
| * @param {?HTMLElement} otherDiv |
| * @param {!options.DisplayPosition} deltaPos |
| * @return {boolean} Whether there was a collision. |
| */ |
| collideWithDivAndModifyDelta: function(otherDiv, deltaPos) { |
| var div = this.div; |
| var newX = div.offsetLeft + deltaPos.x; |
| var newY = div.offsetTop + deltaPos.y; |
| |
| if ((newX + div.offsetWidth <= otherDiv.offsetLeft) || |
| (newX >= otherDiv.offsetLeft + otherDiv.offsetWidth) || |
| (newY + div.offsetHeight <= otherDiv.offsetTop) || |
| (newY >= otherDiv.offsetTop + otherDiv.offsetHeight)) { |
| return false; |
| } |
| |
| if (Math.abs(deltaPos.x) > Math.abs(deltaPos.y)) { |
| if (deltaPos.x > 0) { |
| var x = otherDiv.offsetLeft - div.offsetWidth; |
| if (x > div.offsetLeft) |
| deltaPos.x = x - div.offsetLeft; |
| else |
| deltaPos.x = 0; |
| } else { |
| var x = otherDiv.offsetLeft + otherDiv.offsetWidth; |
| if (x < div.offsetLeft) |
| deltaPos.x = x - div.offsetLeft; |
| else |
| deltaPos.x = 0; |
| } |
| deltaPos.y = 0; |
| } else { |
| deltaPos.x = 0; |
| if (deltaPos.y > 0) { |
| var y = otherDiv.offsetTop - div.offsetHeight; |
| if (y > div.offsetTop) |
| deltaPos.y = y - div.offsetTop; |
| else |
| deltaPos.y = 0; |
| } else if (deltaPos.y < 0) { |
| var y = otherDiv.offsetTop + otherDiv.offsetTop; |
| if (y < div.offsetTop) |
| deltaPos.y = y - div.offsetTop; |
| else |
| deltaPos.y = 0; |
| } |
| } |
| |
| return true; |
| } |
| }; |
| |
| // Export |
| return {DisplayLayout: DisplayLayout}; |
| }); |
