@coldtea/pr-lens-renderer 0.2.2 → 0.2.4

package/src/svg/styles.ts

@@ -0,0 +1,122 @@
+import { assertNever } from "@coldtea/pr-lens-schema";
+import type { Delta, FlowMessage, GraphEdge } from "@coldtea/pr-lens-schema";
+import { MONO_STACK } from "../text.js";
+import type { Palette } from "../theme.js";
+import type { Attributes } from "./primitives.js";
+import { toneColour, toneFor, type Tone } from "./document.js";
+
+// GitHub's attachment viewer can ignore CSS, so appearance lives on the elements.
+export const stylesFor = (palette: Palette) => ({
+  lane: { fill: palette.lane },
+  laneLabel: { "font-size": 10, "font-weight": 700, "letter-spacing": ".12em", fill: palette.muted },
+  title: { "font-weight": 600, fill: palette.foreground },
+  subtitle: { "font-size": 9.5, fill: palette.muted, "font-family": MONO_STACK },
+  chip: { fill: palette.chip },
+  glyph: { fill: palette.muted },
+  glyphStroke: { stroke: palette.muted, "stroke-width": 1.4, fill: "none" },
+  badgeText: { "font-size": 8.5, "font-weight": 700, "letter-spacing": ".06em" },
+  glow: { fill: "none", "stroke-width": 7, opacity: 0.14 },
+  pill: { fill: palette.pill, stroke: palette.pillBorder, "stroke-width": 1 },
+  pillText: { "font-size": 9.5, "font-weight": 600 },
+  lifeline: { stroke: palette.lifeline, "stroke-width": 1, "stroke-dasharray": "3 4" },
+  activation: { fill: palette.addedFill, stroke: palette.addedBorder },
+});
+
+export type SvgStyles = ReturnType<typeof stylesFor>;
+
+const cardStroke = (delta: Delta, palette: Palette): Attributes => {
+  switch (delta) {
+    case "added":
+      return { stroke: palette.added, "stroke-opacity": 0.55 };
+    case "modified":
+      return { stroke: palette.modified, "stroke-opacity": 0.5 };
+    case "removed":
+      return { stroke: palette.removed, "stroke-dasharray": "4 3", "stroke-opacity": 0.6 };
+    case "unchanged":
+      return { stroke: palette.cardBorder };
+    default:
+      return assertNever(delta);
+  }
+};
+
+export const cardAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  fill: palette.card,
+  "stroke-width": 1,
+  ...cardStroke(delta, palette),
+});
+
+const cardOpacity = (delta: Delta): number | undefined => {
+  switch (delta) {
+    case "removed":
+      return 0.55;
+    case "unchanged":
+      return 0.82;
+    case "added":
+    case "modified":
+      return undefined;
+    default:
+      return assertNever(delta);
+  }
+};
+
+export const cardGroupAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  filter: `drop-shadow(0 1px 2px ${palette.shadow})`,
+  opacity: cardOpacity(delta),
+});
+
+export const badgeColours = (tone: Tone, palette: Palette) => {
+  switch (tone) {
+    case "added":
+      return { fill: palette.addedFill, stroke: palette.addedBorder, text: palette.addedText };
+    case "modified":
+      return { fill: palette.modifiedFill, stroke: palette.modifiedBorder, text: palette.modifiedText };
+    case "removed":
+      return { fill: palette.removedFill, stroke: palette.removedBorder, text: palette.removedText };
+    case "neutral":
+      return { fill: palette.neutralFill, stroke: palette.cardBorder, text: palette.muted };
+    default:
+      return assertNever(tone);
+  }
+};
+
+const strokeAttributes = (delta: Delta, palette: Palette): Attributes => ({
+  fill: "none",
+  stroke: toneColour(palette, toneFor(delta)),
+  "stroke-width": 1.5,
+  "stroke-dasharray": delta === "removed" ? "5 4" : undefined,
+  opacity: delta === "removed" ? 0.7 : undefined,
+});
+
+export const edgeAttributes = (edge: GraphEdge, palette: Palette): Attributes => {
+  const attributes = {
+    ...strokeAttributes(edge.delta, palette),
+    ...(edge.delta === "unchanged" ? { opacity: 0.82 } : {}),
+  };
+  switch (edge.emphasis) {
+    case "hero":
+      return { ...attributes, "stroke-width": 2.25 };
+    case "muted":
+      return { ...attributes, opacity: 0.45 };
+    case "normal":
+      return attributes;
+    default:
+      return assertNever(edge.emphasis);
+  }
+};
+
+export const messageAttributes = (message: FlowMessage, palette: Palette): Attributes => {
+  const attributes = {
+    ...strokeAttributes(message.delta, palette),
+    "stroke-width": message.delta === "added" ? 2.25 : 1.5,
+  };
+  switch (message.kind) {
+    case "return":
+      return { ...attributes, "stroke-dasharray": "4 3", opacity: 0.8 };
+    case "sync":
+    case "async":
+    case "self":
+      return attributes;
+    default:
+      return assertNever(message.kind);
+  }
+};

package/src/text.ts

@@ -28,9 +28,33 @@ const SANS_ADVANCE: Readonly<Record<string, number>> = {
   y: 500, z: 500, "{": 334, "|": 260, "}": 334, "~": 584,
 };
 
-/** What a character outside the table is assumed to cost, in the same units. */
+/** What a narrow character outside the table is assumed to cost, in the same units. */
 const FALLBACK_ADVANCE = 600;
 
+/**
+ * East Asian Wide and Fullwidth glyphs occupy a full em. Measuring them at
+ * the narrow fallback puts every CJK label about 38% short of its real width,
+ * which is enough for an edge label's plate to stop covering its own text.
+ */
+const isWide = (character: string): boolean => {
+  const point = character.codePointAt(0) ?? 0;
+  return (
+    (point >= 0x1100 && point <= 0x115f) ||
+    (point >= 0x2e80 && point <= 0xa4cf) ||
+    (point >= 0xac00 && point <= 0xd7a3) ||
+    (point >= 0xf900 && point <= 0xfaff) ||
+    (point >= 0xfe30 && point <= 0xfe6f) ||
+    (point >= 0xff00 && point <= 0xff60) ||
+    (point >= 0xffe0 && point <= 0xffe6) ||
+    (point >= 0x20000 && point <= 0x3fffd)
+  );
+};
+
+const FULL_WIDTH_ADVANCE = 1000;
+
+const fallbackAdvance = (character: string): number =>
+  isWide(character) ? FULL_WIDTH_ADVANCE : FALLBACK_ADVANCE;
+
 /**
  * The bold face of the same family runs a little wider at every weight step.
  * One factor over the regular table is close enough for boxes that already
@@ -43,9 +67,9 @@ const MONO_ADVANCE = 600;
 const advanceFor = (face: Face, character: string): number => {
   switch (face) {
     case "sans":
-      return SANS_ADVANCE[character] ?? FALLBACK_ADVANCE;
+      return SANS_ADVANCE[character] ?? fallbackAdvance(character);
     case "sans-bold":
-      return (SANS_ADVANCE[character] ?? FALLBACK_ADVANCE) * BOLD_WIDENING;
+      return (SANS_ADVANCE[character] ?? fallbackAdvance(character)) * BOLD_WIDENING;
     case "mono":
       return MONO_ADVANCE;
     default:

package/src/version.ts

@@ -6,4 +6,4 @@
  */
 export const RENDERER_NAME = "@coldtea/pr-lens-renderer";
 
-export const RENDERER_VERSION = "0.2.2";
+export const RENDERER_VERSION = "0.2.4";