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

16
src/editor/Editor.jsx
View File

@ -62,13 +62,7 @@ export default class Editor extends Component {
} }
componentDidMount() { componentDidMount() {
// Defaults to true this.removeObserver = this.initResizeObserver();
const autoPosition =
this.props.autoPosition === undefined ? true : this.props.autoPosition;
// Init observer (triggers setPosition once)
if (autoPosition)
this.removeObserver = this.initResizeObserver();
} }
componentWillUnmount() { componentWillUnmount() {
@ -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);
} }
} }

78
src/editor/setPosition.js
View File

@ -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,45 +14,47 @@ 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`;
const defaultOrientation = editorEl.children[1].getBoundingClientRect(); if (autoPosition) {
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?
// If so, flip horizontally // If so, flip horizontally
if (defaultOrientation.right > window.innerWidth) { if (defaultOrientation.right > window.innerWidth) {
editorEl.classList.add('align-right'); editorEl.classList.add('align-right');
editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`; editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`;
}
// Test 2: does the bottom edge extend beyond the height of the page?
// If so, flip vertically
if (defaultOrientation.bottom > window.innerHeight) {
editorEl.classList.add('align-bottom');
const editorHeight = editorEl.children[1].getBoundingClientRect().height;
editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
}
// Get bounding box in current orientation for next tests
const currentOrientation = editorEl.children[1].getBoundingClientRect();
// Test 3: does the top (still?) extend beyond top of the page?
// If so, push it down
if (currentOrientation.top < 0) {
editorEl.classList.add('pushed-down');
editorEl.style.top = `${-containerBounds.top}px`;
const shapeBottom = bottom - containerBounds.top;
const editorBottom = currentOrientation.height - containerBounds.top;
if (editorBottom > shapeBottom)
editorEl.classList.remove('align-bottom');
}
// Test 4: does the left edge extend beyond the start of the page?
// If so, push inward
if (currentOrientation.left < 0)
editorEl.style.left = `${-containerBounds.left}px`;
} }
// Test 2: does the bottom edge extend beyond the height of the page?
// If so, flip vertically
if (defaultOrientation.bottom > window.innerHeight) {
editorEl.classList.add('align-bottom');
const editorHeight = editorEl.children[1].getBoundingClientRect().height;
editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
}
// Get bounding box in current orientation for next tests
const currentOrientation = editorEl.children[1].getBoundingClientRect();
// Test 3: does the top (still?) extend beyond top of the page?
// If so, push it down
if (currentOrientation.top < 0) {
editorEl.classList.add('pushed-down');
editorEl.style.top = `${-containerBounds.top}px`;
const shapeBottom = bottom - containerBounds.top;
const editorBottom = currentOrientation.height - containerBounds.top;
if (editorBottom > shapeBottom)
editorEl.classList.remove('align-bottom');
}
// Test 4: does the left edge extend beyond the start of the page?
// If so, push inward
if (currentOrientation.left < 0)
editorEl.style.left = `${-containerBounds.left}px`;
} }
export default setPosition; export default setPosition;