mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 02:38:20 +08:00
feat: add state & behavior unit test
This commit is contained in:
baizn
Moyee
parent
362f2e4086
commit
96b0f456c7
@ -45,7 +45,7 @@
|
||||
"lint:src": "eslint --ext .ts --format=pretty \"./src\"",
|
||||
"prettier": "prettier -c --write \"**/*\"",
|
||||
"test": "jest",
|
||||
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/graph/controller/item-spec.ts",
|
||||
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/state/refactor-state-spec.ts",
|
||||
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"
|
||||
},
|
||||
"husky": {
|
||||
|
||||
@ -1,495 +0,0 @@
|
||||
import '../../../src/behavior';
|
||||
import '../../../src/shape';
|
||||
import Graph from '../../../src/graph/graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'pan-spec';
|
||||
document.body.appendChild(div);
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: 'node1',
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
id: 'node2',
|
||||
x: 200,
|
||||
y: 50,
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
source: 'node1',
|
||||
target: 'node2',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
describe('drag-canvas', () => {
|
||||
it('drag canvas', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: ['drag-canvas'],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
let start = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
start = true;
|
||||
});
|
||||
graph.on('canvas:dragend', () => {
|
||||
start = false;
|
||||
});
|
||||
graph.paint();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 200, clientY: 200, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
const matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(100);
|
||||
expect(matrix[7]).toEqual(100);
|
||||
graph.emit('dragend', {});
|
||||
expect(start).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
it('prevent default drag behavior', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
shouldUpdate: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
let start = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
start = true;
|
||||
});
|
||||
graph.on('canvas:dragend', () => {
|
||||
start = false;
|
||||
});
|
||||
graph.paint();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 200, clientY: 200, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
const matrix = graph.get('group').getMatrix();
|
||||
expect(matrix).toEqual(null);
|
||||
graph.emit('canvas:dragend', {});
|
||||
expect(start).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
it('unbind event', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
custom: [],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
let triggered = false;
|
||||
graph.setMode('custom');
|
||||
graph.on('canvas:dragstart', () => {
|
||||
triggered = true;
|
||||
});
|
||||
graph.on('canvas:dragend', () => {
|
||||
triggered = true;
|
||||
});
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 200, clientY: 200, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
graph.emit('dragend', { clientX: 250, clientY: 250 });
|
||||
expect(triggered).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
it('drag with x direction restrict', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
direction: 'x',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
let start = false;
|
||||
graph.addItem('node', { x: 100, y: 100, color: '#666', type: 'rect', id: 'test' });
|
||||
graph.on('canvas:dragstart', () => {
|
||||
start = true;
|
||||
});
|
||||
graph.on('canvas:dragend', () => {
|
||||
start = false;
|
||||
});
|
||||
graph.paint();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 200, clientY: 200, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
const matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(100);
|
||||
expect(matrix[7]).toEqual(0);
|
||||
graph.emit('dragend', { clientX: 200, clientY: 200 });
|
||||
expect(start).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
it('drag with y direction restrict', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
direction: 'y',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
let start = false;
|
||||
graph.addItem('node', { x: 100, y: 100, color: '#666', type: 'rect', id: 'test' });
|
||||
graph.paint();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
const matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(0);
|
||||
expect(matrix[7]).toEqual(100);
|
||||
graph.emit('dragend', { clientX: 250, clientY: 250 });
|
||||
graph.destroy();
|
||||
});
|
||||
it('drag offset', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
let triggered = false;
|
||||
let dragging = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
triggered = true;
|
||||
});
|
||||
graph.on('canvas:drag', () => {
|
||||
dragging = true;
|
||||
});
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
expect(dragging).toBe(false);
|
||||
graph.emit('drag', { clientX: 160, clientY: 160, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(true);
|
||||
graph.emit('drag', { clientX: 170, clientY: 180, target: graph.get('canvas') });
|
||||
expect(dragging).toBe(true);
|
||||
dragging = false;
|
||||
graph.emit('canvas:click', { clientX: 170, clientY: 170, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 170, clientY: 170, target: graph.get('canvas') });
|
||||
expect(dragging).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
it('drag with keydown', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
let triggered = false;
|
||||
let dragging = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
triggered = true;
|
||||
});
|
||||
graph.on('canvas:drag', () => {
|
||||
dragging = true;
|
||||
});
|
||||
|
||||
// mouse down and up without moving
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('dragend', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
expect(dragging).toBe(false);
|
||||
|
||||
graph.emit('keydown', { key: 'shift' });
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
expect(dragging).toBe(false);
|
||||
graph.emit('drag', { clientX: 160, clientY: 160, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
graph.emit('dragend', { clientX: 160, clientY: 160 });
|
||||
expect(triggered).toBe(false);
|
||||
|
||||
graph.emit('keyup', { key: 'shift' });
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(false);
|
||||
expect(dragging).toBe(false);
|
||||
graph.emit('drag', { clientX: 160, clientY: 160, target: graph.get('canvas') });
|
||||
expect(triggered).toBe(true);
|
||||
graph.destroy();
|
||||
});
|
||||
it('drag with keydown code invalid', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
let triggered = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
triggered = true;
|
||||
});
|
||||
graph.emit('keydown', {}); // key undefined
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('dragend', { clientX: 160, clientY: 160 });
|
||||
expect(triggered).toBe(false);
|
||||
graph.emit('keyup', {});
|
||||
|
||||
graph.emit('keydown', { key: 'abc' }); // key invalid
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('dragend', { clientX: 160, clientY: 160 });
|
||||
expect(triggered).toBe(false);
|
||||
graph.emit('keyup', {});
|
||||
graph.destroy();
|
||||
});
|
||||
|
||||
it('drag out of canvas', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 550, clientY: 550, target: graph.get('canvas') });
|
||||
graph.emit('canvas:mouseleave', { target: graph.get('canvas').get('el') });
|
||||
|
||||
// dragend out of the canvas
|
||||
const event = document.createEvent('MouseEvents');
|
||||
event.initMouseEvent(
|
||||
'dragend',
|
||||
true,
|
||||
true,
|
||||
document.defaultView,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
550,
|
||||
550, // clientX = 550, clientY = 550
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
0,
|
||||
null,
|
||||
);
|
||||
document.body.dispatchEvent(event);
|
||||
const movedMatrix = graph.get('canvas').get('children')[0].getMatrix();
|
||||
expect(movedMatrix[6]).toEqual(400);
|
||||
expect(movedMatrix[7]).toEqual(400);
|
||||
});
|
||||
|
||||
it('drag out of canvas, but it is not dragging', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 350, clientY: 350, target: graph.get('canvas') });
|
||||
graph.emit('dragend', { clientX: 350, clientY: 350 });
|
||||
graph.emit('canvas:mouseleave', { target: graph.get('canvas').get('el') });
|
||||
|
||||
// dragend out of the canvas
|
||||
const event = document.createEvent('MouseEvents');
|
||||
event.initMouseEvent(
|
||||
'dragend',
|
||||
true,
|
||||
true,
|
||||
document.defaultView,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
550,
|
||||
550, // clientX = 550, clientY = 550
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
0,
|
||||
null,
|
||||
);
|
||||
document.body.dispatchEvent(event);
|
||||
const movedMatrix = graph.get('canvas').get('children')[0].getMatrix();
|
||||
expect(movedMatrix[6]).toEqual(200);
|
||||
expect(movedMatrix[7]).toEqual(200);
|
||||
});
|
||||
|
||||
it('enable optimize to hide the shapes while dragging', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 350, clientY: 350, target: graph.get('canvas') });
|
||||
|
||||
let nodes = graph.getNodes();
|
||||
nodes.forEach((node) => {
|
||||
const children = node.getContainer().get('children');
|
||||
children.forEach((child) => {
|
||||
if (!child.get('isKeyShape')) expect(child.get('visible')).toEqual(false);
|
||||
else expect(child.get('visible')).toEqual(true);
|
||||
});
|
||||
});
|
||||
let edges = graph.getEdges();
|
||||
edges.forEach((edge) => {
|
||||
const children = edge.getContainer().get('children');
|
||||
children.forEach((child) => {
|
||||
expect(child.get('visible')).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
graph.emit('dragend', { clientX: 350, clientY: 350 });
|
||||
|
||||
nodes = graph.getNodes();
|
||||
nodes.forEach((node) => {
|
||||
const children = node.getContainer().get('children');
|
||||
children.forEach((child) => {
|
||||
if (!child.get('isKeyShape')) expect(child.get('visible')).toEqual(true);
|
||||
else expect(child.get('visible')).toEqual(true);
|
||||
});
|
||||
});
|
||||
edges = graph.getEdges();
|
||||
edges.forEach((edge) => {
|
||||
const children = edge.getContainer().get('children');
|
||||
children.forEach((child) => {
|
||||
expect(child.get('visible')).toEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('drag canvas with scalableRange', () => {
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
scalableRange: -150,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
let start = false;
|
||||
graph.on('canvas:dragstart', () => {
|
||||
start = true;
|
||||
});
|
||||
graph.on('canvas:dragend', () => {
|
||||
start = false;
|
||||
});
|
||||
graph.paint();
|
||||
graph.emit('dragstart', { clientX: 150, clientY: 150, target: graph.get('canvas') });
|
||||
graph.emit('drag', { clientX: 200, clientY: 200, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
graph.emit('drag', { clientX: 250, clientY: 250, target: graph.get('canvas') });
|
||||
expect(start).toBe(true);
|
||||
let matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(100);
|
||||
expect(matrix[7]).toEqual(100);
|
||||
|
||||
graph.emit('drag', { clientX: 400, clientY: 350, target: graph.get('canvas') });
|
||||
matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(250);
|
||||
expect(matrix[7]).toEqual(200);
|
||||
expect(start).toBe(true);
|
||||
|
||||
// 超过了设置的范围，则不再移动
|
||||
graph.emit('drag', { clientX: 550, clientY: 550, target: graph.get('canvas') });
|
||||
matrix = graph.get('group').getMatrix();
|
||||
expect(matrix[6]).toEqual(250);
|
||||
expect(matrix[7]).toEqual(200);
|
||||
expect(start).toBe(true);
|
||||
|
||||
graph.emit('dragend', {});
|
||||
expect(start).toBe(false);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
@ -1,6 +1,4 @@
|
||||
import '../../../src/behavior';
|
||||
import Behavior from '../../../src/behavior/behavior';
|
||||
import { IBehavior } from '../../../src/interface/behavior';
|
||||
|
||||
describe('Behavior', () => {
|
||||
it('register single behavior', () => {
|
||||
@ -93,16 +91,8 @@ describe('Behavior', () => {
|
||||
});
|
||||
});
|
||||
describe('Default Behavior', () => {
|
||||
it('drag-canvas', () => {
|
||||
it('not default behavior', () => {
|
||||
const DragCanvas = Behavior.getBehavior('drag-canvas');
|
||||
expect(DragCanvas).not.toBe(undefined);
|
||||
|
||||
const dragCanvas: IBehavior = new DragCanvas();
|
||||
const config = dragCanvas.getDefaultCfg();
|
||||
expect(config).toEqual({ direction: 'both', enableOptimize: false, scalableRange: 0 });
|
||||
|
||||
const events = dragCanvas.getEvents();
|
||||
const keys = Object.keys(events);
|
||||
expect(keys.length).toBe(10);
|
||||
expect(DragCanvas).toBe(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,11 +1,135 @@
|
||||
import '../../../src/behavior';
|
||||
import '../../../src/shape';
|
||||
import Graph from '../../../src/graph/graph';
|
||||
import { each } from '@antv/util';
|
||||
import Graph from '../implement-graph';
|
||||
import { registerBehavior, G6Event, IG6GraphEvent } from '../../../src';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'select-spec';
|
||||
document.body.appendChild(div);
|
||||
|
||||
const DEFAULT_TRIGGER = 'shift';
|
||||
const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control'];
|
||||
|
||||
// 自定义选中节点的 Behavior，功能完全同 click-select Behavior
|
||||
registerBehavior('select-node', {
|
||||
getDefaultCfg(): object {
|
||||
return {
|
||||
multiple: true,
|
||||
trigger: DEFAULT_TRIGGER,
|
||||
selectedState: 'selected',
|
||||
};
|
||||
},
|
||||
getEvents(): { [key in G6Event]?: string } {
|
||||
const self = this as any;
|
||||
// 检测输入是否合法
|
||||
if (!(ALLOW_EVENTS.indexOf(self.trigger.toLowerCase()) > -1)) {
|
||||
self.trigger = DEFAULT_TRIGGER;
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
"Behavior brush-select 的 trigger 参数不合法，请输入 'drag'、'shift'、'ctrl' 或 'alt'",
|
||||
);
|
||||
}
|
||||
if (!self.multiple) {
|
||||
return {
|
||||
'node:click': 'onClick',
|
||||
'combo:click': 'onClick',
|
||||
'canvas:click': 'onCanvasClick',
|
||||
};
|
||||
}
|
||||
return {
|
||||
'node:click': 'onClick',
|
||||
'combo:click': 'onClick',
|
||||
'canvas:click': 'onCanvasClick',
|
||||
keyup: 'onKeyUp',
|
||||
keydown: 'onKeyDown',
|
||||
};
|
||||
},
|
||||
onClick(evt: IG6GraphEvent) {
|
||||
const self = this;
|
||||
const { item } = evt;
|
||||
if (!item || item.destroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const type = item.getType();
|
||||
const { graph, keydown, multiple, shouldUpdate, shouldBegin } = self;
|
||||
if (!shouldBegin.call(self, evt)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// allow to select multiple nodes but did not press a key || do not allow the select multiple nodes
|
||||
if (!keydown || !multiple) {
|
||||
const selected = graph.findAllByState(type, self.selectedState);
|
||||
each(selected, combo => {
|
||||
if (combo !== item) {
|
||||
graph.setItemState(combo, self.selectedState, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (item.hasState(self.selectedState)) {
|
||||
if (shouldUpdate.call(self, evt)) {
|
||||
graph.setItemState(item, self.selectedState, false);
|
||||
}
|
||||
const selectedNodes = graph.findAllByState('node', self.selectedState);
|
||||
const selectedCombos = graph.findAllByState('combo', self.selectedState);
|
||||
graph.emit('nodeselectchange', {
|
||||
target: item,
|
||||
selectedItems: {
|
||||
nodes: selectedNodes,
|
||||
combos: selectedCombos,
|
||||
},
|
||||
select: false,
|
||||
});
|
||||
} else {
|
||||
if (shouldUpdate.call(self, evt)) {
|
||||
graph.setItemState(item, self.selectedState, true);
|
||||
}
|
||||
const selectedNodes = graph.findAllByState('node', self.selectedState);
|
||||
const selectedCombos = graph.findAllByState('combo', self.selectedState);
|
||||
graph.emit('nodeselectchange', {
|
||||
target: item,
|
||||
selectedItems: {
|
||||
nodes: selectedNodes,
|
||||
combos: selectedCombos,
|
||||
},
|
||||
select: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
onCanvasClick() {
|
||||
const { graph } = this;
|
||||
const selected = graph.findAllByState('node', this.selectedState);
|
||||
each(selected, node => {
|
||||
graph.setItemState(node, this.selectedState, false);
|
||||
});
|
||||
|
||||
const selectedCombos = graph.findAllByState('combo', this.selectedState);
|
||||
each(selectedCombos, combo => {
|
||||
graph.setItemState(combo, this.selectedState, false);
|
||||
});
|
||||
graph.emit('nodeselectchange', {
|
||||
selectedItems: { nodes: [], edges: [], combos: [] },
|
||||
select: false,
|
||||
});
|
||||
},
|
||||
onKeyDown(e: IG6GraphEvent) {
|
||||
const self = this;
|
||||
const code = e.key;
|
||||
if (!code) {
|
||||
return;
|
||||
}
|
||||
if (code.toLowerCase() === this.trigger.toLowerCase() || code.toLowerCase() === 'control') {
|
||||
self.keydown = true;
|
||||
} else {
|
||||
self.keydown = false;
|
||||
}
|
||||
},
|
||||
onKeyUp() {
|
||||
const self = this;
|
||||
(self as any).keydown = false;
|
||||
},
|
||||
});
|
||||
|
||||
describe('select-node', () => {
|
||||
it('select & deselect single node', () => {
|
||||
const graph = new Graph({
|
||||
@ -13,7 +137,7 @@ describe('select-node', () => {
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: ['click-select'],
|
||||
default: ['select-node'],
|
||||
},
|
||||
nodeStateStyles: {
|
||||
selected: {},
|
||||
@ -28,7 +152,7 @@ describe('select-node', () => {
|
||||
});
|
||||
graph.paint();
|
||||
|
||||
graph.once('nodeselectchange', (e) => {
|
||||
graph.once('nodeselectchange', e => {
|
||||
expect(e.selectedItems.nodes.length).toEqual(1);
|
||||
});
|
||||
|
||||
@ -45,7 +169,7 @@ describe('select-node', () => {
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: ['click-select'],
|
||||
default: ['select-node'],
|
||||
},
|
||||
nodeStateStyles: {
|
||||
selected: {},
|
||||
@ -92,7 +216,7 @@ describe('select-node', () => {
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'click-select',
|
||||
type: 'select-node',
|
||||
shouldUpdate: () => {
|
||||
return false;
|
||||
},
|
||||
@ -120,7 +244,7 @@ describe('select-node', () => {
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'click-select',
|
||||
type: 'select-node',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -150,7 +274,7 @@ describe('select-node', () => {
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'click-select',
|
||||
type: 'select-node',
|
||||
trigger: 'abc',
|
||||
multiple: false,
|
||||
},
|
||||
@ -176,7 +300,7 @@ describe('select-node', () => {
|
||||
modes: {
|
||||
default: [
|
||||
{
|
||||
type: 'click-select',
|
||||
type: 'select-node',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Graph from '../implement-graph';
|
||||
import Graph from '../../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'item-controller';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ModeController } from '../../../../src/graph/controller';
|
||||
import Graph from '../implement-graph';
|
||||
import Graph from '../../implement-graph';
|
||||
import { GraphOptions, ModeOption } from '../../../../src/types';
|
||||
|
||||
const div = document.createElement('div');
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import G6 from '../../../../src';
|
||||
import { timerOut } from '../../util/timeOut';
|
||||
import Graph from '../../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'state-controller';
|
||||
document.body.appendChild(div);
|
||||
|
||||
describe('graph state controller', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -33,7 +32,7 @@ describe('graph state controller', () => {
|
||||
};
|
||||
graph.read(data);
|
||||
|
||||
it('set item state', (done) => {
|
||||
it('set item state', done => {
|
||||
let graphCount = 0;
|
||||
let itemCount = 0;
|
||||
|
||||
@ -54,7 +53,7 @@ describe('graph state controller', () => {
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('state with activate-relations', (done) => {
|
||||
it('state with activate-relations', done => {
|
||||
graph.off();
|
||||
|
||||
graph.addBehaviors('activate-relations', 'default');
|
||||
@ -70,8 +69,8 @@ describe('graph state controller', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
it('updateGraphStates', (done) => {
|
||||
graph.getNodes().forEach((node) => {
|
||||
it('updateGraphStates', done => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.clearItemStates(node);
|
||||
});
|
||||
const node1 = graph.findById('node1');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Canvas from '@antv/g-base/lib/abstract/canvas';
|
||||
import G6 from '../../../../src';
|
||||
import { AbstractCanvas } from '@antv/g-base';
|
||||
import Graph from '../../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'view-spec';
|
||||
@ -10,7 +10,7 @@ function numberEqual(a: number, b: number, gap = 0.001) {
|
||||
}
|
||||
|
||||
describe('view', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -35,15 +35,19 @@ describe('view', () => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
const canvas: Canvas = graph.get('canvas');
|
||||
const canvas: AbstractCanvas = graph.get('canvas');
|
||||
|
||||
let bbox = canvas.getCanvasBBox();
|
||||
|
||||
expect(numberEqual(bbox.x, 10, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.maxX, 490, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.y, 90, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.width, 480, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.height, 321, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.x, 25, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.maxX, 175, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.y, 50, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.width, 151, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.height, 101, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.maxX, 490, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.y, 90, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.width, 480, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.height, 321, 1)).toBe(true);
|
||||
|
||||
data.nodes[0].size = [200, 300];
|
||||
graph.changeData(data);
|
||||
@ -51,11 +55,16 @@ describe('view', () => {
|
||||
|
||||
bbox = graph.get('canvas').getCanvasBBox();
|
||||
|
||||
expect(numberEqual(bbox.x, 90, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.maxX, 410, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.y, 10, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.width, 320, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.height, 480, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.x, 90, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.maxX, 410, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.y, 10, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.width, 320, 1)).toBe(true);
|
||||
// expect(numberEqual(bbox.height, 480, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.x, 0.5, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.maxX, 200, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.y, -50, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.width, 200, 1)).toBe(true);
|
||||
expect(numberEqual(bbox.height, 300, 1)).toBe(true);
|
||||
});
|
||||
it('modify padding', () => {
|
||||
const data = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Graph from './implement-graph';
|
||||
import Graph from '../implement-graph';
|
||||
import { ICombo } from '../../../src/interface/item';
|
||||
import { GraphData } from '../../../src/types';
|
||||
import { clone } from '@antv/util';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Graph from './implement-graph';
|
||||
import Graph from '../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'hull-spec';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import '../../../src/behavior';
|
||||
import { scale, translate } from '../../../src/util/math';
|
||||
import { GraphData, Item } from '../../../src/types';
|
||||
import Graph from './implement-graph';
|
||||
import Graph from '../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'global-spec';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Canvas as GCanvas } from '@antv/g-canvas';
|
||||
import { AbstractGraph } from '../../../src';
|
||||
import { AbstractGraph } from '../../src';
|
||||
|
||||
export default class Graph extends AbstractGraph {
|
||||
constructor(cfg) {
|
||||
@ -1,5 +1,4 @@
|
||||
import G6 from '../../../src';
|
||||
import '../../../src/behavior';
|
||||
import Graph from '../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'global-spec';
|
||||
@ -42,7 +41,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -61,7 +60,7 @@ describe('graph edge states', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
expect(item.hasState('hover')).toEqual(true);
|
||||
@ -70,7 +69,7 @@ describe('graph edge states', () => {
|
||||
expect(keyShape.attr('lineWidth')).toEqual(5);
|
||||
expect(keyShape.attr('stroke')).toEqual('steelblue');
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
expect(item.hasState('hover')).toEqual(false);
|
||||
@ -131,7 +130,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -150,7 +149,7 @@ describe('graph edge states', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
const keyShape = item.getKeyShape();
|
||||
@ -160,7 +159,7 @@ describe('graph edge states', () => {
|
||||
expect(keyShape.attr('shadowOffsetY')).toEqual(20);
|
||||
expect(keyShape.attr('lineWidth')).toEqual(10);
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
const keyShape = item.getKeyShape();
|
||||
@ -251,7 +250,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -265,7 +264,7 @@ describe('graph edge states', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
expect(item.hasState('hover')).toEqual(true);
|
||||
@ -293,7 +292,7 @@ describe('graph edge states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
expect(item.hasState('hover')).toEqual(false);
|
||||
@ -362,7 +361,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -376,7 +375,7 @@ describe('graph edge states', () => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
const edge = graph.getEdges()[0];
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
@ -384,7 +383,7 @@ describe('graph edge states', () => {
|
||||
expect(keyShape.attr('lineWidth')).toEqual(3);
|
||||
expect(keyShape.attr('stroke')).toEqual('rgb(224, 224, 224)');
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state2')).toEqual(true);
|
||||
@ -393,7 +392,7 @@ describe('graph edge states', () => {
|
||||
expect(keyShape.attr('lineWidth')).toEqual(5);
|
||||
expect(keyShape.attr('stroke')).toEqual('#f00');
|
||||
});
|
||||
graph.on('edge:click', (e) => {
|
||||
graph.on('edge:click', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state2', !item.hasState('state2'));
|
||||
expect(item.hasState('state2')).toEqual(true);
|
||||
@ -402,7 +401,7 @@ describe('graph edge states', () => {
|
||||
expect(keyShape.attr('stroke')).toEqual('#f00');
|
||||
});
|
||||
graph.on('canvas:click', () => {
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.getEdges().forEach(edge => {
|
||||
graph.setItemState(edge, 'state2', false);
|
||||
expect(edge.hasState('state2')).toEqual(false);
|
||||
const keyShape = edge.getKeyShape();
|
||||
@ -449,7 +448,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -471,25 +470,25 @@ describe('graph edge states', () => {
|
||||
expect(edge.getKeyShape().attr('stroke')).toEqual('#0f0');
|
||||
expect(edge.getKeyShape().attr('lineWidth')).toEqual(1);
|
||||
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
expect(item.hasState('state2')).toEqual(true);
|
||||
});
|
||||
graph.on('edge:click', (e) => {
|
||||
graph.on('edge:click', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state2', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
expect(item.hasState('state2')).toEqual(true);
|
||||
});
|
||||
graph.on('canvas:click', () => {
|
||||
graph.getEdges().forEach((edge) => {
|
||||
graph.getEdges().forEach(edge => {
|
||||
graph.setItemState(edge, 'state2', false);
|
||||
expect(edge.hasState('state1')).toEqual(false);
|
||||
expect(edge.hasState('state2')).toEqual(false);
|
||||
@ -542,7 +541,7 @@ describe('graph edge states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -555,7 +554,7 @@ describe('graph edge states', () => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
const edge = graph.getEdges()[0];
|
||||
graph.on('edge:mouseenter', (e) => {
|
||||
graph.on('edge:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
@ -574,7 +573,7 @@ describe('graph edge states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('edge:mouseleave', (e) => {
|
||||
graph.on('edge:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
@ -609,7 +608,7 @@ describe('graph edge states', () => {
|
||||
],
|
||||
};
|
||||
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
|
||||
width: 800, // Number，必须，图的宽度
|
||||
height: 500, // Number，必须，图的高度
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import G6 from '../../../src';
|
||||
import '../../../src/behavior';
|
||||
import Graph from '../implement-graph';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'global-spec';
|
||||
@ -22,7 +21,7 @@ describe('graph node states', () => {
|
||||
};
|
||||
|
||||
it('global nodeStateStyles and defaultNode, state change with opacity changed', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -53,7 +52,7 @@ describe('graph node states', () => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.addItem('node', { id: 'node3', x: 100, y: 200 });
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
// graph.setItemState(item, 'comCircle', 'selected')
|
||||
@ -61,7 +60,7 @@ describe('graph node states', () => {
|
||||
expect(keyShape.attr('opacity')).toEqual(0.8);
|
||||
expect(keyShape.attr('fill')).toEqual('steelblue');
|
||||
});
|
||||
graph.on('node:click', (e) => {
|
||||
graph.on('node:click', e => {
|
||||
const item = e.item;
|
||||
// graph.setItemState(item, 'hover', false);
|
||||
graph.clearItemStates(item, 'hover');
|
||||
@ -75,7 +74,7 @@ describe('graph node states', () => {
|
||||
// setState to change the height, when the state is restored, the height can not be restored though the attrs are correct.
|
||||
// wait for G to repair this problem
|
||||
it('global nodeStateStyles and defaultNode, state change with fill/r/width/height/stroke changed', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -105,11 +104,11 @@ describe('graph node states', () => {
|
||||
graph.render();
|
||||
const node3 = graph.addItem('node', { id: 'node3', x: 100, y: 150, type: 'rect' });
|
||||
graph.paint();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
});
|
||||
@ -188,7 +187,7 @@ describe('graph node states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -202,7 +201,7 @@ describe('graph node states', () => {
|
||||
graph.data(data2);
|
||||
graph.render();
|
||||
graph.paint();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
const id = item.getModel().id;
|
||||
@ -244,11 +243,11 @@ describe('graph node states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
});
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.emit('node:mouseenter', { item: node });
|
||||
graph.emit('node:mouseleave', { item: node });
|
||||
});
|
||||
@ -277,7 +276,7 @@ describe('graph node states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -291,24 +290,24 @@ describe('graph node states', () => {
|
||||
graph.data(data2);
|
||||
graph.render();
|
||||
const node = graph.getNodes()[0];
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
expect(item.hasState('hover')).toEqual(true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
expect(item.hasState('hover')).toEqual(false);
|
||||
});
|
||||
graph.on('node:click', (e) => {
|
||||
graph.on('node:click', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
});
|
||||
graph.on('canvas:click', () => {
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.setItemState(node, 'state1', false);
|
||||
expect(node.hasState('state1')).toEqual(false);
|
||||
});
|
||||
@ -338,7 +337,7 @@ describe('graph node states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -362,12 +361,12 @@ describe('graph node states', () => {
|
||||
expect(node.getKeyShape().attr('fill')).toEqual('#0f0');
|
||||
expect(node.getKeyShape().attr('lineWidth')).toEqual(1);
|
||||
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
@ -399,7 +398,7 @@ describe('graph node states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -411,7 +410,7 @@ describe('graph node states', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
@ -432,12 +431,12 @@ describe('graph node states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
});
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.emit('node:mouseenter', { item: node });
|
||||
graph.emit('node:mouseleave', { item: node });
|
||||
});
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import G6 from '../../../src';
|
||||
import '../../../src/behavior';
|
||||
import isPlainObject from '@antv/util/lib/is-plain-object';
|
||||
import { GraphData } from '../../../src/types';
|
||||
import { isPlainObject } from '@antv/util';
|
||||
import Graph from '../implement-graph';
|
||||
import { registerNode, GraphData } from '../../../src';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'global-spec';
|
||||
document.body.appendChild(div);
|
||||
|
||||
G6.registerNode(
|
||||
registerNode(
|
||||
'self-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
@ -26,7 +25,7 @@ G6.registerNode(
|
||||
fill: 'red',
|
||||
y: 0,
|
||||
...keyShapeStyle,
|
||||
r: cfg.size / 2,
|
||||
r: (cfg.size as any) / 2,
|
||||
},
|
||||
name: 'main-node',
|
||||
});
|
||||
@ -57,7 +56,7 @@ G6.registerNode(
|
||||
'single-node',
|
||||
);
|
||||
|
||||
G6.registerNode(
|
||||
registerNode(
|
||||
'keyshape-not-attribute',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
@ -115,7 +114,7 @@ describe('graph refactor states', () => {
|
||||
};
|
||||
|
||||
it('compatible true/false states', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -140,12 +139,12 @@ describe('graph refactor states', () => {
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
graph.setItemState(item, 'select', true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
graph.setItemState(item, 'select', false);
|
||||
@ -183,7 +182,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('multivalued & muted', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -237,7 +236,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyShape.attr('opacity')).toEqual(0.8);
|
||||
|
||||
const group = item.getContainer();
|
||||
const subShape = group.find((element) => element.get('name') === 'sub-node');
|
||||
const subShape = group.find(element => element.get('name') === 'sub-node');
|
||||
expect(subShape.attr('fill')).toEqual('#fff');
|
||||
// default value
|
||||
expect(subShape.attr('lineWidth')).toEqual(1);
|
||||
@ -246,7 +245,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('multivalued & muted, keyshape not name attribute', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -299,7 +298,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyShape.attr('opacity')).toEqual(0.8);
|
||||
|
||||
const group = item.getContainer();
|
||||
const subShape = group.find((element) => element.get('name') === 'sub-node');
|
||||
const subShape = group.find(element => element.get('name') === 'sub-node');
|
||||
expect(subShape.attr('fill')).toEqual('green');
|
||||
expect(subShape.attr('stroke')).toEqual('yellow');
|
||||
expect(subShape.attr('lineWidth')).toEqual(3);
|
||||
@ -308,7 +307,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('mixed use mulituvalued & Tow value states', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -374,7 +373,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyShape.attr('opacity')).toEqual(0.3);
|
||||
|
||||
const group = item.getContainer();
|
||||
const subShape = group.find((element) => element.get('name') === 'sub-node');
|
||||
const subShape = group.find(element => element.get('name') === 'sub-node');
|
||||
expect(subShape.attr('fill')).toEqual('#000');
|
||||
expect(subShape.attr('stroke')).toEqual('green');
|
||||
expect(subShape.attr('lineWidth')).toEqual(3);
|
||||
@ -383,7 +382,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('clear mulituvalued & Tow value states', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -456,7 +455,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyShape.attr('lineWidth')).toEqual(3);
|
||||
|
||||
const group = item.getContainer();
|
||||
const subShape = group.find((element) => element.get('name') === 'sub-node');
|
||||
const subShape = group.find(element => element.get('name') === 'sub-node');
|
||||
expect(subShape.attr('fill')).toEqual('#000');
|
||||
expect(subShape.attr('stroke')).toEqual('green');
|
||||
expect(subShape.attr('lineWidth')).toEqual(3);
|
||||
@ -499,7 +498,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('different nodes support different states', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -582,7 +581,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyshape1.attr('lineWidth')).toEqual(2);
|
||||
|
||||
const group1 = node1.getContainer();
|
||||
const shape1 = group1.find((ele) => ele.get('name') === 'sub-node');
|
||||
const shape1 = group1.find(ele => ele.get('name') === 'sub-node');
|
||||
expect(shape1.attr('stroke')).toEqual('#f8ac30');
|
||||
|
||||
const node2 = graph.findById('node2');
|
||||
@ -593,7 +592,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyshape2.attr('lineWidth')).toEqual(5);
|
||||
|
||||
const group2 = node2.getContainer();
|
||||
const shape2 = group2.find((ele) => ele.get('name') === 'sub-node');
|
||||
const shape2 = group2.find(ele => ele.get('name') === 'sub-node');
|
||||
expect(shape2.attr('stroke')).toEqual('#1cd8a7');
|
||||
|
||||
// node3 是 rect 且没有配置对应的 stateStyle，所以不受影响
|
||||
@ -613,7 +612,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
|
||||
it('update item style & sub element style, also support update states style', () => {
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -676,7 +675,7 @@ describe('graph refactor states', () => {
|
||||
expect(keyShape.attr('fill')).toEqual('red');
|
||||
|
||||
const group = item.getContainer();
|
||||
const subShape = group.find((ele) => ele.get('name') === 'sub-node');
|
||||
const subShape = group.find(ele => ele.get('name') === 'sub-node');
|
||||
expect(subShape.attr('stroke')).toEqual('#fff');
|
||||
|
||||
graph.clearItemStates(item, ['selfCircle:hover']);
|
||||
@ -792,7 +791,7 @@ describe('graph refactor states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -806,7 +805,7 @@ describe('graph refactor states', () => {
|
||||
graph.data(data2);
|
||||
graph.render();
|
||||
graph.paint();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
const id = item.getModel().id;
|
||||
@ -848,11 +847,11 @@ describe('graph refactor states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
});
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.emit('node:mouseenter', { item: node });
|
||||
graph.emit('node:mouseleave', { item: node });
|
||||
});
|
||||
@ -881,7 +880,7 @@ describe('graph refactor states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -895,24 +894,24 @@ describe('graph refactor states', () => {
|
||||
graph.data(data2);
|
||||
graph.render();
|
||||
const node = graph.getNodes()[0];
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', true);
|
||||
expect(item.hasState('hover')).toEqual(true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'hover', false);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
expect(item.hasState('hover')).toEqual(false);
|
||||
});
|
||||
graph.on('node:click', (e) => {
|
||||
graph.on('node:click', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
});
|
||||
graph.on('canvas:click', () => {
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.setItemState(node, 'state1', false);
|
||||
expect(node.hasState('state1')).toEqual(false);
|
||||
});
|
||||
@ -942,7 +941,7 @@ describe('graph refactor states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -966,12 +965,12 @@ describe('graph refactor states', () => {
|
||||
expect(node.getKeyShape().attr('fill')).toEqual('#0f0');
|
||||
expect(node.getKeyShape().attr('lineWidth')).toEqual(1);
|
||||
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
@ -1003,7 +1002,7 @@ describe('graph refactor states', () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
@ -1015,7 +1014,7 @@ describe('graph refactor states', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.on('node:mouseenter', (e) => {
|
||||
graph.on('node:mouseenter', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', true);
|
||||
expect(item.hasState('state1')).toEqual(true);
|
||||
@ -1036,12 +1035,12 @@ describe('graph refactor states', () => {
|
||||
break;
|
||||
}
|
||||
});
|
||||
graph.on('node:mouseleave', (e) => {
|
||||
graph.on('node:mouseleave', e => {
|
||||
const item = e.item;
|
||||
graph.setItemState(item, 'state1', false);
|
||||
expect(item.hasState('state1')).toEqual(false);
|
||||
});
|
||||
graph.getNodes().forEach((node) => {
|
||||
graph.getNodes().forEach(node => {
|
||||
graph.emit('node:mouseenter', { item: node });
|
||||
graph.emit('node:mouseleave', { item: node });
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user