Functions
Functions exported by @reincharts/interactive.
import { arrowHead, constrainAngle, createDrawingController, ... } from "@reincharts/interactive";arrowHead
Filled arrow head at to, pointing away from from.
function arrowHead(
ctx: CanvasRenderingContext2D,
from: Pt,
to: Pt,
color: string,
size?: number,
): voidconstrainAngle
Constrains p relative to origin to the nearest multiple of 45° (shift key).
function constrainAngle(origin: Pt, p: Pt): PtcreateDrawingController
Framework agnostic drawing store: drawings, selection, active tool, undo / redo,
clipboard, serialization and events. useDrawings() wraps it for React.
function createDrawingController(options?: DrawingControllerOptions): DrawingControllercreateEditor
Framework agnostic editing logic of <Drawings>: rendering, hit testing, creation,
dragging, keyboard shortcuts and alerts. One instance per chart.
function createEditor(
engine: ChartEngine,
controller: DrawingController,
getOptions: () => EditorOptions,
): DrawingEditorcreateGeometry
Converts a drawing to pixels for the given pane.
function createGeometry(drawing: Drawing, c: GeometryContext): GeometrydefineTool
Defines a drawing tool. Tools are plain objects: points in, canvas out.
Pass custom tools to useDrawings({ tools }) and they appear in the toolbar.
function defineTool(tool: ToolDefinition): ToolDefinitiondist
Distance between two points in pixels.
function dist(a: Pt, b: Pt): numberdistToSegment
Distance from p to segment ab.
function distToSegment(p: Pt, a: Pt, b: Pt): numberdrawingId
Generates a unique drawing id.
function drawingId(): stringextendSegment
Extends segment a→b far beyond a box of size w×h (the canvas clip trims it).
function extendSegment(
a: Pt,
b: Pt,
mode: DrawingStyle["extend"],
w: number,
h: number,
): readonly [Pt, Pt]fillOf
Translucent version of the drawing color for fills.
function fillOf(g: Geometry, alpha?: number): stringfillPolygon
Fills a closed polygon through points with a color.
function fillPolygon(ctx: CanvasRenderingContext2D, pts: readonly Pt[], color: string): voidhandle
Draws one edit handle.
function handle(
ctx: CanvasRenderingContext2D,
p: Pt,
fill: string,
stroke: string,
active?: boolean,
): voidinPolygon
Even-odd point in polygon test.
function inPolygon(x: number, y: number, pts: readonly Pt[]): booleaninRect
Whether (x, y) lies inside the rectangle spanned by a and b.
function inRect(x: number, y: number, a: Pt, b: Pt, pad?: number): booleanlabel
A filled label box.
function label(
ctx: CanvasRenderingContext2D,
g: Geometry,
text: string,
x: number,
y: number,
o?: { background?: string; color?: string; align?: "left" | "center" | "right"; baseline?: "top" | "middle" | "bottom"; size?: number; },
): { left: number; top: number; width: number; height: number; }linearRegression
Least squares fit y = intercept + slope * x.
function linearRegression(
xs: readonly number[],
ys: readonly number[],
): { slope: number; intercept: number; stdDev: number; maxDev: number; }lineCross
Price of the line through the first two points at a logical x (respecting style.extend).
function lineCross(
d: Drawing,
logical: number,
logicalOf: (t: number) => number,
): number | undefinedmultiLabel
Multi-line label box (measure / position stats). Returns the box.
function multiLabel(
ctx: CanvasRenderingContext2D,
g: Geometry,
lines: readonly string[],
x: number,
y: number,
background: string,
baseline?: "top" | "bottom" | "middle",
): { left: number; top: number; width: number; height: number; }nearPolyline
True when (x, y) is near any segment of the polyline.
function nearPolyline(
x: number,
y: number,
pts: readonly Pt[],
closed?: boolean,
tolerance?: number,
): booleannearSegment
Whether (x, y) is within the hit tolerance of segment a–b.
function nearSegment(x: number, y: number, a: Pt, b: Pt, tolerance?: number): booleanpolyline
Traces a polyline through points into the current path.
function polyline(ctx: CanvasRenderingContext2D, pts: readonly Pt[], closed?: boolean): voidrectOf
Normalized rect spanned by two points.
function rectOf(a: Pt, b: Pt): { left: number; top: number; right: number; bottom: number; }regression
Linear regression of the source values between the two points (logical x).
function regression(
g: Geometry,
): { valid: boolean; base: readonly [Pt, Pt]; upper: readonly [Pt, Pt]; lower: readonly [Pt, Pt]; handles: [Pt, Pt]; count: number; }renderOrder
Drawings sorted for rendering (by z, then creation order).
function renderOrder(drawings: readonly Drawing[]): Drawing[]segment
Strokes a straight line between two points (uses the current stroke style).
function segment(ctx: CanvasRenderingContext2D, a: Pt, b: Pt): voidstrokeOf
Applies the drawing's color / width / dash.
function strokeOf(ctx: CanvasRenderingContext2D, g: Geometry, color?: string, width?: number): voidtext
Plain text (no box).
function text(
ctx: CanvasRenderingContext2D,
g: Geometry,
value: string,
x: number,
y: number,
color: string,
align?: CanvasTextAlign,
baseline?: CanvasTextBaseline,
size?: number,
halo?: boolean,
): voidtextBox
Layout of a multi-line text box whose top-left is at.
function textBox(
g: Geometry,
at: Pt,
value: string,
size: number,
pad?: number,
): { font: string; lines: string[]; lh: number; left: number; top: number; width: number; height: number; pad: number; }