Improve polyline class.
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 92 KiB |
@ -17,7 +17,7 @@
|
||||
*/
|
||||
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
|
||||
import { CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
|
||||
import RelationshipModel from './model/RelationshipModel';
|
||||
import Topic from './Topic';
|
||||
import TopicConfig from './TopicConfig';
|
||||
@ -42,7 +42,7 @@ class ConnectionLine {
|
||||
|
||||
protected _model: RelationshipModel;
|
||||
|
||||
constructor(sourceNode: Topic, targetNode: Topic) {
|
||||
constructor(sourceNode: Topic, targetNode: Topic, type: LineType = LineType.SIMPLE_CURVED) {
|
||||
$assert(targetNode, 'parentNode node can not be null');
|
||||
$assert(sourceNode, 'childNode node can not be null');
|
||||
$assert(sourceNode !== targetNode, 'Circular connection');
|
||||
@ -50,15 +50,16 @@ class ConnectionLine {
|
||||
this._targetTopic = targetNode;
|
||||
this._sourceTopic = sourceNode;
|
||||
|
||||
const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
|
||||
const line = this._createLine(LineType.SIMPLE_CURVED);
|
||||
line.setSrcControlPoint(ctrlPoints[0]);
|
||||
line.setDestControlPoint(ctrlPoints[1]);
|
||||
// Set line styles ...
|
||||
const line = this._createLine(type);
|
||||
const strokeColor = ConnectionLine.getStrokeColor();
|
||||
if (type === LineType.SIMPLE_CURVED) {
|
||||
line.setStroke(1, 'solid', strokeColor, 1);
|
||||
line.setFill(strokeColor, 1);
|
||||
} else {
|
||||
line.setStroke(2, 'solid', strokeColor, 1);
|
||||
}
|
||||
|
||||
// Set line styles ...
|
||||
this._line2d = line;
|
||||
}
|
||||
|
||||
@ -66,7 +67,10 @@ class ConnectionLine {
|
||||
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)];
|
||||
return [
|
||||
{ x: deltaX, y: 0 },
|
||||
{ x: -deltaX, y: 0 },
|
||||
];
|
||||
}
|
||||
|
||||
protected _createLine(lineType: LineType): Line {
|
||||
|
@ -146,8 +146,8 @@ class ControlPivotLine {
|
||||
this._line.setTo(startPosition.x + ctrPosition.x - 5, startPosition.y + ctrPosition.y - 5);
|
||||
|
||||
this._dot.setPosition(
|
||||
startPosition.x + ctrPosition.x - 8,
|
||||
startPosition.y + ctrPosition.y - 8,
|
||||
startPosition.x + ctrPosition.x - 5,
|
||||
startPosition.y + ctrPosition.y - 5,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -167,7 +167,7 @@ class ControlPivotLine {
|
||||
this._moveRelHandler(ctlPoint);
|
||||
|
||||
// Update pivot ...
|
||||
this._dot.setPosition(mousePosition.x - 8, mousePosition.y - 8);
|
||||
this._dot.setPosition(mousePosition.x - 5, mousePosition.y - 5);
|
||||
|
||||
// Update line ...
|
||||
this._line.setTo(mousePosition.x - 5, mousePosition.y - 5);
|
||||
|
@ -15,7 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Elipse } from '@wisemapping/web2d';
|
||||
import { Elipse, Group } from '@wisemapping/web2d';
|
||||
|
||||
import TopicConfig from './TopicConfig';
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
@ -94,12 +94,12 @@ class ShirinkConnector {
|
||||
this._ellipse.setAttribute(name, value);
|
||||
}
|
||||
|
||||
addToWorkspace(group): void {
|
||||
addToWorkspace(group: Group): void {
|
||||
group.append(this._ellipse);
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
this._ellipse.setPosition(x, y);
|
||||
this._ellipse.setPosition(x + 3, y + 3);
|
||||
}
|
||||
|
||||
moveToBack(): void {
|
||||
|
@ -1034,7 +1034,7 @@ abstract class Topic extends NodeGraph {
|
||||
|
||||
disconnect(workspace: Workspace): void {
|
||||
const outgoingLine = this.getOutgoingLine();
|
||||
if ($defined(outgoingLine)) {
|
||||
if (outgoingLine) {
|
||||
$assert(workspace, 'workspace can not be null');
|
||||
|
||||
this._outgoingLine = null;
|
||||
@ -1069,7 +1069,7 @@ abstract class Topic extends NodeGraph {
|
||||
// Hide connection line?.
|
||||
if (targetTopic.getChildren().length === 0) {
|
||||
const connector = targetTopic.getShrinkConnector();
|
||||
if ($defined(connector)) {
|
||||
if (connector) {
|
||||
connector.setVisibility(false);
|
||||
targetTopic.isCollapsed(false);
|
||||
}
|
||||
@ -1146,13 +1146,13 @@ abstract class Topic extends NodeGraph {
|
||||
|
||||
abstract updateTopicShape(targetTopic: Topic);
|
||||
|
||||
append(child: Topic) {
|
||||
append(child: Topic): void {
|
||||
const children = this.getChildren();
|
||||
children.push(child);
|
||||
}
|
||||
|
||||
/** */
|
||||
removeChild(child: Topic) {
|
||||
removeChild(child: Topic): void {
|
||||
const children = this.getChildren();
|
||||
this._children = children.filter((c) => c !== child);
|
||||
}
|
||||
@ -1167,7 +1167,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
removeFromWorkspace(workspace: Workspace): void {
|
||||
const elem2d = this.get2DElement();
|
||||
workspace.removeChild(elem2d);
|
||||
const line = this.getOutgoingLine();
|
||||
@ -1178,7 +1178,7 @@ abstract class Topic extends NodeGraph {
|
||||
EventBus.instance.fireEvent('topicRemoved', this.getModel());
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace) {
|
||||
addToWorkspace(workspace: Workspace): void {
|
||||
const elem = this.get2DElement();
|
||||
workspace.append(elem);
|
||||
if (!this.isInWorkspace()) {
|
||||
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 151 KiB |
Before Width: | Height: | Size: 325 KiB After Width: | Height: | Size: 329 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 297 KiB |
@ -24,6 +24,7 @@ class ElipsePeer extends ElementPeer {
|
||||
super(svgElement);
|
||||
this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
|
||||
this._position = { x: 0, y: 0 };
|
||||
this._size = { width: 5, height: 5 };
|
||||
}
|
||||
|
||||
setSize(width, height) {
|
||||
@ -35,23 +36,16 @@ class ElipsePeer extends ElementPeer {
|
||||
if ($defined(height)) {
|
||||
this._native.setAttribute('ry', height / 2);
|
||||
}
|
||||
|
||||
const pos = this.getPosition();
|
||||
this.setPosition(pos.x, pos.y);
|
||||
}
|
||||
|
||||
setPosition(pcx, pcy) {
|
||||
const size = this.getSize();
|
||||
|
||||
const cx = size.width / 2 + pcx;
|
||||
const cy = size.height / 2 + pcy;
|
||||
|
||||
if ($defined(cx)) {
|
||||
this._native.setAttribute('cx', cx);
|
||||
this._position = { x: pcx, y: pcy };
|
||||
if ($defined(pcx)) {
|
||||
this._native.setAttribute('cx', pcx);
|
||||
}
|
||||
|
||||
if ($defined(cy)) {
|
||||
this._native.setAttribute('cy', cy);
|
||||
if ($defined(pcy)) {
|
||||
this._native.setAttribute('cy', pcy);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -57,11 +57,13 @@ class PolyLinePeer extends ElementPeer {
|
||||
}
|
||||
|
||||
_updatePath() {
|
||||
if (this._style === 'Curved') {
|
||||
this._updateMiddleCurvePath();
|
||||
} else if (this._style === 'Straight') {
|
||||
if (this._style === 'Straight') {
|
||||
this._updateStraightPath();
|
||||
} else {
|
||||
} if (this._style === 'MiddleStraight') {
|
||||
this._updateMiddleStraightPath();
|
||||
} else if (this._style === 'MiddleCurved') {
|
||||
this._updateMiddleCurvePath();
|
||||
} else if (this._style === 'Curved' || !this._style) {
|
||||
this._updateCurvePath();
|
||||
}
|
||||
}
|
||||
@ -85,10 +87,11 @@ class PolyLinePeer extends ElementPeer {
|
||||
const y1 = this._y1;
|
||||
const x2 = this._x2;
|
||||
const y2 = this._y2;
|
||||
|
||||
if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
|
||||
const diff = x2 - x1;
|
||||
const middlex = diff / 2 + x1;
|
||||
let signx = 1;
|
||||
let signx = 0;
|
||||
let signy = 1;
|
||||
if (diff < 0) {
|
||||
signx = -1;
|
||||
@ -96,13 +99,25 @@ class PolyLinePeer extends ElementPeer {
|
||||
if (y2 < y1) {
|
||||
signy = -1;
|
||||
}
|
||||
const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${
|
||||
y1 + 10 * signy
|
||||
const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${y1 + 10 * signy
|
||||
} ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
|
||||
this._native.setAttribute('points', path);
|
||||
}
|
||||
}
|
||||
|
||||
_updateMiddleStraightPath() {
|
||||
const x1 = this._x1;
|
||||
const y1 = this._y1;
|
||||
const x2 = this._x2;
|
||||
const y2 = this._y2;
|
||||
if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
|
||||
const diff = x2 - x1;
|
||||
const middlex = diff / 2 + x1;
|
||||
const path = `${x1}, ${y1} ${middlex}, ${y1} ${middlex}, ${y1} ${middlex}, ${y2} ${middlex}, ${y2} ${x2}, ${y2}`;
|
||||
this._native.setAttribute('points', path);
|
||||
}
|
||||
}
|
||||
|
||||
_updateCurvePath() {
|
||||
if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
|
||||
const path = PolyLineUtils.buildCurvedPath.call(
|
||||
|
@ -14,21 +14,35 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Different types of PolyLines that can be used.
|
||||
Straight Polylines
|
||||
</td>
|
||||
<td>
|
||||
<div id="overflowExample" />
|
||||
<div id="straightSample" />
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
This is how multiple childs will look in each style line
|
||||
Middle Straight Polylines
|
||||
</td>
|
||||
<td>
|
||||
<div id="multipleLineExample" />
|
||||
<div id="middleStraightSample" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Curved Polylines
|
||||
</td>
|
||||
<td>
|
||||
<div id="curvedSample" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Middle Curved Polylines
|
||||
</td>
|
||||
<td>
|
||||
<div id="middleCurvedSample" />
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -1,64 +1,78 @@
|
||||
import $ from 'jquery';
|
||||
import { Workspace, PolyLine } from '../../src';
|
||||
import { Workspace, PolyLine, Elipse } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
const drawLine = (type) => {
|
||||
const workspace = new Workspace();
|
||||
workspace.setSize('300px', '300px');
|
||||
workspace.setCoordSize(300, 300);
|
||||
workspace.setCoordOrigin(-150, -150);
|
||||
|
||||
let overflowWorkspace = new Workspace({ fillColor: 'green' });
|
||||
overflowWorkspace.setSize('100px', '100px');
|
||||
// Add referene point ...
|
||||
const e1 = new Elipse();
|
||||
e1.setSize(10, 10);
|
||||
e1.setPosition(0, 0);
|
||||
workspace.append(e1);
|
||||
|
||||
const line = new PolyLine();
|
||||
line.setTo(165, 165);
|
||||
line.setFrom(95, 95);
|
||||
line.setStyle('Straight');
|
||||
line.setStroke('10');
|
||||
overflowWorkspace.append(line);
|
||||
const e2 = new Elipse();
|
||||
e2.setPosition(-100, -100);
|
||||
e2.setSize(10, 10);
|
||||
workspace.append(e2);
|
||||
|
||||
overflowWorkspace.addItAsChildTo($('#overflowExample'));
|
||||
const e3 = new Elipse();
|
||||
e3.setPosition(100, 100);
|
||||
e3.setSize(10, 10);
|
||||
workspace.append(e3);
|
||||
|
||||
overflowWorkspace = new Workspace();
|
||||
overflowWorkspace.setSize('100px', '100px');
|
||||
let line1 = new PolyLine();
|
||||
line1.setFrom(95, 95);
|
||||
line1.setTo(165, 165);
|
||||
line1.setStyle('Curved');
|
||||
overflowWorkspace.append(line1);
|
||||
const e4 = new Elipse();
|
||||
e4.setPosition(-100, 100);
|
||||
e4.setSize(10, 10);
|
||||
workspace.append(e4);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(95, 95);
|
||||
line1.setTo(165, 135);
|
||||
line1.setStyle('Curved');
|
||||
overflowWorkspace.append(line1);
|
||||
const e5 = new Elipse();
|
||||
e5.setPosition(100, -100);
|
||||
e5.setSize(10, 10);
|
||||
workspace.append(e5);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(95, 90);
|
||||
line1.setTo(160, 20);
|
||||
line1.setStyle('Straight');
|
||||
overflowWorkspace.append(line1);
|
||||
// Line 1 ...
|
||||
const line1 = new PolyLine();
|
||||
line1.setFrom(0, 0);
|
||||
line1.setTo(100, 100);
|
||||
line1.setStyle(type);
|
||||
line1.setStroke('1');
|
||||
workspace.append(line1);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(95, 90);
|
||||
line1.setTo(160, 50);
|
||||
line1.setStyle('Straight');
|
||||
overflowWorkspace.append(line1);
|
||||
const line2 = new PolyLine();
|
||||
line2.setFrom(0, 0);
|
||||
line2.setTo(-100, -100);
|
||||
line2.setStyle(type);
|
||||
line2.setStroke('1');
|
||||
workspace.append(line2);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(90, 90);
|
||||
line1.setTo(20, 20);
|
||||
overflowWorkspace.append(line1);
|
||||
const line3 = new PolyLine();
|
||||
line3.setFrom(0, 0);
|
||||
line3.setTo(100, -100);
|
||||
line3.setStyle(type);
|
||||
line3.setStroke('1');
|
||||
workspace.append(line3);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(90, 90);
|
||||
line1.setTo(20, 50);
|
||||
overflowWorkspace.append(line1);
|
||||
const line4 = new PolyLine();
|
||||
line4.setFrom(0, 0);
|
||||
line4.setTo(-100, 100);
|
||||
line4.setStyle(type);
|
||||
line2.setStroke('1');
|
||||
workspace.append(line4);
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(90, 95);
|
||||
line1.setTo(20, 165);
|
||||
overflowWorkspace.append(line1);
|
||||
return workspace;
|
||||
};
|
||||
const w1 = drawLine('Straight');
|
||||
w1.addItAsChildTo($('#straightSample'));
|
||||
|
||||
line1 = new PolyLine();
|
||||
line1.setFrom(90, 95);
|
||||
line1.setTo(20, 135);
|
||||
overflowWorkspace.append(line1);
|
||||
const w2 = drawLine('MiddleStraight');
|
||||
w2.addItAsChildTo($('#middleStraightSample'));
|
||||
|
||||
overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
|
||||
const w3 = drawLine('MiddleCurved');
|
||||
w3.addItAsChildTo($('#middleCurvedSample'));
|
||||
|
||||
const w4 = drawLine('Curved');
|
||||
w4.addItAsChildTo($('#curvedSample'));
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |