@embedpdf/plugin-scroll 1.0.9 → 1.0.11
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/index.cjs +17 -166
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +19 -162
- package/dist/index.js.map +1 -1
- package/dist/preact/index.cjs +5 -0
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.d.cts +1 -0
- package/dist/preact/index.d.ts +1 -0
- package/dist/preact/index.js +5 -0
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +5 -0
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +1 -0
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +5 -0
- package/dist/react/index.js.map +1 -1
- package/package.json +7 -6
package/dist/react/index.cjs
CHANGED
|
@@ -58,6 +58,7 @@ var import_react4 = require("@embedpdf/core/react");
|
|
|
58
58
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
59
|
function Scroller({ renderPage, overlayElements, ...props }) {
|
|
60
60
|
const { provides: scrollProvides } = useScrollCapability();
|
|
61
|
+
const { plugin: scrollPlugin } = useScrollPlugin();
|
|
61
62
|
const { registry } = (0, import_react4.useRegistry)();
|
|
62
63
|
const [scrollerLayout, setScrollerLayout] = (0, import_react3.useState)(
|
|
63
64
|
() => scrollProvides?.getScrollerLayout() ?? null
|
|
@@ -66,6 +67,10 @@ function Scroller({ renderPage, overlayElements, ...props }) {
|
|
|
66
67
|
if (!scrollProvides) return;
|
|
67
68
|
return scrollProvides.onScrollerData(setScrollerLayout);
|
|
68
69
|
}, [scrollProvides]);
|
|
70
|
+
(0, import_react3.useEffect)(() => {
|
|
71
|
+
if (!scrollPlugin) return;
|
|
72
|
+
scrollPlugin.setLayoutReady();
|
|
73
|
+
}, [scrollPlugin]);
|
|
69
74
|
if (!scrollerLayout) return null;
|
|
70
75
|
if (!registry) return null;
|
|
71
76
|
const coreState = registry.getStore().getState();
|
package/dist/react/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/index.ts","../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["export * from './hooks';\nexport * from './components';\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useEffect, useState } from 'react';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const { provides: scroll } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!scroll) return;\n return scroll.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [scroll]);\n\n return {\n ...scroll,\n currentPage,\n totalPages,\n };\n};\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { provides: scrollProvides } = useScrollCapability();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollProvides?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollProvides) return;\n\n return scrollProvides.onScrollerData(setScrollerLayout);\n }, [scrollProvides]);\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AACzC,2BAA6B;AAC7B,IAAAA,gBAAoC;AAE7B,IAAM,kBAAkB,UAAM,wBAAwB,kCAAa,EAAE;AACrE,IAAM,sBAAsB,UAAM,4BAA4B,kCAAa,EAAE;AAE7E,IAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,UAAU,OAAO,IAAI,oBAAoB;AACjD,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,CAAC;AAChD,QAAM,CAAC,YAAY,aAAa,QAAI,wBAAS,CAAC;AAE9C,+BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,WAAO,OAAO,aAAa,CAAC,EAAE,YAAY,YAAAC,YAAW,MAAM;AACzD,qBAAe,UAAU;AACzB,oBAAcA,WAAU;AAAA,IAC1B,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;;;ACzBA,IAAAC,gBAAsD;AACtD,IAAAC,wBAA2D;AAC3D,IAAAD,gBAA4B;
|
|
1
|
+
{"version":3,"sources":["../../src/react/index.ts","../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["export * from './hooks';\nexport * from './components';\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useEffect, useState } from 'react';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const { provides: scroll } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!scroll) return;\n return scroll.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [scroll]);\n\n return {\n ...scroll,\n currentPage,\n totalPages,\n };\n};\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability, useScrollPlugin } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { provides: scrollProvides } = useScrollCapability();\n const { plugin: scrollPlugin } = useScrollPlugin();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollProvides?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollProvides) return;\n\n return scrollProvides.onScrollerData(setScrollerLayout);\n }, [scrollProvides]);\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"],"mappings":"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","names":["import_react","totalPages","import_react","import_plugin_scroll"]}
|
package/dist/react/index.d.cts
CHANGED
|
@@ -27,6 +27,7 @@ declare const useScroll: () => {
|
|
|
27
27
|
getTotalPages?: (() => number) | undefined;
|
|
28
28
|
onPageChange?: _embedpdf_core.EventHook<_embedpdf_plugin_scroll.PageChangePayload> | undefined;
|
|
29
29
|
onLayoutChange?: _embedpdf_core.EventHook<_embedpdf_plugin_scroll.LayoutChangePayload> | undefined;
|
|
30
|
+
onLayoutReady?: _embedpdf_core.EventHook<boolean> | undefined;
|
|
30
31
|
scrollToPage?: ((options: _embedpdf_plugin_scroll.ScrollToPageOptions) => void) | undefined;
|
|
31
32
|
scrollToNextPage?: ((behavior?: ScrollBehavior) => void) | undefined;
|
|
32
33
|
scrollToPreviousPage?: ((behavior?: ScrollBehavior) => void) | undefined;
|
package/dist/react/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ declare const useScroll: () => {
|
|
|
27
27
|
getTotalPages?: (() => number) | undefined;
|
|
28
28
|
onPageChange?: _embedpdf_core.EventHook<_embedpdf_plugin_scroll.PageChangePayload> | undefined;
|
|
29
29
|
onLayoutChange?: _embedpdf_core.EventHook<_embedpdf_plugin_scroll.LayoutChangePayload> | undefined;
|
|
30
|
+
onLayoutReady?: _embedpdf_core.EventHook<boolean> | undefined;
|
|
30
31
|
scrollToPage?: ((options: _embedpdf_plugin_scroll.ScrollToPageOptions) => void) | undefined;
|
|
31
32
|
scrollToNextPage?: ((behavior?: ScrollBehavior) => void) | undefined;
|
|
32
33
|
scrollToPreviousPage?: ((behavior?: ScrollBehavior) => void) | undefined;
|
package/dist/react/index.js
CHANGED
|
@@ -29,6 +29,7 @@ import { useRegistry } from "@embedpdf/core/react";
|
|
|
29
29
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
30
30
|
function Scroller({ renderPage, overlayElements, ...props }) {
|
|
31
31
|
const { provides: scrollProvides } = useScrollCapability();
|
|
32
|
+
const { plugin: scrollPlugin } = useScrollPlugin();
|
|
32
33
|
const { registry } = useRegistry();
|
|
33
34
|
const [scrollerLayout, setScrollerLayout] = useState2(
|
|
34
35
|
() => scrollProvides?.getScrollerLayout() ?? null
|
|
@@ -37,6 +38,10 @@ function Scroller({ renderPage, overlayElements, ...props }) {
|
|
|
37
38
|
if (!scrollProvides) return;
|
|
38
39
|
return scrollProvides.onScrollerData(setScrollerLayout);
|
|
39
40
|
}, [scrollProvides]);
|
|
41
|
+
useEffect2(() => {
|
|
42
|
+
if (!scrollPlugin) return;
|
|
43
|
+
scrollPlugin.setLayoutReady();
|
|
44
|
+
}, [scrollPlugin]);
|
|
40
45
|
if (!scrollerLayout) return null;
|
|
41
46
|
if (!registry) return null;
|
|
42
47
|
const coreState = registry.getStore().getState();
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useEffect, useState } from 'react';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const { provides: scroll } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!scroll) return;\n return scroll.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [scroll]);\n\n return {\n ...scroll,\n currentPage,\n totalPages,\n };\n};\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { provides: scrollProvides } = useScrollCapability();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollProvides?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollProvides) return;\n\n return scrollProvides.onScrollerData(setScrollerLayout);\n }, [scrollProvides]);\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"],"mappings":";AAAA,SAAS,eAAe,iBAAiB;AACzC,SAAS,oBAAoB;AAC7B,SAAS,WAAW,gBAAgB;AAE7B,IAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,IAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;AAE7E,IAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,UAAU,OAAO,IAAI,oBAAoB;AACjD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,WAAO,OAAO,aAAa,CAAC,EAAE,YAAY,YAAAA,YAAW,MAAM;AACzD,qBAAe,UAAU;AACzB,oBAAcA,WAAU;AAAA,IAC1B,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;;;ACzBA,SAA2B,aAAAC,YAAW,YAAAC,iBAAgB;AACtD,SAAS,sBAAkD;AAC3D,SAAS,mBAAmB;
|
|
1
|
+
{"version":3,"sources":["../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useEffect, useState } from 'react';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n const { provides: scroll } = useScrollCapability();\n const [currentPage, setCurrentPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n useEffect(() => {\n if (!scroll) return;\n return scroll.onPageChange(({ pageNumber, totalPages }) => {\n setCurrentPage(pageNumber);\n setTotalPages(totalPages);\n });\n }, [scroll]);\n\n return {\n ...scroll,\n currentPage,\n totalPages,\n };\n};\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability, useScrollPlugin } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n rotation: Rotation;\n scale: number;\n document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n renderPage: (props: RenderPageProps) => ReactNode;\n overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n const { provides: scrollProvides } = useScrollCapability();\n const { plugin: scrollPlugin } = useScrollPlugin();\n const { registry } = useRegistry();\n const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n () => scrollProvides?.getScrollerLayout() ?? null,\n );\n\n useEffect(() => {\n if (!scrollProvides) return;\n\n return scrollProvides.onScrollerData(setScrollerLayout);\n }, [scrollProvides]);\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"],"mappings":"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","names":["totalPages","useEffect","useState","useState","useEffect"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-scroll",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -22,20 +22,21 @@
|
|
|
22
22
|
"require": "./dist/react/index.cjs"
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
|
-
"dependencies": {
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"@embedpdf/models": "1.0.11"
|
|
27
|
+
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"@types/react": "^18.2.0",
|
|
28
30
|
"tsup": "^8.0.0",
|
|
29
31
|
"typescript": "^5.0.0",
|
|
30
|
-
"@embedpdf/plugin-viewport": "1.0.
|
|
31
|
-
"@embedpdf/models": "1.0.9"
|
|
32
|
+
"@embedpdf/plugin-viewport": "1.0.11"
|
|
32
33
|
},
|
|
33
34
|
"peerDependencies": {
|
|
34
35
|
"react": ">=16.8.0",
|
|
35
36
|
"react-dom": ">=16.8.0",
|
|
36
37
|
"preact": "^10.26.4",
|
|
37
|
-
"@embedpdf/core": "1.0.
|
|
38
|
-
"@embedpdf/plugin-viewport": "1.0.
|
|
38
|
+
"@embedpdf/core": "1.0.11",
|
|
39
|
+
"@embedpdf/plugin-viewport": "1.0.11"
|
|
39
40
|
},
|
|
40
41
|
"files": [
|
|
41
42
|
"dist",
|