Fix wrong connection line between lines and topics.

This commit is contained in:
Paulo Veiga 2012-01-21 15:30:39 -03:00
parent b9638b4c99
commit 6ed1c1a0b0
4 changed files with 52 additions and 36 deletions

View File

@ -32,7 +32,7 @@ mindplot.CentralTopic = new Class({
}); });
}, },
workoutIncomingConnectionPoint : function(sourcePosition) { workoutIncomingConnectionPoint : function() {
return this.getPosition(); return this.getPosition();
}, },

View File

@ -100,8 +100,8 @@ mindplot.ConnectionLine = new Class({
var targetPosition = targetTopic.getPosition(); var targetPosition = targetTopic.getPosition();
var sPos,tPos; var sPos,tPos;
sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition, false); sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition);
tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition, false); tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition);
line2d.setFrom(tPos.x, tPos.y); line2d.setFrom(tPos.x, tPos.y);
line2d.setTo(sPos.x, sPos.y); line2d.setTo(sPos.x, sPos.y);

View File

@ -133,24 +133,38 @@ mindplot.MainTopic = new Class({
workoutOutgoingConnectionPoint : function(targetPosition) { workoutOutgoingConnectionPoint : function(targetPosition) {
$assert(targetPosition, 'targetPoint can not be null'); $assert(targetPosition, 'targetPoint can not be null');
var pos = this.getPosition(); var pos = this.getPosition();
var size = this.getSize();
var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
var result; var result;
if (this.getShapeType() == mindplot.model.INodeModel.SHAPE_TYPE_LINE) { if (this.getShapeType() == mindplot.model.INodeModel.SHAPE_TYPE_LINE) {
result = new core.Point(); result = new core.Point();
var groupPosition = this._elem2d.getPosition();
var innerShareSize = this.getInnerShape().getSize();
var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
if (innerShareSize) {
var magicCorrectionNumber = 0.3;
if (!isAtRight) {
result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
} else {
result.x = groupPosition.x + magicCorrectionNumber;
}
result.y = groupPosition.y + innerShareSize.height;
} else {
// Hack: When the size has not being defined. This is because the node has not being added.
// Try to do our best ...
var size = this.getSize();
if (!isAtRight) { if (!isAtRight) {
result.x = pos.x + (size.width / 2); result.x = pos.x + (size.width / 2);
} else { } else {
result.x = pos.x - (size.width / 2); result.x = pos.x - (size.width / 2);
} }
result.y = pos.y + (size.height / 2); result.y = pos.y + (size.height / 2);
}
} else { } else {
result = mindplot.util.Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); result = mindplot.util.Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
} }
result.x = Math.ceil(result.x);
result.y = Math.ceil(result.y);
return result; return result;
}, },

View File

@ -175,11 +175,11 @@ mindplot.Topic = new Class({
result = new web2d.Rect(0.3, attributes); result = new web2d.Rect(0.3, attributes);
} }
else if (type == mindplot.model.INodeModel.SHAPE_TYPE_LINE) { else if (type == mindplot.model.INodeModel.SHAPE_TYPE_LINE) {
result = new web2d.Line({strokeColor:"#495879",strokeWidth:1, strokeOpacity:1}); result = new web2d.Line({strokeColor:"#495879",strokeWidth:1});
result.setSize = function(width, height) { result.setSize = function(width, height) {
this.size = {width:width, height:height}; this.size = {width:width, height:height};
result.setFrom(0, height); result.setFrom(0, height);
result.setTo(width + 1, height); result.setTo(width, height);
// Lines will have the same color of the default connection lines... // Lines will have the same color of the default connection lines...
var stokeColor = mindplot.ConnectionLine.getStrokeColor(); var stokeColor = mindplot.ConnectionLine.getStrokeColor();
@ -794,18 +794,19 @@ mindplot.Topic = new Class({
*/ */
setPosition : function(point) { setPosition : function(point) {
$assert(point, "position can not be null"); $assert(point, "position can not be null");
point.x = Math.ceil(point.x);
point.y = Math.ceil(point.y);
// Update model's position ... // Update model's position ...
var model = this.getModel(); var model = this.getModel();
var currentPos = model.getPosition();
model.setPosition(point.x, point.y); model.setPosition(point.x, point.y);
// Elements are positioned in the center. // Elements are positioned in the center.
// All topic element must be positioned based on the innerShape. // All topic element must be positioned based on the innerShape.
var size = this.getSize(); var size = this.getSize();
var cx = Math.round(point.x - (size.width / 2)); var cx = point.x - (size.width / 2);
var cy = Math.round(point.y - (size.height / 2)); var cy = point.y - (size.height / 2);
// Update visual position. // Update visual position.
this._elem2d.setPosition(cx, cy); this._elem2d.setPosition(cx, cy);
@ -974,30 +975,25 @@ mindplot.Topic = new Class({
}, },
_setSize : function(size) { setSize : function(size, force) {
$assert(size, "size can not be null"); $assert(size, "size can not be null");
$assert($defined(size.width), "size seem not to be a valid element"); $assert($defined(size.width), "size seem not to be a valid element");
size = {width:Math.ceil(size.width),height: Math.ceil(size.height)};
var oldSize = this.getSize();
if (oldSize.width != size.width || oldSize.height != size.height || force) {
mindplot.NodeGraph.prototype.setSize.call(this, size); mindplot.NodeGraph.prototype.setSize.call(this, size);
var outerShape = this.getOuterShape(); var outerShape = this.getOuterShape();
var innerShape = this.getInnerShape(); var innerShape = this.getInnerShape();
outerShape.setSize(size.width + 4, size.height + 6); outerShape.setSize(size.width + 4, size.height + 6);
innerShape.setSize(parseInt(size.width), parseInt(size.height)); innerShape.setSize(size.width, size.height);
// Update the figure position(ej: central topic must be centered) and children position. // Update the figure position(ej: central topic must be centered) and children position.
var oldSize = this.getSize();
this._updatePositionOnChangeSize(oldSize, size); this._updatePositionOnChangeSize(oldSize, size);
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeResizeEvent, {node:this.getModel(),size:size}); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeResizeEvent, {node:this.getModel(),size:size});
},
setSize : function(size) {
var oldSize = this.getSize();
if (parseInt(oldSize.width) != parseInt(size.width) || parseInt(oldSize.height) != parseInt(size.height)) {
this._setSize(size);
} }
}, },
@ -1098,6 +1094,13 @@ mindplot.Topic = new Class({
var connector = targetTopic.getShrinkConnector(); var connector = targetTopic.getShrinkConnector();
connector.setVisibility(true); connector.setVisibility(true);
// Create a connection line ...
var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
if ($defined(isVisible))
outgoingLine.setVisibility(isVisible);
this._outgoingLine = outgoingLine;
workspace.appendChild(outgoingLine);
// Redraw line ... // Redraw line ...
outgoingLine.redraw(); outgoingLine.redraw();
@ -1198,8 +1201,7 @@ mindplot.Topic = new Class({
var height = textHeight + (topicPadding * 2); var height = textHeight + (topicPadding * 2);
var width = textWidth + iconsWidth + (topicPadding * 2); var width = textWidth + iconsWidth + (topicPadding * 2);
var size = {width:parseInt(width),height:parseInt(height)}; this.setSize({width:width,height:height});
this.setSize(size);
// Position node ... // Position node ...
textShape.setPosition(topicPadding + iconsWidth, topicPadding); textShape.setPosition(topicPadding + iconsWidth, topicPadding);