xeokit / xeokit-sdk

Open source JavaScript SDK for viewing high-detail, full-precision 3D BIM and AEC models in the Web browser.
https://xeokit.io
Other
738 stars 291 forks source link

[FEATURE]:Enable external render functions for treeview #1325

Closed mlankamp closed 9 months ago

mlankamp commented 10 months ago

In the TreeViewPlugin move the functions:

to the constructor and allow these functions to be overwritten via the constructor configuration.

This allows users to create their own styling.

Alternative solution: Create a render service, which can be passed via the constructor (same as the localeService).

mlankamp commented 10 months ago

I created a PR to support this scenario #1329

xeolabs commented 10 months ago

Looks good, thanks @mlankamp. Could we please also get an HTML example page to demo it? Maybe just base it off this one: https://github.com/xeokit/xeokit-sdk/blob/master/examples/navigation/TreeViewPlugin_Containment.html

mlankamp commented 10 months ago

Yes, I will create an example! Will include the x-rayed style as well.

mlankamp commented 10 months ago

Done, see PR #1331

mlankamp commented 10 months ago

@xeolabs is it possible to create a new beta? Will upgrade my typescript based solution and can check if the typings are ok

xeolabs commented 10 months ago

@mlankamp yip, done - 2.5.2-beta-5

mlankamp commented 10 months ago

Nice, with the latest merge the example works: https://xeokit.github.io/xeokit-sdk/examples/navigation/#TreeViewPlugin_options_renderService

xeolabs commented 10 months ago

Could it be extended to create IFC element icons on the tree nodes, do you think? Maybe extend the callback to take a MetaObject, then add class names to node elements to style them with the corresponding icon?

mlankamp commented 10 months ago

That should be possible, will try tomorrow

mlankamp commented 10 months ago

The MetaObject contains the type, which I can use to render an icon in the treeview. I came up with this example: image

We could a helper class, which maps a ifc type to a specific icon (font-awesome and material design icons). Or even better, is there a defined icon set?

mlankamp commented 10 months ago

Found this: https://aecgeeks.github.io/ifc-icons/ (source: https://github.com/AECgeeks/ifc-icons)

xeolabs commented 10 months ago

Found this: https://aecgeeks.github.io/ifc-icons/ (source: https://github.com/AECgeeks/ifc-icons)

Yip that's the one I had in mind!

mlankamp commented 10 months ago

This uses the google Material Icons, I've created my example based on the material design icons library.