Print Preview: Making margin lines draggable.

chrome/browser/resources/print_preview/margin_textbox.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';
 
   function MarginTextbox(groupName) {
     var box = document.createElement('input');
     box.__proto__ = MarginTextbox.prototype;
     box.setAttribute('type', 'text');
     box.className = MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX;
     box.value = '0';
 
     // @type {string} Specifies which margin this line refers to.
     box.marginGroup = groupName;
     // @type {boolean} True if the displayed value is valid.
     box.isValid = true;
     // @type {number} Timer used to detect when the user stops typing.
     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;
 
     box.addEventListeners_();
     return box;
   }
 
   MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX = 'margin-box';
   MarginTextbox.MARGIN_BOX_HEIGHT = 15;
   MarginTextbox.MARGIN_BOX_VERTICAL_PADDING = 5;
   MarginTextbox.MARGIN_BOX_WIDTH = 40;
   MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING = 10;
 
   // Keycode for the "Escape" key.
   MarginTextbox.ESCAPE_KEYCODE = 27;
   // 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).
    */
   MarginTextbox.totalHeight = function() {
     return MarginTextbox.MARGIN_BOX_HEIGHT +
         2 * MarginTextbox.MARGIN_BOX_VERTICAL_PADDING;
   }
 
   /**
    * @return {number} The total width of a margin textbox (including padding).
    */
   MarginTextbox.totalWidth = function() {
     return MarginTextbox.MARGIN_BOX_WIDTH +
         2 * MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING;
   }
 
   MarginTextbox.prototype = {
     __proto__: HTMLInputElement.prototype,
 
+    get margin() {
+      return print_preview.extractMarginValue(this.value);

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

@type

[dpapad, 2011/10/14 23:14:38]

Done.

+    },
+
     /**
      * 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);
       }
 
       this.valueLimit = valueLimit;
       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);
     },
 
     /**
      * Updates the background color depending on |isValid| by adding/removing
      * the appropriate CSS class.
      * @param {boolean} isValid True if the margin is valid.
      */
     updateColor: function() {
       this.isValid ? this.classList.remove('invalid') :
                      this.classList.add('invalid');
     },
 
     /**
      * 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.style.left = 100 * topLeft.x + '%';
+      this.style.top = 100 * topLeft.y + '%';
       this.updateColor();
     },
 
     /**
      * @return {boolean} True if |this| refers to the top margin.
      * @private
      */
     isTop_: function() {
       return this.marginGroup == print_preview.MarginSettings.TOP_GROUP;
     },
@@ skipping 16 matching lines @@
 
     /**
      * @return {boolean} True if |this| refers to the bottom margin.
      * @private
      */
     isRight_: function() {
       return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP;
     },
 
     /**
      * Calculates the coordinates where |this| should be displayed.

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

why are you not doing this in CSS? remember how I mentioned that you could do
50% with some x/y offset via margins, padding, or -webkit-transform: translate

[dpapad, 2011/10/14 23:14:38]

I will try this on a separate CL once this lands.

[Evan Stade, 2011/10/17 21:36:45]

doing so now would actually make this CL simpler and I don't think it would take
a lot of time. Overly complex code is more likely to have bugs; also if you land
code right before a branch, then change it right after, finding bugs and merging
fixes becomes harder/less likely (for example, you wouldn't get the benefit of
canary user testing). I would rather we land the code we want to keep, then (if
necessary) find and fix the bugs in it.

[dpapad, 2011/10/17 23:28:06]

Done.

-     * @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.

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

(in percent, from 0 to 1)

[dpapad, 2011/10/14 23:14:38]

Done.

      * @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_()) {

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

for your consideration:

var x = 0.5, y = 0.5;
if (this.isTop_() || this.isBottom_())
  x -= offsetX / 2;
else
  y -= offsetY / 2;

if (this.isRight_())
  x -= offsetX;
else if (this.isBottom_())
  y -= offsetY;

[dpapad, 2011/10/14 23:14:38]

Done, initializing x,y to 0.5, but the rest seems less readable since you need
to look in two places to figure out what is the final x and y.

-        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;
       } 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);
     },
 
     /**
      * Adds event listeners for various events.
      * @private
      */
     addEventListeners_: function() {
       this.oninput = this.resetTimer_.bind(this);
       this.onblur = this.onBlur_.bind(this);
       this.onkeypress = this.onKeyPressed_.bind(this);
       this.onkeyup = this.onKeyUp_.bind(this);
     },
 
     /**
      * Executes whenever a blur event occurs.
      * @private
      */
     onBlur_: function() {
       clearTimeout(this.timerId_);
       this.validate();
       if (!this.isValid) {
-        this.value = MarginTextbox.convertPointsToInchesText(
+        this.value = print_preview.convertPointsToInchesText(
             this.lastValidValueInPoints);
         this.validate();
       }
 
       this.updateColor();
       cr.dispatchSimpleEvent(document, 'updateSummary');
       cr.dispatchSimpleEvent(document, 'updatePrintButton');
       cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged');
     },
 
@@ skipping 10 matching lines @@
     },
 
     /**
      * Executes whenever a keyup event occurs. Note: Only the "Escape"
      * key event is handled.
      * @param {KeyboardEvent} e The event that triggered this listener.
      * @private
      */
     onKeyUp_: function(e) {
       if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) {
-        this.value = MarginTextbox.convertPointsToInchesText(
+        this.value = print_preview.convertPointsToInchesText(
             this.lastValidValueInPoints);
         this.validate();
         this.updateColor();
         cr.dispatchSimpleEvent(document, 'updateSummary');
         cr.dispatchSimpleEvent(document, 'updatePrintButton');
       }
     },
 
     /**
      * Resetting the timer used to detect when the user stops typing in order
@@ skipping 20 matching lines @@
         return;
       cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged');
     }
 
   };
 
   return {
     MarginTextbox: MarginTextbox
   };
 });