wisemapping-frontend/packages/mindplot/src/components/ConnectionLine.ts

/*
 *    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 { $assert, $defined } from '@wisemapping/core-js';
import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
import { TopicShape } from './model/INodeModel';
import RelationshipModel from './model/RelationshipModel';
import Topic from './Topic';
import TopicConfig from './TopicConfig';
import Workspace from './Workspace';

class ConnectionLine {
  protected _targetTopic: Topic;

  protected _sourceTopic: Topic;

  protected _lineType: number;

  protected _line2d: Line;

  protected _model: RelationshipModel;

  constructor(sourceNode: Topic, targetNode: Topic, lineType?: number) {
    $assert(targetNode, 'parentNode node can not be null');
    $assert(sourceNode, 'childNode node can not be null');
    $assert(sourceNode !== targetNode, 'Circular connection');

    this._targetTopic = targetNode;
    this._sourceTopic = sourceNode;

    let line: Line;
    const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode);
    if (targetNode.getType() === 'CentralTopic') {
      line = this._createLine(lineType, ConnectionLine.CURVED);
      line.setSrcControlPoint(ctrlPoints[0]);
      line.setDestControlPoint(ctrlPoints[1]);
    } else {
      line = this._createLine(lineType, ConnectionLine.SIMPLE_CURVED);
      line.setSrcControlPoint(ctrlPoints[0]);
      line.setDestControlPoint(ctrlPoints[1]);
    }
    // Set line styles ...
    const strokeColor = ConnectionLine.getStrokeColor();
    line.setStroke(1, 'solid', strokeColor, 1);
    line.setFill(strokeColor, 1);

    this._line2d = line;
  }

  private _getCtrlPoints(sourceNode: Topic, targetNode: Topic) {
    const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
    const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
    const deltaX = (srcPos.x - destPos.x) / 3;
    return [new Point(deltaX, 0), new Point(-deltaX, 0)];
  }

  protected _createLine(lineTypeParam: number, defaultStyle: number): Line {
    const lineType = $defined(lineTypeParam) ? lineTypeParam : defaultStyle;
    this._lineType = lineType;
    let line = null;
    switch (lineType) {
      case ConnectionLine.POLYLINE:
        line = new PolyLine();
        break;
      case ConnectionLine.CURVED:
        line = new CurvedLine();
        break;
      case ConnectionLine.SIMPLE_CURVED:
        line = new CurvedLine();
        line.setStyle(CurvedLine.SIMPLE_LINE);
        break;
      default:
        line = new Line();
        break;
    }
    return line;
  }

  setVisibility(value: boolean, fade = 0): void {
    this._line2d.setVisibility(value, fade);
  }

  isVisible(): boolean {
    return this._line2d.isVisible();
  }

  setOpacity(opacity: number): void {
    this._line2d.setOpacity(opacity);
  }

  redraw(): void {
    const line2d = this._line2d;
    const sourceTopic = this._sourceTopic;
    const sourcePosition = sourceTopic.getPosition();

    const targetTopic = this._targetTopic;
    const targetPosition = targetTopic.getPosition();

    const sPos = sourceTopic.workoutOutgoingConnectionPoint(targetPosition);
    const tPos = targetTopic.workoutIncomingConnectionPoint(sourcePosition);

    line2d.setFrom(tPos.x, tPos.y);
    line2d.setTo(sPos.x, sPos.y);

    if (line2d.getType() === 'CurvedLine') {
      const ctrlPoints = this._getCtrlPoints(this._sourceTopic, this._targetTopic);
      line2d.setSrcControlPoint(ctrlPoints[0]);
      line2d.setDestControlPoint(ctrlPoints[1]);
    }

    // Add connector ...
    this._positionateConnector(targetTopic);
  }

  protected _positionateConnector(targetTopic: Topic): void {
    const targetPosition = targetTopic.getPosition();
    const offset = TopicConfig.CONNECTOR_WIDTH / 2;
    const targetTopicSize = targetTopic.getSize();
    let y;
    let x;
    if (targetTopic.getShapeType() === TopicShape.LINE) {
      y = targetTopicSize.height;
    } else {
      y = targetTopicSize.height / 2;
    }
    y -= offset;

    const connector = targetTopic.getShrinkConnector();
    if ($defined(connector)) {
      if (Math.sign(targetPosition.x) > 0) {
        x = targetTopicSize.width;
        connector.setPosition(x, y);
      } else {
        x = -TopicConfig.CONNECTOR_WIDTH;
      }
      connector.setPosition(x, y);
    }
  }

  setStroke(color: string, style: string, opacity: number) {
    this._line2d.setStroke(null, null, color, opacity);
  }

  addToWorkspace(workspace: Workspace) {
    workspace.append(this._line2d);
    this._line2d.moveToBack();
  }

  removeFromWorkspace(workspace: Workspace) {
    workspace.removeChild(this._line2d);
  }

  getTargetTopic(): Topic {
    return this._targetTopic;
  }

  getSourceTopic(): Topic {
    return this._sourceTopic;
  }

  getLineType(): number {
    return this._lineType;
  }

  getLine(): Line {
    return this._line2d;
  }

  getModel(): RelationshipModel {
    return this._model;
  }

  setModel(model: RelationshipModel): void {
    this._model = model;
  }

  getType(): string {
    return 'ConnectionLine';
  }

  getId(): number {
    return this._model.getId();
  }

  moveToBack(): void {
    this._line2d.moveToBack();
  }

  moveToFront() {
    this._line2d.moveToFront();
  }

  static SIMPLE = 0;

  static POLYLINE = 1;

  static CURVED = 2;

  static SIMPLE_CURVED = 3;

  static getStrokeColor = () => '#495879';
}

export default ConnectionLine;