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

Improve multi-text editor code.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-11-24 09:28:59 -08:00
parent 6304d24b2c
commit a82771ec40
2 changed files with 115 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
/* eslint-disable max-classes-per-file */
/* /*
* Copyright [2021] [wisemapping] * Copyright [2021] [wisemapping]
* *
@ -18,19 +19,23 @@
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import $ from 'jquery'; import $ from 'jquery';
import Events from './Events';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
import Events from './Events';
import Topic from './Topic'; import Topic from './Topic';
class MultilineTextEditor extends Events { class EditorComponent extends Events {
private _topic: Topic | null; private _topic: Topic;
private _containerElem: JQuery<HTMLElement> | null; private _containerElem: JQuery<HTMLElement>;
constructor() { constructor(topic: Topic) {
super(); super();
this._topic = null; this._topic = topic;
this._containerElem = null;
// Create editor ui
this._containerElem = EditorComponent._buildEditor();
$('body').append(this._containerElem);
this._registerEvents(this._containerElem);
} }
private static _buildEditor() { private static _buildEditor() {
@ -53,9 +58,9 @@ class MultilineTextEditor extends Events {
return result; return result;
} }
private _registerEvents(containerElem: JQuery) { private _registerEvents(containerElem: JQuery): void {
const textareaElem = this._getTextareaElem(); const textareaElem = this._getTextareaElem();
textareaElem?.on('keydown', (event) => { textareaElem.on('keydown', (event) => {
switch (event.code) { switch (event.code) {
case 'Escape': case 'Escape':
this.close(false); this.close(false);
@ -86,12 +91,12 @@ class MultilineTextEditor extends Events {
event.stopPropagation(); event.stopPropagation();
}); });
textareaElem?.on('keypress', (event) => { textareaElem.on('keypress', (event) => {
event.stopPropagation(); event.stopPropagation();
}); });
textareaElem?.on('keyup', (event) => { textareaElem.on('keyup', (event) => {
const text = this._getTextareaElem()?.val(); const text = this._getTextareaElem().val();
this.fireEvent('input', [event, text]); this.fireEvent('input', [event, text]);
this._adjustEditorSize(); this._adjustEditorSize();
}); });
@ -109,27 +114,21 @@ class MultilineTextEditor extends Events {
} }
private _adjustEditorSize() { private _adjustEditorSize() {
if (this.isVisible()) { const textElem = this._getTextareaElem();
const textElem = this._getTextareaElem();
const lines = this._getTextAreaText().split('\n'); const lines = this._getTextAreaText().split('\n');
let maxLineLength = 1; let maxLineLength = 1;
lines.forEach((line: string) => { lines.forEach((line: string) => {
maxLineLength = Math.max(line.length, maxLineLength); maxLineLength = Math.max(line.length, maxLineLength);
}); });
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 + 2}em`, width: `${maxLineLength + 2}em`,
height: textElem?.height() || 0, height: textElem?.height() || 0,
}); });
}
}
isVisible(): boolean {
return this._containerElem !== null && this._containerElem.css('display') === 'block';
} }
private _updateModel() { private _updateModel() {
@ -148,62 +147,49 @@ class MultilineTextEditor extends Events {
} }
} }
show(topic: Topic, text: string): void { show(defaultText: string) {
// Close a previous node editor if it's opened ...
if (this._topic) {
this.close(false);
}
this._topic = topic;
if (!this.isVisible()) {
// Create editor ui
const containerElem = MultilineTextEditor._buildEditor();
$('body').append(containerElem);
this._containerElem = containerElem;
this._registerEvents(containerElem);
this._showEditor(text);
}
}
private _showEditor(defaultText: string) {
const topic = this._topic; const topic = this._topic;
if (topic && this._containerElem) {
// Hide topic text ...
topic.getTextShape().setVisibility(false);
// Set Editor Style // Hide topic text ...
const nodeText = topic.getTextShape(); topic.getTextShape().setVisibility(false);
const fontStyle = nodeText.getFontStyle();
fontStyle.size = nodeText.getHtmlFontSize();
fontStyle.color = nodeText.getColor();
this._setStyle(fontStyle);
// Set editor's initial size // Set Editor Style
// Position the editor and set the size... const nodeText = topic.getTextShape();
const textShape = topic.getTextShape(); const fontStyle = nodeText.getFontStyle();
fontStyle.size = nodeText.getHtmlFontSize();
fontStyle.color = nodeText.getColor();
this._setStyle(fontStyle);
this._containerElem.css('display', 'block'); // Set editor's initial size
// Position the editor and set the size...
const textShape = topic.getTextShape();
let { top, left } = textShape.getNativePosition(); this._containerElem.css('display', 'block');
// Adjust padding top position ...
top -= 4;
left -= 4;
this._containerElem.offset({ top, left });
// Set editor's initial text ... let { top, left } = textShape.getNativePosition();
const text = $defined(defaultText) ? defaultText : topic.getText(); // Adjust padding top position ...
this._setText(text); top -= 4;
left -= 4;
this._containerElem.offset({ top, left });
// Set the element focus and select the current text ... // Set editor's initial text ...
const inputElem = this._getTextareaElem(); const text = topic.getText() || defaultText;
if (inputElem) { this._setText(text);
this._positionCursor(inputElem, !$defined(defaultText));
} // Set the element focus and select the current text ...
const inputElem = this._getTextareaElem();
if (inputElem) {
this._positionCursor(inputElem, !$defined(defaultText));
} }
} }
private _setStyle(fontStyle) { private _setStyle(fontStyle: {
fontFamily: string;
style: string;
weight: string;
size: number;
color: string;
}) {
const inputField = this._getTextareaElem(); const inputField = this._getTextareaElem();
// allowed param reassign to avoid risks of existing code relying in this side-effect // allowed param reassign to avoid risks of existing code relying in this side-effect
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
@ -227,22 +213,22 @@ class MultilineTextEditor extends Events {
fontWeight: fontStyle.weight, fontWeight: fontStyle.weight,
color: fontStyle.color, color: fontStyle.color,
}; };
inputField?.css(style); inputField.css(style);
this._containerElem?.css(style); this._containerElem.css(style);
} }
private _setText(text: string): void { private _setText(text: string): void {
const textareaElem = this._getTextareaElem(); const textareaElem = this._getTextareaElem();
textareaElem?.val(text); textareaElem.val(text);
this._adjustEditorSize(); this._adjustEditorSize();
} }
private _getTextAreaText(): string { private _getTextAreaText(): string {
return this._getTextareaElem()?.val() as string; return this._getTextareaElem().val() as string;
} }
private _getTextareaElem(): JQuery<HTMLTextAreaElement> | null { private _getTextareaElem(): JQuery<HTMLTextAreaElement> {
return this._containerElem ? this._containerElem.find('textarea') : null; return this._containerElem.find('textarea');
} }
private _positionCursor(textareaElem: JQuery<HTMLTextAreaElement>, selectText: boolean) { private _positionCursor(textareaElem: JQuery<HTMLTextAreaElement>, selectText: boolean) {
@ -257,20 +243,47 @@ class MultilineTextEditor extends Events {
} }
close(update: boolean): void { close(update: boolean): void {
if (this.isVisible()) { if (update) {
if (update) { this._updateModel();
this._updateModel();
}
// Remove it form the screen ...
this._containerElem?.remove();
this._containerElem = null;
} }
// Remove it form the screen ...
this._containerElem.remove();
if (this._topic) { // Restore topoc share visibility ...
this._topic.getTextShape().setVisibility(true); this._topic.getTextShape().setVisibility(true);
this._topic = null; }
}
class MultitTextEditor {
// eslint-disable-next-line no-use-before-define
private static instance: MultitTextEditor = new MultitTextEditor();
private component: EditorComponent | null;
static getInstance(): MultitTextEditor {
return MultitTextEditor.instance;
}
isActive(): boolean {
return this.component !== null;
}
show(topic: Topic, defaultText: string): void {
// Is it active ?
if (this.component) {
console.error('Editor was already displayed. Please, clouse it');
this.component.close(false);
}
// Create a new instance
this.component = new EditorComponent(topic);
this.component.show(defaultText);
}
close(update: boolean): void {
if (this.component) {
this.component.close(update);
this.component = null;
} }
} }
} }
export default MultilineTextEditor; export default MultitTextEditor;

22
packages/mindplot/src/components/TopicEventDispatcher.ts
View File

@ -17,9 +17,9 @@
*/ */
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import Events from './Events'; import Events from './Events';
import MultilineTextEditor from './MultilineTextEditor';
import { TopicShape } from './model/INodeModel'; import { TopicShape } from './model/INodeModel';
import Topic from './Topic'; import Topic from './Topic';
import MultitTextEditor from './MultilineTextEditor';
const TopicEvent = { const TopicEvent = {
EDIT: 'editnode', EDIT: 'editnode',
@ -29,24 +29,18 @@ const TopicEvent = {
class TopicEventDispatcher extends Events { class TopicEventDispatcher extends Events {
private _readOnly: boolean; private _readOnly: boolean;
private _activeEditor: MultilineTextEditor;
private _multilineEditor: MultilineTextEditor;
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
static _instance: TopicEventDispatcher; static _instance: TopicEventDispatcher;
constructor(readOnly: boolean) { constructor(readOnly: boolean) {
super(); super();
this._readOnly = readOnly; this._readOnly = readOnly;
this._activeEditor = null;
this._multilineEditor = new MultilineTextEditor();
} }
close(update: boolean): void { close(update: boolean): void {
if (this.isVisible()) { const editor = MultitTextEditor.getInstance();
this._activeEditor.close(update); if (editor.isActive()) {
this._activeEditor = null; editor.close(update);
} }
} }
@ -58,7 +52,8 @@ class TopicEventDispatcher extends Events {
$assert(eventType, 'eventType can not be null'); $assert(eventType, 'eventType can not be null');
// Close all previous open editor .... // Close all previous open editor ....
if (this.isVisible()) { const editor = MultitTextEditor.getInstance();
if (editor.isActive()) {
this.close(false); this.close(false);
} }
@ -69,15 +64,14 @@ class TopicEventDispatcher extends Events {
!this._readOnly && !this._readOnly &&
eventType === TopicEvent.EDIT eventType === TopicEvent.EDIT
) { ) {
this._multilineEditor.show(topic, options ? options.text : null); editor.show(topic, options ? options.text : '');
this._activeEditor = this._multilineEditor;
} else { } else {
this.fireEvent(eventType, { model, readOnly: this._readOnly }); this.fireEvent(eventType, { model, readOnly: this._readOnly });
} }
} }
isVisible(): boolean { isVisible(): boolean {
return this._activeEditor != null && this._activeEditor.isVisible(); return MultitTextEditor.getInstance().isActive();
} }
static configure(readOnly: boolean): void { static configure(readOnly: boolean): void {