@embedpdf/plugin-thumbnail 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.cjs.map +1 -1
- package/dist/svelte/index.js +21 -17
- package/dist/svelte/index.js.map +1 -1
- package/package.json +8 -8
package/dist/svelte/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),n=require("@embedpdf/plugin-thumbnail");require("svelte/internal/disclose-version");const r=require("@embedpdf/models");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}const l=i(e),o=()=>t.usePlugin(n.ThumbnailPlugin.id),s=()=>t.useCapability(n.ThumbnailPlugin.id);var u=l.from_html("<img/>");var a=l.from_html("<div><div></div></div>");exports.ThumbImg=function(e,t){l.push(t,!0);const n=l.rest_props(t,["$$slots","$$events","$$legacy","meta"]),i=s(),a=o();let c=l.state(void 0),p=null,d=l.state(0);l.user_effect((()=>{if(a.plugin)return a.plugin.onRefreshPages((e=>{e.includes(t.meta.pageIndex)&&l.set(d,l.get(d)+1)}))})),l.user_effect((()=>{var e;const n=null==(e=i.provides)?void 0:e.renderThumb(t.meta.pageIndex,window.devicePixelRatio);return null==n||n.wait((e=>{const t=URL.createObjectURL(e);p=t,l.set(c,t,!0)}),r.ignore),()=>{p?(URL.revokeObjectURL(p),p=null):null==n||n.abort({code:r.PdfErrorCode.Cancelled,message:"canceled render task"})}}));const g=()=>{p&&(URL.revokeObjectURL(p),p=null)};var f=l.comment(),v=l.first_child(f),b=e=>{var t=u();l.attribute_effect(t,(()=>({src:l.get(c),onload:g,...n,alt:"PDF thumbnail"}))),l.replay_events(t),l.append(e,t)};l.if(v,(e=>{l.get(c)&&e(b)})),l.append(e,f),l.pop()},exports.ThumbnailsPane=function(e,t){l.push(t,!0);const n=l.rest_props(t,["$$slots","$$events","$$legacy","children"]),r=o();let i,s=l.state(null);l.user_effect((()=>{if(r.plugin)return r.plugin.onWindow((e=>{l.set(s,e,!0)}))})),l.user_effect((()=>{const e=i;if(!e||!r.plugin)return;const t=()=>{r.plugin.updateWindow(e.scrollTop,e.clientHeight)};return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)})),l.user_effect((()=>{const e=i;if(!e||!r.plugin)return;const t=new ResizeObserver((()=>{r.plugin.updateWindow(e.scrollTop,e.clientHeight)}));return t.observe(e),()=>t.disconnect()})),l.user_effect((()=>{const e=i;e&&r.plugin&&l.get(s)&&r.plugin.updateWindow(e.scrollTop,e.clientHeight)})),l.user_effect((()=>{const e=i;if(e&&r.plugin&&l.get(s))return r.plugin.onScrollTo((({top:t,behavior:n})=>{e.scrollTo({top:t,behavior:n})}))}));const u=l.derived((()=>{var e;return(null==(e=null==r?void 0:r.plugin)?void 0:e.cfg.paddingY)??0})),c=l.derived((()=>{var e;return(null==(e=l.get(s))?void 0:e.totalHeight)??0})),p=l.derived((()=>{var e;return(null==(e=l.get(s))?void 0:e.items)??[]}));var d=a();l.attribute_effect(d,(e=>({...n,[l.STYLE]:e})),[()=>({"overflow-y":"auto",position:"relative","padding-top":`${l.get(u)??""}px`,"padding-bottom":`${l.get(u)??""}px`,height:"100%"})]);var g=l.child(d);let f;l.each(g,21,(()=>l.get(p)),(e=>e.pageIndex),((e,n)=>{var r=l.comment(),i=l.first_child(r);l.snippet(i,(()=>t.children),(()=>l.get(n))),l.append(e,r)})),l.reset(g),l.reset(d),l.bind_this(d,(e=>i=e),(()=>i)),l.template_effect((e=>f=l.set_style(g,"",f,e)),[()=>({height:`${l.get(c)??""}px`,position:"relative"})]),l.append(e,d),l.pop()},exports.useThumbnailCapability=s,exports.useThumbnailPlugin=o,Object.keys(n).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n import { ignore, PdfErrorCode } from '@embedpdf/models';\n import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n import type { HTMLImgAttributes } from 'svelte/elements';\n\n interface Props extends HTMLImgAttributes {\n meta: ThumbMeta;\n }\n\n const { meta, ...imgProps }: Props = $props();\n\n const
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n import { ignore, PdfErrorCode } from '@embedpdf/models';\n import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n import type { HTMLImgAttributes } from 'svelte/elements';\n\n interface Props extends HTMLImgAttributes {\n meta: ThumbMeta;\n }\n\n const { meta, ...imgProps }: Props = $props();\n\n const thumbnailCapability = useThumbnailCapability();\n const thumbnailPlugin = useThumbnailPlugin();\n\n let url = $state<string | undefined>(undefined);\n let urlRef: string | null = null;\n let refreshTick = $state(0);\n\n // Listen for refresh events\n $effect(() => {\n if (!thumbnailPlugin.plugin) return;\n return thumbnailPlugin.plugin.onRefreshPages((pages) => {\n if (pages.includes(meta.pageIndex)) {\n refreshTick = refreshTick + 1;\n }\n });\n });\n\n // Render thumbnail\n $effect(() => {\n const task = thumbnailCapability.provides?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n task?.wait((blob) => {\n const objectUrl = URL.createObjectURL(blob);\n urlRef = objectUrl;\n url = objectUrl;\n }, ignore);\n\n return () => {\n if (urlRef) {\n URL.revokeObjectURL(urlRef);\n urlRef = null;\n } else {\n task?.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n });\n\n const handleImageLoad = () => {\n if (urlRef) {\n URL.revokeObjectURL(urlRef);\n urlRef = null;\n }\n };\n</script>\n\n{#if url}\n <img src={url} onload={handleImageLoad} {...imgProps} alt=\"PDF thumbnail\" />\n{/if}\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\n import { useThumbnailPlugin } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n\n interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n children: Snippet<[ThumbMeta]>;\n }\n\n const { children, ...divProps }: Props = $props();\n\n const thumbnailPlugin = useThumbnailPlugin();\n\n let viewportRef: HTMLDivElement | undefined;\n let window = $state<WindowState | null>(null);\n\n // 1) subscribe once to window updates\n $effect(() => {\n if (!thumbnailPlugin.plugin) return;\n return thumbnailPlugin.plugin.onWindow((newWindow) => {\n window = newWindow;\n });\n });\n\n // 2) keep plugin in sync while the user scrolls\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin) return;\n\n const onScroll = () => {\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n };\n\n vp.addEventListener('scroll', onScroll);\n return () => vp.removeEventListener('scroll', onScroll);\n });\n\n // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin) return;\n\n const resizeObserver = new ResizeObserver(() => {\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n });\n\n resizeObserver.observe(vp);\n return () => resizeObserver.disconnect();\n });\n\n // 3) kick-start after document change\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin || !window) return;\n\n // push initial metrics\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n });\n\n // 4) let plugin drive scroll – only after window is set, and only once\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin || !window) return;\n\n return thumbnailPlugin.plugin.onScrollTo(({ top, behavior }) => {\n vp.scrollTo({ top, behavior });\n });\n });\n\n const paddingY = $derived(thumbnailPlugin?.plugin?.cfg.paddingY ?? 0);\n const totalHeight = $derived(window?.totalHeight ?? 0);\n const items = $derived(window?.items ?? []);\n</script>\n\n<div\n bind:this={viewportRef}\n style:overflow-y=\"auto\"\n style:position=\"relative\"\n style:padding-top=\"{paddingY}px\"\n style:padding-bottom=\"{paddingY}px\"\n style:height=\"100%\"\n {...divProps}\n>\n <div style:height=\"{totalHeight}px\" style:position=\"relative\">\n {#each items as meta (meta.pageIndex)}\n {@render children(meta)}\n {/each}\n </div>\n</div>\n"],"names":["useThumbnailPlugin","usePlugin","ThumbnailPlugin","id","useThumbnailCapability","useCapability","imgProps","$","rest_props","$$props","thumbnailCapability","thumbnailPlugin","url","urlRef","refreshTick","user_effect","plugin","onRefreshPages","pages","includes","meta","pageIndex","get","task","_a","provides","renderThumb","window","devicePixelRatio","wait","blob","objectUrl","URL","createObjectURL","$__namespace","set","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","handleImageLoad","consequent","divProps","viewportRef","onWindow","newWindow","vp","onScroll","updateWindow","scrollTop","clientHeight","addEventListener","removeEventListener","resizeObserver","ResizeObserver","observe","disconnect","onScrollTo","top","behavior","scrollTo","paddingY","derived","cfg","totalHeight","items","STYLE","$0","each","div_1","bind_this","div","$$value"],"mappings":"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"}
|
package/dist/svelte/index.js
CHANGED
|
@@ -10,21 +10,22 @@ var root_1 = $.from_html(`<img/>`);
|
|
|
10
10
|
function ThumbImg($$anchor, $$props) {
|
|
11
11
|
$.push($$props, true);
|
|
12
12
|
const imgProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "meta"]);
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const thumbnailCapability = useThumbnailCapability();
|
|
14
|
+
const thumbnailPlugin = useThumbnailPlugin();
|
|
15
15
|
let url = $.state(void 0);
|
|
16
16
|
let urlRef = null;
|
|
17
17
|
let refreshTick = $.state(0);
|
|
18
18
|
$.user_effect(() => {
|
|
19
|
-
if (!thumbnailPlugin) return;
|
|
20
|
-
return thumbnailPlugin.onRefreshPages((pages) => {
|
|
19
|
+
if (!thumbnailPlugin.plugin) return;
|
|
20
|
+
return thumbnailPlugin.plugin.onRefreshPages((pages) => {
|
|
21
21
|
if (pages.includes($$props.meta.pageIndex)) {
|
|
22
22
|
$.set(refreshTick, $.get(refreshTick) + 1);
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
});
|
|
26
26
|
$.user_effect(() => {
|
|
27
|
-
|
|
27
|
+
var _a;
|
|
28
|
+
const task = (_a = thumbnailCapability.provides) == null ? void 0 : _a.renderThumb($$props.meta.pageIndex, window.devicePixelRatio);
|
|
28
29
|
task == null ? void 0 : task.wait(
|
|
29
30
|
(blob) => {
|
|
30
31
|
const objectUrl = URL.createObjectURL(blob);
|
|
@@ -76,46 +77,49 @@ var root = $.from_html(`<div><div></div></div>`);
|
|
|
76
77
|
function ThumbnailsPane($$anchor, $$props) {
|
|
77
78
|
$.push($$props, true);
|
|
78
79
|
const divProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children"]);
|
|
79
|
-
const
|
|
80
|
+
const thumbnailPlugin = useThumbnailPlugin();
|
|
80
81
|
let viewportRef;
|
|
81
82
|
let window2 = $.state(null);
|
|
82
83
|
$.user_effect(() => {
|
|
83
|
-
if (!thumbnailPlugin) return;
|
|
84
|
-
return thumbnailPlugin.onWindow((newWindow) => {
|
|
84
|
+
if (!thumbnailPlugin.plugin) return;
|
|
85
|
+
return thumbnailPlugin.plugin.onWindow((newWindow) => {
|
|
85
86
|
$.set(window2, newWindow, true);
|
|
86
87
|
});
|
|
87
88
|
});
|
|
88
89
|
$.user_effect(() => {
|
|
89
90
|
const vp = viewportRef;
|
|
90
|
-
if (!vp || !thumbnailPlugin) return;
|
|
91
|
+
if (!vp || !thumbnailPlugin.plugin) return;
|
|
91
92
|
const onScroll = () => {
|
|
92
|
-
thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
93
|
+
thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
93
94
|
};
|
|
94
95
|
vp.addEventListener("scroll", onScroll);
|
|
95
96
|
return () => vp.removeEventListener("scroll", onScroll);
|
|
96
97
|
});
|
|
97
98
|
$.user_effect(() => {
|
|
98
99
|
const vp = viewportRef;
|
|
99
|
-
if (!vp || !thumbnailPlugin) return;
|
|
100
|
+
if (!vp || !thumbnailPlugin.plugin) return;
|
|
100
101
|
const resizeObserver = new ResizeObserver(() => {
|
|
101
|
-
thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
102
|
+
thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
102
103
|
});
|
|
103
104
|
resizeObserver.observe(vp);
|
|
104
105
|
return () => resizeObserver.disconnect();
|
|
105
106
|
});
|
|
106
107
|
$.user_effect(() => {
|
|
107
108
|
const vp = viewportRef;
|
|
108
|
-
if (!vp || !thumbnailPlugin || !$.get(window2)) return;
|
|
109
|
-
thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
109
|
+
if (!vp || !thumbnailPlugin.plugin || !$.get(window2)) return;
|
|
110
|
+
thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);
|
|
110
111
|
});
|
|
111
112
|
$.user_effect(() => {
|
|
112
113
|
const vp = viewportRef;
|
|
113
|
-
if (!vp || !thumbnailPlugin || !$.get(window2)) return;
|
|
114
|
-
return thumbnailPlugin.onScrollTo(({ top, behavior }) => {
|
|
114
|
+
if (!vp || !thumbnailPlugin.plugin || !$.get(window2)) return;
|
|
115
|
+
return thumbnailPlugin.plugin.onScrollTo(({ top, behavior }) => {
|
|
115
116
|
vp.scrollTo({ top, behavior });
|
|
116
117
|
});
|
|
117
118
|
});
|
|
118
|
-
const paddingY = $.derived(() =>
|
|
119
|
+
const paddingY = $.derived(() => {
|
|
120
|
+
var _a;
|
|
121
|
+
return ((_a = thumbnailPlugin == null ? void 0 : thumbnailPlugin.plugin) == null ? void 0 : _a.cfg.paddingY) ?? 0;
|
|
122
|
+
});
|
|
119
123
|
const totalHeight = $.derived(() => {
|
|
120
124
|
var _a;
|
|
121
125
|
return ((_a = $.get(window2)) == null ? void 0 : _a.totalHeight) ?? 0;
|
package/dist/svelte/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n import { ignore, PdfErrorCode } from '@embedpdf/models';\n import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n import type { HTMLImgAttributes } from 'svelte/elements';\n\n interface Props extends HTMLImgAttributes {\n meta: ThumbMeta;\n }\n\n const { meta, ...imgProps }: Props = $props();\n\n const
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n import { ignore, PdfErrorCode } from '@embedpdf/models';\n import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n import type { HTMLImgAttributes } from 'svelte/elements';\n\n interface Props extends HTMLImgAttributes {\n meta: ThumbMeta;\n }\n\n const { meta, ...imgProps }: Props = $props();\n\n const thumbnailCapability = useThumbnailCapability();\n const thumbnailPlugin = useThumbnailPlugin();\n\n let url = $state<string | undefined>(undefined);\n let urlRef: string | null = null;\n let refreshTick = $state(0);\n\n // Listen for refresh events\n $effect(() => {\n if (!thumbnailPlugin.plugin) return;\n return thumbnailPlugin.plugin.onRefreshPages((pages) => {\n if (pages.includes(meta.pageIndex)) {\n refreshTick = refreshTick + 1;\n }\n });\n });\n\n // Render thumbnail\n $effect(() => {\n const task = thumbnailCapability.provides?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n task?.wait((blob) => {\n const objectUrl = URL.createObjectURL(blob);\n urlRef = objectUrl;\n url = objectUrl;\n }, ignore);\n\n return () => {\n if (urlRef) {\n URL.revokeObjectURL(urlRef);\n urlRef = null;\n } else {\n task?.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n });\n\n const handleImageLoad = () => {\n if (urlRef) {\n URL.revokeObjectURL(urlRef);\n urlRef = null;\n }\n };\n</script>\n\n{#if url}\n <img src={url} onload={handleImageLoad} {...imgProps} alt=\"PDF thumbnail\" />\n{/if}\n","<script lang=\"ts\">\n import type { Snippet } from 'svelte';\n import type { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\n import { useThumbnailPlugin } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n\n interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n children: Snippet<[ThumbMeta]>;\n }\n\n const { children, ...divProps }: Props = $props();\n\n const thumbnailPlugin = useThumbnailPlugin();\n\n let viewportRef: HTMLDivElement | undefined;\n let window = $state<WindowState | null>(null);\n\n // 1) subscribe once to window updates\n $effect(() => {\n if (!thumbnailPlugin.plugin) return;\n return thumbnailPlugin.plugin.onWindow((newWindow) => {\n window = newWindow;\n });\n });\n\n // 2) keep plugin in sync while the user scrolls\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin) return;\n\n const onScroll = () => {\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n };\n\n vp.addEventListener('scroll', onScroll);\n return () => vp.removeEventListener('scroll', onScroll);\n });\n\n // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin) return;\n\n const resizeObserver = new ResizeObserver(() => {\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n });\n\n resizeObserver.observe(vp);\n return () => resizeObserver.disconnect();\n });\n\n // 3) kick-start after document change\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin || !window) return;\n\n // push initial metrics\n thumbnailPlugin.plugin.updateWindow(vp.scrollTop, vp.clientHeight);\n });\n\n // 4) let plugin drive scroll – only after window is set, and only once\n $effect(() => {\n const vp = viewportRef;\n if (!vp || !thumbnailPlugin.plugin || !window) return;\n\n return thumbnailPlugin.plugin.onScrollTo(({ top, behavior }) => {\n vp.scrollTo({ top, behavior });\n });\n });\n\n const paddingY = $derived(thumbnailPlugin?.plugin?.cfg.paddingY ?? 0);\n const totalHeight = $derived(window?.totalHeight ?? 0);\n const items = $derived(window?.items ?? []);\n</script>\n\n<div\n bind:this={viewportRef}\n style:overflow-y=\"auto\"\n style:position=\"relative\"\n style:padding-top=\"{paddingY}px\"\n style:padding-bottom=\"{paddingY}px\"\n style:height=\"100%\"\n {...divProps}\n>\n <div style:height=\"{totalHeight}px\" style:position=\"relative\">\n {#each items as meta (meta.pageIndex)}\n {@render children(meta)}\n {/each}\n </div>\n</div>\n"],"names":["window"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-thumbnail",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@embedpdf/models": "1.
|
|
37
|
+
"@embedpdf/models": "1.5.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "^18.2.0",
|
|
41
41
|
"typescript": "^5.0.0",
|
|
42
|
-
"@embedpdf/
|
|
43
|
-
"@embedpdf/
|
|
44
|
-
"@embedpdf/
|
|
45
|
-
"@embedpdf/
|
|
42
|
+
"@embedpdf/core": "1.5.0",
|
|
43
|
+
"@embedpdf/plugin-render": "1.5.0",
|
|
44
|
+
"@embedpdf/plugin-scroll": "1.5.0",
|
|
45
|
+
"@embedpdf/build": "1.1.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": ">=16.8.0",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"preact": "^10.26.4",
|
|
51
51
|
"vue": ">=3.2.0",
|
|
52
52
|
"svelte": ">=5 <6",
|
|
53
|
-
"@embedpdf/
|
|
54
|
-
"@embedpdf/
|
|
53
|
+
"@embedpdf/plugin-render": "1.5.0",
|
|
54
|
+
"@embedpdf/core": "1.5.0"
|
|
55
55
|
},
|
|
56
56
|
"files": [
|
|
57
57
|
"dist",
|