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

Cleanup + editor positioning fix

This commit is contained in:
Rainer Simon 2020-04-08 09:10:37 +02:00
parent dfa396031e
commit 580ece0352
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/TextAnnotator.jsx
View File

@ -182,7 +182,7 @@ export default class TextAnnotator extends Component {
<Editor <Editor
readOnly={this.props.readOnly} readOnly={this.props.readOnly}
bounds={this.state.selectionBounds} bounds={this.state.selectionBounds}
containerEl={this.props.containerEl} wrapperEl={this.props.wrapperEl}
annotation={this.state.selectedAnnotation} annotation={this.state.selectedAnnotation}
onAnnotationCreated={this.onCreateOrUpdateAnnotation('onAnnotationCreated')} onAnnotationCreated={this.onCreateOrUpdateAnnotation('onAnnotationCreated')}
onAnnotationUpdated={this.onCreateOrUpdateAnnotation('onAnnotationUpdated')} onAnnotationUpdated={this.onCreateOrUpdateAnnotation('onAnnotationUpdated')}

2
src/editor/Editor.jsx
View File

@ -21,7 +21,7 @@ const Editor = props => {
setCurrentAnnotation(props.annotation); setCurrentAnnotation(props.annotation);
if (element.current) if (element.current)
setPosition(props.containerEl, element.current, props.bounds); setPosition(props.wrapperEl, element.current, props.bounds);
}, [ props.annotation ]); }, [ props.annotation ]);
const onAppendBody = body => setCurrentAnnotation( const onAppendBody = body => setCurrentAnnotation(

8
src/editor/setPosition.js
View File

@ -1,7 +1,7 @@
/** Sets the editor position and determines a proper orientation **/ /** Sets the editor position and determines a proper orientation **/
const setPosition = (containerEl, editorEl, annotationBounds) => { const setPosition = (wrapperEl, editorEl, annotationBounds) => {
// Container element offset // Container element offset
const { offsetLeft, offsetTop } = containerEl; const { offsetLeft, offsetTop } = wrapperEl;
const { scrollX, scrollY } = window; const { scrollX, scrollY } = window;
// Re-set orientation class // Re-set orientation class
@ -20,10 +20,10 @@ const setPosition = (containerEl, editorEl, annotationBounds) => {
editorEl.style.left = `${right - defaultOrientation.width + scrollX - offsetLeft}px`; editorEl.style.left = `${right - defaultOrientation.width + scrollX - offsetLeft}px`;
} }
if (defaultOrientation.bottom > window.innerHeight) { if (defaultOrientation.bottom > window.innerHeight - scrollY) {
// Flip vertically // Flip vertically
const annotationTop = top + scrollY; // Annotation top relative to parents const annotationTop = top + scrollY; // Annotation top relative to parents
const containerBounds = containerEl.getBoundingClientRect(); const containerBounds = wrapperEl.getBoundingClientRect();
const containerHeight = containerBounds.height + containerBounds.top + scrollY; const containerHeight = containerBounds.height + containerBounds.top + scrollY;
editorEl.classList.add('align-bottom'); editorEl.classList.add('align-bottom');