feat(grid): center grid around viewbox on viewbox changed

Closes #339
bpmn-io · Jun 14, 2019 · 9833cd8 · 9833cd8
1 parent 4971a68
commit 9833cd8
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 3 deletions.
diff --git a/lib/features/grid-snapping/visuals/Grid.js b/lib/features/grid-snapping/visuals/Grid.js
@@ -7,13 +7,15 @@ import {
 
 import { query as domQuery } from 'min-dom';
 
-import { SPACING } from '../GridUtil';
+import { SPACING, quantize } from '../GridUtil';
+
+import { getMid } from '../../../layout/LayoutUtil';
 
 var GRID_COLOR = '#ccc',
     LAYER_NAME = 'djs-grid';
 
-var GRID_DIMENSIONS = {
-  width : 100000,
+export var GRID_DIMENSIONS = {
+  width: 100000,
   height: 100000
 };
 
@@ -31,6 +33,14 @@ export default function Grid(canvas, eventBus) {
     var active = event.active;
 
     self._setVisible(active);
+
+    self._centerGridAroundViewbox();
+  });
+
+  eventBus.on('canvas.viewbox.changed', function(context) {
+    var viewbox = context.viewbox;
+
+    self._centerGridAroundViewbox(viewbox);
   });
 }
 
@@ -76,6 +86,19 @@ Grid.prototype._init = function() {
   });
 };
 
+Grid.prototype._centerGridAroundViewbox = function(viewbox) {
+  if (!viewbox) {
+    viewbox = this._canvas.viewbox();
+  }
+
+  var mid = getMid(viewbox);
+
+  svgAttr(this.grid, {
+    x: -(GRID_DIMENSIONS.width / 2) + quantize(mid.x, SPACING),
+    y: -(GRID_DIMENSIONS.height / 2) + quantize(mid.y, SPACING)
+  });
+};
+
 Grid.prototype._isVisible = function() {
   return this.visible;
 };

diff --git a/test/spec/features/grid-snapping/visuals/GridSpec.js b/test/spec/features/grid-snapping/visuals/GridSpec.js
@@ -9,6 +9,14 @@ import gridSnappingModule from 'lib/features/grid-snapping';
 import gridVisualsModule from 'lib/features/grid-snapping/visuals';
 import moveModule from 'lib/features/move';
 
+import { getMid } from 'lib/layout/LayoutUtil';
+
+import { GRID_DIMENSIONS } from 'lib/features/grid-snapping/visuals/Grid';
+
+import { SPACING } from 'lib/features/grid-snapping/GridUtil';
+
+import { attr as svgAttr } from 'tiny-svg';
+
 
 describe('features/grid-snapping/visuals', function() {
 
@@ -138,4 +146,112 @@ describe('features/grid-snapping/visuals', function() {
 
   });
 
+
+  describe('update', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        modelingModule,
+        gridSnappingModule,
+        gridVisualsModule,
+        moveModule
+      ],
+      canvas: {
+        deferUpdate: false
+      }
+    }));
+
+
+    it('should initially update grid', inject(function(canvas, grid) {
+
+      // then
+      var viewbox = canvas.viewbox(),
+          viewboxMid = getMid(viewbox);
+
+      var gridMid = getMid({
+        x: parseInt(svgAttr(grid.grid, 'x')),
+        y: parseInt(svgAttr(grid.grid, 'y')),
+        width: GRID_DIMENSIONS.width,
+        height: GRID_DIMENSIONS.height
+      });
+
+      // should be centered around viewbox
+      expect(viewboxMid.x).to.be.closeTo(gridMid.x, SPACING / 2);
+      expect(viewboxMid.y).to.be.closeTo(gridMid.y, SPACING / 2);
+    }));
+
+    [
+      { x: 12, y: 24 },
+      { x: 24, y: 48 },
+      { x: 36, y: 72 },
+      { x: 48, y: 96 },
+      { x: 60, y: 120 }
+    ].forEach(function(delta) {
+
+      it('should update on canvas.viewbox.changed ' + JSON.stringify(delta), inject(
+        function(canvas, grid) {
+
+          // when
+          canvas.scroll(delta);
+
+          // then
+          var viewbox = canvas.viewbox(),
+              viewboxMid = getMid(viewbox);
+
+          var gridMid = getMid({
+            x: parseInt(svgAttr(grid.grid, 'x')),
+            y: parseInt(svgAttr(grid.grid, 'y')),
+            width: GRID_DIMENSIONS.width,
+            height: GRID_DIMENSIONS.height
+          });
+
+          // should be centered around viewbox
+          expect(viewboxMid.x).to.be.closeTo(gridMid.x, SPACING / 2);
+          expect(viewboxMid.y).to.be.closeTo(gridMid.y, SPACING / 2);
+        })
+      );
+
+    });
+
+  });
+
+  describe('api', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        modelingModule,
+        gridSnappingModule,
+        gridVisualsModule,
+        moveModule
+      ]
+    }));
+
+
+    it('#_isVisible', inject(function(grid) {
+
+      // then
+      expect(grid._isVisible()).to.be.true;
+
+      // when
+      grid._setVisible(false);
+
+      // then
+      expect(grid._isVisible()).to.be.false;
+    }));
+
+
+    it('#_setVisible', inject(function(grid) {
+
+      // when
+      grid._setVisible(false);
+
+      // then
+      var gfx = grid._getParent();
+
+      expect(grid._isVisible()).to.be.false;
+      expect(gfx.childNodes).to.have.length(0);
+    }));
+
+  });
+
 });