openfig-cli 0.3.13 → 0.3.15

package/README.md

@@ -1,4 +1,4 @@
-<img src="assets/logo.webp" alt="OpenFig" width="320" />
+<img src="assets/logo.jpg" alt="OpenFig" width="320" />
 
 <a href="https://www.buymeacoffee.com/coenenrob9"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="40" /></a>
 

package/lib/rasterizer/svg-builder.mjs

@@ -265,6 +265,105 @@ function esc(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+/**
+ * Detect stale derivedTextData: text was edited outside Figma but glyph layout
+ * wasn't recomputed. Returns true when the layout clearly doesn't match the text.
+ */
+function isStaleLayout(chars, baselines, glyphs) {
+  if (!chars) return false;
+  const len = chars.length;
+
+  if (baselines?.length) {
+    const lastEnd = baselines[baselines.length - 1]?.endCharacter;
+    // baselines endCharacter should match chars length (±1 for trailing newline)
+    if (lastEnd != null && Math.abs(lastEnd - len) > 1) return true;
+  }
+
+  if (glyphs?.length) {
+    const maxFirstChar = glyphs.reduce((max, g) =>
+      Math.max(max, g.firstCharacter ?? 0), 0);
+    if (maxFirstChar >= len) return true;        // glyphs point beyond new text
+    if (len > maxFirstChar + 3) return true;     // new text much longer than glyph coverage
+  }
+
+  return false;
+}
+
+/**
+ * Fallback text layout for stale derivedTextData.
+ * Emits line-level <tspan> elements and lets resvg handle per-glyph layout.
+ * Uses original baseline metrics (line height, ascent, position) where available
+ * since those are style-dependent, not content-dependent.
+ * Auto-scales font size down when new text is longer than the original.
+ * Returns { tspans, fontSize } so the caller can use the adjusted size.
+ */
+function fallbackTextTspans(dispChars, fontSize, node) {
+  const baselines = node.derivedTextData?.baselines;
+  const lines = dispChars.split('\n');
+  // Drop trailing empty line from trailing newline
+  if (lines.length > 1 && !lines[lines.length - 1]) lines.pop();
+
+  // Use original baseline metrics for spacing (style property, still valid)
+  let lineHeightPx = baselines?.[0]?.lineHeight ?? fontSize * 1.2;
+  let lineAscent   = baselines?.[0]?.lineAscent ?? fontSize * 0.8;
+
+  // Auto-fit: scale font size down when new text is longer than original.
+  // Uses character count ratio per line as a proxy for width ratio.
+  const nodeW = node.size?.x ?? 1920;
+  const nodeH = node.size?.y ?? 0;
+  let scale = 1;
+  if (baselines?.length) {
+    const maxOrigCharsPerLine = Math.max(...baselines.map(b =>
+      Math.max(0, (b.endCharacter ?? 0) - (b.firstCharacter ?? 0))));
+    const maxNewCharsPerLine = Math.max(...lines.map(l => l.length));
+
+    // Scale down if widest new line has more chars than widest original line
+    if (maxNewCharsPerLine > maxOrigCharsPerLine && maxOrigCharsPerLine > 0) {
+      scale = Math.min(scale, maxOrigCharsPerLine / maxNewCharsPerLine);
+    }
+
+    // Also scale down if more lines than original (would overflow vertically)
+    if (lines.length > baselines.length && nodeH > 0) {
+      scale = Math.min(scale, baselines.length / lines.length);
+    }
+
+    scale = Math.max(scale, 0.15); // don't shrink below 15%
+  }
+
+  const adjFontSize    = fontSize * scale;
+  const adjLineHeight  = lineHeightPx * scale;
+  const adjLineAscent  = lineAscent * scale;
+
+  // Horizontal alignment → text-anchor + x position
+  const align  = node.textAlignHorizontal ?? 'LEFT';
+  const anchor = align === 'CENTER' ? 'middle' : align === 'RIGHT' ? 'end' : 'start';
+  const anchorX = align === 'CENTER' ? nodeW / 2 : align === 'RIGHT' ? nodeW : 0;
+
+  // Use first baseline position if available (preserves Figma's padding/offset),
+  // otherwise compute from vertical alignment
+  let startX, startY;
+  if (baselines?.[0]?.position) {
+    startX = align === 'LEFT' ? baselines[0].position.x : anchorX;
+    // Scale startY relative to the baseline position for auto-fit
+    startY = baselines[0].position.y * scale;
+  } else {
+    startX = anchorX;
+    const totalH = lines.length * adjLineHeight;
+    const nodeH  = node.size?.y ?? totalH;
+    const vAlign = node.textAlignVertical ?? 'TOP';
+    startY = vAlign === 'CENTER' ? (nodeH - totalH) / 2 + adjLineAscent
+           : vAlign === 'BOTTOM' ? nodeH - totalH + adjLineAscent
+           : adjLineAscent;
+  }
+
+  const tspans = lines.map((line, i) => {
+    const y = startY + i * adjLineHeight;
+    return `<tspan x="${startX}" y="${y.toFixed(2)}" text-anchor="${anchor}">${esc(line) || ' '}</tspan>`;
+  }).join('');
+
+  return { tspans, fontSize: adjFontSize };
+}
+
 function styleAttrsFromFontName(fontName, derivedFontWeight) {
   const style = fontName?.style ?? 'Regular';
   const weight = derivedFontWeight
@@ -300,12 +399,12 @@ function renderText(deck, node) {
                   : node.textCase === 'LOWER' ? chars.toLowerCase()
                   : chars;
 
-  const fontSize   = node.derivedTextData?.glyphs?.[0]?.fontSize ?? node.fontSize ?? 24;
+  let   fontSize   = node.derivedTextData?.glyphs?.[0]?.fontSize ?? node.fontSize ?? 24;
   const fontFamily = node.fontName?.family ?? 'Inter';
   const fill       = resolveFill(getFillPaints(node)) ?? '#000000';
   // Letter spacing: PERCENT is % of fontSize, PIXELS is absolute
   const ls = node.letterSpacing;
-  const letterSpacingPx = !ls ? 0
+  let   letterSpacingPx = !ls ? 0
     : ls.units === 'PERCENT' ? (ls.value / 100) * fontSize
     : ls.units === 'PIXELS'  ? ls.value
     : 0;
@@ -313,7 +412,8 @@ function renderText(deck, node) {
   const glyphs     = node.derivedTextData?.glyphs;
   const styleIds   = node.textData?.characterStyleIDs;
   const styleTable = node.textData?.styleOverrideTable;
-  if (!glyphs?.length) {
+  const stale = isStaleLayout(chars, baselines, glyphs);
+  if (!glyphs?.length && !stale) {
     throw new Error(`TEXT ${node.name ?? nid(node)} is missing derived glyph layout`);
   }
 
@@ -354,7 +454,15 @@ function renderText(deck, node) {
   }
 
   let tspans = '';
-  if (baselines?.length && glyphs?.length && styleIds?.length) {
+  if (stale || !glyphs?.length) {
+    // Fallback: derivedTextData is stale (text was edited outside Figma).
+    // Emit line-level tspans and let resvg handle per-glyph layout.
+    const origFontSize = fontSize;
+    const fb = fallbackTextTspans(dispChars, fontSize, node);
+    tspans = fb.tspans;
+    fontSize = fb.fontSize;                              // auto-fit may have scaled down
+    if (origFontSize > 0) letterSpacingPx *= fontSize / origFontSize;
+  } else if (baselines?.length && glyphs?.length && styleIds?.length) {
     // Mixed-style: group consecutive glyphs by styleID, emit per-glyph with ligature merge
     for (const b of baselines) {
       const lineGlyphs = glyphs.filter(g => g.firstCharacter >= b.firstCharacter && g.firstCharacter < b.endCharacter);
@@ -587,7 +695,8 @@ function renderShapeWithText(deck, node) {
   const truncationStartIndex = derivedText.truncationStartIndex >= 0
     ? derivedText.truncationStartIndex
     : null;
-  if (!glyphs?.length) {
+  const swtStale = isStaleLayout(chars, derivedText.baselines, glyphs);
+  if (!glyphs?.length && !swtStale) {
     throw new Error(`SHAPE_WITH_TEXT ${node.name ?? nid(node)} is missing derived glyph layout`);
   }
 
@@ -602,36 +711,53 @@ function renderShapeWithText(deck, node) {
   const textFill     = resolveFill(textOv.fillPaints) ?? '#000000';
 
   let tspan;
-  function esc(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
-
-  const spans = [];
-  for (let i = 0; i < glyphs.length; i++) {
-    const g = glyphs[i];
-    if (truncationStartIndex != null && g.firstCharacter != null && g.firstCharacter >= truncationStartIndex) continue;
-
-    let slice = '';
-    let stopAfter = false;
-    if (g.firstCharacter == null) {
-      if (truncationStartIndex == null) continue;
-      slice = '…';
-      stopAfter = true;
-    } else {
-      let nextChar = null;
-      for (let j = i + 1; j < glyphs.length; j++) {
-        const fc = glyphs[j].firstCharacter;
-        if (fc != null && fc > g.firstCharacter) {
-          nextChar = fc;
-          break;
+
+  if (swtStale || !glyphs?.length) {
+    // Fallback: stale layout — center text in shape using textBox offset
+    const swtBaselines = derivedText.baselines;
+    const lineHeightPx = swtBaselines?.[0]?.lineHeight ?? fontSize * 1.2;
+    const lineAscent   = swtBaselines?.[0]?.lineAscent ?? fontSize * 0.8;
+    const lines = dispChars.split('\n').filter((l, i, a) => i < a.length - 1 || l);
+    const totalH = lines.length * lineHeightPx;
+    // Center vertically in the text box area
+    const textBoxH = textDerived.size?.y ?? h;
+    const startY = textBoxY + (textBoxH - totalH) / 2 + lineAscent;
+    const textBoxW = textDerived.size?.x ?? w;
+    const cx = textBoxX + textBoxW / 2;
+    tspan = lines.map((line, i) => {
+      const y = startY + i * lineHeightPx;
+      return `<tspan x="${cx}" y="${y.toFixed(2)}" text-anchor="middle">${esc(line) || ' '}</tspan>`;
+    }).join('');
+  } else {
+    const spans = [];
+    for (let i = 0; i < glyphs.length; i++) {
+      const g = glyphs[i];
+      if (truncationStartIndex != null && g.firstCharacter != null && g.firstCharacter >= truncationStartIndex) continue;
+
+      let slice = '';
+      let stopAfter = false;
+      if (g.firstCharacter == null) {
+        if (truncationStartIndex == null) continue;
+        slice = '…';
+        stopAfter = true;
+      } else {
+        let nextChar = null;
+        for (let j = i + 1; j < glyphs.length; j++) {
+          const fc = glyphs[j].firstCharacter;
+          if (fc != null && fc > g.firstCharacter) {
+            nextChar = fc;
+            break;
+          }
         }
+        slice = dispChars.slice(g.firstCharacter, nextChar ?? (g.firstCharacter + 1));
       }
-      slice = dispChars.slice(g.firstCharacter, nextChar ?? (g.firstCharacter + 1));
-    }
 
-    if (!slice) continue;
-    spans.push(`<tspan x="${textBoxX + g.position.x}" y="${textBoxY + g.position.y}">${esc(slice)}</tspan>`);
-    if (stopAfter) break;
+      if (!slice) continue;
+      spans.push(`<tspan x="${textBoxX + g.position.x}" y="${textBoxY + g.position.y}">${esc(slice)}</tspan>`);
+      if (stopAfter) break;
+    }
+    tspan = spans.join('');
   }
-  tspan = spans.join('');
 
   const textSvg = [
     `<text font-size="${fontSize}" font-family="${fontFamily}, sans-serif"`,

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": "0.2",
   "name": "openfig",
-  "version": "0.3.11",
+  "version": "0.3.15",
   "description": "Open-source tools for Figma file parsing and rendering",
   "author": {
     "name": "OpenFig Contributors"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openfig-cli",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "OpenFig — Open-source tools for Figma file parsing and rendering",
   "type": "module",
   "bin": {