felixhayashi / TW5-TiddlyMap

Map drawing and topic visualization for your wiki
http://tiddlymap.org
BSD 2-Clause "Simplified" License
857 stars 132 forks source link

How can I adjust the node sizes? #383

Closed trentlarson closed 2 years ago

trentlarson commented 3 years ago

I am trying to create a graph with a variety of node sizes. Here's a simple example: http://trentlarson.com/obviousness.html

The only way I've found is to increase the font size. This does pretty well, except that once I get over about 100 the text always wraps.

Screen Shot 2020-11-22 at 12 45 05 PM

Here's an example from tiddlymap.org

Screen Shot 2020-11-22 at 11 49 53 AM

I'd like to go up to a font size of about 200-300, so that I can have about 8-10 smaller sizes of nodes (down to font size of 1).

There are quirks in the behavior. (I call "horizontal" what I prefer without too much wrapping, while "vertical" is the undesired wrapping behavior.)

  1. I cannot exactly describe how to make it wrap above font 100 or so; sometimes it is horizontal and sometimes it is vertical.
  2. If I click on a node and then click off, it will usually go horizontal.
  3. If it is horizontal and I mouse-over the node it will switch to vertical (usually).
  4. Increasing the node size does nothing, though I think that's intended behavior because the documentation says something about being for nodes without text.
  5. It seems that all other node shapes besides box (eg ellipses and circles) always go vertical and I can't find any way to make them go horizontal.
  6. I tried getting them all to a horizontal state and then saving the tiddlywiki, but that doesn't preserve the horizontal state.

I see a couple of related issues:

Any hints will help. I would be willing to specify the length or width of a node, or maybe specify types, or set some of the visjs styling properties (though I don't know how to do that outside of your configuration boxes).

trentlarson commented 3 years ago

BTW, it seems like the "size" setting on a node is the right way to adjust the size, but it doesn't do anything... nothing changes when I increase the size.

flibbles commented 2 years ago

I have dug through vis.js and vis-network. Those libraries don't have it set up to create a menu option to configure maximum width. However, it is still configurable, on a per node/view/node-type/tiddlymap basis. You just have to touch a little bit of json. The json is in the following locations:

You need to add the following json:

{"widthConstraint":{"maximum":600}}

Or not 600, but whatever you want. This will integrate with whatever other settings you have, so if you have the shape set, it might look like this:

{"widthConstraint":{"maximum":600},"shape":"ellipse"}

Exactly what you put varies slightly depending on view/node/node-type/etc, but it shouldn't be hard to figure out. And once it's set, changing other settings through the TiddlyMap menu won't reset it.

If this becomes a popular request, maybe I'll add some custom bits to the configuration menus, but that's way more of a headache than it sounds. Until then, people can do this. I am closing this issue in the meantime.

trentlarson commented 2 years ago

Thank you. I've edited a style and seen it work... fantastic!

Can you point me to instructions for editing the config.vis for all nodes?

I hope to understand more about the engine behind these tiddlers, so I'll study more TiddlyWiki basics. Thanks for your help this far.

flibbles commented 2 years ago

Oh right. The config.vis field for views contains info for both nodes AND edges, so it's got another layer. Instead of:

{"widthConstraint":{"maximum":600},"shape":"ellipse"}

You need

{"nodes": {"widthConstraint":{"maximum":600},"shape":"ellipse"}}

Edited: Fixed field name to config.vis as mentioned below.

trentlarson commented 2 years ago

Perfect! Thanks for the help. (BTW, if anyone reads that: it's 'config.vis' and not 'vis.config'. :-)