vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 22:27:55 +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) { addIcon : function(icon) {
$defined(icon, "icon is not defined"); $defined(icon, "icon is not defined");
icon.getImage().setVisibility(false);
icon.setGroup(this); icon.setGroup(this);
this._icons.push(icon); this._icons.push(icon);
@ -67,8 +66,6 @@ mindplot.IconGroup = new Class({
// Register event for the group .. // Register event for the group ..
this._removeTip.decorate(this._topicId, icon); this._removeTip.decorate(this._topicId, icon);
icon.getImage().setVisibility(true);
}, },
_findIconFromUrl : function(url) { _findIconFromUrl : function(url) {

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

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

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

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

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

@ -153,7 +153,6 @@ mindplot.Topic = new Class({
return this._innerShape; return this._innerShape;
}, },
buildShape : function(attributes, type) { buildShape : function(attributes, type) {
var result; var result;
if (!$defined(type)) { if (!$defined(type)) {
@ -164,7 +163,7 @@ mindplot.Topic = new Class({
result = new web2d.Rect(0, attributes); result = new web2d.Rect(0, attributes);
} }
else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) { 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) { else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ROUNDED_RECT) {
result = new web2d.Rect(0.3, attributes); 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.width = width;
this._coordSize.height = height; this._coordSize.height = height;
console.log("coordSize.width:" + width);
console.log("coordSize.height:" + height);
if (change) if (change)
this.updateTransform(); this.updateTransform();
web2d.peer.utils.EventUtils.broadcastChangeEvent(this, "strokeStyle"); 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 cx = this._position.x - this._coordOrigin.x * sx;
var cy = this._position.y - this._coordOrigin.y * sy; 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 + ")"); 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'); var tspan = window.document.createElementNS(this.svgNamespace, 'tspan');
tspan.setAttribute('dy', '1em'); tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', this.getPosition().x); tspan.setAttribute('x', this.getPosition().x);
var tspanContent = window.document.createTextNode(line); var tspanContent = window.document.createTextNode(line.length == 0 ? " " : line);
tspan.appendChild(tspanContent); tspan.appendChild(tspanContent);
tspans.push(tspan); 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-size', this._font.getGraphSize());
this._native.setAttribute('font-style', this._font.getStyle()); this._native.setAttribute('font-style', this._font.getStyle());
this._native.setAttribute('font-weight', this._font.getWeight()); this._native.setAttribute('font-weight', this._font.getWeight());
var scale = this._font.getFontScale();
this._native.xFontScale = scale.toFixed(1);
}, },
setColor : function(color) { setColor : function(color) {
this._native.setAttribute('fill', color); this._native.setAttribute('fill', color);
}, },