mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Add resize of node on edition
This commit is contained in:
parent
83ca1da44c
commit
4397427d80
@ -49,6 +49,7 @@ class Events {
|
|||||||
|
|
||||||
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
|
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
|
||||||
events.forEach((fn) => {
|
events.forEach((fn) => {
|
||||||
|
// Execute our of the main thread...
|
||||||
fn.apply(this, args);
|
fn.apply(this, args);
|
||||||
});
|
});
|
||||||
return this;
|
return this;
|
||||||
|
@ -23,11 +23,14 @@ import ActionDispatcher from './ActionDispatcher';
|
|||||||
import Events from './Events';
|
import Events from './Events';
|
||||||
import { FontStyleType } from './FontStyleType';
|
import { FontStyleType } from './FontStyleType';
|
||||||
import { FontWeightType } from './FontWeightType';
|
import { FontWeightType } from './FontWeightType';
|
||||||
|
import EventBus from './layout/EventBus';
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
|
|
||||||
class EditorComponent extends Events {
|
class EditorComponent extends Events {
|
||||||
private _topic: Topic;
|
private _topic: Topic;
|
||||||
|
|
||||||
|
private _oldText: string | undefined;
|
||||||
|
|
||||||
private _containerElem: JQuery<HTMLElement>;
|
private _containerElem: JQuery<HTMLElement>;
|
||||||
|
|
||||||
constructor(topic: Topic) {
|
constructor(topic: Topic) {
|
||||||
@ -38,6 +41,7 @@ class EditorComponent extends Events {
|
|||||||
this._containerElem = EditorComponent.buildEditor();
|
this._containerElem = EditorComponent.buildEditor();
|
||||||
$('body').append(this._containerElem);
|
$('body').append(this._containerElem);
|
||||||
this.registerEvents(this._containerElem);
|
this.registerEvents(this._containerElem);
|
||||||
|
this._oldText = topic.getText();
|
||||||
}
|
}
|
||||||
|
|
||||||
private static buildEditor(): JQuery<HTMLElement> {
|
private static buildEditor(): JQuery<HTMLElement> {
|
||||||
@ -48,12 +52,12 @@ class EditorComponent extends Events {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>').css({
|
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>').css({
|
||||||
border: '1px gray dashed',
|
border: '0px',
|
||||||
background: 'rgba(98, 135, 167, .4)',
|
background: 'rgba(0, 0, 0, 0)',
|
||||||
outline: '0 none',
|
outline: '0 none',
|
||||||
resize: 'none',
|
resize: 'none',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
padding: '2px 0px 2px 4px',
|
padding: '0px 0px 0px 0px',
|
||||||
});
|
});
|
||||||
|
|
||||||
result.append(textareaElem);
|
result.append(textareaElem);
|
||||||
@ -65,6 +69,9 @@ class EditorComponent extends Events {
|
|||||||
textareaElem.on('keydown', (event) => {
|
textareaElem.on('keydown', (event) => {
|
||||||
switch (event.code) {
|
switch (event.code) {
|
||||||
case 'Escape':
|
case 'Escape':
|
||||||
|
// Revert to previous text ...
|
||||||
|
this._topic.setText(this._oldText);
|
||||||
|
this.resize();
|
||||||
this.close(false);
|
this.close(false);
|
||||||
break;
|
break;
|
||||||
case 'Enter': {
|
case 'Enter': {
|
||||||
@ -99,8 +106,11 @@ class EditorComponent extends Events {
|
|||||||
|
|
||||||
textareaElem.on('keyup', (event) => {
|
textareaElem.on('keyup', (event) => {
|
||||||
const text = this.getTextareaElem().val();
|
const text = this.getTextareaElem().val();
|
||||||
|
|
||||||
|
this._topic.setText(text?.toString());
|
||||||
|
this.resize();
|
||||||
|
|
||||||
this.fireEvent('input', [event, text]);
|
this.fireEvent('input', [event, text]);
|
||||||
this.adjustEditorSize();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// If the user clicks on the input, all event must be ignored ...
|
// If the user clicks on the input, all event must be ignored ...
|
||||||
@ -115,10 +125,18 @@ class EditorComponent extends Events {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private adjustEditorSize() {
|
private resize() {
|
||||||
const textElem = this.getTextareaElem();
|
// Force relayout ...
|
||||||
|
EventBus.instance.fireEvent('forceLayout');
|
||||||
|
|
||||||
|
// Adjust position ...
|
||||||
|
const textShape = this._topic.getOrBuildTextShape();
|
||||||
|
const { top, left } = textShape.getNativePosition();
|
||||||
|
this._containerElem.offset({ top, left });
|
||||||
|
|
||||||
|
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);
|
||||||
@ -134,7 +152,6 @@ class EditorComponent extends Events {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private updateModel() {
|
private updateModel() {
|
||||||
if (this._topic && this._topic.getText() !== this.getTextAreaText()) {
|
|
||||||
const text = this.getTextAreaText();
|
const text = this.getTextAreaText();
|
||||||
const topicId = this._topic.getId();
|
const topicId = this._topic.getId();
|
||||||
|
|
||||||
@ -144,10 +161,10 @@ class EditorComponent extends Events {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Hack: For some reasom, editor seems to end up connected to a deleted node.
|
// Hack: For some reasom, editor seems to end up connected to a deleted node.
|
||||||
// More research required.
|
// More research required.
|
||||||
|
console.error(e);
|
||||||
console.error(`Text could not be update -> ${JSON.stringify(e)}`);
|
console.error(`Text could not be update -> ${JSON.stringify(e)}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
show(textOverwrite?: string): void {
|
show(textOverwrite?: string): void {
|
||||||
const topic = this._topic;
|
const topic = this._topic;
|
||||||
@ -164,15 +181,8 @@ class EditorComponent extends Events {
|
|||||||
|
|
||||||
// Set editor's initial size
|
// Set editor's initial size
|
||||||
// Position the editor and set the size...
|
// Position the editor and set the size...
|
||||||
const textShape = topic.getOrBuildTextShape();
|
|
||||||
this._containerElem.css('display', 'block');
|
this._containerElem.css('display', 'block');
|
||||||
|
|
||||||
let { top, left } = textShape.getNativePosition();
|
|
||||||
// Adjust padding top position ...
|
|
||||||
top -= 4;
|
|
||||||
left -= 4;
|
|
||||||
this._containerElem.offset({ top, left });
|
|
||||||
|
|
||||||
// Set editor's initial text. If the text has not been specifed, it will be empty
|
// Set editor's initial text. If the text has not been specifed, it will be empty
|
||||||
const modelText = topic.getModel().getText();
|
const modelText = topic.getModel().getText();
|
||||||
const text = textOverwrite || modelText || '';
|
const text = textOverwrite || modelText || '';
|
||||||
@ -184,6 +194,8 @@ class EditorComponent extends Events {
|
|||||||
this.positionCursor(textAreaElem, textOverwrite === undefined);
|
this.positionCursor(textAreaElem, textOverwrite === undefined);
|
||||||
}
|
}
|
||||||
textAreaElem.trigger('focus');
|
textAreaElem.trigger('focus');
|
||||||
|
|
||||||
|
this.resize();
|
||||||
}
|
}
|
||||||
|
|
||||||
private setStyle(fontStyle: {
|
private setStyle(fontStyle: {
|
||||||
@ -222,7 +234,7 @@ class EditorComponent extends Events {
|
|||||||
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.resize();
|
||||||
}
|
}
|
||||||
|
|
||||||
private getTextAreaText(): string {
|
private getTextAreaText(): string {
|
||||||
@ -273,7 +285,7 @@ class MultitTextEditor {
|
|||||||
show(topic: Topic, textOverwrite?: string): void {
|
show(topic: Topic, textOverwrite?: string): void {
|
||||||
// Is it active ?
|
// Is it active ?
|
||||||
if (this._component) {
|
if (this._component) {
|
||||||
console.error('Editor was already displayed. Please, clouse it');
|
console.error('Editor was already displayed. Please, close it');
|
||||||
this._component.close(false);
|
this._component.close(false);
|
||||||
}
|
}
|
||||||
// Create a new instance
|
// Create a new instance
|
||||||
|
Loading…
Reference in New Issue
Block a user