# all files / GitHub/diagram-js/lib/features/grid-snapping/ Grid.js

89.47% Statements 34/38
37.5% Branches 3/8
71.43% Functions 5/7
89.47% Lines 34/38

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111

    1×
    1×

    1×

    75×

    75×

    75×

    75×

    75×

    75×
    75×

    75×

    1×
    75×

    75×
    75×

    75×

    75×

    75×

    75×

    75×

    75×

    75×

    75×

    75×

    1×

    1×
    75×

    75×

    75×
    75×

    1×

    1×
    75×

    1×

     import {
      append as svgAppend,
      attr as svgAttr,
      clear as svgClear,
      create as svgCreate
    } from 'tiny-svg';

    import { query as domQuery } from 'min-dom';

    import { SPACING } from './GridSnapping';

    var GRID_COLOR = '#ccc',
        LAYER_NAME = 'djs-grid';

    var GRID_DIMENSIONS = {
      width : 100000,
      height: 100000
    };

    export default function Grid(canvas, config, eventBus) {
      this._canvas = canvas;

      this.hasGrid = false;

      Iif (config) {
        this.visible = config.visible === false ? false : true;
      } else {
        this.visible = true;
      }

      var self = this;

      eventBus.on('diagram.init', function() {
        self._init();

        self.setVisible(self.visible);
      });
    }

    Grid.prototype._init = function() {
      var defs = domQuery('defs', this._canvas._svg);

      Eif (!defs) {
        defs = svgCreate('defs');

        svgAppend(this._canvas._svg, defs);
      }

      var pattern = this.pattern = svgCreate('pattern');

      svgAttr(pattern, {
        id: 'djs-grid-pattern',
        width: SPACING,
        height: SPACING,
        patternUnits: 'userSpaceOnUse'
      });

      var circle = this.circle = svgCreate('circle');

      svgAttr(circle, {
        cx: 0.5,
        cy: 0.5,
        r: 0.5,
        fill: GRID_COLOR
      });

      svgAppend(pattern, circle);

      svgAppend(defs, pattern);

      var grid = this.grid = svgCreate('rect');

      svgAttr(grid, {
        x: -(GRID_DIMENSIONS.width / 2),
        y: -(GRID_DIMENSIONS.height / 2),
        width: GRID_DIMENSIONS.width,
        height: GRID_DIMENSIONS.height,
        fill: 'url(#djs-grid-pattern)'
      });
    };

    Grid.prototype.isVisible = function() {
      return this.visible;
    };

    Grid.prototype.setVisible = function(visible) {
      this.visible = visible;

      var parent = this._getParent();

      Eif (visible) {
        svgAppend(parent, this.grid);
      } else {
        svgClear(parent);
      }
    };

    Grid.prototype.toggleVisible = function() {
      this.setVisible(!this.visible);
    };

    Grid.prototype._getParent = function() {
      return this._canvas.getLayer(LAYER_NAME, -2);
    };

    Grid.$inject = [
      'canvas',
      'config.grid',
      'eventBus'
    ];