Make the help dialog draggable and resizable using jQuery UI

[ghost]

This is hopefully a step towards having inline docs in the hydra editor.

It adds a new dependency on jQuery UI, and it uses the .draggable() and .resizable() helpers from that library to make the modal dialog draggable and resizable. It doesn't make the dialog dockable as I didn't find any library that supports that.

After this PR, it should be simple to insert text from docs/funcs.md into the dialog, and get basic inline documentation in a draggable window.

[esnho]

Pleeeease! Don't add JQuery to this piece of software! :)

[ghost]

Pleeeease! Don't add JQuery to this piece of software! :)

Can you recommend a different way to make the dialogs draggable and resizable?

[esnho]

First of all I'd suggest to focus on how much the synth gain in value from a single modal that can be dragged and moved around.

Then I'd evaluate how much value adds to have JQuery as dependecy just for drag a thing around. I think that this software should focus more on: code editor, rendering, new features; something more focused on its main scope like:

• https://github.com/ojack/hydra/issues/4 Ability to save files
• https://github.com/ojack/hydra/issues/10 Load playlist of local videos
• https://github.com/ojack/hydra/issues/21 Mobile support (that totally crash with draggable modals)
• https://github.com/ojack/hydra/issues/41 https://github.com/ojack/hydra/issues/57 New FX (and maybe a guide on how to easily develop them)
• https://github.com/ojack/hydra/issues/49 Text renderer
• https://github.com/ojack/hydra/pull/67 Video recording

To talk about how to move modal around without adding new deps here are a couple of links:

There is for example a simple pen that showcase this functionality without using JQuery:
https://codepen.io/jkasun/pen/QrLjXP

Or an article that suggests how to do it:
https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

[ghost]

First of all I'd suggest to focus on how much the synth gain in value from a single modal that can be dragged and moved around.

@ojack suggested this approach for inline documentation. See https://github.com/ojack/hydra/pull/62 for the original discussion.

Then I'd evaluate how much value adds to have JQuery as dependecy just for drag a thing around.

The upside of using a 3rd party dependency is that implementing this feature is easy, and it adds very little code that the project would need to test and maintain. One downside I can see is that it adds 84KB of code to the frontend. The frontend bundle.js is 4.3MB already though. What other downsides are there?

[ojack]

Hi @ssssam sorry for the delay!

I view the documentation as an integral part of the software, and working on the way the documentation is integrated with the editor is important to me. I think it is also a a place to be creative in terms of thinking of how people learn and experiment / creative forms of documenting with live and editable examples, etc.

I agree with @esnho am pretty against adding jquery for something this small. Almost all of hydra is written from scratch, except for very specific things such as the codemirror editor and regl... Jquery is a whole framework that adds a lot of overhead and specific ways of working with code. I think we should start by just making it draggable using css (personally i am not that concerned about resizable). Dockable to me is just that when it is dragged to a certain part of the screen, it snaps to fit that size.. gonna look for some examples. It might be interesting to also have the option to pop it out into its own window.

That said you make a good point about size-- i have no idea why the hydra bundle is 4.8 GB!! The app folder is only 55kb...gonna start by looking into that.

Again I am sorry for the delay in responding. I think it has been hard because I have a lot of specific ideas for many aspects of hydra, but not a lot of time to implement them. I want to have a sort of developer meeting (virtually) soon to outline more longer term ideas for hydra and start working towards them, and hope you can both be involved.

[ghost]

Hi :)

I feel like resizing the docs/help window will be pretty important, sometimes you want to focus more on the visuals, sometimes more on the docs... anyway it's all possible without jQuery, i don't have time to rewrite this PR right now, but maybe @esnho can do it :) :)