wisemapping-frontend/packages/mindplot/lib/components/Relationship.js
2021-10-04 17:05:34 -07:00

338 lines
9.8 KiB
JavaScript

/*
* Copyright [2015] [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.
*/
const Core = require('@wismapping/core-js');
const core = Core();
const web2D = require('@wismapping/web2d');
const web2d = web2D();
const ConnectionLine = require('./ConnectionLine').default;
const ControlPoint = require('./ControlPoint').default;
const INodeModel = require('./model/INodeModel').default;
const Shape = require('./util/Shape').default;
const Relationship = new Class({
Extends: ConnectionLine,
Static: {
getStrokeColor() {
return '#9b74e6';
},
type: 'Relationship',
},
initialize(sourceNode, targetNode, model) {
$assert(sourceNode, 'sourceNode can not be null');
$assert(targetNode, 'targetNode can not be null');
this.parent(sourceNode, targetNode, model.getLineType());
this.setModel(model);
const strokeColor = Relationship.getStrokeColor();
this._line2d.setIsSrcControlPointCustom(false);
this._line2d.setIsDestControlPointCustom(false);
this._line2d.setCursor('pointer');
this._line2d.setStroke(1, 'solid', strokeColor);
this._line2d.setDashed(4, 2);
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.setVisibility(false);
this._onFocus = false;
this._isInWorkspace = false;
this._controlPointsController = new ControlPoint();
this._startArrow = new web2d.Arrow();
this._startArrow.setStrokeColor(strokeColor);
this._startArrow.setStrokeWidth(2);
this.setShowStartArrow(true);
// Share style is disable ...
if (this._showEndArrow) {
this._endArrow = new web2d.Arrow();
this._endArrow.setStrokeColor(strokeColor);
this._endArrow.setStrokeWidth(2);
}
// Position the line ...
if ($defined(model.getSrcCtrlPoint())) {
const srcPoint = model.getSrcCtrlPoint().clone();
this.setSrcControlPoint(srcPoint);
}
if ($defined(model.getDestCtrlPoint())) {
const destPoint = model.getDestCtrlPoint().clone();
this.setDestControlPoint(destPoint);
}
},
setStroke(color, style, opacity) {
this.parent(color, style, opacity);
this._startArrow.setStrokeColor(color);
},
redraw() {
const line2d = this._line2d;
const sourceTopic = this._sourceTopic;
const sourcePosition = sourceTopic.getPosition();
const targetTopic = this._targetTopic;
let targetPosition = targetTopic.getPosition();
if (targetTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
}
let sPos; let
tPos;
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;
ctrlPoints[1].x = defaultPoints[1].x;
ctrlPoints[1].y = defaultPoints[1].y;
}
const spoint = new core.Point();
spoint.x = parseInt(ctrlPoints[0].x) + parseInt(sourcePosition.x);
spoint.y = parseInt(ctrlPoints[0].y) + parseInt(sourcePosition.y);
const tpoint = new core.Point();
tpoint.x = parseInt(ctrlPoints[1].x) + parseInt(targetPosition.x);
tpoint.y = parseInt(ctrlPoints[1].y) + parseInt(targetPosition.y);
sPos = Shape.calculateRelationShipPointCoordinates(sourceTopic, spoint);
tPos = Shape.calculateRelationShipPointCoordinates(targetTopic, tpoint);
line2d.setFrom(sPos.x, sPos.y);
line2d.setTo(tPos.x, tPos.y);
line2d.moveToFront();
// Positionate Arrows
this._positionArrows();
// Add connector ...
this._positionateConnector(targetTopic);
if (this.isOnFocus()) {
this._refreshShape();
}
this._focusShape.moveToBack();
this._controlPointsController.redraw();
},
_positionArrows() {
const tpos = this._line2d.getTo();
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') {
const controlPoints = this._line2d.getControlPoints();
this._startArrow.setControlPoint(controlPoints[0]);
if (this._endArrow) {
this._endArrow.setControlPoint(controlPoints[1]);
}
} else {
this._startArrow.setControlPoint(this._line2d.getTo());
if (this._endArrow) {
this._endArrow.setControlPoint(this._line2d.getFrom());
}
}
if (this._showEndArrow) {
this._endArrow.setVisibility(this.isVisible());
}
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
},
addToWorkspace(workspace) {
workspace.append(this._focusShape);
workspace.append(this._controlPointsController);
this._controlPointControllerListener = this._initializeControlPointController.bind(this);
this._line2d.addEvent('click', this._controlPointControllerListener);
this._isInWorkspace = true;
workspace.append(this._startArrow);
if (this._endArrow) workspace.append(this._endArrow);
this.parent(workspace);
this._positionArrows();
this.redraw();
},
_initializeControlPointController() {
this.setOnFocus(true);
},
removeFromWorkspace(workspace) {
workspace.removeChild(this._focusShape);
workspace.removeChild(this._controlPointsController);
this._line2d.removeEvent('click', this._controlPointControllerListener);
this._isInWorkspace = false;
workspace.removeChild(this._startArrow);
if (this._endArrow) workspace.removeChild(this._endArrow);
this.parent(workspace);
},
getType() {
return Relationship.type;
},
setOnFocus(focus) {
// Change focus shape
if (this.isOnFocus() != focus) {
if (focus) {
this._refreshShape();
this._controlPointsController.setLine(this);
}
this._focusShape.setVisibility(focus);
this._controlPointsController.setVisibility(focus);
this._onFocus = focus;
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
}
},
_refreshShape() {
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.updateLine();
},
addEvent(type, listener) {
// Translate to web 2d events ...
if (type == 'onfocus') {
type = 'mousedown';
}
const line = this._line2d;
line.addEvent(type, listener);
},
isOnFocus() {
return this._onFocus;
},
isInWorkspace() {
return this._isInWorkspace;
},
setVisibility(value) {
this.parent(value);
if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow && value);
},
setOpacity(opacity) {
this.parent(opacity);
if (this._showEndArrow) this._endArrow.setOpacity(opacity);
if (this._showStartArrow) this._startArrow.setOpacity(opacity);
},
setShowEndArrow(visible) {
this._showEndArrow = visible;
if (this._isInWorkspace) this.redraw();
},
setShowStartArrow(visible) {
this._showStartArrow = visible;
if (this._isInWorkspace) this.redraw();
},
setFrom(x, y) {
$assert($defined(x), 'x must be defined');
$assert($defined(y), 'y must be defined');
this._line2d.setFrom(x, y);
this._startArrow.setFrom(x, y);
},
setTo(x, y) {
$assert($defined(x), 'x must be defined');
$assert($defined(y), 'y must be defined');
this._line2d.setTo(x, y);
if (this._endArrow) this._endArrow.setFrom(x, y);
},
setSrcControlPoint(control) {
this._line2d.setSrcControlPoint(control);
this._startArrow.setControlPoint(control);
},
setDestControlPoint(control) {
this._line2d.setDestControlPoint(control);
if (this._showEndArrow) this._endArrow.setControlPoint(control);
},
getControlPoints() {
return this._line2d.getControlPoints();
},
isSrcControlPointCustom() {
return this._line2d.isSrcControlPointCustom();
},
isDestControlPointCustom() {
return this._line2d.isDestControlPointCustom();
},
setIsSrcControlPointCustom(isCustom) {
this._line2d.setIsSrcControlPointCustom(isCustom);
},
setIsDestControlPointCustom(isCustom) {
this._line2d.setIsDestControlPointCustom(isCustom);
},
getId() {
return this._model.getId();
},
fireEvent(type, event) {
const elem = this._line2d;
elem.trigger(type, event);
},
});
export default Relationship;