From e35e911d33195d0e51e8e25f73e288cb2e4baa82 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Mon, 14 Feb 2022 19:01:48 -0800 Subject: [PATCH] Change ConnectionLine to TS --- .../{ConnectionLine.js => ConnectionLine.ts} | 72 +++++++++++-------- .../src/components/DesignerBuilder.ts | 32 --------- packages/mindplot/src/components/NodeGraph.ts | 5 +- .../mindplot/src/components/Relationship.ts | 4 +- .../src/components/RelationshipPivot.ts | 2 +- packages/mindplot/src/components/Topic.ts | 4 ++ .../mindplot/src/components/layout/Node.ts | 5 +- .../src/components/model/RelationshipModel.ts | 2 +- 8 files changed, 57 insertions(+), 69 deletions(-) rename packages/mindplot/src/components/{ConnectionLine.js => ConnectionLine.ts} (78%) diff --git a/packages/mindplot/src/components/ConnectionLine.js b/packages/mindplot/src/components/ConnectionLine.ts similarity index 78% rename from packages/mindplot/src/components/ConnectionLine.js rename to packages/mindplot/src/components/ConnectionLine.ts index 396bfc93..0405f123 100644 --- a/packages/mindplot/src/components/ConnectionLine.js +++ b/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) { - const lineType = $defined(lineTypeParam) ? parseInt(lineTypeParam, 10) : defaultStyle; + protected _createLine(lineTypeParam: number, defaultStyle: number): Line { + 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; diff --git a/packages/mindplot/src/components/DesignerBuilder.ts b/packages/mindplot/src/components/DesignerBuilder.ts index d832ce17..36c19052 100644 --- a/packages/mindplot/src/components/DesignerBuilder.ts +++ b/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'); diff --git a/packages/mindplot/src/components/NodeGraph.ts b/packages/mindplot/src/components/NodeGraph.ts index 745d77bf..f95974c3 100644 --- a/packages/mindplot/src/components/NodeGraph.ts +++ b/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(); } diff --git a/packages/mindplot/src/components/Relationship.ts b/packages/mindplot/src/components/Relationship.ts index 69397b36..782477e1 100644 --- a/packages/mindplot/src/components/Relationship.ts +++ b/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'); diff --git a/packages/mindplot/src/components/RelationshipPivot.ts b/packages/mindplot/src/components/RelationshipPivot.ts index ade7a4d4..6d862068 100644 --- a/packages/mindplot/src/components/RelationshipPivot.ts +++ b/packages/mindplot/src/components/RelationshipPivot.ts @@ -36,7 +36,7 @@ class RelationshipPivot { private _sourceTopic: Topic; - private _pivot: any; + private _pivot: CurvedLine; private _startArrow: Arrow; diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index 516314aa..42610289 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/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) { diff --git a/packages/mindplot/src/components/layout/Node.ts b/packages/mindplot/src/components/layout/Node.ts index e6a2d323..b307e070 100644 --- a/packages/mindplot/src/components/layout/Node.ts +++ b/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'); diff --git a/packages/mindplot/src/components/model/RelationshipModel.ts b/packages/mindplot/src/components/model/RelationshipModel.ts index 9a3ee56d..fa6d150c 100644 --- a/packages/mindplot/src/components/model/RelationshipModel.ts +++ b/packages/mindplot/src/components/model/RelationshipModel.ts @@ -67,7 +67,7 @@ class RelationshipModel { return this._id; } - getLineType() { + getLineType(): number { return this._lineType; }