Print Preview: Making margin lines draggable.

chrome/browser/resources/print_preview/margins_ui.js

 // Copyright (c) 2011 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.define('print_preview', function() {
   'strict';
 
-  /**
-   * @constructor
-   * This class represents a margin line and a textbox corresponding to that
-   * margin.
-   */
-  function MarginsUIPair(groupName) {
-    this.line_ = new print_preview.MarginLine(groupName);
-    this.box_ = new print_preview.MarginTextbox(groupName);
-  }
-
-  MarginsUIPair.prototype = {
-    __proto__: MarginsUIPair.prototype,
-
-    /**
-     * Updates the state.
-     */
-    update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) {
-      this.line_.update(marginsRectangle);
-      this.box_.update(marginsRectangle, value, valueLimit, keepDisplayedValue);
-    },
-
-    /**
-     * Draws |this| based on the state.
-     */
-    draw: function() {
-      this.line_.draw();
-      this.box_.draw();
-    }
-  };
-
-  function MarginsUI(parentNode) {
+  function MarginsUI() {
     var marginsUI = document.createElement('div');
     marginsUI.__proto__ = MarginsUI.prototype;
     marginsUI.id = 'customized-margins';
 
-    marginsUI.topPair_ = new MarginsUIPair(
+    // @type {print_preview.MarginsUIPair} The object corresponding to the top
+    //     margin.
+    marginsUI.topPair_ = new print_preview.MarginsUIPair(
         print_preview.MarginSettings.TOP_GROUP);
-    marginsUI.leftPair_ = new MarginsUIPair(
+    // @type {print_preview.MarginsUIPair} The object corresponding to the left
+    //     margin.
+    marginsUI.leftPair_ = new print_preview.MarginsUIPair(
         print_preview.MarginSettings.LEFT_GROUP);
-    marginsUI.rightPair_ = new MarginsUIPair(
+    // @type {print_preview.MarginsUIPair} The object corresponding to the right
+    //     margin.
+    marginsUI.rightPair_ = new print_preview.MarginsUIPair(
         print_preview.MarginSettings.RIGHT_GROUP);
-    marginsUI.bottomPair_ = new MarginsUIPair(
+    // @type {print_preview.MarginsUIPair} The object corresponding to the
+    //     bottom margin.
+    marginsUI.bottomPair_ = new print_preview.MarginsUIPair(
         print_preview.MarginSettings.BOTTOM_GROUP);
-    parentNode.appendChild(marginsUI);
 
     var uiPairs = marginsUI.pairsAsList;
-    for (var i = 0; i < uiPairs.length; i++) {
-      marginsUI.appendChild(uiPairs[i].line_);
-      marginsUI.appendChild(uiPairs[i].box_);
-    }
+    for (var i = 0; i < uiPairs.length; i++)
+      marginsUI.appendChild(uiPairs[i]);
+
+    // @type {print_preview.MarginsUIPair} The object that is being dragged.
+    marginsUI.lastClickedMarginsUIPair = null;
+
+    marginsUI.addEventListeners();
     return marginsUI;
   }
 
+  /**
+   * @param {print_preview.Point} point The point with respect to the top left
+   *     corner of the webpage.
+   * @return {print_preview.Point} The point with respect to the top left corner
+   *     of the plugin area.
+   */
+  MarginsUI.convert = function(point) {
+    var mainview = $('mainview');
+    return new print_preview.Point(point.x - mainview.offsetLeft,
+                                   point.y - mainview.offsetTop);
+  }
+
   MarginsUI.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Adds an observer for |MarginsMayHaveChanged| event.
      * @param {function} func A callback function to be called when
      *   |MarginsMayHaveChanged| event occurs.
      */
     addObserver: function(func) {
       var uiPairs = this.pairsAsList;
       for (var i = 0; i < uiPairs.length; i++)
         uiPairs[i].box_.addEventListener('MarginsMayHaveChanged', func);
     },
 
     /**
      * @return {array} An array including all |MarginUIPair| objects.
      */
     get pairsAsList() {
       return [this.topPair_, this.leftPair_, this.rightPair_, this.bottomPair_];
     },
 
     /**
      * Updates the state of the margins UI.
      * @param {print_preview.Rect}
      * @param {Margins} marginValues
      * @param {array} valueLimits
      */
     update: function(marginsRectangle, marginValues, valueLimits,
-        keepDisplayedValue) {
+        keepDisplayedValue, valueLimitsInPercent) {
       var uiPairs = this.pairsAsList;
       var order = ['top', 'left', 'right', 'bottom'];
       for (var i = 0; i < uiPairs.length; i++) {
         uiPairs[i].update(marginsRectangle,
                           marginValues[order[i]],
                           valueLimits[i],
-                          keepDisplayedValue);
+                          keepDisplayedValue,
+                          valueLimitsInPercent[i]);
       }
     },
 
     /**
      * Draws |this| based on the latest state.
      */
     draw: function() {
       this.applyClippingMask_();
       this.pairsAsList.forEach(function(pair) { pair.draw(); });
     },
@@ skipping 13 matching lines @@
     },
 
     /**
      * Applies a clipping mask on |this| so that it does not paint on top of the
      * scrollbars (if any).
      */
     applyClippingMask_: function() {
       var bottom = previewArea.height;
       var right = previewArea.width;
       this.style.clip = "rect(0, " + right + "px, " + bottom + "px, 0)";
-    }
+    },
+
+    /**
+     * Adds event listeners for various events.
+     */
+    addEventListeners: function() {
+      var uiPairs = this.pairsAsList;
+      for (var i = 0; i < uiPairs.length; i++) {
+        uiPairs[i].addEventListener('MarginsLineMouseDown',
+                                    this.onMarginLineMouseDown.bind(this));
+        uiPairs[i].addEventListener('MarginsLineMouseUp',
+                                     this.onMarginLineMouseUp.bind(this));

[Evan Stade, 2011/10/14 19:04:49]

I don't think this is necessary. You are double-handling mouse ups on margin
line.

[dpapad, 2011/10/14 20:57:58]

Removed it since it is not necessary. It was not being double-handled though
since the mouseup event was not propagated to window.document.onmouseup so
onMarginLineMouseUp was executed once regardless.

+      }
+    },
+
+    /**
+     * Executes when a "MarginLineMouseDown" event occurs.
+     * @param {cr.Event} e The event that triggered this listener.
+     */
+    onMarginLineMouseDown: function(e) {
+      this.lastClickedMarginsUIPair = e.target;
+      this.bringToFront(this.lastClickedMarginsUIPair);
+      // Note: Capturing mouse events at a higher level in the DOM than |this|,
+      // so that the plugin can still receive mouse events.
+      window.document.onmousemove = this.onMouseMove_.bind(this);

[Evan Stade, 2011/10/14 19:04:49]

use addEventListener

[dpapad, 2011/10/14 20:57:58]

Done.

+      // After snapping to min/max the MarginUIPair might not receive the
+      // mouseup event since it is not under the mouse pointer, so it is handled
+      // here.
+      window.document.onmouseup = this.onMarginLineMouseUp.bind(this);
+    },
+
+    /**
+     * Executes when a "MarginLineMouseUp" event occurs.
+     * @param {cr.Event} e The event that triggered this listener.
+     */
+    onMarginLineMouseUp: function(e) {
+      this.lastClickedMarginsUIPair.box_.onBlur_();

[Evan Stade, 2011/10/14 19:04:49]

don't do this -- it's a hack. Make a helper function with an appropriate name
and call that from here and from onBlur_.

Also, the underscore means private, yet you are accessing the variable anyway
(twice in this line)

[dpapad, 2011/10/14 20:57:58]

Working on removing this hack. I had in mind to do it but missed it somehow.

+      this.lastClickedMarginsUIPair = null;
+      window.document.onmousemove = null;

[Evan Stade, 2011/10/14 19:04:49]

instead of attaching and detaching, always leave the handler attached. Do
nothing if not in dragging mode (which is toggled by mousedown and mouseup).

[dpapad, 2011/10/14 20:57:58]

I changed this for onmouseup only. Having the onmousemove handler always
attached has an impact in performace. It will execute repeatedly, checking for
(this.lastClickedMarginsUIPair == null) to decide whether to act or not. I don't
see what is the problem with detaching and attaching when necessary.

[Evan Stade, 2011/10/14 21:58:36]

this will not measurably impact performance
it's more code

but I guess I don't really care that much

+      window.document.onmouseup = null;
+    },
+
+    /**
+     * Brings |uiPair| in front of the other pairs.
+     * @param {print_preview.MarginsUIPair} uiPair The pair to bring in front.
+     */
+    bringToFront: function(uiPair) {
+      this.pairsAsList.forEach(function(pair) { pair.style.zIndex = 0; });
+      uiPair.style.zIndex = 10;
+    },
+
+    /**
+     * Executes when a mousemove event occurs.
+     * @param {MouseEvent} e The event that triggered this listener.
+     */
+    onMouseMove_: function(e) {
+      var point = MarginsUI.convert(new print_preview.Point(e.x, e.y));
+
+      var dragEvent = new cr.Event('DragEvent');
+      dragEvent.dragDelta =
+          this.lastClickedMarginsUIPair.getDragDistanceFrom(point);
+      dragEvent.destinationPoint = point;
+      this.dispatchEvent(dragEvent);
+    },
   };
 
   return {
     MarginsUI: MarginsUI
   };
 });