151 lines
4.0 KiB
TypeScript
151 lines
4.0 KiB
TypeScript
import { SVGPathData } from 'svg-pathdata';
|
||
import arcToBezier from 'svg-arc-to-cubic-bezier';
|
||
import { createLogger } from '@/lib/logger';
|
||
|
||
const log = createLogger('SvgPathParser');
|
||
|
||
const typeMap = {
|
||
1: 'Z',
|
||
2: 'M',
|
||
4: 'H',
|
||
8: 'V',
|
||
16: 'L',
|
||
32: 'C',
|
||
64: 'S',
|
||
128: 'Q',
|
||
256: 'T',
|
||
512: 'A',
|
||
};
|
||
|
||
/**
|
||
* 简单解析SVG路径
|
||
* @param d SVG path d属性
|
||
*/
|
||
export const parseSvgPath = (d: string) => {
|
||
const pathData = new SVGPathData(d);
|
||
|
||
const ret = pathData.commands.map((item) => {
|
||
return { ...item, type: typeMap[item.type] };
|
||
});
|
||
return ret;
|
||
};
|
||
|
||
export type SvgPath = ReturnType<typeof parseSvgPath>;
|
||
|
||
/**
|
||
* 解析SVG路径，并将圆弧（A）类型的路径转为三次贝塞尔（C）类型的路径
|
||
* @param d SVG path d属性
|
||
*
|
||
* Returns an empty array if the path is malformed (e.g. unrecognised commands).
|
||
* Mirrors the defensive behaviour of {@link getSvgPathRange}: a single bad path
|
||
* (often produced by upstream LLM hallucinations) shouldn't take down the whole
|
||
* PPTX export.
|
||
*/
|
||
export const toPoints = (d: string) => {
|
||
let pathData: SVGPathData;
|
||
try {
|
||
pathData = new SVGPathData(d);
|
||
} catch (err) {
|
||
log.warn(`Failed to parse SVG path "${d}":`, err);
|
||
return [];
|
||
}
|
||
|
||
const points = [];
|
||
for (const item of pathData.commands) {
|
||
const type = typeMap[item.type];
|
||
|
||
if (item.type === 2 || item.type === 16) {
|
||
points.push({
|
||
x: item.x,
|
||
y: item.y,
|
||
relative: item.relative,
|
||
type,
|
||
});
|
||
}
|
||
if (item.type === 32) {
|
||
points.push({
|
||
x: item.x,
|
||
y: item.y,
|
||
curve: {
|
||
type: 'cubic',
|
||
x1: item.x1,
|
||
y1: item.y1,
|
||
x2: item.x2,
|
||
y2: item.y2,
|
||
},
|
||
relative: item.relative,
|
||
type,
|
||
});
|
||
} else if (item.type === 128) {
|
||
points.push({
|
||
x: item.x,
|
||
y: item.y,
|
||
curve: {
|
||
type: 'quadratic',
|
||
x1: item.x1,
|
||
y1: item.y1,
|
||
},
|
||
relative: item.relative,
|
||
type,
|
||
});
|
||
} else if (item.type === 512) {
|
||
const lastPoint = points[points.length - 1];
|
||
// An arc may appear before any anchor point (e.g. a path that starts with
|
||
// "A", or one whose leading commands push no point). Without `lastPoint`
|
||
// there is nothing to arc from, so skip it instead of throwing — this keeps
|
||
// the documented "malformed path returns []" contract.
|
||
if (!lastPoint || !['M', 'L', 'Q', 'C'].includes(lastPoint.type)) continue;
|
||
|
||
const cubicBezierPoints = arcToBezier({
|
||
px: lastPoint.x as number,
|
||
py: lastPoint.y as number,
|
||
cx: item.x,
|
||
cy: item.y,
|
||
rx: item.rX,
|
||
ry: item.rY,
|
||
xAxisRotation: item.xRot,
|
||
largeArcFlag: item.lArcFlag,
|
||
sweepFlag: item.sweepFlag,
|
||
});
|
||
for (const cbPoint of cubicBezierPoints) {
|
||
points.push({
|
||
x: cbPoint.x,
|
||
y: cbPoint.y,
|
||
curve: {
|
||
type: 'cubic',
|
||
x1: cbPoint.x1,
|
||
y1: cbPoint.y1,
|
||
x2: cbPoint.x2,
|
||
y2: cbPoint.y2,
|
||
},
|
||
relative: false,
|
||
type: 'C',
|
||
});
|
||
}
|
||
} else if (item.type === 1) {
|
||
points.push({ close: true, type });
|
||
} else continue;
|
||
}
|
||
return points;
|
||
};
|
||
|
||
const ZERO_RANGE = { minX: 0, minY: 0, maxX: 0, maxY: 0 } as const;
|
||
|
||
export const getSvgPathRange = (path: string) => {
|
||
try {
|
||
// Delegate to svg-pathdata's bounds, which correctly account for relative
|
||
// commands, H/V/Z (which have no x/y), and arc bulge. The previous hand-rolled
|
||
// version defaulted missing coordinates to 0 — injecting a spurious (0,0) for
|
||
// Z, treating relative deltas as absolute, and ignoring arc extent.
|
||
const { minX, minY, maxX, maxY } = new SVGPathData(path).getBounds();
|
||
if ([minX, minY, maxX, maxY].some((v) => v == null || !Number.isFinite(v))) {
|
||
return { ...ZERO_RANGE };
|
||
}
|
||
return { minX, minY, maxX, maxY };
|
||
} catch {
|
||
return { ...ZERO_RANGE };
|
||
}
|
||
};
|
||
|
||
export type SvgPoints = ReturnType<typeof toPoints>;
|