Feature Request: Support for Resizing Nodes in Editor

[naturally-intelligent]

For example in Yarn format, adding another attribute:

position: 75,4
size: 70,50

With a resize hotcorner in the bottom-right on the Node GUI.

Would this be possible?

[blurymind]

It is technically possible, but it will slightly change the format by adding two new node values- width and height

[addie-lombardo]

As long as it wouldn't intervene with YarnSpinner I don't see why not.

I do like the idea of having resizing only be possible via one corner 👍

[naturally-intelligent]

I've tried twice to add this feature myself, but can't figure out the GUI side of it. I tried adding the jQuery Resizable thing but failed. I can change the default size of nodes, which helps. Any tips? What widgets/components should this be using?

[naturally-intelligent]

Also want to add that this is the only thing that kinda prevents me from embracing Yarn more fully. I yearn to see the full text inside each node. Viewing it as an overview is a lot easier without having to click each node, since my nodes tend to have more text than fits. I just don't understand how existing users can get by seeing a little bit of the text in each node - what are these, nodes for ants?

Also on another note I have built a Godot Yarn importer and will be sharing that code on Github in the future.

[blurymind]

@naturally-intelligent if that godot yarn parser works as well as bondage.js , I will make it a priority to add this for you ;)

Right now I am working toward implementing it for gdevelop, because it is possible to actually make the yarn editor a part of gdevelop. Include it as part of gdevelop's Ide - that is of course only if I get it to there and the creator of gdevelop approves the pull heheh :)

[naturally-intelligent]

Okay, I'll bite! :) Here is the first working version of my Godot Yarn Importer:

https://github.com/naturally-intelligent/godot-yarn-importer

cheers @blurymind

[blurymind]

@naturally-intelligent All thats left is for someone to implement a usable parser
Here is a link to the tests that your parser must pass:
https://github.com/jhayley/bondage.js/tree/master/tests/yarn_files

My requirement is for a parser :)

[naturally-intelligent]

Okay, I suppose these are Twine rules? Wait - don't answer that because I think we're getting off topic from the issue. Could you please submit this as an issue here: https://github.com/naturally-intelligent/godot-yarn-importer To continue discussion! thanks

[naturally-intelligent]

Trying to get this back on topic:

I've tried twice to add this feature myself, but can't figure out the GUI side of it. I tried adding the jQuery Resizable thing but failed. I can change the default size of nodes, which helps. Any tips? What widgets/components should this be using?

[julsam]

So, I've this feature working, but I still have a few bugs to fix before publishing it. And I also have to test it with NWjs (I've been using the electron branch because I'm more familiar with it).

[julsam]

@naturally-intelligent Can you give it a try? It's based on the electron branch, because it was easier for me to work on that branch, but porting it to the master branch should be fairly easy and probably won't require a lot of modification.
If you want to try it, but don't want to compile the code yourself with electron, tell me what os you use and I'll make you a build.
Otherwise, wait a few more days so I have time to port it to NWjs.

[julsam]

Published the nwjs version (master branch). Let me know if it works for you. I'll make a pull request later.

[julsam]

Also, I should have mentioned it earlier, but the content is still clipped: there's a limitation of 1024 characters in the node.
Depending on the size of your project, you might want to try to put a bigger number.
At the start of node.js, you can change this line:

const ClipNodeTextLength = 1024;

I have no idea how well or bad it will perform.

It would be great if yarn had any config option to customize the editor, but it's sadly not the case.

[naturally-intelligent]

It works! :) I tried it just now. Couldn't try it earlier (was at work). BTW I'm on Linux with nwjs. I upped the ClipNodeTextLength with no speed issues even on my ageing machine. It even saves and loads from a yarn.txt file.

One issue: the resize operation locks the axii to make squares. Can they be unlocked to make rectangles? When I edited the yarn file directly and loaded it with a rectangular shape, they displayed as a rectangle, but once I resized the node it went back to square lock. Also, if possible, the look of the resize button should be a little triangle (like on these github text editor boxes)

[naturally-intelligent]

Just changing these lines in node.js:

const size = Math.max(width, height);
// resize
self.width(size);
self.height(size);

To this:

// resize
self.width(width);
self.height(height);

Works fine for me!

[naturally-intelligent]

Actually there is a problem with rectangular shapes. The arrow draw logic seems based on expecting a square shape:

This could be a can of worms... :|

[julsam]

Yeah, that's why i forced it to be a square.
I'm not sure how it could be fixed, I've tried to work on it yesterday but the math part is honestly a little too complicated for me and would require a complete rework of the arrows drawing logic 🤔

[naturally-intelligent]

In app.js there is an "updateArrows" function around line 797, and a comment on 838 noting that they are taking advantage of the square nodes to draw the lines:

// Get the size of the 2 nodes. It's a square, so width and height are the same.

Accounting for a rectangular shape isn't a trivial change. However, being a game developer and dealing with geometry problems for much of my life it shouldn't be impossible for me. I've probably already done this puzzle at some point. A brief search brings up algorithms like:

https://gamedev.stackexchange.com/questions/111100/intersection-of-a-line-and-a-rectangle

So, I'll be trying to add this change. Is it part of the original scope? I kinda think so, because specifying height and width were never meant to be always equal. Otherwise just have one value. But if it becomes too much of a headache we can abandon the rectangle and stay with squares.

Are there any other issues beyond the arrows that might cause a problem from the rectangle shape?

[julsam]

I'm actually the one that added this comment in my commit ^^ had to do a few changes in the 'updateArrows' function because the size was hardcoded.

I can't think of any issue the rectangular shape would cause. Good luck with it 👍

[blurymind]

@julsam can you submit this as a pull to the electron branch please :)
I can have a look to see if we can sort out the connection arrows positioning issue.