@antv/f6
Version:
A Mobile Graph Visualization Framework in JavaScript
196 lines • 6.35 kB
JavaScript
import { __assign } from "tslib";
var DEFAULT_TRIGGER = 'tap';
var ALLOW_EVENTS = ['tap', 'drag'];
var DEFAULT_KEY = undefined;
var ALLOW_KEYS = ['shift', 'ctrl', 'control', 'alt', 'meta', undefined];
export 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', __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;
}
};