vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 06:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding fade in - fade out effect when adding new nodes

Browse Source
This commit is contained in:
Pablo Luna 2011-02-09 15:29:09 +01:00
parent 0b742f2577
commit 9a41f3b288
8 changed files with 148 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -271,3 +271,64 @@ core.Utils.calculateDefaultControlPoints = function(srcPos, tarPos){
return [new core.Point(-srcPos.x + x1,-srcPos.y + y1),new core.Point(-tarPos.x + x2,-tarPos.y + y2)];
};
core.Utils.setVisibilityAnimated = function(elems, isVisible, doneFn){
core.Utils.animateVisibility(elems, isVisible, doneFn);
};
core.Utils.setChildrenVisibilityAnimated = function(rootElem, isVisible){
var children = core.Utils._addInnerChildrens(rootElem);
core.Utils.animateVisibility(children, isVisible);
};
core.Utils.animateVisibility = function (elems, isVisible, doneFn){
var _fadeEffect=null;
var _opacity = (isVisible?0:1);
if(isVisible){
elems.forEach(function(child, index){
child.setOpacity(_opacity);
child.setVisibility(isVisible);
});
}
var fadeEffect = function(index)
{
var step = 10;
if((_opacity<=0 && !isVisible) || (_opacity>=1 && isVisible)){
$clear(_fadeEffect);
_fadeEffect = null;
elems.forEach(function(child, index){
child.setVisibility(isVisible);
});
if(core.Utils.isDefined(doneFn))
doneFn.attempt();
}
else{
var fix = 1;
if(isVisible){
fix = -1;
}
_opacity-=(1/step)*fix;
elems.forEach(function(child, index){
child.setOpacity(_opacity);
});
}
};
_fadeEffect =fadeEffect.periodical(30);
};
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());
var relationships = child.getRelationships();
children = children.concat(relationships);
var innerChilds = core.Utils._addInnerChildrens(child);
children = children.concat(innerChilds);
}
return children;
};

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

@ -93,6 +93,15 @@ mindplot.ConnectionLine.prototype.setVisibility = function(value)
this._line2d.setVisibility(value);
};
mindplot.ConnectionLine.prototype.isVisible = function()
{
return this._line2d.isVisible();
};
mindplot.ConnectionLine.prototype.setOpacity = function(opacity){
this._line2d.setOpacity(opacity);
};
mindplot.ConnectionLine.prototype.redraw = function()
{
var line2d = this._line2d;

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

@ -92,10 +92,10 @@ mindplot.CommandContext = new Class({
{
this._designer._removeNode(topic);
},
createTopic:function(model)
createTopic:function(model, isVisible)
{
core.assert(model, "model can not be null");
var topic = this._designer._nodeModelToNodeGraph(model);
var topic = this._designer._nodeModelToNodeGraph(model, isVisible);
// @todo: Is this required ?
var designer = this._designer;
@ -109,9 +109,9 @@ mindplot.CommandContext = new Class({
var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
return model;
},
connect:function(childTopic, parentTopic)
connect:function(childTopic, parentTopic, isVisible)
{
childTopic.connectTo(parentTopic, this._designer._workspace);
childTopic.connectTo(parentTopic, this._designer._workspace, isVisible);
} ,
disconnect:function(topic)
{

11
mindplot/src/main/javascript/MindmapDesigner.js
View File

@ -179,7 +179,7 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
var centralTopicId = centralTopic.getId();
// Execute action ...
var command = new mindplot.commands.AddTopicCommand(model, centralTopicId);
var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true);
this._actionRunner.execute(command);
}.bind(this));
}
@ -325,7 +325,7 @@ mindplot.MindmapDesigner.prototype.createChildForSelectedNode = function()
var parentTopicId = centalTopic.getId();
var childModel = centalTopic.createChildModel();
var command = new mindplot.commands.AddTopicCommand(childModel, parentTopicId);
var command = new mindplot.commands.AddTopicCommand(childModel, parentTopicId, true);
this._actionRunner.execute(command);
};
@ -357,7 +357,7 @@ mindplot.MindmapDesigner.prototype.createSiblingForSelectedNode = function()
var parentTopic = topic.getOutgoingConnectedTopic();
var siblingModel = topic.createSiblingModel();
var parentTopicId = parentTopic.getId();
var command = new mindplot.commands.AddTopicCommand(siblingModel, parentTopicId);
var command = new mindplot.commands.AddTopicCommand(siblingModel, parentTopicId, true);
this._actionRunner.execute(command);
}
@ -545,11 +545,14 @@ mindplot.MindmapDesigner.prototype.redo = function()
this._actionRunner.redo();
};
mindplot.MindmapDesigner.prototype._nodeModelToNodeGraph = function(nodeModel)
mindplot.MindmapDesigner.prototype._nodeModelToNodeGraph = function(nodeModel, isVisible)
{
core.assert(nodeModel, "Node model can not be null");
var nodeGraph = this._buildNodeGraph(nodeModel);
if(core.Utils.isDefined(isVisible))
nodeGraph.setVisibility(isVisible);
var children = nodeModel.getChildren().slice();
// Sort children by order to solve adding order ...

16
mindplot/src/main/javascript/RelationshipLine.js
View File

@ -101,8 +101,8 @@ mindplot.RelationshipLine.prototype.redraw = function()
mindplot.RelationshipLine.prototype._positionateArrows = function()
{
this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow);
this._endArrow.setVisibility(this.isVisible() && this._showEndArrow);
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
var tpos = this._line2d.getTo();
this._endArrow.setFrom(tpos.x, tpos.y);
@ -205,8 +205,16 @@ mindplot.RelationshipLine.prototype.isInWorkspace = function(){
mindplot.RelationshipLine.prototype.setVisibility = function(value)
{
mindplot.RelationshipLine.superClass.setVisibility.call(this,value);
this._endArrow.setVisibility(value);
this._startArrow.setVisibility(value);
this._endArrow.setVisibility(this._showEndArrow && value);
this._startArrow.setVisibility(this._showStartArrow && value);
};
mindplot.RelationshipLine.prototype.setOpacity = function(opacity){
mindplot.RelationshipLine.superClass.setOpacity.call(this,opacity);
if(this._showEndArrow)
this._endArrow.setOpacity(opacity);
if(this._showStartArrow)
this._startArrow.setOpacity(opacity);
};
mindplot.RelationshipLine.prototype.setShowEndArrow = function(visible){

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

@ -36,10 +36,10 @@ mindplot.ShirinkConnector = function(topic)
{
topic.setChildrenShrinked(isShrink);
return !isShrink;
}
};
var command = new mindplot.commands.GenericFunctionCommand(commandFunc, isShrink, [topicId]);
actionRunner.execute(command)
actionRunner.execute(command);
new Event(event).stop();
@ -94,6 +94,11 @@ mindplot.ShirinkConnector.prototype.setVisibility = function(value)
this._elipse.setVisibility(value);
}
mindplot.ShirinkConnector.prototype.setOpacity = function(opacity)
{
this._elipse.setOpacity(opacity);
}
mindplot.ShirinkConnector.prototype.setFill = function(color)
{
this._fillColor = color;

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

@ -848,15 +848,8 @@ mindplot.Topic.prototype.setChildrenShrinked = function(value)
var shrinkConnector = this.getShrinkConnector();
shrinkConnector.changeRender(value);
// Hide branch in order to avoid flickering...
this._setChildrenVisibility(false);
// Update topic position based on the state ...
var targetTopicBoard = this.getTopicBoard();
targetTopicBoard.repositionate();
// Hide children ...
this._setChildrenVisibility(!value);
core.Utils.setChildrenVisibilityAnimated(this, !value);
};
mindplot.Topic.prototype.getShrinkConnector = function()
@ -999,8 +992,8 @@ mindplot.Topic.prototype.isVisible = function(){
};
mindplot.Topic.prototype._setRelationshipLinesVisibility = function(value){
var relationships = designer.findRelationShipsByTopicId(this.getId());
relationships.forEach(function(relationship, index){
//var relationships = designer.findRelationShipsByTopicId(this.getId());
this._relationships.forEach(function(relationship, index){
relationship.setVisibility(value);
});
};
@ -1021,6 +1014,16 @@ mindplot.Topic.prototype._setTopicVisibility = function(value)
};
mindplot.Topic.prototype.setOpacity = function(opacity){
var elem = this.get2DElement();
elem.setOpacity(opacity);
this.getShrinkConnector().setOpacity(opacity);
var textShape = this .getTextShape();
textShape.setOpacity(opacity);
};
mindplot.Topic.prototype._setChildrenVisibility = function(isVisible)
{
@ -1171,7 +1174,7 @@ mindplot.Topic.prototype.setOrder = function(value)
model.setOrder(value);
};
mindplot.Topic.prototype.connectTo = function(targetTopic, workspace)
mindplot.Topic.prototype.connectTo = function(targetTopic, workspace, isVisible)
{
core.assert(!this._outgoingLine, 'Could not connect an already connected node');
core.assert(targetTopic != this, 'Cilcular connection are not allowed');
@ -1180,6 +1183,8 @@ mindplot.Topic.prototype.connectTo = function(targetTopic, workspace)
// Create a connection line ...
var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
if(core.Utils.isDefined(isVisible))
outgoingLine.setVisibility(isVisible);
this._outgoingLine = outgoingLine;
workspace.appendChild(outgoingLine);
@ -1293,12 +1298,20 @@ mindplot.Topic.prototype.updateNode = function()
var sizeHeight = textShape.getHeight();
var font = textShape.getFont();
var iconOffset = this.getIconOffset();
var height = sizeHeight + this._offset;
var width = sizeWidth + this._offset*2 + iconOffset;
var pos = this._offset /2;
if(this.getShapeType()==mindplot.NodeModel.SHAPE_TYPE_ELIPSE){
var factor = 0.25;
height = (width*factor<height?height:width*factor);
pos = (height-sizeHeight+3)/2;
}
var newSize = {width:sizeWidth + this._offset*2 + iconOffset,height:sizeHeight + this._offset};
var newSize = {width:width,height:height};
this.setSize(newSize);
// Positionate node ...
textShape.setPosition(iconOffset+this._offset, this._offset / 2);
textShape.setPosition(iconOffset+this._offset, pos);
textShape.setTextSize(sizeWidth, sizeHeight);
}
};

22
mindplot/src/main/javascript/commands/AddTopicCommand.js
View File

@ -18,33 +18,49 @@
mindplot.commands.AddTopicCommand = mindplot.Command.extend(
{
initialize: function(model, parentTopicId)
initialize: function(model, parentTopicId, animated)
{
core.assert(model, 'Model can not be null');
this._model = model;
this._parentId = parentTopicId;
this._id = mindplot.Command._nextUUID();
this._animated = core.Utils.isDefined(animated)?animated:false;
},
execute: function(commandContext)
{
// Add a new topic ...
var topic = commandContext.createTopic(this._model);
var topic = commandContext.createTopic(this._model, !this._animated);
// Connect to topic ...
if (this._parentId)
{
var parentTopic = commandContext.findTopics(this._parentId)[0];
commandContext.connect(topic, parentTopic);
commandContext.connect(topic, parentTopic, !this._animated);
}
var doneFn = function(){
// Finally, focus ...
topic.setOnFocus(true);
};
if(this._animated){
core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()],true,doneFn);
} else
doneFn.attempt();
},
undoExecute: function(commandContext)
{
// Finally, delete the topic from the workspace ...
var topicId = this._model.getId();
var topic = commandContext.findTopics(topicId)[0];
var doneFn = function(){
commandContext.deleteTopic(topic);
};
if(this._animated){
core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()],false, doneFn);
}
else
doneFn.attempt();
}
});