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

fix(behaviors): fix drag element, drag canvas conflict (#6125)

Browse Source 
Co-authored-by: antv <antv@antfin.com>
This commit is contained in:
Aaron 2024-08-05 16:23:17 +08:00 committed by GitHub
parent 7ca88d0dc4
commit e75c7bd608
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 75 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/g6/__tests__/bugs/behaviors-multiple-conflict.spec.ts Normal file
View File

@ -0,0 +1,29 @@
import { createGraph, dispatchCanvasEvent } from '@@/utils';
import { CommonEvent, NodeEvent } from '@antv/g6';
describe('bugs:multiple-conflict', () => {
it('drag element, drag canvas', async () => {
const graph = createGraph({
data: {
nodes: [{ id: 'node-1', style: { x: 50, y: 50, size: 20 } }],
},
behaviors: ['drag-element', 'drag-canvas'],
});
await graph.render();
await expect(graph).toMatchSnapshot(__filename);
// drag canvas
dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
await expect(graph).toMatchSnapshot(__filename, 'drag-canvas');
// drag element
graph.emit(NodeEvent.DRAG_START, { target: { id: 'node-1' }, targetType: 'node' });
graph.emit(NodeEvent.DRAG, { dx: 10, dy: 10 });
graph.emit(NodeEvent.DRAG_END);
await expect(graph).toMatchSnapshot(__filename, 'drag-element');
});
});

14
packages/g6/__tests__/snapshots/bugs/behaviors-multiple-conflict/default.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g >
<g fill="none">
<g fill="none">
<g fill="none" x="50" y="50" transform="matrix(1,0,0,1,50,50)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

14
packages/g6/__tests__/snapshots/bugs/behaviors-multiple-conflict/drag-canvas.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(1,0,0,1,10,10)">
<g fill="none">
<g fill="none">
<g fill="none" x="50" y="50" transform="matrix(1,0,0,1,50,50)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 540 B

14
packages/g6/__tests__/snapshots/bugs/behaviors-multiple-conflict/drag-element.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(1,0,0,1,10,10)">
<g fill="none">
<g fill="none">
<g fill="none" x="60" y="60" transform="matrix(1,0,0,1,60,60)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 540 B

9
packages/g6/src/behaviors/drag-canvas.ts
View File

@ -1,6 +1,6 @@
import type { Cursor } from '@antv/g';
import { debounce, isObject } from '@antv/util';
import { CanvasEvent, CommonEvent } from '../constants';
import { CanvasEvent } from '../constants';
import type { RuntimeContext } from '../runtime/types';
import type { IKeyboardEvent, IPointerEvent, Vector2, ViewportAnimationEffectTiming } from '../types';
import type { ShortcutKey } from '../utils/shortcut';
@ -108,10 +108,9 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
this.shortcut.bind(left, (event) => this.onTranslate([1, 0], event));
this.shortcut.bind(right, (event) => this.onTranslate([-1, 0], event));
} else {
const canvas = this.canvas;
canvas.addEventListener(CommonEvent.DRAG_START, this.onDragStart);
canvas.addEventListener(CommonEvent.DRAG, this.onDrag);
canvas.addEventListener(CommonEvent.DRAG_END, this.onDragEnd);
this.context.graph.on(CanvasEvent.DRAG_START, this.onDragStart);
this.context.graph.on(CanvasEvent.DRAG, this.onDrag);
this.context.graph.on(CanvasEvent.DRAG_END, this.onDragEnd);
}
}