image-map-route 0.1.0

package/README.md

@@ -0,0 +1,164 @@
+# image-map-route
+
+React utilities for rendering and syncing image map routes.
+
+## Install
+
+```bash
+npm i image-map-route
+```
+
+## Example
+
+- Example site: Coming soon.
+
+## Usage
+
+### Basic route rendering
+
+```tsx
+import { ImageRoute, type Point } from 'image-map-route';
+
+const points: Point[] = [
+	{ x: 0.12, y: 0.3, marked: 1, start: 0, end: 1.2 },
+	{ x: 0.2, y: 0.35, marked: 0 },
+	{ x: 0.45, y: 0.5, marked: 2 },
+];
+
+export function RoutePreview() {
+	return <ImageRoute points={points} />;
+}
+```
+
+### Sync with video playback
+
+```tsx
+import {
+	ImageRoute,
+	type Point,
+	type Spot,
+	useRouteVideoSync,
+} from 'image-map-route';
+
+const points: Point[] = [
+	{ x: 0.12, y: 0.3, start: 0, end: 1.2 },
+	{ x: 0.2, y: 0.35 },
+	{ x: 0.45, y: 0.5 },
+];
+
+export function RouteWithVideo() {
+	const { routeRef, videoRef, activeSpot, setActiveSpot } = useRouteVideoSync(points);
+
+	return (
+		<div>
+			<video ref={videoRef} src="/route.mp4" controls />
+			<ImageRoute
+				ref={routeRef}
+				points={points}
+				activeSpot={activeSpot}
+				setActiveSpot={setActiveSpot}
+				followActiveSpot
+			/>
+		</div>
+	);
+}
+```
+
+## API
+
+### Components
+
+#### `ImageRoute`
+
+```ts
+function ImageRoute(props: MapImageRouteProps): JSX.Element;
+```
+
+Main component that renders a scalable route on an image map.
+
+**Props (MapImageRouteProps)**
+
+- `points: Point[]`  
+  Route points in normalized coordinates (0..1).
+- `addPoint?: Dispatch<Point>`  
+  If provided, clicking the route adds a point. Otherwise clicks select a spot.
+- `activeSpot?: Spot` / `setActiveSpot?: Dispatch<Spot>`  
+  Controlled active spot selection.
+- `followActiveSpot?: boolean`  
+  Auto-center the view on the active spot.
+- `RenderPoint?: ComponentType<RenderPointProps>`  
+  Custom point renderer.
+- `RenderPath?: ComponentType<RenderPathProps>`  
+  Custom path renderer.
+- `RenderExtra?: ComponentType<RenderExtraProps>`  
+  Custom extra overlay renderer.
+- `deps?: string`  
+  Trigger recalculation of initial/animated position when changed.
+-
+
+`getInitialPosition?: (containerSize: DOMRect) => { scale?: number; offset?: { x: number; y: number } }`  
+Initial zoom/offset when the container is ready.
+
+-
+
+`getAnimatedPosition?: (containerSize: DOMRect) => { scale?: number; offset?: { x: number; y: number } }`  
+Optional animated zoom/offset after initial render.
+
+- `innerChildren?: ReactNode`  
+  Children rendered inside the container.
+- `sx?: CSSProperties`  
+  Inline styles for the container.
+
+### Hooks
+
+#### `useRouteVideoSync`
+
+```ts
+function useRouteVideoSync(points: Point[]): {
+	routeRef: React.RefObject<HTMLDivElement>;
+	videoRef: React.RefObject<HTMLVideoElement>;
+	time: number;
+	setTime: (time: number) => void;
+	activeSpot: Spot | null;
+	setActiveSpot: (spot: Spot) => void;
+};
+```
+
+Syncs the map route with an HTML video element. Call `setActiveSpot` to seek the
+video to the corresponding time, or scrub the video to update the active spot.
+
+### Types
+
+```ts
+type Point = {
+	x: number;
+	y: number;
+	marked?: number;
+	start?: number;
+	end?: number;
+	type?: string;
+	extra?: string;
+};
+
+type Spot = {
+	point: { x: number; y: number };
+	pointIndex?: number;
+	percentage?: number;
+};
+```
+
+### Utilities
+
+```ts
+import {
+	calculateCenterZoom,
+	calculateOptimalZoom,
+	findSpotByTime,
+	findTimeBySpot,
+} from 'image-map-route';
+```
+
+- `calculateCenterZoom(point, containerSize, scale)`
+- `calculateOptimalZoom(points, containerSize, paddingPercent)`
+- `findSpotByTime(points, time)`
+- `findTimeBySpot(points, spot)`

package/dist/hooks/useBoundingClientRect.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export default function useBoundingClientRect(ref: RefObject<HTMLElement>): DOMRect;
+//# sourceMappingURL=useBoundingClientRect.d.ts.map

package/dist/hooks/useBoundingClientRect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBoundingClientRect.d.ts","sourceRoot":"","sources":["../../src/hooks/useBoundingClientRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAC;AAI9D,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,OAAO,CAYlF"}

package/dist/hooks/useBoundingClientRect.js

@@ -0,0 +1,12 @@
+import { useCallback, useState } from 'react';
+import { useDidMount } from 'rooks';
+import useResizeObserver from './useResizeObserver';
+export default function useBoundingClientRect(ref) {
+    const [domRect, setDomRect] = useState(null);
+    const update = useCallback(() => {
+        setDomRect(ref.current ? ref.current.getBoundingClientRect() : null);
+    }, [ref]);
+    useDidMount(update);
+    useResizeObserver(ref, update);
+    return domRect;
+}

package/dist/hooks/useControlledState.d.ts

@@ -0,0 +1,4 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export default function useControlledState<S>(defaultState?: S): [S, Dispatch<SetStateAction<S>>];
+export default function useControlledState<S>(state: S, setState: Dispatch<SetStateAction<S>>): [S, Dispatch<SetStateAction<S>>];
+//# sourceMappingURL=useControlledState.d.ts.map

package/dist/hooks/useControlledState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControlledState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAGrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClG,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,CAAC,EAC3C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GACnC,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/hooks/useControlledState.js

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+export default function useControlledState(state, setState) {
+    const controlledState = useState(state);
+    if (setState)
+        return [state, setState];
+    return controlledState;
+}

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export default function useResizeObserver(ref: RefObject<HTMLElement>, callback: ResizeObserverCallback): void;
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/hooks/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACxC,GAAG,EAAE,SAAS,CAAC,WAAW,CAAC,EAC3B,QAAQ,EAAE,sBAAsB,GAC9B,IAAI,CAcN"}

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export default function useResizeObserver(ref, callback) {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        if (ref.current) {
+            const observer = new ResizeObserver((...args) => callbackRef.current(...args));
+            observer.observe(ref.current);
+            return () => observer.disconnect();
+        }
+    }, [ref]);
+}

package/dist/imageMapRoute.d.ts

@@ -0,0 +1,3 @@
+import { type MapImageRouteProps } from './types';
+export default function ImageMapRoute({ ref, points, addPoint, activeSpot: _activeSpot, setActiveSpot: _setActiveSpot, RenderPoint, RenderPath, RenderExtra, deps, getInitialPosition, getAnimatedPosition, followActiveSpot, sx, children, ...props }: MapImageRouteProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=imageMapRoute.d.ts.map

package/dist/imageMapRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageMapRoute.d.ts","sourceRoot":"","sources":["../src/imageMapRoute.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAa,MAAM,SAAS,CAAC;AAI7D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,EAAE,WAAW,EACvB,aAAa,EAAE,cAAc,EAC7B,WAAW,EACX,UAAU,EACV,WAAW,EACX,IAAI,EACJ,kBAAiE,EACjE,mBAAmB,EACnB,gBAAgB,EAChB,EAAE,EACF,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,kBAAkB,2CA6FpB"}

package/dist/imageMapRoute.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import useBoundingClientRect from './hooks/useBoundingClientRect';
+import useControlledState from './hooks/useControlledState';
+import ImageMapRouteContainer from './imageMapRouteContainer';
+import ImageMapRoutePaths from './imageMapRoutePaths';
+import ImageMapRoutePoints from './imageMapRoutePoints';
+import { calculateCenterZoom } from './utils';
+import { getClosestPointOnPath } from './utils/getClosestPointOnPath';
+export default function ImageMapRoute(_a) {
+    var { ref, points, addPoint, activeSpot: _activeSpot, setActiveSpot: _setActiveSpot, RenderPoint, RenderPath, RenderExtra, deps, getInitialPosition = () => ({ scale: 1, offset: { x: 0, y: 0 } }), getAnimatedPosition, followActiveSpot, sx, children } = _a, props = __rest(_a, ["ref", "points", "addPoint", "activeSpot", "setActiveSpot", "RenderPoint", "RenderPath", "RenderExtra", "deps", "getInitialPosition", "getAnimatedPosition", "followActiveSpot", "sx", "children"]);
+    const internalRef = useRef(null);
+    const containerRef = ref !== null && ref !== void 0 ? ref : internalRef;
+    const containerSize = useBoundingClientRect(containerRef);
+    const [scale, setScale] = useState(1);
+    const [mapOffset, setMapOffset] = useState({ x: 0, y: 0 });
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [activeSpot, setActiveSpot] = useControlledState(_activeSpot, _setActiveSpot);
+    const [hoverSpot, setHoverSpot] = useState(null);
+    useEffect(() => {
+        if (!points || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.height))
+            return;
+        const { scale, offset } = getInitialPosition(containerSize);
+        if (scale)
+            setScale(scale);
+        if (offset)
+            setMapOffset(offset);
+        setIsAnimating(false);
+        if (!getAnimatedPosition)
+            return;
+        const animationFrame = setTimeout(() => {
+            const { scale, offset } = getAnimatedPosition(containerSize);
+            if (scale)
+                setScale(scale);
+            if (offset)
+                setMapOffset(offset);
+            setIsAnimating(true);
+            setTimeout(() => setIsAnimating(false), 2000);
+        }, 1000);
+        return () => clearTimeout(animationFrame);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [deps, Boolean(points), Boolean(containerSize)]);
+    useEffect(() => {
+        if (!followActiveSpot ||
+            !(activeSpot === null || activeSpot === void 0 ? void 0 : activeSpot.point) ||
+            !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) ||
+            !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.height))
+            return;
+        requestAnimationFrame(() => {
+            const { offset } = calculateCenterZoom(activeSpot.point, containerSize, scale);
+            setMapOffset(offset);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [followActiveSpot, activeSpot === null || activeSpot === void 0 ? void 0 : activeSpot.point]);
+    return (_jsxs(ImageMapRouteContainer, Object.assign({ containerRef: containerRef, containerSize: containerSize, scale: scale, setScale: setScale, mapOffset: mapOffset, setMapOffset: setMapOffset, isAnimating: isAnimating, onHoverRoute: (point) => {
+            if (addPoint)
+                return;
+            setHoverSpot(getClosestPointOnPath(points, point.x, point.y, 15 / containerSize.width));
+        }, onClickRoute: (point) => {
+            if (addPoint)
+                return addPoint(point);
+            if (hoverSpot)
+                setActiveSpot(hoverSpot);
+        }, sx: sx }, props, { children: [children, containerSize && (_jsxs("svg", { style: { width: '100%', height: '100%' }, children: [_jsx(ImageMapRoutePaths, { containerSize: containerSize, scale: scale, points: points, RenderPath: RenderPath }), _jsx(ImageMapRoutePoints, { containerSize: containerSize, scale: scale, points: points, activeSpot: activeSpot, hoverSpot: hoverSpot, RenderPoint: RenderPoint }), RenderExtra && (_jsx(RenderExtra, { containerSize: containerSize, scale: scale, points: points }))] }))] })));
+}

package/dist/imageMapRouteContainer.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, Dispatch, HTMLAttributes, ReactNode, RefObject } from 'react';
+import { type Point } from './types';
+export default function ImageMapRouteContainer({ containerRef, containerSize, scale, setScale, mapOffset, setMapOffset, isAnimating, onHoverRoute, onClickRoute, sx, children, ...props }: {
+    containerRef: RefObject<HTMLDivElement>;
+    containerSize: DOMRect;
+    scale: number;
+    setScale: Dispatch<number>;
+    mapOffset: Point;
+    setMapOffset: Dispatch<Point>;
+    isAnimating: boolean;
+    onHoverRoute?: (point: {
+        x: number;
+        y: number;
+    }) => void;
+    onClickRoute?: (point: {
+        x: number;
+        y: number;
+    }) => void;
+    innerChildren?: ReactNode;
+    sx?: CSSProperties;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'ref'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=imageMapRouteContainer.d.ts.map

package/dist/imageMapRouteContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageMapRouteContainer.d.ts","sourceRoot":"","sources":["../src/imageMapRouteContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,aAAa,EACb,QAAQ,EACR,cAAc,EACd,SAAS,EACT,SAAS,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC9C,YAAY,EACZ,aAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,GAAG,KAAK,EACR,EAAE;IACF,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3B,SAAS,EAAE,KAAK,CAAC;IACjB,YAAY,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,2CAoL9C"}

package/dist/imageMapRouteContainer.js

@@ -0,0 +1,166 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { clamp } from 'remeda';
+import { clampPosition } from './utils/clampPosition';
+import { mouseToContainer } from './utils/mouseToContainer';
+export default function ImageMapRouteContainer(_a) {
+    var { containerRef, containerSize, scale, setScale, mapOffset, setMapOffset, isAnimating, onHoverRoute, onClickRoute, sx, children } = _a, props = __rest(_a, ["containerRef", "containerSize", "scale", "setScale", "mapOffset", "setMapOffset", "isAnimating", "onHoverRoute", "onClickRoute", "sx", "children"]);
+    const isDragging = useRef(false);
+    const hasMoved = useRef(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const lastTouchDistance = useRef(null);
+    const touchStartTime = useRef(0);
+    const interactionStartPos = useRef(null);
+    const { style } = props, restProps = __rest(props, ["style"]);
+    const startDrag = (clientX, clientY) => {
+        isDragging.current = true;
+        hasMoved.current = false;
+        interactionStartPos.current = { x: clientX, y: clientY };
+        dragStart.current = { x: clientX - mapOffset.x, y: clientY - mapOffset.y };
+        touchStartTime.current = Date.now();
+    };
+    const performDrag = (clientX, clientY) => {
+        if (!containerSize)
+            return;
+        hasMoved.current = true;
+        const newX = clientX - dragStart.current.x;
+        const newY = clientY - dragStart.current.y;
+        setMapOffset(clampPosition(containerSize, newX, newY, scale));
+    };
+    const performZoom = (zoomCenter, scaleDelta) => {
+        var _a, _b;
+        if (!containerSize)
+            return;
+        const newScale = clamp(scale * scaleDelta, { min: 1, max: 16 }) || 1;
+        const liveRect = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : containerSize;
+        const mouseX = zoomCenter.x - liveRect.left;
+        const mouseY = zoomCenter.y - liveRect.top;
+        const centerX = containerSize.width / 2;
+        const centerY = containerSize.height / 2;
+        const imagePointX = (mouseX - centerX - mapOffset.x) / scale;
+        const imagePointY = (mouseY - centerY - mapOffset.y) / scale;
+        const newX = mouseX - centerX - imagePointX * newScale;
+        const newY = mouseY - centerY - imagePointY * newScale;
+        setScale(newScale);
+        setMapOffset(clampPosition(containerSize, newX, newY, newScale));
+    };
+    const handleClick = (click) => {
+        var _a, _b;
+        if (!containerSize)
+            return;
+        const liveRect = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : containerSize;
+        onClickRoute === null || onClickRoute === void 0 ? void 0 : onClickRoute(mouseToContainer({ clientX: click.x, clientY: click.y }, liveRect, mapOffset, scale));
+    };
+    const endDrag = () => {
+        isDragging.current = false;
+        lastTouchDistance.current = null;
+        interactionStartPos.current = null;
+    };
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return null;
+        const dx = touches[0].clientX - touches[1].clientX;
+        const dy = touches[0].clientY - touches[1].clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    };
+    const getTouchCenter = (touches) => {
+        if (touches.length < 2)
+            return null;
+        return {
+            x: (touches[0].clientX + touches[1].clientX) / 2,
+            y: (touches[0].clientY + touches[1].clientY) / 2,
+        };
+    };
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const handleWheel = (e) => {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            performZoom({ x: e.clientX, y: e.clientY }, delta);
+        };
+        element.addEventListener('wheel', handleWheel, { passive: false });
+        return () => element.removeEventListener('wheel', handleWheel);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef, containerSize, scale, mapOffset]);
+    const outerStyle = Object.assign(Object.assign({ overflow: 'hidden', cursor: 'crosshair', touchAction: 'none', backgroundColor: 'black' }, sx), style);
+    return (_jsx("div", Object.assign({ ref: containerRef, style: outerStyle, onMouseDown: (e) => {
+            if (e.button !== 0 && e.button !== 2)
+                return;
+            if (e.button === 2)
+                e.preventDefault();
+            startDrag(e.clientX, e.clientY);
+        }, onMouseMove: (e) => {
+            if (isDragging.current) {
+                performDrag(e.clientX, e.clientY);
+                return;
+            }
+            if (!containerSize)
+                return;
+            const liveRect = e.currentTarget.getBoundingClientRect();
+            onHoverRoute === null || onHoverRoute === void 0 ? void 0 : onHoverRoute(mouseToContainer(e, liveRect, mapOffset, scale));
+        }, onMouseUp: endDrag, onClick: (e) => {
+            if (hasMoved.current) {
+                hasMoved.current = false;
+                return;
+            }
+            if (!containerSize)
+                return;
+            const liveRect = e.currentTarget.getBoundingClientRect();
+            onClickRoute === null || onClickRoute === void 0 ? void 0 : onClickRoute(mouseToContainer(e, liveRect, mapOffset, scale));
+        }, onContextMenu: (e) => e.preventDefault(), onTouchStart: (e) => {
+            if (e.touches.length === 1) {
+                const touch = e.touches[0];
+                startDrag(touch.clientX, touch.clientY);
+            }
+            else if (e.touches.length === 2) {
+                lastTouchDistance.current = getTouchDistance(e.touches);
+            }
+        }, onTouchMove: (e) => {
+            e.preventDefault();
+            if (e.touches.length === 1) {
+                const touch = e.touches[0];
+                performDrag(touch.clientX, touch.clientY);
+            }
+            else if (e.touches.length === 2) {
+                const distance = getTouchDistance(e.touches);
+                const center = getTouchCenter(e.touches);
+                if (distance && center && lastTouchDistance.current) {
+                    const scaleDelta = distance / lastTouchDistance.current;
+                    performZoom(center, scaleDelta);
+                    lastTouchDistance.current = distance;
+                }
+            }
+        }, onTouchEnd: (e) => {
+            if (e.touches.length === 0) {
+                const touchDuration = Date.now() - touchStartTime.current;
+                const wasTap = touchDuration < 200 && !isDragging.current;
+                if (wasTap && interactionStartPos.current) {
+                    handleClick(interactionStartPos.current);
+                }
+                endDrag();
+            }
+            else if (e.touches.length === 1) {
+                lastTouchDistance.current = null;
+            }
+        } }, restProps, { children: _jsx("div", { style: {
+                position: 'relative',
+                transform: `translate(${mapOffset.x}px, ${mapOffset.y}px) scale(${scale})`,
+                transformOrigin: '50% 50%',
+                width: '100%',
+                height: '100%',
+                transition: isAnimating ? 'transform 1s ease' : 'none',
+            }, children: children }) })));
+}

package/dist/imageMapRoutePaths.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import { type Point, type RenderPathProps } from './types';
+export default function ImageMapRoutePaths({ containerSize, scale, points, RenderPath, }: {
+    containerSize: DOMRect;
+    scale: number;
+    points: Point[];
+    RenderPath?: ComponentType<RenderPathProps>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=imageMapRoutePaths.d.ts.map

package/dist/imageMapRoutePaths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageMapRoutePaths.d.ts","sourceRoot":"","sources":["../src/imageMapRoutePaths.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAW3D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAC1C,aAAa,EACb,KAAK,EACL,MAAM,EACN,UAA8B,GAC9B,EAAE;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAC5C,2CAmBA"}

package/dist/imageMapRoutePaths.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+function DefaultRenderPath({ point1, point2, containerSize }) {
+    const x1 = point1.x * containerSize.width;
+    const y1 = point1.y * containerSize.height;
+    const x2 = point2.x * containerSize.width;
+    const y2 = point2.y * containerSize.height;
+    return _jsx("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: 'white' });
+}
+export default function ImageMapRoutePaths({ containerSize, scale, points, RenderPath = DefaultRenderPath, }) {
+    var _a;
+    return (_jsx(Fragment, { children: (_a = points === null || points === void 0 ? void 0 : points.map) === null || _a === void 0 ? void 0 : _a.call(points, (point, i) => {
+            if (i === 0)
+                return null;
+            const prevPoint = points[i - 1];
+            return (_jsx(RenderPath, { point1: prevPoint, point2: point, containerSize: containerSize, scale: scale }, `path-${i}`));
+        }) }));
+}

package/dist/imageMapRoutePoints.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType } from 'react';
+import { type Point, type RenderPointProps, type Spot } from './types';
+export default function ImageMapRoutePoints({ containerSize, scale, points, hoverSpot, activeSpot, RenderPoint, }: {
+    containerSize: DOMRect;
+    scale: number;
+    points: Point[];
+    hoverSpot: Spot;
+    activeSpot: Spot;
+    RenderPoint?: ComponentType<RenderPointProps>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=imageMapRoutePoints.d.ts.map

package/dist/imageMapRoutePoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageMapRoutePoints.d.ts","sourceRoot":"","sources":["../src/imageMapRoutePoints.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,gBAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAcvE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC3C,aAAa,EACb,KAAK,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAgC,GAChC,EAAE;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,UAAU,EAAE,IAAI,CAAC;IACjB,WAAW,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAC9C,2CA+BA"}

package/dist/imageMapRoutePoints.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+function DefaultRenderPoint({ point, containerSize, type }) {
+    return (_jsx("circle", { cx: point.x * containerSize.width, cy: point.y * containerSize.height, r: type ? 2 : 1, fill: type === 'active' ? 'blue' : 'lime', fillOpacity: type ? 0.5 : 1 }));
+}
+export default function ImageMapRoutePoints({ containerSize, scale, points, hoverSpot, activeSpot, RenderPoint = DefaultRenderPoint, }) {
+    return (_jsxs(Fragment, { children: [points === null || points === void 0 ? void 0 : points.map((point, i) => (_jsx(RenderPoint, { point: point, containerSize: containerSize, scale: scale }, `point-${i}`))), hoverSpot && (_jsx(RenderPoint, { point: hoverSpot.point, containerSize: containerSize, scale: scale, percentage: hoverSpot.percentage, type: 'hover' })), activeSpot && (_jsx(RenderPoint, { point: activeSpot.point, containerSize: containerSize, scale: scale, percentage: activeSpot.percentage, type: 'active' }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ImageRoute } from './imageMapRoute';
+export * from './types';
+export * from './utils';
+export { default as useRouteVideoSync } from './useRouteVideoSync';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as ImageRoute } from './imageMapRoute';
+export * from './types';
+export * from './utils';
+export { default as useRouteVideoSync } from './useRouteVideoSync';

package/dist/types.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentType, CSSProperties, Dispatch, HTMLAttributes, ReactNode, RefObject } from 'react';
+export type Point = {
+    x: number;
+    y: number;
+    marked?: number;
+    start?: number;
+    end?: number;
+    type?: string;
+    extra?: string;
+};
+export type Spot = {
+    point: {
+        x: number;
+        y: number;
+    };
+    pointIndex?: number;
+    percentage?: number;
+};
+export type MapImageRouteProps = {
+    ref?: RefObject<HTMLDivElement>;
+    points: Point[];
+    addPoint?: Dispatch<Point>;
+    activeSpot?: Spot;
+    setActiveSpot?: Dispatch<Spot>;
+    followActiveSpot?: boolean;
+    RenderPoint?: ComponentType<RenderPointProps>;
+    RenderPath?: ComponentType<RenderPathProps>;
+    RenderExtra?: ComponentType<RenderExtraProps>;
+    deps?: string;
+    getInitialPosition?: (containerSize: DOMRect) => {
+        scale?: number;
+        offset?: {
+            x: number;
+            y: number;
+        };
+    };
+    getAnimatedPosition?: (containerSize: DOMRect) => {
+        scale?: number;
+        offset?: {
+            x: number;
+            y: number;
+        };
+    };
+    innerChildren?: ReactNode;
+    sx?: CSSProperties;
+} & HTMLAttributes<HTMLDivElement>;
+export type RenderPointProps = {
+    point: Point;
+    containerSize: DOMRect;
+    scale: number;
+    percentage?: number;
+    type?: string;
+};
+export type RenderPathProps = {
+    point1: Point;
+    point2: Point;
+    containerSize: DOMRect;
+    scale: number;
+};
+export type RenderExtraProps = {
+    containerSize: DOMRect;
+    scale: number;
+    points: Point[];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,aAAa,EACb,aAAa,EACb,QAAQ,EACR,cAAc,EACd,SAAS,EACT,SAAS,EACT,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,KAAK,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAChC,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK;QAChD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAClC,CAAC;IACF,mBAAmB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK;QACjD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAClC,CAAC;IACF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,aAAa,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useRouteVideoSync.d.ts

@@ -0,0 +1,10 @@
+import { type Point, type Spot } from './types';
+export default function useRouteVideoSync(points: Point[]): {
+    routeRef: import("react").RefObject<HTMLDivElement>;
+    videoRef: import("react").RefObject<HTMLVideoElement>;
+    time: number;
+    setTime: (time: number) => void;
+    activeSpot: Spot;
+    setActiveSpot: (spot: Spot) => void;
+};
+//# sourceMappingURL=useRouteVideoSync.d.ts.map

package/dist/useRouteVideoSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouteVideoSync.d.ts","sourceRoot":"","sources":["../src/useRouteVideoSync.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,EAAE,KAAK,EAAE;;;;oBAiDvC,MAAM;;0BAKA,IAAI;EAU3B"}

package/dist/useRouteVideoSync.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+import { useVideo } from 'rooks';
+import { findSpotByTime, findTimeBySpot } from './utils';
+export default function useRouteVideoSync(points) {
+    const routeRef = useRef(null);
+    const [videoRef, videoState, videoControls] = useVideo();
+    const animationFrameRef = useRef(null);
+    const [time, setTime] = useState(0);
+    const [activeSpot, setActiveSpot] = useState(null);
+    // Sync activeSpot with time
+    useEffect(() => {
+        const spot = findSpotByTime(points, time);
+        if (!spot)
+            return;
+        setActiveSpot(spot);
+    }, [points, time]);
+    useEffect(() => {
+        videoControls.pause();
+        videoControls.setCurrentTime(0);
+        setTime(0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [Boolean(points)]);
+    useEffect(() => {
+        const updateTime = () => {
+            if (videoRef.current && !videoState.isPaused) {
+                setTime(videoRef.current.currentTime);
+            }
+            animationFrameRef.current = requestAnimationFrame(updateTime);
+        };
+        if (!videoState.isPaused) {
+            animationFrameRef.current = requestAnimationFrame(updateTime);
+        }
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [videoRef, videoState.isPaused]);
+    useEffect(() => {
+        if (videoState.isPaused)
+            setTime(videoState.currentTime);
+    }, [videoState]);
+    return {
+        routeRef,
+        videoRef,
+        time,
+        setTime: (time) => {
+            videoRef.current.currentTime = time;
+            setTime(time);
+        },
+        activeSpot,
+        setActiveSpot: (spot) => {
+            setActiveSpot(spot);
+            const calculatedTime = findTimeBySpot(points, spot);
+            if (calculatedTime !== null) {
+                setTime(calculatedTime);
+                videoControls.setCurrentTime(calculatedTime);
+            }
+        },
+    };
+}

package/dist/utils/calculateCenterZoom.d.ts

@@ -0,0 +1,9 @@
+import { type Point } from '../types';
+export declare function calculateCenterZoom(point: Point, containerSize: DOMRect, scale: number): {
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+//# sourceMappingURL=calculateCenterZoom.d.ts.map

package/dist/utils/calculateCenterZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateCenterZoom.d.ts","sourceRoot":"","sources":["../../src/utils/calculateCenterZoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAGtC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;;;;;;EActF"}

package/dist/utils/calculateCenterZoom.js

@@ -0,0 +1,13 @@
+import { offsetToZoom } from './offsetToZoom';
+export function calculateCenterZoom(point, containerSize, scale) {
+    if (!point || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || !scale) {
+        return { scale: 1, offset: { x: 0, y: 0 } };
+    }
+    // Convert normalized point (0-1) to pixel coordinates
+    const pointX = point.x * containerSize.width;
+    const pointY = point.y * containerSize.height;
+    // Calculate offset to center the point
+    const offsetX = (containerSize.width / 2 - pointX) * scale;
+    const offsetY = (containerSize.height / 2 - pointY) * scale;
+    return offsetToZoom(offsetX, offsetY, containerSize, scale);
+}

package/dist/utils/calculateOptimalZoom.d.ts

@@ -0,0 +1,9 @@
+import { type Point } from '../types';
+export declare function calculateOptimalZoom(points: Point[], containerSize: DOMRect, zoom: number, maxScale?: number): {
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+//# sourceMappingURL=calculateOptimalZoom.d.ts.map

package/dist/utils/calculateOptimalZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateOptimalZoom.d.ts","sourceRoot":"","sources":["../../src/utils/calculateOptimalZoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAGtC,wBAAgB,oBAAoB,CACnC,MAAM,EAAE,KAAK,EAAE,EACf,aAAa,EAAE,OAAO,EACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,GAAE,MAAU;;;;;;EAyCpB"}

package/dist/utils/calculateOptimalZoom.js

@@ -0,0 +1,32 @@
+import { offsetToZoom } from './offsetToZoom';
+export function calculateOptimalZoom(points, containerSize, zoom, maxScale = 2) {
+    if (!(points === null || points === void 0 ? void 0 : points.length) || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || !(containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) || !zoom) {
+        return { scale: 1, offset: { x: 0, y: 0 } };
+    }
+    // Find bounding box of all points (normalized coordinates)
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const point of points) {
+        minX = Math.min(minX, point.x);
+        maxX = Math.max(maxX, point.x);
+        minY = Math.min(minY, point.y);
+        maxY = Math.max(maxY, point.y);
+    }
+    // Convert to pixel coordinates
+    const boundingBox = {
+        width: (maxX - minX) * containerSize.width,
+        height: (maxY - minY) * containerSize.height,
+        centerX: ((minX + maxX) / 2) * containerSize.width,
+        centerY: ((minY + maxY) / 2) * containerSize.height,
+    };
+    // Calculate scale to fit bounding box with some padding
+    const scaleX = (containerSize.width * zoom) / boundingBox.width;
+    const scaleY = (containerSize.height * zoom) / boundingBox.height;
+    const scale = Math.max(1, Math.min(scaleX, scaleY, maxScale));
+    // Calculate offset to center the bounding box
+    const containerCenterX = containerSize.width / 2;
+    const containerCenterY = containerSize.height / 2;
+    // We need to translate the image center by -offsetToBounding * scale
+    const offsetX = -(boundingBox.centerX - containerCenterX) * scale;
+    const offsetY = -(boundingBox.centerY - containerCenterY) * scale;
+    return offsetToZoom(offsetX, offsetY, containerSize, scale);
+}

package/dist/utils/clampPosition.d.ts

@@ -0,0 +1,5 @@
+export declare function clampPosition(containerSize: DOMRect, x: number, y: number, currentScale: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=clampPosition.d.ts.map

package/dist/utils/clampPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clampPosition.d.ts","sourceRoot":"","sources":["../../src/utils/clampPosition.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,aAAa,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;;;EAY/F"}

package/dist/utils/clampPosition.js

@@ -0,0 +1,12 @@
+import { clamp } from 'remeda';
+export function clampPosition(containerSize, x, y, currentScale) {
+    const imageWidth = containerSize.width * currentScale;
+    const imageHeight = containerSize.height * currentScale;
+    // Calculate bounds - with center origin, the offset represents the center position
+    const halfScaledWidth = (imageWidth - containerSize.width) / 2;
+    const halfScaledHeight = (imageHeight - containerSize.height) / 2;
+    return {
+        x: clamp(x, { min: -halfScaledWidth, max: halfScaledWidth }),
+        y: clamp(y, { min: -halfScaledHeight, max: halfScaledHeight }),
+    };
+}

package/dist/utils/findSpotByTime.d.ts

@@ -0,0 +1,3 @@
+import { type Point, type Spot } from '../types';
+export declare function findSpotByTime(points: Point[], time: number): Spot;
+//# sourceMappingURL=findSpotByTime.d.ts.map

package/dist/utils/findSpotByTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findSpotByTime.d.ts","sourceRoot":"","sources":["../../src/utils/findSpotByTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAGjD,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAuElE"}

package/dist/utils/findSpotByTime.js

@@ -0,0 +1,62 @@
+// Find active spot based on time
+export function findSpotByTime(points, time) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!(points === null || points === void 0 ? void 0 : points.length))
+        return null;
+    let lastPoint = { point: points[0], i: 0, maxTime: 0 };
+    // Iterate through points to find the spot
+    for (let i = 0; i < points.length; i++) {
+        const point = points[i];
+        if (point.start === undefined && point.end === undefined && point.marked === undefined)
+            continue;
+        const minTime = (_b = (_a = point.start) !== null && _a !== void 0 ? _a : point.marked) !== null && _b !== void 0 ? _b : 0;
+        const maxTime = (_e = (_d = (_c = point.end) !== null && _c !== void 0 ? _c : point.marked) !== null && _d !== void 0 ? _d : point.start) !== null && _e !== void 0 ? _e : 0;
+        // Time is at this point
+        if (minTime <= time && time <= maxTime) {
+            return { point, pointIndex: i, percentage: 0 };
+        }
+        if (time > maxTime) {
+            lastPoint = { point, i, maxTime };
+            continue;
+        }
+        const startTime = (_h = (_g = (_f = point.start) !== null && _f !== void 0 ? _f : point.marked) !== null && _g !== void 0 ? _g : point.end) !== null && _h !== void 0 ? _h : 0;
+        const endTime = lastPoint.maxTime;
+        const segmentPoints = points.slice(lastPoint.i, i + 1);
+        // Calculate cumulative distances
+        const distances = [0];
+        let totalDistance = 0;
+        for (let j = 1; j < segmentPoints.length; j++) {
+            const dx = segmentPoints[j].x - segmentPoints[j - 1].x;
+            const dy = segmentPoints[j].y - segmentPoints[j - 1].y;
+            totalDistance += Math.sqrt(dx * dx + dy * dy);
+            distances.push(totalDistance);
+        }
+        if (totalDistance === 0) {
+            return { point: lastPoint.point, pointIndex: lastPoint.i, percentage: 0 };
+        }
+        // Interpolate position based on time
+        const timePercentage = (time - endTime) / (startTime - endTime);
+        const targetDistance = totalDistance * timePercentage;
+        // Find segment containing target distance
+        let segIdx = distances.findIndex((d, idx) => idx > 0 && targetDistance <= d) - 1;
+        if (segIdx < 0)
+            segIdx = distances.length - 2;
+        // Interpolate within segment
+        const segStart = distances[segIdx];
+        const segEnd = distances[segIdx + 1];
+        const segT = (targetDistance - segStart) / (segEnd - segStart);
+        const p1 = segmentPoints[segIdx];
+        const p2 = segmentPoints[segIdx + 1];
+        return {
+            point: { x: p1.x + (p2.x - p1.x) * segT, y: p1.y + (p2.y - p1.y) * segT },
+            pointIndex: lastPoint.i + segIdx,
+            percentage: Math.round(segT * 1000) / 10,
+        };
+    }
+    // Time is beyond all points, return last point
+    return {
+        point: points[points.length - 1],
+        pointIndex: points.length - 1,
+        percentage: 0,
+    };
+}

package/dist/utils/findTimeBySpot.d.ts

@@ -0,0 +1,3 @@
+import { type Point, type Spot } from '../types';
+export declare function findTimeBySpot(points: Point[], spot: Spot): number;
+//# sourceMappingURL=findTimeBySpot.d.ts.map

package/dist/utils/findTimeBySpot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findTimeBySpot.d.ts","sourceRoot":"","sources":["../../src/utils/findTimeBySpot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAGjD,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,UAiEzD"}

package/dist/utils/findTimeBySpot.js

@@ -0,0 +1,60 @@
+// Find time based on spot
+export function findTimeBySpot(points, spot) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!(points === null || points === void 0 ? void 0 : points.length) || !spot)
+        return null;
+    // Check if we're snapped directly to a point
+    if (spot.percentage === 100) {
+        const point = points[spot.pointIndex + 1];
+        const res = (_a = point.marked) !== null && _a !== void 0 ? _a : point.start;
+        if (res)
+            return res;
+    }
+    else if (spot.percentage === 0) {
+        const point = points[spot.pointIndex];
+        return (_c = (_b = point.marked) !== null && _b !== void 0 ? _b : point.start) !== null && _c !== void 0 ? _c : 0;
+    }
+    // Find timing segment boundaries in a single pass
+    let startIdx = 0;
+    let endIdx = points.length - 1;
+    for (let i = spot.pointIndex; i >= 0; i--) {
+        if ((_e = (_d = points[i].start) !== null && _d !== void 0 ? _d : points[i].marked) !== null && _e !== void 0 ? _e : points[i].end) {
+            startIdx = i;
+            break;
+        }
+    }
+    for (let i = spot.pointIndex + 1; i < points.length; i++) {
+        if ((_g = (_f = points[i].start) !== null && _f !== void 0 ? _f : points[i].marked) !== null && _g !== void 0 ? _g : points[i].end) {
+            endIdx = i;
+            break;
+        }
+    }
+    const startPoint = points[startIdx];
+    const endPoint = points[endIdx];
+    const startPointTime = (_j = (_h = startPoint.end) !== null && _h !== void 0 ? _h : startPoint.marked) !== null && _j !== void 0 ? _j : startPoint.start;
+    const endPointTime = (_l = (_k = endPoint.start) !== null && _k !== void 0 ? _k : endPoint.marked) !== null && _l !== void 0 ? _l : endPoint.end;
+    // Calculate cumulative distances along the path
+    const pathPoints = points.slice(startIdx, endIdx + 1);
+    const distances = [0];
+    let totalDistance = 0;
+    for (let i = 1; i < pathPoints.length; i++) {
+        const dx = pathPoints[i].x - pathPoints[i - 1].x;
+        const dy = pathPoints[i].y - pathPoints[i - 1].y;
+        totalDistance += Math.sqrt(dx * dx + dy * dy);
+        distances.push(totalDistance);
+    }
+    if (totalDistance === 0)
+        return startPointTime;
+    // Calculate distance to the spot
+    const pointIndexInPath = spot.pointIndex - startIdx;
+    const distanceToSegmentStart = distances[pointIndexInPath];
+    const segmentStart = pathPoints[pointIndexInPath];
+    const segmentEnd = pathPoints[pointIndexInPath + 1];
+    const dx = segmentEnd.x - segmentStart.x;
+    const dy = segmentEnd.y - segmentStart.y;
+    const segmentLength = Math.sqrt(dx * dx + dy * dy);
+    const totalDistanceToSpot = distanceToSegmentStart + segmentLength * (spot.percentage / 100);
+    // Interpolate time based on distance ratio
+    const distanceRatio = totalDistanceToSpot / totalDistance;
+    return startPointTime + (endPointTime - startPointTime) * distanceRatio;
+}

package/dist/utils/getClosestPointOnPath.d.ts

@@ -0,0 +1,3 @@
+import { type Point, type Spot } from '../types';
+export declare function getClosestPointOnPath(points: Point[], mouseX: number, mouseY: number, snapThreshold: number): Spot;
+//# sourceMappingURL=getClosestPointOnPath.d.ts.map

package/dist/utils/getClosestPointOnPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getClosestPointOnPath.d.ts","sourceRoot":"","sources":["../../src/utils/getClosestPointOnPath.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAGjD,wBAAgB,qBAAqB,CACpC,MAAM,EAAE,KAAK,EAAE,EACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,GACnB,IAAI,CAuEN"}

package/dist/utils/getClosestPointOnPath.js

@@ -0,0 +1,63 @@
+import { clamp } from 'remeda';
+// Calculate closest point on path with segment info and snapping
+export function getClosestPointOnPath(points, mouseX, mouseY, snapThreshold) {
+    if (!points || points.length < 2)
+        return null;
+    let closestPoint = null;
+    let minDistance = Infinity;
+    let closestPointIndex = -1;
+    let segmentPercentage = 0;
+    // Check each segment
+    for (let i = 1; i < points.length; i++) {
+        const x1 = points[i - 1].x;
+        const y1 = points[i - 1].y;
+        const x2 = points[i].x;
+        const y2 = points[i].y;
+        const segmentLength = Math.pow(Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), 2);
+        // Vector from start to end of segment
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        // Vector from start to mouse
+        const mx = mouseX - x1;
+        const my = mouseY - y1;
+        // Project mouse onto segment
+        const t = clamp((mx * dx + my * dy) / segmentLength, {
+            min: 0,
+            max: 1,
+        });
+        // Closest point on this segment
+        let px = x1 + t * dx;
+        let py = y1 + t * dy;
+        // Check if we should snap to start point
+        const distToStart = Math.sqrt(Math.pow((mouseX - x1), 2) + Math.pow((mouseY - y1), 2));
+        const distToEnd = Math.sqrt(Math.pow((mouseX - x2), 2) + Math.pow((mouseY - y2), 2));
+        let snappedT = t;
+        let preferredSegmentIndex = i - 1;
+        if (points[i - 1].marked && distToStart < snapThreshold && distToStart < distToEnd) {
+            px = x1;
+            py = y1;
+            snappedT = 0;
+        }
+        else if (points[i].marked && distToEnd < snapThreshold) {
+            px = x2;
+            py = y2;
+            preferredSegmentIndex = i;
+            snappedT = 0;
+        }
+        // Distance from mouse to closest point
+        const dist = Math.sqrt(Math.pow((mouseX - px), 2) + Math.pow((mouseY - py), 2));
+        if (dist < minDistance) {
+            minDistance = dist;
+            closestPoint = { x: px, y: py };
+            closestPointIndex = preferredSegmentIndex;
+            segmentPercentage = snappedT * 100;
+        }
+    }
+    if (minDistance >= snapThreshold)
+        return null;
+    return {
+        point: closestPoint,
+        pointIndex: closestPointIndex,
+        percentage: Math.round(segmentPercentage * 10) / 10,
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { calculateCenterZoom } from './calculateCenterZoom';
+export { calculateOptimalZoom } from './calculateOptimalZoom';
+export { findSpotByTime } from './findSpotByTime';
+export { findTimeBySpot } from './findTimeBySpot';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export { calculateCenterZoom } from './calculateCenterZoom';
+export { calculateOptimalZoom } from './calculateOptimalZoom';
+export { findSpotByTime } from './findSpotByTime';
+export { findTimeBySpot } from './findTimeBySpot';

package/dist/utils/mouseToContainer.d.ts

@@ -0,0 +1,11 @@
+export declare function mouseToContainer(mouse: {
+    clientX: number;
+    clientY: number;
+}, containerSize: DOMRect, mapOffset: {
+    x: number;
+    y: number;
+}, scale: number): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=mouseToContainer.d.ts.map

package/dist/utils/mouseToContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouseToContainer.d.ts","sourceRoot":"","sources":["../../src/utils/mouseToContainer.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAC3C,aAAa,EAAE,OAAO,EACtB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,KAAK,EAAE,MAAM;;;EASb"}

package/dist/utils/mouseToContainer.js

@@ -0,0 +1,9 @@
+export function mouseToContainer(mouse, containerSize, mapOffset, scale) {
+    const centerX = containerSize.width / 2;
+    const centerY = containerSize.height / 2;
+    const mouseX = (mouse.clientX - containerSize.x - centerX - mapOffset.x) / scale;
+    const mouseY = (mouse.clientY - containerSize.y - centerY - mapOffset.y) / scale;
+    const normalizedX = (mouseX + centerX) / containerSize.width;
+    const normalizedY = (mouseY + centerY) / containerSize.height;
+    return { x: normalizedX, y: normalizedY };
+}

package/dist/utils/offsetToZoom.d.ts

@@ -0,0 +1,8 @@
+export declare function offsetToZoom(offsetX: number, offsetY: number, containerSize: DOMRect, scale: number): {
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+//# sourceMappingURL=offsetToZoom.d.ts.map

package/dist/utils/offsetToZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"offsetToZoom.d.ts","sourceRoot":"","sources":["../../src/utils/offsetToZoom.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAC3B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,MAAM;;;;;;EAUb"}

package/dist/utils/offsetToZoom.js

@@ -0,0 +1,9 @@
+import { clamp } from 'remeda';
+export function offsetToZoom(offsetX, offsetY, containerSize, scale) {
+    // Constrain offset to never show beyond image bounds
+    const halfScaledWidth = (containerSize.width * scale - containerSize.width) / 2;
+    const halfScaledHeight = (containerSize.height * scale - containerSize.height) / 2;
+    offsetX = clamp(offsetX, { min: -halfScaledWidth, max: halfScaledWidth });
+    offsetY = clamp(offsetY, { min: -halfScaledHeight, max: halfScaledHeight });
+    return { scale, offset: { x: offsetX, y: offsetY } };
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "image-map-route",
+	"version": "0.1.0",
+	"private": false,
+	"type": "module",
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc -p tsconfig.build.json",
+		"publish": "npm publish --access public",
+		"prepack": "npm run build"
+	},
+	"dependencies": {
+		"remeda": "2.33.6",
+		"rooks": "9.5.0"
+	},
+	"peerDependencies": {
+		"react": ">=18"
+	},
+	"devDependencies": {
+		"@types/react": "19.2.14",
+		"typescript": "5.9.3"
+	}
+}