Fix connexion and relationship render.

This commit is contained in:
Paulo Gustavo Veiga 2022-12-17 21:17:36 -08:00
parent 66d4e090d6
commit 7b351967cc
2 changed files with 16 additions and 26 deletions

View File

@ -51,17 +51,10 @@ class ConnectionLine {
this._targetTopic = targetNode; this._targetTopic = targetNode;
this._sourceTopic = sourceNode; this._sourceTopic = sourceNode;
let line: Line;
const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode); const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
if (targetNode.getType() === 'CentralTopic') { const line = this._createLine(LineType.SIMPLE_CURVED);
line = this._createLine(LineType.CURVED);
line.setSrcControlPoint(ctrlPoints[0]); line.setSrcControlPoint(ctrlPoints[0]);
line.setDestControlPoint(ctrlPoints[1]); line.setDestControlPoint(ctrlPoints[1]);
} else {
line = this._createLine(LineType.SIMPLE_CURVED);
line.setSrcControlPoint(ctrlPoints[0]);
line.setDestControlPoint(ctrlPoints[1]);
}
// Set line styles ... // Set line styles ...
const strokeColor = ConnectionLine.getStrokeColor(); const strokeColor = ConnectionLine.getStrokeColor();
line.setStroke(1, 'solid', strokeColor, 1); line.setStroke(1, 'solid', strokeColor, 1);

View File

@ -149,26 +149,23 @@ class CurvedLinePeer extends ElementPeer {
if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) { if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
this._calculateAutoControlPoints(avoidControlPointFix); this._calculateAutoControlPoints(avoidControlPointFix);
const path = `M${this._x1.toFixed(2)},${this._y1.toFixed()} C${( const moveTo = CurvedLinePeer._pointToStr(this._x1, this._y1);
this._control1.x + this._x1 const curveP1 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1);
).toFixed(2)},${this._control1.y + this._y1} ${(this._control2.x + this._x2).toFixed()},${( const curveP2 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2);
this._control2.y + this._y2 const curveP3 = CurvedLinePeer._pointToStr(this._x2, this._y2);
).toFixed(2)} ${this._x2.toFixed(2)},${this._y2.toFixed()}${this._lineStyle const curveP4 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2 + 3);
? ` ${(this._control2.x + this._x2).toFixed()},${( const curveP5 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1 + 5);
this._control2.y + const curveP6 = CurvedLinePeer._pointToStr(this._x1, this._y1 + 7);
this._y2 +
3 const path = `M${moveTo} C${curveP1} ${curveP2} ${curveP3} ${this._lineStyle ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''}`;
).toFixed(2)} ${(this._control1.x + this._x1).toFixed()},${(
this._control1.y +
this._y1 +
5
).toFixed(2)} ${this._x1.toFixed(2)},${(this._y1 + 7).toFixed(2)} Z`
: ''
}`;
this._native.setAttribute('d', path); this._native.setAttribute('d', path);
} }
} }
static _pointToStr(x, y) {
return `${(x).toFixed(3)},${(y).toFixed(3)} `;
}
_updateStyle() { _updateStyle() {
let style = ''; let style = '';
for (const key in this._style) { for (const key in this._style) {