wisemapping-frontend/packages/mindplot/lib/components/Relationship.js

/*
 *    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: function () {
            return '#9b74e6';
        },
        type: "Relationship"
    },
    initialize: function (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);

        var 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");

        var 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())) {
            var srcPoint = model.getSrcCtrlPoint().clone();
            this.setSrcControlPoint(srcPoint);
        }
        if ($defined(model.getDestCtrlPoint())) {
            var destPoint = model.getDestCtrlPoint().clone();
            this.setDestControlPoint(destPoint);
        }
    },

    setStroke: function (color, style, opacity) {
        this.parent(color, style, opacity);
        this._startArrow.setStrokeColor(color);
    },

    redraw: function () {
        var line2d = this._line2d;
        var sourceTopic = this._sourceTopic;
        var sourcePosition = sourceTopic.getPosition();

        var targetTopic = this._targetTopic;
        var targetPosition = targetTopic.getPosition();
        if (targetTopic.getType() == INodeModel.CENTRAL_TOPIC_TYPE) {
            targetPosition = Shape.workoutIncomingConnectionPoint(targetTopic, sourcePosition);
        }

        var sPos, tPos;
        this._line2d.setStroke(2);
        var ctrlPoints = this._line2d.getControlPoints();
        if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {

            var 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;
        }
        var spoint = new core.Point();
        spoint.x = parseInt(ctrlPoints[0].x) + parseInt(sourcePosition.x);
        spoint.y = parseInt(ctrlPoints[0].y) + parseInt(sourcePosition.y);

        var 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: function () {
        var tpos = this._line2d.getTo();
        var 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") {
            var 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: function (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: function () {
        this.setOnFocus(true);
    },

    removeFromWorkspace: function (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: function () {
        return Relationship.type;
    },

    setOnFocus: function (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: function () {
        var sPos = this._line2d.getFrom();
        var tPos = this._line2d.getTo();
        var ctrlPoints = this._line2d.getControlPoints();
        this._focusShape.setFrom(sPos.x, sPos.y);
        this._focusShape.setTo(tPos.x, tPos.y);
        var 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: function (type, listener) {
        // Translate to web 2d events ...
        if (type == 'onfocus') {
            type = 'mousedown';
        }

        var line = this._line2d;
        line.addEvent(type, listener);
    },

    isOnFocus: function () {
        return this._onFocus;
    },

    isInWorkspace: function () {
        return this._isInWorkspace;
    },

    setVisibility: function (value) {
        this.parent(value);
        if (this._showEndArrow)
            this._endArrow.setVisibility(this._showEndArrow);
        this._startArrow.setVisibility(this._showStartArrow && value);
    },

    setOpacity: function (opacity) {
        this.parent(opacity);
        if (this._showEndArrow)
            this._endArrow.setOpacity(opacity);
        if (this._showStartArrow)
            this._startArrow.setOpacity(opacity);
    },

    setShowEndArrow: function (visible) {
        this._showEndArrow = visible;
        if (this._isInWorkspace)
            this.redraw();
    },

    setShowStartArrow: function (visible) {
        this._showStartArrow = visible;
        if (this._isInWorkspace)
            this.redraw();
    },

    setFrom: function (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: function (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: function (control) {
        this._line2d.setSrcControlPoint(control);
        this._startArrow.setControlPoint(control);
    },

    setDestControlPoint: function (control) {
        this._line2d.setDestControlPoint(control);
        if (this._showEndArrow)
            this._endArrow.setControlPoint(control);
    },

    getControlPoints: function () {
        return this._line2d.getControlPoints();
    },

    isSrcControlPointCustom: function () {
        return this._line2d.isSrcControlPointCustom();
    },

    isDestControlPointCustom: function () {
        return this._line2d.isDestControlPointCustom();
    },

    setIsSrcControlPointCustom: function (isCustom) {
        this._line2d.setIsSrcControlPointCustom(isCustom);
    },

    setIsDestControlPointCustom: function (isCustom) {
        this._line2d.setIsDestControlPointCustom(isCustom);
    },

    getId: function () {
        return this._model.getId();
    },

    fireEvent: function (type, event) {
        var elem = this._line2d;
        elem.trigger(type, event);
    }
});

export default Relationship;