0a5f6a8047
- Go backend (server/)
- Frontend (web/, server/static/)
- Database and deployment files
- Scripts and docs
Co-Authored-By: 狸花猫/Claude-Qwen3.6-Plus 🐾
84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import G6 from '@antv/g6';
|
|
import Grid from '../../src/grid';
|
|
|
|
const div = document.createElement('div');
|
|
div.id = 'grid-spec';
|
|
document.body.appendChild(div);
|
|
|
|
// const bloc = document.createElement('div');
|
|
// bloc.style.backgroundColor = '#f00';
|
|
// bloc.style.width = '100px';
|
|
// bloc.style.height = '100px';
|
|
// div.style.display = 'inline-flex'
|
|
// div.appendChild(bloc);
|
|
|
|
describe('grid', () => {
|
|
const grid = new Grid();
|
|
const graph = new G6.Graph({
|
|
container: div,
|
|
width: 800,
|
|
height: 600,
|
|
modes: {
|
|
default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
|
|
},
|
|
plugins: [grid],
|
|
});
|
|
|
|
graph.addItem('node', { x: 100, y: 100 });
|
|
graph.addItem('node', { x: -100, y: -100 });
|
|
|
|
it('grid', () => {
|
|
const container = grid.getContainer();
|
|
expect(container).not.toBe(undefined);
|
|
expect(container.childNodes.length).toEqual(1);
|
|
|
|
const style = container.style;
|
|
expect(style.overflow).toEqual('hidden');
|
|
expect(style.left).toEqual('');
|
|
// expect(style.top).toEqual('60px'); // it changes with the specs ran before this one
|
|
|
|
const gridContainer: HTMLDivElement = container.childNodes[0] as HTMLDivElement;
|
|
|
|
const minZoom = graph.get('minZoom');
|
|
const width = (800 * 80) / minZoom; // 3200000
|
|
const height = (600 * 80) / minZoom; // 2400000
|
|
expect(gridContainer.style.width).toBe('3.2e+06px'); // width
|
|
expect(gridContainer.style.height).toBe('2.4e+06px'); // height
|
|
expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
|
|
expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
|
|
expect(gridContainer.style.backgroundImage).not.toEqual('');
|
|
|
|
graph.translate(-100, -100);
|
|
|
|
expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, -100, -100)');
|
|
expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
|
|
expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
|
|
|
|
graph.zoom(0.5);
|
|
expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, -50, -50)');
|
|
expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
|
|
expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
|
|
|
|
graph.get('group').resetMatrix();
|
|
|
|
graph.translate(100, 100);
|
|
expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 100, 100)');
|
|
expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
|
|
expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
|
|
|
|
graph.addItem('node', { x: -200, y: 200 });
|
|
|
|
graph.translate(100, 100);
|
|
expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 200, 200)');
|
|
expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
|
|
expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
|
|
});
|
|
it('grid destroy', () => {
|
|
const container = graph.get('container');
|
|
expect(container.childNodes.length).toEqual(2);
|
|
|
|
graph.destroy();
|
|
expect(container.childNodes.length).toEqual(0);
|
|
});
|
|
});
|