Grid.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import {
  2. append as svgAppend,
  3. attr as svgAttr,
  4. clear as svgClear,
  5. create as svgCreate
  6. } from 'tiny-svg';
  7. import { query as domQuery } from 'min-dom';
  8. var SPACING = 10,
  9. GRID_COLOR = '#ccc',
  10. LAYER_NAME = 'djs-grid';
  11. var GRID_DIMENSIONS = {
  12. width : 100000,
  13. height: 100000
  14. };
  15. export default function Grid(canvas, config, eventBus) {
  16. this._canvas = canvas;
  17. this.hasGrid = false;
  18. if (config) {
  19. this.visible = config.visible === false ? false : true;
  20. } else {
  21. this.visible = true;
  22. }
  23. var self = this;
  24. eventBus.on('diagram.init', function() {
  25. self._init();
  26. self.setVisible(self.visible);
  27. });
  28. }
  29. Grid.prototype._init = function() {
  30. var defs = domQuery('defs', this._canvas._svg);
  31. if (!defs) {
  32. defs = svgCreate('defs');
  33. svgAppend(this._canvas._svg, defs);
  34. }
  35. var pattern = this.pattern = svgCreate('pattern');
  36. svgAttr(pattern, {
  37. id: 'djs-grid-pattern',
  38. width: SPACING,
  39. height: SPACING,
  40. patternUnits: 'userSpaceOnUse'
  41. });
  42. var circle = this.circle = svgCreate('circle');
  43. svgAttr(circle, {
  44. cx: 0.5,
  45. cy: 0.5,
  46. r: 0.5,
  47. fill: GRID_COLOR
  48. });
  49. svgAppend(pattern, circle);
  50. svgAppend(defs, pattern);
  51. var grid = this.grid = svgCreate('rect');
  52. svgAttr(grid, {
  53. x: -(GRID_DIMENSIONS.width / 2),
  54. y: -(GRID_DIMENSIONS.height / 2),
  55. width: GRID_DIMENSIONS.width,
  56. height: GRID_DIMENSIONS.height,
  57. fill: 'url(#djs-grid-pattern)'
  58. });
  59. };
  60. Grid.prototype.isVisible = function() {
  61. return this.visible;
  62. };
  63. Grid.prototype.setVisible = function(visible) {
  64. this.visible = visible;
  65. var parent = this._getParent();
  66. if (visible) {
  67. svgAppend(parent, this.grid);
  68. } else {
  69. svgClear(parent);
  70. }
  71. };
  72. Grid.prototype.toggleVisible = function() {
  73. this.setVisible(!this.visible);
  74. };
  75. Grid.prototype._getParent = function() {
  76. return this._canvas.getLayer(LAYER_NAME, -2);
  77. };
  78. Grid.$inject = [
  79. 'canvas',
  80. 'config.grid',
  81. 'eventBus'
  82. ];