Change default connection style.

packages/editor/lang/de.json

@@ -224,8 +224,11 @@
     "editor-panel.tooltip-connection-style": {
         "defaultMessage": "Verbindungsstil"
     },
-    "editor-panel.tooltip-connection-style-curved": {
-        "defaultMessage": "Kurve"
+    "editor-panel.tooltip-connection-style-curved-thin": {
+        "defaultMessage": "Dünne Kurve"
+    },
+    "editor-panel.tooltip-connection-style-curved-thick": {
+        "defaultMessage": "Dicke Kurve"
     },
     "editor-panel.tooltip-connection-style-polyline": {
         "defaultMessage": "Polylinie"

packages/editor/lang/en.json

@@ -65,11 +65,14 @@
   "editor-panel.tooltip-connection-style": {
     "defaultMessage": "Connection Style"
   },
-  "editor-panel.tooltip-connection-style-curved": {
-    "defaultMessage": "Curved"
+  "editor-panel.tooltip-connection-style-curved-thin": {
+    "defaultMessage": "Thin Curve"
+  },
+  "editor-panel.tooltip-connection-style-curved-thick": {
+    "defaultMessage": "Think Curve"
   },
   "editor-panel.tooltip-connection-style-polyline": {
-    "defaultMessage": "Polyline"
+    "defaultMessage": "Simple Polyline"
   },
   "editor-panel.tooltip-connection-style-polyline-curved": {
     "defaultMessage": "Curved Polyline"

packages/editor/lang/es.json

@@ -218,8 +218,11 @@
     "editor-panel.tooltip-connection-style": {
         "defaultMessage": "Estilo de Connexión"
     },
-    "editor-panel.tooltip-connection-style-curved": {
-        "defaultMessage": "Curva"
+    "editor-panel.tooltip-connection-style-curved-thin": {
+        "defaultMessage": "Curva fina"
+    },
+    "editor-panel.tooltip-connection-style-curved-thick": {
+        "defaultMessage": "Curva guesa"
     },
     "editor-panel.tooltip-connection-style-polyline": {
         "defaultMessage": "Polilinea"

packages/editor/lang/fr.json

@@ -218,8 +218,11 @@
     "editor-panel.tooltip-connection-style": {
         "defaultMessage": "Style de connexion"
     },
-    "editor-panel.tooltip-connection-style-curved": {
-        "defaultMessage": "Courbe"
+    "editor-panel.tooltip-connection-style-curved-thin": {
+        "defaultMessage": "Mince courbe"
+    },
+    "editor-panel.tooltip-connection-style-curved-thick": {
+        "defaultMessage": "épaisse courbé"
     },
     "editor-panel.tooltip-connection-style-polyline": {
         "defaultMessage": "Polyligne"

packages/editor/src/compiled-lang/de.json

@@ -137,10 +137,16 @@
       "value": "Verbindungsstil"
     }
   ],
-  "editor-panel.tooltip-connection-style-curved": [
+  "editor-panel.tooltip-connection-style-curved-thick": [
     {
       "type": 0,
-      "value": "Kurve"
+      "value": "Dicke Kurve"
+    }
+  ],
+  "editor-panel.tooltip-connection-style-curved-thin": [
+    {
+      "type": 0,
+      "value": "Dünne Kurve"
     }
   ],
   "editor-panel.tooltip-connection-style-polyline": [

packages/editor/src/compiled-lang/en.json

@@ -131,16 +131,22 @@
       "value": "Connection Style"
     }
   ],
-  "editor-panel.tooltip-connection-style-curved": [
+  "editor-panel.tooltip-connection-style-curved-thick": [
     {
       "type": 0,
-      "value": "Curved"
+      "value": "Think Curve"
+    }
+  ],
+  "editor-panel.tooltip-connection-style-curved-thin": [
+    {
+      "type": 0,
+      "value": "Thin Curve"
     }
   ],
   "editor-panel.tooltip-connection-style-polyline": [
     {
       "type": 0,
-      "value": "Polyline"
+      "value": "Simple Polyline"
     }
   ],
   "editor-panel.tooltip-connection-style-polyline-curved": [

packages/editor/src/compiled-lang/es.json

@@ -131,10 +131,16 @@
       "value": "Estilo de Connexión"
     }
   ],
-  "editor-panel.tooltip-connection-style-curved": [
+  "editor-panel.tooltip-connection-style-curved-thick": [
     {
       "type": 0,
-      "value": "Curva"
+      "value": "Curva guesa"
+    }
+  ],
+  "editor-panel.tooltip-connection-style-curved-thin": [
+    {
+      "type": 0,
+      "value": "Curva fina"
     }
   ],
   "editor-panel.tooltip-connection-style-polyline": [

packages/editor/src/compiled-lang/fr.json

@@ -131,10 +131,16 @@
       "value": "Style de connexion"
     }
   ],
-  "editor-panel.tooltip-connection-style-curved": [
+  "editor-panel.tooltip-connection-style-curved-thick": [
     {
       "type": 0,
-      "value": "Courbe"
+      "value": "épaisse courbé"
+    }
+  ],
+  "editor-panel.tooltip-connection-style-curved-thin": [
+    {
+      "type": 0,
+      "value": "Mince courbe"
     }
   ],
   "editor-panel.tooltip-connection-style-polyline": [

packages/editor/src/components/editor-toolbar/configBuilder.tsx

@@ -161,26 +161,26 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
       {
         icon: <GestureOutlined />,
         tooltip: intl.formatMessage({
-          id: 'editor-panel.tooltip-connection-style-curved',
-          defaultMessage: 'Curved',
+          id: 'editor-panel.tooltip-connection-style-curved-thin',
+          defaultMessage: 'Thin Curved',
         }),
-        onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED),
-        selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED,
+        onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED),
+        selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED,
+      },
+      {
+        icon: <GestureOutlined />,
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-connection-style-curved-thick',
+          defaultMessage: 'Thick Curved',
+        }),
+        onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.THICK_CURVED),
+        selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.THICK_CURVED,
       },
-      // {
-      //   icon: <GestureOutlined />,
-      //   tooltip: intl.formatMessage({
-      //     id: 'editor-panel.tooltip-connection-style-curved-nice',
-      //     defaultMessage: 'Curved',
-      //   }),
-      //   onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.NICE_CURVED),
-      //   selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.NICE_CURVED,
-      // },
       {
         icon: <PolylineOutlined />,
         tooltip: intl.formatMessage({
           id: 'editor-panel.tooltip-connection-style-polyline',
-          defaultMessage: 'Polyline',
+          defaultMessage: 'Simple Polyline',
         }),
         onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.POLYLINE_MIDDLE),
         selected: () =>
@@ -196,6 +196,26 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         selected: () =>
           valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
       },
+      // null,
+      // {
+      //   icon: () => <Palette htmlColor={valueBulder.getFontColorModel().getValue() as string} />,
+      //   tooltip: intl.formatMessage({
+      //     id: 'editor-panel.tooltip-connection-style-color',
+      //     defaultMessage: 'Color',
+      //   }),
+      //   options: [
+      //     {
+      //       render: (closeModal) => {
+      //         return (
+      //           <ColorPicker
+      //             closeModal={closeModal}
+      //             colorModel={valueBulder.getFontColorModel()}
+      //           />
+      //         );
+      //       },
+      //     },
+      //   ],
+      // },
     ],
     disabled: () => {
       const selected = model.getDesignerModel().filterSelectedTopics();
@@ -268,10 +288,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
           {
             render: (closeModal) => {
               return (
-                <ColorPicker
-                  closeModal={closeModal}
-                  colorModel={valueBulder.getFontColorModel()}
-                ></ColorPicker>
+                <ColorPicker closeModal={closeModal} colorModel={valueBulder.getFontColorModel()} />
               );
             },
           },

packages/mindplot/src/components/ConnectionLine.ts

@@ -24,10 +24,10 @@ import Workspace from './Workspace';
 
 // eslint-disable-next-line no-shadow
 export enum LineType {
-  SIMPLE_CURVED,
+  THIN_CURVED,
   POLYLINE_MIDDLE,
   POLYLINE_CURVED,
-  NICE_CURVED,
+  THICK_CURVED,
 }
 
 class ConnectionLine {
@@ -41,7 +41,7 @@ class ConnectionLine {
 
   private _type: LineType;
 
-  constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
+  constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.THIN_CURVED) {
     $assert(targetNode, 'parentNode node can not be null');
     $assert(sourceNode, 'childNode node can not be null');
     $assert(sourceNode !== targetNode, 'Circular connection');
@@ -81,17 +81,16 @@ class ConnectionLine {
         (line as PolyLine).setStyle('Curved');
         (line as PolyLine).setStroke(1, 'solid', strokeColor, 1);
         break;
-      case LineType.SIMPLE_CURVED:
+      case LineType.THIN_CURVED:
         line = new CurvedLine();
-        (line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE);
         (line as CurvedLine).setStroke(1, 'solid', strokeColor, 1);
         (line as CurvedLine).setFill(strokeColor, 1);
         break;
-      case LineType.NICE_CURVED:
+      case LineType.THICK_CURVED:
         line = new CurvedLine();
-        (line as CurvedLine).setStyle(CurvedLine.NICE_LINE);
         (line as CurvedLine).setStroke(1, 'solid', strokeColor, 1);
         (line as CurvedLine).setFill(strokeColor, 1);
+        (line as CurvedLine).setWidth(this._targetTopic.isCentralTopic() ? 15 : 3);
         break;
       default:
         throw new Error(`Unexpected line type. ${lineType}`);
@@ -126,7 +125,7 @@ class ConnectionLine {
     line2d.setFrom(tPos.x, tPos.y);
     line2d.setTo(sPos.x, sPos.y);
 
-    if (this._type === LineType.NICE_CURVED || this._type === LineType.SIMPLE_CURVED) {
+    if (this._type === LineType.THICK_CURVED || this._type === LineType.THIN_CURVED) {
       const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
       line2d.setSrcControlPoint(ctrlPoints[0]);
       line2d.setDestControlPoint(ctrlPoints[1]);

packages/mindplot/src/components/DragPivot.ts

@@ -63,7 +63,6 @@ class DragPivot {
 
   private _buildStraightLine(): CurvedLine {
     const line = new CurvedLine();
-    line.setStyle(CurvedLine.SIMPLE_LINE);
     line.setStroke(1, 'solid', '#CC0033');
     line.setOpacity(0.4);
     line.setVisibility(false);
@@ -72,7 +71,6 @@ class DragPivot {
 
   private _buildCurvedLine(): CurvedLine {
     const line = new CurvedLine();
-    line.setStyle(CurvedLine.SIMPLE_LINE);
     line.setStroke(1, 'solid', '#CC0033');
     line.setOpacity(0.4);
     line.setVisibility(false);

packages/mindplot/src/components/Relationship.ts

@@ -64,7 +64,7 @@ class Relationship extends ConnectionLine {
     this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`);
 
     // Build focus shape ...
-    this._focusShape = this._createLine(LineType.SIMPLE_CURVED);
+    this._focusShape = this._createLine(LineType.THIN_CURVED);
     this._focusShape.setStroke(8, 'solid', '#3f96ff');
     this._focusShape.setIsSrcControlPointCustom(false);
     this._focusShape.setIsDestControlPointCustom(false);

packages/mindplot/src/components/RelationshipPivot.ts

@@ -63,8 +63,6 @@ class RelationshipPivot {
     const strokeColor = Relationship.getStrokeColor();
 
     this._pivot = new CurvedLine();
-    this._pivot.setStyle(CurvedLine.SIMPLE_LINE);
-
     const fromPos = this._calculateFromPosition(sourcePos);
     this._pivot.setFrom(fromPos.x, fromPos.y);
 

packages/mindplot/src/components/TopicStyle.ts

@@ -48,7 +48,7 @@ const TopicDefaultStyles = {
       weight: 'bold',
       color: '#ffffff',
     },
-    connectionStyle: LineType.NICE_CURVED,
+    connectionStyle: LineType.THICK_CURVED,
     msgKey: 'CENTRAL_TOPIC',
     shapeType: 'rounded rectangle' as TopicShapeType,
   },
@@ -62,7 +62,7 @@ const TopicDefaultStyles = {
       weight: 'normal',
       color: 'rgb(82,92,97)',
     },
-    connectionStyle: LineType.SIMPLE_CURVED,
+    connectionStyle: LineType.THICK_CURVED,
     msgKey: 'MAIN_TOPIC',
     shapeType: 'line' as TopicShapeType,
   },
@@ -76,7 +76,7 @@ const TopicDefaultStyles = {
       weight: 'normal',
       color: 'rgb(82,92,97)',
     },
-    connectionStyle: LineType.SIMPLE_CURVED,
+    connectionStyle: LineType.THIN_CURVED,
     msgKey: 'SUB_TOPIC',
     shapeType: 'line' as TopicShapeType,
   },
@@ -92,7 +92,7 @@ const TopicDefaultStyles = {
       color: 'rgb(82,92,97)',
     },
     msgKey: 'ISOLATED_TOPIC',
-    connectionStyle: LineType.SIMPLE_CURVED,
+    connectionStyle: LineType.THIN_CURVED,
     shapeType: 'line' as TopicShapeType,
   },
 };

packages/mindplot/src/components/model/RelationshipModel.ts

@@ -47,7 +47,7 @@ class RelationshipModel {
     this._id = RelationshipModel._nextUUID();
     this._sourceTargetId = sourceTopicId;
     this._targetTopicId = targetTopicId;
-    this._lineType = LineType.SIMPLE_CURVED;
+    this._lineType = LineType.THIN_CURVED;
     this._srcCtrlPoint = null;
     this._destCtrlPoint = null;
     this._endArrow = true;

packages/web2d/src/components/CurvedLine.js

@@ -112,20 +112,17 @@ class CurvedLine extends ElementClass {
     return this.peer.updateLine(avoidControlPointFix);
   }
 
-  setStyle(style) {
-    this.peer.setLineStyle(style);
-  }
-
-  getStyle() {
-    return this.peer.getLineStyle();
-  }
-
   setDashed(length, spacing) {
     this.peer.setDashed(length, spacing);
   }
+
+  getWidth() {
+    return this.peer.getWidth();
   }
 
-CurvedLine.SIMPLE_LINE = false;
-CurvedLine.NICE_LINE = true;
+  setWidth(value) {
+    this.peer.setWidth(value);
+  }
+}
 
 export default CurvedLine;

packages/web2d/src/components/peer/svg/CurvedLinePeer.js

@@ -29,7 +29,7 @@ class CurvedLinePeer extends ElementPeer {
     this._customControlPoint_2 = false;
     this._control1 = new Point(0, 0);
     this._control2 = new Point(0, 0);
-    this._lineStyle = true;
+    this._width = 1;
   }
 
   setSrcControlPoint(control) {
@@ -75,16 +75,16 @@ class CurvedLinePeer extends ElementPeer {
   }
 
   setFrom(x1, y1) {
-    const change = this._x1 !== Number.parseFloat(x1, 10) || this._y1 !== Number.parseFloat(y1, 10);
-    this._x1 = Number.parseFloat(x1, 10);
-    this._y1 = Number.parseFloat(y1, 10);
+    const change = this._x1 !== x1 || this._y1 !== y1;
+    this._x1 = x1;
+    this._y1 = y1;
     if (change) { this._updatePath(); }
   }
 
   setTo(x2, y2) {
-    const change = this._x2 !== Number.parseFloat(x2, 10) || this._y2 !== parseFloat(y2, 10);
-    this._x2 = Number.parseFloat(x2, 10);
-    this._y2 = Number.parseFloat(y2, 10);
+    const change = this._x2 !== x2 || this._y2 !== y2;
+    this._x2 = x2;
+    this._y2 = y2;
     if (change) this._updatePath();
   }
 
@@ -111,22 +111,6 @@ class CurvedLinePeer extends ElementPeer {
     this._updatePath(avoidControlPointFix);
   }
 
-  setLineStyle(style) {
-    this._lineStyle = style;
-    if (this._lineStyle) {
-      this._style.fill = this._fill;
-    } else {
-      this._fill = this._style.fill;
-      this._style.fill = 'none';
-    }
-    this._updateStyle();
-    this.updateLine();
-  }
-
-  getLineStyle() {
-    return this._lineStyle;
-  }
-
   setShowEndArrow(visible) {
     this._showEndArrow = visible;
     this.updateLine();
@@ -145,25 +129,42 @@ class CurvedLinePeer extends ElementPeer {
     return this._showStartArrow;
   }
 
+  getWidth() {
+    return this._width;
+  }
+
+  setWidth(value) {
+    this._width = value;
+    if (this._width >= 1) {
+      this._style.fill = this._fill;
+    } else {
+      this._fill = this._style.fill;
+      this._style.fill = 'none';
+    }
+    this._updateStyle();
+    this.updateLine();
+  }
+
   _updatePath(avoidControlPointFix) {
     if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
       this._calculateAutoControlPoints(avoidControlPointFix);
 
-      const moveTo = CurvedLinePeer._pointToStr(this._x1, this._y1);
+      const moveTo = CurvedLinePeer._pointToStr(this._x1, this._y1 - this.getWidth() / 2);
       const curveP1 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1);
       const curveP2 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2);
       const curveP3 = CurvedLinePeer._pointToStr(this._x2, this._y2);
-      const curveP4 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2 + 3);
-      const curveP5 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1 + 5);
-      const curveP6 = CurvedLinePeer._pointToStr(this._x1, this._y1 + 7);
 
-      const path = `M${moveTo} C${curveP1} ${curveP2} ${curveP3} ${this._lineStyle ? ` ${curveP4} ${curveP5} ${curveP6} Z` : ''}`;
+      const curveP4 = CurvedLinePeer._pointToStr(this._control2.x + this._x2, this._control2.y + this._y2 + this.getWidth() * 0.4);
+      const curveP5 = CurvedLinePeer._pointToStr(this._control1.x + this._x1, this._control1.y + this._y1 + this.getWidth() * 0.7);
+      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._native.setAttribute('d', path);
     }
   }
 
   static _pointToStr(x, y) {
-    return `${(x).toFixed(3)},${(y).toFixed(3)} `;
+    return `${(x).toFixed()},${(y).toFixed(1)} `;
   }
 
   _updateStyle() {

packages/web2d/test/playground/curvedLine.html

@@ -28,6 +28,17 @@
                     <div id="curvedNiceExample" />
                 </td>
             </tr>
+            <tr>
+                <td>
+                    Curved Line Nice - Size
+                </td>
+                <td>
+                    <div id="curvedSize1NiceExample" />
+                    <div id="curvedSize7NiceExample" />
+                    <div id="curvedSize14NiceExample" />
+                    <div id="curvedSize30NiceExample" />
+                </td>
+            </tr>
         </tbody>
     </table>
 </body>

packages/web2d/test/playground/curvedLine.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { Workspace, CurvedLine, Point, Elipse } from '../../src';
 
-const drawLine = (type) => {
+const drawLine = (size) => {
     const workspace = new Workspace();
     workspace.setSize('300px', '300px');
     workspace.setCoordSize(300, 300);
@@ -9,42 +9,46 @@ const drawLine = (type) => {
 
     // Line 1 ...
     const line1 = new CurvedLine();
-    line1.setStyle(type);
     line1.setFrom(0, 0);
     line1.setTo(100, 100);
     line1.setSrcControlPoint(new Point(100 / 2, 0));
     line1.setDestControlPoint(new Point(-100 / 2, 0));
-    line1.setStroke(4, 'solid', 'blue', 1);
+    line1.setStroke(1, 'solid', 'blue', 1);
+    line1.setWidth(size);
     workspace.append(line1);
 
     const line2 = new CurvedLine();
-    line2.setStyle(type);
     line2.setFrom(0, 0);
     line2.setTo(-100, -100);
     line2.setSrcControlPoint(new Point(-100 / 2, 0));
     line2.setDestControlPoint(new Point(100 / 2, 0));
+    line2.setStroke(1, 'solid', 'blue', 1);
+    line2.setWidth(size);
     workspace.append(line2);
 
     const line3 = new CurvedLine();
-    line3.setStyle(type);
     line3.setFrom(0, 0);
     line3.setTo(100, -100);
     line3.setSrcControlPoint(new Point(100 / 2, 0));
     line3.setDestControlPoint(new Point(-100 / 2, 0));
+    line3.setStroke(1, 'solid', 'blue', 1);
+    line3.setWidth(size);
     workspace.append(line3);
 
     const line4 = new CurvedLine();
-    line4.setStyle(type);
     line4.setFrom(0, 0);
     line4.setTo(-100, 100);
     line4.setSrcControlPoint(new Point(-100 / 2, 0));
     line4.setDestControlPoint(new Point(100 / 2, 0));
+    line4.setStroke(1, 'solid', 'blue', 1);
+    line4.setWidth(size);
     workspace.append(line4);
 
     // Add referene point ...
     const e1 = new Elipse();
-    e1.setSize(30, 30);
+    e1.setSize(5, 5);
     e1.setPosition(0, 0);
+    e1.setFill('red');
     workspace.append(e1);
 
     const e2 = new Elipse();
@@ -70,8 +74,20 @@ const drawLine = (type) => {
     return workspace;
 };
 
-const w1 = drawLine(CurvedLine.SIMPLE_LINE);
+const w1 = drawLine(1);
 w1.addItAsChildTo($('#curvedSimpleExample').first());
 
-const w2 = drawLine(CurvedLine.NICE_LINE);
+const w2 = drawLine(28);
 w2.addItAsChildTo($('#curvedNiceExample').first());
+
+const w3 = drawLine(1);
+w3.addItAsChildTo($('#curvedSize1NiceExample').first());
+
+const w4 = drawLine(7);
+w4.addItAsChildTo($('#curvedSize7NiceExample').first());
+
+const w5 = drawLine(14);
+w5.addItAsChildTo($('#curvedSize14NiceExample').first());
+
+const w6 = drawLine(30);
+w6.addItAsChildTo($('#curvedSize30NiceExample').first());