jnpf-bpmn-v6x/lib/gridSnapping/connect/index.ts

import inherits from 'inherits-browser';
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import { pointsAligned } from 'diagram-js/lib/util/Geometry';
import { assign } from 'min-dash';
import { DEFAULT_CONNECT } from '../../config/constants';
import { NodeUtils } from '../../utils/nodeUtil';
/**
 * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
 * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping
 * @typedef {import('../../modeling/Modeling').default} Modeling
 *
 * @typedef {import('diagram-js/lib/util/Types').Point} Point
 */

const HIGH_PRIORITY = 3000;

export default function GridSnappingLayoutConnectionBehavior(this: any, eventBus: any, gridSnapping: any, modeling: any, jnpfData: any, injector: any) {
  CommandInterceptor.call(this, eventBus);
  this._gridSnapping = gridSnapping;
  this._injector = injector;
  const self = this;
  this.postExecuted(['connection.create', 'connection.layout'], HIGH_PRIORITY, function (event: any) {
    let context = event.context,
      connection = context.connection,
      waypoints = connection.waypoints;
    let target = connection.target,
      source = connection.source;
    // 横向美化
    if (jnpfData.data?.layout?.value === 'horizontal') {
      let x = source.x;
      let y = source.y + source.height / 2;
      let targetX = target.x + target.width / 2;
      if (source.x + source.width <= target.x) {
        // 右侧
        x = source.x + source.width;
        if (y === target.y + target.height / 2) {
          waypoints = [
            { x: x, y: y },
            { x: target.x, y: target.y + target.height / 2 },
          ];
        } else if (y >= target.y + target.height && x + 30 > target.x) {
          waypoints = [
            { x: x, y: y },
            { x: targetX, y: y },
            { x: targetX, y: target.y + target.height },
          ];
        } else if (y - 10 < target.y && x + 30 > target.x) {
          waypoints = [
            { x: x, y: y },
            { x: targetX, y: y },
            { x: targetX, y: target.y },
          ];
        } else {
          if (target.x - source.x - source.width - DEFAULT_CONNECT / 2 > 0) {
            waypoints = [
              { x: x, y: y },
              { x: target.x - DEFAULT_CONNECT / 2, y: y },
              { x: target.x - DEFAULT_CONNECT / 2, y: target.y + target.height / 2 },
              { x: target.x, y: target.y + target.height / 2 },
            ];
          } else {
            waypoints = [
              { x: x, y: y },
              { x: source.x + source.width + (target.x - source.x - source.width) / 2, y: y },
              { x: source.x + source.width + (target.x - source.x - source.width) / 2, y: target.y + target.height / 2 },
              { x: target.x, y: target.y + target.height / 2 },
            ];
          }
        }
      } else if (source.x > target.x + target.width) {
        // 左侧
        x = target.x + target.width;
        if (x + 30 > source.x) {
          if (y - 10 > target.y + target.height) {
            waypoints = [
              { x: source.x, y: source.y + source.height / 2 },
              { x: target.x + target.width / 2, y: source.y + source.height / 2 },
              { x: target.x + target.width / 2, y: target.y + target.height },
            ];
          } else if (y - 10 < target.y + target.height) {
            waypoints = [
              { x: source.x, y: source.y + source.height / 2 },
              { x: target.x + target.width / 2, y: source.y + source.height / 2 },
              { x: target.x + target.width / 2, y: target.y },
            ];
          }
        } else {
          waypoints = [
            { x: source.x, y: source.y + source.height / 2 },
            { x: (source.x - x) / 2 + x, y: source.y + source.height / 2 },
            { x: (source.x - x) / 2 + x, y: target.y + target.height / 2 },
            { x: x, y: target.y + target.height / 2 },
          ];
        }
      } else {
        // 上侧
        if (target.y < source.y) {
          if (source.x + source.width / 2 === target.x + target.width / 2) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y },
              { x: target.x + target.width / 2, y: target.y + target.height },
            ];
          } else if (target.y + target.height > source.y - 20) {
            if (source.x + source.width / 2 >= target.x + target.width) {
              // 左上
              waypoints = [
                { x: source.x + source.width / 2, y: source.y },
                { x: source.x + source.width / 2, y: target.y + target.height / 2 },
                { x: target.x + target.width, y: target.y + target.height / 2 },
              ];
            } else if (source.x + source.width / 2 <= target.x) {
              // 右上
              waypoints = [
                { x: source.x + source.width / 2, y: source.y },
                { x: source.x + source.width / 2, y: target.y + target.height / 2 },
                { x: target.x, y: target.y + target.height / 2 },
              ];
            } else {
              waypoints = [
                { x: source.x + source.width / 2, y: source.y },
                { x: source.x + source.width / 2, y: source.y - (source.y - target.y - target.height) / 2 },
                { x: target.x + target.width / 2, y: target.y + target.height },
              ];
            }
          } else {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y },
              { x: source.x + source.width / 2, y: source.y - (source.y - target.y - target.height) / 2 },
              { x: target.x + target.width / 2, y: source.y - (source.y - target.y - target.height) / 2 },
              { x: target.x + target.width / 2, y: target.y + target.height },
            ];
          }
        } else if (target.y + target.height > source.y + source.height) {
          // 下侧
          if (source.x + source.width / 2 === target.x + target.width / 2) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y + source.height },
              { x: target.x + target.width / 2, y: target.y },
            ];
          } else if (target.y - 20 < source.y + source.height) {
            if (source.x + source.width / 2 >= target.x + target.width) {
              // 左下
              waypoints = [
                { x: source.x + source.width / 2, y: source.y + source.height },
                { x: source.x + source.width / 2, y: target.y + target.height / 2 },
                { x: target.x + target.width, y: target.y + target.height / 2 },
              ];
            } else if (source.x + source.width / 2 <= target.x) {
              // 右下
              waypoints = [
                { x: source.x + source.width / 2, y: source.y + source.height },
                { x: source.x + source.width / 2, y: target.y + target.height / 2 },
                { x: target.x, y: target.y + target.height / 2 },
              ];
            } else {
              waypoints = [
                { x: source.x + source.width / 2, y: source.y + source.height },
                { x: source.x + source.width / 2, y: target.y - (target.y - source.y - source.height) / 2 },
                { x: target.x + target.width / 2, y: target.y - (target.y - source.y - source.height) / 2 },
                { x: target.x + target.width / 2, y: target.y },
              ];
            }
          } else {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y + source.height },
              { x: source.x + source.width / 2, y: target.y - (target.y - source.y - source.height) / 2 },
              { x: target.x + target.width / 2, y: target.y - (target.y - source.y - source.height) / 2 },
              { x: target.x + target.width / 2, y: target.y },
            ];
          }
        }
      }
    }
    if (jnpfData.data?.layout?.value === 'vertical') {
      if (source.y + source.height < target.y) {
        if (source.x + source.width / 2 === target.x + target.width / 2) {
          waypoints = [
            { x: source.x + source.width / 2, y: source.y + source.height },
            { x: target.x + target.width / 2, y: target.y },
          ];
        } else {
          if (source.y + source.height + 20 > target.y && source.x + source.width / 2 < target.x) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y + source.height },
              { x: source.x + source.width / 2, y: target.y + target.height / 2 },
              { x: target.x, y: target.y + target.height / 2 },
            ];
          } else if (source.y + source.height + 20 > target.y && source.x + source.width / 2 > target.x + target.width + 10) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y + source.height },
              { x: source.x + source.width / 2, y: target.y + target.height / 2 },
              { x: target.x + target.width, y: target.y + target.height / 2 },
            ];
          } else
            waypoints = [
              { x: source.x + source.width / 2, y: source.y + source.height },
              { x: source.x + source.width / 2, y: source.y + source.height + (target.y - source.y - source.height) / 2 },
              { x: target.x + target.width / 2, y: source.y + source.height + (target.y - source.y - source.height) / 2 },
              { x: target.x + target.width / 2, y: target.y },
            ];
        }
      } else if (source.y > target.y + target.height) {
        if (source.x + source.width / 2 === target.x + target.width / 2) {
          waypoints = [
            { x: source.x + source.width / 2, y: source.y },
            { x: target.x + target.width / 2, y: target.y + target.height },
          ];
        } else {
          if (source.y - 20 < target.y + target.height && source.x + source.width / 2 < target.x) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y },
              { x: source.x + source.width / 2, y: target.y + target.height / 2 },
              { x: target.x, y: target.y + target.height / 2 },
            ];
          } else if (source.y - 20 < target.y + target.height && source.x + source.width / 2 > target.x + target.width + 10) {
            waypoints = [
              { x: source.x + source.width / 2, y: source.y },
              { x: source.x + source.width / 2, y: target.y + target.height / 2 },
              { x: target.x + target.width, y: target.y + target.height / 2 },
            ];
          } else
            waypoints = [
              { x: source.x + source.width / 2, y: source.y },
              { x: source.x + source.width / 2, y: source.y - (source.y - target.y - target.height) / 2 },
              { x: target.x + target.width / 2, y: source.y - (source.y - target.y - target.height) / 2 },
              { x: target.x + target.width / 2, y: target.y + target.height },
            ];
        }
      } else if (source.x + source.width / 2 < target.x - 10) {
        // 右侧
        if (source.x + source.width >= target.x - 10 && source.y + source.height / 2 >= target.y + target.height - 10) {
          waypoints = [
            { x: source.x + source.width, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: target.y + target.height },
          ];
        } else if (source.x + source.width >= target.x - 10 && source.y + source.height / 2 + 10 <= target.y) {
          waypoints = [
            { x: source.x + source.width, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: target.y },
          ];
        } else {
          waypoints = [
            { x: source.x + source.width, y: source.y + source.height / 2 },
            { x: source.x + source.width + (target.x - source.x - source.width) / 2, y: source.y + source.height / 2 },
            { x: source.x + source.width + (target.x - source.x - source.width) / 2, y: target.y + target.height / 2 },
            { x: target.x, y: target.y + target.height / 2 },
          ];
        }
      } else if (source.x + source.width / 2 > target.x + target.width - 10) {
        // 左侧
        if (source.x < target.x + target.width + 20 && source.y + source.height / 2 >= target.y + target.height - 10) {
          waypoints = [
            { x: source.x, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: target.y + target.height },
          ];
        } else if (source.x < target.x + target.width + 20 && source.y + source.height / 2 + 10 <= target.y) {
          waypoints = [
            { x: source.x, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: source.y + source.height / 2 },
            { x: target.x + target.width / 2, y: target.y },
          ];
        } else
          waypoints = [
            { x: source.x, y: source.y + source.height / 2 },
            { x: target.x + target.width + (source.x - target.x - target.width) / 2, y: source.y + source.height / 2 },
            { x: target.x + target.width + (source.x - target.x - target.width) / 2, y: target.y + target.height / 2 },
            { x: target.x + target.width, y: target.y + target.height / 2 },
          ];
      }
    }
    // 判断是横向还是纵向 如果是纵向 需要重新修改坐标
    modeling.updateWaypoints(connection, self.snapMiddleSegments(waypoints));
    let elementRegistry = injector.get('elementRegistry');
    let labelCenter = NodeUtils.updateLabelWaypoints(connection, elementRegistry, jnpfData);
    let connectLabel = connection.label;
    if (connectLabel) {
      let label = elementRegistry.get(connectLabel.id);
      label.x = labelCenter.x;
      label.y = labelCenter.y;
      modeling.updateProperties(label, {});
    }
  });
}

GridSnappingLayoutConnectionBehavior.$inject = ['eventBus', 'gridSnapping', 'modeling', 'jnpfData', 'injector'];
inherits(GridSnappingLayoutConnectionBehavior, CommandInterceptor);
/**
 * Snap middle segments of a given connection.
 *
 * @param {Point[]} waypoints
 *
 * @return {Point[]}
 */
GridSnappingLayoutConnectionBehavior.prototype.snapMiddleSegments = function (this: any, waypoints: any[]) {
  const gridSnapping = this._gridSnapping;
  waypoints = waypoints.slice();

  for (let i = 1; i < waypoints.length - 2; i++) {
    const snapped = snapSegment(gridSnapping, waypoints[i], waypoints[i + 1]);
    waypoints[i] = snapped[0];
    waypoints[i + 1] = snapped[1];
  }
  return waypoints;
};

/**
 * Check whether a connection has middle segments.
 *
 * @param {Point[]} waypoints
 *
 * @return {boolean}
 */
function hasMiddleSegments(waypoints: any[]) {
  return waypoints.length > 3;
}

/**
 * Check whether an alignment is horizontal.
 *
 * @param {string} aligned
 *
 * @return {boolean}
 */
function horizontallyAligned(aligned: string) {
  return aligned === 'h';
}

/**
 * Check whether an alignment is vertical.
 *
 * @param {string} aligned
 *
 * @return {boolean}
 */
function verticallyAligned(aligned: string) {
  return aligned === 'v';
}

/**
 * Get middle segments from a given connection.
 *
 * @param {Point[]} waypoints
 *
 * @return {Point[]}
 */
function snapSegment(gridSnapping: any, segmentStart: any, segmentEnd: any) {
  const aligned: any = pointsAligned(segmentStart, segmentEnd);
  const snapped: any = {};

  if (horizontallyAligned(aligned)) {
    snapped.y = gridSnapping.snapValue(segmentStart.y);
  }

  if (verticallyAligned(aligned)) {
    snapped.x = gridSnapping.snapValue(segmentStart.x);
  }

  if ('x' in snapped || 'y' in snapped) {
    segmentStart = assign({}, segmentStart, snapped);
    segmentEnd = assign({}, segmentEnd, snapped);
  }

  return [segmentStart, segmentEnd];
}