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;
if (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();
if (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'
]; |