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

Add support for Images on nodes.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2012-03-07 01:13:50 -03:00
parent bbfaabd75d
commit 24047e02bb
14 changed files with 143 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -422,7 +422,7 @@ mindplot.Designer = new Class({
$assert(mindmapModel, "mindmapModel can not be null");
this._mindmap = mindmapModel;
try {
// try {
// Init layout manager ...
var size = {width:25,height:25};
var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
@@ -459,9 +459,9 @@ mindplot.Designer = new Class({
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
this.fireEvent('loadSuccess');
} catch(e) {
this.fireEvent('loadError', e);
}
// } catch(e) {
// this.fireEvent('loadError', e);
// }
},
getMindmap : function() {
@@ -595,8 +595,8 @@ mindplot.Designer = new Class({
node.disconnect(this._workspace);
//remove children
while (node._getChildren().length > 0) {
this._removeNode(node._getChildren()[0]);
while (node.getChildren().length > 0) {
this._removeNode(node.getChildren()[0]);
}
this._workspace.removeChild(node);

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

@@ -243,7 +243,7 @@ mindplot.DesignerKeyboard = new Class({
},
_goToBrother : function(designer, node, direction) {
var brothers = node._parent._getChildren();
var brothers = node._parent.getChildren();
var target = node;
var y = node.getPosition().y;
var x = node.getPosition().x;
@@ -280,7 +280,7 @@ mindplot.DesignerKeyboard = new Class({
_goToSideChild : function(designer, node, side) {
var children = node._getChildren();
var children = node.getChildren();
if (children.length > 0) {
var target = children[0];
var top = null;
@@ -311,7 +311,7 @@ mindplot.DesignerKeyboard = new Class({
},
_goToChild : function(designer, node) {
var children = node._getChildren();
var children = node.getChildren();
if (children.length > 0) {
var target = children[0];
var top = target.getPosition().y;

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

@@ -81,8 +81,8 @@ mindplot.DragConnector = new Class({
var targetPosition = targetTopic.getPosition();
var fix = position.y > targetPosition.y;
var gap = 0;
if (targetTopic._getChildren().length > 0) {
gap = Math.abs(targetPosition.y - targetTopic._getChildren()[0].getPosition().y)
if (targetTopic.getChildren().length > 0) {
gap = Math.abs(targetPosition.y - targetTopic.getChildren()[0].getPosition().y)
}
var yDistance = Math.abs(position.y - fix * gap - targetPosition.y);
if (distance == null || yDistance < distance) {

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

@@ -110,7 +110,7 @@ mindplot.DragTopic = new Class({
var targetTopicModel = targetTopic.getModel();
var childTopicModel = draggedNode.getModel();
result = targetTopicModel.canBeConnected(childTopicModel, topicPosition, 18);
result = targetTopicModel.canBeConnected(childTopicModel, topicPosition, 18, targetTopic.getSize());
}
} else {
result = false;

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

@@ -25,7 +25,7 @@ mindplot.MainTopic = new Class({
INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid #009900'},
_buildDragShape : function() {
var innerShape = this.buildShape(this.INNER_RECT_ATTRIBUTES);
var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
var size = this.getSize();
innerShape.setSize(size.width, size.height);
innerShape.setPosition(0, 0);
@@ -45,12 +45,13 @@ mindplot.MainTopic = new Class({
group.appendChild(innerShape);
// Add Text ...
var textShape = this._buildTextShape(true);
var text = this.getText();
textShape.setText(text);
textShape.setOpacity(0.5);
group.appendChild(textShape);
if (this.getShapeType() != mindplot.model.TopicShape.IMAGE) {
var textShape = this._buildTextShape(true);
var text = this.getText();
textShape.setText(text);
textShape.setOpacity(0.5);
group.appendChild(textShape);
}
return group;
},

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

@@ -25,6 +25,7 @@ mindplot.NodeGraph = new Class({
this.setModel(nodeModel);
this._onFocus = false;
this._event = new Events();
this._size = {width:50,height:20};
},
getType : function() {
@@ -73,11 +74,12 @@ mindplot.NodeGraph = new Class({
},
getSize : function() {
return this._model.getSize();
return this._size;
},
setSize : function(size) {
this._model.setSize(parseInt(size.width), parseInt(size.height));
this._size.width = parseInt(size.width);
this._size.height = parseInt(size.height);
},
getModel:function() {

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

@@ -27,7 +27,7 @@ mindplot.Topic = new Class({
this._parent = null;
this._relationships = [];
this._isInWorkspace = false;
this._buildShape();
this._buildTopicShape();
// Position a topic ....
var pos = model.getPosition();
@@ -90,7 +90,7 @@ mindplot.Topic = new Class({
var innerShape = this.getInnerShape();
// Update figure size ...
var size = model.getSize();
var size = this.getSize();
this.setSize(size, true);
var group = this.get2DElement();
@@ -134,7 +134,7 @@ mindplot.Topic = new Class({
getInnerShape : function() {
if (!$defined(this._innerShape)) {
// Create inner box.
this._innerShape = this.buildShape(mindplot.Topic.INNER_RECT_ATTRIBUTES);
this._innerShape = this._buildShape(mindplot.Topic.INNER_RECT_ATTRIBUTES, this.getShapeType());
// Update bgcolor ...
var bgColor = this.getBackgroundColor();
@@ -155,24 +155,36 @@ mindplot.Topic = new Class({
return this._innerShape;
},
buildShape : function(attributes, type) {
var result;
if (!$defined(type)) {
type = this.getShapeType();
}
_buildShape : function(attributes, shapeType) {
$assert(attributes, "attributes can not be null");
$assert(shapeType, "shapeType can not be null");
if (type == mindplot.model.TopicShape.RECTANGLE) {
var result;
if (shapeType == mindplot.model.TopicShape.RECTANGLE) {
result = new web2d.Rect(0, attributes);
}else if(type == mindplot.model.TopicShape.IMAGE){
throw "Must be implemented ...";
} else if (shapeType == mindplot.model.TopicShape.IMAGE) {
var model = this.getModel();
var url = model.getImageUrl();
var size = model.getImageSize();
result = new web2d.Image();
result.setHref(url);
result.setSize(size.width, size.height);
result.getSize = function() {
return model.getImageSize();
};
result.setPosition = function() {
};
}
else if (type == mindplot.model.TopicShape.ELLIPSE) {
else if (shapeType == mindplot.model.TopicShape.ELLIPSE) {
result = new web2d.Rect(0.9, attributes);
}
else if (type == mindplot.model.TopicShape.ROUNDED_RECT) {
else if (shapeType == mindplot.model.TopicShape.ROUNDED_RECT) {
result = new web2d.Rect(0.3, attributes);
}
else if (type == mindplot.model.TopicShape.LINE) {
else if (shapeType == mindplot.model.TopicShape.LINE) {
result = new web2d.Line({strokeColor:"#495879",strokeWidth:1});
result.setSize = function(width, height) {
this.size = {width:width, height:height};
@@ -191,7 +203,6 @@ mindplot.Topic = new Class({
result.setPosition = function() {
};
var setStrokeFunction = result.setStroke;
result.setFill = function() {
};
@@ -201,7 +212,7 @@ mindplot.Topic = new Class({
};
}
else {
$assert(false, "Unsupported figure type:" + type);
$assert(false, "Unsupported figure shapeType:" + shapeType);
}
result.setPosition(0, 0);
return result;
@@ -221,7 +232,7 @@ mindplot.Topic = new Class({
getOuterShape : function() {
if (!$defined(this._outerShape)) {
var rect = this.buildShape(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES, mindplot.model.TopicShape.ROUNDED_RECT);
var rect = this._buildShape(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES, mindplot.model.TopicShape.ROUNDED_RECT);
rect.setPosition(-2, -3);
rect.setOpacity(0);
this._outerShape = rect;
@@ -238,6 +249,7 @@ mindplot.Topic = new Class({
var text = this.getText();
this._setText(text, false);
}
return this._text;
},
@@ -533,7 +545,7 @@ mindplot.Topic = new Class({
return result;
},
_buildShape : function() {
_buildTopicShape : function() {
var groupAttributes = {width: 100, height:100,coordSizeWidth:100,coordSizeHeight:100};
var group = new web2d.Group(groupAttributes);
this._set2DElement(group);
@@ -761,7 +773,7 @@ mindplot.Topic = new Class({
getIncomingLines : function() {
var result = [];
var children = this._getChildren();
var children = this.getChildren();
for (var i = 0; i < children.length; i++) {
var node = children[i];
var line = node.getOutgoingLine();
@@ -868,8 +880,7 @@ mindplot.Topic = new Class({
}
var textShape = this.getTextShape();
textShape.setVisibility(value);
textShape.setVisibility(this.getShapeType() != mindplot.model.TopicShape.IMAGE ? value : false);
},
setOpacity : function(opacity) {
@@ -885,7 +896,7 @@ mindplot.Topic = new Class({
_setChildrenVisibility : function(isVisible) {
// Hide all children.
var children = this._getChildren();
var children = this.getChildren();
var model = this.getModel();
isVisible = isVisible ? !model.areChildrenShrunken() : isVisible;
@@ -975,7 +986,7 @@ mindplot.Topic = new Class({
}
// Hide connection line?.
if (targetTopic._getChildren().length == 0) {
if (targetTopic.getChildren().length == 0) {
var connector = targetTopic.getShrinkConnector();
connector.setVisibility(false);
}
@@ -1009,8 +1020,9 @@ mindplot.Topic = new Class({
// Create a connection line ...
var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
if ($defined(isVisible))
if ($defined(isVisible)) {
outgoingLine.setVisibility(isVisible);
}
this._outgoingLine = outgoingLine;
workspace.appendChild(outgoingLine);
@@ -1044,16 +1056,16 @@ mindplot.Topic = new Class({
},
appendChild : function(child) {
var children = this._getChildren();
var children = this.getChildren();
children.push(child);
},
removeChild : function(child) {
var children = this._getChildren();
var children = this.getChildren();
children.erase(child);
},
_getChildren : function() {
getChildren : function() {
var result = this._children;
if (!$defined(result)) {
this._children = [];
@@ -1111,34 +1123,42 @@ mindplot.Topic = new Class({
_adjustShapes : function() {
if (this._isInWorkspace) {
var textShape = this.getTextShape();
var textWidth = textShape.getWidth();
if (this.getShapeType() != mindplot.model.TopicShape.IMAGE) {
var textHeight = textShape.getHeight();
textHeight = textHeight != 0 ? textHeight : 20;
var textWidth = textShape.getWidth();
var topicPadding = this._getInnerPadding();
var textHeight = textShape.getHeight();
textHeight = textHeight != 0 ? textHeight : 20;
// Adjust the icon size to the size of the text ...
var iconGroup = this.getOrBuildIconGroup();
var fontHeight = this.getTextShape().getFontHeight();
iconGroup.setPosition(topicPadding, topicPadding);
iconGroup.seIconSize(fontHeight, fontHeight);
var topicPadding = this._getInnerPadding();
// Add a extra padding between the text and the icons
var iconsWidth = iconGroup.getSize().width;
if (iconsWidth != 0) {
// Adjust the icon size to the size of the text ...
var iconGroup = this.getOrBuildIconGroup();
var fontHeight = this.getTextShape().getFontHeight();
iconGroup.setPosition(topicPadding, topicPadding);
iconGroup.seIconSize(fontHeight, fontHeight);
iconsWidth = iconsWidth + (textHeight / 4);
// Add a extra padding between the text and the icons
var iconsWidth = iconGroup.getSize().width;
if (iconsWidth != 0) {
iconsWidth = iconsWidth + (textHeight / 4);
}
var height = textHeight + (topicPadding * 2);
var width = textWidth + iconsWidth + (topicPadding * 2);
this.setSize({width:width,height:height});
// Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding);
} else {
// In case of images, the size if fixed ...
var size = this.getModel().getImageSize();
this.setSize(size);
}
var height = textHeight + (topicPadding * 2);
var width = textWidth + iconsWidth + (topicPadding * 2);
this.setSize({width:width,height:height});
// Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding);
}
}

8
mindplot/src/main/javascript/model/INodeModel.js
View File

@@ -69,12 +69,12 @@ mindplot.model.INodeModel = new Class({
return result;
},
setSize : function(width, height) {
this.putProperty('size', '{width:' + width + ',height:' + height + '}');
setImageSize : function(width, height) {
this.putProperty('imageSize', '{width:' + width + ',height:' + height + '}');
},
getSize : function() {
var value = this.getProperty('size');
getImageSize : function() {
var value = this.getProperty('imageSize');
var result = null;
if (value != null) {
result = eval("(" + value + ")");

8
mindplot/src/main/javascript/model/NodeModel.js
View File

@@ -27,7 +27,6 @@ mindplot.model.NodeModel = new Class({
this.setId(id);
this.setType(type);
this.areChildrenShrunken(false);
this.setSize(50, 20);
this._children = [];
this._feature = [];
@@ -123,10 +122,12 @@ mindplot.model.NodeModel = new Class({
this._parent = parent;
},
canBeConnected : function(sourceModel, sourcePosition, targetTopicHeight) {
canBeConnected : function(sourceModel, sourcePosition, targetTopicHeight,targetTopicSize) {
$assert(sourceModel != this, 'The same node can not be parent and child if itself.');
$assert(sourcePosition, 'childPosition can not be null.');
$assert(targetTopicHeight, 'childrenWidth can not be null.');
$assert(targetTopicSize, 'targetTopicSize can not be null.');
// Only can be connected if the node is in the left or rigth.
var targetModel = this;
@@ -135,8 +136,7 @@ mindplot.model.NodeModel = new Class({
var result = false;
if (sourceModel.getType() == mindplot.model.INodeModel.MAIN_TOPIC_TYPE) {
// Finally, check current node ubication.
var targetTopicSize = targetModel.getSize();
// Finally, check current node position ...
var yDistance = Math.abs(sourcePosition.y - targetPosition.y);
var gap = 35 + targetTopicHeight / 2;
if (targetModel.getChildren().length > 0) {

16
mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js
View File

@@ -80,6 +80,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
var shape = topic.getShapeType();
if ($defined(shape)) {
parentTopic.setAttribute('shape', shape);
if (shape == mindplot.model.TopicShape.IMAGE) {
parentTopic.setAttribute('image', topic.getImageSize().width + "," + topic.getImageSize().height + ":" + topic.getImageUrl());
}
}
if (topic.areChildrenShrunken()) {
@@ -242,9 +247,20 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
if ($defined(text)) {
topic.setText(text);
}
var shape = domElem.getAttribute('shape');
if ($defined(shape)) {
topic.setShapeType(shape);
if (shape == mindplot.model.TopicShape.IMAGE) {
var image = domElem.getAttribute('image');
var size = image.substring(0, image.indexOf(':'));
var url = image.substring(image.indexOf(':') + 1, image.length);
topic.setImageUrl(url);
var split = size.split(',');
topic.setImageSize(split[0], split[1]);
}
}
var fontStyle = domElem.getAttribute('fontStyle');