mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-24 23:37:57 +01:00
Refactor relationship.
This commit is contained in:
Paulo Gustavo Veiga
parent
4be63fee4d
commit
c1dc4554d7
@ -21,7 +21,7 @@ import { $assert } from '@wisemapping/core-js';
|
||||
import Point from '@wisemapping/web2d';
|
||||
import { Mindmap } from '..';
|
||||
import CommandContext from './CommandContext';
|
||||
import ControlPoint from './ControlPoint';
|
||||
import RelationshipControlPoints from './RelationshipControlPoints';
|
||||
import Events from './Events';
|
||||
import NodeModel from './model/NodeModel';
|
||||
import RelationshipModel from './model/RelationshipModel';
|
||||
@ -57,7 +57,7 @@ abstract class ActionDispatcher extends Events {
|
||||
|
||||
abstract moveTopic(topicId: number, position: Point): void;
|
||||
|
||||
abstract moveControlPoint(ctrlPoint: ControlPoint, point: Point): void;
|
||||
abstract moveControlPoint(ctrlPoint: RelationshipControlPoints, point: Point): void;
|
||||
|
||||
abstract changeFontFamilyToTopic(topicIds: number[], fontFamily: string): void;
|
||||
|
||||
|
||||
@ -1,250 +0,0 @@
|
||||
/*
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Elipse, Line, Point } from '@wisemapping/web2d';
|
||||
import { $defined } from '@wisemapping/core-js';
|
||||
|
||||
import Shape from './util/Shape';
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
import Workspace from './Workspace';
|
||||
import PositionType from './PositionType';
|
||||
|
||||
class ControlPoint {
|
||||
private control1: Elipse;
|
||||
|
||||
private control2: Elipse;
|
||||
|
||||
private _controlPointsController: Elipse[];
|
||||
|
||||
private _controlLines: Line[];
|
||||
|
||||
private _isBinded: boolean;
|
||||
|
||||
_line: Line;
|
||||
|
||||
private _workspace: Workspace;
|
||||
|
||||
private _endPoint: PositionType[];
|
||||
|
||||
private _orignalCtrlPoint: PositionType[];
|
||||
|
||||
private _controls: PositionType[];
|
||||
|
||||
private _mouseMoveFunction: (e: MouseEvent) => void;
|
||||
|
||||
private _mouseUpFunction: (e: MouseEvent) => void;
|
||||
|
||||
constructor() {
|
||||
this.control1 = new Elipse({
|
||||
width: 6,
|
||||
height: 6,
|
||||
stroke: '1 solid #6589de',
|
||||
fillColor: 'gray',
|
||||
visibility: false,
|
||||
});
|
||||
this.control1.setCursor('pointer');
|
||||
|
||||
this.control2 = new Elipse({
|
||||
width: 6,
|
||||
height: 6,
|
||||
stroke: '1 solid #6589de',
|
||||
fillColor: 'gray',
|
||||
visibility: false,
|
||||
});
|
||||
this.control2.setCursor('pointer');
|
||||
|
||||
this._controlPointsController = [this.control1, this.control2];
|
||||
this._controlLines = [
|
||||
new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
|
||||
new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
|
||||
];
|
||||
|
||||
this._isBinded = false;
|
||||
this._controlPointsController[0].addEvent('mousedown', (event: MouseEvent) => {
|
||||
this._mouseDown(event, ControlPoint.FROM);
|
||||
});
|
||||
this._controlPointsController[0].addEvent('click', (event: MouseEvent) => {
|
||||
this._mouseClick(event);
|
||||
});
|
||||
this._controlPointsController[0].addEvent('dblclick', (event: MouseEvent) => {
|
||||
this._mouseClick(event);
|
||||
});
|
||||
|
||||
this._controlPointsController[1].addEvent('mousedown', (event: MouseEvent) => {
|
||||
this._mouseDown(event, ControlPoint.TO);
|
||||
});
|
||||
this._controlPointsController[1].addEvent('click', (event: MouseEvent) => {
|
||||
this._mouseClick(event);
|
||||
});
|
||||
this._controlPointsController[1].addEvent('dblclick', (event: MouseEvent) => {
|
||||
this._mouseClick(event);
|
||||
});
|
||||
}
|
||||
|
||||
setLine(line: Line) {
|
||||
if ($defined(this._line)) {
|
||||
this._removeLine();
|
||||
}
|
||||
this._line = line;
|
||||
this._createControlPoint();
|
||||
this._endPoint = [];
|
||||
this._orignalCtrlPoint = [];
|
||||
[this._orignalCtrlPoint[0], this._orignalCtrlPoint[1]] = this._controls;
|
||||
this._endPoint[0] = { ...this._line.getLine().getFrom() };
|
||||
this._endPoint[1] = { ...this._line.getLine().getTo() };
|
||||
}
|
||||
|
||||
setControlPointTestId(ctrlPoint1, ctrlPoint2) {
|
||||
this.control1.setTestId(ctrlPoint1);
|
||||
this.control2.setTestId(ctrlPoint2);
|
||||
}
|
||||
|
||||
redraw() {
|
||||
if ($defined(this._line)) this._createControlPoint();
|
||||
}
|
||||
|
||||
private _createControlPoint() {
|
||||
this._controls = this._line.getLine().getControlPoints();
|
||||
let pos = this._line.getLine().getFrom();
|
||||
this._controlPointsController[0].setPosition(
|
||||
this._controls[ControlPoint.FROM].x + pos.x,
|
||||
this._controls[ControlPoint.FROM].y + pos.y - 3,
|
||||
);
|
||||
this._controlLines[0].setFrom(pos.x, pos.y);
|
||||
this._controlLines[0].setTo(
|
||||
this._controls[ControlPoint.FROM].x + pos.x + 3,
|
||||
this._controls[ControlPoint.FROM].y + pos.y,
|
||||
);
|
||||
pos = this._line.getLine().getTo();
|
||||
this._controlLines[1].setFrom(pos.x, pos.y);
|
||||
this._controlLines[1].setTo(
|
||||
this._controls[ControlPoint.TO].x + pos.x + 3,
|
||||
this._controls[ControlPoint.TO].y + pos.y,
|
||||
);
|
||||
this._controlPointsController[1].setPosition(
|
||||
this._controls[ControlPoint.TO].x + pos.x,
|
||||
this._controls[ControlPoint.TO].y + pos.y - 3,
|
||||
);
|
||||
}
|
||||
|
||||
private _removeLine() {
|
||||
// Overwrite default behaviour ...
|
||||
}
|
||||
|
||||
private _mouseDown(event: MouseEvent, point: number) {
|
||||
if (!this._isBinded) {
|
||||
this._isBinded = true;
|
||||
this._mouseMoveFunction = (e) => {
|
||||
this._mouseMoveEvent(e, point);
|
||||
};
|
||||
|
||||
this._workspace.getScreenManager().addEvent('mousemove', this._mouseMoveFunction);
|
||||
this._mouseUpFunction = (e: MouseEvent) => {
|
||||
this._mouseUp(e, MouseEvent);
|
||||
};
|
||||
this._workspace.getScreenManager().addEvent('mouseup', this._mouseUpFunction);
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
private _mouseMoveEvent(event: MouseEvent, point: Point) {
|
||||
const screen = this._workspace.getScreenManager();
|
||||
const pos = screen.getWorkspaceMousePosition(event);
|
||||
|
||||
let cords;
|
||||
if (point === 0) {
|
||||
cords = Shape.calculateRelationShipPointCoordinates(this._line.getSourceTopic(), pos);
|
||||
this._line.setFrom(cords.x, cords.y);
|
||||
this._line.setSrcControlPoint(new Point(pos.x - cords.x, pos.y - cords.y));
|
||||
} else {
|
||||
cords = Shape.calculateRelationShipPointCoordinates(this._line.getTargetTopic(), pos);
|
||||
this._line.setTo(cords.x, cords.y);
|
||||
this._line.setDestControlPoint(new Point(pos.x - cords.x, pos.y - cords.y));
|
||||
}
|
||||
|
||||
this._controls[point].x = pos.x - cords.x;
|
||||
this._controls[point].y = pos.y - cords.y;
|
||||
this._controlPointsController[point].setPosition(pos.x - 5, pos.y - 3);
|
||||
this._controlLines[point].setFrom(cords.x, cords.y);
|
||||
this._controlLines[point].setTo(pos.x - 2, pos.y);
|
||||
this._line.getLine().updateLine(point);
|
||||
}
|
||||
|
||||
private _mouseUp(event: MouseEvent, point: Point) {
|
||||
this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
|
||||
this._workspace.getScreenManager().removeEvent('mouseup', this._mouseUpFunction);
|
||||
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
actionDispatcher.moveControlPoint(this, point);
|
||||
this._isBinded = false;
|
||||
}
|
||||
|
||||
_mouseClick(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
setVisibility(visible: boolean) {
|
||||
if (visible) {
|
||||
this._controlLines[0].moveToFront();
|
||||
this._controlLines[1].moveToFront();
|
||||
this._controlPointsController[0].moveToFront();
|
||||
this._controlPointsController[1].moveToFront();
|
||||
}
|
||||
this._controlPointsController[0].setVisibility(visible);
|
||||
this._controlPointsController[1].setVisibility(visible);
|
||||
this._controlLines[0].setVisibility(visible);
|
||||
this._controlLines[1].setVisibility(visible);
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace): void {
|
||||
this._workspace = workspace;
|
||||
workspace.append(this._controlPointsController[0]);
|
||||
workspace.append(this._controlPointsController[1]);
|
||||
workspace.append(this._controlLines[0]);
|
||||
workspace.append(this._controlLines[1]);
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
this._workspace!;
|
||||
workspace.removeChild(this._controlPointsController[0]);
|
||||
workspace.removeChild(this._controlPointsController[1]);
|
||||
workspace.removeChild(this._controlLines[0]);
|
||||
workspace.removeChild(this._controlLines[1]);
|
||||
}
|
||||
|
||||
getControlPoint(index: number): PositionType {
|
||||
return this._controls[index];
|
||||
}
|
||||
|
||||
getOriginalEndPoint(index: number): PositionType {
|
||||
return this._endPoint[index];
|
||||
}
|
||||
|
||||
getOriginalCtrlPoint(index: number): PositionType {
|
||||
return this._orignalCtrlPoint[index];
|
||||
}
|
||||
|
||||
static FROM = 0;
|
||||
|
||||
static TO = 1;
|
||||
}
|
||||
|
||||
export default ControlPoint;
|
||||
@ -18,7 +18,7 @@
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
|
||||
import ConnectionLine from './ConnectionLine';
|
||||
import ControlPoint from './ControlPoint';
|
||||
import RelationshipControlPoints from './RelationshipControlPoints';
|
||||
import RelationshipModel from './model/RelationshipModel';
|
||||
import PositionType from './PositionType';
|
||||
import Topic from './Topic';
|
||||
@ -32,7 +32,7 @@ class Relationship extends ConnectionLine {
|
||||
|
||||
private _isInWorkspace: boolean;
|
||||
|
||||
private _controlPointsController: ControlPoint;
|
||||
private _controlPointsController: RelationshipControlPoints;
|
||||
|
||||
private _startArrow: Arrow;
|
||||
|
||||
@ -68,7 +68,7 @@ class Relationship extends ConnectionLine {
|
||||
this._focusShape.setVisibility(false);
|
||||
this._onFocus = false;
|
||||
this._isInWorkspace = false;
|
||||
this._controlPointsController = new ControlPoint();
|
||||
this._controlPointsController = new RelationshipControlPoints(this);
|
||||
|
||||
this._startArrow = new Arrow();
|
||||
this._startArrow.setStrokeColor(strokeColor);
|
||||
@ -83,17 +83,12 @@ class Relationship extends ConnectionLine {
|
||||
}
|
||||
|
||||
// Position the line ...
|
||||
if ($defined(model.getSrcCtrlPoint())) {
|
||||
if (model.getSrcCtrlPoint()) {
|
||||
const srcPoint = { ...model.getSrcCtrlPoint() };
|
||||
this.setSrcControlPoint(srcPoint);
|
||||
|
||||
// Set test id in control point
|
||||
this._controlPointsController.setControlPointTestId(
|
||||
`control-${Math.abs(srcPoint.x)}`,
|
||||
`control-${Math.abs(srcPoint.y)}`,
|
||||
);
|
||||
}
|
||||
if ($defined(model.getDestCtrlPoint())) {
|
||||
|
||||
if (model.getDestCtrlPoint()) {
|
||||
const destPoint = { ...model.getDestCtrlPoint() };
|
||||
this.setDestControlPoint(destPoint);
|
||||
}
|
||||
@ -149,9 +144,10 @@ class Relationship extends ConnectionLine {
|
||||
this._positionateConnector(targetTopic);
|
||||
|
||||
if (this.isOnFocus()) {
|
||||
this._refreshShape();
|
||||
this.refreshShape();
|
||||
}
|
||||
this._focusShape.moveToBack();
|
||||
|
||||
this._controlPointsController.redraw();
|
||||
}
|
||||
|
||||
@ -213,12 +209,13 @@ class Relationship extends ConnectionLine {
|
||||
removeFromWorkspace(workspace: Workspace): void {
|
||||
workspace.removeChild(this._focusShape);
|
||||
workspace.removeChild(this._controlPointsController);
|
||||
if (!workspace.isReadOnly) {
|
||||
this._line2d.removeEvent('click', this._controlPointControllerListener);
|
||||
}
|
||||
|
||||
this._line2d.removeEvent('click', this._controlPointControllerListener);
|
||||
this._isInWorkspace = false;
|
||||
workspace.removeChild(this._startArrow);
|
||||
if (this._endArrow) workspace.removeChild(this._endArrow);
|
||||
if (this._endArrow) {
|
||||
workspace.removeChild(this._endArrow);
|
||||
}
|
||||
|
||||
super.removeFromWorkspace(workspace);
|
||||
}
|
||||
@ -231,18 +228,17 @@ class Relationship extends ConnectionLine {
|
||||
// Change focus shape
|
||||
if (this.isOnFocus() !== focus) {
|
||||
if (focus) {
|
||||
this._refreshShape();
|
||||
this._controlPointsController.setLine(this);
|
||||
this.refreshShape();
|
||||
}
|
||||
this._focusShape.setVisibility(focus);
|
||||
|
||||
this._focusShape.setVisibility(focus);
|
||||
this._controlPointsController.setVisibility(focus);
|
||||
this._onFocus = focus;
|
||||
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
||||
}
|
||||
}
|
||||
|
||||
private _refreshShape(): void {
|
||||
refreshShape(): void {
|
||||
const sPos = this._line2d.getFrom();
|
||||
const tPos = this._line2d.getTo();
|
||||
const ctrlPoints = this._line2d.getControlPoints();
|
||||
@ -253,6 +249,7 @@ class Relationship extends ConnectionLine {
|
||||
shapeCtrlPoints[0].y = ctrlPoints[0].y;
|
||||
shapeCtrlPoints[1].x = ctrlPoints[1].x;
|
||||
shapeCtrlPoints[1].y = ctrlPoints[1].y;
|
||||
|
||||
this._focusShape.updateLine();
|
||||
}
|
||||
|
||||
|
||||
289
packages/mindplot/src/components/RelationshipControlPoints.ts
Normal file
289
packages/mindplot/src/components/RelationshipControlPoints.ts
Normal file
@ -0,0 +1,289 @@
|
||||
/*
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
// eslint-disable-next-line max-classes-per-file
|
||||
import { Elipse, Line } from '@wisemapping/web2d';
|
||||
import Shape from './util/Shape';
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
import Workspace from './Workspace';
|
||||
import PositionType from './PositionType';
|
||||
import Relationship from './Relationship';
|
||||
|
||||
enum PivotType {
|
||||
Start = 0,
|
||||
End = 1,
|
||||
}
|
||||
|
||||
class ControlPivotLine {
|
||||
private _dot: Elipse;
|
||||
|
||||
private _line: Line;
|
||||
|
||||
private _pivotType: PivotType;
|
||||
|
||||
private _workspace: Workspace;
|
||||
|
||||
private _relationship: Relationship;
|
||||
|
||||
private _changeHander: () => void;
|
||||
|
||||
private _moveRelHandler: (
|
||||
relationPosition: PositionType,
|
||||
controlPointPosition: PositionType,
|
||||
) => void;
|
||||
|
||||
private _isVisible: boolean;
|
||||
|
||||
private _mouseMoveHandler: (e: MouseEvent) => void;
|
||||
|
||||
private _mousedUpHandler: () => void;
|
||||
|
||||
constructor(
|
||||
pivotType: PivotType,
|
||||
relationship: Relationship,
|
||||
mouseMoveHandler: (relationPosition: PositionType, controlPointPosition: PositionType) => void,
|
||||
changeHander: () => void,
|
||||
) {
|
||||
this._pivotType = pivotType;
|
||||
this._changeHander = changeHander;
|
||||
this._moveRelHandler = mouseMoveHandler;
|
||||
this._relationship = relationship;
|
||||
|
||||
// Build dot controller ...
|
||||
this._dot = new Elipse({
|
||||
width: 6,
|
||||
height: 6,
|
||||
stroke: '1 solid #6589de',
|
||||
fillColor: 'gray',
|
||||
visibility: false,
|
||||
});
|
||||
this._dot.setCursor('pointer');
|
||||
|
||||
// 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();
|
||||
return false;
|
||||
};
|
||||
this._dot.addEvent('click', mouseClick);
|
||||
this._dot.addEvent('dblclick', mouseClick);
|
||||
|
||||
// Register handled ...
|
||||
this._mouseMoveHandler = (e: MouseEvent) => this.mouseMoveHandler(e);
|
||||
this._mousedUpHandler = () => this._mouseUpHandler();
|
||||
}
|
||||
|
||||
private _mouseDown(event: MouseEvent) {
|
||||
this.getWorkspace().getScreenManager().addEvent('mousemove', this._mouseMoveHandler);
|
||||
this.getWorkspace().getScreenManager().addEvent('mouseup', this._mousedUpHandler);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
setVisibility(value: boolean) {
|
||||
this._isVisible = value;
|
||||
|
||||
const screenManager = this.getWorkspace().getScreenManager();
|
||||
if (!value) {
|
||||
screenManager.removeEvent('mousemove', this._mouseMoveHandler);
|
||||
screenManager.removeEvent('mouseup', this._mouseUpHandler);
|
||||
}
|
||||
|
||||
// Make it visible ...
|
||||
this._dot.setVisibility(value);
|
||||
this._line.setVisibility(value);
|
||||
|
||||
if (value) {
|
||||
this.redraw();
|
||||
this._line.moveToFront();
|
||||
this._dot.moveToFront();
|
||||
}
|
||||
}
|
||||
|
||||
getPosition(): PositionType {
|
||||
const line = this._relationship.getLine();
|
||||
return line.getControlPoints()[this._pivotType];
|
||||
}
|
||||
|
||||
redraw(): void {
|
||||
if (this._isVisible) {
|
||||
const relationshipLine = this._relationship.getLine();
|
||||
const startPosition =
|
||||
this._pivotType === PivotType.Start ? 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._dot.setPosition(
|
||||
startPosition.x - ctrPosition.x - 8,
|
||||
startPosition.y - ctrPosition.y - 8,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private mouseMoveHandler(event: MouseEvent) {
|
||||
const screen = this._workspace.getScreenManager();
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
// Update pivot ...
|
||||
this._dot.setPosition(mousePosition.x - 5, mousePosition.y - 3);
|
||||
this._line.setTo(mousePosition.x - 2, mousePosition.y);
|
||||
|
||||
// Update controller ...
|
||||
this._relationship.getLine().updateLine(this._pivotType);
|
||||
}
|
||||
|
||||
private _mouseUpHandler() {
|
||||
const screenManager = this.getWorkspace().getScreenManager();
|
||||
screenManager.removeEvent('mousemove', this._mouseMoveHandler);
|
||||
screenManager.removeEvent('mouseup', this._mouseUpHandler);
|
||||
|
||||
this._changeHander();
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace): void {
|
||||
this._workspace = workspace;
|
||||
|
||||
workspace.append(this._line);
|
||||
workspace.append(this._dot);
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
// Hide all elements ...
|
||||
this.setVisibility(false);
|
||||
|
||||
// Remove elements ...
|
||||
workspace.removeChild(this._line);
|
||||
workspace.removeChild(this._dot);
|
||||
}
|
||||
|
||||
private getWorkspace(): Workspace {
|
||||
return this._workspace!;
|
||||
}
|
||||
}
|
||||
|
||||
class RelationshipControlPoints {
|
||||
// Visual element ...
|
||||
private _pivotLines: [ControlPivotLine, ControlPivotLine];
|
||||
|
||||
private _relationship: Relationship;
|
||||
|
||||
private _relationshipLinePositions: [PositionType, PositionType];
|
||||
|
||||
constructor(relationship: Relationship) {
|
||||
this._relationship = relationship;
|
||||
const startControlLine = new ControlPivotLine(
|
||||
PivotType.Start,
|
||||
relationship,
|
||||
(relationPosition, controlPointPosition) => {
|
||||
const line = this._relationship.getLine();
|
||||
line.setFrom(relationPosition.x, relationPosition.y);
|
||||
line.setSrcControlPoint(controlPointPosition);
|
||||
|
||||
console.log(JSON.stringify(controlPointPosition));
|
||||
},
|
||||
() => {
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
actionDispatcher.moveControlPoint(this, PivotType.Start);
|
||||
|
||||
relationship.setOnFocus(true);
|
||||
},
|
||||
);
|
||||
|
||||
const endControlLine = new ControlPivotLine(
|
||||
PivotType.End,
|
||||
relationship,
|
||||
(relationPosition, controlPointPosition) => {
|
||||
const line = this._relationship.getLine();
|
||||
line.setTo(relationPosition.x, relationPosition.y);
|
||||
line.setDestControlPoint(controlPointPosition);
|
||||
|
||||
console.log(JSON.stringify(controlPointPosition));
|
||||
},
|
||||
() => {
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
actionDispatcher.moveControlPoint(this, PivotType.End);
|
||||
|
||||
relationship.setOnFocus(true);
|
||||
},
|
||||
);
|
||||
this._pivotLines = [startControlLine, endControlLine];
|
||||
}
|
||||
|
||||
addToWorkspace(workspace: Workspace): void {
|
||||
this._pivotLines.forEach((pivot) => workspace.append(pivot));
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
this._pivotLines.forEach((pivot) => workspace.removeChild(pivot));
|
||||
}
|
||||
|
||||
getRelationship() {
|
||||
return this._relationship;
|
||||
}
|
||||
|
||||
redraw() {
|
||||
this._pivotLines.forEach((pivot) => pivot.redraw());
|
||||
}
|
||||
|
||||
setVisibility(value: boolean) {
|
||||
this._pivotLines.forEach((pivot) => pivot.setVisibility(value));
|
||||
}
|
||||
|
||||
getControlPointPosition(pivotType: PivotType): PositionType {
|
||||
return this._pivotLines[pivotType].getPosition();
|
||||
}
|
||||
|
||||
getRelationshipPosition(index: number): PositionType {
|
||||
return { ...this._relationshipLinePositions[index] };
|
||||
}
|
||||
}
|
||||
|
||||
export default RelationshipControlPoints;
|
||||
@ -35,6 +35,7 @@ import RelationshipModel from './model/RelationshipModel';
|
||||
import Topic from './Topic';
|
||||
import Command from './Command';
|
||||
import FeatureType from './model/FeatureType';
|
||||
import RelationshipControlPoints from './RelationshipControlPoints';
|
||||
|
||||
class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
private _actionRunner: DesignerActionRunner;
|
||||
@ -93,8 +94,8 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
}
|
||||
|
||||
/** */
|
||||
moveControlPoint(ctrlPoint: Point, point: Point) {
|
||||
const command = new MoveControlPointCommand(ctrlPoint, point);
|
||||
moveControlPoint(ctrlPoint: RelationshipControlPoints, index: number) {
|
||||
const command = new MoveControlPointCommand(ctrlPoint, index);
|
||||
this.execute(command);
|
||||
}
|
||||
|
||||
|
||||
@ -113,7 +113,7 @@ class Workspace {
|
||||
}
|
||||
|
||||
private appendInternal(shape: Element2D): void {
|
||||
if ($defined(shape.addToWorkspace)) {
|
||||
if (shape.addToWorkspace) {
|
||||
shape.addToWorkspace(this);
|
||||
} else {
|
||||
this._workspace.append(shape);
|
||||
@ -156,7 +156,7 @@ class Workspace {
|
||||
|
||||
removeChild(shape: Element2D): void {
|
||||
// Element is a node, not a web2d element?
|
||||
if ($defined(shape.removeFromWorkspace)) {
|
||||
if (shape.removeFromWorkspace) {
|
||||
shape.removeFromWorkspace(this);
|
||||
} else {
|
||||
this._workspace.removeChild(shape);
|
||||
|
||||
@ -15,28 +15,18 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Line } from '@wisemapping/web2d';
|
||||
import Command from '../Command';
|
||||
import ControlPoint from '../ControlPoint';
|
||||
import RelationshipControlPoints from '../RelationshipControlPoints';
|
||||
import PositionType from '../PositionType';
|
||||
|
||||
class MoveControlPointCommand extends Command {
|
||||
private _ctrlPointControler: ControlPoint;
|
||||
private _controlPoints: RelationshipControlPoints;
|
||||
|
||||
private _line: Line;
|
||||
private _ctrPointPosition: PositionType;
|
||||
|
||||
private _controlPoint: Line;
|
||||
private _endPosition: PositionType;
|
||||
|
||||
private _oldControlPoint: Line;
|
||||
|
||||
private _originalEndPoint: PositionType;
|
||||
|
||||
private _wasCustom: boolean;
|
||||
|
||||
private _endPoint: any;
|
||||
|
||||
private _point: number;
|
||||
private _controlPointIndex: number;
|
||||
|
||||
/**
|
||||
* @classdesc This command handles do/undo of changing the control points of a relationship
|
||||
@ -44,85 +34,72 @@ class MoveControlPointCommand extends Command {
|
||||
* influence how the arrow is drawn (not the source or the destination topic nor the arrow
|
||||
* direction)
|
||||
*/
|
||||
constructor(ctrlPointController: ControlPoint, point: number) {
|
||||
$assert(ctrlPointController, 'line can not be null');
|
||||
$assert($defined(point), 'point can not be null');
|
||||
|
||||
constructor(controlPoints: RelationshipControlPoints, controlPointIndex: number) {
|
||||
super();
|
||||
this._ctrlPointControler = ctrlPointController;
|
||||
this._line = ctrlPointController._line;
|
||||
this._controlPoint = { ...this._ctrlPointControler.getControlPoint(point) };
|
||||
this._oldControlPoint = { ...this._ctrlPointControler.getOriginalCtrlPoint(point) };
|
||||
this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point);
|
||||
switch (point) {
|
||||
case 0:
|
||||
this._wasCustom = this._line.getLine().isSrcControlPointCustom();
|
||||
this._endPoint = { ...this._line.getLine().getFrom() };
|
||||
break;
|
||||
case 1:
|
||||
this._wasCustom = this._line.getLine().isDestControlPointCustom();
|
||||
this._endPoint = { ...this._line.getLine().getTo() };
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this._point = point;
|
||||
this._ctrPointPosition = controlPoints.getControlPointPosition(controlPointIndex);
|
||||
this._controlPointIndex = controlPointIndex;
|
||||
this._controlPoints = controlPoints;
|
||||
|
||||
const relLine = controlPoints.getRelationship().getLine();
|
||||
this._endPosition = controlPointIndex === 0 ? relLine.getFrom() : relLine.getTo();
|
||||
}
|
||||
|
||||
execute() {
|
||||
const model = this._line.getModel();
|
||||
switch (this._point) {
|
||||
const relationship = this._controlPoints.getRelationship();
|
||||
const model = relationship.getModel();
|
||||
switch (this._controlPointIndex) {
|
||||
case 0:
|
||||
model.setSrcCtrlPoint({ ...this._controlPoint });
|
||||
this._line.setFrom(this._endPoint.x, this._endPoint.y);
|
||||
this._line.setIsSrcControlPointCustom(true);
|
||||
this._line.setSrcControlPoint({ ...this._controlPoint });
|
||||
model.setSrcCtrlPoint(this._ctrPointPosition);
|
||||
relationship.setIsSrcControlPointCustom(true);
|
||||
|
||||
relationship.setFrom(this._endPosition.x, this._endPosition.y);
|
||||
relationship.setSrcControlPoint(this._ctrPointPosition);
|
||||
break;
|
||||
case 1:
|
||||
model.setDestCtrlPoint({ ...this._controlPoint });
|
||||
this._wasCustom = this._line.getLine().isDestControlPointCustom();
|
||||
this._line.setTo(this._endPoint.x, this._endPoint.y);
|
||||
this._line.setIsDestControlPointCustom(true);
|
||||
this._line.setDestControlPoint({ ...this._controlPoint });
|
||||
model.setDestCtrlPoint(this._ctrPointPosition);
|
||||
relationship.setIsDestControlPointCustom(true);
|
||||
|
||||
relationship.setTo(this._endPosition.x, this._endPosition.y);
|
||||
relationship.setDestControlPoint(this._ctrPointPosition);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
throw new Error('Illegal state exception');
|
||||
}
|
||||
if (this._line.isOnFocus()) {
|
||||
this._line._refreshShape();
|
||||
this._ctrlPointControler.setLine(this._line);
|
||||
|
||||
if (relationship.isOnFocus()) {
|
||||
relationship.refreshShape();
|
||||
}
|
||||
this._line.getLine().updateLine(this._point);
|
||||
// this.relationship.getLine().updateLine(this._point);
|
||||
}
|
||||
|
||||
undoExecute() {
|
||||
const line = this._line;
|
||||
const model = line.getModel();
|
||||
switch (this._point) {
|
||||
case 0:
|
||||
if ($defined(this._oldControlPoint)) {
|
||||
line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
|
||||
model.setSrcCtrlPoint({ ...this._oldControlPoint });
|
||||
line.setSrcControlPoint({ ...this._oldControlPoint });
|
||||
line.setIsSrcControlPointCustom(this._wasCustom);
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if ($defined(this._oldControlPoint)) {
|
||||
line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
|
||||
model.setDestCtrlPoint({ ...this._oldControlPoint });
|
||||
line.setDestControlPoint({ ...this._oldControlPoint });
|
||||
line.setIsDestControlPointCustom(this._wasCustom);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this._line.getLine().updateLine(this._point);
|
||||
if (this._line.isOnFocus()) {
|
||||
this._ctrlPointControler.setLine(line);
|
||||
line._refreshShape();
|
||||
}
|
||||
// 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();
|
||||
// // }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -35,10 +35,8 @@ class CurvedLinePeer extends ElementPeer {
|
||||
setSrcControlPoint(control) {
|
||||
this._customControlPoint_1 = true;
|
||||
const change = this._control1.x !== control.x || this._control1.y !== control.y;
|
||||
if ($defined(control.x)) {
|
||||
this._control1 = control;
|
||||
this._control1.x = Number.parseFloat(this._control1.x, 10);
|
||||
this._control1.y = Number.parseFloat(this._control1.y, 10);
|
||||
if (control) {
|
||||
this._control1 = { ...control };
|
||||
}
|
||||
if (change) {
|
||||
this._updatePath();
|
||||
@ -48,12 +46,12 @@ class CurvedLinePeer extends ElementPeer {
|
||||
setDestControlPoint(control) {
|
||||
this._customControlPoint_2 = true;
|
||||
const change = this._control2.x !== control.x || this._control2.y !== control.y;
|
||||
if ($defined(control.x)) {
|
||||
this._control2 = control;
|
||||
this._control2.x = Number.parseFloat(this._control2.x, 10);
|
||||
this._control2.y = Number.parseFloat(this._control2.y, 10);
|
||||
if (control) {
|
||||
this._control2 = { ...control };
|
||||
}
|
||||
if (change) {
|
||||
this._updatePath();
|
||||
}
|
||||
if (change) this._updatePath();
|
||||
}
|
||||
|
||||
isSrcControlPointCustom() {
|
||||
@ -73,7 +71,7 @@ class CurvedLinePeer extends ElementPeer {
|
||||
}
|
||||
|
||||
getControlPoints() {
|
||||
return [this._control1, this._control2];
|
||||
return [{ ...this._control1 }, { ...this._control2 }];
|
||||
}
|
||||
|
||||
setFrom(x1, y1) {
|
||||
@ -155,19 +153,18 @@ class CurvedLinePeer extends ElementPeer {
|
||||
this._control1.x + this._x1
|
||||
).toFixed(2)},${this._control1.y + this._y1} ${(this._control2.x + this._x2).toFixed(2)},${(
|
||||
this._control2.y + this._y2
|
||||
).toFixed(2)} ${this._x2.toFixed(2)},${this._y2.toFixed(2)}${
|
||||
this._lineStyle
|
||||
? ` ${(this._control2.x + this._x2).toFixed(2)},${(
|
||||
this._control2.y +
|
||||
this._y2 +
|
||||
3
|
||||
).toFixed(2)} ${(this._control1.x + this._x1).toFixed(2)},${(
|
||||
this._control1.y +
|
||||
this._y1 +
|
||||
5
|
||||
).toFixed(2)} ${this._x1.toFixed(2)},${(this._y1 + 7).toFixed(2)} Z`
|
||||
: ''
|
||||
}`;
|
||||
).toFixed(2)} ${this._x2.toFixed(2)},${this._y2.toFixed(2)}${this._lineStyle
|
||||
? ` ${(this._control2.x + this._x2).toFixed(2)},${(
|
||||
this._control2.y +
|
||||
this._y2 +
|
||||
3
|
||||
).toFixed(2)} ${(this._control1.x + this._x1).toFixed(2)},${(
|
||||
this._control1.y +
|
||||
this._y1 +
|
||||
5
|
||||
).toFixed(2)} ${this._x1.toFixed(2)},${(this._y1 + 7).toFixed(2)} Z`
|
||||
: ''
|
||||
}`;
|
||||
this._native.setAttribute('d', path);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user