mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Change ConnectionLine to TS
This commit is contained in:
parent
e67ab8b641
commit
e35e911d33
@ -21,10 +21,23 @@ import {
|
|||||||
Point, CurvedLine, PolyLine, Line,
|
Point, CurvedLine, PolyLine, Line,
|
||||||
} from '@wisemapping/web2d';
|
} from '@wisemapping/web2d';
|
||||||
import { TopicShape } from './model/INodeModel';
|
import { TopicShape } from './model/INodeModel';
|
||||||
|
import RelationshipModel from './model/RelationshipModel';
|
||||||
|
import Topic from './Topic';
|
||||||
import TopicConfig from './TopicConfig';
|
import TopicConfig from './TopicConfig';
|
||||||
|
import Workspace from './Workspace';
|
||||||
|
|
||||||
class ConnectionLine {
|
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(targetNode, 'parentNode node can not be null');
|
||||||
$assert(sourceNode, 'childNode node can not be null');
|
$assert(sourceNode, 'childNode node can not be null');
|
||||||
$assert(sourceNode !== targetNode, 'Circular connection');
|
$assert(sourceNode !== targetNode, 'Circular connection');
|
||||||
@ -32,7 +45,7 @@ class ConnectionLine {
|
|||||||
this._targetTopic = targetNode;
|
this._targetTopic = targetNode;
|
||||||
this._sourceTopic = sourceNode;
|
this._sourceTopic = sourceNode;
|
||||||
|
|
||||||
let line;
|
let line: Line;
|
||||||
const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
|
const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
|
||||||
if (targetNode.getType() === 'CentralTopic') {
|
if (targetNode.getType() === 'CentralTopic') {
|
||||||
line = this._createLine(lineType, ConnectionLine.CURVED);
|
line = this._createLine(lineType, ConnectionLine.CURVED);
|
||||||
@ -51,15 +64,15 @@ class ConnectionLine {
|
|||||||
this._line2d = line;
|
this._line2d = line;
|
||||||
}
|
}
|
||||||
|
|
||||||
_getCtrlPoints(sourceNode, targetNode) {
|
private _getCtrlPoints(sourceNode: Topic, targetNode: Topic) {
|
||||||
const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
|
const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
|
||||||
const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
|
const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
|
||||||
const deltaX = (srcPos.x - destPos.x) / 3;
|
const deltaX = (srcPos.x - destPos.x) / 3;
|
||||||
return [new Point(deltaX, 0), new Point(-deltaX, 0)];
|
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;
|
this._lineType = lineType;
|
||||||
let line = null;
|
let line = null;
|
||||||
switch (lineType) {
|
switch (lineType) {
|
||||||
@ -80,7 +93,7 @@ class ConnectionLine {
|
|||||||
return line;
|
return line;
|
||||||
}
|
}
|
||||||
|
|
||||||
setVisibility(value) {
|
setVisibility(value: boolean): void {
|
||||||
this._line2d.setVisibility(value);
|
this._line2d.setVisibility(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -88,11 +101,11 @@ class ConnectionLine {
|
|||||||
return this._line2d.isVisible();
|
return this._line2d.isVisible();
|
||||||
}
|
}
|
||||||
|
|
||||||
setOpacity(opacity) {
|
setOpacity(opacity: number): void {
|
||||||
this._line2d.setOpacity(opacity);
|
this._line2d.setOpacity(opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
redraw() {
|
redraw(): void {
|
||||||
const line2d = this._line2d;
|
const line2d = this._line2d;
|
||||||
const sourceTopic = this._sourceTopic;
|
const sourceTopic = this._sourceTopic;
|
||||||
const sourcePosition = sourceTopic.getPosition();
|
const sourcePosition = sourceTopic.getPosition();
|
||||||
@ -116,7 +129,7 @@ class ConnectionLine {
|
|||||||
this._positionateConnector(targetTopic);
|
this._positionateConnector(targetTopic);
|
||||||
}
|
}
|
||||||
|
|
||||||
_positionateConnector(targetTopic) {
|
protected _positionateConnector(targetTopic: Topic): void {
|
||||||
const targetPosition = targetTopic.getPosition();
|
const targetPosition = targetTopic.getPosition();
|
||||||
const offset = TopicConfig.CONNECTOR_WIDTH / 2;
|
const offset = TopicConfig.CONNECTOR_WIDTH / 2;
|
||||||
const targetTopicSize = targetTopic.getSize();
|
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);
|
this._line2d.setStroke(null, null, color, opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
addToWorkspace(workspace) {
|
addToWorkspace(workspace: Workspace) {
|
||||||
workspace.append(this._line2d);
|
workspace.append(this._line2d);
|
||||||
this._line2d.moveToBack();
|
this._line2d.moveToBack();
|
||||||
}
|
}
|
||||||
|
|
||||||
removeFromWorkspace(workspace) {
|
removeFromWorkspace(workspace: Workspace) {
|
||||||
workspace.removeChild(this._line2d);
|
workspace.removeChild(this._line2d);
|
||||||
}
|
}
|
||||||
|
|
||||||
getTargetTopic() {
|
getTargetTopic(): Topic {
|
||||||
return this._targetTopic;
|
return this._targetTopic;
|
||||||
}
|
}
|
||||||
|
|
||||||
getSourceTopic() {
|
getSourceTopic(): Topic {
|
||||||
return this._sourceTopic;
|
return this._sourceTopic;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLineType() {
|
getLineType(): number {
|
||||||
return this._lineType;
|
return this._lineType;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLine() {
|
getLine(): Line {
|
||||||
return this._line2d;
|
return this._line2d;
|
||||||
}
|
}
|
||||||
|
|
||||||
getModel() {
|
getModel(): RelationshipModel {
|
||||||
return this._model;
|
return this._model;
|
||||||
}
|
}
|
||||||
|
|
||||||
setModel(model) {
|
setModel(model: RelationshipModel): void {
|
||||||
this._model = model;
|
this._model = model;
|
||||||
}
|
}
|
||||||
|
|
||||||
getType() {
|
getType(): string {
|
||||||
return 'ConnectionLine';
|
return 'ConnectionLine';
|
||||||
}
|
}
|
||||||
|
|
||||||
getId() {
|
getId(): number {
|
||||||
return this._model.getId();
|
return this._model.getId();
|
||||||
}
|
}
|
||||||
|
|
||||||
moveToBack() {
|
moveToBack(): void {
|
||||||
this._line2d.moveToBack();
|
this._line2d.moveToBack();
|
||||||
}
|
}
|
||||||
|
|
||||||
moveToFront() {
|
moveToFront() {
|
||||||
this._line2d.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;
|
export default ConnectionLine;
|
@ -20,8 +20,6 @@ import $ from 'jquery';
|
|||||||
import PersistenceManager from './PersistenceManager';
|
import PersistenceManager from './PersistenceManager';
|
||||||
import Designer from './Designer';
|
import Designer from './Designer';
|
||||||
import Menu from './widget/Menu';
|
import Menu from './widget/Menu';
|
||||||
import { $notifyModal } from './widget/ModalDialogNotifier';
|
|
||||||
import { $msg } from './Messages';
|
|
||||||
import { DesignerOptions } from './DesignerOptionsBuilder';
|
import { DesignerOptions } from './DesignerOptionsBuilder';
|
||||||
|
|
||||||
let designer: Designer;
|
let designer: Designer;
|
||||||
@ -37,36 +35,6 @@ export function buildDesigner(options: DesignerOptions): Designer {
|
|||||||
console.log('Map loadded successfully');
|
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 ...
|
// Configure default persistence manager ...
|
||||||
const persistence = options.persistenceManager;
|
const persistence = options.persistenceManager;
|
||||||
$assert(persistence, 'persistence must be defined');
|
$assert(persistence, 'persistence must be defined');
|
||||||
|
@ -16,14 +16,13 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import { ElementClass } from '@wisemapping/web2d';
|
import { ElementClass, Point } from '@wisemapping/web2d';
|
||||||
import TopicConfig from './TopicConfig';
|
import TopicConfig from './TopicConfig';
|
||||||
import NodeModel from './model/NodeModel';
|
import NodeModel from './model/NodeModel';
|
||||||
import Workspace from './Workspace';
|
import Workspace from './Workspace';
|
||||||
import DragTopic from './DragTopic';
|
import DragTopic from './DragTopic';
|
||||||
import LayoutManager from './layout/LayoutManager';
|
import LayoutManager from './layout/LayoutManager';
|
||||||
import SizeType from './SizeType';
|
import SizeType from './SizeType';
|
||||||
import PositionType from './PositionType';
|
|
||||||
|
|
||||||
abstract class NodeGraph {
|
abstract class NodeGraph {
|
||||||
private _mouseEvents: boolean;
|
private _mouseEvents: boolean;
|
||||||
@ -168,7 +167,7 @@ abstract class NodeGraph {
|
|||||||
|
|
||||||
abstract _buildDragShape();
|
abstract _buildDragShape();
|
||||||
|
|
||||||
getPosition(): PositionType {
|
getPosition(): Point {
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
return model.getPosition();
|
return model.getPosition();
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
|
|||||||
import ConnectionLine from './ConnectionLine';
|
import ConnectionLine from './ConnectionLine';
|
||||||
import ControlPoint from './ControlPoint';
|
import ControlPoint from './ControlPoint';
|
||||||
import RelationshipModel from './model/RelationshipModel';
|
import RelationshipModel from './model/RelationshipModel';
|
||||||
import NodeGraph from './NodeGraph';
|
import Topic from './Topic';
|
||||||
import Shape from './util/Shape';
|
import Shape from './util/Shape';
|
||||||
|
|
||||||
class Relationship extends ConnectionLine {
|
class Relationship extends ConnectionLine {
|
||||||
@ -42,7 +42,7 @@ class Relationship extends ConnectionLine {
|
|||||||
|
|
||||||
private _showStartArrow: Arrow;
|
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(sourceNode, 'sourceNode can not be null');
|
||||||
$assert(targetNode, 'targetNode can not be null');
|
$assert(targetNode, 'targetNode can not be null');
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ class RelationshipPivot {
|
|||||||
|
|
||||||
private _sourceTopic: Topic;
|
private _sourceTopic: Topic;
|
||||||
|
|
||||||
private _pivot: any;
|
private _pivot: CurvedLine;
|
||||||
|
|
||||||
private _startArrow: Arrow;
|
private _startArrow: Arrow;
|
||||||
|
|
||||||
|
@ -1329,6 +1329,10 @@ abstract class Topic extends NodeGraph {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
abstract workoutOutgoingConnectionPoint(position: Point): Point;
|
||||||
|
|
||||||
|
abstract workoutIncomingConnectionPoint(position: Point): Point;
|
||||||
|
|
||||||
isChildTopic(childTopic: Topic): boolean {
|
isChildTopic(childTopic: Topic): boolean {
|
||||||
let result = this.getId() === childTopic.getId();
|
let result = this.getId() === childTopic.getId();
|
||||||
if (!result) {
|
if (!result) {
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
import { $assert, $defined } from '@wisemapping/core-js';
|
import { $assert, $defined } from '@wisemapping/core-js';
|
||||||
import PositionType from '../PositionType';
|
import PositionType from '../PositionType';
|
||||||
import SizeType from '../SizeType';
|
import SizeType from '../SizeType';
|
||||||
|
import ChildrenSorterStrategy from './ChildrenSorterStrategy';
|
||||||
|
|
||||||
class Node {
|
class Node {
|
||||||
private _id: number;
|
private _id: number;
|
||||||
@ -25,14 +26,14 @@ class Node {
|
|||||||
// eslint-disable-next-line no-use-before-define
|
// eslint-disable-next-line no-use-before-define
|
||||||
_parent: Node;
|
_parent: Node;
|
||||||
|
|
||||||
private _sorter: any;
|
private _sorter: ChildrenSorterStrategy;
|
||||||
|
|
||||||
private _properties;
|
private _properties;
|
||||||
|
|
||||||
// eslint-disable-next-line no-use-before-define
|
// eslint-disable-next-line no-use-before-define
|
||||||
_children: Node[];
|
_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(typeof id === 'number' && Number.isFinite(id), 'id can not be null');
|
||||||
$assert(size, 'size can not be null');
|
$assert(size, 'size can not be null');
|
||||||
$assert(position, 'position can not be null');
|
$assert(position, 'position can not be null');
|
||||||
|
@ -67,7 +67,7 @@ class RelationshipModel {
|
|||||||
return this._id;
|
return this._id;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLineType() {
|
getLineType(): number {
|
||||||
return this._lineType;
|
return this._lineType;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user