import { PathRebuilder } from '../core/PathProxy';
|
import { isAroundZero } from './helper';
|
|
const mathSin = Math.sin;
|
const mathCos = Math.cos;
|
const PI = Math.PI;
|
const PI2 = Math.PI * 2;
|
const degree = 180 / PI;
|
|
|
export default class SVGPathRebuilder implements PathRebuilder {
|
private _d: (string | number)[]
|
private _str: string
|
private _invalid: boolean
|
|
// If is start of subpath
|
private _start: boolean
|
private _p: number
|
|
reset(precision?: number) {
|
this._start = true;
|
this._d = [];
|
this._str = '';
|
|
this._p = Math.pow(10, precision || 4);
|
}
|
moveTo(x: number, y: number) {
|
this._add('M', x, y);
|
}
|
lineTo(x: number, y: number) {
|
this._add('L', x, y);
|
}
|
bezierCurveTo(x: number, y: number, x2: number, y2: number, x3: number, y3: number) {
|
this._add('C', x, y, x2, y2, x3, y3);
|
}
|
quadraticCurveTo(x: number, y: number, x2: number, y2: number) {
|
this._add('Q', x, y, x2, y2);
|
}
|
arc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean) {
|
this.ellipse(cx, cy, r, r, 0, startAngle, endAngle, anticlockwise);
|
}
|
ellipse(
|
cx: number, cy: number,
|
rx: number, ry: number,
|
psi: number,
|
startAngle: number,
|
endAngle: number,
|
anticlockwise: boolean
|
) {
|
let dTheta = endAngle - startAngle;
|
const clockwise = !anticlockwise;
|
|
const dThetaPositive = Math.abs(dTheta);
|
const isCircle = isAroundZero(dThetaPositive - PI2)
|
|| (clockwise ? dTheta >= PI2 : -dTheta >= PI2);
|
|
// Mapping to 0~2PI
|
const unifiedTheta = dTheta > 0 ? dTheta % PI2 : (dTheta % PI2 + PI2);
|
|
let large = false;
|
if (isCircle) {
|
large = true;
|
}
|
else if (isAroundZero(dThetaPositive)) {
|
large = false;
|
}
|
else {
|
large = (unifiedTheta >= PI) === !!clockwise;
|
}
|
|
const x0 = cx + rx * mathCos(startAngle);
|
const y0 = cy + ry * mathSin(startAngle);
|
|
if (this._start) {
|
// Move to (x0, y0) only when CMD.A comes at the
|
// first position of a shape.
|
// For instance, when drawing a ring, CMD.A comes
|
// after CMD.M, so it's unnecessary to move to
|
// (x0, y0).
|
this._add('M', x0, y0);
|
}
|
|
const xRot = Math.round(psi * degree);
|
// It will not draw if start point and end point are exactly the same
|
// We need to add two arcs
|
if (isCircle) {
|
const p = 1 / this._p;
|
const dTheta = (clockwise ? 1 : -1) * (PI2 - p);
|
this._add(
|
'A', rx, ry, xRot, 1, +clockwise,
|
cx + rx * mathCos(startAngle + dTheta),
|
cy + ry * mathSin(startAngle + dTheta)
|
);
|
// TODO.
|
// Usually we can simply divide the circle into two halfs arcs.
|
// But it will cause slightly diff with previous screenshot.
|
// We can't tell it but visual regression test can. To avoid too much breaks.
|
// We keep the logic on the browser as before.
|
// But in SSR mode wich has lower precision. We close the circle by adding another arc.
|
if (p > 1e-2) {
|
this._add('A', rx, ry, xRot, 0, +clockwise, x0, y0);
|
}
|
}
|
else {
|
const x = cx + rx * mathCos(endAngle);
|
const y = cy + ry * mathSin(endAngle);
|
|
// FIXME Ellipse
|
this._add('A', rx, ry, xRot, +large, +clockwise, x, y);
|
}
|
|
}
|
rect(x: number, y: number, w: number, h: number) {
|
this._add('M', x, y);
|
// Use relative coordinates to reduce the size.
|
this._add('l', w, 0);
|
this._add('l', 0, h);
|
this._add('l', -w, 0);
|
// this._add('L', x, y);
|
this._add('Z');
|
}
|
closePath() {
|
// Not use Z as first command
|
if (this._d.length > 0) {
|
this._add('Z');
|
}
|
}
|
|
_add(cmd: string, a?: number, b?: number, c?: number, d?: number, e?: number, f?: number, g?: number, h?: number) {
|
const vals = [];
|
const p = this._p;
|
for (let i = 1; i < arguments.length; i++) {
|
const val = arguments[i];
|
if (isNaN(val)) {
|
this._invalid = true;
|
return;
|
}
|
vals.push(Math.round(val * p) / p);
|
}
|
this._d.push(cmd + vals.join(' '));
|
this._start = cmd === 'Z';
|
}
|
|
generateStr() {
|
this._str = this._invalid ? '' : this._d.join('');
|
this._d = [];
|
}
|
getStr() {
|
return this._str;
|
}
|
}
|
