zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Text editor works based on absolute position.

Browse Source
This commit is contained in:
Paulo Veiga
2011-08-23 14:25:49 -03:00
parent f036a7684e
commit fb39e32b33
15 changed files with 351 additions and 1420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,10 @@ mindplot.Icon = new Class({
getSize : function() {
return this._image.getSize();
},
getPosition : function() {
return this._image.getPosition();
}
});

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

@@ -17,122 +17,149 @@
*/
mindplot.ImageIcon = new Class({
Extends:mindplot.Icon,
initialize:function(iconModel, topic, designer) {
$assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null');
$assert(designer, 'designer can not be null');
Extends:mindplot.Icon,
initialize:function(topic, iconModel) {
$assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null');
this._topic = topic;
this._iconModel = iconModel;
this._designer = designer;
this._topic = topic;
this._iconModel = iconModel;
// Build graph image representation ...
var iconType = iconModel.getIconType();
var imgUrl = this._getImageUrl(iconType);
// @Todo: Read only must be a property ...
this._readOnly = designer._readOnly;
this.parent(imgUrl);
// Build graph image representation ...
var iconType = iconModel.getIconType();
var imgUrl = this._getImageUrl(iconType);
this.parent(imgUrl);
//Remove
var divContainer = designer.getWorkSpace().getScreenManager().getContainer();
var tip = mindplot.Tip.getInstance(divContainer);
//Remove
if (!this._readOnly) {
var container = new Element('div');
var removeImage = new Element('img');
removeImage.src = "../images/bin.png";
removeImage.inject(container);
var deleteTip = new mindplot.ImageIcon.DeleteTip(this._topic.getId(), this);
if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) {
//Icon
var image = this.getImage();
image.addEvent('click', function() {
removeImage.addEvent('click', function() {
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.removeIconFromTopic(this._topic.getId(), iconModel);
tip.forceClose();
});
var iconType = iconModel.getIconType();
var newIconType = this._getNextFamilyIconId(iconType);
iconModel.setIconType(newIconType);
//Icon
var image = this.getImage();
image.addEvent('click', function() {
var imgUrl = this._getImageUrl(newIconType);
this._image.setHref(imgUrl);
var iconType = iconModel.getIconType();
var newIconType = this._getNextFamilyIconId(iconType);
iconModel.setIconType(newIconType);
}.bind(this));
var imgUrl = this._getImageUrl(newIconType);
this._image.setHref(imgUrl);
}.bind(this));
image.addEvent('mouseover', function(event) {
tip.open(event, container, this);
}.bind(this));
image.addEvent('mouseout', function(event) {
tip.close(event);
});
image.addEvent('mousemove', function(event) {
tip.updatePosition(event);
});
}
},
_getImageUrl : function(iconId) {
return "../icons/" + iconId + ".png";
},
getModel : function() {
return this._iconModel;
},
_getNextFamilyIconId : function(iconId) {
var familyIcons = this._getFamilyIcons(iconId);
$assert(familyIcons != null, "Family Icon not found!");
var result = null;
for (var i = 0; i < familyIcons.length && result == null; i++) {
if (familyIcons[i] == iconId) {
//Is last one?
if (i == (familyIcons.length - 1)) {
result = familyIcons[0];
} else {
result = familyIcons[i + 1];
}
break;
}
}
return result;
},
_getFamilyIcons : function(iconId) {
$assert(iconId != null, "id must not be null");
$assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')");
var result = null;
for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i++) {
var family = mindplot.ImageIcon.prototype.ICON_FAMILIES[i];
var iconFamilyId = iconId.substr(0, iconId.indexOf("_"));
if (family.id == iconFamilyId) {
result = family.icons;
break;
}
}
return result;
},
getId : function() {
return this._iconType;
},
getUiId : function() {
return this._uiId;
image.addEvent('mouseover', function(event) {
deleteTip.show();
});
}
},
_getImageUrl : function(iconId) {
return "../icons/" + iconId + ".png";
},
getModel : function() {
return this._iconModel;
},
_getNextFamilyIconId : function(iconId) {
var familyIcons = this._getFamilyIcons(iconId);
$assert(familyIcons != null, "Family Icon not found!");
var result = null;
for (var i = 0; i < familyIcons.length && result == null; i++) {
if (familyIcons[i] == iconId) {
//Is last one?
if (i == (familyIcons.length - 1)) {
result = familyIcons[0];
} else {
result = familyIcons[i + 1];
}
break;
}
}
return result;
},
_getFamilyIcons : function(iconId) {
$assert(iconId != null, "id must not be null");
$assert(iconId.indexOf("_") != -1, "Invalid icon id (it must contain '_')");
var result = null;
for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i++) {
var family = mindplot.ImageIcon.prototype.ICON_FAMILIES[i];
var iconFamilyId = iconId.substr(0, iconId.indexOf("_"));
if (family.id == iconFamilyId) {
result = family.icons;
break;
}
}
return result;
},
getId : function() {
return this._iconType;
},
getUiId : function() {
return this._uiId;
}
);
});
mindplot.ImageIcon.DeleteTip = new Class({
initialize : function(topicId, icon) {
$assert(topicId, "topicId can not be null");
$assert(icon, "iconModel can not be null");
this._icon = icon;
this._topicId = topicId;
this._registerEvents();
},
_registerEvents : function() {
this._containerElem = this._buildHtml();
this._containerElem.inject($(document.body));
this._containerElem.addEvent('click', function() {
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.removeIconFromTopic(this._topicId, this._icon._iconModel);
this.close();
}.bind(this));
},
show : function() {
this._icon._image.positionRelativeTo(this._containerElem, {
position: 'upperRight',
offset: {x:10,y:-10}
});
this._icon._image.setStroke(1,'dash','red');
},
close : function() {
this._containerElem.dispose();
},
_buildHtml : function() {
var result = new Element('div');
result.setStyles({
zIndex: "8",
width:"10px",
height:"10px",
'background-color':'red'}
);
return result;
}
});
mindplot.ImageIcon.prototype.ICON_FAMILIES = [

29
mindplot/src/main/javascript/MindmapDesigner.js
View File

@@ -39,7 +39,7 @@ mindplot.MindmapDesigner = new Class({
// Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom);
this._readOnly = profile.readOnly;
this._readOnly = profile.readOnly ? true : false;
// Init layout managers ...
this._topics = [];
@@ -112,6 +112,17 @@ mindplot.MindmapDesigner = new Class({
this._actionDispatcher.addTopic(model, centralTopicId, true);
}
}.bind(this));
$(document).addEvent('mousewheel', function(event) {
if (event.wheel > 0) {
this.zoomIn(1.05);
}
else {
this.zoomOut(1.05);
}
}.bind(this));
},
_getTopics : function() {
@@ -201,8 +212,11 @@ mindplot.MindmapDesigner = new Class({
},
zoomOut : function() {
var scale = this._zoom * 1.2;
zoomOut : function(factor) {
if (!factor)
factor = 1.2;
var scale = this._zoom * factor;
if (scale <= 4) {
this._zoom = scale;
this._workspace.setZoom(this._zoom);
@@ -227,8 +241,11 @@ mindplot.MindmapDesigner = new Class({
});
},
zoomIn : function() {
var scale = this._zoom / 1.2;
zoomIn : function(factor) {
if (!factor)
factor = 1.2;
var scale = this._zoom / factor;
if (scale >= 0.3) {
this._zoom = scale;
this._workspace.setZoom(this._zoom);
@@ -640,7 +657,7 @@ mindplot.MindmapDesigner = new Class({
},
changeFontColor : function(color) {
$assert(color,"color can not be null");
$assert(color, "color can not be null");
var validSelectedObjects = this._getValidSelectedObjectsIds();
var topicsIds = validSelectedObjects.nodes;
if (topicsIds.length > 0) {

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

@@ -37,7 +37,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa
if (response.msgCode != "OK")
{
monitor.logError("Save could not be completed. Please,try again in a couple of minutes.");
wLogger.error(response.msgDetails);
// wLogger.error(response.msgDetails);
} else
{
// Execute on success handler ...
@@ -50,7 +50,7 @@ mindplot.PersistanceManager.save = function(mindmap, editorProperties, onSavedHa
errorHandler:function(message) {
var monitor = core.Monitor.getInstance();
monitor.logError("Save could not be completed. Please,try again in a couple of minutes.");
wLogger.error(message);
// wLogger.error(message);
},
verb:"POST",
async: false
@@ -82,7 +82,7 @@ mindplot.PersistanceManager.load = function(mapId)
var msg = response.msgDetails;
var monitor = core.Monitor.getInstance();
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
wLogger.error(msg);
// wLogger.error(msg);
}
},
verb:"GET",
@@ -90,7 +90,7 @@ mindplot.PersistanceManager.load = function(mapId)
errorHandler:function(msg) {
var monitor = core.Monitor.getInstance();
monitor.logFatal("We're sorry, an error has occurred and we can't load your map. Please try again in a few minutes.");
wLogger.error(msg);
// wLogger.error(msg);
}
});

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

@@ -29,12 +29,11 @@ mindplot.TextEditor = new Class({
position:"absolute",
display: "none",
zIndex: "8",
top: 0,
left:0,
width:"500px",
height:"100px"}
);
var inputContainer = new Element('div');
inputContainer.setStyles({
border:"none",
@@ -45,7 +44,7 @@ mindplot.TextEditor = new Class({
var inputText = new Element('input', {type:"text",tabindex:'-1', value:""});
inputText.setStyles({
border:"none",
background:"red"
background:"transparent"
});
inputText.inject(inputContainer);
@@ -58,6 +57,7 @@ mindplot.TextEditor = new Class({
spanElem.setStyle('nowrap', 'nowrap');
spanElem.inject(spanContainer);
return result;
},
@@ -117,8 +117,7 @@ mindplot.TextEditor = new Class({
if (!this.isVisible()) {
//Create editor ui
var editorElem = this._buildEditor();
// @Todo: What element associate ?
editorElem.inject($('mindplot'));
editorElem.inject($(document.body));
this._divElem = editorElem;
this._registerEvents(editorElem);
@@ -146,36 +145,18 @@ mindplot.TextEditor = new Class({
// Set editor's initial size
var displayFunc = function() {
var textShape = topic.getTextShape();
var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer);
var screenPosition = mindplot.util.Converter.topicToScreenPosition(topic);
var textWidth = textShape.getWidth();
var textHeight = textShape.getHeight();
var iconGroup = topic.getIconGroup();
var iconGroupSize;
if ($defined(iconGroup)) {
iconGroupSize = topic.getIconGroup().getSize();
}
else {
iconGroupSize = {width:0, height:0};
}
var position = {x:0,y:0};
position.x = screenPosition.x - ((textWidth * scale.width) / 2) + (((iconGroupSize.width) * scale.width) / 2);
var fixError = 1;
position.y = screenPosition.y - ((textHeight * scale.height) / 2) - fixError;
var elemSize = topic.getSize();
// Position the editor and set the size...
this._setEditorSize(elemSize.width, elemSize.height, scale);
this._setPosition(position.x, position.y, scale);
// Make the editor visible ....
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._getInputElem();
inputElem.focus();
this._changeCursor(inputElem, $defined(defaultText));
@@ -232,7 +213,9 @@ mindplot.TextEditor = new Class({
return this._divElem.getElement('span');
},
_setEditorSize : function (width, height, scale) {
_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";
@@ -275,8 +258,6 @@ mindplot.TextEditor = new Class({
// Remove it form the screen ...
this._divElem.dispose();
this._divElem = null;
console.log("closing ....");
}
}
});

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

@@ -267,7 +267,7 @@ mindplot.Topic = new Class({
for (var i = 0; i < icons.length; i++) {
// Update model identifier ...
var iconModel = icons[i];
var icon = new mindplot.ImageIcon(iconModel, this, designer);
var icon = new mindplot.ImageIcon(this, iconModel);
result.addIcon(icon);
}
@@ -311,7 +311,7 @@ mindplot.Topic = new Class({
this._hasNote = true;
},
addIcon : function(iconType, designer) {
addIcon : function(iconType) {
var iconGroup = this.getOrBuildIconGroup();
var model = this.getModel();
@@ -319,7 +319,7 @@ mindplot.Topic = new Class({
var iconModel = model.createIcon(iconType);
model.addIcon(iconModel);
var imageIcon = new mindplot.ImageIcon(iconModel, this, designer);
var imageIcon = new mindplot.ImageIcon(this, iconModel);
iconGroup.addIcon(imageIcon);
return imageIcon;

2
mindplot/src/main/javascript/collaboration/frameworks/brix/model/NodeModel.js
View File

@@ -32,8 +32,10 @@ mindplot.collaboration.frameworks.brix.model.NodeModel = new Class({
}else{
var text = this._brixModel.get("text");
this.setText(text, false);
var position = this._brixModel.get("position");
this.setPosition(position.get("x"),position.get("y"), false);
var children = this._brixModel.get("children");
for(var i=0; i<children.size(); i++){
var bChild = children.get(i);

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

@@ -24,6 +24,7 @@ mindplot.commands.AddIconToTopicCommand = new Class({
this._selectedObjectsIds = topicId;
this._iconType = iconType;
},
execute: function(commandContext) {
var topic = commandContext.findTopics(this._selectedObjectsIds)[0];
var updated = function() {
@@ -33,6 +34,7 @@ mindplot.commands.AddIconToTopicCommand = new Class({
}.bind(this);
updated.delay(0);
},
undoExecute: function(commandContext) {
var topic = commandContext.findTopics(this._selectedObjectsIds)[0];
var updated = function() {