Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2815)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/options/chromeos/display_options.js

Issue 1633983002: Store layoutType in DisplayInfo + misc cleanup (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@issue_576375_display3c_fix_1
Patch Set: Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/options/chromeos/display_options.js
diff --git a/chrome/browser/resources/options/chromeos/display_options.js b/chrome/browser/resources/options/chromeos/display_options.js
index 4e762ca13b46912ea05dbc84a67c8162659c2ceb..961fc9d5aa6814a0143a0766468aaf1f5ad3c202 100644
--- a/chrome/browser/resources/options/chromeos/display_options.js
+++ b/chrome/browser/resources/options/chromeos/display_options.js
@@ -89,6 +89,7 @@ options.DisplayInfo;
* div: ?HTMLElement,
* id: string,
* isPrimary: boolean,
+ * layoutType: options.DisplayLayoutType,
* name: string,
* originalPosition: !options.DisplayPosition
* }}
@@ -106,7 +107,7 @@ cr.define('options', function() {
/** @const */ var MIN_OFFSET_OVERLAP = 5;
/**
- * Gets the position of |point| to |rect|, left, right, top, or bottom.
+ * Gets the layout type of |point| relative to |rect|.
* @param {!options.DisplayBounds} rect The base rectangle.
* @param {!options.DisplayPosition} point The point to check the position.
* @return {options.DisplayLayoutType} The position of the calculated point.
xiyuan 2016/01/26 17:35:33 nit: update the comment here as well.
stevenjb 2016/01/26 18:18:10 Done in the next CL
@@ -132,6 +133,33 @@ cr.define('options', function() {
}
/**
+ * 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.
+ * @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) {
+ // 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 startDiff = Math.abs(point - basePoint);
+ var endDiff = Math.abs(point + width - (basePoint + baseWidth));
+ // Prefer the closer one if both edges are close enough.
+ if (startDiff < SNAP_DISTANCE_PX && startDiff < endDiff)
+ return basePoint;
+ else if (endDiff < SNAP_DISTANCE_PX)
+ return basePoint + baseWidth - width;
+
+ return point;
+ }
+
+ /**
* Encapsulated handling of the 'Display' page.
* @constructor
* @extends {cr.ui.pageManager.Page}
@@ -169,13 +197,6 @@ cr.define('options', function() {
showUnifiedDesktopOption_: false,
/**
- * The current secondary display layout.
- * @type {options.DisplayLayoutType}
- * @private
- */
- layoutType_: options.DisplayLayoutType.RIGHT,
-
- /**
* The array of current output displays. It also contains the display
* rectangles currently rendered on screen.
* @type {!Array<!options.DisplayInfo>}
@@ -425,43 +446,16 @@ cr.define('options', function() {
// Offset is calculated from top or left edge.
var primary = this.displayLayoutMap_[this.primaryDisplayId_];
var secondary = this.displayLayoutMap_[this.secondaryDisplayId_];
+ var layoutType = secondary.layoutType;
var offset;
- if (this.layoutType_ == options.DisplayLayoutType.LEFT ||
- this.layoutType_ == options.DisplayLayoutType.RIGHT) {
+ if (layoutType == options.DisplayLayoutType.LEFT ||
+ layoutType == options.DisplayLayoutType.RIGHT) {
offset = secondary.div.offsetTop - primary.div.offsetTop;
} else {
offset = secondary.div.offsetLeft - primary.div.offsetLeft;
}
offset = Math.floor(offset / this.visualScale_);
- chrome.send(
- 'setDisplayLayout', [secondary.id, this.layoutType_, offset]);
- },
-
- /**
- * 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.
- * @return {number} The moved point. Returns point itself if it doesn't
- * need to snap to the edge.
- * @private
- */
- snapToEdge_: function(point, width, basePoint, baseWidth) {
- // If the edge of the regions is smaller than this, it will snap to the
- // base's edge.
- /** @const */ var SNAP_DISTANCE_PX = 16;
-
- 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 (startDiff < SNAP_DISTANCE_PX && startDiff < endDiff)
- return basePoint;
- else if (endDiff < SNAP_DISTANCE_PX)
- return basePoint + baseWidth - width;
-
- return point;
+ chrome.send('setDisplayLayout', [secondary.id, layoutType, offset]);
},
/**
@@ -481,7 +475,6 @@ cr.define('options', function() {
// if there are >=3 displays. This is our assumption for M21.
// TODO(mukai): Fix the code to allow >=3 displays.
var dragInfo = this.dragInfo_;
- var dragLayout = this.displayLayoutMap_[dragInfo.displayId];
/** @type {options.DisplayPosition} */ var newPosition = {
x: dragInfo.originalLocation.x +
(eventLocation.x - dragInfo.eventLocation.x),
@@ -489,15 +482,20 @@ cr.define('options', function() {
(eventLocation.y - dragInfo.eventLocation.y)
};
+ var dragLayout = this.displayLayoutMap_[dragInfo.displayId];
+ var draggingDiv = dragLayout.div;
+
var baseDisplayId = dragLayout.isPrimary ? this.secondaryDisplayId_ :
this.primaryDisplayId_;
- var baseDiv = this.displayLayoutMap_[baseDisplayId].div;
- var draggingDiv = dragLayout.div;
+ var baseLayout = this.displayLayoutMap_[baseDisplayId];
+ var baseDiv = baseLayout.div;
- newPosition.x = this.snapToEdge_(newPosition.x, draggingDiv.offsetWidth,
- baseDiv.offsetLeft, baseDiv.offsetWidth);
- newPosition.y = this.snapToEdge_(newPosition.y, draggingDiv.offsetHeight,
- baseDiv.offsetTop, baseDiv.offsetHeight);
+ newPosition.x = snapToEdge(
+ newPosition.x, draggingDiv.offsetWidth, baseDiv.offsetLeft,
+ baseDiv.offsetWidth);
+ newPosition.y = snapToEdge(
+ newPosition.y, draggingDiv.offsetHeight, baseDiv.offsetTop,
+ baseDiv.offsetHeight);
/** @type {!options.DisplayPosition} */ var newCenter = {
x: newPosition.x + draggingDiv.offsetWidth / 2,
@@ -512,7 +510,9 @@ cr.define('options', function() {
};
var isPrimary = dragLayout.isPrimary;
- var layoutType = this.layoutType_;
+ // layoutType is always stored in the secondary layout.
+ var layoutType =
+ isPrimary ? baseLayout.layoutType : dragLayout.layoutType;
switch (getPositionToRectangle(baseBounds, newCenter)) {
case options.DisplayLayoutType.RIGHT:
@@ -550,12 +550,12 @@ cr.define('options', function() {
options.DisplayLayoutType.LEFT;
}
- this.layoutType_ = layoutType;
-
var layoutToBase;
if (!isPrimary) {
+ dragLayout.layoutType = layoutType;
layoutToBase = layoutType;
} else {
+ baseLayout.layoutType = layoutType;
switch (layoutType) {
case options.DisplayLayoutType.RIGHT:
layoutToBase = options.DisplayLayoutType.LEFT;
@@ -660,10 +660,17 @@ cr.define('options', function() {
var dragLayout = this.displayLayoutMap_[this.dragInfo_.displayId];
var baseDisplayId = dragLayout.isPrimary ? this.secondaryDisplayId_ :
this.primaryDisplayId_;
- var baseDiv = this.displayLayoutMap_[baseDisplayId].div;
+
+ var baseLayout = this.displayLayoutMap_[baseDisplayId];
+ var baseDiv = baseLayout.div;
var draggingDiv = dragLayout.div;
- if (this.layoutType_ == options.DisplayLayoutType.LEFT ||
- this.layoutType_ == options.DisplayLayoutType.RIGHT) {
+
+ // layoutType is always stored in the secondary layout.
+ var layoutType =
+ dragLayout.isPrimary ? baseLayout.layoutType : dragLayout.layoutType;
+
+ if (layoutType == options.DisplayLayoutType.LEFT ||
+ layoutType == options.DisplayLayoutType.RIGHT) {
var top = Math.max(
draggingDiv.offsetTop,
baseDiv.offsetTop - draggingDiv.offsetHeight + MIN_OFFSET_OVERLAP);
@@ -890,28 +897,26 @@ cr.define('options', function() {
if (i != numDisplays - 1)
div.classList.add('display-mirrored');
this.displaysView_.appendChild(div);
-
- // Not currently used but set for consistency / debugging.
- this.displayLayoutMap_[this.displays_[i].id].div = div;
}
},
/**
* Creates a DisplayLayout object representing the display.
* @param {!options.DisplayInfo} display
+ * @param {!options.DisplayLayoutType} layoutType
* @return {!options.DisplayLayout}
* @private
*/
- createDisplayLayout_: function(display) {
- /** @type {options.DisplayLayout} */ var displayLayout = {
+ createDisplayLayout_: function(display, layoutType) {
+ return {
bounds: display.bounds,
div: null,
id: display.id,
isPrimary: display.isPrimary,
+ layoutType: layoutType,
name: display.name,
originalPosition: {x: 0, y: 0}
};
- return displayLayout;
},
/**
@@ -1071,7 +1076,8 @@ cr.define('options', function() {
this.displayLayoutMap_ = {};
for (var i = 0; i < displays.length; i++) {
var display = displays[i];
- this.displayLayoutMap_[display.id] = this.createDisplayLayout_(display);
+ this.displayLayoutMap_[display.id] =
+ this.createDisplayLayout_(display, layoutType);
}
var mirroring = mode == options.MultiDisplayMode.MIRRORING;
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698