diff --git a/CHANGELOG b/CHANGELOG index f2e8ddab..43a5cd1c 100644 --- a/CHANGELOG +++ b/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 ------- diff --git a/lib/document/Button.js b/lib/document/Button.js index 2ba59978..9da64d2c 100644 --- a/lib/document/Button.js +++ b/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 ) ; } ; diff --git a/lib/document/Document.js b/lib/document/Document.js index aaa1a9ad..e87b01e1 100644 --- a/lib/document/Document.js +++ b/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' ) ) ; diff --git a/package.json b/package.json index 2ecd1b97..45290528 100644 --- a/package.json +++ b/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": { diff --git a/sample/document/buttons-test.js b/sample/document/buttons-test.js index 6d25bf0d..b339b8b1 100755 --- a/sample/document/buttons-test.js +++ b/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 ) { } } ) ; - -