Select portions from mock

Summary: Applied fixes for issues mentioned in D4737#1&2

Test Plan: Verified that scripts seem to work as intended.

Reviewers: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D4782

src/applications/pholio/view/PholioMockImagesView.php

@@ -13,19 +13,37 @@ final class PholioMockImagesView extends AphrontView {
       throw new Exception("Call setMock() before render()!");
     }
 
+    $main_image_id = celerity_generate_unique_node_id();
+    require_celerity_resource('javelin-behavior-pholio-mock-view');
+    $config = array('mainID' => $main_image_id);
+    Javelin::initBehavior('pholio-mock-view', $config);
+
     $mockview = "";
 
-    $file = head($this->mock->getImages())->getFile();
+    $main_image = head($this->mock->getImages());
 
-    $main_image_id = celerity_generate_unique_node_id();
-
-    $main_image_tag = phutil_render_tag(
+      $main_image_tag = javelin_render_tag(
       'img',
       array(
-        'src' => $file->getBestURI(),
-        'class' => 'pholio-mock-image',
         'id' => $main_image_id,
-      ));
+        'src' => $main_image->getFile()->getBestURI(),
+        'sigil' => 'mock-image',
+        'class' => 'pholio-mock-image',
+        'meta' => array(
+          'fullSizeURI' => $main_image->getFile()->getBestURI(),
+          'imageID' => $main_image->getID(),
+        ),
+    ));
+
+    $main_image_tag = javelin_render_tag(
+      'div',
+      array(
+        'id' => 'mock-wrapper',
+        'sigil' => 'mock-wrapper',
+        'class' => 'pholio-mock-wrapper'
+      ),
+      $main_image_tag
+    );
 
     $mockview .= phutil_render_tag(
       'div',
@@ -35,10 +53,6 @@ final class PholioMockImagesView extends AphrontView {
       $main_image_tag);
 
     if (count($this->mock->getImages()) > 1) {
-      require_celerity_resource('javelin-behavior-pholio-mock-view');
-      $config = array('mainID' => $main_image_id);
-      Javelin::initBehavior('pholio-mock-view', $config);
-
       $thumbnails = array();
       foreach ($this->mock->getImages() as $image) {
         $thumbfile = $image->getFile();
@@ -51,7 +65,7 @@ final class PholioMockImagesView extends AphrontView {
             'class' => 'pholio-mock-carousel-thumbnail',
             'meta' => array(
               'fullSizeURI' => $thumbfile->getBestURI(),
-              'imageID' => $image->getID(),
+              'imageID' => $image->getID()
             ),
         ));
         $thumbnails[] = $tag;
@@ -67,5 +81,4 @@ final class PholioMockImagesView extends AphrontView {
 
     return $mockview;
   }
-
 }

webroot/rsrc/css/application/pholio/pholio.css

@@ -18,6 +18,19 @@
 }
 
 .pholio-mock-image {
-  margin: 10px 0px;
   display: inline-block;
 }
+
+.pholio-mock-select {
+    border: 1px solid #FF0000;
+    position: absolute;
+}
+
+.pholio-mock-wrapper {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  padding: 0px;
+  margin: 10px 0px;
+}
+

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -2,8 +2,19 @@
  * @provides javelin-behavior-pholio-mock-view
  * @requires javelin-behavior
  *           javelin-stratcom
+ *           javelin-dom
+ *           javelin-vector
+ *           javelin-event
  */
 JX.behavior('pholio-mock-view', function(config) {
+  var is_dragging = false;
+  var wrapper = JX.$('mock-wrapper');
+  var image;
+  var imageData;
+  var startPos;
+  var endPos;
+  var selection;
+
   JX.Stratcom.listen(
     'click', // Listen for clicks...
     'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
@@ -11,7 +22,106 @@ JX.behavior('pholio-mock-view', function(config) {
       var data = e.getNodeData('mock-thumbnail');
 
       var main = JX.$(config.mainID);
+      JX.Stratcom.addData(
+        main,
+        {
+          fullSizeURI: data['fullSizeURI'],
+          imageID: data['imageID']
+        });
+
       main.src = data.fullSizeURI;
+
+      JX.DOM.setContent(wrapper,main);
     });
+
+
+  function draw_rectangle(node, current, init) {
+    JX.$V(
+      Math.abs(current.x-init.x),
+      Math.abs(current.y-init.y))
+    .setDim(node);
+
+    JX.$V(
+      (current.x-init.x < 0) ? current.x:init.x,
+      (current.y-init.y < 0) ? current.y:init.y)
+    .setPos(node);
+  }
+
+  function getRealXY(parent, point) {
+    var pos = {x: (point.x - parent.x), y: (point.y - parent.y)};
+
+    if (pos.x < 0) pos.x = 0;
+    else if (pos.x > image.clientWidth) pos.x = image.clientWidth - 1;
+
+    if (pos.y < 0) pos.y = 0;
+    else if (pos.y > image.clientHeight) pos.y = image.clientHeight - 2;
+
+    return pos;
+  }
+
+  JX.Stratcom.listen('mousedown', 'mock-wrapper', function(e) {
+    if (!e.isNormalMouseEvent()) {
+      return;
+    }
+
+    image = JX.$(config.mainID);
+    imageData = JX.Stratcom.getData(image);
+
+    e.getRawEvent().target.draggable = false;
+    is_dragging = true;
+
+    startPos = getRealXY(JX.$V(wrapper),JX.$V(e));
+
+    selection = JX.$N(
+      'div',
+      {className: 'pholio-mock-select'}
+    );
+
+
+    JX.$V(startPos.x,startPos.y).setPos(selection);
+
+    JX.DOM.appendContent(wrapper, selection);
+
+
+  });
+
+  JX.enableDispatch(document.body, 'mousemove');
+  JX.Stratcom.listen('mousemove',null, function(e) {
+    if (!is_dragging) {
+      return;
+    }
+
+    draw_rectangle(selection, getRealXY(JX.$V(wrapper), JX.$V(e)), startPos);
+  });
+
+  JX.Stratcom.listen(
+    'mouseup',
+    null,
+    function(e) {
+      if (!is_dragging) {
+        return;
+      }
+      is_dragging = false;
+
+      endPos = getRealXY(JX.$V(wrapper), JX.$V(e));
+
+      comment = window.prompt("Add your comment");
+      if (comment == null || comment == "") {
+        selection.remove();
+        return;
+      }
+
+      selection.title = comment;
+
+      console.log("ImageID: " + imageData['imageID'] +
+        ", coords: (" + Math.min(startPos.x, endPos.x) + "," +
+        Math.min(startPos.y, endPos.y) + ") -> (" +
+        Math.max(startPos.x,endPos.x) + "," + Math.max(startPos.y,endPos.y) +
+        "), comment: " + comment);
+
+    });
+
 });
 
+
+