vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-29 17:04:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

MultilineTextEditor partially fixed

Browse Source
This commit is contained in:
Ezequiel Bergamaschi 2014-03-17 02:38:49 -03:00
parent dccc1c8c88
commit 454354f9cd
2 changed files with 49 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
mindplot/src/main/javascript/MultilineTextEditor.js
View File

@ -25,38 +25,33 @@ mindplot.MultilineTextEditor = new Class({
_buildEditor:function () { _buildEditor:function () {
var result = new Element('div'); var result = $('<div></div>')
result.set('id',"textContainer") .attr('id', 'textContainer')
result.setStyles({ .css({
display:"none", display:"none",
zIndex:"8", zIndex:"8",
overflow:"hidden", overflow:"hidden",
border:"0 none" border:"0 none"
} });
);
var textareaElem = new Element('textarea',
{ tabindex:'-1',
value:"",
wrap:'off'
}
);
textareaElem.setStyles({ var textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
border:"1px gray dashed", .css({
background:"rgba(98, 135, 167, .3)", border:"1px gray dashed",
outline:'0 none', background:"rgba(98, 135, 167, .3)",
resize:'none', outline:'0 none',
overflow:"hidden" resize:'none',
}); overflow:"hidden"
textareaElem.inject(result); });
result.append(textareaElem);
return result; return result;
}, },
_registerEvents:function (containerElem) { _registerEvents:function (containerElem) {
var textareaElem = this._getTextareaElem(); var textareaElem = this._getTextareaElem();
textareaElem.addEvent('keydown', function (event) { textareaElem.on('keydown', function (event) {
switch (event.key) { switch (event.key) {
case 'esc': case 'esc':
this.close(false); this.close(false);
@ -65,7 +60,7 @@ mindplot.MultilineTextEditor = new Class({
if (event.meta || event.control) { if (event.meta || event.control) {
// Add return ... // Add return ...
var text = textareaElem.value; var text = textareaElem.val();
var cursorPosition = text.length; var cursorPosition = text.length;
if (textareaElem.selectionStart) { if (textareaElem.selectionStart) {
cursorPosition = textareaElem.selectionStart; cursorPosition = textareaElem.selectionStart;
@ -76,12 +71,12 @@ mindplot.MultilineTextEditor = new Class({
if (cursorPosition < text.length) { if (cursorPosition < text.length) {
tail = text.substring(cursorPosition, text.length); tail = text.substring(cursorPosition, text.length);
} }
textareaElem.value = head + "\n" + tail; textareaElem.val(head + "\n" + tail);
// Position cursor ... // Position cursor ...
if (textareaElem.setSelectionRange) { if (textareaElem[0].setSelectionRange) {
textareaElem.focus(); textareaElem.focus();
textareaElem.setSelectionRange(cursorPosition + 1, cursorPosition + 1); textareaElem[0].setSelectionRange(cursorPosition + 1, cursorPosition + 1);
} else if (textareaElem.createTextRange) { } else if (textareaElem.createTextRange) {
var range = textareaElem.createTextRange(); var range = textareaElem.createTextRange();
range.moveStart('character', cursorPosition + 1); range.moveStart('character', cursorPosition + 1);
@ -97,24 +92,24 @@ mindplot.MultilineTextEditor = new Class({
event.stopPropagation(); event.stopPropagation();
}.bind(this)); }.bind(this));
textareaElem.addEvent('keypress', function (event) { textareaElem.on('keypress', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
textareaElem.addEvent('keyup', function (event) { textareaElem.on('keyup', function (event) {
var text = this._getTextareaElem().value; var text = this._getTextareaElem().val();
this.fireEvent('input', [event, text]); this.fireEvent('input', [event, text]);
this._adjustEditorSize(); this._adjustEditorSize();
}.bind(this)); }.bind(this));
// If the user clicks on the input, all event must be ignored ... // If the user clicks on the input, all event must be ignored ...
containerElem.addEvent('click', function (event) { containerElem.on('click', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
containerElem.addEvent('dblclick', function (event) { containerElem.on('dblclick', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
containerElem.addEvent('mousedown', function (event) { containerElem.on('mousedown', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
}, },
@ -124,25 +119,25 @@ mindplot.MultilineTextEditor = new Class({
if (this.isVisible()) { if (this.isVisible()) {
var textElem = this._getTextareaElem(); var textElem = this._getTextareaElem();
var lines = textElem.value.split('\n'); var lines = textElem.val().split('\n');
var maxLineLength = 1; var maxLineLength = 1;
_.each(lines, function (line) { _.each(lines, function (line) {
if (maxLineLength < line.length) if (maxLineLength < line.length)
maxLineLength = line.length; maxLineLength = line.length;
}); });
textElem.setAttribute('cols', maxLineLength); textElem.attr('cols', maxLineLength);
textElem.setAttribute('rows', lines.length); textElem.attr('rows', lines.length);
this._containerElem.setStyles({ this._containerElem.css({
width:(maxLineLength + 3) + 'em', width:(maxLineLength + 3) + 'em',
height:textElem.getSize().height height:textElem.height()
}); });
} }
}, },
isVisible:function () { isVisible:function () {
return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block'; return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
}, },
_updateModel:function () { _updateModel:function () {
@ -166,7 +161,7 @@ mindplot.MultilineTextEditor = new Class({
if (!this.isVisible()) { if (!this.isVisible()) {
//Create editor ui //Create editor ui
var containerElem = this._buildEditor(); var containerElem = this._buildEditor();
containerElem.inject($(document.body)[0]); $('body').append(containerElem);
this._containerElem = containerElem; this._containerElem = containerElem;
this._registerEvents(containerElem); this._registerEvents(containerElem);
@ -193,14 +188,14 @@ mindplot.MultilineTextEditor = new Class({
// Position the editor and set the size... // Position the editor and set the size...
var textShape = topic.getTextShape(); var textShape = topic.getTextShape();
$('#textContainer')[0].position({ $('#textContainer').position({
my: "left top", my: "left top",
at: "left bottom", at: "left bottom",
of: $(textShape)[0] of: $(textShape)[0]
// collision: "fit" // collision: "fit"
}); });
this._containerElem.setStyle('display', 'block'); this._containerElem.css('display', 'block');
// Set editor's initial text ... // Set editor's initial text ...
var text = $defined(defaultText) ? defaultText : topic.getText(); var text = $defined(defaultText) ? defaultText : topic.getText();
@ -236,22 +231,22 @@ mindplot.MultilineTextEditor = new Class({
fontWeight:fontStyle.weight, fontWeight:fontStyle.weight,
color:fontStyle.color color:fontStyle.color
}; };
inputField.setStyles(style); inputField.css(style);
this._containerElem.setStyles(style); this._containerElem.css(style);
}, },
_setText:function (text) { _setText:function (text) {
var textareaElem = this._getTextareaElem(); var textareaElem = this._getTextareaElem();
textareaElem.value = text; textareaElem.val(text);
this._adjustEditorSize(); this._adjustEditorSize();
}, },
_getText:function () { _getText:function () {
return this._getTextareaElem().value; return this._getTextareaElem().val();
}, },
_getTextareaElem:function () { _getTextareaElem:function () {
return this._containerElem.getElement('textarea'); return this._containerElem.find('textarea');
}, },
_positionCursor:function (textareaElem, selectText) { _positionCursor:function (textareaElem, selectText) {
@ -261,19 +256,19 @@ mindplot.MultilineTextEditor = new Class({
if (textareaElem.createTextRange) { if (textareaElem.createTextRange) {
var rang = textareaElem.createTextRange(); var rang = textareaElem.createTextRange();
rang.select(); rang.select();
rang.move("character", textareaElem.value.length); rang.move("character", textareaElem.val().length);
} }
else { else {
textareaElem.setSelectionRange(0, textareaElem.value.length); textareaElem[0].setSelectionRange(0, textareaElem.val().length);
} }
} else { } else {
// Move the cursor to the last character .. // Move the cursor to the last character ..
if (textareaElem.createTextRange) { if (textareaElem.createTextRange) {
var range = textareaElem.createTextRange(); var range = textareaElem.createTextRange();
range.move("character", textareaElem.value.length); range.move("character", textareaElem.val().length);
} else { } else {
textareaElem.selectionStart = textareaElem.value.length; textareaElem.selectionStart = textareaElem.val().length;
} }
} }

12
mindplot/src/main/javascript/ScreenManager.js
View File

@ -51,7 +51,7 @@ mindplot.ScreenManager = new Class({
this._clickEvents.remove(listener); this._clickEvents.remove(listener);
} }
else{ else{
this._divContainer.removeEvent(event, listener); this._divContainer.unbind(event, listener);
} }
}, },
@ -118,13 +118,13 @@ mindplot.ScreenManager = new Class({
getWorkspaceMousePosition : function(event) { getWorkspaceMousePosition : function(event) {
// Retrieve current mouse position. // Retrieve current mouse position.
var x = event.client.x; var x = event.clientX;
var y = event.client.y; var y = event.clientY;
// Subtract div position. //FIXME: paulo: why? Subtract div position.
var containerPosition = this.getContainer().getPosition(); /*var containerPosition = this.getContainer().position();
x = x - containerPosition.x; x = x - containerPosition.x;
y = y - containerPosition.y; y = y - containerPosition.y;*/
// Scale coordinate in order to be relative to the workspace. That's coordSize/size; // Scale coordinate in order to be relative to the workspace. That's coordSize/size;
x = x * this._scale; x = x * this._scale;