frontbacked-svg 5.0.0

package/src/polyfills/DOMParser.ts

@@ -0,0 +1,28 @@
+const isNode = typeof window === 'undefined';
+
+export class DOMParserWrapper {
+    private parser: any;
+
+    constructor() {
+        if (isNode) {
+            const { JSDOM } = require("jsdom");
+            this.parser = JSDOM;
+        } else {
+            this.parser = new DOMParser();
+        }
+    }
+
+    public parseFromString(s: string, contentType = 'text/html'): any {
+        if (isNode) {
+            const dom = new this.parser(s, { contentType });
+            return dom.window.document;
+        } else {
+            return this.parser.parseFromString(s, contentType);
+        }
+    }
+}
+
+// Register the global DOMParser in Node.js
+if (isNode) {
+    (globalThis as any).DOMParser = DOMParserWrapper;
+}

package/src/polyfills/File.ts

@@ -0,0 +1,20 @@
+
+const isNode = typeof window === 'undefined';
+
+export class FileWrapper {
+
+    constructor(blob: any, name: string, mime: any) {
+        if(!isNode) {
+            return new File(blob, name, mime)
+
+        } else {
+            return blob
+        }
+    }
+    
+}
+
+// Register the global Image in Node.js
+if (isNode) {
+    (globalThis as any).File = FileWrapper;
+}

package/src/polyfills/Image.ts

@@ -0,0 +1,90 @@
+const isNode = typeof window === 'undefined';
+
+export class ImageWrapper {
+    private _onload: (() => void) | null = null;
+    private _onerror: ((err: any) => void) | null = null;
+    private _src: string = '';
+    private _imageLoaded: boolean = false;
+    private _realImage: any;
+    
+    constructor() {
+        if (isNode) {
+          const { Image } = require('canvas');
+          this._realImage = new Image();
+        } else {
+          this._realImage = new window.Image();
+        }
+    }
+
+    get onload() {
+        return this._onload;
+    }
+
+    set onload(callback: (() => void) | null) {
+        this._onload = callback;
+        this._realImage.onload = callback;
+    }
+
+    get onerror() {
+        return this._onerror;
+    }
+
+    set onerror(callback: ((err: any) => void) | null) {
+        this._onerror = callback;
+        this._realImage.onerror = callback;
+    }
+
+    get realImage(): any {
+        return this._realImage;
+    }
+
+    get src(): string {
+        return this._src;
+    }
+
+    set src(value: string) {
+        this._src = value;
+        this._imageLoaded = false;
+
+        if (isNode) {
+            const { loadImage } = require('canvas');
+
+            const handleLoad = (img: any) => {
+                this._realImage = img; // Replace _realImage with the fully loaded image
+                this._imageLoaded = true;
+                if (this._onload) this._onload();
+            };
+
+            const handleError = (err: any) => {
+                this._imageLoaded = false;
+                if (this._onerror) this._onerror(err);
+            };
+
+            if (value.startsWith('data:image/') || value.startsWith('data:img/')) {
+                const buffer = Buffer.from(value.split(',')[1], 'base64');
+                loadImage(buffer).then(handleLoad).catch(handleError);
+            } else {
+                loadImage(value).then(handleLoad).catch(handleError);
+            }
+        } else {
+            this._realImage.src = value; // Native browser behavior
+        }
+    }
+
+    get width(): number {
+        return this._realImage.width;
+    }
+
+    get height(): number {
+        return this._realImage.height;
+    }
+
+    get complete(): boolean {
+        return this._imageLoaded;
+    }
+}
+
+// Register the global Image in Node.js
+if (isNode) {
+    (globalThis as any).Image = ImageWrapper;
+}

package/src/svgScaler.ts

@@ -0,0 +1,179 @@
+
+const scaleDownFont = (scaleH: number, scaleV: number, maxChars: number, chars: number) => {
+  // If the number of characters is within the maximum allowed,
+  // return the original scales.
+  if (chars <= maxChars) {
+    return { scaleH, scaleV };
+  }
+  
+  // Calculate the reduction factor.
+  const factor = maxChars / chars;
+  
+  // Apply the reduction factor to both horizontal and vertical scales.
+  return {
+    scaleH: scaleH * factor,
+    scaleV: scaleV * factor
+  };
+}
+
+export function responsiveTransform(
+  transform: string, 
+  widthScaler: (value: number) => number, 
+  heightScaler: (value: number) => number,
+  textContent?: string | null, 
+  maxTextBeforeScaleDown?: number | number
+) {
+  // Regex pattern to match different types of transforms, including matrix
+  const transformRegex = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]+)\)/g;
+
+  let newTransform = transform.replace(transformRegex, (match, type, values) => {
+    // Split the values inside the parentheses by space or comma
+    let valueArray = values.split(/[ ,]+/).map(Number);
+
+    // Adjust the values depending on the type of transform
+    if (type === 'translate') {
+      // Apply the widthScaler to the x value and the heightScaler to the y value
+      valueArray[0] = widthScaler(valueArray[0]);  // X
+      valueArray[1] = heightScaler(valueArray[1]); // Y
+
+    } else if (type === 'scale') {
+      // Apply the widthScaler to the first value and the heightScaler to the second if available
+      //No need to scale since we're already scaling the font-size
+      valueArray[0] = valueArray[0]//widthScaler(valueArray[0]);  // X scaling
+      if (valueArray.length > 1) {
+        //No need to scale since where's already scaling the font-size
+        valueArray[1] = valueArray[1]//heightScaler(valueArray[1]); // Y scaling
+      } else {
+        // If there is only one scale value, assume uniform scaling
+        valueArray[1] = valueArray[0];
+      }
+
+      if(maxTextBeforeScaleDown) {
+        const { scaleH, scaleV } = scaleDownFont(valueArray[0], valueArray[1], maxTextBeforeScaleDown, (textContent || "").length)
+        if([1.499].includes(valueArray[1])) {
+          //console.log("valueArray:", valueArray, scaleH, scaleV, maxTextBeforeScaleDown, textContent)
+        }
+        valueArray[0] = scaleH
+        valueArray[1] = scaleV
+      }
+
+    } else if (type === 'matrix') {
+      // Apply the widthScaler and heightScaler to the matrix values
+      //valueArray[0] = valueArray[0];  // a (x-scale)
+      //valueArray[1] = valueArray[1]; // b (y-skew)
+      //valueArray[2] = valueArray[2];  // c (x-skew)
+      //valueArray[3] = valueArray[3]; // d (y-scale)
+      valueArray[4] = widthScaler(valueArray[4]);  // e (x-translation)
+      valueArray[5] = heightScaler(valueArray[5]); // f (y-translation)
+
+    } else if (type === 'rotate') {
+      // No scaling needed for rotate values
+      // Just return the rotate transform unchanged
+      return `${type}(${values})`;
+
+    } else if (type === 'skewX') {
+      // No scaling needed for rotate values
+      // Just return the rotate transform unchanged
+      return `${type}(${widthScaler(Number(values.trim()))})`;
+
+    } else if (type === 'skewY') {
+      // No scaling needed for rotate values
+      // Just return the rotate transform unchanged
+      return `${type}(${heightScaler(Number(values.trim()))})`;
+    }
+
+    // Return the transformed string for this particular transform
+    return `${type}(${valueArray.join(' ')})`;
+  });
+
+  return newTransform;
+}
+
+export function responsivePathD(d: string, widthScaler: (value: number) => number, heightScaler: (value: number) => number) {
+    // Regex pattern to match path commands and their values
+    const commandRegex = /([MLHVCSQTZ])([^MLHVCSQTZ]*)/gi;
+  
+    let newD = d.replace(commandRegex, (match, command, values) => {
+      // Split the values by commas or spaces but retain commas in the result
+      let valueArray = values.trim().split(/([, ])/).map((v: string) => v.trim());
+  
+      // Process numeric values only
+      for (let i = 0; i < valueArray.length; i++) {
+        // Parse numeric values and apply scaling; leave commas and spaces unchanged
+        if (!isNaN(parseFloat(valueArray[i]))) {
+          if (command.toUpperCase() === 'H') {
+            valueArray[i] = widthScaler(parseFloat(valueArray[i])); // scale x for H
+          } else if (command.toUpperCase() === 'V') {
+            valueArray[i] = heightScaler(parseFloat(valueArray[i])); // scale y for V
+          } else {
+            // Scale both x and y for M, L, C, etc.
+            if (i % 2 === 0) {
+              valueArray[i] = widthScaler(parseFloat(valueArray[i])); // x values
+            } else {
+              valueArray[i] = heightScaler(parseFloat(valueArray[i])); // y values
+            }
+          }
+        }
+      }
+  
+      // Rejoin the values, preserving commas
+      return `${command}${valueArray.join('')}`;
+    });
+  
+    return newD;
+}
+
+export function responsiveViewBox(viewBox: string, widthScaler: (value: number) => number, heightScaler: (value: number) => number) {
+    // Split the viewBox values (min-x, min-y, width, height) by spaces
+    let viewBoxValues = viewBox.trim().split(' ').map((v: string) => parseFloat(v));
+  
+    if (viewBoxValues.length !== 4) {
+      throw new Error("Invalid viewBox format. Expected format: 'min-x min-y width height'");
+    }
+  
+    // Scale the values
+    viewBoxValues[0] = widthScaler(viewBoxValues[0]);  // min-x
+    viewBoxValues[1] = heightScaler(viewBoxValues[1]); // min-y
+    viewBoxValues[2] = widthScaler(viewBoxValues[2]);  // width
+    viewBoxValues[3] = heightScaler(viewBoxValues[3]); // height
+  
+    // Return the transformed viewBox as a string
+    return viewBoxValues.join(' ');
+}
+
+export function responsiveFontSize(fontSize: string, originalWidth: number, originalHeight: number, targetWidth: number, targetHeight: number) {
+    // Calculate the scaling factor using either width or height
+    const widthScaleFactor = targetWidth / originalWidth;
+    const heightScaleFactor = targetHeight / originalHeight;
+    
+    // You can choose one scaling method, e.g., height or width, or use the average of both
+    const scalingFactor = Math.min(widthScaleFactor, heightScaleFactor); // Use whichever is smaller for better readability
+  
+    // Regex to extract numeric part and unit (if any)
+    const fontSizeRegex = /^(\d+(\.\d+)?)([a-z%]*)$/i;
+    const match = fontSize.match(fontSizeRegex);
+  
+    if (!match) {
+      throw new Error("Invalid font size format");
+    }
+  
+    const numericValue = parseFloat(match[1]);   // The numeric part
+    const unit = match[3] || "";                 // The unit (e.g., px), default to empty if no unit
+  
+    // Scale the numeric part
+    const scaledValue = numericValue * scalingFactor;
+  
+    // Return the scaled font size with the original unit
+    return `${scaledValue}${unit}`;
+}
+
+//matrix(-0.08, -0.997, 0.998, -0.08, 4559.744, 2798.756)
+
+//matrix(-0.028 -0.354 0.355 -0.028 1620.963 994.942)
+
+//matrix(a, b, c, d, e, f)
+//matrix(a, skewX, skewY, d, translateX, translateY)
+
+//matrix(-0.028 -0.354 0.355 -0.028 1620.963 994.942)
+
+//matrix(-0.08, -0.997, 0.998, -0.08, 1620.963 994.942)

package/src/textGenCodeParser.ts

@@ -0,0 +1,319 @@
+const timestampToDate = (timestamp: any | Date | null | undefined): Date => {
+  try {
+      return (timestamp as any).toDate()
+
+  } catch(e) {
+      return timestamp as Date
+  }
+}
+
+class SeededRandom {
+  seed: number;
+
+  constructor(seed: number) {
+      this.seed = seed;
+  }
+
+  random(): number {
+      const x = Math.sin(this.seed++) * 10000;
+      return x - Math.floor(x);
+  }
+
+  randomInt(min: number, max: number): number {
+      return Math.floor(this.random() * (max - min + 1)) + min;
+  }
+}
+
+// Function to create a seed based on code, relevant data values, and position
+function createSeed(code?: string | null, position?: number | null, data?: { [x: string]: any } | null, conditionFn?: ((key: string) => boolean) | null): number {
+  if(
+    code === null || code === undefined || 
+    data === null || data === undefined || 
+    position === null || position === undefined || 
+    conditionFn === null || conditionFn === undefined
+  ) return 0
+  const relevantData = Object.keys(data)
+      .filter(key => conditionFn(key))
+      .map(key => data[key].toString().replace(/\s+/g, ''))
+      .join('');
+  const seedString = (code + relevantData + position.toString()).toLowerCase();
+  let seed = 0;
+  for (let i = 0; i < seedString.length; i++) {
+      seed = (seed << 5) - seed + seedString.charCodeAt(i);
+      seed |= 0; // Convert to 32-bit integer
+  }
+  return seed;
+}
+
+function formatDate(date: Date, format: string): string {
+  //console.log("formatDate:", date, "format", format)
+  try {
+    //console.log("formatDate:2", date, "format", format, date.getFullYear().toString())
+
+  } catch(e: any) {
+    //console.log("formatDate:error", date, "format", format, "error", e.message)
+  }
+
+  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const monthNames = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  const replacements: {[x: string]: string} = {
+      YYYY: date.getFullYear().toString(), // Full year
+      YY: String(date.getFullYear()).slice(-2), // Last two digits of year
+      MMMM: monthNames[date.getMonth()], // Full month name
+      MMM: monthNames[date.getMonth()].slice(0, 3), // Abbreviated month name
+      MM: String(date.getMonth() + 1).padStart(2, '0'), // Month number with leading zero
+      M: (date.getMonth() + 1).toString(), // Month number without leading zero
+      DD: String(date.getDate()).padStart(2, '0'), // Day of the month with leading zero
+      D: date.getDate().toString(), // Day of the month without leading zero
+      dddd: dayNames[date.getDay()], // Full day of the week name
+      ddd: dayNames[date.getDay()].slice(0, 3), // Abbreviated day of the week name
+      HH: String(date.getHours()).padStart(2, '0'), // Hour (24-hour format) with leading zero
+      H: date.getHours().toString(), // Hour (24-hour format) without leading zero
+      hh: String((date.getHours() % 12) || 12).padStart(2, '0'), // Hour (12-hour format) with leading zero
+      h: ((date.getHours() % 12) || 12).toString(), // Hour (12-hour format) without leading zero
+      mm: String(date.getMinutes()).padStart(2, '0'), // Minutes with leading zero
+      m: date.getMinutes().toString(), // Minutes without leading zero
+      ss: String(date.getSeconds()).padStart(2, '0'), // Seconds with leading zero
+      s: date.getSeconds().toString(), // Seconds without leading zero
+      A: date.getHours() < 12 ? 'AM' : 'PM', // AM or PM
+      a: date.getHours() < 12 ? 'am' : 'pm' // am or pm
+  };
+
+  // Handle escape characters
+  return replacements[format] || "";
+}
+
+// Example usage:
+//const today = new Date();
+//const formatString = "Hello James, today is \\YYYY/MM/DD, and it's \\dddd! Current time is HH:mm:ss \\(\\AM/PM\\).";
+//console.log(formatDate(today, formatString));
+// Output example: "Hello James, today is YYYY/MM/DD, and it's dddd! Current time is 14:25:09 (AM/PM)."
+
+export function textGenCodeParser(code: string | null, data: { [x: string]: any } | null, conditionFn?: (key: string) => boolean, onData?: (dataKey: string, data: string) => string) {
+  if (!code || !data) return "";
+
+  // Helper function to get words from a string
+  function getWords(str: string) {
+      return str.split(' ');
+  }
+
+  // Function to generate a random number based on seed
+  function randomNumber(min: string, max: string, position: number) {
+      const seed = conditionFn ? createSeed(code, position, data, conditionFn) : Math.random() * 1000000;
+      const seededRandom = new SeededRandom(seed);
+
+      // Check if min and max are numbers or number of digits
+      const isDigits = (value: any) => typeof value === 'string' && value.endsWith('d');
+      const isNumber = (value: any) => !isNaN(value) && !isDigits(`${value}`);
+
+      if (isNumber(min) && isNumber(max)) {
+          // Generate random number within the specified range
+          return seededRandom.randomInt(parseInt(min), parseInt(max)).toString();
+      } else if (isDigits(min) && isDigits(max)) {
+          // Parse number of digits from min and max
+          const minDigits = parseInt(min);
+          const maxDigits = parseInt(max);
+
+          // Generate a random number with a random number of digits between minDigits and maxDigits
+          let result = '';
+          let currentDigits = 0;
+
+          const numOfDigits = seededRandom.randomInt(minDigits, maxDigits);
+
+          while (currentDigits < numOfDigits) {
+              const num = seededRandom.randomInt(1, 9); // Ensure the first digit is not zero
+              result += num.toString();
+              currentDigits = result.length;
+          }
+
+          return result;
+      } else if (isDigits(min)) {
+          // Generate a number with exactly min digits
+          const minDigits = parseInt(min);
+          let result = seededRandom.randomInt(1, 9).toString(); // Ensure the first digit is not zero
+
+          for (let i = 1; i < minDigits; i++) {
+              const num = seededRandom.randomInt(0, 9); // Include zero as a possible digit
+              result += num.toString();
+          }
+
+          return result;
+      } else if (isNumber(min)) {
+          return Math.round(seededRandom.random() * parseInt(min)).toString();
+      } else {
+          // Invalid input scenario
+          return 'Invalid arguments for randomNumber function: ' + `Min: ${min} - ${typeof min} | Max: ${max} - ${typeof max}`;
+      }
+  }
+
+  // Helper function to handle variable substitution
+  function substituteVariable(key: string) {
+      if (!data) return '';
+      key = key.replace(/[{}]+/g, "");
+      // Check if the variable has a word slice
+      const wordSliceMatch = key.match(/(.+)\[w(\d+)\]/);
+      if (wordSliceMatch) {
+        const [, baseKey, wordIndex] = wordSliceMatch;
+        const d = onData? onData(baseKey, data[baseKey] || '') : data[baseKey]
+        const words = getWords(d || '');
+
+        //if(key.includes("id")) console.log("textGenCodeParser.match.l.d", key, baseKey, data[baseKey])
+        return words[parseInt(wordIndex) - 1] || '';
+
+      } else if (key in data) {
+          //if(key.includes("id")) console.log("textGenCodeParser.match.l.e", key, data[key])
+          const d = onData? onData(key, data[key] || '') : data[key]
+          //if(key.includes("id")) console.log("textGenCodeParser.match.l.f", d)
+          return d;
+      }
+      return '';
+  }
+
+  function extractVariables(code: string) {
+    const regex = /{([^{}]+?)}(\.\w+\[(.*?)\])?/g;
+    const results = [];
+    let match;
+    //console.log("textGenCodeParser.match.1", match, "code", code)
+      while ((match = regex.exec(code)) !== null) {
+          //if(code.includes("id")) console.log("textGenCodeParser.match.l.a", match, "code", code)
+          const varKey = match[1];
+          const varFunc = match[2] ? match[2].split('[')[0].slice(1) : null;
+          const varFuncArgs = match[3] ? match[3].split(',').map(arg => arg.trim()) : [];
+  
+          const replacementStart = match.index;
+          const replacementEnd = match.index + match[0].length - 1;
+  
+          const extracts = {
+            varKey,
+            varFunc: varFunc || undefined,
+            varFuncArgs: varFuncArgs.length ? varFuncArgs : undefined,
+            replacementStart,
+            replacementEnd
+          }
+
+          //if(code.includes("id")) console.log("textGenCodeParser.match.l.b", match, "code", code, "extracts", extracts)
+
+          results.push(extracts);
+      }
+  
+      return results;
+  }
+
+  function replaceSubtext(text: string, replacementText: string, start: number, end: number) {
+    // Extract the parts
+    const before = text.slice(0, start);
+    const after = text.slice(end + 1);
+
+    // Construct the new text
+    return before + replacementText + after;
+  }
+
+  function cut(variable: any, varA: string, varB?: string) {
+    var var1 = parseInt(varA)
+    var var2 = parseInt(varB || "")
+    return isNaN(var2)? variable.substring(var1 - 1) : variable.substring(var1 - 1, var2)
+  }
+  
+  function callVarFunc (variable: any, varFunc: string, varFuncArgs: string[] | undefined) {
+    var result = null
+    switch (varFunc) {
+      case "cut":
+        if(varFuncArgs && [1, 2].includes(varFuncArgs.length)) {
+          try {
+
+            result = cut(variable, varFuncArgs[0], varFuncArgs[1])
+
+          } catch(e) {}
+        }
+        break;
+      case "df":
+        if(varFuncArgs && [1,2,3].includes(varFuncArgs.length)) {
+          try {
+            var format = varFuncArgs[0]
+            var date = variable == "_"? new Date() : timestampToDate(variable)
+
+            result = formatDate(date, format)
+            if(varFuncArgs.length > 1) {
+              result = cut(result, varFuncArgs[1], varFuncArgs[2])
+            }
+
+          } catch(e) {console.log(e)}
+        }
+        break;
+    
+      default:
+        break;
+    }
+
+    return result
+
+  }
+
+  // Replace variables and handle special syntax
+  const repList: { id: string, char: string, count: number }[] = [];
+  let positionCounter = 0;
+  let intermediateResult = code.replace(/\(([^()]*)\)/g, (match, p1) => {
+      // Check for special syntax within parentheses
+      if (p1.startsWith("rn[")) {
+          // Random number generation
+          const [min, max] = p1.slice(3, -1).split(',');
+          return randomNumber(min, max, positionCounter++);
+      } else if (p1.match(/^([^*]+)(\*{1,2})(\d+)$/)) {
+          // Fixed count repetition
+          const [, char, operand, count] = p1.match(/^([^*]+)(\*{1,2})(\d+)$/) || [];
+          const total = parseInt(count);
+          // Repeat until the chars is the number of count
+          if (operand == "*") {
+              return char.repeat(total);
+          } // Repeat until the whole generated text length is the number of count
+          else {
+              const repId = `<${Math.floor(Math.random() * 1000000000)}>`;
+              repList.push({ id: repId, char, count: total });
+              return repId;
+          }
+      } else if (p1.includes("{") && p1.includes("}")) {
+        // Variable substitution
+        //'abc{var}ghi', 'abc{var}', '{var}'
+        var p1CodeExtraction = extractVariables(p1)
+
+        // Sort the extractions in reverse order of `replacementStart` to avoid position shifting during replacements
+        p1CodeExtraction.sort((a, b) => b.replacementStart - a.replacementStart);
+
+        //if(code.includes("id")) console.log("textGenCodeParser.match.l.c", match, "code", code, p1CodeExtraction)
+
+        for(const extraction of p1CodeExtraction) {
+          var variable = substituteVariable(extraction.varKey)
+          if(extraction.varFunc) {
+            variable = callVarFunc(variable, extraction.varFunc, extraction.varFuncArgs)
+          }
+
+          if(variable && p1.length > 0) {
+            p1 = replaceSubtext(p1, variable, extraction.replacementStart, extraction.replacementEnd)
+
+          } else {
+            p1 = ""
+            break
+          }
+        }
+        
+        return p1;
+      } else {
+          return p1;
+      }
+  });
+
+  for (const rep of repList) {
+      const textLength = (intermediateResult.length - rep.id.length);
+      if (textLength >= rep.count) {
+          break;
+      }
+      const reps = rep.char.repeat(rep.count - textLength);
+      intermediateResult = intermediateResult.replace(rep.id, reps);
+  }
+
+  return intermediateResult;
+}