/*
![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-to-path.jpg)

This script allows you to fit a text element along a selected path: line, arrow, freedraw, ellipse, rectangle, or diamond. You can select either a path or a text element, or both:

- If only a path is selected, you will be prompted to provide the text.
- If only a text element is selected and it was previously fitted to a path, the script will use the original path if it is still present in the scene.
- If both a text and a path are selected, the script will fit the text to the selected path.

If the path is a perfect circle, you will be prompted to choose whether to fit the text above or below the circle.

After fitting, the text will no longer be editable as a standard text element, but you'll be able to edit it with this script. Text on path cannot function as a markdown link. Emojis are not supported.

```javascript
*/
if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.12.0")) {
  new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
  return;
}

els = ea.getViewSelectedElements();
let pathEl = els.find(el=>["ellipse", "rectangle", "diamond", "line", "arrow", "freedraw"].includes(el.type));
const textEl = els.find(el=>el.type === "text");
const tempElementIDs = [];

const win = ea.targetView.ownerWindow;

let pathElID = textEl?.customData?.text2Path?.pathElID;
if(!pathEl) {
  if (pathElID) {
    pathEl = ea.getViewElements().find(el=>el.id === pathElID);
    pathElID = pathEl?.id;
  }
  if(!pathElID) {
    new Notice("Please select a text element and a valid path element (ellipse, rectangle, diamond, line, arrow, or freedraw)");
    return;
  }
} else {
  pathElID = pathEl.id;
}
const originalPathType = pathEl.type;
const originalPathDirectionLR = ["line","arrow","freedraw"].includes(pathEl.type)
  ? (pathEl.points[pathEl.points.length-1][0] < 0 ? true : false)
  : true;

const st = ea.getExcalidrawAPI().getAppState();
const fontSize = textEl?.fontSize ?? st.currentItemFontSize;
const fontFamily = textEl?.fontFamily ?? st.currentItemFontFamily;
ea.style.fontSize = fontSize;
ea.style.fontFamily = fontFamily;
const fontHeight = ea.measureText("M").height*1.3;

// Remove isCircle check and introduce isClosedShape
const isPathLinear = ["line", "arrow", "freedraw"].includes(pathEl.type);
const isClosedShape = ["ellipse", "rectangle", "diamond"].includes(originalPathType) || (pathEl.type === "line" && pathEl.polygon);

// Expand and convert all closed shapes to line elements uniformly
if(!isPathLinear) {
  ea.copyViewElementsToEAforEditing([pathEl]);
  pathEl = ea.getElement(pathEl.id);

  if (pathEl.type === "line" && isClosedShape && isClockwise(pathEl.points)) {
    pathEl.points = pathEl.points.reverse();
  }

  pathEl.x -= fontHeight/2;
  pathEl.y -= fontHeight/2;
  pathEl.width += fontHeight;
  pathEl.height += fontHeight;
  tempElementIDs.push(pathEl.id);

  switch (pathEl.type) {
    case "rectangle":
      pathEl = rectangleToLine(pathEl);
      break;
    case "ellipse":
      pathEl = ellipseToLine(pathEl);
      break;
    case "diamond":
      pathEl = diamondToLine(pathEl);
      break;
  }
  tempElementIDs.push(pathEl.id);
}

// ---------------------------------------------------------
// Convert path to SVG and use real path for text placement.
// ---------------------------------------------------------
let isLeftToRight = true;
let pathElBottom = null;

if (
  (["line", "arrow"].includes(pathEl.type) && pathEl.roundness !== null) ||
  pathEl.type === "freedraw"
) {
  [pathEl, isLeftToRight, pathElBottom] = await convertBezierToPoints();
} else if (pathEl.points) {
  isLeftToRight = pathEl.points[pathEl.points.length - 1][0] >= 0;
}

// ---------------------------------------------------------
// Retrieve original settings from text-on-path customData
// ---------------------------------------------------------
let currentOffsetPct = textEl?.customData?.text2Path?.offsetPct ?? 0;
let currentDistanceOffset = textEl?.customData?.text2Path?.distanceOffset ?? 0;
let currentLetterSpacing = textEl?.customData?.text2Path?.letterSpacing ?? 0;

// Map legacy archAbove to currentIsReversed for backwards compatibility
let currentIsReversed = textEl?.customData?.text2Path?.isReversed ?? (textEl?.customData?.text2Path?.archAbove === false ? true : false);
let currentPlaceInside = textEl?.customData?.text2Path?.placeInside ?? false; 
let currentText = textEl?.customData?.text2Path
  ? textEl.customData.text2Path.text
  : textEl?.text ?? "";
currentText = currentText.replace(/ \n/g," ").replace(/\n /g, " ").replace(/\n/g," ");

let generatedIDs = [];
let updateTimeout = null;
let textUpdateTimeout = null;

function isClockwise(points) {
  if(points.length <=3 ) return true
  return points[points.length-2] > 0
}

async function updatePath() {
  if (!currentText || currentText.trim() === "") return;

  ea.clear();
  let elementsToDelete = [];
  
  // Target generated elements from this session, or the original text element 
  // and its associated path characters if editing a pre-existing path
  if (generatedIDs.length > 0) {
    elementsToDelete = ea.getViewElements().filter(el => generatedIDs.includes(el.id));
  } else if (textEl && !textEl.isDeleted) {
    if (textEl?.customData?.text2Path) {
      const pathID = textEl.customData.text2Path.pathID;
      elementsToDelete = ea.getViewElements().filter(el => el.customData?.text2Path && el.customData.text2Path.pathID === pathID);
    } else {
      elementsToDelete = [textEl];
    }
  }

  if (elementsToDelete.length > 0) {
    ea.copyViewElementsToEAforEditing(elementsToDelete);
    ea.getElements().forEach(el => { el.isDeleted = true; });
  }

  // Re-apply style rules to the EA workbench context
  ea.style.fontSize = fontSize;
  ea.style.fontFamily = fontFamily;
  ea.style.strokeColor = textEl?.strokeColor ?? st.currentItemStrokeColor;
  ea.style.opacity = textEl?.opacity ?? st.currentItemOpacity;

  generatedIDs = [];

  // Apply fitTextToShape universally
  await fitTextToShape();
}

// -------------------------------------
// Floating Modal UI
// -------------------------------------
const modal = new ea.FloatingModal(ea.plugin.app);

// Constrain the modal width
modal.modalEl.style.width = "400px";
modal.modalEl.style.maxWidth = "100%";

let outsideClickHandler; // Store reference to remove it later

modal.onOpen = () => {
  modal.contentEl.empty();
  
  // Text Input
  const textSetting = new ea.obsidian.Setting(modal.contentEl)
    .setName("Text")
    .addTextArea(text => {
      text.setValue(currentText)
          .onChange(val => {
            currentText = val.replace(/ \n/g," ").replace(/\n /g, " ").replace(/\n/g," ");
            if (textUpdateTimeout) clearTimeout(textUpdateTimeout);
            textUpdateTimeout = setTimeout(() => {
              updatePath();
            }, 1000); 
          });
      // Make text area fill its container
      text.inputEl.style.width = "100%";
      text.inputEl.style.minHeight = "80px";
      text.inputEl.style.resize = "vertical";
    });
    
  // Force block layout so the textarea sits below the label and takes 100% width
  textSetting.settingEl.style.display = "block";
  textSetting.controlEl.style.width = "100%";
  textSetting.controlEl.style.marginTop = "8px";

  // Offset Slider (Now applies to all shapes)
  const offsetSetting = new ea.obsidian.Setting(modal.contentEl)
    .setName("Slide text along the path")
    .addSlider(slider => {
      slider.setLimits(-50, 50, 0.1)
            .setValue(currentOffsetPct)
            .onChange(val => {
              currentOffsetPct = val;
              // 500ms Throttle for continuous sliding to keep performance smooth
              if (updateTimeout) clearTimeout(updateTimeout);
              updateTimeout = setTimeout(() => {
                updatePath();
              }, 500); 
            });
      // Make the slider stretch to fill the control element
      slider.sliderEl.style.width = "100%";
    });
    
  // Tell the control container to expand and take up all remaining width
  offsetSetting.controlEl.style.flexGrow = "1";
  offsetSetting.controlEl.style.width = "100%";
  offsetSetting.infoEl.style.flex = "0 1 auto"; 

  const distanceSetting = new ea.obsidian.Setting(modal.contentEl)
    .setName("Distance from line")
    .addSlider(slider => {
      slider.setLimits(-50, 50, 1)
            .setValue(currentDistanceOffset)
            .onChange(val => {
              currentDistanceOffset = val;
              if (updateTimeout) clearTimeout(updateTimeout);
              updateTimeout = setTimeout(() => { updatePath(); }, 500); 
            });
      slider.sliderEl.style.width = "100%";
    });
  distanceSetting.controlEl.style.flexGrow = "1";
  distanceSetting.controlEl.style.width = "100%";
  distanceSetting.infoEl.style.flex = "0 1 auto"; 

  const spacingSetting = new ea.obsidian.Setting(modal.contentEl)
    .setName("Character spacing")
    .addSlider(slider => {
      slider.setLimits(-25, 50, 1)
            .setValue(currentLetterSpacing)
            .onChange(val => {
              currentLetterSpacing = val;
              if (updateTimeout) clearTimeout(updateTimeout);
              updateTimeout = setTimeout(() => { updatePath(); }, 500); 
            });
      slider.sliderEl.style.width = "100%";
    });
  spacingSetting.controlEl.style.flexGrow = "1";
  spacingSetting.controlEl.style.width = "100%";
  spacingSetting.infoEl.style.flex = "0 1 auto"; 

  new ea.obsidian.Setting(modal.contentEl)
    .setName("Reverse text")
    .setDesc("Flips the text direction (useful for placing text on the inside or bottom of a shape).")
    .addToggle(toggle => {
      toggle.setValue(currentIsReversed)
            .onChange(val => {
              currentIsReversed = val;
              updatePath();
            });
    });

  const placementLabel = isClosedShape ? "Place inside shape" : "Place on opposite side";
  const placementDesc = isClosedShape
      ? "Places the text on the inside of the shape's boundary."
      : "Places the text on the other side of the path.";

  new ea.obsidian.Setting(modal.contentEl)
    .setName(placementLabel)
    .setDesc(placementDesc)
    .addToggle(toggle => {
      toggle.setValue(currentPlaceInside)
            .onChange(val => {
              currentPlaceInside = val;
              updatePath();
            });
    });

  // Action Buttons
  const btnContainer = modal.contentEl.createDiv({ attr: { style: "display: flex; gap: 10px; justify-content: flex-end; margin-top: 15px;" } });
  
  const updateBtn = btnContainer.createEl("button", { text: "Update Preview" });
  updateBtn.onclick = () => {
    if (updateTimeout) clearTimeout(updateTimeout);
    if (textUpdateTimeout) clearTimeout(textUpdateTimeout);
    updatePath();
  };

  const closeBtn = btnContainer.createEl("button", { text: "Done", cls: "mod-cta" });
  closeBtn.onclick = async () => {
    if (updateTimeout) clearTimeout(updateTimeout);
    if (textUpdateTimeout) clearTimeout(textUpdateTimeout);
    await updatePath();
    modal.close();
  };

  // Add outside click listener
  outsideClickHandler = (e) => {
    // If the click is outside the modal element
    if (modal.modalEl && !modal.modalEl.contains(e.target)) {
      modal.close();
    }
  };

  // Delay attaching the listener slightly so the click that opened the script 
  // doesn't immediately trigger the close.
  setTimeout(() => {
    ea.targetView.ownerWindow.addEventListener("pointerdown", outsideClickHandler);
  }, 100);
};

modal.onClose = () => {
   if (updateTimeout) clearTimeout(updateTimeout);
   if (outsideClickHandler) {
     ea.targetView.ownerWindow.removeEventListener("pointerdown", outsideClickHandler);
   }
};

modal.enableKeyCapture();
modal.open();

// Trigger initial calculation
if (currentText.trim() !== "") {
  await updatePath();
}


//----------------------------------------
//----------------------------------------
// Supporting functions
//----------------------------------------
//----------------------------------------
function transposeElements(ids) {
  const dims = ea.measureText("M");
  ea.getElements().filter(el=>ids.has(el.id)).forEach(el=>{
      el.x -= dims.width/2;
      el.y -= dims.height/2;
  })
}

// Function to convert any shape to a series of points along its path
function calculatePathPoints(element) { 
  const points = [];
  
  let minX = 0, minY = 0, maxX = 0, maxY = 0;
  if (element.points && element.points.length > 0) {
    minX = Math.min(...element.points.map(p => p[0]));
    minY = Math.min(...element.points.map(p => p[1]));
    maxX = Math.max(...element.points.map(p => p[0]));
    maxY = Math.max(...element.points.map(p => p[1]));
  } else {
    maxX = element.width;
    maxY = element.height;
  }
  const cx = element.x + minX + (maxX - minX) / 2;
  const cy = element.y + minY + (maxY - minY) / 2;
  
  const angle = element.angle || 0;
  
  // Get absolute coordinates of all points, accounting for rotation
  const absolutePoints = element.points.map(point => {
    const sx = point[0] + element.x;
    const sy = point[1] + element.y;
    
    if (angle !== 0) {
      const cos = Math.cos(angle);
      const sin = Math.sin(angle);
      const rx = cos * (sx - cx) - sin * (sy - cy) + cx;
      const ry = sin * (sx - cx) + cos * (sy - cy) + cy;
      return [rx, ry];
    }
    return [sx, sy];
  });
  
  // If it's a closed polygon, ensure the last point connects to the first
  if (element.polygon) {
    const firstPt = absolutePoints[0];
    const lastPt = absolutePoints[absolutePoints.length - 1];
    if (Math.abs(firstPt[0] - lastPt[0]) > 0.001 || Math.abs(firstPt[1] - lastPt[1]) > 0.001) {
      absolutePoints.push([...firstPt]);
    }
  }
  
  // Calculate segment information
  let segments = [];
  for (let i = 0; i < absolutePoints.length - 1; i++) {
    const p0 = absolutePoints[i];
    const p1 = absolutePoints[i+1];
    const dx = p1[0] - p0[0];
    const dy = p1[1] - p0[1];
    const segmentLength = Math.sqrt(dx * dx + dy * dy);
    
    // Skip zero-length segments to prevent angle corruption
    if (segmentLength < 0.001) continue;
    
    const angleSeg = Math.atan2(dy, dx);
    segments.push({ p0, p1, length: segmentLength, angle: angleSeg });
  }
  
  // Sample points along each segment
  for (const segment of segments) {
    const numSamplePoints = Math.max(2, Math.ceil(segment.length / 5)); // 1 point every 5 pixels
    
    for (let i = 0; i < numSamplePoints; i++) {
      const t = i / (numSamplePoints - 1);
      const x = segment.p0[0] + t * (segment.p1[0] - segment.p0[0]);
      const y = segment.p0[1] + t * (segment.p1[1] - segment.p0[1]);
      points.push([x, y, segment.angle]);
    }
  }
  
  return points;
}

// Function to distribute text along any path
function distributeTextAlongPath(text, pathPoints, pathID, objectIDs, offset = 0, isLeftToRight, isClosed = false, isReversed = false, isInside = false, isBottomEdge = false) {
  if (pathPoints.length === 0) return;

  const originalText = text;
  
  // Determine if we need to draw the characters backwards based on path direction and reversal setting
  let shouldReverseString = !isLeftToRight;
  if (isReversed) {
    shouldReverseString = !shouldReverseString;
  }

  if (shouldReverseString) {
    text = text.split('').reverse().join('');
  }

  let pathLength = 0;
  let pathSegments = [];
  let accumulatedLength = 0;
  
  for (let i = 1; i < pathPoints.length; i++) {
    const [x1, y1] = [pathPoints[i-1][0], pathPoints[i-1][1]];
    const [x2, y2] = [pathPoints[i][0], pathPoints[i][1]];
    const segLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    
    if (segLength < 0.001) continue;

    pathSegments.push({
      startPoint: [x1, y1], // Create new arrays to safely mutate them later
      endPoint: [x2, y2],
      length: segLength,
      startDist: accumulatedLength,
      endDist: accumulatedLength + segLength
    });
    
    accumulatedLength += segLength;
    pathLength += segLength;
  }
  
  // --- Trimming logic to remove freedraw terminal hooks ---
  if (originalPathType === "freedraw" && !isClosed && pathSegments.length > 0) {
    let trimDist = 15;
    while (pathSegments.length > 0 && trimDist > 0) {
      const lastSeg = pathSegments[pathSegments.length - 1];
      if (lastSeg.length <= trimDist) {
        trimDist -= lastSeg.length;
        pathSegments.pop();
      } else {
        const ratio = (lastSeg.length - trimDist) / lastSeg.length;
        lastSeg.endPoint[0] = lastSeg.startPoint[0] + (lastSeg.endPoint[0] - lastSeg.startPoint[0]) * ratio;
        lastSeg.endPoint[1] = lastSeg.startPoint[1] + (lastSeg.endPoint[1] - lastSeg.startPoint[1]) * ratio;
        lastSeg.length -= trimDist;
        lastSeg.endDist -= trimDist;
        break;
      }
    }
    pathLength = pathSegments.length > 0 ? pathSegments[pathSegments.length - 1].endDist : 0;
  }

  if (pathSegments.length === 0) return;

  // Pre-calculate contextual widths to preserve natural kerning
  const substrWidths = [];
  const spaceWidth = ea.measureText(" ").width;
  for (let i = 0; i <= text.length; i++) {
    const sub = text.substring(0, i);
    substrWidths.push(ea.measureText(sub + " ").width - spaceWidth);
  }

  // Calculate the exact target distance (center-to-center) on a straight line
  const centers = [];
  for (let i = 0; i < text.length; i++) {
    centers.push((substrWidths[i] + substrWidths[i+1]) / 2);
  }

  // Helper to get the exact projected coordinate on the offset path
  function getProjectedPoint(s, dy) {
    let actualDist = s;
    if (isClosed && pathLength > 0) {
      actualDist = ((s % pathLength) + pathLength) % pathLength;
    }
    
    let pointInfo = getPointAtDistance(actualDist, pathSegments, pathLength);
    if (!pointInfo) return null;
    
    const rotAngle = pointInfo.angle + (isLeftToRight ? 0 : Math.PI);
    const rotatedDx = -dy * Math.sin(rotAngle);
    const rotatedDy = dy * Math.cos(rotAngle);
    
    return {
      x: pointInfo.x - rotatedDx,
      y: pointInfo.y - rotatedDy,
      angle: rotAngle
    };
  }

  let currentS = offset;
  let lastPlacedPoint = null;
  
  for (let i = 0; i < text.length; i++) {
    const character = text.substring(i, i+1);
    const charMetrics = ea.measureText(character);
    const charPixelWidth = charMetrics.width;
    const charPixelHeight = charMetrics.height;

    // Determine the vertical shift required to place the text
    let dy = 0;
    if (["line", "arrow", "freedraw"].includes(originalPathType)) {
      // For open lines, shift UP so the text sits on top of the line
      const margin = ea.style.fontSize * 0.2;
      dy = (charPixelHeight / 2) + margin;
      
      // Apply custom distance offset (mapped to percentage of fontSize)
      dy += (currentDistanceOffset / 100) * ea.style.fontSize;
      
      // If we are using the bottom edge, its normal vectors actually point UP into the stroke.
      // So we must invert dy to push the text DOWN away from the stroke edge.
      // if (isBottomEdge) dy = -dy;
      
      if (isInside) dy = -dy; 
    } else {
      // For shapes, the path was already expanded outwards by fontHeight/2 earlier in the script.
      // Therefore, the base path is exactly where the text centers should be.
      dy = 0;
      
      // Apply custom distance offset (mapped to percentage of fontSize)
      dy += (currentDistanceOffset / 100) * ea.style.fontSize;
      
      if (isInside) dy = -dy - fontHeight; 
    }

    // Target spatial distance from the previous character center
    let targetDist = i === 0 ? centers[0] : centers[i] - centers[i-1];
    
    // Apply custom letter spacing (scale mapped to percentage of font size)
    if (i > 0) {
      targetDist += (currentLetterSpacing / 100) * ea.style.fontSize;
      if (targetDist < 1) targetDist = 1; // Prevent backward steps or collapsed kerning
    }

    if (i === 0) {
      // Find the starting reference point at 'offset'
      lastPlacedPoint = getProjectedPoint(offset, dy);
    }

    let safety = 0;
    let currPt = getProjectedPoint(currentS, dy);
    let dist = (currPt && lastPlacedPoint) ? Math.hypot(currPt.x - lastPlacedPoint.x, currPt.y - lastPlacedPoint.y) : 0;
    
    // Ray-marching: Step forward along the base path until the 2D Euclidean distance 
    // between the character centers exactly matches the natural kerning distance.
    while (dist < targetDist && safety < 10000) {
      currentS += 0.5; // High-precision half-pixel steps
      currPt = getProjectedPoint(currentS, dy);
      if (currPt && lastPlacedPoint) {
        dist = Math.hypot(currPt.x - lastPlacedPoint.x, currPt.y - lastPlacedPoint.y);
      }
      safety++;
    }
    
    lastPlacedPoint = currPt;
    if (!currPt) continue;

    // Center the visual bounding box on that exact structural center
    const drawX = currPt.x - charPixelWidth / 2;
    const drawY = currPt.y - charPixelHeight / 2;

    // If reversing the text, rotate the characters 180 degrees to keep them upright 
    ea.style.angle = currPt.angle + (isReversed ? Math.PI : 0);
    ea.style.textAlign = "left";
    ea.style.verticalAlign = "top";
    
    const charID = ea.addText(drawX, drawY, character);
    
    // Pass custom properties back into the customData to be persisted
    ea.addAppendUpdateCustomData(charID, {
      text2Path: {
        pathID, 
        text: originalText, 
        pathElID, 
        isReversed, 
        offsetPct: currentOffsetPct, 
        distanceOffset: currentDistanceOffset,
        letterSpacing: currentLetterSpacing,
        placeInside: isInside
      }
    });
    objectIDs.push(charID);
  }
}

// Helper function to find a point at a specific distance along the path
// Enhanced to include extrapolation with a stabilizing window to prevent terminal jitters
function getPointAtDistance(distance, segments, totalLength) {
  if (!segments || segments.length === 0) return null;
  
  // Extrapolate backwards if distance is negative
  if (distance <= 0) {
    let refSegIdx = 0;
    let accumLen = 0;
    // Look ahead at least 5 pixels to get a stable starting angle, bypassing pen-down hooks
    while(refSegIdx < segments.length - 1 && accumLen < 5) {
        accumLen += segments[refSegIdx].length;
        refSegIdx++;
    }
    const refSeg = segments[refSegIdx];
    const firstSeg = segments[0];
    const angle = Math.atan2(refSeg.endPoint[1] - firstSeg.startPoint[1], refSeg.endPoint[0] - firstSeg.startPoint[0]);
    
    return {
      x: firstSeg.startPoint[0] + Math.cos(angle) * distance,
      y: firstSeg.startPoint[1] + Math.sin(angle) * distance,
      angle: angle
    };
  }
  
  // Extrapolate forwards if distance exceeds path length
  if (distance >= totalLength) {
    let refSegIdx = segments.length - 1;
    let accumLen = 0;
    // Look behind at least 5 pixels to get a stable ending angle, bypassing pen-lift hooks
    while(refSegIdx > 0 && accumLen < 5) {
        accumLen += segments[refSegIdx].length;
        refSegIdx--;
    }
    const refSeg = segments[refSegIdx];
    const lastSeg = segments[segments.length - 1];
    const angle = Math.atan2(lastSeg.endPoint[1] - refSeg.startPoint[1], lastSeg.endPoint[0] - refSeg.startPoint[0]);
    const over = distance - totalLength;
    
    return {
      x: lastSeg.endPoint[0] + Math.cos(angle) * over,
      y: lastSeg.endPoint[1] + Math.sin(angle) * over,
      angle: angle
    };
  }
  
  // Interpolate along the matching segment
  const segment = segments.find(seg => distance >= seg.startDist && distance <= seg.endDist) || segments[segments.length - 1];
  const t = (distance - segment.startDist) / segment.length;
  const x = segment.startPoint[0] + t * (segment.endPoint[0] - segment.startPoint[0]);
  const y = segment.startPoint[1] + t * (segment.endPoint[1] - segment.startPoint[1]);
  
  const angle = Math.atan2(segment.endPoint[1] - segment.startPoint[1], segment.endPoint[0] - segment.startPoint[0]);
  
  return { x, y, angle };
}

async function convertBezierToPoints() {
  const svgPadding = 100;
  let isLeftToRight = true;
  
  async function getSVGForPath() {
    let el = ea.getElement(pathEl.id);
    if(!el) {
      ea.copyViewElementsToEAforEditing([pathEl]);
      el = ea.getElement(pathEl.id);
    }
    el.roughness = 0;
    el.fillStyle = "solid";
    el.backgroundColor = "transparent";
    const svgElement = await ea.createSVG(undefined, false, undefined, undefined, 'light', svgPadding);
    ea.clear();
    return svgElement;
  }
  
  const svgElement = await getSVGForPath();

  if (svgElement) {
    const pathElSVG = svgElement.querySelector('path');
    if (pathElSVG) {
      // Extract only the first continuous subpath to avoid disconnected jumps
      const d = pathElSVG.getAttribute('d');
      const subpaths = d.match(/[Mm][^Mm]*/g);
      
      let workingPath = pathElSVG;
      if (subpaths && subpaths.length > 1) {
        workingPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        workingPath.setAttribute('d', subpaths[0]);
      }

      function samplePathPoints(pathNode, step = 5) {
        const points = [];
        const totalLength = pathNode.getTotalLength();
        for (let len = 0; len <= totalLength; len += step) {
          const pt = pathNode.getPointAtLength(len);
          points.push([pt.x, pt.y]);
        }
        const lastPt = pathNode.getPointAtLength(totalLength);
        if (
          points.length === 0 ||
          points[points.length - 1][0] !== lastPt.x ||
          points[points.length - 1][1] !== lastPt.y
        ) {
          points.push([lastPt.x, lastPt.y]);
        }
        return points;
      }
      
      let points = samplePathPoints(workingPath, 5);

      const cx = pathEl.x + pathEl.width / 2;
      const cy = pathEl.y + pathEl.height / 2;
      const angle = pathEl.angle || 0;

      points = points.map(([x, y]) => {
        let sx = pathEl.x + x;
        let sy = pathEl.y + y;
        
        if (angle !== 0) {
          const cos = Math.cos(angle);
          const sin = Math.sin(angle);
          const rx = cos * (sx - cx) - sin * (sy - cy) + cx;
          const ry = sin * (sx - cx) + cos * (sy - cy) + cy;
          return [rx, ry];
        }
        return [sx, sy];
      });
      
      isLeftToRight = pathEl.points[pathEl.points.length-1][0] >= 0;

      let pointsTop = points;
      let pointsBottom = null;

      // Handle Freedraw Trimming and Bottom Edge Extraction
      if (pathEl.type === "freedraw" && points.length > 10) {
        // Perfect Freehand creates a looped polygon. 
        // The first half traces one edge, the second half traces the return edge.
        const half = Math.floor(points.length / 2);
        
        let topEdge = points.slice(0, half);
        // Reverse the bottom edge so it flows Start->End, matching the top edge
        let bottomEdge = points.slice(half).reverse();
        
        // Trim the rounded end-caps (usually ~6 points at both ends)
        const TRIM = 6;
        if (topEdge.length > TRIM * 2) topEdge = topEdge.slice(TRIM, topEdge.length - TRIM);
        if (bottomEdge.length > TRIM * 2) bottomEdge = bottomEdge.slice(TRIM, bottomEdge.length - TRIM);

        // Ensure topEdge is actually the visual Top
        // If drawn Right-to-Left, the SVG winding order might map the first half to the bottom
        if (!isLeftToRight) {
           const temp = topEdge;
           topEdge = bottomEdge;
           bottomEdge = temp;
        }

        pointsTop = topEdge;
        pointsBottom = bottomEdge;
      } 
      // FIX: robustly handle simulated A->B->A strokes on lines and Double-Rounds on polygons
      else if (points.length > 10) {
        const firstPt = points[0];
        const lastPt = points[points.length - 1];
        const isLoop = Math.hypot(firstPt[0] - lastPt[0], firstPt[1] - lastPt[1]) < 3;

        if (pathEl.polygon) {
          // Polygons: find the FIRST time the path returns to the start to get exactly one round
          let loopEndIdx = -1;
          for (let i = 10; i < points.length; i++) {
            if (Math.hypot(points[i][0] - firstPt[0], points[i][1] - firstPt[1]) < 5) {
              loopEndIdx = i;
              break;
            }
          }
          if (loopEndIdx !== -1 && loopEndIdx < points.length * 0.9) {
            pointsTop = points.slice(0, loopEndIdx + 1);
          }
        } else if (isLoop) {
          // Open Lines: If it loops back, Excalidraw drew A->B->A. Slice in half to keep A->B.
          if (!isLeftToRight) points = points.reverse();
          pointsTop = points.slice(0, Math.ceil(points.length / 2));
        }
      }

      if (pointsTop.length > 1) {
        ea.clear();
        ea.style.backgroundColor="transparent";
        ea.style.roughness = 0;
        ea.style.strokeWidth = 1;
        ea.style.roundness = null;
        
        // We create line elements for BOTH the top and bottom edges in the EA workbench 
        // so we can dynamically swap them inside fitTextToShape when the user toggles settings.
        const lineId = ea.addLine(pointsTop);
        const line = ea.getElement(lineId);
        line.polygon = pathEl.polygon; 
        
        tempElementIDs.push(lineId);
        
        let lineBottom = null;
        if (pointsBottom && pointsBottom.length > 1) {
          const lineBottomId = ea.addLine(pointsBottom);
          lineBottom = ea.getElement(lineBottomId);
          lineBottom.polygon = pathEl.polygon;
          tempElementIDs.push(lineBottomId);
        }

        return [line, isLeftToRight, lineBottom];
      } else {
        new Notice("Could not extract enough points from SVG path.");
      }
    } else {
      new Notice("No path element found in SVG.");
    }
  }
  return [pathEl, isLeftToRight, null];
}

/**
 * Converts an ellipse element to a line element
 * @param {Object} ellipse - The ellipse element to convert
 * @param {number} pointDensity - Optional number of points to generate (defaults to 64)
 * @returns {string} The ID of the created line element
*/
function ellipseToLine(ellipse, pointDensity = 64) {
  if (!ellipse || ellipse.type !== "ellipse") {
    throw new Error("Input must be an ellipse element");
  }
  
  // Calculate points along the ellipse perimeter
  const stepSize = (Math.PI * 2) / pointDensity;
  const points = drawEllipse(
    ellipse.x, 
    ellipse.y, 
    ellipse.width, 
    ellipse.height, 
    ellipse.angle,
    0,
    Math.PI * 2,
    stepSize
  );
  
  // Save original styling to apply to the new line
  const originalStyling = {
    strokeColor: ellipse.strokeColor,
    strokeWidth: ellipse.strokeWidth,
    backgroundColor: ellipse.backgroundColor,
    fillStyle: ellipse.fillStyle,
    roughness: ellipse.roughness,
    strokeSharpness: ellipse.strokeSharpness,
    frameId: ellipse.frameId,
    groupIds: [...ellipse.groupIds],
    opacity: ellipse.opacity
  };
  
  // Use current style
  const prevStyle = {...ea.style};
  
  // Apply ellipse styling to the line
  ea.style.strokeColor = originalStyling.strokeColor;
  ea.style.strokeWidth = originalStyling.strokeWidth;
  ea.style.backgroundColor = originalStyling.backgroundColor;
  ea.style.fillStyle = originalStyling.fillStyle;
  ea.style.roughness = originalStyling.roughness;
  ea.style.strokeSharpness = originalStyling.strokeSharpness;
  ea.style.opacity = originalStyling.opacity;
  
  // Create the line and close it
  const lineId = ea.addLine(points);
  const line = ea.getElement(lineId);
  
  // Make it a polygon to close the path
  line.polygon = true;
  
  // Transfer grouping and frame information
  line.frameId = originalStyling.frameId;
  line.groupIds = originalStyling.groupIds;
  
  // Restore previous style
  ea.style = prevStyle;
  
  return ea.getElement(lineId);
  
  // Helper function from the Split Ellipse script
  function drawEllipse(x, y, width, height, angle = 0, start = 0, end = Math.PI*2, step = Math.PI/32) {
    const ellipse = (t) => {
      const spanningVector = rotateVector([width/2*Math.cos(t), height/2*Math.sin(t)], angle);
      const baseVector = [x+width/2, y+height/2];
      return addVectors([baseVector, spanningVector]);
    }

    if(end <= start) end = end + Math.PI*2;

    let points = [];
    const almostEnd = end - step/2;
    for (let t = start; t < almostEnd; t = t + step) {
      points.push(ellipse(t));
    }
    points.push(ellipse(end));
    return points;
  }
  
  function rotateVector(vec, ang) {
    var cos = Math.cos(ang);
    var sin = Math.sin(ang);
    return [vec[0] * cos - vec[1] * sin, vec[0] * sin + vec[1] * cos];
  }
  
  function addVectors(vectors) {
    return vectors.reduce((acc, vec) => [acc[0] + vec[0], acc[1] + vec[1]], [0, 0]);
  }
}

/**
 * Converts a rectangle element to a line element
 * @param {Object} rectangle - The rectangle element to convert
 * @param {number} pointDensity - Optional number of points to generate for curved segments (defaults to 16)
 * @returns {string} The ID of the created line element
 */
function rectangleToLine(rectangle, pointDensity = 16) {
  if (!rectangle || rectangle.type !== "rectangle") {
    throw new Error("Input must be a rectangle element");
  }

  // Save original styling to apply to the new line
  const originalStyling = {
    strokeColor: rectangle.strokeColor,
    strokeWidth: rectangle.strokeWidth,
    backgroundColor: rectangle.backgroundColor,
    fillStyle: rectangle.fillStyle,
    roughness: rectangle.roughness,
    strokeSharpness: rectangle.strokeSharpness,
    frameId: rectangle.frameId,
    groupIds: [...rectangle.groupIds],
    opacity: rectangle.opacity
  };
  
  // Use current style
  const prevStyle = {...ea.style};
  
  // Apply rectangle styling to the line
  ea.style.strokeColor = originalStyling.strokeColor;
  ea.style.strokeWidth = originalStyling.strokeWidth;
  ea.style.backgroundColor = originalStyling.backgroundColor;
  ea.style.fillStyle = originalStyling.fillStyle;
  ea.style.roughness = originalStyling.roughness;
  ea.style.strokeSharpness = originalStyling.strokeSharpness;
  ea.style.opacity = originalStyling.opacity;
  
  // Calculate points for the rectangle perimeter
  const points = generateRectanglePoints(rectangle, pointDensity);
  
  // Create the line and close it
  const lineId = ea.addLine(points);
  const line = ea.getElement(lineId);
  
  // Make it a polygon to close the path
  line.polygon = true;
  
  // Transfer grouping and frame information
  line.frameId = originalStyling.frameId;
  line.groupIds = originalStyling.groupIds;
  
  // Restore previous style
  ea.style = prevStyle;
  
  return ea.getElement(lineId);
   
  // Helper function to generate rectangle points with optional rounded corners
  function generateRectanglePoints(rectangle, pointDensity) {
    const { x, y, width, height, angle = 0 } = rectangle;
    const centerX = x + width / 2;
    const centerY = y + height / 2;
    
    // If no roundness, create a simple rectangle
    if (!rectangle.roundness) {
      const corners = [
        [x, y],                   // top-left
        [x + width, y],           // top-right
        [x + width, y + height],  // bottom-right
        [x, y + height],          // bottom-left
        [x,y] //origo
      ];
      
      // Apply rotation if needed
      if (angle !== 0) {
        return corners.map(point => rotatePoint(point, [centerX, centerY], angle));
      }
      return corners;
    }
    
    // Handle rounded corners
    const points = [];
    
    // Calculate corner radius using Excalidraw's algorithm
    const cornerRadius = getCornerRadius(Math.min(width, height), rectangle);
    const clampedRadius = Math.min(cornerRadius, width / 2, height / 2);
    
    // Corner positions
    const topLeft = [x + clampedRadius, y + clampedRadius];
    const topRight = [x + width - clampedRadius, y + clampedRadius];
    const bottomRight = [x + width - clampedRadius, y + height - clampedRadius];
    const bottomLeft = [x + clampedRadius, y + height - clampedRadius];
    
    // Add top-left corner arc
    points.push(...createArc(
      topLeft[0], topLeft[1], clampedRadius, Math.PI, Math.PI * 1.5, pointDensity));
    
    // Add top edge
    points.push([x + clampedRadius, y], [x + width - clampedRadius, y]);
    
    // Add top-right corner arc
    points.push(...createArc(
      topRight[0], topRight[1], clampedRadius, Math.PI * 1.5, Math.PI * 2, pointDensity));
    
    // Add right edge
    points.push([x + width, y + clampedRadius], [x + width, y + height - clampedRadius]);
    
    // Add bottom-right corner arc
    points.push(...createArc(
      bottomRight[0], bottomRight[1], clampedRadius, 0, Math.PI * 0.5, pointDensity));
    
    // Add bottom edge
    points.push([x + width - clampedRadius, y + height], [x + clampedRadius, y + height]);
    
    // Add bottom-left corner arc
    points.push(...createArc(
      bottomLeft[0], bottomLeft[1], clampedRadius, Math.PI * 0.5, Math.PI, pointDensity));
    
    // Add left edge
    points.push([x, y + height - clampedRadius], [x, y + clampedRadius]);
    
    // Apply rotation if needed
    if (angle !== 0) {
      return points.map(point => rotatePoint(point, [centerX, centerY], angle));
    }
    
    return points;
  }
  
  // Helper function to create an arc of points
  function createArc(centerX, centerY, radius, startAngle, endAngle, pointDensity) {
    const points = [];
    const angleStep = (endAngle - startAngle) / pointDensity;
    
    for (let i = 0; i <= pointDensity; i++) {
      const angle = startAngle + i * angleStep;
      const x = centerX + radius * Math.cos(angle);
      const y = centerY + radius * Math.sin(angle);
      points.push([x, y]);
    }
    
    return points;
  }
  
  // Helper function to rotate a point around a center
  function rotatePoint(point, center, angle) {
    const sin = Math.sin(angle);
    const cos = Math.cos(angle);
    
    // Translate point to origin
    const x = point[0] - center[0];
    const y = point[1] - center[1];
    
    // Rotate point
    const xNew = x * cos - y * sin;
    const yNew = x * sin + y * cos;
    
    // Translate point back
    return [xNew + center[0], yNew + center[1]];
  }
}

function getCornerRadius(x, element) {
  const fixedRadiusSize = element.roundness?.value ?? 32;
  const CUTOFF_SIZE = fixedRadiusSize / 0.25;
  if (x <= CUTOFF_SIZE) {
    return x * 0.25;
  }
  return fixedRadiusSize;
}

/**
 * Converts a diamond element to a line element
 * @param {Object} diamond - The diamond element to convert
 * @param {number} pointDensity - Optional number of points to generate for curved segments (defaults to 16)
 * @returns {string} The ID of the created line element
 */
function diamondToLine(diamond, pointDensity = 16) {
  if (!diamond || diamond.type !== "diamond") {
    throw new Error("Input must be a diamond element");
  }

  // Save original styling to apply to the new line
  const originalStyling = {
    strokeColor: diamond.strokeColor,
    strokeWidth: diamond.strokeWidth,
    backgroundColor: diamond.backgroundColor,
    fillStyle: diamond.fillStyle,
    roughness: diamond.roughness,
    strokeSharpness: diamond.strokeSharpness,
    frameId: diamond.frameId,
    groupIds: [...diamond.groupIds],
    opacity: diamond.opacity
  };
  
  // Use current style
  const prevStyle = {...ea.style};
  
  // Apply diamond styling to the line
  ea.style.strokeColor = originalStyling.strokeColor;
  ea.style.strokeWidth = originalStyling.strokeWidth;
  ea.style.backgroundColor = originalStyling.backgroundColor;
  ea.style.fillStyle = originalStyling.fillStyle;
  ea.style.roughness = originalStyling.roughness;
  ea.style.strokeSharpness = originalStyling.strokeSharpness;
  ea.style.opacity = originalStyling.opacity;
  
  // Calculate points for the diamond perimeter
  const points = generateDiamondPoints(diamond, pointDensity);
  
  // Create the line and close it
  const lineId = ea.addLine(points);
  const line = ea.getElement(lineId);
  
  // Make it a polygon to close the path
  line.polygon = true;
  
  // Transfer grouping and frame information
  line.frameId = originalStyling.frameId;
  line.groupIds = originalStyling.groupIds;
  
  // Restore previous style
  ea.style = prevStyle;
  
  return ea.getElement(lineId);

  function generateDiamondPoints(diamond, pointDensity) {
    const { x, y, width, height, angle = 0 } = diamond;
    const cx = x + width / 2;
    const cy = y + height / 2;

    // Diamond corners
    const top    = [cx, y];
    const right  = [x + width, cy];
    const bottom = [cx, y + height];
    const left   = [x, cy];

    if (!diamond.roundness) {
      const corners = [top, right, bottom, left, top];
      if (angle !== 0) {
        return corners.map(pt => rotatePoint(pt, [cx, cy], angle));
      }
      return corners;
    }

    // Clamp radius
    const r = Math.min(
      getCornerRadius(Math.min(width, height) / 2, diamond),
      width / 2,
      height / 2
    );

    // For a diamond, the rounded corner is a *bezier* between the two adjacent edge points, not a circular arc.
    // Excalidraw uses a quadratic bezier for each corner, with the control point at the corner itself.

    // Calculate edge directions
    function sub(a, b) { return [a[0] - b[0], a[1] - b[1]]; }
    function add(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
    function norm([x, y]) {
      const len = Math.hypot(x, y);
      return [x / len, y / len];
    }
    function scale([x, y], s) { return [x * s, y * s]; }

    // For each corner, move along both adjacent edges by r to get arc endpoints
    // Order: top, right, bottom, left
    const corners = [top, right, bottom, left];
    const next = [right, bottom, left, top];
    const prev = [left, top, right, bottom];

    // For each corner, calculate the two points where the straight segments meet the arc
    const arcPoints = [];
    for (let i = 0; i < 4; ++i) {
      const c = corners[i];
      const n = next[i];
      const p = prev[i];
      const toNext = norm(sub(n, c));
      const toPrev = norm(sub(p, c));
      arcPoints.push([
        add(c, scale(toPrev, r)), // start of arc (from previous edge)
        add(c, scale(toNext, r)), // end of arc (to next edge)
        c                         // control point for bezier
      ]);
    }

    // Helper: quadratic bezier between p0 and p2 with control p1
    function bezier(p0, p1, p2, density) {
      const pts = [];
      for (let i = 0; i <= density; ++i) {
        const t = i / density;
        const mt = 1 - t;
        pts.push([
          mt*mt*p0[0] + 2*mt*t*p1[0] + t*t*p2[0],
          mt*mt*p0[1] + 2*mt*t*p1[1] + t*t*p2[1]
        ]);
      }
      return pts;
    }

    // Build path: for each corner, straight line to arc start, then bezier to arc end using corner as control
    let pts = [];
    for (let i = 0; i < 4; ++i) {
      const prevArc = arcPoints[(i + 3) % 4];
      const arc = arcPoints[i];
      if (i === 0) {
        pts.push(arc[0]);
      } else {
        pts.push(arc[0]);
      }
      // Quadratic bezier from arc[0] to arc[1] with control at arc[2] (the corner)
      pts.push(...bezier(arc[0], arc[2], arc[1], pointDensity));
    }
    pts.push(arcPoints[0][0]); // close

    if (angle !== 0) {
      return pts.map(pt => rotatePoint(pt, [cx, cy], angle));
    }
    return pts;
  }

  // Helper function to create an arc between two points
  function createArcBetweenPoints(startPoint, endPoint, centerX, centerY, pointDensity) {
    const startAngle = Math.atan2(startPoint[1] - centerY, startPoint[0] - centerX);
    const endAngle = Math.atan2(endPoint[1] - centerY, endPoint[0] - centerX);
    
    // Ensure angles are in correct order for arc drawing
    let adjustedEndAngle = endAngle;
    if (endAngle < startAngle) {
      adjustedEndAngle += 2 * Math.PI;
    }
    
    const points = [];
    const angleStep = (adjustedEndAngle - startAngle) / pointDensity;
    
    // Start with the straight line to arc start
    points.push(startPoint);
    
    // Create arc points
    for (let i = 1; i < pointDensity; i++) {
      const angle = startAngle + i * angleStep;
      const distance = Math.hypot(startPoint[0] - centerX, startPoint[1] - centerY);
      const x = centerX + distance * Math.cos(angle);
      const y = centerY + distance * Math.sin(angle);
      points.push([x, y]);
    }
    
    // Add the end point of the arc
    points.push(endPoint);
    
    return points;
  }
  
  // Helper function to rotate a point around a center
  function rotatePoint(point, center, angle) {
    const sin = Math.sin(angle);
    const cos = Math.cos(angle);
    
    // Translate point to origin
    const x = point[0] - center[0];
    const y = point[1] - center[1];
    
    // Rotate point
    const xNew = x * cos - y * sin;
    const yNew = x * sin + y * cos;
    
    // Translate point back
    return [xNew + center[0], yNew + center[1]];
  }
}

async function addToView() {
  ea.getElements()
    .filter(el=>el.type==="text" && el.text === " " && !el.isDeleted)
    .forEach(el=>tempElementIDs.push(el.id));
  tempElementIDs.forEach(elID=>{
    delete ea.elementsDict[elID];
  });
  await ea.addElementsToView(false, false, true);
}

// ------------------------------------------------------------
// Convert any shape type to a series of points along a path
// In practice this only applies to ellipses and straight lines
// ------------------------------------------------------------
async function fitTextToShape() {
  // Swap to the bottom path if it's a freedraw and the user reversed the text or placed it inside
  let activePathEl = pathEl;
  if (originalPathType === "freedraw" && pathElBottom) {
     if (currentPlaceInside) {
        activePathEl = pathElBottom;
     }
  }
  
  const pathPoints = calculatePathPoints(activePathEl);

  let pathLength = 0;
  for (let i = 1; i < pathPoints.length; i++) {
    const dx = pathPoints[i][0] - pathPoints[i-1][0];
    const dy = pathPoints[i][1] - pathPoints[i-1][1];
    pathLength += Math.sqrt(dx*dx + dy*dy);
  }
  
  const textWidth = ea.measureText(currentText).width;
  let offsetValue = 0;
  
  const effectiveCurrentOffsetPct = originalPathDirectionLR ? -currentOffsetPct : currentOffsetPct;
  if (pathEl.polygon) {
    // With double-loops removed from the path array, pathLength is now 1 round.
    // 100 divisor maps +/- 50% slider range exactly to 1 full loop length.
    offsetValue = (effectiveCurrentOffsetPct / 100) * pathLength; 
  } else {
    // Open path calibration
    if (effectiveCurrentOffsetPct < 0) {
      offsetValue = (Math.abs(effectiveCurrentOffsetPct) / 50) * -textWidth;
    } else {
      offsetValue = (effectiveCurrentOffsetPct / 50) * pathLength;
    }
  }

  const pathID = ea.generateElementId();
  let objectIDs = [];

  distributeTextAlongPath(
    currentText,
    pathPoints,
    pathID,
    objectIDs,
    offsetValue,
    isLeftToRight,
    pathEl.polygon,
    currentIsReversed,
    currentPlaceInside,
    activePathEl === pathElBottom // Pass a flag to invert dy if using the bottom edge
  );

  const groupID = ea.addToGroup(objectIDs);
  generatedIDs.push(...objectIDs);

  await addToView();
  const selectedElementIds = Object.fromEntries(
    objectIDs.map(id => [id, true])
  );
  ea.viewUpdateScene({
    appState: {
      selectedElementIds,
      selectedGroupIds: { [groupID]: true }
    }
  });
}