Add support for Images on nodes.

core-js/src/main/javascript/Utils.js

@@ -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) {
+core.Utils.flattenTopicChildElements = function(topic) {
-    var children = [];
+    var result = [];
-    var childs = elem._getChildren();
+
-    for (var i = 0; i < childs.length; i++) {
+    var children = topic.getChildren();
-        var child = childs[i];
+    for (var i = 0; i < children.length; i++) {
-        children.push(child);
+
-        children.push(child.getOutgoingLine());
+        var child = children[i];
+        result.push(child);
+        result.push(child.getOutgoingLine());
+
         var relationships = child.getRelationships();
-        children = children.concat(relationships);
+        result = result.concat(relationships);
-        var innerChilds = core.Utils._addInnerChildrens(child);
+
-        children = children.concat(innerChilds);
+        var innerChilds = core.Utils.flattenTopicChildElements(child);
+        result = result.concat(innerChilds);
     }
-    return children;
+    return result;
 };

mindplot/src/main/javascript/Designer.js

@@ -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) {
+//            } catch(e) {
-                this.fireEvent('loadError', 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) {
+                while (node.getChildren().length > 0) {
-                    this._removeNode(node._getChildren()[0]);
+                    this._removeNode(node.getChildren()[0]);
                 }
 
                 this._workspace.removeChild(node);

mindplot/src/main/javascript/DesignerKeyboard.js

@@ -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;

mindplot/src/main/javascript/DragConnector.js

@@ -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) {
+                    if (targetTopic.getChildren().length > 0) {
-                        gap = Math.abs(targetPosition.y - targetTopic._getChildren()[0].getPosition().y)
+                        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) {

mindplot/src/main/javascript/DragTopic.js

@@ -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;

mindplot/src/main/javascript/MainTopic.js

@@ -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);
+        if (this.getShapeType() != mindplot.model.TopicShape.IMAGE) {
-        var text = this.getText();
+            var textShape = this._buildTextShape(true);
-        textShape.setText(text);
+            var text = this.getText();
-        textShape.setOpacity(0.5);
+            textShape.setText(text);
-        group.appendChild(textShape);
+            textShape.setOpacity(0.5);
-
+            group.appendChild(textShape);
+        }
         return group;
     },
 

mindplot/src/main/javascript/NodeGraph.js

@@ -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() {

mindplot/src/main/javascript/Topic.js

@@ -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) {
+    _buildShape : function(attributes, shapeType) {
-        var result;
+        $assert(attributes, "attributes can not be null");
-        if (!$defined(type)) {
+        $assert(shapeType, "shapeType can not be null");
-            type = this.getShapeType();
-        }
 
-        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){
+        } else if (shapeType == mindplot.model.TopicShape.IMAGE) {
-            throw "Must be implemented ...";
+            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();
+                var textWidth = textShape.getWidth();
-            textHeight = textHeight != 0 ? textHeight : 20;
 
-            var topicPadding = this._getInnerPadding();
+                var textHeight = textShape.getHeight();
+                textHeight = textHeight != 0 ? textHeight : 20;
 
-            // Adjust the icon size to the size of the text ...
+                var topicPadding = this._getInnerPadding();
-            var iconGroup = this.getOrBuildIconGroup();
-            var fontHeight = this.getTextShape().getFontHeight();
-            iconGroup.setPosition(topicPadding, topicPadding);
-            iconGroup.seIconSize(fontHeight, fontHeight);
 
-            // Add a extra padding between the text and the icons
+                // Adjust the icon size to the size of the text ...
-            var iconsWidth = iconGroup.getSize().width;
+                var iconGroup = this.getOrBuildIconGroup();
-            if (iconsWidth != 0) {
+                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);
         }
     }
 

mindplot/src/main/javascript/model/INodeModel.js

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

mindplot/src/main/javascript/model/NodeModel.js

@@ -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.
+            // Finally, check current node position ...
-            var targetTopicSize = targetModel.getSize();
             var yDistance = Math.abs(sourcePosition.y - targetPosition.y);
             var gap = 35 + targetTopicHeight / 2;
             if (targetModel.getChildren().length > 0) {

mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js

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

web2d/src/main/javascript/peer/svg/ImagePeer.js

@@ -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) {

wise-editor/src/main/webapp/samples/welcome.xml

@@ -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>

wise-webapp/pom.xml

@@ -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>