Added additional styling for visuals

bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/CSSBuilder.kt

@@ -120,6 +120,7 @@ internal fun PropertiesBuilder.comboBoxBuilder(componentViewData: ComboBoxData)
 
 internal fun PropertiesBuilder.styleBuilder(style : Map<String, String>) {
     borderRadius = cssBorderRadius(style["border-radius"] ?: "0rem")
+    cursor = style["cursor"]?.unsafeCast<Cursor>() ?: "auto".unsafeCast<Cursor>()
 }
 
 internal fun PropertiesBuilder.filterBuilder(filters : Map<String, String?>) {

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/builder/VisualBuilder.kt

@@ -5,7 +5,7 @@ import tools.aqua.bgw.visual.*
 
 object VisualBuilder {
     fun build(visual: Visual) {
-        when(visual) {
+        when (visual) {
             is CompoundVisual -> buildCompoundVisual(visual)
             is ColorVisual -> buildColorVisual(visual)
             is ImageVisual -> buildImageVisual(visual)
@@ -20,11 +20,21 @@ object VisualBuilder {
 
     private fun buildColorVisual(visual: ColorVisual) {
         visual.transparencyProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
-        visual.colorProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
+        visual.colorProperty.guiListener = { _, _ ->
+            Frontend.updateVisual(visual)
+        }
+        visual.styleProperty.guiListener = {
+            Frontend.updateVisual(visual)
+        }
+        visual.filtersProperty.guiListener = { Frontend.updateVisual(visual) }
+        visual.flippedProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
     }
 
     private fun buildImageVisual(visual: ImageVisual) {
         visual.transparencyProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
+        visual.styleProperty.guiListener = { Frontend.updateVisual(visual) }
+        visual.filtersProperty.guiListener = { Frontend.updateVisual(visual) }
+        visual.flippedProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
     }
 
     private fun buildTextVisual(visual: TextVisual) {
@@ -33,6 +43,9 @@ object VisualBuilder {
         visual.alignmentProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
         visual.offsetXProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
         visual.offsetYProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
+        visual.styleProperty.guiListener = { Frontend.updateVisual(visual) }
+        visual.filtersProperty.guiListener = { Frontend.updateVisual(visual) }
+        visual.flippedProperty.guiListener = { _, _ -> Frontend.updateVisual(visual) }
     }
 
 }

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/main/Server.kt

@@ -28,12 +28,12 @@ fun main() {
         val scene = object : BoardGameScene(1920.0, 1080.0, ColorVisual.GREEN) {
             val label = Label(posX = 0, posY = 0, visual = CompoundVisual(
                 ImageVisual("https://cdn2.thecatapi.com/images/9qh.jpg").apply {
-                    flipped = Flip.HORIZONTAL
+                    //flipped = Flip.HORIZONTAL
                 },
                 ColorVisual(Color.CYAN).apply {
                     style.borderRadius = BorderRadius.FULL
                     filters.blur = BlurFilter(4.0)
-                    filters.saturation = SaturationFilter.BLACK_WHITE
+                    filters.saturation = SaturationFilter.GREYSCALE
                 },
                 //ColorVisual(Color.GREEN).apply { style.borderRadius = BorderRadius(10,0,5,0) },
                 TextVisual("Hello World", font = Font(
@@ -96,6 +96,6 @@ fun main() {
             showGameScene(scene)
         }
     }
-    //application.show()
+    // application.show()
 }
 

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/main/view/AnimationScene.kt

@@ -11,8 +11,12 @@ import tools.aqua.bgw.core.Color
 import tools.aqua.bgw.core.Frontend.Companion.showDialog
 import tools.aqua.bgw.dialog.Dialog
 import tools.aqua.bgw.dialog.DialogType
+import tools.aqua.bgw.style.*
 import tools.aqua.bgw.util.Font
 import tools.aqua.bgw.visual.ColorVisual
+import tools.aqua.bgw.visual.CompoundVisual
+import tools.aqua.bgw.visual.ImageVisual
+import tools.aqua.bgw.visual.SingleLayerVisual
 
 internal class AnimationScene : BoardGameScene() {
     private val label = Label(
@@ -22,7 +26,10 @@ internal class AnimationScene : BoardGameScene() {
         width = 200,
         height = 200,
         font = Font(20.0, Color(0, 0, 0, 0.25), "Rubik", Font.FontWeight.SEMI_BOLD),
-        visual = ColorVisual.MAGENTA
+        visual =
+            ImageVisual("https://static.vecteezy.com/system/resources/thumbnails/006/489/382/small/rainbow-waves-background-in-neon-color-free-vector.jpg").apply {
+                style.borderRadius = BorderRadius(4.0)
+            }
     )
 
     /*private val label = TokenView(
@@ -121,7 +128,9 @@ internal class AnimationScene : BoardGameScene() {
         } */
 
         label.onMouseClicked = {
-            this.playAnimation(
+            (label.visual as ImageVisual).filters.blur = BlurFilter(4.0)
+            (label.visual as ImageVisual).filters.saturation = SaturationFilter.GREYSCALE
+            /* this.playAnimation(
                 ParallelAnimation(
                     ScaleAnimation (
                         componentView = label,
@@ -144,7 +153,7 @@ internal class AnimationScene : BoardGameScene() {
                     toVisual = ColorVisual.RED,
                     duration = 2000
                 )
-            )
+            ) */
         }
 
         /*label.onMouseClicked = {

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/main/view/Application.kt

@@ -21,7 +21,7 @@ internal object Application : BoardGameApplication() {
     private val cardLayoutScene = CardLayoutScene()
 
     init {
-        loadFont("Rubik.ttf", "Rubik", Font.FontWeight.SEMI_BOLD)
+        loadFont("Rubik.ttf", "Rubik", Font.FontWeight.EXTRA_BOLD)
         // showGameScene(cardLayoutScene)
         // showGameScene(hexGrid)
         showGameScene(animation)

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/style/Filter.kt

@@ -1,6 +1,8 @@
 package tools.aqua.bgw.style
 
-class Filter {
+import tools.aqua.bgw.observable.Observable
+
+class Filter : Observable() {
     private val declarations = mutableMapOf<String, FilterDeclaration>()
 
     fun getDeclarations() : Map<String, String?> {
@@ -9,19 +11,34 @@ class Filter {
         }
     }
 
+    fun applyDeclarations(filter: Filter) {
+        declarations.clear()
+        declarations.putAll(filter.declarations)
+    }
+
     var blur : BlurFilter = BlurFilter.NONE
         set(value) {
             field = value
             declarations["blur"] = value
+            notifyGUIListener()
         }
         get() = declarations["blur"] as BlurFilter
 
-    var saturation : SaturationFilter = SaturationFilter.DEFAULT
+    var saturation : SaturationFilter = SaturationFilter.NONE
         set(value) {
             field = value
             declarations["saturation"] = value
+            notifyGUIListener()
         }
         get() = declarations["saturation"] as SaturationFilter
+
+    var sepia : SepiaFilter = SepiaFilter.NONE
+        set(value) {
+            field = value
+            declarations["sepia"] = value
+            notifyGUIListener()
+        }
+        get() = declarations["sepia"] as SepiaFilter
 }
 
 interface FilterDeclaration {
@@ -66,8 +83,28 @@ class SaturationFilter(saturation: Double) : FilterDeclaration {
     }
 
     companion object {
-        val DEFAULT = SaturationFilter(1.0)
-        val BLACK_WHITE = SaturationFilter(0.0)
+        val NONE = SaturationFilter(1.0)
+        val GREYSCALE = SaturationFilter(0.0)
+    }
+}
+
+class SepiaFilter(sepia : Double) : FilterDeclaration {
+    override var value: String? = ""
+
+    init {
+        value = if (sepia != 0.0)
+            "$sepia"
+        else
+            null
+    }
+
+    override fun toFilter(): String? {
+        return if(value != null) "sepia($value)" else null
+    }
+
+    companion object {
+        val NONE = SepiaFilter(0.0)
+        val SEPIA = SepiaFilter(1.0)
     }
 }
 

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/style/Style.kt

@@ -1,18 +1,34 @@
 package tools.aqua.bgw.style
 
-class Style {
+import tools.aqua.bgw.observable.Observable
+
+class Style : Observable() {
     private val declarations = mutableMapOf<String, StyleDeclaration>()
 
     fun getDeclarations() : Map<String, String> {
         return declarations.mapValues { it.value.toCSS() }
     }
 
+    fun applyDeclarations(style: Style) {
+        declarations.clear()
+        declarations.putAll(style.declarations)
+    }
+
     var borderRadius : BorderRadius = BorderRadius.NONE
         set(value) {
             field = value
             declarations["border-radius"] = value
+            notifyGUIListener()
         }
         get() = declarations["border-radius"] as BorderRadius
+
+    var cursor : Cursor = Cursor.DEFAULT
+        set(value) {
+            field = value
+            declarations["cursor"] = value
+            notifyGUIListener()
+        }
+        get() = declarations["cursor"] as Cursor
 }
 
 interface StyleDeclaration {
@@ -25,14 +41,14 @@ class BorderRadius : StyleDeclaration {
     var bottomRight: String = "0em"
     var bottomLeft: String = "0em"
 
-    constructor(radius: Int) {
+    constructor(radius: Number) {
         topLeft = "${radius}em"
         topRight = "${radius}em"
         bottomRight = "${radius}em"
         bottomLeft = "${radius}em"
     }
 
-    constructor(topLeft: Int, topRight: Int, bottomRight: Int, bottomLeft: Int) {
+    constructor(topLeft: Number, topRight: Number, bottomRight: Number, bottomLeft: Number) {
         this.topLeft = "${topLeft}em"
         this.topRight = "${topRight}em"
         this.bottomRight = "${bottomRight}em"
@@ -69,9 +85,10 @@ class BorderRadius : StyleDeclaration {
     }
 }
 
+@Deprecated("Use BorderRadius instead", ReplaceWith("BorderRadius"))
 class BackgroundRadius : StyleDeclaration {
     override fun toCSS(): String {
-        TODO("Not yet implemented")
+        return ""
     }
 }
 
@@ -87,9 +104,48 @@ class BorderColor : StyleDeclaration {
     }
 }
 
-class Cursor : StyleDeclaration {
+class Cursor private constructor(var name: String) : StyleDeclaration {
+
     override fun toCSS(): String {
-        TODO("Not yet implemented")
+        return this.name.lowercase()
+    }
+
+    companion object {
+        val DEFAULT = Cursor("default")
+        val NONE = Cursor("none")
+        val CONEXT_MENU = Cursor("context-menu")
+        val HELP = Cursor("help")
+        val POINTER = Cursor("pointer")
+        val PROGRESS = Cursor("progress")
+        val WAIT = Cursor("wait")
+        val CELL = Cursor("cell")
+        val CROSSHAIR = Cursor("crosshair")
+        val TEXT = Cursor("text")
+        val VERTICAL_TEXT = Cursor("vertical-text")
+        val ALIAS = Cursor("alias")
+        val COPY = Cursor("copy")
+        val MOVE = Cursor("move")
+        val NO_DROP = Cursor("no-drop")
+        val NOT_ALLOWED = Cursor("not-allowed")
+        val GRAB = Cursor("grab")
+        val GRABBING = Cursor("grabbing")
+        val ALL_SCROLL = Cursor("all-scroll")
+        val COL_RESIZE = Cursor("col-resize")
+        val ROW_RESIZE = Cursor("row-resize")
+        val N_RESIZE = Cursor("n-resize")
+        val E_RESIZE = Cursor("e-resize")
+        val S_RESIZE = Cursor("s-resize")
+        val W_RESIZE = Cursor("w-resize")
+        val NE_RESIZE = Cursor("ne-resize")
+        val NW_RESIZE = Cursor("nw-resize")
+        val SE_RESIZE = Cursor("se-resize")
+        val SW_RESIZE = Cursor("sw-resize")
+        val EW_RESIZE = Cursor("ew-resize")
+        val NS_RESIZE = Cursor("ns-resize")
+        val NESW_RESIZE = Cursor("nesw-resize")
+        val NWSE_RESIZE = Cursor("nwse-resize")
+        val ZOOM_IN = Cursor("zoom-in")
+        val ZOOM_OUT = Cursor("zoom-out")
     }
 }
 

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/visual/ColorVisual.kt

@@ -95,8 +95,9 @@ open class ColorVisual(color: Color) : SingleLayerVisual() {
   override fun copy(): ColorVisual =
       ColorVisual(Color(color.red, color.green, color.blue, color.alpha)).apply {
         transparency = this@ColorVisual.transparency
-        style = this@ColorVisual.style
-        filters = this@ColorVisual.filters
+        style.applyDeclarations(this@ColorVisual.style)
+        filters.applyDeclarations(this@ColorVisual.filters)
+        flipped = this@ColorVisual.flipped
       }
 
   companion object {

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/visual/CompoundVisual.kt

@@ -58,14 +58,6 @@ open class CompoundVisual(children: List<SingleLayerVisual>) : Visual() {
 
   init {
     childrenProperty.internalListener = { _, _ -> notifyGUIListener() }
-    borderRadiusProperty.internalListener = { _, nV -> children.forEach { it.borderRadius = nV } }
-    borderStyleProperty.internalListener = { _, nV -> children.forEach { it.borderStyle = nV } }
-    borderWidthProperty.internalListener = { _, nV -> children.forEach { it.borderWidth = nV } }
-    borderColorProperty.internalListener = { _, nV -> children.forEach { it.borderColor = nV } }
-    backgroundRadiusProperty.internalListener = { _, nV ->
-      children.forEach { it.backgroundRadius = nV }
-    }
-    cursorProperty.internalListener = { _, nV -> children.forEach { it.cursor = nV } }
   }
 
   /**
@@ -78,12 +70,5 @@ open class CompoundVisual(children: List<SingleLayerVisual>) : Visual() {
 
   /** Copies this [CompoundVisual] to a new object recursively including children. */
   override fun copy(): CompoundVisual =
-      CompoundVisual(children.map { it.copy() as SingleLayerVisual }.toList()).apply {
-        backgroundRadius = this@CompoundVisual.backgroundRadius
-        borderRadius = this@CompoundVisual.borderRadius
-        borderStyle = this@CompoundVisual.borderStyle
-        borderWidth = this@CompoundVisual.borderWidth
-        borderColor = this@CompoundVisual.borderColor
-        cursor = this@CompoundVisual.cursor
-      }
+      CompoundVisual(children.map { it.copy() as SingleLayerVisual }.toList())
 }

bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/visual/ImageVisual.kt

@@ -75,7 +75,12 @@ open class ImageVisual(
     }
 
     override fun copy(): ImageVisual {
-        return ImageVisual(path, width, height, offsetX, offsetY)
+        return ImageVisual(path, width, height, offsetX, offsetY).apply {
+            transparency = this@ImageVisual.transparency
+            style.applyDeclarations(this@ImageVisual.style)
+            filters.applyDeclarations(this@ImageVisual.filters)
+            flipped = this@ImageVisual.flipped
+        }
     }
 }