@ugfoundation/swaralipi-js 0.8.0 → 0.8.1

package/dist/viewer/index.js

@@ -414,16 +414,20 @@ function renderNote(note, kind, opts, ctx) {
 }
 function renderArc(arc, offset) {
   const open = arc.line === true;
-  const cls = [
-    "sw-arc",
-    arc.openLeft || open ? "sw-arc--openl" : "",
-    arc.openRight || open ? "sw-arc--openr" : ""
-  ].filter(Boolean).join(" ");
-  const left = open || arc.openLeft ? "" : '<i class="sw-arc-l">w</i>';
-  const right = open || arc.openRight ? "" : '<i class="sw-arc-r">x</i>';
-  const from = offset + arc.start + COL_BASE;
-  const to = offset + arc.end + COL_BASE + 1;
-  return `<span class="${cls}" style="grid-column:${from} / ${to}">${left}<i class="sw-arc-m"></i>${right}</span>`;
+  const openL = arc.openLeft || open;
+  const openR = arc.openRight || open;
+  const fill = '<i class="sw-arc-m"></i>';
+  const hookL = openL ? "" : '<i class="sw-arc-l">w</i>';
+  const hookR = openR ? "" : '<i class="sw-arc-r">x</i>';
+  const piece = (col, cls, inner) => `<span class="sw-arc${cls}" style="grid-column:${col}">${inner}</span>`;
+  const f = offset + arc.start + COL_BASE;
+  const t = offset + arc.end + COL_BASE;
+  const openCls = (openL ? " sw-arc--openl" : "") + (openR ? " sw-arc--openr" : "");
+  if (t === f) return piece(`${f}`, openCls, hookL + fill + hookR);
+  const head = piece(`${f}`, openL ? " sw-arc--openl" : " sw-arc--head", hookL + fill);
+  const tail = piece(`${t}`, openR ? " sw-arc--openr" : " sw-arc--tail", fill + hookR);
+  const mid = t > f + 1 ? piece(`${f + 1} / ${t}`, " sw-arc--mid", fill) : "";
+  return head + mid + tail;
 }
 function renderRow(row, partIdx, rowIdx, offset, ctx) {
   const cells = groupRowIntoCells(row.notes);
@@ -734,9 +738,26 @@ ${FONT_FACES}
   align-items: baseline;
   line-height: 1;
   font-family: Swarabitan, var(--sw-font, sans-serif);
-  font-size: 0.9em;
+  /* The 0.9em sits on the children, not here: the end pieces below size
+     themselves off the block's own column-gap, which is in the block's em. */
 }
+.sw-arc > i, .sw-arc::before { font-size: 0.9em; }
 .sw-arc-l, .sw-arc-r { flex: none; font-style: normal; }
+/* Every piece needs the same baseline \u2014 the fill rides it, so a piece holding
+   only fill would otherwise drop to the bottom of the row. A zero-width copy
+   of the hook glyph is the strut (same font, same metrics). */
+.sw-arc::before { content: 'w'; flex: none; width: 0; overflow: hidden; }
+/* The ends hang from the two notes' CENTRES, as the print sets them, so the
+   arc is three grid items: each end piece takes half of its own column plus
+   the column-gap it has to bridge, and the negative margin on the same side
+   lets that bridge overhang the grid area instead of shifting the piece. */
+.sw-arc--head, .sw-arc--tail {
+  --sw-arc-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1));
+  width: calc(50% + var(--sw-arc-gap));
+}
+.sw-arc--head { justify-self: end;   margin-right: calc(var(--sw-arc-gap) * -1); }
+.sw-arc--tail { justify-self: start; margin-left:  calc(var(--sw-arc-gap) * -1);
+                justify-content: flex-end; }
 /* The fill's geometry is measured off the font's own 'y' glyph: ink 0.11em
    tall whose bottom sits 0.01em above the baseline. An empty inline-block
    takes its bottom margin edge as its baseline, so -0.01em lifts the bar to