pdf-mapview 0.1.0

package/dist/client/index.cjs

@@ -0,0 +1,1155 @@
+'use strict';
+
+var react = require('react');
+var zod = require('zod');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/client/components/TileMapViewer.tsx
+var normalizedPointSchema = zod.z.object({
+  x: zod.z.number().finite().min(0).max(1),
+  y: zod.z.number().finite().min(0).max(1)
+});
+var normalizedRectSchema = zod.z.object({
+  x: zod.z.number().finite().min(0).max(1),
+  y: zod.z.number().finite().min(0).max(1),
+  width: zod.z.number().finite().min(0).max(1),
+  height: zod.z.number().finite().min(0).max(1)
+});
+var regionFeatureSchema = zod.z.object({
+  id: zod.z.string().min(1),
+  geometry: zod.z.discriminatedUnion("type", [
+    zod.z.object({
+      type: zod.z.literal("polygon"),
+      points: zod.z.array(normalizedPointSchema).min(3)
+    }),
+    zod.z.object({
+      type: zod.z.literal("rectangle"),
+      rect: normalizedRectSchema
+    }),
+    zod.z.object({
+      type: zod.z.literal("point"),
+      point: normalizedPointSchema,
+      radius: zod.z.number().finite().positive().optional()
+    }),
+    zod.z.object({
+      type: zod.z.literal("label"),
+      point: normalizedPointSchema,
+      text: zod.z.string().min(1)
+    })
+  ]),
+  label: zod.z.string().optional(),
+  metadata: zod.z.record(zod.z.unknown()).optional()
+});
+var regionCollectionSchema = zod.z.object({
+  type: zod.z.literal("FeatureCollection"),
+  regions: zod.z.array(regionFeatureSchema)
+});
+function normalizeRegions(input) {
+  if (!input) {
+    return [];
+  }
+  if (Array.isArray(input)) {
+    return input;
+  }
+  return input.regions;
+}
+
+// src/client/core/ViewportStore.ts
+var defaultViewState = {
+  center: { x: 0.5, y: 0.5 },
+  zoom: 1,
+  minZoom: 0,
+  maxZoom: 6,
+  containerWidth: 0,
+  containerHeight: 0
+};
+var ViewportStore = class {
+  state = defaultViewState;
+  listeners = /* @__PURE__ */ new Set();
+  getSnapshot() {
+    return this.state;
+  }
+  setState(state) {
+    this.state = state;
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+};
+
+// src/client/core/overlayProjection.ts
+function projectRegion(controller, region) {
+  const bounds = getRegionBounds(region);
+  switch (region.geometry.type) {
+    case "polygon": {
+      const points = region.geometry.points.map((point) => controller.normalizedToScreen(point));
+      return {
+        bounds,
+        path: points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ") + " Z",
+        points
+      };
+    }
+    case "rectangle": {
+      const topLeft = controller.normalizedToScreen({
+        x: region.geometry.rect.x,
+        y: region.geometry.rect.y
+      });
+      const bottomRight = controller.normalizedToScreen({
+        x: region.geometry.rect.x + region.geometry.rect.width,
+        y: region.geometry.rect.y + region.geometry.rect.height
+      });
+      return {
+        bounds,
+        rect: {
+          x: topLeft.x,
+          y: topLeft.y,
+          width: bottomRight.x - topLeft.x,
+          height: bottomRight.y - topLeft.y
+        }
+      };
+    }
+    case "point": {
+      const center = controller.normalizedToScreen(region.geometry.point);
+      return {
+        bounds,
+        center
+      };
+    }
+    case "label": {
+      const center = controller.normalizedToScreen(region.geometry.point);
+      return {
+        bounds,
+        center,
+        text: region.geometry.text
+      };
+    }
+  }
+}
+function getRegionBounds(region) {
+  return getGeometryBounds(region.geometry);
+}
+function getGeometryBounds(geometry) {
+  switch (geometry.type) {
+    case "rectangle":
+      return geometry.rect;
+    case "point":
+      return {
+        x: geometry.point.x,
+        y: geometry.point.y,
+        width: 0,
+        height: 0
+      };
+    case "label":
+      return {
+        x: geometry.point.x,
+        y: geometry.point.y,
+        width: 0,
+        height: 0
+      };
+    case "polygon": {
+      const xs = geometry.points.map((point) => point.x);
+      const ys = geometry.points.map((point) => point.y);
+      const minX = Math.min(...xs);
+      const minY = Math.min(...ys);
+      const maxX = Math.max(...xs);
+      const maxY = Math.max(...ys);
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    }
+  }
+}
+
+// src/client/core/MapController.ts
+var MapController = class {
+  store = new ViewportStore();
+  engine = null;
+  regions = [];
+  attachEngine(engine) {
+    this.engine = engine;
+  }
+  detachEngine(engine) {
+    if (this.engine === engine) {
+      this.engine = null;
+    }
+  }
+  setRegions(regions) {
+    this.regions = regions;
+  }
+  getView() {
+    if (this.engine) {
+      return this.engine.getView();
+    }
+    return this.store.getSnapshot();
+  }
+  setView(view, options) {
+    this.engine?.setView(view, options);
+  }
+  fitToBounds(bounds, options) {
+    this.engine?.fitToBounds(bounds, options);
+  }
+  zoomToRegion(regionId, options) {
+    const region = this.regions.find((candidate) => candidate.id === regionId);
+    if (!region) {
+      return;
+    }
+    this.fitToBounds(getRegionBounds(region), options);
+  }
+  screenToNormalized(point) {
+    return this.engine?.screenToNormalized(point) ?? { x: 0, y: 0 };
+  }
+  normalizedToScreen(point) {
+    return this.engine?.normalizedToScreen(point) ?? { x: 0, y: 0 };
+  }
+  resize() {
+    this.engine?.resize();
+  }
+};
+var MapRuntimeContext = react.createContext(null);
+
+// src/client/hooks/useMapApi.ts
+function useMapApi() {
+  return react.useContext(MapRuntimeContext)?.controller ?? null;
+}
+function useViewportState() {
+  const runtime = react.useContext(MapRuntimeContext);
+  if (!runtime) {
+    throw new Error("useViewportState must be used within a TileMapViewer");
+  }
+  return react.useSyncExternalStore(
+    (listener) => runtime.controller.store.subscribe(listener),
+    () => runtime.controller.store.getSnapshot()
+  );
+}
+function RegionLabelLayer({ region, projected }) {
+  if (!projected.center || !projected.text && !region.label) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: projected.center.x,
+        top: projected.center.y,
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none",
+        color: "#111827",
+        background: "rgba(255,255,255,0.92)",
+        padding: "2px 6px",
+        borderRadius: 6,
+        fontSize: 12,
+        lineHeight: 1.3,
+        border: "1px solid rgba(17,24,39,0.15)",
+        whiteSpace: "nowrap"
+      },
+      children: projected.text ?? region.label
+    }
+  );
+}
+function OverlayLayer(props) {
+  const api = useMapApi();
+  const view = useViewportState();
+  const projected = react.useMemo(() => {
+    if (!api) {
+      return [];
+    }
+    return props.regions.map((region) => ({
+      region,
+      projected: projectRegion(api, region)
+    }));
+  }, [api, props.regions, view]);
+  if (!api) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "visible"
+            },
+            children: projected.map(({ region, projected: projected2 }) => {
+              const isHovered = props.hoveredRegionId === region.id;
+              const isSelected = props.selectedRegionId === region.id;
+              const getLocalPoint = (event) => {
+                const rect = (event.currentTarget.ownerSVGElement ?? event.currentTarget).getBoundingClientRect();
+                return {
+                  x: event.clientX - rect.left,
+                  y: event.clientY - rect.top
+                };
+              };
+              const onPointerMove = (event) => {
+                const localPoint = getLocalPoint(event);
+                props.onRegionHover?.(region, {
+                  screenPoint: localPoint,
+                  normalizedPoint: api.screenToNormalized(localPoint),
+                  nativeEvent: event
+                });
+              };
+              const onClick = (event) => {
+                const localPoint = getLocalPoint(event);
+                props.onRegionClick?.(region, {
+                  screenPoint: localPoint,
+                  normalizedPoint: api.screenToNormalized(localPoint),
+                  nativeEvent: event
+                });
+              };
+              const custom = props.renderRegion?.({
+                region,
+                projected: projected2,
+                isHovered,
+                isSelected
+              });
+              if (custom) {
+                return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: custom }, region.id);
+              }
+              const sharedProps = {
+                onClick,
+                onPointerMove,
+                onPointerLeave: (event) => {
+                  const localPoint = getLocalPoint(event);
+                  props.onRegionHover?.(null, {
+                    screenPoint: localPoint,
+                    nativeEvent: event
+                  });
+                },
+                style: {
+                  pointerEvents: "auto",
+                  cursor: "pointer"
+                },
+                fill: isSelected ? "rgba(37,99,235,0.24)" : isHovered ? "rgba(37,99,235,0.18)" : "rgba(37,99,235,0.12)",
+                stroke: isSelected ? "#1d4ed8" : "#2563eb",
+                strokeWidth: isSelected ? 2 : 1.5
+              };
+              switch (region.geometry.type) {
+                case "polygon":
+                  return /* @__PURE__ */ jsxRuntime.jsx("path", { d: projected2.path, ...sharedProps }, region.id);
+                case "rectangle":
+                  if (!projected2.rect) return null;
+                  return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: projected2.rect.x, y: projected2.rect.y, width: projected2.rect.width, height: projected2.rect.height, ...sharedProps }, region.id);
+                case "point":
+                  if (!projected2.center) return null;
+                  return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: projected2.center.x, cy: projected2.center.y, r: region.geometry.radius ?? 8, ...sharedProps }, region.id);
+                case "label":
+                  return null;
+              }
+            })
+          }
+        ),
+        projected.map(({ region, projected: projected2 }) => /* @__PURE__ */ jsxRuntime.jsx(RegionLabelLayer, { region, projected: projected2 }, `${region.id}:label`))
+      ]
+    }
+  );
+}
+
+// src/shared/coordinates.ts
+function clamp01(value) {
+  return Math.min(1, Math.max(0, value));
+}
+var tileLevelSchema = zod.z.object({
+  z: zod.z.number().int().min(0),
+  width: zod.z.number().int().positive(),
+  height: zod.z.number().int().positive(),
+  columns: zod.z.number().int().positive(),
+  rows: zod.z.number().int().positive(),
+  scale: zod.z.number().positive()
+});
+zod.z.object({
+  version: zod.z.literal(1),
+  kind: zod.z.literal("pdf-map"),
+  id: zod.z.string().min(1),
+  source: zod.z.object({
+    type: zod.z.union([zod.z.literal("pdf"), zod.z.literal("image")]),
+    originalFilename: zod.z.string().optional(),
+    page: zod.z.number().int().positive().optional(),
+    width: zod.z.number().int().positive(),
+    height: zod.z.number().int().positive(),
+    mimeType: zod.z.string().optional()
+  }),
+  coordinateSpace: zod.z.object({
+    normalized: zod.z.literal(true),
+    width: zod.z.number().int().positive(),
+    height: zod.z.number().int().positive()
+  }),
+  tiles: zod.z.object({
+    tileSize: zod.z.number().int().positive(),
+    format: zod.z.union([zod.z.literal("webp"), zod.z.literal("jpeg"), zod.z.literal("png")]),
+    minZoom: zod.z.number().int().min(0),
+    maxZoom: zod.z.number().int().min(0),
+    pathTemplate: zod.z.string().min(1),
+    levels: zod.z.array(tileLevelSchema)
+  }),
+  view: zod.z.object({
+    defaultCenter: zod.z.tuple([
+      zod.z.number().finite().min(0).max(1),
+      zod.z.number().finite().min(0).max(1)
+    ]),
+    defaultZoom: zod.z.number().finite(),
+    minZoom: zod.z.number().finite(),
+    maxZoom: zod.z.number().finite()
+  }),
+  overlays: zod.z.object({
+    inline: regionCollectionSchema.optional(),
+    url: zod.z.string().optional()
+  }).optional(),
+  assets: zod.z.object({
+    preview: zod.z.string().optional()
+  }).optional(),
+  metadata: zod.z.object({
+    title: zod.z.string().optional(),
+    createdAt: zod.z.string().optional()
+  }).catchall(zod.z.unknown()).optional()
+});
+function resolveTileUrl(args) {
+  const template = args.overrideTemplate ?? args.manifest.tiles.pathTemplate;
+  const relative = template.replaceAll("{z}", String(args.z)).replaceAll("{x}", String(args.x)).replaceAll("{y}", String(args.y));
+  if (/^https?:\/\//.test(relative)) {
+    return relative;
+  }
+  if (!args.baseUrl) {
+    return relative;
+  }
+  if (/^https?:\/\//.test(args.baseUrl)) {
+    return new URL(relative.replace(/^\//, ""), ensureTrailingSlash(args.baseUrl)).toString();
+  }
+  return joinRelativeUrl(args.baseUrl, relative);
+}
+function ensureTrailingSlash(value) {
+  return value.endsWith("/") ? value : `${value}/`;
+}
+function joinRelativeUrl(baseUrl, path) {
+  const normalizedBase = ensureLeadingSlash(stripTrailingSlash(baseUrl));
+  const normalizedPath = stripLeadingSlash(path);
+  if (!normalizedPath) {
+    return normalizedBase || "/";
+  }
+  return normalizedBase ? `${normalizedBase}/${normalizedPath}` : `/${normalizedPath}`;
+}
+function stripLeadingSlash(value) {
+  return value.replace(/^\/+/, "");
+}
+function stripTrailingSlash(value) {
+  return value.replace(/\/+$/, "");
+}
+function ensureLeadingSlash(value) {
+  if (!value) {
+    return "";
+  }
+  return value.startsWith("/") ? value : `/${value}`;
+}
+
+// src/client/engines/openSeadragonEngine.ts
+async function createOpenSeadragonEngine(options) {
+  throwIfAborted(options.signal);
+  const OpenSeadragon = await import('openseadragon');
+  throwIfAborted(options.signal);
+  if (!options.container.isConnected) {
+    throw createAbortError();
+  }
+  const osd = OpenSeadragon.default;
+  const viewer = osd({
+    element: options.container,
+    showNavigationControl: false,
+    minZoomLevel: options.minZoom,
+    maxZoomLevel: options.maxZoom,
+    visibilityRatio: 1,
+    constrainDuringPan: true,
+    animationTime: 0.2,
+    gestureSettingsMouse: {
+      clickToZoom: false,
+      dblClickToZoom: true,
+      pinchToZoom: true,
+      flickEnabled: true,
+      scrollToZoom: true
+    },
+    tileSources: createTileSource(options.source)
+  });
+  if (options.signal?.aborted || !options.container.isConnected) {
+    viewer.destroy();
+    throw createAbortError();
+  }
+  let isOpen = false;
+  const publish = () => {
+    options.onViewChange?.(getView());
+  };
+  viewer.addHandler("open", () => {
+    isOpen = true;
+    if (options.initialView?.center) {
+      viewer.viewport.panTo(
+        imageToViewportPoint(options.initialView.center.x, options.initialView.center.y),
+        true
+      );
+    }
+    if (typeof options.initialView?.zoom === "number") {
+      viewer.viewport.zoomTo(options.initialView.zoom, void 0, true);
+    }
+    publish();
+  });
+  viewer.addHandler("animation", publish);
+  viewer.addHandler("resize", publish);
+  const dimensions = getDimensions(options.source);
+  const defaultView = getDefaultView(options, dimensions);
+  const getItem = () => {
+    const item = viewer.world.getItemAt(0);
+    return item && typeof item.viewportToImageCoordinates === "function" ? item : null;
+  };
+  const getContainerSize = () => {
+    const containerSize = viewer.container.getBoundingClientRect();
+    return {
+      width: containerSize.width,
+      height: containerSize.height
+    };
+  };
+  const imageToViewportPoint = (x, y) => {
+    const item = getItem();
+    if (!item) {
+      return new osd.Point(x, y);
+    }
+    return item.imageToViewportCoordinates(x * dimensions.width, y * dimensions.height);
+  };
+  const getView = () => {
+    const item = getItem();
+    const containerSize = getContainerSize();
+    if (!isOpen || !item) {
+      return {
+        ...defaultView,
+        containerWidth: containerSize.width,
+        containerHeight: containerSize.height
+      };
+    }
+    const center = viewer.viewport.getCenter(true);
+    const imageCenter = item.viewportToImageCoordinates(center);
+    return {
+      center: {
+        x: clamp01(imageCenter.x / dimensions.width),
+        y: clamp01(imageCenter.y / dimensions.height)
+      },
+      zoom: viewer.viewport.getZoom(true),
+      minZoom: options.minZoom ?? 0,
+      maxZoom: options.maxZoom ?? 8,
+      containerWidth: containerSize.width,
+      containerHeight: containerSize.height
+    };
+  };
+  const engine = {
+    getView,
+    setView(view, transitionOptions) {
+      if (!isOpen || !getItem()) {
+        return;
+      }
+      if (view.center) {
+        viewer.viewport.panTo(
+          imageToViewportPoint(view.center.x, view.center.y),
+          transitionOptions?.immediate ?? false
+        );
+      }
+      if (typeof view.zoom === "number") {
+        viewer.viewport.zoomTo(view.zoom, void 0, transitionOptions?.immediate ?? false);
+      }
+      publish();
+    },
+    fitToBounds(bounds, transitionOptions) {
+      const item = getItem();
+      if (!isOpen || !item) {
+        return;
+      }
+      if (!bounds) {
+        viewer.viewport.goHome(transitionOptions?.immediate ?? false);
+        publish();
+        return;
+      }
+      const topLeft = item.imageToViewportCoordinates(
+        bounds.x * dimensions.width,
+        bounds.y * dimensions.height
+      );
+      const bottomRight = item.imageToViewportCoordinates(
+        (bounds.x + bounds.width) * dimensions.width,
+        (bounds.y + bounds.height) * dimensions.height
+      );
+      viewer.viewport.fitBounds(
+        new osd.Rect(
+          topLeft.x,
+          topLeft.y,
+          bottomRight.x - topLeft.x || 0.01,
+          bottomRight.y - topLeft.y || 0.01
+        ),
+        transitionOptions?.immediate ?? false
+      );
+      publish();
+    },
+    screenToNormalized(point) {
+      const item = getItem();
+      if (!isOpen || !item) {
+        const size = getContainerSize();
+        return {
+          x: size.width > 0 ? clamp01(point.x / size.width) : 0,
+          y: size.height > 0 ? clamp01(point.y / size.height) : 0
+        };
+      }
+      const viewportPoint = viewer.viewport.pointFromPixel(
+        new osd.Point(point.x, point.y),
+        true
+      );
+      const imagePoint = item.viewportToImageCoordinates(viewportPoint);
+      return {
+        x: clamp01(imagePoint.x / dimensions.width),
+        y: clamp01(imagePoint.y / dimensions.height)
+      };
+    },
+    normalizedToScreen(point) {
+      if (!isOpen || !getItem()) {
+        const size = getContainerSize();
+        return {
+          x: point.x * size.width,
+          y: point.y * size.height
+        };
+      }
+      const viewportPoint = imageToViewportPoint(point.x, point.y);
+      const pixel = viewer.viewport.pixelFromPoint(viewportPoint, true);
+      return {
+        x: pixel.x,
+        y: pixel.y
+      };
+    },
+    destroy() {
+      isOpen = false;
+      viewer.destroy();
+    },
+    resize() {
+      viewer.forceRedraw();
+      publish();
+    },
+    getContainer() {
+      return options.container;
+    }
+  };
+  return engine;
+}
+function throwIfAborted(signal) {
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+}
+function createAbortError() {
+  const error = new Error("Viewer initialization aborted.");
+  error.name = "AbortError";
+  return error;
+}
+function getDefaultView(options, dimensions) {
+  const manifestView = options.source.type === "tiles" ? options.source.manifest.view : void 0;
+  return {
+    center: options.initialView?.center ?? normalizedCenterFromSource(options.source),
+    zoom: options.initialView?.zoom ?? manifestView?.defaultZoom ?? 1,
+    minZoom: options.minZoom ?? manifestView?.minZoom ?? 0,
+    maxZoom: options.maxZoom ?? manifestView?.maxZoom ?? 8,
+    containerWidth: dimensions.width,
+    containerHeight: dimensions.height
+  };
+}
+function normalizedCenterFromSource(source) {
+  if (source.type === "tiles") {
+    return {
+      x: source.manifest.view.defaultCenter[0],
+      y: source.manifest.view.defaultCenter[1]
+    };
+  }
+  return { x: 0.5, y: 0.5 };
+}
+function createTileSource(source) {
+  if (source.type === "tiles") {
+    const manifest = source.manifest;
+    return {
+      width: manifest.source.width,
+      height: manifest.source.height,
+      tileSize: manifest.tiles.tileSize,
+      minLevel: manifest.tiles.minZoom,
+      maxLevel: manifest.tiles.maxZoom,
+      getTileUrl(level, x, y) {
+        if (source.getTileUrl) {
+          return source.getTileUrl({
+            manifest,
+            z: level,
+            x,
+            y
+          });
+        }
+        return resolveTileUrl({
+          manifest,
+          z: level,
+          x,
+          y,
+          baseUrl: source.baseUrl
+        });
+      }
+    };
+  }
+  if (source.type === "image") {
+    return {
+      type: "image",
+      url: source.src,
+      buildPyramid: false
+    };
+  }
+  throw new Error("OpenSeadragon engine only supports tile and image sources.");
+}
+function getDimensions(source) {
+  if (source.type === "tiles") {
+    return {
+      width: source.manifest.source.width,
+      height: source.manifest.source.height
+    };
+  }
+  if (source.type === "image") {
+    return {
+      width: source.width,
+      height: source.height
+    };
+  }
+  throw new Error("OpenSeadragon engine only supports image and tile sources.");
+}
+
+// src/shared/bytes.ts
+function toUint8Array(input) {
+  if (input instanceof ArrayBuffer) {
+    return new Uint8Array(input);
+  }
+  return new Uint8Array(input.buffer, input.byteOffset, input.byteLength);
+}
+
+// src/client/engines/pdfJsEngine.ts
+async function createPdfJsEngine(options) {
+  if (options.source.type !== "pdf") {
+    throw new Error("PDF.js engine only supports PDF sources.");
+  }
+  throwIfAborted2(options.signal);
+  const pdfjs = await import('pdfjs-dist/build/pdf.mjs');
+  throwIfAborted2(options.signal);
+  if (!options.container.isConnected) {
+    throw createAbortError2();
+  }
+  const file = options.source.file;
+  const loadingTask = pdfjs.getDocument(
+    typeof file === "string" ? {
+      url: file
+    } : {
+      data: toUint8Array(file)
+    }
+  );
+  const pdf = await loadingTask.promise;
+  if (options.signal?.aborted || !options.container.isConnected) {
+    loadingTask.destroy?.();
+    await pdf.destroy();
+    throw createAbortError2();
+  }
+  const page = await pdf.getPage(options.source.page ?? 1);
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to get 2D context for PDF canvas.");
+  }
+  options.container.innerHTML = "";
+  options.container.style.overflow = "hidden";
+  options.container.style.touchAction = "none";
+  options.container.appendChild(canvas);
+  const baseViewport = page.getViewport({ scale: 1 });
+  const containerRect = options.container.getBoundingClientRect();
+  const fitScale = containerRect.width > 0 && containerRect.height > 0 ? Math.min(containerRect.width / baseViewport.width, containerRect.height / baseViewport.height) : 1;
+  const renderScale = Math.max(1, fitScale);
+  const renderedViewport = page.getViewport({ scale: renderScale });
+  canvas.width = Math.ceil(renderedViewport.width);
+  canvas.height = Math.ceil(renderedViewport.height);
+  canvas.style.transformOrigin = "0 0";
+  canvas.style.willChange = "transform";
+  await page.render({
+    canvasContext: context,
+    viewport: renderedViewport
+  }).promise;
+  let view = {
+    center: options.initialView?.center ?? { x: 0.5, y: 0.5 },
+    zoom: options.initialView?.zoom ?? 1,
+    minZoom: options.minZoom ?? 0.5,
+    maxZoom: options.maxZoom ?? 8,
+    containerWidth: containerRect.width,
+    containerHeight: containerRect.height
+  };
+  let pan = { x: 0, y: 0 };
+  let dragging = false;
+  let dragOrigin = { x: 0, y: 0 };
+  const publish = () => {
+    options.onViewChange?.({ ...view });
+  };
+  const applyTransform = () => {
+    const rect = options.container.getBoundingClientRect();
+    view = {
+      ...view,
+      containerWidth: rect.width,
+      containerHeight: rect.height
+    };
+    canvas.style.transform = `translate(${pan.x}px, ${pan.y}px) scale(${view.zoom})`;
+    publish();
+  };
+  const normalizedToCanvas = (point) => ({
+    x: point.x * canvas.width,
+    y: point.y * canvas.height
+  });
+  const screenToNormalized = (point) => {
+    const localX = (point.x - pan.x) / view.zoom;
+    const localY = (point.y - pan.y) / view.zoom;
+    return {
+      x: clamp01(localX / canvas.width),
+      y: clamp01(localY / canvas.height)
+    };
+  };
+  const handlePointerDown = (event) => {
+    dragging = true;
+    dragOrigin = { x: event.clientX - pan.x, y: event.clientY - pan.y };
+  };
+  const handlePointerMove = (event) => {
+    if (!dragging) {
+      return;
+    }
+    pan = {
+      x: event.clientX - dragOrigin.x,
+      y: event.clientY - dragOrigin.y
+    };
+    applyTransform();
+  };
+  const handlePointerUp = () => {
+    dragging = false;
+  };
+  const handleWheel = (event) => {
+    event.preventDefault();
+    const delta = event.deltaY < 0 ? 1.1 : 0.9;
+    const nextZoom = Math.min(view.maxZoom, Math.max(view.minZoom, view.zoom * delta));
+    view = {
+      ...view,
+      zoom: nextZoom
+    };
+    applyTransform();
+  };
+  options.container.addEventListener("pointerdown", handlePointerDown);
+  window.addEventListener("pointermove", handlePointerMove);
+  window.addEventListener("pointerup", handlePointerUp);
+  options.container.addEventListener("wheel", handleWheel, { passive: false });
+  applyTransform();
+  const engine = {
+    getView() {
+      return { ...view };
+    },
+    setView(nextView, transitionOptions) {
+      if (nextView.center) {
+        view = { ...view, center: nextView.center };
+      }
+      if (typeof nextView.zoom === "number") {
+        view = {
+          ...view,
+          zoom: Math.min(view.maxZoom, Math.max(view.minZoom, nextView.zoom))
+        };
+      }
+      if (nextView.minZoom) {
+        view = { ...view, minZoom: nextView.minZoom };
+      }
+      if (nextView.maxZoom) {
+        view = { ...view, maxZoom: nextView.maxZoom };
+      }
+      if (transitionOptions?.immediate === false) {
+        requestAnimationFrame(applyTransform);
+      } else {
+        applyTransform();
+      }
+    },
+    fitToBounds(bounds) {
+      if (!bounds) {
+        view = { ...view, center: { x: 0.5, y: 0.5 }, zoom: 1 };
+        pan = { x: 0, y: 0 };
+        applyTransform();
+        return;
+      }
+      const rect = options.container.getBoundingClientRect();
+      const zoomX = rect.width / (bounds.width * canvas.width || canvas.width);
+      const zoomY = rect.height / (bounds.height * canvas.height || canvas.height);
+      const nextZoom = Math.min(view.maxZoom, Math.max(view.minZoom, Math.min(zoomX, zoomY)));
+      const centerX = (bounds.x + bounds.width / 2) * canvas.width * nextZoom;
+      const centerY = (bounds.y + bounds.height / 2) * canvas.height * nextZoom;
+      pan = {
+        x: rect.width / 2 - centerX,
+        y: rect.height / 2 - centerY
+      };
+      view = {
+        ...view,
+        center: {
+          x: bounds.x + bounds.width / 2,
+          y: bounds.y + bounds.height / 2
+        },
+        zoom: nextZoom
+      };
+      applyTransform();
+    },
+    screenToNormalized,
+    normalizedToScreen(point) {
+      const local = normalizedToCanvas(point);
+      return {
+        x: pan.x + local.x * view.zoom,
+        y: pan.y + local.y * view.zoom
+      };
+    },
+    destroy() {
+      options.container.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      options.container.removeEventListener("wheel", handleWheel);
+      loadingTask.destroy?.();
+    },
+    resize() {
+      applyTransform();
+    },
+    getContainer() {
+      return options.container;
+    }
+  };
+  return engine;
+}
+function throwIfAborted2(signal) {
+  if (signal?.aborted) {
+    throw createAbortError2();
+  }
+}
+function createAbortError2() {
+  const error = new Error("Viewer initialization aborted.");
+  error.name = "AbortError";
+  return error;
+}
+var TileMapViewer = react.forwardRef(function TileMapViewer2(props, ref) {
+  const containerRef = react.useRef(null);
+  const controller = react.useMemo(() => new MapController(), []);
+  const [hoveredRegionId, setHoveredRegionId] = react.useState(null);
+  const sourceRef = react.useRef(props.source);
+  const initialViewRef = react.useRef(props.initialView);
+  const onViewChangeRef = react.useRef(props.onViewChange);
+  sourceRef.current = props.source;
+  initialViewRef.current = props.initialView;
+  onViewChangeRef.current = props.onViewChange;
+  const regions = react.useMemo(() => normalizeRegions(props.regions), [props.regions]);
+  const sourceKey = react.useMemo(() => getSourceKey(props.source), [props.source]);
+  const initialViewKey = react.useMemo(() => getInitialViewKey(props.initialView), [props.initialView]);
+  const mapApi = react.useMemo(
+    () => ({
+      getView: () => controller.getView(),
+      setView: (view, opts) => controller.setView(view, opts),
+      fitToBounds: (bounds, opts) => controller.fitToBounds(bounds, opts),
+      zoomToRegion: (regionId, opts) => controller.zoomToRegion(regionId, opts),
+      screenToNormalized: (point) => controller.screenToNormalized(point),
+      normalizedToScreen: (point) => controller.normalizedToScreen(point)
+    }),
+    [controller]
+  );
+  react.useEffect(() => {
+    controller.setRegions(regions);
+  }, [controller, regions]);
+  react.useImperativeHandle(ref, () => mapApi, [mapApi]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const abortController = new AbortController();
+    let activeEngine = null;
+    const onViewChange = (view) => {
+      controller.store.setState(view);
+      onViewChangeRef.current?.(view);
+    };
+    const createEngine = async () => {
+      try {
+        const source = sourceRef.current;
+        const initialView = initialViewRef.current;
+        if (abortController.signal.aborted || containerRef.current !== container || !container.isConnected) {
+          return;
+        }
+        const engine = source.type === "pdf" ? await createPdfJsEngine({
+          container,
+          source,
+          minZoom: props.minZoom,
+          maxZoom: props.maxZoom,
+          initialView,
+          onViewChange,
+          signal: abortController.signal
+        }) : await createOpenSeadragonEngine({
+          container,
+          source,
+          minZoom: props.minZoom,
+          maxZoom: props.maxZoom,
+          initialView,
+          onViewChange,
+          signal: abortController.signal
+        });
+        if (abortController.signal.aborted || containerRef.current !== container || !container.isConnected) {
+          engine.destroy();
+          return;
+        }
+        activeEngine = engine;
+        controller.attachEngine(engine);
+      } catch (error) {
+        if (!(error instanceof Error) || error.name !== "AbortError") {
+          console.error(error);
+        }
+      }
+    };
+    void createEngine();
+    const resizeObserver = new ResizeObserver(() => {
+      controller.resize();
+    });
+    resizeObserver.observe(container);
+    return () => {
+      abortController.abort();
+      resizeObserver.disconnect();
+      if (activeEngine) {
+        controller.detachEngine(activeEngine);
+        activeEngine.destroy();
+      }
+      if (containerRef.current === container) {
+        container.innerHTML = "";
+      }
+    };
+  }, [controller, initialViewKey, props.maxZoom, props.minZoom, sourceKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MapRuntimeContext.Provider,
+    {
+      value: {
+        controller,
+        regions
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: props.className,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            minHeight: 320,
+            background: "#f8fafc",
+            overflow: "hidden",
+            ...props.style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: containerRef,
+                style: {
+                  position: "absolute",
+                  inset: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OverlayLayer,
+              {
+                regions,
+                selectedRegionId: props.selectedRegionId,
+                hoveredRegionId,
+                onRegionClick: props.onRegionClick,
+                onRegionHover: (region, event) => {
+                  setHoveredRegionId(region?.id ?? null);
+                  props.onRegionHover?.(region, event);
+                },
+                renderRegion: props.renderRegion
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+var objectIdCache = /* @__PURE__ */ new WeakMap();
+var nextObjectId = 1;
+function getSourceKey(source) {
+  switch (source.type) {
+    case "tiles":
+      return JSON.stringify({
+        type: source.type,
+        manifestId: source.manifest.id,
+        width: source.manifest.source.width,
+        height: source.manifest.source.height,
+        pathTemplate: source.manifest.tiles.pathTemplate,
+        minZoom: source.manifest.tiles.minZoom,
+        maxZoom: source.manifest.tiles.maxZoom,
+        baseUrl: source.baseUrl ?? null,
+        getTileUrl: source.getTileUrl ? getObjectId(source.getTileUrl) : null
+      });
+    case "image":
+      return JSON.stringify({
+        type: source.type,
+        src: source.src,
+        width: source.width,
+        height: source.height
+      });
+    case "pdf":
+      return JSON.stringify({
+        type: source.type,
+        page: source.page ?? 1,
+        file: typeof source.file === "string" ? source.file : getObjectId(source.file)
+      });
+  }
+}
+function getInitialViewKey(initialView) {
+  if (!initialView) {
+    return "null";
+  }
+  return JSON.stringify({
+    center: initialView.center ? {
+      x: initialView.center.x,
+      y: initialView.center.y
+    } : null,
+    zoom: initialView.zoom ?? null,
+    minZoom: initialView.minZoom ?? null,
+    maxZoom: initialView.maxZoom ?? null
+  });
+}
+function getObjectId(value) {
+  const existing = objectIdCache.get(value);
+  if (existing) {
+    return existing;
+  }
+  const id = nextObjectId;
+  nextObjectId += 1;
+  objectIdCache.set(value, id);
+  return id;
+}
+var PdfMap = react.forwardRef(function PdfMap2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TileMapViewer, { ref, ...props });
+});
+function useRegions() {
+  return react.useContext(MapRuntimeContext)?.regions ?? [];
+}
+
+exports.PdfMap = PdfMap;
+exports.TileMapViewer = TileMapViewer;
+exports.useMapApi = useMapApi;
+exports.useRegions = useRegions;
+exports.useViewportState = useViewportState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map