mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Add NICE line support.
This commit is contained in:
parent
b3587acfee
commit
2d09d01c21
@ -167,6 +167,15 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
|||||||
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED),
|
onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED),
|
||||||
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED,
|
selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED,
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// icon: <GestureOutlined />,
|
||||||
|
// tooltip: intl.formatMessage({
|
||||||
|
// id: 'editor-panel.tooltip-connection-style-curved-nice',
|
||||||
|
// defaultMessage: 'Curved',
|
||||||
|
// }),
|
||||||
|
// onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.NICE_CURVED),
|
||||||
|
// selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.NICE_CURVED,
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
icon: <PolylineOutlined />,
|
icon: <PolylineOutlined />,
|
||||||
tooltip: intl.formatMessage({
|
tooltip: intl.formatMessage({
|
||||||
@ -188,7 +197,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
|
|||||||
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
|
valueBulder.getConnectionStyleModel().getValue() === LineType.POLYLINE_CURVED,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
disabled: () => model.getDesignerModel().filterSelectedTopics().length === 0,
|
disabled: () => {
|
||||||
|
const selected = model.getDesignerModel().filterSelectedTopics();
|
||||||
|
return selected.length === 0 || (selected.length === 1 && selected[0].isCentralTopic());
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -18,7 +18,6 @@
|
|||||||
|
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
|
import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
|
||||||
import RelationshipModel from './model/RelationshipModel';
|
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
import TopicConfig from './TopicConfig';
|
import TopicConfig from './TopicConfig';
|
||||||
import Workspace from './Workspace';
|
import Workspace from './Workspace';
|
||||||
@ -28,6 +27,7 @@ export enum LineType {
|
|||||||
SIMPLE_CURVED,
|
SIMPLE_CURVED,
|
||||||
POLYLINE_MIDDLE,
|
POLYLINE_MIDDLE,
|
||||||
POLYLINE_CURVED,
|
POLYLINE_CURVED,
|
||||||
|
NICE_CURVED,
|
||||||
}
|
}
|
||||||
|
|
||||||
class ConnectionLine {
|
class ConnectionLine {
|
||||||
@ -39,7 +39,7 @@ class ConnectionLine {
|
|||||||
|
|
||||||
protected _line2d: Line;
|
protected _line2d: Line;
|
||||||
|
|
||||||
protected _model: RelationshipModel;
|
private _type: LineType;
|
||||||
|
|
||||||
constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
|
constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
|
||||||
$assert(targetNode, 'parentNode node can not be null');
|
$assert(targetNode, 'parentNode node can not be null');
|
||||||
@ -48,22 +48,9 @@ class ConnectionLine {
|
|||||||
|
|
||||||
this._targetTopic = targetNode;
|
this._targetTopic = targetNode;
|
||||||
this._sourceTopic = sourceNode;
|
this._sourceTopic = sourceNode;
|
||||||
|
this._type = type;
|
||||||
|
|
||||||
const line = this._createLine(type);
|
const line = this._createLine(type);
|
||||||
const strokeColor = ConnectionLine.getStrokeColor();
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case LineType.POLYLINE_MIDDLE:
|
|
||||||
case LineType.POLYLINE_CURVED:
|
|
||||||
line.setStroke(1, 'solid', strokeColor, 1);
|
|
||||||
break;
|
|
||||||
case LineType.SIMPLE_CURVED:
|
|
||||||
line.setStroke(1, 'solid', strokeColor, 1);
|
|
||||||
line.setFill(strokeColor, 2);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
line.setStroke(2, 'solid', strokeColor, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set line styles ...
|
// Set line styles ...
|
||||||
this._line2d = line;
|
this._line2d = line;
|
||||||
@ -79,25 +66,37 @@ class ConnectionLine {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
protected _createLine(lineType: LineType): Line {
|
protected _createLine(lineType: LineType): ConnectionLine {
|
||||||
this._lineType = lineType;
|
this._lineType = lineType;
|
||||||
let line: ConnectionLine;
|
let line: ConnectionLine;
|
||||||
|
const strokeColor = ConnectionLine.getStrokeColor();
|
||||||
switch (lineType) {
|
switch (lineType) {
|
||||||
case LineType.POLYLINE_MIDDLE:
|
case LineType.POLYLINE_MIDDLE:
|
||||||
line = new PolyLine();
|
line = new PolyLine();
|
||||||
(line as PolyLine).setStyle('MiddleStraight');
|
(line as PolyLine).setStyle('MiddleStraight');
|
||||||
|
(line as PolyLine).setStroke(1, 'solid', strokeColor, 1);
|
||||||
break;
|
break;
|
||||||
case LineType.POLYLINE_CURVED:
|
case LineType.POLYLINE_CURVED:
|
||||||
line = new PolyLine();
|
line = new PolyLine();
|
||||||
(line as PolyLine).setStyle('Curved');
|
(line as PolyLine).setStyle('Curved');
|
||||||
|
(line as PolyLine).setStroke(1, 'solid', strokeColor, 1);
|
||||||
break;
|
break;
|
||||||
case LineType.SIMPLE_CURVED:
|
case LineType.SIMPLE_CURVED:
|
||||||
line = new CurvedLine();
|
line = new CurvedLine();
|
||||||
(line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE);
|
(line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE);
|
||||||
|
(line as CurvedLine).setStroke(1, 'solid', strokeColor, 1);
|
||||||
|
(line as CurvedLine).setFill(strokeColor, 1);
|
||||||
|
break;
|
||||||
|
case LineType.NICE_CURVED:
|
||||||
|
line = new CurvedLine();
|
||||||
|
(line as CurvedLine).setStyle(CurvedLine.NICE_LINE);
|
||||||
|
(line as CurvedLine).setStroke(1, 'solid', strokeColor, 1);
|
||||||
|
(line as CurvedLine).setFill(strokeColor, 1);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
throw new Error(`Unexpected line type. ${lineType}`);
|
throw new Error(`Unexpected line type. ${lineType}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
return line;
|
return line;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -127,7 +126,7 @@ class ConnectionLine {
|
|||||||
line2d.setFrom(tPos.x, tPos.y);
|
line2d.setFrom(tPos.x, tPos.y);
|
||||||
line2d.setTo(sPos.x, sPos.y);
|
line2d.setTo(sPos.x, sPos.y);
|
||||||
|
|
||||||
if (line2d.getType() === 'CurvedLine') {
|
if (this._type === LineType.NICE_CURVED || this._type === LineType.SIMPLE_CURVED) {
|
||||||
const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
|
const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
|
||||||
line2d.setSrcControlPoint(ctrlPoints[0]);
|
line2d.setSrcControlPoint(ctrlPoints[0]);
|
||||||
line2d.setDestControlPoint(ctrlPoints[1]);
|
line2d.setDestControlPoint(ctrlPoints[1]);
|
||||||
@ -191,22 +190,10 @@ class ConnectionLine {
|
|||||||
return this._line2d;
|
return this._line2d;
|
||||||
}
|
}
|
||||||
|
|
||||||
getModel(): RelationshipModel {
|
|
||||||
return this._model;
|
|
||||||
}
|
|
||||||
|
|
||||||
setModel(model: RelationshipModel): void {
|
|
||||||
this._model = model;
|
|
||||||
}
|
|
||||||
|
|
||||||
getType(): string {
|
getType(): string {
|
||||||
return 'ConnectionLine';
|
return 'ConnectionLine';
|
||||||
}
|
}
|
||||||
|
|
||||||
getId(): number {
|
|
||||||
return this._model.getId();
|
|
||||||
}
|
|
||||||
|
|
||||||
moveToBack(): void {
|
moveToBack(): void {
|
||||||
this._line2d.moveToBack();
|
this._line2d.moveToBack();
|
||||||
}
|
}
|
||||||
|
@ -44,12 +44,14 @@ class Relationship extends ConnectionLine {
|
|||||||
|
|
||||||
private _showStartArrow: Arrow;
|
private _showStartArrow: Arrow;
|
||||||
|
|
||||||
|
private _model: RelationshipModel;
|
||||||
|
|
||||||
constructor(sourceNode: Topic, targetNode: Topic, 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');
|
||||||
|
|
||||||
super(sourceNode, targetNode);
|
super(sourceNode, targetNode);
|
||||||
this.setModel(model);
|
this._model = model;
|
||||||
|
|
||||||
const strokeColor = Relationship.getStrokeColor();
|
const strokeColor = Relationship.getStrokeColor();
|
||||||
|
|
||||||
@ -115,6 +117,10 @@ class Relationship extends ConnectionLine {
|
|||||||
this._startArrow.setStrokeColor(color);
|
this._startArrow.setStrokeColor(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getModel(): RelationshipModel {
|
||||||
|
return this._model;
|
||||||
|
}
|
||||||
|
|
||||||
private updatePositions() {
|
private updatePositions() {
|
||||||
const line2d = this._line2d;
|
const line2d = this._line2d;
|
||||||
const sourceTopic = this._sourceTopic;
|
const sourceTopic = this._sourceTopic;
|
||||||
|
@ -48,7 +48,7 @@ const TopicDefaultStyles = {
|
|||||||
weight: 'bold',
|
weight: 'bold',
|
||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
},
|
},
|
||||||
connectionStyle: LineType.SIMPLE_CURVED,
|
connectionStyle: LineType.NICE_CURVED,
|
||||||
msgKey: 'CENTRAL_TOPIC',
|
msgKey: 'CENTRAL_TOPIC',
|
||||||
shapeType: 'rounded rectangle' as TopicShapeType,
|
shapeType: 'rounded rectangle' as TopicShapeType,
|
||||||
},
|
},
|
||||||
|
@ -8,16 +8,24 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>PolyLines Render Tests </h1>
|
<h1>Curved Line Tests </h1>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
Different types of PolyLines that can be used.
|
Curved Line Simple
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div id="overflowExample" />
|
<div id="curvedSimpleExample" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Curved Line Nice
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div id="curvedNiceExample" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
@ -1,22 +1,77 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import { Workspace, CurvedLine, Point } from '../../src';
|
import { Workspace, CurvedLine, Point, Elipse } from '../../src';
|
||||||
|
|
||||||
const workspace = new Workspace({ fillColor: 'green' });
|
const drawLine = (type) => {
|
||||||
workspace.setSize('400px', '400px');
|
const workspace = new Workspace();
|
||||||
const line1 = new CurvedLine();
|
workspace.setSize('300px', '300px');
|
||||||
line1.setStyle(CurvedLine.SIMPLE_LINE);
|
workspace.setCoordSize(300, 300);
|
||||||
line1.setFrom(200, 200);
|
workspace.setCoordOrigin(-150, -150);
|
||||||
line1.setTo(100, 100);
|
|
||||||
line1.setSrcControlPoint(new Point(-100, 0));
|
|
||||||
line1.setDestControlPoint(new Point(100, 0));
|
|
||||||
workspace.append(line1);
|
|
||||||
|
|
||||||
const line2 = new CurvedLine();
|
// Line 1 ...
|
||||||
line2.setStyle(CurvedLine.NICE_LINE);
|
const line1 = new CurvedLine();
|
||||||
line2.setFrom(0, 0);
|
line1.setStyle(type);
|
||||||
line2.setTo(150, 90);
|
line1.setFrom(0, 0);
|
||||||
line2.setSrcControlPoint(new Point(100, 0));
|
line1.setTo(100, 100);
|
||||||
line2.setDestControlPoint(new Point(-100, 0));
|
line1.setSrcControlPoint(new Point(100 / 2, 0));
|
||||||
workspace.append(line2);
|
line1.setDestControlPoint(new Point(-100 / 2, 0));
|
||||||
|
line1.setStroke(4, 'solid', 'blue', 1);
|
||||||
|
workspace.append(line1);
|
||||||
|
|
||||||
workspace.addItAsChildTo($('#overflowExample').first());
|
const line2 = new CurvedLine();
|
||||||
|
line2.setStyle(type);
|
||||||
|
line2.setFrom(0, 0);
|
||||||
|
line2.setTo(-100, -100);
|
||||||
|
line2.setSrcControlPoint(new Point(-100 / 2, 0));
|
||||||
|
line2.setDestControlPoint(new Point(100 / 2, 0));
|
||||||
|
workspace.append(line2);
|
||||||
|
|
||||||
|
const line3 = new CurvedLine();
|
||||||
|
line3.setStyle(type);
|
||||||
|
line3.setFrom(0, 0);
|
||||||
|
line3.setTo(100, -100);
|
||||||
|
line3.setSrcControlPoint(new Point(100 / 2, 0));
|
||||||
|
line3.setDestControlPoint(new Point(-100 / 2, 0));
|
||||||
|
workspace.append(line3);
|
||||||
|
|
||||||
|
const line4 = new CurvedLine();
|
||||||
|
line4.setStyle(type);
|
||||||
|
line4.setFrom(0, 0);
|
||||||
|
line4.setTo(-100, 100);
|
||||||
|
line4.setSrcControlPoint(new Point(-100 / 2, 0));
|
||||||
|
line4.setDestControlPoint(new Point(100 / 2, 0));
|
||||||
|
workspace.append(line4);
|
||||||
|
|
||||||
|
// Add referene point ...
|
||||||
|
const e1 = new Elipse();
|
||||||
|
e1.setSize(30, 30);
|
||||||
|
e1.setPosition(0, 0);
|
||||||
|
workspace.append(e1);
|
||||||
|
|
||||||
|
const e2 = new Elipse();
|
||||||
|
e2.setPosition(-100, -100);
|
||||||
|
e2.setSize(10, 10);
|
||||||
|
workspace.append(e2);
|
||||||
|
|
||||||
|
const e3 = new Elipse();
|
||||||
|
e3.setPosition(100, 100);
|
||||||
|
e3.setSize(10, 10);
|
||||||
|
workspace.append(e3);
|
||||||
|
|
||||||
|
const e4 = new Elipse();
|
||||||
|
e4.setPosition(-100, 100);
|
||||||
|
e4.setSize(10, 10);
|
||||||
|
workspace.append(e4);
|
||||||
|
|
||||||
|
const e5 = new Elipse();
|
||||||
|
e5.setPosition(100, -100);
|
||||||
|
e5.setSize(10, 10);
|
||||||
|
workspace.append(e5);
|
||||||
|
|
||||||
|
return workspace;
|
||||||
|
};
|
||||||
|
|
||||||
|
const w1 = drawLine(CurvedLine.SIMPLE_LINE);
|
||||||
|
w1.addItAsChildTo($('#curvedSimpleExample').first());
|
||||||
|
|
||||||
|
const w2 = drawLine(CurvedLine.NICE_LINE);
|
||||||
|
w2.addItAsChildTo($('#curvedNiceExample').first());
|
||||||
|
Loading…
Reference in New Issue
Block a user