[tw5] Re: TidGraph and Link Rendering
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:
> 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?
>
> On Friday, May 21, 2021 at 6:55:03 AM UTC-7 jvpo...@productmicro.be wrote:
>
>> Yes, it's the 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:
>>
>>> What element is nodecontent.children[0].children[0] ?
>>>
>>> If it is the element that is created perhaps you can do something
>>> like:
>>>
>>> nodeContent.querySelector("a.tc-tiddlylink");
>>>
>>> On Friday, May 21, 2021 at 2:10:48 PM UTC+2 jvpo...@productmicro.be
>>> wrote:
>>>
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:
> 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:
>
>>
>>
>>> 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 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
>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c8d7e9f9-b2c2--bb4c-7ca6768fea04n%40googlegroups.com.
[tw5] Re: TidGraph and Link Rendering
Yes, it's the 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:
> What element is nodecontent.children[0].children[0] ?
>
> If it is the element that is created perhaps you can do something like:
>
> nodeContent.querySelector("a.tc-tiddlylink");
>
> On Friday, May 21, 2021 at 2:10:48 PM UTC+2 jvpo...@productmicro.be wrote:
>
>> 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:
>>
>>> 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:
>>>
> 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 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
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/dbd7eaec-b753-4257-bff6-2aee722d3e2an%40googlegroups.com.
[tw5] Re: TidGraph and Link Rendering
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:
> 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:
>
>>
>>
>>> 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 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
>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/58cdea24-0691-4db0-82a2-c55c421256e6n%40googlegroups.com.
[tw5] Re: TidGraph and Link Rendering
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: > > >> 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 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 > > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9b183940-98f7-4c47-88cc-5c64ba2d5455n%40googlegroups.com.
[tw5] Re: TidGraph and Link Rendering
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: > 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! > > On Thursday, 20 May 2021 at 10:02:23 UTC+1 jvpo...@productmicro.be wrote: > >> 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 >> > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/49d89f32-c8e6-444f-aa0c-bc21d188e183n%40googlegroups.com.
[tw5] TidGraph and Link Rendering
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 -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0bfd4809-0ca1-4083-bc38-71e4d07124dbn%40googlegroups.com.
