TidGraph and Link Rendering

[Lean Product Innovation - Jonas Van Poucke]

I use <$link/> as the mechanism to render nodes.

I then use that link to drag and drop to another tiddler.

I see that nodes have CSS classes added to mimick <$link/>

but it does not add the listeners as with a regular link (tested with the same link in a plain tiddler).

Is this a correct assumption/analysis? And can this be fixed?

Like in function makeNodeDiv(node) in https://github.com/ihm4u/tw5plugs/blob/gh-pages/plugins/ihm/tidgraph/utils.js ?

Jonas

[Ste]

I'll be honest.. I don't really understand what your asking, but if your looking at updating tidgraph a little that would be awesome! 

[Lean Product Innovation - Jonas Van Poucke]

I guess my request is indeed confusing :D

I do want to update tidgrpah but don't know how.

Second attempt:

Given:

Nodes in tidgraph are rendered with <$link/>, just as in the demo's

I manually add the same link in the tiddler.

This renders the tree + a plain link to the tiddler :D

When:

OK: I drag the plain link to another tiddler (a kanban board, https://reidgould.github.io/tiddlywiki-dropboard/), then the drop target renders it fine as all registered listener on the plain link get fired

NOK: I drag the node to the same tiddler, the rendering gets screwed.

Fix:

I see in my debug console that the plain link has listeners registered, where the node (TidGraph) version does not.

Question:

How can I register listeners in the TidGraph source code at makeNodeDiv(node) in https://github.com/ihm4u/tw5plugs/blob/gh-pages/plugins/ihm/tidgraph/utils.js ?

Hope this clears it up :D

Jonas

Op vrijdag 21 mei 2021 om 09:44:45 UTC+2 schreef Ste:

[Saq Imtiaz]

 

Given:

Nodes in tidgraph are rendered with <$link/>, just as in the demo's

I am not sure that this is correct. At first glance it seems like  tidgraph creates <a> elements that look like they might have been generated by the <$link> widget, but have not. 

This is the core function that attaches the event listeners needed for drag and drop: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/utils/dom/dragndrop.js#L24

This is how the link widget uses it: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/link.js#L134

[Lean Product Innovation - Jonas Van Poucke]

Thanks, exactly! Thanks for the pointer.

I'll try to fix this myself but feel novice in this area..

So if someone could hepl with adding this to TidGraph... :D

Jonas

Op vrijdag 21 mei 2021 om 11:06:29 UTC+2 schreef saq.i...@gmail.com:

[Lean Product Innovation - Jonas Van Poucke]

I did do a very ugly test and it works (by overwriting the $:/plugins/ihm/tidgraph/utils.js  tiddler).

Now I need some help to get to the correct child nodecontent. Any ideas?

Thanks for your help!!!

This works in tidgraphs util.js:

  function makeNodeDiv(node) {
     var esctitle = encodeURIComponent(node.id);
     var title =  getNodeTitle(node.id,tidtree);
     var isMissing = !$tw.wiki.tiddlerExists(node.id);
     var linkclass = isMissing ? "tc-tiddlylink-missing":"tc-tiddlylink-resolves";
     var linkclass = "tc-tiddlylink " + linkclass;
     var nodeclass = getNodeClasses(node);
     var nodecontent;
     if ( node.template ) {
        nodecontent = dm('div',{ "class": nodeclass,
                                 innerHTML: getRenderedNode(node) } );
     } else {
        var tidlink = dm('a',{"class": linkclass,
                               text: title,
                               attributes: { href: '#'+esctitle }
        });
        nodecontent = dm('div', {"class": nodeclass,
                                 children: [tidlink] });
     }
     // HACK TEST. NOT OK -> getting domNode by children array :( :(
     if (node && nodecontent && nodecontent.children[0] && nodecontent.children[0].children[0]) {
        $tw.utils.makeDraggable({
            domNode: nodecontent.children[0].children[0],
            dragTiddlerFn: function() {return node.id;},
            widget: node.widget
         });
     }
     return nodecontent;
  }

Op vrijdag 21 mei 2021 om 11:34:59 UTC+2 schreef Lean Product Innovation - Jonas Van Poucke:

[Saq Imtiaz]

What element is nodecontent.children[0].children[0] ?

If it is the <a> element that is created perhaps you can do something like:

nodeContent.querySelector("a.tc-tiddlylink");

[Lean Product Innovation - Jonas Van Poucke]

Yes, it's the <a> element => You are my hero!!

I'll post a pull request once I get it tested and fixed.

Thanks for helping me out!!

Op vrijdag 21 mei 2021 om 14:16:05 UTC+2 schreef saq.i...@gmail.com:

[c pa]

So tidgraph looks cool. I would love to add features but you've minified the code making it almost impossible to figure out what the code is doing. Is there a version where the functions have human readable names?

[Lean Product Innovation - Jonas Van Poucke]

Code is in https://github.com/ihm4u/tw5plugs/tree/gh-pages/plugins/ihm/tidgraph

Op zaterdag 22 mei 2021 om 05:35:09 UTC+2 schreef c pa:

[Ste]

I think you would be as well forking. Looking at the github it's not been touched for quite sometime and I don't think the tidgraph genius is still active here either. 

One improvement I'd love is that tiddlers opened from tidgraph aren't always opened at the top of the river.