test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: update g to new view and deal with canvas draggable. fix: readable for fruchterman from pr #1166

Browse Source
This commit is contained in:
Yanyan-Wang 2020-02-10 12:49:07 +08:00 committed by Moyee
parent b23b7afc4d
commit d49a7feedc
8 changed files with 352 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -49,7 +49,7 @@
"site:develop": "GATSBY=true gatsby develop --open",
"start": "npm run site:develop",
"test": "jest",
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/shape/nodes/modelRect-spec.ts",
"test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/behavior/drag-canvas-spec.ts",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
"watch": "father build -w",
"cdn": "antv-bin upload -n @antv/g6"
@ -71,8 +71,8 @@
"@antv/dom-util": "^2.0.1",
"@antv/event-emitter": "~0.1.0",
"@antv/g-base": "^0.3.5",
"@antv/g-canvas": "^0.3.12",
"@antv/g-math": "^0.1.1",
"@antv/g-canvas": "^0.3.16",
"@antv/hierarchy": "^0.6.1",
"@antv/matrix-util": "^2.0.4",
"@antv/path-util": "^2.0.3",

6
src/behavior/behaviorOption.ts
View File

@ -40,6 +40,9 @@ export default {
bind(graph: IGraph) {
const { events } = this;
this.graph = graph
if (this.type === 'drag-canvas') {
graph.get('canvas').set('draggable', true);
}
each(events, (handler: () => void, event: G6Event) => {
graph.on(event, handler)
})
@ -47,6 +50,9 @@ export default {
unbind(graph: IGraph) {
const { events } = this;
if (this.type === 'drag-canvas') {
graph.get('canvas').set('draggable', false);
}
each(events, (handler: () => void, event: G6Event) => {
graph.off(event, handler)
})

1
src/behavior/drag-canvas.ts
View File

@ -16,6 +16,7 @@ export default {
'dragstart': 'onMouseDown',
'drag': 'onMouseMove',
'dragend': 'onMouseUp',
'canvas:click': 'onMouseUp',
keyup: 'onKeyUp',
keydown: 'onKeyDown'
};

1
src/graph/controller/event.ts
View File

@ -60,6 +60,7 @@ export default class EventController {
const { graph, extendEvents } = this;
const canvas: Canvas = graph.get('canvas');
// canvas.set('draggable', true);
const el = canvas.get('el');
const canvasHandler: Fun = wrapBehavior(this, 'onCanvasEvents') as Fun;

1
src/interface/graph.ts
View File

@ -17,6 +17,7 @@ export interface IModeOption {
multiple?: boolean;
selectedState?: string;
includeEdges?: boolean;
direction?: 'x' | 'y';
shouldUpdate?: (e: IG6GraphEvent) => boolean;
shouldBegin?: (e: IG6GraphEvent) => boolean;
shouldEnd?: (e: IG6GraphEvent) => boolean;

76
src/layout/fruchterman.ts
View File

@ -1,5 +1,5 @@
/**
* @fileOverview random layout
* @fileOverview fruchterman layout
* @author shiwu.wyy@antfin.com
*/
@ -97,8 +97,6 @@ export default class FruchtermanLayout extends BaseLayout {
self.height = window.innerHeight;
}
const center = self.center;
const nodeMap = self.nodeMap;
const nodeIdxMap = self.nodeIdxMap;
const maxDisplace = self.width / 10;
const k = Math.sqrt((self.width * self.height) / (nodes.length + 1));
const gravity = self.gravity;
@ -136,11 +134,11 @@ export default class FruchtermanLayout extends BaseLayout {
}
}
for (let i = 0; i < maxIteration; i++) {
const disp: Point[] = [];
const displacements: Point[] = [];
nodes.forEach((_, j) => {
disp[j] = { x: 0, y: 0 };
displacements[j] = { x: 0, y: 0 };
});
self.getDisp(nodes, edges, nodeMap, nodeIdxMap, disp, k);
self.applyCalculate(nodes, edges, displacements, k);
// gravity for clusters
if (clustering) {
@ -150,8 +148,8 @@ export default class FruchtermanLayout extends BaseLayout {
const c = clusterMap[n.cluster];
const distLength = Math.sqrt((n.x - c.cx) * (n.x - c.cx) + (n.y - c.cy) * (n.y - c.cy));
const gravityForce = k * clusterGravity;
disp[j].x -= (gravityForce * (n.x - c.cx)) / distLength;
disp[j].y -= (gravityForce * (n.y - c.cy)) / distLength;
displacements[j].x -= (gravityForce * (n.x - c.cx)) / distLength;
displacements[j].y -= (gravityForce * (n.y - c.cy)) / distLength;
});
@ -161,7 +159,7 @@ export default class FruchtermanLayout extends BaseLayout {
clusterMap[key].count = 0;
}
nodes.forEach((n) => {
nodes.forEach(n => {
const c = clusterMap[n.cluster];
if (isNumber(n.x)) {
c.cx += n.x;
@ -181,74 +179,74 @@ export default class FruchtermanLayout extends BaseLayout {
nodes.forEach((n, j) => {
if (!isNumber(n.x) || !isNumber(n.y)) return;
const gravityForce = 0.01 * k * gravity;
disp[j].x -= gravityForce * (n.x - center[0]);
disp[j].y -= gravityForce * (n.y - center[1]);
displacements[j].x -= gravityForce * (n.x - center[0]);
displacements[j].y -= gravityForce * (n.y - center[1]);
});
// move
nodes.forEach((n, j) => {
if (!isNumber(n.x) || !isNumber(n.y)) return;
const distLength = Math.sqrt(disp[j].x * disp[j].x + disp[j].y * disp[j].y);
const distLength = Math.sqrt(displacements[j].x * displacements[j].x + displacements[j].y * displacements[j].y);
if (distLength > 0) {
// && !n.isFixed()
const limitedDist = Math.min(maxDisplace * (speed / SPEED_DIVISOR), distLength);
n.x += (disp[j].x / distLength) * limitedDist;
n.y += (disp[j].y / distLength) * limitedDist;
n.x += (displacements[j].x / distLength) * limitedDist;
n.y += (displacements[j].y / distLength) * limitedDist;
}
});
}
}
// TODO: nodeMap、nodeIndexMap 等根本不需要依靠参数传递
private getDisp(nodes: Node[], edges: Edge[], nodeMap: NodeMap, nodeIdxMap: NodeIdxMap, disp: Point[], k: number) {
private applyCalculate(nodes: Node[], edges: Edge[], displacements: Point[], k: number) {
const self = this;
self.calRepulsive(nodes, disp, k);
self.calAttractive(edges, nodeMap, nodeIdxMap, disp, k);
self.calRepulsive(nodes, displacements, k);
self.calAttractive(edges, displacements, k);
}
private calRepulsive(nodes: Node[], disp: Point[], k: number) {
private calRepulsive(nodes: Node[], displacements: Point[], k: number) {
nodes.forEach((v, i) => {
disp[i] = { x: 0, y: 0 };
displacements[i] = { x: 0, y: 0 };
nodes.forEach((u, j) => {
if (i === j) {
return;
}
if (!isNumber(v.x) || !isNumber(u.x) || !isNumber(v.y) || !isNumber(u.y)) return;
let vecx = v.x - u.x;
let vecy = v.y - u.y;
let vecLengthSqr = vecx * vecx + vecy * vecy;
let vecX = v.x - u.x;
let vecY = v.y - u.y;
let vecLengthSqr = vecX * vecX + vecY * vecY;
if (vecLengthSqr === 0) {
vecLengthSqr = 1;
const sign = i > j ? 1 : -1;
vecx = 0.01 * sign;
vecy = 0.01 * sign;
vecX = 0.01 * sign;
vecY = 0.01 * sign;
}
const common = (k * k) / vecLengthSqr;
disp[i].x += vecx * common;
disp[i].y += vecy * common;
displacements[i].x += vecX * common;
displacements[i].y += vecY * common;
});
});
}
private calAttractive(edges: Edge[], nodeMap: NodeMap, nodeIdxMap: NodeIdxMap, disp: Point[], k: number) {
edges.forEach((e) => {
private calAttractive(edges: Edge[], displacements: Point[], k: number) {
edges.forEach(e => {
if (!e.source || !e.target) return;
const uIndex = nodeIdxMap[e.source];
const vIndex = nodeIdxMap[e.target];
const uIndex = this.nodeIdxMap[e.source];
const vIndex = this.nodeIdxMap[e.target];
if (uIndex === vIndex) {
return;
}
const u = nodeMap[e.source];
const v = nodeMap[e.target];
const u = this.nodeMap[e.source];
const v = this.nodeMap[e.target];
if (!isNumber(v.x) || !isNumber(u.x) || !isNumber(v.y) || !isNumber(u.y)) return;
const vecx = v.x - u.x;
const vecy = v.y - u.y;
const vecLength = Math.sqrt(vecx * vecx + vecy * vecy);
const vecX = v.x - u.x;
const vecY = v.y - u.y;
const vecLength = Math.sqrt(vecX * vecX + vecY * vecY);
const common = (vecLength * vecLength) / k;
disp[vIndex].x -= (vecx / vecLength) * common;
disp[vIndex].y -= (vecy / vecLength) * common;
disp[uIndex].x += (vecx / vecLength) * common;
disp[uIndex].y += (vecy / vecLength) * common;
displacements[vIndex].x -= (vecX / vecLength) * common;
displacements[vIndex].y -= (vecY / vecLength) * common;
displacements[uIndex].x += (vecX / vecLength) * common;
displacements[uIndex].y += (vecY / vecLength) * common;
});
}
}

583
tests/unit/behavior/drag-canvas-spec.ts
View File

@ -6,6 +6,22 @@ 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({
@ -16,300 +32,307 @@ describe('drag-canvas', () => {
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 });
graph.emit('drag', { clientX: 200, clientY: 200 });
// expect(start).toBe(true);
// graph.emit('drag', { clientX: 250, clientY: 250 });
// 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();
expect(start).toBe(true);
graph.emit('drag', { clientX: 250, clientY: 250 });
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; }
// }]
// }
// });
// let start = false;
// graph.on('canvas:dragstart', () => { start = true; });
// graph.on('canvas:dragend', () => { start = false; });
// graph.paint();
// graph.emit('dragstart', { clientX: 150, clientY: 150 });
// graph.emit('canvas:drag', { clientX: 200, clientY: 200 });
// expect(start).toBe(true);
// graph.emit('canvas:drag', { clientX: 250, clientY: 250 });
// 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',
// shouldUpdate: () => { return false; }
// }],
// custom: []
// }
// });
// 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 });
// graph.emit('canvas:drag', { clientX: 200, clientY: 200 });
// expect(triggered).toBe(false);
// graph.emit('canvas:drag', { clientX: 250, clientY: 250 });
// expect(triggered).toBe(false);
// graph.emit('canvas: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'
// }]
// }
// });
// 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 });
// graph.emit('canvas:drag', { clientX: 200, clientY: 200 });
// expect(start).toBe(true);
// graph.emit('canvas:drag', { clientX: 250, clientY: 250 });
// expect(start).toBe(true);
// const matrix = graph.get('group').getMatrix();
// expect(matrix[6]).toEqual(100);
// expect(matrix[7]).toEqual(0);
// graph.emit('canvas: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 });
// graph.emit('canvas:drag', { clientX: 250, clientY: 250 });
// const matrix = graph.get('group').getMatrix();
// expect(matrix[6]).toEqual(0);
// expect(matrix[7]).toEqual(100);
// graph.emit('canvas: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 });
// graph.emit('canvas:drag', { clientX: 150, clientY: 150 });
// expect(triggered).toBe(false);
// expect(dragging).toBe(false);
// graph.emit('canvas:drag', { clientX: 160, clientY: 160 });
// expect(triggered).toBe(true);
// graph.emit('canvas:drag', { clientX: 170, clientY: 180 });
// expect(dragging).toBe(true);
// dragging = false;
// graph.emit('canvas:click', { clientX: 170, clientY: 170 });
// graph.emit('canvas:drag', { clientX: 170, clientY: 170 });
// 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;
// });
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 });
graph.emit('drag', { clientX: 200, clientY: 200 });
expect(start).toBe(true);
graph.emit('drag', { clientX: 250, clientY: 250 });
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 });
graph.emit('drag', { clientX: 200, clientY: 200 });
expect(triggered).toBe(false);
graph.emit('drag', { clientX: 250, clientY: 250 });
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 });
graph.emit('drag', { clientX: 200, clientY: 200 });
expect(start).toBe(true);
graph.emit('drag', { clientX: 250, clientY: 250 });
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 });
graph.emit('drag', { clientX: 250, clientY: 250 });
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 });
graph.emit('drag', { clientX: 150, clientY: 150 });
expect(triggered).toBe(false);
expect(dragging).toBe(false);
graph.emit('drag', { clientX: 160, clientY: 160 });
expect(triggered).toBe(true);
graph.emit('drag', { clientX: 170, clientY: 180 });
expect(dragging).toBe(true);
dragging = false;
graph.emit('canvas:click', { clientX: 170, clientY: 170 });
graph.emit('drag', { clientX: 170, clientY: 170 });
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 });
// graph.emit('canvas:dragend', { clientX: 150, clientY: 150 });
// expect(triggered).toBe(false);
// expect(dragging).toBe(false);
// mouse down and up without moving
graph.emit('dragstart', { clientX: 150, clientY: 150 });
graph.emit('dragend', { clientX: 150, clientY: 150 });
expect(triggered).toBe(false);
expect(dragging).toBe(false);
// graph.emit('keydown', { key: 'shift' })
// graph.emit('dragstart', { clientX: 150, clientY: 150 });
// expect(triggered).toBe(false);
// expect(dragging).toBe(false);
// graph.emit('canvas:drag', { clientX: 160, clientY: 160 });
// expect(triggered).toBe(false);
// graph.emit('canvas:dragend', { clientX: 160, clientY: 160 });
// expect(triggered).toBe(false);
graph.emit('keydown', { key: 'shift' })
graph.emit('dragstart', { clientX: 150, clientY: 150 });
expect(triggered).toBe(false);
expect(dragging).toBe(false);
graph.emit('drag', { clientX: 160, clientY: 160 });
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 });
// graph.emit('canvas:drag', { clientX: 150, clientY: 150 });
// expect(triggered).toBe(false);
// expect(dragging).toBe(false);
// graph.emit('canvas:drag', { clientX: 160, clientY: 160 });
// 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 });
// graph.emit('canvas:dragend', { clientX: 160, clientY: 160 });
// expect(triggered).toBe(false);
// graph.emit('keyup', {})
graph.emit('keyup', { key: 'shift' })
graph.emit('dragstart', { clientX: 150, clientY: 150 });
graph.emit('drag', { clientX: 150, clientY: 150 });
expect(triggered).toBe(false);
expect(dragging).toBe(false);
graph.emit('drag', { clientX: 160, clientY: 160 });
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 });
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 });
// graph.emit('canvas:dragend', { clientX: 160, clientY: 160 });
// expect(triggered).toBe(false);
// graph.emit('keyup', {});
// graph.destroy();
graph.emit('keydown', { key: 'abc' }) // key invalid
graph.emit('dragstart', { clientX: 150, clientY: 150 });
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 });
// graph.emit('canvas:drag', { clientX: 550, clientY: 550 });
// graph.emit('canvas:mouseleave', { target: graph.get('canvas').get('el') });
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 });
graph.emit('drag', { clientX: 550, clientY: 550 });
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);
// });
// 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 });
// graph.emit('canvas:drag', { clientX: 350, clientY: 350 });
// graph.emit('canvas:dragend', { clientX: 350, clientY: 350 });
// graph.emit('canvas:mouseleave', { target: graph.get('canvas').get('el') });
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 });
graph.emit('drag', { clientX: 350, clientY: 350 });
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);
// });
// 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);
});
});

2
tests/unit/behavior/index-spec.ts
View File

@ -101,6 +101,6 @@ describe('Default Behavior', () => {
const events = dragCanvas.getEvents()
const keys = Object.keys(events)
expect(keys.length).toBe(5)
expect(keys.length).toBe(6)
})
})