I just published 0.9.0-SNAPSHOT. You should be abl...

# doodle

[Nick]

I just published 0.9.0-SNAPSHOT. You should be able to try it out by pointing to `maven { url = uri("`https://oss.sonatype.org/content/repositories/snapshots`") }`

I'm still working on release notes to clarify the changes. But at a high level you'll see the following.

New Constraints Fully Adopted
The old constraint layout has been replaced w/ the one introduced in 0.8.2. That means you'll have to migrate your existing logic. Please read the previous notes to understand the fundamental differences here. I also made some quality-of-life adjustments to the new layout to make it easier to use (the new notes will clarify this). These include making all parent constraints "constant" by default so you can't inadvertently change them. This means parent.width etc. no longer have a readonly property. Instead, they have a writable property to make them modifiable.

New Animation System
Animations have been reworked to make them more powerful and simpler to use. This includes support for arbitrary easing functions (many built-in), key-frames, repetition and infinite looping. Animations now work for numeric types, and anything that can be represented as a Double or Array<Double>. This means you can animate multidimensional data like Rectangle, Point, Color, etc. The framework comes with default support for all these, as well as Measure<T>, so you can animate angles, time, etc. Another big change is that properties can now be animated. Here's a high-level overview of how this all works.

val animate: Animator

val anim = animate(0.0 to 100.0, tweenDouble(easeInOutCubic, 250 * milliseconds)) { value ->
  // ...
}

val animations = animate {
  anim1 = 0.0 to 100.0 using tweenDouble(easeInOutCubic, 250 * milliseconds).invoke { value ->
    // ...
  }

  anim2 = Red to Blue using tweenColor(easeInOutCubic, 250 * milliseconds).invoke { value ->
    // ...
  }
  // ...
}

class Foo(animate: Animator) {
    var color by animate(initialColor, tweenColor(linear, 1 * seconds)) { old, new ->
        rerenderNow()
    }
}

New FileSelector Control
A new component to trigger file selection. This has also been adapted to 2 form controls: file and files to select one or multiple files. It requires the use of the nativeFileSelectorBehavior() module. It can be customized like TextField via NativeFileSelectorStyler, which is available for injection when nativeFileSelectorBehavior() is installed.

Please play around with the release and provide feedback. I'll be working on bug fixes etc. with the goal of releasing in the next week or so.

[Nick]

Let me know if you’ve had a chance to play with the snapshot version. I’m hoping to incorporate any feedback and address any bugs ahead of the release. cc: @ayodele

[ayodele]

No I haven't 😅. Planned to do that today, but I woke up to a different schedule. But I'll be hands on tomorrow.

[ayodele]

Does Doodle support the new Kotlin/Js IR compiler yet??

[ayodele]

I had errors when I tried to use it

[Nick]

It should. What errors do you see?

[ayodele]

I added PointerModule , so when I hover over the button or click it I get errors. See:

[Nick]

Strange. And this only happens with the IR compiler? Can you share the minimal code you used to repro?

[ayodele]

Yes. So I switched back to the legacy compiler and it worked.

[ayodele]

fun main() {
    application(modules = listOf(PointerModule)) {
        MainApp(display = instance(), textMetrics = instance())
    }
}


class MainApp(display: Display, textMetrics: TextMetrics): Application{

    init {
        val view = PushButton("Hi!").apply {
            size = Size(150.0, 50.0)
            acceptsThemes = false
            cursor = Pointer
            fired += {
                console.log("Fired!")
            }
            behavior = simpleTextButtonRenderer(textMetrics){ button, canvas ->
                val draw = {canvas.rect(bounds.atOrigin, radius = 8.0, fill = Color.Blue.paint)}
                canvas.outerShadow { draw() }
                canvas.text(button.text, at = textPosition(button, button.text), color = Color.White)
            }
        }
        display += view
    }


    override fun shutdown() {}

}

[Nick]

Ok. I’ll dig in when i have some time.

[ayodele]

Aiit

[ayodele]

In the new constraint, no parent.left or <http://parent.top|parent.top>

[Nick]

That’s right. It’s because you can now set values to raw numbers. So set the left and top to 0 to have the same effect.

[ayodele]

Nice!!!.

[ayodele]

I'll be working with constraint more this week, I'll give feedbacks.

[Nick]

Be sure to read the release notes for 0.8.2. They talk about the constraint changes.

[ayodele]

Yes I did. Been playing with the new equations.

But I only seems to understand what eq does. But I'm still trying to grasp lessEq and greaterEq. Can you give a brief summary??

[Nick]

Sure.

view.width lessEq 100
(view.width eq parent.width/2) .. Strong

This would allow the view’s width to scale with it’s parent until the parent’s width is greater than 200. Similar for greaterEq. You can use them to bound a value. A good example is confining a view so it can slide within a min and max location.

[Nick]

I reproduced the IR issue. It’s tied to some raw JS bits that seem to run afoul of the IR compiler at runtime. Working on a fix.

[Nick]

also. shadows will get clipped by a View’s bounds like any other rendering. you can disable clipping by overriding clipCanvasToBounds. https://github.com/nacular/doodle/blob/a0492b9824a9f458ea0a1138e1ff1c07a3deebc9/Core/src/commonMain/kotlin/io/nacular/doodle/core/View.kt#L221. or the equivalent from a Behavior.

[Nick]

The IR issue has been fixed! It’ll be in the upcoming release.

[Nick]

I’m also looking for feedback on the new animation APIs. Let me k ow if they are intuitive and easy to use.

[ayodele]

Okay I will