svg-path-simplify 0.4.3 → 0.4.5

package/src/svgii/pathData_convert.js

@@ -17,54 +17,10 @@ import { pathDataToD } from './pathData_stringify';
 import { roundPathData } from './rounding';
 import { renderPoint } from './visualize';
 
-
-export function parsePathDataNormalized(d,
-    {
-        // necessary for most calculations
-        toAbsolute = true,
-        toLonghands = true,
-
-        // not necessary unless you need cubics only
-        quadraticToCubic = false,
-
-        // mostly a fallback if arc calculations fail      
-        arcToCubic = false,
-        // arc to cubic precision - adds more segments for better precision     
-        arcAccuracy = 4,
-    } = {}
-) {
-
-    // is already array
-    let isArray = Array.isArray(d);
-
-    // normalize native pathData to regular array
-    let hasConstructor = isArray && typeof d[0] === 'object' && typeof d[0].constructor === 'function'
-    /*
-    if (hasConstructor) {
-        d = d.map(com => { return { type: com.type, values: com.values } })
-        console.log('hasConstructor', hasConstructor, (typeof d[0].constructor), d);
-    }
-    */
-
-    let pathDataObj = isArray ? d : parsePathDataString(d);
-
-    let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
-    let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
-
-    //console.log('???quadraticToCubic', quadraticToCubic);
-
-    // normalize
-    pathData = normalizePathData(pathData,
-        {
-            toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy,
-            hasRelatives, hasShorthands, hasQuadratics, hasArcs
-        },
-    )
-
-    return pathData;
-}
-
-
+/**
+ * wrapper function for 
+ * all path data conversion
+ */
 export function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
@@ -126,23 +82,25 @@ export function convertPathData(pathData, {
     //console.log(toShorthands, toRelative, decimals);
     if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
 
-    if(toMixed) toRelative = true
+    if (toMixed) toRelative = true
 
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
 
     // clone absolute pathdata
-    if(toMixed){
+    if (toMixed) {
         pathDataAbs = JSON.parse(JSON.stringify(pathData))
     }
 
     if (toRelative) pathData = pathDataToRelative(pathData);
+
+    // final rounding
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
 
     // choose most compact commands: relative or absolute
-    if(toMixed){
-        for(let i=0; i<pathData.length; i++){
+    if (toMixed) {
+        for (let i = 0; i < pathData.length; i++) {
             let com = pathData[i]
             let comA = pathDataAbs[i]
             // compare Lengths
@@ -152,7 +110,7 @@ export function convertPathData(pathData, {
             let lenR = comStr.length;
             let lenA = comStrA.length;
 
-            if(lenA<lenR){
+            if (lenA < lenR) {
                 //console.log('absolute is shorter', comStrA, comStr);
                 pathData[i] = pathDataAbs[i]
             }
@@ -162,6 +120,56 @@ export function convertPathData(pathData, {
     return pathData
 }
 
+
+
+
+export function parsePathDataNormalized(d,
+    {
+        // necessary for most calculations
+        toAbsolute = true,
+        toLonghands = true,
+
+        // not necessary unless you need cubics only
+        quadraticToCubic = false,
+
+        // mostly a fallback if arc calculations fail      
+        arcToCubic = false,
+        // arc to cubic precision - adds more segments for better precision     
+        arcAccuracy = 4,
+    } = {}
+) {
+
+    // is already array
+    let isArray = Array.isArray(d);
+
+    // normalize native pathData to regular array
+    let hasConstructor = isArray && typeof d[0] === 'object' && typeof d[0].constructor === 'function'
+    /*
+    if (hasConstructor) {
+        d = d.map(com => { return { type: com.type, values: com.values } })
+        console.log('hasConstructor', hasConstructor, (typeof d[0].constructor), d);
+    }
+    */
+
+    let pathDataObj = isArray ? d : parsePathDataString(d);
+
+    let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
+    let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
+
+    //console.log('???quadraticToCubic', quadraticToCubic);
+
+    // normalize
+    pathData = normalizePathData(pathData,
+        {
+            toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy,
+            hasRelatives, hasShorthands, hasQuadratics, hasArcs
+        },
+    )
+
+    return pathData;
+}
+
+
 /**
  * 
  * @param {*} pathData 
@@ -170,50 +178,100 @@ export function convertPathData(pathData, {
 
 export function optimizeArcPathData(pathData = []) {
 
-    let remove =[]
+    //return pathData
 
-    pathData.forEach((com, i) => {
+    let remove = []
+    let l = pathData.length;
+    let pathDataN = [];
+
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
         let { type, values } = com;
-        if (type === 'A') {
-            let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
-            let comPrev = pathData[i - 1]
-            let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
-            let M = { x: x0, y: y0 };
-            let p = { x, y };
-            //largeArc=true
-            //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
-
-            if(rx===0 || ry===0){
-                pathData[i]= null
-                remove.push(i)
-                //console.log('!!!');
-            }
 
-            // rx and ry are large enough
-            if (rx >= 1 && (x === x0 || y === y0)) {
-                let diff = Math.abs(rx - ry) / rx;
+        if (type !== 'A') {
+            pathDataN.push(com)
+            continue
+        }
 
-                // rx~==ry 
-                if (diff < 0.01) {
 
-                    // test radius against mid point
-                    let pMid = interpolate(M, p, 0.5)                    
-                    let distM = getDistance(pMid, M)
-                    let rDiff = Math.abs(distM - rx) / rx
+        let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
+        let comPrev = pathData[i - 1]
+        let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
+        let M = { x: x0, y: y0 };
+        let p = { x, y };
+        //largeArc=true
+        //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
 
-                    // half distance between mid and start point should be ~ equal
-                    if(rDiff<0.01){
-                        pathData[i].values[0] = 1;
-                        pathData[i].values[1] = 1;
-                        pathData[i].values[2] = 0;
-                    }
-                }
+        if (rx === 0 || ry === 0) {
+            pathData[i] = null
+            remove.push(i)
+        }
+
+        // test for elliptic
+        let rat = rx / ry
+        let error = rx !== ry ? Math.abs(1 - rat) : 0
+
+        if (error > 0.01) {
+            //console.log('is elliptic');
+            pathDataN.push(com)
+            continue
+
+        }
+
+        // xAxis rotation is futile for circular arcs - reset
+        com.values[2] = 0
+
+        /**
+         * test semi circles
+         * rx and ry are large enough
+         */
+
+
+        // 1. horizontal or vertical
+        let thresh = getDistManhattan(M, p) * 0.001;
+        let diffX = Math.abs(x - x0)
+        let diffY = Math.abs(y - y0)
+
+        let isHorizontal = diffY < thresh
+        let isVertical = diffX < thresh
+
+
+        // minify rx and ry
+        if (isHorizontal || isVertical) {
+
+            // check if semi circle
+            let needsTrueR = isHorizontal ? rx*1.9 > diffX : ry*1.9 > diffY;
+
+            // is semicircle we can simplify rx
+            if (!needsTrueR) {
+                //console.log('needsTrueR', needsTrueR, diffX, rx, diffY, ry);
+                rx = rx >= 1 ? 1 : (rx > 0.5 ? 0.5 : rx);
             }
+
+            com.values[0] = rx
+            com.values[1] = rx
+            pathDataN.push(com)
+            continue
+
+
         }
-    })
 
-    if(remove.length) pathData = pathData.filter(Boolean)
-    return pathData;
+        // 2. get true radius - if rx ~= diameter/distance  we have a semicircle
+        let r = getDistance(M, p) * 0.5
+        error = rx / r
+        //console.log('rx', rx, r, error);
+
+        if (error < 0.5) {
+            rx = r >= 1 ? 1 : (r > 0.5 ? 0.5 : r);
+        }
+
+        com.values[0] = rx;
+        com.values[1] = rx;
+        pathDataN.push(com)
+
+    }
+
+    return pathDataN;
 }
 
 
@@ -281,6 +339,48 @@ export function normalizePathData(pathData = [],
 }
 */
 
+export function convertSmallArcsToLinetos(pathData) {
+
+    let l = pathData.length;
+
+    // add fist command
+    let pathDataN = [pathData[0]]
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let comPrev = pathData[i - 1];
+        let comN = pathData[i + 1] || null;
+
+        if (!comN) {
+            pathDataN.push(com);
+            break
+        }
+
+        let { type, values, extreme = false, p0, p, dimA = 0 } = com;
+        // for short segment detection
+        let dimAN = comN.dimA;
+        let dimA0 = comPrev.dimA + dimA + dimAN;
+        let thresh = 0.05
+        let isShort = dimA < dimA0 * thresh;
+        //let isShortN = dimAN < dimA0 * thresh;
+
+        if (type === 'A' && isShort && values[0] < 1 && values[1] < 1) {
+
+            //renderPoint(markers, p0, 'green', '0.1%')
+            //renderPoint(markers, p, 'magenta', '0.1%')
+            com.type = 'L';
+            com.values = [p.x, p.y];
+        }
+
+        pathDataN.push(com)
+
+    }
+
+
+    return pathDataN;
+
+
+}
 
 
 

package/src/svgii/pathData_fix_directions.js

@@ -54,33 +54,25 @@ export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
 
 
     // reverse paths
-    for (let i = 0; i < l; i++) {
+    for (let i = 0; l && i < l; i++) {
 
         let poly = polys[i]
         let { cw, includedIn, includes } = poly
 
-        // outer path direction to counter clockwise
-        if (!includedIn.length && cw && !toClockwise
-            || !includedIn.length && !cw && toClockwise
-        ) {
-            //console.log('reverse outer');
-
-            pathDataArr[i].pathData = reversePathData(pathDataArr[i].pathData);
-            polys[i].cw = polys[i].cw ? false : true
-            cw = polys[i].cw
-
-        }
+        let len = includes.length;
+        //console.log('try reverse', includes);
 
         // reverse inner sub paths
-        for (let j = 0; j < includes.length; j++) {
+        for (let j = 0; len && j < len; j++) {
             let ind = includes[j];
             let child = polys[ind];
 
-            if (child.cw === cw) {
-                //console.log('reverse', child.cw, cw);
-                pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
-                polys[ind].cw = polys[ind].cw ? false : true
-            }
+            // nothing to do
+            if (child.cw !== cw) continue
+
+            pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
+            polys[ind].cw = polys[ind].cw ? false : true
+
         }
     }
 

package/src/svgii/pathData_reorder.js

@@ -14,7 +14,6 @@ export function pathDataToTopLeft(pathData) {
     let len = pathData.length;
     let isClosed = pathData[len - 1].type.toLowerCase() === 'z'
 
-    //return pathData;
 
     // we can't change starting point for non closed paths
     if (!isClosed) {
@@ -30,7 +29,8 @@ export function pathDataToTopLeft(pathData) {
         let { type, values } = com;
         let valsLen = values.length
         if (valsLen) {
-            let p = { type: type, x: values[valsLen-2], y: values[valsLen-1], index: 0}
+            // we need rounding otherwise sorting may crash due to e notation
+            let p = { type: type, x: +values[valsLen - 2].toFixed(8), y: +values[valsLen - 1].toFixed(8), index: 0 }
             p.index = i
             indices.push(p)
         }
@@ -38,16 +38,124 @@ export function pathDataToTopLeft(pathData) {
 
     // reorder  to top left most
     //|| a.x - b.x
-    indices = indices.sort((a, b) => +a.y.toFixed(8) - +b.y.toFixed(8) || a.x-b.x );
+    indices = indices.sort((a, b) => a.y - b.y || a.x - b.x);
     newIndex = indices[0].index
 
-    return  newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
+    return newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
 }
 
 
+export function optimizeClosePath(pathData, { removeFinalLineto = true, autoClose = true } = {}) {
 
+    let pathDataN = pathData;
+    let l = pathData.length;
+    let M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(8) }
+    let isClosed = pathData[l - 1].type.toLowerCase() === 'z'
+    //let linetos = pathData.filter(com => com.type === 'L')
+    //let hasLinetos = linetos.length;
+    let hasLinetos = false
+
+
+    // check if path is closed by explicit lineto
+    let idxPenultimate = isClosed ? l - 2 : l - 1
+    let penultimateCom = pathData[idxPenultimate];
+    let penultimateType = penultimateCom.type;
+    let penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
+
+    // last L command ends at M 
+    let hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    let lastIsLine = penultimateType === 'L'
+    //console.log(pathData);
+
+    // create index
+    let indices = [];
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
+        let { type, values, p0, p } = com;
+
+        if(type==='L') hasLinetos = true;
+
+        // exclude Z
+        if (values.length) {
+            let valsL = values.slice(-2)
+
+            let x = Math.min(p0.x, p.x)
+            let y = Math.min(p0.y, p.y)
+
+            let prevCom = pathData[i - 1] ? pathData[i - 1] : pathData[idxPenultimate]
+            let prevType = prevCom.type
+            //let p = { type: type, x: valsL[0], y: valsL[1], dist: 0, index: 0, prevType }
+            let item = { type: type, x, y, index: 0, prevType }
+            item.index = i
+            indices.push(item)
+        }
+
+    }
+
+    let xMin = Infinity;
+    let yMin = Infinity;
+    let idx_top = null;
+    let len = indices.length
+
+
+    for (let i = 0; i < len; i++) {
+        let com = indices[i];
+        let { type, index, x, y, prevType } = com;
+
+        if (hasLinetos && prevType === 'L') {
+            if (x < xMin && y < yMin) {
+                idx_top = index-1;
+            }
+
+            if (y < yMin) {
+                yMin = y
+            }
+
+            if (x < xMin) {
+                xMin = x
+            }
+        }
+    }
+
+
+    // shift to better starting point
+    if (idx_top) {
+        pathDataN = shiftSvgStartingPoint(pathDataN, idx_top)
+
+        // update penultimate - reorder might have added new close paths
+        l = pathDataN.length
+        M = { x: +pathDataN[0].values[0].toFixed(8), y: +pathDataN[0].values[1].toFixed(8) }
+
+        idxPenultimate = isClosed ? l - 2 : l - 1
+        penultimateCom = pathDataN[idxPenultimate];
+        penultimateType = penultimateCom.type;
+        penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
+        lastIsLine = penultimateType ==='L'
+
+        // last L command ends at M 
+        hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+
+    }
 
-export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose = true}={}) {
+
+    // remove unnecessary closing lineto
+    if (removeFinalLineto && hasClosingCommand && lastIsLine) {
+        pathDataN.splice(l - 2, 1)
+    }
+
+    // add close path
+    if (autoClose && !isClosed && hasClosingCommand) {
+        pathDataN.push({ type: 'Z', values: [] })
+    }
+
+    return pathDataN
+
+}
+
+
+
+
+export function optimizeClosePath__(pathData, { removeFinalLineto = true, autoClose = true } = {}) {
 
     let pathDataNew = [];
     let l = pathData.length;
@@ -58,17 +166,16 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
 
 
     // check if order is ideal
-    let idxPenultimate = isClosed ? l-2 : l-1
-
+    let idxPenultimate = isClosed ? l - 2 : l - 1
     let penultimateCom = pathData[idxPenultimate];
     let penultimateType = penultimateCom.type;
     let penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
 
     // last L command ends at M 
-    let isClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    let hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
 
     // add closepath Z to enable order optimizations
-    if(!isClosed && autoClose && isClosingCommand){
+    if (!isClosed && autoClose && hasClosingCommand) {
 
         /*
         // adjust final coords
@@ -77,14 +184,14 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
         pathData[idxPenultimate].values[valsLastLen-2] = M.x
         pathData[idxPenultimate].values[valsLastLen-1] = M.y
         */
-        
-        pathData.push({type:'Z', values:[]})
+
+        pathData.push({ type: 'Z', values: [] })
         isClosed = true;
         l++
     }
 
     // if last segment is not closing or a lineto
-    let skipReorder = pathData[1].type !== 'L' && (!isClosingCommand || penultimateCom.type === 'L')
+    let skipReorder = pathData[1].type !== 'L' && (!hasClosingCommand || penultimateCom.type === 'L')
     skipReorder = false
 
 
@@ -143,13 +250,13 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
     // remove last lineto
     penultimateCom = pathData[l - 2];
     penultimateType = penultimateCom.type;
-    penultimateComCoords = penultimateCom.values.slice(-2).map(val=>+val.toFixed(8))
+    penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
 
-    isClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    hasClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
 
-    //console.log('penultimateCom', isClosingCommand, penultimateCom.values, M);
+    //console.log('penultimateCom', hasClosingCommand, penultimateCom.values, M);
 
-    if (removeFinalLineto && isClosingCommand) {
+    if (removeFinalLineto && hasClosingCommand) {
         pathData.splice(l - 2, 1)
     }