fix: grid zooming leads to empty space problem.

src/behavior/zoom-canvas.ts

@@ -43,7 +43,6 @@ export default {
       const optimizeZoom = this.get('optimizeZoom')
 
       const currentZoom = graph.getZoom()
-      console.log(currentZoom)
       if(currentZoom < optimizeZoom) {
         const nodes = graph.getNodes()
         const edges = graph.getEdges()

src/graph/controller/view.ts

@@ -164,13 +164,14 @@ export default class ViewController {
     const plugins = graph.get('plugins');
     plugins.forEach(plugin => {
       if (plugin.get('gridContainer')) {
+        const minZoom = graph.get('minZoom');
         modifyCSS(plugin.get('container'), {
           width: `${width}px`,
           height: `${height}px`,
         });
         modifyCSS(plugin.get('gridContainer'), {
-          width: `${width}px`,
-          height: `${height}px`,
+          width: `${width / minZoom}px`,
+          height: `${height / minZoom}px`,
           left: 0,
           top: 0,
         });

src/plugins/grid/index.ts

@@ -23,6 +23,7 @@ export default class Grid extends Base {
 
   public init() {
     const graph: IGraph = this.get('graph');
+    const minZoom = graph.get<number>('minZoom');
     const graphContainer = graph.get<HTMLDivElement>('container');
     const canvas: HTMLDivElement = graph.get<Canvas>('canvas').get('el');
     const width = graph.get<number>('width');
@@ -36,7 +37,10 @@ export default class Grid extends Base {
     const gridContainer: HTMLDivElement = createDOM(
       `<div 
         class='g6-grid' 
-        style='position:absolute;transform-origin: 0% 0% 0px; background-image: ${img}'></div>`,
+        style='position:absolute;
+        transform-origin: 0% 0% 0px;
+        background-image: ${img}
+        '></div>`,
     );
 
     container.appendChild(gridContainer);
@@ -46,8 +50,8 @@ export default class Grid extends Base {
     });
 
     modifyCSS(gridContainer, {
-      width: `${width}px`,
-      height: `${height}px`,
+      width: `${width / minZoom}px`,
+      height: `${height / minZoom}px`,
       left: 0,
       top: 0,
     });

stories/Plugins/component/grid.tsx

@@ -47,7 +47,7 @@ const Grid = () => {
     const imgstr = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAsRJREFUWAntV81LVFEUP+e+j7HEDNxlUIs2RbhqVYv6A0KCxD7moy/UhSJKq3IRLaxNoQ6TUNKXOhVSIBbtWxQEtTHKdQvbBdWozbz35p7OHefNjK/3dD5QXMyFO++er9/5cd69590BqHFE7tEBNWuEAawWYGaGtLlF6wYADq1i0HB7q3mzsxOz1WBWReRKgvZlHPsZER0tTYqIH0K6cf5hH34v1ZezrphIOO50oJQTTGK3XwIm84uE6Er26y/97EG6sol036edy3/tUSDqCgJbo0ecaNxhDDzowZU1+gChLCKx0UybBHhBBAcDcHzViLAgAM5ODoTmfR1KlOy3/oiOWb0S8GOlJBSqilGxCmP9LLzlgxxiCWqRjvWIwdqDfCrRc3XmhG5enuzDn35xvkSicfs4ZWWSAFr9gqrVcbJF1ER4qt9458VYQ6S0NxDQhq/NC1aOjIC83f7vOQUiqjekbTvJTsfKAazdB983GEbY7Tk5IpER5xQTfRzUG2pP6o+geg4X/tL0oD6LalNmbfsHV8L0d99sLVqaYewRzRKWuCwbnvNNo4PwJc9hNUV0khqbUoC/Hes6SLimtELAuSbdfOOSWJGw13asBSXzcXy7yzDPuDb1/GPbr/n1nlDrBsPcH0IoHNWUY52UEp4rGwi43aybt1JNQFMxXFYqXf2o4SoiIxmLj21ukNTS4724lBchNkbFdk2QLbUpn8ioVfjyagYsj/cUY3kfpgFWzXxuLG/sphxRl3glzzoRb7XqFalXxFsBr1zfI/WKeCvglbfNHsldjMJxOiTIalMs+bLcwfN0jjHiXYH0qcgeW6SkRN72mW13ijYVi0P89T2sdAKxG5BSrl0SHmGHq0rmL/crnrk/YBLN+WQ/fsvf0KwnfEe94AZt5ZPvsE+nB82L2+bV5O4jujCGHZmd3cpKuLl0oX1V639/p/zYCjUG8gAAAABJRU5ErkJggg==)'
     if (!graph) {
       const grid = new G6.Grid({
-        img: imgstr
+        // img: imgstr
       });
       graph = new Graph({
         container: container.current as string | HTMLElement,
@@ -62,8 +62,8 @@ const Grid = () => {
       graph.render();
       let width = 500, height = 500;
       graph.on('canvas:click', evt => {
-        width -= 100;
-        height -= 50;
+        width += 100;
+        height += 50;
         graph.changeSize(width, height)
       });
     }

tests/unit/graph/svg-spec.ts

@@ -2512,8 +2512,11 @@ describe('plugins', () => {
     
     const gridDom = document.getElementsByClassName('g6-grid')[0] as HTMLElement;
     expect(gridDom).not.toBe(undefined);
-    expect(gridDom.style.width).toBe('500px');
-    expect(gridDom.style.height).toBe('500px');
+    const minZoom = graph.get('minZoom');
+    const width = 500 / minZoom;
+    const height = 500 / minZoom;
+    expect(gridDom.style.width).toBe(`${width}px`);
+    expect(gridDom.style.height).toBe(`${height}px`);
     graph.destroy();
     const parentDom = gridDom.parentNode.parentNode;
     expect(parentDom).toBe(null);

tests/unit/plugins/grid-spec.ts

@@ -31,8 +31,11 @@ describe('grid', () => {
 
     const gridContainer: HTMLDivElement = container.childNodes[0] as HTMLDivElement;
 
-    expect(gridContainer.style.width).toEqual('800px');
-    expect(gridContainer.style.height).toEqual('600px');
+    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('');