Change SpellCheck to draw the traditional red squiggle

MohamedRejeb · Nov 29, 2024 · 1a1f9b3 · 1a1f9b3
1 parent 29c5438
commit 1a1f9b3
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/...lcheck/src/commonMain/kotlin/com/mohamedrejeb/richeditor/compose/spellcheck/SpellCheck.kt b/...lcheck/src/commonMain/kotlin/com/mohamedrejeb/richeditor/compose/spellcheck/SpellCheck.kt
@@ -2,6 +2,8 @@ package com.mohamedrejeb.richeditor.compose.spellcheck
 
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.text.SpanStyle
@@ -13,9 +15,15 @@ import com.mohamedrejeb.richeditor.annotation.ExperimentalRichTextApi
 import com.mohamedrejeb.richeditor.model.RichSpanStyle
 import com.mohamedrejeb.richeditor.model.RichTextConfig
 import com.mohamedrejeb.richeditor.utils.getBoundingBoxes
+import kotlin.math.PI
+import kotlin.math.sin
 
+/**
+ * RichSpanStyle that draws a Spell Check style red squiggle below the Spanned text.
+ */
 @OptIn(ExperimentalRichTextApi::class)
 public object SpellCheck: RichSpanStyle {
+
     override val spanStyle: (RichTextConfig) -> SpanStyle = {
         SpanStyle()
     }
@@ -37,17 +45,35 @@ public object SpellCheck: RichSpanStyle {
 
         boxes.fastForEach { box ->
             path.moveTo(box.left + startPadding, box.bottom + topPadding)
-            path.lineTo(box.right + startPadding, box.bottom + topPadding)
+
+            val amplitude = 1.5.dp.toPx() // Height of the wave
+            val frequency = 0.15f // Controls how many waves appear
+            val width = box.right - box.left
+
+            // Create the sine wave path
+            for (x in 0..width.toInt()) {
+                val xPos = box.left + startPadding + x
+                val yPos = box.bottom + topPadding +
+                        (amplitude * sin(x * frequency * 2 * PI)).toFloat()
+
+                if (x == 0) {
+                    path.moveTo(xPos, yPos)
+                } else {
+                    path.lineTo(xPos, yPos)
+                }
+            }
 
             drawPath(
                 path = path,
                 color = strokeColor,
                 style = Stroke(
-                    width = 2.dp.toPx(),
+                    width = 1.dp.toPx(),
+                    cap = StrokeCap.Round,
+                    join = StrokeJoin.Round
                 )
             )
         }
     }
 
     override val acceptNewTextInTheEdges: Boolean = false
-}
+}