const React = require('react');
const ReactX11 = require('react-x11')
class App extends React.Component {
  handleRef (win) {
    // win is https://github.com/sidorares/ntk/blob/master/lib/window.js instance
    win.on('expose', ev => {
      ctx.fillStyle = 'black';
      ctx.fillText('Hello', ev.x, ev.y);
    })
  }
  render() {
    const paintRadialGradient = e => {
      const ctx = e.window.getContext('2d');
      const gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500);
      gradient.addColorStop(0, "green");
      gradient.addColorStop(0.5, "green");
      gradient.addColorStop(1, "rgb(255, 255, 255)");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, ctx.width, ctx.height);
    }
    return (
      <window ref={this.handleRef} onMouseDown={ev => console.log('hello')}>
        <window onMouseMove={paintRadialGradient} />
      </window>
    )
  }
}
ReactX11.render(React.createElement(App));