graph-view docs: labels now render statement (post-redesign rekey follow-up)
This commit is contained in:
@@ -10,20 +10,21 @@
|
|||||||
* and cancelled on unmount — idle CPU stays near zero. Physics is
|
* and cancelled on unmount — idle CPU stays near zero. Physics is
|
||||||
* placement only: pan/zoom, no dragging, no editing.
|
* placement only: pan/zoom, no dragging, no editing.
|
||||||
*
|
*
|
||||||
* Labels render the node `name` (the short header, never the statement)
|
* Labels render the node `statement` (the minimal proposition — identity
|
||||||
|
* key + rendering label; the full `description` lives on the detail card)
|
||||||
* through custom canvas drawers that replace sigma's defaults:
|
* through custom canvas drawers that replace sigma's defaults:
|
||||||
* - defaultDrawNodeLabel: plain wrapped text, centered below the node,
|
* - defaultDrawNodeLabel: plain wrapped text, centered below the node,
|
||||||
* word-wrapped at a max line width — no truncation, no one-line sprawl.
|
* word-wrapped at a max line width — no truncation, no one-line sprawl.
|
||||||
* - defaultDrawNodeHover: NO background box (sigma's default is a
|
* - defaultDrawNodeHover: NO background box (sigma's default is a
|
||||||
* hardcoded white one). Instead the hovered node gets a soft glow
|
* hardcoded white one). Instead the hovered node gets a soft glow
|
||||||
* halo in its own state color at a constant radius, flush with the
|
* halo in its own state color at a constant radius, flush with the
|
||||||
* disc edge, and its name brightens — the "this is clickable,
|
* disc edge, and its statement brightens — the "this is clickable,
|
||||||
* click for the full fact" affordance. Entering/leaving hover fades
|
* click for the full fact" affordance. Entering/leaving hover fades
|
||||||
* ONE transition factor shared by halo and text alike, so the
|
* ONE transition factor shared by halo and text alike, so the
|
||||||
* halo's opacity and the text's muted→bright cross-fade stay in
|
* halo's opacity and the text's muted→bright cross-fade stay in
|
||||||
* sync (no growth, no pulse; interpolating from the current value
|
* sync (no growth, no pulse; interpolating from the current value
|
||||||
* means rapid hover toggles glide instead of snapping). Hover
|
* means rapid hover toggles glide instead of snapping). Hover
|
||||||
* always shows the name, even when labels are zoomed out.
|
* always shows the statement, even when labels are zoomed out.
|
||||||
* Node hit-testing is the disc PLUS a pad: sigma picks nodes from a
|
* Node hit-testing is the disc PLUS a pad: sigma picks nodes from a
|
||||||
* half-resolution framebuffer (no v3 setting enlarges hitboxes), and the
|
* half-resolution framebuffer (no v3 setting enlarges hitboxes), and the
|
||||||
* glow halo is bigger than the stock hitbox — touching the halo
|
* glow halo is bigger than the stock hitbox — touching the halo
|
||||||
@@ -101,7 +102,7 @@ export function isNodeVisible(
|
|||||||
// sigma's defaults draw the label on ONE line to the right of the node with
|
// sigma's defaults draw the label on ONE line to the right of the node with
|
||||||
// a white box on hover. We replace both: names wrap under the node at a max
|
// a white box on hover. We replace both: names wrap under the node at a max
|
||||||
// line width, muted at rest; on hover the node pulses a soft glow in its
|
// line width, muted at rest; on hover the node pulses a soft glow in its
|
||||||
// own state color and the name brightens (no background box).
|
// own state color and the statement brightens (no background box).
|
||||||
|
|
||||||
const LABEL_MAX_WIDTH = 170; // px — wraps long names instead of a wide strip
|
const LABEL_MAX_WIDTH = 170; // px — wraps long names instead of a wide strip
|
||||||
const LABEL_GAP = 6; // px between node edge and first label line
|
const LABEL_GAP = 6; // px between node edge and first label line
|
||||||
@@ -226,7 +227,7 @@ function wrapLabel(context: CanvasRenderingContext2D, text: string, maxWidth: nu
|
|||||||
return lines;
|
return lines;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** The wrapped node name, centered below the node — used by both drawers
|
/** The wrapped node statement, centered below the node — used by both drawers
|
||||||
* with identical geometry so hover only changes the color, nothing jumps. */
|
* with identical geometry so hover only changes the color, nothing jumps. */
|
||||||
function drawName(
|
function drawName(
|
||||||
context: CanvasRenderingContext2D,
|
context: CanvasRenderingContext2D,
|
||||||
@@ -253,7 +254,7 @@ function drawName(
|
|||||||
* 1 = fully hovered): a glow halo in the node's own state color at a
|
* 1 = fully hovered): a glow halo in the node's own state color at a
|
||||||
* CONSTANT radius (opacity fades in/out; the halo never grows) starting
|
* CONSTANT radius (opacity fades in/out; the halo never grows) starting
|
||||||
* flush at the disc edge (the evenodd punch-out keeps the disc itself
|
* flush at the disc edge (the evenodd punch-out keeps the disc itself
|
||||||
* unpainted). The name is drawn at partial alpha in the bright hover
|
* unpainted). The statement is drawn at partial alpha in the bright hover
|
||||||
* color — the muted resting label on the layer beneath shows through,
|
* color — the muted resting label on the layer beneath shows through,
|
||||||
* so text and halo cross-fade on the SAME factor and stay in sync. */
|
* so text and halo cross-fade on the SAME factor and stay in sync. */
|
||||||
function paintHover(
|
function paintHover(
|
||||||
@@ -277,7 +278,7 @@ function paintHover(
|
|||||||
context.fill("evenodd");
|
context.fill("evenodd");
|
||||||
}
|
}
|
||||||
// Same fade factor as the halo: text and glow rise together. The
|
// Same fade factor as the halo: text and glow rise together. The
|
||||||
// bright name at partial alpha over the muted resting label beneath is
|
// bright statement at partial alpha over the muted resting label beneath is
|
||||||
// a smooth muted→bright cross-fade rather than an instant color swap.
|
// a smooth muted→bright cross-fade rather than an instant color swap.
|
||||||
context.globalAlpha = fade;
|
context.globalAlpha = fade;
|
||||||
drawName(context, data, settings, hoverTextColor);
|
drawName(context, data, settings, hoverTextColor);
|
||||||
|
|||||||
Reference in New Issue
Block a user