svg-path-simplify 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-path-simplify",
-  "version": "0.4.2",
+  "version": "0.4.4",
 
   "type": "module",
 

package/src/constants.js

@@ -7,6 +7,8 @@ export const rad2Deg = 180/Math.PI
 export const deg2rad = Math.PI/180
 export const root2 = 1.4142135623730951
 export const svgNs = 'http://www.w3.org/2000/svg'
+export const dummySVG = `<svg id="svgInvalid" xmlns="${svgNs}" viewBox="0 0 1 1"><path d="M0 0 h0" /></svg>`
+
 
 // 1/2.54
 export const inch2cm =  0.39370078;
@@ -14,3 +16,5 @@ export const inch2cm =  0.39370078;
 // 1/72
 export const inch2pt =  0.01388889;
 
+
+

package/src/css_parse.js

@@ -0,0 +1,317 @@
+import { parseValue } from "./svgii/svg_el_parse_style_props";
+
+/**
+ * Parse nested CSS text into a flat object structure
+ * Supports arbitrary nesting depth and & parent selector reference
+ * Respects !important modifiers and handles data URLs
+ */
+export function parseSvgCss(css, {
+  parent=null,
+  removeUnused=true,
+  flatten = true
+}={}) {
+  
+  let type = typeof css
+  if(type==='string') removeUnused = false;
+  
+  // get style element text content
+  if(type!=='string' ){
+    if(css.nodeName==='style'){
+      css = css.innerHTML;
+    }
+    else if(css.nodeName==='svg'){
+      let styleEl = css.querySelector('style')
+      if(!styleEl) return {}
+      parent = css;
+      css = styleEl.innerHTML;
+    }
+
+    //invalid input
+    else{
+     console.warn('invalid CSS input')
+     return {}
+    }
+  }
+  
+  css = css.trim();
+  if (!css) return {};
+
+  // Remove comments
+  css = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+
+  function parseBlock(text, parentSelector = "") {
+    let i = 0;
+    let rules = {};
+    let l = text.length
+
+
+    while (i < l) {
+      // Skip whitespace
+      while (/\s/.test(text[i])) i++;
+      if (i >= l) break;
+
+      // Peek ahead to check if this is a selector or a declaration
+      let peekIdx = i;
+      let isSelector = false;
+
+      // Look for '{' before ';' to determine if it's a selector
+      while (peekIdx < l && text[peekIdx] !== ";") {
+        if (text[peekIdx] === "{") {
+          isSelector = true;
+          break;
+        }
+        peekIdx++;
+      }
+
+      if (!isSelector) {
+        // It's a declaration, skip it (will be handled below)
+        i = peekIdx + 1;
+        continue;
+      }
+
+      // Read selector (up to '{')
+      let selector = "";
+      while (i < l && text[i] !== "{") {
+        selector += text[i];
+        i++;
+      }
+
+      selector = selector.trim();
+      if (!selector || text[i] !== "{") continue;
+
+      i++; // skip '{'
+
+      // Find matching closing brace
+      let blockContent = "";
+      let depth = 1;
+
+      while (i < l && depth > 0) {
+        if (text[i] === "{") depth++;
+        else if (text[i] === "}") depth--;
+
+        if (depth > 0) blockContent += text[i];
+        i++;
+      }
+
+      // Compose full selector
+      let fullSelector = selector;
+      if (parentSelector) {
+        if (selector.includes("&")) {
+          fullSelector = selector.replace(/&/g, parentSelector);
+        } else {
+          fullSelector = parentSelector + " " + selector;
+        }
+      }
+      fullSelector = fullSelector.replace(/\s+/g, " ").trim();
+
+      // Separate declarations from nested rules
+      let { declarations, hasNested } = extractDeclarations(blockContent, fullSelector);
+
+      // Add declarations for this selector (respect !important)
+      if (Object.keys(declarations).length) {
+        if (!rules[fullSelector]) {
+          rules[fullSelector] = declarations;
+        } else {
+          // Merge declarations, preserving !important
+          for (let prop in declarations) {
+            let existingValue = rules[fullSelector][prop];
+            let newValue = declarations[prop];
+
+            // Only override if existing doesn't have !important, or new has !important
+            let existingHasImportant =
+              existingValue && existingValue.includes("!important");
+            let newHasImportant = newValue.includes("!important");
+
+            if (!existingHasImportant || newHasImportant) {
+              rules[fullSelector][prop] = newValue;
+            }
+          }
+        }
+      }
+
+      // If block contains nested rules, parse them recursively
+      if (hasNested) {
+        parseBlock(blockContent, fullSelector);
+      }
+    }
+    
+    return rules
+    
+  }
+
+  function extractDeclarations(content) {
+    let declarations = {};
+    let i = 0;
+    let l= content.length;
+    let hasNested = false;
+
+    while (i < l) {
+      // Skip whitespace
+      while (i < l && /\s/.test(content[i])) i++;
+      if (i >= l) break;
+
+      // Check if next thing is a nested selector or a declaration
+      let checkIdx = i;
+      let isNested = false;
+
+      // Scan until we hit ':' or '{' or ';'
+      while (checkIdx < l) {
+        if (content[checkIdx] === "{") {
+          isNested = true;
+          break;
+        }
+        if (content[checkIdx] === ":") {
+          // It's a declaration
+          break;
+        }
+        if (content[checkIdx] === ";") {
+          // Empty or malformed
+          break;
+        }
+        checkIdx++;
+      }
+
+      if (isNested) {
+        // Skip nested rule (will be handled by recursive call)
+        hasNested = true;
+        // Skip to closing brace of this nested rule
+        let depth = 0;
+        while (i < l) {
+          if (content[i] === "{") depth++;
+          if (content[i] === "}") depth--;
+          i++;
+          if (depth === 0) break;
+        }
+      } else {
+        // It's a declaration, read until ';' (but respect url() and quotes)
+        let decl = "";
+        let inUrl = false;
+        let inQuotes = false;
+        let quoteChar = "";
+
+        while (i < l) {
+          let char = content[i];
+          let nextChar = content[i + 1];
+
+          // Track if we're inside url()
+          if (
+            char === "u" &&
+            nextChar === "r" &&
+            content.slice(i, i + 4) === "url("
+          ) {
+            inUrl = true;
+          }
+
+          // Track quotes
+          if (
+            (char === '"' || char === "'") &&
+            (i === 0 || content[i - 1] !== "\\")
+          ) {
+            if (!inQuotes) {
+              inQuotes = true;
+              quoteChar = char;
+            } else if (char === quoteChar) {
+              inQuotes = false;
+              quoteChar = "";
+            }
+          }
+
+          // Check for end of url()
+          if (inUrl && char === ")" && !inQuotes) {
+            inUrl = false;
+          }
+
+          // Only break on semicolon if we're not inside url() or quotes
+          if (char === ";" && !inUrl && !inQuotes) {
+            i++; // skip ';'
+            break;
+          }
+
+          decl += char;
+          i++;
+        }
+
+        decl = decl.trim();
+        if (decl) {
+          let colonIdx = decl.indexOf(":");
+          if (colonIdx > -1) {
+            let prop = decl.substring(0, colonIdx).trim();
+            let value = decl.substring(colonIdx + 1).trim();
+            if (prop && value) {
+              //console.log('selector', selector, isId);
+              //declarations[prop] = isId && !value.includes('!important') ? value+'!important' : value;
+              declarations[prop] = value;
+            }
+          }
+        }
+      }
+    }
+
+    return { declarations, hasNested };
+  }
+
+  let rules = parseBlock(css);
+  if(parent && removeUnused) rules = removeUnusedSelectors(parent, rules)
+  if(flatten) rules = flattenCssProps(rules)
+
+  // emulate specificity: prioritize ids and important
+  let rulesID = {};
+  let rulesImportant = {};
+  for(let rule in rules){
+    if(rule.startsWith('#')){
+      rulesID[rule] = rules[rule]
+      delete rules[rule];
+    }
+
+    for(let prop in rules[rule]){
+      let val = rules[rule][prop]
+      if(val.includes('!important')){
+        if(!rulesImportant[rule]) rulesImportant[rule]={}
+        rulesImportant[rule][prop] = val
+      }
+    }
+  }
+
+  rules= {
+    ...rules,
+    ...rulesID,
+    ...rulesImportant
+  }
+
+  return rules;
+}
+
+function flattenCssProps(rules) {
+  for (let selector in rules) {
+    let targets = selector.split(/,/).map((sel) => sel.trim());
+    let values = rules[selector];
+    if (targets.length > 1) {
+      targets.forEach((target) => {
+        let props = rules[target];
+        for (let prop in props) {
+          let value = props[prop];
+          if (!value.includes("!important")) {
+            rules[target][prop] = value;
+          }
+        }
+      });
+      delete rules[selector];
+    }
+  }
+  return rules;
+}
+
+
+function removeUnusedSelectors(parent=null, props={}){
+  let selectors = Object.keys(props);  
+  selectors.forEach(selector=>{
+    let el = parent.querySelector(selector)
+    // remove
+    if(!el && selector!==':root') {
+      //console.log( selector, 'doesnt exist')
+      delete props[selector]
+    }
+  })
+  return props
+}

package/src/detect_input.js

@@ -1,78 +1,126 @@
+import { dummySVG, svgNs } from "./constants";
+import { validateSVG } from "./svgii/svg_validate";
+
 export function detectInputType(input) {
     let type = 'string';
-    /*
-    if (input instanceof HTMLImageElement) return "img";
-    if (input instanceof SVGElement) return "svg";
-    if (input instanceof HTMLCanvasElement) return "canvas";
-    if (input instanceof File) return "file";
-    if (input instanceof ArrayBuffer) return "buffer";
-    if (input instanceof Blob) return "blob";
-    */
+    let log = '';
+    let isValid = true;
+
+    let result = {
+        inputType:'',
+        isValid:true,
+        fileReport:{},
+    }
+
+
     if (Array.isArray(input)) {
 
+        result.inputType = "array";
+
+
         // nested array
         if (Array.isArray(input[0])) {
             //console.log('is array', input[0], input[0][0])
 
-            if(input[0].length===2){
+            if (input[0].length === 2) {
                 //console.log('is single poly value array')
-                return 'polyArray'
+                result.inputType = 'polyArray'
             }
 
-            else if (Array.isArray(input[0][0]) && input[0][0].length === 2 ) {
+            else if (Array.isArray(input[0][0]) && input[0][0].length === 2) {
                 //console.log('is complex poly point value array', input[0][0])
-                return 'polyComplexArray'
+                result.inputType = 'polyComplexArray'
             }
             else if (input[0][0].x !== undefined && input[0][0].y !== undefined) {
                 //console.log('is nested point object array')
-                return 'polyComplexObjectArray'
+                result.inputType = 'polyComplexObjectArray'
             }
+            //return result
         }
 
         // is point array
-        else if (input[0].x!==undefined && input[0].y!==undefined) {
+        else if (input[0].x !== undefined && input[0].y !== undefined) {
             //console.log('is nested point object array')
-            return 'polyObjectArray'
+            result.inputType = 'polyObjectArray'
         }
 
         // path data array
         else if (input[0]?.type && input[0]?.values
         ) {
-            return "pathData"
-
+            result.inputType = "pathData"
         }
-        //console.log(input[0], typeof input[0]);
-        return "array";
+
+
+        return result;
     }
 
     if (typeof input === "string") {
         input = input.trim();
         let isSVG = input.includes('<svg') && input.includes('</svg');
+        let isSymbol = input.startsWith('<symbol') && input.includes('</symbol');
         let isPathData = input.startsWith('M') || input.startsWith('m');
         let isPolyString = !isNaN(input.substring(0, 1)) && !isNaN(input.substring(input.length - 1, input.length))
-
+        let isJson = isNumberJson(input)
+        //console.log('isNumberJson', isJson);
 
         if (isSVG) {
-            type = 'svgMarkup'
+            let validate = validateSVG(input);
+            ({isValid, log} = validate) ;
+            if(!isValid){
+                //input = dummySVG
+                result.inputType = 'invalid'
+                result.isValid=false,
+                //result.log = JSON.stringify(log, null, ' ')
+                result.log = log
+            }else{
+                result.inputType = 'svgMarkup'
+            }
+
+            result.fileReport = validate.fileReport
+
+        }
+
+        else if (isJson) {
+            result.inputType = 'json'
+        }
+
+        else if (isSymbol) {
+            result.inputType = 'symbol'
         }
         else if (isPathData) {
-            type = 'pathDataString'
+            result.inputType = 'pathDataString'
         }
         else if (isPolyString) {
-            type = 'polyString'
+            result.inputType = 'polyString'
         }
 
         else {
             let url = /^(file:|https?:\/\/|\/|\.\/|\.\.\/)/.test(input);
             let dataUrl = input.startsWith('data:image');
-            type = url || dataUrl ? "url" : "string";
+            result.inputType = url || dataUrl ? "url" : "string";
         }
 
-        return type
+        return result
     }
 
-    type = typeof input
-    let constructor = input.constructor.name
+    result.inputType = (input.constructor.name || typeof input ).toLowerCase()
 
-    return (constructor || type).toLowerCase();
+    return result;
 }
+
+
+function isNumberJson(str) {
+
+    str = str.trim();
+
+    let hasNumber = /\d/.test(str)
+    let hasInvalid = /[abcdfghijklmnopqrstuvwz]/gi.test(str)
+    if (!hasNumber || hasInvalid) return false
+
+
+    // is JSON like
+    let isJson = str.startsWith('[') && str.endsWith(']');
+
+    return isJson
+    
+}

package/src/index.js

@@ -44,11 +44,19 @@ export{getElementTransform as getElementTransform};
 import {getViewBox} from './svg_getViewbox.js';
 export{getViewBox as getViewBox};
 
+import { validateSVG } from './svgii/svg_validate.js';
+export { validateSVG as validateSVG};
+import { detectInputType } from './detect_input.js';
+export { detectInputType as detectInputType};
+
+
 
 // IIFE 
 if (typeof window !== 'undefined') {
     window.svgPathSimplify = svgPathSimplify;
     window.getElementTransform = getElementTransform;
+    window.validateSVG = validateSVG;
+    window.detectInputType = detectInputType;
     //window.simplifyPolySchneider = simplifyPolySchneider;
     //window.getPathDataFromEl = getPathDataFromEl;
     //window.parsePathDataString = parsePathDataString;

package/src/pathData_simplify_cubic.js

@@ -143,10 +143,10 @@ export function combineCubicPairs(com1, com2, {
     let comS = getExtrapolatedCommand(com1, com2, t)
 
     // test new point-at-t against original mid segment starting point
-    let pt = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
+    let ptI = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
 
 
-    let dist0 = getDistManhattan(com1.p, pt)
+    let dist0 = getDistManhattan(com1.p, ptI)
     let dist1 = 0, dist2 = 0;
     let close = dist0 < maxDist;
     let success = false;
@@ -162,32 +162,42 @@ export function combineCubicPairs(com1, com2, {
          * to prevent distortions
          */
 
-        // 2nd segment mid
-        let pt_2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
+        // 1st segment mid
+        let ptM_seg1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
+
+        let t2 = t * 0.5;
+        // combined interpolated mid point
+        let ptI_seg1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
+        dist1 = getDistManhattan(ptM_seg1, ptI_seg1)
 
-        // simplified path
-        let t3 = (1 + t) * 0.5;
-        let ptS_2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
-        dist1 = getDistManhattan(pt_2, ptS_2)
 
         error += dist1;
 
         if (dist1 < maxDist) {
 
-            //renderPoint(markers, pt_2, 'magenta')
-            //renderPoint(markers, ptS_2, 'green', '0.5%')
-
-            // 1st segment mid
-            let pt_1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
+            // 2nd segment mid
+            let ptM_seg2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
 
-            let t2 = t * 0.5;
-            let ptS_1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
-            dist2 = getDistManhattan(pt_1, ptS_1)
+            // simplified path
+            let t3 = (1 + t) * 0.5;
+            let ptI_seg2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
+            dist2 = getDistManhattan(ptM_seg2, ptI_seg2)
 
             error += dist2;
 
             if (error < maxDist) success = true;
 
+
+            /*
+            renderPoint(markers, ptM_seg1, 'cyan')
+            renderPoint(markers, pt, 'orange', '1.5%', '1')
+            renderPoint(markers, ptM_seg2, 'orange')
+
+            renderPoint(markers, com1.p, 'green')
+            //renderPoint(markers, com2.p, 'green')
+            renderPoint(markers, ptI_seg1, 'purple')
+            */
+
         }
 
     } // end 1st try

package/src/pathData_simplify_harmonize_cpts.js

@@ -1,5 +1,81 @@
 import { checkLineIntersection, getDistManhattan, interpolate, pointAtT } from "./svgii/geometry";
-import { renderPoint } from "./svgii/visualize";
+import { renderPoint, renderPoly } from "./svgii/visualize";
+
+
+export function fixIntersectingCpts(pathData = []) {
+
+    let l = pathData.length;
+    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] }
+    let p = p0
+
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i]
+        let comPrev = pathData[i - 1] || null
+        let { type, values } = com
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+        let adjust = false;
+
+        //comN && comN.type==='C' &&
+        if (type === 'C') {
+            let tx = 1.2;
+            let cp1 = { x: values[0], y: values[1] }
+            p = { x: values[4], y: values[5] }
+            let cp2 = { x: values[2], y: values[3] }
+
+            let cp1_ex = interpolate(p0, cp1,   tx )
+            let cp2_ex = interpolate( p, cp2,   tx)
+
+            let valuesL = comPrev.values.slice(-2)
+            //let p0 = { x: valuesL[0], y: valuesL[1] }
+
+            // extend tangents
+            //let ptI = checkLineIntersection(p0, cp1_ex, p, cp2_ex, false, true)
+            let ptI = checkLineIntersection(p0, cp1, p, cp2_ex, true, true)
+
+            
+            /*
+            renderPoly(markers, [p0, cp1], 'orange',  '0.75')
+            renderPoly(markers, [p, cp2], 'blue',  '0.75')
+            renderPoly(markers, [p, cp2_ex], 'magenta',  '0.75')
+
+            renderPoint(markers, p0, 'orange',  '0.75')
+            renderPoint(markers, cp1, 'magenta', '0.75')
+            renderPoint(markers, cp1_ex, 'blue', '0.5')
+ 
+            renderPoint(markers, cp2, 'cyan', '0.75')
+            */
+           //renderPoint(markers, cp2_ex, 'purple', '0.75')
+
+           //renderPoint(markers, cp1, 'purple', '0.75')
+           //renderPoint(markers, cp1_ex, 'blue', '0.75')
+            
+            //renderPoint(markers, cp2, 'cyan')
+            /*
+            renderPoint(markers, p0, 'orange')
+            renderPoint(markers, p, 'magenta', '0.5')
+            */
+
+
+            if (ptI) {
+                let t = 0.666
+                cp1 = interpolate(p0, ptI, t)
+                cp2 = interpolate(p, ptI, t)
+                com.values = [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y]
+                //renderPoint(markers, ptI)
+            }
+
+        }
+
+        if (values.length) {
+            p0 = p
+        }
+    }
+
+
+    return pathData;
+}
+
 
 
 

package/src/pathData_simplify_revertToquadratics.js

@@ -6,7 +6,6 @@ export function pathDataRevertCubicToQuadratic(pathData, tolerance=1) {
         let com = pathData[c]
         let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
         if (type === 'C') {
-            //console.log(com);
             let comQ = revertCubicQuadratic(p0, cp1, cp2, p, tolerance)
             if (comQ.type === 'Q') {
                 comQ.extreme = com.extreme