<commit_before>import G6 from '@antv/g6';
import Grid from '../../src/grid';

const div = document.createElement('div');
div.id = 'grid-spec';
document.body.appendChild(div);

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('8px');
    // 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 / minZoom;
    const height = 600 / minZoom;
    expect(gridContainer.style.width).toBe(`${width}px`);
    expect(gridContainer.style.height).toBe(`${height}px`);
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');
    expect(gridContainer.style.backgroundImage).not.toEqual('');

    graph.translate(-100, -100);

    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.zoom(0.5);
    expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.get('group').resetMatrix();

    graph.translate(100, 100);
    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.addItem('node', { x: -200, y: 200 });

    graph.translate(100, 100);
    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');
  });
  it('grid destroy', () => {
    const container = graph.get('container');
    expect(container.childNodes.length).toEqual(2);

    graph.destroy();
    expect(container.childNodes.length).toEqual(0);
  });
});<commit_msg>fix: grid follow default value<commit_after>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;
    const height = (600 * 80) / minZoom;
    expect(gridContainer.style.width).toBe(`${width}px`);
    expect(gridContainer.style.height).toBe(`${height}px`);
    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
    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(`-${width / 2}px`);
    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);

    graph.zoom(0.5);
    expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, -50, -50)');
    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);

    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(`-${width / 2}px`);
    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);

    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(`-${width / 2}px`);
    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
  });
  it('grid destroy', () => {
    const container = graph.get('container');
    expect(container.childNodes.length).toEqual(2);

    graph.destroy();
    expect(container.childNodes.length).toEqual(0);
  });
});
{'fraction_non_alphanumeric': 0.19853881278538812, 'fraction_numerical': 0.03963470319634703, 'mean_word_length': 3.9156193895870737, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7543975', 'n_tokens_mistral': 1928, 'n_tokens_neox': 1800, 'n_words': 312}