@embedpdf/plugin-scroll 1.3.16 → 1.4.1
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.
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js.map +1 -1
- package/dist/shared/components/index.d.ts +2 -0
- package/dist/shared/components/scroller.d.ts +8 -0
- package/dist/shared/hooks/index.d.ts +1 -0
- package/dist/shared/hooks/use-scroll.d.ts +31 -0
- package/dist/shared/index.d.ts +3 -0
- package/dist/shared/types.d.ts +7 -0
- package/dist/shared-preact/components/index.d.ts +1 -0
- package/dist/shared-preact/components/scroller.d.ts +1 -7
- package/dist/shared-preact/types.d.ts +7 -0
- package/dist/shared-react/components/index.d.ts +1 -0
- package/dist/shared-react/components/scroller.d.ts +1 -7
- package/dist/shared-react/types.d.ts +7 -0
- package/dist/svelte/components/Scroller.svelte.d.ts +10 -0
- package/dist/svelte/components/index.d.ts +2 -0
- package/dist/svelte/hooks/index.d.ts +1 -0
- package/dist/svelte/hooks/use-scroll.svelte.d.ts +18 -0
- package/dist/svelte/index.cjs +2 -0
- package/dist/svelte/index.cjs.map +1 -0
- package/dist/svelte/index.d.ts +3 -0
- package/dist/svelte/index.js +170 -0
- package/dist/svelte/index.js.map +1 -0
- package/dist/vue/components/index.d.ts +1 -0
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.js.map +1 -1
- package/package.json +16 -8
|
@@ -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, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollPlugin } from '../hooks';\n\nexport interface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\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 { 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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"}
|
package/dist/preact/index.js.map
CHANGED
|
@@ -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, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollPlugin } from '../hooks';\n\nexport interface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\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 { 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":";;;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAuB7E,MAAM,YAAY,MAAuB;AACxC,QAAA,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,WAAO,SAAS,aAAa,CAAC,EAAE,YAAY,YAAAA,kBAAiB;AAC3D,qBAAe,UAAU;AACzB,oBAAcA,WAAU;AAAA,IAAA,CACzB;AAAA,EAAA,GACA,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA;AAAA,IAEL;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA;AAAA,IAGA,IAAI,cAAc;AACR,cAAA;AAAA,QACN;AAAA,MACF;AACO,aAAA;AAAA,IACT;AAAA,IAEA,IAAI,aAAa;AACP,cAAA;AAAA,QACN;AAAA,MACF;AACO,aAAA;AAAA,IACT;AAAA,IAEA,IAAI,eAAe;AACjB,UAAI,qCAAU,cAAc;AAClB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,mBAAmB;AACrB,UAAI,qCAAU,kBAAkB;AACtB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,uBAAuB;AACzB,UAAI,qCAAU,sBAAsB;AAC1B,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,aAAa;AACf,UAAI,qCAAU,YAAY;AAChB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,eAAe;AACjB,UAAI,qCAAU,cAAc;AAClB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,WAAW;AACb,UAAI,qCAAU,UAAU;AACd,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,iBAAiB;AACnB,UAAI,qCAAU,gBAAgB;AACpB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,iBAAiB;AACnB,UAAI,qCAAU,gBAAgB;AACpB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IACnB;AAAA,IAEA,IAAI,gBAAgB;AAClB,UAAI,qCAAU,eAAe;AACnB,gBAAA;AAAA,UACN;AAAA,QACF;AAAA,MAAA;AAEF,aAAO,qCAAU;AAAA,IAAA;AAAA,EAErB;AACF;ACrIO,SAAS,SAAS,EAAE,YAAY,iBAAiB,GAAG,SAAwB;AACjF,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAC3C,QAAA,EAAE,SAAS,IAAI,YAAY;AAC3B,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C,OAAM,6CAAc,wBAAuB;AAAA,EAC7C;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEZ,WAAA,aAAa,eAAe,iBAAiB;AAAA,EAAA,GACnD,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEnB,iBAAa,eAAe;AAAA,EAAA,GAC3B,CAAC,YAAY,CAAC;AAEb,MAAA,CAAC,eAAuB,QAAA;AACxB,MAAA,CAAC,SAAiB,QAAA;AAEtB,QAAM,YAAY,SAAS,SAAS,EAAE,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,OAAO,GAAG,eAAe,UAAU;AAAA,QACnC,QAAQ,GAAG,eAAe,WAAW;AAAA,QACrC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,GAAI,eAAe,aAAa,eAAe,cAAc;AAAA,UAC3D,SAAS;AAAA,UACT,eAAe;AAAA,QAAA;AAAA,MAEnB;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAI,eAAe,aAAa,eAAe,aAC3C;AAAA,gBACE,OAAO,eAAe;AAAA,gBACtB,QAAQ;AAAA,gBACR,YAAY;AAAA,cAAA,IAEd;AAAA,gBACE,QAAQ,eAAe;AAAA,gBACvB,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UACN;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,KAAK,eAAe;AAAA,cACpB,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,GAAI,eAAe,aAAa,eAAe,aAC3C;AAAA,gBACE,eAAe;AAAA,gBACf,WAAW;AAAA,cAAA,IAEb;AAAA,gBACE,eAAe;AAAA,gBACf,UAAU;AAAA,cAAA;AAAA,YAElB;AAAA,YAEC,UAAe,eAAA,MAAM,IAAI,CAAC,SACzB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,KAAK,eAAe;AAAA,gBACtB;AAAA,gBAEC,UAAK,KAAA,YAAY,IAAI,CAAC,WACrB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,OAAO;AAAA,sBACL,OAAO,GAAG,OAAO,YAAY;AAAA,sBAC7B,QAAQ,GAAG,OAAO,aAAa;AAAA,oBACjC;AAAA,oBAEC,UAAW,WAAA;AAAA,sBACV,GAAG;AAAA,sBACH,UAAU,UAAU,KAAK;AAAA,sBACzB,OAAO,UAAU,KAAK;AAAA,sBACtB,UAAU,UAAU,KAAK;AAAA,oBAC1B,CAAA;AAAA,kBAAA;AAAA,kBAXI,OAAO;AAAA,gBAaf,CAAA;AAAA,cAAA;AAAA,cAtBI,KAAK,YAAY,CAAC;AAAA,YAwB1B,CAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAI,eAAe,aAAa,eAAe,aAC3C;AAAA,gBACE,OAAO,eAAe;AAAA,gBACtB,QAAQ;AAAA,gBACR,YAAY;AAAA,cAAA,IAEd;AAAA,gBACE,QAAQ,eAAe;AAAA,gBACvB,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UACN;AAAA,QACF;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
package/dist/react/index.cjs.map
CHANGED
|
@@ -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, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollPlugin } from '../hooks';\n\nexport interface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\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 { 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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"}
|
package/dist/react/index.js.map
CHANGED
|
@@ -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, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollPlugin } from '../hooks';\n\nexport interface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\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 { 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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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode, HTMLAttributes } from '../../react/adapter.ts';
|
|
2
|
+
import { RenderPageProps } from '../types';
|
|
3
|
+
type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
4
|
+
renderPage: (props: RenderPageProps) => ReactNode;
|
|
5
|
+
overlayElements?: ReactNode[];
|
|
6
|
+
};
|
|
7
|
+
export declare function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-scroll';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ScrollCapability, ScrollPlugin } from '../../index.ts';
|
|
2
|
+
export declare const useScrollPlugin: () => {
|
|
3
|
+
plugin: ScrollPlugin | null;
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
ready: Promise<void>;
|
|
6
|
+
};
|
|
7
|
+
export declare const useScrollCapability: () => {
|
|
8
|
+
provides: Readonly<ScrollCapability> | null;
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
ready: Promise<void>;
|
|
11
|
+
};
|
|
12
|
+
interface UseScrollReturn {
|
|
13
|
+
provides: ScrollCapability | null;
|
|
14
|
+
state: {
|
|
15
|
+
currentPage: number;
|
|
16
|
+
totalPages: number;
|
|
17
|
+
};
|
|
18
|
+
readonly currentPage: number;
|
|
19
|
+
readonly totalPages: number;
|
|
20
|
+
readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;
|
|
21
|
+
readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;
|
|
22
|
+
readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;
|
|
23
|
+
readonly getMetrics: ScrollCapability['getMetrics'] | undefined;
|
|
24
|
+
readonly onPageChange: ScrollCapability['onPageChange'] | undefined;
|
|
25
|
+
readonly onScroll: ScrollCapability['onScroll'] | undefined;
|
|
26
|
+
readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;
|
|
27
|
+
readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;
|
|
28
|
+
readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;
|
|
29
|
+
}
|
|
30
|
+
export declare const useScroll: () => UseScrollReturn;
|
|
31
|
+
export {};
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { ReactNode, HTMLAttributes } from '../../preact/adapter.ts';
|
|
2
|
-
import {
|
|
3
|
-
import { PdfDocumentObject, Rotation } from '@embedpdf/models';
|
|
4
|
-
export interface RenderPageProps extends PageLayout {
|
|
5
|
-
rotation: Rotation;
|
|
6
|
-
scale: number;
|
|
7
|
-
document: PdfDocumentObject | null;
|
|
8
|
-
}
|
|
2
|
+
import { RenderPageProps } from '../types';
|
|
9
3
|
type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
10
4
|
renderPage: (props: RenderPageProps) => ReactNode;
|
|
11
5
|
overlayElements?: ReactNode[];
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { ReactNode, HTMLAttributes } from '../../react/adapter.ts';
|
|
2
|
-
import {
|
|
3
|
-
import { PdfDocumentObject, Rotation } from '@embedpdf/models';
|
|
4
|
-
export interface RenderPageProps extends PageLayout {
|
|
5
|
-
rotation: Rotation;
|
|
6
|
-
scale: number;
|
|
7
|
-
document: PdfDocumentObject | null;
|
|
8
|
-
}
|
|
2
|
+
import { RenderPageProps } from '../types';
|
|
9
3
|
type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
10
4
|
renderPage: (props: RenderPageProps) => ReactNode;
|
|
11
5
|
overlayElements?: ReactNode[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import { RenderPageProps } from '../../shared-svelte/types';
|
|
3
|
+
import { Snippet } from 'svelte';
|
|
4
|
+
type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
5
|
+
RenderPageSnippet: Snippet<RenderPageProps>;
|
|
6
|
+
overlayElements?: Snippet[];
|
|
7
|
+
};
|
|
8
|
+
declare const Scroller: import('svelte', { with: { "resolution-mode": "import" } }).Component<ScrollerProps, {}, "">;
|
|
9
|
+
type Scroller = ReturnType<typeof Scroller>;
|
|
10
|
+
export default Scroller;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-scroll.svelte';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ScrollCapability, ScrollPlugin } from '../../lib/index.ts';
|
|
2
|
+
export declare const useScrollPlugin: () => {
|
|
3
|
+
plugin: ScrollPlugin | null;
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
ready: Promise<void>;
|
|
6
|
+
};
|
|
7
|
+
export declare const useScrollCapability: () => {
|
|
8
|
+
provides: Readonly<ScrollCapability> | null;
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
ready: Promise<void>;
|
|
11
|
+
};
|
|
12
|
+
export declare const useScroll: () => {
|
|
13
|
+
readonly provides: Readonly<ScrollCapability> | null;
|
|
14
|
+
state: {
|
|
15
|
+
currentPage: number;
|
|
16
|
+
totalPages: number;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/plugin-scroll"),r=require("@embedpdf/core/svelte");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const i=l(e),a=()=>r.usePlugin(t.ScrollPlugin.id),o=()=>r.useCapability(t.ScrollPlugin.id);var n=i.from_html("<div><!></div>"),s=i.from_html("<div></div>"),g=i.from_html("<div><div></div> <div></div> <div></div> <!></div>");exports.Scroller=function(e,l){i.push(l,!0);const o=a(),p=r.useCoreState();let c=i.derived((()=>{var e;return(null==(e=o.plugin)?void 0:e.getScrollerLayout())??null})),d=i.rest_props(l,["$$slots","$$events","$$legacy","RenderPageSnippet","overlayElements"]);i.user_effect((()=>{if(o.plugin)return o.plugin.onScrollerData((e=>i.set(c,e)))})),i.user_effect((()=>{o.plugin&&o.plugin.setLayoutReady()}));var u=i.comment(),f=i.first_child(u),y=e=>{var r=g();i.attribute_effect(r,(e=>({...d,[i.STYLE]:e})),[()=>({width:`${i.get(c).totalWidth}px`,height:`${i.get(c).totalHeight}px`,position:"relative","box-sizing":"border-box",margin:"0 auto",display:i.get(c).strategy===t.ScrollStrategy.Horizontal?"flex":null,"flex-direction":i.get(c).strategy===t.ScrollStrategy.Horizontal?"row":null})]);var a=i.child(r);let o;var u=i.sibling(a,2);let f;i.each(u,21,(()=>i.get(c).items),(e=>e.pageNumbers[0]),((e,t)=>{var r=s();let a;i.each(r,21,(()=>i.get(t).pageLayouts),(e=>e.pageNumber),((e,t)=>{var r=n();let a;var o=i.child(r);{let e=i.derived((()=>({...i.get(t),rotation:p.coreState.rotation,scale:p.coreState.scale,document:p.coreState.document})));i.snippet(o,(()=>l.RenderPageSnippet??i.noop),(()=>i.get(e)))}i.reset(r),i.template_effect((e=>a=i.set_style(r,"",a,e)),[()=>({width:`${i.get(t).rotatedWidth}px`,height:`${i.get(t).rotatedHeight}px`})]),i.append(e,r)})),i.reset(r),i.template_effect((e=>a=i.set_style(r,"",a,e)),[()=>({display:"flex","justify-content":"center",gap:`${i.get(c).pageGap}px`})]),i.append(e,r)})),i.reset(u);var y=i.sibling(u,2);let v;var S=i.sibling(y,2),h=e=>{var t=i.comment(),r=i.first_child(t);i.each(r,17,(()=>l.overlayElements),i.index,((e,t)=>{var r=i.comment(),l=i.first_child(r);i.snippet(l,(()=>i.get(t)??i.noop)),i.append(e,r)})),i.append(e,t)};i.if(S,(e=>{l.overlayElements&&l.overlayElements.length>0&&e(h)})),i.reset(r),i.template_effect(((e,t,r)=>{o=i.set_style(a,"",o,e),f=i.set_style(u,"",f,t),v=i.set_style(y,"",v,r)}),[()=>({width:i.get(c).strategy===t.ScrollStrategy.Horizontal?`${i.get(c).startSpacing}px`:"100%",height:i.get(c).strategy===t.ScrollStrategy.Horizontal?"100%":`${i.get(c).startSpacing}px`,"flex-shrink":"0"}),()=>({gap:`${i.get(c).pageGap}px`,display:"flex","align-items":"center",position:"relative","box-sizing":"border-box","flex-direction":i.get(c).strategy===t.ScrollStrategy.Horizontal?"row":"column","min-width":i.get(c).strategy===t.ScrollStrategy.Horizontal?"100%":"fit-content"}),()=>({width:i.get(c).strategy===t.ScrollStrategy.Horizontal?`${i.get(c).endSpacing}px`:"100%",height:i.get(c).strategy===t.ScrollStrategy.Horizontal?"100%":`${i.get(c).endSpacing}px`,"flex-shrink":"0"})]),i.append(e,r)};i.if(f,(e=>{i.get(c)&&p.coreState&&e(y)})),i.append(e,u),i.pop()},exports.useScroll=()=>{const e=o(),t=i.proxy({get provides(){return e.provides},state:{currentPage:1,totalPages:1}});return i.user_effect((()=>{if(e.provides)return e.provides.onPageChange((({pageNumber:e,totalPages:r})=>{t.state.currentPage=e,t.state.totalPages=r}))})),t},exports.useScrollCapability=o,exports.useScrollPlugin=a,Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const capability = useScrollCapability();\n\n const state = $state({\n get provides() {\n return capability.provides;\n },\n state: {\n currentPage: 1,\n totalPages: 1,\n },\n });\n\n $effect(() => {\n if (!capability.provides) return;\n return capability.provides.onPageChange(({ pageNumber, totalPages }) => {\n state.state.currentPage = pageNumber;\n state.state.totalPages = totalPages;\n });\n });\n\n return state;\n};\n","<script lang=\"ts\">\n import { useScrollPlugin } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import { useCoreState } from '@embedpdf/core/svelte';\n import { type RenderPageProps } from '../../shared/types';\n import { type Snippet } from 'svelte';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n RenderPageSnippet: Snippet<RenderPageProps>;\n overlayElements?: Snippet[];\n };\n\n const scrollPlugin = useScrollPlugin();\n const core = useCoreState();\n let scrollerLayout = $derived<ScrollerLayout | null>(\n scrollPlugin.plugin?.getScrollerLayout() ?? null,\n );\n\n let { RenderPageSnippet, overlayElements, ...restProps }: ScrollerProps = $props();\n\n $effect(() => {\n if (!scrollPlugin.plugin) return;\n return scrollPlugin.plugin.onScrollerData((layout) => (scrollerLayout = layout));\n });\n\n $effect(() => {\n if (!scrollPlugin.plugin) return;\n scrollPlugin.plugin.setLayoutReady();\n });\n</script>\n\n{#if scrollerLayout && core.coreState}\n <div\n {...restProps}\n style:width={`${scrollerLayout.totalWidth}px`}\n style:height={`${scrollerLayout.totalHeight}px`}\n style:position=\"relative\"\n style:box-sizing=\"border-box\"\n style:margin=\"0 auto\"\n style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : null}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : null}\n >\n <div\n style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? `${scrollerLayout.startSpacing}px`\n : '100%'}\n style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : `${scrollerLayout.startSpacing}px`}\n style:flex-shrink=\"0\"\n ></div>\n <div\n style:gap={`${scrollerLayout.pageGap}px`}\n style:display=\"flex\"\n style:align-items=\"center\"\n style:position=\"relative\"\n style:box-sizing=\"border-box\"\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? 'row'\n : 'column'}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : 'fit-content'}\n >\n {#each scrollerLayout.items as item (item.pageNumbers[0])}\n <div\n style:display=\"flex\"\n style:justify-content=\"center\"\n style:gap={`${scrollerLayout.pageGap}px`}\n >\n {#each item.pageLayouts as layout (layout.pageNumber)}\n <div\n style:width={`${layout.rotatedWidth}px`}\n style:height={`${layout.rotatedHeight}px`}\n >\n {@render RenderPageSnippet?.({\n ...layout,\n rotation: core.coreState.rotation,\n scale: core.coreState.scale,\n document: core.coreState.document,\n })}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n <div\n style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? `${scrollerLayout.endSpacing}px`\n : '100%'}\n style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : `${scrollerLayout.endSpacing}px`}\n style:flex-shrink=\"0\"\n ></div>\n {#if overlayElements && overlayElements.length > 0}\n {#each overlayElements as OverLay}\n {@render OverLay?.()}\n {/each}\n {/if}\n </div>\n{/if}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","scrollPlugin","core","useCoreState","scrollerLayout","_a","plugin","getScrollerLayout","restProps","$","rest_props","$$props","user_effect","onScrollerData","layout","set","setLayoutReady","STYLE","$0","width","get","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","items","item","pageNumbers","$$anchor","pageLayouts","pageNumber","rotation","coreState","scale","document","rotatedWidth","rotatedHeight","gap","pageGap","OverLay","noop","overlayElements","length","consequent","startSpacing","endSpacing","consequent_1","capability","state","provides","currentPage","totalPages","onPageChange"],"mappings":"sgBAGaA,EAAwB,IAAAC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAA4B,IAAAC,gBAA4BH,EAAAA,aAAaC,qLCS1E,MAAAG,EAAeN,IACfO,EAAOC,EAAAA,eACT,IAAAC,wBACW,OAAb,OAAaC,EAAAJ,EAAAK,iBAAQC,sBAAuB,IAAA,IAGDC,EAASC,EAAAC,WAAAC,EAAA,yEAEtDF,EAAAG,aAAc,KACP,GAAAX,EAAaK,OACX,OAAAL,EAAaK,OAAOO,gBAAgBC,GAAML,EAAAM,IAAMX,EAAiBU,IAAM,IAGhFL,EAAAG,aAAc,KACPX,EAAaK,QAClBL,EAAaK,OAAOU,gBAAc,uFAM9BR,EAAS,CAAAC,EAAAQ,OAAAC,KAAA,OACGC,MAAA,GAAAV,EAAAW,IAAAhB,GAAeiB,eACdC,OAAA,GAAAb,EAAAW,IAAAhB,GAAemB,4FAIjBnB,GAAeoB,WAAaC,EAAcA,eAACC,WAAa,OAAS,4BAC1DtB,GAAeoB,WAAaC,EAAcA,eAACC,WAAa,MAAQ,kFAwB7EtB,GAAeuB,QAASC,GAAMA,EAAKC,YAAY,KAAC,CAAAC,EAAxBF,4CAMpBA,GAAKG,cAAejB,GAAQA,EAAOkB,aAAU,CAAAF,EAAzBhB,uEAMlBA,GACHmB,SAAU/B,EAAKgC,UAAUD,SACzBE,MAAOjC,EAAKgC,UAAUC,MACtBC,SAAUlC,EAAKgC,UAAUE,4IAPXjB,MAAA,GAAAV,EAAAW,IAAAN,GAAOuB,iBACNf,OAAA,GAAAb,EAAAW,IAAAN,GAAOwB,kJALdC,IAAA,GAAA9B,EAAAW,IAAAhB,GAAeoC,uLA4BPC,iEACfA,IAAOhC,EAAAiC,mDAFoB/B,EAAAgC,iBAAAhC,EAAAgC,gBAAAC,OAAS,KAACC,EAAA,yIApDnCzC,GAAeoB,WAAaC,EAAAA,eAAeC,WAAS,GAAAjB,EAAAW,IAC1DhB,GAAe0C,iBAClB,oBACU1C,GAAeoB,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAAjB,EAAAW,IACFhB,GAAe0C,2CAIRP,IAAA,GAAA9B,EAAAW,IAAAhB,GAAeoC,uHAKPpC,GAAeoB,WAAaC,EAAcA,eAACC,WAC7D,MACA,2BACatB,GAAeoB,WAAaC,EAAcA,eAACC,WACxD,OACA,kCAyBStB,GAAeoB,WAAaC,EAAAA,eAAeC,WAAS,GAAAjB,EAAAW,IAC1DhB,GAAe2C,eAClB,oBACU3C,GAAeoB,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAAjB,EAAAW,IACFhB,GAAe2C,sEA7DvB3C,IAAkBF,EAAKgC,aAASc,EAAA,yBAFrC,yBDvBQ,MAAAC,EAAalD,IAEbmD,WACA,YAAAC,GACK,OAAAF,EAAWE,QACpB,EACAD,OACEE,YAAa,EACbC,WAAY,KAYT,OARP5C,EAAAG,kBACO,GAAAqC,EAAWE,gBACTF,EAAWE,SAASG,gBAAgBtB,aAAYqB,iBACrDH,EAAMA,MAAME,YAAcpB,EAC1BkB,EAAMA,MAAMG,WAAaA,CAAA,GAC1B,IAGIH,CAAA"}
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import "svelte/internal/disclose-version";
|
|
2
|
+
import * as $ from "svelte/internal/client";
|
|
3
|
+
import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
|
|
4
|
+
export * from "@embedpdf/plugin-scroll";
|
|
5
|
+
import { usePlugin, useCapability, useCoreState } from "@embedpdf/core/svelte";
|
|
6
|
+
const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
|
|
7
|
+
const useScrollCapability = () => useCapability(ScrollPlugin.id);
|
|
8
|
+
const useScroll = () => {
|
|
9
|
+
const capability = useScrollCapability();
|
|
10
|
+
const state = $.proxy({
|
|
11
|
+
get provides() {
|
|
12
|
+
return capability.provides;
|
|
13
|
+
},
|
|
14
|
+
state: { currentPage: 1, totalPages: 1 }
|
|
15
|
+
});
|
|
16
|
+
$.user_effect(() => {
|
|
17
|
+
if (!capability.provides) return;
|
|
18
|
+
return capability.provides.onPageChange(({ pageNumber, totalPages }) => {
|
|
19
|
+
state.state.currentPage = pageNumber;
|
|
20
|
+
state.state.totalPages = totalPages;
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
return state;
|
|
24
|
+
};
|
|
25
|
+
var root_3 = $.from_html(`<div><!></div>`);
|
|
26
|
+
var root_2 = $.from_html(`<div></div>`);
|
|
27
|
+
var root_1 = $.from_html(`<div><div></div> <div></div> <div></div> <!></div>`);
|
|
28
|
+
function Scroller($$anchor, $$props) {
|
|
29
|
+
$.push($$props, true);
|
|
30
|
+
const scrollPlugin = useScrollPlugin();
|
|
31
|
+
const core = useCoreState();
|
|
32
|
+
let scrollerLayout = $.derived(() => {
|
|
33
|
+
var _a;
|
|
34
|
+
return ((_a = scrollPlugin.plugin) == null ? void 0 : _a.getScrollerLayout()) ?? null;
|
|
35
|
+
});
|
|
36
|
+
let restProps = $.rest_props($$props, [
|
|
37
|
+
"$$slots",
|
|
38
|
+
"$$events",
|
|
39
|
+
"$$legacy",
|
|
40
|
+
"RenderPageSnippet",
|
|
41
|
+
"overlayElements"
|
|
42
|
+
]);
|
|
43
|
+
$.user_effect(() => {
|
|
44
|
+
if (!scrollPlugin.plugin) return;
|
|
45
|
+
return scrollPlugin.plugin.onScrollerData((layout) => $.set(scrollerLayout, layout));
|
|
46
|
+
});
|
|
47
|
+
$.user_effect(() => {
|
|
48
|
+
if (!scrollPlugin.plugin) return;
|
|
49
|
+
scrollPlugin.plugin.setLayoutReady();
|
|
50
|
+
});
|
|
51
|
+
var fragment = $.comment();
|
|
52
|
+
var node = $.first_child(fragment);
|
|
53
|
+
{
|
|
54
|
+
var consequent_1 = ($$anchor2) => {
|
|
55
|
+
var div = root_1();
|
|
56
|
+
$.attribute_effect(div, ($0) => ({ ...restProps, [$.STYLE]: $0 }), [
|
|
57
|
+
() => ({
|
|
58
|
+
width: `${$.get(scrollerLayout).totalWidth}px`,
|
|
59
|
+
height: `${$.get(scrollerLayout).totalHeight}px`,
|
|
60
|
+
position: "relative",
|
|
61
|
+
"box-sizing": "border-box",
|
|
62
|
+
margin: "0 auto",
|
|
63
|
+
display: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "flex" : null,
|
|
64
|
+
"flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : null
|
|
65
|
+
})
|
|
66
|
+
]);
|
|
67
|
+
var div_1 = $.child(div);
|
|
68
|
+
let styles;
|
|
69
|
+
var div_2 = $.sibling(div_1, 2);
|
|
70
|
+
let styles_1;
|
|
71
|
+
$.each(div_2, 21, () => $.get(scrollerLayout).items, (item) => item.pageNumbers[0], ($$anchor3, item) => {
|
|
72
|
+
var div_3 = root_2();
|
|
73
|
+
let styles_2;
|
|
74
|
+
$.each(div_3, 21, () => $.get(item).pageLayouts, (layout) => layout.pageNumber, ($$anchor4, layout) => {
|
|
75
|
+
var div_4 = root_3();
|
|
76
|
+
let styles_3;
|
|
77
|
+
var node_1 = $.child(div_4);
|
|
78
|
+
{
|
|
79
|
+
let $0 = $.derived(() => ({
|
|
80
|
+
...$.get(layout),
|
|
81
|
+
rotation: core.coreState.rotation,
|
|
82
|
+
scale: core.coreState.scale,
|
|
83
|
+
document: core.coreState.document
|
|
84
|
+
}));
|
|
85
|
+
$.snippet(node_1, () => $$props.RenderPageSnippet ?? $.noop, () => $.get($0));
|
|
86
|
+
}
|
|
87
|
+
$.reset(div_4);
|
|
88
|
+
$.template_effect(($0) => styles_3 = $.set_style(div_4, "", styles_3, $0), [
|
|
89
|
+
() => ({
|
|
90
|
+
width: `${$.get(layout).rotatedWidth}px`,
|
|
91
|
+
height: `${$.get(layout).rotatedHeight}px`
|
|
92
|
+
})
|
|
93
|
+
]);
|
|
94
|
+
$.append($$anchor4, div_4);
|
|
95
|
+
});
|
|
96
|
+
$.reset(div_3);
|
|
97
|
+
$.template_effect(($0) => styles_2 = $.set_style(div_3, "", styles_2, $0), [
|
|
98
|
+
() => ({
|
|
99
|
+
display: "flex",
|
|
100
|
+
"justify-content": "center",
|
|
101
|
+
gap: `${$.get(scrollerLayout).pageGap}px`
|
|
102
|
+
})
|
|
103
|
+
]);
|
|
104
|
+
$.append($$anchor3, div_3);
|
|
105
|
+
});
|
|
106
|
+
$.reset(div_2);
|
|
107
|
+
var div_5 = $.sibling(div_2, 2);
|
|
108
|
+
let styles_4;
|
|
109
|
+
var node_2 = $.sibling(div_5, 2);
|
|
110
|
+
{
|
|
111
|
+
var consequent = ($$anchor3) => {
|
|
112
|
+
var fragment_1 = $.comment();
|
|
113
|
+
var node_3 = $.first_child(fragment_1);
|
|
114
|
+
$.each(node_3, 17, () => $$props.overlayElements, $.index, ($$anchor4, OverLay) => {
|
|
115
|
+
var fragment_2 = $.comment();
|
|
116
|
+
var node_4 = $.first_child(fragment_2);
|
|
117
|
+
$.snippet(node_4, () => $.get(OverLay) ?? $.noop);
|
|
118
|
+
$.append($$anchor4, fragment_2);
|
|
119
|
+
});
|
|
120
|
+
$.append($$anchor3, fragment_1);
|
|
121
|
+
};
|
|
122
|
+
$.if(node_2, ($$render) => {
|
|
123
|
+
if ($$props.overlayElements && $$props.overlayElements.length > 0) $$render(consequent);
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
$.reset(div);
|
|
127
|
+
$.template_effect(
|
|
128
|
+
($0, $1, $2) => {
|
|
129
|
+
styles = $.set_style(div_1, "", styles, $0);
|
|
130
|
+
styles_1 = $.set_style(div_2, "", styles_1, $1);
|
|
131
|
+
styles_4 = $.set_style(div_5, "", styles_4, $2);
|
|
132
|
+
},
|
|
133
|
+
[
|
|
134
|
+
() => ({
|
|
135
|
+
width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).startSpacing}px` : "100%",
|
|
136
|
+
height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).startSpacing}px`,
|
|
137
|
+
"flex-shrink": "0"
|
|
138
|
+
}),
|
|
139
|
+
() => ({
|
|
140
|
+
gap: `${$.get(scrollerLayout).pageGap}px`,
|
|
141
|
+
display: "flex",
|
|
142
|
+
"align-items": "center",
|
|
143
|
+
position: "relative",
|
|
144
|
+
"box-sizing": "border-box",
|
|
145
|
+
"flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : "column",
|
|
146
|
+
"min-width": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : "fit-content"
|
|
147
|
+
}),
|
|
148
|
+
() => ({
|
|
149
|
+
width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).endSpacing}px` : "100%",
|
|
150
|
+
height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).endSpacing}px`,
|
|
151
|
+
"flex-shrink": "0"
|
|
152
|
+
})
|
|
153
|
+
]
|
|
154
|
+
);
|
|
155
|
+
$.append($$anchor2, div);
|
|
156
|
+
};
|
|
157
|
+
$.if(node, ($$render) => {
|
|
158
|
+
if ($.get(scrollerLayout) && core.coreState) $$render(consequent_1);
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
$.append($$anchor, fragment);
|
|
162
|
+
$.pop();
|
|
163
|
+
}
|
|
164
|
+
export {
|
|
165
|
+
Scroller,
|
|
166
|
+
useScroll,
|
|
167
|
+
useScrollCapability,
|
|
168
|
+
useScrollPlugin
|
|
169
|
+
};
|
|
170
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const capability = useScrollCapability();\n\n const state = $state({\n get provides() {\n return capability.provides;\n },\n state: {\n currentPage: 1,\n totalPages: 1,\n },\n });\n\n $effect(() => {\n if (!capability.provides) return;\n return capability.provides.onPageChange(({ pageNumber, totalPages }) => {\n state.state.currentPage = pageNumber;\n state.state.totalPages = totalPages;\n });\n });\n\n return state;\n};\n","<script lang=\"ts\">\n import { useScrollPlugin } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import { useCoreState } from '@embedpdf/core/svelte';\n import { type RenderPageProps } from '../../shared/types';\n import { type Snippet } from 'svelte';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n RenderPageSnippet: Snippet<RenderPageProps>;\n overlayElements?: Snippet[];\n };\n\n const scrollPlugin = useScrollPlugin();\n const core = useCoreState();\n let scrollerLayout = $derived<ScrollerLayout | null>(\n scrollPlugin.plugin?.getScrollerLayout() ?? null,\n );\n\n let { RenderPageSnippet, overlayElements, ...restProps }: ScrollerProps = $props();\n\n $effect(() => {\n if (!scrollPlugin.plugin) return;\n return scrollPlugin.plugin.onScrollerData((layout) => (scrollerLayout = layout));\n });\n\n $effect(() => {\n if (!scrollPlugin.plugin) return;\n scrollPlugin.plugin.setLayoutReady();\n });\n</script>\n\n{#if scrollerLayout && core.coreState}\n <div\n {...restProps}\n style:width={`${scrollerLayout.totalWidth}px`}\n style:height={`${scrollerLayout.totalHeight}px`}\n style:position=\"relative\"\n style:box-sizing=\"border-box\"\n style:margin=\"0 auto\"\n style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : null}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : null}\n >\n <div\n style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? `${scrollerLayout.startSpacing}px`\n : '100%'}\n style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : `${scrollerLayout.startSpacing}px`}\n style:flex-shrink=\"0\"\n ></div>\n <div\n style:gap={`${scrollerLayout.pageGap}px`}\n style:display=\"flex\"\n style:align-items=\"center\"\n style:position=\"relative\"\n style:box-sizing=\"border-box\"\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? 'row'\n : 'column'}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : 'fit-content'}\n >\n {#each scrollerLayout.items as item (item.pageNumbers[0])}\n <div\n style:display=\"flex\"\n style:justify-content=\"center\"\n style:gap={`${scrollerLayout.pageGap}px`}\n >\n {#each item.pageLayouts as layout (layout.pageNumber)}\n <div\n style:width={`${layout.rotatedWidth}px`}\n style:height={`${layout.rotatedHeight}px`}\n >\n {@render RenderPageSnippet?.({\n ...layout,\n rotation: core.coreState.rotation,\n scale: core.coreState.scale,\n document: core.coreState.document,\n })}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n <div\n style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? `${scrollerLayout.endSpacing}px`\n : '100%'}\n style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? '100%'\n : `${scrollerLayout.endSpacing}px`}\n style:flex-shrink=\"0\"\n ></div>\n {#if overlayElements && overlayElements.length > 0}\n {#each overlayElements as OverLay}\n {@render OverLay?.()}\n {/each}\n {/if}\n </div>\n{/if}\n"],"names":["$$anchor"],"mappings":";;;;;AAGa,MAAA,kBAAwB,MAAA,UAAwB,aAAa,EAAE;AAC/D,MAAA,sBAA4B,MAAA,cAA4B,aAAa,EAAE;AAEvE,MAAA,kBAAkB;AACvB,QAAA,aAAa,oBAAoB;QAEjC;IACA,IAAA,WAAW;AACN,aAAA,WAAW;AAAA,IACpB;AAAA,IACA,SACE,aAAa,GACb,YAAY,EAAA;AAAA;AAIhB,IAAA,kBAAc;AACP,QAAA,CAAA,WAAW,SAAU;WACnB,WAAW,SAAS,gBAAgB,YAAY,iBAAiB;AACtE,YAAM,MAAM,cAAc;AAC1B,YAAM,MAAM,aAAa;AAAA,KAC1B;AAAA,GACF;SAEM;AACT;;;;qCC5BA;;AAaQ,QAAA,eAAe,gBAAe;AAC9B,QAAA,OAAO,aAAY;AACrB,MAAA;;AACF,+BAAa,WAAb,mBAAqB,wBAAuB;AAAA,GAAI;MAGL,YAAS,EAAA,WAAA,SAAA;AAAA;;;;;;AAEtD,IAAA,YAAc,MAAA;AACP,QAAA,CAAA,aAAa,OAAM;WACjB,aAAa,OAAO,gBAAgB,WAAM,EAAA,IAAM,gBAAiB,MAAM,CAAA;AAAA,GAC/E;AAED,IAAA,YAAc,MAAA;AACP,QAAA,CAAA,aAAa,OAAM;AACxB,iBAAa,OAAO,eAAc;AAAA,GACnC;;;;;;4CAKK,WAAS,CAAA,EAAA,KAAA,GAAA,GAAA,IAAA;AAAA;UACG,OAAA,GAAA,EAAA,IAAA,cAAc,EAAC,UAAU;AAAA,UACxB,QAAA,GAAA,EAAA,IAAA,cAAc,EAAC,WAAW;AAAA;;;yBAI5B,cAAc,EAAC,aAAa,eAAe,aAAa,SAAS;AAAA,kCAC1D,cAAc,EAAC,aAAa,eAAe,aAAa,QAAQ;AAAA;;;;;;oCAwB7E,cAAc,EAAC,OAAK,CAAI,SAAM,KAAK,YAAY,CAAC,GAAA,CAAAA,WAAxB,SAAI;;;sCAMxB,IAAI,EAAC,aAAe,CAAA,WAAQ,OAAO,YAAU,CAAAA,WAAzB,WAAM;;;;;;uBAMxB,MAAM;AAAA,cACT,UAAU,KAAK,UAAU;AAAA,cACzB,OAAO,KAAK,UAAU;AAAA,cACtB,UAAU,KAAK,UAAU;AAAA;;;;;;cAPX,OAAA,GAAA,EAAA,IAAA,MAAM,EAAC,YAAY;AAAA,cAClB,QAAA,GAAA,EAAA,IAAA,MAAM,EAAC,aAAa;AAAA;;;;;;;;;YAL3B,KAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO;AAAA;;;;;;;;;;;;iFA4Bd,YAAO;;;0CACtB,OAAO,KAAA,EAAA,IAAA;;;;;;AAFoB,cAAA,QAAA,mBAAA,QAAA,gBAAA,SAAS,EAAC,UAAA,UAAA;AAAA;;;;;;;;;;;yBApDnC,cAAc,EAAC,aAAa,eAAe,aAAS,GAAA,EAAA,IAC1D,cAAc,EAAC,YAAY,OAC9B;AAAA,0BACU,cAAc,EAAC,aAAa,eAAe,aACrD,SAAK,GAAA,EAAA,IACF,cAAc,EAAC,YAAY;AAAA;;;YAIpB,KAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO;AAAA;;;;oCAKd,cAAc,EAAC,aAAa,eAAe,aAC7D,QACA;AAAA,+BACa,cAAc,EAAC,aAAa,eAAe,aACxD,SACA;AAAA;;yBAyBS,cAAc,EAAC,aAAa,eAAe,aAAS,GAAA,EAAA,IAC1D,cAAc,EAAC,UAAU,OAC5B;AAAA,0BACU,cAAc,EAAC,aAAa,eAAe,aACrD,SAAK,GAAA,EAAA,IACF,cAAc,EAAC,UAAU;AAAA;;;;;;;gBA7DjC,cAAc,KAAI,KAAK,UAAS,UAAA,YAAA;AAAA;;;;AAFrC;"}
|
package/dist/vue/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watchEffect, computed } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport function useScroll() {\n const { provides } = useScrollCapability();\n\n const currentPage = ref(1);\n const totalPages = ref(1);\n\n watchEffect((onCleanup) => {\n if (!provides.value) return;\n\n const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {\n currentPage.value = pageNumber;\n totalPages.value = tp;\n });\n onCleanup(unsubscribe);\n });\n\n // New format\n const state = computed(() => ({\n currentPage: currentPage.value,\n totalPages: totalPages.value,\n }));\n\n // Create deprecated properties with warnings\n const deprecatedCurrentPage = computed({\n get() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage.value;\n },\n set(value) {\n currentPage.value = value;\n },\n });\n\n const deprecatedTotalPages = computed({\n get() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages.value;\n },\n set(value) {\n totalPages.value = value;\n },\n });\n\n const deprecatedScroll = computed(() => {\n if (provides.value) {\n console.warn(\n `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`,\n );\n }\n return provides.value;\n });\n\n return {\n // New format (preferred)\n provides,\n state,\n\n // Deprecated properties (for backward compatibility)\n currentPage: deprecatedCurrentPage,\n totalPages: deprecatedTotalPages,\n scroll: deprecatedScroll,\n };\n}\n","<script setup lang=\"ts\">\n/* ------------------------------------------------------------------ */\n/* imports */\n/* ------------------------------------------------------------------ */\nimport { computed, onMounted, ref, watchEffect, useAttrs } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout, type PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/vue';\nimport type { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\n/* ------------------------------------------------------------------ */\n/* props – pure layout; page content comes from the *slot* */\n/* ------------------------------------------------------------------ */\nconst props = withDefaults(\n defineProps<{\n style?: StyleValue;\n overlayElements?: any[];\n }>(),\n { overlayElements: () => [] },\n);\n\nconst attrs = useAttrs();\n\n/* ------------------------------------------------------------------ */\n/* plugin + reactive state */\n/* ------------------------------------------------------------------ */\nconst { plugin: scrollPlugin } = useScrollPlugin();\nconst { registry } = useRegistry(); // shallowRef<PluginRegistry|null>\n\nconst layout = ref<ScrollerLayout | null>(null);\n\n/* subscribe to scroller‑layout updates */\nwatchEffect((onCleanup) => {\n if (!scrollPlugin.value) return;\n\n layout.value = scrollPlugin.value.getScrollerLayout();\n const off = scrollPlugin.value.onScrollerData((l) => (layout.value = l));\n onCleanup(off);\n});\n\n/* inform plugin once the DOM is ready */\nonMounted(() => {\n scrollPlugin.value?.setLayoutReady();\n});\n\n/* ------------------------------------------------------------------ */\n/* helpers */\n/* ------------------------------------------------------------------ */\ninterface PageSlotProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\n/** Build the prop object that we’ll forward into the default slot */\nfunction pageSlotProps(pl: PageLayout): PageSlotProps {\n const core = registry.value!.getStore().getState().core;\n return {\n ...pl,\n rotation: core.rotation,\n scale: core.scale,\n document: core.document,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* computed root style */\n/* ------------------------------------------------------------------ */\nconst rootStyle = computed<StyleValue>(() => {\n if (!layout.value) return props.style;\n\n const base =\n typeof props.style === 'object' && !Array.isArray(props.style)\n ? { ...props.style }\n : (props.style ?? {});\n\n return [\n base,\n {\n width: `${layout.value.totalWidth}px`,\n height: `${layout.value.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(layout.value.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n },\n ];\n});\n</script>\n\n<template>\n <!-- render nothing until both layout + registry exist -->\n <div v-if=\"layout && registry\" :style=\"rootStyle\" v-bind=\"attrs\">\n <!-- leading spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.startSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.startSpacing + 'px', width: '100%' }\" />\n\n <!-- actual page grid -->\n <div\n :style=\"{\n gap: layout.pageGap + 'px',\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n flexDirection: layout.strategy === 'horizontal' ? 'row' : 'column',\n minHeight: layout.strategy === 'horizontal' ? '100%' : undefined,\n minWidth: layout.strategy === 'vertical' ? 'fit-content' : undefined,\n }\"\n >\n <template v-for=\"item in layout.items\" :key=\"item.pageNumbers[0]\">\n <div :style=\"{ display: 'flex', justifyContent: 'center', gap: layout.pageGap + 'px' }\">\n <div\n v-for=\"pl in item.pageLayouts\"\n :key=\"pl.pageNumber\"\n :style=\"{ width: pl.rotatedWidth + 'px', height: pl.rotatedHeight + 'px' }\"\n >\n <!-- 🔑 give the host app full control over page content -->\n <slot :page=\"pageSlotProps(pl)\" />\n </div>\n </div>\n </template>\n </div>\n\n <!-- trailing spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.endSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.endSpacing + 'px', width: '100%' }\" />\n\n <!-- optional overlay components -->\n <component v-for=\"(el, i) in props.overlayElements\" :is=\"el\" :key=\"i\" />\n </div>\n</template>\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","props","__props","attrs","useAttrs","plugin","scrollPlugin","registry","useRegistry","layout","ref","pageSlotProps","pl","core","value","getStore","getState","rotation","scale","document","vue$1","watchEffect","onCleanup","getScrollerLayout","onScrollerData","l","onMounted","_a","setLayoutReady","rootStyle","computed","style","Array","isArray","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","_unref","_openBlock","_createElementBlock","_mergeProps","unref","_normalizeStyle","normalizeStyle","startSpacing","flexShrink","_createElementVNode","gap","pageGap","createElementBlock","_Fragment","_renderList","renderList","items","item","key","pageNumbers","justifyContent","Fragment","pageLayouts","pageNumber","rotatedWidth","rotatedHeight","_renderSlot","_ctx","$slots","page","endSpacing","overlayElements","el","i","openBlock","_createBlock","_resolveDynamicComponent","resolveDynamicComponent","provides","currentPage","totalPages","onPageChange","tp","state","deprecatedCurrentPage","get","console","warn","set","deprecatedTotalPages","deprecatedScroll","scroll"],"mappings":"4KAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,mJCUlF,MAAMG,EAAQC,EAQRC,EAAQC,EAAAA,YAKNC,OAAQC,GAAiBX,KAC3BY,SAAEA,GAAaC,gBAEfC,EAASC,MAA2B,MA0B1C,SAASC,EAAcC,GACrB,MAAMC,EAAON,EAASO,MAAOC,WAAWC,WAAWH,KAC5C,MAAA,IACFD,EACHK,SAAUJ,EAAKI,SACfC,MAAOL,EAAKK,MACZC,SAAUN,EAAKM,SACjB,CA9BFC,EAAAC,aAAaC,IACP,IAAChB,EAAaQ,MAAO,OAElBL,EAAAK,MAAQR,EAAaQ,MAAMS,oBAElCD,EADYhB,EAAaQ,MAAMU,gBAAgBC,GAAOhB,EAAOK,MAAQW,IACxD,IAIfC,EAAAA,WAAU,WACR,OAAAC,EAAArB,EAAaQ,QAAOa,EAAAC,gBAAA,IA0BhB,MAAAC,EAAYC,EAAAA,UAAqB,KACrC,IAAKrB,EAAOK,MAAO,OAAOb,EAAM8B,MAOzB,MAAA,CAJkB,iBAAhB9B,EAAM8B,OAAuBC,MAAMC,QAAQhC,EAAM8B,OAEnD9B,EAAM8B,OAAS,CAAC,EADjB,IAAK9B,EAAM8B,OAKf,CACEG,MAAO,GAAGzB,EAAOK,MAAMqB,eACvBC,OAAQ,GAAG3B,EAAOK,MAAMuB,gBACxBC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJ/B,EAAOK,MAAM2B,WAAaC,EAAAA,eAAeC,YAAc,CACzDC,QAAS,OACTC,cAAe,QAGrB,iBAMWpC,EAAAK,OAAUgC,EAAAA,MAAQvC,IAA7BwC,EAAAA,YAAAC,EAAAA,mBA4CM,MA5CNC,aA4CM,OA5C0BlB,MAAOF,EAASf,OAAUgC,EAAAI,MAAK/C,IAAA,CAGtC,eAAfM,EAAAK,MAAO2B,wBADfO,qBAGE,MAAA,OADCjB,MAAKoB,EAAAC,eAAA,CAAAlB,MAAWzB,EAAMK,MAACuC,aAAY,KAAAjB,OAAA,OAAAkB,WAAA,6BAEtCN,EAAAA,mBAA6E,MAAA,OAAhEjB,MAAKoB,EAAAA,eAAA,CAAAf,OAAY3B,EAAMK,MAACuC,aAAY,KAAAnB,MAAA,mBAGjDqB,EAAAA,mBAwBM,MAAA,CAvBHxB,MAAKoB,EAAAA,eAAA,CAAiBK,IAAA/C,EAAAK,MAAO2C,QAAO,mFAAsJZ,cAAe,eAAfpC,EAAAK,MAAO2B,SAAQ,MAAA,mBAAwE,eAAfhC,EAAMK,MAAC2B,SAAQ,YAA6B,WAA4C,aAAfhC,EAAMK,MAAC2B,SAAQ,mBAAkC,OAW7XM,EAAAA,WAAA,GAAAC,EAWWU,mBAAAC,WAXc,KAAAC,EAAAC,WAAApD,EAAAK,MAAOgD,OAAfC,kBACff,EAAAU,mBASM,MAAA,CAVqCM,IAAAD,EAAKE,YAAW,GACrDlC,MAAKoB,EAAAC,eAAA,CAAAR,QAAA,OAAAsB,eAAA,SAAAV,IAAoD/C,EAAMK,MAAC2C,QAAO,UAC3EV,aAAA,GAAAC,EAAAA,mBAOMW,EAAAQ,SANS,KAAAP,EAAAA,WAAAG,EAAKK,aAAXxD,kBADToC,EAAAU,mBAOM,MAAA,CALHM,IAAKpD,EAAGyD,WACRtC,8BAAgBnB,EAAG0D,aAA6B,KAAAlC,OAAAxB,EAAG2D,cAAa,SAGjEC,aAAkCC,EAAAC,OAAA,UAAA,CAA3BC,KAAMhE,EAAcC,mCAQZ,eAAfH,EAAAK,MAAO2B,wBADfO,qBAGE,MAAA,OADCjB,MAAKoB,EAAAC,eAAA,CAAAlB,MAAWzB,EAAMK,MAAC8D,WAAU,KAAAxC,OAAA,OAAAkB,WAAA,6BAEpCN,EAAAA,mBAA2E,MAAA,OAA9DjB,MAAKoB,EAAAA,eAAA,CAAAf,OAAY3B,EAAMK,MAAC8D,WAAU,KAAA1C,MAAA,oBAG/Ca,EAAAA,WAAA,GAAAC,EAAwEU,mBAAAC,6BAA3C1D,EAAM4E,iBAAhB,CAAAC,EAAIC,KAAvBhC,EAAAiC,YAAAC,EAAAA,YAAwEC,EAAAC,wBAAfL,GAAK,CAAAd,IAAKe,uFDrIhE,WACC,MAAAK,SAAEA,GAAarF,IAEfsF,EAAc3E,MAAI,GAClB4E,EAAa5E,MAAI,GAEvBU,EAAAC,aAAaC,IACP,IAAC8D,EAAStE,MAAO,OAMrBQ,EAJoB8D,EAAStE,MAAMyE,cAAa,EAAGlB,aAAYiB,WAAYE,MACzEH,EAAYvE,MAAQuD,EACpBiB,EAAWxE,MAAQ0E,CAAA,IAEA,IAIjB,MAAAC,EAAQ3D,EAAAA,UAAS,KAAO,CAC5BuD,YAAaA,EAAYvE,MACzBwE,WAAYA,EAAWxE,UAInB4E,EAAwB5D,EAAAA,SAAS,CACrC6D,IAAM,KACIC,QAAAC,KACN,6GAEKR,EAAYvE,OAErB,GAAAgF,CAAIhF,GACFuE,EAAYvE,MAAQA,CAAA,IAIlBiF,EAAuBjE,EAAAA,SAAS,CACpC6D,IAAM,KACIC,QAAAC,KACN,2GAEKP,EAAWxE,OAEpB,GAAAgF,CAAIhF,GACFwE,EAAWxE,MAAQA,CAAA,IAIjBkF,EAAmBlE,EAAAA,UAAS,KAC5BsD,EAAStE,OACH8E,QAAAC,KACN,+FAGGT,EAAStE,SAGX,MAAA,CAELsE,WACAK,QAGAJ,YAAaK,EACbJ,WAAYS,EACZE,OAAQD,EAEZ"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watchEffect, computed } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport function useScroll() {\n const { provides } = useScrollCapability();\n\n const currentPage = ref(1);\n const totalPages = ref(1);\n\n watchEffect((onCleanup) => {\n if (!provides.value) return;\n\n const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {\n currentPage.value = pageNumber;\n totalPages.value = tp;\n });\n onCleanup(unsubscribe);\n });\n\n // New format\n const state = computed(() => ({\n currentPage: currentPage.value,\n totalPages: totalPages.value,\n }));\n\n // Create deprecated properties with warnings\n const deprecatedCurrentPage = computed({\n get() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage.value;\n },\n set(value) {\n currentPage.value = value;\n },\n });\n\n const deprecatedTotalPages = computed({\n get() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages.value;\n },\n set(value) {\n totalPages.value = value;\n },\n });\n\n const deprecatedScroll = computed(() => {\n if (provides.value) {\n console.warn(\n `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`,\n );\n }\n return provides.value;\n });\n\n return {\n // New format (preferred)\n provides,\n state,\n\n // Deprecated properties (for backward compatibility)\n currentPage: deprecatedCurrentPage,\n totalPages: deprecatedTotalPages,\n scroll: deprecatedScroll,\n };\n}\n","<script setup lang=\"ts\">\n/* ------------------------------------------------------------------ */\n/* imports */\n/* ------------------------------------------------------------------ */\nimport { computed, onMounted, ref, watchEffect, useAttrs } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout, type PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/vue';\nimport { RenderPageProps } from '../../shared/types';\n\n/* ------------------------------------------------------------------ */\n/* props – pure layout; page content comes from the *slot* */\n/* ------------------------------------------------------------------ */\nconst props = withDefaults(\n defineProps<{\n style?: StyleValue;\n overlayElements?: any[];\n }>(),\n { overlayElements: () => [] },\n);\n\nconst attrs = useAttrs();\n\n/* ------------------------------------------------------------------ */\n/* plugin + reactive state */\n/* ------------------------------------------------------------------ */\nconst { plugin: scrollPlugin } = useScrollPlugin();\nconst { registry } = useRegistry(); // shallowRef<PluginRegistry|null>\n\nconst layout = ref<ScrollerLayout | null>(null);\n\n/* subscribe to scroller‑layout updates */\nwatchEffect((onCleanup) => {\n if (!scrollPlugin.value) return;\n\n layout.value = scrollPlugin.value.getScrollerLayout();\n const off = scrollPlugin.value.onScrollerData((l) => (layout.value = l));\n onCleanup(off);\n});\n\n/* inform plugin once the DOM is ready */\nonMounted(() => {\n scrollPlugin.value?.setLayoutReady();\n});\n\n/** Build the prop object that we’ll forward into the default slot */\nfunction pageSlotProps(pl: PageLayout): RenderPageProps {\n const core = registry.value!.getStore().getState().core;\n return {\n ...pl,\n rotation: core.rotation,\n scale: core.scale,\n document: core.document,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* computed root style */\n/* ------------------------------------------------------------------ */\nconst rootStyle = computed<StyleValue>(() => {\n if (!layout.value) return props.style;\n\n const base =\n typeof props.style === 'object' && !Array.isArray(props.style)\n ? { ...props.style }\n : (props.style ?? {});\n\n return [\n base,\n {\n width: `${layout.value.totalWidth}px`,\n height: `${layout.value.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(layout.value.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n },\n ];\n});\n</script>\n\n<template>\n <!-- render nothing until both layout + registry exist -->\n <div v-if=\"layout && registry\" :style=\"rootStyle\" v-bind=\"attrs\">\n <!-- leading spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.startSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.startSpacing + 'px', width: '100%' }\" />\n\n <!-- actual page grid -->\n <div\n :style=\"{\n gap: layout.pageGap + 'px',\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n flexDirection: layout.strategy === 'horizontal' ? 'row' : 'column',\n minHeight: layout.strategy === 'horizontal' ? '100%' : undefined,\n minWidth: layout.strategy === 'vertical' ? 'fit-content' : undefined,\n }\"\n >\n <template v-for=\"item in layout.items\" :key=\"item.pageNumbers[0]\">\n <div :style=\"{ display: 'flex', justifyContent: 'center', gap: layout.pageGap + 'px' }\">\n <div\n v-for=\"pl in item.pageLayouts\"\n :key=\"pl.pageNumber\"\n :style=\"{ width: pl.rotatedWidth + 'px', height: pl.rotatedHeight + 'px' }\"\n >\n <!-- 🔑 give the host app full control over page content -->\n <slot :page=\"pageSlotProps(pl)\" />\n </div>\n </div>\n </template>\n </div>\n\n <!-- trailing spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.endSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.endSpacing + 'px', width: '100%' }\" />\n\n <!-- optional overlay components -->\n <component v-for=\"(el, i) in props.overlayElements\" :is=\"el\" :key=\"i\" />\n </div>\n</template>\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","props","__props","attrs","useAttrs","plugin","scrollPlugin","registry","useRegistry","layout","ref","pageSlotProps","pl","core","value","getStore","getState","rotation","scale","document","vue$1","watchEffect","onCleanup","getScrollerLayout","onScrollerData","l","onMounted","_a","setLayoutReady","rootStyle","computed","style","Array","isArray","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","_unref","_openBlock","_createElementBlock","_mergeProps","unref","_normalizeStyle","normalizeStyle","startSpacing","flexShrink","_createElementVNode","gap","pageGap","createElementBlock","_Fragment","_renderList","renderList","items","item","key","pageNumbers","justifyContent","Fragment","pageLayouts","pageNumber","rotatedWidth","rotatedHeight","_renderSlot","_ctx","$slots","page","endSpacing","overlayElements","el","i","openBlock","_createBlock","_resolveDynamicComponent","resolveDynamicComponent","provides","currentPage","totalPages","onPageChange","tp","state","deprecatedCurrentPage","get","console","warn","set","deprecatedTotalPages","deprecatedScroll","scroll"],"mappings":"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"}
|
package/dist/vue/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watchEffect, computed } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport function useScroll() {\n const { provides } = useScrollCapability();\n\n const currentPage = ref(1);\n const totalPages = ref(1);\n\n watchEffect((onCleanup) => {\n if (!provides.value) return;\n\n const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {\n currentPage.value = pageNumber;\n totalPages.value = tp;\n });\n onCleanup(unsubscribe);\n });\n\n // New format\n const state = computed(() => ({\n currentPage: currentPage.value,\n totalPages: totalPages.value,\n }));\n\n // Create deprecated properties with warnings\n const deprecatedCurrentPage = computed({\n get() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage.value;\n },\n set(value) {\n currentPage.value = value;\n },\n });\n\n const deprecatedTotalPages = computed({\n get() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages.value;\n },\n set(value) {\n totalPages.value = value;\n },\n });\n\n const deprecatedScroll = computed(() => {\n if (provides.value) {\n console.warn(\n `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`,\n );\n }\n return provides.value;\n });\n\n return {\n // New format (preferred)\n provides,\n state,\n\n // Deprecated properties (for backward compatibility)\n currentPage: deprecatedCurrentPage,\n totalPages: deprecatedTotalPages,\n scroll: deprecatedScroll,\n };\n}\n","<script setup lang=\"ts\">\n/* ------------------------------------------------------------------ */\n/* imports */\n/* ------------------------------------------------------------------ */\nimport { computed, onMounted, ref, watchEffect, useAttrs } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout, type PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/vue';\nimport type { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\n/* ------------------------------------------------------------------ */\n/* props – pure layout; page content comes from the *slot* */\n/* ------------------------------------------------------------------ */\nconst props = withDefaults(\n defineProps<{\n style?: StyleValue;\n overlayElements?: any[];\n }>(),\n { overlayElements: () => [] },\n);\n\nconst attrs = useAttrs();\n\n/* ------------------------------------------------------------------ */\n/* plugin + reactive state */\n/* ------------------------------------------------------------------ */\nconst { plugin: scrollPlugin } = useScrollPlugin();\nconst { registry } = useRegistry(); // shallowRef<PluginRegistry|null>\n\nconst layout = ref<ScrollerLayout | null>(null);\n\n/* subscribe to scroller‑layout updates */\nwatchEffect((onCleanup) => {\n if (!scrollPlugin.value) return;\n\n layout.value = scrollPlugin.value.getScrollerLayout();\n const off = scrollPlugin.value.onScrollerData((l) => (layout.value = l));\n onCleanup(off);\n});\n\n/* inform plugin once the DOM is ready */\nonMounted(() => {\n scrollPlugin.value?.setLayoutReady();\n});\n\n/* ------------------------------------------------------------------ */\n/* helpers */\n/* ------------------------------------------------------------------ */\ninterface PageSlotProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\n/** Build the prop object that we’ll forward into the default slot */\nfunction pageSlotProps(pl: PageLayout): PageSlotProps {\n const core = registry.value!.getStore().getState().core;\n return {\n ...pl,\n rotation: core.rotation,\n scale: core.scale,\n document: core.document,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* computed root style */\n/* ------------------------------------------------------------------ */\nconst rootStyle = computed<StyleValue>(() => {\n if (!layout.value) return props.style;\n\n const base =\n typeof props.style === 'object' && !Array.isArray(props.style)\n ? { ...props.style }\n : (props.style ?? {});\n\n return [\n base,\n {\n width: `${layout.value.totalWidth}px`,\n height: `${layout.value.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(layout.value.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n },\n ];\n});\n</script>\n\n<template>\n <!-- render nothing until both layout + registry exist -->\n <div v-if=\"layout && registry\" :style=\"rootStyle\" v-bind=\"attrs\">\n <!-- leading spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.startSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.startSpacing + 'px', width: '100%' }\" />\n\n <!-- actual page grid -->\n <div\n :style=\"{\n gap: layout.pageGap + 'px',\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n flexDirection: layout.strategy === 'horizontal' ? 'row' : 'column',\n minHeight: layout.strategy === 'horizontal' ? '100%' : undefined,\n minWidth: layout.strategy === 'vertical' ? 'fit-content' : undefined,\n }\"\n >\n <template v-for=\"item in layout.items\" :key=\"item.pageNumbers[0]\">\n <div :style=\"{ display: 'flex', justifyContent: 'center', gap: layout.pageGap + 'px' }\">\n <div\n v-for=\"pl in item.pageLayouts\"\n :key=\"pl.pageNumber\"\n :style=\"{ width: pl.rotatedWidth + 'px', height: pl.rotatedHeight + 'px' }\"\n >\n <!-- 🔑 give the host app full control over page content -->\n <slot :page=\"pageSlotProps(pl)\" />\n </div>\n </div>\n </template>\n </div>\n\n <!-- trailing spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.endSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.endSpacing + 'px', width: '100%' }\" />\n\n <!-- optional overlay components -->\n <component v-for=\"(el, i) in props.overlayElements\" :is=\"el\" :key=\"i\" />\n </div>\n</template>\n"],"names":["_unref","_openBlock","_createElementBlock","_mergeProps","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watchEffect, computed } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport function useScroll() {\n const { provides } = useScrollCapability();\n\n const currentPage = ref(1);\n const totalPages = ref(1);\n\n watchEffect((onCleanup) => {\n if (!provides.value) return;\n\n const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {\n currentPage.value = pageNumber;\n totalPages.value = tp;\n });\n onCleanup(unsubscribe);\n });\n\n // New format\n const state = computed(() => ({\n currentPage: currentPage.value,\n totalPages: totalPages.value,\n }));\n\n // Create deprecated properties with warnings\n const deprecatedCurrentPage = computed({\n get() {\n console.warn(\n `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n );\n return currentPage.value;\n },\n set(value) {\n currentPage.value = value;\n },\n });\n\n const deprecatedTotalPages = computed({\n get() {\n console.warn(\n `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n );\n return totalPages.value;\n },\n set(value) {\n totalPages.value = value;\n },\n });\n\n const deprecatedScroll = computed(() => {\n if (provides.value) {\n console.warn(\n `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`,\n );\n }\n return provides.value;\n });\n\n return {\n // New format (preferred)\n provides,\n state,\n\n // Deprecated properties (for backward compatibility)\n currentPage: deprecatedCurrentPage,\n totalPages: deprecatedTotalPages,\n scroll: deprecatedScroll,\n };\n}\n","<script setup lang=\"ts\">\n/* ------------------------------------------------------------------ */\n/* imports */\n/* ------------------------------------------------------------------ */\nimport { computed, onMounted, ref, watchEffect, useAttrs } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout, type PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/vue';\nimport { RenderPageProps } from '../../shared/types';\n\n/* ------------------------------------------------------------------ */\n/* props – pure layout; page content comes from the *slot* */\n/* ------------------------------------------------------------------ */\nconst props = withDefaults(\n defineProps<{\n style?: StyleValue;\n overlayElements?: any[];\n }>(),\n { overlayElements: () => [] },\n);\n\nconst attrs = useAttrs();\n\n/* ------------------------------------------------------------------ */\n/* plugin + reactive state */\n/* ------------------------------------------------------------------ */\nconst { plugin: scrollPlugin } = useScrollPlugin();\nconst { registry } = useRegistry(); // shallowRef<PluginRegistry|null>\n\nconst layout = ref<ScrollerLayout | null>(null);\n\n/* subscribe to scroller‑layout updates */\nwatchEffect((onCleanup) => {\n if (!scrollPlugin.value) return;\n\n layout.value = scrollPlugin.value.getScrollerLayout();\n const off = scrollPlugin.value.onScrollerData((l) => (layout.value = l));\n onCleanup(off);\n});\n\n/* inform plugin once the DOM is ready */\nonMounted(() => {\n scrollPlugin.value?.setLayoutReady();\n});\n\n/** Build the prop object that we’ll forward into the default slot */\nfunction pageSlotProps(pl: PageLayout): RenderPageProps {\n const core = registry.value!.getStore().getState().core;\n return {\n ...pl,\n rotation: core.rotation,\n scale: core.scale,\n document: core.document,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* computed root style */\n/* ------------------------------------------------------------------ */\nconst rootStyle = computed<StyleValue>(() => {\n if (!layout.value) return props.style;\n\n const base =\n typeof props.style === 'object' && !Array.isArray(props.style)\n ? { ...props.style }\n : (props.style ?? {});\n\n return [\n base,\n {\n width: `${layout.value.totalWidth}px`,\n height: `${layout.value.totalHeight}px`,\n position: 'relative',\n boxSizing: 'border-box',\n margin: '0 auto',\n ...(layout.value.strategy === ScrollStrategy.Horizontal && {\n display: 'flex',\n flexDirection: 'row',\n }),\n },\n ];\n});\n</script>\n\n<template>\n <!-- render nothing until both layout + registry exist -->\n <div v-if=\"layout && registry\" :style=\"rootStyle\" v-bind=\"attrs\">\n <!-- leading spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.startSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.startSpacing + 'px', width: '100%' }\" />\n\n <!-- actual page grid -->\n <div\n :style=\"{\n gap: layout.pageGap + 'px',\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n flexDirection: layout.strategy === 'horizontal' ? 'row' : 'column',\n minHeight: layout.strategy === 'horizontal' ? '100%' : undefined,\n minWidth: layout.strategy === 'vertical' ? 'fit-content' : undefined,\n }\"\n >\n <template v-for=\"item in layout.items\" :key=\"item.pageNumbers[0]\">\n <div :style=\"{ display: 'flex', justifyContent: 'center', gap: layout.pageGap + 'px' }\">\n <div\n v-for=\"pl in item.pageLayouts\"\n :key=\"pl.pageNumber\"\n :style=\"{ width: pl.rotatedWidth + 'px', height: pl.rotatedHeight + 'px' }\"\n >\n <!-- 🔑 give the host app full control over page content -->\n <slot :page=\"pageSlotProps(pl)\" />\n </div>\n </div>\n </template>\n </div>\n\n <!-- trailing spacer -->\n <div\n v-if=\"layout.strategy === 'horizontal'\"\n :style=\"{ width: layout.endSpacing + 'px', height: '100%', flexShrink: 0 }\"\n />\n <div v-else :style=\"{ height: layout.endSpacing + 'px', width: '100%' }\" />\n\n <!-- optional overlay components -->\n <component v-for=\"(el, i) in props.overlayElements\" :is=\"el\" :key=\"i\" />\n </div>\n</template>\n"],"names":["_unref","_openBlock","_createElementBlock","_mergeProps","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-scroll",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -26,25 +26,32 @@
|
|
|
26
26
|
"types": "./dist/vue/index.d.ts",
|
|
27
27
|
"import": "./dist/vue/index.js",
|
|
28
28
|
"require": "./dist/vue/index.cjs"
|
|
29
|
+
},
|
|
30
|
+
"./svelte": {
|
|
31
|
+
"types": "./dist/svelte/index.d.ts",
|
|
32
|
+
"svelte": "./dist/svelte/index.js",
|
|
33
|
+
"import": "./dist/svelte/index.js",
|
|
34
|
+
"require": "./dist/svelte/index.cjs"
|
|
29
35
|
}
|
|
30
36
|
},
|
|
31
37
|
"dependencies": {
|
|
32
|
-
"@embedpdf/models": "1.
|
|
38
|
+
"@embedpdf/models": "1.4.1"
|
|
33
39
|
},
|
|
34
40
|
"devDependencies": {
|
|
35
41
|
"@types/react": "^18.2.0",
|
|
36
42
|
"typescript": "^5.0.0",
|
|
37
|
-
"@embedpdf/build": "1.0
|
|
38
|
-
"@embedpdf/plugin-viewport": "1.
|
|
39
|
-
"@embedpdf/core": "1.
|
|
43
|
+
"@embedpdf/build": "1.1.0",
|
|
44
|
+
"@embedpdf/plugin-viewport": "1.4.1",
|
|
45
|
+
"@embedpdf/core": "1.4.1"
|
|
40
46
|
},
|
|
41
47
|
"peerDependencies": {
|
|
42
48
|
"preact": "^10.26.4",
|
|
43
49
|
"react": ">=16.8.0",
|
|
44
50
|
"react-dom": ">=16.8.0",
|
|
45
51
|
"vue": ">=3.2.0",
|
|
46
|
-
"
|
|
47
|
-
"@embedpdf/
|
|
52
|
+
"svelte": ">=5 <6",
|
|
53
|
+
"@embedpdf/core": "1.4.1",
|
|
54
|
+
"@embedpdf/plugin-viewport": "1.4.1"
|
|
48
55
|
},
|
|
49
56
|
"files": [
|
|
50
57
|
"dist",
|
|
@@ -67,7 +74,8 @@
|
|
|
67
74
|
"build:react": "vite build --mode react",
|
|
68
75
|
"build:preact": "vite build --mode preact",
|
|
69
76
|
"build:vue": "vite build --mode vue",
|
|
70
|
-
"build": "
|
|
77
|
+
"build:svelte": "vite build --mode svelte",
|
|
78
|
+
"build": "pnpm run clean && concurrently -c auto -n base,react,preact,vue,svelte \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\" \"vite build --mode vue\" \"vite build --mode svelte\"",
|
|
71
79
|
"clean": "rimraf dist",
|
|
72
80
|
"lint": "eslint src --color",
|
|
73
81
|
"lint:fix": "eslint src --color --fix"
|