Print Preview: Making margin lines draggable.

chrome/browser/resources/print_preview/margins_ui_pair.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';
+
+  /**
+   * @constructor
+   * This class represents a margin line and a textbox corresponding to that
+   * margin.
+   */
+  function MarginsUIPair(groupName) {
+    var marginsUIPair = document.createElement('div');
+    marginsUIPair.__proto__ = MarginsUIPair.prototype;
+    marginsUIPair.className = MarginsUIPair.CSS_CLASS;
+    // @type {string} Specifies which margin this line refers to.
+    marginsUIPair.marginGroup = groupName;
+    marginsUIPair.classList.add(groupName);
+
+    // @type {print_preview.Rect} A rectangle describing the dimensions of
+    //     the draggable area.
+    marginsUIPair.rectangle = null;
+    // @type {print_preview.Rect} A rectangle describing the four margins.
+    marginsUIPair.marginsRectangle = null;
+    // @type {print_preview.MarginLine} The line representing the margin.
+    marginsUIPair.line_ = new print_preview.MarginLine(groupName);
+    // @type {print_preview.MarginTextbox} The textbox corresponding to this
+    //     margin.
+    marginsUIPair.box_ = new print_preview.MarginTextbox(groupName);
+    // @type {{x: number, y: number}} The point where mousedown occured within
+    //     the draggable area with respect the top-left corner of |this|.
+    marginsUIPair.mousePointerOffset = null;
+    // @type {{x: number, y:number}} The position of the origin before any
+    //     dragging in progress occured.
+    marginsUIPair.originBeforeDragging = null;
+
+    marginsUIPair.appendChild(marginsUIPair.line_);
+    marginsUIPair.appendChild(marginsUIPair.box_);
+
+    marginsUIPair.addEventListeners_();
+    return marginsUIPair;
+  }
+
+  MarginsUIPair.CSS_CLASS = 'margins-ui-pair';
+  // Width of the clickable region around each margin line in screen pixels.
+  MarginsUIPair.CLICKABLE_REGION = 20;
+
+  MarginsUIPair.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /**
+     * Updates the state.
+     */
+    update: function(marginsRectangle, value, valueLimit, keepDisplayedValue,
+        valueLimitInPercent) {
+      this.marginsRectangle = marginsRectangle;
+      this.valueLimitInPercent = valueLimitInPercent;
+      this.rectangle = this.getCoordinates_(this.marginsRectangle);
+      this.box_.update(value, valueLimit, keepDisplayedValue);
+    },
+
+    /**
+     * Draws |this| based on the state.
+     */
+    draw: function() {
+      this.drawDraggableArea_();
+      this.line_.draw();
+      this.box_.draw();
+    },
+
+    /**
+     * Draws the area that can be clicked in order to start dragging.
+     * @private
+     */
+    drawDraggableArea_: function() {
+      var width = previewArea.pdfPlugin_.offsetWidth;
+      var height = previewArea.pdfPlugin_.offsetHeight;
+
+      this.style.left = Math.round(this.rectangle.x * width) + 'px';
+      this.style.top = Math.round(this.rectangle.y * height) + 'px';
+      this.style.width = Math.round(this.rectangle.width * width) + 'px';
+      this.style.height = Math.round(this.rectangle.height * height) + 'px';
+    },
+
+    /**
+     * Calculates the coordinates and size of |this|.
+     * @param {print_preview.Rect} marginsRectangle A rectangle describing the
+     *     selected margins values in percentages.
+     * @private
+     */
+    getCoordinates_: function(marginsRectangle) {
+      var pageLocation = previewArea.pageLocationNormalized;
+      var totalWidth = previewArea.pdfPlugin_.offsetWidth;
+      var totalHeight = previewArea.pdfPlugin_.offsetHeight;
+      var offsetY = (MarginsUIPair.CLICKABLE_REGION / 2) / totalHeight;
+      var offsetX = (MarginsUIPair.CLICKABLE_REGION / 2) / totalWidth;
+
+      if (this.isTop_()) {
+        var lineCoordinates = new print_preview.Rect(
+            pageLocation.x,
+            marginsRectangle.y - offsetY,
+            pageLocation.width,
+            MarginsUIPair.CLICKABLE_REGION / totalHeight);
+      } else if (this.isBottom_()) {
+        var lineCoordinates = new print_preview.Rect(
+            pageLocation.x,
+            marginsRectangle.bottom - offsetY,
+            pageLocation.width,
+            MarginsUIPair.CLICKABLE_REGION / totalHeight);
+      } else if (this.isRight_()) {
+        var lineCoordinates = new print_preview.Rect(
+            marginsRectangle.right - offsetX,
+            pageLocation.y,
+            MarginsUIPair.CLICKABLE_REGION / totalWidth,
+            pageLocation.height);
+      } else if (this.isLeft_()) {
+        var lineCoordinates = new print_preview.Rect(
+            marginsRectangle.x - offsetX,
+            pageLocation.y,
+            MarginsUIPair.CLICKABLE_REGION / totalWidth,
+            pageLocation.height);
+      }
+      return lineCoordinates;
+    },
+
+    /**
+     * @return {boolean} True if |this| refers to the top margin.
+     * @private
+     */
+    isTop_: function() {
+      return this.marginGroup == print_preview.MarginSettings.TOP_GROUP;
+    },
+
+    /**
+     * @return {boolean} True if |this| refers to the bottom margin.
+     * @private
+     */
+    isBottom_: function() {
+      return this.marginGroup == print_preview.MarginSettings.BOTTOM_GROUP;
+    },
+
+    /**
+     * @return {boolean} True if |this| refers to the left margin.
+     * @private
+     */
+    isLeft_: function() {
+      return this.marginGroup == print_preview.MarginSettings.LEFT_GROUP;
+    },
+
+    /**
+     * @return {boolean} True if |this| refers to the bottom margin.
+     * @private
+     */
+    isRight_: function() {
+      return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP;
+    },
+
+    /**
+     * Adds event listeners for events related to dragging.
+     */
+    addEventListeners_: function() {
+      this.onmousedown = this.onMouseDown_.bind(this);
+    },
+
+    /**
+     * Executes whenever a mousedown event occurs on |this| or its child nodes.
+     * @parameter {MouseEvent} e The event that occured.
+     */
+    onMouseDown_: function(e) {
+      if (e.target != this)
+        return;
+      var point = print_preview.MarginsUI.convert({x: e.x, y: e.y});
+      this.originBeforeDragging = { x: this.offsetLeft, y: this.offsetTop };
+      this.mousePointerOffset =
+          { x: point.x - this.offsetLeft, y: point.y - this.offsetTop };
+      cr.dispatchSimpleEvent(this, 'MarginsLineMouseDown');
+    },
+
+    /**
+     * Executes whenever a mouseup event occurs while |this| is dragged.
+     */
+    onMouseUp: function() {
+      this.box_.onTextValueMayHaveChanged();
+    },
+
+    /**
+     * Moves |this| including all its children to |point|.
+     * @param {{x: number, y: number}} point The point where |this| should be
+     *     moved.
+     */
+    moveTo: function(point) {
+      if (this.isTop_() || this.isBottom_())
+        this.style.top = point.y  - this.mousePointerOffset.y + 'px';
+      else
+        this.style.left = point.x - this.mousePointerOffset.x + 'px';
+    },
+
+    /**
+     * @param {{x: number, y: number}} rhs The point to compare with.
+     * @return {number} The horizontal or vertical displacement in pixels
+     *     between |this.originBeforeDragging| and |rhs|. Note: Bottom margin
+     *     grows upwards, right margin grows when going to the left.
+     */
+    getDragDisplacementFrom: function(rhs) {
+      var dragDisplacement = 0;
+      if (this.isTop_() || this.isBottom_()) {
+        dragDisplacement = (rhs.y - this.originBeforeDragging.y -
+            this.mousePointerOffset.y) / previewArea.height;
+      } else {
+        dragDisplacement = (rhs.x - this.originBeforeDragging.x -
+            this.mousePointerOffset.x) / previewArea.width;
+      }
+
+      if (this.isBottom_() || this.isRight_())
+        dragDisplacement *= -1;
+      return dragDisplacement;
+    },
+
+    /**
+     * Updates |this| while dragging is in progress. Takes care of rejecting
+     * invalid margin values.
+     * @param {number} dragDeltaInPoints The difference in points between the
+     *     currently applied margin and the margin indicated by
+     *     |destinationPoint|.
+     * @param {{x: number, y: number}} destinationPoint The point where the
+     *     margin line should be drawn if |dragDeltaInPoints| is applied.
+     */
+    updateWhileDragging: function(dragDeltaInPoints, destinationPoint) {
+      this.box_.updateWhileDragging(dragDeltaInPoints);
+      var validity = this.box_.validateDelta(dragDeltaInPoints);
+      if (validity == 0)
+        this.moveTo(destinationPoint);
+      else if (validity == -1)
+        this.snapToMinValue_();
+      else if (validity == 1)
+        this.snapToMaxValue_();
+    },
+
+    /**
+     * Snaps |this| to the minimum allowed margin value (0). Happens whenever
+     * the user drags the margin line to a smaller value than the minimum
+     * allowed.
+     * @private
+     */
+    snapToMinValue_: function() {
+      var pageInformation = previewArea.pageLocationNormalized;
+      var newMarginsRectangle = this.marginsRectangle.clone();
+      if (this.isTop_()) {
+        newMarginsRectangle.y = pageInformation.y;
+      } else if (this.isLeft_()) {
+        newMarginsRectangle.x = pageInformation.x;
+      } else if (this.isRight_()) {
+        newMarginsRectangle.x = pageInformation.x;
+        newMarginsRectangle.width = pageInformation.width;
+      } else if (this.isBottom_()) {
+        newMarginsRectangle.y = pageInformation.y;
+        newMarginsRectangle.height = pageInformation.height;
+      }
+
+      this.rectangle = this.getCoordinates_(newMarginsRectangle);
+      this.drawDraggableArea_();
+    },
+
+    /**
+     * Snaps |this| to the maximum allowed margin value. Happens whenever
+     * the user drags the margin line to a larger value than the maximum
+     * allowed.
+     * @private
+     */
+    snapToMaxValue_: function() {
+      var newMarginsRectangle = this.marginsRectangle.clone();
+
+      if (this.isTop_()) {
+        newMarginsRectangle.y = this.valueLimitInPercent;
+      } else if (this.isLeft_()) {
+        newMarginsRectangle.x = this.valueLimitInPercent;
+      } else if (this.isRight_()) {
+        newMarginsRectangle.x = 0;
+        newMarginsRectangle.width = this.valueLimitInPercent;
+      } else if (this.isBottom_()) {
+        newMarginsRectangle.y = 0;
+        newMarginsRectangle.height = this.valueLimitInPercent;
+      }
+
+      this.rectangle = this.getCoordinates_(newMarginsRectangle);
+      this.drawDraggableArea_();
+    },
+  };
+
+  return {
+    MarginsUIPair: MarginsUIPair
+  };
+});