FoamTree with default settings

Mouse wheel and touch events on FoamTree element will be captured and will not cause the content to scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ante enim, sit amet molestie purus. Phasellus dolor felis, bibendum vel tincidunt non, ultricies et nibh. Nunc sodales auctor posuere. Donec a erat nibh, id suscipit lacus. Etiam congue dapibus vestibulum. Sed vitae magna dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque varius dignissim dolor ac commodo. Vestibulum hendrerit posuere sagittis. Maecenas ac neque eros, ut dignissim quam.

Nunc vulputate venenatis lobortis. Morbi viverra, est non gravida malesuada, sapien nunc sodales mi, ac vehicula lacus ligula accumsan nunc. Duis imperdiet diam sed mi venenatis vel dictum sapien eleifend. Curabitur neque felis, molestie eu iaculis sit amet, imperdiet in orci. Cras aliquet fermentum mi, eu sagittis purus pretium a. Proin euismod odio a mi imperdiet suscipit. Etiam dui tortor, vehicula ut dapibus ac, adipiscing eu turpis. Ut laoreet condimentum rhoncus. Donec dui elit, tincidunt quis pulvinar sed, ultricies sit amet urna. In vel ligula vel massa scelerisque volutpat non nec risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed velit sapien, ornare et eleifend sit amet, pellentesque at tellus. Fusce congue porta nisl, sed bibendum nunc fringilla a. Fusce luctus varius ipsum, eu suscipit turpis luctus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Suspendisse id quam sed lacus mattis lacinia volutpat in justo. Praesent condimentum tellus vel orci tempor porttitor. Nam vel nunc tortor, vel bibendum orci. Proin pellentesque lacus erat, quis fermentum erat. Nullam sed metus sem, sit amet imperdiet arcu. Nullam sit amet scelerisque tellus. Ut eleifend ante sit amet orci hendrerit nec gravida est posuere. Praesent non massa imperdiet justo tincidunt ornare quis in orci. Ut condimentum varius eros varius dignissim. Quisque aliquam augue at odio pretium iaculis. Nullam risus sem, convallis et rutrum a, lobortis in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nulla sed ligula vulputate semper a quis velit. Suspendisse pretium metus ligula, a mattis ligula. Sed nec eros nunc. Vestibulum ut orci quam, eget condimentum quam.

Integer vitae posuere lacus. Etiam posuere volutpat purus sed dictum. Integer sed ipsum lectus. Suspendisse et rutrum lorem. Phasellus eu elit id mauris fringilla ultricies. Donec metus justo, imperdiet ac sodales eget, hendrerit eu diam. Praesent dapibus nisi nec felis vulputate non luctus velit dignissim. Nam tincidunt accumsan ante sit amet tempus. Cras quis elit id tortor adipiscing feugiat. In hac habitasse platea dictumst. Aliquam sit amet velit ac lacus rutrum vulputate et vitae turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ante enim, sit amet molestie purus. Phasellus dolor felis, bibendum vel tincidunt non, ultricies et nibh. Nunc sodales auctor posuere. Donec a erat nibh, id suscipit lacus. Etiam congue dapibus vestibulum. Sed vitae magna dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque varius dignissim dolor ac commodo. Vestibulum hendrerit posuere sagittis. Maecenas ac neque eros, ut dignissim quam.

FoamTree in scrollable content

To make sure the user can zoom and pan around the visualization, FoamTree by default prevents the default actions of mouse wheel and touch events triggered over FoamTree element. When the visualization is embedded in a larger block of scrollable content, you may want to allow those default actions, so that mouse wheel and touch gestures performed over FoamTree cause the whole content to scroll.

The panel on the left embeds FoamTree in scrollable content with its default settings. Notice that mouse wheel and touch gestures performed over the FoamTree element do not cause the content to scroll.

The panel on the right embeds FoamTree with onGroupMouseWheel and onGroupDrag event handlers that call the allowOriginalEventDefault() method to restore the default actions of the mouse wheel and touch-based dragging. To avoid confusing interactions, the handlers also call the preventDefault() method to prevent FoamTree's default response to mouse wheel and touch events. As a result, zooming and panning around the visualization will not be possible in this case.

What's in the code?