search

fperucic / treant-js

Treant.js - javascript library for drawing tree diagrams
MIT License
864 stars 314 forks source link

Collapsible + Node Link #140

Closed bba278 closed 5 years ago

bba278 commented 5 years ago

In order to make a node collapsible AND having a link, I added a bit of jQuery code which appends a

Hide Children

to the 'collapse-switch' and depending on whether the node is opened or closed, I change the text.

The above all works fine, except that in cases where a node is the main root node or sub-tree root node, the connectors from that node don't align/exit correctly from it but they rather come on top of the node (See photo snippets)

image

Would anybody be able to suggest a fix for that?

Thanks

bba278 commented 5 years ago

For anyone curious how I solved this -> applied the jQuery code to only child nodes and not the root ones

`$(document).ready(function () { const collapseSwitch = $('a.node a.collapse-switch') collapseSwitch.text('Hide Children') collapseSwitch.addClass('hide-children')

  collapseSwitch.click(function () {
    const trgt = $(this)
    if (trgt.hasClass('show-children')) {
      trgt.text('Hide Children')
      trgt.removeClass('show-children')
      trgt.addClass('hide-children')
    } else {
      trgt.text('Show Children')
      trgt.removeClass('hide-children')
      trgt.addClass('show-children')
    }
  })
})`
Method-Development commented 5 years ago

I'm still getting the connecting line in the middle as shown above. How did you fix that portion?