wisemapping-frontend/packages/web2d/src/components/peer/svg/CurvedLinePeer.js

/*
 *    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 { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer';
import Point from '../../Point';

const CurvedLinePeer = new Class({
  Extends: ElementPeer,
  initialize() {
    const svgElement = window.document.createElementNS(this.svgNamespace, 'path');
    this.parent(svgElement);
    this._style = { fill: '#495879' };
    this._updateStyle();
    this._customControlPoint_1 = false;
    this._customControlPoint_2 = false;
    this._control1 = new Point();
    this._control2 = new Point();
    this._lineStyle = true;
  },

  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 = parseInt(this._control1.x, 10);
      this._control1.y = parseInt(this._control1.y, 10);
    }
    if (change) this._updatePath();
  },

  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 = parseInt(this._control2.x, 10);
      this._control2.y = parseInt(this._control2.y, 10);
    }
    if (change) this._updatePath();
  },

  isSrcControlPointCustom() {
    return this._customControlPoint_1;
  },

  isDestControlPointCustom() {
    return this._customControlPoint_2;
  },

  setIsSrcControlPointCustom(isCustom) {
    this._customControlPoint_1 = isCustom;
  },

  setIsDestControlPointCustom(isCustom) {
    this._customControlPoint_2 = isCustom;
  },

  getControlPoints() {
    return [this._control1, this._control2];
  },

  setFrom(x1, y1) {
    const change = this._x1 !== parseInt(x1, 10) || this._y1 !== parseInt(y1, 10);
    this._x1 = parseInt(x1, 10);
    this._y1 = parseInt(y1, 10);
    if (change) this._updatePath();
  },

  setTo(x2, y2) {
    const change = this._x2 !== parseInt(x2, 10) || this._y2 !== parseInt(y2, 10);
    this._x2 = parseInt(x2, 10);
    this._y2 = parseInt(y2, 10);
    if (change) this._updatePath();
  },

  getFrom() {
    return new Point(this._x1, this._y1);
  },

  getTo() {
    return new Point(this._x2, this._y2);
  },

  setStrokeWidth(width) {
    this._style['stroke-width'] = width;
    this._updateStyle();
  },

  setColor(color) {
    this._style.stroke = color;
    this._style.fill = color;
    this._updateStyle();
  },

  updateLine(avoidControlPointFix) {
    this._updatePath(avoidControlPointFix);
  },

  setLineStyle(style) {
    this._lineStyle = style;
    if (this._lineStyle) {
      this._style.fill = this._fill;
    } else {
      this._fill = this._style.fill;
      this._style.fill = 'none';
    }
    this._updateStyle();
    this.updateLine();
  },

  getLineStyle() {
    return this._lineStyle;
  },

  setShowEndArrow(visible) {
    this._showEndArrow = visible;
    this.updateLine();
  },

  isShowEndArrow() {
    return this._showEndArrow;
  },

  setShowStartArrow(visible) {
    this._showStartArrow = visible;
    this.updateLine();
  },

  isShowStartArrow() {
    return this._showStartArrow;
  },

  _updatePath(avoidControlPointFix) {
    if (
      $defined(this._x1)
      && $defined(this._y1)
      && $defined(this._x2)
      && $defined(this._y2)
    ) {
      this._calculateAutoControlPoints(avoidControlPointFix);
      const path = `M${this._x1},${this._y1} C${this._control1.x + this._x1},${this._control1.y + this._y1
      } ${this._control2.x + this._x2},${this._control2.y + this._y2} ${this._x2},${this._y2
      }${this._lineStyle
        ? ` ${this._control2.x + this._x2},${this._control2.y + this._y2 + 3} ${this._control1.x + this._x1
        },${this._control1.y + this._y1 + 5} ${this._x1},${this._y1 + 7} Z`
        : ''
      }`;
      this._native.setAttribute('d', path);
    }
  },

  _updateStyle() {
    let style = '';
    for (const key in this._style) {
      if (Object.prototype.hasOwnProperty.call(this._style, key)) {
        style += `${key}:${this._style[key]} `;
      }
    }
    this._native.setAttribute('style', style);
  },

  // TODO: deduplicate this method, extracted from mindplot/src/components/util/Shape.js to avoid circular ref
  _calculateDefaultControlPoints(srcPos, tarPos) {
    const y = srcPos.y - tarPos.y;
    const x = srcPos.x - tarPos.x;
    const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0.

    const m = y / div;
    const l = Math.sqrt(y * y + x * x) / 3;
    let fix = 1;
    if (srcPos.x > tarPos.x) {
      fix = -1;
    }

    const x1 = srcPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix;
    const y1 = m * (x1 - srcPos.x) + srcPos.y;
    const x2 = tarPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix * -1;
    const y2 = m * (x2 - tarPos.x) + tarPos.y;

    return [
      new Point(-srcPos.x + x1, -srcPos.y + y1),
      new Point(-tarPos.x + x2, -tarPos.y + y2),
    ];
  },

  _calculateAutoControlPoints(avoidControlPointFix) {
    // Both points available, calculate real points
    const defaultpoints = this._calculateDefaultControlPoints(
      new Point(this._x1, this._y1),
      new Point(this._x2, this._y2),
    );
    if (
      !this._customControlPoint_1
      && !($defined(avoidControlPointFix) && avoidControlPointFix === 0)
    ) {
      this._control1.x = defaultpoints[0].x;
      this._control1.y = defaultpoints[0].y;
    }
    if (
      !this._customControlPoint_2
      && !($defined(avoidControlPointFix) && avoidControlPointFix === 1)
    ) {
      this._control2.x = defaultpoints[1].x;
      this._control2.y = defaultpoints[1].y;
    }
  },

  setDashed(length, spacing) {
    if ($defined(length) && $defined(spacing)) {
      this._native.setAttribute('stroke-dasharray', `${length},${spacing}`);
    } else {
      this._native.setAttribute('stroke-dasharray', '');
    }
  },
});

export default CurvedLinePeer;