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. *