Made Editor autoposition optional
This commit is contained in:
parent
590b430fb3
commit
ac8ec7a08e
|
@ -62,12 +62,6 @@ export default class Editor extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
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();
|
this.removeObserver = this.initResizeObserver();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,10 +71,14 @@ export default class Editor extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
initResizeObserver = () => {
|
initResizeObserver = () => {
|
||||||
|
// Defaults to true
|
||||||
|
const autoPosition =
|
||||||
|
this.props.editorAutoPosition === undefined ? true : this.props.editorAutoPosition;
|
||||||
|
|
||||||
if (window?.ResizeObserver) {
|
if (window?.ResizeObserver) {
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
if (!this.state.dragged)
|
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);
|
resizeObserver.observe(this.props.wrapperEl);
|
||||||
|
@ -88,7 +86,7 @@ export default class Editor extends Component {
|
||||||
} else {
|
} else {
|
||||||
// Fire setPosition manually *only* for devices that don't support ResizeObserver
|
// Fire setPosition manually *only* for devices that don't support ResizeObserver
|
||||||
if (!this.state.dragged)
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/** Sets the editor position and determines a proper orientation **/
|
/** Sets the editor position and determines a proper orientation **/
|
||||||
const setPosition = (wrapperEl, editorEl, selectedEl) => {
|
const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
|
||||||
// Container element bounds
|
// Container element bounds
|
||||||
const containerBounds = wrapperEl.getBoundingClientRect();
|
const containerBounds = wrapperEl.getBoundingClientRect();
|
||||||
|
|
||||||
|
@ -14,6 +14,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
|
||||||
editorEl.style.top = `${top + height - containerBounds.top}px`;
|
editorEl.style.top = `${top + height - containerBounds.top}px`;
|
||||||
editorEl.style.left = `${left - containerBounds.left}px`;
|
editorEl.style.left = `${left - containerBounds.left}px`;
|
||||||
|
|
||||||
|
if (autoPosition) {
|
||||||
const defaultOrientation = editorEl.children[1].getBoundingClientRect();
|
const defaultOrientation = editorEl.children[1].getBoundingClientRect();
|
||||||
|
|
||||||
// Test 1: does right edge extend beyond the width of the page?
|
// 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)
|
if (currentOrientation.left < 0)
|
||||||
editorEl.style.left = `${-containerBounds.left}px`;
|
editorEl.style.left = `${-containerBounds.left}px`;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default setPosition;
|
export default setPosition;
|
||||||
|
|
Loading…
Reference in New Issue