@octanejs/visx 0.1.0

package/src/drag/useDrag.tsrx

@@ -0,0 +1,214 @@
+import type { MouseEvent, TouchEvent, PointerEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'octane';
+import { Point, subtractPoints, sumPoints } from '@octanejs/visx/point';
+import { localPoint } from '@octanejs/visx/event';
+import useStateWithCallback from './util/useStateWithCallback.tsrx';
+import restrictPoint from './util/restrictPoint';
+import useSamplesAlongPath from './util/useSamplesAlongPath.tsrx';
+
+export type MouseTouchOrPointerEvent = MouseEvent | TouchEvent | PointerEvent;
+
+export type HandlerArgs = DragState & {
+		/** Drag event. */
+		event: MouseTouchOrPointerEvent;
+	};
+
+export type UseDragOptions = {
+	/** Whether to reset drag state upon the start of a new drag. */
+	resetOnStart?: boolean;
+	/** Optional callback invoked upon drag end. */
+	onDragEnd?: (args: HandlerArgs) => void;
+	/** Optional callback invoked upon drag movement. */
+	onDragMove?: (args: HandlerArgs) => void;
+	/** Optional callback invoked upon drag start. */
+	onDragStart?: (args: HandlerArgs) => void;
+	/** Optionally set the initial drag x, or override the current drag x. */
+	x?: number;
+	/** Optionally set the initial drag y, or override the current drag y. */
+	y?: number;
+	/** Optionally set the initial drag dx, or override the current drag dx. */
+	dx?: number;
+	/** Optionally set the initial drag dy, or override the current drag dy. */
+	dy?: number;
+	/** If defined, parent controls dragging state.  */
+	isDragging?: boolean;
+	/** Snap element being dragged to middle of pointer. */
+	snapToPointer?: boolean;
+	/** Options for limiting dragging in the x and y plane. */
+	restrict?: {
+		xMin?: number;
+		xMax?: number;
+		yMin?: number;
+		yMax?: number;
+	};
+	/** Limit drag to an SVG path. Overrides `restrict` constraints. */
+	restrictToPath?: SVGGeometryElement | null;
+};
+
+export type DragState = {
+	/** x position of drag at drag start time, reset to 0 if `resetOnStart=true`. */
+	x?: number;
+	/** y position of drag at drag start time, reset to 0 if `resetOnStart=true`. */
+	y?: number;
+	/** Change in x position since drag start, reset to 0 on drag start if `resetOnStart=true`. */
+	dx: number;
+	/** Change in y position since drag start, reset to 0 on drag start if `resetOnStart=true`. */
+	dy: number;
+	/** Whether a drag is currently in progress. */
+	isDragging: boolean;
+};
+
+export type UseDrag = DragState & {
+		/** Callback to be be invoked on drag end. */
+		dragEnd: (event: MouseTouchOrPointerEvent) => void;
+		/** Callback to be be invoked on drag move. */
+		dragMove: (event: MouseTouchOrPointerEvent) => void;
+		/** Callback to be be invoked on drag start. */
+		dragStart: (event: MouseTouchOrPointerEvent) => void;
+	};
+
+/** Hook for dragging, returns a `UseDrag` object. */
+export default function useDrag(
+	{
+		resetOnStart = false,
+		snapToPointer = true,
+		onDragEnd,
+		onDragMove,
+		onDragStart,
+		x,
+		y,
+		dx,
+		dy,
+		isDragging,
+		restrict = {},
+		restrictToPath,
+	}: UseDragOptions | undefined = {},
+): UseDrag {
+	// use ref to detect prop changes
+	const positionPropsRef = useRef({ x, y, dx, dy });
+
+	const [dragState, setDragStateWithCallback] = useStateWithCallback<DragState>({
+		x,
+		y,
+		dx: dx ?? 0,
+		dy: dy ?? 0,
+		isDragging: false,
+	});
+
+	// Track distance between pointer on dragStart and position of element being dragged
+	const [dragStartPointerOffset, setDragStartPointerOffset] = useState<Point>(
+		new Point({ x: 0, y: 0 }),
+	);
+
+	// if prop position changes, update state
+	useEffect(() => {
+		if (
+			positionPropsRef.current.x !== x || positionPropsRef.current.y !== y ||
+				positionPropsRef.current.dx !== dx ||
+				positionPropsRef.current.dy !== dy
+		) {
+			positionPropsRef.current = { x, y, dx, dy };
+			setDragStateWithCallback(
+				(currState) => ({
+					...currState,
+					x,
+					y,
+					dx: dx ?? 0,
+					dy: dy ?? 0,
+				}),
+			);
+		}
+	});
+
+	useEffect(() => {
+		if (isDragging !== undefined && dragState.isDragging !== isDragging) {
+			setDragStateWithCallback((currState) => ({ ...currState, isDragging }));
+		}
+	}, [dragState.isDragging, isDragging, setDragStateWithCallback]);
+
+	const restrictToPathSamples = useSamplesAlongPath(restrictToPath);
+
+	const handleDragStart = useCallback((event: MouseTouchOrPointerEvent) => {
+		event.persist?.();
+
+		setDragStateWithCallback((currState) => {
+			// eslint-disable-next-line no-shadow
+			const { x = 0, y = 0, dx, dy } = currState;
+			const currentPoint = new Point({
+				x: (x || 0) + dx,
+				y: (y || 0) + dy,
+			});
+			const eventPoint = localPoint(event) || new Point({ x: 0, y: 0 });
+			const point = snapToPointer ? eventPoint : currentPoint;
+			const dragPoint = restrictPoint(point, restrictToPathSamples, restrict);
+
+			setDragStartPointerOffset(subtractPoints(currentPoint, eventPoint));
+
+			return {
+				isDragging: true,
+				dx: resetOnStart ? 0 : currState.dx,
+				dy: resetOnStart ? 0 : currState.dy,
+				x: resetOnStart ? dragPoint.x : dragPoint.x - currState.dx,
+				y: resetOnStart ? dragPoint.y : dragPoint.y - currState.dy,
+			};
+		}, onDragStart &&
+			((currState) => {
+				onDragStart({ ...currState, event });
+			}));
+	}, [
+		onDragStart,
+		resetOnStart,
+		restrict,
+		restrictToPathSamples,
+		setDragStateWithCallback,
+		snapToPointer,
+	]);
+
+	const handleDragMove = useCallback((event: MouseTouchOrPointerEvent) => {
+		event.persist?.();
+
+		setDragStateWithCallback((currState) => {
+			if (!currState.isDragging) return currState;
+			// eslint-disable-next-line no-shadow
+			const { x = 0, y = 0 } = currState;
+			const pointerPoint = localPoint(event) || new Point({ x: 0, y: 0 });
+			const point =
+				snapToPointer ? pointerPoint : sumPoints(pointerPoint, dragStartPointerOffset);
+			const dragPoint = restrictPoint(point, restrictToPathSamples, restrict);
+			return {
+				...currState,
+				dx: dragPoint.x - x,
+				dy: dragPoint.y - y,
+			};
+		}, onDragMove &&
+			((currState) => {
+				if (currState.isDragging) onDragMove({ ...currState, event });
+			}));
+	}, [
+		setDragStateWithCallback,
+		onDragMove,
+		snapToPointer,
+		dragStartPointerOffset,
+		restrictToPathSamples,
+		restrict,
+	]);
+
+	const handleDragEnd = useCallback((event: MouseTouchOrPointerEvent) => {
+		event.persist?.();
+
+		setDragStateWithCallback(
+			(currState) => ({ ...currState, isDragging: false }),
+			onDragEnd &&
+				((currState) => {
+					onDragEnd({ ...currState, event });
+				}),
+		);
+	}, [onDragEnd, setDragStateWithCallback]);
+
+	return {
+		...dragState,
+		dragEnd: handleDragEnd,
+		dragMove: handleDragMove,
+		dragStart: handleDragStart,
+	};
+}

package/src/drag/useDrag.tsrx.d.ts

@@ -0,0 +1,60 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { MouseEvent, TouchEvent, PointerEvent } from 'react';
+export type MouseTouchOrPointerEvent = MouseEvent | TouchEvent | PointerEvent;
+export type HandlerArgs = DragState & {
+    /** Drag event. */
+    event: MouseTouchOrPointerEvent;
+};
+export type UseDragOptions = {
+    /** Whether to reset drag state upon the start of a new drag. */
+    resetOnStart?: boolean;
+    /** Optional callback invoked upon drag end. */
+    onDragEnd?: (args: HandlerArgs) => void;
+    /** Optional callback invoked upon drag movement. */
+    onDragMove?: (args: HandlerArgs) => void;
+    /** Optional callback invoked upon drag start. */
+    onDragStart?: (args: HandlerArgs) => void;
+    /** Optionally set the initial drag x, or override the current drag x. */
+    x?: number;
+    /** Optionally set the initial drag y, or override the current drag y. */
+    y?: number;
+    /** Optionally set the initial drag dx, or override the current drag dx. */
+    dx?: number;
+    /** Optionally set the initial drag dy, or override the current drag dy. */
+    dy?: number;
+    /** If defined, parent controls dragging state.  */
+    isDragging?: boolean;
+    /** Snap element being dragged to middle of pointer. */
+    snapToPointer?: boolean;
+    /** Options for limiting dragging in the x and y plane. */
+    restrict?: {
+        xMin?: number;
+        xMax?: number;
+        yMin?: number;
+        yMax?: number;
+    };
+    /** Limit drag to an SVG path. Overrides `restrict` constraints. */
+    restrictToPath?: SVGGeometryElement | null;
+};
+export type DragState = {
+    /** x position of drag at drag start time, reset to 0 if `resetOnStart=true`. */
+    x?: number;
+    /** y position of drag at drag start time, reset to 0 if `resetOnStart=true`. */
+    y?: number;
+    /** Change in x position since drag start, reset to 0 on drag start if `resetOnStart=true`. */
+    dx: number;
+    /** Change in y position since drag start, reset to 0 on drag start if `resetOnStart=true`. */
+    dy: number;
+    /** Whether a drag is currently in progress. */
+    isDragging: boolean;
+};
+export type UseDrag = DragState & {
+    /** Callback to be be invoked on drag end. */
+    dragEnd: (event: MouseTouchOrPointerEvent) => void;
+    /** Callback to be be invoked on drag move. */
+    dragMove: (event: MouseTouchOrPointerEvent) => void;
+    /** Callback to be be invoked on drag start. */
+    dragStart: (event: MouseTouchOrPointerEvent) => void;
+};
+/** Hook for dragging, returns a `UseDrag` object. */
+export default function useDrag({ resetOnStart, snapToPointer, onDragEnd, onDragMove, onDragStart, x, y, dx, dy, isDragging, restrict, restrictToPath, }?: UseDragOptions | undefined): UseDrag;

package/src/drag/util/clampNumber.ts

@@ -0,0 +1,4 @@
+/** Clamps number within the inclusive lower and upper bounds. */
+export default function clampNumber(number: number, lower: number, upper: number) {
+	return Math.min(Math.max(number, lower), upper);
+}

package/src/drag/util/getClosestPoint.ts

@@ -0,0 +1,13 @@
+/** Gets closest point from list of points */
+export default function getClosestPoint(point: { x: number; y: number }, samples: DOMPoint[]) {
+	let closestPoint = point;
+	let minDistance = Infinity;
+	for (const sample of samples) {
+		const distance = Math.sqrt((sample.x - point.x) ** 2 + (sample.y - point.y) ** 2);
+		if (distance < minDistance) {
+			minDistance = distance;
+			closestPoint = { x: sample.x, y: sample.y };
+		}
+	}
+	return closestPoint;
+}

package/src/drag/util/raise.ts

@@ -0,0 +1,8 @@
+/** Given at an array of items, moves the item at the specified index to the end of the array. */
+export default function raise<T>(items: T[], raiseIndex: number) {
+	const array = [...items];
+	const lastIndex = array.length - 1;
+	const [raiseItem] = array.splice(raiseIndex, 1);
+	array.splice(lastIndex, 0, raiseItem);
+	return array;
+}

package/src/drag/util/restrictPoint.ts

@@ -0,0 +1,18 @@
+import type { UseDragOptions } from '../useDrag.tsrx';
+import clampNumber from './clampNumber';
+import getClosestPoint from './getClosestPoint';
+
+/** Restrict a point to an area, or samples along a path. */
+export default function restrictPoint(
+	point: { x: number; y: number },
+	samples: DOMPoint[],
+	restrict: UseDragOptions['restrict'] = {},
+) {
+	if (samples.length > 0) {
+		return getClosestPoint(point, samples);
+	}
+	return {
+		x: clampNumber(point.x, restrict.xMin ?? -Infinity, restrict.xMax ?? Infinity),
+		y: clampNumber(point.y, restrict.yMin ?? -Infinity, restrict.yMax ?? Infinity),
+	};
+}

package/src/drag/util/useSamplesAlongPath.tsrx

@@ -0,0 +1,26 @@
+import { useMemo } from 'octane';
+
+function getSamples(restrictToPath: SVGGeometryElement, transform?: DOMMatrix, precision = 1) {
+	if (!restrictToPath) return [];
+	const samples = [];
+	const pathLength = restrictToPath.getTotalLength();
+	for (let sampleLength = 0; sampleLength <= pathLength; sampleLength += precision) {
+		const sample = restrictToPath.getPointAtLength(sampleLength);
+		const transformedSample = sample.matrixTransform(transform);
+		samples.push(transformedSample);
+	}
+	return samples;
+}
+
+/** Return samples along a path, relative to the parent SVG  */
+export default function useSamplesAlongPath(restrictToPath?: SVGGeometryElement | null) {
+	const samples = useMemo(() => {
+		if (!restrictToPath) return [];
+		const transform = restrictToPath.getCTM() || new DOMMatrix();
+		return getSamples(restrictToPath, transform);
+		// The path can transform without triggering a re-render,
+		// so we need to update the samples whenever the length changes.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [restrictToPath?.getTotalLength()]);
+	return samples;
+}

package/src/drag/util/useSamplesAlongPath.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+/** Return samples along a path, relative to the parent SVG  */
+export default function useSamplesAlongPath(restrictToPath?: SVGGeometryElement | null): never[];

package/src/drag/util/useStateWithCallback.tsrx

@@ -0,0 +1,26 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'octane';
+
+type SetStateWithCallback<State> =
+	(nextState: State | ((currState: State) => State), callback?: (currState: State) => void) => void;
+
+/** A hook that exposes a setState(state, callback) API similar to a component class. */
+export default function useStateWithCallback<State>(initialState: State): [State, SetStateWithCallback<State>] {
+	const [state, setState] = useState(initialState);
+	const callbackRef = useRef<null | ((s: State) => void)>(null);
+
+	const setStateCallback = useCallback<SetStateWithCallback<State>>((nextState, callback) => {
+		callbackRef.current = callback || null;
+		setState(nextState);
+	}, [setState]);
+
+	// if we use useEffect, some callback invocations are skipped
+	useLayoutEffect(() => {
+		// `null` on initial render, so we only execute callback on state *updates*
+		if (callbackRef.current) {
+			callbackRef.current(state);
+			callbackRef.current = null; // reset callback after execution
+		}
+	}, [state]);
+
+	return [state, setStateCallback];
+}

package/src/drag/util/useStateWithCallback.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+type SetStateWithCallback<State> = (nextState: State | ((currState: State) => State), callback?: (currState: State) => void) => void;
+/** A hook that exposes a setState(state, callback) API similar to a component class. */
+export default function useStateWithCallback<State>(initialState: State): [State, SetStateWithCallback<State>];
+export {};

package/src/event/getXAndYFromEvent.ts

@@ -0,0 +1,36 @@
+import type { EventType } from './types';
+import { isMouseEvent, isTouchEvent } from './typeGuards';
+
+const DEFAULT_POINT = { x: 0, y: 0 };
+
+export default function getXAndYFromEvent(event?: EventType) {
+	if (!event) return { ...DEFAULT_POINT };
+
+	if (isTouchEvent(event)) {
+		return event.changedTouches.length > 0
+			? {
+					x: event.changedTouches[0].clientX,
+					y: event.changedTouches[0].clientY,
+				}
+			: { ...DEFAULT_POINT };
+	}
+
+	if (isMouseEvent(event)) {
+		return {
+			x: event.clientX,
+			y: event.clientY,
+		};
+	}
+
+	// for focus events try to extract the center position of the target element
+	const target = event?.target;
+	const boundingClientRect =
+		target && 'getBoundingClientRect' in target ? target.getBoundingClientRect() : null;
+
+	if (!boundingClientRect) return { ...DEFAULT_POINT };
+
+	return {
+		x: boundingClientRect.x + boundingClientRect.width / 2,
+		y: boundingClientRect.y + boundingClientRect.height / 2,
+	};
+}

package/src/event/index.ts

@@ -0,0 +1,3 @@
+// @octanejs/visx/event
+export { default as localPoint } from './localPoint';
+export { default as touchPoint } from './touchPoint';

package/src/event/localPoint.ts

@@ -0,0 +1,18 @@
+import localPointGeneric from './localPointGeneric';
+import type { EventType } from './types';
+import { isElement, isEvent } from './typeGuards';
+
+/** Handles two signatures for backwards compatibility. */
+export default function localPoint(nodeOrEvent: Element | EventType, maybeEvent?: EventType) {
+	// localPoint(node, event)
+	if (isElement(nodeOrEvent) && maybeEvent) {
+		return localPointGeneric(nodeOrEvent, maybeEvent);
+	}
+	// localPoint(event)
+	if (isEvent(nodeOrEvent)) {
+		const event = nodeOrEvent;
+		const node = event.target as Element;
+		if (node) return localPointGeneric(node, event);
+	}
+	return null;
+}

package/src/event/localPointGeneric.ts

@@ -0,0 +1,34 @@
+import { Point } from '@octanejs/visx/point';
+import type { EventType } from './types';
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement } from './typeGuards';
+import getXAndYFromEvent from './getXAndYFromEvent';
+
+export default function localPoint(node: Element, event: EventType) {
+	if (!node || !event) return null;
+
+	const coords = getXAndYFromEvent(event);
+
+	// find top-most SVG
+	const svg = isSVGElement(node) ? node.ownerSVGElement : node;
+	const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
+
+	if (isSVGSVGElement(svg) && screenCTM) {
+		let point = svg.createSVGPoint();
+		point.x = coords.x;
+		point.y = coords.y;
+		point = point.matrixTransform(screenCTM.inverse());
+
+		return new Point({
+			x: point.x,
+			y: point.y,
+		});
+	}
+
+	// fall back to bounding box
+	const rect = node.getBoundingClientRect();
+
+	return new Point({
+		x: coords.x - rect.left - node.clientLeft,
+		y: coords.y - rect.top - node.clientTop,
+	});
+}

package/src/event/touchPoint.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './localPointGeneric';

package/src/event/typeGuards.ts

@@ -0,0 +1,37 @@
+import type { EventType } from './types';
+
+export function isElement(elem?: Element | EventType): elem is Element {
+	return !!elem && elem instanceof Element;
+}
+
+// functional definition of isSVGElement. Note that SVGSVGElements are HTMLElements
+export function isSVGElement(elem?: Element): elem is SVGElement {
+	return !!elem && (elem instanceof SVGElement || 'ownerSVGElement' in elem);
+}
+
+// functional definition of SVGGElement
+export function isSVGSVGElement(elem?: Element | null): elem is SVGSVGElement {
+	return !!elem && 'createSVGPoint' in elem;
+}
+
+export function isSVGGraphicsElement(elem?: Element | null): elem is SVGGraphicsElement {
+	return !!elem && 'getScreenCTM' in elem;
+}
+
+// functional definition of TouchEvent
+export function isTouchEvent(event?: EventType): event is TouchEvent {
+	return !!event && 'changedTouches' in event;
+}
+
+// functional definition of MouseEvent
+export function isMouseEvent(event?: EventType): event is MouseEvent {
+	return !!event && 'clientX' in event;
+}
+
+// functional definition of event
+export function isEvent(event?: EventType | Element): event is EventType {
+	return (
+		!!event &&
+		(event instanceof Event || ('nativeEvent' in event && event.nativeEvent instanceof Event))
+	);
+}

package/src/event/types.ts

@@ -0,0 +1,13 @@
+import type {
+	FocusEvent as ReactFocusEvent,
+	MouseEvent as ReactMouseEvent,
+	TouchEvent as ReactTouchEvent,
+} from 'react';
+
+export type EventType =
+	| MouseEvent
+	| TouchEvent
+	| FocusEvent
+	| ReactFocusEvent
+	| ReactMouseEvent
+	| ReactTouchEvent;

package/src/external.d.ts

@@ -0,0 +1,3 @@
+declare module 'reduce-css-calc' {
+	export default function reduceCssCalc(expression: string): string;
+}

package/src/geo/graticule/Graticule.tsrx

@@ -0,0 +1,97 @@
+import type { ReactNode, SVGProps } from 'react';
+import { Group } from '@octanejs/visx/group';
+import type { GeoGraticuleGenerator } from 'd3-geo';
+import { geoGraticule } from 'd3-geo';
+// eslint-disable-next-line import/no-unresolved
+import type { LineString, MultiLineString, Polygon } from 'geojson';
+
+export type GraticuleProps = {
+	/**
+ * Render function for graticules which is passed a GeoJSON MultiLineString geometry object
+ * representing all meridians and parallels for the graticule.
+ */
+	/**
+ * Render function for graticules which is passed a GeoJSON MultiLineString geometry object
+ * representing all meridians and parallels for the graticule.
+ */
+	/**
+ * Render function for graticules which is passed a GeoJSON MultiLineString geometry object
+ * representing all meridians and parallels for the graticule.
+ */
+	/**
+ * Render function for graticules which is passed a GeoJSON MultiLineString geometry object
+ * representing all meridians and parallels for the graticule.
+ */
+	graticule?: (multiLineString: MultiLineString) => string;
+	/**
+ * Render function for graticule lines, which is invoked once for each meridian or parallel for the graticule,
+ * and is passed the GeoJSON LineString object representing said meridian or parallel.
+ */
+	lines?: (lineString: LineString) => string;
+	/**
+ * Render function for the outline of the graticule (i.e. along the meridians and parallels defining its extent).
+ * It is passed a GeoJSON Polygon geometry object representing the outline.
+ */
+	outline?: (polygon: Polygon) => string;
+	/** Override render function, which is passed the configured graticule generator. */
+	children?: ({
+		graticule,
+	}: {
+		graticule: GeoGraticuleGenerator;
+	}) => ReactNode;
+	/** Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
+	extent?: [[number, number], [number, number]];
+	/** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩. */
+	extentMajor?: [[number, number], [number, number]];
+	/** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
+	extentMinor?: [[number, number], [number, number]];
+	/** Sets both the major and minor step of the graticule generator. */
+	step?: [number, number];
+	/** Sets the major step of the graticule generator, which defaults to ⟨90°, 360°⟩. */
+	stepMajor?: [number, number];
+	/** Sets the major step of the graticule generator, which defaults to ⟨10°, 10°⟩. */
+	stepMinor?: [number, number];
+	/** Sets the precision of the graticule generator, which defaults to 2.5°. */
+	precision?: number;
+};
+
+export default function Graticule({
+	graticule,
+	lines,
+	outline,
+	extent,
+	extentMajor,
+	extentMinor,
+	step,
+	stepMajor,
+	stepMinor,
+	precision,
+	children,
+	...restProps
+}: GraticuleProps & Omit<SVGProps<SVGPathElement>, keyof GraticuleProps>) {
+	const currGraticule = geoGraticule();
+
+	if (extent) currGraticule.extent(extent);
+	if (extentMajor) currGraticule.extentMajor(extentMajor);
+	if (extentMinor) currGraticule.extentMinor(extentMinor);
+	if (step) currGraticule.step(step);
+	if (stepMajor) currGraticule.stepMajor(stepMajor);
+	if (stepMinor) currGraticule.stepMinor(stepMinor);
+	if (precision) currGraticule.precision(precision);
+
+	if (children) return <>
+		{children({ graticule: currGraticule })}
+	</>;
+
+	return <Group className="visx-geo-graticule">
+		{graticule && <path d={graticule(currGraticule())} fill="none" stroke="black" {...restProps} />}
+		{lines &&
+			currGraticule.lines().map(
+				(line, i) => <g key={i}>
+					<path d={lines(line)} fill="none" stroke="black" {...restProps} />
+				</g>,
+			)}
+		{outline &&
+			<path d={outline(currGraticule.outline())} fill="none" stroke="black" {...restProps} />}
+	</Group>;
+}