svgedit/dist/extensions/ext-grid.js

var svgEditorExtension_grid = (function () {
  'use strict';

  /* globals jQuery */
  /*
   * ext-grid.js
   *
   * Licensed under the Apache License, Version 2
   *
   * Copyright(c) 2010 Redou Mine
   * Copyright(c) 2010 Alexis Deveria
   *
   */

  var extGrid = {
    name: 'view_grid',
    init: function init(_ref) {
      var NS = _ref.NS,
          getTypeMap = _ref.getTypeMap;

      var svgEditor = this;
      var $ = jQuery;
      var svgCanvas = svgEditor.canvas;
      var svgdoc = document.getElementById('svgcanvas').ownerDocument,
          assignAttributes = svgCanvas.assignAttributes,
          hcanvas = document.createElement('canvas'),
          canvBG = $('#canvasBackground'),
          units = getTypeMap(),
          intervals = [0.01, 0.1, 1, 10, 100, 1000];

      var showGrid = svgEditor.curConfig.showGrid || false;

      $(hcanvas).hide().appendTo('body');

      var canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
      assignAttributes(canvasGrid, {
        id: 'canvasGrid',
        width: '100%',
        height: '100%',
        x: 0,
        y: 0,
        overflow: 'visible',
        display: 'none'
      });
      canvBG.append(canvasGrid);

      // grid-pattern
      var gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
      assignAttributes(gridPattern, {
        id: 'gridpattern',
        patternUnits: 'userSpaceOnUse',
        x: 0, // -(value.strokeWidth / 2), // position for strokewidth
        y: 0, // -(value.strokeWidth / 2), // position for strokewidth
        width: 100,
        height: 100
      });

      var gridimg = svgdoc.createElementNS(NS.SVG, 'image');
      assignAttributes(gridimg, {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      });
      gridPattern.append(gridimg);
      $('#svgroot defs').append(gridPattern);

      // grid-box
      var gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
      assignAttributes(gridBox, {
        width: '100%',
        height: '100%',
        x: 0,
        y: 0,
        'stroke-width': 0,
        stroke: 'none',
        fill: 'url(#gridpattern)',
        style: 'pointer-events: none; display:visible;'
      });
      $('#canvasGrid').append(gridBox);

      function updateGrid(zoom) {
        // TODO: Try this with <line> elements, then compare performance difference
        var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
        var uMulti = unit * zoom;
        // Calculate the main number interval
        var rawM = 100 / uMulti;
        var multi = 1;
        for (var i = 0; i < intervals.length; i++) {
          var num = intervals[i];
          multi = num;
          if (rawM <= num) {
            break;
          }
        }
        var bigInt = multi * uMulti;

        // Set the canvas size to the width of the container
        hcanvas.width = bigInt;
        hcanvas.height = bigInt;
        var ctx = hcanvas.getContext('2d');
        var curD = 0.5;
        var part = bigInt / 10;

        ctx.globalAlpha = 0.2;
        ctx.strokeStyle = svgEditor.curConfig.gridColor;
        for (var _i = 1; _i < 10; _i++) {
          var subD = Math.round(part * _i) + 0.5;
          // const lineNum = (i % 2)?12:10;
          var lineNum = 0;
          ctx.moveTo(subD, bigInt);
          ctx.lineTo(subD, lineNum);
          ctx.moveTo(bigInt, subD);
          ctx.lineTo(lineNum, subD);
        }
        ctx.stroke();
        ctx.beginPath();
        ctx.globalAlpha = 0.5;
        ctx.moveTo(curD, bigInt);
        ctx.lineTo(curD, 0);

        ctx.moveTo(bigInt, curD);
        ctx.lineTo(0, curD);
        ctx.stroke();

        var datauri = hcanvas.toDataURL('image/png');
        gridimg.setAttribute('width', bigInt);
        gridimg.setAttribute('height', bigInt);
        gridimg.parentNode.setAttribute('width', bigInt);
        gridimg.parentNode.setAttribute('height', bigInt);
        svgCanvas.setHref(gridimg, datauri);
      }

      function gridUpdate() {
        if (showGrid) {
          updateGrid(svgCanvas.getZoom());
        }
        $('#canvasGrid').toggle(showGrid);
        $('#view_grid').toggleClass('push_button_pressed tool_button');
      }
      return {
        name: 'view_grid',
        svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',

        zoomChanged: function zoomChanged(zoom) {
          if (showGrid) {
            updateGrid(zoom);
          }
        },
        callback: function callback() {
          if (showGrid) {
            gridUpdate();
          }
        },

        buttons: [{
          id: 'view_grid',
          type: 'context',
          panel: 'editor_panel',
          title: 'Show/Hide Grid',
          events: {
            click: function click() {
              svgEditor.curConfig.showGrid = showGrid = !showGrid;
              gridUpdate();
            }
          }
        }]
      };
    }
  };

  return extGrid;

}());