@kgdiff/g6 0.0.0-stage → 0.2.0

package/src/map-node.ts

@@ -0,0 +1,272 @@
+/** Scene nodes and collapsed-group pills → G6 node data (see map.ts for the conventions). */
+import type { NodeBadgeStyleProps, NodeData } from '@antv/g6';
+import type { CollapsedGroup, NodeVisual, SceneNode } from '@kgdiff/scene';
+import { composite } from './color.js';
+import {
+  BADGE_FONT_SIZE,
+  BADGE_HEIGHT,
+  BADGE_PAD_X,
+  COLLAPSED_ID_PREFIX,
+  GLOW_MIN_SCALE,
+  HALO_RING_OFFSET,
+  HALO_RING_WIDTH,
+  LABEL_MAX_WIDTH,
+  PILL_FONT_SIZE,
+  PILL_HEIGHT,
+  PILL_PAD_X,
+  TEXT_HALO_ALPHA,
+  TEXT_HALO_WIDTH,
+  Z,
+} from './constants.js';
+import { band, evenCircleDash, finite, unit } from './geometry.js';
+import {
+  type Ctx,
+  claim,
+  type KgdiffDatumData,
+  type NodeStyle,
+  noteLod,
+  shown,
+  text,
+} from './map-context.js';
+
+const NO_BADGES = Object.freeze([]) as unknown as NodeBadgeStyleProps[];
+
+/** Style keys shared by every node so updates never inherit stale values (see file comment). */
+export function nodeBase(ctx: Ctx): Readonly<NodeStyle> {
+  if (ctx.nodeBase === null) ctx.nodeBase = Object.freeze(buildNodeBase(ctx));
+  return ctx.nodeBase;
+}
+
+function buildNodeBase(ctx: Ctx): NodeStyle {
+  const t = ctx.theme;
+  return {
+    x: 0,
+    y: 0,
+    size: 0,
+    zIndex: Z.node,
+    visibility: 'visible',
+    cursor: 'pointer',
+    pointerEvents: 'auto',
+    opacity: 1,
+    fill: ctx.bg,
+    fillOpacity: 1,
+    stroke: ctx.bg,
+    strokeOpacity: 1,
+    lineWidth: 0,
+    lineDash: 0,
+    halo: false,
+    haloStroke: ctx.bg,
+    haloStrokeOpacity: 0,
+    haloLineWidth: 0,
+    haloLineDash: 0,
+    haloGlow: t.glow,
+    haloRadius: 0,
+    ring: false,
+    ringStroke: ctx.bg,
+    ringLineWidth: 0,
+    ringGap: 0,
+    ringOpacity: 0,
+    pulse: 0,
+    pulseStroke: t.accent.base,
+    label: false,
+    labelText: '',
+    labelFill: t.neutral.label,
+    labelFontSize: t.font.size,
+    labelFontWeight: t.font.weightRegular,
+    labelFontFamily: t.font.family,
+    labelOpacity: 0,
+    labelPlacement: 'bottom',
+    labelOffsetX: 0,
+    labelOffsetY: 0,
+    labelTextDecorationLine: 'none',
+    labelTextDecorationColor: t.neutral.label,
+    labelStroke: ctx.bg,
+    labelLineWidth: TEXT_HALO_WIDTH,
+    labelStrokeOpacity: 0,
+    labelLineJoin: 'round',
+    labelMaxWidth: LABEL_MAX_WIDTH,
+    labelWordWrap: true,
+    labelMaxLines: 1,
+    labelTextOverflow: '…',
+    labelBackground: false,
+    labelBackgroundFill: ctx.bg,
+    labelBackgroundStroke: ctx.bg,
+    labelBackgroundLineWidth: 0,
+    labelBackgroundRadius: 0,
+    labelBackgroundOpacity: 1,
+    labelPadding: 0,
+    sublabel: false,
+    sublabelText: '',
+    sublabelFill: t.text.muted,
+    sublabelFontSize: t.font.size,
+    sublabelFontWeight: t.font.weightRegular,
+    sublabelFontFamily: t.font.family,
+    sublabelOpacity: 0,
+    sublabelOffsetY: 0,
+    sublabelTextDecorationLine: 'none',
+    sublabelStroke: ctx.bg,
+    sublabelStrokeOpacity: 0,
+    badge: false,
+    badges: NO_BADGES,
+  };
+}
+
+function badgeOf(v: NodeVisual, r: number, ctx: Ctx): NodeBadgeStyleProps[] {
+  const b = v.badge;
+  if (b === null) return NO_BADGES;
+  noteLod(ctx, b.minZoom);
+  if (b.text.length === 0 || !shown(b.minZoom, ctx.zoom)) return NO_BADGES;
+  // The native pill sits at (x + 0.7·R − 2, y − 0.7·R − 15 + 2), R = outermost outline (ring
+  // included). G6 anchors 'right-top' badges with their text's top-left at the key's corner.
+  const ring = v.ring;
+  const outer = r + (ring !== null ? ring.gap + ring.width / 2 : 0);
+  const padY = (BADGE_HEIGHT - BADGE_FONT_SIZE * 1.2) / 2;
+  return [
+    {
+      text: b.text,
+      placement: 'right-top',
+      offsetX: 0.7 * outer - 2 + BADGE_PAD_X - r,
+      offsetY: r - 0.7 * outer - BADGE_HEIGHT + 2 + padY,
+      fill: b.color,
+      fontSize: BADGE_FONT_SIZE,
+      fontWeight: 600,
+      fontFamily: ctx.theme.font.mono,
+      // Translucent tints are composited over the canvas, like the native opaque underlay.
+      backgroundFill: composite(b.background, ctx.bg),
+      backgroundOpacity: 1,
+      padding: [padY, BADGE_PAD_X, padY, BADGE_PAD_X],
+    },
+  ];
+}
+
+export function mapNode(sn: SceneNode, v: NodeVisual, ctx: Ctx): NodeData | null {
+  if (!v.visible && !ctx.keepHidden) return null;
+  const t = ctx.theme;
+  const alpha = unit(v.alpha);
+  const r = Math.max(0, finite(v.r, 0));
+  const hasStroke = v.stroke !== null && v.strokeWidth > 0;
+  const ring = v.ring !== null && v.ring.width > 0 ? v.ring : null;
+  const halo = v.halo;
+  const label = text(v.label, alpha, ctx, t.font.size, t.neutral.label);
+  const sub = text(v.secondaryLabel, alpha, ctx, t.font.size, t.text.muted);
+  const badges = badgeOf(v, r, ctx);
+  const changed = v.family !== 'neutral';
+  const pulse = v.pulse > 0 && v.pulse < 1 ? v.pulse : 0;
+  const style: NodeStyle = {
+    ...nodeBase(ctx),
+    x: finite(v.x, 0),
+    y: finite(v.y, 0),
+    size: 2 * r,
+    zIndex: band(Z.node, v.z, Z.span),
+    visibility: v.visible ? 'visible' : 'hidden',
+    opacity: alpha,
+    // Ghosts (fill null) are filled with the canvas so edges do not show through.
+    fill: v.fill ?? ctx.bg,
+    stroke: v.stroke ?? v.fill ?? ctx.bg,
+    lineWidth: hasStroke ? v.strokeWidth : 0,
+    lineDash: hasStroke && v.dash !== null && v.dash.length > 0 ? evenCircleDash(v.dash, r) : 0,
+    halo: halo !== null,
+    haloStroke: halo?.color ?? ctx.bg,
+    haloStrokeOpacity: halo !== null ? unit(halo.alpha) : 0,
+    // Plain G6 circles draw the halo as a band centred on the outline: cover r → glow radius
+    // (dark) or the offset ring (light). kgdiff-node replaces it with the real glow / ring.
+    haloLineWidth:
+      halo === null
+        ? 0
+        : t.glow
+          ? 2 * Math.max(0, Math.max(halo.radius, GLOW_MIN_SCALE * r) - r)
+          : 2 * (HALO_RING_OFFSET + HALO_RING_WIDTH),
+    haloRadius: halo !== null ? Math.max(0, finite(halo.radius, r)) : 0,
+    ring: ring !== null,
+    ringStroke: ring?.color ?? ctx.bg,
+    ringLineWidth: ring?.width ?? 0,
+    ringGap: ring?.gap ?? 0,
+    ringOpacity: ring !== null ? unit(ring.alpha) : 0,
+    pulse,
+    pulseStroke: ring?.color ?? v.stroke ?? v.fill ?? t.accent.base,
+    label: label.show,
+    labelText: label.text,
+    labelFill: label.fill,
+    labelFontSize: label.size,
+    labelFontWeight: label.weight,
+    labelOpacity: label.opacity,
+    labelOffsetY: label.offset,
+    labelTextDecorationLine: label.strike ? 'line-through' : 'none',
+    // G strikes with the current stroke style unless told otherwise — the background halo.
+    labelTextDecorationColor: label.fill,
+    labelStrokeOpacity: TEXT_HALO_ALPHA * label.opacity,
+    sublabel: sub.show,
+    sublabelText: sub.text,
+    sublabelFill: sub.fill,
+    sublabelFontSize: sub.size,
+    sublabelFontWeight: sub.weight,
+    sublabelOpacity: sub.opacity,
+    sublabelOffsetY: sub.offset,
+    sublabelTextDecorationLine: sub.strike ? 'line-through' : 'none',
+    sublabelStrokeOpacity: TEXT_HALO_ALPHA * sub.opacity,
+    badge: badges.length > 0,
+    badges,
+  };
+  const data: KgdiffDatumData = {
+    kgdiff: 'node',
+    index: sn.index,
+    hunk: sn.hunk,
+    family: v.family,
+    changed,
+    label: label.text.length > 0 ? label.text : sn.label,
+    glyph: '',
+  };
+  return { id: ctx.nodeIds[sn.index] as string, style, data };
+}
+
+// ─── Collapsed groups ───────────────────────────────────────────────────────
+
+function pillText(g: CollapsedGroup): string {
+  return typeof g.label === 'string' && g.label.length > 0
+    ? g.label
+    : `+${g.count.toLocaleString('en-US')}`;
+}
+
+/** “+38 unchanged” pill: an invisible point node whose centred label has a pill background. */
+export function mapCollapsed(g: CollapsedGroup, i: number, ctx: Ctx): NodeData | null {
+  if (!(g.count > 0) || !Number.isFinite(g.x) || !Number.isFinite(g.y)) return null;
+  const t = ctx.theme;
+  const padY = (PILL_HEIGHT - PILL_FONT_SIZE * 1.2) / 2;
+  const label = pillText(g);
+  const style: NodeStyle = {
+    ...nodeBase(ctx),
+    x: g.x,
+    y: g.y,
+    size: 1,
+    zIndex: Z.collapsed,
+    cursor: 'default',
+    fill: 'transparent',
+    stroke: 'transparent',
+    label: true,
+    labelText: label,
+    labelFill: t.text.secondary,
+    labelFontSize: PILL_FONT_SIZE,
+    labelFontWeight: 500,
+    labelOpacity: 1,
+    labelPlacement: 'center',
+    labelLineWidth: 0,
+    labelWordWrap: false,
+    labelBackground: true,
+    labelBackgroundFill: t.surface.raised,
+    labelBackgroundStroke: t.surface.borderStrong,
+    labelBackgroundLineWidth: 1,
+    labelBackgroundRadius: PILL_HEIGHT / 2,
+    labelBackgroundOpacity: 1,
+    labelPadding: [padY, PILL_PAD_X, padY, PILL_PAD_X],
+  };
+  const data: KgdiffDatumData = {
+    kgdiff: 'collapsed',
+    index: i,
+    hunk: -1,
+    family: 'neutral',
+    changed: false,
+    label,
+    glyph: '',
+  };
+  return { id: claim(ctx, `${ctx.prefix}${COLLAPSED_ID_PREFIX}${g.id}`), style, data };
+}

package/src/map.ts

@@ -0,0 +1,130 @@
+/**
+ * Resolved frame → G6 v5 `GraphData`. Pure: no G6 runtime, no DOM, no shared mutable state.
+ *
+ * Every element always carries the full set of style keys it can ever use (switched off with
+ * `false` / 0 / ''), because G6's `setData` / `updateData` *merge* an update into the previous
+ * style: a key that is merely omitted would keep its old value. `datum.data` holds flat
+ * primitives only, so G6's shallow equality check can skip unchanged elements.
+ *
+ * Sizes the scene gives in screen px are emitted as world units (exact at zoom 1); level of
+ * detail (`minZoom`, `arrowMinZoom`) is applied for the zoom passed in `zoom`.
+ */
+import type { EdgeData, GraphData, NodeData } from '@antv/g6';
+import { KgdiffError } from '@kgdiff/core';
+import type {
+  EdgeVisual,
+  FrameVisuals,
+  NodeVisual,
+  Scene,
+  SceneEdge,
+  SceneNode,
+} from '@kgdiff/scene';
+import { type Ctx, claim, type KgdiffDatumData } from './map-context.js';
+import { mapEdge, mapGlyph } from './map-edge.js';
+import { mapCollapsed, mapNode } from './map-node.js';
+
+export type { ElementKind, KgdiffDatumData } from './map-context.js';
+
+export interface MapOptions {
+  readonly idPrefix: string;
+  readonly keepHidden: boolean;
+  /** Camera zoom the level of detail is evaluated at. */
+  readonly zoom: number;
+}
+
+export interface MappedFrame {
+  readonly data: { nodes: NodeData[]; edges: EdgeData[] };
+  /**
+   * Distinct positive LOD thresholds present in the frame (sorted): the zooms at which the
+   * mapping would change. Crossing one calls for a re-map.
+   */
+  readonly lod: readonly number[];
+}
+
+// ─── Frame ──────────────────────────────────────────────────────────────────
+
+/**
+ * Map a resolved frame. Output order: scene nodes (by index), collapsed pills, then glyph anchors
+ * and pivot dots; scene edges (by index), then glyph arcs (frame order). O(N + E + G), plus O(N)
+ * grids when the frame has glyphs.
+ *
+ * @throws KgdiffError(`invalid-input`) when the frame was not resolved for `scene`.
+ */
+export function mapFrame(scene: Scene, frame: FrameVisuals, options: MapOptions): MappedFrame {
+  if (frame.nodes.length !== scene.nodes.length || frame.edges.length !== scene.edges.length) {
+    throw new KgdiffError(
+      'invalid-input',
+      `The frame does not belong to this scene: it has ${frame.nodes.length} nodes / ${frame.edges.length} edges, the scene ${scene.nodes.length} / ${scene.edges.length}. Resolve it with createVisualResolver(scene).`,
+    );
+  }
+  if (typeof options.idPrefix !== 'string') {
+    throw new KgdiffError('invalid-input', 'idPrefix must be a string.');
+  }
+  const N = scene.nodes.length;
+  const ctx: Ctx = {
+    scene,
+    frame,
+    theme: scene.theme,
+    bg: scene.theme.canvas.background,
+    prefix: options.idPrefix,
+    keepHidden: options.keepHidden,
+    zoom: options.zoom,
+    present: new Uint8Array(N),
+    nodeIds: new Array<string>(N),
+    used: new Set<string>(),
+    lod: new Set<number>(),
+    locator: null,
+    anyLocator: null,
+    anchors: new Map(),
+    nodeBase: null,
+    edgeBase: null,
+  };
+  const nodes: NodeData[] = [];
+  const edges: EdgeData[] = [];
+  for (let i = 0; i < N; i++) {
+    const sn = scene.nodes[i] as SceneNode;
+    const v = frame.nodes[i] as NodeVisual;
+    ctx.nodeIds[i] = claim(ctx, options.idPrefix + sn.id);
+    const datum = mapNode(sn, v, ctx);
+    if (datum === null) continue;
+    ctx.present[i] = 1;
+    nodes.push(datum);
+  }
+  frame.collapsed.forEach((g, i) => {
+    const datum = mapCollapsed(g, i, ctx);
+    if (datum !== null) nodes.push(datum);
+  });
+  for (let j = 0; j < scene.edges.length; j++) {
+    const datum = mapEdge(scene.edges[j] as SceneEdge, frame.edges[j] as EdgeVisual, ctx);
+    if (datum !== null) edges.push(datum);
+  }
+  frame.glyphs.forEach((g, i) => {
+    const datum = mapGlyph(g, i, ctx, nodes);
+    if (datum === null) return;
+    if ('edge' in datum) edges.push(datum.edge);
+    else nodes.push(datum.node);
+  });
+  return { data: { nodes, edges }, lod: [...ctx.lod].sort((a, b) => a - b) };
+}
+
+/** True when moving the camera from zoom `a` to `b` crosses one of the `lod` thresholds. */
+export function crossesLod(lod: readonly number[], a: number, b: number): boolean {
+  for (const m of lod) if (a < m !== b < m) return true;
+  return false;
+}
+
+/** The kgdiff part of a datum's `data`, or null for elements this package did not generate. */
+export function kgdiffData(data: unknown): KgdiffDatumData | null {
+  if (data === null || typeof data !== 'object') return null;
+  const d = data as Partial<KgdiffDatumData>;
+  return d.kgdiff === 'node' ||
+    d.kgdiff === 'edge' ||
+    d.kgdiff === 'glyph' ||
+    d.kgdiff === 'collapsed' ||
+    d.kgdiff === 'anchor'
+    ? (d as KgdiffDatumData)
+    : null;
+}
+
+/** Narrowing helper for consumers of `toG6Data`: the graph data with both arrays present. */
+export type MappedGraphData = Required<Pick<GraphData, 'nodes' | 'edges'>>;

package/src/node.ts

@@ -0,0 +1,240 @@
+/**
+ * `kgdiff-node`: G6's built-in `circle` plus what it cannot express — a concentric ring, a replay
+ * pulse, a struck-through old name under the label and visible strike-throughs — and a halo drawn the way
+ * the visual language specifies it (a soft radial glow in dark themes, a crisp offset ring in
+ * light ones) instead of G6's flat band.
+ *
+ * It reads the extra keys `toG6Data` emits (`ring*`, `pulse*`, `sublabel*`, `haloGlow`,
+ * `haloRadius`); a plain `circle` ignores them, so the same data degrades gracefully. Every
+ * sub-shape has a `get<Name>Style` method, which is what G6 animates during updates.
+ */
+import {
+  Circle,
+  type CircleStyleProps,
+  ExtensionCategory,
+  Label,
+  type LabelStyleProps,
+  register,
+} from '@antv/g6';
+import { glowGradient } from './color.js';
+import {
+  GLOW_MIN_SCALE,
+  HALO_RING_OFFSET,
+  HALO_RING_WIDTH,
+  LABEL_MAX_WIDTH,
+  NODE_TYPE,
+  TEXT_HALO_WIDTH,
+} from './constants.js';
+
+/** Style keys of kgdiff-node beyond G6's circle (all optional; see map.ts for their meaning). */
+export interface KgdiffNodeStyleProps extends CircleStyleProps {
+  haloGlow?: boolean;
+  haloRadius?: number;
+  ring?: boolean;
+  ringStroke?: string;
+  ringLineWidth?: number;
+  ringGap?: number;
+  /** Relative to the node's opacity. */
+  ringOpacity?: number;
+  /** Replay pulse progress in (0, 1); 0 = none. */
+  pulse?: number;
+  pulseStroke?: string;
+  sublabel?: boolean;
+  sublabelText?: string;
+  sublabelFill?: string;
+  sublabelFontSize?: number;
+  sublabelFontWeight?: number;
+  sublabelFontFamily?: string;
+  /** Absolute. */
+  sublabelOpacity?: number;
+  sublabelOffsetY?: number;
+  sublabelTextDecorationLine?: 'none' | 'line-through';
+  sublabelStroke?: string;
+  sublabelStrokeOpacity?: number;
+}
+
+type Attrs = Required<CircleStyleProps>;
+type Extras = Partial<Omit<KgdiffNodeStyleProps, keyof CircleStyleProps>>;
+type Container = NonNullable<Parameters<Circle['render']>[1]>;
+type ShapeStyle = Record<string, unknown>;
+
+/** Keys of ours that must not leak onto the key circle. */
+const OWN = /^(ring|pulse|sublabel)/;
+
+function num(v: unknown, fallback: number): number {
+  return typeof v === 'number' && Number.isFinite(v) ? v : fallback;
+}
+
+function str(v: unknown, fallback: string): string {
+  return typeof v === 'string' && v.length > 0 ? v : fallback;
+}
+
+export class KgdiffNode extends Circle {
+  private extras(attributes: Attrs): Extras {
+    // G6 stores every style key on the element; ours are simply not in its declared type.
+    return attributes as Attrs & Extras;
+  }
+
+  private radius(attributes: Attrs): number {
+    return Math.min(...this.getSize(attributes)) / 2;
+  }
+
+  protected override getKeyStyle(attributes: Attrs): ReturnType<Circle['getKeyStyle']> {
+    const style = super.getKeyStyle(attributes);
+    for (const key of Object.keys(style)) if (OWN.test(key)) Reflect.deleteProperty(style, key);
+    return style;
+  }
+
+  /** Dark: radial glow of radius max(haloRadius, 1.6·r). Light: 2-wide ring 5 outside r (or the ring). */
+  protected override getHaloStyle(attributes: Attrs): false | ShapeStyle {
+    if (attributes.halo === false) return false;
+    const a = this.extras(attributes);
+    const r = this.radius(attributes);
+    const color = str(attributes.haloStroke, '#888');
+    const opacity = num(attributes.opacity, 1) * num(attributes.haloStrokeOpacity, 0);
+    const common = { opacity, pointerEvents: 'none', zIndex: -2, lineDash: 0 };
+    if (a.haloGlow !== false) {
+      return {
+        ...common,
+        r: Math.max(num(a.haloRadius, 0), GLOW_MIN_SCALE * r),
+        fill: glowGradient(color),
+        stroke: 'none',
+        lineWidth: 0,
+      };
+    }
+    const ringOuter = a.ring === true ? r + num(a.ringGap, 0) + num(a.ringLineWidth, 0) / 2 : 0;
+    const base = Math.max(num(a.haloRadius, r), 0);
+    return {
+      ...common,
+      r: Math.max(base + HALO_RING_OFFSET, ringOuter + 1.5 + HALO_RING_WIDTH / 2),
+      fill: 'none',
+      stroke: color,
+      lineWidth: HALO_RING_WIDTH,
+    };
+  }
+
+  /** Concentric ring at r + gap. */
+  protected getRingStyle(attributes: Attrs): false | ShapeStyle {
+    const a = this.extras(attributes);
+    const width = num(a.ringLineWidth, 0);
+    if (a.ring !== true || width <= 0) return false;
+    return {
+      r: this.radius(attributes) + num(a.ringGap, 0),
+      fill: 'none',
+      stroke: str(a.ringStroke, '#888'),
+      lineWidth: width,
+      opacity: num(attributes.opacity, 1) * num(a.ringOpacity, 1),
+      pointerEvents: 'none',
+      zIndex: -1,
+    };
+  }
+
+  /** One expanding ring that fades out as `pulse` goes 0 → 1 (native renderer geometry). */
+  protected getPulseStyle(attributes: Attrs): false | ShapeStyle {
+    const a = this.extras(attributes);
+    const p = num(a.pulse, 0);
+    if (!(p > 0 && p < 1)) return false;
+    const r = this.radius(attributes);
+    const fade = 1 - p;
+    return {
+      r: r + 3 + p * (12 + r * 0.6),
+      fill: 'none',
+      stroke: str(a.pulseStroke, '#888'),
+      lineWidth: 0.75 + 1.75 * fade,
+      opacity: num(attributes.opacity, 1) * fade * fade * 0.85,
+      pointerEvents: 'none',
+      zIndex: -1,
+    };
+  }
+
+  /** The old name, struck through, `sublabelOffsetY` below the node (like the primary label). */
+  protected getSublabelStyle(attributes: Attrs): false | LabelStyleProps {
+    const a = this.extras(attributes);
+    const text = typeof a.sublabelText === 'string' ? a.sublabelText : '';
+    if (a.sublabel !== true || text.length === 0) return false;
+    const key = this.getShape('key');
+    const bottom = key ? key.getLocalBounds().max[1] : this.radius(attributes);
+    const opacity = num(a.sublabelOpacity, 1);
+    const fill = str(a.sublabelFill, '#888');
+    return {
+      text,
+      fill,
+      fontSize: num(a.sublabelFontSize, 11),
+      fontWeight: num(a.sublabelFontWeight, 400),
+      fontFamily: str(a.sublabelFontFamily, 'system-ui, sans-serif'),
+      opacity,
+      textAlign: 'center',
+      textBaseline: 'top',
+      // Struck by `getSubstrikeStyle`; G's own decoration ignores its color (see below).
+      textDecorationLine: 'none',
+      stroke: str(a.sublabelStroke, 'transparent'),
+      lineWidth: TEXT_HALO_WIDTH,
+      strokeOpacity: num(a.sublabelStrokeOpacity, 0),
+      lineJoin: 'round',
+      wordWrap: true,
+      wordWrapWidth: LABEL_MAX_WIDTH,
+      maxLines: 1,
+      textOverflow: '…',
+      transform: [['translate', 0, num(bottom, 0) + num(a.sublabelOffsetY, 0)]],
+      pointerEvents: 'none',
+      zIndex: 0,
+    };
+  }
+
+  /**
+   * G 6.3 keeps `textDecorationColor` unparsed and then reads `.r/.g/.b` from it, so a
+   * `line-through` is drawn in whatever stroke style is current — the background-colored text
+   * halo, i.e. invisible. kgdiff-node turns G's decoration off and strikes with a line instead.
+   */
+  protected override getLabelStyle(attributes: Attrs): false | LabelStyleProps {
+    const style = super.getLabelStyle(attributes);
+    return style === false ? false : { ...style, textDecorationLine: 'none' };
+  }
+
+  /** A 1-wide line through the middle of a label shape's text, in node coordinates. */
+  private strike(shape: string, color: string, opacity: number): false | ShapeStyle {
+    const label = this.getShape(shape);
+    if (!label) return false;
+    // Local bounds include the text halo's stroke; G also shifts the text by half of it.
+    const b = label.getLocalBounds();
+    const inset = TEXT_HALO_WIDTH / 2;
+    const x1 = b.min[0] + inset;
+    const x2 = b.max[0] - inset;
+    const y = (b.min[1] + b.max[1]) / 2;
+    if (!(x2 > x1) || !Number.isFinite(y)) return false;
+    return { x1, y1: y, x2, y2: y, stroke: color, lineWidth: 1, opacity, pointerEvents: 'none' };
+  }
+
+  protected getStrikeStyle(attributes: Attrs): false | ShapeStyle {
+    if (attributes.label === false || attributes.labelTextDecorationLine !== 'line-through') {
+      return false;
+    }
+    const color = str(attributes.labelFill, '#888');
+    return this.strike('label', color, num(attributes.labelOpacity, num(attributes.opacity, 1)));
+  }
+
+  protected getSubstrikeStyle(attributes: Attrs): false | ShapeStyle {
+    const a = this.extras(attributes);
+    if (a.sublabel !== true || a.sublabelTextDecorationLine !== 'line-through') return false;
+    return this.strike('sublabel', str(a.sublabelFill, '#888'), num(a.sublabelOpacity, 1));
+  }
+
+  public override render(attributes = this.parsedAttributes, container: Container = this): void {
+    super.render(attributes, container);
+    if (!this.getShape('key')) return;
+    this.upsert('ring', 'circle', this.getRingStyle(attributes), container);
+    this.upsert('pulse', 'circle', this.getPulseStyle(attributes), container);
+    this.upsert('sublabel', Label, this.getSublabelStyle(attributes), container);
+    this.upsert('strike', 'line', this.getStrikeStyle(attributes), container);
+    this.upsert('substrike', 'line', this.getSubstrikeStyle(attributes), container);
+  }
+}
+
+let registered = false;
+
+/** Register `kgdiff-node` with G6 (once per module instance). */
+export function registerKgdiffNode(): void {
+  if (registered) return;
+  register(ExtensionCategory.NODE, NODE_TYPE, KgdiffNode);
+  registered = true;
+}