Add NICE line support.

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

@@ -167,6 +167,15 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
         onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED),
         selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_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({
@@ -188,7 +197,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
           valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
       },
     ],
-    disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
+    disabled: () => {
+      const selected = model.getDesignerModel().filterSelectedTopics();
+      return selected.length === 0 || (selected.length === 1 && selected[0].isCentralTopic());
+    },
   };
 
   /**

packages/mindplot/src/components/ConnectionLine.ts

@@ -18,7 +18,6 @@
 
 import { $assert } from '@wisemapping/core-js';
 import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
-import RelationshipModel from './model/RelationshipModel';
 import Topic from './Topic';
 import TopicConfig from './TopicConfig';
 import Workspace from './Workspace';
@@ -28,6 +27,7 @@ export enum LineType {
   SIMPLE_CURVED,
   POLYLINE_MIDDLE,
   POLYLINE_CURVED,
+  NICE_CURVED,
 }
 
 class ConnectionLine {
@@ -39,7 +39,7 @@ class ConnectionLine {
 
   protected _line2d: Line;
 
-  protected _model: RelationshipModel;
+  private _type: LineType;
 
   constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
     $assert(targetNode, 'parentNode node can not be null');
@@ -48,22 +48,9 @@ class ConnectionLine {
 
     this._targetTopic = targetNode;
     this._sourceTopic = sourceNode;
+    this._type = type;
 
     const line = this._createLine(type);
-    const strokeColor = ConnectionLine.getStrokeColor();
-
-    switch (type) {
-      case LineType.POLYLINE_MIDDLE:
-      case LineType.POLYLINE_CURVED:
-        line.setStroke(1, 'solid', strokeColor, 1);
-        break;
-      case LineType.SIMPLE_CURVED:
-        line.setStroke(1, 'solid', strokeColor, 1);
-        line.setFill(strokeColor, 2);
-        break;
-      default:
-        line.setStroke(2, 'solid', strokeColor, 1);
-    }
 
     // Set line styles ...
     this._line2d = line;
@@ -79,25 +66,37 @@ class ConnectionLine {
     ];
   }
 
-  protected _createLine(lineType: LineType): Line {
+  protected _createLine(lineType: LineType): ConnectionLine {
     this._lineType = lineType;
     let line: ConnectionLine;
+    const strokeColor = ConnectionLine.getStrokeColor();
     switch (lineType) {
       case LineType.POLYLINE_MIDDLE:
         line = new PolyLine();
         (line as PolyLine).setStyle('MiddleStraight');
+        (line as PolyLine).setStroke(1, 'solid', strokeColor, 1);
         break;
       case LineType.POLYLINE_CURVED:
         line = new PolyLine();
         (line as PolyLine).setStyle('Curved');
+        (line as PolyLine).setStroke(1, 'solid', strokeColor, 1);
         break;
       case LineType.SIMPLE_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:
+        line = new CurvedLine();
+        (line as CurvedLine).setStyle(CurvedLine.NICE_LINE);
+        (line as CurvedLine).setStroke(1, 'solid', strokeColor, 1);
+        (line as CurvedLine).setFill(strokeColor, 1);
         break;
       default:
         throw new Error(`Unexpected line type. ${lineType}`);
     }
+
     return line;
   }
 
@@ -127,7 +126,7 @@ class ConnectionLine {
     line2d.setFrom(tPos.x, tPos.y);
     line2d.setTo(sPos.x, sPos.y);
 
-    if (line2d.getType() === 'CurvedLine') {
+    if (this._type === LineType.NICE_CURVED || this._type === LineType.SIMPLE_CURVED) {
       const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
       line2d.setSrcControlPoint(ctrlPoints[0]);
       line2d.setDestControlPoint(ctrlPoints[1]);
@@ -191,22 +190,10 @@ class ConnectionLine {
     return this._line2d;
   }
 
-  getModel(): RelationshipModel {
-    return this._model;
-  }
-
-  setModel(model: RelationshipModel): void {
-    this._model = model;
-  }
-
   getType(): string {
     return 'ConnectionLine';
   }
 
-  getId(): number {
-    return this._model.getId();
-  }
-
   moveToBack(): void {
     this._line2d.moveToBack();
   }

packages/mindplot/src/components/Relationship.ts

@@ -44,12 +44,14 @@ class Relationship extends ConnectionLine {
 
   private _showStartArrow: Arrow;
 
+  private _model: RelationshipModel;
+
   constructor(sourceNode: Topic, targetNode: Topic, model: RelationshipModel) {
     $assert(sourceNode, 'sourceNode can not be null');
     $assert(targetNode, 'targetNode can not be null');
 
     super(sourceNode, targetNode);
-    this.setModel(model);
+    this._model = model;
 
     const strokeColor = Relationship.getStrokeColor();
 
@@ -115,6 +117,10 @@ class Relationship extends ConnectionLine {
     this._startArrow.setStrokeColor(color);
   }
 
+  getModel(): RelationshipModel {
+    return this._model;
+  }
+
   private updatePositions() {
     const line2d = this._line2d;
     const sourceTopic = this._sourceTopic;

packages/mindplot/src/components/TopicStyle.ts

@@ -48,7 +48,7 @@ const TopicDefaultStyles = {
       weight: 'bold',
       color: '#ffffff',
     },
-    connectionStyle: LineType.SIMPLE_CURVED,
+    connectionStyle: LineType.NICE_CURVED,
     msgKey: 'CENTRAL_TOPIC',
     shapeType: 'rounded rectangle' as TopicShapeType,
   },

packages/web2d/test/playground/curvedLine.html

@@ -8,16 +8,24 @@
 
 <body>
 
-    <h1>PolyLines Render Tests </h1>
+    <h1>Curved Line Tests </h1>
 
     <table>
         <tbody>
             <tr>
                 <td>
-                    Different types of PolyLines that can be used.
+                    Curved Line Simple
                 </td>
                 <td>
-                    <div id="overflowExample" />
+                    <div id="curvedSimpleExample" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Curved Line Nice
+                </td>
+                <td>
+                    <div id="curvedNiceExample" />
                 </td>
             </tr>
         </tbody>

packages/web2d/test/playground/curvedLine.js

@@ -1,22 +1,77 @@
 import $ from 'jquery';
-import { Workspace, CurvedLine, Point } from '../../src';
+import { Workspace, CurvedLine, Point, Elipse } from '../../src';
 
-const workspace = new Workspace({ fillColor: 'green' });
+const drawLine = (type) => {
-workspace.setSize('400px', '400px');
+    const workspace = new Workspace();
-const line1 = new CurvedLine();
+    workspace.setSize('300px', '300px');
-line1.setStyle(CurvedLine.SIMPLE_LINE);
+    workspace.setCoordSize(300, 300);
-line1.setFrom(200, 200);
+    workspace.setCoordOrigin(-150, -150);
-line1.setTo(100, 100);
-line1.setSrcControlPoint(new Point(-100, 0));
-line1.setDestControlPoint(new Point(100, 0));
-workspace.append(line1);
 
-const line2 = new CurvedLine();
+    // Line 1 ...
-line2.setStyle(CurvedLine.NICE_LINE);
+    const line1 = new CurvedLine();
-line2.setFrom(0, 0);
+    line1.setStyle(type);
-line2.setTo(150, 90);
+    line1.setFrom(0, 0);
-line2.setSrcControlPoint(new Point(100, 0));
+    line1.setTo(100, 100);
-line2.setDestControlPoint(new Point(-100, 0));
+    line1.setSrcControlPoint(new Point(100 / 2, 0));
-workspace.append(line2);
+    line1.setDestControlPoint(new Point(-100 / 2, 0));
+    line1.setStroke(4, 'solid', 'blue', 1);
+    workspace.append(line1);
 
-workspace.addItAsChildTo($('#overflowExample').first());
+    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));
+    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));
+    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));
+    workspace.append(line4);
+
+    // Add referene point ...
+    const e1 = new Elipse();
+    e1.setSize(30, 30);
+    e1.setPosition(0, 0);
+    workspace.append(e1);
+
+    const e2 = new Elipse();
+    e2.setPosition(-100, -100);
+    e2.setSize(10, 10);
+    workspace.append(e2);
+
+    const e3 = new Elipse();
+    e3.setPosition(100, 100);
+    e3.setSize(10, 10);
+    workspace.append(e3);
+
+    const e4 = new Elipse();
+    e4.setPosition(-100, 100);
+    e4.setSize(10, 10);
+    workspace.append(e4);
+
+    const e5 = new Elipse();
+    e5.setPosition(100, -100);
+    e5.setSize(10, 10);
+    workspace.append(e5);
+
+    return workspace;
+};
+
+const w1 = drawLine(CurvedLine.SIMPLE_LINE);
+w1.addItAsChildTo($('#curvedSimpleExample').first());
+
+const w2 = drawLine(CurvedLine.NICE_LINE);
+w2.addItAsChildTo($('#curvedNiceExample').first());