Add DisplayLayoutManagerMulti (WIP)

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

 // 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}
@@ skipping 24 matching lines @@
 options.DisplayPosition;
 
 /**
  * @typedef {{
  *   bounds: !options.DisplayBounds,
  *   div: ?HTMLElement,
  *   id: string,
  *   layoutType: options.DisplayLayoutType,
  *   name: string,
  *   offset: number,
- *   originalPosition: !options.DisplayPosition,
+ *   originalDivOffsets: !options.DisplayPosition,
  *   parentId: string
  * }}
  */
 options.DisplayLayout;
 
 cr.define('options', function() {
   'use strict';
 
   /**
    * 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}
    */
-  function getPositionToRectangle(rect, point) {
+  function getLayoutTypeForPosition(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
+   * @param {options.DisplayLayoutType} layoutType
+   * @return {!options.DisplayLayoutType}
    */
-  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;
+  function invertLayoutType(layoutType) {
+    switch (layoutType) {
+      case options.DisplayLayoutType.RIGHT:
+        return options.DisplayLayoutType.LEFT;
+      case options.DisplayLayoutType.LEFT:
+        return options.DisplayLayoutType.RIGHT;
+      case options.DisplayLayoutType.TOP:
+        return options.DisplayLayoutType.BOTTOM;
+      case options.DisplayLayoutType.BOTTOM:
+        return options.DisplayLayoutType.TOP;
+    }
+    assertNotReached();
+    return layoutType;
   }
 
   /**
    * @constructor
    */
   function DisplayLayoutManager() {
     this.displayLayoutMap_ = {};
     this.displayAreaOffset_ = {x: 0, y: 0};
   }
 
@@ skipping 17 matching lines @@
     visualScale_: 1,
 
     /**
      * The offset to the center of the display area div.
      * @type {?options.DisplayPosition}
      * @private
      */
     displayAreaOffset_: null,
 
     /**
+     * Creates a DisplayLayout object representing the display.
+     * @param {string} id
+     * @param {string} name
+     * @param {options.DisplayBounds} bounds
+     * @param {!options.DisplayLayoutType} layoutType
+     * @param {string} parentId
+     * @return {!options.DisplayLayout}
+     * @private
+     */
+    createDisplayLayout: function(id, name, bounds, layoutType, parentId) {
+      return {
+        bounds: bounds,
+        div: null,
+        id: id,
+        layoutType: layoutType,
+        name: name,
+        offset: 0,
+        originalDivOffsets: {x: 0, y: 0},
+        parentId: parentId
+      };
+    },
+
+    /**
      * Adds a display to the layout map.
      * @param {options.DisplayLayout} displayLayout
      */
     addDisplayLayout: function(displayLayout) {
       this.displayLayoutMap_[displayLayout.id] = displayLayout;
     },
 
     /**
      * Returns the display layout for |id|.
      * @param {string} id
@@ skipping 77 matching lines @@
      * @param {string} id
      * @param {options.DisplayPosition} newPosition
      * @private
      */
     updatePosition: function(id, newPosition) {
       var displayLayout = this.displayLayoutMap_[id];
       var div = displayLayout.div;
       var baseLayout = this.getBaseLayout_(displayLayout);
       var baseDiv = baseLayout.div;
 
-      newPosition.x = snapToEdge(
+      newPosition.x = this.snapToEdge_(
           newPosition.x, div.offsetWidth, baseDiv.offsetLeft,
           baseDiv.offsetWidth);
-      newPosition.y = snapToEdge(
+      newPosition.y = this.snapToEdge_(
           newPosition.y, div.offsetHeight, baseDiv.offsetTop,
           baseDiv.offsetHeight);
 
       /** @type {!options.DisplayPosition} */ var newCenter = {
         x: newPosition.x + div.offsetWidth / 2,
         y: newPosition.y + div.offsetHeight / 2
       };
 
       /** @type {!options.DisplayBounds} */ var baseBounds = {
         left: baseDiv.offsetLeft,
         top: baseDiv.offsetTop,
         width: baseDiv.offsetWidth,
         height: baseDiv.offsetHeight
       };
 
       // This implementation considers only the case of two displays, i.e
       // a single parent with one child.
       var isPrimary = displayLayout.parentId == '';
 
-      // layoutType is always stored in the child layout.
-      var layoutType =
-          isPrimary ? baseLayout.layoutType : displayLayout.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;
-        case options.DisplayLayoutType.TOP:
-          layoutType = isPrimary ? options.DisplayLayoutType.BOTTOM :
-                                   options.DisplayLayoutType.TOP;
-          break;
-        case options.DisplayLayoutType.BOTTOM:
-          layoutType = isPrimary ? options.DisplayLayoutType.TOP :
-                                   options.DisplayLayoutType.BOTTOM;
-          break;
-      }
+      var layoutType = getLayoutTypeForPosition(baseBounds, newCenter);
+      if (isPrimary)
+        layoutType = invertLayoutType(layoutType);
 
       if (layoutType == options.DisplayLayoutType.LEFT ||
           layoutType == options.DisplayLayoutType.RIGHT) {
-        if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight)
+        if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight) {
           layoutType = isPrimary ? options.DisplayLayoutType.TOP :
                                    options.DisplayLayoutType.BOTTOM;
-        else if (newPosition.y + div.offsetHeight < baseDiv.offsetTop)
+        } else if (newPosition.y + div.offsetHeight < baseDiv.offsetTop) {
           layoutType = isPrimary ? options.DisplayLayoutType.BOTTOM :
                                    options.DisplayLayoutType.TOP;
+        }
       } else {
-        if (newPosition.x > baseDiv.offsetLeft + baseDiv.offsetWidth)
+        if (newPosition.x > baseDiv.offsetLeft + baseDiv.offsetWidth) {
           layoutType = isPrimary ? options.DisplayLayoutType.LEFT :
                                    options.DisplayLayoutType.RIGHT;
-        else if (newPosition.x + div.offsetWidth < baseDiv.offsetLeft)
+        } else if (newPosition.x + div.offsetWidth < baseDiv.offsetLeft) {
           layoutType = isPrimary ? options.DisplayLayoutType.RIGHT :
                                    options.DisplayLayoutType.LEFT;
-      }
-
-      var layoutToBase;
-      if (!isPrimary) {
-        displayLayout.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;
-          case options.DisplayLayoutType.BOTTOM:
-            layoutToBase = options.DisplayLayoutType.TOP;
-            break;
         }
       }
 
-      switch (layoutToBase) {
-        case options.DisplayLayoutType.RIGHT:
-          div.style.left = baseDiv.offsetLeft + baseDiv.offsetWidth + 'px';
-          div.style.top = newPosition.y + 'px';
-          break;
-        case options.DisplayLayoutType.LEFT:
-          div.style.left = baseDiv.offsetLeft - div.offsetWidth + 'px';
-          div.style.top = newPosition.y + 'px';
-          break;
-        case options.DisplayLayoutType.TOP:
-          div.style.top = baseDiv.offsetTop - div.offsetHeight + 'px';
-          div.style.left = newPosition.x + 'px';
-          break;
-        case options.DisplayLayoutType.BOTTOM:
-          div.style.top = baseDiv.offsetTop + baseDiv.offsetHeight + 'px';
-          div.style.left = newPosition.x + 'px';
-          break;
-      }
+      // layoutType is always stored in the child layout.
+      if (isPrimary)
+        baseLayout.layoutType = layoutType;
+      else
+        displayLayout.layoutType = layoutType;
+
+      var layoutToBase = isPrimary ? invertLayoutType(layoutType) : layoutType;
+
+      this.setDivPosition_(div, newPosition, baseDiv, layoutToBase);
     },
 
     /**
      * Called from the UI to finalize the location of display |id| after updates
      * are complete (e.g. after a drag was completed).
      * @param {string} id
      * @return {boolean} True if the final position differs from the original.
      */
     finalizePosition: function(id) {
-      // Make sure the dragging location is connected.
       var displayLayout = this.displayLayoutMap_[id];
       var div = displayLayout.div;
       var baseLayout = this.getBaseLayout_(displayLayout);
-      var baseDiv = baseLayout.div;
 
       var isPrimary = displayLayout.parentId == '';
       var layoutType =
           isPrimary ? baseLayout.layoutType : displayLayout.layoutType;
 
-      // The number of pixels to share the edges between displays.
-      /** @const */ var MIN_OFFSET_OVERLAP = 5;
-
-      if (layoutType == options.DisplayLayoutType.LEFT ||
-          layoutType == options.DisplayLayoutType.RIGHT) {
-        var top = Math.max(
-            div.offsetTop,
-            baseDiv.offsetTop - div.offsetHeight + MIN_OFFSET_OVERLAP);
-        top = Math.min(
-            top, baseDiv.offsetTop + baseDiv.offsetHeight - MIN_OFFSET_OVERLAP);
-        div.style.top = top + 'px';
-      } else {
-        var left = Math.max(
-            div.offsetLeft,
-            baseDiv.offsetLeft - div.offsetWidth + MIN_OFFSET_OVERLAP);
-        left = Math.min(
-            left,
-            baseDiv.offsetLeft + baseDiv.offsetWidth - MIN_OFFSET_OVERLAP);
-        div.style.left = left + 'px';
-      }
+      // Make sure the dragging location is connected.
+      this.adjustCorners_(div, baseLayout.div, layoutType);
 
       // Calculate the offset of the child display.
       this.calculateOffset_(isPrimary ? baseLayout : displayLayout);
 
-      return displayLayout.originalPosition.x != div.offsetLeft ||
-          displayLayout.originalPosition.y != div.offsetTop;
+      return displayLayout.originalDivOffsets.x != div.offsetLeft ||
+          displayLayout.originalDivOffsets.y != div.offsetTop;
     },
 
     /**
      * Calculates the display area offset and scale.
      * @param {!Element} displayAreaDiv The containing display area div.
      * @param {number} minVisualScale The minimum visualScale value.
      */
     calculateDisplayArea_(displayAreaDiv, minVisualScale) {
       var maxWidth = 0;
       var maxHeight = 0;
@@ skipping 38 matching lines @@
 
     /**
      * Creates a div element and assigns it to |displayLayout|. Returns the
      * created div for additional decoration.
      * @param {string} id
      * @param {!Element} displayAreaDiv The containing display area div.
      */
     createDisplayLayoutDiv_: function(id, displayAreaDiv) {
       var displayLayout = this.displayLayoutMap_[id];
       var parentId = displayLayout.parentId;
-      var offset = this.displayAreaOffset_;
       if (parentId) {
         // Ensure the parent div is created first.
         var parentLayout = this.displayLayoutMap_[parentId];
         if (!parentLayout.div)
           this.createDisplayLayoutDiv_(parentId, displayAreaDiv);
       }
 
       var div = /** @type {!HTMLElement} */ (document.createElement('div'));
       div.className = 'displays-display';
+      displayLayout.div = div;
 
       // div needs to be added to the DOM tree first, otherwise offsetHeight for
       // nameContainer below cannot be computed.
       displayAreaDiv.appendChild(div);
 
       var nameContainer = document.createElement('div');
       nameContainer.textContent = displayLayout.name;
       div.appendChild(nameContainer);
 
-      var bounds = displayLayout.bounds;
-      div.style.width = Math.floor(bounds.width * this.visualScale_) + 'px';
-      var newHeight = Math.floor(bounds.height * this.visualScale_);
-      div.style.height = newHeight + 'px';
+      var newHeight =
+          Math.floor(displayLayout.bounds.height * this.visualScale_);
       nameContainer.style.marginTop =
           (newHeight - nameContainer.offsetHeight) / 2 + 'px';
 
+      this.layoutDivFromBounds_(displayLayout);
+
+      displayLayout.originalDivOffsets.x = div.offsetLeft;
+      displayLayout.originalDivOffsets.y = div.offsetTop;
+
+      this.calculateOffset_(displayLayout);
+    },
+
+    /**
+     * Calculates the div layout for displayLayout.
+     * @param {options.DisplayLayout} displayLayout
+     */
+    layoutDivFromBounds_: function(displayLayout) {
+      var div = displayLayout.div;
+      var bounds = displayLayout.bounds;
+
+      div.style.width = Math.floor(bounds.width * this.visualScale_) + 'px';
+      div.style.height = Math.floor(bounds.height * this.visualScale_) + 'px';
+
+      var offset = this.displayAreaOffset_;
       if (displayLayout.parentId == '') {
         div.style.left =
             Math.floor(bounds.left * this.visualScale_) + offset.x + 'px';
         div.style.top =
             Math.floor(bounds.top * this.visualScale_) + offset.y + 'px';
       } else {
         // Don't trust the child display's x or y, because it may cause a
         // 1px gap due to rounding, which will create a fake update on end
         // dragging. See crbug.com/386401
         var parentDiv = this.displayLayoutMap_[displayLayout.parentId].div;
@@ skipping 15 matching lines @@
             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.floor(bounds.top * this.visualScale_) + offset.y + 'px';
             break;
         }
       }
 
-      displayLayout.div = div;
-      displayLayout.originalPosition.x = div.offsetLeft;
-      displayLayout.originalPosition.y = div.offsetTop;
-
-      this.calculateOffset_(displayLayout);
     },
 
     /**
-     * Calculates the offset for display |id| relative to its parent.
+     * Calculates the offset for displayLayout relative to its parent.
      * @param {options.DisplayLayout} displayLayout
      */
     calculateOffset_: function(displayLayout) {
       // Offset is calculated from top or left edge.
       var parent = this.displayLayoutMap_[displayLayout.parentId];
       if (!parent) {
         displayLayout.offset = 0;
         return;
       }
       var offset;
@@ skipping 16 matching lines @@
     getBaseLayout_(displayLayout) {
       if (displayLayout.parentId != '')
         return this.displayLayoutMap_[displayLayout.parentId];
       for (var childId in this.displayLayoutMap_) {
         var child = this.displayLayoutMap_[childId];
         if (child.parentId == displayLayout.id)
           return child;
       }
       assertNotReached();
       return null;
+    },
+
+    /**
+     * Update the location |div| to the position closest to |newPosition|  along
+     * the edge of |parentDiv| specified by |layoutType|.
+     * @param {?HTMLElement} div
+     * @param {options.DisplayPosition} newPosition
+     * @param {?HTMLElement} parentDiv
+     * @param {!options.DisplayLayoutType} layoutType
+     * @private
+     */
+    setDivPosition_(div, newPosition, parentDiv, layoutType) {
+      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;
+      }
+    },
+
+    /**
+     * 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
+     */
+    snapToEdge_: function(
+        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 < SNAP_DISTANCE_PX)
+        return basePoint + baseWidth - width;
+
+      return point;
+    },
+
+    /**
+     * Ensures that there is a minimum overlap when displays meet at a corner.
+     * @param {?HTMLElement} div
+     * @param {?HTMLElement} parentDiv
+     * @param {options.DisplayLayoutType} layoutType
+     * @private
+     */
+    adjustCorners_: function(div, parentDiv, layoutType) {
+      // The number of pixels to share the edges between displays.
+      /** @const */ var MIN_OFFSET_OVERLAP = 5;
+
+      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';
+      }
     }
   };
 
   // Export
   return {DisplayLayoutManager: DisplayLayoutManager};
 });