Excellent Simulations Next to Live Code

‹prev | My Chain | next›

I have the ICE Code Editor embedded into web pages so that the visualization layer can either be behind the editor proper or so that the editor and visualization can be side-by-side. Tonight, I hope to get the side-by-side visualizations working a little better.

And by better, I would like the visualization to remain on the page:



I think that this is likely due to some left-behind hard-coding, so hopefully this will be an easy fix.

This guess turns out to be not entirely accurate. I had left behind some styles on the ICE.Editor class (the combination of the editor and visualization layer). Those styles mostly belonged to the ICE.Full class that is responsible for using ICE.Editor in a full-page IDE-lite.

There was a change needed for ICE.Embedded as well. I add an instance property that describes if the editor and preview layer are overlay-ed on each other. For now, this is only true if a separate, external preview element is supplied:

function Embedded(script, options) {
  this.script = script;
  if (!options) options = {};

  this.overlay = !options.preview_el;
  // ...
  this.applyStyles();
}

Then, in the applyStyles() method, I make several styles conditional on being an embedded editor:

Embedded.prototype.applyStyles = function() {
  if (this.overlay) {
    this.editor.el.style.position = 'relative';
    this.editor.editor_el.style.position = 'absolute';
    this.editor.preview_el.style.position = 'absolute';
    this.editor.preview_el.style.top = '0';
  }
  // Regular styles here...
};

With that, I have all three of the use-cases for ICE working. The full screen IDE:



The embedded editor with code overlaid the preview layer:




And the embedded editor with code and preview separated:



For both the embedded editors, it would be nice to be able to scroll the code to a particular line number. I think it makes sense to be able to specify this on the <script> tag that contains the code code to be embedded and visualized:

<table width="100%">
<tr>
<td width=50%>
<script type="text/ice-code" id="code-001" line="21">
  // Code goes here...
</script>
</td>
<td>
<div id="preview-001"/>
</td>
</tr>
</table>

I do not know the best way to grab arbitrary attributes from DOM elements, but the attributes property seems to do the trick:

Embedded.prototype.attributesFromSource = function() {
  this.line = this.script.attributes.line.value;
};

I can then use this value to tell the ACE code editor to scroll to the supplied line number:

function Embedded(script, options) {
  // ...
  this.attributesFromSource();
  if (this.line) {
    this.editor.editor.scrollToLine(this.line);
  }

  this.applyStyles();
}

That actually works:



That is nice. Now I can control the code that is shown, skipping over the setup code and going directly to the more relevant code for the current discussion.

The this.editor.editor is awkward—the ACE editor of the ICE Editor almost makes me want to switch code editors just to avoid some confusion. But I will add a proxy method to ICE.Embedded so that this.editor.scrollToLine() works. I may even make this indexed from 1 rather than ACE's indexed from zero. All of that is fodder for tomorrow.


Day #723