ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made Editor autoposition optional

This commit is contained in:
Rainer Simon 2021-09-05 08:10:27 +02:00
parent 590b430fb3
commit ac8ec7a08e
2 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/editor/Editor.jsx
View File

@ -62,12 +62,6 @@ export default class Editor extends Component {
}
componentDidMount() {
// Defaults to true
const autoPosition =
this.props.autoPosition === undefined ? true : this.props.autoPosition;
// Init observer (triggers setPosition once)
if (autoPosition)
this.removeObserver = this.initResizeObserver();
}
@ -77,10 +71,14 @@ export default class Editor extends Component {
}
initResizeObserver = () => {
// Defaults to true
const autoPosition =
this.props.editorAutoPosition === undefined ? true : this.props.editorAutoPosition;
if (window?.ResizeObserver) {
const resizeObserver = new ResizeObserver(() => {
if (!this.state.dragged)
setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement);
setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement, autoPosition);
});
resizeObserver.observe(this.props.wrapperEl);
@ -88,7 +86,7 @@ export default class Editor extends Component {
} else {
// Fire setPosition manually *only* for devices that don't support ResizeObserver
if (!this.state.dragged)
setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement);
setPosition(this.props.wrapperEl, this.element.current, this.props.selectedElement, autoPosition);
}
}

4
src/editor/setPosition.js
View File

@ -1,5 +1,5 @@
/** Sets the editor position and determines a proper orientation **/
const setPosition = (wrapperEl, editorEl, selectedEl) => {
const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
// Container element bounds
const containerBounds = wrapperEl.getBoundingClientRect();
@ -14,6 +14,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
editorEl.style.top = `${top + height - containerBounds.top}px`;
editorEl.style.left = `${left - containerBounds.left}px`;
if (autoPosition) {
const defaultOrientation = editorEl.children[1].getBoundingClientRect();
// Test 1: does right edge extend beyond the width of the page?
@ -54,5 +55,6 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
if (currentOrientation.left < 0)
editorEl.style.left = `${-containerBounds.left}px`;
}
}
export default setPosition;