diff --git a/Readme.md b/Readme.md
index e7eb001..375d4ca 100644
--- a/Readme.md
+++ b/Readme.md
@@ -91,8 +91,8 @@ Kategorije pravopisnih pravil so:
Privzeto servis uporablja podčrtovanje pravopisnih napak (nastavitev `'underline'`). Videz lahko spreminjamo.
-
-
+
+
Levo `'underline'`, desno `'lector'`.
diff --git a/samples/images/markup_lector.png b/samples/images/markup_lector.png
new file mode 100644
index 0000000..93ac2f8
Binary files /dev/null and b/samples/images/markup_lector.png differ
diff --git a/samples/images/markup_underline.png b/samples/images/markup_underline.png
new file mode 100644
index 0000000..e29af1c
Binary files /dev/null and b/samples/images/markup_underline.png differ
diff --git a/samples/markup_lector.png b/samples/markup_lector.png
deleted file mode 100644
index eb75f92..0000000
Binary files a/samples/markup_lector.png and /dev/null differ
diff --git a/samples/markup_underline.png b/samples/markup_underline.png
deleted file mode 100644
index ddd6e22..0000000
Binary files a/samples/markup_underline.png and /dev/null differ
diff --git a/service.js b/service.js
index 4e0c682..5de09fc 100644
--- a/service.js
+++ b/service.js
@@ -371,13 +371,19 @@ class BesService {
if (match.highlights.length === 0) return
const dpr = window.devicePixelRatio
this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility
+ let amplitude = 0
const ruleId = match.match.rule.id
- this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
- ? 'rgba(0, 123, 255, 0.8)'
- : 'rgba(255, 115, 0, 0.8)'
- this.ctx.fillStyle = ruleId.startsWith('MORFOLOGIK_RULE')
- ? 'rgba(0, 123, 255, 0.8)'
- : 'rgba(255, 115, 0, 0.8)'
+ if (ruleId.startsWith('MORFOLOGIK_RULE')) {
+ const styles = window.getComputedStyle(this.highlightSpelling)
+ this.ctx.strokeStyle = styles.color
+ this.ctx.fillStyle = styles.color
+ amplitude = -1
+ } else {
+ const styles = window.getComputedStyle(this.highlightGrammar)
+ this.ctx.strokeStyle = styles.color
+ this.ctx.fillStyle = styles.color
+ amplitude = 1
+ }
let markerY1, markerY2
switch (this.markupStyle) {
case 'lector':
@@ -681,7 +687,7 @@ class BesService {
const x2 = rect.right
const y = rect.bottom
const scale = (rect.bottom - rect.top) / 18
- this.drawAttentionRequired(x1, x2, y, scale)
+ this.drawAttentionRequired(x1, x2, y, amplitude, scale)
}
markerY1 = Math.min(...match.highlights.map(rect => rect.top))
@@ -865,17 +871,18 @@ class BesService {
* @param {Number} x1 Sign left [px]
* @param {Number} x2 Sign right [px]
* @param {Number} y Sign baseline [px]
+ * @param {Number} amplitude Sign amplitude [px]
* @param {Number} scale Sign scale
*/
- drawAttentionRequired(x1, x2, y, scale) {
+ drawAttentionRequired(x1, x2, y, amplitude, scale) {
const dpr = window.devicePixelRatio
this.ctx.beginPath()
- this.ctx.moveTo(x1 * dpr, (y - scale) * dpr)
+ this.ctx.moveTo(x1 * dpr, (y - amplitude * scale) * dpr)
for (let x = x1; ; ) {
if (x >= x2) break
- this.ctx.lineTo((x += 2 * scale) * dpr, (y + scale) * dpr)
+ this.ctx.lineTo((x += 2 * scale) * dpr, (y + amplitude * scale) * dpr)
if (x >= x2) break
- this.ctx.lineTo((x += 2 * scale) * dpr, (y - scale) * dpr)
+ this.ctx.lineTo((x += 2 * scale) * dpr, (y - amplitude * scale) * dpr)
}
this.ctx.stroke()
}
@@ -972,7 +979,16 @@ class BesService {
this.ctx = this.canvasPanel.getContext('2d')
this.ctx.scale(1, 1)
+ this.highlightSpelling = document.createElement('div')
+ this.highlightSpelling.classList.add('bes-highlight-placeholder')
+ this.highlightSpelling.classList.add('bes-highlight-spelling')
+ this.highlightGrammar = document.createElement('div')
+ this.highlightGrammar.classList.add('bes-highlight-placeholder')
+ this.highlightGrammar.classList.add('bes-highlight-grammar')
+
this.correctionPanel.appendChild(this.scrollPanel)
+ this.correctionPanel.appendChild(this.highlightSpelling)
+ this.correctionPanel.appendChild(this.highlightGrammar)
this.scrollPanel.appendChild(this.canvasPanel)
this.textElement.parentElement.insertBefore(
this.correctionPanel,
@@ -1066,8 +1082,8 @@ class BesService {
el.classList.add('bes-highlight-rect')
el.classList.add(
match.match.rule.id.startsWith('MORFOLOGIK_RULE')
- ? 'bes-highlight-spelling-rect'
- : 'bes-highlight-grammar-rect'
+ ? 'bes-highlight-spelling'
+ : 'bes-highlight-grammar'
)
el.style.left = `${rect.x + canvasPanelRect.x + window.scrollX}px`
el.style.top = `${rect.y + canvasPanelRect.y + window.scrollY}px`
@@ -1107,7 +1123,9 @@ class BesService {
redrawAllMistakeMarkup() {
this.ctx.clearRect(0, 0, this.canvasPanel.width, this.canvasPanel.height)
this.results.forEach(result => {
- result.matches.forEach(match => this.drawMistakeMarkup(match))
+ // Most important matches are first, we want to draw them last => iterate in reverse.
+ for (let i = result.matches.length; i-- > 0; )
+ this.drawMistakeMarkup(result.matches[i])
})
}
@@ -1263,9 +1281,11 @@ class BesTreeService extends BesService {
),
match: match
}
- this.drawMistakeMarkup(m)
matches.push(m)
})
+ // Most important matches are first, we want to draw them last => iterate in reverse.
+ for (let i = matches.length; i-- > 0; )
+ this.drawMistakeMarkup(matches[i])
this.markProofed(node, matches)
this.onProofingProgress(matches.length)
})
@@ -2052,9 +2072,11 @@ class BesPlainTextService extends BesService {
),
match: match
}
- this.drawMistakeMarkup(m)
matches.push(m)
})
+ // Most important matches are first, we want to draw them last => iterate in reverse.
+ for (let i = matches.length; i-- > 0; )
+ this.drawMistakeMarkup(matches[i])
this.markProofed(paragraphRange, matches)
this.onProofingProgress(matches.length)
})
diff --git a/styles.css b/styles.css
index 0e2e12c..524e249 100644
--- a/styles.css
+++ b/styles.css
@@ -1,23 +1,29 @@
/* Mistake types styles */
-.bes-spelling-mistake {
- border-bottom: 2px solid #ff7300;
- position: absolute;
- z-index: 3;
- cursor: text;
-}
-
.bes-highlight-rect {
position: absolute;
- opacity: 0.3;
cursor: text;
}
-.bes-highlight-spelling-rect {
- background: rgb(0, 123, 255);
+.bes-highlight-spelling {
+ color: hsl(211, 100%, 60%);
+ background: hsla(211, 100%, 60%, 0.3);
}
-.bes-highlight-grammar-rect {
- background: rgb(255, 115, 0);
+.bes-highlight-grammar {
+ color: hsl(27, 100%, 45%);
+ background: hsla(27, 100%, 45%, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+ .bes-highlight-spelling {
+ color: hsl(211, 100%, 55%);
+ background: hsla(211, 100%, 55%, 0.3);
+ }
+
+ .bes-highlight-grammar {
+ color: hsl(27, 100%, 65%);
+ background: hsla(27, 100%, 65%, 0.3);
+ }
}
/* Styles required to ensure full functionality and optimal user experience. */
@@ -54,3 +60,8 @@
background: none;
z-index: -1;
}
+
+.bes-highlight-placeholder {
+ display: none;
+ visibility: hidden;
+}