test: add test case
40
packages/g6/__tests__/bugs/fit-view.spec.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { createGraph } from '@@/utils';
|
||||||
|
|
||||||
|
describe('fit view', () => {
|
||||||
|
it('suite 1', async () => {
|
||||||
|
// https://github.com/antvis/G6/issues/5943
|
||||||
|
const graph = createGraph({
|
||||||
|
data: {
|
||||||
|
nodes: [
|
||||||
|
{ id: 'node-1', style: { x: 250, y: 150 } },
|
||||||
|
{ id: 'node-2', style: { x: 350, y: 150 } },
|
||||||
|
{ id: 'node-3', style: { x: 250, y: 300 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
behaviors: ['zoom-canvas'],
|
||||||
|
});
|
||||||
|
|
||||||
|
await graph.draw();
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename);
|
||||||
|
|
||||||
|
// wheel
|
||||||
|
graph.emit('wheel', { deltaY: 5 });
|
||||||
|
graph.emit('wheel', { deltaY: 5 });
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'after-wheel');
|
||||||
|
|
||||||
|
// fit center
|
||||||
|
await graph.fitCenter();
|
||||||
|
await graph.fitCenter();
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'after-fit-center');
|
||||||
|
|
||||||
|
// fit view
|
||||||
|
await graph.fitView();
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'after-fit-view');
|
||||||
|
|
||||||
|
// fit center again
|
||||||
|
await graph.fitCenter();
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'after-fit-center-again');
|
||||||
|
});
|
||||||
|
});
|
56
packages/g6/__tests__/bugs/focus-element.spec.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import { CanvasEvent, CommonEvent, NodeEvent } from '@/src';
|
||||||
|
import { createGraph } from '@@/utils';
|
||||||
|
|
||||||
|
describe('focus element', () => {
|
||||||
|
it('focus after drag', async () => {
|
||||||
|
// https://github.com/antvis/G6/issues/5955
|
||||||
|
const graph = createGraph({
|
||||||
|
data: {
|
||||||
|
nodes: [
|
||||||
|
{ id: 'node-1', style: { x: 250, y: 150 } },
|
||||||
|
{ id: 'node-2', style: { x: 350, y: 150 } },
|
||||||
|
{ id: 'node-3', style: { x: 250, y: 300 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
behaviors: ['zoom-canvas', 'drag-canvas'],
|
||||||
|
});
|
||||||
|
|
||||||
|
await graph.draw();
|
||||||
|
|
||||||
|
graph.emit(CanvasEvent.DRAG, { movement: { x: 100, y: 100 }, targetType: 'canvas' });
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'focus-before-drag');
|
||||||
|
|
||||||
|
await graph.focusElement('node-1');
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'focus-after-drag');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hover after focus', async () => {
|
||||||
|
// https://github.com/antvis/G6/issues/5925
|
||||||
|
const graph = createGraph({
|
||||||
|
data: {
|
||||||
|
nodes: [
|
||||||
|
{ id: 'node-1', style: { x: 250, y: 150 } },
|
||||||
|
{ id: 'node-2', style: { x: 350, y: 150 } },
|
||||||
|
{ id: 'node-3', style: { x: 250, y: 300 } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
behaviors: ['zoom-canvas', 'hover-activate'],
|
||||||
|
});
|
||||||
|
|
||||||
|
await graph.draw();
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'hover-before-focus');
|
||||||
|
|
||||||
|
await graph.focusElement('node-1');
|
||||||
|
|
||||||
|
graph.emit(NodeEvent.POINTER_OVER, {
|
||||||
|
target: { id: 'node-2' },
|
||||||
|
targetType: 'node',
|
||||||
|
type: CommonEvent.POINTER_OVER,
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect(graph).toMatchSnapshot(__filename, 'hover-after-focus');
|
||||||
|
});
|
||||||
|
});
|
@ -1,6 +1,6 @@
|
|||||||
<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">
|
<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/>
|
<defs/>
|
||||||
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819664)">
|
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819689)">
|
||||||
<g fill="none">
|
<g fill="none">
|
||||||
<g fill="none">
|
<g fill="none">
|
||||||
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">
|
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">
|
||||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@ -1,6 +1,6 @@
|
|||||||
<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">
|
<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/>
|
<defs/>
|
||||||
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819664)">
|
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819689)">
|
||||||
<g fill="none">
|
<g fill="none">
|
||||||
<g fill="none">
|
<g fill="none">
|
||||||
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">
|
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">
|
||||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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(2.747253,0,0,2.747253,-574.175781,-368.131866)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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(0.902500,0,0,0.902500,-20.750019,46.937508)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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(2.747253,0,0,2.747253,-574.175781,-368.131866)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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(0.902500,0,0,0.902500,24.375006,24.375006)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 971 B |
@ -0,0 +1,24 @@
|
|||||||
|
<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,0,100)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1004 B |
@ -0,0 +1,24 @@
|
|||||||
|
<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,100,100)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1006 B |
@ -0,0 +1,27 @@
|
|||||||
|
<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,-0.000015,100)">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none">
|
||||||
|
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="none" class="halo" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.15" r="16" stroke-dasharray="0,0" pointer-events="none"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,24 @@
|
|||||||
|
<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="250" y="150" transform="matrix(1,0,0,1,250,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
|
||||||
|
<g>
|
||||||
|
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 971 B |