Curve on livemap

canvas/src/commonMain/kotlin/org/jetbrains/letsPlot/core/canvas/Context2d.kt

@@ -60,6 +60,41 @@ interface Context2d {
     fun setTransform(m11: Double, m12: Double, m21: Double, m22: Double, dx: Double, dy: Double)
     fun setLineDash(lineDash: DoubleArray)
     fun measureText(str: String): Double
+
+    // https://github.com/d3/d3/blob/9364923ee2b35ec2eb80ffc4bdac12a7930097fc/src/svg/line.js#L236
+    fun drawBezierCurve(points: List<Vec<*>>) {
+        fun lineDot4(a: List<Double>, b: List<Double>): Double {
+            // returns the dot product of the given four-element vectors
+            return a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3]
+        }
+        // Matrix to transform basis (b-spline) control points to bezier control points.
+        val lineBasisBezier1 = listOf(0.0, 2.0 / 3.0, 1.0 / 3.0, 0.0)
+        val lineBasisBezier2 = listOf(0.0, 1.0 / 3.0, 2.0 / 3.0, 0.0)
+        val lineBasisBezier3 = listOf(0.0, 1.0 / 6.0, 2.0 / 3.0, 1.0 / 6.0)
+
+        val px = arrayListOf(points[0].x, points[0].x, points[0].x, points[1].x)
+        val py = arrayListOf(points[0].y, points[0].y, points[0].y, points[1].y)
+
+        moveTo(points[0].x, points[0].y)
+        lineTo(
+            lineDot4(lineBasisBezier3, px),
+            lineDot4(lineBasisBezier3, py)
+        )
+        for (i in 2..points.size) {
+            val curPoint = if (i < points.size) points[i] else points.last()
+            px.removeFirst(); px.add(curPoint.x)
+            py.removeFirst(); py.add(curPoint.y)
+            bezierCurveTo(
+                lineDot4(lineBasisBezier1, px),
+                lineDot4(lineBasisBezier1, py),
+                lineDot4(lineBasisBezier2, px),
+                lineDot4(lineBasisBezier2, py),
+                lineDot4(lineBasisBezier3, px),
+                lineDot4(lineBasisBezier3, py)
+            )
+        }
+        lineTo(points.last().x, points.last().y)
+    }
 }
 
 fun Context2d.drawImage(snapshot: Snapshot, p: Vec<*>) = drawImage(snapshot, p.x, p.y)

livemap/src/commonMain/kotlin/org/jetbrains/letsPlot/livemap/api/PathLayerBuilder.kt

@@ -23,6 +23,7 @@ import org.jetbrains.letsPlot.livemap.chart.GrowingPathEffect.GrowingPathEffectC
 import org.jetbrains.letsPlot.livemap.chart.GrowingPathEffect.GrowingPathRenderer
 import org.jetbrains.letsPlot.livemap.chart.IndexComponent
 import org.jetbrains.letsPlot.livemap.chart.LocatorComponent
+import org.jetbrains.letsPlot.livemap.chart.path.CurveRenderer
 import org.jetbrains.letsPlot.livemap.chart.path.PathLocator
 import org.jetbrains.letsPlot.livemap.chart.path.PathRenderer
 import org.jetbrains.letsPlot.livemap.chart.path.PathRenderer.ArrowSpec
@@ -91,6 +92,7 @@ class PathEntityBuilder(
     var animation: Int = 0
     var speed: Double = 0.0
     var flow: Double = 0.0
+    var isCurve: Boolean = false
 
     // Arrow specification
     var arrowAngle: Double? = null
@@ -151,7 +153,7 @@ class PathEntityBuilder(
                         +IndexComponent(layerIndex!!, index!!)
                     }
                     +RenderableComponent().apply {
-                        renderer = PathRenderer()
+                        renderer = if (isCurve) CurveRenderer() else PathRenderer()
                     }
                     +ChartElementComponent().apply {
                         sizeScalingRange = [email protected]

livemap/src/commonMain/kotlin/org/jetbrains/letsPlot/livemap/chart/path/PathRenderer.kt

@@ -19,9 +19,11 @@ import org.jetbrains.letsPlot.livemap.core.ecs.EcsEntity
 import org.jetbrains.letsPlot.livemap.geometry.WorldGeometryComponent
 import org.jetbrains.letsPlot.livemap.mapengine.RenderHelper
 import org.jetbrains.letsPlot.livemap.mapengine.Renderer
+import org.jetbrains.letsPlot.livemap.mapengine.lineTo
+import org.jetbrains.letsPlot.livemap.mapengine.moveTo
 import kotlin.math.*
 
-class PathRenderer : Renderer {
+open class PathRenderer : Renderer {
     override fun render(entity: EcsEntity, ctx: Context2d, renderHelper: RenderHelper) {
         val geometry = entity.get<WorldGeometryComponent>().geometry.multiLineString
         val chartElement = entity.get<ChartElementComponent>()
@@ -37,10 +39,7 @@ class PathRenderer : Renderer {
             val adjustedGeometry = padLineString(lineString, startPadding, endPadding)
 
             ctx.beginPath()
-
-            adjustedGeometry[0].let { ctx.moveTo(it.x, it.y) }
-            adjustedGeometry.drop(1).forEach { ctx.lineTo(it.x, it.y) }
-
+            drawPath(adjustedGeometry, ctx)
             ctx.restore()
 
             ctx.setStrokeStyle(color)
@@ -58,6 +57,11 @@ class PathRenderer : Renderer {
         }
     }
 
+    open fun drawPath(points: List<WorldPoint>, ctx: Context2d) {
+        points[0].let(ctx::moveTo)
+        points.drop(1).forEach(ctx::lineTo)
+    }
+
     class ArrowSpec private constructor(
         val angle: Double,
         val length: Double,
@@ -222,4 +226,15 @@ class PathRenderer : Renderer {
             return lineString.subList(0, lineString.size - index) + adjustedEndPoint
         }
     }
+}
+
+class CurveRenderer : PathRenderer() {
+    override fun drawPath(points: List<WorldPoint>, ctx: Context2d) {
+        if (points.size < 3) {
+            // linear
+            super.drawPath(points, ctx)
+        } else {
+            ctx.drawBezierCurve(points)
+        }
+    }
 }