- Linting (ESLint): Finish test folder; unfinished: editor/extensions/, editor/ (root)
Brett Zamir
parent
f7bdf6be18
commit
5bcbb948eb
|
|
@ -33,15 +33,15 @@ $(function () {
|
|||
var segList = path.pathSegList;
|
||||
|
||||
var len = segList.numberOfItems;
|
||||
var i, last_x, last_y;
|
||||
var i; // , lastX, lastY;
|
||||
|
||||
for (i = 0; i < len; ++i) {
|
||||
var seg = segList.getItem(i);
|
||||
var type = seg.pathSegType;
|
||||
if (type == 1) {continue;}
|
||||
if (type === 1) { continue; }
|
||||
var pts = [];
|
||||
$.each(['',1,2], function(j, n) {
|
||||
var x = seg['x'+n], y = seg['y'+n];
|
||||
$.each(['', 1, 2], function (j, n) {
|
||||
var x = seg['x' + n], y = seg['y' + n];
|
||||
if (x !== undefined && y !== undefined) {
|
||||
var pt = svgedit.math.transformPoint(x, y, m);
|
||||
pts.splice(pts.length, 0, pt.x, pt.y);
|
||||
|
|
@ -49,13 +49,12 @@ $(function () {
|
|||
});
|
||||
svgedit.path.replacePathSeg(type, i, pts, path);
|
||||
}
|
||||
|
||||
//svgedit.utilities.reorientGrads(path, m);
|
||||
// svgedit.utilities.reorientGrads(path, m);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var EPSILON = 0.001
|
||||
var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
|
||||
var EPSILON = 0.001;
|
||||
// var svg = document.createElementNS(svgedit.NS.SVG, 'svg');
|
||||
var sandbox = document.getElementById('sandbox');
|
||||
var svgroot = mockCreateSVGElement({
|
||||
'element': 'svg',
|
||||
|
|
@ -63,20 +62,18 @@ $(function () {
|
|||
});
|
||||
sandbox.appendChild(svgroot);
|
||||
|
||||
|
||||
module('svgedit.utilities_bbox', {
|
||||
setup: function() {
|
||||
setup: function () {
|
||||
// We're reusing ID's so we need to do this for transforms.
|
||||
svgedit.transformlist.resetListMap();
|
||||
svgedit.path.init(null);
|
||||
mockAddSvgElementFromJsonCallCount = 0;
|
||||
},
|
||||
teardown: function() {
|
||||
teardown: function () {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
test('Test svgedit.utilities package', function() {
|
||||
test('Test svgedit.utilities package', function () {
|
||||
ok(svgedit.utilities);
|
||||
ok(svgedit.utilities.getBBoxWithTransform);
|
||||
ok(svgedit.utilities.getStrokedBBox);
|
||||
|
|
@ -84,14 +81,13 @@ $(function () {
|
|||
ok(svgedit.utilities.getRotationAngle);
|
||||
});
|
||||
|
||||
|
||||
test("Test getBBoxWithTransform and no transform", function() {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform
|
||||
test('Test getBBoxWithTransform and no transform', function () {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
|
||||
|
||||
var bbox;
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M0,1 L2,3'}
|
||||
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
|
||||
});
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
|
|
@ -104,8 +100,8 @@ $(function () {
|
|||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
});
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual(bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
equal(mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
|
|
@ -114,374 +110,358 @@ $(function () {
|
|||
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
|
||||
});
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 5});
|
||||
equal( mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild( elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, 'height': 5});
|
||||
equal(mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
equal( mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild( g);
|
||||
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
equal(mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild(g);
|
||||
});
|
||||
|
||||
|
||||
test("Test getBBoxWithTransform and a rotation transform", function() {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform
|
||||
test('Test getBBoxWithTransform and a rotation transform', function () {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
|
||||
|
||||
var bbox;
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'}
|
||||
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'}
|
||||
});
|
||||
svgroot.appendChild( elem)
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
close( bbox.x, 10, EPSILON);
|
||||
close( bbox.y, 10, EPSILON);
|
||||
close( bbox.width, 0, EPSILON);
|
||||
close( bbox.height, Math.sqrt(100 + 100), EPSILON);
|
||||
svgroot.removeChild( elem);
|
||||
close(bbox.x, 10, EPSILON);
|
||||
close(bbox.y, 10, EPSILON);
|
||||
close(bbox.width, 0, EPSILON);
|
||||
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20)'}
|
||||
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20)'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
close( bbox.x, 5, EPSILON);
|
||||
close( bbox.y, 15, EPSILON);
|
||||
close( bbox.width, 20, EPSILON);
|
||||
close( bbox.height, 10, EPSILON);
|
||||
equal( mockAddSvgElementFromJsonCallCount, 1);
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
close(bbox.x, 5, EPSILON);
|
||||
close(bbox.y, 15, EPSILON);
|
||||
close(bbox.width, 20, EPSILON);
|
||||
close(bbox.height, 10, EPSILON);
|
||||
equal(mockAddSvgElementFromJsonCallCount, 1);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
var rect = {x: 10, y: 10, width: 10, height: 20};
|
||||
var angle = 45;
|
||||
var origin = { x: 15, y: 20};
|
||||
var origin = {x: 15, y: 20};
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
|
||||
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
mockAddSvgElementFromJsonCallCount = 0;
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
var r2 = rotateRect( rect, angle, origin);
|
||||
close( bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close( bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close( bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close( bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
equal( mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild( elem);
|
||||
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
var r2 = rotateRect(rect, angle, origin);
|
||||
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
equal(mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
// Same as previous but wrapped with g and the transform is with the g.
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
|
||||
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
mockAddSvgElementFromJsonCallCount = 0;
|
||||
bbox = getBBoxWithTransform( g, mockAddSvgElementFromJson, mockPathActions);
|
||||
close( bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close( bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close( bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close( bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
equal( mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild( g);
|
||||
|
||||
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
|
||||
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
equal(mockAddSvgElementFromJsonCallCount, 0);
|
||||
svgroot.removeChild(g);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'ellipse',
|
||||
'attr': { 'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'}
|
||||
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
mockAddSvgElementFromJsonCallCount = 0;
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
|
||||
ok( bbox.x > 45 && bbox.x <= 50);
|
||||
ok( bbox.y > 45 && bbox.y <= 50);
|
||||
ok( bbox.width >= 100 && bbox.width < 110);
|
||||
ok( bbox.height >= 100 && bbox.height < 110);
|
||||
equal( mockAddSvgElementFromJsonCallCount, 1);
|
||||
svgroot.removeChild( elem);
|
||||
|
||||
ok(bbox.x > 45 && bbox.x <= 50);
|
||||
ok(bbox.y > 45 && bbox.y <= 50);
|
||||
ok(bbox.width >= 100 && bbox.width < 110);
|
||||
ok(bbox.height >= 100 && bbox.height < 110);
|
||||
equal(mockAddSvgElementFromJsonCallCount, 1);
|
||||
svgroot.removeChild(elem);
|
||||
});
|
||||
|
||||
|
||||
|
||||
test("Test getBBoxWithTransform with rotation and matrix transforms", function() {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform
|
||||
test('Test getBBoxWithTransform with rotation and matrix transforms', function () {
|
||||
var getBBoxWithTransform = svgedit.utilities.getBBoxWithTransform;
|
||||
|
||||
var bbox;
|
||||
var tx = 10; // tx right
|
||||
var ty = 10; // tx down
|
||||
var txInRotatedSpace = Math.sqrt(tx*tx + ty*ty); // translate in rotated 45 space.
|
||||
var txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
|
||||
var tyInRotatedSpace = 0;
|
||||
var matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
|
||||
var matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10) ' + matrix}
|
||||
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10) ' + matrix}
|
||||
});
|
||||
svgroot.appendChild( elem)
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
close( bbox.x, 10 + tx, EPSILON);
|
||||
close( bbox.y, 10 + ty, EPSILON);
|
||||
close( bbox.width, 0, EPSILON)
|
||||
close( bbox.height, Math.sqrt(100 + 100), EPSILON)
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
close(bbox.x, 10 + tx, EPSILON);
|
||||
close(bbox.y, 10 + ty, EPSILON);
|
||||
close(bbox.width, 0, EPSILON);
|
||||
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
txInRotatedSpace = tx; // translate in rotated 90 space.
|
||||
tyInRotatedSpace = -ty;
|
||||
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
|
||||
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20) ' + matrix}
|
||||
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20) ' + matrix}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
close( bbox.x, 5 + tx, EPSILON);
|
||||
close( bbox.y, 15 + ty, EPSILON);
|
||||
close( bbox.width, 20, EPSILON);
|
||||
close( bbox.height, 10, EPSILON);
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
close(bbox.x, 5 + tx, EPSILON);
|
||||
close(bbox.y, 15 + ty, EPSILON);
|
||||
close(bbox.width, 20, EPSILON);
|
||||
close(bbox.height, 10, EPSILON);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
var rect = {x: 10, y: 10, width: 10, height: 20}
|
||||
var angle = 45
|
||||
var origin = { x: 15, y: 20}
|
||||
var rect = {x: 10, y: 10, width: 10, height: 20};
|
||||
var angle = 45;
|
||||
var origin = {x: 15, y: 20};
|
||||
tx = 10; // tx right
|
||||
ty = 10; // tx down
|
||||
txInRotatedSpace = Math.sqrt(tx*tx + ty*ty); // translate in rotated 45 space.
|
||||
txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space.
|
||||
tyInRotatedSpace = 0;
|
||||
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'
|
||||
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
|
||||
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
var r2 = rotateRect( rect, angle, origin)
|
||||
close( bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close( bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close( bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close( bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
svgroot.removeChild( elem);
|
||||
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
var r2 = rotateRect(rect, angle, origin);
|
||||
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
// Same as previous but wrapped with g and the transform is with the g.
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
|
||||
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
bbox = getBBoxWithTransform( g, mockAddSvgElementFromJson, mockPathActions)
|
||||
close( bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close( bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close( bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close( bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
svgroot.removeChild( g);
|
||||
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
|
||||
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
|
||||
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
|
||||
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
|
||||
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
|
||||
svgroot.removeChild(g);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'ellipse',
|
||||
'attr': { 'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100) ' + matrix}
|
||||
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100) ' + matrix}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getBBoxWithTransform( elem, mockAddSvgElementFromJson, mockPathActions)
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
|
||||
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
|
||||
ok( bbox.x > 45 + tx && bbox.x <= 50 + tx);
|
||||
ok( bbox.y > 45 + ty && bbox.y <= 50 + ty);
|
||||
ok( bbox.width >= 100 && bbox.width < 110);
|
||||
ok( bbox.height >= 100 && bbox.height < 110);
|
||||
svgroot.removeChild( elem);
|
||||
|
||||
ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
|
||||
ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
|
||||
ok(bbox.width >= 100 && bbox.width < 110);
|
||||
ok(bbox.height >= 100 && bbox.height < 110);
|
||||
svgroot.removeChild(elem);
|
||||
});
|
||||
|
||||
|
||||
test("Test getStrokedBBox with stroke-width 10", function() {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox
|
||||
test('Test getStrokedBBox with stroke-width 10', function () {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
|
||||
|
||||
var bbox;
|
||||
var strokeWidth = 10
|
||||
var strokeWidth = 10;
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth}
|
||||
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth}
|
||||
});
|
||||
svgroot.appendChild( elem)
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual(bbox, {"x": 0 - strokeWidth / 2, "y": 1 - strokeWidth / 2, "width": 2 + strokeWidth, "height": 2 + strokeWidth});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0 - strokeWidth / 2, "y": 1 - strokeWidth / 2, "width": 5 + strokeWidth, "height": 10 + strokeWidth});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'line',
|
||||
'attr': { 'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': strokeWidth}
|
||||
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': strokeWidth}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0 - strokeWidth / 2, "y": 1 - strokeWidth / 2, "width": 5 + strokeWidth, "height": 5 + strokeWidth});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0 - strokeWidth / 2, "y": 1 - strokeWidth / 2, "width": 5 + strokeWidth, "height": 10 + strokeWidth});
|
||||
svgroot.removeChild( g);
|
||||
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
|
||||
svgroot.removeChild(g);
|
||||
});
|
||||
|
||||
|
||||
test("Test getStrokedBBox with stroke-width 'none'", function() {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox
|
||||
test("Test getStrokedBBox with stroke-width 'none'", function () {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
|
||||
|
||||
var bbox;
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': 'none'}
|
||||
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': 'none'}
|
||||
});
|
||||
svgroot.appendChild( elem)
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual(bbox, {"x": 0, "y": 1, "width": 2, "height": 2});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'line',
|
||||
'attr': { 'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': 'none'}
|
||||
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': 'none'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 5});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
svgroot.removeChild( g);
|
||||
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
svgroot.removeChild(g);
|
||||
});
|
||||
|
||||
|
||||
test("Test getStrokedBBox with no stroke-width attribute", function() {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox
|
||||
test('Test getStrokedBBox with no stroke-width attribute', function () {
|
||||
var getStrokedBBox = svgedit.utilities.getStrokedBBox;
|
||||
|
||||
var bbox;
|
||||
var elem = mockCreateSVGElement({
|
||||
'element': 'path',
|
||||
'attr': { 'id': 'path', 'd': 'M0,1 L2,3'}
|
||||
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
|
||||
});
|
||||
svgroot.appendChild( elem)
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual(bbox, {"x": 0, "y": 1, "width": 2, "height": 2});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'line',
|
||||
'attr': { 'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
|
||||
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
|
||||
});
|
||||
svgroot.appendChild( elem);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 5});
|
||||
svgroot.removeChild( elem);
|
||||
svgroot.appendChild(elem);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
|
||||
svgroot.removeChild(elem);
|
||||
|
||||
elem = mockCreateSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': { 'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
|
||||
});
|
||||
var g = mockCreateSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {}
|
||||
});
|
||||
g.appendChild( elem);
|
||||
svgroot.appendChild( g);
|
||||
bbox = getStrokedBBox( [elem], mockAddSvgElementFromJson, mockPathActions)
|
||||
deepEqual( bbox, { "x": 0, "y": 1, "width": 5, "height": 10});
|
||||
svgroot.removeChild( g);
|
||||
|
||||
g.appendChild(elem);
|
||||
svgroot.appendChild(g);
|
||||
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
|
||||
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
|
||||
svgroot.removeChild(g);
|
||||
});
|
||||
|
||||
|
||||
function radians( degrees) {
|
||||
function radians (degrees) {
|
||||
return degrees * Math.PI / 180;
|
||||
}
|
||||
function rotatePoint( point, angle, origin) {
|
||||
if( !origin)
|
||||
function rotatePoint (point, angle, origin) {
|
||||
if (!origin) {
|
||||
origin = {x: 0, y: 0};
|
||||
}
|
||||
var x = point.x - origin.x;
|
||||
var y = point.y - origin.y;
|
||||
var theta = radians( angle);
|
||||
var theta = radians(angle);
|
||||
return {
|
||||
x: x * Math.cos(theta) + y * Math.sin(theta) + origin.x,
|
||||
y: x * Math.sin(theta) + y * Math.cos(theta) + origin.y
|
||||
}
|
||||
};
|
||||
}
|
||||
function rotateRect( rect, angle, origin) {
|
||||
var tl = rotatePoint( { x: rect.x, y: rect.y}, angle, origin);
|
||||
var tr = rotatePoint( { x: rect.x + rect.width, y: rect.y}, angle, origin);
|
||||
var br = rotatePoint( { x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin);
|
||||
var bl = rotatePoint( { x: rect.x, y: rect.y + rect.height}, angle, origin);
|
||||
function rotateRect (rect, angle, origin) {
|
||||
var tl = rotatePoint({x: rect.x, y: rect.y}, angle, origin);
|
||||
var tr = rotatePoint({x: rect.x + rect.width, y: rect.y}, angle, origin);
|
||||
var br = rotatePoint({x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin);
|
||||
var bl = rotatePoint({x: rect.x, y: rect.y + rect.height}, angle, origin);
|
||||
|
||||
var minx = Math.min(tl.x, tr.x, bl.x, br.x);
|
||||
var maxx = Math.max(tl.x, tr.x, bl.x, br.x);
|
||||
|
|
@ -495,5 +475,4 @@ $(function () {
|
|||
height: (maxy - miny)
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
380
test/test1.js
380
test/test1.js
|
|
@ -10,17 +10,19 @@ $(function () {
|
|||
};
|
||||
|
||||
// helper functions
|
||||
/*
|
||||
var isIdentity = function (m) {
|
||||
return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);
|
||||
};
|
||||
var matrixString = function (m) {
|
||||
return [m.a, m.b, m.c, m.d, m.e, m.f].join(',');
|
||||
};
|
||||
*/
|
||||
|
||||
var svgCanvas = new $.SvgCanvas(
|
||||
document.getElementById('svgcanvas'), {
|
||||
canvas_expansion: 3,
|
||||
dimensions: [640,480],
|
||||
dimensions: [640, 480],
|
||||
initFill: {
|
||||
color: 'FF0000', // solid red
|
||||
opacity: 1
|
||||
|
|
@ -37,211 +39,229 @@ $(function () {
|
|||
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
|
||||
initTool: 'select',
|
||||
wireframe: false
|
||||
}),
|
||||
svgroot = document.getElementById("svgroot"),
|
||||
svgdoc = svgroot.documentElement,
|
||||
svgns = "http://www.w3.org/2000/svg",
|
||||
xlinkns = "http://www.w3.org/1999/xlink";
|
||||
});
|
||||
var
|
||||
// svgroot = document.getElementById('svgroot'),
|
||||
// svgdoc = svgroot.documentElement,
|
||||
svgns = 'http://www.w3.org/2000/svg',
|
||||
xlinkns = 'http://www.w3.org/1999/xlink';
|
||||
|
||||
module("Basic Module");
|
||||
module('Basic Module');
|
||||
|
||||
test("Test existence of SvgCanvas object", function() {
|
||||
expect(1);
|
||||
equal(typeof {}, typeof svgCanvas);
|
||||
});
|
||||
test('Test existence of SvgCanvas object', function () {
|
||||
expect(1);
|
||||
equal(typeof {}, typeof svgCanvas);
|
||||
});
|
||||
|
||||
module("Path Module");
|
||||
module('Path Module');
|
||||
|
||||
test("Test path conversion from absolute to relative", function() {
|
||||
expect(6);
|
||||
var convert = svgCanvas.pathActions.convertPath;
|
||||
test('Test path conversion from absolute to relative', function () {
|
||||
expect(6);
|
||||
var convert = svgCanvas.pathActions.convertPath;
|
||||
|
||||
// TODO: Test these paths:
|
||||
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
|
||||
// "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z"
|
||||
// "m 0,0 l 200,0 l 0,100 L 0,100"
|
||||
// TODO: Test these paths:
|
||||
// "m400.00491,625.01379a1.78688,1.78688 0 1 1-3.57373,0a1.78688,1.78688 0 1 13.57373,0z"
|
||||
// "m36.812,15.8566c-28.03099,0 -26.28099,12.15601 -26.28099,12.15601l0.03099,12.59399h26.75v3.781h-37.37399c0,0 -17.938,-2.034 -133.00001,26.25c115.06201,28.284 130.71801,27.281 130.71801,27.281h9.34399v-13.125c0,0 -0.504,-15.656 15.40601,-15.656h26.532c0,0 14.90599,0.241 14.90599,-14.406v-24.219c0,0 2.263,-14.65601 -27.032,-14.65601zm-14.75,8.4684c2.662,0 4.813,2.151 4.813,4.813c0,2.661 -2.151,4.812 -4.813,4.812c-2.661,0 -4.812,-2.151 -4.812,-4.812c0,-2.662 2.151,-4.813 4.812,-4.813z"
|
||||
// "m 0,0 l 200,0 l 0,100 L 0,100"
|
||||
|
||||
svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" +
|
||||
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
|
||||
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
|
||||
"</svg>");
|
||||
svgCanvas.setSvgString(
|
||||
"<svg xmlns='http://www.w3.org/2000/svg' width='400' x='300'>" +
|
||||
"<path id='p1' d='M100,100 L200,100 L100,100Z'/>" +
|
||||
"<path id='p2' d='m 0,0 l 200,0 l 0,100 L 0,100'/>" +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
var p1 = document.getElementById("p1"),
|
||||
p2 = document.getElementById("p2"),
|
||||
d_abs = p1.getAttribute("d"),
|
||||
seglist = p1.pathSegList,
|
||||
curseg = null;
|
||||
var p1 = document.getElementById('p1'),
|
||||
p2 = document.getElementById('p2'),
|
||||
dAbs = p1.getAttribute('d'),
|
||||
seglist = p1.pathSegList,
|
||||
curseg = null;
|
||||
|
||||
equal(p1.nodeName, "path", "Expected 'path', got");
|
||||
equal(p1.nodeName, 'path', "Expected 'path', got");
|
||||
|
||||
equal(seglist.numberOfItems, 4, "Number of segments before conversion");
|
||||
equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
|
||||
|
||||
// verify segments before conversion
|
||||
curseg = seglist.getItem(0);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
|
||||
curseg = seglist.getItem(1);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
|
||||
curseg = seglist.getItem(3);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + d_abs);
|
||||
// verify segments before conversion
|
||||
curseg = seglist.getItem(0);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
|
||||
curseg = seglist.getItem(1);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
|
||||
curseg = seglist.getItem(3);
|
||||
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
|
||||
|
||||
// convert and verify segments
|
||||
var d = convert(p1, true);
|
||||
equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
|
||||
// convert and verify segments
|
||||
var d = convert(p1, true);
|
||||
equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
|
||||
|
||||
// TODO: see why this isn't working in SVG-edit
|
||||
d = convert(p2, true);
|
||||
QUnit.log({result: d});
|
||||
d = convert(p2, false);
|
||||
QUnit.log({result: d});
|
||||
});
|
||||
// TODO: see why this isn't working in SVG-edit
|
||||
d = convert(p2, true);
|
||||
QUnit.log({result: d});
|
||||
d = convert(p2, false);
|
||||
QUnit.log({result: d});
|
||||
});
|
||||
|
||||
module('Import Module');
|
||||
module('Import Module');
|
||||
|
||||
test('Test import use', function() {
|
||||
expect(3);
|
||||
test('Test import use', function () {
|
||||
expect(3);
|
||||
|
||||
svgCanvas.setSvgString("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
|
||||
"<rect id='the-rect' width='200' height='200'/>" +
|
||||
"<use id='the-use' xlink:href='#the-rect'/>" +
|
||||
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
|
||||
"<use id='no-use'/>" +
|
||||
"</svg>");
|
||||
svgCanvas.setSvgString(
|
||||
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
|
||||
"<rect id='the-rect' width='200' height='200'/>" +
|
||||
"<use id='the-use' xlink:href='#the-rect'/>" +
|
||||
"<use id='foreign-use' xlink:href='somefile.svg#the-rect'/>" +
|
||||
"<use id='no-use'/>" +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
var u = document.getElementById("the-use"),
|
||||
fu = document.getElementById("foreign-use"),
|
||||
nfu = document.getElementById("no-use");
|
||||
var u = document.getElementById('the-use'),
|
||||
fu = document.getElementById('foreign-use'),
|
||||
nfu = document.getElementById('no-use');
|
||||
|
||||
equal((u && u.nodeName == 'use'), true, 'Did not import <use> element');
|
||||
equal(fu, null, 'Removed <use> element that had a foreign href');
|
||||
equal(nfu, null, 'Removed <use> element that had no href');
|
||||
});
|
||||
equal((u && u.nodeName === 'use'), true, 'Did not import <use> element');
|
||||
equal(fu, null, 'Removed <use> element that had a foreign href');
|
||||
equal(nfu, null, 'Removed <use> element that had no href');
|
||||
});
|
||||
|
||||
// This test shows that an element with an invalid attribute is still parsed in properly
|
||||
// and only the attribute is not imported
|
||||
test('Test invalid attribute', function() {
|
||||
expect(2);
|
||||
// This test shows that an element with an invalid attribute is still parsed in properly
|
||||
// and only the attribute is not imported
|
||||
test('Test invalid attribute', function () {
|
||||
expect(2);
|
||||
|
||||
svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
|
||||
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
|
||||
'</svg>');
|
||||
svgCanvas.setSvgString(
|
||||
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<text x="182.75" y="173.5" id="the-text" fill="#008000" font-size="150" font-family="serif" text-anchor="middle" d="M116,222 L110,108">words</text>' +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
var t = document.getElementById('the-text');
|
||||
var t = document.getElementById('the-text');
|
||||
|
||||
equal(true, (t && t.nodeName === 'text'), 'Did not import <text> element');
|
||||
equal(null, t.getAttribute("d"), "Imported a <text> with a d attribute");
|
||||
});
|
||||
equal(true, (t && t.nodeName === 'text'), 'Did not import <text> element');
|
||||
equal(null, t.getAttribute('d'), 'Imported a <text> with a d attribute');
|
||||
});
|
||||
|
||||
// This test makes sure import/export properly handles namespaced attributes
|
||||
test("Test importing/exporting namespaced attributes", function() {
|
||||
expect(5);
|
||||
var setStr = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com" xmlns:foo="http://example.com">'+
|
||||
'<image xlink:href="../editor/images/logo.png"/>' +
|
||||
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
|
||||
'</svg>');
|
||||
var attrVal = document.getElementById('se_test_elem').getAttributeNS("http://svg-edit.googlecode.com", "foo");
|
||||
// This test makes sure import/export properly handles namespaced attributes
|
||||
test('Test importing/exporting namespaced attributes', function () {
|
||||
expect(5);
|
||||
/* var setStr = */ svgCanvas.setSvgString(
|
||||
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com" xmlns:foo="http://example.com">' +
|
||||
'<image xlink:href="../editor/images/logo.png"/>' +
|
||||
'<polyline id="se_test_elem" se:foo="bar" foo:bar="baz"/>' +
|
||||
'</svg>'
|
||||
);
|
||||
var attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo');
|
||||
|
||||
equal(attrVal === "bar", true, "Preserved namespaced attribute on import");
|
||||
//
|
||||
//console.log('getSvgString' in svgCanvas)
|
||||
equal(attrVal === 'bar', true, 'Preserved namespaced attribute on import');
|
||||
//
|
||||
// console.log('getSvgString' in svgCanvas)
|
||||
|
||||
var output = svgCanvas.getSvgString();
|
||||
//} catch(e) {console.log(e)}
|
||||
//console.log('output',output);
|
||||
var has_xlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1;
|
||||
var has_se = output.indexOf('xmlns:se=') !== -1;
|
||||
var has_foo = output.indexOf('xmlns:foo=') !== -1;
|
||||
var has_attr = output.indexOf('se:foo="bar"') !== -1;
|
||||
var output = svgCanvas.getSvgString();
|
||||
// } catch(e) {console.log(e)}
|
||||
// console.log('output',output);
|
||||
var hasXlink = output.indexOf('xmlns:xlink="http://www.w3.org/1999/xlink"') !== -1;
|
||||
var hasSe = output.indexOf('xmlns:se=') !== -1;
|
||||
var hasFoo = output.indexOf('xmlns:foo=') !== -1;
|
||||
var hasAttr = output.indexOf('se:foo="bar"') !== -1;
|
||||
|
||||
equal(has_attr, true, "Preserved namespaced attribute on export");
|
||||
equal(has_xlink, true, "Included xlink: xmlns");
|
||||
equal(has_se, true, "Included se: xmlns");
|
||||
equal(has_foo, false, "Did not include foo: xmlns");
|
||||
});
|
||||
equal(hasAttr, true, 'Preserved namespaced attribute on export');
|
||||
equal(hasXlink, true, 'Included xlink: xmlns');
|
||||
equal(hasSe, true, 'Included se: xmlns');
|
||||
equal(hasFoo, false, 'Did not include foo: xmlns');
|
||||
});
|
||||
|
||||
test("Test import math elements inside a foreignObject", function() {
|
||||
expect(4);
|
||||
var set = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">'+
|
||||
'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">'+
|
||||
'<msub>'+
|
||||
'<mi>A</mi>'+
|
||||
'<mn>0</mn>'+
|
||||
'</msub>'+
|
||||
'</math>'+
|
||||
'</foreignObject>'+
|
||||
test('Test import math elements inside a foreignObject', function () {
|
||||
expect(4);
|
||||
/* var set = */ svgCanvas.setSvgString(
|
||||
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">' +
|
||||
'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">' +
|
||||
'<msub>' +
|
||||
'<mi>A</mi>' +
|
||||
'<mn>0</mn>' +
|
||||
'</msub>' +
|
||||
'</math>' +
|
||||
'</foreignObject>' +
|
||||
'</svg>'
|
||||
);
|
||||
var fo = document.getElementById('fo');
|
||||
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
|
||||
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
|
||||
var math = fo.firstChild;
|
||||
|
||||
equal(!!math, true, 'Math element exists');
|
||||
equal(math.nodeName, 'math', 'Math element has the proper nodeName');
|
||||
equal(math.getAttribute('id'), 'm', 'Math element has an id');
|
||||
equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
|
||||
});
|
||||
|
||||
test('Test importing SVG into existing drawing', function () {
|
||||
expect(3);
|
||||
|
||||
/* var doc = */ svgCanvas.setSvgString(
|
||||
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<g><title>Layer 1</title>' +
|
||||
'<circle cx="200" cy="200" r="50" fill="blue"/>' +
|
||||
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
|
||||
'</g>' +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
svgCanvas.importSvgString(
|
||||
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<circle cx="50" cy="50" r="40" fill="yellow"/>' +
|
||||
'<rect width="20" height="20" fill="blue"/>' +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
var svgcontent = document.getElementById('svgcontent'),
|
||||
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
|
||||
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
|
||||
ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse');
|
||||
equal(circles.length, 2, 'Found two circles upon importing');
|
||||
equal(rects.length, 1, 'Found one rectangle upon importing');
|
||||
equal(ellipses.length, 1, 'Found one ellipse upon importing');
|
||||
});
|
||||
|
||||
test('Test importing SVG remaps IDs', function () {
|
||||
expect(6);
|
||||
|
||||
/* var doc = */ svgCanvas.setSvgString(
|
||||
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<g><title>Layer 1</title>' +
|
||||
'<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>' +
|
||||
'<ellipse id="svg_2" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
|
||||
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>' +
|
||||
'</g>' +
|
||||
'</svg>');
|
||||
var fo = document.getElementById('fo');
|
||||
// we cannot use getElementById('math') because not all browsers understand MathML and do not know to use the @id attribute
|
||||
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
|
||||
var math = fo.firstChild;
|
||||
|
||||
equal(!!math, true, "Math element exists");
|
||||
equal(math.nodeName, 'math', "Math element has the proper nodeName");
|
||||
equal(math.getAttribute('id'), 'm', "Math element has an id");
|
||||
equal(math.namespaceURI, "http://www.w3.org/1998/Math/MathML", "Preserved MathML namespace");
|
||||
});
|
||||
|
||||
test("Test importing SVG into existing drawing", function() {
|
||||
expect(3);
|
||||
|
||||
var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
|
||||
'<g><title>Layer 1</title>'+
|
||||
'<circle cx="200" cy="200" r="50" fill="blue"/>'+
|
||||
'<ellipse cx="300" cy="100" rx="40" ry="30" fill="green"/>'+
|
||||
'</g>'+
|
||||
'</svg>');
|
||||
|
||||
svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">'+
|
||||
'<circle cx="50" cy="50" r="40" fill="yellow"/>'+
|
||||
'<rect width="20" height="20" fill="blue"/>'+
|
||||
'</svg>');
|
||||
|
||||
var svgcontent = document.getElementById("svgcontent"),
|
||||
circles = svgcontent.getElementsByTagNameNS(svgns, "circle"),
|
||||
rects = svgcontent.getElementsByTagNameNS(svgns, "rect"),
|
||||
ellipses = svgcontent.getElementsByTagNameNS(svgns, "ellipse");
|
||||
equal(circles.length, 2, "Found two circles upon importing");
|
||||
equal(rects.length, 1, "Found one rectangle upon importing");
|
||||
equal(ellipses.length, 1, "Found one ellipse upon importing");
|
||||
});
|
||||
|
||||
test("Test importing SVG remaps IDs", function() {
|
||||
expect(6);
|
||||
|
||||
var doc = svgCanvas.setSvgString('<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">'+
|
||||
'<g><title>Layer 1</title>'+
|
||||
'<ellipse id="svg_1" cx="200" cy="200" rx="50" ry="20" fill="blue"/>'+
|
||||
'<ellipse id="svg_2" cx="300" cy="100" rx="40" ry="30" fill="green"/>'+
|
||||
'<ellipse id="svg_3" cx="300" cy="100" rx="40" ry="30" fill="green"/>'+
|
||||
'</g>'+
|
||||
'</svg>');
|
||||
|
||||
svgCanvas.importSvgString('<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">'+
|
||||
'<defs>'+
|
||||
'<linearGradient id="svg_2">'+
|
||||
'<stop stop-color="red" offset="0"/>'+
|
||||
'<stop stop-color="green" offset="1"/>'+
|
||||
'</linearGradient>'+
|
||||
'<rect id="svg_3" width="20" height="20" fill="blue" stroke="url(#svg_2)"/>'+
|
||||
'</defs>'+
|
||||
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>'+
|
||||
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>'+
|
||||
'</svg>');
|
||||
|
||||
var svgcontent = document.getElementById("svgcontent"),
|
||||
circles = svgcontent.getElementsByTagNameNS(svgns, "circle"),
|
||||
rects = svgcontent.getElementsByTagNameNS(svgns, "rect"),
|
||||
ellipses = svgcontent.getElementsByTagNameNS(svgns, "ellipse"),
|
||||
defs = svgcontent.getElementsByTagNameNS(svgns, "defs"),
|
||||
grads = svgcontent.getElementsByTagNameNS(svgns, "linearGradient"),
|
||||
uses = svgcontent.getElementsByTagNameNS(svgns, "use");
|
||||
notEqual(circles.item(0).id, "svg_1", "Circle not re-identified");
|
||||
notEqual(rects.item(0).id, "svg_3", "Rectangle not re-identified");
|
||||
// TODO: determine why this test fails in WebKit browsers
|
||||
//equal(grads.length, 1, "Linear gradient imported");
|
||||
var grad = defs.item(0).firstChild;
|
||||
notEqual(grad.id, "svg_2", "Linear gradient not re-identified");
|
||||
notEqual(circles.item(0).getAttribute("fill"), "url(#svg_2)", "Circle fill value not remapped");
|
||||
notEqual(rects.item(0).getAttribute("stroke"), "url(#svg_2)", "Rectangle stroke value not remapped");
|
||||
notEqual(uses.item(0).getAttributeNS(xlinkns, "href"), "#svg_3");
|
||||
});
|
||||
svgCanvas.importSvgString(
|
||||
'<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink">' +
|
||||
'<defs>' +
|
||||
'<linearGradient id="svg_2">' +
|
||||
'<stop stop-color="red" offset="0"/>' +
|
||||
'<stop stop-color="green" offset="1"/>' +
|
||||
'</linearGradient>' +
|
||||
'<rect id="svg_3" width="20" height="20" fill="blue" stroke="url(#svg_2)"/>' +
|
||||
'</defs>' +
|
||||
'<circle id="svg_1" cx="50" cy="50" r="40" fill="url(#svg_2)"/>' +
|
||||
'<use id="svg_4" width="30" height="30" xl:href="#svg_3"/>' +
|
||||
'</svg>'
|
||||
);
|
||||
|
||||
var svgcontent = document.getElementById('svgcontent'),
|
||||
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
|
||||
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
|
||||
// ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse'),
|
||||
defs = svgcontent.getElementsByTagNameNS(svgns, 'defs'),
|
||||
// grads = svgcontent.getElementsByTagNameNS(svgns, 'linearGradient'),
|
||||
uses = svgcontent.getElementsByTagNameNS(svgns, 'use');
|
||||
notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
|
||||
notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
|
||||
// TODO: determine why this test fails in WebKit browsers
|
||||
// equal(grads.length, 1, 'Linear gradient imported');
|
||||
var grad = defs.item(0).firstChild;
|
||||
notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
|
||||
notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
|
||||
notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
|
||||
notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue