test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Merge pull request #605 from antvis/daily_19-10-11

Browse Source 
Daily 19 10 11
This commit is contained in:
xiaoqing.dongxq 2019-01-14 11:40:31 +08:00
commit 448fd79569
8 changed files with 94 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/g6",
"version": "3.0.0-beta.6",
"version": "3.0.0-beta.8",
"description": "graph visualization frame work",
"main": "build/g6.js",
"homepage": "https://github.com/antvis/g6",
@ -111,7 +111,7 @@
"silent": false
},
"dependencies": {
"@antv/g": "~3.4.0-beta.3",
"@antv/g": "~3.4.0-beta.4",
"@antv/util": "~1.3.1"
},
"engines": {

6
src/behavior/click-select.js
View File

@ -16,7 +16,7 @@ module.exports = {
},
onClick(e) {
const self = this;
const item = e.target;
const item = e.item;
const graph = self.graph;
const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);
@ -29,15 +29,15 @@ module.exports = {
});
}
if (item.hasState('selected')) {
e.type = 'deselect';
if (self.shouldUpdate.call(self, e)) {
graph.setItemState(item, 'selected', false);
}
graph.emit('nodeselectchange', { target: item, select: false });
} else {
e.type = 'select';
if (self.shouldUpdate.call(self, e)) {
graph.setItemState(item, 'selected', true);
}
graph.emit('nodeselectchange', { target: item, select: true });
}
graph.setAutoPaint(autoPaint);
graph.paint();

4
src/behavior/drag-node.js
View File

@ -20,7 +20,7 @@ module.exports = {
if (!this.shouldBegin.call(this, e)) {
return;
}
this.target = e.target;
this.target = e.item;
this.origin = {
x: e.clientX,
y: e.clientY
@ -42,7 +42,7 @@ module.exports = {
if (!this.origin) {
return;
}
const delegateShape = e.target.get('delegateShape');
const delegateShape = e.item.get('delegateShape');
if (delegateShape) {
delegateShape.remove();
this.target.set('delegateShape', null);

2
src/global.js
View File

@ -4,7 +4,7 @@
*/
module.exports = {
version: '3.0.0-beta.6',
version: '3.0.0-beta.8',
nodeSize: 40,
rootContainerClassName: 'root-container',
nodeContainerClassName: 'node-container',

51
src/graph/controller/event.js
View File

@ -1,4 +1,5 @@
const Util = require('../../util');
const EventObject = require('@antv/g').Event;
const EVENTS = [
'click',
@ -31,6 +32,10 @@ function getItemRoot(shape) {
return shape;
}
function cloneEvent(e) {
return new EventObject(e.type, e, true, true);
}
class Event {
constructor(graph) {
this.graph = graph;
@ -61,36 +66,42 @@ class Event {
const graph = self.graph;
const canvas = graph.get('canvas');
const target = e.target;
const eventType = e.type;
// 事件currentTarget是graph
e.currentTarget = graph;
if (target === canvas) {
if (e.type === 'mousemove') {
if (eventType === 'mousemove') {
self._handleMouseMove(e, 'canvas');
}
graph.emit(e.type, e);
graph.emit('canvas:' + e.type, e);
e.target = canvas;
e.item = null;
graph.emit(eventType, e);
graph.emit('canvas:' + eventType, e);
return;
}
// g的事件会冒泡，如果target不是canvas，可能会引起同个节点触发多次，需要另外判断
if (e.type === 'mouseenter' || e.type === 'mouseleave' || e.type === 'dragenter' || e.type === 'dragleave') {
return;
}
e.targetElement = target;
const itemShape = getItemRoot(target);
if (!itemShape || itemShape === canvas) {
if (!itemShape) {
graph.emit(eventType, e);
return;
}
const item = itemShape.get('item');
const type = item.getType();
e.target = item;
graph.emit(e.type, e);
graph.emit(type + ':' + e.type, e);
if (e.type === 'dragstart') {
// 事件target是触发事件的Shape实例，, item是触发事件的item实例
e.target = target;
e.item = item;
graph.emit(eventType, e);
graph.emit(type + ':' + eventType, e);
// g的事件会冒泡，如果target不是canvas，可能会引起同个节点触发多次，需要另外判断
if (eventType === 'mouseenter' || eventType === 'mouseleave' || eventType === 'dragenter' || eventType === 'dragleave') {
return;
}
if (eventType === 'dragstart') {
self.dragging = true;
}
if (e.type === 'dragend') {
if (eventType === 'dragend') {
self.dragging = false;
}
if (e.type === 'mousemove') {
if (eventType === 'mousemove') {
self._handleMouseMove(e, type);
}
}
@ -100,11 +111,13 @@ class Event {
_handleMouseMove(e, type) {
const self = this;
const canvas = this.graph.get('canvas');
const item = e.target === canvas ? null : e.target;
const item = e.target === canvas ? null : e.item;
const preItem = this.preItem;
// 避免e的type与触发的事件不同
e = cloneEvent(e);
// 从前一个item直接移动到当前item，触发前一个item的leave事件
if (preItem && preItem !== item) {
e.target = preItem;
e.item = preItem;
if (self.dragging) {
self._emitCustomEvent(preItem.getType(), 'dragleave', e);
} else {
@ -113,7 +126,7 @@ class Event {
}
// 从一个item或canvas移动到当前item，触发当前item的enter事件
if (item && preItem !== item) {
e.target = item;
e.item = item;
if (self.dragging) {
self._emitCustomEvent(type, 'dragenter', e);
} else {

35
test/unit/behavior/drag-node-spec.js
View File

@ -21,8 +21,8 @@ describe('drag-node', () => {
});
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, target: node });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: node });
const matrix = node.get('group').getMatrix();
expect(matrix[0]).to.equal(1);
expect(matrix[6]).to.equal(70);
@ -54,8 +54,8 @@ describe('drag-node', () => {
expect(path[0][2]).to.equal(57.77817459305202);
expect(path[1][1]).to.equal(289);
expect(path[1][2]).to.equal(289);
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: src });
graph.emit('node:drag', { clientX: 120, clientY: 120, target: src });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: src });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: src });
path = edge.get('group').get('children')[0].attr('path');
expect(path[0][1]).to.equal(57.77817459305202);
expect(path[0][2]).to.equal(57.77817459305202);
@ -63,7 +63,7 @@ describe('drag-node', () => {
expect(path[1][2]).to.equal(289);
const delegateShape = src.get('delegateShape');
expect(delegateShape).not.to.be.undefined;
graph.emit('node:dragend', { clientX: 140, clientY: 140, target: src });
graph.emit('node:dragend', { clientX: 140, clientY: 140, item: src });
path = edge.get('group').get('children')[0].attr('path');
expect(path[0][1]).to.equal(97.77817459305203);
expect(path[0][2]).to.equal(97.77817459305203);
@ -83,13 +83,20 @@ describe('drag-node', () => {
},
pixelRatio: 2
});
let clicked = false;
graph.on('node:click', () => {
clicked = true;
});
const node = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, style: { lineWidth: 2, fill: '#666' } });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, target: node });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: node });
const delegateShape = node.get('delegateShape');
const bbox = delegateShape.getBBox();
expect(bbox.width).to.equal(43);
expect(bbox.height).to.equal(43);
graph.emit('node:dragend', { clientX: 120, clientY: 120, item: node });
expect(clicked).to.be.false;
expect(node.get('delegateShape')).to.be.null;
});
it('drag node & edge & label', () => {
const graph = new G6.Graph({
@ -117,9 +124,9 @@ describe('drag-node', () => {
expect(matrix[1]).to.equal(0.7071067811865475);
expect(matrix[3]).to.equal(-0.7071067811865475);
expect(matrix[4]).to.equal(0.7071067811865476);
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target });
graph.emit('node:drag', { clientX: 120, clientY: 120, target });
graph.emit('node:dragend', { clientX: 80, clientY: 120, target });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: target });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: target });
graph.emit('node:dragend', { clientX: 80, clientY: 120, item: target });
matrix = label.getMatrix();
expect(matrix[0]).to.equal(0.6484664555997872);
expect(matrix[1]).to.equal(0.7612432304867146);
@ -142,8 +149,8 @@ describe('drag-node', () => {
});
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, target: node });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: node });
const matrix = node.get('group').getMatrix();
expect(matrix[0]).to.equal(1);
expect(matrix[6]).to.equal(50);
@ -161,8 +168,8 @@ describe('drag-node', () => {
});
graph.removeBehaviors('drag-node', 'default');
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, target: node });
graph.emit('node:dragstart', { clientX: 100, clientY: 100, item: node });
graph.emit('node:drag', { clientX: 120, clientY: 120, item: node });
const matrix = node.get('group').getMatrix();
expect(matrix[0]).to.equal(1);
expect(matrix[6]).to.equal(50);

16
test/unit/behavior/select-spec.js
View File

@ -18,10 +18,10 @@ describe('select-node', () => {
});
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, size: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:click', { target: node });
graph.emit('node:click', { item: node });
expect(node.getStates().length).to.equal(1);
expect(node.hasState('selected')).to.be.true;
graph.emit('node:click', { target: node });
graph.emit('node:click', { item: node });
expect(node.getStates().length).to.equal(0);
graph.destroy();
});
@ -38,17 +38,17 @@ describe('select-node', () => {
const node1 = graph.addItem('node', { color: '#666', x: 50, y: 50, size: 20, style: { lineWidth: 2, fill: '#666' } });
const node2 = graph.addItem('node', { color: '#666', x: 150, y: 150, size: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:click', { target: node1 });
graph.emit('node:click', { item: node1 });
expect(node1.getStates().length).to.equal(1);
expect(node1.getStates()[0]).to.equal('selected');
graph.emit('keydown', { keyCode: 16 });
graph.emit('node:click', { target: node1 });
graph.emit('node:click', { item: node1 });
expect(node1.getStates().length).to.equal(0);
graph.emit('node:click', { target: node2 });
graph.emit('node:click', { item: node2 });
expect(node2.getStates().length).to.equal(1);
expect(node2.getStates()[0]).to.equal('selected');
graph.emit('keyup', { keyCode: 16 });
graph.emit('node:click', { target: node1 });
graph.emit('node:click', { item: node1 });
expect(node1.getStates().length).to.equal(1);
expect(node1.getStates()[0]).to.equal('selected');
expect(node2.getStates().length).to.equal(0);
@ -69,7 +69,7 @@ describe('select-node', () => {
});
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, size: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:click', { target: node });
graph.emit('node:click', { item: node });
expect(node.hasState('selected')).to.be.false;
graph.destroy();
});
@ -87,7 +87,7 @@ describe('select-node', () => {
});
const node = graph.addItem('node', { color: '#666', x: 50, y: 50, size: 20, style: { lineWidth: 2, fill: '#666' } });
graph.paint();
graph.emit('node:click', { target: node });
graph.emit('node:click', { item: node });
expect(node.hasState('selected')).to.be.true;
graph.emit('canvas:click');
expect(node.hasState('selected')).to.be.false;

28
test/unit/graph/controller/event-spec.js
View File

@ -51,7 +51,7 @@ describe('event', () => {
const canvas = graph.get('canvas');
const node = graph.addItem('node', { type: 'circle', color: '#ccc', style: { x: 50, y: 50, r: 20, lineWidth: 2 } });
const shape = node.get('group').get('children')[0];
graph.on('node:mousedown', e => { target = e.target; });
graph.on('node:mousedown', e => { target = e.item; });
canvas.emit('mousedown', { type: 'mousedown', target: shape });
expect(target === node).to.be.true;
target = null;
@ -88,11 +88,11 @@ describe('event', () => {
let leave = 0;
graph.on('node:mouseenter', e => {
enter++;
expect(e.target === node);
expect(e.item === node);
});
graph.on('node:mouseleave', e => {
leave++;
expect(e.target === node);
expect(e.item === node);
});
const canvas = graph.get('canvas');
const label = node.get('group').get('children')[0];
@ -114,4 +114,26 @@ describe('event', () => {
canvas.emit('mousemove', { type: 'mousemove', taregt: canvas });
expect(leave).to.equal(1);
});
it('event object overlap', () => {
let count = 0;
let triggered = false;
graph.removeEvent();
graph.clear();
const canvas = graph.get('canvas');
const node = graph.addItem('node', { x: 100, y: 100, size: 50, label: 'test' });
graph.on('node:mouseleave', e => {
triggered = true;
expect(e.type).to.equal('mouseleave');
});
graph.on('mousemove', e => {
count += 1;
expect(e.type).to.equal('mousemove');
});
canvas.emit('mousemove', { type: 'mousemove', target: node.get('keyShape') });
expect(count).to.equal(1);
expect(triggered).to.be.false;
canvas.emit('mousemove', { type: 'mousemove', target: canvas });
expect(count).to.equal(2);
expect(triggered).to.be.true;
});
});