Amebis/BesService
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update onClick logic

Browse Source
This commit is contained in:
Aljaž Grilc 2025-02-24 09:00:32 +01:00
parent 0eb3e81974
commit 661449c2b7
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/div-contenteditable.html
View File

@ -10,8 +10,8 @@
<script src="../service.js"></script> <script src="../service.js"></script>
<script src="common.js"></script> <script src="common.js"></script>
</head> </head>
<body> <body style="background-color: gray;">
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p> <!-- <p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p> -->
<div id="my-editor" class="my-block my-control" contenteditable="true"> <div id="my-editor" class="my-block my-control" contenteditable="true">
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p> <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p> <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>

36
service.js
View File

@ -333,6 +333,7 @@ class BesService {
const canvasPanelRect = this.canvasPanel.getBoundingClientRect() const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
const highlights = [] const highlights = []
this.canvasPanel.classList.add('bes-canvas') this.canvasPanel.classList.add('bes-canvas')
this.ctx.lineWidth = 1 this.ctx.lineWidth = 1
this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE') this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
? '#e91313' ? '#e91313'
@ -393,14 +394,26 @@ class BesService {
* @param {DOMRect} rect Rectangle * @param {DOMRect} rect Rectangle
* @returns * @returns
*/ */
static isPointInRect(x, y, rect) { static isPointInRect(x, y, rect, canvasPanel) {
const globalWidth = rect.globalX + rect.width const canvasRect = canvasPanel.getBoundingClientRect()
const globalHeight = rect.globalY + rect.height const globalWidth = rect.x + rect.width
const globalHeight = rect.y - rect.height
const newX = x - canvasRect.left
const newY = y - canvasRect.top
console.log(
'x:',
newX,
'y:',
newY,
'globalWidth:',
globalWidth,
'globalHeight:',
globalHeight
)
console.log(rect)
return ( return (
rect.globalX <= x && rect.x <= newX && newX < globalWidth && globalHeight <= newY && newY < y
x < globalWidth &&
rect.globalY <= y &&
y < globalHeight
) )
// return rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom // return rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom
} }
@ -954,7 +967,14 @@ class BesTreeService extends BesService {
for (let result of this.results) { for (let result of this.results) {
for (let m of result.matches) { for (let m of result.matches) {
for (let h of m.highlights) { for (let h of m.highlights) {
if (BesService.isPointInRect(source.clientX, source.clientY, h)) { if (
BesService.isPointInRect(
source.clientX,
source.clientY,
h,
this.canvasPanel
)
) {
this.popupCorrectionPanel(el, m, source) this.popupCorrectionPanel(el, m, source)
return return
} }