svg-path-simplify 0.0.1 → 0.0.2

package/src/svgii/pathdata_cleanup.js

@@ -0,0 +1,363 @@
+//import { quadratic2Cubic } from './convert.js';
+//import { splitSubpaths, shiftSvgStartingPoint } from './convert_segments.js';
+import { shiftSvgStartingPoint, reorderPathData } from './pathData_reorder.js';
+import { splitSubpaths, addExtemesToCommand } from './pathData_split.js';
+import { getComThresh, commandIsFlat, getPathDataVertices } from './geometry.js';
+
+import { getPolyBBox } from './geometry_bbox.js';
+
+
+
+
+/**
+ * remove zero length commands
+ * replace flat beziers with lintos
+ * replace closing lines with z
+ * rearrange commands to avoid unnessessary linetos
+ */
+
+
+export function cleanUpPathData(pathData, addExtremes = false, removeClosingLines = true, startToTop = true, debug = false) {
+
+    //collect logs
+    let simplyfy_debug_log = [];
+
+    pathData = JSON.parse(JSON.stringify(pathData));
+    let pathDataNew = [pathData[0]];
+
+    /**
+     * get poly bbox to define
+     * an appropriate relative threshold
+     * for flat or short segment detection
+     */
+    let pathPoly = getPathDataVertices(pathData);
+    let bb = getPolyBBox(pathPoly)
+    let { width, height } = bb;
+    let tolerance = (width + height) / 2 * 0.001
+
+
+    // previous on path point
+    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
+
+    let addedExtremes = false;
+
+
+    for (let c = 1, len = pathData.length; len && c < len; c++) {
+        let com = pathData[c];
+        //let comPrev = pathData[c - 1];
+        let comN = pathData[c + 1] ? pathData[c + 1] : '';
+        let { type, values } = com;
+        //let typeRel = type.toLowerCase();
+        let valsL = values.slice(-2);
+        let p = { x: valsL[0], y: valsL[1] };
+
+        // segment command points - including previous final on-path
+        let pts = [p0, p]
+        if (type === 'C' || type === 'Q') pts.push({ x: values[0], y: values[1] })
+        if (type === 'C') pts.push({ x: values[2], y: values[3] })
+
+
+        // get relative threshold based on averaged command dimensions
+        let xArr = pts.map(pt => { return pt.x });
+        let yArr = pts.map(pt => { return pt.y });
+        let xMax = Math.max(...xArr)
+        let xMin = Math.min(...xArr)
+        let yMax = Math.max(...yArr)
+        let yMin = Math.min(...yArr)
+
+        let w = xMax - xMin
+        let h = yMax - yMin
+        let dimA = (w + h) / 2 || 0;
+
+        if (type.toLowerCase() !== 'z') {
+
+            // zero length
+            //|| (type==='L' && dimA<tolerance)
+            if ((p.x === p0.x && p.y === p0.y) || (type === 'L' && dimA < tolerance)) {
+                //console.log('zero', com, dimA, tolerance, w, h);
+                if (debug) simplyfy_debug_log.push(`removed zero length ${type}`)
+                continue
+            }
+
+            /**
+             * simplify adjacent linetos
+             * based on their flatness
+             */
+            else if (type === 'L') {
+
+                //unnessecary closing linto
+                if (removeClosingLines && p.x === M.x && p.y === M.y && comN.type.toLowerCase() === 'z') {
+                    if (debug) simplyfy_debug_log.push(`unnessecary closing linto`)
+                    continue
+                }
+
+
+                if (comN.type === 'L') {
+
+                    let valuesNL = comN.values.slice(-2)
+                    let pN = { x: valuesNL[0], y: valuesNL[1] }
+
+
+                    // check if adjacent linetos are flat
+                    //let flatness = commandIsFlat([p0, p, pN], tolerance)
+                    let flatness = commandIsFlat([p0, p, pN], tolerance)
+                    let isFlatN = flatness.flat;
+
+
+                    // next lineto is flat – don't add command
+                    if (isFlatN) {
+                        //console.log('flat', flatness, [p0, p, pN]);
+                        if (debug) simplyfy_debug_log.push(`remove flat linetos`)
+                        continue
+                    }
+                }
+            }
+
+
+            if (type === 'C') {
+                /**
+                 * detect flat beziers
+                 * often used for morphing 
+                 * animation
+                 */
+
+                let cp1 = { x: values[0], y: values[1] }
+                let cp2 = { x: values[2], y: values[3] }
+                let pts = [p0, cp1, cp2, p];
+
+                let flatness = commandIsFlat(pts, tolerance)
+                let isFlat = flatness.flat
+                let ratio = flatness.ratio;
+                //console.log('flatness', flatness);
+
+                /*
+                // zero length control points
+                let zeroCpts = (cp1.x === p0.x && cp1.y === p0.y && ratio<0.2 ) || (cp2.x === p.x && cp2.y === p.y && ratio<0.2 );
+                if(zeroCpts){
+                    console.log('flat cpts');
+                    //com = { type: 'L', values: [p.x, p.y] };
+                }
+                */
+
+                if(isFlat){
+                    //console.log('!!!flat cpts');
+                    //com = { type: 'L', values: [p.x, p.y] };
+                }
+
+
+
+                let valuesNL = comN ? comN.values.slice(-2) : '';
+                let pN = valuesNL.length ? { x: valuesNL[0], y: valuesNL[1] } : ''
+
+
+                //check adjacent flat C - convert to linetos
+                if (isFlat) {
+                    
+                    let flatnessN, isFlatN=false;
+
+                    if (comN.type === 'C') {
+
+                        // check if adjacent curves are also flat
+                        flatnessN = commandIsFlat([p0, p, pN], tolerance)
+                        isFlatN = flatnessN.flat;
+
+
+                        if (isFlatN) {
+                            //console.log('is flat');
+                            //console.log(flatnessN);
+                            if (debug) simplyfy_debug_log.push(`skip cubic - actually a lineto:  area-ratio: ${ratio}, flatness next:${flatnessN}`)
+
+                            //com = { type: 'L', values: [p.x, p.y] };
+                            //continue
+                        }
+                    }
+
+                    if (ratio < 0.1 ) {
+                        //console.log('simplify cubic to lineto');
+                        simplyfy_debug_log.push(`simplify cubic to lineto`)
+                        //com = { type: 'L', values: [p.x, p.y] };
+                    }
+                    
+
+                }
+                // not flat
+                else {
+                    // add extremes
+                    if (addExtremes) {
+                        addedExtremes = addExtemesToCommand(p0, values);
+                        com = addedExtremes.pathData
+                    }
+
+                    //add extremes
+                    if (addExtremes && addedExtremes.count) simplyfy_debug_log.push(`added extremes: ${addedExtremes.count}`)
+                }
+            }
+
+        }
+
+        // add new commands
+        if (com.length) {
+            pathDataNew.push(...com);
+        } else {
+            pathDataNew.push(com);
+        }
+
+
+        if (type.toLowerCase() === "z") {
+            p0 = M;
+        } else if (type === "M") {
+            M = { x: valsL[0], y: valsL[1] };
+        }
+
+        // new previous point
+        p0 = { x: valsL[0], y: valsL[1] };
+
+
+
+    }//end for
+
+    //optimize starting point
+    pathDataNew = optimizeStartingPoints(pathDataNew, removeClosingLines, startToTop);
+
+    simplyfy_debug_log.push(`original command count: ${pathData.length}; removed:${pathData.length - pathDataNew.length} `)
+
+    if (debug) console.log(simplyfy_debug_log);
+
+    //console.log(pathData.length, pathDataNew.length)
+    return pathDataNew;
+}
+
+
+/**
+ * avoids starting points in the middle of 2 smooth curves
+ * can replace linetos with closepaths
+ */
+
+export function optimizeStartingPoints(pathData, removeFinalLineto = false, startToTop = false) {
+
+
+    let pathDataArr = splitSubpaths(pathData);
+    //console.log(pathDataArr);
+
+    let pathDataNew = [];
+    let len = pathDataArr.length;
+
+    for (let i = 0; i < len; i++) {
+        let pathData = pathDataArr[i]
+
+        // move starting point to first lineto
+        let firstLIndex = pathData.findIndex(cmd => cmd.type === 'L');
+        let firstBezierIndex = pathData.findIndex(cmd => cmd.type === 'C' || cmd.type === 'Q');
+        let commands = new Set([...pathData.map(com => com.type)]);
+        let hasLinetos = commands.has('L')
+        let hasBeziers = commands.has('C') || commands.has('Q')
+
+
+        let len = pathData.length
+        let isClosed = pathData[len - 1].type.toLowerCase() === 'z'
+
+        if (!isClosed) {
+            pathDataNew.push(...pathData);
+            continue
+        }
+
+        if (isClosed) {
+
+            let extremeIndex = -1;
+            let newIndex = 0
+
+            if (startToTop) {
+                //get top most index
+                let indices = [];
+                for (let i = 0, len = pathData.length; i < len; i++) {
+                    let com = pathData[i];
+                    let { type, values } = com;
+                    if (values.length) {
+
+                        let valsL = values.slice(-2)
+                        let p = { x: valsL[0], y: valsL[1], index: i }
+                        indices.push(p)
+
+                    }
+                }
+
+
+                // find top most
+                indices = indices.sort((a, b) => {
+                    a.y - b.y
+                    //a.x - b.x || a.y - b.y
+                    /*
+                    let n = b.y - a.y;
+                    if (n !== 0) {
+                        return n;
+                    }
+                    return b.x - a.x;
+                    */
+                });
+                newIndex = indices[0].index
+
+            } else {
+                //find extreme
+                let pathPoly = getPathDataVertices(pathData);
+                let bb = getPolyBBox(pathPoly)
+                let { left, right, top, bottom, width, height } = bb;
+                let minX = Infinity;
+                let minY = Infinity;
+
+
+                // get extreme 
+                if (hasBeziers) {
+
+                    for (let i = 0, len = pathData.length; i < len; i++) {
+                        let com = pathData[i];
+                        let { type, values } = com;
+                        if (type === 'C' || type === 'Q') {
+
+                            let valsL = values.slice(-2)
+                            let p = { x: valsL[0], y: valsL[1] }
+                            // is extreme relative to bounding box 
+                            if (p.x === left || p.y === top || p.x === right || p.y === bottom) {
+                                if (p.x < minX && p.y < minY) {
+                                    extremeIndex = i;
+                                    minX = p.x;
+                                    minY = p.y
+                                }
+                            }
+                        }
+                    }
+                }
+
+
+                // set to first bezier extreme or first L
+                firstBezierIndex = extremeIndex > -1 ? extremeIndex : firstBezierIndex
+                newIndex = hasLinetos ? firstLIndex : firstBezierIndex;
+
+            }
+
+
+            // reorder 
+            pathData = shiftSvgStartingPoint(pathData, newIndex)
+            len = pathData.length
+
+            // remove last lineto
+            let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
+            let penultimateCom = pathData[len - 2];
+            let penultimateType = penultimateCom.type;
+            let penultimateComCoords = penultimateCom.values.slice(-2)
+
+            let isClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+
+            if (removeFinalLineto && isClosingCommand) {
+                //console.log('remove l');
+                pathData.splice(len - 2, 1)
+            }
+            pathDataNew.push(...pathData);
+
+        }
+    }
+    return pathDataNew
+}
+
+
+

package/src/svgii/poly_analyze.js

@@ -0,0 +1,172 @@
+import { checkLineIntersection, getAngle, getPointOnEllipse, getSquareDistance, pointAtT, reducePoints } from "./geometry";
+import { getPolygonArea } from "./geometry_area";
+import { getPolyBBox } from "./geometry_bbox";
+import { renderPoint } from "./visualize";
+
+export function analyzePoly(pts) {
+
+    let l = pts.length;
+    let polyArea = getPolygonArea(pts, true)
+    //console.log(polyArea);
+
+
+    // get areas 
+    for (let i = 0; i < l; i++) {
+        let pt0 = i > 0 ? pts[i - 1] : pts[l - 1];
+        let pt1 = pts[i];
+        let pt2 = i < l - 1 ? pts[i + 1] : pts[0];
+
+        let area = getPolygonArea([pt0, pt1, pt2], false);
+        let ang1 = getAngle(pt1, pt0, true);
+        let ang2 = getAngle(pt1, pt2, true);
+        let delta = Math.abs(ang1 - ang2);
+        let deltaDeg = delta * 180 / Math.PI;
+
+
+
+        /**
+         * get local extremes
+         * my coincide with corners or
+         * direction changes
+         */
+        let { left, right, top, bottom } = getPolyBBox([pt0, pt2]);
+        let isExtreme = (pt1.x < left || pt1.x > right || pt1.y < top || pt1.y > bottom);
+
+
+        /**
+         * check corners by  
+         * adjacent angle differences
+         */
+        let isCorner = deltaDeg < 120 || deltaDeg > 270;
+
+
+        /**
+         * get direction changes
+         * e.g the spine of a "S" shape
+         */
+        let directionChange = pt0.isCorner === false && ((pt0.area < 0 && area > 0) || (pt0.area > 0 && area < 0));
+
+
+
+        if (pt0.isExtreme &&
+            (pt1.y === pt0.y || pt1.x === pt0.x)
+        ) {
+            isExtreme = true;
+        }
+
+
+        if (directionChange && isExtreme) {
+            isCorner = true;
+        }
+
+        // if segment is too large relative to total area - don't interpret as corner
+        let areaRat = Math.abs(area / polyArea);
+
+        if (areaRat > 0.2) {
+            isCorner = false;
+        }
+
+
+        /**
+         * visualize significant points for 
+         * debugging
+         */
+
+        /*
+        */
+
+        if ((isExtreme && isCorner)) {
+            isExtreme = false;
+            directionChange = false;
+            //isCorner = false;
+        }
+
+        if (isExtreme) {
+            renderPoint(markers, pt1, 'cyan', '1%');
+        }
+
+        if (isCorner) {
+            renderPoint(markers, pt1, 'purple', '0.5%');
+        }
+
+        if (directionChange) {
+            renderPoint(markers, pt1, 'orange', '1.5%', '0.5');
+        }
+
+
+        /**
+         * save point analysis properties 
+         * to point objects
+         */
+        pt1.isExtreme = isExtreme;
+        pt1.isCorner = isCorner;
+        pt1.directionChange = directionChange;
+
+        pt1.area = area;
+        pt1.delta = delta;
+        pt1.deltaDeg = deltaDeg;
+
+    }
+
+
+    //getControlPoints(pts)
+
+
+    return pts
+}
+
+
+
+
+
+
+
+
+export function getPathDataChunks(pathData) {
+
+    let chunks = [[]];
+    let lastType = 'M'
+    let ind = 0;
+    let wasExtreme, wasCorner, wasDirectionchange;
+
+    pathData.forEach(com => {
+
+        let { isCorner, isExtreme, directionChange, type } = com;
+
+        if (type !== lastType || wasExtreme || wasCorner || directionChange || wasDirectionchange) {
+            chunks.push([])
+            ind++
+        }
+        chunks[ind].push(com)
+
+        wasExtreme = isExtreme
+        wasCorner = isCorner
+        wasDirectionchange = directionChange;
+        lastType = type
+    })
+
+
+    return chunks;
+
+}
+
+
+
+
+/**
+ * check whether a polygon is likely 
+ * to be closed 
+ * or an open polyline 
+ */
+export function isClosedPolygon(pts, reduce = 24) {
+
+    let ptsR = reducePoints(pts, reduce);
+    let { width, height } = getPolyBBox(ptsR);
+    //let dimAvg = Math.max(width, height);
+    let dimAvg = (width + height) / 2;
+    //let closingThresh = (dimAvg / pts.length) ** 2
+    let closingThresh = (dimAvg) ** 2
+    let closingDist = getSquareDistance(pts[0], pts[pts.length - 1]);
+
+    return closingDist < closingThresh;
+}