wisemapping-frontend/packages/mindplot/src/components/RelationshipPivot.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 { CurvedLine, Arrow, Point } from '@wisemapping/web2d';
import { $assert } from '@wisemapping/core-js';
import Relationship from './Relationship';
import Shape from './util/Shape';
import Workspace from './Workspace';
import { Designer } from '..';
import Topic from './Topic';

class RelationshipPivot {
  private _workspace: Workspace;

  private _designer: Designer;

  private _mouseMoveEvent: MouseEvent;

  private _onClickEvent: (event: MouseEvent) => void;

  private _onTopicClick: (event: MouseEvent) => void;

  private _sourceTopic: Topic;

  private _pivot: any;

  private _startArrow: Arrow;

  constructor(workspace: Workspace, designer: Designer) {
    $assert(workspace, 'workspace can not be null');
    $assert(designer, 'designer can not be null');
    this._workspace = workspace;
    this._designer = designer;

    this._mouseMoveEvent = this._mouseMove.bind(this);
    this._onClickEvent = this._cleanOnMouseClick.bind(this);
    this._onTopicClick = this._connectOnFocus.bind(this);
  }

  start(sourceTopic: Topic, targetPos: Point) {
    $assert(sourceTopic, 'sourceTopic can not be null');
    $assert(targetPos, 'targetPos can not be null');

    this.dispose();
    this._sourceTopic = sourceTopic;
    if (sourceTopic != null) {
      this._workspace.enableWorkspaceEvents(false);

      const sourcePos = sourceTopic.getPosition();
      const strokeColor = Relationship.getStrokeColor();

      this._pivot = new CurvedLine();
      this._pivot.setStyle(CurvedLine.SIMPLE_LINE);

      const fromPos = this._calculateFromPosition(sourcePos);
      this._pivot.setFrom(fromPos.x, fromPos.y);

      this._pivot.setTo(targetPos.x, targetPos.y);
      this._pivot.setStroke(2, 'solid', strokeColor);
      this._pivot.setDashed(4, 2);

      this._startArrow = new Arrow();
      this._startArrow.setStrokeColor(strokeColor);
      this._startArrow.setStrokeWidth(2);
      this._startArrow.setFrom(sourcePos.x, sourcePos.y);

      this._workspace.append(this._pivot);
      this._workspace.append(this._startArrow);

      this._workspace.addEvent('mousemove', this._mouseMoveEvent);
      this._workspace.addEvent('click', this._onClickEvent);

      // Register focus events on all topics ...
      const model = this._designer.getModel();
      const topics = model.getTopics();
      topics.forEach((topic) => {
        topic.addEvent('ontfocus', this._onTopicClick);
      });
    }
  }

  dispose(): void {
    const workspace = this._workspace;

    if (this._isActive()) {
      workspace.removeEvent('mousemove', this._mouseMoveEvent);
      workspace.removeEvent('click', this._onClickEvent);

      const model = this._designer.getModel();
      const topics = model.getTopics();

      topics.forEach((topic) => {
        topic.removeEvent('ontfocus', this._onTopicClick);
      });

      workspace.removeChild(this._pivot);
      workspace.removeChild(this._startArrow);
      workspace.enableWorkspaceEvents(true);

      this._sourceTopic = null;
      this._pivot = null;
      this._startArrow = null;
    }
  }

  _mouseMove(event: MouseEvent): boolean {
    const screen = this._workspace.getScreenManager();
    const pos = screen.getWorkspaceMousePosition(event);

    // Leave the arrow a couple of pixels away from the cursor.
    const sourcePosition = this._sourceTopic.getPosition();
    const gapDistance = Math.sign(pos.x - sourcePosition.x) * 5;

    const sPos = this._calculateFromPosition(pos);
    this._pivot.setFrom(sPos.x, sPos.y);

    // Update target position ...
    this._pivot.setTo(pos.x - gapDistance, pos.y);

    const controlPoints = this._pivot.getControlPoints();
    this._startArrow.setFrom(pos.x - gapDistance, pos.y);
    this._startArrow.setControlPoint(controlPoints[1]);

    event.stopPropagation();
    return false;
  }

  _cleanOnMouseClick(event: MouseEvent): void {
    // The user clicks on a desktop on in other element that is not a node.
    this.dispose();
    event.stopPropagation();
  }

  private _calculateFromPosition(toPosition: Point): Point {
    // Calculate origin position ...
    let sourcePosition = this._sourceTopic.getPosition();
    if (this._sourceTopic.getType() === 'CentralTopic') {
      sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition);
    }
    const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition);

    const spoint = new Point();
    spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10);
    spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10);
    return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
  }

  private _connectOnFocus(event: string, targetTopic: Topic): void {
    const sourceTopic = this._sourceTopic;
    const mindmap = this._designer.getMindmap();

    // Avoid circular connections ...
    if (targetTopic.getId() !== sourceTopic.getId()) {
      const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
      this._designer.getActionDispatcher().addRelationship(relModel);
    }
    this.dispose();
  }

  private _isActive() {
    return this._pivot != null;
  }
}

export default RelationshipPivot;