Allow constructing Root containers from HTMLElement objects.

2 files changed, 23 insertions, 3 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
index faa0b77c..d1a4a8be 100644
--- a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
@@ -29,6 +29,7 @@ import com.github.snabbdom.datasetModule
 import com.github.snabbdom.eventListenersModule
 import com.github.snabbdom.propsModule
 import com.github.snabbdom.styleModule
+import org.w3c.dom.HTMLElement
 import pl.treksoft.kvision.core.Component
 import pl.treksoft.kvision.utils.isIE11
 import kotlin.browser.document
@@ -72,6 +73,10 @@ internal object KVManager {
         return sdPatch(container, vnode)
     }
 
+    internal fun patch(element: HTMLElement, vnode: VNode): VNode {
+        return sdPatch(element, vnode)
+    }
+
     internal fun patch(oldVNode: VNode, newVNode: VNode): VNode {
         return sdPatch(oldVNode, newVNode)
     }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
index c17ea1a4..dd3d39b6 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.panel
 
 import com.github.snabbdom.VNode
 import com.github.snabbdom.h
+import org.w3c.dom.HTMLElement
 import pl.treksoft.kvision.KVManager
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.Style
@@ -45,7 +46,12 @@ import pl.treksoft.kvision.utils.snOpt
  * @param init an initializer extension function
  */
 @Suppress("TooManyFunctions")
-class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Unit)? = null) : SimplePanel() {
+class Root(
+    id: String? = null,
+    element: HTMLElement? = null,
+    private val fixed: Boolean = false,
+    init: (Root.() -> Unit)? = null
+) : SimplePanel() {
     private val contextMenus: MutableList<ContextMenu> = mutableListOf()
     private var rootVnode: VNode = renderVNode()
 
@@ -54,8 +60,15 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
     val isFirstRoot = roots.isEmpty()
 
     init {
-        rootVnode = KVManager.patch(id, this.renderVNode())
-        this.id = id
+        if (id != null) {
+            rootVnode = KVManager.patch(id, this.renderVNode())
+            this.id = id
+        } else if (element != null) {
+            rootVnode = KVManager.patch(element, this.renderVNode())
+            this.id = "kv_root_${counter++}"
+        } else {
+            throw IllegalArgumentException("No root element specified!")
+        }
         roots.add(this)
         if (isFirstRoot) {
             Style.styles.forEach { it.parent = this }
@@ -144,6 +157,8 @@ class Root(id: String, private val fixed: Boolean = false, init: (Root.() -> Uni
     }
 
     companion object {
+        internal var counter = 0
+
         /**
          * @suppress internal function
          */