Update 02 Version 1.2

MustafaHi · MustafaHi · commit c7cf80bc94eb · 2021-02-25T15:47:31.000+03:00
Screen Bound
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# MovableView
+# MovableView v1.2
 Movable view for Sciter windows, allows you to move the window using any element in it.  
 Advantages:
 1. Cheating windows performance setting, you will see the full window and not just a rectangle while moving it in performance mode.
-2. Smoothed movement.
+2. Optional prevent crossing screen bounds.
 
 Using inside a compiled application should use less than 1% CPU (while moving the view).
 
@@ -24,6 +24,7 @@ include "movableView.tis";
 
 Then initiate it by calling
 ```js
-movableView("selector");
+movableView("selector" [, screenBound:bool(false)]);
 ```
-with the selector being any CSS selector i.e. `div` `.div` `#div`
+with the selector being any CSS selector i.e. `div` `.div` `#div`  
+the second parameter will prevent window from going past the screen boundaries.
diff --git a/demo.htm b/demo.htm
@@ -1,8 +1,8 @@
 <html window-frame="transparent">
 <head>
-  <title>Moveable View</title>
+  <title>MovableView</title>
   <style>
-    .header {
+    .header, .footer {
       padding: 10dip;
       background: #ddd;
     }
@@ -14,11 +14,12 @@
   <script src="movableView.tis" type="text/tiscript"></script>
   <script type="text/tiscript">
     movableView(".header");
+    movableView(".footer", true);
   </script>
 </head>
 <body>
   <div class="header">Header</div>
-  <div class="content">Content - Grab the header or footer to move</div>
-  <div class="header">Footer</div>
+  <div class="content">Content - Grab the header or footer to move (footer will not allow you to cross screen bounds)</div>
+  <div class="footer">Footer</div>
 </body>
 </html>
diff --git a/movableView.tis b/movableView.tis
@@ -1,44 +1,63 @@
-// Movable View v1.1
+// Movable View v1.2
 // https://github.com/MustafaHi/Sciter-MovableView
 
-// Call movableView('.selector');
-function movableView(s)
+// Call movableView('selector' [, screenBound:bool(false)]);
+function movableView(s, screenBound = false)
 {
-  var xoff,yoff;
+  var xoff,yoff, minXY, maxX, maxY;
   var dragging = false;
+  
   function doDrag() { while( dragging ) view.doEvent(); }
+
+  function screenBounds()
+  {
+    if (screenBound)
+    {
+      (maxX, maxY) = view.screenBox(#workarea, #dimension);
+      var (w, h)   = view.box(#dimension, #border);
+      maxX -= w;
+      maxY -= h;
+      minXY = 0;
+    }
+    else
+    {
+      (maxX, maxY) = Integer.MAX;
+             minXY = Integer.MIN;
+    }
+  }
     
   function onMouseDown(e)
   {
-    if(!e.target.$is({s}) ){ return false; }
+    if(!e.target.$is({s}) ) { return false; }
+
+    screenBounds();
     e.target.capture(true);
     xoff = e.xView; yoff = e.yView;
     dragging = true;
     doDrag();
   }
-    
+  
   function onMouseMove(e)
   {
-    if( dragging )
+    if(dragging)
     {
-      view.move( e.xScreen - xoff, e.yScreen - yoff, false);
-      return true;
+      view.move( (e.xScreen - xoff).limit(minXY, maxX), (e.yScreen - yoff).limit(minXY, maxY), false );
     }
     return true;
   }
     
-  function stopDrag(e)
+  function onMouseUp(e)
   {
-    if(dragging) { dragging = false; e.target.capture(false); return true; }
-    return false;
+    if(dragging) { dragging = false; e.target.capture(false); }
+    return true;
   }
     
-  function onKeyDown(e) { if(e.keyCode == Event.VK_ESCAPE ) return stopDrag(e); }
-    for(var i=0; i<$$({s}).length; ++i) {
-      $$({s})[i].subscribe(onMouseDown, Event.MOUSE, Event.MOUSE_DOWN );
-      $$({s})[i].subscribe(stopDrag, Event.MOUSE, Event.MOUSE_UP );
-      $$({s})[i].subscribe(onMouseMove, Event.MOUSE, Event.MOUSE_MOVE );
-      $$({s})[i].subscribe(onKeyDown, Event.KEY, Event.KEY_DOWN );
+    const elements = $$({s});
+    for(var i=0; i<elements.length; ++i) {
+      elements[i].subscribe(onMouseDown, Event.MOUSE, Event.MOUSE_DOWN );
+      elements[i].subscribe(onMouseUp,   Event.MOUSE, Event.MOUSE_UP   );
+      elements[i].subscribe(onMouseMove, Event.MOUSE, Event.MOUSE_MOVE );
     }
-  return false;
+  return true;
 }
+
