svg-path-simplify 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-path-simplify",
-  "version": "0.4.1",
+  "version": "0.4.3",
 
   "type": "module",
 
@@ -34,7 +34,10 @@
     "watch": "rollup -c --watch",
     "test": "node tests/testSVG.js",
     "test1": "node tests/test.js",
-    "test2": "node tests/testSVG2.js"
+    "test2": "node tests/testSVG2.js",
+    "test3": "node tests/testSVG_transform.js",
+    "test4": "node tests/testSVG_shape.js"
+    
   },
 
   "keywords": [

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

@@ -14,12 +14,12 @@ export function detectInputType(input) {
         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'
             }
 
-            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'
             }
@@ -30,7 +30,7 @@ export function detectInputType(input) {
         }
 
         // 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'
         }
@@ -48,13 +48,23 @@ export function detectInputType(input) {
     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'
         }
+
+        else if (isJson) {
+            type = 'json'
+        }
+
+        else if (isSymbol) {
+            type = 'symbol'
+        }
         else if (isPathData) {
             type = 'pathDataString'
         }
@@ -68,11 +78,31 @@ export function detectInputType(input) {
             type = url || dataUrl ? "url" : "string";
         }
 
+
         return type
     }
 
     type = typeof input
     let constructor = input.constructor.name
 
+
+
     return (constructor || type).toLowerCase();
 }
+
+
+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/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;
+}
+