diff --git a/packages/editor/src/components/editor-toolbar/configBuilder.tsx b/packages/editor/src/components/editor-toolbar/configBuilder.tsx index 2112afec..968041cb 100644 --- a/packages/editor/src/components/editor-toolbar/configBuilder.tsx +++ b/packages/editor/src/components/editor-toolbar/configBuilder.tsx @@ -167,6 +167,15 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo onClick: () => valueBulder.getConnectionStyleModel().setValue(LineType.SIMPLE_CURVED), selected: () => valueBulder.getConnectionStyleModel().getValue() === LineType.SIMPLE_CURVED, }, + // { + // icon: , + // 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: , tooltip: intl.formatMessage({ @@ -188,7 +197,10 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo 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()); + }, }; /** diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index 82eddca0..39bcbb6b 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -18,7 +18,6 @@ import { $assert } from '@wisemapping/core-js'; import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d'; -import RelationshipModel from './model/RelationshipModel'; import Topic from './Topic'; import TopicConfig from './TopicConfig'; import Workspace from './Workspace'; @@ -28,6 +27,7 @@ export enum LineType { SIMPLE_CURVED, POLYLINE_MIDDLE, POLYLINE_CURVED, + NICE_CURVED, } class ConnectionLine { @@ -39,7 +39,7 @@ class ConnectionLine { protected _line2d: Line; - protected _model: RelationshipModel; + private _type: LineType; constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) { $assert(targetNode, 'parentNode node can not be null'); @@ -48,22 +48,9 @@ class ConnectionLine { this._targetTopic = targetNode; this._sourceTopic = sourceNode; + this._type = 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 ... this._line2d = line; @@ -79,25 +66,37 @@ class ConnectionLine { ]; } - protected _createLine(lineType: LineType): Line { + protected _createLine(lineType: LineType): ConnectionLine { this._lineType = lineType; let line: ConnectionLine; + const strokeColor = ConnectionLine.getStrokeColor(); switch (lineType) { case LineType.POLYLINE_MIDDLE: line = new PolyLine(); (line as PolyLine).setStyle('MiddleStraight'); + (line as PolyLine).setStroke(1, 'solid', strokeColor, 1); break; case LineType.POLYLINE_CURVED: line = new PolyLine(); (line as PolyLine).setStyle('Curved'); + (line as PolyLine).setStroke(1, 'solid', strokeColor, 1); break; case LineType.SIMPLE_CURVED: line = new CurvedLine(); (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; default: throw new Error(`Unexpected line type. ${lineType}`); } + return line; } @@ -127,7 +126,7 @@ class ConnectionLine { line2d.setFrom(tPos.x, tPos.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); line2d.setSrcControlPoint(ctrlPoints[0]); line2d.setDestControlPoint(ctrlPoints[1]); @@ -191,22 +190,10 @@ class ConnectionLine { return this._line2d; } - getModel(): RelationshipModel { - return this._model; - } - - setModel(model: RelationshipModel): void { - this._model = model; - } - getType(): string { return 'ConnectionLine'; } - getId(): number { - return this._model.getId(); - } - moveToBack(): void { this._line2d.moveToBack(); } diff --git a/packages/mindplot/src/components/Relationship.ts b/packages/mindplot/src/components/Relationship.ts index adc3a2dd..91305f44 100644 --- a/packages/mindplot/src/components/Relationship.ts +++ b/packages/mindplot/src/components/Relationship.ts @@ -44,12 +44,14 @@ class Relationship extends ConnectionLine { private _showStartArrow: Arrow; + private _model: RelationshipModel; + constructor(sourceNode: Topic, targetNode: Topic, model: RelationshipModel) { $assert(sourceNode, 'sourceNode can not be null'); $assert(targetNode, 'targetNode can not be null'); super(sourceNode, targetNode); - this.setModel(model); + this._model = model; const strokeColor = Relationship.getStrokeColor(); @@ -115,6 +117,10 @@ class Relationship extends ConnectionLine { this._startArrow.setStrokeColor(color); } + getModel(): RelationshipModel { + return this._model; + } + private updatePositions() { const line2d = this._line2d; const sourceTopic = this._sourceTopic; diff --git a/packages/mindplot/src/components/TopicStyle.ts b/packages/mindplot/src/components/TopicStyle.ts index 2a2f8a71..458c0143 100644 --- a/packages/mindplot/src/components/TopicStyle.ts +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -48,7 +48,7 @@ const TopicDefaultStyles = { weight: 'bold', color: '#ffffff', }, - connectionStyle: LineType.SIMPLE_CURVED, + connectionStyle: LineType.NICE_CURVED, msgKey: 'CENTRAL_TOPIC', shapeType: 'rounded rectangle' as TopicShapeType, }, diff --git a/packages/web2d/test/playground/curvedLine.html b/packages/web2d/test/playground/curvedLine.html index fb142ece..ce753152 100644 --- a/packages/web2d/test/playground/curvedLine.html +++ b/packages/web2d/test/playground/curvedLine.html @@ -8,16 +8,24 @@ -

PolyLines Render Tests

+

Curved Line Tests

+ + + + diff --git a/packages/web2d/test/playground/curvedLine.js b/packages/web2d/test/playground/curvedLine.js index 08c1ad7d..22fec585 100644 --- a/packages/web2d/test/playground/curvedLine.js +++ b/packages/web2d/test/playground/curvedLine.js @@ -1,22 +1,77 @@ import $ from 'jquery'; -import { Workspace, CurvedLine, Point } from '../../src'; +import { Workspace, CurvedLine, Point, Elipse } from '../../src'; -const workspace = new Workspace({ fillColor: 'green' }); -workspace.setSize('400px', '400px'); -const line1 = new CurvedLine(); -line1.setStyle(CurvedLine.SIMPLE_LINE); -line1.setFrom(200, 200); -line1.setTo(100, 100); -line1.setSrcControlPoint(new Point(-100, 0)); -line1.setDestControlPoint(new Point(100, 0)); -workspace.append(line1); +const drawLine = (type) => { + const workspace = new Workspace(); + workspace.setSize('300px', '300px'); + workspace.setCoordSize(300, 300); + workspace.setCoordOrigin(-150, -150); -const line2 = new CurvedLine(); -line2.setStyle(CurvedLine.NICE_LINE); -line2.setFrom(0, 0); -line2.setTo(150, 90); -line2.setSrcControlPoint(new Point(100, 0)); -line2.setDestControlPoint(new Point(-100, 0)); -workspace.append(line2); + // Line 1 ... + const line1 = new CurvedLine(); + line1.setStyle(type); + line1.setFrom(0, 0); + line1.setTo(100, 100); + line1.setSrcControlPoint(new Point(100 / 2, 0)); + 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());
- Different types of PolyLines that can be used. + Curved Line Simple -
+
+
+ Curved Line Nice + +