Improve polyline class.

packages/mindplot/src/components/ConnectionLine.ts

@@ -17,7 +17,7 @@
  */
 
 import { $assert } from '@wisemapping/core-js';
-import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
+import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
 import RelationshipModel from './model/RelationshipModel';
 import Topic from './Topic';
 import TopicConfig from './TopicConfig';
@@ -42,7 +42,7 @@ class ConnectionLine {
 
   protected _model: RelationshipModel;
 
-  constructor(sourceNode: Topic, targetNode: Topic) {
+  constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
     $assert(targetNode, 'parentNode node can not be null');
     $assert(sourceNode, 'childNode node can not be null');
     $assert(sourceNode !== targetNode, 'Circular connection');
@@ -50,15 +50,16 @@ class ConnectionLine {
     this._targetTopic = targetNode;
     this._sourceTopic = sourceNode;
 
-    const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
-    const line = this._createLine(LineType.SIMPLE_CURVED);
-    line.setSrcControlPoint(ctrlPoints[0]);
-    line.setDestControlPoint(ctrlPoints[1]);
-    // Set line styles ...
+    const line = this._createLine(type);
     const strokeColor = ConnectionLine.getStrokeColor();
-    line.setStroke(1, 'solid', strokeColor, 1);
-    line.setFill(strokeColor, 1);
+    if (type === LineType.SIMPLE_CURVED) {
+      line.setStroke(1, 'solid', strokeColor, 1);
+      line.setFill(strokeColor, 1);
+    } else {
+      line.setStroke(2, 'solid', strokeColor, 1);
+    }
 
+    // Set line styles ...
     this._line2d = line;
   }
 
@@ -66,7 +67,10 @@ class ConnectionLine {
     const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
     const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
     const deltaX = (srcPos.x - destPos.x) / 3;
-    return [new Point(deltaX, 0), new Point(-deltaX, 0)];
+    return [
+      { x: deltaX, y: 0 },
+      { x: -deltaX, y: 0 },
+    ];
   }
 
   protected _createLine(lineType: LineType): Line {

packages/mindplot/src/components/RelationshipControlPoints.ts

@@ -146,8 +146,8 @@ class ControlPivotLine {
       this._line.setTo(startPosition.x + ctrPosition.x - 5, startPosition.y + ctrPosition.y - 5);
 
       this._dot.setPosition(
-        startPosition.x + ctrPosition.x - 8,
-        startPosition.y + ctrPosition.y - 8,
+        startPosition.x + ctrPosition.x - 5,
+        startPosition.y + ctrPosition.y - 5,
       );
     }
   }
@@ -167,7 +167,7 @@ class ControlPivotLine {
     this._moveRelHandler(ctlPoint);
 
     // Update pivot ...
-    this._dot.setPosition(mousePosition.x - 8, mousePosition.y - 8);
+    this._dot.setPosition(mousePosition.x - 5, mousePosition.y - 5);
 
     // Update line ...
     this._line.setTo(mousePosition.x - 5, mousePosition.y - 5);

packages/mindplot/src/components/ShrinkConnector.ts

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { Elipse } from '@wisemapping/web2d';
+import { Elipse, Group } from '@wisemapping/web2d';
 
 import TopicConfig from './TopicConfig';
 import ActionDispatcher from './ActionDispatcher';
@@ -94,12 +94,12 @@ class ShirinkConnector {
     this._ellipse.setAttribute(name, value);
   }
 
-  addToWorkspace(group): void {
+  addToWorkspace(group: Group): void {
     group.append(this._ellipse);
   }
 
   setPosition(x: number, y: number): void {
-    this._ellipse.setPosition(x, y);
+    this._ellipse.setPosition(x + 3, y + 3);
   }
 
   moveToBack(): void {

packages/mindplot/src/components/Topic.ts

@@ -1034,7 +1034,7 @@ abstract class Topic extends NodeGraph {
 
   disconnect(workspace: Workspace): void {
     const outgoingLine = this.getOutgoingLine();
-    if ($defined(outgoingLine)) {
+    if (outgoingLine) {
       $assert(workspace, 'workspace can not be null');
 
       this._outgoingLine = null;
@@ -1069,7 +1069,7 @@ abstract class Topic extends NodeGraph {
       // Hide connection line?.
       if (targetTopic.getChildren().length === 0) {
         const connector = targetTopic.getShrinkConnector();
-        if ($defined(connector)) {
+        if (connector) {
           connector.setVisibility(false);
           targetTopic.isCollapsed(false);
         }
@@ -1146,13 +1146,13 @@ abstract class Topic extends NodeGraph {
 
   abstract updateTopicShape(targetTopic: Topic);
 
-  append(child: Topic) {
+  append(child: Topic): void {
     const children = this.getChildren();
     children.push(child);
   }
 
   /** */
-  removeChild(child: Topic) {
+  removeChild(child: Topic): void {
     const children = this.getChildren();
     this._children = children.filter((c) => c !== child);
   }
@@ -1167,7 +1167,7 @@ abstract class Topic extends NodeGraph {
     return result;
   }
 
-  removeFromWorkspace(workspace: Workspace) {
+  removeFromWorkspace(workspace: Workspace): void {
     const elem2d = this.get2DElement();
     workspace.removeChild(elem2d);
     const line = this.getOutgoingLine();
@@ -1178,7 +1178,7 @@ abstract class Topic extends NodeGraph {
     EventBus.instance.fireEvent('topicRemoved', this.getModel());
   }
 
-  addToWorkspace(workspace: Workspace) {
+  addToWorkspace(workspace: Workspace): void {
     const elem = this.get2DElement();
     workspace.append(elem);
     if (!this.isInWorkspace()) {

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

@@ -24,6 +24,7 @@ class ElipsePeer extends ElementPeer {
     super(svgElement);
     this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
     this._position = { x: 0, y: 0 };
+    this._size = { width: 5, height: 5 };
   }
 
   setSize(width, height) {
@@ -35,23 +36,16 @@ class ElipsePeer extends ElementPeer {
     if ($defined(height)) {
       this._native.setAttribute('ry', height / 2);
     }
-
-    const pos = this.getPosition();
-    this.setPosition(pos.x, pos.y);
   }
 
   setPosition(pcx, pcy) {
-    const size = this.getSize();
-
-    const cx = size.width / 2 + pcx;
-    const cy = size.height / 2 + pcy;
-
-    if ($defined(cx)) {
-      this._native.setAttribute('cx', cx);
+    this._position = { x: pcx, y: pcy };
+    if ($defined(pcx)) {
+      this._native.setAttribute('cx', pcx);
     }
 
-    if ($defined(cy)) {
-      this._native.setAttribute('cy', cy);
+    if ($defined(pcy)) {
+      this._native.setAttribute('cy', pcy);
     }
   }
 

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

@@ -57,11 +57,13 @@ class PolyLinePeer extends ElementPeer {
   }
 
   _updatePath() {
-    if (this._style === 'Curved') {
-      this._updateMiddleCurvePath();
-    } else if (this._style === 'Straight') {
+    if (this._style === 'Straight') {
       this._updateStraightPath();
-    } else {
+    } if (this._style === 'MiddleStraight') {
+      this._updateMiddleStraightPath();
+    } else if (this._style === 'MiddleCurved') {
+      this._updateMiddleCurvePath();
+    } else if (this._style === 'Curved' || !this._style) {
       this._updateCurvePath();
     }
   }
@@ -85,10 +87,11 @@ class PolyLinePeer extends ElementPeer {
     const y1 = this._y1;
     const x2 = this._x2;
     const y2 = this._y2;
+
     if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
       const diff = x2 - x1;
       const middlex = diff / 2 + x1;
-      let signx = 1;
+      let signx = 0;
       let signy = 1;
       if (diff < 0) {
         signx = -1;
@@ -96,9 +99,21 @@ class PolyLinePeer extends ElementPeer {
       if (y2 < y1) {
         signy = -1;
       }
-      const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${
-        y1 + 10 * signy
-      } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
+      const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${y1 + 10 * signy
+        } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
+      this._native.setAttribute('points', path);
+    }
+  }
+
+  _updateMiddleStraightPath() {
+    const x1 = this._x1;
+    const y1 = this._y1;
+    const x2 = this._x2;
+    const y2 = this._y2;
+    if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
+      const diff = x2 - x1;
+      const middlex = diff / 2 + x1;
+      const path = `${x1}, ${y1} ${middlex}, ${y1} ${middlex}, ${y1} ${middlex}, ${y2} ${middlex}, ${y2} ${x2}, ${y2}`;
       this._native.setAttribute('points', path);
     }
   }

packages/web2d/test/playground/polyLine.html

@@ -14,23 +14,37 @@
         <tbody>
         <tr>
             <td>
-                Different types of PolyLines that can be used.
+                Straight Polylines
             </td>
             <td>
-                <div id="overflowExample" />
+                <div id="straightSample" />
             </td>
-
         </tr>
         <tr>
             <td>
-                This is how multiple childs will look in each style line
+                Middle Straight Polylines
             </td>
             <td>
-                <div id="multipleLineExample" />
+                <div id="middleStraightSample" />
             </td>
-
         </tr>
-        </tbody>
+        <tr>
+            <td>
+                Curved Polylines
+            </td>
+            <td>
+                <div id="curvedSample" />
+            </td>
+        </tr>   
+        <tr>
+            <td>
+                Middle Curved Polylines
+            </td>
+            <td>
+                <div id="middleCurvedSample" />
+            </td>
+        </tr>
+    </tbody>
     </table>
 </body>
 

packages/web2d/test/playground/polyLine.js

@@ -1,64 +1,78 @@
 import $ from 'jquery';
-import { Workspace, PolyLine } from '../../src';
+import { Workspace, PolyLine, Elipse } from '../../src';
 
 global.$ = $;
+const drawLine = (type) => {
+    const workspace = new Workspace();
+    workspace.setSize('300px', '300px');
+    workspace.setCoordSize(300, 300);
+    workspace.setCoordOrigin(-150, -150);
 
-let overflowWorkspace = new Workspace({ fillColor: 'green' });
-overflowWorkspace.setSize('100px', '100px');
+    // Add referene point ...
+    const e1 = new Elipse();
+    e1.setSize(10, 10);
+    e1.setPosition(0, 0);
+    workspace.append(e1);
 
-const line = new PolyLine();
-line.setTo(165, 165);
-line.setFrom(95, 95);
-line.setStyle('Straight');
-line.setStroke('10');
-overflowWorkspace.append(line);
+    const e2 = new Elipse();
+    e2.setPosition(-100, -100);
+    e2.setSize(10, 10);
+    workspace.append(e2);
 
-overflowWorkspace.addItAsChildTo($('#overflowExample'));
+    const e3 = new Elipse();
+    e3.setPosition(100, 100);
+    e3.setSize(10, 10);
+    workspace.append(e3);
 
-overflowWorkspace = new Workspace();
-overflowWorkspace.setSize('100px', '100px');
-let line1 = new PolyLine();
-line1.setFrom(95, 95);
-line1.setTo(165, 165);
-line1.setStyle('Curved');
-overflowWorkspace.append(line1);
+    const e4 = new Elipse();
+    e4.setPosition(-100, 100);
+    e4.setSize(10, 10);
+    workspace.append(e4);
 
-line1 = new PolyLine();
-line1.setFrom(95, 95);
-line1.setTo(165, 135);
-line1.setStyle('Curved');
-overflowWorkspace.append(line1);
+    const e5 = new Elipse();
+    e5.setPosition(100, -100);
+    e5.setSize(10, 10);
+    workspace.append(e5);
 
-line1 = new PolyLine();
-line1.setFrom(95, 90);
-line1.setTo(160, 20);
-line1.setStyle('Straight');
-overflowWorkspace.append(line1);
+    // Line 1 ...
+    const line1 = new PolyLine();
+    line1.setFrom(0, 0);
+    line1.setTo(100, 100);
+    line1.setStyle(type);
+    line1.setStroke('1');
+    workspace.append(line1);
 
-line1 = new PolyLine();
-line1.setFrom(95, 90);
-line1.setTo(160, 50);
-line1.setStyle('Straight');
-overflowWorkspace.append(line1);
+    const line2 = new PolyLine();
+    line2.setFrom(0, 0);
+    line2.setTo(-100, -100);
+    line2.setStyle(type);
+    line2.setStroke('1');
+    workspace.append(line2);
 
-line1 = new PolyLine();
-line1.setFrom(90, 90);
-line1.setTo(20, 20);
-overflowWorkspace.append(line1);
+    const line3 = new PolyLine();
+    line3.setFrom(0, 0);
+    line3.setTo(100, -100);
+    line3.setStyle(type);
+    line3.setStroke('1');
+    workspace.append(line3);
 
-line1 = new PolyLine();
-line1.setFrom(90, 90);
-line1.setTo(20, 50);
-overflowWorkspace.append(line1);
+    const line4 = new PolyLine();
+    line4.setFrom(0, 0);
+    line4.setTo(-100, 100);
+    line4.setStyle(type);
+    line2.setStroke('1');
+    workspace.append(line4);
 
-line1 = new PolyLine();
-line1.setFrom(90, 95);
-line1.setTo(20, 165);
-overflowWorkspace.append(line1);
+    return workspace;
+};
+const w1 = drawLine('Straight');
+w1.addItAsChildTo($('#straightSample'));
 
-line1 = new PolyLine();
-line1.setFrom(90, 95);
-line1.setTo(20, 135);
-overflowWorkspace.append(line1);
+const w2 = drawLine('MiddleStraight');
+w2.addItAsChildTo($('#middleStraightSample'));
 
-overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
+const w3 = drawLine('MiddleCurved');
+w3.addItAsChildTo($('#middleCurvedSample'));
+
+const w4 = drawLine('Curved');
+w4.addItAsChildTo($('#curvedSample'));