better dragging.

README.md

@@ -507,6 +507,7 @@ The base element.
 - __enableKeys()__ - enable keypress events for the element (automatically called when a form of on('keypress') is bound).
 - __enableInput()__ - enable key and mouse events. calls bot enableMouse and enableKeys.
 - __enableDrag()__ - enable dragging of the element.
+- __disableDrag()__ - disable dragging of the element.
 
 ###### Content Methods
 

lib/widget.js

@@ -2668,34 +2668,31 @@ Element.prototype.enableDrag = function() {
   this.enableMouse();
 
   this.on('mousedown', this._dragMD = function(data) {
-    var el = self
+    if (self._drag) return;
-      , x = data.x
+    self._drag = {
-      , y = data.y;
+      x: data.x - self.aleft,
-
+      y: data.y - self.atop
-    while (el = el.parent) {
+    };
-      x -= el.rleft;
-      y -= el.rtop;
-    }
-
-    self._drag = { x: x, y: y };
   });
 
   this.screen.on('mouse', this._dragM = function(data) {
+    if (!self._drag) return;
+
     if (data.action !== 'mousedown') {
       delete self._drag;
       return;
     }
-    if (self._drag) {
+
-      var ox = self._drag.x;
+    var ox = self._drag.x
-      var oy = self._drag.y;
+      , oy = self._drag.y
-      var px = self.parent.aleft;
+      , px = self.parent.aleft
-      var py = self.parent.atop;
+      , py = self.parent.atop
-      var x = data.x - px;
+      , x = data.x - px - ox
-      var y = data.y - py;
+      , y = data.y - py - oy;
+
     self.rleft = x;
     self.rtop = y;
     self.screen.render();
-    }
   });
 
   return this._draggable = true;
@@ -3766,6 +3763,31 @@ Element.prototype.render = function() {
     , i
     , bch = this.ch;
 
+  // Clip content if it's off the edge of the screen
+  // if (xi + this.ileft < 0 || yi + this.itop < 0) {
+  //   var clines = this._clines.slice();
+  //   if (xi + this.ileft < 0) {
+  //     for (var i = 0; i < clines.length; i++) {
+  //       var t = 0;
+  //       var csi = '';
+  //       var csis = '';
+  //       for (var j = 0; j < clines[i].length; j++) {
+  //         while (clines[i][j] === '\x1b') {
+  //           csi = '\x1b';
+  //           while (clines[i][j++] !== 'm') csi += clines[i][j];
+  //           csis += csi;
+  //         }
+  //         if (++t === -(xi + this.ileft) + 1) break;
+  //       }
+  //       clines[i] = csis + clines[i].substring(j);
+  //     }
+  //   }
+  //   if (yi + this.itop < 0) {
+  //     clines = clines.slice(-(yi + this.itop));
+  //   }
+  //   content = clines.join('\n');
+  // }
+
   if (coords.base >= this._clines.ci.length) {
     ci = this._pcontent.length;
   }
@@ -3839,10 +3861,22 @@ Element.prototype.render = function() {
 
   // Draw the content and background.
   for (y = yi; y < yl; y++) {
-    if (!lines[y]) break;
+    if (!lines[y]) {
+      if (y >= this.screen.height || yl < this.ibottom) {
+        break;
+      } else {
+        continue;
+      }
+    }
     for (x = xi; x < xl; x++) {
       cell = lines[y][x];
-      if (!cell) break;
+      if (!cell) {
+        if (x >= this.screen.width || xl < this.iright) {
+          break;
+        } else {
+          continue;
+        }
+      }
 
       ch = content[ci++] || bch;
 
@@ -4025,7 +4059,7 @@ Element.prototype.render = function() {
     for (; y < yl - 1; y++) {
       if (!lines[y]) continue;
       cell = lines[y][xi];
-      if (!cell) continue;
+      if (cell) {
         if (this.border.left) {
           if (this.border.type === 'line') {
             ch = '\u2502'; // '│'
@@ -4046,8 +4080,9 @@ Element.prototype.render = function() {
             lines[y].dirty = true;
           }
         }
+      }
       cell = lines[y][xl - 1];
-      if (!cell) continue;
+      if (cell) {
         if (this.border.right) {
           if (this.border.type === 'line') {
             ch = '\u2502'; // '│'
@@ -4069,6 +4104,7 @@ Element.prototype.render = function() {
           }
         }
       }
+    }
     y = yl - 1;
     if (coords.nobot) y = -1;
     for (x = xi; x < xl; x++) {