Improve polyline class.

This commit is contained in:
Paulo Gustavo Veiga 2022-12-20 20:53:13 -08:00
parent d08e277a1d
commit c8482e1764
14 changed files with 139 additions and 98 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View File

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

View File

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

View File

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

View File

@ -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()) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 329 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 301 KiB

After

Width:  |  Height:  |  Size: 297 KiB

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB