@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
138 lines • 7.77 kB
JavaScript
import { setupTest, clearnTest } from './elem.test';
import { Vector } from '../vector';
import { toPathData, createSlicePathData } from './path';
describe('Dom', () => {
describe('path', () => {
const { svgContainer, svgPath, svgGroup, svgCircle, svgEllipse, svgPolygon, svgText, svgRectangle, svgGroup1, svgGroup2, svgGroup3, svgPath2, svgPath3, } = setupTest();
afterAll(() => clearnTest());
describe('#toPath', () => {
it('should convert SVGPathElement', () => {
const path = Vector.create('path', { d: 'M 100 50 L 200 150' });
expect(path.toPath().getAttribute('d')).toBe('M 100 50 L 200 150');
});
});
describe('#toPathData', () => {
function roundPathData(pathData) {
return pathData != null
? pathData
.split(' ')
.map((command) => {
const number = parseInt(command, 10);
if (Number.isNaN(number)) {
return command;
}
return number.toFixed(0);
})
.join(' ')
: null;
}
it('should throw an exception on convert an invalid SvgElement', () => {
expect(() => {
const group = Vector.create('<group/>');
toPathData(group.node);
}).toThrowError();
});
it('should convert SVGPathElement', () => {
const path = Vector.create('path', { d: 'M 100 50 L 200 150' });
expect(path.toPathData()).toEqual('M 100 50 L 200 150');
});
it('should convert SVGLineElement', () => {
const line = Vector.create('line', {
x1: 100,
y1: 50,
x2: 200,
y2: 150,
});
expect(line.toPathData()).toEqual('M 100 50 L 200 150');
});
it('should convert SVGRectElement', () => {
const rect = Vector.create('rect', {
x: 100,
y: 50,
width: 200,
height: 150,
});
expect(rect.toPathData()).toEqual('M 100 50 H 300 V 200 H 100 V 50 Z');
});
it('should convert SVGRectElement with `rx` and `ry` attributes', () => {
const rect = Vector.create('<rect/>', {
x: 100,
y: 50,
width: 200,
height: 150,
rx: 200,
ry: 200,
});
expect(rect.toPathData()).toEqual('M 100 125 v 0 a 100 75 0 0 0 100 75 h 0 a 100 75 0 0 0 100 -75 v 0 a 100 75 0 0 0 -100 -75 h 0 a 100 75 0 0 0 -100 75 Z');
});
it('should convert SVGCircleElement', () => {
const circle = Vector.create('circle', { cx: 100, cy: 50, r: 50 });
expect(roundPathData(circle.toPathData())).toEqual('M 100 0 C 127 0 150 22 150 50 C 150 77 127 100 100 100 C 72 100 50 77 50 50 C 50 22 72 0 100 0 Z');
});
it('should convert SVGEllipseElement', () => {
const ellipse = Vector.create('ellipse', {
cx: 100,
cy: 50,
rx: 100,
ry: 50,
});
expect(roundPathData(ellipse.toPathData())).toEqual('M 100 0 C 155 0 200 22 200 50 C 200 77 155 100 100 100 C 44 100 0 77 0 50 C 0 22 44 0 100 0 Z');
});
it('should convert SVGPolygonElement', () => {
const polygon = Vector.create('polygon', {
points: '200,10 250,190 160,210',
});
expect(polygon.toPathData()).toEqual('M 200 10 L250 190 L160 210 Z');
});
it('should convert SVGPolylineElement', () => {
const polyline = Vector.create('polyline', {
points: '100,10 200,10 150,110',
});
expect(polyline.toPathData()).toEqual('M 100 10 L200 10 L150 110');
});
});
describe('#normalizePath', () => {
it('should return this for any SVGElement', () => {
expect(Vector.create(svgPath).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgPath2).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgPath3).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgContainer).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgGroup).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgCircle).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgEllipse).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgPolygon).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgText).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgRectangle).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgGroup1).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgGroup2).normalizePath()).toBeInstanceOf(Vector);
expect(Vector.create(svgGroup3).normalizePath()).toBeInstanceOf(Vector);
});
it('shoule normalize path "d" attribute', () => {
expect(Vector.create(svgPath).normalizePath().node.hasAttribute('d')).toBe(true);
expect(Vector.create(svgPath2).normalizePath().node.hasAttribute('d')).toBe(true);
expect(Vector.create(svgPath3).normalizePath().node.hasAttribute('d')).toBe(true);
expect(Vector.create(svgPath).normalizePath().attr('d')).toEqual('M 10 10');
expect(Vector.create(svgPath2).normalizePath().attr('d')).toEqual('M 100 100 C 100 100 0 150 100 200 Z');
expect(Vector.create(svgPath3).normalizePath().attr('d')).toEqual('M 0 0');
});
it('should only normalize SVGPathElement', () => {
expect(Vector.create(svgContainer).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgGroup).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgCircle).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgEllipse).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgPolygon).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgText).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgRectangle).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgGroup1).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgGroup2).normalizePath().node.hasAttribute('d')).toBe(false);
expect(Vector.create(svgGroup3).normalizePath().node.hasAttribute('d')).toBe(false);
});
});
describe('#createSlicePathData', () => {
it('should return the path string of a part of sector', () => {
expect(createSlicePathData(5, 10, 0, Math.PI / 2)).toBe('M10,0A10,10 0 0,1 6.123233995736766e-16,10L3.061616997868383e-16,5A5,5 0 0,0 5,0Z');
});
});
});
});
//# sourceMappingURL=path.test.js.map