Open popover anchored to item

example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/PopoverTestingPage.kt

@@ -1,10 +1,10 @@
 package com.lightningkite.mppexampleapp.internal
 
-import com.lightningkite.kiteui.views.ViewWriter
 import com.lightningkite.kiteui.Routable
 import com.lightningkite.kiteui.models.*
 import com.lightningkite.kiteui.navigation.Page
 import com.lightningkite.kiteui.views.*
+import com.lightningkite.kiteui.views.ViewWriter
 import com.lightningkite.kiteui.views.direct.*
 
 @Routable("popover-testing")
@@ -17,22 +17,26 @@ object PopoverTestingPage : Page {
                         row {
                             for (align in Align.entries) {
                                 card.menuButton {
-                                    text(buildString {
-                                        if (horizontal) append("H") else append("V")
-                                        if (after) append(">") else append("<")
-                                        append(align.name.first())
-                                    })
-                                    preferredDirection = PopoverPreferredDirection(
-                                        horizontal = horizontal,
-                                        after = after,
-                                        align = align
+                                    text(
+                                        buildString {
+                                            if (horizontal) append("H") else append("V")
+                                            if (after) append(">") else append("<")
+                                            append(align.name.first())
+                                        }
                                     )
+                                    preferredDirection =
+                                        PopoverPreferredDirection(
+                                            horizontal = horizontal,
+                                            after = after,
+                                            align = align
+                                        )
                                     requireClick = true
                                     opensMenu {
                                         sizeConstraints(width = 20.rem, height = 20.rem).frame {
                                             centered.col {
                                                 text("Popover!")
-                                                if (horizontal) text("Horizontal") else text("Vertical")
+                                                if (horizontal) text("Horizontal")
+                                                else text("Vertical")
                                                 if (after) text("After") else text("Before")
                                                 text(align.name)
                                             }
@@ -45,11 +49,12 @@ object PopoverTestingPage : Page {
                 }
                 card.menuButton {
                     text("dumb")
-                    preferredDirection = PopoverPreferredDirection(
-                        horizontal = true,
-                        after = true,
-                        align = Align.Start
-                    )
+                    preferredDirection =
+                        PopoverPreferredDirection(
+                            horizontal = true,
+                            after = true,
+                            align = Align.Start
+                        )
                     requireClick = true
                     opensMenu {
                         sizeConstraints(width = 1000.rem, height = 1000.rem).frame {
@@ -60,6 +65,19 @@ object PopoverTestingPage : Page {
                         }
                     }
                 }
+
+                row {
+                    val anchorTarget = button { text("Anchor Target") }
+                    space()
+                    button {
+                        text("Open at Target")
+                        onClick {
+                            openPopover(PopoverPreferredDirection.belowCenter, anchorTarget) {
+                                text("Anchored to Target!")
+                            }
+                        }
+                    }
+                }
             }
             atTopStart.testGrouping()
             atTopCenter.testGrouping()
@@ -72,4 +90,4 @@ object PopoverTestingPage : Page {
             atBottomEnd.testGrouping()
         }
     }
-}
+}

example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/TestingGroundPage.kt

@@ -1,6 +1,8 @@
 package com.lightningkite.mppexampleapp.internal
 
 import com.lightningkite.kiteui.Routable
+import com.lightningkite.kiteui.models.PopoverPreferredDirection
+import com.lightningkite.kiteui.models.ThemeDerivation.Companion.invoke
 import com.lightningkite.kiteui.models.rem
 import com.lightningkite.kiteui.navigation.Page
 import com.lightningkite.kiteui.reactive.*
@@ -16,21 +18,42 @@ import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
 @Routable("testing")
-object TestingGroundPage: Page {
+object TestingGroundPage : Page {
     val progressRatio: Signal<Float> = Signal(0f)
     override fun ViewWriter.render(): Unit = run {
-//        val ratioShared = sharedSuspending {
-//            kotlinx.coroutines.delay(1000)
-//            ratio.set(ratio.value + 0.1f)
-//            println("ratio: $ratio.value")
-//            ratio()
-//        }
-
-
+        //        val ratioShared = sharedSuspending {
+        //            kotlinx.coroutines.delay(1000)
+        //            ratio.set(ratio.value + 0.1f)
+        //            println("ratio: $ratio.value")
+        //            ratio()
+        //        }
 
         scrolling.col {
             h1("Experiments test")
-            centered.sizeConstraints(maxWidth = 10.rem).image { source = Resources.imagesSnowyBackground }
+            centered.sizeConstraints(maxWidth = 10.rem).image {
+                source = Resources.imagesSnowyBackground
+            }
+            col {
+                val input = Signal("")
+                var anchorTarget: RView? = null
+                fieldTheme.beforeNextElementSetup { anchorTarget = this }.textArea {
+                    hint = "Type test show popup"
+                    content.bind(input)
+                }
+                reactive {
+                    if (input() == "test") {
+                        anchorTarget?.openPopover(
+                            PopoverPreferredDirection.aboveRight,
+                            anchorTarget
+                        ) {
+                            card.text("Trax Bagley")
+                        }
+                    } else closeThisPopover()
+                }
+                row {
+                    expanding.text("Is this behind it or what. Lorem ipsum dolor sit amet. Test Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum")
+                }
+            }
 
             launch {
                 while (true) {
@@ -42,18 +65,15 @@ object TestingGroundPage: Page {
                 }
             }
 
-            progressBar {
-                ::ratio {
-                    progressRatio.invoke()
-                }
+            progressBar { ::ratio { progressRatio.invoke() } }
+            //            frame {
+            sizeConstraints(width = 6.rem, height = 6.rem).circularProgress {
+                ::ratio { progressRatio.invoke() }
             }
-//            frame {
-                sizeConstraints(width = 6.rem, height = 6.rem).circularProgress {
-                    ::ratio {
-                        progressRatio.invoke()
-                    }
-                }
-//            }
+            //            }
+
+
+
         }
     }
-}
+}

library/src/androidMain/kotlin/com/lightningkite/kiteui/views/direct/MenuButton.android.kt

@@ -41,24 +41,11 @@ actual class MenuButton actual constructor(context: RContext): RView(context) {
                         closePopovers()
                     }
                     atTopStart.onNext(PopoverSemantic).frame {
-                        this@dismissBackground.native.apply {
-                            clipChildren = false
-                            clipToPadding = false
-                        }
-                        this@dismissBackground.native.addOnLayoutChangeListener{ dismissBackground, _, _, _, _, _, _, _, _ ->
-                            val overlayContainer = this@frame.native
-                            val anchor = this@MenuButton.native
-
-                            val overlayBoundsInWindow = overlayContainer.getBoundariesInWindow()
-                            val offset = preferredDirection.calculatePopoverOffset(
-                                anchor.getBoundariesInWindow(),
-                                overlayBoundsInWindow,
-                                dismissBackground.getBoundariesInWindow()
-                            )
-
-                            overlayContainer.offsetLeftAndRight((offset.first - overlayBoundsInWindow.left).toInt())
-                            overlayContainer.offsetTopAndBottom((offset.second - overlayBoundsInWindow.top).toInt())
-                        }
+                        configurePopoverLayout(
+                            dismissBackground = this@dismissBackground,
+                            anchorView = this@MenuButton.native,
+                            preferredDirection = preferredDirection
+                        )
                         createMenu()
                     }
                 }

library/src/androidMain/kotlin/com/lightningkite/kiteui/views/direct/openPopover.android.kt

@@ -1,5 +1,7 @@
 package com.lightningkite.kiteui.views.direct
 
+
+import android.view.ViewGroup
 import com.lightningkite.kiteui.models.Color
 import com.lightningkite.kiteui.models.CornerRadii
 import com.lightningkite.kiteui.models.DismissSemantic
@@ -18,6 +20,7 @@ import com.lightningkite.kiteui.views.popoverWriter
 
 actual fun RView.openPopover(
     preferredDirection: PopoverPreferredDirection,
+    anchor: RView?,
     createMenu: Frame.() -> Unit
 ) {
     var willRemove: RView? = null
@@ -45,27 +48,45 @@ actual fun RView.openPopover(
                 closePopovers()
             }
 
-            atTopStart.onNext(PopoverSemantic).frame {
-                this@dismissBackground.native.apply {
-                    clipChildren = false
-                    clipToPadding = false
-                }
-                this@dismissBackground.native.addOnLayoutChangeListener{ dismissBackground, _, _, _, _, _, _, _, _ ->
-                    val overlayContainer = this@frame.native
-                    val anchor = this@openPopover.native
-
-                    val overlayBoundsInWindow = overlayContainer.getBoundariesInWindow()
-                    val offset = preferredDirection.calculatePopoverOffset(
-                        anchor.getBoundariesInWindow(),
-                        overlayBoundsInWindow,
-                        dismissBackground.getBoundariesInWindow()
-                    )
-
-                    overlayContainer.offsetLeftAndRight((offset.first - overlayBoundsInWindow.left).toInt())
-                    overlayContainer.offsetTopAndBottom((offset.second - overlayBoundsInWindow.top).toInt())
-                }
+            PopoverSemantic.onNext.frame {
+                configurePopoverLayout(
+                    dismissBackground = this@dismissBackground,
+                    anchorView = (anchor ?: this@openPopover).native,
+                    preferredDirection = preferredDirection
+                )
                 createMenu()
             }
         }
     }
+}
+
+
+fun Frame.configurePopoverLayout(
+    dismissBackground: RView,
+    anchorView: android.view.View,
+    preferredDirection: PopoverPreferredDirection
+) {
+    native.layoutParams = android.widget.FrameLayout.LayoutParams(
+        android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
+        android.view.ViewGroup.LayoutParams.WRAP_CONTENT
+    ).apply {
+        gravity = android.view.Gravity.TOP or android.view.Gravity.LEFT
+    }
+    (dismissBackground.native as? ViewGroup)?.apply {
+        clipChildren = false
+        setClipToPadding(false)
+    }
+    dismissBackground.native.addOnLayoutChangeListener { dismissBackgroundView, _, _, _, _, _, _, _, _ ->
+        val overlayContainer = this.native
+
+        val overlayBoundsInWindow = overlayContainer.getBoundariesInWindow()
+        val offset = preferredDirection.calculatePopoverOffset(
+            anchorView.getBoundariesInWindow(),
+            overlayBoundsInWindow,
+            dismissBackgroundView.getBoundariesInWindow()
+        )
+
+        overlayContainer.offsetLeftAndRight((offset.first - overlayBoundsInWindow.left).toInt())
+        overlayContainer.offsetTopAndBottom((offset.second - overlayBoundsInWindow.top).toInt())
+    }
 }

library/src/commonHtmlMain/kotlin/com/lightningkite/kiteui/views/direct/FloatingInfoHolder.kt

@@ -3,10 +3,10 @@ package com.lightningkite.kiteui.views.direct
 import com.lightningkite.kiteui.models.PopoverPreferredDirection
 import com.lightningkite.kiteui.views.RView
 
-expect class FloatingInfoHolder(source: RView) {
+expect class FloatingInfoHolder(source: RView, anchor: RView? = null) {
     var preferredDirection: PopoverPreferredDirection
     var menuGenerator: Frame.() -> Unit
     fun open()
     fun block()
     fun close()
-}
+}

library/src/commonMain/kotlin/com/lightningkite/kiteui/views/ViewContextExtensions.kt

@@ -78,11 +78,13 @@ fun ViewWriter.keepPopoverOpen(lifecycle: CoroutineScope) {
 fun ViewWriter.popoverWriter(overlay: ViewWriter = this, popoverRoot: Boolean = false, close: ()->Unit): ViewWriter {
     popoverCloser?.invoke()
     popoverCloser = close
+
     val writer = object : ViewWriter(), CalculationContext by this {
         override val representsView: RView? = overlay.representsView
         override val context: RContext = this@popoverWriter.context.split()
         override fun willAddChild(view: RView) = overlay.willAddChild(view)
         override fun addChild(view: RView) = overlay.addChild(view)
+
     }
     writer.popoverParent = this@popoverWriter.takeIf { !popoverRoot }
     writer.popoverCloser = null

library/src/commonMain/kotlin/com/lightningkite/kiteui/views/direct/openPopover.kt

@@ -4,4 +4,8 @@ import com.lightningkite.kiteui.models.PopoverPreferredDirection
 import com.lightningkite.kiteui.views.RView
 import com.lightningkite.kiteui.views.ViewWriter
 
-expect fun RView.openPopover(preferredDirection: PopoverPreferredDirection, createMenu: Frame.() -> Unit)
+expect fun RView.openPopover(
+    preferredDirection: PopoverPreferredDirection,
+    anchor: RView? = null,
+    createMenu: Frame.() -> Unit
+)