Print Preview: Making margin lines draggable.

chrome/browser/resources/print_preview/margin_settings.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() {
   'use strict';
 
   /**
    * Creates a Margins object that holds four margin values. The units in which
    * the values are expressed can be any numeric value.
@@ skipping 42 matching lines @@
      * @param {Margins} rhs The Margins object values to be used.
      */
     copy: function(rhs) {
       this[MarginSettings.TOP_GROUP] = rhs[MarginSettings.TOP_GROUP];
       this[MarginSettings.LEFT_GROUP] = rhs[MarginSettings.LEFT_GROUP];
       this[MarginSettings.RIGHT_GROUP] = rhs[MarginSettings.RIGHT_GROUP];
       this[MarginSettings.BOTTOM_GROUP] = rhs[MarginSettings.BOTTOM_GROUP];
     },
 
     /**
+     * Helper method returning an array of the string indices used for accessing
+     * all margins.
+     * @return {array} An array of string indices.
+     * @private
+     */
+    indicesAsArray_: function() {
+      return [MarginSettings.LEFT_GROUP, MarginSettings.TOP_GROUP,
+          MarginSettings.RIGHT_GROUP, MarginSettings.BOTTOM_GROUP];
+    },
+
+    /**
+     * Rounds |this| based on the precision used when displaying the margins in
+     * inches. This is done by converting from points to inches and back to
+     * points.
+     */
+    roundToInches: function() {
+      var indicesAsArray = this.indicesAsArray_();
+      for (var i = 0; i < indicesAsArray.length; i++) {
+        this[indicesAsArray[i]] =
+            print_preview.convertPointsToInchesTextAndBack(
+                this[indicesAsArray[i]]);
+      }
+    },
+
+    /**
      * Converts |this| to inches and returns the result in a new Margins object.
      * |this| is not affected. It assumes that |this| is currently expressed in
      * points.
      * @param {number} The number of decimal points to keep.
      * @return {Margins} The equivalent of |this| in inches.
      */
     toInches: function(precision) {
       return new Margins(
           Margins.roundToPrecision(convertPointsToInches(
               this[MarginSettings.LEFT_GROUP]), precision),
@@ skipping 55 matching lines @@
     this.lastSelectedOption_ = MarginSettings.MARGINS_VALUE_DEFAULT;
 
     // Holds the currently updated default page layout values.
     this.currentDefaultPageLayout = null;
     // Holds the default page layout values when the custom margins was last
     // selected.
     this.previousDefaultPageLayout_ = null;
 
     // True if the margins UI should be shown regardless of mouse position.
     this.forceDisplayingMarginLines_ = true;
+
+    // @type {EventTracker} Used to keep track of certain event listeners.
+    this.eventTracker = new EventTracker();
   }
 
   // Number of points per inch.
   MarginSettings.POINTS_PER_INCH = 72;
+  // Minimum allowed distance in points between top-bottom, left-right margins.
+  MarginSettings.MINIMUM_MARGINS_DISTANCE = 36;
   // Margin list values.
   MarginSettings.MARGINS_VALUE_DEFAULT = 0;
   MarginSettings.MARGINS_VALUE_NO_MARGINS = 1;
   MarginSettings.MARGINS_VALUE_CUSTOM = 2;
   // Default Margins option index.
   MarginSettings.DEFAULT_MARGINS_OPTION_INDEX = 0;
   // Group name corresponding to the top margin.
   MarginSettings.TOP_GROUP = 'top';
   //  Group name corresponding to the left margin.
   MarginSettings.LEFT_GROUP = 'left';
@@ skipping 20 matching lines @@
 
     /**
      * @return {number} The value of the selected margin option.
      */
     get selectedMarginsValue() {
       var val = this.marginList_.options[this.marginList_.selectedIndex].value;
       return parseInt(val, 10);
     },
 
     /**
+     * @return {number} The total width of the plugin in points.
+     */
+    get totalWidthInPoints() {
+      var pageInformation = previewArea.pageLocationNormalized;
+      return this.pageWidth_ / pageInformation.width;
+    },
+
+    /**
+     * @return {number} The total height of the plugin in points.
+     */
+    get totalHeightInPoints() {
+      var pageInformation = previewArea.pageLocationNormalized;
+      return this.pageHeight_ / pageInformation.height;
+    },
+
+    /**
      * @return {boolean} True if default margins are selected.
      */
     isDefaultMarginsSelected: function() {
       return this.selectedMarginsValue == MarginSettings.MARGINS_VALUE_DEFAULT;
     },
 
     /**
      * @return {boolean} True if no margins are selected.
      */
     isNoMarginsSelected: function() {
@@ skipping 46 matching lines @@
 
     /**
      * Adds listeners to all margin related controls.
      */
     addEventListeners: function() {
       this.marginList_.onchange = this.onMarginsChanged_.bind(this);
       document.addEventListener('PDFLoaded', this.onPDFLoaded_.bind(this));
     },
 
     /**
+     * Executes whenever a "DragEvent" occurs.
+     * @param {cr.Event} e The event that triggered this listener.
+     */
+    onDragEvent_: function(e) {
+      var dragDeltaInPoints = this.convertDragDeltaToPoints_(e.dragDelta);
+      this.marginsUI.lastClickedMarginsUIPair.updateWhileDragging(
+          dragDeltaInPoints, e.destinationPoint);
+    },
+
+    /**
+     * @param {number} dragDelta The difference in pixels between the original
+     *     and current postion of the last clicked margin line.
+     * @return {number} The difference in points.
+     * @private
+     */
+    convertDragDeltaToPoints_: function(dragDelta) {
+      if (this.marginsUI.lastClickedMarginsUIPair.isTop_() ||
+          this.marginsUI.lastClickedMarginsUIPair.isBottom_()) {
+        return dragDelta * this.totalHeightInPoints;
+      } else {
+        return dragDelta * this.totalWidthInPoints;
+      }
+    },
+
+    /**
      * @return {boolean} True if the margin settings are valid.
      */
     areMarginSettingsValid: function() {
       if (this.marginsUI_ == null)
         return true;
 
       var pairs = this.marginsUI.pairsAsList;
       return pairs.every(function(pair) { return pair.box_.isValid; });
     },
 
     /**
      * Calculates the maximum allowable value of the selected margin text for
      * every margin.
-     * @return {array} The maximum allowable value in order top, left, right,
-     *     bottom.
+     * @return {array} The maximum allowable value in points in order top, left,
+     *     right, bottom.
      * @private
      */
     getMarginValueLimits_: function() {
       var marginValueLimits = [];
-      marginValueLimits[0] = this.pageHeight_ - this.customMargins_.bottom;
-      marginValueLimits[1] = this.pageWidth_ - this.customMargins_.right;
-      marginValueLimits[2] = this.pageWidth_ - this.customMargins_.left;
-      marginValueLimits[3] = this.pageHeight_ - this.customMargins_.top;
+      marginValueLimits[0] = this.pageHeight_ - this.customMargins_.bottom -
+          MarginSettings.MINIMUM_MARGINS_DISTANCE;
+      marginValueLimits[1] = this.pageWidth_ - this.customMargins_.right -
+          MarginSettings.MINIMUM_MARGINS_DISTANCE;
+      marginValueLimits[2] = this.pageWidth_ - this.customMargins_.left -
+          MarginSettings.MINIMUM_MARGINS_DISTANCE;
+      marginValueLimits[3] = this.pageHeight_ - this.customMargins_.top -
+          MarginSettings.MINIMUM_MARGINS_DISTANCE;
+
+      for (var i = 0; i < marginValueLimits.length; i++) {
+        marginValueLimits[i] = Math.max(marginValueLimits[i], 0);
+        marginValueLimits[i] = print_preview.convertPointsToInchesTextAndBack(
+            marginValueLimits[i]);
+      }
       return marginValueLimits;
     },
 
     /**
+     * @return {array} The margin value limits positions normalized to the total
+     *     width and height of the plugin and with respect to the top left
+     *     corner of the plugin.
+     */
+    getMarginValueLimitsInPercent_: function() {
+      var pageInformation = previewArea.pageLocationNormalized;
+      var totalWidthInPoints = this.pageWidth_ / pageInformation.width;
+      var totalHeightInPoints = this.pageHeight_ / pageInformation.height;
+      var marginValueLimits = this.getMarginValueLimits_();
+      var marginValueLimitsInPercent = [];
+      marginValueLimitsInPercent[0] = pageInformation.y + marginValueLimits[0] /
+          totalHeightInPoints;
+      marginValueLimitsInPercent[1] = pageInformation.x + marginValueLimits[1] /
+          totalWidthInPoints;
+      marginValueLimitsInPercent[2] = pageInformation.x +
+          pageInformation.width - marginValueLimits[2] / totalWidthInPoints;
+      marginValueLimitsInPercent[3] = pageInformation.y +
+          pageInformation.height - marginValueLimits[3] / totalHeightInPoints;
+      return marginValueLimitsInPercent;
+    },
+
+    /**
      * When the user stops typing in the margin text box a new print preview is
      * requested, only if
      *   1) The input is compeletely valid (it can be parsed in its entirety).
      *   2) The newly selected margins differ from the previously selected.
      * @param {cr.Event} event The change event holding information about what
      *     changed.
      * @private
      */
     onMarginTextValueMayHaveChanged_: function(event) {
       var marginBox = event.target;
       var marginBoxValue = convertInchesToPoints(marginBox.margin);
       this.customMargins_[marginBox.marginGroup] = marginBoxValue;
       this.requestPreviewIfNeeded_();
     },
 
     /**
      * @type {print_preview.MarginsUI} The object holding the UI for specifying
      *     custom margins.
      */
     get marginsUI() {
       if (!this.marginsUI_) {
-        this.marginsUI_ = new print_preview.MarginsUI($('mainview'));
+        this.marginsUI_ = new print_preview.MarginsUI();
+        $('mainview').appendChild(this.marginsUI_);
         this.marginsUI_.addObserver(
             this.onMarginTextValueMayHaveChanged_.bind(this));
       }
       return this.marginsUI_;
     },
 
     /**
      * Adds listeners when the custom margins option is selected.
      * @private
      */
     addCustomMarginEventListeners_: function() {
       $('mainview').onmouseover = this.onMainviewMouseOver_.bind(this);
       $('sidebar').onmouseover = this.onSidebarMouseOver_.bind(this);
+      this.eventTracker.add(
+          this.marginsUI, 'DragEvent', this.onDragEvent_.bind(this), false);
     },
 
     /**
      * Removes the event listeners associated with the custom margins option.
      * @private
      */
     removeCustomMarginEventListeners_: function() {
       $('mainview').onmouseover = null;
       $('sidebar').onmouseover = null;
+      this.eventTracker.remove(this.marginsUI, 'DragEvent');
       this.marginsUI.hide();
     },
 
     /**
      * Updates |this.marginsUI| depending on the specified margins and the
      * position of the page within the plugin.
      * @private
      */
     drawCustomMarginsUI_: function() {
       // TODO(dpapad): find out why passing |!this.areMarginsSettingsValid()|
       // directly produces the opposite value even though
       // |this.getMarginsRectangleInPercent_()| and
       // |this.getMarginValueLimits_()| have no side effects.
       var keepDisplayedValue = !this.areMarginSettingsValid();
       this.marginsUI.update(this.getMarginsRectangleInPercent_(),
                             this.customMargins_,
                             this.getMarginValueLimits_(),
-                            keepDisplayedValue);
+                            keepDisplayedValue,
+                            this.getMarginValueLimitsInPercent_());
       this.marginsUI.draw();
     },
 
     /**
      * Called when there is change in the preview position or size.
      */
     onPreviewPositionChanged: function() {
       if (this.isCustomMarginsSelected() && previewArea.pdfLoaded &&
           pageSettings.totalPageCount != undefined) {
+        previewArea.update();
         this.drawCustomMarginsUI_();
       }
     },
 
     /**
      * Executes when user selects a different margin option, ie,
      * |this.marginList_.selectedIndex| is changed.
      * @private
      */
     onMarginsChanged_: function() {
@@ skipping 28 matching lines @@
       setDefaultValuesAndRegeneratePreview(false);
     },
 
     /**
      * Executes when the custom margins option is selected.
      * @private
      */
     onCustomMarginsSelected_: function() {
       this.addCustomMarginEventListeners_();
 
-      if (this.lastSelectedOption_ == MarginSettings.MARGINS_VALUE_DEFAULT)
+      if (this.lastSelectedOption_ == MarginSettings.MARGINS_VALUE_DEFAULT) {
         this.customMargins_ = this.currentDefaultPageLayout.margins_;
+        this.customMargins_.roundToInches();
+      }
       this.previousCustomMargins_.copy(this.customMargins_);
 
       if (this.previousDefaultPageLayout_ != this.currentDefaultPageLayout) {
         this.pageWidth_ = this.currentDefaultPageLayout.pageWidth;
         this.pageHeight_ = this.currentDefaultPageLayout.pageHeight;
       }
 
       this.previousDefaultPageLayout_ = this.currentDefaultPageLayout;
       this.drawCustomMarginsUI_();
       this.marginsUI.show();
     },
 
     /**
      * Calculates the coordinates of the four margin lines. These are the
      * coordinates where the margin lines should be displayed. The coordinates
      * are expressed in terms of percentages with respect to the total width
      * and height of the plugin.
      * @return {print_preview.Rect} A rectnangle that describes the position of
      *     the four margin lines.
      * @private
      */
     getMarginsRectangleInPercent_: function() {
-      var pageLocation = previewArea.getPageLocationNormalized();
+      var pageLocation = previewArea.pageLocationNormalized;
       var marginsInPercent = this.getMarginsInPercent_();
       var leftX = pageLocation.x + marginsInPercent.left;
       var topY = pageLocation.y + marginsInPercent.top;
       var contentWidth = pageLocation.width - (marginsInPercent.left +
           marginsInPercent.right);
       var contentHeight = pageLocation.height - (marginsInPercent.top +
           marginsInPercent.bottom);
       return new print_preview.Rect(
           leftX, topY, contentWidth, contentHeight);
     },
 
     /**
      * @return {print_preview.Margins} The currently selected margin values
      *     normalized to the total width and height of the plugin.
      * @private
      */
     getMarginsInPercent_: function() {
-      var pageInformation = previewArea.getPageLocationNormalized();
+      return this.convertMarginsInPointsToPercent(this.customMargins_);
+    },
+
+    /**
+     * Converts |marginsToConvert| to points and normalizes it to the height and
+     * width of the plugin.
+     * @return {print_preview.Margins} The margins in percent.
+     * @private
+     */
+    convertMarginsInPointsToPercent: function(marginsToConvert) {
+      var pageInformation = previewArea.pageLocationNormalized;
       var totalWidthInPoints = this.pageWidth_ / pageInformation.width;
       var totalHeightInPoints = this.pageHeight_ / pageInformation.height;
       var marginsInPercent = new Margins(
-          this.customMargins_.left / totalWidthInPoints,
-          this.customMargins_.top / totalHeightInPoints,
-          this.customMargins_.right / totalWidthInPoints,
-          this.customMargins_.bottom / totalHeightInPoints);
+          marginsToConvert.left / totalWidthInPoints,
+          marginsToConvert.top / totalHeightInPoints,
+          marginsToConvert.right / totalWidthInPoints,
+          marginsToConvert.bottom / totalHeightInPoints);
       return marginsInPercent;
     },
 
     /**
      * If custom margins is the currently selected option then change to the
      * default margins option.
      * @private
      */
     resetMarginsIfNeeded: function() {
       if (this.isCustomMarginsSelected()) {
         this.marginList_.options[
             MarginSettings.DEFAULT_MARGINS_OPTION_INDEX].selected = true;
         this.removeCustomMarginEventListeners_();
+        this.forceDisplayingMarginLines_ = true;
         this.lastSelectedOption_ = MarginSettings.MARGINS_VALUE_DEFAULT;
       }
     },
 
     /**
      * Executes when a PDFLoaded event occurs.
      * @private
      */
     onPDFLoaded_: function() {
       if (!previewModifiable)
         fadeOutElement(this.marginsOption_);
     }
   };
 
   return {
     MarginSettings: MarginSettings,
     PageLayout: PageLayout,
   };
 });