@ -10,6 +10,7 @@ import {
MoveEntryCommandType ,
RebaseEntry ,
RebaseEntryAction ,
ReorderCommandType ,
StartCommandType ,
State ,
SwitchCommandType ,
@ -61,7 +62,10 @@ class RebaseEditor extends App {
let squashing = false ;
let squashToHere = false ;
const $entries = document . querySelectorAll < HTMLLIElement > ( 'li[data-ref]' ) ;
const $entries = [ . . . document . querySelectorAll < HTMLLIElement > ( 'li[data-ref]' ) ] ;
if ( this . state . ascending ) {
$entries . reverse ( ) ;
}
for ( const $entry of $entries ) {
squashToHere = false ;
if ( $entry . classList . contains ( 'entry--squash' ) || $entry . classList . contains ( 'entry--fixup' ) ) {
@ -86,7 +90,11 @@ class RebaseEditor extends App {
const ref = e . item . dataset . ref ;
if ( ref != null ) {
this . moveEntry ( ref , e . newIndex , false ) ;
let indexTarget = e . newIndex ;
if ( this . state . ascending && e . oldIndex ) {
indexTarget = this . getEntryIndex ( ref ) + ( indexTarget - e . oldIndex ) * - 1 ;
}
this . moveEntry ( ref , indexTarget , false ) ;
document . querySelectorAll < HTMLLIElement > ( ` li[data-ref=" ${ ref } "] ` ) [ 0 ] ? . focus ( ) ;
}
@ -142,12 +150,17 @@ class RebaseEditor extends App {
}
} else if ( e . key === 'ArrowUp' || e . key === 'ArrowDown' ) {
if ( ! e . metaKey && ! e . ctrlKey && ! e . shiftKey ) {
const advance =
( e . key === 'ArrowDown' && ! this . state . ascending ) ||
( e . key === 'ArrowUp' && this . state . ascending )
? 1
: - 1 ;
if ( e . altKey ) {
const ref = target . dataset . ref ;
if ( ref ) {
e . stopPropagation ( ) ;
this . moveEntry ( ref , e . key === 'ArrowDown' ? 1 : - 1 , true ) ;
this . moveEntry ( ref , advance , true ) ;
}
} else {
if ( this . state == null ) return ;
@ -157,7 +170,7 @@ class RebaseEditor extends App {
e . preventDefault ( ) ;
let index = this . getEntryIndex ( ref ) + ( e . key === 'ArrowDown' ? 1 : - 1 ) ;
let index = this . getEntryIndex ( ref ) + advance ;
if ( index < 0 ) {
index = this . state . entries . length - 1 ;
} else if ( index === this . state . entries . length ) {
@ -210,6 +223,9 @@ class RebaseEditor extends App {
}
} ) ,
DOM . on ( 'select[data-ref]' , 'input' , ( e , target : HTMLSelectElement ) = > this . onSelectChanged ( target ) ) ,
DOM . on ( 'input[data-action="reorder"]' , 'input' , ( e , target : HTMLInputElement ) = >
this . onOrderChanged ( target ) ,
) ,
) ;
return disposables ;
@ -269,6 +285,14 @@ class RebaseEditor extends App {
this . sendCommand ( SwitchCommandType , undefined ) ;
}
private onOrderChanged ( $el : HTMLInputElement ) {
const isChecked = $el . checked ;
this . sendCommand ( ReorderCommandType , {
ascending : isChecked ,
} ) ;
}
protected override onMessageReceived ( e : MessageEvent ) {
const msg = e . data ;
@ -342,20 +366,36 @@ class RebaseEditor extends App {
let squashToHere = false ;
let tabIndex = 0 ;
for ( const entry of state . entries ) {
squashToHere = false ;
if ( entry . action === 'squash' || entry . action === 'fixup' ) {
squashing = true ;
} else if ( squashing ) {
if ( entry . action !== 'drop' ) {
squashToHere = true ;
squashing = false ;
const $entries = document . createDocumentFragment ( ) ;
const appendEntries = ( ) = > {
const appendEntry = ( entry : RebaseEntry ) = > {
squashToHere = false ;
if ( entry . action === 'squash' || entry . action === 'fixup' ) {
squashing = true ;
} else if ( squashing ) {
if ( entry . action !== 'drop' ) {
squashToHere = true ;
squashing = false ;
}
}
let $el : HTMLLIElement ;
[ $el , tabIndex ] = this . createEntry ( entry , state , ++ tabIndex , squashToHere ) ;
return $el ;
} ;
const entryList = state . entries . map ( appendEntry ) ;
if ( state . ascending ) {
entryList . reverse ( ) . forEach ( $el = > $entries . appendChild ( $el ) ) ;
} else {
entryList . forEach ( $el = > $entries . appendChild ( $el ) ) ;
}
} ;
let $el : HTMLLIElement ;
[ $el , tabIndex ] = this . createEntry ( entry , state , ++ tabIndex , squashToHere ) ;
$container . appendChild ( $el ) ;
if ( ! state . ascending ) {
$container . classList . remove ( 'entries--ascending' ) ;
appendEntries ( ) ;
}
if ( state . onto ) {
@ -372,11 +412,23 @@ class RebaseEditor extends App {
++ tabIndex ,
false ,
) ;
$container . appendChild ( $el ) ;
$entries . appendChild ( $el ) ;
$container . classList . add ( 'entries--base' ) ;
}
}
if ( state . ascending ) {
$container . classList . add ( 'entries--ascending' ) ;
appendEntries ( ) ;
}
const $checkbox = document . getElementById ( 'ordering' ) ;
if ( $checkbox != null ) {
( $checkbox as HTMLInputElement ) . checked = state . ascending ;
}
$container . appendChild ( $entries ) ;
document
. querySelectorAll < HTMLLIElement > (
` ${ focusSelect ? 'select' : 'li' } [data-ref=" ${ focusRef ? ? state . entries [ 0 ] . ref } "] ` ,
@ -398,7 +450,7 @@ class RebaseEditor extends App {
$entry . dataset . ref = entry . ref ;
if ( entry . action != null ) {
$entry . tabIndex = tabIndex ++ ;
$entry . tabIndex = 0 ;
const $dragHandle = document . createElement ( 'span' ) ;
$dragHandle . classList . add ( 'entry-handle' ) ;
@ -411,8 +463,8 @@ class RebaseEditor extends App {
const $select = document . createElement ( 'select' ) ;
$select . dataset . ref = entry . ref ;
$select . name = 'action' ;
$select . tabIndex = tabIndex ++ ;
const $options = document . createDocumentFragment ( ) ;
for ( const action of rebaseActions ) {
const $option = document . createElement ( 'option' ) ;
$option . value = action ;
@ -422,8 +474,9 @@ class RebaseEditor extends App {
$option . selected = true ;
}
$select . appendChild ( $option ) ;
$option s . appendChild ( $option ) ;
}
$select . appendChild ( $options ) ;
$selectContainer . appendChild ( $select ) ;
}
@ -465,7 +518,6 @@ class RebaseEditor extends App {
// $ref.dataset.prev = prev ? `${prev} \u2190 ` : '';
$ref . href = commit ? . ref ? state . commands . commit . replace ( this . commitTokenRegex , commit . ref ) : '#' ;
$ref . textContent = entry . ref . substr ( 0 , 7 ) ;
$ref . tabIndex = tabIndex ++ ;
$entry . appendChild ( $ref ) ;
return [ $entry , tabIndex ] ;
Keith Daulton
2 years ago