diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png index c42ee9e7..1c79e710 100644 Binary files a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png index 3c5c27fb..dfb3606d 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png differ diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index dc12200b..f192f3be 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -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(); diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 0c6b8ed4..e14765c3 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -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, }, diff --git a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-fill.snap.png b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-fill.snap.png index ed79dc26..49689ad1 100644 Binary files a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-fill.snap.png and b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-fill.snap.png differ diff --git a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-stroke.snap.png b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-stroke.snap.png index 8ae25545..876933b4 100644 Binary files a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-stroke.snap.png and b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-stroke.snap.png differ diff --git a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-width.snap.png b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-width.snap.png index 6463e4e6..e83d61c4 100644 Binary files a/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-width.snap.png and b/packages/web2d/cypress/snapshots/curvedline.cy.js/curvedline-width.snap.png differ diff --git a/packages/web2d/src/components/CurvedLine.ts b/packages/web2d/src/components/CurvedLine.ts index 3ef16816..2f8926bb 100644 --- a/packages/web2d/src/components/CurvedLine.ts +++ b/packages/web2d/src/components/CurvedLine.ts @@ -64,7 +64,7 @@ class CurvedLine extends WorkspaceElement implements Line { return this.peer.getTo(); } - setShowEndArrow(visible) { + setShowEndArrow(visible: boolean) { this.peer.setShowEndArrow(visible); } @@ -72,15 +72,15 @@ class CurvedLine extends WorkspaceElement 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(); } diff --git a/packages/web2d/src/components/peer/svg/CurvedLinePeer.ts b/packages/web2d/src/components/peer/svg/CurvedLinePeer.ts index 48ba36a0..359d1d4b 100644 --- a/packages/web2d/src/components/peer/svg/CurvedLinePeer.ts +++ b/packages/web2d/src/components/peer/svg/CurvedLinePeer.ts @@ -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 {