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

Cosmetic fixes to auto-position + dragging behavior

This commit is contained in:
Rainer Simon 2021-10-19 09:05:29 +02:00
parent d098e2982e
commit 4e2b681bed
3 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/Editor.jsx
View File

@ -316,6 +316,7 @@ export default class Editor extends Component {
<Draggable <Draggable
disabled={!this.props.detachable} disabled={!this.props.detachable}
handle=".r6o-draggable" handle=".r6o-draggable"
cancel=".r6o-btn, .r6o-btn *"
onDrag={() => this.setState({ dragged: true })}> onDrag={() => this.setState({ dragged: true })}>
<div ref={this.element} className={this.state.dragged ? 'r6o-editor dragged' : 'r6o-editor'}> <div ref={this.element} className={this.state.dragged ? 'r6o-editor dragged' : 'r6o-editor'}>

6
src/editor/setPosition.js
View File

@ -1,3 +1,5 @@
const MARGIN_VERTICAL = 14;
/** Sets the editor position and determines a proper orientation **/ /** Sets the editor position and determines a proper orientation **/
const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => { const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
// Container element bounds // Container element bounds
@ -8,7 +10,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
// Default orientation (upwards arrow, at bottom-left of shape) // Default orientation (upwards arrow, at bottom-left of shape)
const { left, top, right, bottom } = selectedEl.getBoundingClientRect(); const { left, top, right, bottom } = selectedEl.getBoundingClientRect();
editorEl.style.top = `${bottom - containerBounds.top}px`; editorEl.style.top = `${bottom - containerBounds.top + MARGIN_VERTICAL}px`;
editorEl.style.left = `${left - containerBounds.left}px`; editorEl.style.left = `${left - containerBounds.left}px`;
if (autoPosition) { if (autoPosition) {
@ -29,7 +31,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
editorEl.classList.add('r6o-arrow-bottom'); editorEl.classList.add('r6o-arrow-bottom');
const editorHeight = editorEl.children[1].getBoundingClientRect().height; const editorHeight = editorEl.children[1].getBoundingClientRect().height;
editorEl.style.top = `${top - containerBounds.top - editorHeight}px`; editorEl.style.top = `${top - containerBounds.top - editorHeight - MARGIN_VERTICAL}px`;
} }
// Get bounding box in current orientation for next tests // Get bounding box in current orientation for next tests

6
themes/default/editor/_editor.scss
View File

@ -6,7 +6,6 @@
.r6o-editor { .r6o-editor {
position:absolute; position:absolute;
z-index:99999; z-index:99999;
margin-top:18px;
margin-left:-14px; margin-left:-14px;
width:400px; width:400px;
color:$standard-type; color:$standard-type;
@ -107,7 +106,6 @@
} }
.r6o-editor.r6o-arrow-bottom { .r6o-editor.r6o-arrow-bottom {
margin-top:-14px;
.r6o-arrow { .r6o-arrow {
display:block; display:block;
@ -127,10 +125,6 @@
display:none; display:none;
} }
.r6o-editor.r6o-arrow-bottom.pushed.down {
margin-top:4px;
}
.r6o-editor .r6o-draggable { .r6o-editor .r6o-draggable {
cursor:move; cursor:move;
} }