Store layoutType in DisplayInfo + misc cleanup

chrome/browser/resources/options/chromeos/display_options.js

 // Copyright (c) 2012 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}
@@ skipping 71 matching lines @@
  * }}
  */
 options.DisplayInfo;
 
 /**
  * @typedef {{
  *   bounds: !options.DisplayBounds,
  *   div: ?HTMLElement,
  *   id: string,
  *   isPrimary: boolean,
+ *   layoutType: options.DisplayLayoutType,
  *   name: string,
  *   originalPosition: !options.DisplayPosition
  * }}
  */
 options.DisplayLayout;
 
 cr.define('options', function() {
   var Page = cr.ui.pageManager.Page;
   var PageManager = cr.ui.pageManager.PageManager;
 
   // The scale ratio of the display rectangle to its original size.
   /** @const */ var VISUAL_SCALE = 1 / 10;
 
   // The number of pixels to share the edges between displays.
   /** @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

    */
   function getPositionToRectangle(rect, point) {
     // Separates the area into four (LEFT/RIGHT/TOP/BOTTOM) by the diagonals of
     // the rect, and decides which area the display should reside.
     var diagonalSlope = rect.height / rect.width;
     var topDownIntercept = rect.top - rect.left * diagonalSlope;
     var bottomUpIntercept = rect.top + rect.height + rect.left * diagonalSlope;
 
     if (point.y > topDownIntercept + point.x * diagonalSlope) {
       if (point.y > bottomUpIntercept - point.x * diagonalSlope)
         return options.DisplayLayoutType.BOTTOM;
       else
         return options.DisplayLayoutType.LEFT;
     } else {
       if (point.y > bottomUpIntercept - point.x * diagonalSlope)
         return options.DisplayLayoutType.RIGHT;
       else
         return options.DisplayLayoutType.TOP;
     }
   }
 
   /**
+   * 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}
    */
   function DisplayOptions() {
     Page.call(this, 'display',
               loadTimeData.getString('displayOptionsPageTabTitle'),
               'display-options-page');
   }
 
@@ skipping 17 matching lines @@
     unifiedDesktopEnabled_: false,
 
     /**
      * Whether the unified desktop option should be present.
      * @type {boolean}
      * @private
      */
     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>}
      * @private
      */
     displays_: [],
 
     /**
      * An object containing DisplayLayout objects for each entry in |displays_|.
      * @type {!Object<!options.DisplayLayout>}
@@ skipping 229 matching lines @@
     },
 
     /**
      * Collects the current data and sends it to Chrome.
      * @private
      */
     sendDragResult_: 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]);
+      chrome.send('setDisplayLayout', [secondary.id, 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;
-    },
-
-    /**
      * Processes the actual dragging of display rectangle.
      * @param {Event} e The event which triggers this drag.
      * @param {options.DisplayPosition} eventLocation The location where the
      *     event happens.
      * @private
      */
     processDragging_: function(e, eventLocation) {
       if (!this.dragInfo_)
         return true;
 
       e.preventDefault();
 
       // Note that current code of moving display-rectangles doesn't work
       // 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),
         y: dragInfo.originalLocation.y +
             (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,
         y: newPosition.y + draggingDiv.offsetHeight / 2
       };
 
       /** @type {!options.DisplayBounds} */ var baseBounds = {
         left: baseDiv.offsetLeft,
         top: baseDiv.offsetTop,
         width: baseDiv.offsetWidth,
         height: baseDiv.offsetHeight
       };
 
       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:
           layoutType = isPrimary ? options.DisplayLayoutType.LEFT :
                                    options.DisplayLayoutType.RIGHT;
           break;
         case options.DisplayLayoutType.LEFT:
           layoutType = isPrimary ? options.DisplayLayoutType.RIGHT :
                                    options.DisplayLayoutType.LEFT;
           break;
@@ skipping 17 matching lines @@
                                    options.DisplayLayoutType.TOP;
       } else {
         if (newPosition.x > baseDiv.offsetLeft + baseDiv.offsetWidth)
           layoutType = isPrimary ? options.DisplayLayoutType.LEFT :
                                    options.DisplayLayoutType.RIGHT;
         else if (newPosition.x + draggingDiv.offsetWidth < baseDiv.offsetLeft)
           layoutType = isPrimary ? options.DisplayLayoutType.RIGHT :
                                    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;
             break;
           case options.DisplayLayoutType.LEFT:
             layoutToBase = options.DisplayLayoutType.RIGHT;
             break;
           case options.DisplayLayoutType.TOP:
             layoutToBase = options.DisplayLayoutType.BOTTOM;
             break;
@@ skipping 84 matching lines @@
      */
     endDragging_: function(e) {
       this.lastTouchLocation_ = null;
       if (!this.dragInfo_)
         return false;
 
       // Make sure the dragging location is connected.
       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);
         top = Math.min(
             top, baseDiv.offsetTop + baseDiv.offsetHeight - MIN_OFFSET_OVERLAP);
         draggingDiv.style.top = top + 'px';
       } else {
         var left = Math.max(
             draggingDiv.offsetLeft,
             baseDiv.offsetLeft - draggingDiv.offsetWidth + MIN_OFFSET_OVERLAP);
@@ skipping 206 matching lines @@
         div.className = 'displays-display';
         div.style.top = i * MIRRORING_OFFSET_PIXELS + 'px';
         div.style.left = i * MIRRORING_OFFSET_PIXELS + offsetX + 'px';
         div.style.width = width + 'px';
         div.style.height = height + 'px';
         div.style.zIndex = i;
         // set 'display-mirrored' class for the background display rectangles.
         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;
     },
 
     /**
      * Creates a div element representing the specified display.
      * @param {!options.DisplayLayout} displayLayout
      * @param {options.DisplayLayoutType} layoutType The layout type for the
      *     secondary display.
      * @param {!options.DisplayPosition} offset The offset to the center of the
      *     display area.
      * @private
@@ skipping 139 matching lines @@
      * @private
      */
     onDisplayChanged_: function(mode, displays, layoutType, offset) {
       if (!this.visible)
         return;
 
       this.displays_ = displays;
       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;
       var unifiedDesktopEnabled = mode == options.MultiDisplayMode.UNIFIED;
 
       // Focus to the first display next to the primary one when |displays_|
       // is updated.
       if (mirroring) {
         this.focusedId_ = '';
       } else if (
@@ skipping 37 matching lines @@
       mode, displays, layoutType, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
         mode, displays, layoutType, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });