svg-path-simplify 0.0.1 → 0.0.2

package/src/svgii/poly_to_pathdata.js

@@ -0,0 +1,185 @@
+
+/**
+* Chord-Length Parameterization 
+* based on
+* https://francoisromain.medium.com/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
+*/
+
+import { checkLineIntersection, interpolate, mirrorCpts } from "./geometry";
+import { getPolyBBox } from "./geometry_bbox";
+import { isClosedPolygon } from "./poly_analyze";
+
+
+// Render the svg <path> element
+export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners = true) {
+
+
+    //auto detect closed polygon
+    if(closed==='auto'){
+        closed = isClosedPolygon(pts)
+    }
+
+
+    // append first 2 pts for closed paths
+    if (closed) {
+        pts = pts.concat(pts.slice(0, 2));
+    }
+
+
+    // Position of a control point
+    const controlPoint = (pt1, pt0, pt2, reverse = false, t = 0.666) => {
+
+        let p = pt0 || pt1;
+        let n = pt2 || pt1;
+
+        let dx = n.x - p.x
+        let dy = n.y - p.y
+        let sign = reverse ? -1 : 1;
+
+        let cp0 = {
+            x: pt1.x + dx * sign,
+            y: pt1.y + dy * sign
+        };
+
+
+        let t2 = 0.1 / (1 - t * 0.5)
+        let cp = interpolate(pt1, cp0, t2)
+
+        return cp;
+    };
+
+
+    // collect smoothed pathData
+    let pathData = [];
+    pathData.push({ type: "M", values: [pts[0].x, pts[0].y], p0:{x:pts[0].x, y:pts[0].y} });
+
+    let cp2_0 = pts[0];
+    let l = pts.length;
+
+
+    for (let i = 1; i < l; i++) {
+
+        let drawLine = false;
+        let ptPrev = i > 1 ? pts[i - 2] : pts[l - 1];
+        let ptNext = i < l - 1 ? pts[i + 1] : pts[0];
+        //console.log(ptPrev, ptNext);
+
+        let pt0 = pts[i - 1];
+        let pt1 = pts[i];
+        let cp1 = controlPoint(pt0, ptPrev, pt1, false, t);
+        let cp2 = controlPoint(pt1, pt0, ptNext, true, t);
+
+        let {isExtreme, isCorner,directionChange} = pt1;
+
+        // get cp vector intersections
+        let cpI = checkLineIntersection(pt0, cp1, pt1, cp2, false);
+
+
+        // harmonize cpts
+        if (cpI) {
+            let { left, top, right, bottom, width, height } = getPolyBBox([pt0, pt1]);
+            let outside = cpI ? (cpI.x < left || cpI.x > right || cpI.y < top || cpI.y > bottom) : false;
+
+            // adjust/harmonize control points
+            if (!outside) {
+                cp1 = interpolate(pt0, cpI, t)
+                cp2 = interpolate(pt1, cpI, t)
+            } else {
+
+                // check exact cp self intersections
+                let cpI2 = checkLineIntersection(pt0, cp1, pt1, cp2, true);
+
+                // control points are diverging - connction between cps and start/end point
+                let interH = checkLineIntersection(pt0, pt1, cp1, cp2, true);
+
+                cpI = !interH ? cpI : (cpI2 ? cpI2 : null)
+
+                //&& i < l - 3
+                if (cpI ) {
+                    cp1 = interpolate(pt0, cpI, t)
+                    cp2 = interpolate(pt1, cpI, t)
+                    //renderPoint(svg, cpI, 'magenta')
+                }
+            }
+
+        }
+
+
+        if (keepCorners) {
+
+            // mirror cpts
+            if ((pt1.isCorner && !pt0.isCorner) || (!pt1.isCorner && pt0.isCorner)) {
+                let outgoing = !pt1.isCorner && pt0.isCorner;
+
+                let cps = mirrorCpts(cp2_0, pt0, cp2, pt1, outgoing, t);
+                let cp1_2 = cps.cp1
+                let cp2_2 = cps.cp2
+
+                cp1 = cp1_2;
+                cp2 = cp2_2;
+
+            }
+
+            // withdraw cpts for sharp corners - tag as lineto
+            else if ((pt1.isCorner && pt0.isCorner)) {
+
+                cp1 = { x: pt0.x, y: pt0.y };
+                cp2 = { x: pt1.x, y: pt1.y };
+                drawLine = true
+            }
+
+        }
+
+
+        // update last cp2
+        cp2_0 = cp2;
+
+        let com = { type: "C", values: [cp1.x, cp1.y, cp2.x, cp2.y, pt1.x, pt1.y], 
+        drawLine, 
+        // add properties for chunk based simplification
+        isExtreme, isCorner,directionChange
+     };
+
+
+        let values = com.values
+        com.p0 = pt0
+        com.cp1 = {x:values[0], y:values[1]}
+        com.cp2 = {x:values[2], y:values[3]}
+        com.p = {x:values[4], y:values[5]}
+
+
+        pathData.push(com);
+    }
+
+    // copy last commands 1st controlpoint to first curveto
+    if (closed) {
+        let comLast = pathData[pathData.length - 1];
+        let valuesLastC = comLast.values;
+        let valuesFirstC = pathData[1].values;
+
+        pathData[1].type = 'C'
+        pathData[1].values = [valuesLastC[0], valuesLastC[1], ...valuesFirstC.slice(2)]
+        let values0 = pathData[0].values
+        let values = pathData[1].values
+        pathData[1].p0 = {x:values0[0], y:values0[1]}
+        pathData[1].cp1 = {x:values[0], y:values[1]}
+        pathData[1].cp2 = {x:values[2], y:values[3]}
+        pathData[1].p = {x:values[4], y:values[5]}
+
+        // delete last curveto
+        pathData = pathData.slice(0, pathData.length - 1);
+        pathData.push({ type: 'z', values: [] })
+
+    }
+
+    // convert flat curves to linetos
+    pathData.forEach((com, i) => {
+        if (com.drawLine) {
+            pathData[i].type = 'L'
+            pathData[i].values = com.values.slice(-2);
+        }
+    })
+
+    //console.log(pathData);
+    return pathData;
+};

package/src/svgii/rounding.js

@@ -0,0 +1,154 @@
+
+/**
+ * detect suitable floating point accuracy
+ * for further rounding/optimizations
+ */
+
+import { getDistAv } from "./geometry";
+
+
+export function detectAccuracy(pathData) {
+
+    // Reference first MoveTo command (M)
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p0 =  M
+    let p = M
+    pathData[0].decimals = 0
+    let lastDec = 0;
+    let maxDecimals = 0
+    let minDim = Infinity
+    let maxDim = 0
+
+    //console.log('detectAccuracy');
+
+    // add average distances
+    for (let i = 0, len = pathData.length; i < len; i++) {
+        let com = pathData[i];
+        let { type, values } = com;
+
+        let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
+        p={x:lastVals[0], y:lastVals[1]}
+
+        // use existing averave dimension value or calculate
+        let dimA = com.dimA ? +com.dimA.toFixed(8) : type!=='M' ? +getDistAv(p0, p).toFixed(8) : 0
+        //let dimA = +getDistAv(p0, p).toFixed(8)
+        //console.log('dimA', dimA, com.dimA, type);
+
+        if(dimA && dimA<minDim) minDim = dimA;
+        //if(dimA && dimA>maxDim) maxDim = dimA;
+        
+
+        if(type==='M'){
+            M=p;
+        }
+        p0 = p;
+    }
+
+    //minDim = +minDim.toFixed(8)
+    let decimalsAuto = Math.floor(50 / minDim).toString().length
+    //console.log('!!!minDim', minDim, 'maxDim', maxDim, decimalsAuto);
+
+    // clamp
+    return Math.min(Math.max(0, decimalsAuto), 8)
+
+}
+
+
+
+
+
+export function detectAccuracy_back(pathData) {
+
+    // Reference first MoveTo command (M)
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p0 = { ...M };
+    pathData[0].decimals = 0
+    let lastDec = 0;
+    let maxDecimals = 0
+
+    for (let i = 1, len = pathData.length; i < len; i++) {
+        let com = pathData[i];
+        let { type, values } = com;
+
+        let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
+        let lastX = lastVals[0];
+        let lastY = lastVals[1];
+
+        if (type === 'Z' || type === 'z') {
+            lastX = M.x;
+            lastY = M.y;
+        }
+
+        let w = Math.abs(p0.x - lastX);
+        let h = Math.abs(p0.y - lastY);
+        let dimA = (w + h) / 2 || 0;
+
+
+        // Determine decimal places dynamically
+        let decimals = (type !== 'Z' && type !== 'z') ? Math.ceil((1 / dimA)).toString().length + 1 : 0;
+
+        //console.log(type, dimA, decimals);
+
+
+        if (dimA === 0) {
+            //console.log('zero length');
+            decimals = lastDec;
+        }
+
+        else if (decimals && dimA < 0.5) {
+            decimals++
+        }
+
+        //console.log('dimA', type, dimA, decimals);
+
+
+        // Update previous coordinates
+        p0 = { x: lastX, y: lastY };
+
+        // Track MoveTo for closing paths
+        if (type === 'M') {
+            M = { x: values[0], y: values[1] };
+            com.decimals = decimals;
+        } else {
+
+            // Store ideal precision for next pass
+            com.decimals = decimals;
+
+        }
+
+        maxDecimals = decimals > maxDecimals ? decimals : maxDecimals;
+        lastDec = decimals;
+    }
+
+    // set max decimal for M
+    return maxDecimals
+    //pathData[0].decimals = maxDecimals
+    //return pathData
+}
+
+
+/**
+ * round path data
+ * either by explicit decimal value or
+ * based on suggested accuracy in path data
+ */
+export function roundPathData(pathData, decimals = -1) {
+    // has recommended decimals
+    let hasDecimal = decimals == 'auto' && pathData[0].hasOwnProperty('decimals') ? true : false;
+    //console.log('decimals', decimals, hasDecimal);
+
+    for(let c=0, len=pathData.length; c<len; c++){
+        let com=pathData[c];
+        let {type, values} = com
+
+        if (decimals >-1 || hasDecimal) {
+            decimals = hasDecimal ? com.decimals : decimals;
+
+
+            //console.log('decimals', type, decimals);
+            pathData[c].values = com.values.map(val=>{return val ? +val.toFixed(decimals) : val });
+
+        }
+    };
+    return pathData;
+}

package/src/svgii/simplify.js

@@ -0,0 +1,248 @@
+
+/**
+ * split path data into chunks 
+ * to detect subsequent cubic segments 
+ * that could be  combined
+ */
+
+//import { splitSubpaths, shiftSvgStartingPoint } from "./convert_segments";
+import { shiftSvgStartingPoint } from "./pathData_reorder.js";
+import { splitSubpaths, getPathDataPlusChunks } from './pathData_split.js';
+
+import { getAngle, bezierhasExtreme, getPathDataVertices } from "./geometry";
+import { renderPoint, renderPath } from "./visualize";
+
+
+//import { optimizeStartingPoints } from './cleanup.js';
+//import { getPathDataVertices, getPointOnEllipse, pointAtT, checkLineIntersection, getDistance, interpolate } from './geometry.js';
+
+import { getPolygonArea, getPathArea, getRelativeAreaDiff } from './geometry_area.js';
+import { getPathDataBBox, getPolyBBox } from './geometry_bbox.js';
+
+import { optimizeStartingPoints, cleanUpPathData } from './pathdata_cleanup.js';
+
+import { pathDataArcsToCubics, pathDataQuadraticToCubic, quadratic2Cubic, pathDataToRelative, pathDataToAbsolute, pathDataToLonghands, pathDataToShorthands, pathDataToQuadratic, cubicToQuad, arcToBezier, pathDataToVerbose, convertArrayPathData, revertPathDataToArray, combineArcs, replaceCubicsByArcs } from './pathData_convert.js';
+
+import {unitePolygon} from './simplify_polygon.js';
+
+import { simplifyBezierSequence } from './simplify_bezier.js';
+//import { simplifyBezierSequence } from './simplify_bezier_back16_working.js';
+//import { simplifyBezierSequence } from './simplify_bezier_back17_working.js';
+
+
+
+import { simplifyLinetoSequence } from './simplify_linetos.js';
+import { analyzePathData } from "./pathData_anylyse.js";
+import { scalePathData } from "./pathData_scale.js";
+//import { analyzePathData } from "./pathData_anylyse_back1.js";
+
+
+
+export function simplifyPathData(pathData, tolerance = 3, keepDetails = true, forceCubic = false, cubicToArc = true, multipass = false, debug = false) {
+
+    ///devcomment
+
+    //console.log('forceCubic simplifyPathData', forceCubic);
+
+    // unoptimized area
+    let area0 = getPathArea(pathData);
+
+    // get bbox for adjustment scaling 
+    let bb = getPathDataBBox(pathData);
+    //console.log('bb', bb);
+
+    let dimA = (bb.width + bb.height) / 2;
+    let scale = dimA < 10 ? 100 / dimA : 1;
+
+    // scale small paths
+    if (scale != 1) pathData = scalePathData(pathData, scale, scale)
+
+    // remove zero length commands and shift starting point
+    let addExtremes = true;
+    addExtremes = false;
+
+    let removeFinalLineto = false
+    let startToTop = true;
+    //tolerance = 5;
+
+    // show chunks
+    //debug = true
+
+    /**
+     * optimize starting point
+     * remove zero length segments
+     */
+    pathData = cleanUpPathData(pathData, addExtremes, removeFinalLineto, startToTop, debug)
+
+
+    // get verbose pathdata properties
+    let pathDataPlus = analyzePathData(pathData);
+
+    // add chunks to path object
+    let pathDataPlusChunks = getPathDataPlusChunks(pathDataPlus, debug);
+
+    // create simplified pathData
+    let pathDataSimple = [];
+
+    // loop sup path
+    for (let s = 0, l = pathDataPlusChunks.length; l && s < l; s++) {
+        let sub = pathDataPlusChunks[s];
+        let { chunks, dimA, area } = sub;
+
+        let thresh = dimA * 0.1
+        let len = chunks.length;
+        let simplified;
+        //console.log('sub', chunks);
+
+        //forceCubic = true
+
+        for (let i = 0; i < len; i++) {
+            let chunk = chunks[i];
+            let type = chunk[0].type;
+
+            // try to convert cubic to quadratic
+
+            //forceCubic = true
+            
+            if (!forceCubic && chunk.length === 1 && type === 'C') {
+                simplified = simplifyBezierSequence(chunk);
+                pathDataSimple.push(...simplified);
+                //console.log('simplified cubic to quadratic', simplified);
+                continue;
+            }
+
+            // nothing to combine
+            if (chunk.length < 2) {
+                pathDataSimple.push(...chunk);
+                //console.log('simple',chunk );
+                continue;
+            }
+
+            // simplify linetos
+            if (type === 'L' && chunk.length > 1) {
+                //simplified = simplifyLinetoSequence(chunk, thresh);
+                //console.log('lineto');
+                simplified = simplifyLinetoSequence(chunk);
+                pathDataSimple.push(...simplified);
+            }
+
+            // Béziers
+            else if (chunk.length > 1 && (type === 'C' || type === 'Q')) {
+                //console.log('hasCubics');
+                if (chunk.length) {
+
+                    multipass = false
+                    //multipass = true
+
+                    let directionChange = chunk[0].directionChange;
+                    //directionChange = false
+
+                    /**
+                     * prevent too aggressive simplification 
+                     * e.g for quadratic glyphs
+                     * by splitting large chunks in two
+                     */
+                    //keepDetails = false
+
+                    //(directionChange && chunk.length > 4) ||  (!directionChange && chunk.length > 4) 
+                    if (keepDetails && (chunk.length > 4) && !multipass) {
+                        let split = Math.ceil((chunk.length - 1) / 2)
+                        let chunk1 = chunk.slice(0, split)
+                        let chunk2 = chunk.slice(split)
+                        //console.log('chunk:', chunk);
+                        //renderPoint(svg1,chunk[0].p0, 'magenta' )
+
+                        //console.log('forceCubic keepDetails', forceCubic);
+                        let simplified1 = simplifyBezierSequence(chunk1, tolerance, keepDetails, forceCubic);
+                        let simplified2 = simplifyBezierSequence(chunk2, tolerance, keepDetails, forceCubic);
+
+                        pathDataSimple.push(...simplified1, ...simplified2);
+                    }
+
+                    else {
+                        simplified = simplifyBezierSequence(chunk, tolerance, keepDetails, forceCubic);
+                        pathDataSimple.push(...simplified);
+                    }
+                }
+            }
+
+            // No match, keep original commands
+            else {
+                //chunk.forEach(com => pathDataSimple.push({ type: com.type, values: com.values }));
+                pathDataSimple.push(...chunk);
+            }
+        }
+    }
+
+
+    /**
+     * try to replace cubics 
+     * to arcs
+     */
+    //cubicToArc = false;
+    if (cubicToArc) {
+        //console.log();
+        pathDataSimple = replaceCubicsByArcs(pathDataSimple, tolerance * 0.5);
+
+        // combine adjacent arcs
+        pathDataSimple = combineArcs(pathDataSimple);
+
+        console.log('arcs', pathDataSimple);
+    }
+
+
+    // rescale small paths
+    if (scale != 1) pathDataSimple = scalePathData(pathDataSimple, 1 / scale, 1 / scale)
+
+
+    /**
+     * final area check
+     * fallback to original if difference is too large
+     */
+    /*
+    let areaS = getPathArea(pathDataSimple);
+    let areaDiff = getRelativeAreaDiff(area0, areaS)
+
+    if (areaDiff > tolerance) {
+        //pathDataSimple = pathData;
+        //console.log('take original', pathDataSimple);
+    }
+        */
+
+
+    /**
+     * final optimization
+     * simplify adjacent linetos
+     * optimize start points
+     * we done it before 
+     * but we need to apply this again to 
+     * avoid unnecessary close linetos
+     */
+
+    // prefer first lineto to allow implicit closing linetos by "Z"
+    removeFinalLineto = true;
+    startToTop = false;
+    addExtremes = false;
+    debug = false;
+
+    pathDataSimple = cleanUpPathData(pathDataSimple, addExtremes, removeFinalLineto, startToTop, debug)
+    console.log('pathDataSimple post', pathDataSimple);
+
+    return pathDataSimple;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+