Can I use standard html/css/js methods to control a window overlaid on the Atom editor window?


#1

I’d like to express some ideas regarding future changes to Atom. To do that, I’d like to engage a package, and put a regular browser div about the editor div. I can draw pictures in the div. For example, I can use svg to draw a line between two pieces of text. I can make the div semi-transparent.

How would I do that in the Atom environment? TextEditorElement sounded like the right place to start, but it is gone.

       Regards, Rick

#2

That would work but it would be quite hard to track what was underneath your div. There was a recent thread about how to find a pixel position in text.


#3

Hi, Mark. Thanks for the pointer.

I have something working. But next I want to place an image in my overlaid div, and I’m having trouble figuring out where to put the image file in my file structure, and how to refer to it in my html (what path). Here’s what I have.

newElt.style.height = atomPane.clientHeight + 'px';
newElt.style.backgroundColor = 'rgba(255, 0, 255, 0.1)';
var imgElt = document.createElement('img');
imgElt.src= 'boxesandarrowswithlabels2.svg';

This appears in a javascript file required from the explore-ideas.coffee file. The package is called explore-ideas. The html element is well-formed when I examine it with the debugger, but it can’t find the file.

There probably is some really clear convention, but I can’t figure it out. It’s looking here, but that’s an archive file: file:///Applications/Atom_ibuilt.app/Contents/Resources/app.asar/static/boxesandarrowswithlabels2.svg

      Regards, Rick

#4

About the standard html/css method the biggest difficulty is that lines don’t stay alive.
IE they are added/removed to the buffer to only show the part visible as one scroll.

For that, there’s the decoration API so you tell atom that you want to augment the text line and atom redraw things for you. That api is somewhat limited.

In your case i’d try to play with block decoration.

The typical case would be to alternate display of text and images.
Maybe however you can play with overflow and let both drawing and text overlap.

The api is pretty new so if you encounter artificial limitation that you think are easy to solve it’s possible they’ll hear your idea.


#5

Thanks, Jean. Block decorations look interesting.