Feature Request: Support for Resizing Nodes in Editor

[desplesda]

Issue by naturally-intelligent
Thursday Jun 28, 2018 at 04:31 GMT
Originally opened as InfiniteAmmoInc/Yarn#70

---

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?

[desplesda]

Comment by blurymind
Thursday Jun 28, 2018 at 08:12 GMT

---

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

[desplesda]

Comment by charblar
Tuesday Jul 10, 2018 at 15:39 GMT

---

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 👍

[desplesda]

Comment by naturally-intelligent
Friday Sep 07, 2018 at 18:21 GMT

---

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?

[desplesda]

Comment by naturally-intelligent
Friday Sep 07, 2018 at 18:46 GMT

---

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.

[desplesda]

Comment by blurymind
Friday Sep 07, 2018 at 19:46 GMT

---

@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 :)

[desplesda]

Comment by naturally-intelligent
Sunday Sep 09, 2018 at 03:57 GMT

---

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

[desplesda]

Comment by blurymind
Monday Sep 10, 2018 at 10:57 GMT

---

@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 :)

[desplesda]

Comment by naturally-intelligent
Tuesday Sep 11, 2018 at 02:35 GMT

---

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

[desplesda]

Comment by naturally-intelligent
Monday Sep 17, 2018 at 22:08 GMT

---

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?

[desplesda]

Comment by julsam
Tuesday Sep 25, 2018 at 02:56 GMT

---

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).

[desplesda]

Comment by julsam
Wednesday Sep 26, 2018 at 15:30 GMT

---

@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.

[desplesda]

Comment by julsam
Wednesday Sep 26, 2018 at 16:35 GMT

---

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

[desplesda]

Comment by julsam
Wednesday Sep 26, 2018 at 18:56 GMT

---

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.

[desplesda]

Comment by naturally-intelligent
Thursday Sep 27, 2018 at 09:33 GMT

---

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)

[desplesda]

Comment by naturally-intelligent
Thursday Sep 27, 2018 at 09:40 GMT

---

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!

[desplesda]

Comment by naturally-intelligent
Thursday Sep 27, 2018 at 09:45 GMT

---

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... :|

[desplesda]

Comment by julsam
Thursday Sep 27, 2018 at 13:08 GMT

---

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 🤔

[desplesda]

Comment by naturally-intelligent
Thursday Sep 27, 2018 at 13:23 GMT

---

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?

[desplesda]

Comment by julsam
Thursday Sep 27, 2018 at 13:35 GMT

---

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 👍

[desplesda]

Comment by blurymind
Wednesday Jan 23, 2019 at 09:56 GMT

---

@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.