add debug window and draggable option for all elements.

README.md

@@ -215,7 +215,9 @@ The screen on which every other node renders.
 - __log__ - create a log file. see `log` method.
 - __dump__ - dump all output and input to desired file. can be used together
   with `log` option if set as a boolean.
-- __debug__ - debug mode. enables usage of the `debug` method.
+- __debug__ - debug mode. enables usage of the `debug` method. also creates a
+  debug console which will display when pressing F12. it will display all log
+  and debug messages.
 - __ignoreLocked__ - Array of keys in their full format (e.g. `C-c`) to ignore
   when keys are locked. Useful for creating a key that will _always_ exit no
   matter whether the keys are locked.
@@ -362,6 +364,7 @@ The base element.
 - __position__ - can contain the above options.
 - __scrollable__ - whether the element is scrollable or not.
 - __ch__ - background character (default is whitespace ` `).
+- __draggable__ - allow the element to be dragged with the mouse.
 
 ##### Properties:
 
@@ -392,6 +395,8 @@ The base element.
 - __aright__ - calculated absolute right offset.
 - __atop__ - calculated absolute top offset.
 - __abottom__ - calculated absolute bottom offset.
+- __draggable__ - whether the element is draggable. set to true to allow
+  dragging.
 
 ##### Events:
 
@@ -438,6 +443,7 @@ The base element.
 - __enableMouse()__ - enable mouse events for the element (automatically called when a form of on('mouse') is bound).
 - __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.
 
 ###### Content Methods
 

lib/widget.js

@@ -414,6 +414,8 @@ function Screen(options) {
   });
 
   this.enter();
+
+  this.postEnter();
 }
 
 Screen.global = null;
@@ -466,11 +468,68 @@ Screen.prototype.leave = function() {
   this.program.flush();
 };
 
+Screen.prototype.postEnter = function() {
+  var self = this;
+  if (this.options.debug) {
+    this._debugLog = new Log({
+      parent: this,
+      hidden: true,
+      draggable: true,
+      left: 'center',
+      top: 'center',
+      width: '30%',
+      height: '30%',
+      border: 'bg',
+      label: ' {bold}Debug Log{/bold} ',
+      tags: true,
+      keys: true,
+      vi: true,
+      mouse: true,
+      style: {
+        border: {
+          bg: 'red'
+        }
+      },
+      scrollbar: {
+        ch: ' ',
+        track: {
+          bg: 'yellow'
+        },
+        style: {
+          inverse: true
+        }
+      }
+    });
+
+    this._debugLog._.toggle = function() {
+      if (self._debugLog.hidden) {
+        self.saveFocus();
+        self._debugLog.show();
+        self._debugLog.setFront();
+        self._debugLog.focus();
+      } else {
+        self._debugLog.hide();
+        self.restoreFocus();
+      }
+      self.render();
+    };
+
+    this._debugLog.key(['q', 'escape'], self._debugLog._.toggle);
+    this.key('f12', self._debugLog._.toggle);
+  }
+};
+
 Screen.prototype.log = function() {
+  if (this._debugLog) {
+    this._debugLog.log.apply(this._debugLog, arguments);
+  }
   return this.program.log.apply(this.program, arguments);
 };
 
 Screen.prototype.debug = function() {
+  if (this._debugLog) {
+    this._debugLog.log.apply(this._debugLog, arguments);
+  }
   return this.program.debug.apply(this.program, arguments);
 };
 
@@ -2100,6 +2159,10 @@ function Element(options) {
     self.screen.setEffects(self, self, over, out, self.options[pname], temp);
   });
 
+  if (this.options.draggable) {
+    this.draggable = true;
+  }
+
   if (options.focused) {
     this.focus();
   }
@@ -2558,6 +2621,63 @@ Element.prototype.enableInput = function() {
   this.screen._listenKeys(this);
 };
 
+Element.prototype.__defineGetter__('draggable', function() {
+  return this._draggable === true;
+});
+
+Element.prototype.__defineSetter__('draggable', function(draggable) {
+  return draggable ? this.enableDrag() : this.disableDrag();
+});
+
+Element.prototype.enableDrag = function() {
+  var self = this;
+
+  if (this._draggable) return true;
+
+  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 };
+  });
+
+  this.screen.on('mouse', this._dragM = function(data) {
+    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();
+    }
+  });
+
+  return this._draggable = true;
+};
+
+Element.prototype.disableDrag = function() {
+  if (!this._draggable) return false;
+  delete this._drag;
+  this.removeListener('mousedown', this._dragMD);
+  this.screen.removeListener('mouse', this._dragM);
+  return this._draggable = false;
+};
+
 Element.prototype.key = function() {
   return this.screen.program.key.apply(this, arguments);
 };

test/widget.js

@@ -10,9 +10,12 @@ screen = blessed.screen({
     shape: 'line',
     blink: true,
     color: null
-  }
+  },
+  debug: true
 });
 
+screen.debug('test');
+
 screen.append(blessed.text({
   top: 0,
   left: 2,