Add NICE line support.

This commit is contained in:
Paulo Gustavo Veiga 2022-12-22 00:13:23 -08:00
parent b3587acfee
commit 2d09d01c21
6 changed files with 122 additions and 54 deletions

View File

@ -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());
},
}; };
/** /**

View File

@ -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();
} }

View File

@ -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;

View File

@ -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,
}, },

View File

@ -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>

View File

@ -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();
workspace.setSize('300px', '300px');
workspace.setCoordSize(300, 300);
workspace.setCoordOrigin(-150, -150);
// Line 1 ...
const line1 = new CurvedLine(); const line1 = new CurvedLine();
line1.setStyle(CurvedLine.SIMPLE_LINE); line1.setStyle(type);
line1.setFrom(200, 200); line1.setFrom(0, 0);
line1.setTo(100, 100); line1.setTo(100, 100);
line1.setSrcControlPoint(new Point(-100, 0)); line1.setSrcControlPoint(new Point(100 / 2, 0));
line1.setDestControlPoint(new Point(100, 0)); line1.setDestControlPoint(new Point(-100 / 2, 0));
line1.setStroke(4, 'solid', 'blue', 1);
workspace.append(line1); workspace.append(line1);
const line2 = new CurvedLine(); const line2 = new CurvedLine();
line2.setStyle(CurvedLine.NICE_LINE); line2.setStyle(type);
line2.setFrom(0, 0); line2.setFrom(0, 0);
line2.setTo(150, 90); line2.setTo(-100, -100);
line2.setSrcControlPoint(new Point(100, 0)); line2.setSrcControlPoint(new Point(-100 / 2, 0));
line2.setDestControlPoint(new Point(-100, 0)); line2.setDestControlPoint(new Point(100 / 2, 0));
workspace.append(line2); workspace.append(line2);
workspace.addItAsChildTo($('#overflowExample').first()); 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());