Document model: better handling of middle and right click, and now Bu…

…tton are sensible to all 3 clicks

CHANGELOG

@@ -1,4 +1,10 @@
 
+v1.47.0
+-------
+
+Document model: better handling of middle and right click, and now Button are sensible to all 3 clicks
+
+
 v1.46.1
 -------
 

lib/document/Button.js

@@ -131,8 +131,10 @@ function Button( options ) {
 	this.onKey = this.onKey.bind( this ) ;
 	this.onShortcut = this.onShortcut.bind( this ) ;
 	this.onFocus = this.onFocus.bind( this ) ;
-	this.onHover = this.onHover.bind( this ) ;
 	this.onClick = this.onClick.bind( this ) ;
+	this.onRightClick = this.onRightClick.bind( this ) ;
+	this.onMiddleClick = this.onMiddleClick.bind( this ) ;
+	this.onHover = this.onHover.bind( this ) ;
 
 	if ( options.keyBindings ) { this.keyBindings = options.keyBindings ; }
 	if ( options.actionKeyBindings ) { this.actionKeyBindings = options.actionKeyBindings ; }
@@ -141,6 +143,8 @@ function Button( options ) {
 	this.on( 'shortcut' , this.onShortcut ) ;
 	this.on( 'focus' , this.onFocus ) ;
 	this.on( 'click' , this.onClick ) ;
+	this.on( 'rightClick' , this.onRightClick ) ;
+	this.on( 'middleClick' , this.onMiddleClick ) ;
 	this.on( 'hover' , this.onHover ) ;
 
 	if ( this.elementType === 'Button' && ! options.noDraw ) { this.draw() ; }
@@ -241,18 +245,18 @@ Button.prototype.drawSelfCursor = function() {
 
 
 // Blink effect, when the button is submitted
-Button.prototype.blink = function( animationCountdown = 4 ) {
+Button.prototype.blink = function( special = null , animationCountdown = 4 ) {
 	if ( animationCountdown ) {
 		if ( animationCountdown % 2 ) { this.attr = this.focusAttr ; }
 		else { this.attr = this.blurAttr ; }
 
 		this.draw() ;
-		setTimeout( () => this.blink( animationCountdown - 1 ) , 80 ) ;
+		setTimeout( () => this.blink( special , animationCountdown - 1 ) , 80 ) ;
 	}
 	else {
 		this.updateStatus() ;
 		this.draw() ;
-		this.emit( 'blinked' , this.value , null , this ) ;
+		this.emit( 'blinked' , this.value , special , this ) ;
 	}
 } ;
 
@@ -300,7 +304,7 @@ Button.prototype.submit = function( special ) {
 	this.emit( 'submit' , this.value , special , this ) ;
 
 	// Blink call .updateStatus()
-	this.blink() ;
+	this.blink( special ) ;
 } ;
 
 
@@ -337,7 +341,23 @@ Button.prototype.onHover = function( data ) {
 Button.prototype.onClick = function( data ) {
 	if ( this.disabled || this.submitted ) { return ; }
 	this.document.giveFocusTo( this , 'select' ) ;
-	this.submit() ;
+	this.submit( this.actionKeyBindings.click ) ;
+} ;
+
+
+
+Button.prototype.onRightClick = function( data ) {
+	if ( this.disabled || this.submitted ) { return ; }
+	this.document.giveFocusTo( this , 'select' ) ;
+	this.submit( this.actionKeyBindings.rightClick ) ;
+} ;
+
+
+
+Button.prototype.onMiddleClick = function( data ) {
+	if ( this.disabled || this.submitted ) { return ; }
+	this.document.giveFocusTo( this , 'select' ) ;
+	this.submit( this.actionKeyBindings.middleClick ) ;
 } ;
 
 

lib/document/Document.js

@@ -420,8 +420,12 @@ Document.prototype.onEventSourceMouse = function( name , data ) {
 			this.mouseDrag( data ) ;
 			break ;
 
+		case 'MOUSE_RIGHT_BUTTON_PRESSED' :
+			this.mouseClick( data , 'rightClick' ) ;
+			break ;
+
 		case 'MOUSE_MIDDLE_BUTTON_PRESSED' :
-			this.mouseMiddleClick( data ) ;
+			this.mouseClick( data , 'middleClick' ) ;
 			break ;
 
 		case 'MOUSE_WHEEL_UP' :
@@ -453,13 +457,14 @@ Document.prototype.onEventSourceMouse = function( name , data ) {
 */
 const COMMON_MOUSE_AWARE_FILTER = element =>
 	element.listenerCount( 'click' ) || element.listenerCount( 'clickOut' ) ||
-	element.listenerCount( 'middleClick' ) || //element.listenerCount( 'wheel' ) ||
+	element.listenerCount( 'rightClick' ) || element.listenerCount( 'middleClick' ) || //element.listenerCount( 'wheel' ) ||
 	element.listenerCount( 'dragStart' ) || element.listenerCount( 'drag' ) || element.listenerCount( 'dragEnd' ) ||
 	element.listenerCount( 'hover' ) || element.listenerCount( 'leave' ) || element.listenerCount( 'enter' ) ;
 
 
 
-Document.prototype.mouseClick = function( data ) {
+// 'clickType' can be 'click' (normal left click), 'rightClick' or 'middleClick'
+Document.prototype.mouseClick = function( data , clickType = 'click' ) {
 	var matches = this.childrenAt( data.x - this.outputX , data.y - this.outputY , COMMON_MOUSE_AWARE_FILTER ) ;
 	//console.error( "\n\n\n\n" , matches ) ;
 
@@ -488,7 +493,7 @@ Document.prototype.mouseClick = function( data ) {
 		this.clickOutCandidates.clear() ;
 	}
 
-	matches[ 0 ].element.emit( 'click' , { x: matches[ 0 ].x , y: matches[ 0 ].y } , matches[ 0 ].element ) ;
+	matches[ 0 ].element.emit( clickType , { x: matches[ 0 ].x , y: matches[ 0 ].y } , matches[ 0 ].element ) ;
 } ;
 
 
@@ -653,14 +658,6 @@ Document.prototype.mouseDrag = function( data ) {
 
 
 
-Document.prototype.mouseMiddleClick = function( data ) {
-	var matches = this.childrenAt( data.x - this.outputX , data.y - this.outputY , COMMON_MOUSE_AWARE_FILTER ) ;
-	if ( ! matches.length ) { return ; }
-	matches[ 0 ].element.emit( 'middleClick' , { x: matches[ 0 ].x , y: matches[ 0 ].y } , matches[ 0 ].element ) ;
-} ;
-
-
-
 Document.prototype.mouseWheel = function( data ) {
 	//var matches = this.childrenAt( data.x - this.outputX , data.y - this.outputY , COMMON_MOUSE_AWARE_FILTER ) ;
 	var matches = this.childrenAt( data.x - this.outputX , data.y - this.outputY , element => element.listenerCount( 'wheel' ) ) ;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal-kit",
-  "version": "1.46.1",
+  "version": "1.47.0",
   "description": "256 colors, keys and mouse, input field, progress bars, screen buffer (including 32-bit composition and image loading), text buffer, and many more... Whether you just need colors and styles, build a simple interactive command line tool or a complexe terminal app: this is the absolute terminal lib for Node.js!",
   "main": "lib/termkit.js",
   "directories": {

sample/document/buttons-test.js

@@ -68,7 +68,10 @@ var button2 = new termkit.Button( {
 	} ,
 	actionKeyBindings: {
 		CTRL_UP: 'up' ,
-		CTRL_DOWN: 'down'
+		CTRL_DOWN: 'down' ,
+		click: 'left-click' ,
+		middleClick: 'middle-click' ,
+		rightClick: 'right-click' ,
 	}
 } ) ;
 
@@ -96,7 +99,9 @@ var toggleButton2 = new termkit.ToggleButton( {
 //container1.draw() ;
 
 button1.on( 'submit' , onSubmit ) ;
+button1.on( 'blinked' , onBlinked ) ;
 button2.on( 'submit' , onSubmit ) ;
+button2.on( 'blinked' , onBlinked ) ;
 toggleButton1.on( 'toggle' , onToggle ) ;
 toggleButton1.on( 'submit' , onSubmit ) ;
 toggleButton2.on( 'toggle' , onToggle ) ;
@@ -110,6 +115,12 @@ function onSubmit( value , action ) {
 	term.restoreCursor() ;
 }
 
+function onBlinked( value , action ) {
+	term.saveCursor() ;
+	term.moveTo.styleReset.eraseLine( 1 , 22 , 'Blinked #%i: %J , action: %J\n' , counter ++ , value , action ) ;
+	term.restoreCursor() ;
+}
+
 function onToggle( value ) {
 	term.saveCursor() ;
 	term.moveTo.styleReset.eraseLine( 1 , 22 , 'Toggled #%i: %J\n' , counter ++ , value ) ;
@@ -135,5 +146,3 @@ term.on( 'key' , function( key ) {
 	}
 } ) ;
 
-
-