From 66caebb090c9a47e983ad43b52055965b4895883 Mon Sep 17 00:00:00 2001
From: Alexander Nozik <altavir@gmail.com>
Date: Thu, 19 Sep 2019 11:17:20 +0300
Subject: [PATCH] Correct tree controls for groups and proxy

---
 .../dataforge/vis/spatial/gdml/visualGDML.kt  |   6 +-
 .../vis/spatial/gdml/demo/GDMLDemoApp.kt      |  38 +-
 .../vis/spatial/gdml/demo/treeTools.kt        |  13 +
 .../src/jsMain/web/index.html                 |   9 +-
 .../src/jsMain/web/main.css                   |   2 +-
 dataforge-vis-spatial/build.gradle.kts        |   4 +-
 .../dataforge/vis/spatial/VisualGroup3D.kt    |   2 +-
 .../dataforge/vis/spatial/tree/VisualTree.kt  |   8 +
 .../hep/dataforge/vis/fancytree/Fancytree.kt  | 427 ------------------
 .../hep/dataforge/vis/fancytree/extensions.kt |  78 ----
 .../hep/dataforge/vis/fancytree/kotlinized.kt |   6 -
 .../vis/spatial/three/ThreePlugin.kt          |  17 +-
 .../vis/spatial/three/ThreeProxyFactory.kt    |  17 +
 .../vis/spatial/tree/JSVisualTree.kt          |  74 +++
 14 files changed, 160 insertions(+), 541 deletions(-)
 create mode 100644 dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/treeTools.kt
 create mode 100644 dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/tree/VisualTree.kt
 delete mode 100644 dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/Fancytree.kt
 delete mode 100644 dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/extensions.kt
 delete mode 100644 dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/kotlinized.kt
 create mode 100644 dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/tree/JSVisualTree.kt

diff --git a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
index f2e31d30..580f487e 100644
--- a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
+++ b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
@@ -80,7 +80,7 @@ private fun VisualGroup3D.addSolid(
             val innerSolid = solid.solidref.resolve(context.root)
                 ?: error("Solid with tag ${solid.solidref.ref} for scaled solid ${solid.name} not defined")
 
-            addSolid(context, innerSolid) {
+            addSolid(context, innerSolid, name) {
                 block()
                 scaleX *= solid.scale.x.toFloat()
                 scaleY *= solid.scale.y.toFloat()
@@ -152,7 +152,7 @@ private fun VisualGroup3D.addPhysicalVolume(
             val group = volume(context, volume)
             //optimizing single child case
             if (context.optimizeSingleChild && group.children.size == 1) {
-                this[physVolume.name ?: "@unnamed"] = group.children.values.first().apply {
+                this[physVolume.name ?: ""] = group.children.values.first().apply {
                     //Must ser this to avoid parent reset error
                     parent = null
                     //setting offset from physical volume
@@ -167,7 +167,7 @@ private fun VisualGroup3D.addPhysicalVolume(
                     rotation += group.rotation
                 }
             } else {
-                this[physVolume.name ?: "@unnamed"] = group.apply {
+                this[physVolume.name ?: ""] = group.apply {
                     withPosition(
                         context.lUnit,
                         physVolume.resolvePosition(context.root),
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
index 7e74041a..77aa1977 100644
--- a/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
+++ b/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -15,8 +15,9 @@ import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.launch
 import kotlinx.html.InputType
 import kotlinx.html.dom.append
-import kotlinx.html.js.div
 import kotlinx.html.js.input
+import kotlinx.html.js.li
+import kotlinx.html.js.ul
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.events.Event
@@ -79,27 +80,30 @@ private class GDMLDemoApp : ApplicationBase() {
         }
     }
 
-    fun setupSidebar(element: Element, output: ThreeOutput) {
+    fun setupSidebar(element: Element, output: ThreeOutput, root: VisualObject3D) {
         element.clear()
-        (0..9).forEach { layer ->
-            element.append {
-                div("row") {
-                    +"layer $layer"
-                    input(type = InputType.checkBox).apply {
-                        if (layer == 0) {
-                            checked = true
-                        }
-                        onchange = {
-                            if (checked) {
-                                output.camera.layers.enable(layer)
-                            } else {
-                                output.camera.layers.disable(layer)
+        element.append {
+            ul("list-group") {
+                (0..9).forEach { layer ->
+                    li("list-group-item") {
+                        +"layer $layer"
+                        input(type = InputType.checkBox).apply {
+                            if (layer == 0) {
+                                checked = true
+                            }
+                            onchange = {
+                                if (checked) {
+                                    output.camera.layers.enable(layer)
+                                } else {
+                                    output.camera.layers.disable(layer)
+                                }
                             }
                         }
                     }
                 }
             }
         }
+        element.appendFancyTree(root)
     }
 
     private val gdmlConfiguration: GDMLTransformer.() -> Unit = {
@@ -118,8 +122,6 @@ private class GDMLDemoApp : ApplicationBase() {
             }
         }
 
-//        optimizeSingleChild = true
-
         solidConfiguration = { parent, solid ->
             if (!parent.physVolumes.isEmpty()) {
                 opacity = 0.3
@@ -169,7 +171,7 @@ private class GDMLDemoApp : ApplicationBase() {
 
             //output.camera.layers.enable(1)
             output.camera.layers.set(0)
-            setupSidebar(sidebar, output)
+            setupSidebar(sidebar, output, visual)
 
             output.render(visual)
             launch {
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/treeTools.kt b/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/treeTools.kt
new file mode 100644
index 00000000..c8cc5636
--- /dev/null
+++ b/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/treeTools.kt
@@ -0,0 +1,13 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.tree.JSVisualTree
+import nl.adaptivity.js.util.asElement
+import org.w3c.dom.Element
+
+fun Element.appendFancyTree(root: VisualObject3D){
+    val visualTree = JSVisualTree("world", root) {}
+    val treeNode = visualTree.root
+    treeNode.asElement()!!.id = "fancytree"
+    appendChild(treeNode)
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/index.html b/dataforge-vis-spatial-gdml/src/jsMain/web/index.html
index 1a27e18d..d7e24b00 100644
--- a/dataforge-vis-spatial-gdml/src/jsMain/web/index.html
+++ b/dataforge-vis-spatial-gdml/src/jsMain/web/index.html
@@ -6,7 +6,8 @@
     <title>Three js demo for particle physics</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css">
+    <script src="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.32.0/dist/modules/jquery.fancytree.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.fancytree@2.32.0/dist/skin-bootstrap/ui.fancytree.min.css">
     <link rel="stylesheet" href="main.css">
     <script type="text/javascript" src="main.bundle.js"></script>
 </head>
@@ -22,15 +23,15 @@
 </div>
 <div class="container loader" id="loader" style="display:none;"></div>
 <div class="container animate-bottom" id="message" style="display:none;"></div>
-<div class="container">
+<div class="container-fluid">
     <div class="row">
         <div class="col-9" id="canvas"></div>
         <div class="col-3" id="sidebar"></div>
     </div>
 </div>
 
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
+        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
         crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
         integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/main.css b/dataforge-vis-spatial-gdml/src/jsMain/web/main.css
index a21a4397..b2bb1e78 100644
--- a/dataforge-vis-spatial-gdml/src/jsMain/web/main.css
+++ b/dataforge-vis-spatial-gdml/src/jsMain/web/main.css
@@ -10,4 +10,4 @@
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+}
diff --git a/dataforge-vis-spatial/build.gradle.kts b/dataforge-vis-spatial/build.gradle.kts
index 0916534d..ebd9ae83 100644
--- a/dataforge-vis-spatial/build.gradle.kts
+++ b/dataforge-vis-spatial/build.gradle.kts
@@ -31,8 +31,8 @@ kotlin {
                 implementation(npm("@hi-level/three-csg", "1.0.6"))
                 implementation(npm("style-loader"))
                 implementation(npm("element-resize-event"))
-                api("kotlin.js.externals:kotlin-js-jquery:3.2.0-0")
-                implementation(npm("jquery.fancytree","2.32.0"))
+//                api("kotlin.js.externals:kotlin-js-jquery:3.2.0-0")
+//                implementation(npm("jquery.fancytree","2.32.0"))
             }
         }
     }
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt
index 8c75a314..2ec91290 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt
@@ -56,7 +56,7 @@ class VisualGroup3D : AbstractVisualGroup(), VisualObject3D {
     /**
      * TODO add special static group to hold statics without propagation
      */
-    override fun addStatic(child: VisualObject) = setChild(NameToken(child.hashCode().toString()), child)
+    override fun addStatic(child: VisualObject) = setChild(NameToken("@static(${child.hashCode()})"), child)
 
     override fun createGroup(name: Name): VisualGroup3D {
         return when {
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/tree/VisualTree.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/tree/VisualTree.kt
new file mode 100644
index 00000000..8a0e4b42
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/tree/VisualTree.kt
@@ -0,0 +1,8 @@
+package hep.dataforge.vis.spatial.tree
+
+import hep.dataforge.vis.common.VisualObject
+
+interface VisualTree<out T: VisualObject> {
+    val item: T?
+    val children: Collection<VisualTree<T>>
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/Fancytree.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/Fancytree.kt
deleted file mode 100644
index c19a8a8b..00000000
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/Fancytree.kt
+++ /dev/null
@@ -1,427 +0,0 @@
-@file:JsModule("jquery.fancytree")
-@file:JsNonModule
-@file:Suppress(
-    "INTERFACE_WITH_SUPERCLASS",
-    "OVERRIDING_FINAL_MEMBER",
-    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
-    "CONFLICTING_OVERLOADS",
-    "EXTERNAL_DELEGATION"
-)
-
-package ru.mipt.npm.fancytreekt
-
-import js.externals.jquery.JQuery
-import js.externals.jquery.JQueryEventObject
-import js.externals.jquery.JQueryPromise
-import org.w3c.dom.Element
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.HTMLTableRowElement
-import org.w3c.dom.events.Event
-
-external fun createTree(id: String, options: FancytreeOptions = definedExternally /* null */): Fancytree
-
-external interface Fancytree {
-    var `$div`: JQuery<*>
-    var widget: Any
-    var rootNode: FancytreeNode
-    var `$container`: JQuery<*>
-    var focusNode: FancytreeNode
-    var options: FancytreeOptions
-    fun activateKey(key: String): FancytreeNode
-    fun activateKey(key: Boolean): FancytreeNode
-    fun applyPatch(patchList: Array<NodePatch>): JQueryPromise<Any>
-    fun changeRefKey(oldRefKey: String, newRefKey: String)
-    fun clearCookies()
-    fun clearFilter()
-    fun count(): Number
-    fun debug(msg: Any)
-    fun filterBranches(filter: String): Number
-    fun filterBranches(filter: (node: FancytreeNode) -> Boolean): Number
-    fun filterNodes(filter: String, leavesOnly: Boolean? = definedExternally /* null */): Number
-    fun filterNodes(
-        filter: (node: FancytreeNode) -> Boolean,
-        leavesOnly: Boolean? = definedExternally /* null */
-    ): Number
-
-    fun findNextNode(match: String, startNode: FancytreeNode? = definedExternally /* null */): FancytreeNode
-    fun findNextNode(
-        match: (node: FancytreeNode) -> Boolean,
-        startNode: FancytreeNode? = definedExternally /* null */
-    ): FancytreeNode
-
-    fun findAll(match: String): Array<FancytreeNode>
-    fun findAll(match: (node: FancytreeNode) -> Boolean?): Array<FancytreeNode>
-    fun generateFormElements(
-        selected: Boolean? = definedExternally /* null */,
-        active: Boolean? = definedExternally /* null */
-    )
-
-    fun getActiveNode(): FancytreeNode
-    fun getFirstChild(): FancytreeNode
-    fun getFocusNode(ifTreeHasFocus: Boolean? = definedExternally /* null */): FancytreeNode
-    fun getNodeByKey(key: String, searchRoot: FancytreeNode? = definedExternally /* null */): FancytreeNode
-    fun getNodesByRef(refKey: String, rootNode: FancytreeNode? = definedExternally /* null */): Array<FancytreeNode>
-    fun getPersistData()
-    fun getRootNode(): FancytreeNode
-    fun getSelectedNodes(stopOnParents: Boolean? = definedExternally /* null */): Array<FancytreeNode>
-    fun hasFocus(): Boolean
-    fun info(msg: Any)
-    fun isEditing(): FancytreeNode
-    fun loadKeyPath(
-        keyPathList: Array<String>,
-        callback: (node: FancytreeNode, status: String) -> Unit
-    ): JQueryPromise<Any>
-
-    fun loadKeyPath(keyPath: String, callback: (node: FancytreeNode, status: String) -> Unit): JQueryPromise<Any>
-    fun reactivate()
-    fun reload(source: Any? = definedExternally /* null */): JQueryPromise<Any>
-    fun render(force: Boolean? = definedExternally /* null */, deep: Boolean? = definedExternally /* null */)
-    fun setFocus(flag: Boolean? = definedExternally /* null */)
-    fun toDict(
-        includeRoot: Boolean? = definedExternally /* null */,
-        callback: ((node: FancytreeNode) -> Unit)? = definedExternally /* null */
-    ): Any
-
-    fun visit(fn: (node: FancytreeNode) -> Any): Boolean
-    fun warn(msg: Any)
-    fun enableUpdate(enabled: Boolean)
-}
-
-external interface FancytreeNode {
-    var tree: Fancytree
-    var parent: FancytreeNode
-    var key: String
-    var title: String
-    var data: Any
-    var children: Array<FancytreeNode>
-    var expanded: Boolean
-    var extraClasses: String
-    var folder: Boolean
-    var statusNodeType: String
-    var lazy: Boolean
-    var tooltip: String
-    var span: HTMLElement
-    var tr: HTMLTableRowElement
-    fun addChildren(
-        children: Array<NodeData>,
-        insertBefore: FancytreeNode? = definedExternally /* null */
-    ): FancytreeNode
-
-    fun addChildren(children: Array<NodeData>, insertBefore: String? = definedExternally /* null */): FancytreeNode
-    fun addChildren(children: Array<NodeData>, insertBefore: Number? = definedExternally /* null */): FancytreeNode
-    fun addChildren(child: NodeData, insertBefore: FancytreeNode? = definedExternally /* null */): FancytreeNode
-    fun addChildren(child: NodeData, insertBefore: String? = definedExternally /* null */): FancytreeNode
-    fun addChildren(child: NodeData, insertBefore: Number? = definedExternally /* null */): FancytreeNode
-    fun addClass(className: String)
-    fun addNode(node: NodeData, mode: String? = definedExternally /* null */): FancytreeNode
-    fun applyPatch(patch: NodePatch): JQueryPromise<Any>
-    fun collapseSiblings(): JQueryPromise<Any>
-    fun copyTo(
-        node: FancytreeNode,
-        mode: String? = definedExternally /* null */,
-        map: ((node: NodeData) -> Unit)? = definedExternally /* null */
-    ): FancytreeNode
-
-    fun countChildren(deep: Boolean? = definedExternally /* null */): Number
-    fun debug(msg: Any)
-    fun editCreateNode(mode: String? = definedExternally /* null */, init: Any? = definedExternally /* null */)
-    fun editEnd(applyChanges: Boolean)
-    fun editStart()
-    fun findAll(match: String): Array<FancytreeNode>
-    fun findAll(match: (node: FancytreeNode) -> Boolean): Array<FancytreeNode>
-    fun findFirst(match: String): FancytreeNode
-    fun findFirst(match: (node: FancytreeNode) -> Boolean): FancytreeNode
-    fun fixSelection3AfterClick()
-    fun fixSelection3FromEndNodes()
-    fun fromDict(dict: NodeData)
-    fun getChildren(): Array<FancytreeNode>
-    fun getCloneList(includeSelf: Boolean? = definedExternally /* null */): Array<FancytreeNode>
-    fun getFirstChild(): FancytreeNode
-    fun getIndex(): Number
-    fun getIndexHier(): String
-    fun getKeyPath(excludeSelf: Boolean): String
-    fun getLastChild(): FancytreeNode
-    fun getLevel(): Number
-    fun getNextSibling(): FancytreeNode
-    fun getParent(): FancytreeNode
-    fun getParentList(includeRoot: Boolean, includeSelf: Boolean): Array<FancytreeNode>
-    fun getPrevSibling(): FancytreeNode
-    fun hasChildren(): Boolean
-    fun hasFocus(): Boolean
-    fun info(msg: String)
-    fun isActive(): Boolean
-    fun isChildOf(otherNode: FancytreeNode): Boolean
-    fun isClone(): Boolean
-    fun isDescendantOf(otherNode: FancytreeNode): Boolean
-    fun isEditing(): Boolean
-    fun isExpanded(): Boolean
-    fun isFirstSibling(): Boolean
-    fun isFolder(): Boolean
-    fun isLastSibling(): Boolean
-    fun isLazy(): Boolean
-    fun isLoaded(): Boolean
-    fun isLoading(): Boolean
-    fun isRootNode(): Boolean
-    fun isSelected(): Boolean
-    fun isStatusNode(): Boolean
-    fun isTopLevel(): Boolean
-    fun isUndefined(): Boolean
-    fun isVisible(): Boolean
-    fun load(forceReload: Boolean? = definedExternally /* null */): JQueryPromise<Any>
-    fun makeVisible(opts: Any? = definedExternally /* null */): JQueryPromise<Any>
-    fun moveTo(
-        targetNode: FancytreeNode,
-        mode: String,
-        map: ((node: FancytreeNode) -> Unit)? = definedExternally /* null */
-    )
-
-    fun navigate(where: Number, activate: Boolean? = definedExternally /* null */): JQueryPromise<Any>
-    fun remove()
-    fun removeChild(childNode: FancytreeNode)
-    fun removeChildren()
-    fun removeClass(className: String)
-    fun render(force: Boolean? = definedExternally /* null */, deep: Boolean? = definedExternally /* null */)
-    fun renderStatus()
-    fun renderTitle()
-    fun reRegister(key: String, refKey: String): Boolean
-    fun resetLazy()
-    fun scheduleAction(mode: String, ms: Number)
-    fun scrollIntoView(
-        effects: Boolean? = definedExternally /* null */,
-        options: Any? = definedExternally /* null */
-    ): JQueryPromise<Any>
-
-    fun scrollIntoView(
-        effects: Any? = definedExternally /* null */,
-        options: Any? = definedExternally /* null */
-    ): JQueryPromise<Any>
-
-    fun setActive(
-        flag: Boolean? = definedExternally /* null */,
-        opts: Any? = definedExternally /* null */
-    ): JQueryPromise<Any>
-
-    fun setExpanded(
-        flag: Boolean? = definedExternally /* null */,
-        opts: Any? = definedExternally /* null */
-    ): JQueryPromise<Any>
-
-    fun setFocus(flag: Boolean? = definedExternally /* null */)
-    fun setSelected(flag: Boolean? = definedExternally /* null */)
-    fun setStatus(
-        status: String,
-        message: String? = definedExternally /* null */,
-        details: String? = definedExternally /* null */
-    )
-
-    fun setTitle(title: String)
-    fun sortChildren(
-        cmp: ((a: FancytreeNode, b: FancytreeNode) -> Number)? = definedExternally /* null */,
-        deep: Boolean? = definedExternally /* null */
-    )
-
-    fun toDict(
-        recursive: Boolean? = definedExternally /* null */,
-        callback: ((dict: NodeData) -> Unit)? = definedExternally /* null */
-    ): NodeData
-
-    fun toggleClass(className: String, flag: Boolean? = definedExternally /* null */): Boolean
-    fun toggleExpanded()
-    fun toggleSelected()
-    fun visit(fn: (node: FancytreeNode) -> Any, includeSelf: Boolean? = definedExternally /* null */): Boolean
-    fun visitAndLoad(
-        fn: (node: FancytreeNode) -> Any,
-        includeSelf: Boolean? = definedExternally /* null */
-    ): JQueryPromise<Any>
-
-    fun visitParents(fn: (node: FancytreeNode) -> Any, includeSelf: Boolean? = definedExternally /* null */): Boolean
-    fun warn(msg: Any)
-    fun addChildren(children: Array<NodeData>): FancytreeNode
-    fun addChildren(child: NodeData): FancytreeNode
-    fun scrollIntoView(): JQueryPromise<Any>
-}
-
-external enum class FancytreeClickFolderMode {
-    activate /* = 1 */,
-    expand /* = 2 */,
-    activate_and_expand /* = 3 */,
-    activate_dblclick_expands /* = 4 */
-}
-
-external enum class FancytreeSelectMode {
-    single /* = 1 */,
-    multi /* = 2 */,
-    mutlti_hier /* = 3 */
-}
-
-external interface EventData {
-    var tree: Fancytree
-    var widget: Any
-    var options: FancytreeOptions
-    var originalEvent: JQueryEventObject
-    var node: FancytreeNode
-    var result: Any
-    var targetType: String
-    var response: Any
-}
-
-external interface FancytreeEvents {
-    val activate: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val beforeActivate: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val beforeExpand: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val beforeSelect: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val blur: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val blurTree: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val click: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val collapse: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val create: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val createNode: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val dblclick: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val deactivate: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val expand: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val focus: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val focusTree: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val init: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val keydown: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val keypress: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val lazyLoad: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val loadChildren: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val loadError: ((event: JQueryEventObject, data: EventData) -> Boolean)? get() = definedExternally
-    val postProcess: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val removeNode: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val renderColumns: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val renderNode: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val renderTitle: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val restore: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    val select: ((event: JQueryEventObject, data: EventData) -> Unit)? get() = definedExternally
-    var rtl: Boolean? get() = definedExternally; set(value) = definedExternally
-}
-
-external interface `T$0` {
-    var type: String
-    var cache: Boolean
-    var dataType: String
-}
-
-external interface `T$1` {
-    var top: Number
-    var bottom: Number
-}
-
-external interface FancytreeOptions : FancytreeEvents {
-    var activeVisible: Boolean? get() = definedExternally; set(value) = definedExternally
-    var ajax: `T$0`? get() = definedExternally; set(value) = definedExternally
-    var aria: Boolean? get() = definedExternally; set(value) = definedExternally
-    var autoActivate: Boolean? get() = definedExternally; set(value) = definedExternally
-    var autoCollapse: Boolean? get() = definedExternally; set(value) = definedExternally
-    var autoScroll: Boolean? get() = definedExternally; set(value) = definedExternally
-    var checkbox: dynamic /* Boolean | String | (event: JQueryEventObject, data: EventData) -> Boolean */
-    var clickFolderMode: FancytreeClickFolderMode? get() = definedExternally; set(value) = definedExternally
-    var debugLevel: dynamic /* 0 | 1 | 2 | 3 | 4 */
-    var defaultKey: ((node: FancytreeNode) -> String)? get() = definedExternally; set(value) = definedExternally
-    var enableAspx: Boolean? get() = definedExternally; set(value) = definedExternally
-    var enableTitles: Boolean? get() = definedExternally; set(value) = definedExternally
-    var extensions: Array<dynamic /* Any | String */>? get() = definedExternally; set(value) = definedExternally
-    var focusOnSelect: Boolean? get() = definedExternally; set(value) = definedExternally
-    var generateIds: Boolean? get() = definedExternally; set(value) = definedExternally
-    var icon: dynamic /* Boolean | String */
-    var idPrefix: String? get() = definedExternally; set(value) = definedExternally
-    var imagePath: String? get() = definedExternally; set(value) = definedExternally
-    var keyboard: Boolean? get() = definedExternally; set(value) = definedExternally
-    var keyPathSeparator: String? get() = definedExternally; set(value) = definedExternally
-    var minExpandLevel: Number? get() = definedExternally; set(value) = definedExternally
-    var quicksearch: Boolean? get() = definedExternally; set(value) = definedExternally
-    var scrollOfs: `T$1`? get() = definedExternally; set(value) = definedExternally
-    var scrollParent: JQuery<*>? get() = definedExternally; set(value) = definedExternally
-    var selectMode: FancytreeSelectMode? get() = definedExternally; set(value) = definedExternally
-    var source: dynamic /* Array<Any> | Any */
-    var strings: TranslationTable? get() = definedExternally; set(value) = definedExternally
-    var tabbable: Boolean? get() = definedExternally; set(value) = definedExternally
-    var titlesTabbable: Boolean? get() = definedExternally; set(value) = definedExternally
-    //var toggleEffect: EffectOptions? get() = definedExternally; set(value) = definedExternally
-    var tooltip: Boolean? get() = definedExternally; set(value) = definedExternally
-    var unselectable: dynamic /* Boolean | (event: JQueryEventObject, data: Fancytree.EventData) -> Boolean? */
-    var unselectableIgnore: dynamic /* Boolean | (event: JQueryEventObject, data: Fancytree.EventData) -> Boolean? */
-    var unselectableStatus: dynamic /* Boolean | (event: JQueryEventObject, data: Fancytree.EventData) -> Boolean? */
-    var dnd5: DragAndDrop5
-    var filter: Filter
-    var table: Table
-    @nativeGetter
-    operator fun get(extension: String): Any?
-
-    @nativeSetter
-    operator fun set(extension: String, value: Any)
-}
-
-external interface TranslationTable {
-    var loading: String
-    var loadError: String
-    var moreData: String
-    var noData: String
-}
-
-external interface NodeData {
-    var title: String
-    var icon: dynamic /* Boolean | String */
-    var key: String? get() = definedExternally; set(value) = definedExternally
-    var refKey: String? get() = definedExternally; set(value) = definedExternally
-    var expanded: Boolean? get() = definedExternally; set(value) = definedExternally
-    var active: Boolean? get() = definedExternally; set(value) = definedExternally
-    var focus: Boolean? get() = definedExternally; set(value) = definedExternally
-    var folder: Boolean? get() = definedExternally; set(value) = definedExternally
-    var hideCheckbox: Boolean? get() = definedExternally; set(value) = definedExternally
-    var lazy: Boolean? get() = definedExternally; set(value) = definedExternally
-    var selected: Boolean? get() = definedExternally; set(value) = definedExternally
-    var unselectable: Boolean? get() = definedExternally; set(value) = definedExternally
-    var children: Array<NodeData>? get() = definedExternally; set(value) = definedExternally
-    var tooltip: String? get() = definedExternally; set(value) = definedExternally
-    var extraClasses: String? get() = definedExternally; set(value) = definedExternally
-    var data: Any? get() = definedExternally; set(value) = definedExternally
-    var iconTooltip: String? get() = definedExternally; set(value) = definedExternally
-    var statusNodeType: String? get() = definedExternally; set(value) = definedExternally
-    var type: String? get() = definedExternally; set(value) = definedExternally
-    var unselectableIgnore: Boolean? get() = definedExternally; set(value) = definedExternally
-    var unselectableStatus: Boolean? get() = definedExternally; set(value) = definedExternally
-}
-
-external interface NodePatch {
-    var appendChildren: NodeData? get() = definedExternally; set(value) = definedExternally
-    var replaceChildren: NodeData? get() = definedExternally; set(value) = definedExternally
-    var insertChildren: NodeData? get() = definedExternally; set(value) = definedExternally
-}
-
-external interface TreePatch {
-    @nativeGetter
-    operator fun get(key: String): NodePatch?
-
-    @nativeSetter
-    operator fun set(key: String, value: NodePatch)
-}
-
-external object FancytreeStatic {
-    var buildType: String
-    var debugLevel: Number
-    var version: String
-    fun assert(cond: Boolean, msg: String)
-    fun <T : (args: Any) -> Unit> debounce(
-        timeout: Number,
-        fn: T,
-        invokeAsap: Boolean? = definedExternally /* null */,
-        ctx: Any? = definedExternally /* null */
-    ): T
-
-    fun debug(msg: String)
-    fun error(msg: String)
-    fun escapeHtml(s: String): String
-    fun getEventTarget(event: Event): Any
-    fun getEventTargetType(event: Event): String
-    fun getNode(el: JQuery<*>): FancytreeNode
-    fun getNode(el: Event): FancytreeNode
-    fun getNode(el: Element): FancytreeNode
-    fun info(msg: String)
-    fun keyEventToString(event: Event): String
-    fun parseHtml(`$ul`: JQuery<*>): Array<NodeData>
-    fun registerExtension(definition: Any)
-    fun unescapeHtml(s: String): String
-    fun warn(msg: String)
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/extensions.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/extensions.kt
deleted file mode 100644
index cbe01cae..00000000
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/extensions.kt
+++ /dev/null
@@ -1,78 +0,0 @@
-@file:JsModule("jquery.fancytree")
-@file:JsNonModule
-@file:Suppress(
-    "INTERFACE_WITH_SUPERCLASS",
-    "OVERRIDING_FINAL_MEMBER",
-    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
-    "CONFLICTING_OVERLOADS",
-    "EXTERNAL_DELEGATION"
-)
-package ru.mipt.npm.fancytreekt
-
-external interface List {
-    var dnd5: DragAndDrop5? get() = definedExternally; set(value) = definedExternally
-    var filter: Filter? get() = definedExternally; set(value) = definedExternally
-    var table: Table? get() = definedExternally; set(value) = definedExternally
-    @nativeGetter
-    operator fun get(extension: String): Any?
-
-    @nativeSetter
-    operator fun set(extension: String, value: Any)
-}
-
-external interface DragAndDrop5 {
-    var autoExpandMS: Number? get() = definedExternally; set(value) = definedExternally
-    var dropMarkerOffsetX: Number? get() = definedExternally; set(value) = definedExternally
-    var dropMarkerInsertOffsetX: Number? get() = definedExternally; set(value) = definedExternally
-    var multiSource: Boolean? get() = definedExternally; set(value) = definedExternally
-    var preventForeignNodes: Boolean? get() = definedExternally; set(value) = definedExternally
-    var preventNonNodes: Boolean? get() = definedExternally; set(value) = definedExternally
-    var preventRecursiveMoves: Boolean? get() = definedExternally; set(value) = definedExternally
-    var preventVoidMoves: Boolean? get() = definedExternally; set(value) = definedExternally
-    var scroll: Boolean? get() = definedExternally; set(value) = definedExternally
-    var scrollSensitivity: Number? get() = definedExternally; set(value) = definedExternally
-    var scrollSpeed: Number? get() = definedExternally; set(value) = definedExternally
-    var setTextTypeJson: Boolean? get() = definedExternally; set(value) = definedExternally
-    var dragStart: ((sourceNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragDrag: ((sourceNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragEnd: ((sourceNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragEnter: ((targetNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragOver: ((targetNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragExpand: ((targetNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragDrop: ((node: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    var dragLeave: ((targetNode: FancytreeNode, data: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
-    @nativeGetter
-    operator fun get(key: String): Any?
-
-    @nativeSetter
-    operator fun set(key: String, value: Any)
-}
-
-external interface Filter {
-    var autoApply: Boolean
-    var autoExpand: Boolean
-    var counter: Boolean
-    var fuzzy: Boolean
-    var hideExpandedCounter: Boolean
-    var hideExpanders: Boolean
-    var highlight: Boolean
-    var leavesOnly: Boolean
-    var nodata: Boolean
-    var mode: dynamic /* 'dimm' | 'string' */
-    @nativeGetter
-    operator fun get(key: String): Any?
-
-    @nativeSetter
-    operator fun set(key: String, value: Any)
-}
-
-external interface Table {
-    var checkboxColumnIdx: Any
-    var indentation: Number
-    var nodeColumnIdx: Number
-    @nativeGetter
-    operator fun get(key: String): Any?
-
-    @nativeSetter
-    operator fun set(key: String, value: Any)
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/kotlinized.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/kotlinized.kt
deleted file mode 100644
index 762dd6b5..00000000
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/fancytree/kotlinized.kt
+++ /dev/null
@@ -1,6 +0,0 @@
-package ru.mipt.npm.fancytreekt
-
-import kotlin.js.json
-
-@Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE", "FunctionName")
-fun NodeData(block: NodeData.() -> Unit): NodeData = (json() as NodeData).apply(block)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
index 8621091c..db90a39e 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
@@ -8,6 +8,7 @@ import hep.dataforge.meta.*
 import hep.dataforge.names.Name
 import hep.dataforge.names.asName
 import hep.dataforge.names.isEmpty
+import hep.dataforge.names.startsWith
 import hep.dataforge.vis.spatial.*
 import info.laht.threekt.cameras.Camera
 import info.laht.threekt.cameras.PerspectiveCamera
@@ -17,6 +18,7 @@ import info.laht.threekt.external.controls.TrackballControls
 import org.w3c.dom.Node
 import kotlin.collections.set
 import kotlin.reflect.KClass
+import info.laht.threekt.objects.Group as ThreeGroup
 
 class ThreePlugin : AbstractPlugin() {
     override val tag: PluginTag get() = Companion.tag
@@ -42,7 +44,7 @@ class ThreePlugin : AbstractPlugin() {
         return when (obj) {
             is Proxy -> proxyFactory(obj)
             is VisualGroup3D -> {
-                val group = info.laht.threekt.objects.Group()
+                val group = ThreeGroup()
                 obj.children.forEach { (name, child) ->
                     if (child is VisualObject3D) {
                         try {
@@ -58,6 +60,19 @@ class ThreePlugin : AbstractPlugin() {
                 group.apply {
                     updatePosition(obj)
                     //obj.onChildrenChange()
+
+                    obj.onPropertyChange(this) { name, _, _ ->
+                        if (
+                            name.startsWith(VisualObject3D.position) ||
+                            name.startsWith(VisualObject3D.rotation) ||
+                            name.startsWith(VisualObject3D.scale)
+                        ) {
+                            //update position of mesh using this object
+                            updatePosition(obj)
+                        } else if (name == VisualObject3D.VISIBLE_KEY) {
+                            visible = obj.visible ?: true
+                        }
+                    }
                 }
             }
             is Composite -> compositeFactory(obj)
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
index f198e470..2820d24a 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
@@ -1,5 +1,6 @@
 package hep.dataforge.vis.spatial.three
 
+import hep.dataforge.names.startsWith
 import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.spatial.Proxy
 import hep.dataforge.vis.spatial.VisualObject3D
@@ -28,6 +29,22 @@ class ThreeProxyFactory(val three: ThreePlugin) : ThreeFactory<Proxy> {
         val object3D = cachedObject.clone()
         object3D.updatePosition(obj)
 
+        obj.onPropertyChange(this) { name, _, _ ->
+            if (object3D is Mesh && name.startsWith(VisualObject3D.MATERIAL_KEY)) {
+                //updated material
+                object3D.material = obj.material.jsMaterial()
+            } else if (
+                name.startsWith(VisualObject3D.position) ||
+                name.startsWith(VisualObject3D.rotation) ||
+                name.startsWith(VisualObject3D.scale)
+            ) {
+                //update position of mesh using this object
+                object3D.updatePosition(obj)
+            } else if (name == VisualObject3D.VISIBLE_KEY) {
+                object3D.visible = obj.visible ?: true
+            }
+        }
+
         obj.onChildrenChange(object3D) { name, propertyHolder ->
             (object3D.findChild(name) as? Mesh)?.updateProperties(propertyHolder)
         }
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/tree/JSVisualTree.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/tree/JSVisualTree.kt
new file mode 100644
index 00000000..07f9e986
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/tree/JSVisualTree.kt
@@ -0,0 +1,74 @@
+package hep.dataforge.vis.spatial.tree
+
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.visible
+import kotlinx.html.InputType
+import kotlinx.html.dom.append
+import kotlinx.html.js.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.Node
+import kotlin.browser.document
+
+class JSVisualTree(
+    val title: String,
+    override val item: VisualObject,
+    val callback: VisualObject.() -> Unit
+) : VisualTree<VisualObject> {
+
+    override val children: Collection<JSVisualTree> by lazy {
+        if (item is VisualGroup) {
+            item.children.mapNotNull {(key,value)->
+                val str = key.toString()
+                if(!str.startsWith("@")) {
+                    JSVisualTree(str, value, callback)
+                } else {
+                     null
+                }
+            }
+        } else {
+            emptyList()
+        }
+    }
+
+    var visible: Boolean
+        get() = item.visible ?: true
+        set(value) {
+            item.visible = value
+        }
+
+    val root: Node by lazy {
+        (document.createElement("div") as HTMLDivElement).apply {
+            append {
+                div(TREE_ITEM_HEADER_CLASS) {
+                    input(type = InputType.checkBox).apply {
+                        checked = visible
+                        onChangeFunction = {
+                            visible = checked
+                        }
+                    }
+                    a {
+                        +this@JSVisualTree.title
+                        +"[${item::class}]"
+                    }
+                }
+                if (item is VisualGroup) {
+                    ul {
+                        this@JSVisualTree.children.forEach { value ->
+                            li(TREE_NODE_CLASS).apply {
+                                appendChild(value.root)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    companion object {
+        const val TREE_NODE_CLASS = "tree-node"
+        const val TREE_LEAF_CLASS = "tree-leaf"
+        const val TREE_ITEM_HEADER_CLASS = "tree-header"
+    }
+
+}
\ No newline at end of file