vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-10-05 17:58:36 +02:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
core-js/src/main/javascript/Utils.js
View File

@ -145,7 +145,7 @@ core.Utils.setVisibilityAnimated = function(elems, isVisible, doneFn) {
};
core.Utils.setChildrenVisibilityAnimated = function(rootElem, isVisible) {
var children = core.Utils._addInnerChildrens(rootElem);
var children = core.Utils.flattenTopicChildElements(rootElem);
core.Utils.animateVisibility(children, isVisible);
};
@ -153,21 +153,21 @@ core.Utils.animateVisibility = function (elems, isVisible, doneFn) {
var _fadeEffect = null;
var _opacity = (isVisible ? 0 : 1);
if (isVisible) {
elems.forEach(function(child, index) {
elems.forEach(function(child) {
if ($defined(child)) {
child.setOpacity(_opacity);
child.setVisibility(isVisible);
child.setVisibility(isVisible ? "visible" : "hidden");
}
});
}
var fadeEffect = function(index) {
var fadeEffect = function() {
var step = 10;
if ((_opacity <= 0 && !isVisible) || (_opacity >= 1 && isVisible)) {
$clear(_fadeEffect);
_fadeEffect = null;
elems.forEach(function(child, index) {
elems.forEach(function(child) {
if ($defined(child)) {
child.setVisibility(isVisible);
child.setVisibility(isVisible ? "visible" : "hidden");
}
});
@ -180,7 +180,7 @@ core.Utils.animateVisibility = function (elems, isVisible, doneFn) {
fix = -1;
}
_opacity -= (1 / step) * fix;
elems.forEach(function(child, index) {
elems.forEach(function(child) {
if ($defined(child)) {
child.setOpacity(_opacity);
}
@ -232,17 +232,21 @@ core.Utils.animatePosition = function (elems, doneFn, designer) {
_moveEffect = moveEffect.periodical(10);
};
core.Utils._addInnerChildrens = function(elem) {
var children = [];
var childs = elem._getChildren();
for (var i = 0; i < childs.length; i++) {
var child = childs[i];
children.push(child);
children.push(child.getOutgoingLine());
core.Utils.flattenTopicChildElements = function(topic) {
var result = [];
var children = topic.getChildren();
for (var i = 0; i < children.length; i++) {
var child = children[i];
result.push(child);
result.push(child.getOutgoingLine());
var relationships = child.getRelationships();
children = children.concat(relationships);
var innerChilds = core.Utils._addInnerChildrens(child);
children = children.concat(innerChilds);
result = result.concat(relationships);
var innerChilds = core.Utils.flattenTopicChildElements(child);
result = result.concat(innerChilds);
}
return children;
return result;
};

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');

1
web2d/src/main/javascript/peer/svg/ImagePeer.js
View File

@ -23,6 +23,7 @@ web2d.peer.svg.ImagePeer = new Class({
this.parent(svgElement);
this._position = {x:0,y:0};
this._href = "";
this._native.setAttribute("preserveAspectRatio", "none");
},
setPosition : function(x, y) {

4
wise-editor/src/main/webapp/samples/welcome.xml
View File

@ -42,6 +42,8 @@
<topic position="410,-97" order="2" text="Anyplace, Anytime" id="9"/>
<topic position="386,-73" order="3" text="Free!!!" id="10"/>
</topic>
<topic type="media" size="50,50" image="http://m3.licdn.com/mpr/mpr/shrink_100_100/p/3/000/070/205/1461ef2.jpg" prop="" order="9" position="-336,-100"/>
<topic shape="image"
image="163,80:images/logo-medium.png"
prop="" order="9" position="-336,-100"/>
</topic>
</map>

1
wise-webapp/pom.xml
View File

@ -442,6 +442,7 @@
<plugin>
<groupId>org.jvnet.jaxb2.maven2</groupId>
<artifactId>maven-jaxb2-plugin</artifactId>
<version>0.8.1</version>
<executions>
<execution>
<id>mindmap-generate</id>