Change default isolated node line style.

This commit is contained in:
Paulo Gustavo Veiga 2023-02-10 19:57:41 -08:00
parent 036cf40f0c
commit bfc043ebbe
9 changed files with 19 additions and 14 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -75,6 +75,7 @@ class ConnectionLine {
break;
case LineType.THIN_CURVED:
line = new CurvedLine();
(line as CurvedLine).setWidth(1);
break;
case LineType.THICK_CURVED:
line = new CurvedLine();

View File

@ -100,7 +100,7 @@ const TopicDefaultStyles = {
color: '#525C61',
},
msgKey: 'ISOLATED_TOPIC',
connectionStyle: LineType.THIN_CURVED,
connectionStyle: LineType.THICK_CURVED,
connectionColor: '#495879',
shapeType: 'line' as TopicShapeType,
},

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -64,7 +64,7 @@ class CurvedLine extends WorkspaceElement<CurvedLinePeer> implements Line {
return this.peer.getTo();
}
setShowEndArrow(visible) {
setShowEndArrow(visible: boolean) {
this.peer.setShowEndArrow(visible);
}
@ -72,15 +72,15 @@ class CurvedLine extends WorkspaceElement<CurvedLinePeer> implements Line {
return this;
}
isShowEndArrow() {
isShowEndArrow(): boolean {
return this.peer.isShowEndArrow();
}
setShowStartArrow(visible) {
setShowStartArrow(visible: boolean): void {
this.peer.setShowStartArrow(visible);
}
isShowStartArrow() {
isShowStartArrow(): boolean {
return this.peer.isShowStartArrow();
}

View File

@ -30,7 +30,7 @@ class CurvedLinePeer extends ElementPeer {
private _y2: number;
private _showEndArrow: boolean;
private _showStartArrow: boolean;
private _width: any;
private _width: number;
constructor() {
const svgElement = window.document.createElementNS('http://www.w3.org/2000/svg', 'path');
@ -39,13 +39,14 @@ class CurvedLinePeer extends ElementPeer {
this._customControlPoint_2 = false;
this._control1 = { x: 0, y: 0 };
this._control2 = { x: 0, y: 0 };
this.setWidth(1);
this._showEndArrow = false;
this._showStartArrow = false;
this._x1 = 0;
this._x2 = 0;
this._y1 = 0;
this._y2 = 0;
this._width = 1;
this._updatePath();
}
setSrcControlPoint(control: PositionType): void {
@ -136,7 +137,7 @@ class CurvedLinePeer extends ElementPeer {
this._updatePath();
}
isShowStartArrow() {
isShowStartArrow(): boolean {
return this._showStartArrow;
}
@ -144,15 +145,18 @@ class CurvedLinePeer extends ElementPeer {
return this._width;
}
setWidth(value: number) {
setWidth(value: number): void {
this._width = value;
if (this._width === 1) {
this.setFill('none');
}
this._updatePath();
}
setFill(color: string, opacity?: number) {
super.setFill(color, opacity);
this._updatePath();
}
private _updatePath(avoidControlPointFix?: boolean) {
// Update style based on width ....
if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
this._calculateAutoControlPoints(avoidControlPointFix);
@ -178,7 +182,7 @@ class CurvedLinePeer extends ElementPeer {
const curveP6 = CurvedLinePeer._pointToStr(this._x1, this._y1 + this.getWidth() / 2);
const path = `M${moveTo} C${curveP1} ${curveP2} ${curveP3} ${
this.getWidth() > 1 ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''
this.getWidth() >= 1 ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''
}`;
this._native.setAttribute('d', path);
}
@ -233,7 +237,7 @@ class CurvedLinePeer extends ElementPeer {
}
}
setDashed(length, spacing) {
setDashed(length: number, spacing: number) {
if ($defined(length) && $defined(spacing)) {
this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
} else {