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..4602df0be71fdea2a8450f416dc030ee7f0ac937 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).
    */
@@ -68,20 +57,21 @@ cr.define('print_preview', function() {
   MarginTextbox.prototype = {
     __proto__: HTMLInputElement.prototype,
 
+    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 +79,47 @@ 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 == 0) {
+        this.value = print_preview.convertPointsToInchesText(
+            this.lastValidValueInPoints + dragDeltaInPoints);
+      } else if (validity == -1) {
+        this.value = print_preview.convertPointsToInchesText(0);
+      } else if (validity == 1) {
+        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} 0 if applying |dragDeltaInPoints| results in a valid
+     *     margin value, -1 if resulting value is lower than minimum allowed, 1
+     *     if larger than maximum allowed.
+     */
+    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) == 0;
       if (this.isValid)
-        this.value = MarginTextbox.convertInchesToInchesText(this.margin);
+        this.value = print_preview.convertInchesToInchesText(this.margin);
     },
 
     /**
@@ -118,11 +137,8 @@ cr.define('print_preview', function() {
      */
     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.style.left = 100 * topLeft.x + '%';
+      this.style.top = 100 * topLeft.y + '%';
       this.updateColor();
     },
 
@@ -160,33 +176,32 @@ 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.
+     * @return {{print_preview.Point} 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;
+      var offsetX = MarginTextbox.totalWidth() /
+          parseInt(this.parentNode.style.width, 10);
+      var offsetY = MarginTextbox.totalHeight() /
+          parseInt(this.parentNode.style.height, 10);
 
       if (this.isTop_()) {
-        x = this.marginsRectangle_.middleX - offsetX;
-        y = this.marginsRectangle_.y;
+        x = 0.5 - offsetX / 2;
+        y = 0.5;
       } else if (this.isBottom_()) {
-        x = this.marginsRectangle_.middleX - offsetX;
-        y = this.marginsRectangle_.bottom - 2 * offsetY;
+        x = 0.5 - offsetX / 2;
+        y =  0.5 - offsetY;

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

extra space

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

Done.

       } else if (this.isRight_()) {
-        x = this.marginsRectangle_.right - 2 * offsetX;
-        y = this.marginsRectangle_.middleY - offsetY;
+        x = 0.5 - offsetX;
+        y = 0.5 - offsetY / 2;
       } else if (this.isLeft_()) {
-        x = this.marginsRectangle_.x;
-        y = this.marginsRectangle_.middleY - offsetY;
+        x = 0.5;
+        y = 0.5 - offsetY / 2;
       }
 
-      return { x: x, y: y };
+      return new print_preview.Point(x, y);
     },
 
     /**
@@ -208,7 +223,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 +254,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();