From 24047e02bb753fba80cc43880574f3f598b93dce Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 7 Mar 2012 01:13:50 -0300 Subject: [PATCH] Add support for Images on nodes. --- core-js/src/main/javascript/Utils.js | 40 +++--- mindplot/src/main/javascript/Designer.js | 12 +- .../src/main/javascript/DesignerKeyboard.js | 6 +- mindplot/src/main/javascript/DragConnector.js | 4 +- mindplot/src/main/javascript/DragTopic.js | 2 +- mindplot/src/main/javascript/MainTopic.js | 15 +-- mindplot/src/main/javascript/NodeGraph.js | 6 +- mindplot/src/main/javascript/Topic.js | 116 ++++++++++-------- .../src/main/javascript/model/INodeModel.js | 8 +- .../src/main/javascript/model/NodeModel.js | 8 +- .../persistence/XMLSerializer_Pela.js | 16 +++ .../src/main/javascript/peer/svg/ImagePeer.js | 1 + .../src/main/webapp/samples/welcome.xml | 4 +- wise-webapp/pom.xml | 1 + 14 files changed, 143 insertions(+), 96 deletions(-) diff --git a/core-js/src/main/javascript/Utils.js b/core-js/src/main/javascript/Utils.js index 005483d7..9c1f9651 100644 --- a/core-js/src/main/javascript/Utils.js +++ b/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) { - 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; }; \ No newline at end of file diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 76217500..8f9e92c4 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/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) { - 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); diff --git a/mindplot/src/main/javascript/DesignerKeyboard.js b/mindplot/src/main/javascript/DesignerKeyboard.js index 074dc18a..fa396b17 100644 --- a/mindplot/src/main/javascript/DesignerKeyboard.js +++ b/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; diff --git a/mindplot/src/main/javascript/DragConnector.js b/mindplot/src/main/javascript/DragConnector.js index 633636c0..6342ef60 100644 --- a/mindplot/src/main/javascript/DragConnector.js +++ b/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) { - 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) { diff --git a/mindplot/src/main/javascript/DragTopic.js b/mindplot/src/main/javascript/DragTopic.js index 7e1d085e..a39a8ef3 100644 --- a/mindplot/src/main/javascript/DragTopic.js +++ b/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; diff --git a/mindplot/src/main/javascript/MainTopic.js b/mindplot/src/main/javascript/MainTopic.js index 57e6e9af..02152fa2 100644 --- a/mindplot/src/main/javascript/MainTopic.js +++ b/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); - 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; }, diff --git a/mindplot/src/main/javascript/NodeGraph.js b/mindplot/src/main/javascript/NodeGraph.js index e12058a1..53d0771c 100644 --- a/mindplot/src/main/javascript/NodeGraph.js +++ b/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() { diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index 15ec72d8..65a8ebbb 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/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) { - 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); } } diff --git a/mindplot/src/main/javascript/model/INodeModel.js b/mindplot/src/main/javascript/model/INodeModel.js index e0e98570..8ee1d1ce 100644 --- a/mindplot/src/main/javascript/model/INodeModel.js +++ b/mindplot/src/main/javascript/model/INodeModel.js @@ -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 + ")"); diff --git a/mindplot/src/main/javascript/model/NodeModel.js b/mindplot/src/main/javascript/model/NodeModel.js index 3cdefc32..96ddfaf6 100644 --- a/mindplot/src/main/javascript/model/NodeModel.js +++ b/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. - 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) { diff --git a/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js b/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js index d094ecbb..77e6cec1 100644 --- a/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js +++ b/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'); diff --git a/web2d/src/main/javascript/peer/svg/ImagePeer.js b/web2d/src/main/javascript/peer/svg/ImagePeer.js index f1f502f6..be9eed91 100644 --- a/web2d/src/main/javascript/peer/svg/ImagePeer.js +++ b/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) { diff --git a/wise-editor/src/main/webapp/samples/welcome.xml b/wise-editor/src/main/webapp/samples/welcome.xml index 2a762e44..a3ea13e9 100644 --- a/wise-editor/src/main/webapp/samples/welcome.xml +++ b/wise-editor/src/main/webapp/samples/welcome.xml @@ -42,6 +42,8 @@ - + \ No newline at end of file diff --git a/wise-webapp/pom.xml b/wise-webapp/pom.xml index 34ff62b2..1f411082 100644 --- a/wise-webapp/pom.xml +++ b/wise-webapp/pom.xml @@ -442,6 +442,7 @@ org.jvnet.jaxb2.maven2 maven-jaxb2-plugin + 0.8.1 mindmap-generate