Make draft RegionCommentBlock movable and resizable

Review Request #6974 — Created Feb. 23, 2015 and submitted

Information

Review Board
master
21f6bfd...

Reviewers

Make draft RegionCommentBlock movable and resizable.

Currently, a RegionCommentBlock is not movable or resizable, even if it is a draft. This change makes draft RegionCommentBlocks movable or resizable by drag-and-drop'ing left-top or right bottom corner of them. Users finish resizing by mouse-up action, and the draft RegionCommentBlock's new bound is saved on server. RegionCommentBlockView handles mouseup and mousedown, and simulate click event if mouseup happened w/o any drag. Click on RegionCommentBlockView shows the comment inside, and shows an editor to change it, if any comment in the block is a draft.

I made this RR to combine two RRs:
https://reviews.reviewboard.org/r/6886/
https://reviews.reviewboard.org/r/6919/
and fix click/drag-and-drop bugs in them.

Passed all tests in "/js-test/".

Browser test done:
1. Go to file attachment review page, for example, http://localhost:8080/r/7/file/4/
2. Make draft comment
3. Try moving
4. Try resizing
5. Refresh the page
6. See if the bounds updated

Edge cases tested:
1. Open file attachment review page, make resize/move "once" and refresh. => Fixed and working well.
2. Try click-and-drag non-draft commentBlocks. => Non-drafy commentBlcoks are not movable. Working as expected.

reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/static/rb/js/views/abstractCommentBlockView.js
        reviewboard/static/rb/js/utils/mathUtils.js
        reviewboard/static/rb/js/resources/models/tests/baseResourceModelTests.js
        reviewboard/static/rb/css/pages/image-review-ui.less
        reviewboard/static/rb/js/models/regionCommentBlockModel.js
        reviewboard/static/rb/js/views/regionCommentBlockView.js
        reviewboard/static/rb/js/views/imageReviewableView.js
        reviewboard/static/rb/js/resources/models/baseResourceModel.js
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/static/rb/js/views/abstractCommentBlockView.js
        reviewboard/static/rb/js/utils/mathUtils.js
        reviewboard/static/rb/js/resources/models/tests/baseResourceModelTests.js
        reviewboard/static/rb/css/pages/image-review-ui.less
        reviewboard/static/rb/js/models/regionCommentBlockModel.js
        reviewboard/static/rb/js/views/regionCommentBlockView.js
        reviewboard/static/rb/js/views/imageReviewableView.js
        reviewboard/static/rb/js/resources/models/baseResourceModel.js
    
    
  2. 
      
YY
david
  1. Running with the latest patch, I seem to be able to resize a comment outside of the image bounds.

    1. I tried to reproduce it several times, but I couldn't. Could you share how you did that? Maybe sharing the image file would be helpful?

    2. So because of the CSS, while you're dragging, if your mouse leaves the image area, the box will disappear, however, I was still able to keep dragging even though I couldn't see it. Once I released, if I hover over the image again, the region is now partially outside the image. It does seem to clip correctly on the right side, just not the bottom.

  2. 
      
YY
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/static/rb/js/views/abstractCommentBlockView.js
        reviewboard/static/rb/js/utils/mathUtils.js
        reviewboard/static/rb/js/resources/models/tests/baseResourceModelTests.js
        reviewboard/static/rb/css/pages/image-review-ui.less
        reviewboard/static/rb/js/models/regionCommentBlockModel.js
        reviewboard/static/rb/js/views/regionCommentBlockView.js
        reviewboard/static/rb/js/views/imageReviewableView.js
        reviewboard/static/rb/js/resources/models/baseResourceModel.js
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/static/rb/js/views/abstractCommentBlockView.js
        reviewboard/static/rb/js/utils/mathUtils.js
        reviewboard/static/rb/js/resources/models/tests/baseResourceModelTests.js
        reviewboard/static/rb/css/pages/image-review-ui.less
        reviewboard/static/rb/js/models/regionCommentBlockModel.js
        reviewboard/static/rb/js/views/regionCommentBlockView.js
        reviewboard/static/rb/js/views/imageReviewableView.js
        reviewboard/static/rb/js/resources/models/baseResourceModel.js
    
    
  2. 
      
david
  1. Ship It!
  2. 
      
YY
Review request changed
Status:
Completed
Change Summary:
Pushed to master (9468ea2)