@ogabrielluiz/patchflow 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -4176,7 +4176,7 @@ function findPortPosition(block, portId, direction) {
 }
 function layout(graph, options = {}) {
   const direction = options.direction ?? "LR";
-  const rankSep = options.rankSep ?? 160;
+  const rankSep = options.rankSep ?? 200;
   const nodeSep = options.nodeSep ?? 40;
   const allBlocks = [...graph.declaredBlocks, ...graph.stubBlocks];
   const allConnections = [...graph.connections, ...graph.feedbackEdges];
@@ -4469,40 +4469,47 @@ function buildLabels(theme, blocks) {
   return parts.join("");
 }
 function buildAnnotations(theme, connections) {
+  const annotated = connections.filter((c) => c.annotation);
+  if (annotated.length === 0) return "";
   const parts = [];
   const fontFamily = sanitizeForSvg(theme.annotation.fontFamily);
-  const fontSize = theme.annotation.fontSize;
-  const charWidth = fontSize * 0.55;
-  for (const conn of connections) {
-    if (!conn.annotation) continue;
+  const noteFontSize = theme.annotation.fontSize + 1;
+  const markerFontFamily = fontFamily;
+  annotated.forEach((conn, i) => {
+    const num = i + 1;
     const sx = conn.sourcePoint.x;
     const sy = conn.sourcePoint.y;
     const tx = conn.targetPoint.x;
     const ty = conn.targetPoint.y;
-    let x;
-    let y;
+    let mx;
+    let my;
     if (conn.isFeedback) {
-      x = (sx + tx) / 2;
-      y = Math.max(sy, ty) + 30;
+      mx = (sx + tx) / 2;
+      const match = conn.path.match(/L\s+\S+\s+\S+\s+L\s+\S+\s+(\S+)/);
+      my = match ? parseFloat(match[1]) : Math.max(sy, ty) + 30;
     } else {
-      x = (sx + tx) / 2;
-      y = (sy + ty) / 2 - 14;
-    }
-    const prefix = conn.isFeedback ? "\u21BB " : "";
-    let raw = conn.annotation;
-    if (!conn.isFeedback) {
-      const available = Math.abs(tx - sx);
-      const prefixWidth = prefix.length * charWidth;
-      const maxChars = Math.max(0, Math.floor((available - prefixWidth) / charWidth));
-      if (maxChars > 0 && raw.length > maxChars) {
-        raw = maxChars > 1 ? raw.slice(0, maxChars - 1) + "\u2026" : raw.slice(0, maxChars);
-      }
+      mx = (sx + tx) / 2;
+      my = (sy + ty) / 2;
     }
-    const text = prefix + sanitizeForSvg(raw);
+    const markerStroke = conn.isFeedback ? theme.cable.colors[conn.signalType].stroke : theme.label.color;
     parts.push(
-      `<text x="${x}" y="${y}" text-anchor="middle" font-family="${fontFamily}" font-size="${fontSize}" fill="${theme.annotation.color}" paint-order="stroke fill" stroke="${theme.annotation.haloColor}" stroke-width="3" stroke-linejoin="round">${text}</text>`
+      `<circle cx="${mx}" cy="${my}" r="8" fill="${theme.panel.highlight}" stroke="${markerStroke}" stroke-width="0.5" data-annotation-marker="${num}"/>`
     );
-  }
+    parts.push(
+      `<text x="${mx}" y="${my + 3}" text-anchor="middle" font-family="${markerFontFamily}" font-size="9" fill="${theme.label.color}">${num}</text>`
+    );
+  });
+  const panelX = -120;
+  let panelY = 20;
+  const lineGap = 14;
+  annotated.forEach((conn, i) => {
+    const num = i + 1;
+    const noteText = `${num}. ${sanitizeForSvg(conn.annotation)}`;
+    parts.push(
+      `<text x="${panelX}" y="${panelY}" font-family="${fontFamily}" font-size="${noteFontSize}" fill="${theme.annotation.color}">${noteText}</text>`
+    );
+    panelY += lineGap;
+  });
   return parts.join("");
 }
 function buildLegend(theme, layoutResult) {