highlightSpec

Returns a running cue.highlight as the rings to draw right now, or null before its anchor fires and once its rings have gone.

@internote/canvas-sdk/reactFunction
On this page
import { highlightSpec } from '@internote/canvas-sdk/react';

A highlight rings its content the way an interface rings a focused field: a hard edge in the content's own colour, or in the colour the author named, that pushes out from the content's edge and thins to nothing as it grows, twice. Pass the result to HighlightRing and name its id as the filter of the content it wraps.

#Signature

(
    node: CompiledNode,
    runtime: EnvironmentContext["animation"],
    unit: number,
    id: string,
): HighlightSpec | null

#Parameters

node
The cue.highlight node.
runtime
The environment's animation runtime, ctx.animation.
unit
The environment's canvas unit in pixels, which the rings' spread is measured in.
id
The id to give the filter, unique within the surface.

#Example

const spec = highlightSpec(cue, ctx.animation, metrics.unit, `highlight-${nodeKey(cue, i)}`);
return (
    <g filter={spec ? `url(#${spec.id})` : undefined}>
        {spec && <HighlightRing spec={spec} region={plotRegion} />}
        {marks}
    </g>
);

Declared in packages/canvas-sdk/src/react/attention.tsx:85.

Last updated