javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-26 07:51:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvment of handling first and last path direction

Browse Source
This commit is contained in:
Daniel Lazar
2019-09-02 11:05:18 +02:00
parent c8aa7a67ac
commit 761ac41901
2 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/react-diagrams-routing/src/link/RightAngleLinkModel.ts
View File

@ -1,17 +1,59 @@
import { DefaultLinkModel, DefaultLinkModelOptions } from '@projectstorm/react-diagrams-defaults';
import { RightAngleLinkFactory } from './RightAngleLinkFactory';
import { PointModel } from '@projectstorm/react-diagrams-core';
export class RightAngleLinkModel extends DefaultLinkModel {
lastHoverIndexOfPath: number;
constructor(options: DefaultLinkModelOptions = { }) {
private _lastPathXdirection: boolean;
private _firstPathXdirection: boolean;
constructor(options: DefaultLinkModelOptions = {}) {
super({
type: RightAngleLinkFactory.NAME,
...options
});
this.lastHoverIndexOfPath = 0;
this._lastPathXdirection = false;
this._firstPathXdirection = false;
}
performanceTune() {
return false;
setFirstAndLastPathsDirection() {
let points = this.getPoints();
for (let i = 1; i < points.length; i+= points.length - 2) {
let dx = Math.abs(points[i].getX() - points[i - 1].getX());
let dy = Math.abs(points[i].getY() - points[i - 1].getY());
if (i - 1 === 0) { this._firstPathXdirection = dx > dy }
else { this._lastPathXdirection = dx > dy }
}
}
// @ts-ignore
addPoint<P extends PointModel>(pointModel: P, index: number = 1): P {
// @ts-ignore
super.addPoint(pointModel, index);
this.setFirstAndLastPathsDirection();
return pointModel;
}
setManuallyFirstAndLastPathsDirection(first, last) {
this._firstPathXdirection = first;
this._lastPathXdirection = last;
}
getLastPathXdirection(): boolean {
return this._lastPathXdirection;
}
getFirstPathXdirection(): boolean {
return this._firstPathXdirection;
}
setWidth(width: number) {
this.options.width = width;
this.fireEvent({ width }, 'widthChanged');
}
setColor(color: string) {
this.options.color = color;
this.fireEvent({ color }, 'colorChanged');
}
}

22
packages/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx
View File

@ -35,8 +35,6 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
// DOM references to the label and paths (if label is given), used to calculate dynamic positioning
refLabels: { [id: string]: HTMLElement };
dragging_index: number;
lastPathXdirection: boolean;
firstPathXdirection: boolean;
constructor(props: RightAngleLinkProps) {
super(props);
@ -172,17 +170,7 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
} else if (dy === 0) {
this.calculatePositions(points, event, index, 'y');
}
this.setFirstAndLastPathsDirection();
}
setFirstAndLastPathsDirection() {
let points = this.props.link.getPoints();
for (let i = 1; i < points.length; i+= points.length - 2) {
let dx = Math.abs(points[i].getX() - points[i - 1].getX());
let dy = Math.abs(points[i].getY() - points[i - 1].getY());
if (i - 1 === 0) { this.firstPathXdirection = dx > dy }
else { this.lastPathXdirection = dx > dy }
}
this.props.link.setFirstAndLastPathsDirection();
}
handleMove = function(event: MouseEvent) {
@ -220,8 +208,7 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
position: new Point(pointLeft.getX(), pointRight.getY())
}), 1);
});
this.firstPathXdirection = true;
this.lastPathXdirection = true;
this.props.link.setManuallyFirstAndLastPathsDirection(true, true);
}
// When new link is moving and not connected to target port move with middle point
else if (this.props.link.getTargetPort() === null) {
@ -237,10 +224,10 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
// Those points and its position only will be moved
for (let i = 1; i < points.length; i+= points.length - 2) {
if (i - 1 === 0) {
if (this.firstPathXdirection) { points[i].setPosition(points[i].getX(), points[i - 1].getY()) }
if (this.props.link.getFirstPathXdirection()) { points[i].setPosition(points[i].getX(), points[i - 1].getY()) }
else { points[i].setPosition(points[i - 1].getX(), points[i].getY()) }
} else {
if (this.lastPathXdirection) { points[i - 1].setPosition(points[i - 1].getX(), points[i].getY()) }
if (this.props.link.getLastPathXdirection()) { points[i - 1].setPosition(points[i - 1].getX(), points[i].getY()) }
else { points[i - 1].setPosition(points[i].getX(), points[i - 1].getY()) }
}
}
@ -255,7 +242,6 @@ export class RightAngleLinkWidget extends React.Component<RightAngleLinkProps, R
link: this.props.link,
position: new Point(pointLeft.getX(), pointRight.getY())
}));
this.setFirstAndLastPathsDirection();
}
for (let j = 0; j < points.length - 1; j++) {