Missing View-related ratio updates (#1913)

e2e/e2e-test/src/commonMain/kotlin/RefMain.kt

@@ -11,6 +11,7 @@ import korlibs.io.file.std.*
 import korlibs.io.lang.*
 import korlibs.io.serialization.json.Json
 import korlibs.math.geom.*
+import korlibs.math.interpolation.*
 
 suspend fun main() = Korge(windowSize = Size(768, 512), backgroundColor = Colors["#2b2b2b"]) {
     //println("StandardPaths.cwd=${korlibs.io.file.std.StandardPaths.cwd}")
@@ -101,8 +102,8 @@ object FiltersE2ETestCase : E2ETestCase() {
         println("PREPARING VIEWS...")
         image(bitmap).scale(.5).position(0, 0).addFilter(WaveFilter(time = 0.5.seconds, crestDistance = Vector2D(256, 128)))
         image(bitmap).scale(.5).position(256, 0).addFilter(BlurFilter(radius = 6.0))
-        image(bitmap).scale(.5).position(512, 0).addFilter(TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = 0.5))
-        image(bitmap2).scale(.5).position(0, 256).addFilter(PageFilter(hratio = 0.5, hamplitude1 = 20.0))
+        image(bitmap).scale(.5).position(512, 0).addFilter(TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = Ratio.HALF))
+        image(bitmap2).scale(.5).position(0, 256).addFilter(PageFilter(hratio = Ratio.HALF, hamplitude1 = 20.0))
         image(bitmap2).scale(.5).position(256, 256).addFilter(Convolute3Filter(Convolute3Filter.KERNEL_SHARPEN))
         image(bitmap2).scale(.5).position(512, 256).addFilter(SwizzleColorsFilter("bgga"))
         println("VIEWS PREPARED")

korge-foundation/src/common/korlibs/math/_Math_interpolation.kt

@@ -19,6 +19,7 @@ private const val HALF_PI = PI.toFloat() / 2f
 fun interface Easing {
     operator fun invoke(it: Float): Float
     operator fun invoke(it: Double): Double = invoke(it.toFloat()).toDouble()
+    operator fun invoke(it: Ratio): Ratio = Ratio(invoke(it.toFloat()).toDouble())
 
     companion object {
         operator fun invoke(name: () -> String, block: (Float) -> Float): Easing {
@@ -418,12 +419,15 @@ inline operator fun Ratio.div(value: Double): Double = this.value / value
 
 @Deprecated("", ReplaceWith("this")) fun Ratio.toRatio(): Ratio = this
 
+inline fun Number.toRatio(): Ratio = Ratio(this.toDouble())
 fun Float.toRatio(): Ratio = Ratio(this)
 fun Double.toRatio(): Ratio = Ratio(this)
 
+inline fun Number.toRatio(max: Number): Ratio = Ratio(this.toDouble(), max.toDouble())
 fun Float.toRatio(max: Float): Ratio = Ratio(this, max)
 fun Double.toRatio(max: Double): Ratio = Ratio(this, max)
 
+inline fun Number.toRatioClamped(): Ratio = Ratio(this.toDouble().clamp01())
 fun Float.toRatioClamped(): Ratio = Ratio(this.clamp01())
 fun Double.toRatioClamped(): Ratio = Ratio(this.clamp01())
 

korge-sandbox/src/commonMain/kotlin/samples/MainBlur.kt

@@ -11,6 +11,7 @@ import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
 import korlibs.math.geom.Anchor
 import korlibs.math.geom.degrees
+import korlibs.math.interpolation.*
 import korlibs.time.*
 import kotlin.reflect.*
 
@@ -73,7 +74,7 @@ class MainBlur : Scene() {
         val colorMatrixFilter = ColorMatrixFilter(ColorMatrixFilter.SEPIA_MATRIX, blendRatio = 0.5)
         image(bitmap).xy(500, 250).filters(colorMatrixFilter).bindScale()
 
-        val transitionFilter = TransitionFilter(TransitionFilter.Transition.CIRCULAR, reversed = false, ratio = 0.5, spread = 0.2)
+        val transitionFilter = TransitionFilter(TransitionFilter.Transition.CIRCULAR, reversed = false, ratio = Ratio.HALF, spread = 0.2)
         image(bitmap).xy(370, 250).filters(transitionFilter).bindScale()
 
         val pageFilter = PageFilter()
@@ -129,11 +130,11 @@ class MainBlur : Scene() {
             }
             uiHorizontalFill {
                 uiText("Blend").styles { textColor = Colors.BLACK }
-                uiSlider(value = transitionFilter.ratio, min = 0.0, max = 1.0, step = 0.0, decimalPlaces = 2).changed {
+                uiSlider(value = transitionFilter.ratio.toDouble(), min = 0.0, max = 1.0, step = 0.0, decimalPlaces = 2).changed {
                     colorMatrixFilter.blendRatio = it
                     pageFilter.hamplitude0 = it
-                    transitionFilter.ratio = it
-                    pageFilter.hratio = it
+                    transitionFilter.ratio = it.toRatio()
+                    pageFilter.hratio = it.toRatio()
                     waveFilter.time = it.seconds
                     flagFilter.time = it.seconds
                 }

korge-sandbox/src/commonMain/kotlin/samples/MainClipping.kt

@@ -8,6 +8,7 @@ import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
 import korlibs.korge.view.vector.*
 import korlibs.math.geom.*
+import korlibs.math.interpolation.*
 
 class MainClipping : Scene() {
     override suspend fun SContainer.sceneMain() {
@@ -38,7 +39,7 @@ class MainClipping : Scene() {
                 solidRect(512, 512, Colors.BLUE)
             }
         }, MaskTransition(TransitionFilter.Transition.CIRCULAR))
-        tv.ratio = 0.5
+        tv.ratio = Ratio.HALF
         addChild(tv)
 
         gpuShapeView({

korge-sandbox/src/commonMain/kotlin/samples/MainFilters.kt

@@ -73,12 +73,12 @@ class MainFilters : ScaledScene(768, 512) {
             sequence(looped = true) {
                 //tween(color::blendRatio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
                 //tween(color::blendRatio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(color::ratio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(color::ratio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(color::ratio[Ratio.ZERO], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(color::ratio[Ratio.ONE], time = 1.seconds, easing = Easing.EASE_IN_OUT)
             }
             sequence(looped = true) {
-                tween(page::hratio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(page::hratio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(page::hratio[Ratio.ZERO], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(page::hratio[Ratio.ONE], time = 1.seconds, easing = Easing.EASE_IN_OUT)
             }
             sequence(looped = true) {
                 block { conImg.filter = Convolute3Filter(Convolute3Filter.KERNEL_SHARPEN) }

korge-sandbox/src/commonMain/kotlin/samples/MainFiltersRenderToBitmap.kt

@@ -6,6 +6,7 @@ import korlibs.korge.scene.*
 import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
 import korlibs.math.geom.*
+import korlibs.math.interpolation.*
 import korlibs.time.*
 
 class MainFiltersRenderToBitmap : Scene() {
@@ -18,7 +19,7 @@ class MainFiltersRenderToBitmap : Scene() {
             image(bitmap).scale(.5).position(0, 0).addFilter(WaveFilter(time = 0.5.seconds))
             //image(bitmap).scale(.5).position(256, 0).addFilter(DirectionalBlurFilter(radius = 32.0))
             image(bitmap).scale(.5).position(256, 0).addFilter(BlurFilter(radius = 32.0))
-            image(bitmap).scale(.5).position(512, 0).addFilter(TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = 0.5))
+            image(bitmap).scale(.5).position(512, 0).addFilter(TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = Ratio.HALF))
             image(bitmap).scale(.5).position(0, 256).addFilter(PageFilter(hratio = 0.5, hamplitude1 = 20.0))
             image(bitmap).scale(.5).position(256, 256).addFilter(Convolute3Filter(Convolute3Filter.KERNEL_SHARPEN))
             image(bitmap).scale(.5).position(512, 256).addFilter(SwizzleColorsFilter("bgga"))

korge-sandbox/src/commonMain/kotlin/samples/MainFiltersSample.kt

@@ -73,12 +73,12 @@ class MainFiltersSample : Scene() {
             sequence(looped = true) {
                 //tween(color::blendRatio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
                 //tween(color::blendRatio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(color::ratio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(color::ratio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(color::ratio[Ratio.ZERO], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(color::ratio[Ratio.ONE], time = 1.seconds, easing = Easing.EASE_IN_OUT)
             }
             sequence(looped = true) {
-                tween(page::hratio[0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(page::hratio[1], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(page::hratio[Ratio.ZERO], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(page::hratio[Ratio.ONE], time = 1.seconds, easing = Easing.EASE_IN_OUT)
             }
             sequence(looped = true) {
                 block { conImg.filter = Convolute3Filter(Convolute3Filter.KERNEL_SHARPEN) }

korge-sandbox/src/commonMain/kotlin/samples/MainTransition.kt

@@ -5,6 +5,7 @@ import korlibs.korge.scene.*
 import korlibs.korge.ui.*
 import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
+import korlibs.math.interpolation.*
 
 class MainTransition : Scene() {
     override suspend fun SContainer.sceneMain() {
@@ -13,7 +14,7 @@ class MainTransition : Scene() {
         transition.startNewTransition(SolidRect(100, 100, Colors.BLUE), MaskTransition(
             TransitionFilter.Transition.CIRCULAR
         ))
-        transition.ratio = 0.5
+        transition.ratio = Ratio.HALF
         transition.filters(DropshadowFilter(shadowColor = Colors.PURPLE))
 
         solidRect(100, 100, Colors.GREEN).filters(DropshadowFilter(shadowColor = Colors.PURPLE))

korge-sandbox/src/commonMain/kotlin/samples/MainTransitionFilter.kt

@@ -7,12 +7,13 @@ import korlibs.korge.scene.*
 import korlibs.korge.tween.*
 import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
+import korlibs.math.interpolation.*
 import korlibs.time.*
 
 class MainTransitionFilter : ScaledScene(768, 512) {
     override suspend fun SContainer.sceneMain() {
         val bitmap = resourcesVfs["korge.png"].readBitmap()
-        val transition = TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = 0.5)
+        val transition = TransitionFilter(TransitionFilter.Transition.SWEEP, reversed = false, spread = 1.0, ratio = Ratio.HALF)
 
         image(transition.transition.bmp)
 
@@ -24,8 +25,8 @@ class MainTransitionFilter : ScaledScene(768, 512) {
 
         launchImmediately {
             while (true) {
-                tween(transition::ratio[1.0], time = 0.5.seconds)
-                tween(transition::ratio[0.0], time = 0.5.seconds)
+                tween(transition::ratio[Ratio.ONE], time = 0.5.seconds)
+                tween(transition::ratio[Ratio.ZERO], time = 0.5.seconds)
             }
         }
     }

korge-sandbox/src/commonMain/kotlin/samples/MainUI.kt

@@ -105,8 +105,8 @@ class MainUI : Scene() {
         }
         val job = launchImmediately {
             while (true) {
-                tween(progress::ratio[1.0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
-                tween(progress::ratio[1.0, 0.0], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(progress::ratio[Ratio.ONE], time = 1.seconds, easing = Easing.EASE_IN_OUT)
+                tween(progress::ratio[Ratio.ONE, Ratio.ZERO], time = 1.seconds, easing = Easing.EASE_IN_OUT)
             }
         }
         uiButton("Stop Progress").position(Point(64 + progress.width, 32.0)).mouse { onClick { job.cancel() } }

korge/src/common/korlibs/graphics/shader/UniformBlock.kt

@@ -4,6 +4,7 @@ import korlibs.graphics.*
 import korlibs.image.color.*
 import korlibs.io.lang.*
 import korlibs.math.geom.*
+import korlibs.math.interpolation.*
 import korlibs.math.nextMultipleOf
 import korlibs.memory.*
 import kotlin.reflect.*
@@ -167,6 +168,7 @@ class UniformsRef(
     }
     operator fun set(uniform: TypedUniform<Float>, value: Boolean) = set(uniform, if (value) 1f else 0f)
     operator fun set(uniform: TypedUniform<Float>, value: Double) = set(uniform, value.toFloat())
+    operator fun set(uniform: TypedUniform<Float>, value: Ratio) = set(uniform, value.toFloat())
     operator fun set(uniform: TypedUniform<Vector2F>, value: Vector2F) = set(uniform, value.x, value.y)
     operator fun set(uniform: TypedUniform<Vector2F>, value: Point) = set(uniform, value.x.toFloat(), value.y.toFloat())
     operator fun set(uniform: TypedUniform<Vector2F>, value: Size) = set(uniform, value.width.toFloat(), value.height.toFloat())

korge/src/common/korlibs/korge/scene/SceneContainer.kt

@@ -305,9 +305,9 @@ class SceneContainer(
         }
 
         if (time > 0.seconds) {
-            transitionView.tween(transitionView::ratio[0.0, 1.0], time = time)
+            transitionView.tween(transitionView::ratio[Ratio.ZERO, Ratio.ONE], time = time)
         } else {
-            transitionView.ratio = 1.0
+            transitionView.ratio = Ratio.ONE
         }
 
         transitionView.endTransition()

korge/src/common/korlibs/korge/scene/Transition.kt

@@ -5,6 +5,7 @@ import korlibs.korge.render.*
 import korlibs.korge.tween.*
 import korlibs.korge.view.*
 import korlibs.korge.view.filter.*
+import korlibs.korge.view.property.*
 import korlibs.math.interpolation.*
 import kotlin.native.concurrent.*
 
@@ -19,6 +20,9 @@ class TransitionView() : Container() {
         dummyView()
     }
 
+    @ViewProperty(min = 0.0, max = 1.0, clampMin = false, clampMax = false)
+    var ratio: Ratio = Ratio.ZERO
+
     /** [Transition] that will be used to render [prev] and [next] */
     internal var transition: Transition = AlphaTransition
         private set
@@ -29,7 +33,7 @@ class TransitionView() : Container() {
     /** Moves [next] to [prev], sets [next] and starts the [ratio] to 0.0 to start the transition. */
 	fun startNewTransition(next: View, transition: Transition = this.transition) {
         this.transition = transition
-		this.ratio = 0.0
+		this.ratio = Ratio.ZERO
         this.transitionProcess = transition.create()
 		setViews(this.next, next)
         this.transitionProcess.start(this.prev, this.next)
@@ -38,7 +42,8 @@ class TransitionView() : Container() {
     override fun toString(): String = super.toString() + ":ratio=$ratio:transition=$transition"
 
     fun endTransition() {
-        this.ratio = 1.0
+        this.ratio = Ratio.ONE
+
         this.transitionProcess.end(this.prev, this.next)
         setViews(dummyView(), next)
     }
@@ -52,8 +57,8 @@ class TransitionView() : Container() {
 
 	override fun renderInternal(ctx: RenderContext) {
 		when {
-			ratio <= 0.0 -> prev.render(ctx)
-			ratio >= 1.0 -> next.render(ctx)
+			ratio <= Ratio.ZERO -> prev.render(ctx)
+			ratio >= Ratio.ONE -> next.render(ctx)
 			else -> this.transitionProcess.render(ctx, prev, next, ratio)
 		}
 	}
@@ -62,23 +67,23 @@ class TransitionView() : Container() {
 interface TransitionProcess {
     fun start(prev: View, next: View) = Unit
     fun end(prev: View, next: View) = Unit
-    fun render(ctx: RenderContext, prev: View, next: View, ratio: Double) = Unit
+    fun render(ctx: RenderContext, prev: View, next: View, ratio: Ratio) = Unit
 }
 
 interface Transition {
     fun create(): TransitionProcess
 }
 
-fun TransitionProcess(name: String = "Transition", render: (ctx: RenderContext, prev: View, next: View, ratio: Double) -> Unit): TransitionProcess =
+fun TransitionProcess(name: String = "Transition", render: (ctx: RenderContext, prev: View, next: View, ratio: Ratio) -> Unit): TransitionProcess =
     object : TransitionProcess {
-        override fun render(ctx: RenderContext, prev: View, next: View, ratio: Double) = render(ctx, prev, next, ratio)
+        override fun render(ctx: RenderContext, prev: View, next: View, ratio: Ratio) = render(ctx, prev, next, ratio)
         override fun toString(): String = name
     }
 
-fun Transition(name: String = "Transition", render: (ctx: RenderContext, prev: View, next: View, ratio: Double) -> Unit): Transition {
+fun Transition(name: String = "Transition", render: (ctx: RenderContext, prev: View, next: View, ratio: Ratio) -> Unit): Transition {
     return object : Transition, TransitionProcess {
         override fun create(): TransitionProcess = this
-        override fun render(ctx: RenderContext, prev: View, next: View, ratio: Double) = render(ctx, prev, next, ratio)
+        override fun render(ctx: RenderContext, prev: View, next: View, ratio: Ratio) = render(ctx, prev, next, ratio)
         override fun toString(): String = name
     }
 }
@@ -106,7 +111,7 @@ fun Transition.withEasing(easing: Easing) = object : Transition {
         return object : TransitionProcess {
             override fun start(prev: View, next: View) = process.start(prev, next)
             override fun end(prev: View, next: View) = process.end(prev, next)
-            override fun render(ctx: RenderContext, prev: View, next: View, ratio: Double) =
+            override fun render(ctx: RenderContext, prev: View, next: View, ratio: Ratio) =
                 process.render(ctx, prev, next, easing(ratio))
         }
     }

korge/src/common/korlibs/korge/tween/tweenbase.kt

@@ -130,6 +130,7 @@ operator fun <V : Interpolable<V>> KMutableProperty0<V>.get(initial: V, end: V)
 @PublishedApi internal fun _interpolate(ratio: Ratio, l: Double, r: Double): Double = ratio.interpolate(l, r)
 @PublishedApi internal fun _interpolateInt(ratio: Ratio, l: Int, r: Int): Int = ratio.interpolate(l, r)
 @PublishedApi internal fun <V : Interpolable<V>> _interpolateInterpolable(ratio: Ratio, l: V, r: V): V = ratio.interpolate(l, r)
+@PublishedApi internal fun _interpolateRatio(ratio: Ratio, l: Ratio, r: Ratio): Ratio = ratio.interpolate(l, r)
 @PublishedApi internal fun _interpolateMatrix(ratio: Ratio, l: Matrix, r: Matrix): Matrix = ratio.interpolate(l, r)
 @PublishedApi internal fun _interpolatePoint(ratio: Ratio, l: Point, r: Point): Point = ratio.interpolate(l, r)
 @PublishedApi internal fun _interpolateSize(ratio: Ratio, l: Size, r: Size): Size = ratio.interpolate(l, r)
@@ -217,6 +218,8 @@ inline operator fun KMutableProperty0<Point>.get(range: PointList): V2<Point> {
 @JvmName("getFloat") inline operator fun KMutableProperty0<Float>.get(initial: Long, end: Long) = get(initial.toFloat(), end.toFloat())
 @JvmName("getFloat") inline operator fun KMutableProperty0<Float>.get(initial: Number, end: Number) = get(initial.toFloat(), end.toFloat())
 
+inline operator fun KMutableProperty0<Ratio>.get(end: Ratio) = V2(this, this.get(), end, ::_interpolateRatio, includeStart = false)
+inline operator fun KMutableProperty0<Ratio>.get(initial: Ratio, end: Ratio) = V2(this, initial, end, ::_interpolateRatio, true)
 
 inline operator fun KMutableProperty0<Double>.get(end: Double) = V2(this, this.get(), end, ::_interpolate, includeStart = false)
 inline operator fun KMutableProperty0<Double>.get(end: Int) = get(end.toDouble())

korge/src/common/korlibs/korge/ui/UIOldScrollBar.kt

@@ -8,9 +8,11 @@ import korlibs.korge.render.*
 import korlibs.korge.style.*
 import korlibs.korge.ui.UIOldScrollBar.*
 import korlibs.korge.view.*
+import korlibs.korge.view.property.*
 import korlibs.math.*
 import korlibs.math.geom.*
 import korlibs.math.geom.slice.*
+import korlibs.math.interpolation.*
 import kotlin.math.*
 
 @Deprecated("Use UINewScrollable")
@@ -71,10 +73,12 @@ open class UIOldScrollBar(
 
     val onChange = Signal<UIOldScrollBar>()
 
-    override var ratio: Double
-        get() = (current / (totalSize - pageSize)).clamp01()
+    /** Property used for interpolable views like morph shapes, progress bars etc. */
+    @ViewProperty(min = 0.0, max = 1.0, clampMin = false, clampMax = false)
+    var ratio: Ratio
+        get() = Ratio(current, (totalSize - pageSize)).clamped
         set(value) {
-            current = value.clamp01() * (totalSize - pageSize)
+            current = value.clamped * (totalSize - pageSize)
         }
 
     protected val background = solidRect(100, 100, styles.buttonBackColor)
@@ -108,13 +112,13 @@ open class UIOldScrollBar(
             changeCurrent(pos.sign * 0.8f * this.pageSize)
         }
 
-        var initRatio = 0.0
-        var startRatio = 0.0
+        var initRatio = Ratio.ZERO
+        var startRatio = Ratio.ZERO
         thumb.onMouseDrag {
             val lmouse = background.localMousePos(views)
             val curPosition = if (isHorizontal) lmouse.x else lmouse.y
             val size = if (isHorizontal) background.width - thumb.width else background.height - thumb.height
-            val curRatio = curPosition / size
+            val curRatio = Ratio(curPosition, size)
             if (it.start) {
                 initRatio = ratio
                 startRatio = curRatio
@@ -151,6 +155,11 @@ open class UIOldScrollBar(
         }
         onChange(this)
     }
+
+    override fun copyPropsFrom(source: View) {
+        super.copyPropsFrom(source)
+        this.ratio = (source as? UIOldScrollBar?)?.ratio ?: Ratio.ZERO
+    }
 }
 
 var ViewStyles.iconLeft: RectSlice<Bitmap32> by ViewStyle(Bitmap32(16, 16, Colors.WHITE.premultipliedFast).slice())