feat(dia.Paper): add drawGridSize option (#2139)

docs/src/joint/api/dia/Paper/prototype/options/drawGridSize.html

@@ -0,0 +1,4 @@
+<code>drawGridSize</code> - the size of the visual grid drawn using the <a href="#dia.Paper.prototype.options.drawGrid">drawGrid</a> option.
+If this option is set to <code>null</code> <i>(default)</i>, the <a href="#dia.Paper.prototype.options.gridSize">gridSize</a> option is used instead.
+
+If the option is changed after the paper has been initialized, call <a href="#dia.Paper.prototype.drawGrid">drawGrid</a> to update the grid.

src/dia/Paper.mjs

@@ -105,10 +105,11 @@ export const Paper = View.extend({
         height: 600,
         origin: { x: 0, y: 0 }, // x,y coordinates in top-left corner
         gridSize: 1,
-
         // Whether or not to draw the grid lines on the paper's DOM element.
         // e.g drawGrid: true, drawGrid: { color: 'red', thickness: 2 }
         drawGrid: false,
+        // If not set, the size of the visual grid is the same as the `gridSize`.
+        drawGridSize: null,
 
         // Whether or not to draw the background on the paper's DOM element.
         // e.g. background: { color: 'lightblue', image: '/paper-background.png', repeat: 'flip-xy' }
@@ -2558,9 +2559,11 @@ export const Paper = View.extend({
 
     setGridSize: function(gridSize) {
 
-        this.options.gridSize = gridSize;
+        const { options } = this;
+        options.gridSize = gridSize;
 
-        if (this.options.drawGrid) {
+        if (options.drawGrid && !options.drawGridSize) {
+            // Do not redraw the grid if the `drawGridSize` is set.
             this.drawGrid();
         }
 
@@ -2651,7 +2654,7 @@ export const Paper = View.extend({
 
     drawGrid: function(opt) {
 
-        var gridSize = this.options.gridSize;
+        const gridSize = this.options.drawGridSize || this.options.gridSize;
         if (gridSize <= 1) {
             return this.clearGrid();
         }

test/jointjs/paper.js

@@ -1398,6 +1398,36 @@ QUnit.module('paper', function(hooks) {
             return paper;
         };
 
+        QUnit.module('drawGridSize option', function(hooks) {
+
+            QUnit.test('is used to draw grid', function(assert) {
+                const paper = new joint.dia.Paper({
+                    drawGrid: true,
+                    gridSize: 1,
+                    drawGridSize: 17
+                });
+                const svg = getGridVel(paper);
+                const pattern = svg.findOne('pattern');
+                assert.ok(pattern);
+                assert.equal(pattern.attr('width'), 17);
+                assert.equal(pattern.attr('height'), 17);
+                paper.remove();
+            });
+
+            QUnit.test('calling setGridSize() does not update the grid', function(assert) {
+                const paper = new joint.dia.Paper({
+                    drawGrid: true,
+                    gridSize: 1,
+                    drawGridSize: 17
+                });
+                const drawGridSpy = sinon.spy(paper, 'drawGrid');
+                paper.setGridSize(5);
+                assert.ok(drawGridSpy.notCalled);
+                drawGridSpy.restore();
+                paper.remove();
+            });
+        });
+
         QUnit.test('no grid', function(assert) {
 
             var paper = preparePaper(false);

types/joint.d.ts

@@ -1247,6 +1247,7 @@ export namespace dia {
             perpendicularLinks?: boolean;
             linkConnectionPoint?: LinkView.GetConnectionPoint;
             drawGrid?: boolean | GridOptions | GridOptions[];
+            drawGridSize?: number | null;
             background?: BackgroundOptions;
             labelsLayer?: boolean | Paper.Layers | string;
             // interactions