@embedpdf/plugin-viewport 1.3.14 → 1.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +4 -1
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +4 -1
- package/dist/react/index.js.map +1 -1
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.js +4 -1
- package/dist/vue/index.js.map +1 -1
- package/package.json +5 -5
package/dist/preact/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("preact/jsx-runtime");require("preact");const t=require("preact/hooks"),r=require("@embedpdf/core/preact"),o=require("@embedpdf/plugin-viewport"),i=()=>r.usePlugin(o.ViewportPlugin.id),s=()=>r.useCapability(o.ViewportPlugin.id);function l(){const{plugin:e}=i(),r=t.useRef(null);return t.useLayoutEffect((()=>{if(!e)return;const t=r.current;if(!t)return;e.registerBoundingRectProvider((()=>{const e=t.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("preact/jsx-runtime");require("preact");const t=require("preact/hooks"),r=require("@embedpdf/core/preact"),o=require("@embedpdf/plugin-viewport"),i=()=>r.usePlugin(o.ViewportPlugin.id),s=()=>r.useCapability(o.ViewportPlugin.id);function l(){const{plugin:e}=i(),r=t.useRef(null);return t.useLayoutEffect((()=>{if(!e)return;const t=r.current;if(!t)return;let o=!1;e.registerBoundingRectProvider((()=>{const e=t.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const i=()=>{e.setViewportScrollMetrics({scrollTop:t.scrollTop,scrollLeft:t.scrollLeft})};t.addEventListener("scroll",i);const s=new ResizeObserver((()=>{o||e.setViewportResizeMetrics({width:t.offsetWidth,height:t.offsetHeight,clientWidth:t.clientWidth,clientHeight:t.clientHeight,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,scrollHeight:t.scrollHeight})}));s.observe(t);const l=e.onScrollRequest((({x:e,y:r,behavior:o="auto"})=>{requestAnimationFrame((()=>{t.scrollTo({left:e,top:r,behavior:o})}))}));return()=>{o=!0,s.disconnect(),e.registerBoundingRectProvider(null),t.removeEventListener("scroll",i),l()}}),[e]),r}exports.Viewport=function({children:r,...o}){const[i,c]=t.useState(0),n=l(),{provides:u}=s();t.useEffect((()=>{u&&c(u.getViewportGap())}),[u]);const{style:p,...d}=o;return e.jsx("div",{...d,ref:n,style:{width:"100%",height:"100%",overflow:"auto",..."object"==typeof p?p:{},padding:`${i}px`},children:r})},exports.useViewportCapability=s,exports.useViewportPlugin=i,exports.useViewportRef=l,exports.useViewportScrollActivity=()=>{const{provides:e}=s(),[r,o]=t.useState({isScrolling:!1,isSmoothScrolling:!1});return t.useEffect((()=>{if(e)return e.onScrollActivity(o)}),[e]),r},Object.keys(o).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n }, [viewportPlugin]);\n\n // Return the ref so your React code can attach it to a div\n return containerRef;\n}\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n const [viewportGap, setViewportGap] = useState(0);\n const viewportRef = useViewportRef();\n const { provides: viewportProvides } = useViewportCapability();\n\n useEffect(() => {\n if (viewportProvides) {\n setViewportGap(viewportProvides.getViewportGap());\n }\n }, [viewportProvides]);\n\n const { style, ...restProps } = props;\n return (\n <div\n {...restProps}\n ref={viewportRef}\n style={{\n width: '100%',\n height: '100%',\n overflow: 'auto',\n ...(typeof style === 'object' ? style : {}),\n padding: `${viewportGap}px`,\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","viewportPlugin","containerRef","useRef","useLayoutEffect","container","current","cleanedUp","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","disconnect","removeEventListener","children","props","viewportGap","setViewportGap","useState","viewportRef","provides","viewportProvides","useEffect","getViewportGap","style","restProps","jsxRuntime","jsx","ref","overflow","padding","scrollActivity","setScrollActivity","isScrolling","isSmoothScrolling","onScrollActivity"],"mappings":"kPAIaA,EAAoB,IAAMC,YAA0BC,EAAAA,eAAeC,IACnEC,EAAwB,IAAMC,gBAA8BH,EAAAA,eAAeC,ICAjF,SAASG,IACd,MAAQC,OAAQC,GAAmBR,IAC7BS,EAAeC,SAAuB,MAgErC,OA9DPC,EAAAA,iBAAgB,KACd,IAAKH,EAAgB,OAErB,MAAMI,EAAYH,EAAaI,QAC/B,IAAKD,EAAW,OAEhB,IAAIE,GAAY,EAUhBN,EAAeO,8BAPK,KACZ,MAAAC,EAAIJ,EAAUK,wBACb,MAAA,CACLC,OAAQ,CAAEC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,KAAM,CAAEC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,QACpC,IAKF,MAAMC,EAAW,KACflB,EAAemB,yBAAyB,CACtCC,UAAWhB,EAAUgB,UACrBC,WAAYjB,EAAUiB,YACvB,EAEOjB,EAAAkB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAiB,IAAIC,gBAAe,KACpClB,GACJN,EAAeyB,yBAAyB,CACtCT,MAAOZ,EAAUsB,YACjBT,OAAQb,EAAUuB,aAClBC,YAAaxB,EAAUwB,YACvBC,aAAczB,EAAUyB,aACxBT,UAAWhB,EAAUgB,UACrBC,WAAYjB,EAAUiB,WACtBS,YAAa1B,EAAU0B,YACvBC,aAAc3B,EAAU2B,cACzB,IAEHR,EAAeS,QAAQ5B,GAEvB,MAAM6B,EAA2BjC,EAAekC,iBAC9C,EAAGvB,IAAGE,IAAGsB,WAAW,WAClBC,uBAAsB,KACpBhC,EAAUiC,SAAS,CAAEzB,KAAMD,EAAGG,IAAKD,EAAGsB,YAAU,GACjD,IAKL,MAAO,KACO7B,GAAA,EACZiB,EAAee,aACftC,EAAeO,6BAA6B,MAClCH,EAAAmC,oBAAoB,SAAUrB,GACfe,GAAA,CAC3B,GACC,CAACjC,IAGGC,CACT,kBC/DO,UAAkBuC,SAAEA,KAAaC,IACtC,MAAOC,EAAaC,GAAkBC,EAAAA,SAAS,GACzCC,EAAc/C,KACZgD,SAAUC,GAAqBnD,IAEvCoD,EAAAA,WAAU,KACJD,GACaJ,EAAAI,EAAiBE,iBAAgB,GAEjD,CAACF,IAEJ,MAAMG,MAAEA,KAAUC,GAAcV,EAE9B,OAAAW,EAAAC,IAAC,MAAA,IACKF,EACJG,IAAKT,EACLK,MAAO,CACLlC,MAAO,OACPC,OAAQ,OACRsC,SAAU,UACW,iBAAVL,EAAqBA,EAAQ,CAAC,EACzCM,QAAS,GAAGd,OAGbF,YAGP,yHF7ByC,KACjC,MAAAM,SAAEA,GAAalD,KACd6D,EAAgBC,GAAqBd,WAAyB,CACnEe,aAAa,EACbC,mBAAmB,IASd,OANPZ,EAAAA,WAAU,KACR,GAAKF,EAEE,OAAAA,EAASe,iBAAiBH,EAAiB,GACjD,CAACZ,IAEGW,CAAA"}
|
package/dist/preact/index.js
CHANGED
|
@@ -25,6 +25,7 @@ function useViewportRef() {
|
|
|
25
25
|
if (!viewportPlugin) return;
|
|
26
26
|
const container = containerRef.current;
|
|
27
27
|
if (!container) return;
|
|
28
|
+
let cleanedUp = false;
|
|
28
29
|
const provideRect = () => {
|
|
29
30
|
const r = container.getBoundingClientRect();
|
|
30
31
|
return {
|
|
@@ -41,6 +42,7 @@ function useViewportRef() {
|
|
|
41
42
|
};
|
|
42
43
|
container.addEventListener("scroll", onScroll);
|
|
43
44
|
const resizeObserver = new ResizeObserver(() => {
|
|
45
|
+
if (cleanedUp) return;
|
|
44
46
|
viewportPlugin.setViewportResizeMetrics({
|
|
45
47
|
width: container.offsetWidth,
|
|
46
48
|
height: container.offsetHeight,
|
|
@@ -61,9 +63,10 @@ function useViewportRef() {
|
|
|
61
63
|
}
|
|
62
64
|
);
|
|
63
65
|
return () => {
|
|
66
|
+
cleanedUp = true;
|
|
67
|
+
resizeObserver.disconnect();
|
|
64
68
|
viewportPlugin.registerBoundingRectProvider(null);
|
|
65
69
|
container.removeEventListener("scroll", onScroll);
|
|
66
|
-
resizeObserver.disconnect();
|
|
67
70
|
unsubscribeScrollRequest();
|
|
68
71
|
};
|
|
69
72
|
}, [viewportPlugin]);
|
package/dist/preact/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n }, [viewportPlugin]);\n\n // Return the ref so your React code can attach it to a div\n return containerRef;\n}\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n const [viewportGap, setViewportGap] = useState(0);\n const viewportRef = useViewportRef();\n const { provides: viewportProvides } = useViewportCapability();\n\n useEffect(() => {\n if (viewportProvides) {\n setViewportGap(viewportProvides.getViewportGap());\n }\n }, [viewportProvides]);\n\n const { style, ...restProps } = props;\n return (\n <div\n {...restProps}\n ref={viewportRef}\n style={{\n width: '100%',\n height: '100%',\n overflow: 'auto',\n ...(typeof style === 'object' ? style : {}),\n padding: `${viewportGap}px`,\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;AAIO,MAAM,oBAAoB,MAAM,UAA0B,eAAe,EAAE;AAC3E,MAAM,wBAAwB,MAAM,cAA8B,eAAe,EAAE;AAEnF,MAAM,4BAA4B,MAAM;AACvC,QAAA,EAAE,SAAS,IAAI,sBAAsB;AAC3C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAyB;AAAA,IACnE,aAAa;AAAA,IACb,mBAAmB;AAAA,EAAA,CACpB;AAED,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AAER,WAAA,SAAS,iBAAiB,iBAAiB;AAAA,EAAA,GACjD,CAAC,QAAQ,CAAC;AAEN,SAAA;AACT;AChBO,SAAS,iBAAiB;AAC/B,QAAM,EAAE,QAAQ,eAAe,IAAI,kBAAkB;AAC/C,QAAA,eAAe,OAAuB,IAAI;AAEhD,kBAAgB,MAAM;AACpB,QAAI,CAAC,eAAgB;AAErB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,QAAI,YAAY;AAGhB,UAAM,cAAc,MAAY;AACxB,YAAA,IAAI,UAAU,sBAAsB;AACnC,aAAA;AAAA,QACL,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,MAC3C;AAAA,IACF;AACA,mBAAe,6BAA6B,WAAW;AAGvD,UAAM,WAAW,MAAM;AACrB,qBAAe,yBAAyB;AAAA,QACtC,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,MAAA,CACvB;AAAA,IACH;AACU,cAAA,iBAAiB,UAAU,QAAQ;AAGvC,UAAA,iBAAiB,IAAI,eAAe,MAAM;AAC9C,UAAI,UAAW;AACf,qBAAe,yBAAyB;AAAA,QACtC,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,MAAA,CACzB;AAAA,IAAA,CACF;AACD,mBAAe,QAAQ,SAAS;AAEhC,UAAM,2BAA2B,eAAe;AAAA,MAC9C,CAAC,EAAE,GAAG,GAAG,WAAW,aAAa;AAC/B,8BAAsB,MAAM;AAC1B,oBAAU,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU;AAAA,QAAA,CACjD;AAAA,MAAA;AAAA,IAEL;AAGA,WAAO,MAAM;AACC,kBAAA;AACZ,qBAAe,WAAW;AAC1B,qBAAe,6BAA6B,IAAI;AACtC,gBAAA,oBAAoB,UAAU,QAAQ;AACvB,+BAAA;AAAA,IAC3B;AAAA,EAAA,GACC,CAAC,cAAc,CAAC;AAGZ,SAAA;AACT;AC/DO,SAAS,SAAS,EAAE,UAAU,GAAG,SAAwB;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAE7D,YAAU,MAAM;AACd,QAAI,kBAAkB;AACL,qBAAA,iBAAiB,gBAAgB;AAAA,IAAA;AAAA,EAClD,GACC,CAAC,gBAAgB,CAAC;AAErB,QAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAE9B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAI,OAAO,UAAU,WAAW,QAAQ,CAAC;AAAA,QACzC,SAAS,GAAG,WAAW;AAAA,MACzB;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
package/dist/react/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("@embedpdf/core/react"),o=require("@embedpdf/plugin-viewport"),i=()=>r.usePlugin(o.ViewportPlugin.id),s=()=>r.useCapability(o.ViewportPlugin.id);function l(){const{plugin:e}=i(),r=t.useRef(null);return t.useLayoutEffect((()=>{if(!e)return;const t=r.current;if(!t)return;e.registerBoundingRectProvider((()=>{const e=t.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("@embedpdf/core/react"),o=require("@embedpdf/plugin-viewport"),i=()=>r.usePlugin(o.ViewportPlugin.id),s=()=>r.useCapability(o.ViewportPlugin.id);function l(){const{plugin:e}=i(),r=t.useRef(null);return t.useLayoutEffect((()=>{if(!e)return;const t=r.current;if(!t)return;let o=!1;e.registerBoundingRectProvider((()=>{const e=t.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const i=()=>{e.setViewportScrollMetrics({scrollTop:t.scrollTop,scrollLeft:t.scrollLeft})};t.addEventListener("scroll",i);const s=new ResizeObserver((()=>{o||e.setViewportResizeMetrics({width:t.offsetWidth,height:t.offsetHeight,clientWidth:t.clientWidth,clientHeight:t.clientHeight,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,scrollHeight:t.scrollHeight})}));s.observe(t);const l=e.onScrollRequest((({x:e,y:r,behavior:o="auto"})=>{requestAnimationFrame((()=>{t.scrollTo({left:e,top:r,behavior:o})}))}));return()=>{o=!0,s.disconnect(),e.registerBoundingRectProvider(null),t.removeEventListener("scroll",i),l()}}),[e]),r}exports.Viewport=function({children:r,...o}){const[i,n]=t.useState(0),c=l(),{provides:u}=s();t.useEffect((()=>{u&&n(u.getViewportGap())}),[u]);const{style:p,...d}=o;return e.jsx("div",{...d,ref:c,style:{width:"100%",height:"100%",overflow:"auto",..."object"==typeof p?p:{},padding:`${i}px`},children:r})},exports.useViewportCapability=s,exports.useViewportPlugin=i,exports.useViewportRef=l,exports.useViewportScrollActivity=()=>{const{provides:e}=s(),[r,o]=t.useState({isScrolling:!1,isSmoothScrolling:!1});return t.useEffect((()=>{if(e)return e.onScrollActivity(o)}),[e]),r},Object.keys(o).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/react/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n }, [viewportPlugin]);\n\n // Return the ref so your React code can attach it to a div\n return containerRef;\n}\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n const [viewportGap, setViewportGap] = useState(0);\n const viewportRef = useViewportRef();\n const { provides: viewportProvides } = useViewportCapability();\n\n useEffect(() => {\n if (viewportProvides) {\n setViewportGap(viewportProvides.getViewportGap());\n }\n }, [viewportProvides]);\n\n const { style, ...restProps } = props;\n return (\n <div\n {...restProps}\n ref={viewportRef}\n style={{\n width: '100%',\n height: '100%',\n overflow: 'auto',\n ...(typeof style === 'object' ? style : {}),\n padding: `${viewportGap}px`,\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","viewportPlugin","containerRef","useRef","useLayoutEffect","container","current","cleanedUp","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","disconnect","removeEventListener","children","props","viewportGap","setViewportGap","useState","viewportRef","provides","viewportProvides","useEffect","getViewportGap","style","restProps","jsxRuntime","jsx","ref","overflow","padding","scrollActivity","setScrollActivity","isScrolling","isSmoothScrolling","onScrollActivity"],"mappings":"iNAIaA,EAAoB,IAAMC,YAA0BC,EAAAA,eAAeC,IACnEC,EAAwB,IAAMC,gBAA8BH,EAAAA,eAAeC,ICAjF,SAASG,IACd,MAAQC,OAAQC,GAAmBR,IAC7BS,EAAeC,SAAuB,MAgErC,OA9DPC,EAAAA,iBAAgB,KACd,IAAKH,EAAgB,OAErB,MAAMI,EAAYH,EAAaI,QAC/B,IAAKD,EAAW,OAEhB,IAAIE,GAAY,EAUhBN,EAAeO,8BAPK,KACZ,MAAAC,EAAIJ,EAAUK,wBACb,MAAA,CACLC,OAAQ,CAAEC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,KAAM,CAAEC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,QACpC,IAKF,MAAMC,EAAW,KACflB,EAAemB,yBAAyB,CACtCC,UAAWhB,EAAUgB,UACrBC,WAAYjB,EAAUiB,YACvB,EAEOjB,EAAAkB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAiB,IAAIC,gBAAe,KACpClB,GACJN,EAAeyB,yBAAyB,CACtCT,MAAOZ,EAAUsB,YACjBT,OAAQb,EAAUuB,aAClBC,YAAaxB,EAAUwB,YACvBC,aAAczB,EAAUyB,aACxBT,UAAWhB,EAAUgB,UACrBC,WAAYjB,EAAUiB,WACtBS,YAAa1B,EAAU0B,YACvBC,aAAc3B,EAAU2B,cACzB,IAEHR,EAAeS,QAAQ5B,GAEvB,MAAM6B,EAA2BjC,EAAekC,iBAC9C,EAAGvB,IAAGE,IAAGsB,WAAW,WAClBC,uBAAsB,KACpBhC,EAAUiC,SAAS,CAAEzB,KAAMD,EAAGG,IAAKD,EAAGsB,YAAU,GACjD,IAKL,MAAO,KACO7B,GAAA,EACZiB,EAAee,aACftC,EAAeO,6BAA6B,MAClCH,EAAAmC,oBAAoB,SAAUrB,GACfe,GAAA,CAC3B,GACC,CAACjC,IAGGC,CACT,kBC/DO,UAAkBuC,SAAEA,KAAaC,IACtC,MAAOC,EAAaC,GAAkBC,EAAAA,SAAS,GACzCC,EAAc/C,KACZgD,SAAUC,GAAqBnD,IAEvCoD,EAAAA,WAAU,KACJD,GACaJ,EAAAI,EAAiBE,iBAAgB,GAEjD,CAACF,IAEJ,MAAMG,MAAEA,KAAUC,GAAcV,EAE9B,OAAAW,EAAAC,IAAC,MAAA,IACKF,EACJG,IAAKT,EACLK,MAAO,CACLlC,MAAO,OACPC,OAAQ,OACRsC,SAAU,UACW,iBAAVL,EAAqBA,EAAQ,CAAC,EACzCM,QAAS,GAAGd,OAGbF,YAGP,yHF7ByC,KACjC,MAAAM,SAAEA,GAAalD,KACd6D,EAAgBC,GAAqBd,WAAyB,CACnEe,aAAa,EACbC,mBAAmB,IASd,OANPZ,EAAAA,WAAU,KACR,GAAKF,EAEE,OAAAA,EAASe,iBAAiBH,EAAiB,GACjD,CAACZ,IAEGW,CAAA"}
|
package/dist/react/index.js
CHANGED
|
@@ -24,6 +24,7 @@ function useViewportRef() {
|
|
|
24
24
|
if (!viewportPlugin) return;
|
|
25
25
|
const container = containerRef.current;
|
|
26
26
|
if (!container) return;
|
|
27
|
+
let cleanedUp = false;
|
|
27
28
|
const provideRect = () => {
|
|
28
29
|
const r = container.getBoundingClientRect();
|
|
29
30
|
return {
|
|
@@ -40,6 +41,7 @@ function useViewportRef() {
|
|
|
40
41
|
};
|
|
41
42
|
container.addEventListener("scroll", onScroll);
|
|
42
43
|
const resizeObserver = new ResizeObserver(() => {
|
|
44
|
+
if (cleanedUp) return;
|
|
43
45
|
viewportPlugin.setViewportResizeMetrics({
|
|
44
46
|
width: container.offsetWidth,
|
|
45
47
|
height: container.offsetHeight,
|
|
@@ -60,9 +62,10 @@ function useViewportRef() {
|
|
|
60
62
|
}
|
|
61
63
|
);
|
|
62
64
|
return () => {
|
|
65
|
+
cleanedUp = true;
|
|
66
|
+
resizeObserver.disconnect();
|
|
63
67
|
viewportPlugin.registerBoundingRectProvider(null);
|
|
64
68
|
container.removeEventListener("scroll", onScroll);
|
|
65
|
-
resizeObserver.disconnect();
|
|
66
69
|
unsubscribeScrollRequest();
|
|
67
70
|
};
|
|
68
71
|
}, [viewportPlugin]);
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-viewport.ts","../../src/shared/hooks/use-viewport-ref.ts","../../src/shared/components/viewport.tsx"],"sourcesContent":["import { useEffect, useState } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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 { provides } = useViewportCapability();\n const [scrollActivity, setScrollActivity] = useState<ScrollActivity>({\n isScrolling: false,\n isSmoothScrolling: false,\n });\n\n useEffect(() => {\n if (!provides) return;\n\n return provides.onScrollActivity(setScrollActivity);\n }, [provides]);\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { useLayoutEffect, useRef } from '@framework';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: viewportPlugin } = useViewportPlugin();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (!viewportPlugin) return;\n\n const container = containerRef.current;\n if (!container) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Cleanup\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n }, [viewportPlugin]);\n\n // Return the ref so your React code can attach it to a div\n return containerRef;\n}\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n const [viewportGap, setViewportGap] = useState(0);\n const viewportRef = useViewportRef();\n const { provides: viewportProvides } = useViewportCapability();\n\n useEffect(() => {\n if (viewportProvides) {\n setViewportGap(viewportProvides.getViewportGap());\n }\n }, [viewportProvides]);\n\n const { style, ...restProps } = props;\n return (\n <div\n {...restProps}\n ref={viewportRef}\n style={{\n width: '100%',\n height: '100%',\n overflow: 'auto',\n ...(typeof style === 'object' ? style : {}),\n padding: `${viewportGap}px`,\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAIO,MAAM,oBAAoB,MAAM,UAA0B,eAAe,EAAE;AAC3E,MAAM,wBAAwB,MAAM,cAA8B,eAAe,EAAE;AAEnF,MAAM,4BAA4B,MAAM;AACvC,QAAA,EAAE,SAAS,IAAI,sBAAsB;AAC3C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAyB;AAAA,IACnE,aAAa;AAAA,IACb,mBAAmB;AAAA,EAAA,CACpB;AAED,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AAER,WAAA,SAAS,iBAAiB,iBAAiB;AAAA,EAAA,GACjD,CAAC,QAAQ,CAAC;AAEN,SAAA;AACT;AChBO,SAAS,iBAAiB;AAC/B,QAAM,EAAE,QAAQ,eAAe,IAAI,kBAAkB;AAC/C,QAAA,eAAe,OAAuB,IAAI;AAEhD,kBAAgB,MAAM;AACpB,QAAI,CAAC,eAAgB;AAErB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,QAAI,YAAY;AAGhB,UAAM,cAAc,MAAY;AACxB,YAAA,IAAI,UAAU,sBAAsB;AACnC,aAAA;AAAA,QACL,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,MAC3C;AAAA,IACF;AACA,mBAAe,6BAA6B,WAAW;AAGvD,UAAM,WAAW,MAAM;AACrB,qBAAe,yBAAyB;AAAA,QACtC,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,MAAA,CACvB;AAAA,IACH;AACU,cAAA,iBAAiB,UAAU,QAAQ;AAGvC,UAAA,iBAAiB,IAAI,eAAe,MAAM;AAC9C,UAAI,UAAW;AACf,qBAAe,yBAAyB;AAAA,QACtC,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,MAAA,CACzB;AAAA,IAAA,CACF;AACD,mBAAe,QAAQ,SAAS;AAEhC,UAAM,2BAA2B,eAAe;AAAA,MAC9C,CAAC,EAAE,GAAG,GAAG,WAAW,aAAa;AAC/B,8BAAsB,MAAM;AAC1B,oBAAU,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU;AAAA,QAAA,CACjD;AAAA,MAAA;AAAA,IAEL;AAGA,WAAO,MAAM;AACC,kBAAA;AACZ,qBAAe,WAAW;AAC1B,qBAAe,6BAA6B,IAAI;AACtC,gBAAA,oBAAoB,UAAU,QAAQ;AACvB,+BAAA;AAAA,IAC3B;AAAA,EAAA,GACC,CAAC,cAAc,CAAC;AAGZ,SAAA;AACT;AC/DO,SAAS,SAAS,EAAE,UAAU,GAAG,SAAwB;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAE7D,YAAU,MAAM;AACd,QAAI,kBAAkB;AACL,qBAAA,iBAAiB,gBAAgB;AAAA,IAAA;AAAA,EAClD,GACC,CAAC,gBAAgB,CAAC;AAErB,QAAM,EAAE,OAAO,GAAG,UAAA,IAAc;AAE9B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAI,OAAO,UAAU,WAAW,QAAQ,CAAC;AAAA,QACzC,SAAS,GAAG,WAAW;AAAA,MACzB;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
package/dist/vue/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),r=require("@embedpdf/plugin-viewport"),o=()=>t.usePlugin(r.ViewportPlugin.id),i=()=>t.useCapability(r.ViewportPlugin.id);function l(){const{plugin:t}=o(),r=e.ref(null),i=()=>{const e=t.value,o=r.value;if(!o||!e)return;e.registerBoundingRectProvider((()=>{const e=o.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),r=require("@embedpdf/plugin-viewport"),o=()=>t.usePlugin(r.ViewportPlugin.id),i=()=>t.useCapability(r.ViewportPlugin.id);function l(){const{plugin:t}=o(),r=e.ref(null),i=()=>{const e=t.value,o=r.value;if(!o||!e)return;let i=!1;e.registerBoundingRectProvider((()=>{const e=o.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const l=()=>{e.setViewportScrollMetrics({scrollTop:o.scrollTop,scrollLeft:o.scrollLeft})};o.addEventListener("scroll",l);const n=new ResizeObserver((()=>{i||e.setViewportResizeMetrics({width:o.offsetWidth,height:o.offsetHeight,clientWidth:o.clientWidth,clientHeight:o.clientHeight,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft,scrollWidth:o.scrollWidth,scrollHeight:o.scrollHeight})}));n.observe(o);const s=e.onScrollRequest((({x:e,y:t,behavior:r="auto"})=>{requestAnimationFrame((()=>{o.scrollTo({left:e,top:t,behavior:r})}))}));return()=>{i=!0,n.disconnect(),e.registerBoundingRectProvider(null),o.removeEventListener("scroll",l),s()}};let l=null;return e.watch(t,(()=>{l&&(l(),l=null),l=i()||null}),{immediate:!0}),e.watch(r,(()=>{l&&(l(),l=null),l=i()||null}),{immediate:!0}),e.onUnmounted((()=>{l&&l()})),r}const n=e.defineComponent({__name:"viewport",setup(t){const r=e.useAttrs(),{provides:o}=i(),n=e.ref(0);e.watch(o,(e=>{e&&(n.value=e.getViewportGap())}),{immediate:!0});const s=l();return(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"viewportRef",ref:s},e.unref(r),{style:{padding:`${n.value}px`,width:"100%",height:"100%",overflow:"auto"}}),[e.renderSlot(t.$slots,"default")],16))}});exports.Viewport=n,exports.useViewportCapability=i,exports.useViewportPlugin=o,exports.useViewportRef=l,exports.useViewportScrollActivity=()=>{const{provides:t}=i(),r=e.ref({isSmoothScrolling:!1,isScrolling:!1});return e.watch(t,((e,t,o)=>{if(e){o(e.onScrollActivity((e=>{r.value=e})))}}),{immediate:!0}),r},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
|
package/dist/vue/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\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 { provides } = useViewportCapability();\n const scrollActivity = ref<ScrollActivity>({\n isSmoothScrolling: false,\n isScrolling: false,\n });\n\n watch(\n provides,\n (providesValue, _, onCleanup) => {\n if (providesValue) {\n const unsubscribe = providesValue.onScrollActivity((activity) => {\n scrollActivity.value = activity;\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n );\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: pluginRef } = useViewportPlugin();\n const containerRef = ref<HTMLDivElement | null>(null);\n\n // Setup function that runs when both plugin and container are available\n const setupViewport = () => {\n const viewportPlugin = pluginRef.value;\n const container = containerRef.value;\n\n if (!container || !viewportPlugin) 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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Return cleanup function\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\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 { provides } = useViewportCapability();\n const scrollActivity = ref<ScrollActivity>({\n isSmoothScrolling: false,\n isScrolling: false,\n });\n\n watch(\n provides,\n (providesValue, _, onCleanup) => {\n if (providesValue) {\n const unsubscribe = providesValue.onScrollActivity((activity) => {\n scrollActivity.value = activity;\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n );\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: pluginRef } = useViewportPlugin();\n const containerRef = ref<HTMLDivElement | null>(null);\n\n // Setup function that runs when both plugin and container are available\n const setupViewport = () => {\n const viewportPlugin = pluginRef.value;\n const container = containerRef.value;\n\n if (!container || !viewportPlugin) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Return cleanup function\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n };\n\n let cleanup: (() => void) | null = null;\n\n // Watch for changes in the plugin - this is the Vue equivalent of React's dependency array\n watch(\n pluginRef,\n () => {\n // Clean up previous setup if it exists\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n\n // Setup new viewport if plugin is available\n cleanup = setupViewport() || null;\n },\n { immediate: true }, // Run immediately if plugin is already available\n );\n\n // Also watch for container changes (though this is less likely to change)\n watch(\n containerRef,\n () => {\n // Clean up previous setup if it exists\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n\n // Setup new viewport if both plugin and container are available\n cleanup = setupViewport() || null;\n },\n { immediate: true },\n );\n\n onUnmounted(() => {\n if (cleanup) {\n cleanup();\n }\n });\n\n // Return the ref so your Vue code can attach it to a div\n return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\n\nimport { useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs */\n/* -------------------------------------------------- */\nconst attrs = useAttrs(); // forward class/id/… to <div>\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n viewportProvides,\n (vp) => {\n if (vp) viewportGap.value = vp.getViewportGap();\n },\n { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef();\n</script>\n\n<template>\n <div\n ref=\"viewportRef\"\n v-bind=\"attrs\"\n :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n >\n <slot />\n </div>\n</template>\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","pluginRef","containerRef","ref","setupViewport","viewportPlugin","value","container","cleanedUp","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","disconnect","removeEventListener","cleanup","vue$1","watch","immediate","onUnmounted","attrs","useAttrs","provides","viewportProvides","viewportGap","vp","getViewportGap","viewportRef","_openBlock","_createElementBlock","_mergeProps","_unref","style","overflow","_renderSlot","_ctx","$slots","scrollActivity","isSmoothScrolling","isScrolling","providesValue","_","onCleanup","onScrollActivity","activity"],"mappings":"8KAIaA,EAAoB,IAAMC,YAA0BC,EAAAA,eAAeC,IACnEC,EAAwB,IAAMC,gBAA8BH,EAAAA,eAAeC,ICAjF,SAASG,IACd,MAAQC,OAAQC,GAAcR,IACxBS,EAAeC,MAA2B,MAG1CC,EAAgB,KACpB,MAAMC,EAAiBJ,EAAUK,MAC3BC,EAAYL,EAAaI,MAE3B,IAACC,IAAcF,EAAgB,OAEnC,IAAIG,GAAY,EAShBH,EAAeI,8BAPK,KACZ,MAAAC,EAAIH,EAAUI,wBACb,MAAA,CACLC,OAAQ,CAAEC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,KAAM,CAAEC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,QACpC,IAKF,MAAMC,EAAW,KACff,EAAegB,yBAAyB,CACtCC,UAAWf,EAAUe,UACrBC,WAAYhB,EAAUgB,YACvB,EAEOhB,EAAAiB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAiB,IAAIC,gBAAe,KACpClB,GACJH,EAAesB,yBAAyB,CACtCT,MAAOX,EAAUqB,YACjBT,OAAQZ,EAAUsB,aAClBC,YAAavB,EAAUuB,YACvBC,aAAcxB,EAAUwB,aACxBT,UAAWf,EAAUe,UACrBC,WAAYhB,EAAUgB,WACtBS,YAAazB,EAAUyB,YACvBC,aAAc1B,EAAU0B,cACzB,IAEHR,EAAeS,QAAQ3B,GAEvB,MAAM4B,EAA2B9B,EAAe+B,iBAC9C,EAAGvB,IAAGE,IAAGsB,WAAW,WAClBC,uBAAsB,KACpB/B,EAAUgC,SAAS,CAAEzB,KAAMD,EAAGG,IAAKD,EAAGsB,YAAU,GACjD,IAKL,MAAO,KACO7B,GAAA,EACZiB,EAAee,aACfnC,EAAeI,6BAA6B,MAClCF,EAAAkC,oBAAoB,SAAUrB,GACfe,GAAA,CAC3B,EAGF,IAAIO,EAA+B,KAyC5B,OAtCPC,EAAAC,MACE3C,GACA,KAEMyC,IACMA,IACEA,EAAA,MAIZA,EAAUtC,KAAmB,IAAA,GAE/B,CAAEyC,WAAW,IAIfF,EAAAC,MACE1C,GACA,KAEMwC,IACMA,IACEA,EAAA,MAIZA,EAAUtC,KAAmB,IAAA,GAE/B,CAAEyC,WAAW,IAGfC,EAAAA,aAAY,KACNJ,GACMA,GAAA,IAKLxC,CACT,uDCxGM,MAAA6C,EAAQC,EAAAA,YAKNC,SAAUC,GAAqBrD,IACjCsD,EAAchD,MAAI,GAExBwC,EAAAC,MACEM,GACCE,IACKA,IAAID,EAAY7C,MAAQ8C,EAAGC,iBAAe,GAEhD,CAAER,WAAW,IAMf,MAAMS,EAAcvD,kBAIlBwD,cAAAC,qBAMM,MANNC,EAAAA,WAMM,SALA,cAAJtD,IAAImD,GACII,EAAAA,MAAKX,GAAA,CACZY,kBAAqBR,EAAW7C,UAAAY,MAAA,OAAAC,OAAA,OAAAyC,SAAA,WAEjCC,aAAQC,EAAAC,OAAA,8JF7B6B,KACjC,MAAAd,SAAEA,GAAapD,IACfmE,EAAiB7D,EAAAA,IAAoB,CACzC8D,mBAAmB,EACnBC,aAAa,IAgBR,OAbPvB,EAAAC,MACEK,GACA,CAACkB,EAAeC,EAAGC,KACjB,GAAIF,EAAe,CAIjBE,EAHoBF,EAAcG,kBAAkBC,IAClDP,EAAe1D,MAAQiE,CAAA,IAEJ,IAGzB,CAAE1B,WAAW,IAGRmB,CAAA"}
|
package/dist/vue/index.js
CHANGED
|
@@ -31,6 +31,7 @@ function useViewportRef() {
|
|
|
31
31
|
const viewportPlugin = pluginRef.value;
|
|
32
32
|
const container = containerRef.value;
|
|
33
33
|
if (!container || !viewportPlugin) return;
|
|
34
|
+
let cleanedUp = false;
|
|
34
35
|
const provideRect = () => {
|
|
35
36
|
const r = container.getBoundingClientRect();
|
|
36
37
|
return {
|
|
@@ -47,6 +48,7 @@ function useViewportRef() {
|
|
|
47
48
|
};
|
|
48
49
|
container.addEventListener("scroll", onScroll);
|
|
49
50
|
const resizeObserver = new ResizeObserver(() => {
|
|
51
|
+
if (cleanedUp) return;
|
|
50
52
|
viewportPlugin.setViewportResizeMetrics({
|
|
51
53
|
width: container.offsetWidth,
|
|
52
54
|
height: container.offsetHeight,
|
|
@@ -67,9 +69,10 @@ function useViewportRef() {
|
|
|
67
69
|
}
|
|
68
70
|
);
|
|
69
71
|
return () => {
|
|
72
|
+
cleanedUp = true;
|
|
73
|
+
resizeObserver.disconnect();
|
|
70
74
|
viewportPlugin.registerBoundingRectProvider(null);
|
|
71
75
|
container.removeEventListener("scroll", onScroll);
|
|
72
|
-
resizeObserver.disconnect();
|
|
73
76
|
unsubscribeScrollRequest();
|
|
74
77
|
};
|
|
75
78
|
};
|
package/dist/vue/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\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 { provides } = useViewportCapability();\n const scrollActivity = ref<ScrollActivity>({\n isSmoothScrolling: false,\n isScrolling: false,\n });\n\n watch(\n provides,\n (providesValue, _, onCleanup) => {\n if (providesValue) {\n const unsubscribe = providesValue.onScrollActivity((activity) => {\n scrollActivity.value = activity;\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n );\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: pluginRef } = useViewportPlugin();\n const containerRef = ref<HTMLDivElement | null>(null);\n\n // Setup function that runs when both plugin and container are available\n const setupViewport = () => {\n const viewportPlugin = pluginRef.value;\n const container = containerRef.value;\n\n if (!container || !viewportPlugin) 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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Return cleanup function\n return () => {\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\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 { provides } = useViewportCapability();\n const scrollActivity = ref<ScrollActivity>({\n isSmoothScrolling: false,\n isScrolling: false,\n });\n\n watch(\n provides,\n (providesValue, _, onCleanup) => {\n if (providesValue) {\n const unsubscribe = providesValue.onScrollActivity((activity) => {\n scrollActivity.value = activity;\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n );\n\n return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n const { plugin: pluginRef } = useViewportPlugin();\n const containerRef = ref<HTMLDivElement | null>(null);\n\n // Setup function that runs when both plugin and container are available\n const setupViewport = () => {\n const viewportPlugin = pluginRef.value;\n const container = containerRef.value;\n\n if (!container || !viewportPlugin) return;\n\n let cleanedUp = false;\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 viewportPlugin.registerBoundingRectProvider(provideRect);\n\n // Example: On scroll, call setMetrics\n const onScroll = () => {\n viewportPlugin.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 if (cleanedUp) return;\n viewportPlugin.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 = viewportPlugin.onScrollRequest(\n ({ x, y, behavior = 'auto' }) => {\n requestAnimationFrame(() => {\n container.scrollTo({ left: x, top: y, behavior });\n });\n },\n );\n\n // Return cleanup function\n return () => {\n cleanedUp = true;\n resizeObserver.disconnect();\n viewportPlugin.registerBoundingRectProvider(null);\n container.removeEventListener('scroll', onScroll);\n unsubscribeScrollRequest();\n };\n };\n\n let cleanup: (() => void) | null = null;\n\n // Watch for changes in the plugin - this is the Vue equivalent of React's dependency array\n watch(\n pluginRef,\n () => {\n // Clean up previous setup if it exists\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n\n // Setup new viewport if plugin is available\n cleanup = setupViewport() || null;\n },\n { immediate: true }, // Run immediately if plugin is already available\n );\n\n // Also watch for container changes (though this is less likely to change)\n watch(\n containerRef,\n () => {\n // Clean up previous setup if it exists\n if (cleanup) {\n cleanup();\n cleanup = null;\n }\n\n // Setup new viewport if both plugin and container are available\n cleanup = setupViewport() || null;\n },\n { immediate: true },\n );\n\n onUnmounted(() => {\n if (cleanup) {\n cleanup();\n }\n });\n\n // Return the ref so your Vue code can attach it to a div\n return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\n\nimport { useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs */\n/* -------------------------------------------------- */\nconst attrs = useAttrs(); // forward class/id/… to <div>\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n viewportProvides,\n (vp) => {\n if (vp) viewportGap.value = vp.getViewportGap();\n },\n { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef();\n</script>\n\n<template>\n <div\n ref=\"viewportRef\"\n v-bind=\"attrs\"\n :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n >\n <slot />\n </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"mappings":";;;;AAIO,MAAM,oBAAoB,MAAM,UAA0B,eAAe,EAAE;AAC3E,MAAM,wBAAwB,MAAM,cAA8B,eAAe,EAAE;AAEnF,MAAM,4BAA4B,MAAM;AACvC,QAAA,EAAE,SAAS,IAAI,sBAAsB;AAC3C,QAAM,iBAAiB,IAAoB;AAAA,IACzC,mBAAmB;AAAA,IACnB,aAAa;AAAA,EAAA,CACd;AAED;AAAA,IACE;AAAA,IACA,CAAC,eAAe,GAAG,cAAc;AAC/B,UAAI,eAAe;AACjB,cAAM,cAAc,cAAc,iBAAiB,CAAC,aAAa;AAC/D,yBAAe,QAAQ;AAAA,QAAA,CACxB;AACD,kBAAU,WAAW;AAAA,MAAA;AAAA,IAEzB;AAAA,IACA,EAAE,WAAW,KAAK;AAAA,EACpB;AAEO,SAAA;AACT;ACvBO,SAAS,iBAAiB;AAC/B,QAAM,EAAE,QAAQ,UAAU,IAAI,kBAAkB;AAC1C,QAAA,eAAe,IAA2B,IAAI;AAGpD,QAAM,gBAAgB,MAAM;AAC1B,UAAM,iBAAiB,UAAU;AACjC,UAAM,YAAY,aAAa;AAE3B,QAAA,CAAC,aAAa,CAAC,eAAgB;AAEnC,QAAI,YAAY;AAEhB,UAAM,cAAc,MAAY;AACxB,YAAA,IAAI,UAAU,sBAAsB;AACnC,aAAA;AAAA,QACL,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,MAC3C;AAAA,IACF;AACA,mBAAe,6BAA6B,WAAW;AAGvD,UAAM,WAAW,MAAM;AACrB,qBAAe,yBAAyB;AAAA,QACtC,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,MAAA,CACvB;AAAA,IACH;AACU,cAAA,iBAAiB,UAAU,QAAQ;AAGvC,UAAA,iBAAiB,IAAI,eAAe,MAAM;AAC9C,UAAI,UAAW;AACf,qBAAe,yBAAyB;AAAA,QACtC,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,MAAA,CACzB;AAAA,IAAA,CACF;AACD,mBAAe,QAAQ,SAAS;AAEhC,UAAM,2BAA2B,eAAe;AAAA,MAC9C,CAAC,EAAE,GAAG,GAAG,WAAW,aAAa;AAC/B,8BAAsB,MAAM;AAC1B,oBAAU,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU;AAAA,QAAA,CACjD;AAAA,MAAA;AAAA,IAEL;AAGA,WAAO,MAAM;AACC,kBAAA;AACZ,qBAAe,WAAW;AAC1B,qBAAe,6BAA6B,IAAI;AACtC,gBAAA,oBAAoB,UAAU,QAAQ;AACvB,+BAAA;AAAA,IAC3B;AAAA,EACF;AAEA,MAAI,UAA+B;AAGnC;AAAA,IACE;AAAA,IACA,MAAM;AAEJ,UAAI,SAAS;AACH,gBAAA;AACE,kBAAA;AAAA,MAAA;AAIZ,gBAAU,mBAAmB;AAAA,IAC/B;AAAA,IACA,EAAE,WAAW,KAAK;AAAA;AAAA,EACpB;AAGA;AAAA,IACE;AAAA,IACA,MAAM;AAEJ,UAAI,SAAS;AACH,gBAAA;AACE,kBAAA;AAAA,MAAA;AAIZ,gBAAU,mBAAmB;AAAA,IAC/B;AAAA,IACA,EAAE,WAAW,KAAK;AAAA,EACpB;AAEA,cAAY,MAAM;AAChB,QAAI,SAAS;AACH,cAAA;AAAA,IAAA;AAAA,EACV,CACD;AAGM,SAAA;AACT;;;;ACxGA,UAAM,QAAQ,SAAS;AAKvB,UAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AACvD,UAAA,cAAc,IAAI,CAAC;AAEzB;AAAA,MACE;AAAA,MACA,CAAC,OAAO;AACN,YAAI,GAAI,aAAY,QAAQ,GAAG,eAAe;AAAA,MAChD;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AAKA,UAAM,cAAc,eAAe;;AAIjC,aAAAA,UAAA,GAAAC,mBAMM,OANNC,WAMM;AAAA,iBALA;AAAA,QAAJ,KAAI;AAAA,MAAA,GACIC,MAAK,KAAA,GAAA;AAAA,QACZ,qBAAqB,YAAW,KAAA,MAAA,OAAA,QAAA,QAAA,QAAA,UAAA,OAAA;AAAA,MAAA;QAEjCC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-viewport",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -29,20 +29,20 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@embedpdf/models": "1.3.
|
|
32
|
+
"@embedpdf/models": "1.3.15"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^18.2.0",
|
|
36
36
|
"typescript": "^5.0.0",
|
|
37
|
-
"@embedpdf/
|
|
38
|
-
"@embedpdf/
|
|
37
|
+
"@embedpdf/core": "1.3.15",
|
|
38
|
+
"@embedpdf/build": "1.0.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.8.0",
|
|
42
42
|
"react-dom": ">=16.8.0",
|
|
43
43
|
"preact": "^10.26.4",
|
|
44
44
|
"vue": ">=3.2.0",
|
|
45
|
-
"@embedpdf/core": "1.3.
|
|
45
|
+
"@embedpdf/core": "1.3.15"
|
|
46
46
|
},
|
|
47
47
|
"files": [
|
|
48
48
|
"dist",
|