TornadoFX覆盖布局区域上的子级

Question

Im trying to translate this JavaFX class to TornadoFX. Hover im not able to figure out how protected void layoutChildren() should be done with TornadoFX?

This is the code I have so far:

class ReversiSquare(x: Int, y: Int) : View() {

    var x by property(x)
    fun xProperty() = getProperty(ReversiSquare::y)

    var y by property(y)
    fun yProperty() = getProperty(ReversiSquare::y)

    var highlight: Region by singleAssign()
    var highlightTransition: FadeTransition by singleAssign()

    val model = ReversiModel

    override val root = region {
        region {
            opacity = 0.0
            style = "-fx-border-width: 3; -fx-border-color: dodgerblue"
            highlight = this
        }
        // todo not sure this works with singleAssign
        highlightTransition = FadeTransition(Duration.millis(200.0), highlight).apply {
            fromValue = 0.0
            toValue = 1.0
        }

        styleProperty().bind(Bindings.`when`(model.legalMove(x, y))
                .then("-fx-background-color: derive(dodgerblue, -60%)")
                .otherwise("-fx-background-color: burlywood"))

        val light = Light.Distant().apply {
            azimuth = -135.0
            elevation = 30.0
        }
        effect = Lighting(light)
        setPrefSize(200.0,200.0)
        this += highlight
        addEventHandler(MouseEvent.MOUSE_ENTERED_TARGET) {
            if(model.legalMove(x ,y).get()) {
                with(highlightTransition) {
                    rate =1.0
                    play()
                }
            }
        }
        addEventHandler(MouseEvent.MOUSE_EXITED_TARGET) {
            with(highlightTransition) {
                rate = -1.0
                play()
            }
        }
        onDoubleClick {
            model.play(x, y)
            highlightTransition.rate = -1.0
            highlightTransition.play()
        }
    }
}

Answer 1

I'm not sure what you mean by translating to TornadoFX, but writing the layoutChildren in Kotlin would look something like this:

override fun layoutChildren() {
    layoutInArea(highlight, 0.0, 0.0, width, height, baselineOffset, HPos.CENTER, VPos.CENTER);
}

EDIT: You updated the code example to a View, so I think I understand what you want now :)

First, make sure the View doesn't require parameters, because that would make it impossible to inject this view. Either pass parameters using by param() or better yet, inject a ViewModel in the scope of the View, and inject that ViewModel into your View.

Maybe you can add x and y as properties to ReversiModel?

If you need to create a custom Region you can create what would be an anonymous inner class equivalent, in Java speak:

class ReversiSquare : View() {
    val model: ReversiModel by inject()

    override val root = object : Region() {
        // ...

        override fun layoutChildren() {
            layoutInArea(highlight, 0.0, 0.0, width, height, baselineOffset, HPos.CENTER, VPos.CENTER);
        }
    }
}

To open this View now, create a new scope and push the ReversiModel into it:

// Create the model, set x, y and other initial state in the model
val model = ReversiModel()
model.x = 42

// Create a new scope and push the ReversiModel into it
val scope = Scope(model)

// Find the ReversiSquare in the new scope
find<ReversiSquare>(scope) {
    // Do something with the sequare, like openWindow() or similar
}