From b6c825cc836b3b6a8c50dffad1812055b63b4ba8 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Fri, 28 Feb 2025 14:27:06 +0100
Subject: [PATCH] Add special markup for missing period

Period is too small to use standard missing text approach. Besides,
period was offended, since comma had its own markup sign and period
didn't. It demanded own markup sign and period.
---
 service.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/service.js b/service.js
index a7e05af..71646a7 100644
--- a/service.js
+++ b/service.js
@@ -419,6 +419,13 @@ class BesService {
               const x = match.highlights[0].left
               const y = match.highlights[0].bottom
               this.drawMissingComma(x, y, scale)
+            } else if (toInsert === '.') {
+              // Thou we should draw . after the word before match.match.offset, if there is a line break inbetween,
+              // the correction markup would be drawn in one line and the highlight rectangle for onClick would reside
+              // in another line, making a confusing UX.
+              const x = match.highlights[0].left
+              const y = match.highlights[0].bottom - 4 * scale
+              this.drawMissingPeriod(x, y, scale)
             } else if (/^\s+$/.test(toInsert)) {
               const x = match.highlights[0].left
               const y1 = match.highlights[0].bottom - 2 * scale
@@ -447,6 +454,10 @@ class BesService {
               const x = match.highlights.at(-1).right
               const y = match.highlights.at(-1).bottom
               this.drawMissingComma(x, y, scale)
+            } else if (toInsert === '.') {
+              const x = match.highlights.at(-1).right + 3 * scale
+              const y = match.highlights.at(-1).bottom - 4 * scale
+              this.drawMissingPeriod(x, y, scale)
             } else if (/^\s+$/.test(toInsert)) {
               const x = match.highlights.at(-1).right
               const y1 = match.highlights.at(-1).bottom - 2 * scale
@@ -702,6 +713,28 @@ class BesService {
     }
   }
 
+  /**
+   * Draws the missing period sign
+   *
+   * @param {Number} x Sign center [px]
+   * @param {Number} y Sign bottom [px]
+   * @param {Number} scale Sign scale
+   */
+  drawMissingPeriod(x, y, scale) {
+    const dpr = window.devicePixelRatio
+    this.ctx.beginPath()
+    this.ctx.ellipse(
+      x * dpr,
+      y * dpr,
+      2 * scale * dpr,
+      2 * scale * dpr,
+      0,
+      0,
+      2 * Math.PI
+    )
+    this.ctx.fill()
+  }
+
   /**
    * Draws the wrong spacing sign. Control direction of chevrons by reversing y1 and y2.
    *