@embedpdf/plugin-scroll 1.4.1 → 2.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +522 -266
  4. package/dist/index.js.map +1 -1
  5. package/dist/lib/actions.d.ts +30 -27
  6. package/dist/lib/index.d.ts +1 -0
  7. package/dist/lib/reducer.d.ts +3 -4
  8. package/dist/lib/scroll-plugin.d.ts +41 -27
  9. package/dist/lib/selectors.d.ts +2 -2
  10. package/dist/lib/types.d.ts +63 -29
  11. package/dist/preact/adapter.d.ts +1 -1
  12. package/dist/preact/index.cjs +1 -1
  13. package/dist/preact/index.cjs.map +1 -1
  14. package/dist/preact/index.js +33 -114
  15. package/dist/preact/index.js.map +1 -1
  16. package/dist/react/adapter.d.ts +1 -1
  17. package/dist/react/index.cjs +1 -1
  18. package/dist/react/index.cjs.map +1 -1
  19. package/dist/react/index.js +33 -114
  20. package/dist/react/index.js.map +1 -1
  21. package/dist/shared/components/scroller.d.ts +4 -4
  22. package/dist/shared/hooks/use-scroll.d.ts +4 -15
  23. package/dist/shared-preact/components/scroller.d.ts +4 -4
  24. package/dist/shared-preact/hooks/use-scroll.d.ts +4 -15
  25. package/dist/shared-react/components/scroller.d.ts +4 -4
  26. package/dist/shared-react/hooks/use-scroll.d.ts +4 -15
  27. package/dist/svelte/components/Scroller.svelte.d.ts +4 -4
  28. package/dist/svelte/hooks/use-scroll.svelte.d.ts +11 -5
  29. package/dist/svelte/index.cjs +1 -1
  30. package/dist/svelte/index.cjs.map +1 -1
  31. package/dist/svelte/index.js +90 -102
  32. package/dist/svelte/index.js.map +1 -1
  33. package/dist/vue/components/scroller.vue.d.ts +6 -9
  34. package/dist/vue/hooks/use-scroll.d.ts +12 -8
  35. package/dist/vue/index.cjs +1 -1
  36. package/dist/vue/index.cjs.map +1 -1
  37. package/dist/vue/index.js +115 -115
  38. package/dist/vue/index.js.map +1 -1
  39. package/package.json +7 -6
@@ -1,5 +1,5 @@
1
1
  import { BasePluginConfig, EventHook } from '@embedpdf/core';
2
- import { PdfPageObject, Rect, Rotation } from '@embedpdf/models';
2
+ import { PdfPageObjectWithRotatedSize, Rect, Rotation } from '@embedpdf/models';
3
3
  import { ViewportMetrics } from '@embedpdf/plugin-viewport';
4
4
  import { VirtualItem } from './types/virtual-item';
5
5
  export type ScrollBehavior = 'instant' | 'smooth' | 'auto';
@@ -9,29 +9,40 @@ export interface PageChangeState {
9
9
  fromPage: number;
10
10
  startTime: number;
11
11
  }
12
- export interface ScrollState extends ScrollMetrics {
12
+ export interface ScrollDocumentState {
13
13
  virtualItems: VirtualItem[];
14
14
  totalPages: number;
15
+ currentPage: number;
15
16
  totalContentSize: {
16
17
  width: number;
17
18
  height: number;
18
19
  };
19
- desiredScrollPosition: {
20
+ strategy: ScrollStrategy;
21
+ pageGap: number;
22
+ visiblePages: number[];
23
+ pageVisibilityMetrics: PageVisibilityMetrics[];
24
+ renderedPageIndexes: number[];
25
+ scrollOffset: {
20
26
  x: number;
21
27
  y: number;
22
28
  };
23
- strategy: ScrollStrategy;
24
- pageGap: number;
25
- scale: number;
29
+ startSpacing: number;
30
+ endSpacing: number;
26
31
  pageChangeState: PageChangeState;
27
32
  }
33
+ export interface ScrollState {
34
+ defaultStrategy: ScrollStrategy;
35
+ defaultPageGap: number;
36
+ defaultBufferSize: number;
37
+ documents: Record<string, ScrollDocumentState>;
38
+ }
28
39
  export interface ScrollerLayout {
29
40
  startSpacing: number;
30
41
  endSpacing: number;
31
42
  totalWidth: number;
32
43
  totalHeight: number;
33
44
  pageGap: number;
34
- strategy: ScrollState['strategy'];
45
+ strategy: ScrollStrategy;
35
46
  items: VirtualItem[];
36
47
  }
37
48
  export declare enum ScrollStrategy {
@@ -70,22 +81,13 @@ export interface ScrollMetrics {
70
81
  startSpacing: number;
71
82
  endSpacing: number;
72
83
  }
73
- export interface ScrollStrategyInterface {
74
- initialize(container: HTMLElement, innerDiv: HTMLElement): void;
75
- destroy(): void;
76
- updateLayout(viewport: ViewportMetrics, pdfPageObject: PdfPageObject[][]): void;
77
- handleScroll(viewport: ViewportMetrics): void;
78
- getVirtualItems(): VirtualItem[];
79
- scrollToPage(pageNumber: number, behavior?: ScrollBehavior): void;
80
- calculateDimensions(pdfPageObject: PdfPageObject[][]): void;
81
- }
82
84
  export interface ScrollPluginConfig extends BasePluginConfig {
83
- strategy?: ScrollStrategy;
85
+ defaultStrategy?: ScrollStrategy;
86
+ defaultPageGap?: number;
87
+ defaultBufferSize?: number;
84
88
  initialPage?: number;
85
- bufferSize?: number;
86
- pageGap?: number;
87
89
  }
88
- export type LayoutChangePayload = Pick<ScrollState, 'virtualItems' | 'totalContentSize'>;
90
+ export type LayoutChangePayload = Pick<ScrollDocumentState, 'virtualItems' | 'totalContentSize'>;
89
91
  export interface ScrollToPageOptions {
90
92
  pageNumber: number;
91
93
  pageCoordinates?: {
@@ -95,27 +97,59 @@ export interface ScrollToPageOptions {
95
97
  behavior?: ScrollBehavior;
96
98
  center?: boolean;
97
99
  }
98
- export interface PageChangePayload {
100
+ export interface PageChangeEvent {
101
+ documentId: string;
99
102
  pageNumber: number;
100
103
  totalPages: number;
101
104
  }
102
- export interface ScrollCapability {
103
- onStateChange: EventHook<ScrollState>;
104
- onScroll: EventHook<ScrollMetrics>;
105
+ export interface ScrollEvent {
106
+ documentId: string;
107
+ metrics: ScrollMetrics;
108
+ }
109
+ export interface LayoutChangeEvent {
110
+ documentId: string;
111
+ layout: LayoutChangePayload;
112
+ }
113
+ export interface PageChangeStateEvent {
114
+ documentId: string;
115
+ state: PageChangeState;
116
+ }
117
+ export interface LayoutReadyEvent {
118
+ documentId: string;
119
+ }
120
+ export interface ScrollScope {
105
121
  getCurrentPage(): number;
106
122
  getTotalPages(): number;
107
123
  getPageChangeState(): PageChangeState;
108
- onPageChange: EventHook<PageChangePayload>;
109
- onLayoutChange: EventHook<LayoutChangePayload>;
110
- onPageChangeState: EventHook<PageChangeState>;
111
- onLayoutReady: EventHook<boolean>;
112
124
  scrollToPage(options: ScrollToPageOptions): void;
113
125
  scrollToNextPage(behavior?: ScrollBehavior): void;
114
126
  scrollToPreviousPage(behavior?: ScrollBehavior): void;
127
+ getSpreadPagesWithRotatedSize(): PdfPageObjectWithRotatedSize[][];
115
128
  getMetrics(viewport?: ViewportMetrics): ScrollMetrics;
116
129
  getLayout(): LayoutChangePayload;
117
130
  getRectPositionForPage(page: number, rect: Rect, scale?: number, rotation?: Rotation): Rect | null;
118
131
  setScrollStrategy(strategy: ScrollStrategy): void;
132
+ onPageChange: EventHook<PageChangeEvent>;
133
+ onScroll: EventHook<ScrollMetrics>;
134
+ onLayoutChange: EventHook<LayoutChangePayload>;
135
+ }
136
+ export interface ScrollCapability {
137
+ getCurrentPage(): number;
138
+ getTotalPages(): number;
139
+ getPageChangeState(): PageChangeState;
140
+ scrollToPage(options: ScrollToPageOptions): void;
141
+ scrollToNextPage(behavior?: ScrollBehavior): void;
142
+ scrollToPreviousPage(behavior?: ScrollBehavior): void;
143
+ getMetrics(viewport?: ViewportMetrics): ScrollMetrics;
144
+ getLayout(): LayoutChangePayload;
145
+ getRectPositionForPage(page: number, rect: Rect, scale?: number, rotation?: Rotation): Rect | null;
146
+ forDocument(documentId: string): ScrollScope;
147
+ setScrollStrategy(strategy: ScrollStrategy, documentId?: string): void;
119
148
  getPageGap(): number;
120
- getPageChangeState: () => PageChangeState;
149
+ onPageChange: EventHook<PageChangeEvent>;
150
+ onScroll: EventHook<ScrollEvent>;
151
+ onLayoutChange: EventHook<LayoutChangeEvent>;
152
+ onLayoutReady: EventHook<LayoutReadyEvent>;
153
+ onPageChangeState: EventHook<PageChangeStateEvent>;
154
+ onStateChange: EventHook<ScrollDocumentState>;
121
155
  }
@@ -1,4 +1,4 @@
1
1
  export { Fragment } from 'preact';
2
- export { useEffect, useRef, useState } from 'preact/hooks';
2
+ export { useEffect, useRef, useState, useLayoutEffect } from 'preact/hooks';
3
3
  export type { ComponentChildren as ReactNode } from 'preact';
4
4
  export type HTMLAttributes<T = any> = import('preact').JSX.HTMLAttributes<T extends EventTarget ? T : never>;
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("preact");const e=require("preact/hooks"),t=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-scroll"),o=require("preact/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),s=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({renderPage:s,overlayElements:n,...i}){const{plugin:a}=l(),{registry:c}=t.useRegistry(),[g,u]=e.useState((()=>(null==a?void 0:a.getScrollerLayout())??null));if(e.useEffect((()=>{if(a)return a.onScrollerData(u)}),[a]),e.useEffect((()=>{a&&a.setLayoutReady()}),[a]),!g)return null;if(!c)return null;const d=c.getStore().getState();return o.jsxs("div",{...i,style:{width:`${g.totalWidth}px`,height:`${g.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...g.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.startSpacing,height:"100%",flexShrink:0}:{height:g.startSpacing,width:"100%"}}}),o.jsx("div",{style:{gap:g.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...g.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:g.items.map((e=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:g.pageGap},children:e.pageLayouts.map((e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:s({...e,rotation:d.core.rotation,scale:d.core.scale,document:d.core.document})},e.pageNumber)))},e.pageNumbers[0])))}),o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.endSpacing,height:"100%",flexShrink:0}:{height:g.endSpacing,width:"100%"}}}),n]})},exports.useScroll=()=>{const{provides:t}=s(),[r,o]=e.useState(1),[l,n]=e.useState(1);return e.useEffect((()=>{if(t)return t.onPageChange((({pageNumber:e,totalPages:t})=>{o(e),n(t)}))}),[t]),{provides:t,state:{currentPage:r,totalPages:l},get currentPage(){return console.warn("Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead."),r},get totalPages(){return console.warn("Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead."),l},get scrollToPage(){return(null==t?void 0:t.scrollToPage)&&console.warn("Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead."),null==t?void 0:t.scrollToPage},get scrollToNextPage(){return(null==t?void 0:t.scrollToNextPage)&&console.warn("Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead."),null==t?void 0:t.scrollToNextPage},get scrollToPreviousPage(){return(null==t?void 0:t.scrollToPreviousPage)&&console.warn("Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead."),null==t?void 0:t.scrollToPreviousPage},get getMetrics(){return(null==t?void 0:t.getMetrics)&&console.warn("Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead."),null==t?void 0:t.getMetrics},get onPageChange(){return(null==t?void 0:t.onPageChange)&&console.warn("Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead."),null==t?void 0:t.onPageChange},get onScroll(){return(null==t?void 0:t.onScroll)&&console.warn("Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead."),null==t?void 0:t.onScroll},get onLayoutChange(){return(null==t?void 0:t.onLayoutChange)&&console.warn("Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead."),null==t?void 0:t.onLayoutChange},get getCurrentPage(){return(null==t?void 0:t.getCurrentPage)&&console.warn("Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead."),null==t?void 0:t.getCurrentPage},get getTotalPages(){return(null==t?void 0:t.getTotalPages)&&console.warn("Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead."),null==t?void 0:t.getTotalPages}}},exports.useScrollCapability=s,exports.useScrollPlugin=l,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("preact");const e=require("preact/hooks"),t=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-scroll"),o=require("preact/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({documentId:t,renderPage:i,...a}){const{plugin:n}=l(),[s,u]=e.useState({layout:null,docId:null});e.useEffect(()=>{if(!n||!t)return;const e=n.onScrollerData(t,e=>{u({layout:e,docId:t})});return()=>{e(),u({layout:null,docId:null}),n.clearLayoutReady(t)}},[n,t]);const c=s.docId===t?s.layout:null;return e.useLayoutEffect(()=>{n&&t&&c&&n.setLayoutReady(t)},[n,t,c]),c?o.jsxs("div",{...a,style:{width:`${c.totalWidth}px`,height:`${c.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...c.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[o.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.startSpacing,height:"100%",flexShrink:0}:{height:c.startSpacing,width:"100%"}}}),o.jsx("div",{style:{gap:c.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...c.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:c.items.map(e=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:c.pageGap},children:e.pageLayouts.map(e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:i({...e})},e.pageNumber))},e.pageNumbers[0]))}),o.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.endSpacing,height:"100%",flexShrink:0}:{height:c.endSpacing,width:"100%"}}})]}):null},exports.useScroll=t=>{const{provides:r}=i(),[o,l]=e.useState(1),[a,n]=e.useState(1);return e.useEffect(()=>{if(!r||!t)return;const e=r.forDocument(t);return l(e.getCurrentPage()),n(e.getTotalPages()),r.onPageChange(e=>{e.documentId===t&&(l(e.pageNumber),n(e.totalPages))})},[r,t]),{provides:(null==r?void 0:r.forDocument(t))??null,state:{currentPage:o,totalPages:a}}},exports.useScrollCapability=i,exports.useScrollPlugin=l,Object.keys(r).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollCapability | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n // Deprecated properties (for backward compatibility)\n readonly currentPage: number;\n readonly totalPages: number;\n readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n readonly onScroll: ScrollCapability['onScroll'] | undefined;\n readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides) return;\n return provides.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [provides]);\n\n return {\n // New format (preferred)\n provides,\n state: {\n currentPage,\n totalPages,\n },\n\n // Deprecated properties with getters that show warnings\n get currentPage() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage;\n },\n\n get totalPages() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages;\n },\n\n get scrollToPage() {\n if (provides?.scrollToPage) {\n console.warn(\n `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n );\n }\n return provides?.scrollToPage;\n },\n\n get scrollToNextPage() {\n if (provides?.scrollToNextPage) {\n console.warn(\n `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n );\n }\n return provides?.scrollToNextPage;\n },\n\n get scrollToPreviousPage() {\n if (provides?.scrollToPreviousPage) {\n console.warn(\n `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n );\n }\n return provides?.scrollToPreviousPage;\n },\n\n get getMetrics() {\n if (provides?.getMetrics) {\n console.warn(\n `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n );\n }\n return provides?.getMetrics;\n },\n\n get onPageChange() {\n if (provides?.onPageChange) {\n console.warn(\n `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n );\n }\n return provides?.onPageChange;\n },\n\n get onScroll() {\n if (provides?.onScroll) {\n console.warn(\n `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n );\n }\n return provides?.onScroll;\n },\n\n get onLayoutChange() {\n if (provides?.onLayoutChange) {\n console.warn(\n `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n );\n }\n return provides?.onLayoutChange;\n },\n\n get getCurrentPage() {\n if (provides?.getCurrentPage) {\n console.warn(\n `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n );\n }\n return provides?.getCurrentPage;\n },\n\n get getTotalPages() {\n if (provides?.getTotalPages) {\n console.warn(\n `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n );\n }\n return provides?.getTotalPages;\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollPlugin?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n return scrollPlugin.onScrollerData(setScrollerLayout);\n }, [scrollPlugin]);\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n scrollPlugin.setLayoutReady();\n }, [scrollPlugin]);\n\n if (!scrollerLayout) return null;\n if (!registry) return null;\n\n const coreState = registry.getStore().getState();\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n rotation: coreState.core.rotation,\n scale: coreState.core.scale,\n document: coreState.core.document,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n {overlayElements}\n </div>\n );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","renderPage","overlayElements","props","plugin","scrollPlugin","registry","useRegistry","scrollerLayout","setScrollerLayout","useState","getScrollerLayout","useEffect","onScrollerData","setLayoutReady","coreState","getStore","getState","jsxRuntime","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","layout","rotatedWidth","rotatedHeight","rotation","core","scale","document","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","onPageChange","state","console","warn","scrollToPage","scrollToNextPage","scrollToPreviousPage","getMetrics","onScroll","onLayoutChange","getCurrentPage","getTotalPages"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\nexport const useScroll = (documentId: string): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides || !documentId) return;\n\n const scope = provides.forDocument(documentId);\n setCurrentPage(scope.getCurrentPage());\n setTotalPages(scope.getTotalPages());\n\n return provides.onPageChange((event) => {\n if (event.documentId === documentId) {\n setCurrentPage(event.pageNumber);\n setTotalPages(event.totalPages);\n }\n });\n }, [provides, documentId]);\n\n return {\n // New format (preferred)\n provides: provides?.forDocument(documentId) ?? null,\n state: {\n currentPage,\n totalPages,\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const [layoutData, setLayoutData] = useState<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n useEffect(() => {\n if (!scrollPlugin || !documentId) return;\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n setLayoutData({ layout: newLayout, docId: documentId });\n });\n\n // When the component unmounts or documentId changes, clear the state\n return () => {\n unsubscribe();\n setLayoutData({ layout: null, docId: null });\n scrollPlugin.clearLayoutReady(documentId);\n };\n }, [scrollPlugin, documentId]);\n\n const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n useLayoutEffect(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n }, [scrollPlugin, documentId, scrollerLayout]);\n\n if (!scrollerLayout) return null;\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n </div>\n );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"0OAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,mBAGnBf,SAAA/B,EAAW,IACPO,KAPAA,EAAOwC,cATXL,EAAKM,YAAY,OAuB5BhB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemC,WACtB5B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemC,WACvB9B,MAAO,cApFO,IA0F9B,oBDnH0BpB,IACxB,MAAMmD,SAAEA,GAAarD,KACdsD,EAAaC,GAAkB9C,EAAAA,SAAS,IACxC+C,EAAYC,GAAiBhD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAKyC,IAAanD,EAAY,OAE9B,MAAMwD,EAAQL,EAASM,YAAYzD,GAInC,OAHAqD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM7D,aAAeA,IACvBqD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUnD,IAEP,CAELmD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAYzD,KAAe,KAC/C8D,MAAO,CACLV,cACAE"}
@@ -1,133 +1,56 @@
1
1
  import "preact";
2
- import { useState, useEffect } from "preact/hooks";
3
- import { usePlugin, useCapability, useRegistry } from "@embedpdf/core/preact";
2
+ import { useState, useEffect, useLayoutEffect } from "preact/hooks";
3
+ import { usePlugin, useCapability } from "@embedpdf/core/preact";
4
4
  import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
5
5
  export * from "@embedpdf/plugin-scroll";
6
6
  import { jsxs, jsx } from "preact/jsx-runtime";
7
7
  const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
8
8
  const useScrollCapability = () => useCapability(ScrollPlugin.id);
9
- const useScroll = () => {
9
+ const useScroll = (documentId) => {
10
10
  const { provides } = useScrollCapability();
11
11
  const [currentPage, setCurrentPage] = useState(1);
12
12
  const [totalPages, setTotalPages] = useState(1);
13
13
  useEffect(() => {
14
- if (!provides) return;
15
- return provides.onPageChange(({ pageNumber, totalPages: totalPages2 }) => {
16
- setCurrentPage(pageNumber);
17
- setTotalPages(totalPages2);
14
+ if (!provides || !documentId) return;
15
+ const scope = provides.forDocument(documentId);
16
+ setCurrentPage(scope.getCurrentPage());
17
+ setTotalPages(scope.getTotalPages());
18
+ return provides.onPageChange((event) => {
19
+ if (event.documentId === documentId) {
20
+ setCurrentPage(event.pageNumber);
21
+ setTotalPages(event.totalPages);
22
+ }
18
23
  });
19
- }, [provides]);
24
+ }, [provides, documentId]);
20
25
  return {
21
26
  // New format (preferred)
22
- provides,
27
+ provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null,
23
28
  state: {
24
29
  currentPage,
25
30
  totalPages
26
- },
27
- // Deprecated properties with getters that show warnings
28
- get currentPage() {
29
- console.warn(
30
- `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`
31
- );
32
- return currentPage;
33
- },
34
- get totalPages() {
35
- console.warn(
36
- `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`
37
- );
38
- return totalPages;
39
- },
40
- get scrollToPage() {
41
- if (provides == null ? void 0 : provides.scrollToPage) {
42
- console.warn(
43
- `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`
44
- );
45
- }
46
- return provides == null ? void 0 : provides.scrollToPage;
47
- },
48
- get scrollToNextPage() {
49
- if (provides == null ? void 0 : provides.scrollToNextPage) {
50
- console.warn(
51
- `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`
52
- );
53
- }
54
- return provides == null ? void 0 : provides.scrollToNextPage;
55
- },
56
- get scrollToPreviousPage() {
57
- if (provides == null ? void 0 : provides.scrollToPreviousPage) {
58
- console.warn(
59
- `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`
60
- );
61
- }
62
- return provides == null ? void 0 : provides.scrollToPreviousPage;
63
- },
64
- get getMetrics() {
65
- if (provides == null ? void 0 : provides.getMetrics) {
66
- console.warn(
67
- `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`
68
- );
69
- }
70
- return provides == null ? void 0 : provides.getMetrics;
71
- },
72
- get onPageChange() {
73
- if (provides == null ? void 0 : provides.onPageChange) {
74
- console.warn(
75
- `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`
76
- );
77
- }
78
- return provides == null ? void 0 : provides.onPageChange;
79
- },
80
- get onScroll() {
81
- if (provides == null ? void 0 : provides.onScroll) {
82
- console.warn(
83
- `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`
84
- );
85
- }
86
- return provides == null ? void 0 : provides.onScroll;
87
- },
88
- get onLayoutChange() {
89
- if (provides == null ? void 0 : provides.onLayoutChange) {
90
- console.warn(
91
- `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`
92
- );
93
- }
94
- return provides == null ? void 0 : provides.onLayoutChange;
95
- },
96
- get getCurrentPage() {
97
- if (provides == null ? void 0 : provides.getCurrentPage) {
98
- console.warn(
99
- `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`
100
- );
101
- }
102
- return provides == null ? void 0 : provides.getCurrentPage;
103
- },
104
- get getTotalPages() {
105
- if (provides == null ? void 0 : provides.getTotalPages) {
106
- console.warn(
107
- `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`
108
- );
109
- }
110
- return provides == null ? void 0 : provides.getTotalPages;
111
31
  }
112
32
  };
113
33
  };
114
- function Scroller({ renderPage, overlayElements, ...props }) {
34
+ function Scroller({ documentId, renderPage, ...props }) {
115
35
  const { plugin: scrollPlugin } = useScrollPlugin();
116
- const { registry } = useRegistry();
117
- const [scrollerLayout, setScrollerLayout] = useState(
118
- () => (scrollPlugin == null ? void 0 : scrollPlugin.getScrollerLayout()) ?? null
119
- );
36
+ const [layoutData, setLayoutData] = useState({ layout: null, docId: null });
120
37
  useEffect(() => {
121
- if (!scrollPlugin) return;
122
- return scrollPlugin.onScrollerData(setScrollerLayout);
123
- }, [scrollPlugin]);
124
- useEffect(() => {
125
- if (!scrollPlugin) return;
126
- scrollPlugin.setLayoutReady();
127
- }, [scrollPlugin]);
38
+ if (!scrollPlugin || !documentId) return;
39
+ const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {
40
+ setLayoutData({ layout: newLayout, docId: documentId });
41
+ });
42
+ return () => {
43
+ unsubscribe();
44
+ setLayoutData({ layout: null, docId: null });
45
+ scrollPlugin.clearLayoutReady(documentId);
46
+ };
47
+ }, [scrollPlugin, documentId]);
48
+ const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;
49
+ useLayoutEffect(() => {
50
+ if (!scrollPlugin || !documentId || !scrollerLayout) return;
51
+ scrollPlugin.setLayoutReady(documentId);
52
+ }, [scrollPlugin, documentId, scrollerLayout]);
128
53
  if (!scrollerLayout) return null;
129
- if (!registry) return null;
130
- const coreState = registry.getStore().getState();
131
54
  return /* @__PURE__ */ jsxs(
132
55
  "div",
133
56
  {
@@ -192,10 +115,7 @@ function Scroller({ renderPage, overlayElements, ...props }) {
192
115
  height: `${layout.rotatedHeight}px`
193
116
  },
194
117
  children: renderPage({
195
- ...layout,
196
- rotation: coreState.core.rotation,
197
- scale: coreState.core.scale,
198
- document: coreState.core.document
118
+ ...layout
199
119
  })
200
120
  },
201
121
  layout.pageNumber
@@ -219,8 +139,7 @@ function Scroller({ renderPage, overlayElements, ...props }) {
219
139
  }
220
140
  }
221
141
  }
222
- ),
223
- overlayElements
142
+ )
224
143
  ]
225
144
  }
226
145
  );
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollCapability | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n // Deprecated properties (for backward compatibility)\n readonly currentPage: number;\n readonly totalPages: number;\n readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n readonly onScroll: ScrollCapability['onScroll'] | undefined;\n readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides) return;\n return provides.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [provides]);\n\n return {\n // New format (preferred)\n provides,\n state: {\n currentPage,\n totalPages,\n },\n\n // Deprecated properties with getters that show warnings\n get currentPage() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage;\n },\n\n get totalPages() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages;\n },\n\n get scrollToPage() {\n if (provides?.scrollToPage) {\n console.warn(\n `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n );\n }\n return provides?.scrollToPage;\n },\n\n get scrollToNextPage() {\n if (provides?.scrollToNextPage) {\n console.warn(\n `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n );\n }\n return provides?.scrollToNextPage;\n },\n\n get scrollToPreviousPage() {\n if (provides?.scrollToPreviousPage) {\n console.warn(\n `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n );\n }\n return provides?.scrollToPreviousPage;\n },\n\n get getMetrics() {\n if (provides?.getMetrics) {\n console.warn(\n `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n );\n }\n return provides?.getMetrics;\n },\n\n get onPageChange() {\n if (provides?.onPageChange) {\n console.warn(\n `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n );\n }\n return provides?.onPageChange;\n },\n\n get onScroll() {\n if (provides?.onScroll) {\n console.warn(\n `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n );\n }\n return provides?.onScroll;\n },\n\n get onLayoutChange() {\n if (provides?.onLayoutChange) {\n console.warn(\n `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n );\n }\n return provides?.onLayoutChange;\n },\n\n get getCurrentPage() {\n if (provides?.getCurrentPage) {\n console.warn(\n `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n );\n }\n return provides?.getCurrentPage;\n },\n\n get getTotalPages() {\n if (provides?.getTotalPages) {\n console.warn(\n `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n );\n }\n return provides?.getTotalPages;\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollPlugin?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n return scrollPlugin.onScrollerData(setScrollerLayout);\n }, [scrollPlugin]);\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n scrollPlugin.setLayoutReady();\n }, [scrollPlugin]);\n\n if (!scrollerLayout) return null;\n if (!registry) return null;\n\n const coreState = registry.getStore().getState();\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n rotation: coreState.core.rotation,\n scale: coreState.core.scale,\n document: coreState.core.document,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n {overlayElements}\n </div>\n );\n}\n"],"names":["totalPages"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\nexport const useScroll = (documentId: string): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides || !documentId) return;\n\n const scope = provides.forDocument(documentId);\n setCurrentPage(scope.getCurrentPage());\n setTotalPages(scope.getTotalPages());\n\n return provides.onPageChange((event) => {\n if (event.documentId === documentId) {\n setCurrentPage(event.pageNumber);\n setTotalPages(event.totalPages);\n }\n });\n }, [provides, documentId]);\n\n return {\n // New format (preferred)\n provides: provides?.forDocument(documentId) ?? null,\n state: {\n currentPage,\n totalPages,\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const [layoutData, setLayoutData] = useState<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n useEffect(() => {\n if (!scrollPlugin || !documentId) return;\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n setLayoutData({ layout: newLayout, docId: documentId });\n });\n\n // When the component unmounts or documentId changes, clear the state\n return () => {\n unsubscribe();\n setLayoutData({ layout: null, docId: null });\n scrollPlugin.clearLayoutReady(documentId);\n };\n }, [scrollPlugin, documentId]);\n\n const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n useLayoutEffect(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n }, [scrollPlugin, documentId, scrollerLayout]);\n\n if (!scrollerLayout) return null;\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- export { Fragment, useEffect, useRef, useState } from 'react';
1
+ export { Fragment, useEffect, useRef, useState, useLayoutEffect } from 'react';
2
2
  export type { ReactNode, HTMLAttributes } from 'react';
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-scroll"),o=require("react/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),s=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({renderPage:s,overlayElements:n,...i}){const{plugin:a}=l(),{registry:c}=t.useRegistry(),[g,u]=e.useState((()=>(null==a?void 0:a.getScrollerLayout())??null));if(e.useEffect((()=>{if(a)return a.onScrollerData(u)}),[a]),e.useEffect((()=>{a&&a.setLayoutReady()}),[a]),!g)return null;if(!c)return null;const d=c.getStore().getState();return o.jsxs("div",{...i,style:{width:`${g.totalWidth}px`,height:`${g.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...g.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.startSpacing,height:"100%",flexShrink:0}:{height:g.startSpacing,width:"100%"}}}),o.jsx("div",{style:{gap:g.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...g.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:g.items.map((e=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:g.pageGap},children:e.pageLayouts.map((e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:s({...e,rotation:d.core.rotation,scale:d.core.scale,document:d.core.document})},e.pageNumber)))},e.pageNumbers[0])))}),o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.endSpacing,height:"100%",flexShrink:0}:{height:g.endSpacing,width:"100%"}}}),n]})},exports.useScroll=()=>{const{provides:t}=s(),[r,o]=e.useState(1),[l,n]=e.useState(1);return e.useEffect((()=>{if(t)return t.onPageChange((({pageNumber:e,totalPages:t})=>{o(e),n(t)}))}),[t]),{provides:t,state:{currentPage:r,totalPages:l},get currentPage(){return console.warn("Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead."),r},get totalPages(){return console.warn("Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead."),l},get scrollToPage(){return(null==t?void 0:t.scrollToPage)&&console.warn("Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead."),null==t?void 0:t.scrollToPage},get scrollToNextPage(){return(null==t?void 0:t.scrollToNextPage)&&console.warn("Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead."),null==t?void 0:t.scrollToNextPage},get scrollToPreviousPage(){return(null==t?void 0:t.scrollToPreviousPage)&&console.warn("Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead."),null==t?void 0:t.scrollToPreviousPage},get getMetrics(){return(null==t?void 0:t.getMetrics)&&console.warn("Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead."),null==t?void 0:t.getMetrics},get onPageChange(){return(null==t?void 0:t.onPageChange)&&console.warn("Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead."),null==t?void 0:t.onPageChange},get onScroll(){return(null==t?void 0:t.onScroll)&&console.warn("Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead."),null==t?void 0:t.onScroll},get onLayoutChange(){return(null==t?void 0:t.onLayoutChange)&&console.warn("Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead."),null==t?void 0:t.onLayoutChange},get getCurrentPage(){return(null==t?void 0:t.getCurrentPage)&&console.warn("Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead."),null==t?void 0:t.getCurrentPage},get getTotalPages(){return(null==t?void 0:t.getTotalPages)&&console.warn("Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead."),null==t?void 0:t.getTotalPages}}},exports.useScrollCapability=s,exports.useScrollPlugin=l,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-scroll"),l=require("react/jsx-runtime"),o=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({documentId:t,renderPage:i,...a}){const{plugin:n}=o(),[s,u]=e.useState({layout:null,docId:null});e.useEffect(()=>{if(!n||!t)return;const e=n.onScrollerData(t,e=>{u({layout:e,docId:t})});return()=>{e(),u({layout:null,docId:null}),n.clearLayoutReady(t)}},[n,t]);const c=s.docId===t?s.layout:null;return e.useLayoutEffect(()=>{n&&t&&c&&n.setLayoutReady(t)},[n,t,c]),c?l.jsxs("div",{...a,style:{width:`${c.totalWidth}px`,height:`${c.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...c.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[l.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.startSpacing,height:"100%",flexShrink:0}:{height:c.startSpacing,width:"100%"}}}),l.jsx("div",{style:{gap:c.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...c.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:c.items.map(e=>l.jsx("div",{style:{display:"flex",justifyContent:"center",gap:c.pageGap},children:e.pageLayouts.map(e=>l.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:i({...e})},e.pageNumber))},e.pageNumbers[0]))}),l.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.endSpacing,height:"100%",flexShrink:0}:{height:c.endSpacing,width:"100%"}}})]}):null},exports.useScroll=t=>{const{provides:r}=i(),[l,o]=e.useState(1),[a,n]=e.useState(1);return e.useEffect(()=>{if(!r||!t)return;const e=r.forDocument(t);return o(e.getCurrentPage()),n(e.getTotalPages()),r.onPageChange(e=>{e.documentId===t&&(o(e.pageNumber),n(e.totalPages))})},[r,t]),{provides:(null==r?void 0:r.forDocument(t))??null,state:{currentPage:l,totalPages:a}}},exports.useScrollCapability=i,exports.useScrollPlugin=o,Object.keys(r).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollCapability | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n // Deprecated properties (for backward compatibility)\n readonly currentPage: number;\n readonly totalPages: number;\n readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n readonly onScroll: ScrollCapability['onScroll'] | undefined;\n readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides) return;\n return provides.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [provides]);\n\n return {\n // New format (preferred)\n provides,\n state: {\n currentPage,\n totalPages,\n },\n\n // Deprecated properties with getters that show warnings\n get currentPage() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage;\n },\n\n get totalPages() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages;\n },\n\n get scrollToPage() {\n if (provides?.scrollToPage) {\n console.warn(\n `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n );\n }\n return provides?.scrollToPage;\n },\n\n get scrollToNextPage() {\n if (provides?.scrollToNextPage) {\n console.warn(\n `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n );\n }\n return provides?.scrollToNextPage;\n },\n\n get scrollToPreviousPage() {\n if (provides?.scrollToPreviousPage) {\n console.warn(\n `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n );\n }\n return provides?.scrollToPreviousPage;\n },\n\n get getMetrics() {\n if (provides?.getMetrics) {\n console.warn(\n `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n );\n }\n return provides?.getMetrics;\n },\n\n get onPageChange() {\n if (provides?.onPageChange) {\n console.warn(\n `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n );\n }\n return provides?.onPageChange;\n },\n\n get onScroll() {\n if (provides?.onScroll) {\n console.warn(\n `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n );\n }\n return provides?.onScroll;\n },\n\n get onLayoutChange() {\n if (provides?.onLayoutChange) {\n console.warn(\n `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n );\n }\n return provides?.onLayoutChange;\n },\n\n get getCurrentPage() {\n if (provides?.getCurrentPage) {\n console.warn(\n `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n );\n }\n return provides?.getCurrentPage;\n },\n\n get getTotalPages() {\n if (provides?.getTotalPages) {\n console.warn(\n `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n );\n }\n return provides?.getTotalPages;\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollPlugin?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n return scrollPlugin.onScrollerData(setScrollerLayout);\n }, [scrollPlugin]);\n\n useEffect(() => {\n if (!scrollPlugin) return;\n\n scrollPlugin.setLayoutReady();\n }, [scrollPlugin]);\n\n if (!scrollerLayout) return null;\n if (!registry) return null;\n\n const coreState = registry.getStore().getState();\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n rotation: coreState.core.rotation,\n scale: coreState.core.scale,\n document: coreState.core.document,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n {overlayElements}\n </div>\n );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","renderPage","overlayElements","props","plugin","scrollPlugin","registry","useRegistry","scrollerLayout","setScrollerLayout","useState","getScrollerLayout","useEffect","onScrollerData","setLayoutReady","coreState","getStore","getState","jsxRuntime","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","layout","rotatedWidth","rotatedHeight","rotation","core","scale","document","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","onPageChange","state","console","warn","scrollToPage","scrollToNextPage","scrollToPreviousPage","getMetrics","onScroll","onLayoutChange","getCurrentPage","getTotalPages"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\nexport const useScroll = (documentId: string): UseScrollReturn => {\n const { provides } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!provides || !documentId) return;\n\n const scope = provides.forDocument(documentId);\n setCurrentPage(scope.getCurrentPage());\n setTotalPages(scope.getTotalPages());\n\n return provides.onPageChange((event) => {\n if (event.documentId === documentId) {\n setCurrentPage(event.pageNumber);\n setTotalPages(event.totalPages);\n }\n });\n }, [provides, documentId]);\n\n return {\n // New format (preferred)\n provides: provides?.forDocument(documentId) ?? null,\n state: {\n currentPage,\n totalPages,\n },\n };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n const { plugin: scrollPlugin } = useScrollPlugin();\n const [layoutData, setLayoutData] = useState<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n useEffect(() => {\n if (!scrollPlugin || !documentId) return;\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n setLayoutData({ layout: newLayout, docId: documentId });\n });\n\n // When the component unmounts or documentId changes, clear the state\n return () => {\n unsubscribe();\n setLayoutData({ layout: null, docId: null });\n scrollPlugin.clearLayoutReady(documentId);\n };\n }, [scrollPlugin, documentId]);\n\n const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n useLayoutEffect(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n }, [scrollPlugin, documentId, scrollerLayout]);\n\n if (!scrollerLayout) return null;\n\n return (\n <div\n {...props}\n style={{\n width: `${scrollerLayout.totalWidth}px`,\n height: `${scrollerLayout.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n }}\n >\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.startSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.startSpacing,\n width: '100%',\n }),\n }}\n />\n <div\n style={{\n gap: scrollerLayout.pageGap,\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n flexDirection: 'row',\n minHeight: '100%',\n }\n : {\n flexDirection: 'column',\n minWidth: 'fit-content',\n }),\n }}\n >\n {scrollerLayout.items.map((item) => (\n <div\n key={item.pageNumbers[0]}\n style={{\n display: 'flex',\n justifyContent: 'center',\n gap: scrollerLayout.pageGap,\n }}\n >\n {item.pageLayouts.map((layout) => (\n <div\n key={layout.pageNumber}\n style={{\n width: `${layout.rotatedWidth}px`,\n height: `${layout.rotatedHeight}px`,\n }}\n >\n {renderPage({\n ...layout,\n })}\n </div>\n ))}\n </div>\n ))}\n </div>\n <div\n style={{\n ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? {\n width: scrollerLayout.endSpacing,\n height: '100%',\n flexShrink: 0,\n }\n : {\n height: scrollerLayout.endSpacing,\n width: '100%',\n }),\n }}\n />\n </div>\n );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"+MAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,mBAGnBf,SAAA/B,EAAW,IACPO,KAPAA,EAAOwC,cATXL,EAAKM,YAAY,OAuB5BhB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemC,WACtB5B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemC,WACvB9B,MAAO,cApFO,IA0F9B,oBDnH0BpB,IACxB,MAAMmD,SAAEA,GAAarD,KACdsD,EAAaC,GAAkB9C,EAAAA,SAAS,IACxC+C,EAAYC,GAAiBhD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAKyC,IAAanD,EAAY,OAE9B,MAAMwD,EAAQL,EAASM,YAAYzD,GAInC,OAHAqD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM7D,aAAeA,IACvBqD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUnD,IAEP,CAELmD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAYzD,KAAe,KAC/C8D,MAAO,CACLV,cACAE"}