svg-path-simplify 0.3.0 → 0.3.5

package/src/svgii/poly_analyze_get_chunks.js

@@ -0,0 +1,67 @@
+
+// split in chunks based on significant points
+
+import { pathDataToD } from "./pathData_stringify";
+import { renderPath } from "./visualize";
+
+
+export function getPolyChunks(pts,
+    { closed = true,
+        keepCorners = true,
+        keepExtremes = true,
+        keepInflections = false
+    } = {}
+) {
+    let chunks = [[pts[0]]];
+    //let chunk = [pts[0]];
+    let idx = 0
+    let lastChunk = chunks[idx]
+
+    let l = pts.length
+
+    // render
+    for (let i = 1; i < l; i++) {
+        let p0 = i > 0 ? pts[i] : pts[l - 1];
+        let p1 = pts[i];
+        let p2 = i < l - 1 ? pts[i + 1] : pts[l - 1];
+
+        // start new chunk
+        // keepInflections && p1.isDirChange
+        if ((keepExtremes && p1.isExtreme || keepCorners && p1.isCorner )) {
+            idx++
+            chunks.push([])
+        }
+
+
+        lastChunk = chunks[idx]
+        lastChunk.push(p1)
+    }
+
+    // test render
+    //renderchunks(chunks)
+
+    return chunks;
+}
+
+
+
+function renderchunks(chunks) {
+
+    chunks.forEach((chunk, i) => {
+
+        let stroke = i % 2 === 0 ? 'orange' : 'blue';
+        let pathData = [{ type: 'M', values: [chunk[0].x, chunk[0].y] }]
+        let d = `M`
+
+        chunk.forEach(pt => {
+
+            pathData.push({ type: 'L', values: [pt.x, pt.y] })
+            d += ` ${[pt.x, pt.y].join(' ')}`
+
+        })
+
+        d = pathDataToD(pathData)
+        renderPath(markers, d, stroke, '2%', '0.5')
+    })
+
+}

package/src/svgii/poly_normalize.js

@@ -0,0 +1,51 @@
+export function normalizePoly(pts, {
+    toObject = true,
+    toArray = false,
+    flatten = false
+} = {}) {
+
+    if (flatten) pts = pts.flat(2);
+    let poly = toArray ? polyPtsToArray(pts) : polyArrayToObject(pts)
+    return poly
+}
+
+
+export function polyArrayToObject(pts) {
+
+    // is point object array
+    if (pts[0].x !== undefined && pts[0].y !== undefined) return pts
+
+    let poly = [];
+
+    // complex poly object array
+    if (Array.isArray(pts[0]) && pts[0][0].x !== undefined && pts[0][0].y !== undefined) {
+        return pts
+    }
+    // complex poly value array
+    else if (Array.isArray(pts[0][0]) && pts[0][0].length === 2) {
+        pts.forEach(sub => {
+            poly.push(sub.map(pt => { return { x: pt[0], y: pt[1] } }))
+        })
+        return poly
+    }
+
+    return pts.map(pt => { return { x: pt[0], y: pt[1] } })
+}
+
+
+export function polyPtsToArray(pts) {
+
+    // is already coordinate array
+    if (!Array.isArray(pts[0][0]) && pts[0].length === 2) return pts
+
+    let poly = [];
+    if (Array.isArray(pts[0][0]) && pts[0][0].length === 2) {
+        pts.forEach(sub => {
+            poly.push(sub.map(pt => [pt.x, pt.y]))
+        })
+        return poly
+    }
+
+    poly = Array.from(pts).map(pt => [pt.x, pt.y])
+    return poly
+}

package/src/svgii/poly_to_pathdata.js

@@ -7,61 +7,84 @@
 
 import { checkLineIntersection, getDistManhattan, interpolate, mirrorCpts } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
-import { analyzePoly, getPolyChunks, isClosedPolygon } from "./poly_analyze";
-import { fitCurveN } from "../poly-fit-curve-schneider";
 import { renderPath, renderPoint, renderPoly } from "./visualize";
-import { simplifyRDP } from "../simplify_poly_RDP";
+import { simplifyPolyRDP } from "../simplify_poly_RDP";
 import { pathDataFromPoly } from "./pathData_fromPoly";
+import { getPolyChunks } from "./poly_analyze_get_chunks";
+import { analyzePoly, isClosedPolygon } from "./poly_analyze";
+import { fitCurveSchneider } from "../poly-fit-curve-schneider";
+import { simplifyPolyRD } from "../simplify_poly_radial_distance";
+
+
 
 export function simplifyPolygonToPathData(pts, {
     debug = false,
     width = 0,
     height = 0,
     denoise = 0.9,
-    keepCorners=true,
-    keepExtremes=true,
-    keepInflections=false,
+    keepCorners = true,
+    keepExtremes = true,
+    keepInflections = false,
     manhattan = false,
     absolute = false,
     closed = true,
-    tolerance = 1
+    tolerance = 1,
+    simplifyRD = 1,
+    simplifyRDP = 1,
 } = {}) {
 
 
-    denoise = 0
 
+    /*
     // denoise via RDP
     if (denoise && denoise !== 1) {
-        pts = simplifyRDP(pts, {
+        pts = simplifyPolyRDP(pts, {
             width,
             height,
             quality: denoise,
             manhattan,
             absolute
         })
+    }
+    */
+
+
+    /*
+    // simplify polygon
+    if (simplifyRD != 1) {
+        pts = simplifyPolyRD(pts, { quality: simplifyRD+'px' })
+    }
+
 
+    if (simplifyRDP != 1) {
+        pts = simplifyPolyRDP(pts, { quality: simplifyRDP+'px' })
     }
+    */
+
 
     // get topology of poly
-    let polyAnalyzed = !keepExtremes&&!keepCorners ? pts : analyzePoly(pts, {
+    let polyAnalyzed = !keepExtremes && !keepCorners ? pts : analyzePoly(pts, {
         debug: false
         //width,
         //height
     })
 
+    //console.log(polyAnalyzed, polyAnalyzed2);
+    //return
 
     // split into segment chunks
-    let chunks = !keepExtremes&&!keepCorners ? [polyAnalyzed] : getPolyChunks(polyAnalyzed, {keepCorners,keepExtremes, keepInflections});
+    let chunks = !keepExtremes && !keepCorners ? [polyAnalyzed] : getPolyChunks(polyAnalyzed, { keepCorners, keepExtremes, keepInflections });
 
 
     // Schneider curve fit
     let threshold = width && height ? (width + height) / 2 * 0.004 * tolerance : 2.5
 
-    threshold=2
+    //threshold = 2
 
     let polyPath = simplifyPolyChunks(chunks, {
         closed,
-        tolerance: threshold
+        tolerance: threshold,
+        keepCorners
     });
 
     return polyPath;
@@ -75,6 +98,7 @@ export function simplifyPolygonToPathData(pts, {
 
 export function simplifyPolyChunks(chunks = [], {
     closed = true,
+    keepCorners = true,
     tolerance = 1,
 } = {}) {
 
@@ -100,12 +124,14 @@ export function simplifyPolyChunks(chunks = [], {
         }
 
         // nothing to simplify
-        if (chunklen < 2 || (chunklen === 2 && chunk[1].isExtreme) ) {
+        if (chunklen < 2 || (chunklen === 2 && chunk[1].isExtreme)) {
             pLast = chunk[chunk.length - 1]
             segments = chunk.map(com => { return { type: 'L', values: [com.x, com.y] } })
 
         } else {
-            segments = fitCurveN(chunk, tolerance)
+            segments = fitCurveSchneider(chunk, {
+                maxError: tolerance, keepCorners
+            })
         }
 
         // remove first segment to connect to last segment
@@ -115,11 +141,12 @@ export function simplifyPolyChunks(chunks = [], {
 
 
     if (closed) pathData.push({ type: 'Z', values: [] })
-
-    //console.log('!!!pathData', pathData);
+    //console.log('!!!pathData from poly', pathData);
 
     // refine extremes
-    refineAdjacentExtremes(pathData)
+    let refineExtremes = false;
+    //refineExtremes=true;
+    if (refineExtremes) refineAdjacentExtremes(pathData)
     return pathData
 
 }
@@ -160,13 +187,13 @@ export function refineAdjacentExtremes(pathData) {
             let vertical2 = dx2 < dist1 && dy2 > dist1
 
 
-            let distCpO=0, distCpN=0, t=1;
+            let distCpO = 0, distCpN = 0, t = 1;
             let cp2N, cp1N;
 
             if (horizontal1 || vertical1) {
 
                 // adjust cp2 to horizontal
-                cp2N = horizontal1 ? {x:com.values[2], y: p.y} : (vertical1 ? {x:p.x, y:com.values[3]} : {x:com.values[2], y:com.values[3]})
+                cp2N = horizontal1 ? { x: com.values[2], y: p.y } : (vertical1 ? { x: p.x, y: com.values[3] } : { x: com.values[2], y: com.values[3] })
 
                 /*
                 // adjust length
@@ -182,14 +209,14 @@ export function refineAdjacentExtremes(pathData) {
                 com.values[3] = cp2N.y
 
             }
- 
+
 
             if (horizontal2 || vertical2) {
                 // adjust cp1 to horizontal
 
-                cp1N = horizontal2 ? 
-                {x:comN.values[0], y: p.y} : 
-                (vertical2 ? {x:p.x, y:comN.values[1]} : {x:comN.values[0], y:comN.values[1]})
+                cp1N = horizontal2 ?
+                    { x: comN.values[0], y: p.y } :
+                    (vertical2 ? { x: p.x, y: comN.values[1] } : { x: comN.values[0], y: comN.values[1] })
 
                 /*
                 // adjust length

package/src/svgii/rounding.js

@@ -7,6 +7,42 @@
 import { getDistAv, getDistManhattan } from "./geometry";
 
 
+
+export function detectAccuracyPoly(pts) {
+
+    let minDim = Infinity
+    let dims = [];
+    //console.log(pathData);
+
+    // add average distances
+    for (let i = 1, len = pts.length; i < len; i++) {
+        let pt = pts[i];
+        let { p0 = null, p = null, dimA = 0 } = pt;
+
+        // use existing averave dimension value or calculate
+        if ( p && p0) {
+            dimA = dimA ? dimA : getDistManhattan(p0, p);
+
+            if (dimA) dims.push(dimA);
+            if (dimA && dimA < minDim) minDim = dimA;
+        }
+    }
+
+    let dim_min = dims.sort()
+    let sliceIdx = Math.ceil(dim_min.length / 8);
+    dim_min = dim_min.slice(0, sliceIdx);
+    let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
+
+    let threshold = 75
+    let decimalsAuto = minVal > threshold * 1.5 ? 0 : Math.floor(threshold / minVal).toString().length
+    // clamp
+    return Math.min(Math.max(0, decimalsAuto), 8)
+
+}
+
+
+
+
 export function detectAccuracy(pathData) {
 
     let minDim = Infinity

package/src/svgii/svg-styles-getTransforms.js

@@ -3,7 +3,41 @@
  * transform property object
  */
 
-export function parseCSSTransform(transformString, transformOrigin={x:0, y:0}) {
+export function parseTransform(transformString, transformOrigin = { x: 0, y: 0 }) {
+
+    //let regex = /(\w+)\(([^)]+)\)/g;
+    let transArr = transformString.match(/[a-z]+\([^)]*\)/gi);
+
+    //console.log('transArr', transArr);
+
+    let transforms = [];
+    transArr.forEach(trans => {
+        let [prop, vals] = trans.split(/\(|\)/).filter(Boolean)
+        //let prop = vals[0];
+        vals = vals.split(/,| /).filter(Boolean).map(Number)
+        console.log('trans', prop, vals);
+
+        // rotate has origin
+        if(prop==='rotate' && vals.length===3){
+            transforms.push({prop:'translate', values:[vals[1], vals[2]]})
+            transforms.push({prop:'rotate', values:[vals[0]]})
+            transforms.push({prop:'translate', values:[-vals[1], -vals[2]]})
+        }else{
+            transforms.push({prop, values:[vals[0]]})
+        }
+    })
+
+    console.log('transforms', transforms);
+
+    //let values = 
+
+}
+
+
+export function parseCSSTransform(transformString, transformOrigin = { x: 0, y: 0 }) {
+
+    if (!transformString) return false;
+
     let transformOptions = {
         transforms: [],
         transformOrigin,
@@ -53,7 +87,11 @@ export function parseCSSTransform(transformString, transformOrigin={x:0, y:0}) {
             case 'skewY':
                 transformOptions.transforms.push({ skew: [0, values[0] || 0] });
                 break;
+
             case 'rotate':
+
+                console.log('rotate', values);
+
                 transformOptions.transforms.push({ rotate: [0, 0, values[0] || 0] });
                 break;
             case 'matrix':
@@ -165,9 +203,9 @@ export function getMatrix2D(transformations = [], origin = { x: 0, y: 0 }) {
 
 
     // Process transformations in the provided order (right-to-left)
-    for (const transform of transformations) {
-        const type = Object.keys(transform)[0]; // Get the transformation type (e.g., "translate")
-        const values = transform[type] || defaults[type]; // Use default values if none provided
+    for (let transform of transformations) {
+        let type = Object.keys(transform)[0]; // Get the transformation type (e.g., "translate")
+        let values = transform[type] || defaults[type]; // Use default values if none provided
 
         // Destructure values with fallbacks
         let [x, y = defaults[type][1]] = values
@@ -268,6 +306,6 @@ export function getCSSTransform({
     let cssParent = `perspective-origin:${perspectiveOrigin.x}px ${perspectiveOrigin.y}px; perspective:${perspective}px;`;
 
     css = `transform:${css.join(' ')};transform-origin:${transFormOrigin.x}px ${transFormOrigin.y}px;`;
-    return {el:css, parent:cssParent}
+    return { el: css, parent: cssParent }
 
 }

package/src/svgii/svg-styles-to-attributes.js

@@ -1,6 +1,79 @@
 import { getMatrix, parseCSSTransform } from './svg-styles-getTransforms';
 import { attLookup } from './svg-styles-to-attributes-const';
 
+
+
+export function getElementProps(el, {
+    removeNameSpaced = true,
+    decimals = -1
+} = {}) {
+
+    let nodeName = el.nodeName.toLowerCase();
+    let attProps = getElAttributes(el)
+    let cssProps = getElStyleProps(el)
+
+
+    // normalize transform attributes
+    if (attProps['transform']) {
+
+        let transAtt = attProps['transform']
+        let transArr = transAtt.match(/[a-z]+\([^)]*\)/gi);
+
+
+        //console.log(`attProps['transform']`, transAtt);
+
+
+        let transforms = [];
+        transArr.forEach(trans => {
+            let [prop, vals] = trans.split(/\(|\)/).filter(Boolean)
+            //let prop = vals[0];
+            vals = vals.split(/,| /).filter(Boolean).map(Number)
+            console.log('trans', prop, vals);
+
+            let cssTrans = '';
+
+            // rotate has origin
+            if (prop === 'rotate' && vals.length === 3) {
+
+                cssTrans = `
+                translate(${vals[1]}px, ${vals[2]}px)
+                rotate(${vals[0]}deg)
+                translate(${-vals[1]}px, ${-vals[2]}px)
+                `
+                /*
+                transforms.push({ prop: 'translate', values: [vals[1], vals[2]] })
+                transforms.push({ prop: 'rotate', values: [vals[0]] })
+                transforms.push({ prop: 'translate', values: [-vals[1], -vals[2]] })
+                */
+            } else {
+                cssTrans = `
+                ${prop}(${vals[1]}px, ${vals[2]}px)
+                rotate(${vals[0]}deg)
+                translate(${-vals[1]}px, ${-vals[2]}px)
+                `
+
+
+                //transforms.push({ prop, values: [vals[0]] })
+            }
+        })
+
+        console.log('transforms', transforms);
+
+
+
+
+    }
+
+    // merge properties
+    let props = {
+        ...attProps,
+        ...cssProps
+    }
+
+
+}
+
+
 export function svgStylesToAttributes(el, {
     removeNameSpaced = true,
     decimals = -1
@@ -10,6 +83,11 @@ export function svgStylesToAttributes(el, {
     let attProps = getElAttributes(el)
     let cssProps = getElStyleProps(el)
 
+    // normalize transform attributes
+    if (attProps['transform']) {
+        console.log(`attProps['transform']`, attProps['transform']);
+    }
+
     // merge properties
     let props = {
         ...attProps,
@@ -21,7 +99,7 @@ export function svgStylesToAttributes(el, {
 
     // parse CSS transforms
     let cssTrans = cssProps['transform']
-    
+
     if (cssTrans) {
         let transStr = `${cssTrans}`
         let transformObj = parseCSSTransform(transStr)
@@ -98,13 +176,13 @@ function parseInlineStyle(styleAtt = '') {
     return props
 }
 
-function getElStyleProps(el) {
+export function getElStyleProps(el) {
     let styleAtt = el.getAttribute('style')
     let props = styleAtt ? parseInlineStyle(styleAtt) : {}
     return props
 }
 
-function getElAttributes(el) {
+export function getElAttributes(el) {
     let props = {}
     let atts = [...el.attributes].map((att) => att.name);
     let l = atts.length;

package/src/svgii/svg_cleanup.js

@@ -1,3 +1,4 @@
+import { flattenTransforms } from "../svg_flatten_transforms";
 import { parsePathDataString } from "./pathData_parse";
 import { shapeElToPath } from "./pathData_parse_els";
 import { svgStylesToAttributes } from "./svg-styles-to-attributes";
@@ -27,6 +28,8 @@ export function cleanUpSVG(svgMarkup, {
   removeNameSpaced = true,
   attributesToGroup = true,
   shapesToPaths = false,
+  convertTransforms = false,
+  cleanUpStrokes=true,
   decimals = -1,
   excludedEls = [],
 } = {}) {
@@ -113,6 +116,24 @@ export function cleanUpSVG(svgMarkup, {
   //console.log('!!!svgMarkup', svgMarkup);
 
 
+  // remove empty defs
+  let defs = svg.querySelectorAll('defs')
+  defs.forEach(def=>{
+    let children=[...def.children]
+    let attributes = [...def.attributes]
+    if(!children.length){
+      def.remove()
+    }
+  })
+
+
+  /*
+  if(convertTransforms){
+    flattenTransforms(svg)
+  }
+  */
+
+
   if (returnDom) return svg
   let markup = stringifySVG(svg)