vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adjust text editor positioning

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-22 21:25:09 -08:00
parent 2eeeeb4498
commit 59de3c7cf5
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/mindplot/src/components/MultilineTextEditor.ts
View File

@ -41,17 +41,17 @@ class MultilineTextEditor extends Events {
.css({ .css({
display: 'none', display: 'none',
zIndex: '8', zIndex: '8',
overflow: 'hidden',
border: '0 none', border: '0 none',
}); });
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>') const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
.css({ .css({
border: '1px gray dashed', border: '1px gray dashed',
background: 'rgba(98, 135, 167, .3)', background: 'rgba(98, 135, 167, .4)',
outline: '0 none', outline: '0 none',
resize: 'none', resize: 'none',
overflow: 'hidden', overflow: 'hidden',
padding: '2px 0px 2px 4px',
}); });
result.append(textareaElem); result.append(textareaElem);
@ -120,17 +120,15 @@ class MultilineTextEditor extends Events {
const lines = this._getTextAreaText().split('\n'); const lines = this._getTextAreaText().split('\n');
let maxLineLength = 1; let maxLineLength = 1;
lines.forEach((line) => { lines.forEach((line: string) => {
if (maxLineLength < line.length) { maxLineLength = Math.max(line.length, maxLineLength);
maxLineLength = line.length;
}
}); });
textElem.attr('cols', maxLineLength); textElem.attr('cols', maxLineLength);
textElem.attr('rows', lines.length); textElem.attr('rows', lines.length);
this._containerElem.css({ this._containerElem.css({
width: `${maxLineLength + 3}em`, width: `${maxLineLength + 2}em`,
height: textElem.height(), height: textElem.height(),
}); });
} }
@ -187,8 +185,11 @@ class MultilineTextEditor extends Events {
this._containerElem.css('display', 'block'); this._containerElem.css('display', 'block');
const shapePosition = textShape.getNativePosition(); let { top, left } = textShape.getNativePosition();
this._containerElem.offset(shapePosition); // Adjust padding top position ...
top -= 4;
left -= 4;
this._containerElem.offset({ top, left });
// Set editor's initial text ... // Set editor's initial text ...
const text = $defined(defaultText) ? defaultText : topic.getText(); const text = $defined(defaultText) ? defaultText : topic.getText();