ACE and the Disappearing Text

‹prev | My Chain | next›

I had the privilege of running my first Gaming JavaScript hackathon today. I made the risky decision to switch to the ACE Editor for the hackathon, but in the end it paid off. The girls did not have any difficulty working with it and it held up well. There was, however, a glitch.

When resizing the viewport, which often occurs when the JavaScript console is used, the code has the unfortunate tendency to disappear:

This is not quite as bad as the way that CodeMirror disappeared chunks of code when highlighting text, but it is definitely annoying.

It is also easier to restore the missing ACE code, a simple scroll and the code returns:

Mr Doob's code editor, from whence my fork came, already handles page resize. I add a console.log() to it to make sure that it is actually being called when I raise and lower the JavaScript console:

window.addEventListener( 'resize', function ( event ) {
  console.log("resize!");

  editor.style.width = window.innerWidth + 'px';
  editor.style.height = window.innerHeight + 'px';

  preview.style.width = window.innerWidth + 'px';
  preview.style.height = window.innerHeight + 'px';
} );

And indeed, it is:

So this seems like a good place to add a hook to account for the disappearing code. At first glance, I do not find anything in ACE that suggests a means to force a redraw, but I do find centerSelection(). It turns out that invoking this method on resize does the trick:

window.addEventListener( 'resize', function ( event ) {
  ace.centerSelection();

  editor.style.width = window.innerWidth + 'px';
  editor.style.height = window.innerHeight + 'px';

  preview.style.width = window.innerWidth + 'px';
  preview.style.height = window.innerHeight + 'px';
} );

Since that could end up centering text that was not even in the viewport prior to the resize, I will file that away as plan B.

And, after digging through a few ACE issues, I come across the onResize() method (which is a method, not an event callback). It seems that this is used in various places of the code when the window is resized. I am unsure why this does not seem to have the desired effect under normal circumstances, but I believe that I can eliminate the disappearing code with a force onResize() call in my resize listener:

window.addEventListener( 'resize', function ( event ) {
  ace.renderer.onResize(true);

  editor.style.width = window.innerWidth + 'px';
  editor.style.height = window.innerHeight + 'px';

  preview.style.width = window.innerWidth + 'px';
  preview.style.height = window.innerHeight + 'px';
} );

That was a worrisome little bug—especially to run across it in the midst of a hackathon. It is possible that this is special to the manner in which ACE is being employed in this code-editor. Regardless, the fix was small and not too hard to find.


Day #539