make previewElement.style.width reactive

[Ewan]

Currently the preview element appears to use a fixed width. In:

https://github.com/francoislaberge/atom-diagrams/blob/master/lib/diagrams.js

function setupPreviewer

we find:

let width = 600;

In my use cases to date I've found it helpful to be able to:

a) change the default of this value. I didn't find a way to expose it into the settings for the package (currently you're exposing "Diagram Sequence Rules Grammar" & "Dot Rules Grammar") so initially I changed the value by hand when I wanted to and restarted atom.

b) have the previewElement reactive to the "spare" space on my screen. I added a clumsy hack into checkForResize inside the

if( editor.element.parentElement !== null &&

block like:

const remainingWidth = Math.max(0, editor.element.parentElement.clientWidth - width );
if( remainingWidth > 420) {
                  const reactivePreviewElementWidth = (editor.element.parentElement.clientWidth - 420)
                  previewElement.style.width = `${reactivePreviewElementWidth}px`;
}
editor.element.shadowRoot.querySelector('.editor--private').style.width = `${remainingWidth}px`;

I've not submitted this as a pull request, since 420 is an arbitrary value that sometimes works for me.
My feeling is that it should also be wired up with the Preferred Line Length / Soft Wrap values that already exist.

If you have thoughts on if / how you might like to see this idea move forward, please add them to this issue and I'll see if I'm able to help with that.

[Francois Laberge]

The value would definitely be user specific. I plan to make the previewer much better, with zoom and pan and remembering the width of the panel that also should be dynamically movable via mouse dragging a splitter.

[Francois Laberge]

I went for a simpler approach. Just added a Diagram Previewer Width setting:
https://github.com/francoislaberge/atom-diagrams/releases/tag/v0.26.3