Event notifications and Pane


I’ve been researching how to create a Pane for displaying the output from a process that I run. I’ve been able to get the output to display but when the content goes beyond the bounds of the Pane I am unable to scroll. I’ve tried adding registration for the ‘core:move-down’ (etc) events to the view component but it doesn’t work. I don’t see the event when I hit the down arrow. I’ve tried capturing the ‘click’ event using atom.commands.add(…) and this works.

I know there are a few different approaches to developing UI components in Atom. It appears using the HTMLElement approach is the path of least resistance.

  1. Is there any documentation on the Event Model used within Atom?
  2. Pane-element has a model property. Should item-views under atom-panes be extending the model property?
  3. Is there some sort of MVC or MVVC going on here?

I appreciate any help folks can give me. I’m wondering if I created a document (addendum) for the flight manual walking developers through the basics of how to create a component using the HTMLElement approach would be useful?

Even though there are multiple approaches to developing UI components, I think it is difficult to understand how to build your own packages without some sort of initial roadmap. This does not mean Atom is endorsing one method above another and the document could be extended to provide instructions for different approaches.

Take Care

The path of least resistance is to use the tried and true JavaScript DOM methods to build an HTMLElement, yes. The slightly more resistance, but also more powerful approach that I and many in the Atom community like is a little library called etch. You write an etch component in the same manner that you write a React component, and I prefer the JSX model for writing my components. When you include the component in the part of your script that creates the pane, etch will return the HTMLElement you need to pass to Atom so that Atom can slot it into the UI.

I have no personal experience with making a component scrollable, but I think I would be able to find the knowledge to implement that by looking at a core package that does the same thing, namely settings-view.

Hi Folks,

Ok, I added the Etch library to my view component and figured out my issue was a CSS problem where I needed:

  display: flex;
  overflow: auto;

in my package.less file. This was not immediately obvious to someone who doesn’t do HTML UI frontends day to day. Of course, this makes complete sense but maybe we could add a ‘hint’ for those newbies like me. :wink:

I did have a look at the settings-view package and tried to copy the following code out of settings:

    this.subscriptions = new CompositeDisposable()
    this.subscriptions.add(atom.commands.add(this.element, {
      'core:move-up': () => { this.scrollUp() },
      'core:move-down': () => { this.scrollDown() },
      'core:page-up': () => { this.pageUp() },
      'core:page-down': () => { this.pageDown() },
      'core:move-to-top': () => { this.scrollToTop() },
      'core:move-to-bottom': () => { this.scrollToBottom() }

  scrollUp () {
    this.element.scrollTop -= document.body.offsetHeight / 20

  scrollDown () {
    this.element.scrollTop += document.body.offsetHeight / 20

  pageUp () {
    this.element.scrollTop -= this.element.offsetHeight

  pageDown () {
    this.element.scrollTop += this.element.offsetHeight

  scrollToTop () {
    this.element.scrollTop = 0

  scrollToBottom () {
    this.element.scrollTop = this.element.scrollHeight

But I still can’t seem to capture keyboard events in the window. Mouse events work fine and I can scroll now. I’m still missing something about the event model.

Take Care

Mind sharing your package code?

Hi There.

Thank you for the offer. I was able to figure out it was an HTML thing. The “DIV” element needed to have the “tabIndex=0” property.

Take Care

1 Like