@embedpdf/plugin-tiling 1.0.20 → 1.0.22

package/dist/preact/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-tiling"),t=require("preact/jsx-runtime");require("preact");const i=require("preact/hooks"),n=require("@embedpdf/models"),s=()=>e.usePlugin(r.TilingPlugin.id),c=()=>e.useCapability(r.TilingPlugin.id);function u({pageIndex:e,tile:r,dpr:u,scale:l}){const{provides:o}=c(),{plugin:d}=s(),[a,p]=i.useState(),g=i.useRef(null),[f,x]=i.useState(0),R=l/r.srcScale;i.useEffect((()=>{if(d)return d.onRefreshPages((r=>{r.includes(e)&&x((e=>e+1))}))}),[d]),i.useEffect((()=>{if("ready"===r.status&&g.current)return;if(!o)return;const t=o.renderTile({pageIndex:e,tile:r,dpr:u});return t.wait((e=>{const r=URL.createObjectURL(e);g.current=r,p(r)}),n.ignore),()=>{g.current?(URL.revokeObjectURL(g.current),g.current=null):t.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[e,r.id,f]);return a?t.jsx("img",{src:a,onLoad:()=>{g.current&&(URL.revokeObjectURL(g.current),g.current=null)},style:{position:"absolute",left:r.screenRect.origin.x*R,top:r.screenRect.origin.y*R,width:r.screenRect.size.width*R,height:r.screenRect.size.height*R,display:"block"}}):null}exports.TilingLayer=function({pageIndex:e,scale:r,style:n,...s}){const{provides:l}=c(),[o,d]=i.useState([]);return i.useEffect((()=>{if(l)return l.onTileRendering((r=>d(r[e])))}),[l]),t.jsx("div",{style:{...n},...s,children:null==o?void 0:o.map((i=>t.jsx(u,{pageIndex:e,tile:i,dpr:window.devicePixelRatio,scale:r},i.id)))})},exports.useTilingCapability=c,exports.useTilingPlugin=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-tiling"),t=require("preact/jsx-runtime");require("preact");const i=require("preact/hooks"),n=require("@embedpdf/models"),s=()=>e.usePlugin(r.TilingPlugin.id),c=()=>e.useCapability(r.TilingPlugin.id);function l({pageIndex:e,tile:r,dpr:l,scale:u}){const{provides:o}=c(),{plugin:d}=s(),[a,p]=i.useState(),g=i.useRef(null),[f,b]=i.useState(0),x=u/r.srcScale;i.useEffect((()=>{if(d)return d.onRefreshPages((r=>{r.includes(e)&&b((e=>e+1))}))}),[d]),i.useEffect((()=>{if("ready"===r.status&&g.current)return;if(!o)return;const t=o.renderTile({pageIndex:e,tile:r,dpr:l});return t.wait((e=>{const r=URL.createObjectURL(e);g.current=r,p(r)}),n.ignore),()=>{g.current?(URL.revokeObjectURL(g.current),g.current=null):t.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[e,r.id,f]);return a?t.jsx("img",{src:a,onLoad:()=>{g.current&&(URL.revokeObjectURL(g.current),g.current=null)},style:{position:"absolute",left:r.screenRect.origin.x*x,top:r.screenRect.origin.y*x,width:r.screenRect.size.width*x,height:r.screenRect.size.height*x,display:"block"}}):null}exports.TilingLayer=function({pageIndex:e,scale:r,style:n,...s}){const{provides:u}=c(),[o,d]=i.useState([]);return i.useEffect((()=>{if(u)return u.onTileRendering((r=>d(r[e])))}),[u]),t.jsx("div",{style:{...n},...s,children:null==o?void 0:o.map((i=>t.jsx(l,{pageIndex:e,tile:i,dpr:window.devicePixelRatio,scale:r},i.id)))})},exports.useTilingCapability=c,exports.useTilingPlugin=s,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/preact/index.js

@@ -1,5 +1,6 @@
 import { usePlugin, useCapability } from "@embedpdf/core/preact";
 import { TilingPlugin } from "@embedpdf/plugin-tiling";
+export * from "@embedpdf/plugin-tiling";
 import { jsx } from "preact/jsx-runtime";
 import "preact";
 import { useState, useRef, useEffect } from "preact/hooks";

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-tiling.ts","../../src/shared/components/tile-img.tsx","../../src/shared/components/tiling-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","import { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useRef, useState } from '@framework';\n\nimport { useTilingCapability, useTilingPlugin } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const { plugin: tilingPlugin } = useTilingPlugin();\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  const relativeScale = scale / tile.srcScale;\n\n  useEffect(() => {\n    if (!tilingPlugin) return;\n    return tilingPlugin.onRefreshPages((pages) => {\n      if (pages.includes(pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [tilingPlugin]);\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!tilingCapability) return;\n    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });\n    task.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\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  }, [pageIndex, tile.id, refreshTick]); // id includes scale, so unique\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  if (!url) return null; // could render a placeholder\n  return (\n    <img\n      src={url}\n      onLoad={handleImageLoad}\n      style={{\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relativeScale,\n        top: tile.screenRect.origin.y * relativeScale,\n        width: tile.screenRect.size.width * relativeScale,\n        height: tile.screenRect.size.height * relativeScale,\n        display: 'block',\n      }}\n    />\n  );\n}\n","import { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((tiles) => setTiles(tiles[pageIndex]));\n    }\n  }, [tilingProvides]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={scale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["tiles"],"mappings":";;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACS7E,SAAS,QAAQ,EAAE,WAAW,MAAM,KAAK,SAAuB;AACrE,QAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAC3D,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAEjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAE1C,QAAA,gBAAgB,QAAQ,KAAK;AAEnC,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;AAGjB,YAAU,MAAM;AACd,QAAI,KAAK,WAAW,WAAW,OAAO,QAAS;AAC/C,QAAI,CAAC,iBAAkB;AACvB,UAAM,OAAO,iBAAiB,WAAW,EAAE,WAAW,MAAM,KAAK;AAC5D,SAAA,KAAK,CAAC,SAAS;AACZ,YAAA,YAAY,IAAI,gBAAgB,IAAI;AAC1C,aAAO,UAAU;AACjB,aAAO,SAAS;AAAA,OACf,MAAM;AAET,WAAO,MAAM;AACX,UAAI,OAAO,SAAS;AACd,YAAA,gBAAgB,OAAO,OAAO;AAClC,eAAO,UAAU;AAAA,MAAA,OACZ;AACL,aAAK,MAAM;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAEL;AAAA,KACC,CAAC,WAAW,KAAK,IAAI,WAAW,CAAC;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAEI,MAAA,CAAC,IAAY,QAAA;AAEf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,KAAK,WAAW,OAAO,IAAI;AAAA,QACjC,KAAK,KAAK,WAAW,OAAO,IAAI;AAAA,QAChC,OAAO,KAAK,WAAW,KAAK,QAAQ;AAAA,QACpC,QAAQ,KAAK,WAAW,KAAK,SAAS;AAAA,QACtC,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;AClEO,SAAS,YAAY,EAAE,WAAW,OAAO,OAAO,GAAG,SAA4B;AACpF,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB;AACX,aAAA,eAAe,gBAAgB,CAACA,WAAU,SAASA,OAAM,SAAS,CAAC,CAAC;AAAA,IAAA;AAAA,EAC7E,GACC,CAAC,cAAc,CAAC;AAGjB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,+BAAO,IAAI,CAAC,SACX;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,KAAK,OAAO;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,KAAK;AAAA,MAMb;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-tiling.ts","../../src/shared/components/tile-img.tsx","../../src/shared/components/tiling-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","import { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useRef, useState } from '@framework';\n\nimport { useTilingCapability, useTilingPlugin } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const { plugin: tilingPlugin } = useTilingPlugin();\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  const relativeScale = scale / tile.srcScale;\n\n  useEffect(() => {\n    if (!tilingPlugin) return;\n    return tilingPlugin.onRefreshPages((pages) => {\n      if (pages.includes(pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [tilingPlugin]);\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!tilingCapability) return;\n    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });\n    task.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\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  }, [pageIndex, tile.id, refreshTick]); // id includes scale, so unique\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  if (!url) return null; // could render a placeholder\n  return (\n    <img\n      src={url}\n      onLoad={handleImageLoad}\n      style={{\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relativeScale,\n        top: tile.screenRect.origin.y * relativeScale,\n        width: tile.screenRect.size.width * relativeScale,\n        height: tile.screenRect.size.height * relativeScale,\n        display: 'block',\n      }}\n    />\n  );\n}\n","import { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((tiles) => setTiles(tiles[pageIndex]));\n    }\n  }, [tilingProvides]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={scale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["tiles"],"mappings":";;;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACS7E,SAAS,QAAQ,EAAE,WAAW,MAAM,KAAK,SAAuB;AACrE,QAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAC3D,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAEjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAE1C,QAAA,gBAAgB,QAAQ,KAAK;AAEnC,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;AAGjB,YAAU,MAAM;AACd,QAAI,KAAK,WAAW,WAAW,OAAO,QAAS;AAC/C,QAAI,CAAC,iBAAkB;AACvB,UAAM,OAAO,iBAAiB,WAAW,EAAE,WAAW,MAAM,KAAK;AAC5D,SAAA,KAAK,CAAC,SAAS;AACZ,YAAA,YAAY,IAAI,gBAAgB,IAAI;AAC1C,aAAO,UAAU;AACjB,aAAO,SAAS;AAAA,OACf,MAAM;AAET,WAAO,MAAM;AACX,UAAI,OAAO,SAAS;AACd,YAAA,gBAAgB,OAAO,OAAO;AAClC,eAAO,UAAU;AAAA,MAAA,OACZ;AACL,aAAK,MAAM;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAEL;AAAA,KACC,CAAC,WAAW,KAAK,IAAI,WAAW,CAAC;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAEI,MAAA,CAAC,IAAY,QAAA;AAEf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,KAAK,WAAW,OAAO,IAAI;AAAA,QACjC,KAAK,KAAK,WAAW,OAAO,IAAI;AAAA,QAChC,OAAO,KAAK,WAAW,KAAK,QAAQ;AAAA,QACpC,QAAQ,KAAK,WAAW,KAAK,SAAS;AAAA,QACtC,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;AClEO,SAAS,YAAY,EAAE,WAAW,OAAO,OAAO,GAAG,SAA4B;AACpF,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB;AACX,aAAA,eAAe,gBAAgB,CAACA,WAAU,SAASA,OAAM,SAAS,CAAC,CAAC;AAAA,IAAA;AAAA,EAC7E,GACC,CAAC,cAAc,CAAC;AAGjB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,+BAAO,IAAI,CAAC,SACX;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,KAAK,OAAO;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,KAAK;AAAA,MAMb;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-tiling"),t=require("react/jsx-runtime"),i=require("react"),n=require("@embedpdf/models"),s=()=>e.usePlugin(r.TilingPlugin.id),u=()=>e.useCapability(r.TilingPlugin.id);function c({pageIndex:e,tile:r,dpr:c,scale:l}){const{provides:d}=u(),{plugin:o}=s(),[a,g]=i.useState(),p=i.useRef(null),[f,x]=i.useState(0),R=l/r.srcScale;i.useEffect((()=>{if(o)return o.onRefreshPages((r=>{r.includes(e)&&x((e=>e+1))}))}),[o]),i.useEffect((()=>{if("ready"===r.status&&p.current)return;if(!d)return;const t=d.renderTile({pageIndex:e,tile:r,dpr:c});return t.wait((e=>{const r=URL.createObjectURL(e);p.current=r,g(r)}),n.ignore),()=>{p.current?(URL.revokeObjectURL(p.current),p.current=null):t.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[e,r.id,f]);return a?t.jsx("img",{src:a,onLoad:()=>{p.current&&(URL.revokeObjectURL(p.current),p.current=null)},style:{position:"absolute",left:r.screenRect.origin.x*R,top:r.screenRect.origin.y*R,width:r.screenRect.size.width*R,height:r.screenRect.size.height*R,display:"block"}}):null}exports.TilingLayer=function({pageIndex:e,scale:r,style:n,...s}){const{provides:l}=u(),[d,o]=i.useState([]);return i.useEffect((()=>{if(l)return l.onTileRendering((r=>o(r[e])))}),[l]),t.jsx("div",{style:{...n},...s,children:null==d?void 0:d.map((i=>t.jsx(c,{pageIndex:e,tile:i,dpr:window.devicePixelRatio,scale:r},i.id)))})},exports.useTilingCapability=u,exports.useTilingPlugin=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-tiling"),t=require("react/jsx-runtime"),i=require("react"),n=require("@embedpdf/models"),s=()=>e.usePlugin(r.TilingPlugin.id),c=()=>e.useCapability(r.TilingPlugin.id);function l({pageIndex:e,tile:r,dpr:l,scale:u}){const{provides:o}=c(),{plugin:d}=s(),[a,p]=i.useState(),g=i.useRef(null),[f,b]=i.useState(0),x=u/r.srcScale;i.useEffect((()=>{if(d)return d.onRefreshPages((r=>{r.includes(e)&&b((e=>e+1))}))}),[d]),i.useEffect((()=>{if("ready"===r.status&&g.current)return;if(!o)return;const t=o.renderTile({pageIndex:e,tile:r,dpr:l});return t.wait((e=>{const r=URL.createObjectURL(e);g.current=r,p(r)}),n.ignore),()=>{g.current?(URL.revokeObjectURL(g.current),g.current=null):t.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[e,r.id,f]);return a?t.jsx("img",{src:a,onLoad:()=>{g.current&&(URL.revokeObjectURL(g.current),g.current=null)},style:{position:"absolute",left:r.screenRect.origin.x*x,top:r.screenRect.origin.y*x,width:r.screenRect.size.width*x,height:r.screenRect.size.height*x,display:"block"}}):null}exports.TilingLayer=function({pageIndex:e,scale:r,style:n,...s}){const{provides:u}=c(),[o,d]=i.useState([]);return i.useEffect((()=>{if(u)return u.onTileRendering((r=>d(r[e])))}),[u]),t.jsx("div",{style:{...n},...s,children:null==o?void 0:o.map((i=>t.jsx(l,{pageIndex:e,tile:i,dpr:window.devicePixelRatio,scale:r},i.id)))})},exports.useTilingCapability=c,exports.useTilingPlugin=s,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.js

@@ -1,5 +1,6 @@
 import { usePlugin, useCapability } from "@embedpdf/core/react";
 import { TilingPlugin } from "@embedpdf/plugin-tiling";
+export * from "@embedpdf/plugin-tiling";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { ignore, PdfErrorCode } from "@embedpdf/models";

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-tiling.ts","../../src/shared/components/tile-img.tsx","../../src/shared/components/tiling-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","import { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useRef, useState } from '@framework';\n\nimport { useTilingCapability, useTilingPlugin } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const { plugin: tilingPlugin } = useTilingPlugin();\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  const relativeScale = scale / tile.srcScale;\n\n  useEffect(() => {\n    if (!tilingPlugin) return;\n    return tilingPlugin.onRefreshPages((pages) => {\n      if (pages.includes(pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [tilingPlugin]);\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!tilingCapability) return;\n    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });\n    task.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\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  }, [pageIndex, tile.id, refreshTick]); // id includes scale, so unique\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  if (!url) return null; // could render a placeholder\n  return (\n    <img\n      src={url}\n      onLoad={handleImageLoad}\n      style={{\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relativeScale,\n        top: tile.screenRect.origin.y * relativeScale,\n        width: tile.screenRect.size.width * relativeScale,\n        height: tile.screenRect.size.height * relativeScale,\n        display: 'block',\n      }}\n    />\n  );\n}\n","import { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((tiles) => setTiles(tiles[pageIndex]));\n    }\n  }, [tilingProvides]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={scale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["tiles"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACS7E,SAAS,QAAQ,EAAE,WAAW,MAAM,KAAK,SAAuB;AACrE,QAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAC3D,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAEjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAE1C,QAAA,gBAAgB,QAAQ,KAAK;AAEnC,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;AAGjB,YAAU,MAAM;AACd,QAAI,KAAK,WAAW,WAAW,OAAO,QAAS;AAC/C,QAAI,CAAC,iBAAkB;AACvB,UAAM,OAAO,iBAAiB,WAAW,EAAE,WAAW,MAAM,KAAK;AAC5D,SAAA,KAAK,CAAC,SAAS;AACZ,YAAA,YAAY,IAAI,gBAAgB,IAAI;AAC1C,aAAO,UAAU;AACjB,aAAO,SAAS;AAAA,OACf,MAAM;AAET,WAAO,MAAM;AACX,UAAI,OAAO,SAAS;AACd,YAAA,gBAAgB,OAAO,OAAO;AAClC,eAAO,UAAU;AAAA,MAAA,OACZ;AACL,aAAK,MAAM;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAEL;AAAA,KACC,CAAC,WAAW,KAAK,IAAI,WAAW,CAAC;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAEI,MAAA,CAAC,IAAY,QAAA;AAEf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,KAAK,WAAW,OAAO,IAAI;AAAA,QACjC,KAAK,KAAK,WAAW,OAAO,IAAI;AAAA,QAChC,OAAO,KAAK,WAAW,KAAK,QAAQ;AAAA,QACpC,QAAQ,KAAK,WAAW,KAAK,SAAS;AAAA,QACtC,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;AClEO,SAAS,YAAY,EAAE,WAAW,OAAO,OAAO,GAAG,SAA4B;AACpF,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB;AACX,aAAA,eAAe,gBAAgB,CAACA,WAAU,SAASA,OAAM,SAAS,CAAC,CAAC;AAAA,IAAA;AAAA,EAC7E,GACC,CAAC,cAAc,CAAC;AAGjB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,+BAAO,IAAI,CAAC,SACX;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,KAAK,OAAO;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,KAAK;AAAA,MAMb;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-tiling.ts","../../src/shared/components/tile-img.tsx","../../src/shared/components/tiling-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","import { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useRef, useState } from '@framework';\n\nimport { useTilingCapability, useTilingPlugin } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const { plugin: tilingPlugin } = useTilingPlugin();\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  const relativeScale = scale / tile.srcScale;\n\n  useEffect(() => {\n    if (!tilingPlugin) return;\n    return tilingPlugin.onRefreshPages((pages) => {\n      if (pages.includes(pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [tilingPlugin]);\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!tilingCapability) return;\n    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });\n    task.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\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  }, [pageIndex, tile.id, refreshTick]); // id includes scale, so unique\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  if (!url) return null; // could render a placeholder\n  return (\n    <img\n      src={url}\n      onLoad={handleImageLoad}\n      style={{\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relativeScale,\n        top: tile.screenRect.origin.y * relativeScale,\n        width: tile.screenRect.size.width * relativeScale,\n        height: tile.screenRect.size.height * relativeScale,\n        display: 'block',\n      }}\n    />\n  );\n}\n","import { Tile } from '@embedpdf/plugin-tiling';\nimport { useEffect, useState, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  pageIndex: number;\n  scale: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((tiles) => setTiles(tiles[pageIndex]));\n    }\n  }, [tilingProvides]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={scale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["tiles"],"mappings":";;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;ACS7E,SAAS,QAAQ,EAAE,WAAW,MAAM,KAAK,SAAuB;AACrE,QAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAC3D,QAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAEjD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAE1C,QAAA,gBAAgB,QAAQ,KAAK;AAEnC,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;AAGjB,YAAU,MAAM;AACd,QAAI,KAAK,WAAW,WAAW,OAAO,QAAS;AAC/C,QAAI,CAAC,iBAAkB;AACvB,UAAM,OAAO,iBAAiB,WAAW,EAAE,WAAW,MAAM,KAAK;AAC5D,SAAA,KAAK,CAAC,SAAS;AACZ,YAAA,YAAY,IAAI,gBAAgB,IAAI;AAC1C,aAAO,UAAU;AACjB,aAAO,SAAS;AAAA,OACf,MAAM;AAET,WAAO,MAAM;AACX,UAAI,OAAO,SAAS;AACd,YAAA,gBAAgB,OAAO,OAAO;AAClC,eAAO,UAAU;AAAA,MAAA,OACZ;AACL,aAAK,MAAM;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IAEL;AAAA,KACC,CAAC,WAAW,KAAK,IAAI,WAAW,CAAC;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,OAAO,SAAS;AACd,UAAA,gBAAgB,OAAO,OAAO;AAClC,aAAO,UAAU;AAAA,IAAA;AAAA,EAErB;AAEI,MAAA,CAAC,IAAY,QAAA;AAEf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,KAAK,WAAW,OAAO,IAAI;AAAA,QACjC,KAAK,KAAK,WAAW,OAAO,IAAI;AAAA,QAChC,OAAO,KAAK,WAAW,KAAK,QAAQ;AAAA,QACpC,QAAQ,KAAK,WAAW,KAAK,SAAS;AAAA,QACtC,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAEJ;AClEO,SAAS,YAAY,EAAE,WAAW,OAAO,OAAO,GAAG,SAA4B;AACpF,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB;AACX,aAAA,eAAe,gBAAgB,CAACA,WAAU,SAASA,OAAM,SAAS,CAAC,CAAC;AAAA,IAAA;AAAA,EAC7E,GACC,CAAC,cAAc,CAAC;AAGjB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,+BAAO,IAAI,CAAC,SACX;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,KAAK,OAAO;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,KAAK;AAAA,MAMb;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/shared-preact/index.d.ts

@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './components';
+export * from '../lib/index.ts';

package/dist/shared-react/index.d.ts

@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './components';
+export * from '../lib/index.ts';

package/dist/vue/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("@embedpdf/models"),n=require("@embedpdf/core/vue"),t=require("@embedpdf/plugin-tiling"),i=()=>n.useCapability(t.TilingPlugin.id),r=["src"],o=e.defineComponent({__name:"tile-img",props:{pageIndex:{},tile:{},scale:{},dpr:{default:()=>window.devicePixelRatio},style:{type:[Boolean,null,String,Object,Array]}},setup(n){const t=n,{provides:o}=i(),a=e.ref();let s=null,c=null;function u(){s&&(URL.revokeObjectURL(s),s=null)}e.onMounted((()=>{if(!o.value)return;const n=o.value.renderTile({pageIndex:t.pageIndex,tile:e.toRaw(t.tile),dpr:t.dpr});c=n,n.wait((e=>{s=URL.createObjectURL(e),a.value=s,c=null}),l.ignore)})),e.onBeforeUnmount((()=>{c&&!s&&c.abort({code:l.PdfErrorCode.Cancelled,message:"canceled tile render"}),u()}));const d=t.scale/t.tile.srcScale;return(l,n)=>a.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:a.value,style:e.normalizeStyle([{position:"absolute",left:l.tile.screenRect.origin.x*d+"px",top:l.tile.screenRect.origin.y*d+"px",width:l.tile.screenRect.size.width*d+"px",height:l.tile.screenRect.size.height*d+"px",display:"block"},t.style]),onLoad:u},null,44,r)):e.createCommentVNode("",!0)}}),a=e.defineComponent({__name:"tiling-layer",props:{pageIndex:{},scale:{},style:{type:[Boolean,null,String,Object,Array]}},setup(l){const n=l,t=e.ref([]),{provides:r}=i();let a;return e.onMounted((()=>{r.value&&(a=r.value.onTileRendering((e=>{t.value=e[n.pageIndex]??[]})))})),e.onBeforeUnmount((()=>{null==a||a()})),(l,n)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({style:l.style},l.$attrs),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(n=>(e.openBlock(),e.createBlock(o,{key:n.id,pageIndex:l.pageIndex,tile:n,scale:l.scale},null,8,["pageIndex","tile","scale"])))),128))],16))}});exports.TileImg=o,exports.TilingLayer=a,exports.useTilingCapability=i,exports.useTilingPlugin=()=>n.usePlugin(t.TilingPlugin.id);
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("@embedpdf/models"),t=require("@embedpdf/core/vue"),n=require("@embedpdf/plugin-tiling"),r=()=>t.useCapability(n.TilingPlugin.id),i=["src"],o=e.defineComponent({__name:"tile-img",props:{pageIndex:{},tile:{},scale:{},dpr:{default:()=>window.devicePixelRatio},style:{type:[Boolean,null,String,Object,Array]}},setup(t){const n=t,{provides:o}=r(),a=e.ref();let c=null,s=null;function u(){c&&(URL.revokeObjectURL(c),c=null)}e.onMounted((()=>{if(!o.value)return;const t=o.value.renderTile({pageIndex:n.pageIndex,tile:e.toRaw(n.tile),dpr:n.dpr});s=t,t.wait((e=>{c=URL.createObjectURL(e),a.value=c,s=null}),l.ignore)})),e.onBeforeUnmount((()=>{s&&!c&&s.abort({code:l.PdfErrorCode.Cancelled,message:"canceled tile render"}),u()}));const p=e.computed((()=>n.scale/n.tile.srcScale));return(l,t)=>a.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:a.value,style:e.normalizeStyle([{position:"absolute",left:l.tile.screenRect.origin.x*p.value+"px",top:l.tile.screenRect.origin.y*p.value+"px",width:l.tile.screenRect.size.width*p.value+"px",height:l.tile.screenRect.size.height*p.value+"px",display:"block"},n.style]),onLoad:u},null,44,i)):e.createCommentVNode("",!0)}}),a=e.defineComponent({__name:"tiling-layer",props:{pageIndex:{},scale:{},style:{type:[Boolean,null,String,Object,Array]}},setup(l){const t=l,n=e.ref([]),{provides:i}=r();let a;return e.onMounted((()=>{i.value&&(a=i.value.onTileRendering((e=>{n.value=e[t.pageIndex]??[]})))})),e.onBeforeUnmount((()=>{null==a||a()})),(l,t)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({style:l.style},l.$attrs),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(t=>(e.openBlock(),e.createBlock(o,{key:t.id,pageIndex:l.pageIndex,tile:t,scale:l.scale},null,8,["pageIndex","tile","scale"])))),128))],16))}});exports.TileImg=o,exports.TilingLayer=a,exports.useTilingCapability=r,exports.useTilingPlugin=()=>t.usePlugin(n.TilingPlugin.id),Object.keys(n).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-tiling.ts","../../src/vue/components/tile-img.vue","../../src/vue/components/tiling-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\n/** Get the plugin instance itself (e.g. to read config) */\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\n/** Get the *capability* the plugin exposes (renderTile, onTileRendering) */\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\nimport type { StyleValue } from 'vue';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n  style?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => window.devicePixelRatio,\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\n\nconst url = ref<string>();\nlet blobUrl: string | null = null;\nlet renderTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* -------------------------------------------------- */\n/* Helper functions                                   */\n/* -------------------------------------------------- */\nfunction revoke() {\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    blobUrl = null;\n  }\n}\n\nfunction abortCurrentTask() {\n  if (renderTask && !blobUrl) {\n    renderTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled tile render',\n    });\n  }\n}\n\n/* -------------------------------------------------- */\n/* start one render task when component mounts        */\n/* -------------------------------------------------- */\nonMounted(() => {\n  if (!tilingCapability.value) return;\n\n  const task = tilingCapability.value.renderTile({\n    pageIndex: props.pageIndex,\n    tile: toRaw(props.tile),\n    dpr: props.dpr,\n  });\n\n  renderTask = task;\n  task.wait((blob) => {\n    blobUrl = URL.createObjectURL(blob);\n    url.value = blobUrl;\n    renderTask = null; // Task completed\n  }, ignore);\n});\n\n/* -------------------------------------------------- */\n/* cleanup                                            */\n/* -------------------------------------------------- */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n\n/* -------------------------------------------------- */\n/* helpers                                            */\n/* -------------------------------------------------- */\nconst relScale = props.scale / props.tile.srcScale;\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"[\n      {\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relScale + 'px',\n        top: tile.screenRect.origin.y * relScale + 'px',\n        width: tile.screenRect.size.width * relScale + 'px',\n        height: tile.screenRect.size.height * relScale + 'px',\n        display: 'block',\n      },\n      props.style,\n    ]\"\n    @load=\"revoke\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\n  style?: StyleValue;\n}\n\nconst props = defineProps<Props>();\n\nconst tiles = ref<Tile[]>([]);\nconst { provides: tilingProvides } = useTilingCapability();\n\nlet unsubscribe: (() => void) | undefined;\n\nonMounted(() => {\n  if (tilingProvides.value) {\n    unsubscribe = tilingProvides.value.onTileRendering((tilesMap) => {\n      tiles.value = tilesMap[props.pageIndex] ?? [];\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  unsubscribe?.();\n});\n</script>\n\n<template>\n  <div :style=\"style\" v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"scale\"\n    />\n  </div>\n</template>\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","props","__props","provides","tilingCapability","url","ref","blobUrl","renderTask","revoke","URL","revokeObjectURL","onMounted","value","task","renderTile","pageIndex","tile","toRaw","dpr","wait","blob","createObjectURL","ignore","onBeforeUnmount","abort","code","PdfErrorCode","Cancelled","message","relScale","scale","srcScale","_createElementBlock","src","style","_normalizeStyle","screenRect","origin","x","y","size","width","height","onLoad","tiles","tilingProvides","unsubscribe","onTileRendering","tilesMap","_openBlock","_mergeProps","$attrs","_Fragment","Fragment","_renderList","_createBlock","createBlock","TileImg","key","usePlugin"],"mappings":"0MAMaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,8LCUlF,MAAMC,EAAQC,GAINC,SAAUC,GAAqBP,IAEjCQ,EAAMC,EAAAA,MACZ,IAAIC,EAAyB,KACzBC,EAAgD,KAKpD,SAASC,IACHF,IACFG,IAAIC,gBAAgBJ,GACVA,EAAA,KACZ,CAeFK,EAAAA,WAAU,KACJ,IAACR,EAAiBS,MAAO,OAEvB,MAAAC,EAAOV,EAAiBS,MAAME,WAAW,CAC7CC,UAAWf,EAAMe,UACjBC,KAAMC,EAAAA,MAAMjB,EAAMgB,MAClBE,IAAKlB,EAAMkB,MAGAX,EAAAM,EACRA,EAAAM,MAAMC,IACCd,EAAAG,IAAIY,gBAAgBD,GAC9BhB,EAAIQ,MAAQN,EACCC,EAAA,IAAA,GACZe,SAAM,IAMXC,EAAAA,iBAAgB,KA/BVhB,IAAeD,GACjBC,EAAWiB,MAAM,CACfC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,yBA8BNpB,GAAA,IAMT,MAAMqB,EAAW7B,EAAM8B,MAAQ9B,EAAMgB,KAAKe,sBAKhC3B,EAAGQ,qBADXoB,EAAAA,mBAeE,MAAA,OAbCC,IAAK7B,EAAGQ,MACRsB,MAAKC,EAAAA,eAAA,sBAAwDnB,KAAAA,EAAAA,KAAKoB,WAAWC,OAAOC,EAAIT,EAAQ,KAAsBb,IAAAA,EAAAA,KAAKoB,WAAWC,OAAOE,EAAIV,EAAQ,KAAwBb,MAAAA,EAAAA,KAAKoB,WAAWI,KAAKC,MAAQZ,EAAQ,KAAyBb,OAAAA,EAAAA,KAAKoB,WAAWI,KAAKE,OAASb,EAAQ,sBAAkD7B,EAAMkC,QAW7US,OAAMnC,gLChFX,MAAMR,EAAQC,EAER2C,EAAQvC,EAAYA,IAAA,KAClBH,SAAU2C,GAAmBjD,IAEjC,IAAAkD,SAEJnC,EAAAA,WAAU,KACJkC,EAAejC,QACjBkC,EAAcD,EAAejC,MAAMmC,iBAAiBC,IAClDJ,EAAMhC,MAAQoC,EAAShD,EAAMe,YAAc,EAAC,IAC7C,IAILQ,EAAAA,iBAAgB,KACA,MAAAuB,GAAAA,GAAA,YAKdG,cAAAjB,qBAQM,MARNkB,EAAAA,WAQM,CARAhB,MAAOA,EAAAA,OAAeiB,EAAMA,QAAA,kBAChCnB,EAAAA,mBAMEoB,EAAAC,SAAA,KAAAC,EAAAA,WALeV,EAAKhC,OAAbI,kBADTuC,EAAAC,YAMEC,EAAA,CAJCC,IAAK1C,EAAKjB,GACVgB,UAAWA,EAASA,UACpBC,OACAc,MAAOA,EAAKA,4JFrCY,IAAM6B,YAAwB7D,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-tiling.ts","../../src/vue/components/tile-img.vue","../../src/vue/components/tiling-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\n/** Get the plugin instance itself (e.g. to read config) */\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\n/** Get the *capability* the plugin exposes (renderTile, onTileRendering) */\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, toRaw, computed } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\nimport type { StyleValue } from 'vue';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n  style?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => window.devicePixelRatio,\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\n\nconst url = ref<string>();\nlet blobUrl: string | null = null;\nlet renderTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* -------------------------------------------------- */\n/* Helper functions                                   */\n/* -------------------------------------------------- */\nfunction revoke() {\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    blobUrl = null;\n  }\n}\n\nfunction abortCurrentTask() {\n  if (renderTask && !blobUrl) {\n    renderTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled tile render',\n    });\n  }\n}\n\n/* -------------------------------------------------- */\n/* start one render task when component mounts        */\n/* -------------------------------------------------- */\nonMounted(() => {\n  if (!tilingCapability.value) return;\n\n  const task = tilingCapability.value.renderTile({\n    pageIndex: props.pageIndex,\n    tile: toRaw(props.tile),\n    dpr: props.dpr,\n  });\n\n  renderTask = task;\n  task.wait((blob) => {\n    blobUrl = URL.createObjectURL(blob);\n    url.value = blobUrl;\n    renderTask = null; // Task completed\n  }, ignore);\n});\n\n/* -------------------------------------------------- */\n/* cleanup                                            */\n/* -------------------------------------------------- */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n\n/* -------------------------------------------------- */\n/* helpers                                            */\n/* -------------------------------------------------- */\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"[\n      {\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relScale + 'px',\n        top: tile.screenRect.origin.y * relScale + 'px',\n        width: tile.screenRect.size.width * relScale + 'px',\n        height: tile.screenRect.size.height * relScale + 'px',\n        display: 'block',\n      },\n      props.style,\n    ]\"\n    @load=\"revoke\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\n  style?: StyleValue;\n}\n\nconst props = defineProps<Props>();\n\nconst tiles = ref<Tile[]>([]);\nconst { provides: tilingProvides } = useTilingCapability();\n\nlet unsubscribe: (() => void) | undefined;\n\nonMounted(() => {\n  if (tilingProvides.value) {\n    unsubscribe = tilingProvides.value.onTileRendering((tilesMap) => {\n      tiles.value = tilesMap[props.pageIndex] ?? [];\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  unsubscribe?.();\n});\n</script>\n\n<template>\n  <div :style=\"style\" v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"scale\"\n    />\n  </div>\n</template>\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","props","__props","provides","tilingCapability","url","ref","blobUrl","renderTask","revoke","URL","revokeObjectURL","onMounted","value","task","renderTile","pageIndex","tile","toRaw","dpr","wait","blob","createObjectURL","ignore","onBeforeUnmount","abort","code","PdfErrorCode","Cancelled","message","relScale","computed","scale","srcScale","_createElementBlock","src","style","_normalizeStyle","screenRect","origin","x","y","size","width","height","onLoad","tiles","tilingProvides","unsubscribe","onTileRendering","tilesMap","_openBlock","_mergeProps","$attrs","_Fragment","Fragment","_renderList","_createBlock","createBlock","TileImg","key","usePlugin"],"mappings":"0MAMaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,8LCUlF,MAAMC,EAAQC,GAINC,SAAUC,GAAqBP,IAEjCQ,EAAMC,EAAAA,MACZ,IAAIC,EAAyB,KACzBC,EAAgD,KAKpD,SAASC,IACHF,IACFG,IAAIC,gBAAgBJ,GACVA,EAAA,KACZ,CAeFK,EAAAA,WAAU,KACJ,IAACR,EAAiBS,MAAO,OAEvB,MAAAC,EAAOV,EAAiBS,MAAME,WAAW,CAC7CC,UAAWf,EAAMe,UACjBC,KAAMC,EAAAA,MAAMjB,EAAMgB,MAClBE,IAAKlB,EAAMkB,MAGAX,EAAAM,EACRA,EAAAM,MAAMC,IACCd,EAAAG,IAAIY,gBAAgBD,GAC9BhB,EAAIQ,MAAQN,EACCC,EAAA,IAAA,GACZe,SAAM,IAMXC,EAAAA,iBAAgB,KA/BVhB,IAAeD,GACjBC,EAAWiB,MAAM,CACfC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,yBA8BNpB,GAAA,IAMH,MAAAqB,EAAWC,EAAAA,UAAS,IAAM9B,EAAM+B,MAAQ/B,EAAMgB,KAAKgB,wBAK/C5B,EAAGQ,qBADXqB,EAAAA,mBAeE,MAAA,OAbCC,IAAK9B,EAAGQ,MACRuB,MAAKC,EAAAA,eAAA,sBAAwDpB,KAAAA,EAAAA,KAAKqB,WAAWC,OAAOC,EAAIV,EAAQjB,MAAA,KAAsBI,IAAAA,EAAAA,KAAKqB,WAAWC,OAAOE,EAAIX,EAAQjB,MAAA,KAAwBI,MAAAA,EAAAA,KAAKqB,WAAWI,KAAKC,MAAQb,EAAQjB,MAAA,KAAyBI,OAAAA,EAAAA,KAAKqB,WAAWI,KAAKE,OAASd,EAAQjB,MAAA,sBAAkDZ,EAAMmC,QAW7US,OAAMpC,gLChFX,MAAMR,EAAQC,EAER4C,EAAQxC,EAAYA,IAAA,KAClBH,SAAU4C,GAAmBlD,IAEjC,IAAAmD,SAEJpC,EAAAA,WAAU,KACJmC,EAAelC,QACjBmC,EAAcD,EAAelC,MAAMoC,iBAAiBC,IAClDJ,EAAMjC,MAAQqC,EAASjD,EAAMe,YAAc,EAAC,IAC7C,IAILQ,EAAAA,iBAAgB,KACA,MAAAwB,GAAAA,GAAA,YAKdG,cAAAjB,qBAQM,MARNkB,EAAAA,WAQM,CARAhB,MAAOA,EAAAA,OAAeiB,EAAMA,QAAA,kBAChCnB,EAAAA,mBAMEoB,EAAAC,SAAA,KAAAC,EAAAA,WALeV,EAAKjC,OAAbI,kBADTwC,EAAAC,YAMEC,EAAA,CAJCC,IAAK3C,EAAKjB,GACVgB,UAAWA,EAASA,UACpBC,OACAe,MAAOA,EAAKA,4JFrCY,IAAM6B,YAAwB9D,EAAAA,aAAaC"}

package/dist/vue/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './hooks';
+export * from '../lib/index.ts';

package/dist/vue/index.js

@@ -1,7 +1,8 @@
-import { defineComponent, ref, onMounted, toRaw, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock, normalizeStyle, mergeProps, Fragment, renderList, createBlock } from "vue";
+import { defineComponent, ref, onMounted, toRaw, onBeforeUnmount, computed, createElementBlock, createCommentVNode, openBlock, normalizeStyle, mergeProps, Fragment, renderList, createBlock } from "vue";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 import { useCapability, usePlugin } from "@embedpdf/core/vue";
 import { TilingPlugin } from "@embedpdf/plugin-tiling";
+export * from "@embedpdf/plugin-tiling";
 const useTilingPlugin = () => usePlugin(TilingPlugin.id);
 const useTilingCapability = () => useCapability(TilingPlugin.id);
 const _hoisted_1 = ["src"];
@@ -52,7 +53,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       abortCurrentTask();
       revoke();
     });
-    const relScale = props.scale / props.tile.srcScale;
+    const relScale = computed(() => props.scale / props.tile.srcScale);
     return (_ctx, _cache) => {
       return url.value ? (openBlock(), createElementBlock("img", {
         key: 0,
@@ -60,10 +61,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle([
           {
             position: "absolute",
-            left: _ctx.tile.screenRect.origin.x * relScale + "px",
-            top: _ctx.tile.screenRect.origin.y * relScale + "px",
-            width: _ctx.tile.screenRect.size.width * relScale + "px",
-            height: _ctx.tile.screenRect.size.height * relScale + "px",
+            left: _ctx.tile.screenRect.origin.x * relScale.value + "px",
+            top: _ctx.tile.screenRect.origin.y * relScale.value + "px",
+            width: _ctx.tile.screenRect.size.width * relScale.value + "px",
+            height: _ctx.tile.screenRect.size.height * relScale.value + "px",
             display: "block"
           },
           props.style

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-tiling.ts","../../src/vue/components/tile-img.vue","../../src/vue/components/tiling-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\n/** Get the plugin instance itself (e.g. to read config) */\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\n/** Get the *capability* the plugin exposes (renderTile, onTileRendering) */\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\nimport type { StyleValue } from 'vue';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n  style?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => window.devicePixelRatio,\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\n\nconst url = ref<string>();\nlet blobUrl: string | null = null;\nlet renderTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* -------------------------------------------------- */\n/* Helper functions                                   */\n/* -------------------------------------------------- */\nfunction revoke() {\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    blobUrl = null;\n  }\n}\n\nfunction abortCurrentTask() {\n  if (renderTask && !blobUrl) {\n    renderTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled tile render',\n    });\n  }\n}\n\n/* -------------------------------------------------- */\n/* start one render task when component mounts        */\n/* -------------------------------------------------- */\nonMounted(() => {\n  if (!tilingCapability.value) return;\n\n  const task = tilingCapability.value.renderTile({\n    pageIndex: props.pageIndex,\n    tile: toRaw(props.tile),\n    dpr: props.dpr,\n  });\n\n  renderTask = task;\n  task.wait((blob) => {\n    blobUrl = URL.createObjectURL(blob);\n    url.value = blobUrl;\n    renderTask = null; // Task completed\n  }, ignore);\n});\n\n/* -------------------------------------------------- */\n/* cleanup                                            */\n/* -------------------------------------------------- */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n\n/* -------------------------------------------------- */\n/* helpers                                            */\n/* -------------------------------------------------- */\nconst relScale = props.scale / props.tile.srcScale;\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"[\n      {\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relScale + 'px',\n        top: tile.screenRect.origin.y * relScale + 'px',\n        width: tile.screenRect.size.width * relScale + 'px',\n        height: tile.screenRect.size.height * relScale + 'px',\n        display: 'block',\n      },\n      props.style,\n    ]\"\n    @load=\"revoke\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\n  style?: StyleValue;\n}\n\nconst props = defineProps<Props>();\n\nconst tiles = ref<Tile[]>([]);\nconst { provides: tilingProvides } = useTilingCapability();\n\nlet unsubscribe: (() => void) | undefined;\n\nonMounted(() => {\n  if (tilingProvides.value) {\n    unsubscribe = tilingProvides.value.onTileRendering((tilesMap) => {\n      tiles.value = tilesMap[props.pageIndex] ?? [];\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  unsubscribe?.();\n});\n</script>\n\n<template>\n  <div :style=\"style\" v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"scale\"\n    />\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeStyle","tile","_openBlock","_mergeProps","style","$attrs","_Fragment","_renderList","_createBlock","TileImg","pageIndex","scale"],"mappings":";;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AAErE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;;ACUpF,UAAM,QAAQ;AAId,UAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAE3D,UAAM,MAAM,IAAY;AACxB,QAAI,UAAyB;AAC7B,QAAI,aAAgD;AAKpD,aAAS,SAAS;AAChB,UAAI,SAAS;AACX,YAAI,gBAAgB,OAAO;AACjB,kBAAA;AAAA,MAAA;AAAA,IACZ;AAGF,aAAS,mBAAmB;AACtB,UAAA,cAAc,CAAC,SAAS;AAC1B,mBAAW,MAAM;AAAA,UACf,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACH;AAMF,cAAU,MAAM;AACV,UAAA,CAAC,iBAAiB,MAAO;AAEvB,YAAA,OAAO,iBAAiB,MAAM,WAAW;AAAA,QAC7C,WAAW,MAAM;AAAA,QACjB,MAAM,MAAM,MAAM,IAAI;AAAA,QACtB,KAAK,MAAM;AAAA,MAAA,CACZ;AAEY,mBAAA;AACR,WAAA,KAAK,CAAC,SAAS;AACR,kBAAA,IAAI,gBAAgB,IAAI;AAClC,YAAI,QAAQ;AACC,qBAAA;AAAA,SACZ,MAAM;AAAA,IAAA,CACV;AAKD,oBAAgB,MAAM;AACH,uBAAA;AACV,aAAA;AAAA,IAAA,CACR;AAKD,UAAM,WAAW,MAAM,QAAQ,MAAM,KAAK;;aAKhC,IAAG,sBADXA,mBAeE,OAAA;AAAA;QAbC,KAAK,IAAG;AAAA,QACR,OAAKC,eAAA;AAAA;;YAAwDC,MAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,WAAQ;AAAA,YAAsBA,KAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,WAAQ;AAAA,YAAwBA,OAAAA,KAAAA,KAAK,WAAW,KAAK,QAAQ,WAAQ;AAAA,YAAyBA,QAAAA,KAAAA,KAAK,WAAW,KAAK,SAAS,WAAQ;AAAA;;UAAkD,MAAM;AAAA,QAAA;QAW7U,QAAM;AAAA,MAAA;;;;;;;;;;;;AChFX,UAAM,QAAQ;AAER,UAAA,QAAQ,IAAY,EAAE;AAC5B,UAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AAErD,QAAA;AAEJ,cAAU,MAAM;AACd,UAAI,eAAe,OAAO;AACxB,sBAAc,eAAe,MAAM,gBAAgB,CAAC,aAAa;AAC/D,gBAAM,QAAQ,SAAS,MAAM,SAAS,KAAK,CAAC;AAAA,QAAA,CAC7C;AAAA,MAAA;AAAA,IACH,CACD;AAED,oBAAgB,MAAM;AACN;AAAA,IAAA,CACf;;AAIC,aAAAC,UAAA,GAAAH,mBAQM,OARNI,WAQM,EARA,OAAOC,KAAAA,SAAeC,KAAM,MAAA,GAAA;AAAA,0BAChCN,mBAMEO,UAAA,MAAAC,WALe,MAAK,OAAA,CAAb,SAAI;8BADbC,YAMEC,aAAA;AAAA,YAJC,KAAK,KAAK;AAAA,YACV,WAAWC,KAAS;AAAA,YACpB;AAAA,YACA,OAAOC,KAAK;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-tiling.ts","../../src/vue/components/tile-img.vue","../../src/vue/components/tiling-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { TilingPlugin } from '@embedpdf/plugin-tiling';\n\n/** Get the plugin instance itself (e.g. to read config) */\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\n/** Get the *capability* the plugin exposes (renderTile, onTileRendering) */\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount, toRaw, computed } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\nimport type { StyleValue } from 'vue';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n  style?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => window.devicePixelRatio,\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\n\nconst url = ref<string>();\nlet blobUrl: string | null = null;\nlet renderTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* -------------------------------------------------- */\n/* Helper functions                                   */\n/* -------------------------------------------------- */\nfunction revoke() {\n  if (blobUrl) {\n    URL.revokeObjectURL(blobUrl);\n    blobUrl = null;\n  }\n}\n\nfunction abortCurrentTask() {\n  if (renderTask && !blobUrl) {\n    renderTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled tile render',\n    });\n  }\n}\n\n/* -------------------------------------------------- */\n/* start one render task when component mounts        */\n/* -------------------------------------------------- */\nonMounted(() => {\n  if (!tilingCapability.value) return;\n\n  const task = tilingCapability.value.renderTile({\n    pageIndex: props.pageIndex,\n    tile: toRaw(props.tile),\n    dpr: props.dpr,\n  });\n\n  renderTask = task;\n  task.wait((blob) => {\n    blobUrl = URL.createObjectURL(blob);\n    url.value = blobUrl;\n    renderTask = null; // Task completed\n  }, ignore);\n});\n\n/* -------------------------------------------------- */\n/* cleanup                                            */\n/* -------------------------------------------------- */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n\n/* -------------------------------------------------- */\n/* helpers                                            */\n/* -------------------------------------------------- */\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"[\n      {\n        position: 'absolute',\n        left: tile.screenRect.origin.x * relScale + 'px',\n        top: tile.screenRect.origin.y * relScale + 'px',\n        width: tile.screenRect.size.width * relScale + 'px',\n        height: tile.screenRect.size.height * relScale + 'px',\n        display: 'block',\n      },\n      props.style,\n    ]\"\n    @load=\"revoke\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\n  style?: StyleValue;\n}\n\nconst props = defineProps<Props>();\n\nconst tiles = ref<Tile[]>([]);\nconst { provides: tilingProvides } = useTilingCapability();\n\nlet unsubscribe: (() => void) | undefined;\n\nonMounted(() => {\n  if (tilingProvides.value) {\n    unsubscribe = tilingProvides.value.onTileRendering((tilesMap) => {\n      tiles.value = tilesMap[props.pageIndex] ?? [];\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  unsubscribe?.();\n});\n</script>\n\n<template>\n  <div :style=\"style\" v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"scale\"\n    />\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeStyle","tile","_openBlock","_mergeProps","style","$attrs","_Fragment","_renderList","_createBlock","TileImg","pageIndex","scale"],"mappings":";;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AAErE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;;ACUpF,UAAM,QAAQ;AAId,UAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAE3D,UAAM,MAAM,IAAY;AACxB,QAAI,UAAyB;AAC7B,QAAI,aAAgD;AAKpD,aAAS,SAAS;AAChB,UAAI,SAAS;AACX,YAAI,gBAAgB,OAAO;AACjB,kBAAA;AAAA,MAAA;AAAA,IACZ;AAGF,aAAS,mBAAmB;AACtB,UAAA,cAAc,CAAC,SAAS;AAC1B,mBAAW,MAAM;AAAA,UACf,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACH;AAMF,cAAU,MAAM;AACV,UAAA,CAAC,iBAAiB,MAAO;AAEvB,YAAA,OAAO,iBAAiB,MAAM,WAAW;AAAA,QAC7C,WAAW,MAAM;AAAA,QACjB,MAAM,MAAM,MAAM,IAAI;AAAA,QACtB,KAAK,MAAM;AAAA,MAAA,CACZ;AAEY,mBAAA;AACR,WAAA,KAAK,CAAC,SAAS;AACR,kBAAA,IAAI,gBAAgB,IAAI;AAClC,YAAI,QAAQ;AACC,qBAAA;AAAA,SACZ,MAAM;AAAA,IAAA,CACV;AAKD,oBAAgB,MAAM;AACH,uBAAA;AACV,aAAA;AAAA,IAAA,CACR;AAKD,UAAM,WAAW,SAAS,MAAM,MAAM,QAAQ,MAAM,KAAK,QAAQ;;aAKvD,IAAG,sBADXA,mBAeE,OAAA;AAAA;QAbC,KAAK,IAAG;AAAA,QACR,OAAKC,eAAA;AAAA;;YAAwDC,MAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,SAAQ,QAAA;AAAA,YAAsBA,KAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,SAAQ,QAAA;AAAA,YAAwBA,OAAAA,KAAAA,KAAK,WAAW,KAAK,QAAQ,SAAQ,QAAA;AAAA,YAAyBA,QAAAA,KAAAA,KAAK,WAAW,KAAK,SAAS,SAAQ,QAAA;AAAA;;UAAkD,MAAM;AAAA,QAAA;QAW7U,QAAM;AAAA,MAAA;;;;;;;;;;;;AChFX,UAAM,QAAQ;AAER,UAAA,QAAQ,IAAY,EAAE;AAC5B,UAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AAErD,QAAA;AAEJ,cAAU,MAAM;AACd,UAAI,eAAe,OAAO;AACxB,sBAAc,eAAe,MAAM,gBAAgB,CAAC,aAAa;AAC/D,gBAAM,QAAQ,SAAS,MAAM,SAAS,KAAK,CAAC;AAAA,QAAA,CAC7C;AAAA,MAAA;AAAA,IACH,CACD;AAED,oBAAgB,MAAM;AACN;AAAA,IAAA,CACf;;AAIC,aAAAC,UAAA,GAAAH,mBAQM,OARNI,WAQM,EARA,OAAOC,KAAAA,SAAeC,KAAM,MAAA,GAAA;AAAA,0BAChCN,mBAMEO,UAAA,MAAAC,WALe,MAAK,OAAA,CAAb,SAAI;8BADbC,YAMEC,aAAA;AAAA,YAJC,KAAK,KAAK;AAAA,YACV,WAAWC,KAAS;AAAA,YACpB;AAAA,YACA,OAAOC,KAAK;AAAA,UAAA;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-tiling",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -28,26 +28,26 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.0.20"
+    "@embedpdf/models": "1.0.22"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.0.20",
+    "@embedpdf/core": "1.0.22",
     "@embedpdf/build": "1.0.0",
-    "@embedpdf/plugin-render": "1.0.20",
-    "@embedpdf/plugin-viewport": "1.0.20",
-    "@embedpdf/plugin-scroll": "1.0.20"
+    "@embedpdf/plugin-render": "1.0.22",
+    "@embedpdf/plugin-scroll": "1.0.22",
+    "@embedpdf/plugin-viewport": "1.0.22"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
-    "@embedpdf/core": "1.0.20",
-    "@embedpdf/plugin-render": "1.0.20",
-    "@embedpdf/plugin-viewport": "1.0.20",
-    "@embedpdf/plugin-scroll": "1.0.20"
+    "@embedpdf/core": "1.0.22",
+    "@embedpdf/plugin-render": "1.0.22",
+    "@embedpdf/plugin-viewport": "1.0.22",
+    "@embedpdf/plugin-scroll": "1.0.22"
   },
   "files": [
     "dist",