svgedit/test/coords_test.js

/* eslint-env qunit */
/* globals $, svgedit, equals */
/* eslint-disable no-var */
$(function () {
  // log function
  QUnit.log = function (details) {
    if (window.console && window.console.log) {
      window.console.log(details.result + ' :: ' + details.message);
    }
  };

  var root = document.getElementById('root');
  var svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
  svgroot.id = 'svgroot';
  root.appendChild(svgroot);
  var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
  svgroot.appendChild(svg);
  var elemId = 1;

  function setUp () {
    // Mock out editor context.
    svgedit.utilities.init({
      getSVGRoot: function () { return svg; },
      getDOMDocument: function () { return null; },
      getDOMContainer: function () { return null; }
    });
    svgedit.coords.init({
      getGridSnapping: function () { return false; },
      getDrawing: function () {
        return {
          getNextId: function () { return '' + elemId++; }
        };
      }
    });
  }

  function tearDown () {
    while (svg.hasChildNodes()) {
      svg.removeChild(svg.firstChild);
    }
  }

  test('Test remapElement(translate) for rect', function () {
    expect(4);

    setUp();

    var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
    rect.setAttribute('x', '200');
    rect.setAttribute('y', '150');
    rect.setAttribute('width', '250');
    rect.setAttribute('height', '120');
    svg.appendChild(rect);

    var attrs = {
      x: '200',
      y: '150',
      width: '125',
      height: '75'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 1; m.b = 0;
    m.c = 0; m.d = 1;
    m.e = 100; m.f = -50;

    svgedit.coords.remapElement(rect, attrs, m);

    equals(rect.getAttribute('x'), '300');
    equals(rect.getAttribute('y'), '100');
    equals(rect.getAttribute('width'), '125');
    equals(rect.getAttribute('height'), '75');

    tearDown();
  });

  test('Test remapElement(scale) for rect', function () {
    expect(4);
    setUp();

    var rect = document.createElementNS(svgedit.NS.SVG, 'rect');
    rect.setAttribute('width', '250');
    rect.setAttribute('height', '120');
    svg.appendChild(rect);

    var attrs = {
      x: '0',
      y: '0',
      width: '250',
      height: '120'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 2; m.b = 0;
    m.c = 0; m.d = 0.5;
    m.e = 0; m.f = 0;

    svgedit.coords.remapElement(rect, attrs, m);

    equals(rect.getAttribute('x'), '0');
    equals(rect.getAttribute('y'), '0');
    equals(rect.getAttribute('width'), '500');
    equals(rect.getAttribute('height'), '60');

    tearDown();
  });

  test('Test remapElement(translate) for circle', function () {
    expect(3);
    setUp();

    var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
    circle.setAttribute('cx', '200');
    circle.setAttribute('cy', '150');
    circle.setAttribute('r', '125');
    svg.appendChild(circle);

    var attrs = {
      cx: '200',
      cy: '150',
      r: '125'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 1; m.b = 0;
    m.c = 0; m.d = 1;
    m.e = 100; m.f = -50;

    svgedit.coords.remapElement(circle, attrs, m);

    equals(circle.getAttribute('cx'), '300');
    equals(circle.getAttribute('cy'), '100');
    equals(circle.getAttribute('r'), '125');

    tearDown();
  });

  test('Test remapElement(scale) for circle', function () {
    expect(3);
    setUp();

    var circle = document.createElementNS(svgedit.NS.SVG, 'circle');
    circle.setAttribute('cx', '200');
    circle.setAttribute('cy', '150');
    circle.setAttribute('r', '250');
    svg.appendChild(circle);

    var attrs = {
      cx: '200',
      cy: '150',
      r: '250'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 2; m.b = 0;
    m.c = 0; m.d = 0.5;
    m.e = 0; m.f = 0;

    svgedit.coords.remapElement(circle, attrs, m);

    equals(circle.getAttribute('cx'), '400');
    equals(circle.getAttribute('cy'), '75');
    // Radius is the minimum that fits in the new bounding box.
    equals(circle.getAttribute('r'), '125');

    tearDown();
  });

  test('Test remapElement(translate) for ellipse', function () {
    expect(4);
    setUp();

    var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
    ellipse.setAttribute('cx', '200');
    ellipse.setAttribute('cy', '150');
    ellipse.setAttribute('rx', '125');
    ellipse.setAttribute('ry', '75');
    svg.appendChild(ellipse);

    var attrs = {
      cx: '200',
      cy: '150',
      rx: '125',
      ry: '75'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 1; m.b = 0;
    m.c = 0; m.d = 1;
    m.e = 100; m.f = -50;

    svgedit.coords.remapElement(ellipse, attrs, m);

    equals(ellipse.getAttribute('cx'), '300');
    equals(ellipse.getAttribute('cy'), '100');
    equals(ellipse.getAttribute('rx'), '125');
    equals(ellipse.getAttribute('ry'), '75');

    tearDown();
  });

  test('Test remapElement(scale) for ellipse', function () {
    expect(4);
    setUp();

    var ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
    ellipse.setAttribute('cx', '200');
    ellipse.setAttribute('cy', '150');
    ellipse.setAttribute('rx', '250');
    ellipse.setAttribute('ry', '120');
    svg.appendChild(ellipse);

    var attrs = {
      cx: '200',
      cy: '150',
      rx: '250',
      ry: '120'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 2; m.b = 0;
    m.c = 0; m.d = 0.5;
    m.e = 0; m.f = 0;

    svgedit.coords.remapElement(ellipse, attrs, m);

    equals(ellipse.getAttribute('cx'), '400');
    equals(ellipse.getAttribute('cy'), '75');
    equals(ellipse.getAttribute('rx'), '500');
    equals(ellipse.getAttribute('ry'), '60');

    tearDown();
  });

  test('Test remapElement(translate) for line', function () {
    expect(4);
    setUp();

    var line = document.createElementNS(svgedit.NS.SVG, 'line');
    line.setAttribute('x1', '50');
    line.setAttribute('y1', '100');
    line.setAttribute('x2', '120');
    line.setAttribute('y2', '200');
    svg.appendChild(line);

    var attrs = {
      x1: '50',
      y1: '100',
      x2: '120',
      y2: '200'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 1; m.b = 0;
    m.c = 0; m.d = 1;
    m.e = 100; m.f = -50;

    svgedit.coords.remapElement(line, attrs, m);

    equals(line.getAttribute('x1'), '150');
    equals(line.getAttribute('y1'), '50');
    equals(line.getAttribute('x2'), '220');
    equals(line.getAttribute('y2'), '150');

    tearDown();
  });

  test('Test remapElement(scale) for line', function () {
    expect(4);
    setUp();

    var line = document.createElementNS(svgedit.NS.SVG, 'line');
    line.setAttribute('x1', '50');
    line.setAttribute('y1', '100');
    line.setAttribute('x2', '120');
    line.setAttribute('y2', '200');
    svg.appendChild(line);

    var attrs = {
      x1: '50',
      y1: '100',
      x2: '120',
      y2: '200'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 2; m.b = 0;
    m.c = 0; m.d = 0.5;
    m.e = 0; m.f = 0;

    svgedit.coords.remapElement(line, attrs, m);

    equals(line.getAttribute('x1'), '100');
    equals(line.getAttribute('y1'), '50');
    equals(line.getAttribute('x2'), '240');
    equals(line.getAttribute('y2'), '100');

    tearDown();
  });

  test('Test remapElement(translate) for text', function () {
    expect(2);
    setUp();

    var text = document.createElementNS(svgedit.NS.SVG, 'text');
    text.setAttribute('x', '50');
    text.setAttribute('y', '100');
    svg.appendChild(text);

    var attrs = {
      x: '50',
      y: '100'
    };

    // Create a translate.
    var m = svg.createSVGMatrix();
    m.a = 1; m.b = 0;
    m.c = 0; m.d = 1;
    m.e = 100; m.f = -50;

    svgedit.coords.remapElement(text, attrs, m);

    equals(text.getAttribute('x'), '150');
    equals(text.getAttribute('y'), '50');

    tearDown();
  });
});