@embedpdf/react 3.0.0-next.4 → 3.0.0-next.5

package/dist/annotation-menu.js

@@ -1,96 +1,45 @@
-import { useCapability, useSelector } from "./runtime.js";
-import { a as sameAnchor, l as useAnnotationSelected, m as positionMenuAroundRect, o as sameCreationDraftAnchor } from "./annotation-BTlcOjcK.js";
+import { useSelector } from "./runtime.js";
+import { Anchored, useProjectorBinding } from "./anchored.js";
+import { sameAnchor, sameCreationDraftAnchor } from "./annotation.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { StageToken } from "@embedpdf/plugin-stage";
+import "react";
 import { AnnotationToken } from "@embedpdf/plugin-annotation/internal";
 //#region src/annotation-menu.tsx
+/**
+* Floats over the current annotation selection (one anchor regardless of
+* cross-page selection), dodging the rotate knob. Compose the contents from
+* hooks: `useAnnotation()` for the verbs, `useAnnotationSelected()` /
+* `useSelectionProps()` for the data.
+*/
 function AnnotationMenu({ children, gap = 15, placement = "top" }) {
-	const stage = useCapability(StageToken);
-	const anno = useCapability(AnnotationToken);
-	useSelector(StageToken, (c) => c.visiblePages());
+	const { projector } = useProjectorBinding();
 	const anchor = useSelector(AnnotationToken, (c) => {
 		const a = c.selectionAnchor();
 		if (!a) return null;
-		const t = stage.pageRect(a.pon)?.transform;
-		return t?.viewScale ? c.selectionAnchor(t.viewScale, t.rotation, t.zoom) : a;
+		const env = projector.viewEnv(a.pon);
+		return env ? c.selectionAnchor(env.scale, env.rotation, env.zoom) : a;
 	}, sameAnchor);
-	const selected = useAnnotationSelected();
-	const ref = useRef(null);
-	useEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		const stop = (e) => e.stopPropagation();
-		el.addEventListener("pointerdown", stop);
-		return () => el.removeEventListener("pointerdown", stop);
-	});
 	if (!anchor) return null;
-	const box = stage.pageRectToScreen(anchor.pon, anchor.bounds);
-	if (!box) return null;
-	const kr = anchor.knob ? stage.pageRectToScreen(anchor.pon, {
-		x: anchor.knob.x,
-		y: anchor.knob.y,
-		width: 0,
-		height: 0
-	}) : null;
-	const pos = positionMenuAroundRect(box, placement, gap, kr ? {
-		x: kr.x,
-		y: kr.y
-	} : null);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		style: {
-			position: "absolute",
-			left: pos.left,
-			top: pos.top,
-			transform: pos.transform,
-			pointerEvents: "auto"
+	return /* @__PURE__ */ jsx(Anchored, {
+		anchor: {
+			pon: anchor.pon,
+			bounds: anchor.bounds,
+			...anchor.knob ? { avoid: [anchor.knob] } : {}
 		},
-		children: children({
-			selected,
-			deleteSelection: anno.deleteSelection,
-			deselect: anno.deselect,
-			updateSelection: anno.updateSelection,
-			rotate90: anno.rotateSelection90,
-			resetRotation: anno.resetSelectionRotation,
-			group: anno.group,
-			ungroup: anno.ungroup,
-			canGroup: anno.canGroup(),
-			canUngroup: anno.canUngroup()
-		})
+		placement,
+		gap,
+		children
 	});
 }
+/** Floats over a live multi-click creation draft (polygon, polyline, …). */
 function AnnotationDraftMenu({ children, gap = 8, placement = "top" }) {
-	const stage = useCapability(StageToken);
-	const anno = useCapability(AnnotationToken);
-	useSelector(StageToken, (c) => c.visiblePages());
 	const anchor = useSelector(AnnotationToken, (c) => c.creationDraftAnchor(), sameCreationDraftAnchor);
-	const ref = useRef(null);
-	useEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		const stop = (e) => e.stopPropagation();
-		el.addEventListener("pointerdown", stop);
-		return () => el.removeEventListener("pointerdown", stop);
-	});
 	if (!anchor) return null;
-	const box = stage.pageRectToScreen(anchor.pon, anchor.bounds);
-	if (!box) return null;
-	const pos = positionMenuAroundRect(box, placement, gap);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		style: {
-			position: "absolute",
-			left: pos.left,
-			top: pos.top,
-			transform: pos.transform,
-			pointerEvents: "auto"
-		},
-		children: children({
-			...anchor,
-			finish: anno.finishCreationDraft,
-			cancel: anno.cancelCreationDraft
-		})
+	return /* @__PURE__ */ jsx(Anchored, {
+		anchor,
+		placement,
+		gap,
+		children: children(anchor)
 	});
 }
 //#endregion

package/dist/annotation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-menu.js","names":["AnnotationHostToken"],"sources":["../src/annotation-menu.tsx"],"sourcesContent":["/**\n * <AnnotationMenu> — the DEFAULT, Stage-bound selection menu.\n *\n * Marker-style: it transforms the selected content rect through the Stage camera\n * and renders an upright menu in viewport space. Mount it in the Stage `overlay`\n * slot. It re-renders on `visiblePages()`, so it tracks pan/zoom and page\n * rotation/layout changes with no DOM measurement, no portal, no scroll listeners.\n *\n * This module is the ONLY annotation menu that imports `@embedpdf/plugin-stage`.\n * For a Stage-free `<PageView>`, use `<PageAnnotationMenu>` from\n * `@embedpdf/react/annotation` instead.\n */\nimport * as React from 'react';\nimport { useEffect, useRef } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage';\nimport { AnnotationToken as AnnotationHostToken } from '@embedpdf/plugin-annotation/internal';\nimport { useCapability, useSelector } from './runtime';\nimport {\n  sameAnchor,\n  sameCreationDraftAnchor,\n  useAnnotationSelected,\n  type AnnotationDraftMenuProps,\n  type AnnotationMenuProps,\n} from './annotation';\nimport { positionMenuAroundRect } from './internal/annotation-menu-position';\n\nexport function AnnotationMenu({ children, gap = 15, placement = 'top' }: AnnotationMenuProps) {\n  const stage = useCapability(StageToken);\n  const anno = useCapability(AnnotationHostToken);\n  // Reposition on pan/zoom AND rotation/layout changes. `visiblePages()` folds in\n  // the scene key, camera, viewport, and DPR, while staying referentially stable.\n  useSelector(StageToken, (c) => c.visiblePages());\n  // Two-step anchor resolve: the pon comes from the scale-less anchor, then the\n  // knob is re-projected with THAT page's view scale so the menu dodges the knob\n  // where it actually renders (screen-constant stalk).\n  const anchor = useSelector(\n    AnnotationHostToken,\n    (c) => {\n      const a = c.selectionAnchor();\n      if (!a) return null;\n      const t = stage.pageRect(a.pon)?.transform;\n      return t?.viewScale ? c.selectionAnchor(t.viewScale, t.rotation, t.zoom) : a;\n    },\n    sameAnchor,\n  );\n  const selected = useAnnotationSelected();\n\n  // Isolate the menu from the Stage's pointer forwarding: a pointerdown inside it\n  // must NOT bubble up to the Stage container's NATIVE listener, which would\n  // forward to the interaction hub and read it as a click-outside → deselect (and\n  // unmount this menu). Native listener (not React's) so it runs during real DOM\n  // bubbling, before the Stage's own native listener on the ancestor. Inner button\n  // `onClick` still fires — `click` is a separate event that reaches React's root.\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const stop = (e: Event) => e.stopPropagation();\n    el.addEventListener('pointerdown', stop);\n    return () => el.removeEventListener('pointerdown', stop);\n  });\n\n  if (!anchor) return null;\n  const box = stage.pageRectToScreen(anchor.pon, anchor.bounds);\n  if (!box) return null;\n  // Transform the knob via a zero-size rect so page rotation is respected; the\n  // menu then nudges only the edge it sits on (and only if the knob protrudes).\n  const kr = anchor.knob\n    ? stage.pageRectToScreen(anchor.pon, {\n        x: anchor.knob.x,\n        y: anchor.knob.y,\n        width: 0,\n        height: 0,\n      })\n    : null;\n  const pos = positionMenuAroundRect(box, placement, gap, kr ? { x: kr.x, y: kr.y } : null);\n  return (\n    <div\n      ref={ref}\n      style={{\n        position: 'absolute',\n        left: pos.left,\n        top: pos.top,\n        transform: pos.transform,\n        pointerEvents: 'auto',\n      }}\n    >\n      {children({\n        selected,\n        deleteSelection: anno.deleteSelection,\n        deselect: anno.deselect,\n        updateSelection: anno.updateSelection,\n        rotate90: anno.rotateSelection90,\n        resetRotation: anno.resetSelectionRotation,\n        group: anno.group,\n        ungroup: anno.ungroup,\n        canGroup: anno.canGroup(),\n        canUngroup: anno.canUngroup(),\n      })}\n    </div>\n  );\n}\n\nexport function AnnotationDraftMenu({\n  children,\n  gap = 8,\n  placement = 'top',\n}: AnnotationDraftMenuProps) {\n  const stage = useCapability(StageToken);\n  const anno = useCapability(AnnotationHostToken);\n  useSelector(StageToken, (c) => c.visiblePages());\n  const anchor = useSelector(\n    AnnotationHostToken,\n    (c) => c.creationDraftAnchor(),\n    sameCreationDraftAnchor,\n  );\n\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const stop = (e: Event) => e.stopPropagation();\n    el.addEventListener('pointerdown', stop);\n    return () => el.removeEventListener('pointerdown', stop);\n  });\n\n  if (!anchor) return null;\n  const box = stage.pageRectToScreen(anchor.pon, anchor.bounds);\n  if (!box) return null;\n  const pos = positionMenuAroundRect(box, placement, gap);\n  return (\n    <div\n      ref={ref}\n      style={{\n        position: 'absolute',\n        left: pos.left,\n        top: pos.top,\n        transform: pos.transform,\n        pointerEvents: 'auto',\n      }}\n    >\n      {children({\n        ...anchor,\n        finish: anno.finishCreationDraft,\n        cancel: anno.cancelCreationDraft,\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,eAAe,EAAE,UAAU,MAAM,IAAI,YAAY,SAA8B;CAC7F,MAAM,QAAQ,cAAc,UAAU;CACtC,MAAM,OAAO,cAAcA,eAAmB;CAG9C,YAAY,aAAa,MAAM,EAAE,aAAa,CAAC;CAI/C,MAAM,SAAS,YACbA,kBACC,MAAM;EACL,MAAM,IAAI,EAAE,gBAAgB;EAC5B,IAAI,CAAC,GAAG,OAAO;EACf,MAAM,IAAI,MAAM,SAAS,EAAE,GAAG,CAAC,EAAE;EACjC,OAAO,GAAG,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,IAAI;CAC7E,GACA,UACF;CACA,MAAM,WAAW,sBAAsB;CAQvC,MAAM,MAAM,OAAuB,IAAI;CACvC,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,QAAQ,MAAa,EAAE,gBAAgB;EAC7C,GAAG,iBAAiB,eAAe,IAAI;EACvC,aAAa,GAAG,oBAAoB,eAAe,IAAI;CACzD,CAAC;CAED,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,MAAM,MAAM,iBAAiB,OAAO,KAAK,OAAO,MAAM;CAC5D,IAAI,CAAC,KAAK,OAAO;CAGjB,MAAM,KAAK,OAAO,OACd,MAAM,iBAAiB,OAAO,KAAK;EACjC,GAAG,OAAO,KAAK;EACf,GAAG,OAAO,KAAK;EACf,OAAO;EACP,QAAQ;CACV,CAAC,IACD;CACJ,MAAM,MAAM,uBAAuB,KAAK,WAAW,KAAK,KAAK;EAAE,GAAG,GAAG;EAAG,GAAG,GAAG;CAAE,IAAI,IAAI;CACxF,OACE,oBAAC,OAAD;EACO;EACL,OAAO;GACL,UAAU;GACV,MAAM,IAAI;GACV,KAAK,IAAI;GACT,WAAW,IAAI;GACf,eAAe;EACjB;EAEC,UAAA,SAAS;GACR;GACA,iBAAiB,KAAK;GACtB,UAAU,KAAK;GACf,iBAAiB,KAAK;GACtB,UAAU,KAAK;GACf,eAAe,KAAK;GACpB,OAAO,KAAK;GACZ,SAAS,KAAK;GACd,UAAU,KAAK,SAAS;GACxB,YAAY,KAAK,WAAW;EAC9B,CAAC;CACE,CAAA;AAET;AAEA,SAAgB,oBAAoB,EAClC,UACA,MAAM,GACN,YAAY,SACe;CAC3B,MAAM,QAAQ,cAAc,UAAU;CACtC,MAAM,OAAO,cAAcA,eAAmB;CAC9C,YAAY,aAAa,MAAM,EAAE,aAAa,CAAC;CAC/C,MAAM,SAAS,YACbA,kBACC,MAAM,EAAE,oBAAoB,GAC7B,uBACF;CAEA,MAAM,MAAM,OAAuB,IAAI;CACvC,gBAAgB;EACd,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,QAAQ,MAAa,EAAE,gBAAgB;EAC7C,GAAG,iBAAiB,eAAe,IAAI;EACvC,aAAa,GAAG,oBAAoB,eAAe,IAAI;CACzD,CAAC;CAED,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,MAAM,MAAM,iBAAiB,OAAO,KAAK,OAAO,MAAM;CAC5D,IAAI,CAAC,KAAK,OAAO;CACjB,MAAM,MAAM,uBAAuB,KAAK,WAAW,GAAG;CACtD,OACE,oBAAC,OAAD;EACO;EACL,OAAO;GACL,UAAU;GACV,MAAM,IAAI;GACV,KAAK,IAAI;GACT,WAAW,IAAI;GACf,eAAe;EACjB;EAEC,UAAA,SAAS;GACR,GAAG;GACH,QAAQ,KAAK;GACb,QAAQ,KAAK;EACf,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"annotation-menu.js","names":["AnnotationHostToken"],"sources":["../src/annotation-menu.tsx"],"sourcesContent":["/**\n * Annotation menus — thin anchor plumbing over the ONE `<Anchored>` primitive.\n *\n * These work identically under `<Stage>` (mount in the overlay slot; the\n * camera projects, no DOM reads) and `<PageView>` (measured + portalled) —\n * the SURFACE provides the projector, the menu doesn't care.\n *\n * No action bags: actions come from the capability hooks (`useAnnotation()`,\n * `useAnnotationSelected()`, …), which subscribe properly and compose across\n * plugins. Render props carry only the ANCHOR'S DATA (the draft menu's\n * progress facts); the annotation-selection menu takes plain children.\n */\nimport * as React from 'react';\nimport { AnnotationToken as AnnotationHostToken } from '@embedpdf/plugin-annotation/internal';\nimport type { CreationDraftAnchor } from '@embedpdf/core-annotation';\nimport { Anchored, useProjectorBinding, type AnchoredPlacement } from './anchored';\nimport { useSelector } from './runtime';\nimport { sameAnchor, sameCreationDraftAnchor } from './annotation';\n\nexport interface AnnotationMenuProps {\n  children: React.ReactNode;\n  /** Gap in screen px between the selection box and the menu (default 15). */\n  gap?: number;\n  /** Where to place the menu relative to the selection box. Default 'top'. */\n  placement?: AnchoredPlacement;\n}\n\n/**\n * Floats over the current annotation selection (one anchor regardless of\n * cross-page selection), dodging the rotate knob. Compose the contents from\n * hooks: `useAnnotation()` for the verbs, `useAnnotationSelected()` /\n * `useSelectionProps()` for the data.\n */\nexport function AnnotationMenu({ children, gap = 15, placement = 'top' }: AnnotationMenuProps) {\n  // Reading the binding subscribes this component to projection changes\n  // (its identity IS the revision), so the anchor read below re-runs with\n  // fresh view facts in the SAME commit as the surface — the knob offset is\n  // screen-constant, so its content-space position depends on the page's\n  // live view scale.\n  const { projector } = useProjectorBinding();\n  const anchor = useSelector(\n    AnnotationHostToken,\n    (c) => {\n      const a = c.selectionAnchor();\n      if (!a) return null;\n      const env = projector.viewEnv(a.pon);\n      return env ? c.selectionAnchor(env.scale, env.rotation, env.zoom) : a;\n    },\n    sameAnchor,\n  );\n  if (!anchor) return null;\n  return (\n    <Anchored\n      anchor={{\n        pon: anchor.pon,\n        bounds: anchor.bounds,\n        ...(anchor.knob ? { avoid: [anchor.knob] } : {}),\n      }}\n      placement={placement}\n      gap={gap}\n    >\n      {children}\n    </Anchored>\n  );\n}\n\nexport interface AnnotationDraftMenuProps {\n  /** Render prop receiving the DRAFT ANCHOR'S DATA (subtype, pointCount,\n   *  minPoints, canFinish, …). The verbs are capability calls:\n   *  `useAnnotation().finishCreationDraft()` / `.cancelCreationDraft()`. */\n  children: (anchor: CreationDraftAnchor) => React.ReactNode;\n  /** Gap in screen px between the draft anchor and the menu (default 8). */\n  gap?: number;\n  /** Where to place the menu relative to the draft anchor. Default 'top'. */\n  placement?: AnchoredPlacement;\n}\n\n/** Floats over a live multi-click creation draft (polygon, polyline, …). */\nexport function AnnotationDraftMenu({\n  children,\n  gap = 8,\n  placement = 'top',\n}: AnnotationDraftMenuProps) {\n  const anchor = useSelector(\n    AnnotationHostToken,\n    (c) => c.creationDraftAnchor(),\n    sameCreationDraftAnchor,\n  );\n  if (!anchor) return null;\n  return (\n    <Anchored anchor={anchor} placement={placement} gap={gap}>\n      {children(anchor)}\n    </Anchored>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiCA,SAAgB,eAAe,EAAE,UAAU,MAAM,IAAI,YAAY,SAA8B;CAM7F,MAAM,EAAE,cAAc,oBAAoB;CAC1C,MAAM,SAAS,YACbA,kBACC,MAAM;EACL,MAAM,IAAI,EAAE,gBAAgB;EAC5B,IAAI,CAAC,GAAG,OAAO;EACf,MAAM,MAAM,UAAU,QAAQ,EAAE,GAAG;EACnC,OAAO,MAAM,EAAE,gBAAgB,IAAI,OAAO,IAAI,UAAU,IAAI,IAAI,IAAI;CACtE,GACA,UACF;CACA,IAAI,CAAC,QAAQ,OAAO;CACpB,OACE,oBAAC,UAAD;EACE,QAAQ;GACN,KAAK,OAAO;GACZ,QAAQ,OAAO;GACf,GAAI,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC;EAChD;EACW;EACN;EAEJ;CACO,CAAA;AAEd;;AAcA,SAAgB,oBAAoB,EAClC,UACA,MAAM,GACN,YAAY,SACe;CAC3B,MAAM,SAAS,YACbA,kBACC,MAAM,EAAE,oBAAoB,GAC7B,uBACF;CACA,IAAI,CAAC,QAAQ,OAAO;CACpB,OACE,oBAAC,UAAD;EAAkB;EAAmB;EAAgB;EAClD,UAAA,SAAS,MAAM;CACR,CAAA;AAEd"}