Implement position observer to monitor if hostElement moves it's position
This commit is contained in:
parent
7dc00af858
commit
df4d293ffb
24
service.js
24
service.js
@ -66,6 +66,9 @@ class BesService {
|
|||||||
this.resizeObserver = new ResizeObserver(this.onResize.bind(this))
|
this.resizeObserver = new ResizeObserver(this.onResize.bind(this))
|
||||||
this.resizeObserver.observe(this.hostElement)
|
this.resizeObserver.observe(this.hostElement)
|
||||||
|
|
||||||
|
this.initialPosRect = this.hostElement.getBoundingClientRect()
|
||||||
|
this.initializePositionObserver()
|
||||||
|
|
||||||
besServices.push(this)
|
besServices.push(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -275,7 +278,6 @@ class BesService {
|
|||||||
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
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Monitor if hostElement moves in DOM and reposition correction panel and status icon.
|
|
||||||
/**
|
/**
|
||||||
* Creates auxiliary DOM elements for text adornments.
|
* Creates auxiliary DOM elements for text adornments.
|
||||||
*/
|
*/
|
||||||
@ -464,6 +466,26 @@ class BesService {
|
|||||||
this.statusIcon.classList.add(status)
|
this.statusIcon.classList.add(status)
|
||||||
this.statusDiv.title = title
|
this.statusDiv.title = title
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes position observer. This is necessary to monitor host element movements in DOM.
|
||||||
|
*/
|
||||||
|
initializePositionObserver() {
|
||||||
|
const positionObserver = new MutationObserver(() => {
|
||||||
|
const currentPosRect = this.hostElement.getBoundingClientRect()
|
||||||
|
if (
|
||||||
|
currentPosRect.top !== this.initialPosRect.top ||
|
||||||
|
currentPosRect.left !== this.initialPosRect.left
|
||||||
|
) {
|
||||||
|
this.onReposition()
|
||||||
|
this.initialPosRect = currentPosRect
|
||||||
|
}
|
||||||
|
})
|
||||||
|
positionObserver.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**************************************************************************************************
|
/**************************************************************************************************
|
||||||
|
Loading…
x
Reference in New Issue
Block a user