Print Preview: Making margin lines draggable.

chrome/browser/resources/print_preview/margin_textbox.js

Index: chrome/browser/resources/print_preview/margin_textbox.js
diff --git a/chrome/browser/resources/print_preview/margin_textbox.js b/chrome/browser/resources/print_preview/margin_textbox.js
index 5034bbf30b130e44bc2624fdf03e72f07717be34..f5a14ce531f4bb047d65f764ed088c8a2bb450c7 100644
--- a/chrome/browser/resources/print_preview/margin_textbox.js
+++ b/chrome/browser/resources/print_preview/margin_textbox.js
@@ -20,8 +20,6 @@ cr.define('print_preview', function() {
     box.timerId_ = null;
     // @type {number} The last valid value in points.
     box.lastValidValueInPoints = 0;
-    // @type {print_preview.Rect} A rectangle describing the four margins.
-    box.marginsRectangle_ = null;
     // @type {number} The upper allowed limit for the corresponding margin.
     box.valueLimit = null;
 
@@ -40,15 +38,6 @@ cr.define('print_preview', function() {
   // Keycode for the "Enter" key.
   MarginTextbox.ENTER_KEYCODE = 13;
 
-  MarginTextbox.convertPointsToInchesText = function(toConvert) {
-    var inInches = convertPointsToInches(toConvert);
-    return MarginTextbox.convertInchesToInchesText(inInches);
-  };
-
-  MarginTextbox.convertInchesToInchesText = function(toConvert) {
-    return toConvert.toFixed(2) + '"';
-  };
-
   /**
    * @return {number} The total height of a margin textbox (including padding).
    */
@@ -69,19 +58,23 @@ cr.define('print_preview', function() {
     __proto__: HTMLInputElement.prototype,
 
     /**
+     * @type {number} The margin value currently in the textbox.
+     */
+    get margin() {
+      return print_preview.extractMarginValue(this.value);
+    },
+
+    /**
      * Updates the state of |this|.
-     * @param {print_preview.Rect} marginsRectangle A rectangle describing the
-     *     margins in percentages.
      * @param {number} value The margin value in points.
      * @param {number} valueLimit The upper allowed value for the margin.
      * @param {boolean} keepDisplayedValue True if the currently displayed value
      *     should not be updated.
      */
-    update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) {
-      this.marginsRectangle_ = marginsRectangle;
+    update: function(value, valueLimit, keepDisplayedValue) {
       this.lastValidValueInPoints = value;
       if (!keepDisplayedValue) {
-        this.value = MarginTextbox.convertPointsToInchesText(
+        this.value = print_preview.convertPointsToInchesText(
             this.lastValidValueInPoints);
       }
 
@@ -89,18 +82,46 @@ cr.define('print_preview', function() {
       this.validate();
     },
 
-    get margin() {
-      return print_preview.extractMarginValue(this.value);
+    /**
+     * Updates |this| while dragging is in progress.
+     * @param {number} dragDeltaInPoints The difference in points between the
+     *     margin value before dragging started and now.
+     */
+    updateWhileDragging: function(dragDeltaInPoints) {
+      var validity = this.validateDelta(dragDeltaInPoints);
+
+      if (validity == print_preview.marginValidationStates.WITHIN_RANGE) {
+        this.value = print_preview.convertPointsToInchesText(
+            this.lastValidValueInPoints + dragDeltaInPoints);
+      } else if (validity == print_preview.marginValidationStates.TOO_SMALL) {
+        this.value = print_preview.convertPointsToInchesText(0);
+      } else if (validity == print_preview.marginValidationStates.TOO_HIGH) {
+        this.value = print_preview.convertPointsToInchesText(this.valueLimit);
+      }
+
+      this.validate();
+      this.updateColor();
+    },
+
+    /**
+     * @param {number} dragDeltaInPoints The difference in points between the
+     *     margin value before dragging started and now.
+     * @return {number} An appropriate value from enum |marginValidationStates|.
+     */
+    validateDelta: function(dragDeltaInPoints) {
+      var newValue = this.lastValidValueInPoints + dragDeltaInPoints;
+      return print_preview.validateMarginValue(newValue, this.valueLimit);
     },
 
     /**
      * Updates |this.isValid|.
      */
     validate: function() {
-      this.isValid = print_preview.isMarginTextValid(this.value,
-                                                     this.valueLimit);
+      this.isValid =
+          print_preview.validateMarginText(this.value, this.valueLimit) ==
+              print_preview.marginValidationStates.WITHIN_RANGE;
       if (this.isValid)
-        this.value = MarginTextbox.convertInchesToInchesText(this.margin);
+        this.value = print_preview.convertInchesToInchesText(this.margin);
     },
 
     /**
@@ -117,12 +138,6 @@ cr.define('print_preview', function() {
      * Draws this textbox.
      */
     draw: function() {
-      var topLeft = this.getCoordinates_();
-      var totalWidth = previewArea.pdfPlugin_.offsetWidth;
-      var totalHeight = previewArea.pdfPlugin_.offsetHeight;
-
-      this.style.left = Math.round(topLeft.x * totalWidth) + 'px';
-      this.style.top = Math.round(topLeft.y * totalHeight) + 'px';
       this.updateColor();
     },
 
@@ -159,37 +174,6 @@ cr.define('print_preview', function() {
     },
 
     /**
-     * Calculates the coordinates where |this| should be displayed.
-     * @return {{x: number, y: number}} The coordinates (in percent) where
-     *     |this| should be drawn relative to the upper left corner of the
-     *     plugin.
-     * @private
-     */
-    getCoordinates_: function() {
-      var x = 0, y = 0;
-      var totalWidth = previewArea.pdfPlugin_.offsetWidth;
-      var totalHeight = previewArea.pdfPlugin_.offsetHeight;
-      var offsetY = (MarginTextbox.totalHeight() / 2) / totalHeight;
-      var offsetX = (MarginTextbox.totalWidth() / 2) / totalWidth;
-
-      if (this.isTop_()) {
-        x = this.marginsRectangle_.middleX - offsetX;
-        y = this.marginsRectangle_.y;
-      } else if (this.isBottom_()) {
-        x = this.marginsRectangle_.middleX - offsetX;
-        y = this.marginsRectangle_.bottom - 2 * offsetY;
-      } else if (this.isRight_()) {
-        x = this.marginsRectangle_.right - 2 * offsetX;
-        y = this.marginsRectangle_.middleY - offsetY;
-      } else if (this.isLeft_()) {
-        x = this.marginsRectangle_.x;
-        y = this.marginsRectangle_.middleY - offsetY;
-      }
-
-      return { x: x, y: y };
-    },
-
-    /**
      * Adds event listeners for various events.
      * @private
      */
@@ -208,7 +192,7 @@ cr.define('print_preview', function() {
       clearTimeout(this.timerId_);
       this.validate();
       if (!this.isValid) {
-        this.value = MarginTextbox.convertPointsToInchesText(
+        this.value = print_preview.convertPointsToInchesText(
             this.lastValidValueInPoints);
         this.validate();
       }
@@ -239,7 +223,7 @@ cr.define('print_preview', function() {
      */
     onKeyUp_: function(e) {
       if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) {
-        this.value = MarginTextbox.convertPointsToInchesText(
+        this.value = print_preview.convertPointsToInchesText(
             this.lastValidValueInPoints);
         this.validate();
         this.updateColor();
@@ -256,14 +240,14 @@ cr.define('print_preview', function() {
     resetTimer_: function() {
       clearTimeout(this.timerId_);
       this.timerId_ = window.setTimeout(
-          this.onTextValueMayHaveChanged_.bind(this), 500);
+          this.onTextValueMayHaveChanged.bind(this), 500);
     },
 
     /**
-     * Executes whenever the user stops typing.
-     * @private
+     * Executes whenever the user stops typing or when a drag session associated
+     * with |this| ends.
      */
-    onTextValueMayHaveChanged_: function() {
+    onTextValueMayHaveChanged: function() {
       this.validate();
       this.updateColor();
       cr.dispatchSimpleEvent(document, 'updateSummary');