@octanejs/visx 0.1.0

package/src/annotation/components/EditableAnnotation.tsrx

@@ -0,0 +1,179 @@
+/* eslint-disable react/jsx-handler-names */
+import { useCallback, useRef } from 'octane';
+import type { SVGProps, ReactNode, MouseEvent, TouchEvent } from 'react';
+import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@octanejs/visx/drag';
+import { useDrag } from '@octanejs/visx/drag';
+import type { AnnotationContextType } from '../types';
+import Annotation from './Annotation.tsrx';
+
+export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+		/** Width of the possible drag canvas (e.g., SVG container). */
+		width: number;
+		/** Height of the possible drag canvas (e.g., SVG container). */
+		height: number;
+		/** Annotation children (Subject, Label, Connector) */
+		children: ReactNode;
+		/** Whether the Label position (dx, dy) is editable. */
+		canEditLabel?: boolean;
+		/** Whether the Subject position (x, y) is editable. */
+		canEditSubject?: boolean;
+		/** Optional circle props to set on the subject drag handle. */
+		subjectDragHandleProps?: SVGProps<SVGCircleElement>;
+		/** Optional circle props to set on the label drag handle. */
+		labelDragHandleProps?: SVGProps<SVGCircleElement>;
+		/** Callback invoked on drag start. */
+		onDragStart?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+		/** Callback invoked on drag move. */
+		onDragMove?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+		/** Callback invoked on drag end. */
+		onDragEnd?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+	};
+
+export type HandlerArgs = {
+	x: number;
+	y: number;
+	dx: number;
+	dy: number;
+	event: MouseEvent | TouchEvent;
+};
+
+const defaultDragHandleProps = {
+	r: 10,
+	fill: 'transparent',
+	stroke: '#777',
+	strokeDasharray: '4,2',
+	strokeWidth: 2,
+};
+
+export default function EditableAnnotation({
+	canEditLabel = true,
+	canEditSubject = true,
+	children,
+	dx: labelDx = 0,
+	dy: labelDy = 0,
+	height,
+	labelDragHandleProps,
+	onDragEnd,
+	onDragMove,
+	onDragStart,
+	subjectDragHandleProps,
+	width,
+	x: subjectX = 0,
+	y: subjectY = 0,
+}: EditableAnnotationProps) {
+	// chicken before the egg, we need these to reference drag state
+	// in drag callbacks which are defined before useDrag() state is available
+	const subjectDragRef = useRef<UseDrag | undefined>(undefined);
+	const labelDragRef = useRef<UseDrag | undefined>(undefined);
+
+	const handleDragStart = useCallback(({ event }: DragHandlerArgs) => {
+		if (onDragStart) {
+			onDragStart({
+				event,
+				x: subjectX + (subjectDragRef.current?.dx ?? 0),
+				y: subjectY + (subjectDragRef.current?.dy ?? 0),
+				dx: labelDx + (labelDragRef.current?.dx ?? 0),
+				dy: labelDy + (labelDragRef.current?.dy ?? 0),
+			});
+		}
+	}, [labelDx, labelDy, onDragStart, subjectX, subjectY]);
+
+	const handleDragMove = useCallback(({ event }: DragHandlerArgs) => {
+		if (onDragMove) {
+			onDragMove({
+				event,
+				x: subjectX + (subjectDragRef.current?.dx ?? 0),
+				y: subjectY + (subjectDragRef.current?.dy ?? 0),
+				dx: labelDx + (labelDragRef.current?.dx ?? 0),
+				dy: labelDy + (labelDragRef.current?.dy ?? 0),
+			});
+		}
+	}, [labelDx, labelDy, onDragMove, subjectX, subjectY]);
+
+	const handleDragEnd = useCallback(({ event }: DragHandlerArgs) => {
+		if (onDragEnd) {
+			onDragEnd({
+				event,
+				x: subjectX + (subjectDragRef.current?.dx ?? 0),
+				y: subjectY + (subjectDragRef.current?.dy ?? 0),
+				dx: labelDx + (labelDragRef.current?.dx ?? 0),
+				dy: labelDy + (labelDragRef.current?.dy ?? 0),
+			});
+		}
+	}, [labelDx, labelDy, onDragEnd, subjectX, subjectY]);
+
+	const subjectDrag = useDrag({
+		onDragStart: handleDragStart,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd,
+		x: subjectX,
+		y: subjectY,
+	});
+
+	const labelDrag = useDrag({
+		onDragStart: handleDragStart,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd,
+		x: labelDx,
+		y: labelDy,
+	});
+
+	// enable referencing these in the callbacks defined before useDrag is called
+	subjectDragRef.current = subjectDrag;
+	labelDragRef.current = labelDrag;
+
+	return <>
+		<Annotation
+			x={subjectX + subjectDrag.dx}
+			y={subjectY + subjectDrag.dy}
+			dx={labelDx + labelDrag.dx}
+			dy={labelDy + labelDrag.dy}
+		>{children}</Annotation>
+		{subjectDrag.isDragging &&
+			<rect
+				width={width}
+				height={height}
+				onMouseMove={subjectDrag.dragMove}
+				onMouseUp={subjectDrag.dragEnd}
+				fill="transparent"
+			/>}
+		{canEditSubject &&
+			<circle
+				cx={subjectX}
+				cy={subjectY}
+				transform={`translate(${subjectDrag.dx},${subjectDrag.dy})`}
+				onMouseMove={subjectDrag.dragMove}
+				onMouseUp={subjectDrag.dragEnd}
+				onMouseDown={subjectDrag.dragStart}
+				onTouchStart={subjectDrag.dragStart}
+				onTouchMove={subjectDrag.dragMove}
+				onTouchEnd={subjectDrag.dragEnd}
+				cursor={subjectDrag.isDragging ? 'grabbing' : 'grab'}
+				{...defaultDragHandleProps}
+				{...subjectDragHandleProps}
+			/>}
+		{labelDrag.isDragging &&
+			<rect
+				width={width}
+				height={height}
+				onMouseMove={labelDrag.dragMove}
+				onMouseUp={labelDrag.dragEnd}
+				fill="transparent"
+			/>}
+		{canEditLabel &&
+			<circle
+				cx={subjectX + subjectDrag.dx + labelDx}
+				cy={subjectY + subjectDrag.dy + labelDy}
+				transform={`translate(${labelDrag.dx},${labelDrag.dy})`}
+				onMouseMove={labelDrag.dragMove}
+				onMouseUp={labelDrag.dragEnd}
+				onMouseDown={labelDrag.dragStart}
+				onTouchStart={labelDrag.dragStart}
+				onTouchMove={labelDrag.dragMove}
+				onTouchEnd={labelDrag.dragEnd}
+				cursor={labelDrag.isDragging ? 'grabbing' : 'grab'}
+				{...defaultDragHandleProps}
+				{...labelDragHandleProps}
+			/>}
+	</>;
+}

package/src/annotation/components/EditableAnnotation.tsrx.d.ts

@@ -0,0 +1,33 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps, ReactNode, MouseEvent, TouchEvent } from 'react';
+import type { AnnotationContextType } from '../types';
+export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+    /** Width of the possible drag canvas (e.g., SVG container). */
+    width: number;
+    /** Height of the possible drag canvas (e.g., SVG container). */
+    height: number;
+    /** Annotation children (Subject, Label, Connector) */
+    children: ReactNode;
+    /** Whether the Label position (dx, dy) is editable. */
+    canEditLabel?: boolean;
+    /** Whether the Subject position (x, y) is editable. */
+    canEditSubject?: boolean;
+    /** Optional circle props to set on the subject drag handle. */
+    subjectDragHandleProps?: SVGProps<SVGCircleElement>;
+    /** Optional circle props to set on the label drag handle. */
+    labelDragHandleProps?: SVGProps<SVGCircleElement>;
+    /** Callback invoked on drag start. */
+    onDragStart?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+    /** Callback invoked on drag move. */
+    onDragMove?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+    /** Callback invoked on drag end. */
+    onDragEnd?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
+};
+export type HandlerArgs = {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    event: MouseEvent | TouchEvent;
+};
+export default function EditableAnnotation({ canEditLabel, canEditSubject, children, dx: labelDx, dy: labelDy, height, labelDragHandleProps, onDragEnd, onDragMove, onDragStart, subjectDragHandleProps, width, x: subjectX, y: subjectY, }: EditableAnnotationProps): import("react").JSX.Element;

package/src/annotation/components/HtmlLabel.tsrx

@@ -0,0 +1,93 @@
+import { useContext, useMemo } from 'octane';
+import type { ReactNode, CSSProperties } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+import AnchorLine from './LabelAnchorLine.tsrx';
+import type { LabelProps } from './Label.tsrx';
+
+const wrapperStyle = { display: 'inline-block' };
+
+export type HtmlLabelProps =
+	Pick<LabelProps, | 'anchorLineStroke'
+	| 'className'
+	| 'horizontalAnchor'
+	| 'resizeObserverPolyfill'
+	| 'showAnchorLine'
+	| 'verticalAnchor'
+	| 'x'
+	| 'y'> & {
+		/** Pass in a custom element as the label to style as you like. Renders inside a <foreignObject>, be aware that most non-browser SVG renderers will not render HTML <foreignObject>s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545.  */
+		children?: ReactNode;
+		/** Optional styles to apply to the HTML container. */
+		containerStyle?: CSSProperties;
+	};
+export default function HtmlLabel({
+	anchorLineStroke = '#222',
+	children,
+	className,
+	containerStyle,
+	horizontalAnchor: propsHorizontalAnchor,
+	showAnchorLine = true,
+	verticalAnchor: propsVerticalAnchor,
+	x: propsX,
+	y: propsY,
+}: HtmlLabelProps) {
+	const textualChildren =
+		typeof children === 'string' || typeof children === 'number' ? String(children) : '';
+	const styleWidth = Number.parseFloat(String(containerStyle?.width ?? ''));
+	const styleHeight = Number.parseFloat(String(containerStyle?.height ?? ''));
+	const width =
+		Number.isFinite(styleWidth)
+				? styleWidth
+				: textualChildren
+					? Math.max(1, textualChildren.length * 8)
+					: 100;
+	const height =
+		Number.isFinite(styleHeight) ? styleHeight : textualChildren ? 20 : 24;
+
+	// if props are provided, they take precedence over context
+	const { x = 0, y = 0, dx = 0, dy = 0 } = useContext(AnnotationContext);
+
+	// offset container position based on horizontal + vertical anchor
+	const horizontalAnchor =
+		propsHorizontalAnchor || (Math.abs(dx) < Math.abs(dy) ? 'middle' : dx > 0 ? 'start' : 'end');
+	const verticalAnchor =
+		propsVerticalAnchor || (Math.abs(dx) > Math.abs(dy) ? 'middle' : dy > 0 ? 'start' : 'end');
+
+	const containerCoords = useMemo(() => {
+		let adjustedX: number =
+			propsX == null ? x + dx : propsX;
+		let adjustedY: number =
+			propsY == null ? y + dy : propsY;
+
+		if (horizontalAnchor === 'middle') adjustedX -= width / 2;
+		if (horizontalAnchor === 'end') adjustedX -= width;
+		if (verticalAnchor === 'middle') adjustedY -= height / 2;
+		if (verticalAnchor === 'end') adjustedY -= height;
+
+		return { x: adjustedX, y: adjustedY };
+	}, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]);
+
+	return <Group
+		top={containerCoords.y}
+		left={containerCoords.x}
+		pointerEvents="none"
+		className={cx('visx-annotationlabel', className)}
+	>
+		<foreignObject width={width} height={height} overflow="visible">
+			<div
+				style={containerStyle ? { ...wrapperStyle, ...containerStyle } : wrapperStyle}
+			>{children}</div>
+		</foreignObject>
+		{showAnchorLine &&
+			<AnchorLine
+				anchorLineOrientation={Math.abs(dx) > Math.abs(dy) ? 'vertical' : 'horizontal'}
+				anchorLineStroke={anchorLineStroke}
+				verticalAnchor={verticalAnchor}
+				horizontalAnchor={horizontalAnchor}
+				width={width}
+				height={height}
+			/>}
+	</Group>;
+}

package/src/annotation/components/HtmlLabel.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, CSSProperties } from 'react';
+import type { LabelProps } from './Label.tsrx';
+export type HtmlLabelProps = Pick<LabelProps, 'anchorLineStroke' | 'className' | 'horizontalAnchor' | 'resizeObserverPolyfill' | 'showAnchorLine' | 'verticalAnchor' | 'x' | 'y'> & {
+    /** Pass in a custom element as the label to style as you like. Renders inside a <foreignObject>, be aware that most non-browser SVG renderers will not render HTML <foreignObject>s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545.  */
+    children?: ReactNode;
+    /** Optional styles to apply to the HTML container. */
+    containerStyle?: CSSProperties;
+};
+export default function HtmlLabel({ anchorLineStroke, children, className, containerStyle, horizontalAnchor: propsHorizontalAnchor, showAnchorLine, verticalAnchor: propsVerticalAnchor, x: propsX, y: propsY, }: HtmlLabelProps): import("react").JSX.Element;

package/src/annotation/components/Label.tsrx

@@ -0,0 +1,249 @@
+import { useContext, useMemo } from 'octane';
+import type { SVGProps, CSSProperties } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { TextProps } from '@octanejs/visx/text';
+import { Text, useText } from '@octanejs/visx/text';
+import type { Options as UseMeasureOptions } from '../../internal/useMeasure.tsrx';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+import AnchorLine from './LabelAnchorLine.tsrx';
+
+export type LabelProps = {
+	/** Stroke color of anchor line. */
+	anchorLineStroke?: string;
+	/** Background color of label. */
+	backgroundFill?: string;
+	/** Padding of text from background. */
+	backgroundPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+	/** Additional props to be passed to background SVGRectElement. */
+	backgroundProps?: SVGProps<SVGRectElement>;
+	/** Optional className to apply to container in addition to 'visx-annotation-label'. */
+	className?: string;
+	/** Color of title and subtitle text. */
+	fontColor?: string;
+	/** Whether the label is horizontally anchored to the start, middle, or end of its x position. */
+	horizontalAnchor?: TextProps['textAnchor'];
+	/** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
+	resizeObserverPolyfill?: UseMeasureOptions['polyfill'];
+	/** Whether to render a line indicating label text anchor. */
+	showAnchorLine?: boolean;
+	/** Whether to render a label background. */
+	showBackground?: boolean;
+	/** Optional subtitle. */
+	subtitle?: string;
+	/** Optional title font size. */
+	subtitleFontSize?: TextProps['fontSize'];
+	/** Optional title font weight. */
+	subtitleFontWeight?: TextProps['fontWeight'];
+	/** The vertical offset of the subtitle from the title. */
+	subtitleDy?: number;
+	/** Optional subtitle Text props (to override color, etc.). */
+	subtitleProps?: Partial<TextProps>;
+	/** Optional title. */
+	title?: string;
+	/** Optional title font size. */
+	titleFontSize?: TextProps['fontSize'];
+	/** Optional title font weight. */
+	titleFontWeight?: TextProps['fontWeight'];
+	/** Optional title Text props (to override color, etc.). */
+	titleProps?: Partial<TextProps>;
+	/** Whether the label is vertically anchored to the start, middle, or end of its y position. */
+	verticalAnchor?: TextProps['verticalAnchor'];
+	/** Width of annotation, including background, for text wrapping. */
+	width?: number;
+	/** Max width of annotation, including background, for text wrapping. */
+	maxWidth?: number;
+	/** Left offset of entire AnnotationLabel, if not specified uses x + dx from Annotation. */
+	x?: number;
+	/** Top offset of entire AnnotationLabel, if not specified uses y + dy from Annotation. */
+	y?: number;
+};
+
+const DEFAULT_PADDING = { top: 12, right: 12, bottom: 12, left: 12 };
+
+function getCompletePadding(padding: LabelProps['backgroundPadding']) {
+	if (typeof padding === 'undefined') return DEFAULT_PADDING;
+	if (typeof padding === 'number') {
+		return { top: padding, right: padding, bottom: padding, left: padding };
+	}
+	return { ...DEFAULT_PADDING, ...padding };
+}
+
+export default function Label({
+	anchorLineStroke = '#222',
+	backgroundFill = '#eaeaea',
+	backgroundPadding,
+	backgroundProps,
+	className,
+	fontColor = '#222',
+	horizontalAnchor: propsHorizontalAnchor,
+	showAnchorLine = true,
+	showBackground = true,
+	subtitle,
+	subtitleDy = 4,
+	subtitleFontSize = 12,
+	subtitleFontWeight = 200,
+	subtitleProps,
+	title,
+	titleFontSize = 16,
+	titleFontWeight = 600,
+	titleProps,
+	verticalAnchor: propsVerticalAnchor,
+	width: propWidth,
+	maxWidth = 125,
+	x: propsX,
+	y: propsY,
+}: LabelProps) {
+	const padding = useMemo(() => getCompletePadding(backgroundPadding), [backgroundPadding]);
+
+	// if props are provided, they take precedence over context
+	const { x = 0, y = 0, dx = 0, dy = 0 } = useContext(AnnotationContext);
+	const { wordsByLines: titleWordsByLine } = useText({
+		children: title,
+		verticalAnchor: 'start',
+		capHeight: titleFontSize,
+		fontSize: titleFontSize,
+		fontWeight: titleFontWeight,
+		fontFamily: titleProps?.fontFamily,
+		width: maxWidth,
+		...titleProps,
+	});
+
+	const { wordsByLines: subtitleWordsByLine } = useText({
+		children: subtitle,
+		verticalAnchor: 'start',
+		capHeight: subtitleFontSize,
+		fontSize: subtitleFontSize,
+		fontWeight: subtitleFontWeight,
+		fontFamily: subtitleProps?.fontFamily,
+		width: maxWidth,
+		...subtitleProps,
+	});
+
+	const fallbackTitleHeight = title
+		? Math.max(1, titleWordsByLine.length) * titleFontSize * 1.1
+		: 0;
+	const fallbackSubtitleHeight = subtitle
+		? Math.max(1, subtitleWordsByLine.length) * subtitleFontSize * 1.1
+		: 0;
+	// Keep annotation geometry byte-stable across SSR and hydration. Browser font
+	// measurement would move the label after adoption; useText's deterministic
+	// metrics are already the source for wrapping and width.
+	const titleHeight = fallbackTitleHeight;
+	const subtitleHeight = fallbackSubtitleHeight;
+	const height = Math.floor(padding.top + padding.bottom + titleHeight + subtitleHeight);
+
+	const titleMeasuredWidth = titleWordsByLine.reduce(
+		(maxTitleWidth, line) => Math.max(maxTitleWidth, line.width ?? 0),
+		0,
+	);
+
+	const subtitleMeasuredWidth = subtitleWordsByLine.reduce(
+		(maxSubtitleWidth, line) => Math.max(maxSubtitleWidth, line.width ?? 0),
+		0,
+	);
+
+	const textMeasuredWidth = Math.ceil(
+		Math.min(maxWidth, Math.max(titleMeasuredWidth, subtitleMeasuredWidth)),
+	);
+	const measuredWidth = padding.right + padding.left + textMeasuredWidth;
+	const width = propWidth ?? measuredWidth;
+	const innerWidth = width - padding.left - padding.right;
+
+	// offset container position based on horizontal + vertical anchor
+	const horizontalAnchor =
+		propsHorizontalAnchor || (Math.abs(dx) < Math.abs(dy) ? 'middle' : dx > 0 ? 'start' : 'end');
+	const verticalAnchor =
+		propsVerticalAnchor || (Math.abs(dx) > Math.abs(dy) ? 'middle' : dy > 0 ? 'start' : 'end');
+
+	const containerCoords = useMemo(() => {
+		let adjustedX: number =
+			propsX == null ? x + dx : propsX;
+		let adjustedY: number =
+			propsY == null ? y + dy : propsY;
+
+		if (horizontalAnchor === 'middle') adjustedX -= width / 2;
+		if (horizontalAnchor === 'end') adjustedX -= width;
+		if (verticalAnchor === 'middle') adjustedY -= height / 2;
+		if (verticalAnchor === 'end') adjustedY -= height;
+
+		return { x: adjustedX, y: adjustedY };
+	}, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]);
+
+	const titleFontFamily = titleProps?.fontFamily;
+	const titleStyle = useMemo(
+		() => ({
+			fontSize: titleFontSize,
+			fontWeight: titleFontWeight,
+			fontFamily: titleFontFamily,
+		}),
+		[titleFontSize, titleFontWeight, titleFontFamily],
+	) as CSSProperties;
+
+	const subtitleFontFamily = subtitleProps?.fontFamily;
+	const subtitleStyle = useMemo(
+		() => ({
+			fontSize: subtitleFontSize,
+			fontWeight: subtitleFontWeight,
+			fontFamily: subtitleFontFamily,
+		}),
+		[subtitleFontSize, subtitleFontWeight, subtitleFontFamily],
+	) as CSSProperties;
+
+	return !title && !subtitle
+		? null
+		: <Group
+				top={containerCoords.y}
+				left={containerCoords.x}
+				pointerEvents="none"
+				className={cx('visx-annotationlabel', className)}
+				opacity={1}
+			>
+				{showBackground &&
+					<rect
+						className="visx-annotationlabel-background"
+						fill={backgroundFill}
+						x={0}
+						y={0}
+						width={width}
+						height={height}
+						{...backgroundProps}
+					/>}
+				{showAnchorLine &&
+					<AnchorLine
+						anchorLineOrientation={Math.abs(dx) > Math.abs(dy) ? 'vertical' : 'horizontal'}
+						anchorLineStroke={anchorLineStroke}
+						verticalAnchor={verticalAnchor}
+						horizontalAnchor={horizontalAnchor}
+						width={width}
+						height={height}
+					/>}
+				{title &&
+					<Text
+						fill={fontColor}
+						verticalAnchor="start"
+						x={padding.left + (titleProps?.textAnchor === 'middle' ? innerWidth / 2 : 0)}
+						y={padding.top}
+						width={innerWidth}
+						capHeight={titleFontSize}
+						// capHeight should match fontSize, used for first line line height
+						style={titleStyle}
+						// used for size calculation
+						{...titleProps}
+					>{title}</Text>}
+				{subtitle &&
+					<Text
+						fill={fontColor}
+						verticalAnchor="start"
+						x={padding.left + (subtitleProps?.textAnchor === 'middle' ? innerWidth / 2 : 0)}
+						y={padding.top + titleHeight}
+						dy={title ? subtitleDy : 0}
+						width={innerWidth}
+						capHeight={subtitleFontSize}
+						// capHeight should match fontSize, used for first line line height
+						style={subtitleStyle}
+						// used for size calculation
+						{...subtitleProps}
+					>{subtitle}</Text>}
+			</Group>;
+}

package/src/annotation/components/Label.tsrx.d.ts

@@ -0,0 +1,60 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { TextProps } from '@octanejs/visx/text';
+import type { Options as UseMeasureOptions } from '../../internal/useMeasure.tsrx';
+export type LabelProps = {
+    /** Stroke color of anchor line. */
+    anchorLineStroke?: string;
+    /** Background color of label. */
+    backgroundFill?: string;
+    /** Padding of text from background. */
+    backgroundPadding?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** Additional props to be passed to background SVGRectElement. */
+    backgroundProps?: SVGProps<SVGRectElement>;
+    /** Optional className to apply to container in addition to 'visx-annotation-label'. */
+    className?: string;
+    /** Color of title and subtitle text. */
+    fontColor?: string;
+    /** Whether the label is horizontally anchored to the start, middle, or end of its x position. */
+    horizontalAnchor?: TextProps['textAnchor'];
+    /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
+    resizeObserverPolyfill?: UseMeasureOptions['polyfill'];
+    /** Whether to render a line indicating label text anchor. */
+    showAnchorLine?: boolean;
+    /** Whether to render a label background. */
+    showBackground?: boolean;
+    /** Optional subtitle. */
+    subtitle?: string;
+    /** Optional title font size. */
+    subtitleFontSize?: TextProps['fontSize'];
+    /** Optional title font weight. */
+    subtitleFontWeight?: TextProps['fontWeight'];
+    /** The vertical offset of the subtitle from the title. */
+    subtitleDy?: number;
+    /** Optional subtitle Text props (to override color, etc.). */
+    subtitleProps?: Partial<TextProps>;
+    /** Optional title. */
+    title?: string;
+    /** Optional title font size. */
+    titleFontSize?: TextProps['fontSize'];
+    /** Optional title font weight. */
+    titleFontWeight?: TextProps['fontWeight'];
+    /** Optional title Text props (to override color, etc.). */
+    titleProps?: Partial<TextProps>;
+    /** Whether the label is vertically anchored to the start, middle, or end of its y position. */
+    verticalAnchor?: TextProps['verticalAnchor'];
+    /** Width of annotation, including background, for text wrapping. */
+    width?: number;
+    /** Max width of annotation, including background, for text wrapping. */
+    maxWidth?: number;
+    /** Left offset of entire AnnotationLabel, if not specified uses x + dx from Annotation. */
+    x?: number;
+    /** Top offset of entire AnnotationLabel, if not specified uses y + dy from Annotation. */
+    y?: number;
+};
+export default function Label({ anchorLineStroke, backgroundFill, backgroundPadding, backgroundProps, className, fontColor, horizontalAnchor: propsHorizontalAnchor, showAnchorLine, showBackground, subtitle, subtitleDy, subtitleFontSize, subtitleFontWeight, subtitleProps, title, titleFontSize, titleFontWeight, titleProps, verticalAnchor: propsVerticalAnchor, width: propWidth, maxWidth, x: propsX, y: propsY, }: LabelProps): import("react").JSX.Element | null;

package/src/annotation/components/LabelAnchorLine.tsrx

@@ -0,0 +1,32 @@
+import type { TextProps } from '@octanejs/visx/text';
+
+interface AnchorLineProps {
+	anchorLineOrientation: 'horizontal' | 'vertical';
+	verticalAnchor: TextProps['verticalAnchor'];
+	horizontalAnchor: TextProps['textAnchor'];
+	anchorLineStroke: string;
+	width: number;
+	height: number;
+}
+
+export default function AnchorLine({
+	anchorLineOrientation,
+	anchorLineStroke,
+	verticalAnchor,
+	horizontalAnchor,
+	width,
+	height,
+}: AnchorLineProps) {
+	const backgroundOutline = { stroke: anchorLineStroke, strokeWidth: 2 };
+
+	return <>
+		{anchorLineOrientation === 'horizontal' && verticalAnchor === 'start' &&
+			<line {...backgroundOutline} x1={0} x2={width} y1={0} y2={0} />}
+		{anchorLineOrientation === 'horizontal' && verticalAnchor === 'end' &&
+			<line {...backgroundOutline} x1={0} x2={width} y1={height} y2={height} />}
+		{anchorLineOrientation === 'vertical' && horizontalAnchor === 'start' &&
+			<line {...backgroundOutline} x1={0} x2={0} y1={0} y2={height} />}
+		{anchorLineOrientation === 'vertical' && horizontalAnchor === 'end' &&
+			<line {...backgroundOutline} x1={width} x2={width} y1={0} y2={height} />}
+	</>;
+}

package/src/annotation/components/LabelAnchorLine.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { TextProps } from '@octanejs/visx/text';
+interface AnchorLineProps {
+    anchorLineOrientation: 'horizontal' | 'vertical';
+    verticalAnchor: TextProps['verticalAnchor'];
+    horizontalAnchor: TextProps['textAnchor'];
+    anchorLineStroke: string;
+    width: number;
+    height: number;
+}
+export default function AnchorLine({ anchorLineOrientation, anchorLineStroke, verticalAnchor, horizontalAnchor, width, height, }: AnchorLineProps): import("react").JSX.Element;
+export {};