Add support for shink on collapsed nodes.

This commit is contained in:
Paulo Veiga 2012-01-11 23:30:26 -03:00
parent 51bc3e563a
commit ef2902d724
20 changed files with 76 additions and 87 deletions

View File

@ -394,7 +394,7 @@ mindplot.Designer = new Class({
getMindmapProperties : function() { getMindmapProperties : function() {
return {zoom:this.getModel().getZoom(), layoutManager:this._layoutManager.getClassName()}; return {zoom:this.getModel().getZoom()};
}, },
loadMap : function(mindmapModel) { loadMap : function(mindmapModel) {

View File

@ -39,8 +39,8 @@ mindplot.DesignerKeyboard = new Class({
var node = model.selectedTopic(); var node = model.selectedTopic();
if (node) { if (node) {
var model = topic.getModel(); var model = topic.getModel();
var isShrink = !model.areChildrenShrinked(); var isShrink = !model.areChildrenShrunken();
topic.setChildrenShrinked(isShrink); topic.setChildrenShrunken(isShrink);
} }
}.bind(this), }.bind(this),
@ -141,7 +141,7 @@ mindplot.DesignerKeyboard = new Class({
if (node.getPosition().x < 0) { if (node.getPosition().x < 0) {
this._goToParent(designer, node); this._goToParent(designer, node);
} }
else if (!node.areChildrenShrinked()) { else if (!node.areChildrenShrunken()) {
this._goToChild(designer, node); this._goToChild(designer, node);
} }
} }
@ -161,7 +161,7 @@ mindplot.DesignerKeyboard = new Class({
if (node.getPosition().x > 0) { if (node.getPosition().x > 0) {
this._goToParent(designer, node); this._goToParent(designer, node);
} }
else if (!node.areChildrenShrinked()) { else if (!node.areChildrenShrunken()) {
this._goToChild(designer, node); this._goToChild(designer, node);
} }
} }

View File

@ -60,7 +60,7 @@ mindplot.DragTopic = new Class({
$assert(targetTopic, 'parent can not be null'); $assert(targetTopic, 'parent can not be null');
var result = true; var result = true;
if (!targetTopic.areChildrenShrinked() && !targetTopic.isCollapsed()) { if (!targetTopic.areChildrenShrunken() && !targetTopic.isCollapsed()) {
// Dragged node can not be connected to himself. // Dragged node can not be connected to himself.
if (targetTopic == this._draggedNode) { if (targetTopic == this._draggedNode) {
result = false; result = false;

View File

@ -19,14 +19,14 @@
mindplot.ShirinkConnector = new Class({ mindplot.ShirinkConnector = new Class({
initialize: function(topic) { initialize: function(topic) {
var elipse = new web2d.Elipse(mindplot.Topic.prototype.INNER_RECT_ATTRIBUTES); var ellipse = new web2d.Elipse(mindplot.Topic.prototype.INNER_RECT_ATTRIBUTES);
this._elipse = elipse; this._ellipse = ellipse;
elipse.setFill('rgb(62,118,179)'); ellipse.setFill('rgb(62,118,179)');
elipse.setSize(mindplot.Topic.CONNECTOR_WIDTH, mindplot.Topic.CONNECTOR_WIDTH); ellipse.setSize(mindplot.Topic.CONNECTOR_WIDTH, mindplot.Topic.CONNECTOR_WIDTH);
elipse.addEvent('click', function(event) { ellipse.addEvent('click', function(event) {
var model = topic.getModel(); var model = topic.getModel();
var collapse = !model.areChildrenShrinked(); var collapse = !model.areChildrenShrunken();
var topicId = topic.getId(); var topicId = topic.getId();
var actionDispatcher = mindplot.ActionDispatcher.getInstance(); var actionDispatcher = mindplot.ActionDispatcher.getInstance();
@ -36,34 +36,35 @@ mindplot.ShirinkConnector = new Class({
}); });
elipse.addEvent('mousedown', function(event) { ellipse.addEvent('mousedown', function(event) {
// Avoid node creation ... // Avoid node creation ...
event.stopPropagation(); event.stopPropagation();
}); });
elipse.addEvent('dblclick', function(event) { ellipse.addEvent('dblclick', function(event) {
// Avoid node creation ... // Avoid node creation ...
event.stopPropagation(); event.stopPropagation();
}); });
elipse.addEvent('mouseover', function(event) { ellipse.addEvent('mouseover', function(event) {
elipse.setFill('rgb(153, 0, 255)'); ellipse.setFill('rgb(153, 0, 255)');
}); });
elipse.addEvent('mouseout', function(event) { ellipse.addEvent('mouseout', function(event) {
var color = topic.getBackgroundColor(); var color = topic.getBackgroundColor();
this.setFill(color); this.setFill(color);
}.bind(this)); }.bind(this));
elipse.setCursor('default'); ellipse.setCursor('default');
this._fillColor = '#f7f7f7'; this._fillColor = '#f7f7f7';
var model = topic.getModel(); var model = topic.getModel();
this.changeRender(model.areChildrenShrinked()); this.changeRender(model.areChildrenShrunken());
}, },
changeRender: function(isShrink) { changeRender: function(isShrink) {
var elipse = this._elipse; var elipse = this._ellipse;
if (isShrink) { if (isShrink) {
elipse.setStroke('2', 'solid'); elipse.setStroke('2', 'solid');
} else { } else {
@ -72,36 +73,35 @@ mindplot.ShirinkConnector = new Class({
}, },
setVisibility: function(value) { setVisibility: function(value) {
this._elipse.setVisibility(value); this._ellipse.setVisibility(value);
}, },
setOpacity: function(opacity) { setOpacity: function(opacity) {
this._elipse.setOpacity(opacity); this._ellipse.setOpacity(opacity);
}, },
setFill: function(color) { setFill: function(color) {
this._fillColor = color; this._fillColor = color;
this._elipse.setFill(color); this._ellipse.setFill(color);
}, },
setAttribute: function(name, value) { setAttribute: function(name, value) {
this._elipse.setAttribute(name, value); this._ellipse.setAttribute(name, value);
}, },
addToWorkspace: function(group) { addToWorkspace: function(group) {
group.appendChild(this._elipse); group.appendChild(this._ellipse);
}, },
setPosition: function(x, y) { setPosition: function(x, y) {
this._elipse.setPosition(x, y); this._ellipse.setPosition(x, y);
}, },
moveToBack: function() { moveToBack: function() {
this._elipse.moveToBack(); this._ellipse.moveToBack();
}, },
moveToFront: function() { moveToFront: function() {
this._elipse.moveToFront(); this._ellipse.moveToFront();
} }
}); });

View File

@ -220,7 +220,7 @@ mindplot.StandaloneActionDispatcher = new Class({
$assert(topicsIds, "topicsIds can not be null"); $assert(topicsIds, "topicsIds can not be null");
var commandFunc = function(topic, isShrink) { var commandFunc = function(topic, isShrink) {
topic.setChildrenShrinked(isShrink); topic.setChildrenShrunken(isShrink);
return !isShrink; return !isShrink;
}; };

View File

@ -696,9 +696,9 @@ mindplot.Topic = new Class({
elem.addEvent('mousedown', mouseDown); elem.addEvent('mousedown', mouseDown);
}, },
areChildrenShrinked : function() { areChildrenShrunken : function() {
var model = this.getModel(); var model = this.getModel();
return model.areChildrenShrinked(); return model.areChildrenShrunken();
}, },
isCollapsed : function() { isCollapsed : function() {
@ -707,16 +707,16 @@ mindplot.Topic = new Class({
var current = this.getParent(); var current = this.getParent();
while (current && !result) { while (current && !result) {
result = current.areChildrenShrinked(); result = current.areChildrenShrunken();
current = current.getParent(); current = current.getParent();
} }
return result; return result;
}, },
setChildrenShrinked : function(value) { setChildrenShrunken : function(value) {
// Update Model ... // Update Model ...
var model = this.getModel(); var model = this.getModel();
model.setChildrenShrinked(value); model.setChildrenShrunken(value);
// Change render base on the state. // Change render base on the state.
var shrinkConnector = this.getShrinkConnector(); var shrinkConnector = this.getShrinkConnector();
@ -724,7 +724,7 @@ mindplot.Topic = new Class({
// Hide children ... // Hide children ...
core.Utils.setChildrenVisibilityAnimated(this, !value); core.Utils.setChildrenVisibilityAnimated(this, !value);
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, [this]); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, this.getModel());
}, },
getShrinkConnector : function() { getShrinkConnector : function() {
@ -741,7 +741,6 @@ mindplot.Topic = new Class({
handleMouseOver : function() { handleMouseOver : function() {
var outerShape = this.getOuterShape(); var outerShape = this.getOuterShape();
outerShape.setOpacity(1); outerShape.setOpacity(1);
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOverEvent, [this]);
}, },
handleMouseOut : function(event) { handleMouseOut : function(event) {
@ -749,7 +748,6 @@ mindplot.Topic = new Class({
if (!this.isOnFocus()) { if (!this.isOnFocus()) {
outerShape.setOpacity(0); outerShape.setOpacity(0);
} }
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOutEvent, [this]);
}, },
showTextEditor : function(text) { showTextEditor : function(text) {
@ -993,7 +991,7 @@ mindplot.Topic = new Class({
var children = this._getChildren(); var children = this._getChildren();
var model = this.getModel(); var model = this.getModel();
isVisible = isVisible ? !model.areChildrenShrinked() : isVisible; isVisible = isVisible ? !model.areChildrenShrunken() : isVisible;
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var child = children[i]; var child = children[i];
child.setVisibility(isVisible); child.setVisibility(isVisible);
@ -1067,7 +1065,6 @@ mindplot.Topic = new Class({
outgoingLine.removeFromWorkspace(workspace); outgoingLine.removeFromWorkspace(workspace);
// Remove from workspace. // Remove from workspace.
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.ONodeDisconnectEvent, [targetTopic, this]);
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeDisconnectEvent, this.getModel()); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeDisconnectEvent, this.getModel());
// Change text based on the current connection ... // Change text based on the current connection ...
@ -1114,9 +1111,6 @@ mindplot.Topic = new Class({
var childModel = this.getModel(); var childModel = this.getModel();
childModel.connectTo(targetModel); childModel.connectTo(targetModel);
// Update topic position based on the state ...
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.ONodeConnectEvent, [targetTopic, this]);
// Create a connection line ... // Create a connection line ...
var outgoingLine = new mindplot.ConnectionLine(this, targetTopic); var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
if ($defined(isVisible)) if ($defined(isVisible))

View File

@ -67,7 +67,7 @@ mindplot.XMLMindmapSerializer_Beta = new Class({
parentTopic.setAttribute('shape', shape); parentTopic.setAttribute('shape', shape);
} }
if (topic.areChildrenShrinked()) { if (topic.areChildrenShrunken()) {
parentTopic.setAttribute('shrink', true); parentTopic.setAttribute('shrink', true);
} }
@ -204,7 +204,7 @@ mindplot.XMLMindmapSerializer_Beta = new Class({
var isShrink = domElem.getAttribute('shrink'); var isShrink = domElem.getAttribute('shrink');
if ($defined(isShrink)) { if ($defined(isShrink)) {
topic.setChildrenShrinked(isShrink); topic.setChildrenShrunken(isShrink);
} }
var fontStyle = domElem.getAttribute('fontStyle'); var fontStyle = domElem.getAttribute('fontStyle');

View File

@ -85,7 +85,7 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
parentTopic.setAttribute('shape', shape); parentTopic.setAttribute('shape', shape);
} }
if (topic.areChildrenShrinked()) { if (topic.areChildrenShrunken()) {
parentTopic.setAttribute('shrink', true); parentTopic.setAttribute('shrink', true);
} }
@ -270,7 +270,7 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
var isShrink = domElem.getAttribute('shrink'); var isShrink = domElem.getAttribute('shrink');
if ($defined(isShrink)) { if ($defined(isShrink)) {
topic.setChildrenShrinked(isShrink); topic.setChildrenShrunken(isShrink);
} }
var fontStyle = domElem.getAttribute('fontStyle'); var fontStyle = domElem.getAttribute('fontStyle');

View File

@ -27,11 +27,11 @@ mindplot.layout.BaseLayoutManager = new Class({
this._createBoard(); this._createBoard();
this._designer = designer; this._designer = designer;
// mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeResizeEvent, this._nodeResizeEvent.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.NodeMoveEvent, this._nodeMoveEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.ONodeDisconnectEvent, this._nodeDisconnectEvent.bind(this)); // mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.ONodeDisconnectEvent, this._nodeDisconnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.ONodeConnectEvent, this._nodeConnectEvent.bind(this)); // mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.ONodeConnectEvent, this._nodeConnectEvent.bind(this));
mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeRepositionateEvent, this._nodeRepositionateEvent.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.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
}, },
_nodeResizeEvent:function(node) { _nodeResizeEvent:function(node) {

View File

@ -131,7 +131,7 @@ mindplot.layout.boards.original.FixedDistanceBoard = new Class({
var entries = this._entries; var entries = this._entries;
var height = 0; var height = 0;
var model = this._topic.getModel(); var model = this._topic.getModel();
if (entries.length >= 1 && !model.areChildrenShrinked()) { if (entries.length >= 1 && !model.areChildrenShrunken()) {
for (var i = 0; i < entries.length; i++) { for (var i = 0; i < entries.length; i++) {
var e = entries[i]; var e = entries[i];
if (e && e.getTopic()) { if (e && e.getTopic()) {

View File

@ -163,25 +163,12 @@ mindplot.model.INodeModel = new Class({
this.putProperty('backgroundColor', color); this.putProperty('backgroundColor', color);
}, },
areChildrenShrinked : function() { areChildrenShrunken : function() {
return this.getProperty('childrenShrinked'); return this.getProperty('shrunken');
}, },
setChildrenShrinked : function(value) { setChildrenShrunken : function(value) {
this.putProperty('childrenShrinked', value); this.putProperty('shrunken', value);
},
setFinalPosition : function(x, y) {
$assert(x, "x coordinate must be defined");
$assert(y, "y coordinate must be defined");
this.putProperty('finalPosition', '{x:' + parseInt(x) + ',y:' + parseInt(y) + '}');
},
getFinalPosition : function() {
var value = this.getProperty('finalPosition');
return eval("(" + value + ")");
}, },
isNodeModel : function() { isNodeModel : function() {

View File

@ -26,7 +26,7 @@ mindplot.model.NodeModel = new Class({
this.parent(mindmap); this.parent(mindmap);
this.setId(id); this.setId(id);
this.setType(type); this.setType(type);
this.areChildrenShrinked(false); this.areChildrenShrunken(false);
this.setSize(50, 20); this.setSize(50, 20);
this._children = []; this._children = [];

View File

@ -29,7 +29,7 @@ mindplot.nlayout.AbstractBasicSorter = new Class({
var result; var result;
var children = treeSet.getChildren(node); var children = treeSet.getChildren(node);
if (children.length == 0) { if (children.length == 0 || node.areChildrenShrunken()) {
result = height; result = height;
} else { } else {
var childrenHeight = 0; var childrenHeight = 0;

View File

@ -33,7 +33,7 @@ mindplot.nlayout.BalancedSorter = new Class({
var result; var result;
var children = treeSet.getChildren(node); var children = treeSet.getChildren(node);
if (children.length == 0) { if (children.length == 0 || node.areChildrenShrunken()) {
result = height; result = height;
} else { } else {
var childrenHeight = 0; var childrenHeight = 0;

View File

@ -24,13 +24,8 @@ mindplot.EventBus = new Class({
mindplot.EventBus.events = { mindplot.EventBus.events = {
NodeResizeEvent:'NodeResizeEvent', NodeResizeEvent:'NodeResizeEvent',
NodeMoveEvent:'NodeMoveEvent', NodeMoveEvent:'NodeMoveEvent',
ONodeDisconnectEvent:'ONodeDisconnectEvent',
ONodeConnectEvent:'ONodeConnectEvent',
NodeRepositionateEvent:'NodeRepositionateEvent', NodeRepositionateEvent:'NodeRepositionateEvent',
NodeShrinkEvent:'NodeShrinkEvent', NodeShrinkEvent:'NodeShrinkEvent',
NodeMouseOverEvent:'NodeMouseOverEvent',
NodeMouseOutEvent:'NodeMouseOutEvent',
NodeConnectEvent:'NodeConnectEvent', NodeConnectEvent:'NodeConnectEvent',
NodeDisconnectEvent:'NodeDisconnectEvent', NodeDisconnectEvent:'NodeDisconnectEvent',
NodeAdded:'NodeAdded', NodeAdded:'NodeAdded',

View File

@ -70,7 +70,7 @@ mindplot.nlayout.EventBusDispatcher = new Class({
}, },
_nodeShrinkEvent: function(node) { _nodeShrinkEvent: function(node) {
console.log("mindplot.nlayout.EventBusDispatcher._nodeShrinkEvent: Not Implemented yet"); this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
}, },
_nodeAdded: function(node) { _nodeAdded: function(node) {

View File

@ -30,15 +30,19 @@ mindplot.nlayout.LayoutManager = new Class({
}, },
updateNodeSize: function(id, size) { updateNodeSize: function(id, size) {
$assert($defined(id), "id can not be null");
var node = this._treeSet.find(id); var node = this._treeSet.find(id);
node.setSize(size); node.setSize(size);
console.log("Size:"+size.width);
// Todo: This must be completed ... // Todo: This must be completed ...
}, },
updateShirkState: function(id, isShrink) { updateShrinkState: function(id, value) {
// @Todo: finish... $assert($defined(id), "id can not be null");
var node = this._treeSet.find(id);
node.setShrunken(value);
}, },
find: function(id) { find: function(id) {
@ -46,7 +50,7 @@ mindplot.nlayout.LayoutManager = new Class({
}, },
move: function() { move: function() {
//TODO(gb): implement //TODO(gb): implement
}, },
connectNode: function(parentId, childId, order) { connectNode: function(parentId, childId, order) {
@ -101,7 +105,7 @@ mindplot.nlayout.LayoutManager = new Class({
size = size || {width:200,height:200}; size = size || {width:200,height:200};
var squaresize = 10; var squaresize = 10;
var canvas = Raphael(containerId, size.width, size.height); var canvas = Raphael(containerId, size.width, size.height);
canvas.drawGrid(0, 0, size.width, size.height, size.width/squaresize, size.height/squaresize); canvas.drawGrid(0, 0, size.width, size.height, size.width / squaresize, size.height / squaresize);
this._treeSet.plot(canvas); this._treeSet.plot(canvas);
}, },

View File

@ -28,15 +28,24 @@ mindplot.nlayout.Node = new Class({
this.setSize(size); this.setSize(size);
this.setPosition(position); this.setPosition(position);
this.setShrunken(false);
}, },
getId:function() { getId:function() {
return this._id; return this._id;
}, },
setShrunken: function(value) {
this._setProperty('shrink', value);
},
areChildrenShrunken: function() {
return this._getProperty('shrink');
},
setOrder: function(order) { setOrder: function(order) {
$assert(typeof order === 'number' && isFinite(order), "Order can not be null. Value:" + order); $assert(typeof order === 'number' && isFinite(order), "Order can not be null. Value:" + order);
this._setProperty('order', order, false); this._setProperty('order', order);
}, },
resetPositionState : function() { resetPositionState : function() {

View File

@ -130,6 +130,6 @@ mindplot.nlayout.SymmetricSorter = new Class({
}); });
mindplot.nlayout.SymmetricSorter.INTERNODE_VERTICAL_PADDING = 5; mindplot.nlayout.SymmetricSorter.INTERNODE_VERTICAL_PADDING = 5;
mindplot.nlayout.SymmetricSorter.INTERNODE_HORIZONTAL_PADDING = 5; mindplot.nlayout.SymmetricSorter.INTERNODE_HORIZONTAL_PADDING = 30;

View File

@ -61,7 +61,7 @@ TestCase("Model Migration Tests",{
assertEquals(position1.x, position2.x); assertEquals(position1.x, position2.x);
assertEquals(position1.y, position2.y); assertEquals(position1.y, position2.y);
} }
assertEquals(node1.areChildrenShrinked(), node2.areChildrenShrinked()); assertEquals(node1.areChildrenShrunken(), node2.areChildrenShrunken());
assertEquals(node1.getType(), node2.getType()); assertEquals(node1.getType(), node2.getType());
assertEquals(node1.getText(), node2.getText()); assertEquals(node1.getText(), node2.getText());
assertEquals(node1.isConnected(), node2.isConnected()); assertEquals(node1.isConnected(), node2.isConnected());