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

- Add UI cache for position.

Browse Source
This commit is contained in:
Paulo Veiga 2011-11-13 21:18:34 -03:00
parent 68deab8b93
commit a0e13ad9d3
16 changed files with 185 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -371,9 +371,14 @@ mindplot.Designer = new Class({
var nodeModel = branches[i];
var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
// Now, refresh UI changes ...
nodeGraph.enableUICache(false);
// Update shrink render state...
nodeGraph.setBranchVisibility(true);
}
var relationships = mindmapModel.getRelationships();
for (var j = 0; j < relationships.length; j++) {
this._relationshipModelToRelationship(relationships[j]);
@ -381,7 +386,7 @@ mindplot.Designer = new Class({
// Place the focus on the Central Topic
var centralTopic = this.getModel().getCentralTopic();
this.goToNode.attempt(centralTopic, this);
this.goToNode(centralTopic);
},
getMindmap : function() {
@ -416,8 +421,7 @@ mindplot.Designer = new Class({
var workspace = this._workspace;
workspace.appendChild(nodeGraph);
return nodeGraph;
}
,
},
_relationshipModelToRelationship : function(model) {
$assert(model, "Node model can not be null");

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

@ -52,6 +52,6 @@ mindplot.LinkIcon = new Class({
actionDispatcher.removeLinkFromTopic(this._topic.getId());
}
});
mindplot.LinkIcon.IMAGE_URL = "../nicons/links.png";
mindplot.LinkIcon.IMAGE_URL = "../images/links.png";

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

@ -137,12 +137,8 @@ mindplot.MainTopic = new Class({
return "MainTopic";
},
_updatePositionOnChangeSize : function(oldSize, newSize, updatePosition) {
_updatePositionOnChangeSize : function(oldSize, newSize) {
if (!updatePosition && this.getModel().getFinalPosition()) {
this.setPosition(this.getModel().getFinalPosition(), false);
}
else {
var xOffset = Math.round((newSize.width - oldSize.width) / 2);
var pos = this.getPosition();
if ($defined(pos)) {
@ -153,15 +149,6 @@ mindplot.MainTopic = new Class({
}
this.setPosition(pos);
}
}
},
setPosition : function(point, fireEvent) {
this.parent(point);
// Update board zero entry position...
if (fireEvent != false)
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMoveEvent, [this]);
},
workoutIncomingConnectionPoint : function(sourcePosition) {
@ -197,8 +184,6 @@ mindplot.MainTopic = new Class({
var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
var result;
if (this.getShapeType() == mindplot.model.INodeModel.SHAPE_TYPE_LINE) {
// if (!this.isConnectedToCentralTopic())
// {
result = new core.Point();
if (!isAtRight) {
result.x = pos.x + (size.width / 2);
@ -206,27 +191,7 @@ mindplot.MainTopic = new Class({
result.x = pos.x - (size.width / 2);
}
result.y = pos.y + (size.height / 2);
/*} else
{
// In this case, connetion line is not used as shape figure.
result = mindplot.util.Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
result.y = pos.y + (size.height / 2);
*/
/*if(result.y>0){
result.y+=1;
}*/
/*
// Correction factor ...
if (!isAtRight)
{
result.x = result.x + 2;
} else
{
result.x = result.x - 2;
}
}*/
} else {
result = mindplot.util.Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
}

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

@ -75,8 +75,7 @@ mindplot.MainTopicBoard = new Class({
var order = entry.getOrder();
dragTopic.setOrder(order);
}
,
},
/**
* This x distance doesn't take into account the size of the shape.

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

@ -45,11 +45,8 @@ mindplot.NodeGraph = new Class({
return this._elem2d;
},
setPosition : function(point) {
// Elements are positioned in the center.
var size = this._model.getSize();
this._elem2d.setPosition(point.x - (size.width / 2), point.y - (size.height / 2));
this._model.setPosition(point.x, point.y);
setPosition : function(point, fireEvent) {
throw "Unsupported operation";
},
addEvent : function(type, listener) {
@ -64,7 +61,7 @@ mindplot.NodeGraph = new Class({
fireEvent: function(type) {
var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
elem.fireEvent(type,this);
elem.fireEvent(type, this);
},
setMouseEventsEnabled : function(isEnabled) {
@ -158,8 +155,8 @@ mindplot.NodeGraph.create = function(nodeModel, options) {
if (type == mindplot.model.INodeModel.MAIN_TOPIC_TYPE) {
result = new mindplot.MainTopic(nodeModel, options);
} else {
assert(false, "unsupported node type:" + type);
$assert(false, "unsupported node type:" + type);
}
return result;
}
};

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

@ -83,5 +83,5 @@ mindplot.NoteIcon = new Class({
}
});
mindplot.NoteIcon.IMAGE_URL = "../nicons/notes.png";
mindplot.NoteIcon.IMAGE_URL = "../images/notes.png";

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

@ -53,8 +53,8 @@ mindplot.StandaloneActionDispatcher = new Class({
this.execute(command);
},
deleteTopics: function(topicsIds,relIds) {
var command = new mindplot.commands.DeleteCommand(topicsIds,relIds);
deleteTopics: function(topicsIds, relIds) {
var command = new mindplot.commands.DeleteCommand(topicsIds, relIds);
this.execute(command);
},
@ -258,7 +258,9 @@ mindplot.CommandContext = new Class({
createTopic:function(model, isVisible) {
$assert(model, "model can not be null");
return this._designer._nodeModelToNodeGraph(model, isVisible);
var result = this._designer._nodeModelToNodeGraph(model, isVisible);
result.enableUICache(false);
return result;
},
createModel:function() {

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

@ -42,6 +42,36 @@ mindplot.Topic = new Class({
this._registerEvents();
}
this._cacheUIEnabled = true;
this._iuCache = {};
},
isUICacheEnabled : function() {
return this._cacheUIEnabled;
},
enableUICache : function(value) {
this._cacheUIEnabled = value;
if (!value) {
this._flushUIUpdate();
}
// Propagate the change to the children nodes ...
var children = this._getChildren();
for (var i = 0; i < children.length; i++) {
var node = children[i];
node.enableUICache(value);
}
},
_flushUIUpdate: function() {
var position = this._iuCache['position'];
if (position) {
this.setPosition(position);
}
this._iuCache = {};
},
_registerEvents : function() {
@ -305,6 +335,7 @@ mindplot.Topic = new Class({
this._link = new mindplot.LinkIcon(this, linkModel);
iconGroup.addIcon(this._link);
this._adjustShapes();
},
@ -317,6 +348,7 @@ mindplot.Topic = new Class({
this._note = new mindplot.NoteIcon(this, noteModel);
iconGroup.addIcon(this._note);
this._adjustShapes();
},
@ -402,7 +434,7 @@ mindplot.Topic = new Class({
return this._relationships;
},
_buildTextShape : function(disableEventsListeners) {
_buildTextShape : function(readOnly) {
var result = new web2d.Text();
var family = this.getFontFamily();
var size = this.getFontSize();
@ -413,7 +445,7 @@ mindplot.Topic = new Class({
var color = this.getFontColor();
result.setColor(color);
if (!disableEventsListeners) {
if (!readOnly) {
// Propagate mouse events ...
if (this.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
result.setCursor('move');
@ -469,6 +501,7 @@ mindplot.Topic = new Class({
var model = this.getModel();
model.setFontWeight(value);
}
this._adjustShapes();
},
getFontWeight : function() {
@ -538,11 +571,11 @@ mindplot.Topic = new Class({
var model = this.getModel();
model.setText(text);
}
this._adjustShapes(updateModel);
},
setText : function(text) {
this._setText(text, true);
this._adjustShapes();
},
getText : function() {
@ -558,16 +591,15 @@ mindplot.Topic = new Class({
this._setBackgroundColor(color, true);
},
_setBackgroundColor : function(color, updateModel) {
_setBackgroundColor : function(color) {
var innerShape = this.getInnerShape();
innerShape.setFill(color);
var connector = this.getShrinkConnector();
connector.setFill(color);
if ($defined(updateModel) && updateModel) {
var model = this.getModel();
model.setBackgroundColor(color);
}
},
getBackgroundColor : function() {
@ -634,9 +666,6 @@ mindplot.Topic = new Class({
// Register listeners ...
this._registerDefaultListenersToElement(group, this);
// Put all the topic elements in place ...
this._adjustShapes(false);
},
_registerDefaultListenersToElement : function(elem, topic) {
@ -795,6 +824,14 @@ mindplot.Topic = new Class({
* Point: references the center of the rect shape.!!!
*/
setPosition : function(point) {
$assert(point,"position can not be null");
// Update model's position ...
var model = this.getModel();
var currentPos = model.getPosition();
model.setPosition(point.x, point.y);
if (!this.isUICacheEnabled()) {
// Elements are positioned in the center.
// All topic element must be positioned based on the innerShape.
var size = this.getSize();
@ -805,15 +842,21 @@ mindplot.Topic = new Class({
// Update visual position.
this._elem2d.setPosition(cx, cy);
// Update model's position ...
var model = this.getModel();
model.setPosition(point.x, point.y);
// Update connection lines ...
this._updateConnectionLines();
// Check object state.
this.invariant();
} else {
this._iuCache['position'] = point;
}
if (!$defined(currentPos) || currentPos.x != point.x || currentPos.y != point.y) {
// Fire Listener events ...
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMoveEvent, [this]);
}
},
getOutgoingLine : function() {
@ -986,21 +1029,21 @@ mindplot.Topic = new Class({
innerShape.setSize(parseInt(size.width), parseInt(size.height));
},
setSize : function(size, force, updatePosition) {
setSize : function(size) {
var oldSize = this.getSize();
if (oldSize.width != size.width || oldSize.height != size.height || force) {
if (parseInt(oldSize.width) != parseInt(size.width) || parseInt(oldSize.height) != parseInt(size.height)) {
this._setSize(size);
// Update the figure position(ej: central topic must be centered) and children position.
this._updatePositionOnChangeSize(oldSize, size, updatePosition);
this._updatePositionOnChangeSize(oldSize, size);
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeResizeEvent, [this]);
}
},
_updatePositionOnChangeSize : function(oldSize, newSize, updatePosition) {
$assert(false, "this method must be overided");
_updatePositionOnChangeSize : function(oldSize, newSize) {
$assert(false, "this method must be overrited");
},
disconnect : function(workspace) {
@ -1042,7 +1085,6 @@ mindplot.Topic = new Class({
var connector = targetTopic.getShrinkConnector();
connector.setVisibility(false);
}
}
},
@ -1137,6 +1179,7 @@ mindplot.Topic = new Class({
var elem = this.get2DElement();
workspace.appendChild(elem);
this._isInWorkspace = true;
this._adjustShapes();
},
isInWorkspace : function() {
@ -1158,8 +1201,8 @@ mindplot.Topic = new Class({
return result;
},
_adjustShapes : function(updatePosition) {
(function() {
_adjustShapes : function() {
if (this._isInWorkspace) {
var textShape = this.getTextShape();
var textWidth = textShape.getWidth();
@ -1184,12 +1227,12 @@ mindplot.Topic = new Class({
var height = textHeight + (topicPadding * 2);
var width = textWidth + iconsWidth + (topicPadding * 2);
var size = {width:width,height:height};
this.setSize(size, false, updatePosition);
var size = {width:parseInt(width),height:parseInt(height)};
this.setSize(size);
// Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding);
}).delay(0, this);
}
},
addHelper : function(helper) {

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

@ -163,6 +163,7 @@ mindplot.VariableDistanceBoard = new Class({
this._entries.set(index, entry);
},
freeEntry:function(entry) {
var order = entry.getOrder();
var entries = this._entries;

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

@ -71,6 +71,7 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
parentTopic.setAttribute("position", pos.x + ',' + pos.y);
var order = topic.getOrder();
if (!isNaN(order))
parentTopic.setAttribute("order", order);
}
@ -186,11 +187,11 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
if (lineType == mindplot.ConnectionLine.CURVED || lineType == mindplot.ConnectionLine.SIMPLE_CURVED) {
if ($defined(relationship.getSrcCtrlPoint())) {
var srcPoint = relationship.getSrcCtrlPoint();
relationDom.setAttribute("srcCtrlPoint", srcPoint.x + "," + srcPoint.y);
relationDom.setAttribute("srcCtrlPoint", Math.round(srcPoint.x) + "," + Math.round(srcPoint.y));
}
if ($defined(relationship.getDestCtrlPoint())) {
var destPoint = relationship.getDestCtrlPoint();
relationDom.setAttribute("destCtrlPoint", destPoint.x + "," + destPoint.y);
relationDom.setAttribute("destCtrlPoint", Math.round(destPoint.x) + "," + Math.round(destPoint.y));
}
}
relationDom.setAttribute("endArrow", relationship.getEndArrow());
@ -238,6 +239,7 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
_deserializeNode : function(domElem, mindmap) {
var type = (domElem.getAttribute('central') != null) ? mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE : mindplot.model.INodeModel.MAIN_TOPIC_TYPE;
// Load attributes...
var id = domElem.getAttribute('id');
if ($defined(id)) {
@ -311,7 +313,7 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
if ($defined(position)) {
var pos = position.split(',');
topic.setPosition(pos[0], pos[1]);
topic.setFinalPosition(pos[0], pos[1]);
// topic.setFinalPosition(pos[0], pos[1]);
}
//Creating icons and children nodes
@ -335,7 +337,6 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
}
}
}
;
return topic;
},

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

@ -39,28 +39,34 @@ mindplot.commands.DragTopicCommand = new Class({
var origOrder = null;
var origPosition = null;
// Cache nodes position ...
var topics = designer.getModel().getTopics();
topics.forEach(function(topic) {
topic.enableUICache(true);
});
// In this case, topics are positioned using order ...
origOrder = topic.getOrder();
origPosition = topic.getPosition();
// Disconnect topic ..
if ($defined(origParentTopic)) {
if ($defined(origParentTopic) && origParentTopic != this._parentId) {
commandContext.disconnect(topic);
}
// Set topic order ...
if (this._order != null) {
topic.setOrder(this._order);
} else if (this._position != null) {
// Set position ...
topic.setPosition(this._position);
} else {
$assert("Illegal commnad state exception.");
}
// Finally, connect topic ...
if (origParentTopic != this._parentId) {
if ($defined(this._parentId)) {
var parentTopic = commandContext.findTopics([this._parentId])[0];
commandContext.connect(topic, parentTopic);
@ -71,11 +77,15 @@ mindplot.commands.DragTopicCommand = new Class({
if ($defined(origParentTopic)) {
this._parentId = origParentTopic.getId();
}
}
// Store for undo ...
this._order = origOrder;
this._position = origPosition;
topics.forEach(function(topic) {
topic.enableUICache(false);
});
},

65
mindplot/src/main/javascript/layout/BaseLayoutManager.js
View File

@ -8,80 +8,89 @@ mindplot.layout.BaseLayoutManager = new Class({
this.setOptions(options);
this._createBoard();
this._designer = designer;
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeResizeEvent,this._nodeResizeEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeMoveEvent,this._nodeMoveEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeDisconnectEvent,this._nodeDisconnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeConnectEvent,this._nodeConnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeRepositionateEvent,this._nodeRepositionateEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeShrinkEvent,this._nodeShrinkEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeResizeEvent, this._nodeResizeEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeMoveEvent, this._nodeMoveEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeDisconnectEvent, this._nodeDisconnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeRepositionateEvent, this._nodeRepositionateEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
},
_nodeResizeEvent:function(node){
_nodeResizeEvent:function(node) {
},
_nodeMoveEvent:function(node){
_nodeMoveEvent:function(node) {
var modifiedTopics = [];
this.getTopicBoardForTopic(node).updateChildrenPosition(node, modifiedTopics);
},
_nodeDisconnectEvent:function(targetNode, node){
_nodeDisconnectEvent:function(targetNode, node) {
var modifiedTopics = [];
this.getTopicBoardForTopic(targetNode).removeTopicFromBoard(node,modifiedTopics);
this.getTopicBoardForTopic(targetNode).removeTopicFromBoard(node, modifiedTopics);
},
_nodeConnectEvent:function(targetNode, node){
_nodeConnectEvent:function(targetNode, node) {
var modifiedTopics = [];
this.getTopicBoardForTopic(targetNode).addBranch(node,modifiedTopics);
this.getTopicBoardForTopic(targetNode).addBranch(node, modifiedTopics);
},
_nodeRepositionateEvent:function(node){
_nodeRepositionateEvent:function(node) {
var modifiedTopics = [];
this.getTopicBoardForTopic(node).updateChildrenPosition(node, modifiedTopics);
},
_nodeShrinkEvent:function(node){
_nodeShrinkEvent:function(node) {
},
_createBoard:function(){
_createBoard:function() {
this._boards = new Hash();
},
getTopicBoardForTopic:function(node){
getTopicBoardForTopic:function(node) {
var id = node.getId();
var result = this._boards[id];
if(!$defined(result)){
if (!$defined(result)) {
result = this._addNode(node);
}
return result;
},
_addNode:function(node){
_addNode:function(node) {
var board = null;
if (this._isCentralTopic(node))
board = this._createCentralTopicBoard(node);
else
board = this._createMainTopicBoard(node);
var id = node.getId();
this._boards[id]=board;
this._boards[id] = board;
return board;
},
_createMainTopicBoard:function(node){
_createMainTopicBoard:function(node) {
return new mindplot.layout.boards.Board(node, this);
},
_createCentralTopicBoard:function(node){
_createCentralTopicBoard:function(node) {
return new mindplot.layout.boards.Board(node, this);
},
prepareNode:function(node, children){
prepareNode:function(node, children) {
},
addHelpers:function(node){
addHelpers:function(node) {
},
needsPrepositioning:function(){
needsPrepositioning:function() {
return true;
},
getDesigner:function(){
getDesigner:function() {
return this._designer;
},
_isCentralTopic:function(node){
_isCentralTopic:function(node) {
var type = node.getModel().getType();
return type == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE;
},
getClassName:function(){
getClassName:function() {
return mindplot.layout.BaseLayoutManager.NAME;
}
});
mindplot.layout.BaseLayoutManager.NAME ="BaseLayoutManager";
mindplot.layout.BaseLayoutManager.NAME = "BaseLayoutManager";
mindplot.layout.BaseLayoutManager.implement(new Events);
mindplot.layout.BaseLayoutManager.implement(new Options);

1
mindplot/src/main/javascript/layout/OriginalLayoutManager.js
View File

@ -32,6 +32,7 @@ mindplot.layout.OriginalLayoutManager = new Class({
// Add shapes to speed up the loading process ...
mindplot.DragTopic.init(workSpace);
},
prepareNode:function(node, children) {
// Sort children by order to solve adding order in for OriginalLayoutManager...
var nodesByOrder = new Hash();

4
mindplot/src/main/javascript/layout/boards/freemind/Entry.js
View File

@ -14,7 +14,7 @@ mindplot.layout.boards.freemind.Entry = new Class({
var pwidth = parent.getSize().width;
var width = node.getSize().width;
pos.x = pos.x + Math.sign(pos.x) * (this._DEFAULT_X_GAP + pwidth/2 + width/2);
node.setPosition(pos, false);
node.setPosition(pos);
}
}
@ -42,7 +42,7 @@ mindplot.layout.boards.freemind.Entry = new Class({
position.x = x;
}
this._node.setPosition(position, false);
this._node.setPosition(position);
},
getMarginTop:function(){
return this._marginTop;

8
mindplot/src/main/javascript/widget/Menu.js
View File

@ -393,15 +393,15 @@ mindplot.widget.Menu = new Class({
// designer.addEvent("modelUpdate", function(event) {
// if (event.undoSteps > 0) {
// $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
// $("undoEdition").setStyle("background-image", "url(../images/undo.png)");
// } else {
// $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
// $("undoEdition").setStyle("background-image", "url(../images/undo.png)");
// }
//
// if (event.redoSteps > 0) {
// $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
// $("redoEdition").setStyle("background-image", "url(../images/redo.png)");
// } else {
// $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
// $("redoEdition").setStyle("background-image", "url(../images/redo.png)");
// }
//
// });

8
mindplot/src/main/javascript/widget/TopicShapePanel.js
View File

@ -26,10 +26,10 @@ mindplot.widget.TopicShapePanel = new Class({
var content = new Element("div", {'class':'toolbarPanel','id':'topicShapePanel'});
content.innerHTML = '' +
'<div id="rectagle" model="rectagle"><img src="../nicons/shape-rectangle.png" alt="Rectangle"></div>' +
'<div id="rounded_rectagle" model="rounded rectagle" ><img src="../nicons/shape-rectangle-round.png" alt="Rounded Rectangle"></div>' +
'<div id="line" model="line"><img src="../nicons/shape-line.png" alt="Line"></div>' +
'<div id="elipse" model="elipse"><img src="../nicons/shape-circle.png"></div>';
'<div id="rectagle" model="rectagle"><img src="../images/shape-rectangle.png" alt="Rectangle"></div>' +
'<div id="rounded_rectagle" model="rounded rectagle" ><img src="../images/shape-rectangle-round.png" alt="Rounded Rectangle"></div>' +
'<div id="line" model="line"><img src="../images/shape-line.png" alt="Line"></div>' +
'<div id="elipse" model="elipse"><img src="../images/shape-circle.png"></div>';
return content;