Change ConnectionLine to TS

packages/mindplot/src/components/ConnectionLine.ts

@@ -21,10 +21,23 @@ import {
   Point, CurvedLine, PolyLine, Line,
 } from '@wisemapping/web2d';
 import { TopicShape } from './model/INodeModel';
+import RelationshipModel from './model/RelationshipModel';
+import Topic from './Topic';
 import TopicConfig from './TopicConfig';
+import Workspace from './Workspace';
 
 class ConnectionLine {
-  constructor(sourceNode, targetNode, lineType) {
+  protected _targetTopic: Topic;
+
+  protected _sourceTopic: Topic;
+
+  protected _lineType: number;
+
+  protected _line2d: Line;
+
+  protected _model: RelationshipModel;
+
+  constructor(sourceNode: Topic, targetNode: Topic, lineType?: number) {
     $assert(targetNode, 'parentNode node can not be null');
     $assert(sourceNode, 'childNode node can not be null');
     $assert(sourceNode !== targetNode, 'Circular connection');
@@ -32,7 +45,7 @@ class ConnectionLine {
     this._targetTopic = targetNode;
     this._sourceTopic = sourceNode;
 
-    let line;
+    let line: Line;
     const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
     if (targetNode.getType() === 'CentralTopic') {
       line = this._createLine(lineType, ConnectionLine.CURVED);
@@ -51,15 +64,15 @@ class ConnectionLine {
     this._line2d = line;
   }
 
-  _getCtrlPoints(sourceNode, targetNode) {
+  private _getCtrlPoints(sourceNode: Topic, targetNode: Topic) {
     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)];
   }
 
-  _createLine(lineTypeParam, defaultStyle) {
+  protected _createLine(lineTypeParam: number, defaultStyle: number): Line {
-    const lineType = $defined(lineTypeParam) ? parseInt(lineTypeParam, 10) : defaultStyle;
+    const lineType = $defined(lineTypeParam) ? lineTypeParam : defaultStyle;
     this._lineType = lineType;
     let line = null;
     switch (lineType) {
@@ -80,7 +93,7 @@ class ConnectionLine {
     return line;
   }
 
-  setVisibility(value) {
+  setVisibility(value: boolean): void {
     this._line2d.setVisibility(value);
   }
 
@@ -88,11 +101,11 @@ class ConnectionLine {
     return this._line2d.isVisible();
   }
 
-  setOpacity(opacity) {
+  setOpacity(opacity: number): void {
     this._line2d.setOpacity(opacity);
   }
 
-  redraw() {
+  redraw(): void {
     const line2d = this._line2d;
     const sourceTopic = this._sourceTopic;
     const sourcePosition = sourceTopic.getPosition();
@@ -116,7 +129,7 @@ class ConnectionLine {
     this._positionateConnector(targetTopic);
   }
 
-  _positionateConnector(targetTopic) {
+  protected _positionateConnector(targetTopic: Topic): void {
     const targetPosition = targetTopic.getPosition();
     const offset = TopicConfig.CONNECTOR_WIDTH / 2;
     const targetTopicSize = targetTopic.getSize();
@@ -141,65 +154,68 @@ class ConnectionLine {
     }
   }
 
-  setStroke(color, style, opacity) {
+  setStroke(color: string, style, opacity: number) {
     this._line2d.setStroke(null, null, color, opacity);
   }
 
-  addToWorkspace(workspace) {
+  addToWorkspace(workspace: Workspace) {
     workspace.append(this._line2d);
     this._line2d.moveToBack();
   }
 
-  removeFromWorkspace(workspace) {
+  removeFromWorkspace(workspace: Workspace) {
     workspace.removeChild(this._line2d);
   }
 
-  getTargetTopic() {
+  getTargetTopic(): Topic {
     return this._targetTopic;
   }
 
-  getSourceTopic() {
+  getSourceTopic(): Topic {
     return this._sourceTopic;
   }
 
-  getLineType() {
+  getLineType(): number {
     return this._lineType;
   }
 
-  getLine() {
+  getLine(): Line {
     return this._line2d;
   }
 
-  getModel() {
+  getModel(): RelationshipModel {
     return this._model;
   }
 
-  setModel(model) {
+  setModel(model: RelationshipModel): void {
     this._model = model;
   }
 
-  getType() {
+  getType(): string {
     return 'ConnectionLine';
   }
 
-  getId() {
+  getId(): number {
     return this._model.getId();
   }
 
-  moveToBack() {
+  moveToBack(): void {
     this._line2d.moveToBack();
   }
 
   moveToFront() {
     this._line2d.moveToFront();
   }
+
+  static SIMPLE = 0;
+
+  static POLYLINE = 1;
+
+  static CURVED = 2;
+
+  static SIMPLE_CURVED = 3;
+
+  static getStrokeColor = () => '#495879';
 }
 
-ConnectionLine.getStrokeColor = () => '#495879';
-
-ConnectionLine.SIMPLE = 0;
-ConnectionLine.POLYLINE = 1;
-ConnectionLine.CURVED = 2;
-ConnectionLine.SIMPLE_CURVED = 3;
-
 export default ConnectionLine;

packages/mindplot/src/components/DesignerBuilder.ts

@@ -20,8 +20,6 @@ import $ from 'jquery';
 import PersistenceManager from './PersistenceManager';
 import Designer from './Designer';
 import Menu from './widget/Menu';
-import { $notifyModal } from './widget/ModalDialogNotifier';
-import { $msg } from './Messages';
 import { DesignerOptions } from './DesignerOptionsBuilder';
 
 let designer: Designer;
@@ -37,36 +35,6 @@ export function buildDesigner(options: DesignerOptions): Designer {
     console.log('Map loadded successfully');
   });
 
-  const onerrorFn = (msg: string, url: string, lineNo: number, columnNo: number, error: Error) => {
-    const message = [
-      `Message: ${msg}`,
-      `URL: ${url}`,
-      `Line: ${lineNo}`,
-      `Column: ${columnNo}`,
-    ].join(' - ');
-    console.error(message);
-
-    // Send error to server ...
-    $.ajax({
-      method: 'post',
-      url: '/c/restful/logger/editor',
-      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-      data: JSON.stringify({
-        jsErrorMsg: `${error.name} - ${error.message}`,
-        jsStack: error.stack,
-        userAgent: navigator.userAgent,
-        mapId: options.mapId,
-      }),
-    });
-
-    // Open error dialog only in case of mindmap loading errors. The rest of the error are reported but not display the dialog.
-    // Remove this in the near future.
-    if (!globalThis.mindmapLoadReady) {
-      $notifyModal($msg('UNEXPECTED_ERROR_LOADING'));
-    }
-  };
-  // window.onerror = onerrorFn;
-
   // Configure default persistence manager ...
   const persistence = options.persistenceManager;
   $assert(persistence, 'persistence must be defined');

packages/mindplot/src/components/NodeGraph.ts

@@ -16,14 +16,13 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
-import { ElementClass } from '@wisemapping/web2d';
+import { ElementClass, Point } from '@wisemapping/web2d';
 import TopicConfig from './TopicConfig';
 import NodeModel from './model/NodeModel';
 import Workspace from './Workspace';
 import DragTopic from './DragTopic';
 import LayoutManager from './layout/LayoutManager';
 import SizeType from './SizeType';
-import PositionType from './PositionType';
 
 abstract class NodeGraph {
   private _mouseEvents: boolean;
@@ -168,7 +167,7 @@ abstract class NodeGraph {
 
   abstract _buildDragShape();
 
-  getPosition(): PositionType {
+  getPosition(): Point {
     const model = this.getModel();
     return model.getPosition();
   }

packages/mindplot/src/components/Relationship.ts

@@ -20,7 +20,7 @@ import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
 import ConnectionLine from './ConnectionLine';
 import ControlPoint from './ControlPoint';
 import RelationshipModel from './model/RelationshipModel';
-import NodeGraph from './NodeGraph';
+import Topic from './Topic';
 import Shape from './util/Shape';
 
 class Relationship extends ConnectionLine {
@@ -42,7 +42,7 @@ class Relationship extends ConnectionLine {
 
   private _showStartArrow: Arrow;
 
-  constructor(sourceNode: NodeGraph, targetNode: NodeGraph, model: RelationshipModel) {
+  constructor(sourceNode: Topic, targetNode: Topic, model: RelationshipModel) {
     $assert(sourceNode, 'sourceNode can not be null');
     $assert(targetNode, 'targetNode can not be null');
 

packages/mindplot/src/components/RelationshipPivot.ts

@@ -36,7 +36,7 @@ class RelationshipPivot {
 
   private _sourceTopic: Topic;
 
-  private _pivot: any;
+  private _pivot: CurvedLine;
 
   private _startArrow: Arrow;
 

packages/mindplot/src/components/Topic.ts

@@ -1329,6 +1329,10 @@ abstract class Topic extends NodeGraph {
     return result;
   }
 
+  abstract workoutOutgoingConnectionPoint(position: Point): Point;
+
+  abstract workoutIncomingConnectionPoint(position: Point): Point;
+
   isChildTopic(childTopic: Topic): boolean {
     let result = this.getId() === childTopic.getId();
     if (!result) {

packages/mindplot/src/components/layout/Node.ts

@@ -18,6 +18,7 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import PositionType from '../PositionType';
 import SizeType from '../SizeType';
+import ChildrenSorterStrategy from './ChildrenSorterStrategy';
 
 class Node {
   private _id: number;
@@ -25,14 +26,14 @@ class Node {
   // eslint-disable-next-line no-use-before-define
   _parent: Node;
 
-  private _sorter: any;
+  private _sorter: ChildrenSorterStrategy;
 
   private _properties;
 
   // eslint-disable-next-line no-use-before-define
   _children: Node[];
 
-  constructor(id: number, size: SizeType, position, sorter) {
+  constructor(id: number, size: SizeType, position: PositionType, sorter: ChildrenSorterStrategy) {
     $assert(typeof id === 'number' && Number.isFinite(id), 'id can not be null');
     $assert(size, 'size can not be null');
     $assert(position, 'position can not be null');

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

@@ -67,7 +67,7 @@ class RelationshipModel {
     return this._id;
   }
 
-  getLineType() {
+  getLineType(): number {
     return this._lineType;
   }