EoQ_Supporting_Files/eoq_code/savesvg.js

function doBigWhiteTriangle(id){
    const svg = document.getElementById(id);

    // Triangle settings
    const sideLength = 740;
    const centerX = 435;
    const centerY = 493;
    const angleOffset = -90 * (Math.PI / 180); // Start at top
    
    // Generate 3 equilateral triangle points
    const points = [];
    for (let i = 0; i < 3; i++) {
      const angle = angleOffset + i * (2 * Math.PI / 3); // 120° steps
      const x = centerX + (sideLength / Math.sqrt(3)) * Math.cos(angle);
      const y = centerY + (sideLength / Math.sqrt(3)) * Math.sin(angle);
      points.push(`${x},${y}`);
    }
    
    // Create the triangle
    const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    triangle.setAttribute("points", points.join(" "));
    triangle.setAttribute("fill", "white");
    //triangle.setAttribute("stroke", "black");       // Optional
    //triangle.setAttribute("stroke-width", "2");     // Optional
    svg.appendChild(triangle);
}

function doLittleWhiteTriangle(id){
    const svg = document.getElementById(id);

    // Triangle settings
    const sideLength = 369;
    const centerX = 250;
    const centerY = 350;
    const angleOffset = -90 * (Math.PI / 180); // Start at top
    
    // Generate 3 equilateral triangle points
    const points = [];
    for (let i = 0; i < 3; i++) {
      const angle = angleOffset + i * (2 * Math.PI / 3); // 120° steps
      const x = centerX + (sideLength / Math.sqrt(3)) * Math.cos(angle);
      const y = centerY + (sideLength / Math.sqrt(3)) * Math.sin(angle);
      points.push(`${x},${y}`);
    }
    
    // Create the triangle
    const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    triangle.setAttribute("points", points.join(" "));
    triangle.setAttribute("fill", "white");
    //triangle.setAttribute("stroke", "black");       // Optional
    //triangle.setAttribute("stroke-width", "2");     // Optional
    svg.appendChild(triangle);

    
}




/*
function inlineStyles(svgElement) {
    const allElements = svgElement.querySelectorAll('*');
    const computedStyles = window.getComputedStyle(svgElement);
  
    // Apply style to root SVG element
    svgElement.setAttribute("style", computedStyles.cssText || "");
  
    // Recursively apply computed styles to each element
    allElements.forEach(el => {
      const computed = window.getComputedStyle(el);
      let inline = '';
      for (let i = 0; i < computed.length; i++) {
        const key = computed[i];
        const value = computed.getPropertyValue(key);
        inline += `${key}:${value};`;
      }
      el.setAttribute('style', inline);
    });
  }

*/

function inlineStyles(svgElement) {
  const allElements = svgElement.querySelectorAll('*');

  allElements.forEach(el => {
    const computed = window.getComputedStyle(el);
    const style = [];

    for (let i = 0; i < computed.length; i++) {
      const key = computed[i];
      let value = computed.getPropertyValue(key);

      // Replace currentColor with resolved color
      if (value === 'currentcolor') {
        value = computed.color;
      }

      style.push(`${key}:${value};`);
    }

    el.setAttribute('style', style.join(' '));
  });

  // Also inline root <svg>
  const svgComputed = window.getComputedStyle(svgElement);
  let rootStyle = '';
  for (let i = 0; i < svgComputed.length; i++) {
    const key = svgComputed[i];
    let value = svgComputed.getPropertyValue(key);
    if (value === 'currentcolor') {
      value = svgComputed.color;
    }
    rootStyle += `${key}:${value};`;
  }
  svgElement.setAttribute('style', rootStyle);
}


/*
function makeSvgRightClickable(id) {
    const svg = document.getElementById(id);
    inlineStyles(svg);
  
    // Ensure SVG has proper namespace
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  
    // Serialize SVG
    const svgData = new XMLSerializer().serializeToString(svg);
    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(svgBlob);
  
    // Create image element
    const img = document.createElement("img");
    img.src = url;
    img.width = svg.width.baseVal.value;
    img.height = svg.height.baseVal.value;
    img.alt = "Right-click to save SVG image";
  
    // Replace or insert after SVG
    //svg.style.display = "none";  // hide original
    svg.parentNode.insertBefore(img, svg.nextSibling);
}
  
  // Call the function after D3 has drawn the SVG
  //makeSvgRightClickable("id");
*/


function makeSvgRightClickable(id) {
    const svg = document.getElementById(id);
    inlineStyles(svg);

    // Set namespace
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

    // Ensure width and height are set
    if (!svg.hasAttribute("width")) svg.setAttribute("width", svg.getBoundingClientRect().width);
    if (!svg.hasAttribute("height")) svg.setAttribute("height", svg.getBoundingClientRect().height);

    // Serialize
    const svgData = new XMLSerializer().serializeToString(svg);
    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(svgBlob);

    // Create image element
    const img = document.createElement("img");
    img.src = url;
    img.width = svg.getAttribute("width");
    img.height = svg.getAttribute("height");
    img.alt = "Right-click to save SVG image";

    svg.style.display = "none";
    svg.parentNode.insertBefore(img, svg.nextSibling);
}