From 65ab9d1780335f6bae564b25f328807beca0ad31 Mon Sep 17 00:00:00 2001
From: Bob Trahan <bob.trahan@gmail.com>
Date: Wed, 10 Jul 2013 15:17:10 -0700
Subject: [PATCH] Pholio - make inline comment box appear correctly

Summary: Fixes T3509. Generally tried to make the code more consistently use get_image_scale, as well as make get_image_scale aware that sometimes images need to be scaled because they're too tall (as well as too wide).

Test Plan: used the file from T3509. noted comment box appearing correctly as clicked, or clicked and dragged. submitted some comments and noted the reticles moved / scaled correctly as I resized the browser window

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T3509

Differential Revision: https://secure.phabricator.com/D6418
---
 .../pholio/behavior-pholio-mock-view.js            | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
index 77b63a4098..1b0b6c0f74 100644
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -311,6 +311,7 @@ JX.behavior('pholio-mock-view', function(config) {
       }
 
       drag_end = get_image_xy(JX.$V(e));
+      var scale = get_image_scale();
 
       resize_selection(16);
 
@@ -319,10 +320,9 @@ JX.behavior('pholio-mock-view', function(config) {
         var dialog = JX.$H(r).getFragment().firstChild;
         JX.DOM.appendContent(viewport, dialog);
 
-        JX.$V(
-          Math.min(drag_begin.x, drag_end.x),
-          Math.max(drag_begin.y, drag_end.y) + 4
-        ).setPos(dialog);
+        var x = Math.min(drag_begin.x * scale, drag_end.x * scale);
+        var y = Math.max(drag_begin.y * scale, drag_end.y * scale) + 4;
+        JX.$V(x, y).setPos(dialog);
 
         JX.DOM.focus(JX.DOM.find(dialog, 'textarea'));
       };
@@ -420,7 +420,7 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   function position_inline_rectangle(inline, rect) {
-    var scale = active_image.tag.width / active_image.tag.naturalWidth;
+    var scale = get_image_scale();
 
     JX.$V(scale * inline.x, scale * inline.y).setPos(rect);
     JX.$V(scale * inline.width, scale * inline.height).setDim(rect);
@@ -443,7 +443,9 @@ JX.behavior('pholio-mock-view', function(config) {
 
   function get_image_scale() {
     var img = active_image.tag;
-    return img.width / img.naturalWidth;
+    return Math.min(
+      img.width / img.naturalWidth,
+      img.height / img.naturalHeight);
   }
 
   function redraw_selection() {