@embedpdf/plugin-viewport 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.
@@ -1,2 +1,2 @@
1
- export * from './use-viewport';
1
+ export * from './use-viewport.svelte';
2
2
  export * from './use-viewport-ref.svelte';
@@ -9,3 +9,7 @@ export declare const useViewportCapability: () => {
9
9
  isLoading: boolean;
10
10
  ready: Promise<void>;
11
11
  };
12
+ export declare const useViewportScrollActivity: () => {
13
+ isScrolling: boolean;
14
+ isSmoothScrolling: boolean;
15
+ };
@@ -1,2 +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/core/svelte"),r=require("@embedpdf/plugin-viewport");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const o=i(e),l=()=>t.usePlugin(r.ViewportPlugin.id),n=()=>t.useCapability(r.ViewportPlugin.id);function s(){const{plugin:e}=l();let t=o.state(null);return o.user_pre_effect((()=>{if(!e)return;const r=o.get(t);if(!r)return;e.registerBoundingRectProvider((()=>{const e=r.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const i=()=>{null==e||e.setViewportScrollMetrics({scrollTop:r.scrollTop,scrollLeft:r.scrollLeft})};r.addEventListener("scroll",i);const l=new ResizeObserver((()=>{null==e||e.setViewportResizeMetrics({width:r.offsetWidth,height:r.offsetHeight,clientWidth:r.clientWidth,clientHeight:r.clientHeight,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft,scrollWidth:r.scrollWidth,scrollHeight:r.scrollHeight})}));l.observe(r);const n=e.onScrollRequest((({x:e,y:t,behavior:i="auto"})=>{requestAnimationFrame((()=>{r.scrollTo({left:e,top:t,behavior:i})}))}));return()=>{null==e||e.registerBoundingRectProvider(null),r.removeEventListener("scroll",i),l.disconnect(),n()}})),{get containerRef(){return o.get(t)},set containerRef(e){o.set(t,e,!0)}}}var c=o.from_html("<div><!></div>");exports.Viewport=function(e,t){o.push(t,!0);let r=o.rest_props(t,["$$slots","$$events","$$legacy","children","class"]),i=o.state(0),l=o.derived(s);const u=o.derived(n),p=o.derived((()=>o.get(u).provides));o.user_effect((()=>{o.get(p)&&o.set(i,o.get(p).getViewportGap(),!0)}));var d=c();o.attribute_effect(d,(e=>({...r,class:t.class,[o.STYLE]:e})),[()=>({width:"100%",height:"100%",overflow:"auto",padding:`${o.get(i)}px`})]);var a=o.child(d);o.snippet(a,(()=>t.children)),o.reset(d),o.bind_this(d,(e=>o.get(l).containerRef=e),(()=>{var e;return null==(e=o.get(l))?void 0:e.containerRef})),o.append(e,d),o.pop()},exports.useViewportCapability=n,exports.useViewportPlugin=l,exports.useViewportRef=s,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),r=require("@embedpdf/plugin-viewport");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const o=i(e),l=()=>t.usePlugin(r.ViewportPlugin.id),s=()=>t.useCapability(r.ViewportPlugin.id);function n(){const{plugin:e}=l();let t=o.state(null);return o.user_pre_effect((()=>{if(!e)return;const r=o.get(t);if(!r)return;e.registerBoundingRectProvider((()=>{const e=r.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const i=()=>{null==e||e.setViewportScrollMetrics({scrollTop:r.scrollTop,scrollLeft:r.scrollLeft})};r.addEventListener("scroll",i);const l=new ResizeObserver((()=>{null==e||e.setViewportResizeMetrics({width:r.offsetWidth,height:r.offsetHeight,clientWidth:r.clientWidth,clientHeight:r.clientHeight,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft,scrollWidth:r.scrollWidth,scrollHeight:r.scrollHeight})}));l.observe(r);const s=e.onScrollRequest((({x:e,y:t,behavior:i="auto"})=>{requestAnimationFrame((()=>{r.scrollTo({left:e,top:t,behavior:i})}))}));return()=>{null==e||e.registerBoundingRectProvider(null),r.removeEventListener("scroll",i),l.disconnect(),s()}})),{get containerRef(){return o.get(t)},set containerRef(e){o.set(t,e,!0)}}}var c=o.from_html("<div><!></div>");exports.Viewport=function(e,t){o.push(t,!0);let r=o.rest_props(t,["$$slots","$$events","$$legacy","children","class"]),i=o.state(0),l=n();const p=s();o.user_effect((()=>{p.provides&&o.set(i,p.provides.getViewportGap(),!0)}));var u=c();o.attribute_effect(u,(e=>({...r,class:t.class,[o.STYLE]:e})),[()=>({width:"100%",height:"100%",overflow:"auto",padding:`${o.get(i)}px`})]);var d=o.child(u);o.snippet(d,(()=>t.children)),o.reset(u),o.bind_this(u,(e=>l.containerRef=e),(()=>null==l?void 0:l.containerRef)),o.append(e,u),o.pop()},exports.useViewportCapability=s,exports.useViewportPlugin=l,exports.useViewportRef=n,exports.useViewportScrollActivity=()=>{const e=s(),t=o.proxy({isScrolling:!1,isSmoothScrolling:!1});return o.user_effect((()=>{if(e.provides)return e.provides.onScrollActivity((e=>{t.isScrolling=e.isScrolling,t.isSmoothScrolling=e.isSmoothScrolling}))})),t},Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-viewport.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport';\n\n\nexport function useViewportRef() {\n const {plugin} = useViewportPlugin();\n let containerRef = $state<HTMLDivElement | null>(null);\n\n $effect.pre(() => {\n if (!plugin) return;\n\n const container = containerRef;\n if (!container) return;\n\n /* ---------- live rect provider --------------------------------- */\n const provideRect = (): Rect => {\n const r = container.getBoundingClientRect();\n return {\n origin: { x: r.left, y: r.top },\n size: { width: r.width, height: r.height }\n };\n };\n plugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n plugin?.setViewportScrollMetrics({\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft\n });\n };\n container.addEventListener('scroll', onScroll);\n\n // Example: On resize, call setMetrics\n const resizeObserver = new ResizeObserver(() => {\n plugin?.setViewportResizeMetrics({\n width: container.offsetWidth,\n height: container.offsetHeight,\n clientWidth: container.clientWidth,\n clientHeight: container.clientHeight,\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n scrollWidth: container.scrollWidth,\n scrollHeight: container.scrollHeight\n });\n });\n resizeObserver.observe(container);\n\n const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n });\n\n // Cleanup\n return () => {\n plugin?.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n resizeObserver.disconnect();\n unsubscribeScrollRequest();\n };\n });\n\n // Return the ref so your Svelte code can attach it to a div\n return {\n get containerRef() {\n return containerRef;\n },\n set containerRef(el: HTMLDivElement | null) {\n containerRef = el;\n }\n };\n}\n","<script lang=\"ts\">\n import { useViewportCapability, useViewportRef } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import type { Snippet } from 'svelte';\n\n type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: Snippet;\n class?: string;\n };\n\n let { children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n let viewportGap = $state(0);\n\n let viewportRef = $derived(useViewportRef());\n\n const { provides } = $derived(useViewportCapability());\n\n $effect(() => {\n if (provides) {\n viewportGap = provides.getViewportGap();\n }\n });\n</script>\n\n<div\n {...restProps}\n bind:this={viewportRef.containerRef}\n style:width=\"100%\"\n style:height=\"100%\"\n style:overflow=\"auto\"\n style:padding={`${viewportGap}px`}\n class={propsClass}\n>\n {@render children()}\n</div>\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","containerRef","$","user_pre_effect","container","registerBoundingRectProvider","r","getBoundingClientRect","origin","x","left","y","top","size","width","height","onScroll","setViewportScrollMetrics","scrollTop","scrollLeft","addEventListener","resizeObserver","ResizeObserver","setViewportResizeMetrics","offsetWidth","offsetHeight","clientWidth","clientHeight","scrollWidth","scrollHeight","observe","unsubscribeScrollRequest","onScrollRequest","behavior","requestAnimationFrame","scrollTo","removeEventListener","disconnect","el","$__namespace","set","restProps","rest_props","$$props","viewportGap","viewportRef","provides","user_effect","get","getViewportGap","class","STYLE","$0","bind_this","div","$$value","_a"],"mappings":"wgBAGaA,EAAoB,IAAMC,YAA0BC,EAAAA,eAAeC,IACnEC,EAAwB,IAAMC,gBAA8BH,EAAAA,eAAeC,ICAxE,SAAAG,IACP,MAAAC,OAAAA,GAAUP,IACb,IAAAQ,UAA6C,aAEjDC,EAAAC,0BACOH,EAAQ,OAEP,MAAAI,QAAYH,OACbG,EAAW,OAUhBJ,EAAOK,mCANC,MAAAC,EAAIF,EAAUG,+BAElBC,QAAUC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,MAAQC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,YAMhC,MAAAC,OACJ,MAAAhB,GAAAA,EAAQiB,yBAAyB,CAC/BC,UAAWd,EAAUc,UACrBC,WAAYf,EAAUe,cAGhBf,EAAAgB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAA,IAAqBC,gBAAA,KACzB,MAAAtB,GAAAA,EAAQuB,yBAAyB,CAC/BT,MAAOV,EAAUoB,YACjBT,OAAQX,EAAUqB,aAClBC,YAAatB,EAAUsB,YACvBC,aAAcvB,EAAUuB,aACxBT,UAAWd,EAAUc,UACrBC,WAAYf,EAAUe,WACtBS,YAAaxB,EAAUwB,YACvBC,aAAczB,EAAUyB,kBAG5BR,EAAeS,QAAQ1B,GAEjB,MAAA2B,EAA2B/B,EAAOgC,iBAAmB,EAAAvB,IAAGE,IAAGsB,WAAW,WAC1EC,4BACE9B,EAAU+B,UAAWzB,KAAMD,EAAGG,IAAKD,EAAGsB,eACvC,eAKD,MAAAjC,GAAAA,EAAQK,6BAA6B,MAC3BD,EAAAgC,oBAAoB,SAAUpB,GACxCK,EAAegB,aACUN,GAAA,CAC3B,KAKI,gBAAA9B,gBACKA,EACT,kBACIA,CAAaqC,GACAC,EAAAC,IAAAvC,EAAAqC,GAAA,IAGrB,iFC9DwC,IAAAG,EAASvC,EAAAwC,WAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,WAAA,UAE3CC,UAAqB,GAErBC,YAAuB9C,qBAEGF,GAAtBiD,0BAAAA,WAER5C,EAAA6C,aAAc,KACR7C,EAAA8C,IAAAF,UACFF,EAAW1C,EAAA8C,IAAGF,GAASG,kBAAc,EACvC,4CAKER,EAASS,MAAAP,EAAAO,MAAA,CAAAhD,EAAAiD,OAAAC,KAAA,mEAKKR,qEAJPL,EAAAc,UAAAC,GAAAC,GAAArD,EAAA8C,IAAAH,GAAY5C,aAAZsD,IAAA,WAAA,OAAArD,OAAAsD,EAAAjB,EAAAS,IAAAH,SAAY,EAAAW,EAAAvD,YAAA,yBAJzB"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-viewport.svelte.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\nexport const useViewportScrollActivity = () => {\n const capability = useViewportCapability();\n\n const state = $state({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n $effect(() => {\n if (!capability.provides) return;\n\n return capability.provides.onScrollActivity((activity: ScrollActivity) => {\n state.isScrolling = activity.isScrolling;\n state.isSmoothScrolling = activity.isSmoothScrolling;\n });\n });\n\n return state;\n};\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport.svelte';\n\nexport function useViewportRef() {\n const { plugin } = useViewportPlugin();\n let containerRef = $state<HTMLDivElement | null>(null);\n\n $effect.pre(() => {\n if (!plugin) return;\n\n const container = containerRef;\n if (!container) return;\n\n /* ---------- live rect provider --------------------------------- */\n const provideRect = (): Rect => {\n const r = container.getBoundingClientRect();\n return {\n origin: { x: r.left, y: r.top },\n size: { width: r.width, height: r.height },\n };\n };\n plugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n plugin?.setViewportScrollMetrics({\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n });\n };\n container.addEventListener('scroll', onScroll);\n\n // Example: On resize, call setMetrics\n const resizeObserver = new ResizeObserver(() => {\n plugin?.setViewportResizeMetrics({\n width: container.offsetWidth,\n height: container.offsetHeight,\n clientWidth: container.clientWidth,\n clientHeight: container.clientHeight,\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n scrollWidth: container.scrollWidth,\n scrollHeight: container.scrollHeight,\n });\n });\n resizeObserver.observe(container);\n\n const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n });\n\n // Cleanup\n return () => {\n plugin?.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n resizeObserver.disconnect();\n unsubscribeScrollRequest();\n };\n });\n\n // Return the ref so your Svelte code can attach it to a div\n return {\n get containerRef() {\n return containerRef;\n },\n set containerRef(el: HTMLDivElement | null) {\n containerRef = el;\n },\n };\n}\n","<script lang=\"ts\">\n import { useViewportCapability, useViewportRef } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import type { Snippet } from 'svelte';\n\n type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: Snippet;\n class?: string;\n };\n\n let { children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n let viewportGap = $state(0);\n\n let viewportRef = useViewportRef();\n\n const viewportCapability = useViewportCapability();\n\n $effect(() => {\n if (viewportCapability.provides) {\n viewportGap = viewportCapability.provides.getViewportGap();\n }\n });\n</script>\n\n<div\n {...restProps}\n bind:this={viewportRef.containerRef}\n style:width=\"100%\"\n style:height=\"100%\"\n style:overflow=\"auto\"\n style:padding={`${viewportGap}px`}\n class={propsClass}\n>\n {@render children()}\n</div>\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","containerRef","$","user_pre_effect","container","registerBoundingRectProvider","r","getBoundingClientRect","origin","x","left","y","top","size","width","height","onScroll","setViewportScrollMetrics","scrollTop","scrollLeft","addEventListener","resizeObserver","ResizeObserver","setViewportResizeMetrics","offsetWidth","offsetHeight","clientWidth","clientHeight","scrollWidth","scrollHeight","observe","unsubscribeScrollRequest","onScrollRequest","behavior","requestAnimationFrame","scrollTo","removeEventListener","disconnect","el","$__namespace","set","restProps","rest_props","$$props","viewportGap","viewportRef","viewportCapability","user_effect","provides","getViewportGap","class","STYLE","$0","bind_this","div","$$value","capability","state","isScrolling","isSmoothScrolling","onScrollActivity","activity"],"mappings":"wgBAGaA,EAA0B,IAAAC,YAA0BC,EAAAA,eAAeC,IACnEC,EAA8B,IAAAC,gBAA8BH,EAAAA,eAAeC,ICDxE,SAAAG,IACN,MAAAC,OAAAA,GAAWP,IACf,IAAAQ,UAA6C,aAEjDC,EAAAC,0BACOH,EAAQ,OAEP,MAAAI,QAAYH,OACbG,EAAW,OAUhBJ,EAAOK,mCANC,MAAAC,EAAIF,EAAUG,+BAElBC,QAAUC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,MAAQC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,YAMhC,MAAAC,OACJ,MAAAhB,GAAAA,EAAQiB,yBAAyB,CAC/BC,UAAWd,EAAUc,UACrBC,WAAYf,EAAUe,cAGhBf,EAAAgB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAA,IAAqBC,gBAAA,KACzB,MAAAtB,GAAAA,EAAQuB,yBAAyB,CAC/BT,MAAOV,EAAUoB,YACjBT,OAAQX,EAAUqB,aAClBC,YAAatB,EAAUsB,YACvBC,aAAcvB,EAAUuB,aACxBT,UAAWd,EAAUc,UACrBC,WAAYf,EAAUe,WACtBS,YAAaxB,EAAUwB,YACvBC,aAAczB,EAAUyB,kBAG5BR,EAAeS,QAAQ1B,GAEjB,MAAA2B,EAA2B/B,EAAOgC,iBAAmB,EAAAvB,IAAGE,IAAGsB,WAAW,WAC1EC,4BACE9B,EAAU+B,UAAWzB,KAAMD,EAAGG,IAAKD,EAAGsB,eACvC,eAKD,MAAAjC,GAAAA,EAAQK,6BAA6B,MAC3BD,EAAAgC,oBAAoB,SAAUpB,GACxCK,EAAegB,aACUN,GAAA,CAC3B,KAKI,gBAAA9B,gBACKA,EACT,kBACIA,CAAaqC,GACAC,EAAAC,IAAAvC,EAAAqC,GAAA,IAGrB,iFC7DwC,IAAAG,EAASvC,EAAAwC,WAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,WAAA,UAE3CC,UAAqB,GAErBC,EAAc9C,IAEZ,MAAA+C,EAAqBjD,IAE3BK,EAAA6C,aAAc,KACRD,EAAmBE,UACrB9C,EAAAsC,IAAAI,EAAcE,EAAmBE,SAASC,kBAAc,EAC1D,4CAKER,EAASS,MAAAP,EAAAO,MAAA,CAAAhD,EAAAiD,OAAAC,KAAA,mEAKKR,qEAJPL,EAAAc,UAAAC,GAAAC,GAAAV,EAAY5C,aAAZsD,IAAA,IAAA,MAAAV,OAAA,EAAAA,EAAY5C,oCAJzB,8HFhBQ,MAAAuD,EAAa3D,IAEb4D,WACJC,aAAa,EACbC,mBAAmB,IAYd,OATPzD,EAAA6C,kBACO,GAAAS,EAAWR,SAET,OAAAQ,EAAWR,SAASY,kBAAkBC,IAC3CJ,EAAMC,YAAcG,EAASH,YAC7BD,EAAME,kBAAoBE,EAASF,iBAAA,GACpC,IAGIF,CAAA"}
@@ -5,6 +5,18 @@ import { ViewportPlugin } from "@embedpdf/plugin-viewport";
5
5
  export * from "@embedpdf/plugin-viewport";
6
6
  const useViewportPlugin = () => usePlugin(ViewportPlugin.id);
7
7
  const useViewportCapability = () => useCapability(ViewportPlugin.id);
8
+ const useViewportScrollActivity = () => {
9
+ const capability = useViewportCapability();
10
+ const state = $.proxy({ isScrolling: false, isSmoothScrolling: false });
11
+ $.user_effect(() => {
12
+ if (!capability.provides) return;
13
+ return capability.provides.onScrollActivity((activity) => {
14
+ state.isScrolling = activity.isScrolling;
15
+ state.isSmoothScrolling = activity.isSmoothScrolling;
16
+ });
17
+ });
18
+ return state;
19
+ };
8
20
  function useViewportRef() {
9
21
  const { plugin } = useViewportPlugin();
10
22
  let containerRef = $.state(null);
@@ -66,11 +78,11 @@ function Viewport($$anchor, $$props) {
66
78
  $.push($$props, true);
67
79
  let restProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children", "class"]);
68
80
  let viewportGap = $.state(0);
69
- let viewportRef = $.derived(useViewportRef);
70
- const $$d = $.derived(useViewportCapability), provides = $.derived(() => $.get($$d).provides);
81
+ let viewportRef = useViewportRef();
82
+ const viewportCapability = useViewportCapability();
71
83
  $.user_effect(() => {
72
- if ($.get(provides)) {
73
- $.set(viewportGap, $.get(provides).getViewportGap(), true);
84
+ if (viewportCapability.provides) {
85
+ $.set(viewportGap, viewportCapability.provides.getViewportGap(), true);
74
86
  }
75
87
  });
76
88
  var div = root();
@@ -85,10 +97,7 @@ function Viewport($$anchor, $$props) {
85
97
  var node = $.child(div);
86
98
  $.snippet(node, () => $$props.children);
87
99
  $.reset(div);
88
- $.bind_this(div, ($$value) => $.get(viewportRef).containerRef = $$value, () => {
89
- var _a;
90
- return (_a = $.get(viewportRef)) == null ? void 0 : _a.containerRef;
91
- });
100
+ $.bind_this(div, ($$value) => viewportRef.containerRef = $$value, () => viewportRef == null ? void 0 : viewportRef.containerRef);
92
101
  $.append($$anchor, div);
93
102
  $.pop();
94
103
  }
@@ -96,6 +105,7 @@ export {
96
105
  Viewport,
97
106
  useViewportCapability,
98
107
  useViewportPlugin,
99
- useViewportRef
108
+ useViewportRef,
109
+ useViewportScrollActivity
100
110
  };
101
111
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-viewport.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport';\n\n\nexport function useViewportRef() {\n const {plugin} = useViewportPlugin();\n let containerRef = $state<HTMLDivElement | null>(null);\n\n $effect.pre(() => {\n if (!plugin) return;\n\n const container = containerRef;\n if (!container) return;\n\n /* ---------- live rect provider --------------------------------- */\n const provideRect = (): Rect => {\n const r = container.getBoundingClientRect();\n return {\n origin: { x: r.left, y: r.top },\n size: { width: r.width, height: r.height }\n };\n };\n plugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n plugin?.setViewportScrollMetrics({\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft\n });\n };\n container.addEventListener('scroll', onScroll);\n\n // Example: On resize, call setMetrics\n const resizeObserver = new ResizeObserver(() => {\n plugin?.setViewportResizeMetrics({\n width: container.offsetWidth,\n height: container.offsetHeight,\n clientWidth: container.clientWidth,\n clientHeight: container.clientHeight,\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n scrollWidth: container.scrollWidth,\n scrollHeight: container.scrollHeight\n });\n });\n resizeObserver.observe(container);\n\n const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n });\n\n // Cleanup\n return () => {\n plugin?.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n resizeObserver.disconnect();\n unsubscribeScrollRequest();\n };\n });\n\n // Return the ref so your Svelte code can attach it to a div\n return {\n get containerRef() {\n return containerRef;\n },\n set containerRef(el: HTMLDivElement | null) {\n containerRef = el;\n }\n };\n}\n","<script lang=\"ts\">\n import { useViewportCapability, useViewportRef } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import type { Snippet } from 'svelte';\n\n type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: Snippet;\n class?: string;\n };\n\n let { children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n let viewportGap = $state(0);\n\n let viewportRef = $derived(useViewportRef());\n\n const { provides } = $derived(useViewportCapability());\n\n $effect(() => {\n if (provides) {\n viewportGap = provides.getViewportGap();\n }\n });\n</script>\n\n<div\n {...restProps}\n bind:this={viewportRef.containerRef}\n style:width=\"100%\"\n style:height=\"100%\"\n style:overflow=\"auto\"\n style:padding={`${viewportGap}px`}\n class={propsClass}\n>\n {@render children()}\n</div>\n"],"names":[],"mappings":";;;;;AAGO,MAAM,oBAAoB,MAAM,UAA0B,eAAe,EAAE;AAC3E,MAAM,wBAAwB,MAAM,cAA8B,eAAe,EAAE;ACA1E,SAAA,iBAAiB;AACxB,QAAA,EAAA,WAAU,kBAAkB;AAC/B,MAAA,uBAA6C,IAAI;AAErD,IAAA,sBAAkB;SACX,OAAQ;AAEP,UAAA,kBAAY,YAAA;SACb,UAAW;AAGV,UAAA,oBAA0B;YACxB,IAAI,UAAU,sBAAsB;;QAExC,UAAU,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,QAAQ,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA;IAE7C;AACA,WAAO,6BAA6B,WAAW;AAGzC,UAAA,iBAAiB;AACrB,uCAAQ,yBAAyB;AAAA,QAC/B,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA;IAE1B;AACU,cAAA,iBAAiB,UAAU,QAAQ;UAGvC,iBAAA,IAAqB,eAAA,MAAqB;AAC9C,uCAAQ,yBAAyB;AAAA,QAC/B,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,QAClB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,QACxB,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,QACtB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA;KAE3B;AACD,mBAAe,QAAQ,SAAS;AAE1B,UAAA,2BAA2B,OAAO,gBAAmB,CAAA,EAAA,GAAG,GAAG,WAAW,aAAa;AACvF,kCAA4B;AAC1B,kBAAU,WAAW,MAAM,GAAG,KAAK,GAAG;OACvC;AAAA,KACF;iBAGY;AACX,uCAAQ,6BAA6B;AAC3B,gBAAA,oBAAoB,UAAU,QAAQ;AAChD,qBAAe,WAAW;AACD,+BAAA;AAAA,IAC3B;AAAA,GACD;;IAIK,IAAA,eAAe;mBACV,YAAA;AAAA,IACT;AAAA,QACI,aAAa,IAA2B;AAC3B,QAAA,IAAA,cAAA,IAAA,IAAA;AAAA;;AAGrB;;qCCxEA;;MAUwC,YAAS,EAAA,WAAA,SAAA,CAAA,WAAA,YAAA,YAAA,YAAA,OAAA,CAAA;AAE3C,MAAA,sBAAqB,CAAC;AAEtB,MAAA,wBAAuB,cAAc;wBAEX,qBAAqB,GAA3C,sCAAA,QAAQ;AAEhB,IAAA,YAAc,MAAA;AACR,QAAA,EAAA,IAAA,QAAQ,GAAE;YACZ,aAAW,EAAA,IAAG,QAAQ,EAAC,eAAc,GAAA,IAAA;AAAA,IACvC;AAAA,GACD;;wCAIG,WAAS,OAAA,QAAA,OAAA,CAAA,EAAA,KAAA,GAAA,GAAA,IAAA;AAAA;;;;wBAKK,WAAW,CAAA;AAAA;;;;;AAJlB,IAAA,UAAA,KAAA,CAAA,YAAA,EAAA,IAAA,WAAW,EAAC,eAAZ,SAAA,MAAA;;AAAA,mBAAA,IAAA,WAAW,MAAX,mBAAY;AAAA,GAAY;;;AAJrC;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-viewport.svelte.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\nexport const useViewportScrollActivity = () => {\n const capability = useViewportCapability();\n\n const state = $state({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n $effect(() => {\n if (!capability.provides) return;\n\n return capability.provides.onScrollActivity((activity: ScrollActivity) => {\n state.isScrolling = activity.isScrolling;\n state.isSmoothScrolling = activity.isSmoothScrolling;\n });\n });\n\n return state;\n};\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport.svelte';\n\nexport function useViewportRef() {\n const { plugin } = useViewportPlugin();\n let containerRef = $state<HTMLDivElement | null>(null);\n\n $effect.pre(() => {\n if (!plugin) return;\n\n const container = containerRef;\n if (!container) return;\n\n /* ---------- live rect provider --------------------------------- */\n const provideRect = (): Rect => {\n const r = container.getBoundingClientRect();\n return {\n origin: { x: r.left, y: r.top },\n size: { width: r.width, height: r.height },\n };\n };\n plugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n plugin?.setViewportScrollMetrics({\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n });\n };\n container.addEventListener('scroll', onScroll);\n\n // Example: On resize, call setMetrics\n const resizeObserver = new ResizeObserver(() => {\n plugin?.setViewportResizeMetrics({\n width: container.offsetWidth,\n height: container.offsetHeight,\n clientWidth: container.clientWidth,\n clientHeight: container.clientHeight,\n scrollTop: container.scrollTop,\n scrollLeft: container.scrollLeft,\n scrollWidth: container.scrollWidth,\n scrollHeight: container.scrollHeight,\n });\n });\n resizeObserver.observe(container);\n\n const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n });\n\n // Cleanup\n return () => {\n plugin?.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n resizeObserver.disconnect();\n unsubscribeScrollRequest();\n };\n });\n\n // Return the ref so your Svelte code can attach it to a div\n return {\n get containerRef() {\n return containerRef;\n },\n set containerRef(el: HTMLDivElement | null) {\n containerRef = el;\n },\n };\n}\n","<script lang=\"ts\">\n import { useViewportCapability, useViewportRef } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n import type { Snippet } from 'svelte';\n\n type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: Snippet;\n class?: string;\n };\n\n let { children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n let viewportGap = $state(0);\n\n let viewportRef = useViewportRef();\n\n const viewportCapability = useViewportCapability();\n\n $effect(() => {\n if (viewportCapability.provides) {\n viewportGap = viewportCapability.provides.getViewportGap();\n }\n });\n</script>\n\n<div\n {...restProps}\n bind:this={viewportRef.containerRef}\n style:width=\"100%\"\n style:height=\"100%\"\n style:overflow=\"auto\"\n style:padding={`${viewportGap}px`}\n class={propsClass}\n>\n {@render children()}\n</div>\n"],"names":[],"mappings":";;;;;AAGa,MAAA,oBAA0B,MAAA,UAA0B,eAAe,EAAE;AACrE,MAAA,wBAA8B,MAAA,cAA8B,eAAe,EAAE;AAE7E,MAAA,kCAAkC;AACvC,QAAA,aAAa,sBAAsB;AAEnC,QAAA,kBACJ,aAAa,OACb,mBAAmB,OAAA;AAGrB,IAAA,kBAAc;AACP,QAAA,CAAA,WAAW,SAAU;AAEnB,WAAA,WAAW,SAAS,iBAAkB,CAAA,aAA6B;AACxE,YAAM,cAAc,SAAS;AAC7B,YAAM,oBAAoB,SAAS;AAAA,KACpC;AAAA,GACF;SAEM;AACT;ACrBgB,SAAA,iBAAiB;AACvB,QAAA,EAAA,WAAW,kBAAkB;AACjC,MAAA,uBAA6C,IAAI;AAErD,IAAA,sBAAkB;SACX,OAAQ;AAEP,UAAA,kBAAY,YAAA;SACb,UAAW;AAGV,UAAA,oBAA0B;YACxB,IAAI,UAAU,sBAAsB;;QAExC,UAAU,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,QAAQ,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA;IAE7C;AACA,WAAO,6BAA6B,WAAW;AAGzC,UAAA,iBAAiB;AACrB,uCAAQ,yBAAyB;AAAA,QAC/B,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA;IAE1B;AACU,cAAA,iBAAiB,UAAU,QAAQ;UAGvC,iBAAA,IAAqB,eAAA,MAAqB;AAC9C,uCAAQ,yBAAyB;AAAA,QAC/B,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,QAClB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,QACxB,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,QACtB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA;KAE3B;AACD,mBAAe,QAAQ,SAAS;AAE1B,UAAA,2BAA2B,OAAO,gBAAmB,CAAA,EAAA,GAAG,GAAG,WAAW,aAAa;AACvF,kCAA4B;AAC1B,kBAAU,WAAW,MAAM,GAAG,KAAK,GAAG;OACvC;AAAA,KACF;iBAGY;AACX,uCAAQ,6BAA6B;AAC3B,gBAAA,oBAAoB,UAAU,QAAQ;AAChD,qBAAe,WAAW;AACD,+BAAA;AAAA,IAC3B;AAAA,GACD;;IAIK,IAAA,eAAe;mBACV,YAAA;AAAA,IACT;AAAA,QACI,aAAa,IAA2B;AAC3B,QAAA,IAAA,cAAA,IAAA,IAAA;AAAA;;AAGrB;;qCCvEA;;MAUwC,YAAS,EAAA,WAAA,SAAA,CAAA,WAAA,YAAA,YAAA,YAAA,OAAA,CAAA;AAE3C,MAAA,sBAAqB,CAAC;AAEtB,MAAA,cAAc,eAAc;AAE1B,QAAA,qBAAqB,sBAAqB;AAEhD,IAAA,YAAc,MAAA;QACR,mBAAmB,UAAU;AAC/B,QAAA,IAAA,aAAc,mBAAmB,SAAS,eAAc,GAAA,IAAA;AAAA,IAC1D;AAAA,GACD;;wCAIG,WAAS,OAAA,QAAA,OAAA,CAAA,EAAA,KAAA,GAAA,GAAA,IAAA;AAAA;;;;wBAKK,WAAW,CAAA;AAAA;;;;;AAJlB,IAAA,UAAA,KAAA,CAAA,YAAA,YAAY,eAAZ,SAAA,MAAA,2CAAY,YAAY;;;AAJrC;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@embedpdf/plugin-viewport",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.cjs",
@@ -35,13 +35,13 @@
35
35
  }
36
36
  },
37
37
  "dependencies": {
38
- "@embedpdf/models": "1.4.0"
38
+ "@embedpdf/models": "1.5.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@types/react": "^18.2.0",
42
42
  "typescript": "^5.0.0",
43
43
  "@embedpdf/build": "1.1.0",
44
- "@embedpdf/core": "1.4.0"
44
+ "@embedpdf/core": "1.5.0"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=16.8.0",
@@ -49,7 +49,7 @@
49
49
  "preact": "^10.26.4",
50
50
  "vue": ">=3.2.0",
51
51
  "svelte": ">=5 <6",
52
- "@embedpdf/core": "1.4.0"
52
+ "@embedpdf/core": "1.5.0"
53
53
  },
54
54
  "files": [
55
55
  "dist",