@embedpdf/plugin-scroll 2.0.0 → 2.0.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID.\n */\nexport const useScroll = (getDocumentId: () => string | null): UseScrollReturn => {\n const capability = useScrollCapability();\n\n let state = $state({\n currentPage: 1,\n totalPages: 1,\n });\n\n // Reactive documentId\n const documentId = $derived(getDocumentId());\n\n // Scoped capability for current docId\n const scopedProvides = $derived(\n capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n );\n\n $effect(() => {\n const provides = capability.provides;\n const docId = documentId;\n\n if (!provides || !docId) {\n state.currentPage = 1;\n state.totalPages = 1;\n return;\n }\n\n const scope = provides.forDocument(docId);\n\n // Initial values\n state.currentPage = scope.getCurrentPage();\n state.totalPages = scope.getTotalPages();\n\n // Subscribe to page changes for THIS docId\n return provides.onPageChange((event) => {\n if (event.documentId === docId) {\n state.currentPage = event.pageNumber;\n state.totalPages = event.totalPages;\n }\n });\n });\n\n return {\n get provides() {\n return scopedProvides;\n },\n get state() {\n return state;\n },\n };\n};\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { HTMLAttributes } from 'svelte/elements';\n import { useScrollPlugin } from '../hooks';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import type { PageLayout } from '@embedpdf/plugin-scroll';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: Snippet<[PageLayout]>;\n };\n\n let { documentId, renderPage, ...restProps }: ScrollerProps = $props();\n\n const { plugin: scrollPlugin } = useScrollPlugin();\n\n let layoutData = $state<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n $effect(() => {\n if (!scrollPlugin || !documentId) {\n layoutData = { layout: null, docId: null };\n return;\n }\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n layoutData = { layout: newLayout, docId: documentId };\n });\n\n // When the effect re-runs or component unmounts, clear the state\n return () => {\n unsubscribe();\n layoutData = { layout: null, docId: null };\n scrollPlugin.clearLayoutReady(documentId);\n };\n });\n\n // Only use layout if it matches the current documentId (prevents stale data)\n const scrollerLayout = $derived(layoutData.docId === documentId ? layoutData.layout : null);\n\n // Call setLayoutReady after layout is rendered (Svelte's equivalent to useLayoutEffect)\n $effect.pre(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n });\n</script>\n\n{#if scrollerLayout}\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' : undefined}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : undefined}\n >\n <!-- Leading spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n\n <!-- Page grid -->\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-height={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '100%' : undefined}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? undefined\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 renderPage(layout)}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n\n <!-- Trailing spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n </div>\n{/if}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","restProps","$","rest_props","$$props","plugin","scrollPlugin","layoutData","layout","docId","user_effect","documentId","set","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","derived","get","user_pre_effect","setLayoutReady","width","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","items","item","pageNumbers","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID.\n */\nexport const useScroll = (getDocumentId: () => string | null): UseScrollReturn => {\n const capability = useScrollCapability();\n\n let state = $state({\n currentPage: 1,\n totalPages: 1,\n });\n\n // Reactive documentId\n const documentId = $derived(getDocumentId());\n\n // Scoped capability for current docId\n const scopedProvides = $derived(\n capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n );\n\n $effect(() => {\n const provides = capability.provides;\n const docId = documentId;\n\n if (!provides || !docId) {\n state.currentPage = 1;\n state.totalPages = 1;\n return;\n }\n\n const scope = provides.forDocument(docId);\n\n // Initial values\n state.currentPage = scope.getCurrentPage();\n state.totalPages = scope.getTotalPages();\n\n // Subscribe to page changes for THIS docId\n return provides.onPageChange((event) => {\n if (event.documentId === docId) {\n state.currentPage = event.pageNumber;\n state.totalPages = event.totalPages;\n }\n });\n });\n\n return {\n get provides() {\n return scopedProvides;\n },\n get state() {\n return state;\n },\n };\n};\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { HTMLAttributes } from 'svelte/elements';\n import { useScrollPlugin } from '../hooks';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import type { PageLayout } from '@embedpdf/plugin-scroll';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: Snippet<[PageLayout]>;\n };\n\n let { documentId, renderPage, ...restProps }: ScrollerProps = $props();\n\n const { plugin: scrollPlugin } = useScrollPlugin();\n\n let layoutData = $state<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n $effect(() => {\n if (!scrollPlugin || !documentId) {\n layoutData = { layout: null, docId: null };\n return;\n }\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n layoutData = { layout: newLayout, docId: documentId };\n });\n\n // When the effect re-runs or component unmounts, clear the state\n return () => {\n unsubscribe();\n layoutData = { layout: null, docId: null };\n scrollPlugin.clearLayoutReady(documentId);\n };\n });\n\n // Only use layout if it matches the current documentId (prevents stale data)\n const scrollerLayout = $derived(layoutData.docId === documentId ? layoutData.layout : null);\n\n // Call setLayoutReady after layout is rendered (Svelte's equivalent to useLayoutEffect)\n $effect.pre(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n });\n</script>\n\n{#if scrollerLayout}\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' : undefined}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : undefined}\n >\n <!-- Leading spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n\n <!-- Page grid -->\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-height={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '100%' : undefined}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? undefined\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 renderPage(layout)}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n\n <!-- Trailing spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n </div>\n{/if}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","restProps","$","rest_props","$$props","plugin","scrollPlugin","layoutData","proxy","layout","docId","user_effect","documentId","set","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","derived","get","user_pre_effect","setLayoutReady","div","root_1","width","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","div_1","div_2","each","items","item","pageNumbers","div_3","root_2","pageLayouts","pageNumber","$$anchor","div_4","root_3","styles_3","rotatedWidth","rotatedHeight","styles_2","gap","pageGap","div_5","styles","startSpacing","styles_1","styles_4","endSpacing","consequent","getDocumentId","capability","state","currentPage","totalPages","scopedProvides","provides","forDocument","scope","getCurrentPage","getTotalPages","onPageChange","event"],"mappings":"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"}
|
package/dist/svelte/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID.\n */\nexport const useScroll = (getDocumentId: () => string | null): UseScrollReturn => {\n const capability = useScrollCapability();\n\n let state = $state({\n currentPage: 1,\n totalPages: 1,\n });\n\n // Reactive documentId\n const documentId = $derived(getDocumentId());\n\n // Scoped capability for current docId\n const scopedProvides = $derived(\n capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n );\n\n $effect(() => {\n const provides = capability.provides;\n const docId = documentId;\n\n if (!provides || !docId) {\n state.currentPage = 1;\n state.totalPages = 1;\n return;\n }\n\n const scope = provides.forDocument(docId);\n\n // Initial values\n state.currentPage = scope.getCurrentPage();\n state.totalPages = scope.getTotalPages();\n\n // Subscribe to page changes for THIS docId\n return provides.onPageChange((event) => {\n if (event.documentId === docId) {\n state.currentPage = event.pageNumber;\n state.totalPages = event.totalPages;\n }\n });\n });\n\n return {\n get provides() {\n return scopedProvides;\n },\n get state() {\n return state;\n },\n };\n};\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { HTMLAttributes } from 'svelte/elements';\n import { useScrollPlugin } from '../hooks';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import type { PageLayout } from '@embedpdf/plugin-scroll';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: Snippet<[PageLayout]>;\n };\n\n let { documentId, renderPage, ...restProps }: ScrollerProps = $props();\n\n const { plugin: scrollPlugin } = useScrollPlugin();\n\n let layoutData = $state<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n $effect(() => {\n if (!scrollPlugin || !documentId) {\n layoutData = { layout: null, docId: null };\n return;\n }\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n layoutData = { layout: newLayout, docId: documentId };\n });\n\n // When the effect re-runs or component unmounts, clear the state\n return () => {\n unsubscribe();\n layoutData = { layout: null, docId: null };\n scrollPlugin.clearLayoutReady(documentId);\n };\n });\n\n // Only use layout if it matches the current documentId (prevents stale data)\n const scrollerLayout = $derived(layoutData.docId === documentId ? layoutData.layout : null);\n\n // Call setLayoutReady after layout is rendered (Svelte's equivalent to useLayoutEffect)\n $effect.pre(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n });\n</script>\n\n{#if scrollerLayout}\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' : undefined}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : undefined}\n >\n <!-- Leading spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n\n <!-- Page grid -->\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-height={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '100%' : undefined}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? undefined\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 renderPage(layout)}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n\n <!-- Trailing spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n </div>\n{/if}\n"],"names":["$$anchor"],"mappings":";;;;;AAGa,MAAA,kBAAA,MAAwB,UAAwB,aAAa,EAAE;AAC/D,MAAA,sBAAA,MAA4B,cAA4B,aAAa,EAAE;MAevE,YAAA,CAAa,kBAAwD;AAC1E,QAAA,aAAa,oBAAA;AAEf,MAAA,kBACF,aAAa,GACb,YAAY,GAAA;AAIR,QAAA,uBAAsB,aAAA;AAGtB,QAAA,iBAAA,EAAA,QAAA,MACJ,WAAW,kBAAY,UAAA,IAAa,WAAW,SAAS,kBAAY,UAAU,CAAA,IAAI,IAAA;AAGpF,IAAA,kBAAc;UACN,WAAW,WAAW;AACtB,UAAA,cAAQ,UAAA;SAET,YAAA,CAAa,OAAO;AACvB,YAAM,cAAc;AACpB,YAAM,aAAa;;IAErB;AAEM,UAAA,QAAQ,SAAS,YAAY,KAAK;AAGxC,UAAM,cAAc,MAAM,eAAA;AAC1B,UAAM,aAAa,MAAM,cAAA;AAGlB,WAAA,SAAS,aAAA,CAAc,UAAU;AAClC,UAAA,MAAM,eAAe,OAAO;AAC9B,cAAM,cAAc,MAAM;AAC1B,cAAM,aAAa,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;;IAGK,IAAA,WAAW;mBACN,cAAA;AAAA,IACT;AAAA,IACI,IAAA,QAAQ;aACH;AAAA,IACT;AAAA;AAEJ;;;;qCCpEA;;MAYmC,YAAS,EAAA,WAAA,SAAA;AAAA;;;;;;UAElC,QAAQ,aAAY,IAAK,gBAAe;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n provides: ScrollScope | null;\n state: {\n currentPage: number;\n totalPages: number;\n };\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID.\n */\nexport const useScroll = (getDocumentId: () => string | null): UseScrollReturn => {\n const capability = useScrollCapability();\n\n let state = $state({\n currentPage: 1,\n totalPages: 1,\n });\n\n // Reactive documentId\n const documentId = $derived(getDocumentId());\n\n // Scoped capability for current docId\n const scopedProvides = $derived(\n capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n );\n\n $effect(() => {\n const provides = capability.provides;\n const docId = documentId;\n\n if (!provides || !docId) {\n state.currentPage = 1;\n state.totalPages = 1;\n return;\n }\n\n const scope = provides.forDocument(docId);\n\n // Initial values\n state.currentPage = scope.getCurrentPage();\n state.totalPages = scope.getTotalPages();\n\n // Subscribe to page changes for THIS docId\n return provides.onPageChange((event) => {\n if (event.documentId === docId) {\n state.currentPage = event.pageNumber;\n state.totalPages = event.totalPages;\n }\n });\n });\n\n return {\n get provides() {\n return scopedProvides;\n },\n get state() {\n return state;\n },\n };\n};\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { HTMLAttributes } from 'svelte/elements';\n import { useScrollPlugin } from '../hooks';\n import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n import type { PageLayout } from '@embedpdf/plugin-scroll';\n\n type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n documentId: string;\n renderPage: Snippet<[PageLayout]>;\n };\n\n let { documentId, renderPage, ...restProps }: ScrollerProps = $props();\n\n const { plugin: scrollPlugin } = useScrollPlugin();\n\n let layoutData = $state<{\n layout: ScrollerLayout | null;\n docId: string | null;\n }>({ layout: null, docId: null });\n\n $effect(() => {\n if (!scrollPlugin || !documentId) {\n layoutData = { layout: null, docId: null };\n return;\n }\n\n // When we get new data, store it along with the current documentId\n const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n layoutData = { layout: newLayout, docId: documentId };\n });\n\n // When the effect re-runs or component unmounts, clear the state\n return () => {\n unsubscribe();\n layoutData = { layout: null, docId: null };\n scrollPlugin.clearLayoutReady(documentId);\n };\n });\n\n // Only use layout if it matches the current documentId (prevents stale data)\n const scrollerLayout = $derived(layoutData.docId === documentId ? layoutData.layout : null);\n\n // Call setLayoutReady after layout is rendered (Svelte's equivalent to useLayoutEffect)\n $effect.pre(() => {\n if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n scrollPlugin.setLayoutReady(documentId);\n });\n</script>\n\n{#if scrollerLayout}\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' : undefined}\n style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : undefined}\n >\n <!-- Leading spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n\n <!-- Page grid -->\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-height={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '100%' : undefined}\n style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n ? undefined\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 renderPage(layout)}\n </div>\n {/each}\n </div>\n {/each}\n </div>\n\n <!-- Trailing spacer -->\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={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n ></div>\n </div>\n{/if}\n"],"names":["$$anchor"],"mappings":"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"}
|
|
@@ -2,7 +2,16 @@ interface ScrollerProps {
|
|
|
2
2
|
documentId: string;
|
|
3
3
|
}
|
|
4
4
|
declare var __VLS_1: {
|
|
5
|
-
page:
|
|
5
|
+
page: {
|
|
6
|
+
pageNumber: number;
|
|
7
|
+
pageIndex: number;
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
rotatedWidth: number;
|
|
13
|
+
rotatedHeight: number;
|
|
14
|
+
};
|
|
6
15
|
};
|
|
7
16
|
type __VLS_Slots = {} & {
|
|
8
17
|
default?: (props: typeof __VLS_1) => any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-scroll",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@embedpdf/models": "2.0.
|
|
38
|
+
"@embedpdf/models": "2.0.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@types/react": "^18.2.0",
|
|
42
42
|
"typescript": "^5.0.0",
|
|
43
|
-
"@embedpdf/
|
|
44
|
-
"@embedpdf/plugin-viewport": "2.0.
|
|
45
|
-
"@embedpdf/
|
|
46
|
-
"@embedpdf/
|
|
43
|
+
"@embedpdf/core": "2.0.1",
|
|
44
|
+
"@embedpdf/plugin-viewport": "2.0.1",
|
|
45
|
+
"@embedpdf/plugin-spread": "2.0.1",
|
|
46
|
+
"@embedpdf/build": "1.1.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"preact": "^10.26.4",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"react-dom": ">=16.8.0",
|
|
52
52
|
"vue": ">=3.2.0",
|
|
53
53
|
"svelte": ">=5 <6",
|
|
54
|
-
"@embedpdf/core": "2.0.
|
|
55
|
-
"@embedpdf/plugin-viewport": "2.0.
|
|
54
|
+
"@embedpdf/core": "2.0.1",
|
|
55
|
+
"@embedpdf/plugin-viewport": "2.0.1"
|
|
56
56
|
},
|
|
57
57
|
"files": [
|
|
58
58
|
"dist",
|