@antv/f6/lib/behavior/create-edge.js

A Mobile Graph Visualization Framework in JavaScript

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var DEFAULT_TRIGGER = 'tap';
var ALLOW_EVENTS = ['tap', 'drag'];
var DEFAULT_KEY = undefined;
var ALLOW_KEYS = ['shift', 'ctrl', 'control', 'alt', 'meta', undefined];
var _default = {
  getDefaultCfg: function getDefaultCfg() {
    return {
      trigger: DEFAULT_TRIGGER,
      key: DEFAULT_KEY,
      edgeConfig: {}
    };
  },
  getEvents: function getEvents() {
    var self = this;
    // 检测输入是否合法
    if (!(ALLOW_EVENTS.indexOf(self.trigger.toLowerCase()) > -1)) {
      self.trigger = DEFAULT_TRIGGER;
      // eslint-disable-next-line no-console
      console.warn("Behavior create-edge 的 trigger 参数不合法，请输入 'click'，'drag'");
    }
    if (self.key && ALLOW_KEYS.indexOf(self.key.toLowerCase()) === -1) {
      self.trigger = DEFAULT_KEY;
      // eslint-disable-next-line no-console
      console.warn("Behavior create-edge 的 key 参数不合法，请输入 'shift'，'ctrl'，'alt'，'control'，或 undefined");
    }
    var events;
    if (self.trigger === 'drag') {
      events = {
        'node:dragstart': 'onClick',
        'combo:dragstart': 'onClick',
        drag: 'updateEndPoint',
        'node:drop': 'onClick',
        'combo:drop': 'onClick',
        dragend: 'onDragEnd'
      };
    } else if (self.trigger === 'click') {
      events = {
        'node:tap': 'onClick',
        mousemove: 'updateEndPoint',
        'edge:tap': 'cancelCreating',
        'canvas:tap': 'cancelCreating',
        'combo:tap': 'onClick'
      };
    }
    if (self.key) {
      events.keydown = 'onKeyDown';
      events.keyup = 'onKeyUp';
    }
    return events;
  },
  onDragEnd: function onDragEnd(ev) {
    var self = this;
    if (self.key && !self.keydown) return;
    var item = ev.item;
    if (!item || item.getID() === self.source || item.getType() !== 'node') self.cancelCreating({
      item: self.edge,
      x: ev.x,
      y: ev.y
    });
  },
  // 如果边的起点没有指定，则根据起点创建新边；如果起点已经指定而终点未指定，则指定终点
  onClick: function onClick(ev) {
    var self = this;
    if (self.key && !self.keydown) return;
    var node = ev.item;
    var graph = self.graph;
    var model = node.getModel();
    // 如果起点已经指定而终点未指定，则指定终点
    if (self.addingEdge && self.edge) {
      if (!self.shouldEnd.call(self, ev)) return;
      var updateCfg = {
        target: model.id
      };
      if (self.source === model.id) {
        updateCfg.type = 'loop';
      }
      graph.emit('beforecreateedge', {});
      graph.updateItem(self.edge, updateCfg);
      graph.emit('aftercreateedge', {
        edge: self.edge
      });
      // 暂时将该边的 capture 恢复为 true
      self.edge.getKeyShape().set('capture', true);
      self.edge = null;
      self.addingEdge = false;
    } else {
      // 如果边的起点没有指定，则根据起点创建新边
      if (!self.shouldBegin.call(self, ev)) return;
      self.edge = graph.addItem('edge', (0, _tslib.__assign)({
        source: model.id,
        target: model.id
      }, self.edgeConfig), false);
      self.source = model.id;
      self.addingEdge = true;
      // 暂时将该边的 capture 设置为 false，这样可以拾取到后面的元素
      self.edge.getKeyShape().set('capture', false);
    }
  },
  // 边的起点已经确定，边的末端跟随鼠标移动
  updateEndPoint: function updateEndPoint(ev) {
    var self = this;
    if (self.key && !self.keydown) return;
    var point = {
      x: ev.x,
      y: ev.y
    };
    // 若此时 source 节点已经被移除，结束添加边
    if (!self.graph.findById(self.source)) {
      self.addingEdge = false;
      return;
    }
    if (self.addingEdge && self.edge) {
      // 更新边的终点为鼠标位置
      self.graph.updateItem(self.edge, {
        target: point
      }, false);
    }
  },
  // 取消增加边，删除该边；或指定终点
  cancelCreating: function cancelCreating(ev) {
    var self = this;
    if (self.key && !self.keydown) return;
    var graph = self.graph;
    var currentEdge = ev.item;
    if (self.addingEdge && ev.target && ev.target.isCanvas && ev.target.isCanvas()) {
      graph.removeItem(self.edge, false);
      self.edge = null;
      self.addingEdge = false;
      return;
    }
    if (self.addingEdge && self.edge === currentEdge) {
      var cancelEdge = true;
      // !graph.get('groupByTypes') 将会导致选中终点时实际上边在最上层，节点无法响应 click 事件
      if (!graph.get('groupByTypes')) {
        // 此时需要判断点击的位置是否在节点范围内，若在，则指定终点。否则取消增加边
        var x = ev.x,
          y = ev.y;
        var nodes = graph.getNodes();
        var length_1 = nodes.length;
        for (var i = 0; i < length_1; i++) {
          var node = nodes[i];
          var model = node.getModel();
          var nodeBBox = node.getBBox();
          if (x <= nodeBBox.maxX && x >= nodeBBox.minX && y <= nodeBBox.maxY && y >= nodeBBox.minY) {
            if (!self.shouldEnd.call(self, {
              x: ev.x,
              y: ev.y,
              canvasX: ev.canvasX,
              canvasY: ev.canvasY,
              clientX: ev.clientX,
              clientY: ev.clientY,
              item: node
            })) {
              return;
            }
            graph.emit('beforecreateedge', {});
            graph.updateItem(self.edge, {
              target: model.id
            });
            graph.emit('aftercreateedge', {
              edge: self.edge
            });
            cancelEdge = false;
            break;
          }
        }
      }
      if (cancelEdge) graph.removeItem(self.edge, false);
      self.edge = null;
      self.addingEdge = false;
    }
  },
  onKeyDown: function onKeyDown(e) {
    var self = this;
    var code = e.key;
    if (!code) {
      return;
    }
    if (code.toLowerCase() === self.key.toLowerCase()) {
      self.keydown = true;
    } else {
      self.keydown = false;
    }
  },
  onKeyUp: function onKeyUp() {
    var self = this;
    if (self.addingEdge && self.edge) {
      // 清除正在增加的边
      self.graph.removeItem(self.edge, false);
      self.addingEdge = false;
      self.edge = null;
    }
    this.keydown = false;
  }
};
exports.default = _default;