@antv/f6/es/behavior/drag-canvas.js

A Mobile Graph Visualization Framework in JavaScript

import Util from '../util';
var cloneEvent = Util.cloneEvent,
  isNaN = Util.isNaN;
var abs = Math.abs;
var DRAG_OFFSET = 10;
export default {
  getDefaultCfg: function getDefaultCfg() {
    return {
      direction: 'both',
      enableOptimize: false,
      // drag-canvas 可拖动的扩展范围，默认为 0，即最多可以拖动一屏的位置
      // 当设置的值大于 0 时，即拖动可以超过一屏
      // 当设置的值小于 0 时，相当于缩小了可拖动范围
      // 具体实例可参考：https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ
      scalableRange: 0,
      allowDragOnItem: false
    };
  },
  getEvents: function getEvents() {
    return {
      dragstart: 'onDragStart',
      drag: 'onDragMove',
      dragend: 'onDragEnd'
    };
  },
  updateViewport: function updateViewport(e) {
    var origin = this.origin;
    var clientX = +e.clientX;
    var clientY = +e.clientY;
    if (isNaN(clientX) || isNaN(clientY)) {
      return;
    }
    var dx = clientX - origin.x;
    var dy = clientY - origin.y;
    if (this.get('direction') === 'x') {
      dy = 0;
    } else if (this.get('direction') === 'y') {
      dx = 0;
    }
    this.origin = {
      x: clientX,
      y: clientY
    };
    var width = this.graph.get('width');
    var height = this.graph.get('height');
    var graphCanvasBBox = this.graph.get('canvas').getCanvasBBox();
    if (graphCanvasBBox.minX <= width + this.scalableRange && graphCanvasBBox.minX + dx > width + this.scalableRange || graphCanvasBBox.maxX + this.scalableRange >= 0 && graphCanvasBBox.maxX + this.scalableRange + dx < 0) {
      dx = 0;
    }
    if (graphCanvasBBox.minY <= height + this.scalableRange && graphCanvasBBox.minY + dy > height + this.scalableRange || graphCanvasBBox.maxY + this.scalableRange >= 0 && graphCanvasBBox.maxY + this.scalableRange + dy < 0) {
      dy = 0;
    }
    this.graph.translate(dx, dy);
  },
  onDragStart: function onDragStart(e) {
    var self = this;
    var event = e.originalEvent;
    if (!this.shouldBegin.call(this, e)) {
      return;
    }
    var target = e.target;
    var targetIsCanvas = target && target.isCanvas && target.isCanvas();
    if (!this.allowDragOnItem && !targetIsCanvas) return;
    self.origin = {
      x: e.clientX,
      y: e.clientY
    };
    self.dragging = false;
    if (this.enableOptimize) {
      // 拖动 canvas 过程中隐藏所有的边及label
      var graph = this.graph;
      var edges = graph.getEdges();
      for (var i = 0, len = edges.length; i < len; i++) {
        var shapes = edges[i].get('group').get('children');
        if (!shapes) continue;
        shapes.forEach(function (shape) {
          shape.set('ori-visibility', shape.get('ori-visibility') || shape.get('visible'));
          shape.hide();
        });
      }
      var nodes = graph.getNodes();
      for (var j = 0, nodeLen = nodes.length; j < nodeLen; j++) {
        var container = nodes[j].getContainer();
        var children = container.get('children');
        for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
          var child = children_1[_i];
          var isKeyShape = child.get('isKeyShape');
          if (!isKeyShape) {
            child.set('ori-visibility', child.get('ori-visibility') || child.get('visible'));
            child.hide();
          }
        }
      }
    }
  },
  onDragMove: function onDragMove(e) {
    var graph = this.graph;
    var target = e.target;
    var targetIsCanvas = target && target.isCanvas && target.isCanvas();
    if (!this.allowDragOnItem && !targetIsCanvas) return;
    e = cloneEvent(e);
    if (!this.origin) {
      return;
    }
    if (!this.dragging) {
      if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {
        return;
      }
      if (this.shouldBegin.call(this, e)) {
        e.type = 'dragstart';
        this.dragging = true;
      }
    }
    if (this.shouldUpdate.call(this, e)) {
      this.updateViewport(e);
    }
  },
  onDragEnd: function onDragEnd(e) {
    var graph = this.graph;
    if (this.enableOptimize) {
      // 拖动结束后显示所有的边
      var edges = graph.getEdges();
      for (var i = 0, len = edges.length; i < len; i++) {
        var shapes = edges[i].get('group').get('children');
        if (!shapes) continue;
        shapes.forEach(function (shape) {
          var oriVis = shape.get('ori-visibility');
          if (oriVis) shape.show();
        });
      }
      var nodes = graph.getNodes();
      for (var j = 0, nodeLen = nodes.length; j < nodeLen; j++) {
        var container = nodes[j].getContainer();
        var children = container.get('children');
        for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
          var child = children_2[_i];
          var isKeyShape = child.get('isKeyShape');
          if (!isKeyShape) {
            var oriVis = child.get('ori-visibility');
            if (oriVis) child.show();
          }
        }
      }
    }
    if (!this.dragging) {
      this.origin = null;
      return;
    }
    e = cloneEvent(e);
    if (this.shouldEnd.call(this, e)) {
      this.updateViewport(e);
    }
    e.type = 'dragend';
    // graph.emit('canvas:dragend', e);
    this.endDrag();
  },
  endDrag: function endDrag() {
    this.origin = null;
    this.dragging = false;
    this.dragbegin = false;
  }
};