wisemapping-frontend/packages/mindplot/src/components/MultilineTextEditor.js

318 lines
9.2 KiB
JavaScript
Raw Normal View History

2021-07-16 16:41:58 +02:00
/*
2021-12-25 23:39:34 +01:00
* Copyright [2021] [wisemapping]
2021-07-16 16:41:58 +02:00
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
2021-12-05 18:25:16 +01:00
import { $defined } from '@wisemapping/core-js';
import $ from 'jquery';
// TODO: use jquery.hotkeys from npm or setup eslint-import-resolver-alias plugin
// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
2021-12-05 18:25:16 +01:00
import initHotKeyPluggin from '@libraries/jquery.hotkeys';
import Events from './Events';
import ActionDispatcher from './ActionDispatcher';
2021-12-05 18:25:16 +01:00
initHotKeyPluggin($);
2021-07-16 16:41:58 +02:00
2021-12-05 00:39:20 +01:00
class MultilineTextEditor extends Events {
constructor() {
super();
2021-10-05 02:05:34 +02:00
this._topic = null;
this._timeoutId = -1;
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
2021-12-05 18:25:16 +01:00
static _buildEditor() {
2021-10-05 02:05:34 +02:00
const result = $('<div></div>')
.attr('id', 'textContainer')
.css({
display: 'none',
zIndex: '8',
overflow: 'hidden',
border: '0 none',
});
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
.css({
border: '1px gray dashed',
background: 'rgba(98, 135, 167, .3)',
outline: '0 none',
resize: 'none',
overflow: 'hidden',
});
result.append(textareaElem);
return result;
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_registerEvents(containerElem) {
const textareaElem = this._getTextareaElem();
const me = this;
let start;
let end;
textareaElem.on('keydown', function keydown(event) {
2021-12-19 18:07:01 +01:00
switch ($.hotkeys.specialKeys[event.keyCode]) {
2021-10-05 02:05:34 +02:00
case 'esc':
me.close(false);
break;
case 'enter':
if (event.metaKey || event.ctrlKey) {
// Add return ...
const text = textareaElem.val();
let cursorPosition = text.length;
if (textareaElem.selectionStart) {
cursorPosition = textareaElem.selectionStart;
2021-07-16 16:41:58 +02:00
}
2021-10-05 02:05:34 +02:00
const head = text.substring(0, cursorPosition);
let tail = '';
if (cursorPosition < text.length) {
tail = text.substring(cursorPosition, text.length);
}
textareaElem.val(`${head}\n${tail}`);
// Position cursor ...
if (textareaElem[0].setSelectionRange) {
textareaElem.focus();
textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
} else if (textareaElem.createTextRange) {
const range = textareaElem.createTextRange();
range.moveStart('character', cursorPosition + 1);
range.select();
}
} else {
me.close(true);
}
break;
2021-12-19 18:07:01 +01:00
case 'tab': {
2021-10-05 02:05:34 +02:00
event.preventDefault();
start = $(this).get(0).selectionStart;
end = $(this).get(0).selectionEnd;
2021-10-05 02:05:34 +02:00
// set textarea value to: text before caret + tab + text after caret
$(this).val(`${$(this).val().substring(0, start)}\t${$(this).val().substring(end)}`);
// put caret at right position again
2021-12-19 18:07:01 +01:00
$(this).get(0).selectionEnd = start + 1;
$(this).get(0).selectionStart = $(this).get(0).selectionEnd;
2021-10-05 02:05:34 +02:00
break;
2021-12-19 18:07:01 +01:00
}
2021-12-15 03:04:47 +01:00
default:
// No actions...
break;
2021-10-05 02:05:34 +02:00
}
event.stopPropagation();
});
textareaElem.on('keypress', (event) => {
event.stopPropagation();
});
textareaElem.on('keyup', (event) => {
const text = me._getTextareaElem().val();
me.fireEvent('input', [event, text]);
me._adjustEditorSize();
});
// If the user clicks on the input, all event must be ignored ...
containerElem.on('click', (event) => {
event.stopPropagation();
});
containerElem.on('dblclick', (event) => {
event.stopPropagation();
});
containerElem.on('mousedown', (event) => {
event.stopPropagation();
});
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_adjustEditorSize() {
if (this.isVisible()) {
const textElem = this._getTextareaElem();
const lines = textElem.val().split('\n');
let maxLineLength = 1;
2021-12-05 18:25:16 +01:00
lines.forEach((line) => {
2021-10-05 02:05:34 +02:00
if (maxLineLength < line.length) maxLineLength = line.length;
});
textElem.attr('cols', maxLineLength);
textElem.attr('rows', lines.length);
this._containerElem.css({
width: `${maxLineLength + 3}em`,
height: textElem.height(),
});
}
2021-12-05 00:39:20 +01:00
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
isVisible() {
2021-12-05 18:25:16 +01:00
return $defined(this._containerElem) && this._containerElem.css('display') === 'block';
2021-12-05 00:39:20 +01:00
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
_updateModel() {
if (this._topic.getText() !== this._getText()) {
2021-10-05 02:05:34 +02:00
const text = this._getText();
const topicId = this._topic.getId();
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text);
}
2021-12-05 00:39:20 +01:00
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
show(topic, text) {
// Close a previous node editor if it's opened ...
if (this._topic) {
this.close(false);
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
this._topic = topic;
if (!this.isVisible()) {
// Create editor ui
2021-12-05 18:25:16 +01:00
const containerElem = MultilineTextEditor._buildEditor();
2021-10-05 02:05:34 +02:00
$('body').append(containerElem);
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
this._containerElem = containerElem;
this._registerEvents(containerElem);
this._showEditor(text);
}
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_showEditor(defaultText) {
const topic = this._topic;
// Hide topic text ...
topic.getTextShape().setVisibility(false);
// Set Editor Style
const nodeText = topic.getTextShape();
const font = nodeText.getFont();
font.size = nodeText.getHtmlFontSize();
font.color = nodeText.getColor();
this._setStyle(font);
const me = this;
2021-12-15 03:04:47 +01:00
2021-10-05 02:05:34 +02:00
// Set editor's initial size
2021-12-15 03:04:47 +01:00
const displayFunc = function displayFunc() {
2021-10-05 02:05:34 +02:00
// Position the editor and set the size...
const textShape = topic.getTextShape();
me._containerElem.css('display', 'block');
// FIXME: Im not sure if this is best way...
const shapePosition = textShape.getNativePosition();
me._containerElem.offset(shapePosition);
// Set editor's initial text ...
const text = $defined(defaultText) ? defaultText : topic.getText();
me._setText(text);
// Set the element focus and select the current text ...
const inputElem = me._getTextareaElem();
me._positionCursor(inputElem, !$defined(defaultText));
};
2021-12-15 03:04:47 +01:00
this._timeoutId = setTimeout(() => displayFunc(), 10);
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_setStyle(fontStyle) {
const inputField = this._getTextareaElem();
// allowed param reassign to avoid risks of existing code relying in this side-effect
/* eslint-disable no-param-reassign */
2021-10-05 02:05:34 +02:00
if (!$defined(fontStyle.font)) {
fontStyle.font = 'Arial';
}
if (!$defined(fontStyle.style)) {
fontStyle.style = 'normal';
}
if (!$defined(fontStyle.weight)) {
fontStyle.weight = 'normal';
}
if (!$defined(fontStyle.size)) {
fontStyle.size = 12;
}
/* eslint-enable no-param-reassign */
2021-10-05 02:05:34 +02:00
const style = {
fontSize: `${fontStyle.size}px`,
fontFamily: fontStyle.font,
fontStyle: fontStyle.style,
fontWeight: fontStyle.weight,
color: fontStyle.color,
};
inputField.css(style);
this._containerElem.css(style);
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_setText(text) {
const textareaElem = this._getTextareaElem();
textareaElem.val(text);
this._adjustEditorSize();
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_getText() {
return this._getTextareaElem().val();
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_getTextareaElem() {
return this._containerElem.find('textarea');
2021-12-05 00:39:20 +01:00
}
2021-10-05 02:05:34 +02:00
_positionCursor(textareaElem, selectText) {
textareaElem.focus();
const lengh = textareaElem.val().length;
if (selectText) {
// Mark text as selected ...
if (textareaElem.createTextRange) {
const rang = textareaElem.createTextRange();
rang.select();
rang.move('character', lengh);
} else {
textareaElem[0].setSelectionRange(0, lengh);
}
2021-12-15 03:28:15 +01:00
} else if (textareaElem.createTextRange) {
const range = textareaElem.createTextRange();
range.move('character', lengh);
2021-10-05 02:05:34 +02:00
} else {
// allowed param reassign to avoid risks of existing code relying in this side-effect
/* eslint-disable no-param-reassign */
2021-12-15 03:28:15 +01:00
textareaElem.selectionStart = lengh;
textareaElem.selectionEnd = lengh;
/* eslint-enable no-param-reassign */
2021-12-15 03:28:15 +01:00
textareaElem.focus();
2021-10-05 02:05:34 +02:00
}
2021-12-05 00:39:20 +01:00
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
close(update) {
if (this.isVisible() && this._topic) {
// Update changes ...
clearTimeout(this._timeoutId);
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
if (!$defined(update) || update) {
this._updateModel();
}
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
// Let make the visible text in the node visible again ...
this._topic.getTextShape().setVisibility(true);
2021-07-16 16:41:58 +02:00
2021-10-05 02:05:34 +02:00
// Remove it form the screen ...
this._containerElem.remove();
this._containerElem = null;
this._timeoutId = -1;
2021-07-16 16:41:58 +02:00
}
2021-10-05 02:05:34 +02:00
this._topic = null;
2021-12-05 00:39:20 +01:00
}
}
2021-07-16 16:41:58 +02:00
export default MultilineTextEditor;