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 { $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 RelationshipModel from './model/RelationshipModel';
import Topic from './Topic'; import Topic from './Topic';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
@ -42,7 +42,7 @@ class ConnectionLine {
protected _model: RelationshipModel; 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(targetNode, 'parentNode node can not be null');
$assert(sourceNode, 'childNode node can not be null'); $assert(sourceNode, 'childNode node can not be null');
$assert(sourceNode !== targetNode, 'Circular connection'); $assert(sourceNode !== targetNode, 'Circular connection');
@ -50,15 +50,16 @@ class ConnectionLine {
this._targetTopic = targetNode; this._targetTopic = targetNode;
this._sourceTopic = sourceNode; this._sourceTopic = sourceNode;
const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode); const line = this._createLine(type);
const line = this._createLine(LineType.SIMPLE_CURVED);
line.setSrcControlPoint(ctrlPoints[0]);
line.setDestControlPoint(ctrlPoints[1]);
// Set line styles ...
const strokeColor = ConnectionLine.getStrokeColor(); const strokeColor = ConnectionLine.getStrokeColor();
if (type === LineType.SIMPLE_CURVED) {
line.setStroke(1, 'solid', strokeColor, 1); line.setStroke(1, 'solid', strokeColor, 1);
line.setFill(strokeColor, 1); line.setFill(strokeColor, 1);
} else {
line.setStroke(2, 'solid', strokeColor, 1);
}
// Set line styles ...
this._line2d = line; this._line2d = line;
} }
@ -66,7 +67,10 @@ class ConnectionLine {
const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition()); const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition()); const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
const deltaX = (srcPos.x - destPos.x) / 3; 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 { 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._line.setTo(startPosition.x + ctrPosition.x - 5, startPosition.y + ctrPosition.y - 5);
this._dot.setPosition( this._dot.setPosition(
startPosition.x + ctrPosition.x - 8, startPosition.x + ctrPosition.x - 5,
startPosition.y + ctrPosition.y - 8, startPosition.y + ctrPosition.y - 5,
); );
} }
} }
@ -167,7 +167,7 @@ class ControlPivotLine {
this._moveRelHandler(ctlPoint); this._moveRelHandler(ctlPoint);
// Update pivot ... // Update pivot ...
this._dot.setPosition(mousePosition.x - 8, mousePosition.y - 8); this._dot.setPosition(mousePosition.x - 5, mousePosition.y - 5);
// Update line ... // Update line ...
this._line.setTo(mousePosition.x - 5, mousePosition.y - 5); 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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Elipse } from '@wisemapping/web2d'; import { Elipse, Group } from '@wisemapping/web2d';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
@ -94,12 +94,12 @@ class ShirinkConnector {
this._ellipse.setAttribute(name, value); this._ellipse.setAttribute(name, value);
} }
addToWorkspace(group): void { addToWorkspace(group: Group): void {
group.append(this._ellipse); group.append(this._ellipse);
} }
setPosition(x: number, y: number): void { setPosition(x: number, y: number): void {
this._ellipse.setPosition(x, y); this._ellipse.setPosition(x + 3, y + 3);
} }
moveToBack(): void { moveToBack(): void {

View File

@ -1034,7 +1034,7 @@ abstract class Topic extends NodeGraph {
disconnect(workspace: Workspace): void { disconnect(workspace: Workspace): void {
const outgoingLine = this.getOutgoingLine(); const outgoingLine = this.getOutgoingLine();
if ($defined(outgoingLine)) { if (outgoingLine) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
this._outgoingLine = null; this._outgoingLine = null;
@ -1069,7 +1069,7 @@ abstract class Topic extends NodeGraph {
// Hide connection line?. // Hide connection line?.
if (targetTopic.getChildren().length === 0) { if (targetTopic.getChildren().length === 0) {
const connector = targetTopic.getShrinkConnector(); const connector = targetTopic.getShrinkConnector();
if ($defined(connector)) { if (connector) {
connector.setVisibility(false); connector.setVisibility(false);
targetTopic.isCollapsed(false); targetTopic.isCollapsed(false);
} }
@ -1146,13 +1146,13 @@ abstract class Topic extends NodeGraph {
abstract updateTopicShape(targetTopic: Topic); abstract updateTopicShape(targetTopic: Topic);
append(child: Topic) { append(child: Topic): void {
const children = this.getChildren(); const children = this.getChildren();
children.push(child); children.push(child);
} }
/** */ /** */
removeChild(child: Topic) { removeChild(child: Topic): void {
const children = this.getChildren(); const children = this.getChildren();
this._children = children.filter((c) => c !== child); this._children = children.filter((c) => c !== child);
} }
@ -1167,7 +1167,7 @@ abstract class Topic extends NodeGraph {
return result; return result;
} }
removeFromWorkspace(workspace: Workspace) { removeFromWorkspace(workspace: Workspace): void {
const elem2d = this.get2DElement(); const elem2d = this.get2DElement();
workspace.removeChild(elem2d); workspace.removeChild(elem2d);
const line = this.getOutgoingLine(); const line = this.getOutgoingLine();
@ -1178,7 +1178,7 @@ abstract class Topic extends NodeGraph {
EventBus.instance.fireEvent('topicRemoved', this.getModel()); EventBus.instance.fireEvent('topicRemoved', this.getModel());
} }
addToWorkspace(workspace: Workspace) { addToWorkspace(workspace: Workspace): void {
const elem = this.get2DElement(); const elem = this.get2DElement();
workspace.append(elem); workspace.append(elem);
if (!this.isInWorkspace()) { 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); super(svgElement);
this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
this._position = { x: 0, y: 0 }; this._position = { x: 0, y: 0 };
this._size = { width: 5, height: 5 };
} }
setSize(width, height) { setSize(width, height) {
@ -35,23 +36,16 @@ class ElipsePeer extends ElementPeer {
if ($defined(height)) { if ($defined(height)) {
this._native.setAttribute('ry', height / 2); this._native.setAttribute('ry', height / 2);
} }
const pos = this.getPosition();
this.setPosition(pos.x, pos.y);
} }
setPosition(pcx, pcy) { setPosition(pcx, pcy) {
const size = this.getSize(); this._position = { x: pcx, y: pcy };
if ($defined(pcx)) {
const cx = size.width / 2 + pcx; this._native.setAttribute('cx', pcx);
const cy = size.height / 2 + pcy;
if ($defined(cx)) {
this._native.setAttribute('cx', cx);
} }
if ($defined(cy)) { if ($defined(pcy)) {
this._native.setAttribute('cy', cy); this._native.setAttribute('cy', pcy);
} }
} }

View File

@ -57,11 +57,13 @@ class PolyLinePeer extends ElementPeer {
} }
_updatePath() { _updatePath() {
if (this._style === 'Curved') { if (this._style === 'Straight') {
this._updateMiddleCurvePath();
} else if (this._style === 'Straight') {
this._updateStraightPath(); 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(); this._updateCurvePath();
} }
} }
@ -85,10 +87,11 @@ class PolyLinePeer extends ElementPeer {
const y1 = this._y1; const y1 = this._y1;
const x2 = this._x2; const x2 = this._x2;
const y2 = this._y2; const y2 = this._y2;
if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) { if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
const diff = x2 - x1; const diff = x2 - x1;
const middlex = diff / 2 + x1; const middlex = diff / 2 + x1;
let signx = 1; let signx = 0;
let signy = 1; let signy = 1;
if (diff < 0) { if (diff < 0) {
signx = -1; signx = -1;
@ -96,13 +99,25 @@ class PolyLinePeer extends ElementPeer {
if (y2 < y1) { if (y2 < y1) {
signy = -1; signy = -1;
} }
const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${ const path = `${x1}, ${y1} ${middlex - 10 * signx}, ${y1} ${middlex}, ${y1 + 10 * signy
y1 + 10 * signy
} ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`; } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
this._native.setAttribute('points', path); 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() { _updateCurvePath() {
if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) { if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
const path = PolyLineUtils.buildCurvedPath.call( const path = PolyLineUtils.buildCurvedPath.call(

View File

@ -14,21 +14,35 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
Different types of PolyLines that can be used. Straight Polylines
</td> </td>
<td> <td>
<div id="overflowExample" /> <div id="straightSample" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
This is how multiple childs will look in each style line Middle Straight Polylines
</td> </td>
<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> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -1,64 +1,78 @@
import $ from 'jquery'; import $ from 'jquery';
import { Workspace, PolyLine } from '../../src'; import { Workspace, PolyLine, Elipse } from '../../src';
global.$ = $; 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' }); // Add referene point ...
overflowWorkspace.setSize('100px', '100px'); const e1 = new Elipse();
e1.setSize(10, 10);
e1.setPosition(0, 0);
workspace.append(e1);
const line = new PolyLine(); const e2 = new Elipse();
line.setTo(165, 165); e2.setPosition(-100, -100);
line.setFrom(95, 95); e2.setSize(10, 10);
line.setStyle('Straight'); workspace.append(e2);
line.setStroke('10');
overflowWorkspace.append(line);
overflowWorkspace.addItAsChildTo($('#overflowExample')); const e3 = new Elipse();
e3.setPosition(100, 100);
e3.setSize(10, 10);
workspace.append(e3);
overflowWorkspace = new Workspace(); const e4 = new Elipse();
overflowWorkspace.setSize('100px', '100px'); e4.setPosition(-100, 100);
let line1 = new PolyLine(); e4.setSize(10, 10);
line1.setFrom(95, 95); workspace.append(e4);
line1.setTo(165, 165);
line1.setStyle('Curved');
overflowWorkspace.append(line1);
line1 = new PolyLine(); const e5 = new Elipse();
line1.setFrom(95, 95); e5.setPosition(100, -100);
line1.setTo(165, 135); e5.setSize(10, 10);
line1.setStyle('Curved'); workspace.append(e5);
overflowWorkspace.append(line1);
line1 = new PolyLine(); // Line 1 ...
line1.setFrom(95, 90); const line1 = new PolyLine();
line1.setTo(160, 20); line1.setFrom(0, 0);
line1.setStyle('Straight'); line1.setTo(100, 100);
overflowWorkspace.append(line1); line1.setStyle(type);
line1.setStroke('1');
workspace.append(line1);
line1 = new PolyLine(); const line2 = new PolyLine();
line1.setFrom(95, 90); line2.setFrom(0, 0);
line1.setTo(160, 50); line2.setTo(-100, -100);
line1.setStyle('Straight'); line2.setStyle(type);
overflowWorkspace.append(line1); line2.setStroke('1');
workspace.append(line2);
line1 = new PolyLine(); const line3 = new PolyLine();
line1.setFrom(90, 90); line3.setFrom(0, 0);
line1.setTo(20, 20); line3.setTo(100, -100);
overflowWorkspace.append(line1); line3.setStyle(type);
line3.setStroke('1');
workspace.append(line3);
line1 = new PolyLine(); const line4 = new PolyLine();
line1.setFrom(90, 90); line4.setFrom(0, 0);
line1.setTo(20, 50); line4.setTo(-100, 100);
overflowWorkspace.append(line1); line4.setStyle(type);
line2.setStroke('1');
workspace.append(line4);
line1 = new PolyLine(); return workspace;
line1.setFrom(90, 95); };
line1.setTo(20, 165); const w1 = drawLine('Straight');
overflowWorkspace.append(line1); w1.addItAsChildTo($('#straightSample'));
line1 = new PolyLine(); const w2 = drawLine('MiddleStraight');
line1.setFrom(90, 95); w2.addItAsChildTo($('#middleStraightSample'));
line1.setTo(20, 135);
overflowWorkspace.append(line1);
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