mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Change ConnectionLine to TS
This commit is contained in:
parent
e67ab8b641
commit
e35e911d33
@ -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;
|
@ -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');
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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');
|
||||
|
||||
|
@ -36,7 +36,7 @@ class RelationshipPivot {
|
||||
|
||||
private _sourceTopic: Topic;
|
||||
|
||||
private _pivot: any;
|
||||
private _pivot: CurvedLine;
|
||||
|
||||
private _startArrow: Arrow;
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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');
|
||||
|
@ -67,7 +67,7 @@ class RelationshipModel {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
getLineType() {
|
||||
getLineType(): number {
|
||||
return this._lineType;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user