mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Keep fixing relatioship.
This commit is contained in:
Paulo Gustavo Veiga
parent
c1dc4554d7
commit
2a9c79fe92
@ -17,6 +17,7 @@
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Point, CurvedLine, Rect } from '@wisemapping/web2d';
|
||||
import PositionType from './PositionType';
|
||||
|
||||
import SizeType from './SizeType';
|
||||
import Topic from './Topic';
|
||||
@ -24,7 +25,7 @@ import Shape from './util/Shape';
|
||||
import Workspace from './Workspace';
|
||||
|
||||
class DragPivot {
|
||||
private _position: Point;
|
||||
private _position: PositionType;
|
||||
|
||||
private _isVisible: boolean;
|
||||
|
||||
@ -41,7 +42,7 @@ class DragPivot {
|
||||
private _size: SizeType;
|
||||
|
||||
constructor() {
|
||||
this._position = new Point();
|
||||
this._position = { x: 0, y: 0 };
|
||||
this._size = DragPivot.DEFAULT_PIVOT_SIZE;
|
||||
|
||||
this._straightLine = this._buildStraightLine();
|
||||
|
||||
@ -49,8 +49,8 @@ class DragTopic {
|
||||
this._order = null;
|
||||
this._draggedNode = draggedNode;
|
||||
this._layoutManager = layoutManger;
|
||||
this._position = new Point();
|
||||
this._isInWorkspace = false;
|
||||
this._position = new Point(0, 0);
|
||||
}
|
||||
|
||||
setOrder(order: number): void {
|
||||
@ -59,15 +59,14 @@ class DragTopic {
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
// Update drag shadow position ....
|
||||
const position = { x, y };
|
||||
this._position.setValue(position.x, position.y);
|
||||
this._position = { x, y };
|
||||
|
||||
// Elements are positioned in the center.
|
||||
// All topic element must be positioned based on the innerShape.
|
||||
const draggedNode = this._draggedNode;
|
||||
const size = draggedNode.getSize();
|
||||
const cx = position.x - (position.x > 0 ? 0 : size.width);
|
||||
const cy = Math.ceil(position.y - size.height / 2);
|
||||
const cx = x - (x > 0 ? 0 : size.width);
|
||||
const cy = Math.ceil(y - size.height / 2);
|
||||
this._elem2d.setPosition(cx, cy);
|
||||
|
||||
// In case is not free, pivot must be draw ...
|
||||
|
||||
@ -123,9 +123,8 @@ class MainTopic extends Topic {
|
||||
const isAtRight = Shape.isAtRight(targetPosition, pos);
|
||||
const size = this.getSize();
|
||||
|
||||
let result: Point;
|
||||
let result: Point = { x: 0, y: 0 };
|
||||
if (this.getShapeType() === TopicShape.LINE) {
|
||||
result = new Point();
|
||||
const groupPosition = this.get2DElement().getPosition();
|
||||
const innerShareSize = this.getInnerShape().getSize();
|
||||
|
||||
@ -150,7 +149,7 @@ class MainTopic extends Topic {
|
||||
} else {
|
||||
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight);
|
||||
}
|
||||
return result;
|
||||
return new Point(result.x, result.y);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
|
||||
import { Arrow, Point, CurvedLine } from '@wisemapping/web2d';
|
||||
import ConnectionLine from './ConnectionLine';
|
||||
import RelationshipControlPoints from './RelationshipControlPoints';
|
||||
import RelationshipModel from './model/RelationshipModel';
|
||||
@ -26,7 +26,7 @@ import Shape from './util/Shape';
|
||||
import Workspace from './Workspace';
|
||||
|
||||
class Relationship extends ConnectionLine {
|
||||
private _focusShape: ElementClass;
|
||||
private _focusShape: CurvedLine;
|
||||
|
||||
private _onFocus: boolean;
|
||||
|
||||
@ -53,23 +53,22 @@ class Relationship extends ConnectionLine {
|
||||
|
||||
const strokeColor = Relationship.getStrokeColor();
|
||||
|
||||
// Build line ..
|
||||
this._line2d.setIsSrcControlPointCustom(false);
|
||||
this._line2d.setIsDestControlPointCustom(false);
|
||||
this._line2d.setCursor('pointer');
|
||||
this._line2d.setStroke(1, 'solid', strokeColor);
|
||||
this._line2d.setDashed(4, 2);
|
||||
this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`);
|
||||
|
||||
// Build focus shape ...
|
||||
this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
|
||||
this._focusShape.setStroke(2, 'solid', '#3f96ff');
|
||||
|
||||
const ctrlPoints = this._line2d.getControlPoints();
|
||||
this._focusShape.setSrcControlPoint(ctrlPoints[0]);
|
||||
this._focusShape.setDestControlPoint(ctrlPoints[1]);
|
||||
this._focusShape.setIsSrcControlPointCustom(false);
|
||||
this._focusShape.setIsDestControlPointCustom(false);
|
||||
this._focusShape.setVisibility(false);
|
||||
this._onFocus = false;
|
||||
this._isInWorkspace = false;
|
||||
this._controlPointsController = new RelationshipControlPoints(this);
|
||||
|
||||
// Build arrow ...
|
||||
this._startArrow = new Arrow();
|
||||
this._startArrow.setStrokeColor(strokeColor);
|
||||
this._startArrow.setStrokeWidth(2);
|
||||
@ -81,6 +80,9 @@ class Relationship extends ConnectionLine {
|
||||
this._endArrow.setStrokeColor(strokeColor);
|
||||
this._endArrow.setStrokeWidth(2);
|
||||
}
|
||||
this._onFocus = false;
|
||||
this._isInWorkspace = false;
|
||||
this._controlPointsController = new RelationshipControlPoints(this);
|
||||
|
||||
// Position the line ...
|
||||
if (model.getSrcCtrlPoint()) {
|
||||
@ -92,6 +94,10 @@ class Relationship extends ConnectionLine {
|
||||
const destPoint = { ...model.getDestCtrlPoint() };
|
||||
this.setDestControlPoint(destPoint);
|
||||
}
|
||||
|
||||
// Reposition all nodes ...
|
||||
this._updatePositions();
|
||||
this._controlPointsController = new RelationshipControlPoints(this);
|
||||
}
|
||||
|
||||
setStroke(color: string, style: string, opacity: number): void {
|
||||
@ -99,43 +105,44 @@ class Relationship extends ConnectionLine {
|
||||
this._startArrow.setStrokeColor(color);
|
||||
}
|
||||
|
||||
redraw(): void {
|
||||
private _updatePositions() {
|
||||
const line2d = this._line2d;
|
||||
const sourceTopic = this._sourceTopic;
|
||||
const sourcePosition = sourceTopic.getPosition();
|
||||
const sPos = sourceTopic.getPosition();
|
||||
|
||||
const targetTopic = this._targetTopic;
|
||||
let targetPosition = targetTopic.getPosition();
|
||||
let tPos = targetTopic.getPosition();
|
||||
if (targetTopic.getType() === 'CentralTopic') {
|
||||
targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
|
||||
tPos = Shape.workoutIncomingConnectionPoint(targetTopic, sPos);
|
||||
}
|
||||
|
||||
this._line2d.setStroke(2);
|
||||
const ctrlPoints = this._line2d.getControlPoints();
|
||||
if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {
|
||||
const defaultPoints = Shape.calculateDefaultControlPoints(sourcePosition, targetPosition);
|
||||
ctrlPoints[0].x = defaultPoints[0].x;
|
||||
ctrlPoints[0].y = defaultPoints[0].y;
|
||||
let ctrlPoints: [Point, Point];
|
||||
|
||||
ctrlPoints[1].x = defaultPoints[1].x;
|
||||
ctrlPoints[1].y = defaultPoints[1].y;
|
||||
// Position line ...
|
||||
if (!line2d.isDestControlPointCustom() && !line2d.isSrcControlPointCustom()) {
|
||||
ctrlPoints = Shape.calculateDefaultControlPoints(sPos, tPos) as [PositionType, PositionType];
|
||||
} else {
|
||||
ctrlPoints = line2d.getControlPoints();
|
||||
}
|
||||
|
||||
const spoint = new Point();
|
||||
spoint.x = parseInt(ctrlPoints[0].x, 10) + parseInt(sourcePosition.x, 10);
|
||||
spoint.y = parseInt(ctrlPoints[0].y, 10) + parseInt(sourcePosition.y, 10);
|
||||
const spointX = ctrlPoints[0].x + sPos.x;
|
||||
const spointY = ctrlPoints[0].y + sPos.y;
|
||||
|
||||
const tpoint = new Point();
|
||||
tpoint.x = parseInt(ctrlPoints[1].x, 10) + parseInt(targetPosition.x, 10);
|
||||
tpoint.y = parseInt(ctrlPoints[1].y, 10) + parseInt(targetPosition.y, 10);
|
||||
const tpointX = ctrlPoints[1].x + tPos.x;
|
||||
const tpointY = ctrlPoints[1].y + tPos.y;
|
||||
|
||||
const sPos = Shape.calculateRelationShipPointCoordinates(sourceTopic, spoint);
|
||||
const tPos = Shape.calculateRelationShipPointCoordinates(targetTopic, tpoint);
|
||||
const nsPos = Shape.calculateRelationShipPointCoordinates(
|
||||
sourceTopic,
|
||||
new Point(spointX, spointY),
|
||||
);
|
||||
const ntPos = Shape.calculateRelationShipPointCoordinates(
|
||||
targetTopic,
|
||||
new Point(tpointX, tpointY),
|
||||
);
|
||||
|
||||
line2d.setFrom(sPos.x, sPos.y);
|
||||
line2d.setTo(tPos.x, tPos.y);
|
||||
|
||||
line2d.moveToFront();
|
||||
line2d.setFrom(nsPos.x, nsPos.y);
|
||||
line2d.setTo(ntPos.x, ntPos.y);
|
||||
|
||||
// Positionate Arrows
|
||||
this._positionArrows();
|
||||
@ -143,11 +150,25 @@ class Relationship extends ConnectionLine {
|
||||
// Add connector ...
|
||||
this._positionateConnector(targetTopic);
|
||||
|
||||
if (this.isOnFocus()) {
|
||||
this.refreshShape();
|
||||
// Poisition refresh shape ...
|
||||
this._positionRefreshShape();
|
||||
}
|
||||
this._focusShape.moveToBack();
|
||||
|
||||
redraw(): void {
|
||||
this._updatePositions();
|
||||
|
||||
this._line2d.moveToFront();
|
||||
this._startArrow.moveToBack();
|
||||
if (this._endArrow) {
|
||||
this._endArrow.moveToBack();
|
||||
}
|
||||
|
||||
if (this._showEndArrow) {
|
||||
this._endArrow.setVisibility(this.isVisible());
|
||||
}
|
||||
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
|
||||
|
||||
this._focusShape.moveToBack();
|
||||
this._controlPointsController.redraw();
|
||||
}
|
||||
|
||||
@ -156,11 +177,8 @@ class Relationship extends ConnectionLine {
|
||||
const spos = this._line2d.getFrom();
|
||||
|
||||
this._startArrow.setFrom(spos.x, spos.y);
|
||||
this._startArrow.moveToBack();
|
||||
|
||||
if (this._endArrow) {
|
||||
this._endArrow.setFrom(tpos.x, tpos.y);
|
||||
this._endArrow.moveToBack();
|
||||
}
|
||||
|
||||
if (this._line2d.getType() === 'CurvedLine') {
|
||||
@ -175,14 +193,11 @@ class Relationship extends ConnectionLine {
|
||||
this._endArrow.setControlPoint(this._line2d.getFrom());
|
||||
}
|
||||
}
|
||||
|
||||
if (this._showEndArrow) {
|
||||
this._endArrow.setVisibility(this.isVisible());
|
||||
}
|
||||
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace): void {
|
||||
this._updatePositions();
|
||||
|
||||
workspace.append(this._focusShape);
|
||||
workspace.append(this._controlPointsController);
|
||||
|
||||
@ -225,12 +240,11 @@ class Relationship extends ConnectionLine {
|
||||
}
|
||||
|
||||
setOnFocus(focus: boolean): void {
|
||||
if (focus) {
|
||||
this._positionRefreshShape();
|
||||
}
|
||||
// Change focus shape
|
||||
if (this.isOnFocus() !== focus) {
|
||||
if (focus) {
|
||||
this.refreshShape();
|
||||
}
|
||||
|
||||
this._focusShape.setVisibility(focus);
|
||||
this._controlPointsController.setVisibility(focus);
|
||||
this._onFocus = focus;
|
||||
@ -238,17 +252,16 @@ class Relationship extends ConnectionLine {
|
||||
}
|
||||
}
|
||||
|
||||
refreshShape(): void {
|
||||
private _positionRefreshShape(): void {
|
||||
const sPos = this._line2d.getFrom();
|
||||
const tPos = this._line2d.getTo();
|
||||
|
||||
const ctrlPoints = this._line2d.getControlPoints();
|
||||
this._focusShape.setFrom(sPos.x, sPos.y);
|
||||
this._focusShape.setTo(tPos.x, tPos.y);
|
||||
const shapeCtrlPoints = this._focusShape.getControlPoints();
|
||||
shapeCtrlPoints[0].x = ctrlPoints[0].x;
|
||||
shapeCtrlPoints[0].y = ctrlPoints[0].y;
|
||||
shapeCtrlPoints[1].x = ctrlPoints[1].x;
|
||||
shapeCtrlPoints[1].y = ctrlPoints[1].y;
|
||||
|
||||
this._focusShape.setSrcControlPoint(ctrlPoints[0]);
|
||||
this._focusShape.setDestControlPoint(ctrlPoints[1]);
|
||||
|
||||
this._focusShape.updateLine();
|
||||
}
|
||||
@ -302,12 +315,12 @@ class Relationship extends ConnectionLine {
|
||||
}
|
||||
}
|
||||
|
||||
setShowStartArrow(visible: boolean) {
|
||||
setShowStartArrow(visible: boolean): void {
|
||||
this._showStartArrow = visible;
|
||||
if (this._isInWorkspace) this.redraw();
|
||||
}
|
||||
|
||||
setFrom(x: number, y: number) {
|
||||
setFrom(x: number, y: number): void {
|
||||
$assert($defined(x), 'x must be defined');
|
||||
$assert($defined(y), 'y must be defined');
|
||||
|
||||
@ -325,12 +338,16 @@ class Relationship extends ConnectionLine {
|
||||
|
||||
setSrcControlPoint(control: PositionType): void {
|
||||
this._line2d.setSrcControlPoint(control);
|
||||
this._focusShape.setSrcControlPoint(control);
|
||||
this._startArrow.setControlPoint(control);
|
||||
}
|
||||
|
||||
setDestControlPoint(control: PositionType) {
|
||||
this._line2d.setDestControlPoint(control);
|
||||
if (this._showEndArrow) this._endArrow.setControlPoint(control);
|
||||
this._focusShape.setSrcControlPoint(control);
|
||||
if (this._showEndArrow) {
|
||||
this._endArrow.setControlPoint(control);
|
||||
}
|
||||
}
|
||||
|
||||
getControlPoints(): PositionType {
|
||||
|
||||
@ -23,7 +23,8 @@ import Workspace from './Workspace';
|
||||
import PositionType from './PositionType';
|
||||
import Relationship from './Relationship';
|
||||
|
||||
enum PivotType {
|
||||
// eslint-disable-next-line no-shadow
|
||||
export enum PivotType {
|
||||
Start = 0,
|
||||
End = 1,
|
||||
}
|
||||
@ -41,21 +42,20 @@ class ControlPivotLine {
|
||||
|
||||
private _changeHander: () => void;
|
||||
|
||||
private _moveRelHandler: (
|
||||
relationPosition: PositionType,
|
||||
controlPointPosition: PositionType,
|
||||
) => void;
|
||||
private _moveRelHandler: (controlPointPosition: PositionType) => void;
|
||||
|
||||
private _isVisible: boolean;
|
||||
|
||||
private _mouseMoveHandler: (e: MouseEvent) => void;
|
||||
|
||||
private _mousedUpHandler: () => void;
|
||||
private _mouseUpHandler: () => void;
|
||||
|
||||
private _mouseDownHandler: (event: MouseEvent) => void;
|
||||
|
||||
constructor(
|
||||
pivotType: PivotType,
|
||||
relationship: Relationship,
|
||||
mouseMoveHandler: (relationPosition: PositionType, controlPointPosition: PositionType) => void,
|
||||
mouseMoveHandler: (controlPointPosition: PositionType) => void,
|
||||
changeHander: () => void,
|
||||
) {
|
||||
this._pivotType = pivotType;
|
||||
@ -76,11 +76,6 @@ class ControlPivotLine {
|
||||
// Build line ...
|
||||
this._line = new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 });
|
||||
|
||||
// Register events ...
|
||||
this._dot.addEvent('mousedown', (event: MouseEvent) => {
|
||||
this._mouseDown(event);
|
||||
});
|
||||
|
||||
const mouseClick = (event: MouseEvent): boolean => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@ -91,32 +86,39 @@ class ControlPivotLine {
|
||||
|
||||
// Register handled ...
|
||||
this._mouseMoveHandler = (e: MouseEvent) => this.mouseMoveHandler(e);
|
||||
this._mousedUpHandler = () => this._mouseUpHandler();
|
||||
this._mouseUpHandler = () => this.mouseUpHandler();
|
||||
this._mouseDownHandler = (event: MouseEvent) => this.mouseDownHandler(event);
|
||||
}
|
||||
|
||||
private _mouseDown(event: MouseEvent) {
|
||||
this.getWorkspace().getScreenManager().addEvent('mousemove', this._mouseMoveHandler);
|
||||
this.getWorkspace().getScreenManager().addEvent('mouseup', this._mousedUpHandler);
|
||||
private mouseDownHandler(event: MouseEvent) {
|
||||
const screenManager = this.getWorkspace().getScreenManager();
|
||||
screenManager.addEvent('mousemove', this._mouseMoveHandler);
|
||||
screenManager.addEvent('mouseup', this._mouseUpHandler);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
setVisibility(value: boolean) {
|
||||
this._isVisible = value;
|
||||
|
||||
if (this._isVisible !== value) {
|
||||
const screenManager = this.getWorkspace().getScreenManager();
|
||||
if (!value) {
|
||||
screenManager.removeEvent('mousemove', this._mouseMoveHandler);
|
||||
screenManager.removeEvent('mouseup', this._mouseUpHandler);
|
||||
this._dot.removeEvent('mousedown', this._mouseDownHandler);
|
||||
} else {
|
||||
// Register events ...
|
||||
this._dot.addEvent('mousedown', this._mouseDownHandler);
|
||||
}
|
||||
|
||||
// Make it visible ...
|
||||
this._dot.setVisibility(value);
|
||||
this._line.setVisibility(value);
|
||||
}
|
||||
|
||||
this._isVisible = value;
|
||||
if (value) {
|
||||
// Register events ...
|
||||
this.redraw();
|
||||
this._line.moveToFront();
|
||||
this._dot.moveToFront();
|
||||
@ -132,15 +134,15 @@ class ControlPivotLine {
|
||||
if (this._isVisible) {
|
||||
const relationshipLine = this._relationship.getLine();
|
||||
const startPosition =
|
||||
this._pivotType === PivotType.Start ? relationshipLine.getTo() : relationshipLine.getFrom();
|
||||
this._pivotType === PivotType.End ? relationshipLine.getTo() : relationshipLine.getFrom();
|
||||
const ctrPosition = relationshipLine.getControlPoints()[this._pivotType];
|
||||
|
||||
this._line.setFrom(startPosition.x, startPosition.y);
|
||||
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(
|
||||
startPosition.x - ctrPosition.x - 8,
|
||||
startPosition.y - ctrPosition.y - 8,
|
||||
startPosition.x + ctrPosition.x - 8,
|
||||
startPosition.y + ctrPosition.y - 8,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -150,37 +152,24 @@ class ControlPivotLine {
|
||||
const mousePosition = screen.getWorkspaceMousePosition(event);
|
||||
|
||||
// Update relatioship position ...
|
||||
let relationshipPosition: PositionType;
|
||||
console.log(this._pivotType);
|
||||
if (this._pivotType === PivotType.Start) {
|
||||
relationshipPosition = Shape.calculateRelationShipPointCoordinates(
|
||||
this._relationship.getSourceTopic(),
|
||||
mousePosition,
|
||||
);
|
||||
this._moveRelHandler(relationshipPosition, {
|
||||
x: mousePosition.x - relationshipPosition.x,
|
||||
y: mousePosition.y - relationshipPosition.y,
|
||||
});
|
||||
} else {
|
||||
relationshipPosition = Shape.calculateRelationShipPointCoordinates(
|
||||
this._relationship.getTargetTopic(),
|
||||
mousePosition,
|
||||
);
|
||||
this._moveRelHandler(relationshipPosition, {
|
||||
x: mousePosition.x - relationshipPosition.x,
|
||||
y: mousePosition.y - relationshipPosition.y,
|
||||
});
|
||||
}
|
||||
const topic =
|
||||
this._pivotType === PivotType.Start
|
||||
? this._relationship.getSourceTopic()
|
||||
: this._relationship.getTargetTopic();
|
||||
|
||||
const relPos = Shape.calculateRelationShipPointCoordinates(topic, mousePosition);
|
||||
const ctlPoint = { x: mousePosition.x - relPos.x, y: mousePosition.y - relPos.y };
|
||||
this._moveRelHandler(ctlPoint);
|
||||
|
||||
// Update pivot ...
|
||||
this._dot.setPosition(mousePosition.x - 5, mousePosition.y - 3);
|
||||
this._line.setTo(mousePosition.x - 2, mousePosition.y);
|
||||
this._dot.setPosition(mousePosition.x - 8, mousePosition.y - 8);
|
||||
|
||||
// Update controller ...
|
||||
this._relationship.getLine().updateLine(this._pivotType);
|
||||
// Update line ...
|
||||
this._line.setTo(mousePosition.x - 5, mousePosition.y - 5);
|
||||
this._line.setFrom(relPos.x, relPos.y);
|
||||
}
|
||||
|
||||
private _mouseUpHandler() {
|
||||
private mouseUpHandler() {
|
||||
const screenManager = this.getWorkspace().getScreenManager();
|
||||
screenManager.removeEvent('mousemove', this._mouseMoveHandler);
|
||||
screenManager.removeEvent('mouseup', this._mouseUpHandler);
|
||||
@ -222,12 +211,10 @@ class RelationshipControlPoints {
|
||||
const startControlLine = new ControlPivotLine(
|
||||
PivotType.Start,
|
||||
relationship,
|
||||
(relationPosition, controlPointPosition) => {
|
||||
(controlPointPosition) => {
|
||||
const line = this._relationship.getLine();
|
||||
line.setFrom(relationPosition.x, relationPosition.y);
|
||||
line.setSrcControlPoint(controlPointPosition);
|
||||
|
||||
console.log(JSON.stringify(controlPointPosition));
|
||||
relationship.redraw();
|
||||
},
|
||||
() => {
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
@ -240,12 +227,10 @@ class RelationshipControlPoints {
|
||||
const endControlLine = new ControlPivotLine(
|
||||
PivotType.End,
|
||||
relationship,
|
||||
(relationPosition, controlPointPosition) => {
|
||||
(controlPointPosition) => {
|
||||
const line = this._relationship.getLine();
|
||||
line.setTo(relationPosition.x, relationPosition.y);
|
||||
line.setDestControlPoint(controlPointPosition);
|
||||
|
||||
console.log(JSON.stringify(controlPointPosition));
|
||||
relationship.redraw();
|
||||
},
|
||||
() => {
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
|
||||
@ -152,11 +152,11 @@ class RelationshipPivot {
|
||||
sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition);
|
||||
}
|
||||
const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition);
|
||||
|
||||
const spoint = new Point();
|
||||
spoint.x = parseInt(controlPoint[0].x, 10) + sourcePosition.x;
|
||||
spoint.y = parseInt(controlPoint[0].y, 10) + sourcePosition.y;
|
||||
return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
|
||||
const point = new Point(
|
||||
parseInt(controlPoint[0].x, 10) + sourcePosition.x,
|
||||
parseInt(controlPoint[0].y, 10) + sourcePosition.y,
|
||||
);
|
||||
return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, point);
|
||||
}
|
||||
|
||||
private _connectOnFocus(event: string, targetTopic: Topic): void {
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import flatten from 'lodash/flatten';
|
||||
import Command from '../Command';
|
||||
import CommandContext from '../CommandContext';
|
||||
import NodeModel from '../model/NodeModel';
|
||||
@ -169,7 +170,7 @@ class DeleteCommand extends Command {
|
||||
const rels: Relationship[][] = children.map((t: Topic) => this._collectInDepthRelationships(t));
|
||||
|
||||
// flatten and concact
|
||||
result.push(...rels.flat());
|
||||
result.push(...flatten(rels));
|
||||
|
||||
if (result.length > 0) {
|
||||
// Filter for unique ...
|
||||
|
||||
@ -16,17 +16,17 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import Command from '../Command';
|
||||
import RelationshipControlPoints from '../RelationshipControlPoints';
|
||||
import RelationshipControlPoints, { PivotType } from '../RelationshipControlPoints';
|
||||
import PositionType from '../PositionType';
|
||||
|
||||
class MoveControlPointCommand extends Command {
|
||||
private _controlPoints: RelationshipControlPoints;
|
||||
|
||||
private _ctrPointPosition: PositionType;
|
||||
private _ctrIndex: PivotType;
|
||||
|
||||
private _endPosition: PositionType;
|
||||
private _oldCtrPoint: PositionType;
|
||||
|
||||
private _controlPointIndex: number;
|
||||
private _newCtrPoint: PositionType;
|
||||
|
||||
/**
|
||||
* @classdesc This command handles do/undo of changing the control points of a relationship
|
||||
@ -34,72 +34,66 @@ class MoveControlPointCommand extends Command {
|
||||
* influence how the arrow is drawn (not the source or the destination topic nor the arrow
|
||||
* direction)
|
||||
*/
|
||||
constructor(controlPoints: RelationshipControlPoints, controlPointIndex: number) {
|
||||
constructor(controlPoints: RelationshipControlPoints, ctrIndex: PivotType) {
|
||||
super();
|
||||
this._ctrPointPosition = controlPoints.getControlPointPosition(controlPointIndex);
|
||||
this._controlPointIndex = controlPointIndex;
|
||||
// New control points ...
|
||||
this._controlPoints = controlPoints;
|
||||
this._ctrIndex = ctrIndex;
|
||||
this._newCtrPoint = controlPoints.getControlPointPosition(ctrIndex);
|
||||
|
||||
const relLine = controlPoints.getRelationship().getLine();
|
||||
this._endPosition = controlPointIndex === 0 ? relLine.getFrom() : relLine.getTo();
|
||||
// Backup previous control points ...
|
||||
const relationship = controlPoints.getRelationship();
|
||||
const model = relationship.getModel();
|
||||
this._oldCtrPoint =
|
||||
PivotType.Start === ctrIndex ? model.getSrcCtrlPoint() : model.getDestCtrlPoint();
|
||||
|
||||
// New relationship ...
|
||||
this._newCtrPoint = controlPoints.getControlPointPosition(ctrIndex);
|
||||
}
|
||||
|
||||
execute() {
|
||||
const relationship = this._controlPoints.getRelationship();
|
||||
const model = relationship.getModel();
|
||||
switch (this._controlPointIndex) {
|
||||
case 0:
|
||||
model.setSrcCtrlPoint(this._ctrPointPosition);
|
||||
switch (this._ctrIndex) {
|
||||
case PivotType.Start:
|
||||
model.setSrcCtrlPoint(this._newCtrPoint);
|
||||
relationship.setIsSrcControlPointCustom(true);
|
||||
|
||||
relationship.setFrom(this._endPosition.x, this._endPosition.y);
|
||||
relationship.setSrcControlPoint(this._ctrPointPosition);
|
||||
relationship.setSrcControlPoint(this._newCtrPoint);
|
||||
break;
|
||||
case 1:
|
||||
model.setDestCtrlPoint(this._ctrPointPosition);
|
||||
case PivotType.End:
|
||||
model.setDestCtrlPoint(this._newCtrPoint);
|
||||
relationship.setIsDestControlPointCustom(true);
|
||||
|
||||
relationship.setTo(this._endPosition.x, this._endPosition.y);
|
||||
relationship.setDestControlPoint(this._ctrPointPosition);
|
||||
relationship.setDestControlPoint(this._newCtrPoint);
|
||||
break;
|
||||
default:
|
||||
throw new Error('Illegal state exception');
|
||||
}
|
||||
|
||||
if (relationship.isOnFocus()) {
|
||||
relationship.refreshShape();
|
||||
}
|
||||
// this.relationship.getLine().updateLine(this._point);
|
||||
relationship.redraw();
|
||||
}
|
||||
|
||||
undoExecute() {
|
||||
// const line = this._line;
|
||||
// const model = line.getModel();
|
||||
// switch (this._controlPointIndex) {
|
||||
// case 0:
|
||||
// if ($defined(this._oldControlPoint)) {
|
||||
// line.setFrom(this._oldRelEndpoint.x, this._oldRelEndpoint.y);
|
||||
// model.setSrcCtrlPoint({ ...this._oldControlPoint });
|
||||
// line.setSrcControlPoint({ ...this._oldControlPoint });
|
||||
// line.setIsSrcControlPointCustom(this._isControlPointDefined);
|
||||
// }
|
||||
// break;
|
||||
// case 1:
|
||||
// if ($defined(this._oldControlPoint)) {
|
||||
// line.setTo(this._oldRelEndpoint.x, this._oldRelEndpoint.y);
|
||||
// model.setDestCtrlPoint({ ...this._oldControlPoint });
|
||||
// line.setDestControlPoint({ ...this._oldControlPoint });
|
||||
// line.setIsDestControlPointCustom(this._isControlPointDefined);
|
||||
// }
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// // this._line.getLine().updateLine(this._point);
|
||||
// // if (this._line.isOnFocus()) {
|
||||
// // this._ctrlPointControler.setRelationshipLine(line);
|
||||
// // line._refreshShape();
|
||||
// // }
|
||||
const relationship = this._controlPoints.getRelationship();
|
||||
const model = relationship.getModel();
|
||||
|
||||
const isCustom = this._oldCtrPoint != null;
|
||||
relationship.setIsDestControlPointCustom(isCustom);
|
||||
|
||||
switch (this._ctrIndex) {
|
||||
case PivotType.Start:
|
||||
model.setSrcCtrlPoint(this._oldCtrPoint);
|
||||
relationship.setSrcControlPoint(this._oldCtrPoint);
|
||||
break;
|
||||
case PivotType.End:
|
||||
model.setDestCtrlPoint(this._oldCtrPoint);
|
||||
relationship.setDestControlPoint(this._oldCtrPoint);
|
||||
break;
|
||||
default:
|
||||
throw new Error('Illegal state exception');
|
||||
}
|
||||
|
||||
console.log('undo ...');
|
||||
relationship.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -91,7 +91,7 @@ class MDExporter extends Exporter {
|
||||
});
|
||||
result = `${result}\n`;
|
||||
|
||||
if (node.getChildren().filter((n) => n.getText() !== undefined).length > 0) {
|
||||
if (node.getChildren().filter((n) => n.getText() !== null).length > 0) {
|
||||
result += this.traverseBranch(`${prefix}\t`, node.getChildren());
|
||||
}
|
||||
});
|
||||
|
||||
@ -32,18 +32,16 @@ const Shape = {
|
||||
$assert(rectSize, 'rectSize can not be null');
|
||||
$assert($defined(isAtRight), 'isRight can not be null');
|
||||
|
||||
// Node is placed at the right ?
|
||||
const result = new Point();
|
||||
|
||||
// This is used fix a minor difference ...z
|
||||
const correctionHardcode = 2;
|
||||
let result;
|
||||
if (isAtRight) {
|
||||
result.setValue(
|
||||
result = new Point(
|
||||
rectCenterPoint.x - rectSize.width / 2 + correctionHardcode,
|
||||
rectCenterPoint.y,
|
||||
);
|
||||
} else {
|
||||
result.setValue(
|
||||
result = new Point(
|
||||
parseFloat(rectCenterPoint.x) + rectSize.width / 2 - correctionHardcode,
|
||||
rectCenterPoint.y,
|
||||
);
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
|
||||
class Point {
|
||||
/**
|
||||
@ -23,15 +24,9 @@ class Point {
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
$assert(typeof x === 'number', `x is not a number: ${x}`);
|
||||
$assert(typeof y === 'number', `x is not a number: ${y}`);
|
||||
|
||||
/**
|
||||
* @param {Number} x coordinate
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
setValue(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
@ -47,7 +42,7 @@ class Point {
|
||||
|
||||
Point.fromString = function pointFromString(point) {
|
||||
const values = point.split(',');
|
||||
return new Point(values[0], values[1]);
|
||||
return new Point(Number.parseInt(values[0], 10), Number.parseInt(values[1], 10));
|
||||
};
|
||||
|
||||
export default Point;
|
||||
|
||||
@ -25,13 +25,10 @@ class ArrowPeer extends ElementPeer {
|
||||
const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path');
|
||||
super(svgElement);
|
||||
this._style = {};
|
||||
this._controlPoint = new Point();
|
||||
this._fromPoint = new Point();
|
||||
}
|
||||
|
||||
setFrom(x, y) {
|
||||
this._fromPoint.x = x;
|
||||
this._fromPoint.y = y;
|
||||
this._fromPoint = new Point(x, y);
|
||||
this._redraw();
|
||||
}
|
||||
|
||||
@ -71,12 +68,7 @@ class ArrowPeer extends ElementPeer {
|
||||
let y;
|
||||
let xp;
|
||||
let yp;
|
||||
if (
|
||||
$defined(this._fromPoint.x) &&
|
||||
$defined(this._fromPoint.y) &&
|
||||
$defined(this._controlPoint.x) &&
|
||||
$defined(this._controlPoint.y)
|
||||
) {
|
||||
if (this._fromPoint && this._controlPoint) {
|
||||
if (this._controlPoint.y === 0) this._controlPoint.y = 1;
|
||||
|
||||
const y0 = this._controlPoint.y;
|
||||
@ -100,8 +92,7 @@ class ArrowPeer extends ElementPeer {
|
||||
|
||||
const path =
|
||||
`M${this._fromPoint.x},${this._fromPoint.y} ` +
|
||||
`L${x + this._fromPoint.x},${y + this._fromPoint.y} M${this._fromPoint.x},${
|
||||
this._fromPoint.y
|
||||
`L${x + this._fromPoint.x},${y + this._fromPoint.y} M${this._fromPoint.x},${this._fromPoint.y
|
||||
} ` +
|
||||
`L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`;
|
||||
this._native.setAttribute('d', path);
|
||||
|
||||
@ -27,8 +27,8 @@ class CurvedLinePeer extends ElementPeer {
|
||||
this._updateStyle();
|
||||
this._customControlPoint_1 = false;
|
||||
this._customControlPoint_2 = false;
|
||||
this._control1 = new Point();
|
||||
this._control2 = new Point();
|
||||
this._control1 = new Point(0, 0);
|
||||
this._control2 = new Point(0, 0);
|
||||
this._lineStyle = true;
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@ class CurvedLinePeer extends ElementPeer {
|
||||
const change = this._x1 !== Number.parseFloat(x1, 10) || this._y1 !== Number.parseFloat(y1, 10);
|
||||
this._x1 = Number.parseFloat(x1, 10);
|
||||
this._y1 = Number.parseFloat(y1, 10);
|
||||
if (change) this._updatePath();
|
||||
if (change) { this._updatePath(); }
|
||||
}
|
||||
|
||||
setTo(x2, y2) {
|
||||
@ -149,16 +149,16 @@ class CurvedLinePeer extends ElementPeer {
|
||||
if ($defined(this._x1) && $defined(this._y1) && $defined(this._x2) && $defined(this._y2)) {
|
||||
this._calculateAutoControlPoints(avoidControlPointFix);
|
||||
|
||||
const path = `M${this._x1.toFixed(2)},${this._y1.toFixed(2)} C${(
|
||||
const path = `M${this._x1.toFixed(2)},${this._y1.toFixed()} C${(
|
||||
this._control1.x + this._x1
|
||||
).toFixed(2)},${this._control1.y + this._y1} ${(this._control2.x + this._x2).toFixed(2)},${(
|
||||
).toFixed(2)},${this._control1.y + this._y1} ${(this._control2.x + this._x2).toFixed()},${(
|
||||
this._control2.y + this._y2
|
||||
).toFixed(2)} ${this._x2.toFixed(2)},${this._y2.toFixed(2)}${this._lineStyle
|
||||
? ` ${(this._control2.x + this._x2).toFixed(2)},${(
|
||||
).toFixed(2)} ${this._x2.toFixed(2)},${this._y2.toFixed()}${this._lineStyle
|
||||
? ` ${(this._control2.x + this._x2).toFixed()},${(
|
||||
this._control2.y +
|
||||
this._y2 +
|
||||
3
|
||||
).toFixed(2)} ${(this._control1.x + this._x1).toFixed(2)},${(
|
||||
).toFixed(2)} ${(this._control1.x + this._x1).toFixed()},${(
|
||||
this._control1.y +
|
||||
this._y1 +
|
||||
5
|
||||
|
||||
Loading…
Reference in New Issue
Block a user