@embedpdf/plugin-render 1.0.25 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +5 -3
- 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 +5 -3
- package/dist/react/index.js.map +1 -1
- package/dist/shared-preact/components/render-layer.d.ts +8 -1
- package/dist/shared-react/components/render-layer.d.ts +8 -1
- package/dist/vue/components/render-layer.vue.d.ts +8 -3
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.js +6 -4
- 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"),r=require("preact"),t=require("preact/hooks"),n=require("@embedpdf/models"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("preact/jsx-runtime"),r=require("preact"),t=require("preact/hooks"),n=require("@embedpdf/models"),c=require("@embedpdf/core/preact"),u=require("@embedpdf/plugin-render"),s=()=>c.usePlugin(u.RenderPlugin.id),o=()=>c.useCapability(u.RenderPlugin.id);exports.RenderLayer=function({pageIndex:c,scale:u,scaleFactor:i,dpr:a,style:d,...l}){const{provides:p}=o(),{plugin:g}=s(),f=u??i??1,[b,R]=t.useState(null),x=t.useRef(null),[y,P]=t.useState(0);return t.useEffect((()=>{if(g)return g.onRefreshPages((e=>{e.includes(c)&&P((e=>e+1))}))}),[g]),t.useEffect((()=>{if(p){const e=p.renderPage({pageIndex:c,options:{scaleFactor:f,dpr:a||window.devicePixelRatio}});return e.wait((e=>{const r=URL.createObjectURL(e);R(r),x.current=r}),n.ignore),()=>{x.current?(URL.revokeObjectURL(x.current),x.current=null):e.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}}),[c,f,a,p,y]),e.jsx(r.Fragment,{children:b&&e.jsx("img",{src:b,onLoad:()=>{x.current&&(URL.revokeObjectURL(x.current),x.current=null)},...l,style:{width:"100%",height:"100%",...d||{}}})})},exports.useRenderCapability=o,exports.useRenderPlugin=s,Object.keys(u).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>u[e]})}));
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scaleFactor
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scale,\n scaleFactor,\n dpr,\n style,\n ...props\n}: RenderLayerProps) {\n const { provides: renderProvides } = useRenderCapability();\n const { plugin: renderPlugin } = useRenderPlugin();\n\n // Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\n const actualScale = scale ?? scaleFactor ?? 1;\n\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const urlRef = useRef<string | null>(null);\n const [refreshTick, setRefreshTick] = useState(0);\n\n useEffect(() => {\n if (!renderPlugin) return;\n return renderPlugin.onRefreshPages((pages) => {\n if (pages.includes(pageIndex)) {\n setRefreshTick((tick) => tick + 1);\n }\n });\n }, [renderPlugin]);\n\n useEffect(() => {\n if (renderProvides) {\n const task = renderProvides.renderPage({\n pageIndex,\n options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio },\n });\n task.wait((blob) => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n urlRef.current = url;\n }, ignore);\n\n return () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n } else {\n task.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n }\n }, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);\n\n const handleImageLoad = () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n }\n };\n\n return (\n <Fragment>\n {imageUrl && (\n <img\n src={imageUrl}\n onLoad={handleImageLoad}\n {...props}\n style={{\n width: '100%',\n height: '100%',\n ...(style || {}),\n }}\n />\n )}\n </Fragment>\n );\n}\n"],"names":["useRenderPlugin","usePlugin","RenderPlugin","id","useRenderCapability","useCapability","pageIndex","scale","scaleFactor","dpr","style","props","provides","renderProvides","plugin","renderPlugin","actualScale","imageUrl","setImageUrl","useState","urlRef","useRef","refreshTick","setRefreshTick","useEffect","onRefreshPages","pages","includes","tick","task","renderPage","options","window","devicePixelRatio","wait","blob","url","URL","createObjectURL","current","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","Fragment","children","jsxRuntime","src","onLoad","width","height"],"mappings":"0QAGaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,wBCiB3E,UAAqBG,UAC1BA,EAAAC,MACAA,EAAAC,YACAA,EAAAC,IACAA,EAAAC,MACAA,KACGC,IAEH,MAAQC,SAAUC,GAAmBT,KAC7BU,OAAQC,GAAiBf,IAG3BgB,EAAcT,GAASC,GAAe,GAErCS,EAAUC,GAAeC,EAAAA,SAAwB,MAClDC,EAASC,SAAsB,OAC9BC,EAAaC,GAAkBJ,EAAAA,SAAS,GA6C7C,OA3CFK,EAAAA,WAAU,KACR,GAAKT,EACE,OAAAA,EAAaU,gBAAgBC,IAC9BA,EAAMC,SAASrB,IACFiB,GAACK,GAASA,EAAO,GAAC,GAEpC,GACA,CAACb,IAEJS,EAAAA,WAAU,KACR,GAAIX,EAAgB,CACZ,MAAAgB,EAAOhB,EAAeiB,WAAW,CACrCxB,YACAyB,QAAS,CAAEvB,YAAaQ,EAAaP,IAAKA,GAAOuB,OAAOC,oBAQ1D,OANKJ,EAAAK,MAAMC,IACH,MAAAC,EAAMC,IAAIC,gBAAgBH,GAChCjB,EAAYkB,GACZhB,EAAOmB,QAAUH,CAAA,GAChBI,UAEI,KACDpB,EAAOmB,SACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,MAEjBV,EAAKa,MAAM,CACTC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,IAED,CAACxC,EAAWU,EAAaP,EAAKI,EAAgBS,MAU/CyB,IAACC,YACEC,SACChC,GAAAiC,EAAAH,IAAC,MAAA,CACCI,IAAKlC,EACLmC,OAZgB,KAClBhC,EAAOmB,UACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,KAAA,KAUT5B,EACJD,MAAO,CACL2C,MAAO,OACPC,OAAQ,UACJ5C,GAAS,CAAA,MAMzB"}
|
package/dist/preact/index.js
CHANGED
|
@@ -9,13 +9,15 @@ const useRenderPlugin = () => usePlugin(RenderPlugin.id);
|
|
|
9
9
|
const useRenderCapability = () => useCapability(RenderPlugin.id);
|
|
10
10
|
function RenderLayer({
|
|
11
11
|
pageIndex,
|
|
12
|
-
|
|
12
|
+
scale,
|
|
13
|
+
scaleFactor,
|
|
13
14
|
dpr,
|
|
14
15
|
style,
|
|
15
16
|
...props
|
|
16
17
|
}) {
|
|
17
18
|
const { provides: renderProvides } = useRenderCapability();
|
|
18
19
|
const { plugin: renderPlugin } = useRenderPlugin();
|
|
20
|
+
const actualScale = scale ?? scaleFactor ?? 1;
|
|
19
21
|
const [imageUrl, setImageUrl] = useState(null);
|
|
20
22
|
const urlRef = useRef(null);
|
|
21
23
|
const [refreshTick, setRefreshTick] = useState(0);
|
|
@@ -31,7 +33,7 @@ function RenderLayer({
|
|
|
31
33
|
if (renderProvides) {
|
|
32
34
|
const task = renderProvides.renderPage({
|
|
33
35
|
pageIndex,
|
|
34
|
-
options: { scaleFactor, dpr: dpr || window.devicePixelRatio }
|
|
36
|
+
options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio }
|
|
35
37
|
});
|
|
36
38
|
task.wait((blob) => {
|
|
37
39
|
const url = URL.createObjectURL(blob);
|
|
@@ -50,7 +52,7 @@ function RenderLayer({
|
|
|
50
52
|
}
|
|
51
53
|
};
|
|
52
54
|
}
|
|
53
|
-
}, [pageIndex,
|
|
55
|
+
}, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);
|
|
54
56
|
const handleImageLoad = () => {
|
|
55
57
|
if (urlRef.current) {
|
|
56
58
|
URL.revokeObjectURL(urlRef.current);
|
package/dist/preact/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scaleFactor
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scale,\n scaleFactor,\n dpr,\n style,\n ...props\n}: RenderLayerProps) {\n const { provides: renderProvides } = useRenderCapability();\n const { plugin: renderPlugin } = useRenderPlugin();\n\n // Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\n const actualScale = scale ?? scaleFactor ?? 1;\n\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const urlRef = useRef<string | null>(null);\n const [refreshTick, setRefreshTick] = useState(0);\n\n useEffect(() => {\n if (!renderPlugin) return;\n return renderPlugin.onRefreshPages((pages) => {\n if (pages.includes(pageIndex)) {\n setRefreshTick((tick) => tick + 1);\n }\n });\n }, [renderPlugin]);\n\n useEffect(() => {\n if (renderProvides) {\n const task = renderProvides.renderPage({\n pageIndex,\n options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio },\n });\n task.wait((blob) => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n urlRef.current = url;\n }, ignore);\n\n return () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n } else {\n task.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n }\n }, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);\n\n const handleImageLoad = () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n }\n };\n\n return (\n <Fragment>\n {imageUrl && (\n <img\n src={imageUrl}\n onLoad={handleImageLoad}\n {...props}\n style={{\n width: '100%',\n height: '100%',\n ...(style || {}),\n }}\n />\n )}\n </Fragment>\n );\n}\n"],"names":[],"mappings":";;;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACiB7E,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAG3C,QAAA,cAAc,SAAS,eAAe;AAE5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AACtD,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AACZ,WAAA,aAAa,eAAe,CAAC,UAAU;AACxC,UAAA,MAAM,SAAS,SAAS,GAAG;AACd,uBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,MAAA;AAAA,IACnC,CACD;AAAA,EAAA,GACA,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,gBAAgB;AACZ,YAAA,OAAO,eAAe,WAAW;AAAA,QACrC;AAAA,QACA,SAAS,EAAE,aAAa,aAAa,KAAK,OAAO,OAAO,iBAAiB;AAAA,MAAA,CAC1E;AACI,WAAA,KAAK,CAAC,SAAS;AACZ,cAAA,MAAM,IAAI,gBAAgB,IAAI;AACpC,oBAAY,GAAG;AACf,eAAO,UAAU;AAAA,SAChB,MAAM;AAET,aAAO,MAAM;AACX,YAAI,OAAO,SAAS;AACd,cAAA,gBAAgB,OAAO,OAAO;AAClC,iBAAO,UAAU;AAAA,QAAA,OACZ;AACL,eAAK,MAAM;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,SAAS;AAAA,UAAA,CACV;AAAA,QAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EACF,GACC,CAAC,WAAW,aAAa,KAAK,gBAAgB,WAAW,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAGE,SAAA,oBAAC,YACE,UACC,YAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAI,SAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAGN;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"),r=require("react"),t=require("@embedpdf/models"),n=require("@embedpdf/core/react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("@embedpdf/models"),n=require("@embedpdf/core/react"),c=require("@embedpdf/plugin-render"),u=()=>n.usePlugin(c.RenderPlugin.id),s=()=>n.useCapability(c.RenderPlugin.id);exports.RenderLayer=function({pageIndex:n,scale:c,scaleFactor:o,dpr:i,style:d,...a}){const{provides:l}=s(),{plugin:p}=u(),g=c??o??1,[f,b]=r.useState(null),R=r.useRef(null),[x,y]=r.useState(0);return r.useEffect((()=>{if(p)return p.onRefreshPages((e=>{e.includes(n)&&y((e=>e+1))}))}),[p]),r.useEffect((()=>{if(l){const e=l.renderPage({pageIndex:n,options:{scaleFactor:g,dpr:i||window.devicePixelRatio}});return e.wait((e=>{const r=URL.createObjectURL(e);b(r),R.current=r}),t.ignore),()=>{R.current?(URL.revokeObjectURL(R.current),R.current=null):e.abort({code:t.PdfErrorCode.Cancelled,message:"canceled render task"})}}}),[n,g,i,l,x]),e.jsx(r.Fragment,{children:f&&e.jsx("img",{src:f,onLoad:()=>{R.current&&(URL.revokeObjectURL(R.current),R.current=null)},...a,style:{width:"100%",height:"100%",...d||{}}})})},exports.useRenderCapability=s,exports.useRenderPlugin=u,Object.keys(c).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>c[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-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scaleFactor
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scale,\n scaleFactor,\n dpr,\n style,\n ...props\n}: RenderLayerProps) {\n const { provides: renderProvides } = useRenderCapability();\n const { plugin: renderPlugin } = useRenderPlugin();\n\n // Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\n const actualScale = scale ?? scaleFactor ?? 1;\n\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const urlRef = useRef<string | null>(null);\n const [refreshTick, setRefreshTick] = useState(0);\n\n useEffect(() => {\n if (!renderPlugin) return;\n return renderPlugin.onRefreshPages((pages) => {\n if (pages.includes(pageIndex)) {\n setRefreshTick((tick) => tick + 1);\n }\n });\n }, [renderPlugin]);\n\n useEffect(() => {\n if (renderProvides) {\n const task = renderProvides.renderPage({\n pageIndex,\n options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio },\n });\n task.wait((blob) => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n urlRef.current = url;\n }, ignore);\n\n return () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n } else {\n task.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n }\n }, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);\n\n const handleImageLoad = () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n }\n };\n\n return (\n <Fragment>\n {imageUrl && (\n <img\n src={imageUrl}\n onLoad={handleImageLoad}\n {...props}\n style={{\n width: '100%',\n height: '100%',\n ...(style || {}),\n }}\n />\n )}\n </Fragment>\n );\n}\n"],"names":["useRenderPlugin","usePlugin","RenderPlugin","id","useRenderCapability","useCapability","pageIndex","scale","scaleFactor","dpr","style","props","provides","renderProvides","plugin","renderPlugin","actualScale","imageUrl","setImageUrl","useState","urlRef","useRef","refreshTick","setRefreshTick","useEffect","onRefreshPages","pages","includes","tick","task","renderPage","options","window","devicePixelRatio","wait","blob","url","URL","createObjectURL","current","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","Fragment","children","jsxRuntime","src","onLoad","width","height"],"mappings":"6OAGaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,wBCiB3E,UAAqBG,UAC1BA,EAAAC,MACAA,EAAAC,YACAA,EAAAC,IACAA,EAAAC,MACAA,KACGC,IAEH,MAAQC,SAAUC,GAAmBT,KAC7BU,OAAQC,GAAiBf,IAG3BgB,EAAcT,GAASC,GAAe,GAErCS,EAAUC,GAAeC,EAAAA,SAAwB,MAClDC,EAASC,SAAsB,OAC9BC,EAAaC,GAAkBJ,EAAAA,SAAS,GA6C7C,OA3CFK,EAAAA,WAAU,KACR,GAAKT,EACE,OAAAA,EAAaU,gBAAgBC,IAC9BA,EAAMC,SAASrB,IACFiB,GAACK,GAASA,EAAO,GAAC,GAEpC,GACA,CAACb,IAEJS,EAAAA,WAAU,KACR,GAAIX,EAAgB,CACZ,MAAAgB,EAAOhB,EAAeiB,WAAW,CACrCxB,YACAyB,QAAS,CAAEvB,YAAaQ,EAAaP,IAAKA,GAAOuB,OAAOC,oBAQ1D,OANKJ,EAAAK,MAAMC,IACH,MAAAC,EAAMC,IAAIC,gBAAgBH,GAChCjB,EAAYkB,GACZhB,EAAOmB,QAAUH,CAAA,GAChBI,UAEI,KACDpB,EAAOmB,SACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,MAEjBV,EAAKa,MAAM,CACTC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,IAED,CAACxC,EAAWU,EAAaP,EAAKI,EAAgBS,MAU/CyB,IAACC,YACEC,SACChC,GAAAiC,EAAAH,IAAC,MAAA,CACCI,IAAKlC,EACLmC,OAZgB,KAClBhC,EAAOmB,UACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,KAAA,KAUT5B,EACJD,MAAO,CACL2C,MAAO,OACPC,OAAQ,UACJ5C,GAAS,CAAA,MAMzB"}
|
package/dist/react/index.js
CHANGED
|
@@ -8,13 +8,15 @@ const useRenderPlugin = () => usePlugin(RenderPlugin.id);
|
|
|
8
8
|
const useRenderCapability = () => useCapability(RenderPlugin.id);
|
|
9
9
|
function RenderLayer({
|
|
10
10
|
pageIndex,
|
|
11
|
-
|
|
11
|
+
scale,
|
|
12
|
+
scaleFactor,
|
|
12
13
|
dpr,
|
|
13
14
|
style,
|
|
14
15
|
...props
|
|
15
16
|
}) {
|
|
16
17
|
const { provides: renderProvides } = useRenderCapability();
|
|
17
18
|
const { plugin: renderPlugin } = useRenderPlugin();
|
|
19
|
+
const actualScale = scale ?? scaleFactor ?? 1;
|
|
18
20
|
const [imageUrl, setImageUrl] = useState(null);
|
|
19
21
|
const urlRef = useRef(null);
|
|
20
22
|
const [refreshTick, setRefreshTick] = useState(0);
|
|
@@ -30,7 +32,7 @@ function RenderLayer({
|
|
|
30
32
|
if (renderProvides) {
|
|
31
33
|
const task = renderProvides.renderPage({
|
|
32
34
|
pageIndex,
|
|
33
|
-
options: { scaleFactor, dpr: dpr || window.devicePixelRatio }
|
|
35
|
+
options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio }
|
|
34
36
|
});
|
|
35
37
|
task.wait((blob) => {
|
|
36
38
|
const url = URL.createObjectURL(blob);
|
|
@@ -49,7 +51,7 @@ function RenderLayer({
|
|
|
49
51
|
}
|
|
50
52
|
};
|
|
51
53
|
}
|
|
52
|
-
}, [pageIndex,
|
|
54
|
+
}, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);
|
|
53
55
|
const handleImageLoad = () => {
|
|
54
56
|
if (urlRef.current) {
|
|
55
57
|
URL.revokeObjectURL(urlRef.current);
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scaleFactor
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-render.ts","../../src/shared/components/render-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","import { Fragment, useEffect, useRef, useState } from '@framework';\nimport type { CSSProperties, HTMLAttributes } from '@framework';\n\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks/use-render';\n\ntype RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n style?: CSSProperties;\n};\n\nexport function RenderLayer({\n pageIndex,\n scale,\n scaleFactor,\n dpr,\n style,\n ...props\n}: RenderLayerProps) {\n const { provides: renderProvides } = useRenderCapability();\n const { plugin: renderPlugin } = useRenderPlugin();\n\n // Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\n const actualScale = scale ?? scaleFactor ?? 1;\n\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const urlRef = useRef<string | null>(null);\n const [refreshTick, setRefreshTick] = useState(0);\n\n useEffect(() => {\n if (!renderPlugin) return;\n return renderPlugin.onRefreshPages((pages) => {\n if (pages.includes(pageIndex)) {\n setRefreshTick((tick) => tick + 1);\n }\n });\n }, [renderPlugin]);\n\n useEffect(() => {\n if (renderProvides) {\n const task = renderProvides.renderPage({\n pageIndex,\n options: { scaleFactor: actualScale, dpr: dpr || window.devicePixelRatio },\n });\n task.wait((blob) => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n urlRef.current = url;\n }, ignore);\n\n return () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n } else {\n task.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n };\n }\n }, [pageIndex, actualScale, dpr, renderProvides, refreshTick]);\n\n const handleImageLoad = () => {\n if (urlRef.current) {\n URL.revokeObjectURL(urlRef.current);\n urlRef.current = null;\n }\n };\n\n return (\n <Fragment>\n {imageUrl && (\n <img\n src={imageUrl}\n onLoad={handleImageLoad}\n {...props}\n style={{\n width: '100%',\n height: '100%',\n ...(style || {}),\n }}\n />\n )}\n </Fragment>\n );\n}\n"],"names":[],"mappings":";;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACiB7E,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAG3C,QAAA,cAAc,SAAS,eAAe;AAE5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AACtD,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AACZ,WAAA,aAAa,eAAe,CAAC,UAAU;AACxC,UAAA,MAAM,SAAS,SAAS,GAAG;AACd,uBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,MAAA;AAAA,IACnC,CACD;AAAA,EAAA,GACA,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,gBAAgB;AACZ,YAAA,OAAO,eAAe,WAAW;AAAA,QACrC;AAAA,QACA,SAAS,EAAE,aAAa,aAAa,KAAK,OAAO,OAAO,iBAAiB;AAAA,MAAA,CAC1E;AACI,WAAA,KAAK,CAAC,SAAS;AACZ,cAAA,MAAM,IAAI,gBAAgB,IAAI;AACpC,oBAAY,GAAG;AACf,eAAO,UAAU;AAAA,SAChB,MAAM;AAET,aAAO,MAAM;AACX,YAAI,OAAO,SAAS;AACd,cAAA,gBAAgB,OAAO,OAAO;AAClC,iBAAO,UAAU;AAAA,QAAA,OACZ;AACL,eAAK,MAAM;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,SAAS;AAAA,UAAA,CACV;AAAA,QAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EACF,GACC,CAAC,WAAW,aAAa,KAAK,gBAAgB,WAAW,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAGE,SAAA,oBAAC,YACE,UACC,YAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAI,SAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAGN;AAEJ;"}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from '../../preact/adapter.ts';
|
|
2
2
|
type RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {
|
|
3
3
|
pageIndex: number;
|
|
4
|
+
/**
|
|
5
|
+
* The scale factor for rendering the page.
|
|
6
|
+
*/
|
|
7
|
+
scale?: number;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `scale` instead. Will be removed in the next major release.
|
|
10
|
+
*/
|
|
4
11
|
scaleFactor?: number;
|
|
5
12
|
dpr?: number;
|
|
6
13
|
style?: CSSProperties;
|
|
7
14
|
};
|
|
8
|
-
export declare function RenderLayer({ pageIndex, scaleFactor, dpr, style, ...props }: RenderLayerProps): import("preact").JSX.Element;
|
|
15
|
+
export declare function RenderLayer({ pageIndex, scale, scaleFactor, dpr, style, ...props }: RenderLayerProps): import("preact").JSX.Element;
|
|
9
16
|
export {};
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from '../../react/adapter.ts';
|
|
2
2
|
type RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {
|
|
3
3
|
pageIndex: number;
|
|
4
|
+
/**
|
|
5
|
+
* The scale factor for rendering the page.
|
|
6
|
+
*/
|
|
7
|
+
scale?: number;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `scale` instead. Will be removed in the next major release.
|
|
10
|
+
*/
|
|
4
11
|
scaleFactor?: number;
|
|
5
12
|
dpr?: number;
|
|
6
13
|
style?: CSSProperties;
|
|
7
14
|
};
|
|
8
|
-
export declare function RenderLayer({ pageIndex, scaleFactor, dpr, style, ...props }: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function RenderLayer({ pageIndex, scale, scaleFactor, dpr, style, ...props }: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
16
|
export {};
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
interface Props {
|
|
2
2
|
pageIndex: number;
|
|
3
|
+
/**
|
|
4
|
+
* The scale factor for rendering the page.
|
|
5
|
+
*/
|
|
6
|
+
scale?: number;
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `scale` instead. Will be removed in the next major release.
|
|
9
|
+
*/
|
|
3
10
|
scaleFactor?: number;
|
|
4
11
|
dpr?: number;
|
|
5
12
|
}
|
|
6
|
-
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
7
|
-
scaleFactor: number;
|
|
8
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
9
14
|
export default _default;
|
package/dist/vue/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("@embedpdf/models"),n=require("@embedpdf/core/vue"),t=require("@embedpdf/plugin-render"),l=()=>n.usePlugin(t.RenderPlugin.id),a=()=>n.useCapability(t.RenderPlugin.id),o=["src"],d=e.defineComponent({__name:"render-layer",props:{pageIndex:{},scaleFactor:{
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("@embedpdf/models"),n=require("@embedpdf/core/vue"),t=require("@embedpdf/plugin-render"),l=()=>n.usePlugin(t.RenderPlugin.id),a=()=>n.useCapability(t.RenderPlugin.id),o=["src"],d=e.defineComponent({__name:"render-layer",props:{pageIndex:{},scale:{},scaleFactor:{},dpr:{}},setup(n){const t=n,d=e.computed((()=>t.scale??t.scaleFactor??1)),{provides:u}=a(),{plugin:i}=l(),c=e.ref(null),s=e.ref(0);let p=null,g=null;function m(){g&&!p&&g.abort({code:r.PdfErrorCode.Cancelled,message:"canceled render task"})}function f(){p&&(URL.revokeObjectURL(p),p=null)}return e.watch(i,((e,r,n)=>{if(e){n(e.onRefreshPages((e=>{e.includes(t.pageIndex)&&s.value++})))}}),{immediate:!0}),e.watch((()=>[t.pageIndex,d.value,t.dpr,u.value,s.value]),(function(){if(m(),f(),g=null,!u.value)return;const e=u.value.renderPage({pageIndex:t.pageIndex,options:{scaleFactor:d.value,dpr:t.dpr||window.devicePixelRatio}});g=e,e.wait((e=>{p=URL.createObjectURL(e),c.value=p,g=null}),r.ignore)}),{immediate:!0}),e.onBeforeUnmount((()=>{m(),f()})),(r,n)=>c.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:c.value,style:{width:"100%",height:"100%"},onLoad:f},null,40,o)):e.createCommentVNode("",!0)}});exports.RenderLayer=d,exports.useRenderCapability=a,exports.useRenderPlugin=l,Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[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-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n}\n\nconst props =
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount, computed } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet currentBlobUrl: string | null = null;\nlet currentTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* ------------------------------------------ */\n/* Helper function to abort current task */\n/* ------------------------------------------ */\nfunction abortCurrentTask() {\n if (currentTask && !currentBlobUrl) {\n currentTask.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n}\n\n/* ------------------------------------------ */\n/* render whenever pageIndex/scale/dpr/tick change */\n/* ------------------------------------------ */\nfunction revoke() {\n if (currentBlobUrl) {\n URL.revokeObjectURL(currentBlobUrl);\n currentBlobUrl = null;\n }\n}\n\nfunction startRender() {\n abortCurrentTask();\n revoke();\n currentTask = null;\n\n if (!renderProvides.value) return;\n\n const task = renderProvides.value.renderPage({\n pageIndex: props.pageIndex,\n options: {\n scaleFactor: actualScale.value,\n dpr: props.dpr || window.devicePixelRatio,\n },\n });\n\n currentTask = task;\n\n task.wait((blob) => {\n currentBlobUrl = URL.createObjectURL(blob);\n imageUrl.value = currentBlobUrl;\n currentTask = null;\n }, ignore);\n}\n\n// Watch for external refresh events\nwatch(\n renderPlugin,\n (pluginInstance, _, onCleanup) => {\n if (pluginInstance) {\n const unsubscribe = pluginInstance.onRefreshPages((pages: number[]) => {\n if (pages.includes(props.pageIndex)) {\n refreshTick.value++;\n }\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n);\n\n// Watch for changes that require a re-render\nwatch(\n () => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],\n startRender,\n { immediate: true },\n);\n\n/* ------------------------------------------ */\nonBeforeUnmount(() => {\n abortCurrentTask();\n revoke();\n});\n</script>\n\n<template>\n <img v-if=\"imageUrl\" :src=\"imageUrl\" :style=\"{ width: '100%', height: '100%' }\" @load=\"revoke\" />\n</template>\n"],"names":["useRenderPlugin","usePlugin","RenderPlugin","id","useRenderCapability","useCapability","props","__props","actualScale","computed","scale","scaleFactor","provides","renderProvides","plugin","renderPlugin","imageUrl","ref","refreshTick","currentBlobUrl","currentTask","abortCurrentTask","abort","code","PdfErrorCode","Cancelled","message","revoke","URL","revokeObjectURL","vue$1","watch","pluginInstance","_","onCleanup","onRefreshPages","pages","includes","pageIndex","value","immediate","dpr","task","renderPage","options","window","devicePixelRatio","wait","blob","createObjectURL","ignore","onBeforeUnmount","_createElementBlock","src","style","width","height","onLoad"],"mappings":"0MAGaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,sHCelF,MAAMG,EAAQC,EAGRC,EAAcC,EAAAA,UAAS,IAAMH,EAAMI,OAASJ,EAAMK,aAAe,KAE/DC,SAAUC,GAAmBT,KAC7BU,OAAQC,GAAiBf,IAE3BgB,EAAWC,MAAmB,MAC9BC,EAAcD,MAAI,GAExB,IAAIE,EAAgC,KAChCC,EAAiD,KAKrD,SAASC,IACHD,IAAgBD,GAClBC,EAAYE,MAAM,CAChBC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBAEb,CAMF,SAASC,IACHR,IACFS,IAAIC,gBAAgBV,GACHA,EAAA,KACnB,QA4BFW,EAAAC,MACEhB,GACA,CAACiB,EAAgBC,EAAGC,KAClB,GAAIF,EAAgB,CAMlBE,EALoBF,EAAeG,gBAAgBC,IAC7CA,EAAMC,SAAS/B,EAAMgC,YACXpB,EAAAqB,OAAA,IAGK,IAGzB,CAAEC,WAAW,IAIfV,EAAAC,OACE,IAAM,CAACzB,EAAMgC,UAAW9B,EAAY+B,MAAOjC,EAAMmC,IAAK5B,EAAe0B,MAAOrB,EAAYqB,SA1C1F,WAKM,GAJalB,IACVM,IACOP,EAAA,MAETP,EAAe0B,MAAO,OAErB,MAAAG,EAAO7B,EAAe0B,MAAMI,WAAW,CAC3CL,UAAWhC,EAAMgC,UACjBM,QAAS,CACPjC,YAAaH,EAAY+B,MACzBE,IAAKnC,EAAMmC,KAAOI,OAAOC,oBAIf1B,EAAAsB,EAETA,EAAAK,MAAMC,IACQ7B,EAAAS,IAAIqB,gBAAgBD,GACrChC,EAASuB,MAAQpB,EACHC,EAAA,IAAA,GACb8B,SAAM,GAuBT,CAAEV,WAAW,IAIfW,EAAAA,iBAAgB,KACG9B,IACVM,GAAA,WAKIX,EAAQuB,qBAAnBa,EAAAA,mBAAiG,MAAA,OAA3EC,IAAKrC,EAAQuB,MAAGe,MAAO,CAAiCC,MAAA,OAAAC,OAAA,QAAGC,OAAM9B"}
|
package/dist/vue/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, ref, watch, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock } from "vue";
|
|
1
|
+
import { defineComponent, computed, ref, watch, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock } from "vue";
|
|
2
2
|
import { ignore, PdfErrorCode } from "@embedpdf/models";
|
|
3
3
|
import { useCapability, usePlugin } from "@embedpdf/core/vue";
|
|
4
4
|
import { RenderPlugin } from "@embedpdf/plugin-render";
|
|
@@ -10,11 +10,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10
10
|
__name: "render-layer",
|
|
11
11
|
props: {
|
|
12
12
|
pageIndex: {},
|
|
13
|
-
|
|
13
|
+
scale: {},
|
|
14
|
+
scaleFactor: {},
|
|
14
15
|
dpr: {}
|
|
15
16
|
},
|
|
16
17
|
setup(__props) {
|
|
17
18
|
const props = __props;
|
|
19
|
+
const actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);
|
|
18
20
|
const { provides: renderProvides } = useRenderCapability();
|
|
19
21
|
const { plugin: renderPlugin } = useRenderPlugin();
|
|
20
22
|
const imageUrl = ref(null);
|
|
@@ -43,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
43
45
|
const task = renderProvides.value.renderPage({
|
|
44
46
|
pageIndex: props.pageIndex,
|
|
45
47
|
options: {
|
|
46
|
-
scaleFactor:
|
|
48
|
+
scaleFactor: actualScale.value,
|
|
47
49
|
dpr: props.dpr || window.devicePixelRatio
|
|
48
50
|
}
|
|
49
51
|
});
|
|
@@ -69,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
69
71
|
{ immediate: true }
|
|
70
72
|
);
|
|
71
73
|
watch(
|
|
72
|
-
() => [props.pageIndex,
|
|
74
|
+
() => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],
|
|
73
75
|
startRender,
|
|
74
76
|
{ immediate: true }
|
|
75
77
|
);
|
package/dist/vue/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n pageIndex: number;\n scaleFactor?: number;\n dpr?: number;\n}\n\nconst props =
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount, computed } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n pageIndex: number;\n /**\n * The scale factor for rendering the page.\n */\n scale?: number;\n /**\n * @deprecated Use `scale` instead. Will be removed in the next major release.\n */\n scaleFactor?: number;\n dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet currentBlobUrl: string | null = null;\nlet currentTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* ------------------------------------------ */\n/* Helper function to abort current task */\n/* ------------------------------------------ */\nfunction abortCurrentTask() {\n if (currentTask && !currentBlobUrl) {\n currentTask.abort({\n code: PdfErrorCode.Cancelled,\n message: 'canceled render task',\n });\n }\n}\n\n/* ------------------------------------------ */\n/* render whenever pageIndex/scale/dpr/tick change */\n/* ------------------------------------------ */\nfunction revoke() {\n if (currentBlobUrl) {\n URL.revokeObjectURL(currentBlobUrl);\n currentBlobUrl = null;\n }\n}\n\nfunction startRender() {\n abortCurrentTask();\n revoke();\n currentTask = null;\n\n if (!renderProvides.value) return;\n\n const task = renderProvides.value.renderPage({\n pageIndex: props.pageIndex,\n options: {\n scaleFactor: actualScale.value,\n dpr: props.dpr || window.devicePixelRatio,\n },\n });\n\n currentTask = task;\n\n task.wait((blob) => {\n currentBlobUrl = URL.createObjectURL(blob);\n imageUrl.value = currentBlobUrl;\n currentTask = null;\n }, ignore);\n}\n\n// Watch for external refresh events\nwatch(\n renderPlugin,\n (pluginInstance, _, onCleanup) => {\n if (pluginInstance) {\n const unsubscribe = pluginInstance.onRefreshPages((pages: number[]) => {\n if (pages.includes(props.pageIndex)) {\n refreshTick.value++;\n }\n });\n onCleanup(unsubscribe);\n }\n },\n { immediate: true },\n);\n\n// Watch for changes that require a re-render\nwatch(\n () => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],\n startRender,\n { immediate: true },\n);\n\n/* ------------------------------------------ */\nonBeforeUnmount(() => {\n abortCurrentTask();\n revoke();\n});\n</script>\n\n<template>\n <img v-if=\"imageUrl\" :src=\"imageUrl\" :style=\"{ width: '100%', height: '100%' }\" @load=\"revoke\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;ACepF,UAAM,QAAQ;AAGd,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,MAAM,eAAe,CAAC;AAExE,UAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,UAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAE3C,UAAA,WAAW,IAAmB,IAAI;AAClC,UAAA,cAAc,IAAI,CAAC;AAEzB,QAAI,iBAAgC;AACpC,QAAI,cAAiD;AAKrD,aAAS,mBAAmB;AACtB,UAAA,eAAe,CAAC,gBAAgB;AAClC,oBAAY,MAAM;AAAA,UAChB,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACH;AAMF,aAAS,SAAS;AAChB,UAAI,gBAAgB;AAClB,YAAI,gBAAgB,cAAc;AACjB,yBAAA;AAAA,MAAA;AAAA,IACnB;AAGF,aAAS,cAAc;AACJ,uBAAA;AACV,aAAA;AACO,oBAAA;AAEV,UAAA,CAAC,eAAe,MAAO;AAErB,YAAA,OAAO,eAAe,MAAM,WAAW;AAAA,QAC3C,WAAW,MAAM;AAAA,QACjB,SAAS;AAAA,UACP,aAAa,YAAY;AAAA,UACzB,KAAK,MAAM,OAAO,OAAO;AAAA,QAAA;AAAA,MAC3B,CACD;AAEa,oBAAA;AAET,WAAA,KAAK,CAAC,SAAS;AACD,yBAAA,IAAI,gBAAgB,IAAI;AACzC,iBAAS,QAAQ;AACH,sBAAA;AAAA,SACb,MAAM;AAAA,IAAA;AAIX;AAAA,MACE;AAAA,MACA,CAAC,gBAAgB,GAAG,cAAc;AAChC,YAAI,gBAAgB;AAClB,gBAAM,cAAc,eAAe,eAAe,CAAC,UAAoB;AACrE,gBAAI,MAAM,SAAS,MAAM,SAAS,GAAG;AACvB,0BAAA;AAAA,YAAA;AAAA,UACd,CACD;AACD,oBAAU,WAAW;AAAA,QAAA;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AAGA;AAAA,MACE,MAAM,CAAC,MAAM,WAAW,YAAY,OAAO,MAAM,KAAK,eAAe,OAAO,YAAY,KAAK;AAAA,MAC7F;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AAGA,oBAAgB,MAAM;AACH,uBAAA;AACV,aAAA;AAAA,IAAA,CACR;;aAIY,SAAQ,sBAAnBA,mBAAiG,OAAA;AAAA;QAA3E,KAAK,SAAQ;AAAA,QAAG,OAAO,EAAiC,OAAA,QAAA,QAAA,OAAA;AAAA,QAAG,QAAM;AAAA,MAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-render",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -28,20 +28,20 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@embedpdf/models": "1.0
|
|
31
|
+
"@embedpdf/models": "1.1.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/react": "^18.2.0",
|
|
35
35
|
"typescript": "^5.0.0",
|
|
36
|
-
"@embedpdf/
|
|
37
|
-
"@embedpdf/
|
|
36
|
+
"@embedpdf/build": "1.0.0",
|
|
37
|
+
"@embedpdf/core": "1.1.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"preact": "^10.26.4",
|
|
41
41
|
"react": ">=16.8.0",
|
|
42
42
|
"react-dom": ">=16.8.0",
|
|
43
43
|
"vue": ">=3.2.0",
|
|
44
|
-
"@embedpdf/core": "1.0
|
|
44
|
+
"@embedpdf/core": "1.1.0"
|
|
45
45
|
},
|
|
46
46
|
"files": [
|
|
47
47
|
"dist",
|