Improve multi-text editor code.

packages/mindplot/src/components/MultilineTextEditor.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 /*
  *    Copyright [2021] [wisemapping]
  *
@@ -18,19 +19,23 @@
 import { $defined } from '@wisemapping/core-js';
 import $ from 'jquery';
 
-import Events from './Events';
 import ActionDispatcher from './ActionDispatcher';
+import Events from './Events';
 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();
-    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() {
@@ -53,9 +58,9 @@ class MultilineTextEditor extends Events {
     return result;
   }
 
-  private _registerEvents(containerElem: JQuery) {
+  private _registerEvents(containerElem: JQuery): void {
     const textareaElem = this._getTextareaElem();
-    textareaElem?.on('keydown', (event) => {
+    textareaElem.on('keydown', (event) => {
       switch (event.code) {
         case 'Escape':
           this.close(false);
@@ -86,12 +91,12 @@ class MultilineTextEditor extends Events {
       event.stopPropagation();
     });
 
-    textareaElem?.on('keypress', (event) => {
+    textareaElem.on('keypress', (event) => {
       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._adjustEditorSize();
     });
@@ -109,7 +114,6 @@ class MultilineTextEditor extends Events {
   }
 
   private _adjustEditorSize() {
-    if (this.isVisible()) {
     const textElem = this._getTextareaElem();
 
     const lines = this._getTextAreaText().split('\n');
@@ -118,19 +122,14 @@ class MultilineTextEditor extends Events {
       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`,
       height: textElem?.height() || 0,
     });
   }
-  }
-
-  isVisible(): boolean {
-    return this._containerElem !== null && this._containerElem.css('display') === 'block';
-  }
 
   private _updateModel() {
     if (this._topic && this._topic.getText() !== this._getTextAreaText()) {
@@ -148,27 +147,9 @@ 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;
-    if (topic && this._containerElem) {
+
     // Hide topic text ...
     topic.getTextShape().setVisibility(false);
 
@@ -192,7 +173,7 @@ class MultilineTextEditor extends Events {
     this._containerElem.offset({ top, left });
 
     // Set editor's initial text ...
-      const text = $defined(defaultText) ? defaultText : topic.getText();
+    const text = topic.getText() || defaultText;
     this._setText(text);
 
     // Set the element focus and select the current text ...
@@ -201,9 +182,14 @@ class MultilineTextEditor extends Events {
       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();
     // allowed param reassign to avoid risks of existing code relying in this side-effect
     /* eslint-disable no-param-reassign */
@@ -227,22 +213,22 @@ class MultilineTextEditor extends Events {
       fontWeight: fontStyle.weight,
       color: fontStyle.color,
     };
-    inputField?.css(style);
+    inputField.css(style);
-    this._containerElem?.css(style);
+    this._containerElem.css(style);
   }
 
   private _setText(text: string): void {
     const textareaElem = this._getTextareaElem();
-    textareaElem?.val(text);
+    textareaElem.val(text);
     this._adjustEditorSize();
   }
 
   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) {
@@ -257,20 +243,47 @@ class MultilineTextEditor extends Events {
   }
 
   close(update: boolean): void {
-    if (this.isVisible()) {
     if (update) {
       this._updateModel();
     }
-
     // Remove it form the screen ...
-      this._containerElem?.remove();
+    this._containerElem.remove();
-      this._containerElem = null;
+
+    // Restore topoc share visibility ...
+    this._topic.getTextShape().setVisibility(true);
+  }
+}
+
+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;
   }
 
-    if (this._topic) {
+  isActive(): boolean {
-      this._topic.getTextShape().setVisibility(true);
+    return this.component !== null;
-      this._topic = 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;

packages/mindplot/src/components/TopicEventDispatcher.ts

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