mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-09-20 11:10:07 +02:00
272 lines
8.8 KiB
JavaScript
272 lines
8.8 KiB
JavaScript
|
/*
|
||
|
* Copyright [2011] [wisemapping]
|
||
|
*
|
||
|
* 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.
|
||
|
*/
|
||
|
|
||
|
mindplot.MultilineTextEditor = new Class({
|
||
|
initialize:function(topic) {
|
||
|
this._topic = topic;
|
||
|
},
|
||
|
|
||
|
_buildEditor : function() {
|
||
|
|
||
|
this._size = {width:500, height:100};
|
||
|
var result = new Element('div');
|
||
|
result.setStyles({
|
||
|
position:"absolute",
|
||
|
display: "none",
|
||
|
zIndex: "8",
|
||
|
width:"500px",
|
||
|
height:"100px"}
|
||
|
);
|
||
|
|
||
|
|
||
|
var inputContainer = new Element('div');
|
||
|
inputContainer.setStyles({
|
||
|
border:"none",
|
||
|
overflow:"auto"
|
||
|
});
|
||
|
inputContainer.inject(result);
|
||
|
|
||
|
var inputText = new Element('textarea',
|
||
|
{ rows:2,
|
||
|
tabindex:'-1',
|
||
|
value:""}
|
||
|
);
|
||
|
inputText.setStyles({
|
||
|
border:"none",
|
||
|
background:"transparent"
|
||
|
});
|
||
|
inputText.inject(inputContainer);
|
||
|
|
||
|
var spanContainer = new Element('div');
|
||
|
spanContainer.setStyle('visibility', "hidden");
|
||
|
spanContainer.inject(result);
|
||
|
|
||
|
var spanElem = new Element('span', {tabindex:"-1"});
|
||
|
spanElem.setStyle('white-space', "nowrap");
|
||
|
spanElem.setStyle('nowrap', 'nowrap');
|
||
|
spanElem.inject(spanContainer);
|
||
|
|
||
|
|
||
|
return result;
|
||
|
},
|
||
|
|
||
|
_registerEvents : function(divElem) {
|
||
|
var inputElem = this._getTextareaElem();
|
||
|
var spanElem = this._getSpanElem();
|
||
|
|
||
|
divElem.addEvent('keydown', function (event) {
|
||
|
switch (event.key) {
|
||
|
case 'esc':
|
||
|
this.close(false);
|
||
|
break;
|
||
|
case 'enter':
|
||
|
if (event.meta || event.control) {
|
||
|
|
||
|
// @todo: Enters must be in any place ...
|
||
|
inputElem.value = inputElem.value + "\n";
|
||
|
}
|
||
|
else {
|
||
|
this.close(true);
|
||
|
}
|
||
|
break;
|
||
|
default:
|
||
|
spanElem.innerHTML = inputElem.value;
|
||
|
var size = inputElem.value.length + 1;
|
||
|
inputElem.size = size;
|
||
|
if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
|
||
|
divElem.style.width = (spanElem.offsetWidth + 100) + "px";
|
||
|
}
|
||
|
break;
|
||
|
}
|
||
|
event.stopPropagation();
|
||
|
}.bind(this));
|
||
|
|
||
|
// If the user clicks on the input, all event must be ignored ...
|
||
|
divElem.addEvent('click', function(event) {
|
||
|
event.stopPropagation();
|
||
|
});
|
||
|
divElem.addEvent('dblclick', function(event) {
|
||
|
event.stopPropagation();
|
||
|
});
|
||
|
divElem.addEvent('mousedown', function(event) {
|
||
|
event.stopPropagation();
|
||
|
});
|
||
|
},
|
||
|
|
||
|
isVisible : function () {
|
||
|
return $defined(this._divElem) && this._divElem.getStyle('display') == 'block';
|
||
|
},
|
||
|
|
||
|
_updateModel : function () {
|
||
|
|
||
|
if (this._topic.getText() != this._getText()) {
|
||
|
var text = this._getText();
|
||
|
var topicId = this._topic.getId();
|
||
|
|
||
|
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
|
||
|
actionDispatcher.changeTextOnTopic([topicId], text);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
show : function (text) {
|
||
|
|
||
|
if (!this.isVisible()) {
|
||
|
//Create editor ui
|
||
|
var editorElem = this._buildEditor();
|
||
|
editorElem.inject($(document.body));
|
||
|
|
||
|
this._divElem = editorElem;
|
||
|
this._registerEvents(editorElem);
|
||
|
this._showEditor(text);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
_showEditor : function (defaultText) {
|
||
|
|
||
|
var topic = this._topic;
|
||
|
|
||
|
// Hide topic text ...
|
||
|
topic.getTextShape().setVisibility(false);
|
||
|
|
||
|
// Set Editor Style
|
||
|
var nodeText = topic.getTextShape();
|
||
|
var font = nodeText.getFont();
|
||
|
font.size = nodeText.getHtmlFontSize();
|
||
|
font.color = nodeText.getColor();
|
||
|
this._setStyle(font);
|
||
|
|
||
|
// Set editor's initial text
|
||
|
var text = $defined(defaultText) ? defaultText : topic.getText();
|
||
|
this._setText(text);
|
||
|
|
||
|
// Set editor's initial size
|
||
|
var displayFunc = function() {
|
||
|
// Position the editor and set the size...
|
||
|
var textShape = this._topic.getTextShape();
|
||
|
textShape.positionRelativeTo(this._divElem, {
|
||
|
position: {x: 'left',y:'top'},
|
||
|
edge: {x: 'left', y: 'top'}
|
||
|
});
|
||
|
this._divElem.setStyle('display', 'block');
|
||
|
|
||
|
// Set size ...
|
||
|
var elemSize = topic.getSize();
|
||
|
this._setEditorSize(elemSize.width, elemSize.height);
|
||
|
|
||
|
var inputElem = this._getTextareaElem();
|
||
|
inputElem.focus();
|
||
|
this._changeCursor(inputElem, $defined(defaultText));
|
||
|
|
||
|
}.bind(this);
|
||
|
|
||
|
displayFunc.delay(10);
|
||
|
},
|
||
|
|
||
|
_setStyle : function (fontStyle) {
|
||
|
var inputField = this._getTextareaElem();
|
||
|
var spanField = this._getSpanElem();
|
||
|
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;
|
||
|
}
|
||
|
inputField.style.fontSize = fontStyle.size + "px";
|
||
|
inputField.style.fontFamily = fontStyle.font;
|
||
|
inputField.style.fontStyle = fontStyle.style;
|
||
|
inputField.style.fontWeight = fontStyle.weight;
|
||
|
inputField.style.color = fontStyle.color;
|
||
|
spanField.style.fontFamily = fontStyle.font;
|
||
|
spanField.style.fontStyle = fontStyle.style;
|
||
|
spanField.style.fontWeight = fontStyle.weight;
|
||
|
spanField.style.fontSize = fontStyle.size + "px";
|
||
|
},
|
||
|
|
||
|
_setText : function(text) {
|
||
|
var inputField = this._getTextareaElem();
|
||
|
inputField.size = text.length + 1;
|
||
|
this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
|
||
|
var spanField = this._getSpanElem();
|
||
|
spanField.innerHTML = text;
|
||
|
inputField.value = text;
|
||
|
},
|
||
|
|
||
|
_getText : function() {
|
||
|
return this._getTextareaElem().value;
|
||
|
},
|
||
|
|
||
|
_getTextareaElem : function() {
|
||
|
return this._divElem.getElement('textarea');
|
||
|
},
|
||
|
|
||
|
_getSpanElem : function() {
|
||
|
return this._divElem.getElement('span');
|
||
|
},
|
||
|
|
||
|
_setEditorSize : function (width, height) {
|
||
|
var textShape = this._topic.getTextShape();
|
||
|
var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer);
|
||
|
this._size = {width:width * scale.width, height:height * scale.height};
|
||
|
this._divElem.style.width = this._size.width * 2 + "px";
|
||
|
this._divElem.style.height = this._size.height + "px";
|
||
|
},
|
||
|
|
||
|
_changeCursor : function(inputElem, selectText) {
|
||
|
// Select text if it's required ...
|
||
|
if (inputElem.createTextRange) //ie
|
||
|
{
|
||
|
var range = inputElem.createTextRange();
|
||
|
var pos = inputElem.value.length;
|
||
|
if (!selectText) {
|
||
|
range.select();
|
||
|
range.move("character", pos);
|
||
|
}
|
||
|
else {
|
||
|
range.move("character", pos);
|
||
|
range.select();
|
||
|
}
|
||
|
}
|
||
|
else if (!selectText) {
|
||
|
inputElem.setSelectionRange(0, inputElem.value.length);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
close : function(update) {
|
||
|
if (this.isVisible()) {
|
||
|
// Update changes ...
|
||
|
if (!$defined(update) || update) {
|
||
|
this._updateModel();
|
||
|
}
|
||
|
|
||
|
// Let make the visible text in the node visible again ...
|
||
|
this._topic.getTextShape().setVisibility(true);
|
||
|
|
||
|
// Remove it form the screen ...
|
||
|
this._divElem.dispose();
|
||
|
this._divElem = null;
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|