Print Preview: Adding UI for margin settings.

chrome/browser/resources/print_preview/margin_line.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 MarginLine(groupName) {
+    var line = document.createElement('div');
+    line.__proto__ = MarginLine.prototype;
+    line.setAttribute('class', MarginLine.CSS_CLASS_MARGIN_LINE);

[Evan Stade, 2011/10/04 02:49:18]

line.className = ...

[dpapad, 2011/10/04 20:41:21]

Done, here and elsewhere.

+    line.setAttribute('margin-group', groupName);

[Evan Stade, 2011/10/04 02:49:18]

why not

line.marginGroup = groupName;

[dpapad, 2011/10/04 20:41:21]

Done, here and elsewhere.

+
+    line.visibleLine = document.createElement('div');

[Evan Stade, 2011/10/04 02:49:18]

docs

[dpapad, 2011/10/04 20:41:21]

Done.

+    line.visibleLine.setAttribute('class', 'margin-line-inner');
+    line.visibleLine.setAttribute('margin-group', groupName);
+    line.appendChild(line.visibleLine);
+    line.rectangle = null;
+    return line;
+  }
+
+  MarginLine.CSS_CLASS_MARGIN_LINE = 'margin-line';
+  // Width of the visible part of MarginLine.
+  MarginLine.VISIBLE_LINE_WIDTH = 0;

[Evan Stade, 2011/10/04 02:49:18]

this doesn't make sense. How is it 0? isn't it 1?

[dpapad, 2011/10/04 20:41:21]

Removed it. Indeed it does not make sense since it is not the actual visible
width. In order to make it look like a line a zero width or height div element
is used, therefore only the border is visible.

+  // Width of the clickable region around each margin line in screen pixels.
+  MarginLine.CLICKABLE_REGION = 20;
+
+  /**
+   * Draws |line| on screen.
+   * @param {HTMLDivElement} line The line to draw.
+   * @param {print_preview.Rectangle} rectangle The rectangle describing where
+   *     |line| should be drawn in percentages.
+   */
+  MarginLine.drawLineUsingPercent = function (line, rectangle) {

[Evan Stade, 2011/10/04 02:49:18]

no space after function (here and elsewhere)

[dpapad, 2011/10/04 20:41:21]

Done.

+    line.style.left = 100 * rectangle.x.toFixed(6) + '%';

[Evan Stade, 2011/10/04 02:49:18]

is 6 decimal places the limit css accepts or something?

[dpapad, 2011/10/04 20:41:21]

Done. It accepts more digits (even though it would not make any difference in
pixels unless the screen is huge).

+    line.style.top = 100 * rectangle.y.toFixed(6) + '%';
+    line.style.width = 100 * rectangle.width.toFixed(6) + '%';
+    line.style.height = 100 * rectangle.height.toFixed(6) + '%';
+  };
+
+  /**
+   * Draws |line| on screen.
+   * @param {HTMLDivElement} line The line to draw.
+   * @param {print_preview.Rectangle} rectangle The rectangle describing where
+   *     |line| should be drawn in percentages with respect to |width| and
+   *     |height|.
+   * @param {number} width The width corresponding to 100%.
+   * @param {number} height The height corresponding to 100%.
+   */
+  MarginLine.drawLineUsingPixels = function (line, rectangle, width, height) {

[Evan Stade, 2011/10/04 02:49:18]

drawLineUsingPixels is an odd name. If I understand correctly this is used for
the draggable area. Maybe call it something along those lines? drawDragControl
or something.

 Also the description is a bit off, it doesn't actually do any drawing (e.g. by
using a canvas). It just sets CSS styles to size an HTMLElement.

[dpapad, 2011/10/04 20:41:21]

Actually these should not be class (as of static in C++) methods anymore. I made
them regular methods and renamed to more descriptive names. I jkept the term
"draw" in the names since changing the CSS style causes the divs to be redrawn
and to be consistent with the rest of the code.

+    line.style.left = Math.round(rectangle.x * width) + 'px';
+    line.style.top = Math.round(rectangle.y * height) + 'px';
+    line.style.width = Math.round(rectangle.width * width) + 'px';
+    line.style.height = Math.round(rectangle.height * height) + 'px';
+  };
+
+

[Evan Stade, 2011/10/04 02:49:18]

extra line

[dpapad, 2011/10/04 20:41:21]

Done.

+  MarginLine.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    update: function(marginsRectangle) {
+      this.rectangle = this.getCoordinates_(marginsRectangle);
+    },
+
+    /**
+     * Draws |this| on screen. Essentially two divs are being drawn, the outer
+     * margin line (not visible) and the inner line (visible).

[Evan Stade, 2011/10/04 02:49:18]

outer and inner are not very descriptive, 'drag control' and 'dotted line' are
better (if that's what these are)

[dpapad, 2011/10/04 20:41:21]

Done.

+     */
+    draw: function() {
+      var totalWidth = previewArea.pdfPlugin_.offsetWidth;
+      var totalHeight = previewArea.pdfPlugin_.offsetHeight;
+      print_preview.MarginLine.drawLineUsingPixels(
+          this, this.rectangle, totalWidth, totalHeight);
+      print_preview.MarginLine.drawLineUsingPercent(
+          this.visibleLine, this.getVisibleLineCoordinates_());
+    },
+
+    /**
+     * Calucaltes the coordinates and size of |this|.

[Evan Stade, 2011/10/04 02:49:18]

sp

[dpapad, 2011/10/04 20:41:21]

Done.

+     * @param {print_preview.Rect} marginsRectangle A rectangle describing the
+     *     selected margins values in percentages.
+     * @private
+     */
+    getCoordinates_: function(marginsRectangle) {
+      var pageLocation = previewArea.getPageLocationNormalized();
+      var totalWidth = previewArea.pdfPlugin_.offsetWidth;
+      var totalHeight = previewArea.pdfPlugin_.offsetHeight;
+
+      if (this.isTop_()) {
+        var lineCoordinates = new print_preview.Rect(
+            pageLocation.x,
+            marginsRectangle.y -
+                (MarginLine.CLICKABLE_REGION / 2) / totalHeight,
+            pageLocation.width,
+            MarginLine.CLICKABLE_REGION / totalHeight);
+      } else if (this.isBottom_()) {
+        var lineCoordinates = new print_preview.Rect(
+            pageLocation.x,
+            marginsRectangle.y + marginsRectangle.height -
+                (MarginLine.CLICKABLE_REGION / 2) / totalHeight,
+            pageLocation.width,
+            MarginLine.CLICKABLE_REGION / totalHeight);
+      } else if (this.isRight_()) {
+        var lineCoordinates = new print_preview.Rect(
+            marginsRectangle.x + marginsRectangle.width -
+                (MarginLine.CLICKABLE_REGION / 2) / totalWidth,
+            pageLocation.y,
+            MarginLine.CLICKABLE_REGION / totalWidth,
+            pageLocation.height);
+      } else if (this.isLeft_()) {
+        var lineCoordinates = new print_preview.Rect(
+            marginsRectangle.x - (MarginLine.CLICKABLE_REGION / 2) / totalWidth,
+            pageLocation.y,
+            MarginLine.CLICKABLE_REGION / totalWidth,
+            pageLocation.height);
+      }
+      return lineCoordinates;
+    },
+
+    /**
+     * Calculates the coordinates in percentages and size of the visible margin
+     * line, with respect to |this| div element.
+     * @private
+     * @return {print_preview.Rect} A rectangle describing the position of the
+     *     visible line in percentages.
+     */
+    getVisibleLineCoordinates_: function() {
+      if (this.isHorizontal_()) {
+        var innerMarginsRect = new print_preview.Rect(
+            0, 0.5, 1, MarginLine.VISIBLE_LINE_WIDTH);
+      } else if (this.isVertical_()) {
+        var innerMarginsRect = new print_preview.Rect(
+            0.5, 0, MarginLine.VISIBLE_LINE_WIDTH, 1);
+      }
+      return innerMarginsRect;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| refers to the top margin.
+     */
+    isTop_: function() {
+      return this.getAttribute('margin-group') ==
+          print_preview.MarginSettings.TOP_GROUP_NAME;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| refers to the bottom margin.
+     */
+    isBottom_: function() {
+      return this.getAttribute('margin-group') ==
+          print_preview.MarginSettings.BOTTOM_GROUP_NAME;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| refers to the left margin.
+     */
+    isLeft_: function() {
+      return this.getAttribute('margin-group') ==
+          print_preview.MarginSettings.LEFT_GROUP_NAME;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| refers to the bottom margin.
+     */
+    isRight_: function() {
+      return this.getAttribute('margin-group') ==
+          print_preview.MarginSettings.RIGHT_GROUP_NAME;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| is a horizontal line.
+     */
+    isHorizontal_: function() {
+      return this.isTop_() || this.isBottom_() ;
+    },
+
+    /**
+     * @private
+     * @return {boolean} True if |this| is a vertical line.
+     */
+    isVertical_: function() {
+      return this.isLeft_() || this.isRight_();
+    },
+
+  };
+
+  return {
+    MarginLine: MarginLine
+  };
+});