Add buttons directly to button group

src/commonMain/kotlin/baaahs/plugin/OpenPlugin.kt

@@ -160,5 +160,6 @@ class PluginContext(
 data class AddControlMenuItem(
     val label: String,
     val icon: Icon,
+    val validForButtonGroup: Boolean = false,
     val createControlFn: (mutableShow: MutableShow) -> MutableControl
 )

src/commonMain/kotlin/baaahs/plugin/core/CorePlugin.kt

@@ -35,7 +35,7 @@ class CorePlugin(
     override val dataSourceBuilders get() = Companion.dataSourceBuilders
 
     override val addControlMenuItems: List<AddControlMenuItem> get() = listOf(
-        AddControlMenuItem("New Button…", CommonIcons.Button) { mutableShow ->
+        AddControlMenuItem("New Button…", CommonIcons.Button, true) { mutableShow ->
             MutableButtonControl(ButtonControl("New Button"), mutableShow)
         },
 

src/jsMain/kotlin/baaahs/app/ui/Styles.kt

@@ -48,7 +48,7 @@ class AllStyles(val theme: Theme) {
     }
 }
 
-private fun linearRepeating(
+fun linearRepeating(
     color1: Color,
     color2: Color,
     interval: LinearDimension = 10.px,

src/jsMain/kotlin/baaahs/app/ui/controls/ButtonControlView.kt

@@ -11,6 +11,7 @@ import kotlinx.js.jso
 import mui.material.ToggleButton
 import org.w3c.dom.HTMLButtonElement
 import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.events.MouseEvent
 import react.Props
 import react.RBuilder
 import react.RHandler
@@ -51,8 +52,9 @@ private val ButtonControlView = xComponent<ButtonProps>("ButtonControl") { props
         val buttonEl = buttonRef.current
         if (buttonControl.expandsOnLongPress && buttonEl != null) {
             buttonEl.setAttribute("data-long-press-delay", "750")
-            buttonEl.addEventListener("long-press", callback = {
-                if (appContext.showManager.editMode.isOff) {
+            buttonEl.addEventListener("long-press", callback = { e ->
+                e as MouseEvent
+                if (e.button.toInt() == Events.Button.primary && appContext.showManager.editMode.isOff) {
                     lightboxOpen = true
                 }
             })

src/jsMain/kotlin/baaahs/app/ui/controls/GridButtonGroupControlView.kt

@@ -1,7 +1,9 @@
 package baaahs.app.ui.controls
 
 import baaahs.app.ui.appContext
+import baaahs.app.ui.editor.AddControlToGrid
 import baaahs.app.ui.editor.Editor
+import baaahs.app.ui.layout.AddMenuContext
 import baaahs.app.ui.layout.gridItem
 import baaahs.control.OpenButtonControl
 import baaahs.control.OpenButtonGroupControl
@@ -10,28 +12,29 @@ import baaahs.show.live.ControlProps
 import baaahs.show.live.OpenGridLayout
 import baaahs.show.mutable.MutableIGridLayout
 import baaahs.show.mutable.MutableShow
-import baaahs.ui.gridlayout.CompactType
-import baaahs.ui.gridlayout.Layout
-import baaahs.ui.gridlayout.LayoutItem
-import baaahs.ui.gridlayout.gridLayout
-import baaahs.ui.isParentOf
-import baaahs.ui.unaryMinus
-import baaahs.ui.unaryPlus
-import baaahs.ui.xComponent
+import baaahs.ui.*
+import baaahs.ui.gridlayout.*
 import baaahs.util.useResizeListener
 import external.react_resizable.buildResizeHandle
+import kotlinx.css.*
 import kotlinx.dom.hasClass
 import kotlinx.js.jso
-import mui.material.Card
+import materialui.icon
+import mui.icons.material.Add
+import mui.material.*
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
 import react.Props
 import react.RBuilder
 import react.RHandler
+import react.dom.div
 import react.dom.header
 import react.dom.html.ReactHTML
+import react.dom.onClick
+import react.dom.onMouseDown
 import react.useContext
+import styled.inlineStyles
 
 private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridButtonGroupControl") { props ->
     val appContext = useContext(appContext)
@@ -66,6 +69,9 @@ private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridB
         }
     }
 
+    val gridLayoutEditor = props.controlProps.layoutEditor
+        ?: error("No layout editor!")
+
     val handleLayoutChange by handler(gridLayout, editor) { newLayout: Layout ->
         appContext.showManager.openShow?.edit {
             val mutableShow = this
@@ -77,6 +83,24 @@ private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridB
         Unit
     }
 
+    var showAddMenu by state<AddMenuContext?> { null }
+    var draggingItem by state<String?> { null }
+    val layoutGrid = memo(columns, rows, gridLayout, draggingItem) {
+        LayoutGrid(columns, rows, gridLayout.items, draggingItem)
+    }
+
+    val handleEmptyGridCellMouseDown by eventHandler { e ->
+        e.stopPropagation()
+    }
+
+    val handleEmptyGridCellClick by eventHandler { e ->
+        val target = e.currentTarget as HTMLElement
+        val dataset = target.dataset.asDynamic()
+        val x = (dataset.cellX as String).toInt()
+        val y = (dataset.cellY as String).toInt()
+        showAddMenu = AddMenuContext(target, x, y, 1, 1)
+    }
+
     val layout = Layout(gridLayout.items.map { gridItem ->
         LayoutItem(gridItem.column, gridItem.row, gridItem.width, gridItem.height, gridItem.control.id)
     })
@@ -100,14 +124,51 @@ private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridB
 
     Card {
         ref = cardRef
-        attrs.classes = jso { root = -controlStyles.buttonGroupCard }
+        attrs.classes = jso {
+            root = -layoutStyles.buttonGroupCard and
+                    (+if (editMode.isOn) layoutStyles.editModeOn else layoutStyles.editModeOff) // and
+//                    +if (gridLayoutContext.dragging) layoutStyles.dragging else layoutStyles.notDragging
+        }
 
         if (buttonGroupControl.title.isNotBlank() && buttonGroupControl.showTitle) {
             header(+layoutStyles.buttonGroupHeader) {
                 +buttonGroupControl.title
             }
         }
 
+        if (editMode.isAvailable) {
+            div(+layoutStyles.gridBackground) {
+                val positionParams = PositionParams(
+                    margin to margin,
+                    itemPadding to itemPadding,
+                    layoutWidth,
+                    columns,
+                    gridRowHeight,
+                    rows
+                )
+
+                layoutGrid.forEachCell { column, row ->
+                    val position = positionParams.calcGridItemPosition(column, row, 1, 1)
+
+                    div(+layoutStyles.emptyGridCell) {
+                        inlineStyles {
+                            top = position.top.px
+                            left = position.left.px
+                            width = position.width.px
+                            height = position.height.px
+                        }
+                        attrs["data-cell-x"] = column
+                        attrs["data-cell-y"] = row
+//                        attrs.onClickFunction = handleEmptyGridCellClick
+                        attrs.onMouseDown = handleEmptyGridCellMouseDown.withMouseEvent()
+                        attrs.onClick = handleEmptyGridCellClick.withMouseEvent()
+
+                        icon(Add)
+                    }
+                }
+            }
+        }
+
         gridLayout {
             attrs.id = buttonGroupControl.id
             attrs.className = +layoutStyles.gridContainer
@@ -165,6 +226,34 @@ private val GridButtonGroupControlView = xComponent<GridButtonGroupProps>("GridB
             }
         }
     }
+
+    showAddMenu?.let { addMenuContext ->
+        Menu {
+            attrs.anchorEl = { addMenuContext.anchorEl }
+            attrs.open = true
+            attrs.onClose = { showAddMenu = null }
+
+            appContext.plugins.addControlMenuItems
+                .filter { it.validForButtonGroup }
+                .forEach { addControlMenuItem ->
+                    MenuItem {
+                        attrs.onClick = {
+                            val editIntent = AddControlToGrid(
+                                gridLayoutEditor,
+                                addMenuContext.column, addMenuContext.row,
+                                addMenuContext.width, addMenuContext.height,
+                                addControlMenuItem.createControlFn
+                            )
+                            appContext.openEditor(editIntent)
+                            showAddMenu = null
+                        }
+
+                        ListItemIcon { icon(addControlMenuItem.icon) }
+                        ListItemText { +addControlMenuItem.label }
+                    }
+                }
+        }
+    }
 }
 
 external interface GridButtonGroupProps : Props {

src/jsMain/kotlin/baaahs/app/ui/controls/Styles.kt

@@ -273,6 +273,17 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-controls-theme", isStat
     val vacuityContainer by css {
         display = Display.flex
         overflow = Overflow.scroll
+        borderWidth = .25.em
+        borderStyle = "inset".asDynamic()
+        borderColor = theme.paperMediumContrast
+        borderRadius = 10.px
+        padding = ".25em"
+        background = "linear-gradient(" +
+                "-185deg, " +
+                "${theme.paperLowContrast}, " +
+                "${theme.palette.background.paper}, " +
+                "${theme.paperLowContrast}" +
+                ")"
     }
 
     val buttonGroupCard by css {

src/jsMain/kotlin/baaahs/app/ui/controls/XyPadControlView.kt

@@ -6,7 +6,6 @@ import baaahs.control.OpenXyPadControl
 import baaahs.geom.Vector2F
 import baaahs.show.live.ControlProps
 import baaahs.ui.*
-import baaahs.ui.Events.primaryButton
 import kotlinx.css.*
 import kotlinx.css.properties.boxShadow
 import kotlinx.html.js.onMouseDownFunction
@@ -65,7 +64,7 @@ private val XyPadControlView = xComponent<XyPadProps>("XyPadControl") { props ->
     }
 
     val handleMouseDownEvent by eventHandler(handleMouseEvent) { e: Event ->
-        if (e.buttons == primaryButton) mouseDraggingState.current = true
+        if (e.buttons == Events.ButtonMask.primary) mouseDraggingState.current = true
         handleMouseEvent(e)
         e.preventDefault()
     }
@@ -77,7 +76,7 @@ private val XyPadControlView = xComponent<XyPadProps>("XyPadControl") { props ->
     }
 
     val handleMouseMoveEvent by eventHandler(handleMouseEvent) { e: Event ->
-        if (mouseDraggingState.current == true && e.buttons == primaryButton)
+        if (mouseDraggingState.current == true && e.buttons == Events.ButtonMask.primary)
             handleMouseEvent(e)
         e.preventDefault()
     }

src/jsMain/kotlin/baaahs/app/ui/gadgets/color/ColorWheelView.kt

@@ -95,7 +95,7 @@ val ColorWheelView = xComponent<ColorWheelProps>("ColorWheelView") { props ->
                 attrs.width = (radius * 2).toString()
                 attrs.height = (radius * 2).toString()
                 attrs.onMouseDownFunction = { e: Event ->
-                    if (e.buttons == Events.primaryButton) {
+                    if (e.buttons == Events.ButtonMask.primary) {
                         mouseDraggingState.current = true
                         updateColors(e, selectedIndex ?: 0)
                         handleColorChange()

src/jsMain/kotlin/baaahs/app/ui/layout/GridTabLayoutView.kt

@@ -42,7 +42,7 @@ import styled.inlineStyles
 private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout") { props ->
     val appContext = useContext(appContext)
     val showManager = observe(appContext.showManager)
-    val styles = appContext.allStyles.layout
+    val layoutStyles = appContext.allStyles.layout
 
     val gridLayoutContext = useContext(dragNDropContext).gridLayoutContext
     observe(gridLayoutContext)
@@ -111,14 +111,14 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
     }
 
 
-    div(+styles.gridOuterContainer and
-            (+if (editMode.isOn) styles.editModeOn else styles.editModeOff) and
-            +if (gridLayoutContext.dragging) styles.dragging else styles.notDragging
+    div(+layoutStyles.gridOuterContainer and
+            (+if (editMode.isOn) layoutStyles.editModeOn else layoutStyles.editModeOff) and
+            +if (gridLayoutContext.dragging) layoutStyles.dragging else layoutStyles.notDragging
     ) {
         ref = containerDiv
 
         if (editMode.isAvailable) {
-            div(+styles.gridBackground) {
+            div(+layoutStyles.gridBackground) {
                 val positionParams = PositionParams(
                     margin to margin,
                     itemPadding to itemPadding,
@@ -131,7 +131,7 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
                 layoutGrid.forEachCell { column, row ->
                     val position = positionParams.calcGridItemPosition(column, row, 1, 1)
 
-                    div(+styles.emptyGridCell) {
+                    div(+layoutStyles.emptyGridCell) {
                         inlineStyles {
                             top = position.top.px
                             left = position.left.px
@@ -150,7 +150,7 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
 
         gridLayout {
             attrs.id = "top"
-            attrs.className = +styles.gridContainer
+            attrs.className = +layoutStyles.gridContainer
             attrs.width = layoutDimens.first.toDouble()
             attrs.autoSize = false
             attrs.cols = columns
@@ -168,8 +168,8 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
             attrs.onDragStop = handleDragStop
 
             gridLayout.items.forEachIndexed { index, item ->
-                val gridCellStyles = +styles.gridCell and
-                        if (item.control is OpenButtonGroupControl) styles.groupGridCell else null
+                val gridCellStyles = +layoutStyles.gridCell and
+                        if (item.control is OpenButtonGroupControl) layoutStyles.groupGridCell else null
 
                 div(gridCellStyles) {
                     key = item.control.id
@@ -201,7 +201,7 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
                     gridItem {
                         attrs.control = item.control
                         attrs.controlProps = genericControlProps.withLayout(item.layout, editor)
-                        attrs.className = -styles.controlBox
+                        attrs.className = -layoutStyles.controlBox
                     }
                 }
             }
@@ -243,7 +243,7 @@ private val GridTabLayoutView = xComponent<GridTabLayoutProps>("GridTabLayout")
     }
 }
 
-private class AddMenuContext(
+class AddMenuContext(
     val anchorEl: HTMLElement,
     val column: Int,
     val row: Int,