vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-25 23:44:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Partially supported multilines.

Browse Source
This commit is contained in:
Paulo Veiga 2011-09-02 02:31:03 -03:00
parent e437e0e329
commit d43eb930d9
32 changed files with 804 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mindplot/pom.xml
View File

@ -78,7 +78,8 @@
<filelist dir="${basedir}/src/main/javascript/" files="RelationshipLine.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="DragTopicPositioner.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="TextEditor.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="MultilineTextEditor.js"/>
<!--<filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>-->
<filelist dir="${basedir}/src/main/javascript/" files="TextEditorFactory.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="VariableDistanceBoard.js"/>
<filelist dir="${basedir}/src/main/javascript/" files="util/Shape.js"/>

8
mindplot/src/main/javascript/CentralTopic.js
View File

@ -19,8 +19,8 @@
mindplot.CentralTopic = new Class({
Extends:mindplot.Topic,
initialize: function(model,options) {
this.parent(model,options);
initialize: function(model, options) {
this.parent(model, options);
},
_registerEvents : function() {
@ -36,6 +36,10 @@ mindplot.CentralTopic = new Class({
return this.getPosition();
},
_getInnerPadding : function() {
return 9;
},
getTopicType : function() {
return mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE;
},

6
mindplot/src/main/javascript/Icon.js
View File

@ -21,7 +21,7 @@ mindplot.Icon = new Class({
$assert(url, 'topic can not be null');
this._image = new web2d.Image();
this._image.setHref(url);
this._image.setSize(12, 12);
this._image.setSize(100,100);
},
getImage : function() {
@ -58,4 +58,8 @@ mindplot.Icon = new Class({
}
});
mindplot.Icon.HEIGHT = 100;

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

@ -17,76 +17,65 @@
*/
mindplot.IconGroup = new Class({
initialize : function(topic) {
var offset = topic.getOffset();
initialize : function(topicId, iconSize) {
$assert(topicId, "topicId can not be null");
$assert(iconSize, "iconSize can not be null");
this._icons = [];
this._group = new web2d.Group({width: 0, height:iconSize,x: 0, y:0, coordSizeWidth:0,coordSizeHeight:100});
this._removeTip = new mindplot.IconGroup.RemoveTip(this._group, topicId);
this.seIconSize(iconSize, iconSize);
this.options = {
width:0,
height:0,
x:offset.x / 2,
y:offset.y,
icons:[],
topic:topic,
nativeElem:new web2d.Group({width: 2, height:2,x: offset, y:offset, coordSizeWidth:1,coordSizeHeight:1})
};
this.updateIconGroupPosition();
this.registerListeners();
this._removeTip = new mindplot.IconGroup.RemoveTip(this.options.nativeElem, this);
},
setPosition : function(x, y) {
this.options.x = x;
this.options.y = y;
this.options.nativeElem.setPosition(x, y);
this._group.setPosition(x, y);
},
getPosition : function() {
return {x:this.options.x, y:this.options.y};
return this._group.getPosition();
},
getNativeElement : function() {
return this._group;
},
setSize : function(width, height) {
this.options.width = width;
this.options.height = height;
this.options.nativeElem.setSize(width, height);
this.options.nativeElem.setCoordSize(width, height);
this._group.setSize(width, height);
},
getSize : function() {
return {width:this.options.width, height:this.options.height};
return this._group.getSize();
},
seIconSize : function(width, height) {
this._iconSize = {width:width,height:height};
this._group.setCoordSize(width / mindplot.Icon.HEIGHT, height / mindplot.Icon.HEIGHT);
},
addIcon : function(icon) {
$defined(icon, "icon is not defined");
icon.setGroup(this);
var newIcon = icon.getImage();
var nativeElem = this.options.nativeElem;
var iconSize = newIcon.getSize();
var size = nativeElem.getSize();
newIcon.setPosition(size.width, 0);
this.options.icons.extend([icon]);
var imageShape = icon.getImage();
var groupShape = this._group;
nativeElem.appendChild(newIcon);
var iconsLength = this._icons.length;
imageShape.setPosition(mindplot.Icon.HEIGHT * iconsLength, 0);
groupShape.setSize((iconsLength + 1) * this._iconSize.width, this._iconSize.height);
groupShape.setCoordSize((iconsLength + 1 ) * mindplot.Icon.HEIGHT, mindplot.Icon.HEIGHT);
size.width = size.width + iconSize.width;
if (iconSize.height > size.height) {
size.height = iconSize.height;
}
nativeElem.setCoordSize(size.width, size.height);
nativeElem.setSize(size.width, size.height);
this.options.width = size.width;
this.options.height = size.height;
groupShape.appendChild(imageShape);
this._icons.push(icon);
// Register event for the group ..
var topicId = this.options.topic.getId();
this._removeTip.decorate(topicId, icon);
this._removeTip.decorate(this._topicId, icon);
},
getIcons : function() {
return this.options.icons;
return this._icons;
},
removeIcon : function(url) {
@ -101,7 +90,7 @@ mindplot.IconGroup = new Class({
getIcon : function(url) {
var result = null;
this.options.icons.each(function(el) {
this._icons.each(function(el) {
var nativeImage = el.getImage();
if (nativeImage.getHref() == url) {
result = el;
@ -112,7 +101,7 @@ mindplot.IconGroup = new Class({
getImageIcon : function(icon) {
var result = null;
this.options.icons.each(function(el) {
this._icons.each(function(el) {
if (result == null && $defined(el.getModel().isIconModel) && el.getId() == icon.getId() && el.getUiId() == icon.getUiId()) {
result = el;
}
@ -122,7 +111,7 @@ mindplot.IconGroup = new Class({
findIconFromModel : function(iconModel) {
var result = null;
this.options.icons.each(function(el) {
this._icons.each(function(el) {
var elModel = el.getModel();
if (result == null && $defined(elModel.isIconModel) && elModel.getId() == iconModel.getId()) {
result = el;
@ -137,61 +126,34 @@ mindplot.IconGroup = new Class({
},
_removeIcon : function(icon) {
var nativeImage = icon.getImage();
this.options.icons.erase(icon);
var iconSize = nativeImage.getSize();
var size = this.options.nativeElem.getSize();
var position = nativeImage.getPosition();
this.options.icons.each(function(icon) {
var img = icon.getImage();
var pos = img.getPosition();
if (pos.x > position.x) {
img.setPosition(pos.x - iconSize.width, 0);
}
}.bind(this));
size.width = size.width - iconSize.width;
this.setSize(size.width, size.height);
},
getNativeElement : function() {
return this.options.nativeElem;
// remove from model...
this._icons.forEach(function(icon) {
this._group.removeChild(icon.getImage());
}.bind(this));
this._icons.erase(icon);
// Add all again ...
this._icons.forEach(function(icon) {
this.addIcon(icon);
}.bind(this));
},
moveToFront : function() {
this.options.nativeElem.moveToFront();
this._group.moveToFront();
},
registerListeners : function() {
this.options.nativeElem.addEvent('click', function(event) {
this._group.addEvent('click', function(event) {
// Avoid node creation ...
event.stopPropagation();
});
this.options.nativeElem.addEvent('dblclick', function(event) {
this._group.addEvent('dblclick', function(event) {
event.stopPropagation();
});
},
getTopic : function() {
return this.options.topic;
},
updateIconGroupPosition : function() {
var offsets = this._calculateOffsets();
this.setPosition(offsets.x, offsets.y);
},
_calculateOffsets : function() {
var offset = this.options.topic.getOffset();
var text = this.options.topic.getTextShape();
var sizeHeight = text.getHtmlFontSize();
var yOffset = offset;
yOffset = text.getPosition().y + (sizeHeight - 18) / 2 + 1;
return {x:offset, y:yOffset};
}
});
@ -215,7 +177,7 @@ mindplot.IconGroup.RemoveTip = new Class({
// Now, let move the position the icon...
var pos = icon.getPosition();
icon.setSize(15, 15);
// icon.setSize(15, 15);
// Register events ...
var widget = this._buildWeb2d();
@ -231,7 +193,7 @@ mindplot.IconGroup.RemoveTip = new Class({
this.hide();
}.bind(this));
widget.setPosition(pos.x + 11, pos.y - 11);
widget.setPosition(pos.x + 80, pos.y - 50);
this._container.appendChild(widget);
// Setup current element ...
@ -259,7 +221,7 @@ mindplot.IconGroup.RemoveTip = new Class({
var widget = this._widget;
var close = function() {
icon.setSize(12, 12);
// icon.setSize(12, 12);
this._activeIcon = null;
this._container.removeChild(widget);
@ -319,17 +281,21 @@ mindplot.IconGroup.RemoveTip = new Class({
line2.setTo(9, 1);
result.appendChild(line2);
// Some sily events ...
// Some events ...
result.addEvent('mouseover', function() {
innerRect.setFill('#CC0033');
});
result.addEvent('mouseout', function() {
innerRect.setFill('gray');
});
result.setSize(50, 50);
return result;
},
decorate : function(topicId, icon) {
if (!icon.__remove) {
icon.addEvent('mouseover', function() {
this.show(topicId, icon);
}.bind(this));
@ -337,6 +303,8 @@ mindplot.IconGroup.RemoveTip = new Class({
icon.addEvent('mouseout', function() {
this.hide();
}.bind(this))
icon.__remove = true;
}
}
});

4
mindplot/src/main/javascript/ImageIcon.js
View File

@ -22,7 +22,7 @@ mindplot.ImageIcon = new Class({
$assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null');
this._topic = topic;
this._topicId = topic.getId();
this._iconModel = iconModel;
// @Todo: Read only must be a property ...
@ -108,7 +108,7 @@ mindplot.ImageIcon = new Class({
remove : function() {
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.removeIconFromTopic(this._topic.getId(), this._iconModel);
actionDispatcher.removeIconFromTopic(this._topicId, this._iconModel);
}
});

8
mindplot/src/main/javascript/LocalActionDispatcher.js
View File

@ -118,7 +118,7 @@ mindplot.LocalActionDispatcher = new Class({
var result = topic.getFontFamily();
topic.setFontFamily(fontFamily, true);
topic.updateNode.delay(0, topic);
topic._adjustShapes.delay(0, topic);
return result;
};
@ -179,7 +179,7 @@ mindplot.LocalActionDispatcher = new Class({
var result = topic.getFontSize();
topic.setFontSize(size, true);
topic.updateNode.delay(0, topic);
topic._adjustShapes.delay(0, topic);
return result;
};
@ -209,7 +209,7 @@ mindplot.LocalActionDispatcher = new Class({
var weight = (result == "bold") ? "normal" : "bold";
topic.setFontWeight(weight, true);
topic.updateNode.delay(0, topic);
topic._adjustShapes.delay(0, topic);
return result;
};
@ -292,7 +292,7 @@ mindplot.CommandContext = new Class({
}
}.bind(this));
return result;
},
}
});

11
mindplot/src/main/javascript/MainTopic.js
View File

@ -235,6 +235,17 @@ mindplot.MainTopic = new Class({
return result;
},
_getInnerPadding : function() {
var result;
var parent = this.getModel().getParent();
if (parent && mindplot.model.NodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
result = 3;
}
else {
result = 4;
}
return result;
},
isConnectedToCentralTopic : function() {
var model = this.getModel();

271
mindplot/src/main/javascript/MultilineTextEditor.js Normal file
View File

@ -0,0 +1,271 @@
/*
* 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;
}
}
});

1
mindplot/src/main/javascript/Note.js
View File

@ -19,6 +19,7 @@
mindplot.Note = new Class({
Extends: mindplot.Icon,
initialize : function(topic, noteModel) {
$assert(topicId, 'topic can not be null');
this.parent(mindplot.Note.IMAGE_URL);
this._noteModel = noteModel;
this._topic = topic;

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

@ -20,7 +20,7 @@ mindplot.ScreenManager = new Class({
initialize:function(divElement) {
$assert(divElement, "can not be null");
this._divContainer = divElement;
this._offset = {x:0,y:0};
this._padding = {x:0,y:0};
// Ignore default click event propagation. Prevent 'click' event on drad.
this._clickEvents = [];
@ -71,8 +71,8 @@ mindplot.ScreenManager = new Class({
var y = elementPosition.y;
// Add workspace offset.
x = x - this._offset.x;
y = y - this._offset.y;
x = x - this._padding.x;
y = y - this._padding.y;
// Scale coordinate in order to be relative to the workspace. That's coord/size;
x = x / this._scale;
@ -129,8 +129,8 @@ mindplot.ScreenManager = new Class({
y = y * this._scale;
// Add workspace offset.
x = x + this._offset.x;
y = y + this._offset.y;
x = x + this._padding.x;
y = y + this._padding.y;
// Remove decimal part..
return new core.Point(x, y);
@ -141,7 +141,7 @@ mindplot.ScreenManager = new Class({
},
setOffset : function(x, y) {
this._offset.x = x;
this._offset.y = y;
this._padding.x = x;
this._padding.y = y;
}
});

2
mindplot/src/main/javascript/ShrinkConnector.js
View File

@ -54,7 +54,7 @@ mindplot.ShirinkConnector = new Class({
elipse.addEvent('mouseout', function(event) {
var color = topic.getBackgroundColor();
this.setFill(color);
});
}.bind(this));
elipse.setCursor('default');
this._fillColor = '#f7f7f7';

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

@ -66,7 +66,7 @@ mindplot.TextEditor = new Class({
},
_registerEvents : function(divElem) {
var inputElem = this._getInputElem();
var inputElem = this._getTextareaElem();
var spanElem = this._getSpanElem();
divElem.addEvent('keydown', function (event) {
@ -161,7 +161,7 @@ mindplot.TextEditor = new Class({
var elemSize = topic.getSize();
this._setEditorSize(elemSize.width, elemSize.height);
var inputElem = this._getInputElem();
var inputElem = this._getTextareaElem();
inputElem.focus();
this._changeCursor(inputElem, $defined(defaultText));
@ -171,7 +171,7 @@ mindplot.TextEditor = new Class({
},
_setStyle : function (fontStyle) {
var inputField = this._getInputElem();
var inputField = this._getTextareaElem();
var spanField = this._getSpanElem();
if (!$defined(fontStyle.font)) {
fontStyle.font = "Arial";
@ -197,7 +197,7 @@ mindplot.TextEditor = new Class({
},
_setText : function(text) {
var inputField = this._getInputElem();
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();
@ -206,10 +206,10 @@ mindplot.TextEditor = new Class({
},
_getText : function() {
return this._getInputElem().value;
return this._getTextareaElem().value;
},
_getInputElem : function() {
_getTextareaElem : function() {
return this._divElem.getElement('input');
},

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

@ -21,7 +21,7 @@ mindplot.Topic = new Class({
Extends:mindplot.NodeGraph,
initialize : function(model) {
this.parent(model);
this._textEditor = new mindplot.TextEditor(this);
this._textEditor = new mindplot.MultilineTextEditor(this);
this._children = [];
this._parent = null;
@ -71,23 +71,15 @@ mindplot.Topic = new Class({
model.setShapeType(type);
}
var innerShape = this.getInnerShape();
if (innerShape != null) {
var dispatcherByEventType = innerShape._dispatcherByEventType;
// Remove old shape ...
var oldInnerShape = this.getInnerShape();
if (oldInnerShape != null) {
this._removeInnerShape();
// Create a new one ...
innerShape = this.getInnerShape();
//Let's register all the events. The first one is the default one. The others will be copied.
var dispatcher = dispatcherByEventType['mousedown'];
if ($defined(dispatcher)) {
for (var i = 1; i < dispatcher._listeners.length; i++) {
innerShape.addEvent('mousedown', dispatcher._listeners[i]);
}
}
var innerShape = this.getInnerShape();
// @Todo: Fix...
//innerShape.cloneEvents(oldInnerShape);
// Update figure size ...
var size = model.getSize();
@ -134,12 +126,13 @@ mindplot.Topic = new Class({
var innerShape = this.getInnerShape();
group.removeChild(innerShape);
this._innerShape = null;
return innerShape;
},
getInnerShape : function() {
if (!$defined(this._innerShape)) {
// Create inner box.
this._innerShape = this.buildShape(this.INNER_RECT_ATTRIBUTES);
this._innerShape = this.buildShape(mindplot.Topic.INNER_RECT_ATTRIBUTES);
// Update bgcolor ...
var bgColor = this.getBackgroundColor();
@ -247,21 +240,25 @@ mindplot.Topic = new Class({
},
getOrBuildIconGroup : function() {
if (!$defined(this._icon)) {
this._icon = this._buildIconGroup();
if (!$defined(this._iconsGroup)) {
this._iconsGroup = this._buildIconGroup();
var group = this.get2DElement();
group.appendChild(this._icon.getNativeElement());
this._icon.moveToFront();
group.appendChild(this._iconsGroup.getNativeElement());
this._iconsGroup.moveToFront();
}
return this._icon;
return this._iconsGroup;
},
getIconGroup : function() {
return this._icon;
return this._iconsGroup;
},
_buildIconGroup : function() {
var result = new mindplot.IconGroup(this);
var textHeight = this.getTextShape().getHeight();
var result = new mindplot.IconGroup(this.getId(), textHeight);
var padding = this._getInnerPadding();
result.setPosition(padding, padding);
var model = this.getModel();
//Icons
@ -341,9 +338,9 @@ mindplot.Topic = new Class({
iconGroup.removeImageIcon(imgIcon);
if (iconGroup.getIcons().length == 0) {
this.get2DElement().removeChild(iconGroup.getNativeElement());
this._icon = null;
this._iconsGroup = null;
}
this.updateNode();
this._adjustShapes();
}
},
@ -356,9 +353,9 @@ mindplot.Topic = new Class({
iconGroup.removeIcon(mindplot.LinkIcon.IMAGE_URL);
if (iconGroup.getIcons().length == 0) {
this.get2DElement().removeChild(iconGroup.getNativeElement());
this._icon = null;
this._iconsGroup = null;
}
this.updateNode.delay(0, this);
this._adjustShapes(this);
}
this._link = null;
this._hasLink = false;
@ -373,11 +370,11 @@ mindplot.Topic = new Class({
iconGroup.removeIcon(mindplot.Note.IMAGE_URL);
if (iconGroup.getIcons().length == 0) {
this.get2DElement().removeChild(iconGroup.getNativeElement());
this._icon = null;
this._iconsGroup = null;
}
}
this.updateNode.delay(0, this);
this._adjustShapes();
this._note = null;
this._hasNote = false;
},
@ -411,14 +408,6 @@ mindplot.Topic = new Class({
if (!disableEventsListeners) {
// Propagate mouse events ...
var topic = this;
result.addEvent('mousedown', function(event) {
var eventDispatcher = topic.getInnerShape()._dispatcherByEventType['mousedown'];
if ($defined(eventDispatcher)) {
eventDispatcher.eventListener(event);
}
});
if (this.getType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
result.setCursor('move');
} else {
@ -426,35 +415,11 @@ mindplot.Topic = new Class({
}
}
// Position node ...
this._offset = this.getOffset();
var iconOffset = this.getIconOffset();
result.setPosition(iconOffset + this._offset, this._offset / 2);
return result;
},
getIconOffset : function() {
var iconGroup = this.getIconGroup();
var size = 0;
if ($defined(iconGroup)) {
size = iconGroup.getSize().width;
}
return size;
},
getOffset : function(value, updateModel) {
var offset = 18;
if (mindplot.model.NodeModel.MAIN_TOPIC_TYPE == this.getType()) {
var parent = this.getModel().getParent();
if (parent && mindplot.model.NodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
offset = 6;
}
else {
offset = 8;
}
}
return offset;
_getInnerPadding : function() {
throw "this must be implemented";
},
setFontFamily : function(value, updateModel) {
@ -464,7 +429,7 @@ mindplot.Topic = new Class({
var model = this.getModel();
model.setFontFamily(value);
}
this.updateNode.delay(0, this, [updateModel]);
this._adjustShapes(updateModel);
},
setFontSize : function(value, updateModel) {
@ -474,7 +439,7 @@ mindplot.Topic = new Class({
var model = this.getModel();
model.setFontSize(value);
}
this.updateNode.delay(0, this, [updateModel]);
this._adjustShapes(updateModel);
},
@ -485,7 +450,7 @@ mindplot.Topic = new Class({
var model = this.getModel();
model.setFontStyle(value);
}
this.updateNode.delay(0, this, [updateModel]);
this._adjustShapes(updateModel);
},
setFontWeight : function(value, updateModel) {
@ -559,7 +524,7 @@ mindplot.Topic = new Class({
_setText : function(text, updateModel) {
var textShape = this.getTextShape();
textShape.setText(text);
this.updateNode.delay(0, this, [updateModel]);
this._adjustShapes(updateModel);
if ($defined(updateModel) && updateModel) {
var model = this.getModel();
@ -635,7 +600,6 @@ mindplot.Topic = new Class({
_buildShape : function() {
var groupAttributes = {width: 100, height:100,coordSizeWidth:100,coordSizeHeight:100};
var group = new web2d.Group(groupAttributes);
group._peer._native.virtualRef = this;
this._set2DElement(group);
// Shape must be build based on the model width ...
@ -644,18 +608,15 @@ mindplot.Topic = new Class({
var textShape = this.getTextShape();
var shrinkConnector = this.getShrinkConnector();
// Update figure size ...
var model = this.getModel();
var size = model.getSize();
this._setSize(size);
// Add to the group ...
group.appendChild(outerShape);
group.appendChild(innerShape);
group.appendChild(textShape);
// Update figure size ...
var model = this.getModel();
if (model.getLinks().length != 0 || model.getNotes().length != 0 || model.getIcons().length != 0) {
iconGroup = this.getOrBuildIconGroup();
this.getOrBuildIconGroup();
}
if (this.getType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
@ -664,6 +625,9 @@ mindplot.Topic = new Class({
// Register listeners ...
this._registerDefaultListenersToElement(group, this);
// Put all the topic elements in place ...
this._adjustShapes(false);
},
_registerDefaultListenersToElement : function(elem, topic) {
@ -1178,42 +1142,40 @@ mindplot.Topic = new Class({
return result;
},
updateNode : function(updatePosition) {
if (this.isInWorkspace()) {
_adjustShapes : function(updatePosition) {
(function() {
var textShape = this.getTextShape();
var sizeWidth = textShape.getWidth();
var sizeHeight = textShape.getHeight();
var iconOffset = this.getIconOffset();
var height = sizeHeight + this._offset;
var width = sizeWidth + this._offset * 2 + iconOffset + 2;
var pos = this._offset / 2 - 1;
if (this.getShapeType() == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) {
var factor = 0.25;
height = (width * factor < height ? height : width * factor);
pos = (height - sizeHeight + 3) / 2;
var textWidth = textShape.getWidth();
var textHeight = textShape.getHeight();
var topicPadding = this._getInnerPadding();
var iconGroup = this.getOrBuildIconGroup();
var iconsWidth = iconGroup.getSize().width;
if (iconsWidth != 0) {
// Add a extra padding between the text and the icons
iconsWidth = iconsWidth + (textHeight / 4);
}
var newSize = {width:width,height:height};
this.setSize(newSize, false, updatePosition);
var height = textHeight + (topicPadding * 2);
var width = textWidth + iconsWidth + (topicPadding * 2);
// Positionate node ...
textShape.setPosition(iconOffset + this._offset + 2, pos);
textShape.setTextSize(sizeWidth, sizeHeight);
var iconGroup = this.getIconGroup();
if ($defined(iconGroup))
iconGroup.updateIconGroupPosition();
}
var size = {width:width,height:height};
this.setSize(size, false, updatePosition);
// Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding);
}).delay(0, this);
},
INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid'},
addHelper : function(helper) {
helper.addToGroup(this.get2DElement());
this._helpers.push(helper);
}
});
mindplot.Topic.CONNECTOR_WIDTH = 6;
mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'#dbe2e6',stroke:'1 solid #77555a',x:0,y:0};
mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'0.5 solid'};

7
mindplot/src/main/javascript/XMLMindmapSerializer_Pela.js
View File

@ -66,15 +66,12 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
parentTopic.setAttribute("central", true);
} else {
var parent = topic.getParent();
// if (parent == null || parent.getType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE)
// {
var pos = topic.getPosition();
parentTopic.setAttribute("position", pos.x + ',' + pos.y);
// } else
// {
var order = topic.getOrder();
parentTopic.setAttribute("order", order);
// }
}
var text = topic.getText();

10
mindplot/src/main/javascript/commands/AddIconToTopicCommand.js
View File

@ -21,25 +21,25 @@ mindplot.commands.AddIconToTopicCommand = new Class({
initialize: function(topicId, iconType) {
$assert(topicId, 'topicId can not be null');
$assert(iconType, 'iconType can not be null');
this._objectsIds = topicId;
this._topicsIds = topicId;
this._iconType = iconType;
},
execute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
var iconImg = topic.addIcon(this._iconType, commandContext._designer);
this._iconModel = iconImg.getModel();
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
},
undoExecute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.removeIcon(this._iconModel);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
}

8
mindplot/src/main/javascript/commands/AddLinkToTopicCommand.js
View File

@ -20,20 +20,20 @@ mindplot.commands.AddLinkToTopicCommand = new Class({
Extends:mindplot.Command,
initialize: function(topicId, url) {
$assert(topicId, 'topicId can not be null');
this._objectsIds = topicId;
this._topicsIds = topicId;
this._url = url;
this._id = mindplot.Command._nextUUID();
},
execute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.addLink(this._url, commandContext._designer);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
},
undoExecute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.removeLink();
}.bind(this);

8
mindplot/src/main/javascript/commands/AddNoteToTopicCommand.js
View File

@ -20,20 +20,20 @@ mindplot.commands.AddNoteToTopicCommand = new Class({
Extends:mindplot.Command,
initialize: function(topicId, text) {
$assert(topicId, 'topicId can not be null');
this._objectsIds = topicId;
this._topicsIds = topicId;
this._text = text;
this._id = mindplot.Command._nextUUID();
},
execute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.addNote(this._text);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
},
undoExecute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.removeNote();
}.bind(this);

8
mindplot/src/main/javascript/commands/DeleteCommand.js
View File

@ -20,7 +20,7 @@ mindplot.commands.DeleteCommand = new Class({
Extends:mindplot.Command,
initialize: function(objectIds) {
$assert(objectIds, "objectIds must be defined");
this._objectsIds = objectIds;
this._topicsIds = objectIds;
this._deletedTopicModels = [];
this._parentTopicIds = [];
this._deletedRelationships = [];
@ -28,7 +28,7 @@ mindplot.commands.DeleteCommand = new Class({
},
execute: function(commandContext) {
var topics = commandContext.findTopics(this._objectsIds.nodes);
var topics = commandContext.findTopics(this._topicsIds.nodes);
if (topics.length > 0) {
topics.forEach(
function(topic, index) {
@ -58,7 +58,7 @@ mindplot.commands.DeleteCommand = new Class({
}.bind(this)
);
}
var lines = commandContext.findRelationships(this._objectsIds.relationship);
var lines = commandContext.findRelationships(this._topicsIds.relationship);
if (lines.length > 0) {
lines.forEach(function(line, index) {
if (line.isInWorkspace()) {
@ -70,7 +70,7 @@ mindplot.commands.DeleteCommand = new Class({
},
undoExecute: function(commandContext) {
var topics = commandContext.findTopics(this._objectsIds);
var topics = commandContext.findTopics(this._topicsIds);
var parent = commandContext.findTopics(this._parentTopicIds);
this._deletedTopicModels.forEach(

4
mindplot/src/main/javascript/commands/DragTopicCommand.js
View File

@ -21,7 +21,7 @@ mindplot.commands.DragTopicCommand = new Class({
initialize: function(topicIds, position, order, parentTopic) {
$assert(topicIds, "topicIds must be defined");
this._objectsIds = topicIds;
this._topicsIds = topicIds;
if ($defined(parentTopic))
this._parentId = parentTopic.getId();
@ -31,7 +31,7 @@ mindplot.commands.DragTopicCommand = new Class({
},
execute: function(commandContext) {
var topic = commandContext.findTopics([this._objectsIds])[0];
var topic = commandContext.findTopics([this._topicsIds])[0];
// Save old position ...
var origParentTopic = topic.getOutgoingConnectedTopic();

6
mindplot/src/main/javascript/commands/GenericFunctionCommand.js
View File

@ -23,14 +23,14 @@ mindplot.commands.GenericFunctionCommand = new Class({
$assert(topicsIds, "topicsIds must be defined");
this._value = value;
this._objectsIds = topicsIds;
this._topicsIds = topicsIds;
this._commandFunc = commandFunc;
this._oldValues = [];
this._id = mindplot.Command._nextUUID();
},
execute: function(commandContext) {
if (!this.applied) {
var topics = commandContext.findTopics(this._objectsIds);
var topics = commandContext.findTopics(this._topicsIds);
topics.forEach(function(topic) {
var oldValue = this._commandFunc(topic, this._value);
this._oldValues.push(oldValue);
@ -43,7 +43,7 @@ mindplot.commands.GenericFunctionCommand = new Class({
},
undoExecute: function(commandContext) {
if (this.applied) {
var topics = commandContext.findTopics(this._objectsIds);
var topics = commandContext.findTopics(this._topicsIds);
topics.forEach(function(topic, index) {
this._commandFunc(topic, this._oldValues[index]);

10
mindplot/src/main/javascript/commands/RemoveIconFromTopicCommand.js
View File

@ -22,26 +22,26 @@ mindplot.commands.RemoveIconFromTopicCommand = new Class({
{
$assert(topicIds, 'topicIds can not be null');
$assert(iconModel, 'iconModel can not be null');
this._objectsIds = topicIds;
this._topicsIds = topicIds;
this._iconModel = iconModel;
},
execute: function(commandContext)
{
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.removeIcon(this._iconModel);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
},
undoExecute: function(commandContext)
{
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
var iconType = this._iconModel.getIconType();
var iconImg = topic.addIcon(iconType, commandContext._designer);
this._iconModel = iconImg.getModel();
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
}

8
mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js
View File

@ -20,10 +20,10 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
Extends:mindplot.Command,
initialize: function(topicId) {
$assert(topicId, 'topicId can not be null');
this._objectsIds = topicId;
this._topicsIds = topicId;
},
execute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
this._url = topic._link.getUrl();
var updated = function() {
topic.removeLink();
@ -31,10 +31,10 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
updated.delay(0);
},
undoExecute: function(commandContext) {
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.addLink(this._url, commandContext._designer);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
}

8
mindplot/src/main/javascript/commands/RemoveNoteFromTopicCommand.js
View File

@ -21,11 +21,11 @@ mindplot.commands.RemoveNoteFromTopicCommand = new Class({
initialize: function(topicId)
{
$assert(topicId, 'topicId can not be null');
this._objectsIds = topicId;
this._topicsIds = topicId;
},
execute: function(commandContext)
{
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
this._text = topic._note.getText();
var updated = function() {
topic.removeNote();
@ -34,10 +34,10 @@ mindplot.commands.RemoveNoteFromTopicCommand = new Class({
},
undoExecute: function(commandContext)
{
var topic = commandContext.findTopics(this._objectsIds)[0];
var topic = commandContext.findTopics(this._topicsIds)[0];
var updated = function() {
topic.addNote(this._text,commandContext._designer);
topic.updateNode();
topic._adjustShapes();
}.bind(this);
updated.delay(0);
}

41
mindplot/src/test/javascript/static/editor.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript'
src='../../../../../wise-doc/src/main/webapp/js/mootools-core-1.3.2-full-compat.js'></script>
<script type='text/javascript'
src='../../../../../wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='../../../main/javascript/header.js'></script>
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
<script type='text/javascript' src='../../../main/javascript/widget/ToolbarItem.js'></script>
<script type='text/javascript' src='../../../main/javascript/widget/ColorPalettePanel.js'></script>
<script type='text/javascript'>
window.addEvent("load", function(e) {
var model = {
getValue: function() {
},
setValue : function(value) {
console.log("value:" + value);
}
};
var palette = new mindplot.widget.ColorPalettePanel('myButton', model,"/mindplot/src/main/javascript/widget");
});
</script>
</head>
<body>
<div id="myButton" style="border: 1px red solid">
The button
</div>
</body>
</html>

4
web2d/src/main/javascript/Element.js
View File

@ -87,6 +87,10 @@ web2d.Element = new Class({
addEvent : function(type, listener) {
this._peer.addEvent(type, listener);
},
cloneEvents : function(from) {
this._peer.cloneEvents(from);
},
/**
*
* Allows the removal of event listeners from the event target.

6
web2d/src/main/javascript/Text.js
View File

@ -31,6 +31,12 @@ web2d.Text = new Class({
this._peer.setText(text);
},
setTextAlignment : function(align)
{
$assert(align,"align can not be null");
this._peer.setTextAlignment(align);
},
setTextSize : function(width, height) {
this._peer.setContentSize(width, height);
},

4
web2d/src/main/javascript/peer/svg/ElementPeer.js
View File

@ -82,9 +82,11 @@ web2d.peer.svg.ElementPeer = new Class({
* http://developer.mozilla.org/en/docs/addEvent
*/
addEvent : function(type, listener) {
this._native.addEvent(type, listener);
},
cloneEvents : function(from) {
this._native.cloneEvents(from);
},
removeEvent : function(type, listener) {

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

@ -29,15 +29,41 @@ web2d.peer.svg.TextPeer = new Class({
this._native.appendChild(element._native);
},
setTextAlignment : function(align) {
this._textAlign = align;
},
getTextAlignment : function() {
return $defined(this._textAlign) ? this._textAlign : 'left';
},
setText : function(text) {
text = core.Utils.escapeInvalidTags(text);
var child = this._native.firstChild;
if ($defined(child)) {
this._native.removeChild(child);
}
var childs = this._native.getChildren();
childs.forEach(function(child) {
child.dispose();
});
this._text = text;
var textNode = window.document.createTextNode(text);
this._native.appendChild(textNode);
this.setVisibility(false);
var lines = text.split('\n');
var tspans = [];
lines.forEach(function(line) {
var tspan = window.document.createElementNS(this.svgNamespace, 'tspan');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', this.getPosition().x);
var tspanContent = window.document.createTextNode(line);
tspan.appendChild(tspanContent);
tspans.push(tspan);
this._native.appendChild(tspan);
}.bind(this));
this.setVisibility(true);
},
getText : function() {
@ -46,13 +72,14 @@ web2d.peer.svg.TextPeer = new Class({
setPosition : function(x, y) {
this._position = {x:x, y:y};
var height = this._font.getSize();
if ($defined(this._parent) && $defined(this._native.getBBox))
height = this.getHeight();
var size = parseInt(height);
this._native.setAttribute('y', y + size * 3 / 4);
//y+size/2
this._native.setAttribute('y', y);
this._native.setAttribute('x', x);
// tspan must be positioned manually.
this._native.getElements('tspan').forEach(function(span) {
span.setAttribute('x', x);
});
},
getPosition : function() {

159
web2d/src/test/javascript/render/font.html Normal file
View File

@ -0,0 +1,159 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6,8,10,15].forEach(function(size, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center','left','right'].forEach(function(align, i) {
var wText = new web2d.Text();
overflowWorkspace.appendChild(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(elemId));
}
function initialize() {
web2d.peer.Toolkit.init();
// Multine tests ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head>
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1>
<table border="1">
<colgroup>
<col style="width:30%"/>
<col style="width:60%"/>
</colgroup>
<thead>
<tr>
<td></td>
<td>Arial</td>
<td>Tahoma</td>
<td>Verdana</td>
<td>Times</td>
</tr>
</thead>
<tr>
<td>
Multiline Text
</td>
<td>
<div id="multi0"></div>
</td>
<td>
<div id="multi1"></div>
</td>
<td>
<div id="multi2"></div>
</td>
<td>
<div id="multi3"></div>
</td>
</tr>
<tr>
<td>
Multiline Aligment
</td>
<td>
<div id="amulti0"></div>
</td>
<td>
<div id="amulti1"></div>
</td>
<td>
<div id="amulti2"></div>
</td>
<td>
<div id="amulti3"></div>
</td>
</tr>
<!--**************************************************************************-->
</table>
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

55
web2d/src/test/javascript/render/text.html
View File

@ -15,7 +15,8 @@
web2d.peer.utils = {};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
@ -44,34 +45,25 @@
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
function zoomIn()
{
for(i=0; i<workspaces.length; i++)
{
function zoomIn() {
for (i = 0; i < workspaces.length; i++) {
var coordSize = workspaces[i].getCoordSize();
workspaces[i].setCoordSize(coordSize.width*2,coordSize.height*2);
workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
}
};
workspaces = [];
var textot;
var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
{
var TextTest = function (size, coordSize, textval, font, fontSizeval, style, modifier, fontColor, owner, iesimo) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize(size, size);
overflowWorkspace.setCoordSize(coordSize,coordSize);
overflowWorkspace.setCoordOrigin(0,0);
overflowWorkspace.setCoordSize(coordSize, coordSize);
overflowWorkspace.setCoordOrigin(0, 0);
/*var rect = new web2d.Rect(1 / 10);
rect.setPosition(40, 40);
rect.setSize(20, 20);
overflowWorkspace.appendChild(rect);
*/
var text = new web2d.Text();
overflowWorkspace.appendChild(text);
var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
text.setText(textval+" "+scale.height);
text.setText(textval + " " + scale.height);
text.setFont(font, fontSizeval, style, modifier);
text.setPosition(0, 0);
text.setColor(fontColor);
@ -81,29 +73,29 @@
overflowWorkspace.addItAsChildTo($(owner));
var parent = $(owner);
var span= document.createElement("span");
span.setAttribute("id","textoHTML"+iesimo);
var span = document.createElement("span");
span.setAttribute("id", "textoHTML" + iesimo);
var textsize = text.offsetWidth;
var textHtml=document.createTextNode(textsize);
var fontSize=text.getHtmlFontSize();
var textHtml = document.createTextNode(textsize);
var fontSize = text.getHtmlFontSize();
span.appendChild(textHtml);
//var fontSize=20*scale.height*2;
span.setAttribute("style", "font-weight:"+modifier+";font-style: "+style+"; font-size:"+ fontSize +"pt; font-family: "+font+";width:30;height:30;");
span.setAttribute("style", "font-weight:" + modifier + ";font-style: " + style + "; font-size:" + fontSize + "pt; font-family: " + font + ";width:30;height:30;");
parent.appendChild(span);
workspaces[iesimo]=overflowWorkspace;
workspaces[iesimo] = overflowWorkspace;
};
function initialize(){
function initialize() {
web2d.peer.Toolkit.init();
TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
TextTest("100px", 200, "Test Text", "Arial", 10, "normal", "normal", "red", "text0", 0);
TextTest("100px", 100, "Test Text", "Arial", 10, "normal", "normal", "blue", "text1", 1);
TextTest("100px", 50, "Test Text", "Arial", 10, "normal", "normal", "blue", "text2", 2);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "normal", "blue", "text3", 3);
TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "bold", "green", "text4", 4);
}
</script>
</script>
</head>
<body onload="initialize();">
@ -132,7 +124,8 @@
</table>
<span>Text to Inspect: </span><input type="text" id="iesimo">
<input type="button" value="Inspect" onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Inspect"
onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
<input type="button" value="Zoom In" onclick="zoomIn()">
</body>
</html>

4
wise-doc/pom.xml
View File

@ -70,7 +70,7 @@
</plugin>
<!-- <plugin>
<!-- <plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>jaxws-maven-plugin</artifactId>
<executions>
@ -92,7 +92,7 @@
</wsdlFiles>
</configuration>
</plugin>
-->
-->
</plugins>
</build>

2
wise-doc/src/main/webapp/html/editor.html
View File

@ -81,7 +81,7 @@
// @Todo: This must be persited in the map properties ...
var mapId = '1';
var mapXml = '<map name="38298" version="pela"><topic central="true" text="test" id="1"/></map>';
var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
var editorProperties = {zoom:0.85,saveOnLoad:true};