vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-12-22 19:33:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Multiline working :)

Browse Source
This commit is contained in:
Paulo Veiga 2011-09-04 03:28:09 -03:00
parent b1b0ee0de8
commit cc9bf1b908
6 changed files with 87 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mindplot/src/main/javascript/IconGroup.js
View File

@ -53,7 +53,6 @@ mindplot.IconGroup = new Class({
addIcon : function(icon) {
$defined(icon, "icon is not defined");
icon.getImage().setVisibility(false);
icon.setGroup(this);
this._icons.push(icon);
@ -67,8 +66,6 @@ mindplot.IconGroup = new Class({
// Register event for the group ..
this._removeTip.decorate(this._topicId, icon);
icon.getImage().setVisibility(true);
},
_findIconFromUrl : function(url) {

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

@ -23,53 +23,38 @@ mindplot.MultilineTextEditor = new Class({
_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"}
overflow:"hidden",
border: "0 none"
}
);
var inputContainer = new Element('div');
inputContainer.setStyles({
border:"none",
overflow:"auto"
});
inputContainer.inject(result);
var inputText = new Element('textarea',
{ rows:2,
tabindex:'-1',
value:""}
var textareaElem = new Element('textarea',
{ tabindex:'-1',
value:"",
wrap:'off'
}
);
inputText.setStyles({
border:"none",
background:"transparent"
textareaElem.setStyles({
border: "0 none",
background:"transparent",
outline: '0 none',
resize: 'none',
overflow:"hidden"
});
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);
textareaElem.inject(result);
return result;
},
_registerEvents : function(divElem) {
var inputElem = this._getTextareaElem();
var spanElem = this._getSpanElem();
_registerEvents : function(containerElem) {
var textareaElem = this._getTextareaElem();
divElem.addEvent('keydown', function (event) {
textareaElem.addEvent('keydown', function (event) {
switch (event.key) {
case 'esc':
this.close(false);
@ -78,38 +63,57 @@ mindplot.MultilineTextEditor = new Class({
if (event.meta || event.control) {
// @todo: Enters must be in any place ...
inputElem.value = inputElem.value + "\n";
textareaElem.value = textareaElem.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;
}
this._adjustEditorSize();
event.stopPropagation();
}.bind(this));
textareaElem.addEvent('blur', function() {
this.close(true);
}.bind(this));
// If the user clicks on the input, all event must be ignored ...
divElem.addEvent('click', function(event) {
containerElem.addEvent('click', function(event) {
event.stopPropagation();
});
divElem.addEvent('dblclick', function(event) {
containerElem.addEvent('dblclick', function(event) {
event.stopPropagation();
});
divElem.addEvent('mousedown', function(event) {
containerElem.addEvent('mousedown', function(event) {
event.stopPropagation();
});
},
_adjustEditorSize : function() {
var textElem = this._getTextareaElem();
console.log(textElem.value);
var lines = textElem.value.split('\n');
var maxLineLength = 5;
lines.forEach(function(line) {
if (maxLineLength < line.length)
maxLineLength = line.length;
});
textElem.setAttribute('cols', maxLineLength + 3);
textElem.setAttribute('rows', lines.length);
this._containerElem.setStyles({
width: maxLineLength + 'em',
height: textElem.getSize().height
});
},
isVisible : function () {
return $defined(this._divElem) && this._divElem.getStyle('display') == 'block';
return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
},
_updateModel : function () {
@ -127,11 +131,11 @@ mindplot.MultilineTextEditor = new Class({
if (!this.isVisible()) {
//Create editor ui
var editorElem = this._buildEditor();
editorElem.inject($(document.body));
var containerElem = this._buildEditor();
containerElem.inject($(document.body));
this._divElem = editorElem;
this._registerEvents(editorElem);
this._containerElem = containerElem;
this._registerEvents(containerElem);
this._showEditor(text);
}
},
@ -158,15 +162,11 @@ mindplot.MultilineTextEditor = new Class({
var displayFunc = function() {
// Position the editor and set the size...
var textShape = this._topic.getTextShape();
textShape.positionRelativeTo(this._divElem, {
textShape.positionRelativeTo(this._containerElem, {
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);
this._containerElem.setStyle('display', 'block');
var inputElem = this._getTextareaElem();
inputElem.focus();
@ -179,7 +179,6 @@ mindplot.MultilineTextEditor = new Class({
_setStyle : function (fontStyle) {
var inputField = this._getTextareaElem();
var spanField = this._getSpanElem();
if (!$defined(fontStyle.font)) {
fontStyle.font = "Arial";
}
@ -192,24 +191,21 @@ mindplot.MultilineTextEditor = new Class({
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";
var style = {
fontSize : fontStyle.size + "px",
fontFamily : fontStyle.font,
fontStyle : fontStyle.style,
fontWeight : fontStyle.weight,
color : fontStyle.color
};
inputField.setStyles(style);
this._containerElem.setStyles(style);
},
_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;
var textareaElem = this._getTextareaElem();
textareaElem.value = text;
this._adjustEditorSize();
},
_getText : function() {
@ -217,19 +213,7 @@ mindplot.MultilineTextEditor = new Class({
},
_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";
return this._containerElem.getElement('textarea');
},
_changeCursor : function(inputElem, selectText) {
@ -263,8 +247,8 @@ mindplot.MultilineTextEditor = new Class({
this._topic.getTextShape().setVisibility(true);
// Remove it form the screen ...
this._divElem.dispose();
this._divElem = null;
this._containerElem.dispose();
this._containerElem = null;
}
}
});

22
mindplot/src/main/javascript/TextEditor.js
View File

@ -102,7 +102,7 @@ mindplot.TextEditor = new Class({
},
isVisible : function () {
return $defined(this._divElem) && this._divElem.getStyle('display') == 'block';
return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block';
},
_updateModel : function () {
@ -123,7 +123,7 @@ mindplot.TextEditor = new Class({
var editorElem = this._buildEditor();
editorElem.inject($(document.body));
this._divElem = editorElem;
this._containerElem = editorElem;
this._registerEvents(editorElem);
this._showEditor(text);
}
@ -151,11 +151,11 @@ mindplot.TextEditor = new Class({
var displayFunc = function() {
// Position the editor and set the size...
var textShape = this._topic.getTextShape();
textShape.positionRelativeTo(this._divElem, {
textShape.positionRelativeTo(this._containerElem, {
position: {x: 'left',y:'top'},
edge: {x: 'left', y: 'top'}
});
this._divElem.setStyle('display', 'block');
this._containerElem.setStyle('display', 'block');
// Set size ...
var elemSize = topic.getSize();
@ -199,7 +199,7 @@ mindplot.TextEditor = new Class({
_setText : function(text) {
var inputField = this._getTextareaElem();
inputField.size = text.length + 1;
this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
this._containerElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
var spanField = this._getSpanElem();
spanField.innerHTML = text;
inputField.value = text;
@ -210,19 +210,19 @@ mindplot.TextEditor = new Class({
},
_getTextareaElem : function() {
return this._divElem.getElement('input');
return this._containerElem.getElement('input');
},
_getSpanElem : function() {
return this._divElem.getElement('span');
return this._containerElem.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";
this._containerElem.style.width = this._size.width * 2 + "px";
this._containerElem.style.height = this._size.height + "px";
},
_changeCursor : function(inputElem, selectText) {
@ -256,8 +256,8 @@ mindplot.TextEditor = new Class({
this._topic.getTextShape().setVisibility(true);
// Remove it form the screen ...
this._divElem.dispose();
this._divElem = null;
this._containerElem.dispose();
this._containerElem = null;
}
}
});

5
mindplot/src/main/javascript/Topic.js
View File

@ -153,8 +153,7 @@ mindplot.Topic = new Class({
return this._innerShape;
},
buildShape : function(attributes, type) {
buildShape : function(attributes, type) {
var result;
if (!$defined(type)) {
type = this.getShapeType();
@ -164,7 +163,7 @@ mindplot.Topic = new Class({
result = new web2d.Rect(0, attributes);
}
else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) {
result = new web2d.Elipse(attributes);
result = new web2d.Rect(0.9, attributes);
}
else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ROUNDED_RECT) {
result = new web2d.Rect(0.3, attributes);

18
web2d/src/main/javascript/peer/svg/GroupPeer.js
View File

@ -33,9 +33,6 @@ web2d.peer.svg.GroupPeer = new Class({
this._coordSize.width = width;
this._coordSize.height = height;
console.log("coordSize.width:" + width);
console.log("coordSize.height:" + height);
if (change)
this.updateTransform();
web2d.peer.utils.EventUtils.broadcastChangeEvent(this, "strokeStyle");
@ -73,21 +70,6 @@ web2d.peer.svg.GroupPeer = new Class({
var cx = this._position.x - this._coordOrigin.x * sx;
var cy = this._position.y - this._coordOrigin.y * sy;
console.log("------------------");
console.log("this._coordSize.width:" + this._coordSize.width);
console.log("this._coordSize.height:" + this._coordSize.height);
console.log("cx:" + cx);
console.log("cy:" + cy);
console.log("this._size.width:" + this._size.width);
console.log("this._size.height:" + this._size.height);
console.log("sx:" + sx);
console.log("sy:" + sy);
console.log("------------------");
this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")");
},

7
web2d/src/main/javascript/peer/svg/TextPeer.js
View File

@ -55,7 +55,7 @@ web2d.peer.svg.TextPeer = new Class({
var tspan = window.document.createElementNS(this.svgNamespace, 'tspan');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', this.getPosition().x);
var tspanContent = window.document.createTextNode(line);
var tspanContent = window.document.createTextNode(line.length == 0 ? " " : line);
tspan.appendChild(tspanContent);
tspans.push(tspan);
@ -107,11 +107,8 @@ web2d.peer.svg.TextPeer = new Class({
this._native.setAttribute('font-size', this._font.getGraphSize());
this._native.setAttribute('font-style', this._font.getStyle());
this._native.setAttribute('font-weight', this._font.getWeight());
var scale = this._font.getFontScale();
this._native.xFontScale = scale.toFixed(1);
},
setColor : function(color) {
this._native.setAttribute('fill', color);
},