Support for tree component

[BrownWei]

Tree component that can dynamically add nodes is being implemented. How can kvision support tree component?

[rjaros]

Hi.
Do you mean something like http://inspire-tree.com/ ?

[BrownWei]

Hi. Do you mean something like http://inspire-tree.com/ ?

Thanks, yes that's it.
Is there a recommended implementation (like react-arborist) and a way to integrate with KVision？

[BrownWei]

And I found that in the older version, the use of the tree component as follows,
import pl.treksoft.kvision.tree.Tree
import pl.treksoft.kvision.tree.TreeNode

but cannot be found in the new version 6.2.3

[rjaros]

There is no support for InspireTree in KVision, but you can fairly easy integrate with InspireTreeDom implementation.

Add dependencies to build.gradle.kts

implementation(npm("inspire-tree", "*"))
implementation(npm("inspire-tree-dom", "*"))

Create simple external declarations:

@JsModule("inspire-tree")
@JsNonModule
external class InspireTree(treeConfiguration: dynamic) {
    fun on(event: String, callback: (treeNode: dynamic, isLoadEvent: Boolean) -> Unit)
    // TODO - add other event handlers
}

@JsModule("inspire-tree-dom")
@JsNonModule
external class InspireTreeDom(tree: InspireTree, domConfiguration: dynamic)

Use one of provided CSS:

require("inspire-tree-dom/dist/inspire-tree-light.min.css")

Define tree model and configuration:

val tree = obj {
    selection = obj {
        mode = "checkbox"
    }
    data = arrayOf(
        obj {
            text = "Node 1"
            children = arrayOf(
                obj {
                    text = "Node 1.1"
                },
                obj {
                    text = "Node 1.2"
                }
            )
        },
        obj {
            text = "Node 2"
        }
    )
}

Use addAfterInsertHook {} on any KVision component (eg. Div) to access DOM element, attach the tree component and then use it as you like (e.g. handle events):

div {
    addAfterInsertHook {
        val inspireTree = InspireTree(tree)
        InspireTreeDom(inspireTree, obj {
            target = this@div.getElement()
        })
        inspireTree.on("node.selected") { node, _ ->
            console.log("node selected")
            console.log(node.text)
        }
    }
}

This should be enough to build and use any kind of tree supported by Inspire Tree library.

[rjaros]

I'll leave this bug open and I'll think about adding Tree component to KVision with a dedicated, custom renderer implementation when I have some spare time.

[rjaros]

Of course contributions are welcomed :)

[BrownWei]

We have applied InspireTree in the project, but how to partially refresh the node data of the tree is still a problem. If I perform the refresh, the page will freeze when the tree node data is large. How can I implement a custom renderer?

[rjaros]

Hi,

It seems strange you experience performance problems. InspireTree dom rendering engine is based on Inferno, and it is one of the fastest rendering engines in JS world. I think custom renderer could be perhaps easier to manage from KVision and require less dependencies (resulting in lower bundle size) but I don't think it would ever be faster.

Perhaps you are doing something wrong, resulting in some unnecessary rendering or loops. Could you share some of your code?