import * as windows from '../../windows/window-manager' ; import * as dispatch from '../../dispatch' ; import ColorPicker from '../../ui/color-picker' ; import Overlay from '../overlay' ; import { debounce } from '../../../common/utils' ; import onLoseFocus from '../../ui/lose-focus' ; import { basename , extname } from 'path' ; import { cursor } from '../../cursor' ; import { render } from 'inferno' ; import { Invokables , Events } from '../../../common/ipc' ; let liveMode = false ; let restoreInput = ( ) => { } ; const getPosition = ( row , col ) => ( { ... windows . pixelPosition ( row > 12 ? row : row + 1 , col - 1 ) , anchorBottom : row > 12 , } ) ; const colorPicker = ColorPicker ( ) ; const possiblyUpdateColorScheme = debounce ( ( ) => { if ( ! liveMode ) return ; if ( ! window . api . nvimState ( ) . file . endsWith ( '.vim' ) ) return ; const colorschemeBeingEdited = basename ( window . api . nvimState ( ) . file , extname ( window . api . nvimState ( ) . file ) ) ; const currentActiveColorscheme = window . api . nvimState ( ) . colorscheme ; if ( currentActiveColorscheme !== colorschemeBeingEdited ) return ; const cmd = ( cmd ) => window . api . invoke ( Invokables . nvimCmd , cmd ) ; cmd ( `write` ) ; cmd ( `colorscheme ${ currentActiveColorscheme }` ) ; dispatch . pub ( 'colorscheme.modified' ) ; } , 300 ) ; let state = { x : 0 , y : 0 , visible : false , anchorBottom : false , hideFunc : ( ) => { } , } ; const WhyDiv = ( props ) => < div { ... props } / > ; let elref ; const ColorPickerView = ( { x , y , visible , anchorBottom , hideFunc , } ) => ( < Overlay x = { x } y = { y } visible = { visible } anchorAbove = { anchorBottom } > < WhyDiv class = { 'show-cursor' } onComponentDidMount = { ( e ) => ( e . appendChild ( colorPicker . element ) , ( elref = e ) ) } onComponentDidUpdate = { ( _lastProps , _nextProps ) => { if ( elref ) { onLoseFocus ( elref , ( ) => ( hideFunc ( ) , restoreInput ( ) ) ) ; } } } /> < /Overlay>); const container = document . createElement ( 'div' ) ; container . id = 'color-picker-container' ; document . getElementById ( 'plugins' ) ! . appendChild ( container ) ; const assignStateAndRender = ( newState ) => ( Object . assign ( state , newState ) , render ( < ColorPickerView { ... state } / > , container ) ) ; const uiShow = ( ) => assignStateAndRender ( { visible : true , ... getPosition ( cursor . row , cursor . col ) , } ) ; state . hideFunc = ( ) => assignStateAndRender ( { visible : false } ) ; const show = ( color ) => { colorPicker . setHex ( color ) ; uiShow ( ) ; window . api . stealInput ( ( keys ) => { if ( keys !== '<Esc>' ) return ; window . api . restoreInput ( ) . then ( ( ) => state . hideFunc ( ) ) ; } ) ; } ; colorPicker . onChange ( ( color ) => { window . api . invoke ( Invokables . nvimCmd , `exec "normal! ciw${ color }"` ) . then ( ( ) => possiblyUpdateColorScheme ( ) ) ; } ) ; window . api . on ( Events . pickColor , async ( ) => { liveMode = false ; const word = await window . api . invoke ( Invokables . expand , '<cword>' ) ; show ( word ) ; } ) ; window . api . on ( Events . modifyColorschemeLive , async ( ) => { liveMode = true ; const word = await window . api . invoke ( Invokables . expand , '<cword>' ) ; show ( word ) ; } ) ;