| 'use strict'; |
| |
| /** |
| * @typedef {import('../lib//types').PathDataItem} PathDataItem |
| */ |
| |
| const { collectStylesheet, computeStyle } = require('../lib/style.js'); |
| const { visit } = require('../lib/xast.js'); |
| const { pathElems } = require('./_collections.js'); |
| const { path2js, js2path } = require('./_path.js'); |
| const { applyTransforms } = require('./applyTransforms.js'); |
| const { cleanupOutData, toFixed } = require('../lib/svgo/tools'); |
| |
| exports.name = 'convertPathData'; |
| exports.description = |
| 'optimizes path data: writes in shorter form, applies transformations'; |
| |
| /** @type {(data: number[]) => number[]} */ |
| let roundData; |
| /** @type {number | false} */ |
| let precision; |
| /** @type {number} */ |
| let error; |
| /** @type {number} */ |
| let arcThreshold; |
| /** @type {number} */ |
| let arcTolerance; |
| |
| /** |
| * @typedef {{ |
| * applyTransforms: boolean, |
| * applyTransformsStroked: boolean, |
| * makeArcs: { |
| * threshold: number, |
| * tolerance: number, |
| * }, |
| * straightCurves: boolean, |
| * convertToQ: boolean, |
| * lineShorthands: boolean, |
| * convertToZ: boolean, |
| * curveSmoothShorthands: boolean, |
| * floatPrecision: number | false, |
| * transformPrecision: number, |
| * smartArcRounding: boolean, |
| * removeUseless: boolean, |
| * collapseRepeated: boolean, |
| * utilizeAbsolute: boolean, |
| * leadingZero: boolean, |
| * negativeExtraSpace: boolean, |
| * noSpaceAfterFlags: boolean, |
| * forceAbsolutePath: boolean, |
| * }} InternalParams |
| */ |
| |
| /** |
| * @typedef {[number, number]} Point |
| */ |
| |
| /** |
| * @typedef {{ |
| * center: Point, |
| * radius: number |
| * }} Circle |
| */ |
| |
| /** |
| * Convert absolute Path to relative, |
| * collapse repeated instructions, |
| * detect and convert Lineto shorthands, |
| * remove useless instructions like "l0,0", |
| * trim useless delimiters and leading zeros, |
| * decrease accuracy of floating-point numbers. |
| * |
| * @see https://www.w3.org/TR/SVG11/paths.html#PathData |
| * |
| * @author Kir Belevich |
| * |
| * @type {import('./plugins-types').Plugin<'convertPathData'>} |
| */ |
| exports.fn = (root, params) => { |
| const { |
| // TODO convert to separate plugin in v3 |
| applyTransforms: _applyTransforms = true, |
| applyTransformsStroked = true, |
| makeArcs = { |
| threshold: 2.5, // coefficient of rounding error |
| tolerance: 0.5, // percentage of radius |
| }, |
| straightCurves = true, |
| convertToQ = true, |
| lineShorthands = true, |
| convertToZ = true, |
| curveSmoothShorthands = true, |
| floatPrecision = 3, |
| transformPrecision = 5, |
| smartArcRounding = true, |
| removeUseless = true, |
| collapseRepeated = true, |
| utilizeAbsolute = true, |
| leadingZero = true, |
| negativeExtraSpace = true, |
| noSpaceAfterFlags = false, // a20 60 45 0 1 30 20 → a20 60 45 0130 20 |
| forceAbsolutePath = false, |
| } = params; |
| |
| /** |
| * @type {InternalParams} |
| */ |
| const newParams = { |
| applyTransforms: _applyTransforms, |
| applyTransformsStroked, |
| makeArcs, |
| straightCurves, |
| convertToQ, |
| lineShorthands, |
| convertToZ, |
| curveSmoothShorthands, |
| floatPrecision, |
| transformPrecision, |
| smartArcRounding, |
| removeUseless, |
| collapseRepeated, |
| utilizeAbsolute, |
| leadingZero, |
| negativeExtraSpace, |
| noSpaceAfterFlags, |
| forceAbsolutePath, |
| }; |
| |
| // invoke applyTransforms plugin |
| if (_applyTransforms) { |
| visit( |
| root, |
| // @ts-ignore |
| applyTransforms(root, { |
| transformPrecision, |
| applyTransformsStroked, |
| }), |
| ); |
| } |
| |
| const stylesheet = collectStylesheet(root); |
| return { |
| element: { |
| enter: (node) => { |
| if (pathElems.has(node.name) && node.attributes.d != null) { |
| const computedStyle = computeStyle(stylesheet, node); |
| precision = floatPrecision; |
| error = |
| precision !== false |
| ? +Math.pow(0.1, precision).toFixed(precision) |
| : 1e-2; |
| roundData = |
| precision && precision > 0 && precision < 20 ? strongRound : round; |
| if (makeArcs) { |
| arcThreshold = makeArcs.threshold; |
| arcTolerance = makeArcs.tolerance; |
| } |
| const hasMarkerMid = computedStyle['marker-mid'] != null; |
| |
| const maybeHasStroke = |
| computedStyle.stroke && |
| (computedStyle.stroke.type === 'dynamic' || |
| computedStyle.stroke.value !== 'none'); |
| const maybeHasLinecap = |
| computedStyle['stroke-linecap'] && |
| (computedStyle['stroke-linecap'].type === 'dynamic' || |
| computedStyle['stroke-linecap'].value !== 'butt'); |
| const maybeHasStrokeAndLinecap = maybeHasStroke && maybeHasLinecap; |
| const isSafeToUseZ = maybeHasStroke |
| ? computedStyle['stroke-linecap']?.type === 'static' && |
| computedStyle['stroke-linecap'].value === 'round' && |
| computedStyle['stroke-linejoin']?.type === 'static' && |
| computedStyle['stroke-linejoin'].value === 'round' |
| : true; |
| |
| var data = path2js(node); |
| |
| // TODO: get rid of functions returns |
| if (data.length) { |
| convertToRelative(data); |
| |
| data = filters(data, newParams, { |
| isSafeToUseZ, |
| maybeHasStrokeAndLinecap, |
| hasMarkerMid, |
| }); |
| |
| if (utilizeAbsolute) { |
| data = convertToMixed(data, newParams); |
| } |
| |
| // @ts-ignore |
| js2path(node, data, newParams); |
| } |
| } |
| }, |
| }, |
| }; |
| }; |
| |
| /** |
| * Convert absolute path data coordinates to relative. |
| * |
| * @type {(pathData: PathDataItem[]) => PathDataItem[]} |
| */ |
| const convertToRelative = (pathData) => { |
| let start = [0, 0]; |
| let cursor = [0, 0]; |
| let prevCoords = [0, 0]; |
| |
| for (let i = 0; i < pathData.length; i += 1) { |
| const pathItem = pathData[i]; |
| let { command, args } = pathItem; |
| |
| // moveto (x y) |
| if (command === 'm') { |
| // update start and cursor |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| start[0] = cursor[0]; |
| start[1] = cursor[1]; |
| } |
| if (command === 'M') { |
| // M → m |
| // skip first moveto |
| if (i !== 0) { |
| command = 'm'; |
| } |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| // update start and cursor |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| start[0] = cursor[0]; |
| start[1] = cursor[1]; |
| } |
| |
| // lineto (x y) |
| if (command === 'l') { |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| } |
| if (command === 'L') { |
| // L → l |
| command = 'l'; |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| } |
| |
| // horizontal lineto (x) |
| if (command === 'h') { |
| cursor[0] += args[0]; |
| } |
| if (command === 'H') { |
| // H → h |
| command = 'h'; |
| args[0] -= cursor[0]; |
| cursor[0] += args[0]; |
| } |
| |
| // vertical lineto (y) |
| if (command === 'v') { |
| cursor[1] += args[0]; |
| } |
| if (command === 'V') { |
| // V → v |
| command = 'v'; |
| args[0] -= cursor[1]; |
| cursor[1] += args[0]; |
| } |
| |
| // curveto (x1 y1 x2 y2 x y) |
| if (command === 'c') { |
| cursor[0] += args[4]; |
| cursor[1] += args[5]; |
| } |
| if (command === 'C') { |
| // C → c |
| command = 'c'; |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| args[2] -= cursor[0]; |
| args[3] -= cursor[1]; |
| args[4] -= cursor[0]; |
| args[5] -= cursor[1]; |
| cursor[0] += args[4]; |
| cursor[1] += args[5]; |
| } |
| |
| // smooth curveto (x2 y2 x y) |
| if (command === 's') { |
| cursor[0] += args[2]; |
| cursor[1] += args[3]; |
| } |
| if (command === 'S') { |
| // S → s |
| command = 's'; |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| args[2] -= cursor[0]; |
| args[3] -= cursor[1]; |
| cursor[0] += args[2]; |
| cursor[1] += args[3]; |
| } |
| |
| // quadratic Bézier curveto (x1 y1 x y) |
| if (command === 'q') { |
| cursor[0] += args[2]; |
| cursor[1] += args[3]; |
| } |
| if (command === 'Q') { |
| // Q → q |
| command = 'q'; |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| args[2] -= cursor[0]; |
| args[3] -= cursor[1]; |
| cursor[0] += args[2]; |
| cursor[1] += args[3]; |
| } |
| |
| // smooth quadratic Bézier curveto (x y) |
| if (command === 't') { |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| } |
| if (command === 'T') { |
| // T → t |
| command = 't'; |
| args[0] -= cursor[0]; |
| args[1] -= cursor[1]; |
| cursor[0] += args[0]; |
| cursor[1] += args[1]; |
| } |
| |
| // elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) |
| if (command === 'a') { |
| cursor[0] += args[5]; |
| cursor[1] += args[6]; |
| } |
| if (command === 'A') { |
| // A → a |
| command = 'a'; |
| args[5] -= cursor[0]; |
| args[6] -= cursor[1]; |
| cursor[0] += args[5]; |
| cursor[1] += args[6]; |
| } |
| |
| // closepath |
| if (command === 'Z' || command === 'z') { |
| // reset cursor |
| cursor[0] = start[0]; |
| cursor[1] = start[1]; |
| } |
| |
| pathItem.command = command; |
| pathItem.args = args; |
| // store absolute coordinates for later use |
| // base should preserve reference from other element |
| // @ts-ignore |
| pathItem.base = prevCoords; |
| // @ts-ignore |
| pathItem.coords = [cursor[0], cursor[1]]; |
| // @ts-ignore |
| prevCoords = pathItem.coords; |
| } |
| |
| return pathData; |
| }; |
| |
| /** |
| * Main filters loop. |
| * |
| * @type {( |
| * path: PathDataItem[], |
| * params: InternalParams, |
| * aux: { isSafeToUseZ: boolean, maybeHasStrokeAndLinecap: boolean, hasMarkerMid: boolean } |
| * ) => PathDataItem[]} |
| */ |
| function filters( |
| path, |
| params, |
| { isSafeToUseZ, maybeHasStrokeAndLinecap, hasMarkerMid }, |
| ) { |
| const stringify = data2Path.bind(null, params); |
| const relSubpoint = [0, 0]; |
| const pathBase = [0, 0]; |
| /** @type {any} */ |
| let prev = {}; |
| /** @type {Point | undefined} */ |
| let prevQControlPoint; |
| |
| path = path.filter(function (item, index, path) { |
| const qControlPoint = prevQControlPoint; |
| prevQControlPoint = undefined; |
| |
| let command = item.command; |
| let data = item.args; |
| let next = path[index + 1]; |
| |
| if (command !== 'Z' && command !== 'z') { |
| var sdata = data, |
| circle; |
| |
| if (command === 's') { |
| sdata = [0, 0].concat(data); |
| |
| const pdata = prev.args; |
| const n = pdata.length; |
| |
| // (-x, -y) of the prev tangent point relative to the current point |
| sdata[0] = pdata[n - 2] - pdata[n - 4]; |
| sdata[1] = pdata[n - 1] - pdata[n - 3]; |
| } |
| |
| // convert curves to arcs if possible |
| if ( |
| params.makeArcs && |
| (command == 'c' || command == 's') && |
| isConvex(sdata) && |
| (circle = findCircle(sdata)) |
| ) { |
| var r = roundData([circle.radius])[0], |
| angle = findArcAngle(sdata, circle), |
| sweep = sdata[5] * sdata[0] - sdata[4] * sdata[1] > 0 ? 1 : 0, |
| /** |
| * @type {PathDataItem} |
| */ |
| arc = { |
| command: 'a', |
| args: [r, r, 0, 0, sweep, sdata[4], sdata[5]], |
| // @ts-ignore |
| coords: item.coords.slice(), |
| // @ts-ignore |
| base: item.base, |
| }, |
| /** |
| * @type {PathDataItem[]} |
| */ |
| output = [arc], |
| // relative coordinates to adjust the found circle |
| /** |
| * @type {Point} |
| */ |
| relCenter = [ |
| circle.center[0] - sdata[4], |
| circle.center[1] - sdata[5], |
| ], |
| relCircle = { center: relCenter, radius: circle.radius }, |
| arcCurves = [item], |
| hasPrev = 0, |
| suffix = '', |
| nextLonghand; |
| |
| if ( |
| (prev.command == 'c' && |
| isConvex(prev.args) && |
| isArcPrev(prev.args, circle)) || |
| (prev.command == 'a' && prev.sdata && isArcPrev(prev.sdata, circle)) |
| ) { |
| arcCurves.unshift(prev); |
| // @ts-ignore |
| arc.base = prev.base; |
| // @ts-ignore |
| arc.args[5] = arc.coords[0] - arc.base[0]; |
| // @ts-ignore |
| arc.args[6] = arc.coords[1] - arc.base[1]; |
| var prevData = prev.command == 'a' ? prev.sdata : prev.args; |
| var prevAngle = findArcAngle(prevData, { |
| center: [ |
| prevData[4] + circle.center[0], |
| prevData[5] + circle.center[1], |
| ], |
| radius: circle.radius, |
| }); |
| angle += prevAngle; |
| if (angle > Math.PI) arc.args[3] = 1; |
| hasPrev = 1; |
| } |
| |
| // check if next curves are fitting the arc |
| for ( |
| var j = index; |
| (next = path[++j]) && (next.command === 'c' || next.command === 's'); |
| |
| ) { |
| var nextData = next.args; |
| if (next.command == 's') { |
| nextLonghand = makeLonghand( |
| { command: 's', args: next.args.slice() }, |
| path[j - 1].args, |
| ); |
| nextData = nextLonghand.args; |
| nextLonghand.args = nextData.slice(0, 2); |
| suffix = stringify([nextLonghand]); |
| } |
| if (isConvex(nextData) && isArc(nextData, relCircle)) { |
| angle += findArcAngle(nextData, relCircle); |
| if (angle - 2 * Math.PI > 1e-3) break; // more than 360° |
| if (angle > Math.PI) arc.args[3] = 1; |
| arcCurves.push(next); |
| if (2 * Math.PI - angle > 1e-3) { |
| // less than 360° |
| // @ts-ignore |
| arc.coords = next.coords; |
| // @ts-ignore |
| arc.args[5] = arc.coords[0] - arc.base[0]; |
| // @ts-ignore |
| arc.args[6] = arc.coords[1] - arc.base[1]; |
| } else { |
| // full circle, make a half-circle arc and add a second one |
| arc.args[5] = 2 * (relCircle.center[0] - nextData[4]); |
| arc.args[6] = 2 * (relCircle.center[1] - nextData[5]); |
| // @ts-ignore |
| arc.coords = [ |
| // @ts-ignore |
| arc.base[0] + arc.args[5], |
| // @ts-ignore |
| arc.base[1] + arc.args[6], |
| ]; |
| arc = { |
| command: 'a', |
| args: [ |
| r, |
| r, |
| 0, |
| 0, |
| sweep, |
| // @ts-ignore |
| next.coords[0] - arc.coords[0], |
| // @ts-ignore |
| next.coords[1] - arc.coords[1], |
| ], |
| // @ts-ignore |
| coords: next.coords, |
| // @ts-ignore |
| base: arc.coords, |
| }; |
| output.push(arc); |
| j++; |
| break; |
| } |
| relCenter[0] -= nextData[4]; |
| relCenter[1] -= nextData[5]; |
| } else break; |
| } |
| |
| if ((stringify(output) + suffix).length < stringify(arcCurves).length) { |
| if (path[j] && path[j].command == 's') { |
| makeLonghand(path[j], path[j - 1].args); |
| } |
| if (hasPrev) { |
| var prevArc = output.shift(); |
| // @ts-ignore |
| roundData(prevArc.args); |
| // @ts-ignore |
| relSubpoint[0] += prevArc.args[5] - prev.args[prev.args.length - 2]; |
| // @ts-ignore |
| relSubpoint[1] += prevArc.args[6] - prev.args[prev.args.length - 1]; |
| prev.command = 'a'; |
| // @ts-ignore |
| prev.args = prevArc.args; |
| // @ts-ignore |
| item.base = prev.coords = prevArc.coords; |
| } |
| // @ts-ignore |
| arc = output.shift(); |
| if (arcCurves.length == 1) { |
| // @ts-ignore |
| item.sdata = sdata.slice(); // preserve curve data for future checks |
| } else if (arcCurves.length - 1 - hasPrev > 0) { |
| // filter out consumed next items |
| path.splice(index + 1, arcCurves.length - 1 - hasPrev, ...output); |
| } |
| if (!arc) return false; |
| command = 'a'; |
| data = arc.args; |
| // @ts-ignore |
| item.coords = arc.coords; |
| } |
| } |
| |
| // Rounding relative coordinates, taking in account accumulating error |
| // to get closer to absolute coordinates. Sum of rounded value remains same: |
| // l .25 3 .25 2 .25 3 .25 2 -> l .3 3 .2 2 .3 3 .2 2 |
| if (precision !== false) { |
| if ( |
| command === 'm' || |
| command === 'l' || |
| command === 't' || |
| command === 'q' || |
| command === 's' || |
| command === 'c' |
| ) { |
| for (var i = data.length; i--; ) { |
| // @ts-ignore |
| data[i] += item.base[i % 2] - relSubpoint[i % 2]; |
| } |
| } else if (command == 'h') { |
| // @ts-ignore |
| data[0] += item.base[0] - relSubpoint[0]; |
| } else if (command == 'v') { |
| // @ts-ignore |
| data[0] += item.base[1] - relSubpoint[1]; |
| } else if (command == 'a') { |
| // @ts-ignore |
| data[5] += item.base[0] - relSubpoint[0]; |
| // @ts-ignore |
| data[6] += item.base[1] - relSubpoint[1]; |
| } |
| roundData(data); |
| |
| if (command == 'h') relSubpoint[0] += data[0]; |
| else if (command == 'v') relSubpoint[1] += data[0]; |
| else { |
| relSubpoint[0] += data[data.length - 2]; |
| relSubpoint[1] += data[data.length - 1]; |
| } |
| roundData(relSubpoint); |
| |
| if (command === 'M' || command === 'm') { |
| pathBase[0] = relSubpoint[0]; |
| pathBase[1] = relSubpoint[1]; |
| } |
| } |
| |
| // round arc radius more accurately |
| // eg m 0 0 a 1234.567 1234.567 0 0 1 10 0 -> m 0 0 a 1235 1235 0 0 1 10 0 |
| const sagitta = command === 'a' ? calculateSagitta(data) : undefined; |
| if (params.smartArcRounding && sagitta !== undefined && precision) { |
| for (let precisionNew = precision; precisionNew >= 0; precisionNew--) { |
| const radius = toFixed(data[0], precisionNew); |
| const sagittaNew = /** @type {number} */ ( |
| calculateSagitta([radius, radius, ...data.slice(2)]) |
| ); |
| if (Math.abs(sagitta - sagittaNew) < error) { |
| data[0] = radius; |
| data[1] = radius; |
| } else { |
| break; |
| } |
| } |
| } |
| |
| // convert straight curves into lines segments |
| if (params.straightCurves) { |
| if ( |
| (command === 'c' && isCurveStraightLine(data)) || |
| (command === 's' && isCurveStraightLine(sdata)) |
| ) { |
| if (next && next.command == 's') makeLonghand(next, data); // fix up next curve |
| command = 'l'; |
| data = data.slice(-2); |
| } else if (command === 'q' && isCurveStraightLine(data)) { |
| if (next && next.command == 't') makeLonghand(next, data); // fix up next curve |
| command = 'l'; |
| data = data.slice(-2); |
| } else if ( |
| command === 't' && |
| prev.command !== 'q' && |
| prev.command !== 't' |
| ) { |
| command = 'l'; |
| data = data.slice(-2); |
| } else if ( |
| command === 'a' && |
| (data[0] === 0 || |
| data[1] === 0 || |
| (sagitta !== undefined && sagitta < error)) |
| ) { |
| command = 'l'; |
| data = data.slice(-2); |
| } |
| } |
| |
| // degree-lower c to q when possible |
| // m 0 12 C 4 4 8 4 12 12 → M 0 12 Q 6 0 12 12 |
| if (params.convertToQ && command == 'c') { |
| const x1 = |
| // @ts-ignore |
| 0.75 * (item.base[0] + data[0]) - 0.25 * item.base[0]; |
| const x2 = |
| // @ts-ignore |
| 0.75 * (item.base[0] + data[2]) - 0.25 * (item.base[0] + data[4]); |
| if (Math.abs(x1 - x2) < error * 2) { |
| const y1 = |
| // @ts-ignore |
| 0.75 * (item.base[1] + data[1]) - 0.25 * item.base[1]; |
| const y2 = |
| // @ts-ignore |
| 0.75 * (item.base[1] + data[3]) - 0.25 * (item.base[1] + data[5]); |
| if (Math.abs(y1 - y2) < error * 2) { |
| const newData = data.slice(); |
| newData.splice( |
| 0, |
| 4, |
| // @ts-ignore |
| x1 + x2 - item.base[0], |
| // @ts-ignore |
| y1 + y2 - item.base[1], |
| ); |
| roundData(newData); |
| const originalLength = cleanupOutData(data, params).length, |
| newLength = cleanupOutData(newData, params).length; |
| if (newLength < originalLength) { |
| command = 'q'; |
| data = newData; |
| if (next && next.command == 's') makeLonghand(next, data); // fix up next curve |
| } |
| } |
| } |
| } |
| |
| // horizontal and vertical line shorthands |
| // l 50 0 → h 50 |
| // l 0 50 → v 50 |
| if (params.lineShorthands && command === 'l') { |
| if (data[1] === 0) { |
| command = 'h'; |
| data.pop(); |
| } else if (data[0] === 0) { |
| command = 'v'; |
| data.shift(); |
| } |
| } |
| |
| // collapse repeated commands |
| // h 20 h 30 -> h 50 |
| if ( |
| params.collapseRepeated && |
| hasMarkerMid === false && |
| (command === 'm' || command === 'h' || command === 'v') && |
| prev.command && |
| command == prev.command.toLowerCase() && |
| ((command != 'h' && command != 'v') || |
| prev.args[0] >= 0 == data[0] >= 0) |
| ) { |
| prev.args[0] += data[0]; |
| if (command != 'h' && command != 'v') { |
| prev.args[1] += data[1]; |
| } |
| // @ts-ignore |
| prev.coords = item.coords; |
| path[index] = prev; |
| return false; |
| } |
| |
| // convert curves into smooth shorthands |
| if (params.curveSmoothShorthands && prev.command) { |
| // curveto |
| if (command === 'c') { |
| // c + c → c + s |
| if ( |
| prev.command === 'c' && |
| Math.abs(data[0] - -(prev.args[2] - prev.args[4])) < error && |
| Math.abs(data[1] - -(prev.args[3] - prev.args[5])) < error |
| ) { |
| command = 's'; |
| data = data.slice(2); |
| } |
| |
| // s + c → s + s |
| else if ( |
| prev.command === 's' && |
| Math.abs(data[0] - -(prev.args[0] - prev.args[2])) < error && |
| Math.abs(data[1] - -(prev.args[1] - prev.args[3])) < error |
| ) { |
| command = 's'; |
| data = data.slice(2); |
| } |
| |
| // [^cs] + c → [^cs] + s |
| else if ( |
| prev.command !== 'c' && |
| prev.command !== 's' && |
| Math.abs(data[0]) < error && |
| Math.abs(data[1]) < error |
| ) { |
| command = 's'; |
| data = data.slice(2); |
| } |
| } |
| |
| // quadratic Bézier curveto |
| else if (command === 'q') { |
| // q + q → q + t |
| if ( |
| prev.command === 'q' && |
| Math.abs(data[0] - (prev.args[2] - prev.args[0])) < error && |
| Math.abs(data[1] - (prev.args[3] - prev.args[1])) < error |
| ) { |
| command = 't'; |
| data = data.slice(2); |
| } |
| |
| // t + q → t + t |
| else if (prev.command === 't') { |
| const predictedControlPoint = reflectPoint( |
| // @ts-ignore |
| qControlPoint, |
| // @ts-ignore |
| item.base, |
| ); |
| const realControlPoint = [ |
| // @ts-ignore |
| data[0] + item.base[0], |
| // @ts-ignore |
| data[1] + item.base[1], |
| ]; |
| if ( |
| Math.abs(predictedControlPoint[0] - realControlPoint[0]) < |
| error && |
| Math.abs(predictedControlPoint[1] - realControlPoint[1]) < error |
| ) { |
| command = 't'; |
| data = data.slice(2); |
| } |
| } |
| } |
| } |
| |
| // remove useless non-first path segments |
| if (params.removeUseless && !maybeHasStrokeAndLinecap) { |
| // l 0,0 / h 0 / v 0 / q 0,0 0,0 / t 0,0 / c 0,0 0,0 0,0 / s 0,0 0,0 |
| if ( |
| (command === 'l' || |
| command === 'h' || |
| command === 'v' || |
| command === 'q' || |
| command === 't' || |
| command === 'c' || |
| command === 's') && |
| data.every(function (i) { |
| return i === 0; |
| }) |
| ) { |
| path[index] = prev; |
| return false; |
| } |
| |
| // a 25,25 -30 0,1 0,0 |
| if (command === 'a' && data[5] === 0 && data[6] === 0) { |
| path[index] = prev; |
| return false; |
| } |
| } |
| |
| // convert going home to z |
| // m 0 0 h 5 v 5 l -5 -5 -> m 0 0 h 5 v 5 z |
| if ( |
| params.convertToZ && |
| (isSafeToUseZ || next?.command === 'Z' || next?.command === 'z') && |
| (command === 'l' || command === 'h' || command === 'v') |
| ) { |
| if ( |
| // @ts-ignore |
| Math.abs(pathBase[0] - item.coords[0]) < error && |
| // @ts-ignore |
| Math.abs(pathBase[1] - item.coords[1]) < error |
| ) { |
| command = 'z'; |
| data = []; |
| } |
| } |
| |
| item.command = command; |
| item.args = data; |
| } else { |
| // z resets coordinates |
| relSubpoint[0] = pathBase[0]; |
| relSubpoint[1] = pathBase[1]; |
| if (prev.command === 'Z' || prev.command === 'z') return false; |
| } |
| if ( |
| (command === 'Z' || command === 'z') && |
| params.removeUseless && |
| isSafeToUseZ && |
| // @ts-ignore |
| Math.abs(item.base[0] - item.coords[0]) < error / 10 && |
| // @ts-ignore |
| Math.abs(item.base[1] - item.coords[1]) < error / 10 |
| ) |
| return false; |
| |
| if (command === 'q') { |
| // @ts-ignore |
| prevQControlPoint = [data[0] + item.base[0], data[1] + item.base[1]]; |
| } else if (command === 't') { |
| if (qControlPoint) { |
| // @ts-ignore |
| prevQControlPoint = reflectPoint(qControlPoint, item.base); |
| } else { |
| // @ts-ignore |
| prevQControlPoint = item.coords; |
| } |
| } |
| prev = item; |
| return true; |
| }); |
| |
| return path; |
| } |
| |
| /** |
| * Writes data in shortest form using absolute or relative coordinates. |
| * |
| * @type {(path: PathDataItem[], params: InternalParams) => PathDataItem[]} |
| */ |
| function convertToMixed(path, params) { |
| var prev = path[0]; |
| |
| path = path.filter(function (item, index) { |
| if (index == 0) return true; |
| if (item.command === 'Z' || item.command === 'z') { |
| prev = item; |
| return true; |
| } |
| |
| var command = item.command, |
| data = item.args, |
| adata = data.slice(), |
| rdata = data.slice(); |
| |
| if ( |
| command === 'm' || |
| command === 'l' || |
| command === 't' || |
| command === 'q' || |
| command === 's' || |
| command === 'c' |
| ) { |
| for (var i = adata.length; i--; ) { |
| // @ts-ignore |
| adata[i] += item.base[i % 2]; |
| } |
| } else if (command == 'h') { |
| // @ts-ignore |
| adata[0] += item.base[0]; |
| } else if (command == 'v') { |
| // @ts-ignore |
| adata[0] += item.base[1]; |
| } else if (command == 'a') { |
| // @ts-ignore |
| adata[5] += item.base[0]; |
| // @ts-ignore |
| adata[6] += item.base[1]; |
| } |
| |
| roundData(adata); |
| roundData(rdata); |
| |
| var absoluteDataStr = cleanupOutData(adata, params), |
| relativeDataStr = cleanupOutData(rdata, params); |
| |
| // Convert to absolute coordinates if it's shorter or forceAbsolutePath is true. |
| // v-20 -> V0 |
| // Don't convert if it fits following previous command. |
| // l20 30-10-50 instead of l20 30L20 30 |
| if ( |
| params.forceAbsolutePath || |
| (absoluteDataStr.length < relativeDataStr.length && |
| !( |
| params.negativeExtraSpace && |
| command == prev.command && |
| prev.command.charCodeAt(0) > 96 && |
| absoluteDataStr.length == relativeDataStr.length - 1 && |
| (data[0] < 0 || |
| (Math.floor(data[0]) === 0 && |
| !Number.isInteger(data[0]) && |
| prev.args[prev.args.length - 1] % 1)) |
| )) |
| ) { |
| // @ts-ignore |
| item.command = command.toUpperCase(); |
| item.args = adata; |
| } |
| |
| prev = item; |
| return true; |
| }); |
| |
| return path; |
| } |
| |
| /** |
| * Checks if curve is convex. Control points of such a curve must form |
| * a convex quadrilateral with diagonals crosspoint inside of it. |
| * |
| * @type {(data: number[]) => boolean} |
| */ |
| function isConvex(data) { |
| var center = getIntersection([ |
| 0, |
| 0, |
| data[2], |
| data[3], |
| data[0], |
| data[1], |
| data[4], |
| data[5], |
| ]); |
| |
| return ( |
| center != null && |
| data[2] < center[0] == center[0] < 0 && |
| data[3] < center[1] == center[1] < 0 && |
| data[4] < center[0] == center[0] < data[0] && |
| data[5] < center[1] == center[1] < data[1] |
| ); |
| } |
| |
| /** |
| * Computes lines equations by two points and returns their intersection point. |
| * |
| * @type {(coords: number[]) => undefined | Point} |
| */ |
| function getIntersection(coords) { |
| // Prev line equation parameters. |
| var a1 = coords[1] - coords[3], // y1 - y2 |
| b1 = coords[2] - coords[0], // x2 - x1 |
| c1 = coords[0] * coords[3] - coords[2] * coords[1], // x1 * y2 - x2 * y1 |
| // Next line equation parameters |
| a2 = coords[5] - coords[7], // y1 - y2 |
| b2 = coords[6] - coords[4], // x2 - x1 |
| c2 = coords[4] * coords[7] - coords[5] * coords[6], // x1 * y2 - x2 * y1 |
| denom = a1 * b2 - a2 * b1; |
| |
| if (!denom) return; // parallel lines haven't an intersection |
| |
| /** |
| * @type {Point} |
| */ |
| var cross = [(b1 * c2 - b2 * c1) / denom, (a1 * c2 - a2 * c1) / -denom]; |
| if ( |
| !isNaN(cross[0]) && |
| !isNaN(cross[1]) && |
| isFinite(cross[0]) && |
| isFinite(cross[1]) |
| ) { |
| return cross; |
| } |
| } |
| |
| /** |
| * Decrease accuracy of floating-point numbers |
| * in path data keeping a specified number of decimals. |
| * Smart rounds values like 2.3491 to 2.35 instead of 2.349. |
| * Doesn't apply "smartness" if the number precision fits already. |
| * |
| * @type {(data: number[]) => number[]} |
| */ |
| function strongRound(data) { |
| const precisionNum = precision || 0; |
| for (let i = data.length; i-- > 0; ) { |
| const fixed = toFixed(data[i], precisionNum); |
| if (fixed !== data[i]) { |
| const rounded = toFixed(data[i], precisionNum - 1); |
| data[i] = |
| toFixed(Math.abs(rounded - data[i]), precisionNum + 1) >= error |
| ? fixed |
| : rounded; |
| } |
| } |
| return data; |
| } |
| |
| /** |
| * Simple rounding function if precision is 0. |
| * |
| * @type {(data: number[]) => number[]} |
| */ |
| function round(data) { |
| for (var i = data.length; i-- > 0; ) { |
| data[i] = Math.round(data[i]); |
| } |
| return data; |
| } |
| |
| /** |
| * Checks if a curve is a straight line by measuring distance |
| * from middle points to the line formed by end points. |
| * |
| * @type {(data: number[]) => boolean} |
| */ |
| function isCurveStraightLine(data) { |
| // Get line equation a·x + b·y + c = 0 coefficients a, b (c = 0) by start and end points. |
| var i = data.length - 2, |
| a = -data[i + 1], // y1 − y2 (y1 = 0) |
| b = data[i], // x2 − x1 (x1 = 0) |
| d = 1 / (a * a + b * b); // same part for all points |
| |
| if (i <= 1 || !isFinite(d)) return false; // curve that ends at start point isn't the case |
| |
| // Distance from point (x0, y0) to the line is sqrt((c − a·x0 − b·y0)² / (a² + b²)) |
| while ((i -= 2) >= 0) { |
| if (Math.sqrt(Math.pow(a * data[i] + b * data[i + 1], 2) * d) > error) |
| return false; |
| } |
| |
| return true; |
| } |
| |
| /** |
| * Calculates the sagitta of an arc if possible. |
| * |
| * @type {(data: number[]) => number | undefined} |
| * @see https://wikipedia.org/wiki/Sagitta_(geometry)#Formulas |
| */ |
| function calculateSagitta(data) { |
| if (data[3] === 1) return undefined; |
| const [rx, ry] = data; |
| if (Math.abs(rx - ry) > error) return undefined; |
| const chord = Math.sqrt(data[5] ** 2 + data[6] ** 2); |
| if (chord > rx * 2) return undefined; |
| return rx - Math.sqrt(rx ** 2 - 0.25 * chord ** 2); |
| } |
| |
| /** |
| * Converts next curve from shorthand to full form using the current curve data. |
| * |
| * @type {(item: PathDataItem, data: number[]) => PathDataItem} |
| */ |
| function makeLonghand(item, data) { |
| switch (item.command) { |
| case 's': |
| item.command = 'c'; |
| break; |
| case 't': |
| item.command = 'q'; |
| break; |
| } |
| item.args.unshift( |
| data[data.length - 2] - data[data.length - 4], |
| data[data.length - 1] - data[data.length - 3], |
| ); |
| return item; |
| } |
| |
| /** |
| * Returns distance between two points |
| * |
| * @type {(point1: Point, point2: Point) => number} |
| */ |
| function getDistance(point1, point2) { |
| return Math.sqrt((point1[0] - point2[0]) ** 2 + (point1[1] - point2[1]) ** 2); |
| } |
| |
| /** |
| * Reflects point across another point. |
| * |
| * @param {Point} controlPoint |
| * @param {Point} base |
| * @returns {Point} |
| */ |
| function reflectPoint(controlPoint, base) { |
| return [2 * base[0] - controlPoint[0], 2 * base[1] - controlPoint[1]]; |
| } |
| |
| /** |
| * Returns coordinates of the curve point corresponding to the certain t |
| * a·(1 - t)³·p1 + b·(1 - t)²·t·p2 + c·(1 - t)·t²·p3 + d·t³·p4, |
| * where pN are control points and p1 is zero due to relative coordinates. |
| * |
| * @type {(curve: number[], t: number) => Point} |
| */ |
| function getCubicBezierPoint(curve, t) { |
| var sqrT = t * t, |
| cubT = sqrT * t, |
| mt = 1 - t, |
| sqrMt = mt * mt; |
| |
| return [ |
| 3 * sqrMt * t * curve[0] + 3 * mt * sqrT * curve[2] + cubT * curve[4], |
| 3 * sqrMt * t * curve[1] + 3 * mt * sqrT * curve[3] + cubT * curve[5], |
| ]; |
| } |
| |
| /** |
| * Finds circle by 3 points of the curve and checks if the curve fits the found circle. |
| * |
| * @type {(curve: number[]) => undefined | Circle} |
| */ |
| function findCircle(curve) { |
| var midPoint = getCubicBezierPoint(curve, 1 / 2), |
| m1 = [midPoint[0] / 2, midPoint[1] / 2], |
| m2 = [(midPoint[0] + curve[4]) / 2, (midPoint[1] + curve[5]) / 2], |
| center = getIntersection([ |
| m1[0], |
| m1[1], |
| m1[0] + m1[1], |
| m1[1] - m1[0], |
| m2[0], |
| m2[1], |
| m2[0] + (m2[1] - midPoint[1]), |
| m2[1] - (m2[0] - midPoint[0]), |
| ]), |
| radius = center && getDistance([0, 0], center), |
| // @ts-ignore |
| tolerance = Math.min(arcThreshold * error, (arcTolerance * radius) / 100); |
| |
| if ( |
| center && |
| // @ts-ignore |
| radius < 1e15 && |
| [1 / 4, 3 / 4].every(function (point) { |
| return ( |
| Math.abs( |
| // @ts-ignore |
| getDistance(getCubicBezierPoint(curve, point), center) - radius, |
| ) <= tolerance |
| ); |
| }) |
| ) |
| // @ts-ignore |
| return { center: center, radius: radius }; |
| } |
| |
| /** |
| * Checks if a curve fits the given circle. |
| * |
| * @type {(curve: number[], circle: Circle) => boolean} |
| */ |
| function isArc(curve, circle) { |
| var tolerance = Math.min( |
| arcThreshold * error, |
| (arcTolerance * circle.radius) / 100, |
| ); |
| |
| return [0, 1 / 4, 1 / 2, 3 / 4, 1].every(function (point) { |
| return ( |
| Math.abs( |
| getDistance(getCubicBezierPoint(curve, point), circle.center) - |
| circle.radius, |
| ) <= tolerance |
| ); |
| }); |
| } |
| |
| /** |
| * Checks if a previous curve fits the given circle. |
| * |
| * @type {(curve: number[], circle: Circle) => boolean} |
| */ |
| function isArcPrev(curve, circle) { |
| return isArc(curve, { |
| center: [circle.center[0] + curve[4], circle.center[1] + curve[5]], |
| radius: circle.radius, |
| }); |
| } |
| |
| /** |
| * Finds angle of a curve fitting the given arc. |
| |
| * @type {(curve: number[], relCircle: Circle) => number} |
| */ |
| function findArcAngle(curve, relCircle) { |
| var x1 = -relCircle.center[0], |
| y1 = -relCircle.center[1], |
| x2 = curve[4] - relCircle.center[0], |
| y2 = curve[5] - relCircle.center[1]; |
| |
| return Math.acos( |
| (x1 * x2 + y1 * y2) / Math.sqrt((x1 * x1 + y1 * y1) * (x2 * x2 + y2 * y2)), |
| ); |
| } |
| |
| /** |
| * Converts given path data to string. |
| * |
| * @type {(params: InternalParams, pathData: PathDataItem[]) => string} |
| */ |
| function data2Path(params, pathData) { |
| return pathData.reduce(function (pathString, item) { |
| var strData = ''; |
| if (item.args) { |
| strData = cleanupOutData(roundData(item.args.slice()), params); |
| } |
| return pathString + item.command + strData; |
| }, ''); |
| } |
