From fa49ae17e29beff8b34638551927851fc3e77f3c Mon Sep 17 00:00:00 2001
From: eliyahen1 <eli@purplebit.com>
Date: Thu, 31 Jul 2014 19:11:48 +0300
Subject: [PATCH 1/3] Update jquery.imgareaselect.dev.js

https://github.com/odyniec/imgareaselect/issues/39

It seems that the position of $outer parts are set to fixed when any of the IMG parents is fixed. This is true when you refer relatively to the body element.
But, if you set parent to an explicit element, and no fixed position is in between IMG element and parent element - the position of $outer should be 'absolute'.

Problem is, you determine and set the $outer position before you setSettings. So, the solution is to re-set it after you set options.

I ended up with this change:
In imgLoad function:
$box.add($outer).css({ visibility: '' , position: ($parent[0].tagName !== 'BODY'? 'absolute' : undefined) });
---
 jquery.imgareaselect.dev.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jquery.imgareaselect.dev.js b/jquery.imgareaselect.dev.js
index fe499a5..3b14cc6 100755
--- a/jquery.imgareaselect.dev.js
+++ b/jquery.imgareaselect.dev.js
@@ -763,7 +763,7 @@ $.imgAreaSelect = function (img, options) {
             onSelectEnd: function () {}
         }, options));
 
-        $box.add($outer).css({ visibility: '' });
+        $box.add($outer).css({ visibility: '' , position: ($parent[0].tagName !== 'BODY'? 'absolute' : undefined) });
         
         if (options.show) {
             shown = true;

From ca75147812ce2fc4669d76dbd730043396e67fba Mon Sep 17 00:00:00 2001
From: eliyahen1 <eli@purplebit.com>
Date: Fri, 8 Aug 2014 04:46:13 +0300
Subject: [PATCH 2/3] Update jquery.imgareaselect.dev.js

Bug Fixed: When minWidth / minHeight are greater than image size, the selection area is rendered out of the image.
Fix: Make sure the selection area is always inside the image boundaries (imageWidth & imageHeight must be defined).
---
 jquery.imgareaselect.dev.js | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/jquery.imgareaselect.dev.js b/jquery.imgareaselect.dev.js
index 3b14cc6..31b085d 100755
--- a/jquery.imgareaselect.dev.js
+++ b/jquery.imgareaselect.dev.js
@@ -308,8 +308,13 @@ $.imgAreaSelect = function (img, options) {
          * Check if selection area is within image boundaries, adjust if
          * necessary
          */
-        if (selection.x2 > imgWidth || selection.y2 > imgHeight)
+        if (selection.x2 > imgWidth || selection.y2 > imgHeight) {
+            x1 = min(max(x1, left), left + imgWidth);
+            y1 = min(max(y1, top), top + imgHeight);
+            x2 = x1 + selection.x2;
+            y2 = y1 + selection.y2;
             doResize();
+        }
     }
 
     /**
@@ -570,27 +575,35 @@ $.imgAreaSelect = function (img, options) {
          * image boundaries (it might not if the image source was dynamically
          * changed).
          */
-        x1 = min(x1, left + imgWidth);
-        y1 = min(y1, top + imgHeight);
+        x1 = min(max(x1, left), left + imgWidth);
+        y1 = min(max(y1, top), top + imgHeight);
         
         if (abs(x2 - x1) < minWidth) {
             /* Selection width is smaller than minWidth */
             x2 = x1 - minWidth * (x2 < x1 || -1);
 
-            if (x2 < left)
-                x1 = left + minWidth;
-            else if (x2 > left + imgWidth)
-                x1 = left + imgWidth - minWidth;
+            if (x2 < left) {
+                x1 = min(left + imgWidth, left + minWidth);
+                x2 = left;
+            }
+            else if (x2 > left + imgWidth) {
+                x1 = max(left, left + imgWidth - minWidth);
+                x2 = left + imgWidth;
+            }
         }
 
         if (abs(y2 - y1) < minHeight) {
             /* Selection height is smaller than minHeight */
             y2 = y1 - minHeight * (y2 < y1 || -1);
 
-            if (y2 < top)
-                y1 = top + minHeight;
-            else if (y2 > top + imgHeight)
-                y1 = top + imgHeight - minHeight;
+            if (y2 < top) {
+                y1 = min(top + imgHeight, top + minHeight);
+                y2 = top;
+            }
+            else if (y2 > top + imgHeight) {
+                y1 = max(top, top + imgHeight - minHeight);
+                y2 = top + imgHeight;
+            }
         }
 
         x2 = max(left, min(x2, left + imgWidth));

From 9e0b150c54ece30814e32dea4b6e277c3ecd71a8 Mon Sep 17 00:00:00 2001
From: eliyahen1 <eli@purplebit.com>
Date: Fri, 8 Aug 2014 04:51:07 +0300
Subject: [PATCH 3/3] Update jquery.imgareaselect.dev.js

Added options:
- disableCancelSelection: boolean (defaults: undefined/false), whether to disable cancel selection (selection is never hidden).
---
 jquery.imgareaselect.dev.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/jquery.imgareaselect.dev.js b/jquery.imgareaselect.dev.js
index 31b085d..0e70762 100755
--- a/jquery.imgareaselect.dev.js
+++ b/jquery.imgareaselect.dev.js
@@ -717,14 +717,17 @@ $.imgAreaSelect = function (img, options) {
     function cancelSelection() {
         $(document).unbind('mousemove', startSelection)
             .unbind('mouseup', cancelSelection);
-        hide($box.add($outer));
         
-        setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
-        
-        /* If this is an API call, callback functions should not be triggered */
-        if (!(this instanceof $.imgAreaSelect)) {
-            options.onSelectChange(img, getSelection());
-            options.onSelectEnd(img, getSelection());
+        if (!options.disableCancelSelection) {
+            hide($box.add($outer));
+            
+            setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
+            
+            /* If this is an API call, callback functions should not be triggered */
+            if (!(this instanceof $.imgAreaSelect)) {
+                options.onSelectChange(img, getSelection());
+                options.onSelectEnd(img, getSelection());
+            }
         }
     }