Collision demo : prevent div resize out of bounds.

elbywan · Mar 29, 2017 · ca73654 · ca73654
1 parent 1302c56
commit ca73654
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/demo/common.js b/demo/common.js
@@ -51,8 +51,14 @@ var drawQuadtree = function(tree, fill, context) {
 var makeMovable = function(element, boundaryElement, callbacks) {
     var resizeAction = function(event) {
         var targetRect = element.getBoundingClientRect()
-        element.style.height = Math.max(5, event.clientY - targetRect.top)
-        element.style.width  = Math.max(5, event.clientX - targetRect.left)
+        if(boundaryElement) {
+            var boundaries = boundaryElement.getBoundingClientRect()
+            element.style.height = Math.max(5, Math.min(event.clientY - targetRect.top,  boundaries.bottom - targetRect.top))
+            element.style.width  = Math.max(5, Math.min(event.clientX - targetRect.left, boundaries.right  - targetRect.left))
+        } else {
+            element.style.height = Math.max(5, event.clientY - targetRect.top)
+            element.style.width  = Math.max(5, event.clientX - targetRect.left)
+        }
 
         if(callbacks && callbacks.onResize && typeof callbacks.onResize === "function") {
             callbacks.onResize()

diff --git a/docs/demo/common.js b/docs/demo/common.js
@@ -51,8 +51,14 @@ var drawQuadtree = function(tree, fill, context) {
 var makeMovable = function(element, boundaryElement, callbacks) {
     var resizeAction = function(event) {
         var targetRect = element.getBoundingClientRect()
-        element.style.height = Math.max(5, event.clientY - targetRect.top)
-        element.style.width  = Math.max(5, event.clientX - targetRect.left)
+        if(boundaryElement) {
+            var boundaries = boundaryElement.getBoundingClientRect()
+            element.style.height = Math.max(5, Math.min(event.clientY - targetRect.top,  boundaries.bottom - targetRect.top))
+            element.style.width  = Math.max(5, Math.min(event.clientX - targetRect.left, boundaries.right  - targetRect.left))
+        } else {
+            element.style.height = Math.max(5, event.clientY - targetRect.top)
+            element.style.width  = Math.max(5, event.clientX - targetRect.left)
+        }
 
         if(callbacks && callbacks.onResize && typeof callbacks.onResize === "function") {
             callbacks.onResize()