@ogabrielluiz/patchflow 0.1.3 → 0.1.5

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   SIGNAL_OPERATORS,
   __commonJS,
   __toESM
-} from "./chunk-4VUBNFI4.js";
+} from "./chunk-YONEHQMI.js";
 
 // node_modules/@dagrejs/graphlib/lib/graph.js
 var require_graph = __commonJS({
@@ -4042,7 +4042,7 @@ function selfLoopArcPath(source, target, blockBottom, arcOffset) {
 var MIN_WIDTH = 140;
 var MIN_HEIGHT = 90;
 function getBlockDimensions(block, portCount) {
-  const labelWidth = block.label.length * 8;
+  const labelWidth = block.label.length * 11;
   const subLabelWidth = block.subLabel ? block.subLabel.length * 7 : 0;
   const paramWidths = block.params.map((p) => `${p.key}: ${p.value}`.length * 7);
   const longestParam = paramWidths.length > 0 ? Math.max(...paramWidths) : 0;
@@ -4284,19 +4284,46 @@ function layout(graph, options = {}) {
   const feedbackSpace = hasFeedback ? diagramBottom - maxY + feedbackArcOffset + 30 + 16 : 0;
   const width = maxX + margin;
   const height = maxY + margin + feedbackSpace;
+  const warnings = checkHeightInvariant({
+    blocks: layoutBlocks,
+    height,
+    hasFeedback,
+    feedbackBottom: diagramBottom + feedbackArcOffset
+  });
   return {
     blocks: layoutBlocks,
     connections: layoutConnections,
     width,
     height,
-    signalTypeStats: graph.signalTypeStats
+    signalTypeStats: graph.signalTypeStats,
+    warnings
   };
 }
+function checkHeightInvariant(args) {
+  const { blocks, height, hasFeedback, feedbackBottom } = args;
+  const warnings = [];
+  const blockBottomMax = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y + b.height)) : 0;
+  const contentBottom = hasFeedback ? Math.max(blockBottomMax, feedbackBottom) : blockBottomMax;
+  if (height < contentBottom) {
+    warnings.push(
+      `layout: computed height (${height.toFixed(1)}) is below content bottom (${contentBottom.toFixed(1)}); legend/notes may overlap block content`
+    );
+  }
+  return warnings;
+}
 
 // src/renderer.ts
 function genId() {
   return "pf-" + Math.random().toString(16).slice(2, 8);
 }
+function fitLabel(label, maxWidth, charWidth) {
+  if (maxWidth <= 0 || charWidth <= 0) return label;
+  const maxChars = Math.floor(maxWidth / charWidth);
+  if (maxChars <= 0) return label;
+  if (label.length <= maxChars) return label;
+  if (maxChars === 1) return "\u2026";
+  return label.slice(0, maxChars - 1) + "\u2026";
+}
 function buildDesc(layoutResult) {
   const blockCount = layoutResult.blocks.length;
   const connCount = layoutResult.connections.length;
@@ -4342,11 +4369,11 @@ function buildPanels(theme, idPrefix, blocks) {
   const parts = [];
   for (const block of blocks) {
     const moduleName = sanitizeForSvg(block.parentModule || block.label);
-    const label = sanitizeForSvg(block.label);
     const fontFamily = sanitizeForSvg(theme.label.fontFamily);
     const insetX = block.x + 12;
     const insetY = block.y + 8;
     const insetW = block.width - 24;
+    const label = sanitizeForSvg(fitLabel(block.label, insetW, 11));
     let group = `<g data-module="${moduleName}" filter="url(#${idPrefix}-panel-shadow)">`;
     group += `<rect x="${block.x}" y="${block.y}" width="${block.width}" height="${block.height}" fill="${theme.panel.fill}" stroke="${theme.panel.stroke}" stroke-width="0.75" rx="${theme.panel.cornerRadius}"/>`;
     group += `<line x1="${block.x}" y1="${block.y + 0.5}" x2="${block.x + block.width}" y2="${block.y + 0.5}" stroke="${theme.panel.highlight}" stroke-width="${theme.panel.bevelWidth}"/>`;
@@ -4354,7 +4381,7 @@ function buildPanels(theme, idPrefix, blocks) {
     group += `<rect x="${insetX}" y="${insetY}" width="${insetW}" height="28" fill="${theme.label.plateFill}" stroke="${theme.label.plateStroke}" stroke-width="0.5"/>`;
     group += `<text x="${block.x + block.width / 2}" y="${block.y + 22}" text-anchor="middle" font-family="${fontFamily}" font-size="14" font-weight="700" fill="${theme.label.color}" letter-spacing="3">${label}</text>`;
     if (block.subLabel) {
-      const subLabel = sanitizeForSvg(block.subLabel);
+      const subLabel = sanitizeForSvg(fitLabel(block.subLabel, insetW - 8, 7));
       const barX = insetX;
       const barY = insetY + 28;
       const barW = insetW;
@@ -4380,7 +4407,8 @@ function buildParams(blocks, theme) {
         `<rect x="${px}" y="${py}" width="${pw}" height="20" fill="${theme.param.plateFill}" stroke="${theme.param.plateStroke}" stroke-width="0.5"/>`
       );
       const keyNorm = param.key.trim().toLowerCase();
-      const text = keyNorm === blockLabelNorm ? sanitizeForSvg(param.value) : `${sanitizeForSvg(param.key)}: ${sanitizeForSvg(param.value)}`;
+      const rawText = keyNorm === blockLabelNorm ? param.value : `${param.key}: ${param.value}`;
+      const text = sanitizeForSvg(fitLabel(rawText, pw - 8, 7));
       parts.push(
         `<text x="${px + pw / 2}" y="${py + 14}" text-anchor="middle" font-family="${monoFont}" font-size="10" fill="${theme.param.textColor}">${text}</text>`
       );
@@ -4531,7 +4559,7 @@ function buildAnnotations(theme, connections, layoutHeight) {
   });
   return parts.join("");
 }
-function buildLegend(theme, layoutResult) {
+function buildLegend(theme, layoutResult, diagramBottom) {
   const order = ["audio", "cv", "pitch", "gate", "trigger", "clock"];
   const used = order.filter((t) => (layoutResult.signalTypeStats[t] ?? 0) > 0);
   if (used.length === 0) return "";
@@ -4540,7 +4568,7 @@ function buildLegend(theme, layoutResult) {
   const itemWidth = 70;
   const totalWidth = used.length * itemWidth;
   const legendStartX = layoutResult.width - totalWidth;
-  const y = layoutResult.height - 20;
+  const y = diagramBottom - 20;
   for (let i = 0; i < used.length; i++) {
     const sig = used[i];
     const color = theme.cable.colors[sig].stroke;
@@ -4572,6 +4600,14 @@ function renderSvg(layoutResult, theme) {
       `<pattern id="${idPrefix}-dots" width="${spacing}" height="${spacing}" patternUnits="userSpaceOnUse"><circle cx="${spacing / 2}" cy="${spacing / 2}" r="${theme.grid.dotRadius}" fill="${theme.grid.dotColor}" opacity="${theme.grid.opacity}"/></pattern>`
     );
   }
+  const labelPadX = 130;
+  const vbWidth = width + labelPadX * 2;
+  const topPad = 40;
+  const noteCount = layoutResult.connections.filter((c) => c.annotation).length;
+  const notesHeight = noteCount > 0 ? noteCount * 16 + 10 : 0;
+  const bottomPad = Math.max(40, notesHeight + 10);
+  const vbHeight = height + topPad + bottomPad;
+  const diagramBottom = height + bottomPad;
   const layers = [
     `<g class="pf-layer-bg">${buildBackground(theme, idPrefix, width, height)}</g>`,
     `<g class="pf-layer-cables">${buildCables(theme, layoutResult.connections)}</g>`,
@@ -4579,17 +4615,10 @@ function renderSvg(layoutResult, theme) {
     `<g class="pf-layer-params">${buildParams(layoutResult.blocks, theme)}</g>`,
     `<g class="pf-layer-jacks">${buildJacks(theme, idPrefix, layoutResult.blocks)}</g>`,
     `<g class="pf-layer-labels">${buildLabels(theme, layoutResult.blocks, layoutResult.connections)}</g>`,
-    `<g class="pf-layer-annotations">${buildAnnotations(theme, layoutResult.connections, height)}</g>`,
-    `<g class="pf-layer-legend">${buildLegend(theme, layoutResult)}</g>`
+    `<g class="pf-layer-annotations">${buildAnnotations(theme, layoutResult.connections, diagramBottom)}</g>`,
+    `<g class="pf-layer-legend">${buildLegend(theme, layoutResult, diagramBottom)}</g>`
   ].join("");
   const style = `<style>@media print { .pf-panel, .pf-jack { filter: none; } }</style>`;
-  const labelPadX = 130;
-  const vbWidth = width + labelPadX * 2;
-  const topPad = 40;
-  const noteCount = layoutResult.connections.filter((c) => c.annotation).length;
-  const notesHeight = noteCount > 0 ? noteCount * 16 + 10 : 0;
-  const bottomPad = Math.max(40, notesHeight + 10);
-  const vbHeight = height + topPad + bottomPad;
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-labelPadX} ${-topPad} ${vbWidth} ${vbHeight}" width="100%" data-pf-min-width="${minWidth + labelPadX * 2}" role="img" aria-labelledby="${idPrefix}-title ${idPrefix}-desc"><title id="${idPrefix}-title">Patch diagram</title><desc id="${idPrefix}-desc">${desc}</desc>` + style + `<defs>${defsParts.join("")}</defs>` + layers + `</svg>`;
   return svg;
 }