mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 18:58:34 +08:00
chore: delete unused file and console
This commit is contained in:
k644606347
liujiangyu
parent
715f7ae9ca
commit
16a0479268
@ -1,247 +0,0 @@
|
||||
import { G6Event, IG6GraphEvent, INode, ICombo, IEdge } from '@antv/g6-core';
|
||||
import { throttle } from '@antv/util';
|
||||
|
||||
export default {
|
||||
getDefaultCfg(): object {
|
||||
return {
|
||||
// 可选 mouseenter || click
|
||||
// 选择 click 会监听 touch，mouseenter 不会监听
|
||||
trigger: 'mouseenter',
|
||||
activeState: 'active',
|
||||
inactiveState: 'inactive',
|
||||
resetSelected: false,
|
||||
shouldUpdate() {
|
||||
return true;
|
||||
},
|
||||
};
|
||||
},
|
||||
getEvents(): { [key in G6Event]?: string } {
|
||||
if ((this as any).get('trigger') === 'mouseenter') {
|
||||
return {
|
||||
'node:mouseenter': 'setAllItemStates',
|
||||
'combo:mouseenter': 'setAllItemStates',
|
||||
'node:mouseleave': 'clearActiveState',
|
||||
'combo:mouseleave': 'clearActiveState',
|
||||
};
|
||||
}
|
||||
return {
|
||||
'node:click': 'setAllItemStates',
|
||||
'combo:click': 'setAllItemStates',
|
||||
'canvas:click': 'clearActiveState',
|
||||
'node:touchstart': 'setOnTouchStart',
|
||||
'combo:touchstart': 'setOnTouchStart',
|
||||
'canvas:touchstart': 'clearOnTouchStart',
|
||||
};
|
||||
},
|
||||
setOnTouchStart(e: IG6GraphEvent) {
|
||||
const self = this;
|
||||
try {
|
||||
const touches = (e.originalEvent as TouchEvent).touches;
|
||||
const event1 = touches[0];
|
||||
const event2 = touches[1];
|
||||
|
||||
if (event1 && event2) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
} catch (e) {
|
||||
console.warn('Touch original event not exist!');
|
||||
}
|
||||
self.setAllItemStates(e);
|
||||
},
|
||||
clearOnTouchStart(e: IG6GraphEvent) {
|
||||
const self = this;
|
||||
try {
|
||||
const touches = (e.originalEvent as TouchEvent).touches;
|
||||
const event1 = touches[0];
|
||||
const event2 = touches[1];
|
||||
|
||||
if (event1 && event2) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
} catch (e) {
|
||||
console.warn('Touch original event not exist!');
|
||||
}
|
||||
self.clearActiveState(e);
|
||||
},
|
||||
setAllItemStates(e: IG6GraphEvent) {
|
||||
clearTimeout(this.timer);
|
||||
this.throttleSetAllItemStates(e, this);
|
||||
},
|
||||
clearActiveState(e: any) {
|
||||
// avoid clear state frequently, it costs a lot since all the items' states on the graph need to be cleared
|
||||
this.timer = setTimeout(() => {
|
||||
this.throttleClearActiveState(e, this);
|
||||
}, 50)
|
||||
},
|
||||
throttleSetAllItemStates: throttle(
|
||||
(e, self) => {
|
||||
const item: INode = e.item as INode;
|
||||
const graph = self.graph;
|
||||
if (!graph || graph.destroyed) return;
|
||||
self.item = item;
|
||||
if (!self.shouldUpdate(e.item, { event: e, action: 'activate' }, self)) {
|
||||
return;
|
||||
}
|
||||
const activeState = self.activeState;
|
||||
const inactiveState = self.inactiveState;
|
||||
const nodes = graph.getNodes();
|
||||
const combos = graph.getCombos();
|
||||
const edges = graph.getEdges();
|
||||
const vEdges = graph.get('vedges');
|
||||
const nodeLength = nodes.length;
|
||||
const comboLength = combos.length;
|
||||
const edgeLength = edges.length;
|
||||
const vEdgeLength = vEdges.length;
|
||||
const inactiveItems = self.inactiveItems || {};
|
||||
const activeItems = self.activeItems || {};
|
||||
|
||||
for (let i = 0; i < nodeLength; i++) {
|
||||
const node = nodes[i];
|
||||
const nodeId = node.getID();
|
||||
const hasSelected = node.hasState('selected');
|
||||
if (self.resetSelected) {
|
||||
if (hasSelected) {
|
||||
graph.setItemState(node, 'selected', false);
|
||||
}
|
||||
}
|
||||
if (activeItems[nodeId]) {
|
||||
graph.setItemState(node, activeState, false);
|
||||
delete activeItems[nodeId];
|
||||
}
|
||||
if (inactiveState && !inactiveItems[nodeId]) {
|
||||
graph.setItemState(node, inactiveState, true);
|
||||
inactiveItems[nodeId] = node;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < comboLength; i++) {
|
||||
const combo = combos[i];
|
||||
const comboId = combo.getID();
|
||||
const hasSelected = combo.hasState('selected');
|
||||
if (self.resetSelected) {
|
||||
if (hasSelected) {
|
||||
graph.setItemState(combo, 'selected', false);
|
||||
}
|
||||
}
|
||||
if (activeItems[comboId]) {
|
||||
graph.setItemState(combo, activeState, false);
|
||||
delete activeItems[comboId];
|
||||
}
|
||||
if (inactiveState && !inactiveItems[comboId]) {
|
||||
graph.setItemState(combo, inactiveState, true);
|
||||
inactiveItems[comboId] = combo;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < edgeLength; i++) {
|
||||
const edge = edges[i];
|
||||
const edgeId = edge.getID();
|
||||
if (activeItems[edgeId]) {
|
||||
graph.setItemState(edge, activeState, false);
|
||||
delete activeItems[edgeId];
|
||||
}
|
||||
if (inactiveState && !inactiveItems[edgeId]) {
|
||||
graph.setItemState(edge, inactiveState, true);
|
||||
inactiveItems[edgeId] = edge;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < vEdgeLength; i++) {
|
||||
const vEdge = vEdges[i];
|
||||
const vEdgeId = vEdge.getID();
|
||||
if (activeItems[vEdgeId]) {
|
||||
graph.setItemState(vEdge, activeState, false);
|
||||
delete activeItems[vEdgeId];
|
||||
}
|
||||
if (inactiveState && !inactiveItems[vEdgeId]) {
|
||||
graph.setItemState(vEdge, inactiveState, true);
|
||||
inactiveItems[vEdgeId] = vEdge;
|
||||
}
|
||||
}
|
||||
|
||||
if (item && !item.destroyed) {
|
||||
if (inactiveState) {
|
||||
graph.setItemState(item, inactiveState, false);
|
||||
delete inactiveItems[item.getID()];
|
||||
}
|
||||
if (!activeItems[item.getID()]) {
|
||||
graph.setItemState(item, activeState, true);
|
||||
activeItems[item.getID()] = item;
|
||||
}
|
||||
|
||||
const rEdges = item.getEdges();
|
||||
const rEdgeLegnth = rEdges.length;
|
||||
for (let i = 0; i < rEdgeLegnth; i++) {
|
||||
const edge = rEdges[i];
|
||||
const edgeId = edge.getID();
|
||||
let otherEnd: INode;
|
||||
if (edge.getSource() === item) {
|
||||
otherEnd = edge.getTarget();
|
||||
} else {
|
||||
otherEnd = edge.getSource();
|
||||
}
|
||||
const otherEndId = otherEnd.getID();
|
||||
if (inactiveState && inactiveItems[otherEndId]) {
|
||||
graph.setItemState(otherEnd, inactiveState, false);
|
||||
delete inactiveItems[otherEndId];
|
||||
}
|
||||
if (!activeItems[otherEndId]) {
|
||||
graph.setItemState(otherEnd, activeState, true);
|
||||
activeItems[otherEndId] = otherEnd;
|
||||
}
|
||||
if (inactiveItems[edgeId]) {
|
||||
graph.setItemState(edge, inactiveState, false);
|
||||
delete inactiveItems[edgeId];
|
||||
}
|
||||
if (!activeItems[edgeId]) {
|
||||
graph.setItemState(edge, activeState, true);
|
||||
activeItems[edgeId] = edge;
|
||||
}
|
||||
edge.toFront();
|
||||
}
|
||||
}
|
||||
self.activeItems = activeItems;
|
||||
self.inactiveItems = inactiveItems;
|
||||
graph.emit('afteractivaterelations', { item: e.item, action: 'activate' });
|
||||
},
|
||||
50,
|
||||
{
|
||||
trailing: true,
|
||||
leading: true
|
||||
}
|
||||
),
|
||||
throttleClearActiveState: throttle(
|
||||
(e, self) => {
|
||||
const graph = self.get('graph');
|
||||
if (!graph || graph.destroyed) return;
|
||||
if (!self.shouldUpdate(e.item, { event: e, action: 'deactivate' }, self)) return;
|
||||
|
||||
const activeState = self.activeState;
|
||||
const inactiveState = self.inactiveState;
|
||||
|
||||
const activeItems = self.activeItems || {};
|
||||
const inactiveItems = self.inactiveItems || {};
|
||||
|
||||
Object.values(activeItems).filter((item: INode | IEdge | ICombo) => !item.destroyed).forEach(item => {
|
||||
graph.clearItemStates(item, activeState);
|
||||
});
|
||||
Object.values(inactiveItems).filter((item: INode | IEdge | ICombo) => !item.destroyed).forEach(item => {
|
||||
graph.clearItemStates(item, inactiveState);
|
||||
});
|
||||
self.activeItems = {};
|
||||
self.inactiveItems = {};
|
||||
graph.emit('afteractivaterelations', {
|
||||
item: e.item || self.get('item'),
|
||||
action: 'deactivate',
|
||||
});
|
||||
},
|
||||
50,
|
||||
{
|
||||
trailing: true,
|
||||
leading: true
|
||||
}
|
||||
)
|
||||
};
|
||||
@ -1,323 +0,0 @@
|
||||
import { G6Event, IG6GraphEvent } from '@antv/g6-core';
|
||||
import { isBoolean, isObject } from '@antv/util';
|
||||
import { IGraph } from '../interface/graph';
|
||||
import Util from '../util';
|
||||
|
||||
const { cloneEvent, isNaN } = Util;
|
||||
|
||||
const { abs } = Math;
|
||||
const DRAG_OFFSET = 10;
|
||||
const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control'];
|
||||
|
||||
export default {
|
||||
getDefaultCfg(): object {
|
||||
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(): { [key in G6Event]?: string } {
|
||||
return {
|
||||
'mousedown': 'onMouseDown',
|
||||
'drag': 'onDragMove',
|
||||
'dragend': 'onMouseUp',
|
||||
'canvas:click': 'onMouseUp',
|
||||
'keyup': 'onKeyUp',
|
||||
'focus': 'onKeyUp',
|
||||
'keydown': 'onKeyDown',
|
||||
'touchstart': 'onTouchStart',
|
||||
'touchmove': 'onTouchMove',
|
||||
'touchend': 'onMouseUp',
|
||||
};
|
||||
},
|
||||
updateViewport(e: IG6GraphEvent) {
|
||||
const { origin } = this;
|
||||
const clientX = +e.clientX;
|
||||
const clientY = +e.clientY;
|
||||
|
||||
if (isNaN(clientX) || isNaN(clientY)) {
|
||||
return;
|
||||
}
|
||||
let dx = clientX - origin.x;
|
||||
let 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,
|
||||
};
|
||||
const width = this.graph.get('width');
|
||||
const height = this.graph.get('height');
|
||||
const graphCanvasBBox = this.graph.get('canvas').getCanvasBBox();
|
||||
|
||||
let expandWidth = this.scalableRange;
|
||||
let expandHeight = this.scalableRange;
|
||||
// 若 scalableRange 是 0~1 的小数，则作为比例考虑
|
||||
if (expandWidth < 1 && expandWidth > -1) {
|
||||
expandWidth = width * expandWidth;
|
||||
expandHeight = height * expandHeight;
|
||||
}
|
||||
if (
|
||||
(graphCanvasBBox.minX <= width + expandWidth &&
|
||||
graphCanvasBBox.minX + dx > width + expandWidth) ||
|
||||
(graphCanvasBBox.maxX + expandWidth >= 0 &&
|
||||
graphCanvasBBox.maxX + expandWidth + dx < 0)
|
||||
) {
|
||||
dx = 0;
|
||||
}
|
||||
if (
|
||||
(graphCanvasBBox.minY <= height + expandHeight &&
|
||||
graphCanvasBBox.minY + dy > height + expandHeight) ||
|
||||
(graphCanvasBBox.maxY + expandHeight >= 0 &&
|
||||
graphCanvasBBox.maxY + expandHeight + dy < 0)
|
||||
) {
|
||||
dy = 0;
|
||||
}
|
||||
this.graph.translate(dx, dy);
|
||||
},
|
||||
onTouchStart(e: IG6GraphEvent) {
|
||||
const self = this as any;
|
||||
const touches = (e.originalEvent as TouchEvent).touches;
|
||||
const event1 = touches[0];
|
||||
const event2 = touches[1];
|
||||
|
||||
// 如果是双指操作，不允许拖拽画布
|
||||
if (event1 && event2) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
this.mousedown = true;
|
||||
self.onDragStart(e);
|
||||
},
|
||||
onMouseDown(e: IG6GraphEvent) {
|
||||
this.mousedown = true;
|
||||
},
|
||||
onDragMove(evt: IG6GraphEvent) {
|
||||
if (!this.mousedown) return;
|
||||
if (!this.dragstart) {
|
||||
// dragstart
|
||||
this.dragstart = true;
|
||||
this.onDragStart(evt);
|
||||
} else {
|
||||
// drag
|
||||
this.onDrag(evt);
|
||||
}
|
||||
},
|
||||
onDragStart(e: IG6GraphEvent) {
|
||||
const self = this as any;
|
||||
const event = e.originalEvent as MouseEvent;
|
||||
|
||||
// TODO: 'name' doesn't exist on `IG6GraphEvent`, we should consider typing it so users get autocomplete and other benefits
|
||||
if (event && e.name !== 'touchstart' && event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
e.name !== 'touchstart' &&
|
||||
typeof window !== 'undefined' &&
|
||||
window.event &&
|
||||
!(window.event as any).buttons &&
|
||||
!(window.event as any).button
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.shouldBegin(e, this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (self.keydown) return;
|
||||
if (!this.allowDrag(e)) return;
|
||||
|
||||
self.origin = { x: e.clientX, y: e.clientY };
|
||||
self.dragging = false;
|
||||
|
||||
if (this.enableOptimize) {
|
||||
// 拖动 canvas 过程中隐藏所有的边及label
|
||||
const graph: IGraph = this.graph;
|
||||
const edges = graph.getEdges();
|
||||
for (let i = 0, len = edges.length; i < len; i++) {
|
||||
const shapes = edges[i].get('group').get('children');
|
||||
if (!shapes) continue;
|
||||
shapes.forEach((shape) => {
|
||||
shape.set('ori-visibility', shape.get('ori-visibility') || shape.get('visible'));
|
||||
shape.hide();
|
||||
});
|
||||
}
|
||||
const nodes = graph.getNodes();
|
||||
for (let j = 0, nodeLen = nodes.length; j < nodeLen; j++) {
|
||||
const container = nodes[j].getContainer();
|
||||
const children = container.get('children');
|
||||
for (const child of children) {
|
||||
const isKeyShape = child.get('isKeyShape');
|
||||
if (!isKeyShape) {
|
||||
child.set('ori-visibility', child.get('ori-visibility') || child.get('visible'));
|
||||
child.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定浏览器右键监听，触发拖拽结束，结束拖拽时移除
|
||||
if (typeof window !== 'undefined') {
|
||||
const self = this;
|
||||
this.handleDOMContextMenu = (e) => self.onMouseUp(e);
|
||||
document.body.addEventListener('contextmenu', this.handleDOMContextMenu);
|
||||
}
|
||||
},
|
||||
onTouchMove(e: IG6GraphEvent) {
|
||||
const self = this as any;
|
||||
const touches = (e.originalEvent as TouchEvent).touches;
|
||||
const event1 = touches[0];
|
||||
const event2 = touches[1];
|
||||
|
||||
// 如果是双指操作，不允许拖拽画布，结束拖拽
|
||||
if (event1 && event2) {
|
||||
this.onMouseUp(e);
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
self.onDrag(e);
|
||||
},
|
||||
onDrag(e: IG6GraphEvent) {
|
||||
if (!this.mousedown) return;
|
||||
const { graph } = this;
|
||||
if (this.keydown) return;
|
||||
if (!this.allowDrag(e)) 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(e, this)) {
|
||||
e.type = 'dragstart';
|
||||
graph.emit('canvas:dragstart', e);
|
||||
this.originPosition = { x: e.clientX, y: e.clientY };
|
||||
this.dragging = true;
|
||||
}
|
||||
} else {
|
||||
e.type = 'drag';
|
||||
graph.emit('canvas:drag', e);
|
||||
}
|
||||
|
||||
if (this.shouldUpdate(e, this)) {
|
||||
this.updateViewport(e);
|
||||
}
|
||||
},
|
||||
onMouseUp(e: IG6GraphEvent) {
|
||||
this.mousedown = false;
|
||||
this.dragstart = false;
|
||||
const { graph } = this;
|
||||
|
||||
if (this.keydown) return;
|
||||
|
||||
const currentZoom = graph.getZoom();
|
||||
const modeController = graph.get('modeController');
|
||||
const zoomCanvas = modeController?.modes[modeController.mode]?.filter(behavior => behavior.type === 'zoom-canvas')?.[0];
|
||||
const optimizeZoom = zoomCanvas ? zoomCanvas.optimizeZoom || 0.1 : 0;
|
||||
|
||||
if (this.enableOptimize) {
|
||||
// 拖动结束后显示所有的边
|
||||
const edges = graph.getEdges();
|
||||
for (let i = 0, len = edges.length; i < len; i++) {
|
||||
const shapes = edges[i].get('group').get('children');
|
||||
if (!shapes) continue;
|
||||
shapes.forEach((shape) => {
|
||||
const oriVis = shape.get('ori-visibility');
|
||||
shape.set('ori-visibility', undefined);
|
||||
if (oriVis) shape.show();
|
||||
});
|
||||
}
|
||||
if (currentZoom > optimizeZoom) {
|
||||
const nodes = graph.getNodes();
|
||||
for (let j = 0, nodeLen = nodes.length; j < nodeLen; j++) {
|
||||
const container = nodes[j].getContainer();
|
||||
const children = container.get('children');
|
||||
for (const child of children) {
|
||||
const isKeyShape = child.get('isKeyShape');
|
||||
if (!isKeyShape) {
|
||||
const oriVis = child.get('ori-visibility');
|
||||
child.set('ori-visibility', undefined);
|
||||
if (oriVis) child.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.dragging) {
|
||||
this.origin = null;
|
||||
return;
|
||||
}
|
||||
|
||||
e = cloneEvent(e);
|
||||
|
||||
if (this.shouldEnd(e, this)) {
|
||||
this.updateViewport(e);
|
||||
}
|
||||
e.type = 'dragend';
|
||||
e.dx = e.clientX - this.originPosition.x;
|
||||
e.dy = e.clientY - this.originPosition.y;
|
||||
|
||||
graph.emit('canvas:dragend', e);
|
||||
this.endDrag();
|
||||
|
||||
// 结束拖拽时移除浏览器右键监听
|
||||
if (typeof window !== 'undefined') {
|
||||
document.body.removeEventListener('contextmenu', this.handleDOMContextMenu);
|
||||
}
|
||||
},
|
||||
endDrag() {
|
||||
this.origin = null;
|
||||
this.dragging = false;
|
||||
this.dragbegin = false;
|
||||
this.mousedown = false;
|
||||
this.dragstart = false;
|
||||
},
|
||||
onKeyDown(e: KeyboardEvent) {
|
||||
const self = this as any;
|
||||
const code = e.key;
|
||||
if (!code) {
|
||||
return;
|
||||
}
|
||||
if (ALLOW_EVENTS.indexOf(code.toLowerCase()) > -1) {
|
||||
self.keydown = true;
|
||||
} else {
|
||||
self.keydown = false;
|
||||
}
|
||||
},
|
||||
onKeyUp() {
|
||||
(this as any).keydown = false;
|
||||
this.origin = null;
|
||||
this.dragging = false;
|
||||
this.dragbegin = false;
|
||||
},
|
||||
allowDrag(evt: IG6GraphEvent) {
|
||||
const target = evt.target;
|
||||
const targetIsCanvas = target && target.isCanvas && target.isCanvas();
|
||||
if (isBoolean(this.allowDragOnItem) && !this.allowDragOnItem && !targetIsCanvas) return false;
|
||||
if (isObject(this.allowDragOnItem)) {
|
||||
const { node, edge, combo } = this.allowDragOnItem;
|
||||
const itemType = evt.item?.getType?.();
|
||||
if (!node && itemType === 'node') return false;
|
||||
if (!edge && itemType === 'edge') return false;
|
||||
if (!combo && itemType === 'combo') return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
@ -102,9 +102,6 @@ export class DragCanvas extends Behavior {
|
||||
pointerup: this.onPointerUp,
|
||||
keydown: this.onKeydown,
|
||||
keyup: this.onKeyup,
|
||||
wheel(ev) {
|
||||
console.log(ev)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
import { G6Event, IG6GraphEvent } from '@antv/g6-core';
|
||||
import { isBoolean, isObject } from '@antv/util';
|
||||
|
||||
const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control', 'meta'];
|
||||
|
||||
export default {
|
||||
getDefaultCfg(): object {
|
||||
return {
|
||||
direction: 'both',
|
||||
enableOptimize: false,
|
||||
zoomKey: 'ctrl',
|
||||
// scroll-canvas 可滚动的扩展范围，默认为 0，即最多可以滚动一屏的位置
|
||||
// 当设置的值大于 0 时，即滚动可以超过一屏
|
||||
// 当设置的值小于 0 时，相当于缩小了可滚动范围
|
||||
// 具体实例可参考：https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ
|
||||
scalableRange: 0,
|
||||
allowDragOnItem: true
|
||||
};
|
||||
},
|
||||
|
||||
getEvents(): { [key in G6Event]?: string } {
|
||||
if (!this.zoomKey || ALLOW_EVENTS.indexOf(this.zoomKey) === -1) this.zoomKey = 'ctrl';
|
||||
return {
|
||||
wheel: 'onWheel',
|
||||
};
|
||||
},
|
||||
|
||||
onWheel(ev: IG6GraphEvent) {
|
||||
if (!this.allowDrag(ev)) return;
|
||||
const graph = this.graph;
|
||||
const zoomKeys = Array.isArray(this.zoomKey) ? [].concat(this.zoomKey) : [this.zoomKey];
|
||||
if (zoomKeys.includes('control')) zoomKeys.push('ctrl');
|
||||
let keyDown = zoomKeys.some(ele => ev[`${ele}Key`]);
|
||||
if (keyDown) {
|
||||
const canvas = graph.get('canvas');
|
||||
const point = canvas.getPointByClient(ev.clientX, ev.clientY);
|
||||
let ratio = graph.getZoom();
|
||||
if (ev.wheelDelta > 0) {
|
||||
ratio = ratio + ratio * 0.05;
|
||||
} else {
|
||||
ratio = ratio - ratio * 0.05;
|
||||
}
|
||||
graph.zoomTo(ratio, {
|
||||
x: point.x,
|
||||
y: point.y,
|
||||
});
|
||||
} else {
|
||||
let dx = (ev.deltaX || ev.movementX) as number;
|
||||
let dy = (ev.deltaY || ev.movementY) as number;
|
||||
if (!dy && navigator.userAgent.indexOf('Firefox') > -1) dy = (-ev.wheelDelta * 125) / 3
|
||||
|
||||
const width = this.graph.get('width');
|
||||
const height = this.graph.get('height');
|
||||
const graphCanvasBBox = this.graph.get('canvas').getCanvasBBox();
|
||||
|
||||
let expandWidth = this.scalableRange as number;
|
||||
let expandHeight = this.scalableRange as number;
|
||||
// 若 scalableRange 是 0~1 的小数，则作为比例考虑
|
||||
if (expandWidth < 1 && expandWidth > -1) {
|
||||
expandWidth = width * expandWidth;
|
||||
expandHeight = height * expandHeight;
|
||||
}
|
||||
const { minX, maxX, minY, maxY } = graphCanvasBBox;
|
||||
|
||||
|
||||
if (dx > 0) {
|
||||
if (maxX < -expandWidth) {
|
||||
dx = 0
|
||||
} else if (maxX - dx < -expandWidth) {
|
||||
dx = maxX + expandWidth
|
||||
}
|
||||
} else if (dx < 0) {
|
||||
if (minX > width + expandWidth) {
|
||||
dx = 0
|
||||
} else if (minX - dx > width + expandWidth) {
|
||||
dx = minX - (width + expandWidth)
|
||||
}
|
||||
}
|
||||
|
||||
if (dy > 0) {
|
||||
if (maxY < -expandHeight) {
|
||||
dy = 0
|
||||
} else if (maxY - dy < -expandHeight) {
|
||||
dy = maxY + expandHeight
|
||||
}
|
||||
} else if (dy < 0) {
|
||||
if (minY > height + expandHeight) {
|
||||
dy = 0
|
||||
} else if (minY - dy > height + expandHeight) {
|
||||
dy = minY - (height + expandHeight)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.get('direction') === 'x') {
|
||||
dy = 0;
|
||||
} else if (this.get('direction') === 'y') {
|
||||
dx = 0;
|
||||
}
|
||||
|
||||
graph.translate(-dx, -dy);
|
||||
}
|
||||
ev.preventDefault();
|
||||
|
||||
|
||||
// hide the shapes when the zoom ratio is smaller than optimizeZoom
|
||||
// hide the shapes when zoomming
|
||||
const enableOptimize = this.get('enableOptimize');
|
||||
if (enableOptimize) {
|
||||
const optimizeZoom = this.get('optimizeZoom');
|
||||
const optimized = this.get('optimized');
|
||||
const nodes = graph.getNodes();
|
||||
const edges = graph.getEdges();
|
||||
const nodesLength = nodes.length;
|
||||
const edgesLength = edges.length;
|
||||
|
||||
// hiding
|
||||
if (!optimized) {
|
||||
for (let n = 0; n < nodesLength; n++) {
|
||||
const node = nodes[n];
|
||||
if (!node.destroyed) {
|
||||
const children = node.get('group').get('children');
|
||||
const childrenLength = children.length;
|
||||
for (let c = 0; c < childrenLength; c++) {
|
||||
const shape = children[c];
|
||||
if (!shape.destoryed && !shape.get('isKeyShape')) {
|
||||
shape.set('ori-visibility', shape.get('ori-visibility') || shape.get('visible'));
|
||||
shape.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let edgeIndex = 0; edgeIndex < edgesLength; edgeIndex++) {
|
||||
const edge = edges[edgeIndex];
|
||||
const children = edge.get('group').get('children');
|
||||
const childrenLength = children.length;
|
||||
for (let c = 0; c < childrenLength; c++) {
|
||||
const shape = children[c];
|
||||
shape.set('ori-visibility', shape.get('ori-visibility') || shape.get('visible'));
|
||||
shape.hide();
|
||||
}
|
||||
}
|
||||
this.set('optimized', true);
|
||||
}
|
||||
|
||||
// showing after 100ms
|
||||
clearTimeout(this.get('timeout'));
|
||||
const timeout = setTimeout(() => {
|
||||
const currentZoom = graph.getZoom();
|
||||
const curOptimized = this.get('optimized');
|
||||
if (curOptimized) {
|
||||
this.set('optimized', false);
|
||||
for (let n = 0; n < nodesLength; n++) {
|
||||
const node = nodes[n];
|
||||
const children = node.get('group').get('children');
|
||||
const childrenLength = children.length;
|
||||
if (currentZoom < optimizeZoom) {
|
||||
const keyShape = node.getKeyShape();
|
||||
const oriVis = keyShape.get('ori-visibility');
|
||||
if (oriVis) keyShape.show();
|
||||
} else {
|
||||
for (let c = 0; c < childrenLength; c++) {
|
||||
const shape = children[c];
|
||||
const oriVis = shape.get('ori-visibility');
|
||||
if (!shape.get('visible') && oriVis) {
|
||||
if (oriVis) shape.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let edgeIndex = 0; edgeIndex < edgesLength; edgeIndex++) {
|
||||
const edge = edges[edgeIndex];
|
||||
const children = edge.get('group').get('children');
|
||||
const childrenLength = children.length;
|
||||
if (currentZoom < optimizeZoom) {
|
||||
const keyShape = edge.getKeyShape();
|
||||
const oriVis = keyShape.get('ori-visibility');
|
||||
if (oriVis) keyShape.show();
|
||||
} else {
|
||||
for (let c = 0; c < childrenLength; c++) {
|
||||
const shape = children[c];
|
||||
if (!shape.get('visible')) {
|
||||
const oriVis = shape.get('ori-visibility');
|
||||
if (oriVis) shape.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
this.set('timeout', timeout);
|
||||
}
|
||||
},
|
||||
allowDrag(evt: IG6GraphEvent) {
|
||||
const target = evt.target;
|
||||
const targetIsCanvas = target && target.isCanvas && target.isCanvas();
|
||||
if (isBoolean(this.allowDragOnItem) && !this.allowDragOnItem && !targetIsCanvas) return false;
|
||||
if (isObject(this.allowDragOnItem)) {
|
||||
const { node, edge, combo } = this.allowDragOnItem;
|
||||
const itemType = evt.item?.getType?.();
|
||||
if (!node && itemType === 'node') return false;
|
||||
if (!edge && itemType === 'edge') return false;
|
||||
if (!combo && itemType === 'combo') return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user