[Editor] Enable creating and selecting layers in map editor

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/controller/map/MapController.kt

@@ -12,15 +12,8 @@ class MapController : Controller() {
     private val tileSetController: TileSetController by inject()
 
     private val map1 = GameMap(tileSetController.tileset, 20, 20)
-        .createTileLayer(0)
 
     private val map2 = GameMap(tileSetController.tileset, 50, 50)
-        .createTileLayer(3)
-        .createTileLayer(3, 5)
-        .createTileLayer(3, 5)
-        .createTileLayer(3, 5)
-        .createTileLayer(3, 5)
-        .createTileLayer(3, 5)
 
     fun getMap(id: Int) = when(id) {
         1 -> map1

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/model/map/layer/Layer.kt

@@ -1,3 +1,8 @@
 package com.bartlomiejpluta.base.editor.model.map.layer
 
-interface Layer
+import javafx.beans.property.StringProperty
+
+interface Layer {
+    val name: String
+    val nameProperty: StringProperty
+}

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/model/map/layer/TileLayer.kt

@@ -1,8 +1,15 @@
 package com.bartlomiejpluta.base.editor.model.map.layer
 
 import com.bartlomiejpluta.base.editor.model.tileset.Tile
+import javafx.beans.property.SimpleStringProperty
 
-class TileLayer(val layer: Array<Array<Tile?>>) : Layer {
+import tornadofx.*
+
+class TileLayer(name: String, val layer: Array<Array<Tile?>>) : Layer {
 
     fun setTile(row: Int, column: Int, tile: Tile?) = apply { layer[row][column] = tile }
+
+    override val nameProperty = SimpleStringProperty(name)
+
+    override val name: String by nameProperty
 }

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/model/map/map/GameMap.kt

@@ -13,7 +13,7 @@ class GameMap(val tileSet: TileSet, val rows: Int, val columns: Int) {
 
     val height = columns * tileSet.tileWidth
 
-    fun createTileLayer(tile: Int) = createTileLayer().apply {
+    fun createTileLayer(name: String, tile: Int) = createTileLayer(name).apply {
         val layerId = layers.size - 1
         for (row in 0 until rows) {
             for (column in 0 until columns) {
@@ -22,7 +22,7 @@ class GameMap(val tileSet: TileSet, val rows: Int, val columns: Int) {
         }
     }
 
-    fun createTileLayer(tileRow: Int, tileColumn: Int) = createTileLayer().apply {
+    fun createTileLayer(name: String, tileRow: Int, tileColumn: Int) = createTileLayer(name).apply {
         val layerId = layers.size - 1
         for (row in 0 until rows) {
             for (column in 0 until columns) {
@@ -31,7 +31,7 @@ class GameMap(val tileSet: TileSet, val rows: Int, val columns: Int) {
         }
     }
 
-    fun createTileLayer() = apply { layers.add(TileLayer(Array(rows) { Array(columns) { null } })) }
+    fun createTileLayer(name: String) = apply { layers.add(TileLayer(name, Array(rows) { Array(columns) { null } })) }
 
     fun setTile(layer: Int, row: Int, column: Int, tile: Int) = apply {
         (layers[layer] as TileLayer).setTile(row, column, tileSet.getTile(tile))

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/render/canvas/map/MapPainter.kt

@@ -6,6 +6,7 @@ import com.bartlomiejpluta.base.editor.render.canvas.input.MapMouseEventHandler
 import com.bartlomiejpluta.base.editor.render.model.Renderable
 import com.bartlomiejpluta.base.editor.viewmodel.map.GameMapVM
 import com.bartlomiejpluta.base.editor.viewmodel.map.BrushVM
+import javafx.beans.property.IntegerProperty
 import javafx.scene.canvas.GraphicsContext
 import javafx.scene.input.MouseButton
 import javafx.scene.input.MouseEvent
@@ -13,6 +14,7 @@ import javafx.scene.input.MouseEvent
 class MapPainter(
     private val map: GameMapVM,
     private val brushVM: BrushVM,
+    private val selectedLayer: IntegerProperty,
     private val paintingCallback: (MapPaintingTrace) -> Unit
 ) : Renderable, MapMouseEventHandler {
     private val tileWidth = map.tileSet.tileWidth.toDouble()
@@ -56,7 +58,12 @@ class MapPainter(
         if (event.button == MouseButton.PRIMARY) {
             currentTrace = MapPaintingTrace(map, "Paint trace").apply {
                 brushVM.forEach { row, column, tile ->
-                    paint(0, mouseRow - brushVM.centerRow + row, mouseColumn - brushVM.centerColumn + column, tile)
+                    paint(
+                        selectedLayer.value,
+                        mouseRow - brushVM.centerRow + row,
+                        mouseColumn - brushVM.centerColumn + column,
+                        tile
+                    )
                 }
             }
         }
@@ -66,7 +73,12 @@ class MapPainter(
         if (event.button == MouseButton.PRIMARY) {
             currentTrace?.apply {
                 brushVM.forEach { row, column, tile ->
-                    paint(0, mouseRow - brushVM.centerRow + row, mouseColumn - brushVM.centerColumn + column, tile)
+                    paint(
+                        selectedLayer.value,
+                        mouseRow - brushVM.centerRow + row,
+                        mouseColumn - brushVM.centerColumn + column,
+                        tile
+                    )
                 }
             }
         }

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/view/component/map/MapPane.kt

@@ -6,14 +6,15 @@ import com.bartlomiejpluta.base.editor.render.canvas.map.MapPainter
 import com.bartlomiejpluta.base.editor.render.canvas.map.MapPaintingTrace
 import com.bartlomiejpluta.base.editor.viewmodel.map.GameMapVM
 import com.bartlomiejpluta.base.editor.viewmodel.map.BrushVM
+import javafx.beans.property.IntegerProperty
 import javafx.event.EventHandler
 import javafx.scene.canvas.Canvas
 import javafx.scene.input.MouseEvent
 
 
-class MapPane(map: GameMapVM, brushVM: BrushVM, paintingCallback: (MapPaintingTrace) -> Unit) : Canvas(), EventHandler<MouseEvent> {
+class MapPane(map: GameMapVM, brushVM: BrushVM, selectedLayer: IntegerProperty, paintingCallback: (MapPaintingTrace) -> Unit) : Canvas(), EventHandler<MouseEvent> {
     private var tileSet = map.tileSet
-    private val painter = MapPainter(map, brushVM, paintingCallback)
+    private val painter = MapPainter(map, brushVM, selectedLayer, paintingCallback)
     private val mapCanvas = MapCanvas(map, painter)
 
     init {

editor/src/main/kotlin/com/bartlomiejpluta/base/editor/view/fragment/MapFragment.kt

@@ -2,15 +2,18 @@ package com.bartlomiejpluta.base.editor.view.fragment
 
 import com.bartlomiejpluta.base.editor.command.service.UndoRedoService
 import com.bartlomiejpluta.base.editor.event.RedrawMapRequestEvent
+import com.bartlomiejpluta.base.editor.model.map.layer.Layer
 import com.bartlomiejpluta.base.editor.model.map.map.GameMap
 import com.bartlomiejpluta.base.editor.view.component.map.MapPane
 import com.bartlomiejpluta.base.editor.view.component.tileset.TileSetPane
 import com.bartlomiejpluta.base.editor.viewmodel.map.GameMapVM
 import com.bartlomiejpluta.base.editor.viewmodel.map.BrushVM
 import javafx.beans.property.SimpleDoubleProperty
+import javafx.beans.property.SimpleIntegerProperty
 import javafx.scene.input.MouseButton
 import javafx.scene.input.MouseEvent
 import javafx.scene.transform.Scale
+import org.kordamp.ikonli.javafx.FontIcon
 import tornadofx.*
 
 
@@ -24,7 +27,9 @@ class MapFragment : Fragment() {
 
     val scaleProperty = SimpleDoubleProperty(1.0)
 
-    private val mapPane = MapPane(mapVM, brushVM) { undoRedoService.push(it) }
+    private val selectedLayer = SimpleIntegerProperty(0)
+
+    private val mapPane = MapPane(mapVM, brushVM, selectedLayer) { undoRedoService.push(it) }
     private val tileSetPane = TileSetPane(map.tileSet, brushVM)
 
     private val transformation = Scale(1.0, 1.0, 0.0, 0.0).apply {
@@ -61,12 +66,20 @@ class MapFragment : Fragment() {
         right = drawer(multiselect = true) {
             item("Layers", expanded = true) {
                 borderpane {
-                    center = listview(observableListOf("Layer 1", "Layer 2", "Layer 3", "Layer 4", "Layer 5", "Layer 6"))
+                    center = tableview(mapVM.layers) {
-                    bottom = hbox {
+                        column("Layer Name", Layer::nameProperty).makeEditable()
-                        button("New")
+
-                        button("Up")
+                        selectedLayer.bind(selectionModel.selectedIndexProperty())
-                        button("Down")
+                    }
-                        button("Delete")
+
+                    bottom = toolbar {
+                        button(graphic = FontIcon("fa-plus")) {
+                            action { mapVM.item.createTileLayer("Layer ${mapVM.item.layers.size+1}") }
+                        }
+
+                        button(graphic = FontIcon("fa-chevron-up"))
+                        button(graphic = FontIcon("fa-chevron-down"))
+                        button(graphic = FontIcon("fa-trash"))
                     }
                 }
             }