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
-      , x = data.x
-      , y = data.y;
-
-    while (el = el.parent) {
-      x -= el.rleft;
-      y -= el.rtop;
-    }
-
-    self._drag = { x: x, y: y };
+    if (self._drag) return;
+    self._drag = {
+      x: data.x - self.aleft,
+      y: data.y - self.atop
+    };
   });
 
   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 oy = self._drag.y;
-      var px = self.parent.aleft;
-      var py = self.parent.atop;
-      var x = data.x - px;
-      var y = data.y - py;
-      self.rleft = x;
-      self.rtop = y;
-      self.screen.render();
-    }
+
+    var ox = self._drag.x
+      , oy = self._drag.y
+      , px = self.parent.aleft
+      , py = self.parent.atop
+      , x = data.x - px - ox
+      , 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,47 +4059,49 @@ Element.prototype.render = function() {
     for (; y < yl - 1; y++) {
       if (!lines[y]) continue;
       cell = lines[y][xi];
-      if (!cell) continue;
-      if (this.border.left) {
-        if (this.border.type === 'line') {
-          ch = '\u2502'; // '│'
-        } else if (this.border.type === 'bg') {
-          ch = this.border.ch;
-        }
-        if (!coords.noleft)
-        if (battr !== cell[0] || ch !== cell[1]) {
-          lines[y][xi][0] = battr;
-          lines[y][xi][1] = ch;
-          lines[y].dirty = true;
-        }
-      } else {
-        ch = ' ';
-        if (dattr !== cell[0] || ch !== cell[1]) {
-          lines[y][xi][0] = dattr;
-          lines[y][xi][1] = ch;
-          lines[y].dirty = true;
+      if (cell) {
+        if (this.border.left) {
+          if (this.border.type === 'line') {
+            ch = '\u2502'; // '│'
+          } else if (this.border.type === 'bg') {
+            ch = this.border.ch;
+          }
+          if (!coords.noleft)
+          if (battr !== cell[0] || ch !== cell[1]) {
+            lines[y][xi][0] = battr;
+            lines[y][xi][1] = ch;
+            lines[y].dirty = true;
+          }
+        } else {
+          ch = ' ';
+          if (dattr !== cell[0] || ch !== cell[1]) {
+            lines[y][xi][0] = dattr;
+            lines[y][xi][1] = ch;
+            lines[y].dirty = true;
+          }
         }
       }
       cell = lines[y][xl - 1];
-      if (!cell) continue;
-      if (this.border.right) {
-        if (this.border.type === 'line') {
-          ch = '\u2502'; // '│'
-        } else if (this.border.type === 'bg') {
-          ch = this.border.ch;
-        }
-        if (!coords.noright)
-        if (battr !== cell[0] || ch !== cell[1]) {
-          lines[y][xl - 1][0] = battr;
-          lines[y][xl - 1][1] = ch;
-          lines[y].dirty = true;
-        }
-      } else {
-        ch = ' ';
-        if (dattr !== cell[0] || ch !== cell[1]) {
-          lines[y][xl - 1][0] = dattr;
-          lines[y][xl - 1][1] = ch;
-          lines[y].dirty = true;
+      if (cell) {
+        if (this.border.right) {
+          if (this.border.type === 'line') {
+            ch = '\u2502'; // '│'
+          } else if (this.border.type === 'bg') {
+            ch = this.border.ch;
+          }
+          if (!coords.noright)
+          if (battr !== cell[0] || ch !== cell[1]) {
+            lines[y][xl - 1][0] = battr;
+            lines[y][xl - 1][1] = ch;
+            lines[y].dirty = true;
+          }
+        } else {
+          ch = ' ';
+          if (dattr !== cell[0] || ch !== cell[1]) {
+            lines[y][xl - 1][0] = dattr;
+            lines[y][xl - 1][1] = ch;
+            lines[y].dirty = true;
+          }
         }
       }
     }