@embedpdf/plugin-tiling 1.4.1 → 2.0.0-next.0

package/dist/lib/tiling-plugin.d.ts

@@ -1,6 +1,6 @@
-import { BasePlugin, CoreState, PluginRegistry, StoreState } from '@embedpdf/core';
+import { BasePlugin, PluginRegistry, RefreshPagesAction } from '@embedpdf/core';
 import { TilingPluginConfig, TilingCapability, TilingState } from './types';
-export declare class TilingPlugin extends BasePlugin<TilingPluginConfig, TilingCapability> {
+export declare class TilingPlugin extends BasePlugin<TilingPluginConfig, TilingCapability, TilingState> {
     static readonly id: "tiling";
     private readonly tileRendering$;
     private config;
@@ -8,11 +8,16 @@ export declare class TilingPlugin extends BasePlugin<TilingPluginConfig, TilingC
     private scrollCapability;
     private viewportCapability;
     constructor(id: string, registry: PluginRegistry, config: TilingPluginConfig);
-    recalculateTiles(pagesToRefresh: number[]): Promise<void>;
+    protected onDocumentLoadingStarted(documentId: string): void;
+    protected onDocumentClosed(documentId: string): void;
+    protected onScaleChanged(documentId: string): void;
+    protected onRotationChanged(documentId: string): void;
+    private recalculateTilesForDocument;
+    recalculateTiles(payload: RefreshPagesAction['payload']): Promise<void>;
     initialize(): Promise<void>;
-    protected onCoreStoreUpdated(oldState: StoreState<CoreState>, newState: StoreState<CoreState>): void;
     private calculateVisibleTiles;
-    onStoreUpdated(_prevState: TilingState, newState: TilingState): void;
+    onStoreUpdated(prevState: TilingState, newState: TilingState): void;
     protected buildCapability(): TilingCapability;
+    private createTilingScope;
     private renderTile;
 }

package/dist/lib/types.d.ts

@@ -23,13 +23,25 @@ export interface Tile {
     row: number;
     id: string;
 }
-export interface TilingState {
+export interface TilingDocumentState {
     visibleTiles: Record<number, Tile[]>;
 }
-export interface TilingCapability {
+export interface TilingState {
+    documents: Record<string, TilingDocumentState>;
+}
+export interface TilingEvent {
+    documentId: string;
+    tiles: Record<number, Tile[]>;
+}
+export interface TilingScope {
     renderTile: (options: RenderTileOptions) => Task<Blob, PdfErrorReason>;
     onTileRendering: EventHook<Record<number, Tile[]>>;
 }
+export interface TilingCapability {
+    renderTile: (options: RenderTileOptions, documentId?: string) => Task<Blob, PdfErrorReason>;
+    forDocument(documentId: string): TilingScope;
+    onTileRendering: EventHook<TilingEvent>;
+}
 export interface CalculateTilesForPageOptions {
     tileSize: number;
     overlapPx: number;

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

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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 } 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\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\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]); // 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":["useTilingCapability","useCapability","TilingPlugin","id","TileImg","pageIndex","tile","dpr","scale","provides","tilingCapability","url","setUrl","useState","urlRef","useRef","relativeScale","srcScale","useEffect","status","current","task","renderTile","wait","blob","objectUrl","URL","createObjectURL","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsxRuntime","jsx","src","onLoad","style","position","left","screenRect","origin","x","top","y","width","size","height","display","props","tilingProvides","tiles","setTiles","onTileRendering","children","map","window","devicePixelRatio","usePlugin"],"mappings":"8QAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,ICS3E,SAASC,GAAQC,UAAEA,EAAAC,KAAWA,EAAMC,IAAAA,EAAAC,MAAKA,IAC9C,MAAQC,SAAUC,GAAqBV,KAEhCW,EAAKC,GAAUC,aAChBC,EAASC,SAAsB,MAE/BC,EAAgBR,EAAQF,EAAKW,SAGnCC,EAAAA,WAAU,KACR,GAAoB,UAAhBZ,EAAKa,QAAsBL,EAAOM,QAAS,OAC/C,IAAKV,EAAkB,OACvB,MAAMW,EAAOX,EAAiBY,WAAW,CAAEjB,YAAWC,OAAMC,QAO5D,OANKc,EAAAE,MAAMC,IACH,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtCV,EAAOM,QAAUK,EACjBb,EAAOa,EAAS,GACfG,UAEI,KACDd,EAAOM,SACLM,IAAAG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,MAEjBC,EAAKS,MAAM,CACTC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,GACC,CAAC7B,EAAWC,EAAKH,KAShB,OAACQ,EAEHwB,EAAAC,IAAC,MAAA,CACCC,IAAK1B,EACL2B,OAXoB,KAClBxB,EAAOM,UACLM,IAAAG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,KAAA,EASjBmB,MAAO,CACLC,SAAU,WACVC,KAAMnC,EAAKoC,WAAWC,OAAOC,EAAI5B,EACjC6B,IAAKvC,EAAKoC,WAAWC,OAAOG,EAAI9B,EAChC+B,MAAOzC,EAAKoC,WAAWM,KAAKD,MAAQ/B,EACpCiC,OAAQ3C,EAAKoC,WAAWM,KAAKC,OAASjC,EACtCkC,QAAS,WAXE,IAenB,qBCvDO,UAAqB7C,UAAEA,EAAAG,MAAWA,QAAO+B,KAAUY,IACxD,MAAQ1C,SAAU2C,GAAmBpD,KAC9BqD,EAAOC,GAAYzC,EAAAA,SAAiB,IASzC,OAPFK,EAAAA,WAAU,KACR,GAAIkC,EACK,OAAAA,EAAeG,iBAAiBF,GAAUC,EAASD,EAAMhD,KAAW,GAE5E,CAAC+C,IAGFjB,EAAAC,IAAC,MAAA,CACCG,MAAO,IACFA,MAEDY,EAEHK,SAAA,MAAAH,OAAA,EAAAA,EAAOI,KAAKnD,GACX6B,EAAAC,IAAChC,EAAA,CAECC,YACAC,OACAC,IAAKmD,OAAOC,iBACZnD,SAJKF,EAAKH,OASpB,wDFrC+B,IAAMyD,YAAwB1D,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","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, useMemo, useRef, useState } from '@framework';\n\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const scope = useMemo(\n    () => tilingCapability?.forDocument(documentId),\n    [tilingCapability, documentId],\n  );\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!scope) return;\n    const task = scope.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  }, [scope, pageIndex, tile.id]); // 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, useMemo } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  style,\n  ...props\n}: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const documentState = useDocumentState(documentId);\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((event) => {\n        if (event.documentId === documentId) {\n          setTiles(event.tiles[pageIndex] ?? []);\n        }\n      });\n    }\n  }, [tilingProvides, documentId, pageIndex]);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          documentId={documentId}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={actualScale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","TileImg","documentId","pageIndex","tile","dpr","scale","provides","tilingCapability","scope","useMemo","forDocument","url","setUrl","useState","urlRef","useRef","relativeScale","srcScale","useEffect","status","current","task","renderTile","wait","blob","objectUrl","URL","createObjectURL","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","src","onLoad","style","position","left","screenRect","origin","x","top","y","width","size","height","display","scaleOverride","props","tilingProvides","documentState","useDocumentState","tiles","setTiles","onTileRendering","event","actualScale","children","map","window","devicePixelRatio","usePlugin"],"mappings":"8QAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,ICU3E,SAASC,GAAQC,WAAEA,EAAAC,UAAYA,OAAWC,EAAAC,IAAMA,EAAAC,MAAKA,IAC1D,MAAQC,SAAUC,GAAqBX,IACjCY,EAAQC,EAAAA,QACZ,UAAMF,WAAkBG,YAAYT,GACpC,CAACM,EAAkBN,KAGdU,EAAKC,GAAUC,aAChBC,EAASC,EAAAA,OAAsB,MAE/BC,EAAgBX,EAAQF,EAAKc,SAGnCC,EAAAA,UAAU,KACR,GAAoB,UAAhBf,EAAKgB,QAAsBL,EAAOM,QAAS,OAC/C,IAAKZ,EAAO,OACZ,MAAMa,EAAOb,EAAMc,WAAW,CAAEpB,YAAWC,OAAMC,QAOjD,OANAiB,EAAKE,KAAMC,IACT,MAAMC,EAAYC,IAAIC,gBAAgBH,GACtCV,EAAOM,QAAUK,EACjBb,EAAOa,IACNG,EAAAA,QAEI,KACDd,EAAOM,SACTM,IAAIG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,MAEjBC,EAAKS,MAAM,CACTC,KAAMC,EAAAA,aAAaC,UACnBC,QAAS,2BAId,CAAC1B,EAAON,EAAWC,EAAKJ,KAS3B,OAAKY,EAEHwB,EAAAA,IAAC,MAAA,CACCC,IAAKzB,EACL0B,OAXoB,KAClBvB,EAAOM,UACTM,IAAIG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,OASjBkB,MAAO,CACLC,SAAU,WACVC,KAAMrC,EAAKsC,WAAWC,OAAOC,EAAI3B,EACjC4B,IAAKzC,EAAKsC,WAAWC,OAAOG,EAAI7B,EAChC8B,MAAO3C,EAAKsC,WAAWM,KAAKD,MAAQ9B,EACpCgC,OAAQ7C,EAAKsC,WAAWM,KAAKC,OAAShC,EACtCiC,QAAS,WAXE,IAenB,qBC1DO,UAAqBhD,WAC1BA,EAAAC,UACAA,EACAG,MAAO6C,EAAAZ,MACPA,KACGa,IAEH,MAAQ7C,SAAU8C,GAAmBxD,IAC/ByD,EAAgBC,EAAAA,iBAAiBrD,IAChCsD,EAAOC,GAAY3C,EAAAA,SAAiB,IAE3CK,EAAAA,UAAU,KACR,GAAIkC,EACF,OAAOA,EAAeK,gBAAiBC,IACjCA,EAAMzD,aAAeA,GACvBuD,EAASE,EAAMH,MAAMrD,IAAc,OAIxC,CAACkD,EAAgBnD,EAAYC,IAEhC,MAAMyD,EAAclD,EAAAA,QAAQ,SACJ,IAAlByC,EAAoCA,SACjCG,WAAehD,QAAS,EAC9B,CAAC6C,EAAe,MAAAG,OAAA,EAAAA,EAAehD,QAElC,OACE8B,EAAAA,IAAC,MAAA,CACCG,MAAO,IACFA,MAEDa,EAEHS,SAAA,MAAAL,OAAA,EAAAA,EAAOM,IAAK1D,GACXgC,EAAAA,IAACnC,EAAA,CAECC,aACAC,YACAC,OACAC,IAAK0D,OAAOC,iBACZ1D,MAAOsD,GALFxD,EAAKJ,MAUpB,wDFxD+B,IAAMiE,YAAwBlE,EAAAA,aAAaC"}

package/dist/preact/index.js

@@ -1,21 +1,25 @@
-import { usePlugin, useCapability } from "@embedpdf/core/preact";
+import { usePlugin, useCapability, useDocumentState } 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";
+import { useMemo, useState, useRef, useEffect } from "preact/hooks";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 const useTilingPlugin = () => usePlugin(TilingPlugin.id);
 const useTilingCapability = () => useCapability(TilingPlugin.id);
-function TileImg({ pageIndex, tile, dpr, scale }) {
+function TileImg({ documentId, pageIndex, tile, dpr, scale }) {
   const { provides: tilingCapability } = useTilingCapability();
+  const scope = useMemo(
+    () => tilingCapability == null ? void 0 : tilingCapability.forDocument(documentId),
+    [tilingCapability, documentId]
+  );
   const [url, setUrl] = useState();
   const urlRef = useRef(null);
   const relativeScale = scale / tile.srcScale;
   useEffect(() => {
     if (tile.status === "ready" && urlRef.current) return;
-    if (!tilingCapability) return;
-    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });
+    if (!scope) return;
+    const task = scope.renderTile({ pageIndex, tile, dpr });
     task.wait((blob) => {
       const objectUrl = URL.createObjectURL(blob);
       urlRef.current = objectUrl;
@@ -32,7 +36,7 @@ function TileImg({ pageIndex, tile, dpr, scale }) {
         });
       }
     };
-  }, [pageIndex, tile.id]);
+  }, [scope, pageIndex, tile.id]);
   const handleImageLoad = () => {
     if (urlRef.current) {
       URL.revokeObjectURL(urlRef.current);
@@ -56,14 +60,29 @@ function TileImg({ pageIndex, tile, dpr, scale }) {
     }
   );
 }
-function TilingLayer({ pageIndex, scale, style, ...props }) {
+function TilingLayer({
+  documentId,
+  pageIndex,
+  scale: scaleOverride,
+  style,
+  ...props
+}) {
   const { provides: tilingProvides } = useTilingCapability();
+  const documentState = useDocumentState(documentId);
   const [tiles, setTiles] = useState([]);
   useEffect(() => {
     if (tilingProvides) {
-      return tilingProvides.onTileRendering((tiles2) => setTiles(tiles2[pageIndex]));
+      return tilingProvides.onTileRendering((event) => {
+        if (event.documentId === documentId) {
+          setTiles(event.tiles[pageIndex] ?? []);
+        }
+      });
     }
-  }, [tilingProvides]);
+  }, [tilingProvides, documentId, pageIndex]);
+  const actualScale = useMemo(() => {
+    if (scaleOverride !== void 0) return scaleOverride;
+    return (documentState == null ? void 0 : documentState.scale) ?? 1;
+  }, [scaleOverride, documentState == null ? void 0 : documentState.scale]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -74,10 +93,11 @@ function TilingLayer({ pageIndex, scale, style, ...props }) {
       children: tiles == null ? void 0 : tiles.map((tile) => /* @__PURE__ */ jsx(
         TileImg,
         {
+          documentId,
           pageIndex,
           tile,
           dpr: window.devicePixelRatio,
-          scale
+          scale: actualScale
         },
         tile.id
       ))

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 } 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\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\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]); // 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;AAE3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AAEnC,QAAA,gBAAgB,QAAQ,KAAK;AAGnC,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,EACC,GAAA,CAAC,WAAW,KAAK,EAAE,CAAC;AAEvB,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;ACvDO,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, useMemo, useRef, useState } from '@framework';\n\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const scope = useMemo(\n    () => tilingCapability?.forDocument(documentId),\n    [tilingCapability, documentId],\n  );\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!scope) return;\n    const task = scope.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  }, [scope, pageIndex, tile.id]); // 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, useMemo } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  style,\n  ...props\n}: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const documentState = useDocumentState(documentId);\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((event) => {\n        if (event.documentId === documentId) {\n          setTiles(event.tiles[pageIndex] ?? []);\n        }\n      });\n    }\n  }, [tilingProvides, documentId, pageIndex]);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          documentId={documentId}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={actualScale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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 } 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\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\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]); // 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":["useTilingCapability","useCapability","TilingPlugin","id","TileImg","pageIndex","tile","dpr","scale","provides","tilingCapability","url","setUrl","useState","urlRef","useRef","relativeScale","srcScale","useEffect","status","current","task","renderTile","wait","blob","objectUrl","URL","createObjectURL","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsxRuntime","jsx","src","onLoad","style","position","left","screenRect","origin","x","top","y","width","size","height","display","props","tilingProvides","tiles","setTiles","onTileRendering","children","map","window","devicePixelRatio","usePlugin"],"mappings":"6OAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,ICS3E,SAASC,GAAQC,UAAEA,EAAAC,KAAWA,EAAMC,IAAAA,EAAAC,MAAKA,IAC9C,MAAQC,SAAUC,GAAqBV,KAEhCW,EAAKC,GAAUC,aAChBC,EAASC,SAAsB,MAE/BC,EAAgBR,EAAQF,EAAKW,SAGnCC,EAAAA,WAAU,KACR,GAAoB,UAAhBZ,EAAKa,QAAsBL,EAAOM,QAAS,OAC/C,IAAKV,EAAkB,OACvB,MAAMW,EAAOX,EAAiBY,WAAW,CAAEjB,YAAWC,OAAMC,QAO5D,OANKc,EAAAE,MAAMC,IACH,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtCV,EAAOM,QAAUK,EACjBb,EAAOa,EAAS,GACfG,UAEI,KACDd,EAAOM,SACLM,IAAAG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,MAEjBC,EAAKS,MAAM,CACTC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,GACC,CAAC7B,EAAWC,EAAKH,KAShB,OAACQ,EAEHwB,EAAAC,IAAC,MAAA,CACCC,IAAK1B,EACL2B,OAXoB,KAClBxB,EAAOM,UACLM,IAAAG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,KAAA,EASjBmB,MAAO,CACLC,SAAU,WACVC,KAAMnC,EAAKoC,WAAWC,OAAOC,EAAI5B,EACjC6B,IAAKvC,EAAKoC,WAAWC,OAAOG,EAAI9B,EAChC+B,MAAOzC,EAAKoC,WAAWM,KAAKD,MAAQ/B,EACpCiC,OAAQ3C,EAAKoC,WAAWM,KAAKC,OAASjC,EACtCkC,QAAS,WAXE,IAenB,qBCvDO,UAAqB7C,UAAEA,EAAAG,MAAWA,QAAO+B,KAAUY,IACxD,MAAQ1C,SAAU2C,GAAmBpD,KAC9BqD,EAAOC,GAAYzC,EAAAA,SAAiB,IASzC,OAPFK,EAAAA,WAAU,KACR,GAAIkC,EACK,OAAAA,EAAeG,iBAAiBF,GAAUC,EAASD,EAAMhD,KAAW,GAE5E,CAAC+C,IAGFjB,EAAAC,IAAC,MAAA,CACCG,MAAO,IACFA,MAEDY,EAEHK,SAAA,MAAAH,OAAA,EAAAA,EAAOI,KAAKnD,GACX6B,EAAAC,IAAChC,EAAA,CAECC,YACAC,OACAC,IAAKmD,OAAOC,iBACZnD,SAJKF,EAAKH,OASpB,wDFrC+B,IAAMyD,YAAwB1D,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","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, useMemo, useRef, useState } from '@framework';\n\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const scope = useMemo(\n    () => tilingCapability?.forDocument(documentId),\n    [tilingCapability, documentId],\n  );\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!scope) return;\n    const task = scope.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  }, [scope, pageIndex, tile.id]); // 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, useMemo } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  style,\n  ...props\n}: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const documentState = useDocumentState(documentId);\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((event) => {\n        if (event.documentId === documentId) {\n          setTiles(event.tiles[pageIndex] ?? []);\n        }\n      });\n    }\n  }, [tilingProvides, documentId, pageIndex]);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          documentId={documentId}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={actualScale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","TileImg","documentId","pageIndex","tile","dpr","scale","provides","tilingCapability","scope","useMemo","forDocument","url","setUrl","useState","urlRef","useRef","relativeScale","srcScale","useEffect","status","current","task","renderTile","wait","blob","objectUrl","URL","createObjectURL","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","src","onLoad","style","position","left","screenRect","origin","x","top","y","width","size","height","display","scaleOverride","props","tilingProvides","documentState","useDocumentState","tiles","setTiles","onTileRendering","event","actualScale","children","map","window","devicePixelRatio","usePlugin"],"mappings":"6OAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,ICU3E,SAASC,GAAQC,WAAEA,EAAAC,UAAYA,OAAWC,EAAAC,IAAMA,EAAAC,MAAKA,IAC1D,MAAQC,SAAUC,GAAqBX,IACjCY,EAAQC,EAAAA,QACZ,UAAMF,WAAkBG,YAAYT,GACpC,CAACM,EAAkBN,KAGdU,EAAKC,GAAUC,aAChBC,EAASC,EAAAA,OAAsB,MAE/BC,EAAgBX,EAAQF,EAAKc,SAGnCC,EAAAA,UAAU,KACR,GAAoB,UAAhBf,EAAKgB,QAAsBL,EAAOM,QAAS,OAC/C,IAAKZ,EAAO,OACZ,MAAMa,EAAOb,EAAMc,WAAW,CAAEpB,YAAWC,OAAMC,QAOjD,OANAiB,EAAKE,KAAMC,IACT,MAAMC,EAAYC,IAAIC,gBAAgBH,GACtCV,EAAOM,QAAUK,EACjBb,EAAOa,IACNG,EAAAA,QAEI,KACDd,EAAOM,SACTM,IAAIG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,MAEjBC,EAAKS,MAAM,CACTC,KAAMC,EAAAA,aAAaC,UACnBC,QAAS,2BAId,CAAC1B,EAAON,EAAWC,EAAKJ,KAS3B,OAAKY,EAEHwB,EAAAA,IAAC,MAAA,CACCC,IAAKzB,EACL0B,OAXoB,KAClBvB,EAAOM,UACTM,IAAIG,gBAAgBf,EAAOM,SAC3BN,EAAOM,QAAU,OASjBkB,MAAO,CACLC,SAAU,WACVC,KAAMrC,EAAKsC,WAAWC,OAAOC,EAAI3B,EACjC4B,IAAKzC,EAAKsC,WAAWC,OAAOG,EAAI7B,EAChC8B,MAAO3C,EAAKsC,WAAWM,KAAKD,MAAQ9B,EACpCgC,OAAQ7C,EAAKsC,WAAWM,KAAKC,OAAShC,EACtCiC,QAAS,WAXE,IAenB,qBC1DO,UAAqBhD,WAC1BA,EAAAC,UACAA,EACAG,MAAO6C,EAAAZ,MACPA,KACGa,IAEH,MAAQ7C,SAAU8C,GAAmBxD,IAC/ByD,EAAgBC,EAAAA,iBAAiBrD,IAChCsD,EAAOC,GAAY3C,EAAAA,SAAiB,IAE3CK,EAAAA,UAAU,KACR,GAAIkC,EACF,OAAOA,EAAeK,gBAAiBC,IACjCA,EAAMzD,aAAeA,GACvBuD,EAASE,EAAMH,MAAMrD,IAAc,OAIxC,CAACkD,EAAgBnD,EAAYC,IAEhC,MAAMyD,EAAclD,EAAAA,QAAQ,SACJ,IAAlByC,EAAoCA,SACjCG,WAAehD,QAAS,EAC9B,CAAC6C,EAAe,MAAAG,OAAA,EAAAA,EAAehD,QAElC,OACE8B,EAAAA,IAAC,MAAA,CACCG,MAAO,IACFA,MAEDa,EAEHS,SAAA,MAAAL,OAAA,EAAAA,EAAOM,IAAK1D,GACXgC,EAAAA,IAACnC,EAAA,CAECC,aACAC,YACAC,OACAC,IAAK0D,OAAOC,iBACZ1D,MAAOsD,GALFxD,EAAKJ,MAUpB,wDFxD+B,IAAMiE,YAAwBlE,EAAAA,aAAaC"}

package/dist/react/index.js

@@ -1,20 +1,24 @@
-import { usePlugin, useCapability } from "@embedpdf/core/react";
+import { usePlugin, useCapability, useDocumentState } 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 { useMemo, useState, useRef, useEffect } from "react";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 const useTilingPlugin = () => usePlugin(TilingPlugin.id);
 const useTilingCapability = () => useCapability(TilingPlugin.id);
-function TileImg({ pageIndex, tile, dpr, scale }) {
+function TileImg({ documentId, pageIndex, tile, dpr, scale }) {
   const { provides: tilingCapability } = useTilingCapability();
+  const scope = useMemo(
+    () => tilingCapability == null ? void 0 : tilingCapability.forDocument(documentId),
+    [tilingCapability, documentId]
+  );
   const [url, setUrl] = useState();
   const urlRef = useRef(null);
   const relativeScale = scale / tile.srcScale;
   useEffect(() => {
     if (tile.status === "ready" && urlRef.current) return;
-    if (!tilingCapability) return;
-    const task = tilingCapability.renderTile({ pageIndex, tile, dpr });
+    if (!scope) return;
+    const task = scope.renderTile({ pageIndex, tile, dpr });
     task.wait((blob) => {
       const objectUrl = URL.createObjectURL(blob);
       urlRef.current = objectUrl;
@@ -31,7 +35,7 @@ function TileImg({ pageIndex, tile, dpr, scale }) {
         });
       }
     };
-  }, [pageIndex, tile.id]);
+  }, [scope, pageIndex, tile.id]);
   const handleImageLoad = () => {
     if (urlRef.current) {
       URL.revokeObjectURL(urlRef.current);
@@ -55,14 +59,29 @@ function TileImg({ pageIndex, tile, dpr, scale }) {
     }
   );
 }
-function TilingLayer({ pageIndex, scale, style, ...props }) {
+function TilingLayer({
+  documentId,
+  pageIndex,
+  scale: scaleOverride,
+  style,
+  ...props
+}) {
   const { provides: tilingProvides } = useTilingCapability();
+  const documentState = useDocumentState(documentId);
   const [tiles, setTiles] = useState([]);
   useEffect(() => {
     if (tilingProvides) {
-      return tilingProvides.onTileRendering((tiles2) => setTiles(tiles2[pageIndex]));
+      return tilingProvides.onTileRendering((event) => {
+        if (event.documentId === documentId) {
+          setTiles(event.tiles[pageIndex] ?? []);
+        }
+      });
     }
-  }, [tilingProvides]);
+  }, [tilingProvides, documentId, pageIndex]);
+  const actualScale = useMemo(() => {
+    if (scaleOverride !== void 0) return scaleOverride;
+    return (documentState == null ? void 0 : documentState.scale) ?? 1;
+  }, [scaleOverride, documentState == null ? void 0 : documentState.scale]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -73,10 +92,11 @@ function TilingLayer({ pageIndex, scale, style, ...props }) {
       children: tiles == null ? void 0 : tiles.map((tile) => /* @__PURE__ */ jsx(
         TileImg,
         {
+          documentId,
           pageIndex,
           tile,
           dpr: window.devicePixelRatio,
-          scale
+          scale: actualScale
         },
         tile.id
       ))

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 } 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\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\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]); // 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;AAE3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACjC,QAAA,SAAS,OAAsB,IAAI;AAEnC,QAAA,gBAAgB,QAAQ,KAAK;AAGnC,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,EACC,GAAA,CAAC,WAAW,KAAK,EAAE,CAAC;AAEvB,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;ACvDO,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, useMemo, useRef, useState } from '@framework';\n\nimport { useTilingCapability } from '../hooks/use-tiling';\n\ninterface TileImgProps {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  dpr: number;\n  scale: number;\n}\n\nexport function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps) {\n  const { provides: tilingCapability } = useTilingCapability();\n  const scope = useMemo(\n    () => tilingCapability?.forDocument(documentId),\n    [tilingCapability, documentId],\n  );\n\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n\n  const relativeScale = scale / tile.srcScale;\n\n  /* kick off render exactly once per tile */\n  useEffect(() => {\n    if (tile.status === 'ready' && urlRef.current) return; // already done\n    if (!scope) return;\n    const task = scope.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  }, [scope, pageIndex, tile.id]); // 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, useMemo } from '@framework';\n\nimport { TileImg } from './tile-img';\nimport { useTilingCapability } from '../hooks/use-tiling';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ntype TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  style?: CSSProperties;\n};\n\nexport function TilingLayer({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  style,\n  ...props\n}: TilingLayoutProps) {\n  const { provides: tilingProvides } = useTilingCapability();\n  const documentState = useDocumentState(documentId);\n  const [tiles, setTiles] = useState<Tile[]>([]);\n\n  useEffect(() => {\n    if (tilingProvides) {\n      return tilingProvides.onTileRendering((event) => {\n        if (event.documentId === documentId) {\n          setTiles(event.tiles[pageIndex] ?? []);\n        }\n      });\n    }\n  }, [tilingProvides, documentId, pageIndex]);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  return (\n    <div\n      style={{\n        ...style,\n      }}\n      {...props}\n    >\n      {tiles?.map((tile) => (\n        <TileImg\n          key={tile.id}\n          documentId={documentId}\n          pageIndex={pageIndex}\n          tile={tile}\n          dpr={window.devicePixelRatio}\n          scale={actualScale}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/shared/components/tile-img.d.ts

@@ -1,9 +1,10 @@
 import { Tile } from '../../index.ts';
 interface TileImgProps {
+    documentId: string;
     pageIndex: number;
     tile: Tile;
     dpr: number;
     scale: number;
 }
-export declare function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/shared/components/tiling-layer.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes, CSSProperties } from '../../react/adapter.ts';
 type TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    documentId: string;
     pageIndex: number;
-    scale: number;
+    scale?: number;
     style?: CSSProperties;
 };
-export declare function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TilingLayer({ documentId, pageIndex, scale: scaleOverride, style, ...props }: TilingLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shared-preact/components/tile-img.d.ts

@@ -1,9 +1,10 @@
 import { Tile } from '../../lib/index.ts';
 interface TileImgProps {
+    documentId: string;
     pageIndex: number;
     tile: Tile;
     dpr: number;
     scale: number;
 }
-export declare function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps): import("preact").JSX.Element | null;
+export declare function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps): import("preact").JSX.Element | null;
 export {};

package/dist/shared-preact/components/tiling-layer.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes, CSSProperties } from '../../preact/adapter.ts';
 type TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    documentId: string;
     pageIndex: number;
-    scale: number;
+    scale?: number;
     style?: CSSProperties;
 };
-export declare function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps): import("preact").JSX.Element;
+export declare function TilingLayer({ documentId, pageIndex, scale: scaleOverride, style, ...props }: TilingLayoutProps): import("preact").JSX.Element;
 export {};

package/dist/shared-react/components/tile-img.d.ts

@@ -1,9 +1,10 @@
 import { Tile } from '../../lib/index.ts';
 interface TileImgProps {
+    documentId: string;
     pageIndex: number;
     tile: Tile;
     dpr: number;
     scale: number;
 }
-export declare function TileImg({ pageIndex, tile, dpr, scale }: TileImgProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TileImg({ documentId, pageIndex, tile, dpr, scale }: TileImgProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/shared-react/components/tiling-layer.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes, CSSProperties } from '../../react/adapter.ts';
 type TilingLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    documentId: string;
     pageIndex: number;
-    scale: number;
+    scale?: number;
     style?: CSSProperties;
 };
-export declare function TilingLayer({ pageIndex, scale, style, ...props }: TilingLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function TilingLayer({ documentId, pageIndex, scale: scaleOverride, style, ...props }: TilingLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/svelte/components/TileImg.svelte.d.ts

@@ -1,5 +1,6 @@
 import { Tile } from '../../lib/index.ts';
 interface TileImgProps {
+    documentId: string;
     pageIndex: number;
     tile: Tile;
     dpr: number;

package/dist/svelte/components/TilingLayer.svelte.d.ts

@@ -1,7 +1,8 @@
 import { HTMLAttributes } from 'svelte/elements';
 type TilingLayoutProps = HTMLAttributes<HTMLDivElement> & {
+    documentId: string;
     pageIndex: number;
-    scale: number;
+    scale?: number;
     class?: string;
 };
 declare const TilingLayer: import('svelte', { with: { "resolution-mode": "import" } }).Component<TilingLayoutProps, {}, "">;

package/dist/svelte/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/plugin-tiling"),r=require("@embedpdf/core/svelte"),i=require("@embedpdf/models"),n=require("svelte");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const s=l(e),o=()=>r.useCapability(t.TilingPlugin.id);var c=s.from_html('<img alt=""/>');function a(e,t){s.push(t,!0);const r=o();let l=s.state(""),a=null;const d=s.derived((()=>t.tile.id)),g=s.derived((()=>t.tile.srcScale)),p=s.derived((()=>t.tile.screenRect)),u=s.derived((()=>t.scale/s.get(g)));s.user_effect((()=>{var e;s.get(d);const o=t.pageIndex;if(a)return;if(!r)return;const c=n.untrack((()=>{return e=t.tile,{...e,pageRect:{origin:{x:e.pageRect.origin.x,y:e.pageRect.origin.y},size:{width:e.pageRect.size.width,height:e.pageRect.size.height}},screenRect:{origin:{x:e.screenRect.origin.x,y:e.screenRect.origin.y},size:{width:e.screenRect.size.width,height:e.screenRect.size.height}}};var e})),g=null==(e=r.provides)?void 0:e.renderTile({pageIndex:o,tile:c,dpr:t.dpr});return null==g||g.wait((e=>{const t=URL.createObjectURL(e);a=t,s.set(l,t,!0)}),i.ignore),()=>{a?(URL.revokeObjectURL(a),a=null):null==g||g.abort({code:i.PdfErrorCode.Cancelled,message:"canceled render task"})}}));const f=()=>{a&&(URL.revokeObjectURL(a),a=null)};var v=s.comment(),h=s.first_child(v),b=e=>{var t=c();let r;s.template_effect((e=>{s.set_attribute(t,"src",s.get(l)),r=s.set_style(t,"",r,e)}),[()=>({position:"absolute",left:s.get(p).origin.x*s.get(u)+"px",top:s.get(p).origin.y*s.get(u)+"px",width:s.get(p).size.width*s.get(u)+"px",height:s.get(p).size.height*s.get(u)+"px",display:"block"})]),s.event("load",t,f),s.replay_events(t),s.append(e,t)};s.if(h,(e=>{s.get(l)&&e(b)})),s.append(e,v),s.pop()}var d=s.from_html("<div></div>");exports.TileImg=a,exports.TilingLayer=function(e,t){s.push(t,!0);let i=s.rest_props(t,["$$slots","$$events","$$legacy","pageIndex","scale","class"]);const n=o();let l=s.state(s.proxy([]));const c=r.useCoreState();s.user_effect((()=>{if(n.provides)return n.provides.onTileRendering((e=>{s.set(l,e[t.pageIndex]??[],!0)}))}));var g=d();s.attribute_effect(g,(()=>({class:t.class,...i}))),s.each(g,21,(()=>s.get(l)),(e=>{var t,r;return`${null==(r=null==(t=c.coreState)?void 0:t.document)?void 0:r.id}-${e.id}`}),((e,r)=>{a(e,{get pageIndex(){return t.pageIndex},get tile(){return s.get(r)},dpr:window.devicePixelRatio,get scale(){return t.scale}})})),s.reset(g),s.append(e,g),s.pop()},exports.useTilingCapability=o,exports.useTilingPlugin=()=>r.usePlugin(t.TilingPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/plugin-tiling"),r=require("@embedpdf/core/svelte"),i=require("@embedpdf/models"),n=require("svelte");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const l=s(e),o=()=>r.useCapability(t.TilingPlugin.id);var c=l.from_html('<img alt=""/>');function d(e,t){l.push(t,!0);const r=o(),s=l.derived(()=>{var e;return(null==(e=r.provides)?void 0:e.forDocument(t.documentId))??null});let d=l.state(""),a=null;const g=l.derived(()=>t.tile.id),u=l.derived(()=>t.tile.srcScale),p=l.derived(()=>t.tile.screenRect),f=l.derived(()=>t.scale/l.get(u));l.user_effect(()=>{l.get(g);const e=t.pageIndex;if(a)return;if(!l.get(s))return;const r=n.untrack(()=>{return e=t.tile,{...e,pageRect:{origin:{x:e.pageRect.origin.x,y:e.pageRect.origin.y},size:{width:e.pageRect.size.width,height:e.pageRect.size.height}},screenRect:{origin:{x:e.screenRect.origin.x,y:e.screenRect.origin.y},size:{width:e.screenRect.size.width,height:e.screenRect.size.height}}};var e}),o=l.get(s).renderTile({pageIndex:e,tile:r,dpr:t.dpr});return o.wait(e=>{const t=URL.createObjectURL(e);a=t,l.set(d,t,!0)},i.ignore),()=>{a?(URL.revokeObjectURL(a),a=null):o.abort({code:i.PdfErrorCode.Cancelled,message:"canceled render task"})}});const v=()=>{a&&(URL.revokeObjectURL(a),a=null)};var m=l.comment(),h=l.first_child(m),b=e=>{var t=c();let r;l.template_effect(()=>{l.set_attribute(t,"src",l.get(d)),r=l.set_style(t,"",r,{position:"absolute",left:l.get(p).origin.x*l.get(f)+"px",top:l.get(p).origin.y*l.get(f)+"px",width:l.get(p).size.width*l.get(f)+"px",height:l.get(p).size.height*l.get(f)+"px",display:"block"})}),l.event("load",t,v),l.replay_events(t),l.append(e,t)};l.if(h,e=>{l.get(d)&&e(b)}),l.append(e,m),l.pop()}var a=l.from_html("<div></div>");exports.TileImg=d,exports.TilingLayer=function(e,t){l.push(t,!0);let i=l.rest_props(t,["$$slots","$$events","$$legacy","documentId","pageIndex","scale","class"]);const n=o(),s=r.useDocumentState(()=>t.documentId);let c=l.state(l.proxy([]));const g=l.derived(()=>{var e;return void 0!==t.scale?t.scale:(null==(e=s.current)?void 0:e.scale)??1});l.user_effect(()=>{if(n.provides)return n.provides.onTileRendering(e=>{e.documentId===t.documentId&&l.set(c,e.tiles[t.pageIndex]??[],!0)})});var u=a();l.attribute_effect(u,()=>({class:t.class,...i})),l.each(u,21,()=>l.get(c),e=>e.id,(e,r)=>{d(e,{get documentId(){return t.documentId},get pageIndex(){return t.pageIndex},get tile(){return l.get(r)},dpr:window.devicePixelRatio,get scale(){return l.get(g)}})}),l.reset(u),l.append(e,u),l.pop()},exports.useTilingCapability=o,exports.useTilingPlugin=()=>r.usePlugin(t.TilingPlugin.id),Object.keys(t).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/svelte/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-tiling.ts","../../src/svelte/components/TileImg.svelte","../../src/svelte/components/TilingLayer.svelte"],"sourcesContent":["import { TilingPlugin } from '@embedpdf/plugin-tiling';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script lang=\"ts\">\n  import type { Tile } from '@embedpdf/plugin-tiling';\n  import { useTilingCapability } from '../hooks';\n  import { ignore, PdfErrorCode } from '@embedpdf/models';\n  import { untrack } from 'svelte';\n\n  interface TileImgProps {\n    pageIndex: number;\n    tile: Tile;\n    dpr: number;\n    scale: number;\n  }\n\n  let { pageIndex, tile, dpr, scale }: TileImgProps = $props();\n  const tilingCapability = useTilingCapability();\n  let url = $state<string>('');\n  // urlRef is NOT reactive - similar to React's useRef\n  let urlRef: string | null = null;\n\n  // Capture these values once per tile change\n  const tileId = $derived(tile.id);\n  const tileSrcScale = $derived(tile.srcScale);\n  const tileScreenRect = $derived(tile.screenRect);\n  const relativeScale = $derived(scale / tileSrcScale);\n\n  const createPlainTile = (t: Tile): Tile => ({\n    ...t,\n    pageRect: {\n      origin: { x: t.pageRect.origin.x, y: t.pageRect.origin.y },\n      size: { width: t.pageRect.size.width, height: t.pageRect.size.height },\n    },\n    screenRect: {\n      origin: { x: t.screenRect.origin.x, y: t.screenRect.origin.y },\n      size: { width: t.screenRect.size.width, height: t.screenRect.size.height },\n    },\n  });\n\n  /* kick off render exactly once per tile */\n  $effect(() => {\n    // Track only tileId and pageIndex as dependencies (like React's [pageIndex, tile.id])\n    const _tileId = tileId;\n    const _pageIndex = pageIndex;\n\n    // Check if we already have a URL for this tile (already rendered)\n    if (urlRef) return;\n\n    if (!tilingCapability) return;\n\n    // Clone to avoid reactive proxies that Web Workers cannot clone\n    const plainTile = untrack(() => createPlainTile(tile));\n    const task = tilingCapability.provides?.renderTile({\n      pageIndex: _pageIndex,\n      tile: plainTile,\n      dpr,\n    });\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef = objectUrl;\n      url = objectUrl;\n    }, ignore);\n\n    return () => {\n      if (urlRef) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  });\n\n  const handleImageLoad = () => {\n    if (urlRef) {\n      URL.revokeObjectURL(urlRef);\n      urlRef = null;\n    }\n  };\n</script>\n\n{#if url}\n  <img\n    src={url}\n    alt=\"\"\n    onload={handleImageLoad}\n    style:position=\"absolute\"\n    style:left={`${tileScreenRect.origin.x * relativeScale}px`}\n    style:top={`${tileScreenRect.origin.y * relativeScale}px`}\n    style:width={`${tileScreenRect.size.width * relativeScale}px`}\n    style:height={`${tileScreenRect.size.height * relativeScale}px`}\n    style:display=\"block\"\n  />\n{/if}\n","<script lang=\"ts\">\n  import type { Tile } from '@embedpdf/plugin-tiling';\n  import { useCoreState } from '@embedpdf/core/svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import TileImg from './TileImg.svelte';\n  import { useTilingCapability } from '../hooks';\n\n  type TilingLayoutProps = HTMLAttributes<HTMLDivElement> & {\n    pageIndex: number;\n    scale: number;\n    class?: string;\n  };\n\n  let { pageIndex, scale, class: propsClass, ...restProps }: TilingLayoutProps = $props();\n\n  const tilingCapability = useTilingCapability();\n  let tiles = $state<Tile[]>([]);\n\n  const core = useCoreState();\n\n  $effect(() => {\n    if (!tilingCapability.provides) return;\n    return tilingCapability.provides.onTileRendering((tilesMap) => {\n      tiles = tilesMap[pageIndex] ?? [];\n    });\n  });\n</script>\n\n<div class={propsClass} {...restProps}>\n  {#each tiles as tile (`${core.coreState?.document?.id}-${tile.id}`)}\n    <TileImg {pageIndex} {tile} dpr={window.devicePixelRatio} {scale} />\n  {/each}\n</div>\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","tilingCapability","url","urlRef","tileId","tileSrcScale","srcScale","tileScreenRect","screenRect","relativeScale","$","user_effect","_pageIndex","$$props","pageIndex","plainTile","untrack","createPlainTile","t","tile","pageRect","origin","x","y","size","width","height","task","_a","provides","renderTile","dpr","wait","blob","objectUrl","URL","createObjectURL","$__namespace","set","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","handleImageLoad","left","get","top","consequent","restProps","rest_props","tiles","state","proxy","core","useCoreState","onTileRendering","tilesMap","each","div","_b","coreState","document","window","devicePixelRatio","usePlugin"],"mappings":"wjBAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,oECU1E,MAAAC,EAAmBJ,IACrB,IAAAK,UAAqB,IAErBC,EAAwB,KAGtB,MAAAC,wBAAuBJ,KACvBK,wBAA6BC,WAC7BC,wBAA+BC,aAC/BC,+BAAiCJ,KAevCK,EAAAC,aAAc,iBAEIP,SACVQ,EAAUC,EAAAC,aAGZX,EAAM,WAELF,EAAgB,aAGfc,EAAYC,EAAAA,SAAO,KAAOC,OAxBTC,EAwBwBL,EAAAM,KAxBjB,IAC3BD,EACHE,SAAQ,CACNC,QAAUC,EAAGJ,EAAEE,SAASC,OAAOC,EAAGC,EAAGL,EAAEE,SAASC,OAAOE,GACvDC,MAAQC,MAAOP,EAAEE,SAASI,KAAKC,MAAOC,OAAQR,EAAEE,SAASI,KAAKE,SAEhElB,WAAU,CACRa,QAAUC,EAAGJ,EAAEV,WAAWa,OAAOC,EAAGC,EAAGL,EAAEV,WAAWa,OAAOE,GAC3DC,KAAI,CAAIC,MAAOP,EAAEV,WAAWgB,KAAKC,MAAOC,OAAQR,EAAEV,WAAWgB,KAAKE,cAR7CR,CAwBwB,IACzCS,EAAO,OAAAC,EAAA3B,EAAiB4B,eAAjB,EAAAD,EAA2BE,WAAU,CAChDhB,UAAWF,EACXO,KAAMJ,EACNgB,IAAGlB,EAAAkB,MAQQ,OANP,MAAAJ,GAAAA,EAAAK,MAAMC,IACJ,MAAAC,EAAYC,IAAIC,gBAAgBH,GAC7B9B,EAAA+B,EACTG,EAAAC,IAAApC,EAAMgC,GAAS,EAAA,GACdK,EAAAA,QAEU,KACPpC,GACFgC,IAAIK,gBAAgBrC,GACXA,EAAA,MAET,MAAAwB,GAAAA,EAAMc,MAAK,CACTC,KAAMC,EAAYA,aAACC,UACnBC,QAAS,wBAEb,CACD,IAGG,MAAAC,EAAwB,KACxB3C,IACFgC,IAAIK,gBAAgBrC,GACXA,EAAA,KACX,kHAMKD,yDAIU6C,KAAArC,EAAAsC,IAAAzC,GAAec,OAAOC,QAAIb,GAA1B,KACDwC,IAAAvC,EAAAsC,IAAAzC,GAAec,OAAOE,QAAId,GAA1B,KACEgB,MAAAf,EAAAsC,IAAAzC,GAAeiB,KAAKC,YAAQhB,GAA5B,KACCiB,OAAAhB,EAAAsC,IAAAzC,GAAeiB,KAAKE,aAASjB,GAA7B,0CALTqC,uDAJP5C,MAAGgD,EAAA,yBAFR,mGCnEgD,IAAAC,EAASzC,EAAA0C,WAAAvC,EAAA,+DAEjD,MAAAZ,EAAmBJ,QACrBwD,EAAK3C,EAAA4C,MAAA5C,EAAA6C,MAAA,KAEH,MAAAC,EAAOC,EAAAA,eAEb/C,EAAAC,aAAc,KACP,GAAAV,EAAiB4B,SACf,OAAA5B,EAAiB4B,SAAS6B,iBAAiBC,IAChDtB,EAAAC,IAAAe,EAAQM,EAAQ9C,EAAAC,YAAA,IAAA,EAAA,GACjB,2DAIuBqC,MACnBd,EAAAuB,KAAAC,EAAA,IAAA,IAAAnD,EAAAsC,IAAAK,KAASlC,YAAS,MAAA,GAAA,OAAA2C,EAAA,OAAAlC,EAAA4B,EAAKO,gBAAW,EAAAnC,EAAAoC,mBAAUhE,MAAMmB,EAAKnB,IAAE,OAAhDmB,0EACmBY,IAAAkC,OAAOC,kFAJ5C,wDFvB+B,IAAMC,YAAwBpE,EAAAA,aAAaC"}
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-tiling.ts","../../src/svelte/components/TileImg.svelte","../../src/svelte/components/TilingLayer.svelte"],"sourcesContent":["import { TilingPlugin } from '@embedpdf/plugin-tiling';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useTilingPlugin = () => usePlugin<TilingPlugin>(TilingPlugin.id);\nexport const useTilingCapability = () => useCapability<TilingPlugin>(TilingPlugin.id);\n","<script lang=\"ts\">\n  import type { Tile } from '@embedpdf/plugin-tiling';\n  import { useTilingCapability } from '../hooks';\n  import { ignore, PdfErrorCode } from '@embedpdf/models';\n  import { untrack } from 'svelte';\n\n  interface TileImgProps {\n    documentId: string;\n    pageIndex: number;\n    tile: Tile;\n    dpr: number;\n    scale: number;\n  }\n\n  let { documentId, pageIndex, tile, dpr, scale }: TileImgProps = $props();\n  const tilingCapability = useTilingCapability();\n\n  // Derived scoped capability for the specific document\n  const scope = $derived(tilingCapability.provides?.forDocument(documentId) ?? null);\n\n  let url = $state<string>('');\n  // urlRef is NOT reactive - similar to React's useRef\n  let urlRef: string | null = null;\n\n  // Capture these values once per tile change\n  const tileId = $derived(tile.id);\n  const tileSrcScale = $derived(tile.srcScale);\n  const tileScreenRect = $derived(tile.screenRect);\n  const relativeScale = $derived(scale / tileSrcScale);\n\n  const createPlainTile = (t: Tile): Tile => ({\n    ...t,\n    pageRect: {\n      origin: { x: t.pageRect.origin.x, y: t.pageRect.origin.y },\n      size: { width: t.pageRect.size.width, height: t.pageRect.size.height },\n    },\n    screenRect: {\n      origin: { x: t.screenRect.origin.x, y: t.screenRect.origin.y },\n      size: { width: t.screenRect.size.width, height: t.screenRect.size.height },\n    },\n  });\n\n  /* kick off render exactly once per tile */\n  $effect(() => {\n    // Track only tileId and pageIndex as dependencies (like React's [pageIndex, tile.id])\n    const _tileId = tileId;\n    const _pageIndex = pageIndex;\n\n    // Check if we already have a URL for this tile (already rendered)\n    if (urlRef) return;\n\n    if (!scope) return;\n\n    // Clone to avoid reactive proxies that Web Workers cannot clone\n    const plainTile = untrack(() => createPlainTile(tile));\n    const task = scope.renderTile({\n      pageIndex: _pageIndex,\n      tile: plainTile,\n      dpr,\n    });\n    task.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef = objectUrl;\n      url = objectUrl;\n    }, ignore);\n\n    return () => {\n      if (urlRef) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n      } else {\n        task.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  });\n\n  const handleImageLoad = () => {\n    if (urlRef) {\n      URL.revokeObjectURL(urlRef);\n      urlRef = null;\n    }\n  };\n</script>\n\n{#if url}\n  <img\n    src={url}\n    alt=\"\"\n    onload={handleImageLoad}\n    style:position=\"absolute\"\n    style:left={`${tileScreenRect.origin.x * relativeScale}px`}\n    style:top={`${tileScreenRect.origin.y * relativeScale}px`}\n    style:width={`${tileScreenRect.size.width * relativeScale}px`}\n    style:height={`${tileScreenRect.size.height * relativeScale}px`}\n    style:display=\"block\"\n  />\n{/if}\n","<script lang=\"ts\">\n  import type { Tile } from '@embedpdf/plugin-tiling';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import TileImg from './TileImg.svelte';\n  import { useTilingCapability } from '../hooks';\n\n  type TilingLayoutProps = HTMLAttributes<HTMLDivElement> & {\n    documentId: string;\n    pageIndex: number;\n    scale?: number;\n    class?: string;\n  };\n\n  let {\n    documentId,\n    pageIndex,\n    scale: scaleOverride,\n    class: propsClass,\n    ...restProps\n  }: TilingLayoutProps = $props();\n\n  const tilingCapability = useTilingCapability();\n  const documentState = useDocumentState(() => documentId);\n\n  let tiles = $state<Tile[]>([]);\n\n  const actualScale = $derived(\n    scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n  );\n\n  $effect(() => {\n    if (!tilingCapability.provides) return;\n    return tilingCapability.provides.onTileRendering((event) => {\n      if (event.documentId === documentId) {\n        tiles = event.tiles[pageIndex] ?? [];\n      }\n    });\n  });\n</script>\n\n<div class={propsClass} {...restProps}>\n  {#each tiles as tile (tile.id)}\n    <TileImg {documentId} {pageIndex} {tile} dpr={window.devicePixelRatio} scale={actualScale} />\n  {/each}\n</div>\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","tilingCapability","scope","_a","provides","forDocument","url","urlRef","tileId","tileSrcScale","srcScale","tileScreenRect","screenRect","relativeScale","$","user_effect","_pageIndex","$$props","pageIndex","plainTile","untrack","createPlainTile","t","tile","pageRect","origin","x","y","size","width","height","task","get","renderTile","dpr","wait","blob","objectUrl","URL","createObjectURL","set","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","handleImageLoad","left","top","consequent","restProps","rest_props","documentState","useDocumentState","documentId","tiles","state","proxy","actualScale","derived","scale","current","onTileRendering","event","each","div","window","devicePixelRatio","usePlugin"],"mappings":"wjBAIaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,oECW1E,MAAAC,EAAmBJ,IAGnBK,uBAAiB,OAAA,OAAAC,EAAAF,EAAiBG,eAAjB,EAAAD,EAA2BE,4BAA2B,OAEzE,IAAAC,UAAqB,IAErBC,EAAwB,KAGtB,MAAAC,uBAAuBR,IACvBS,uBAA6BC,UAC7BC,uBAA+BC,YAC/BC,8BAAiCJ,IAevCK,EAAAC,YAAO,WAEWP,SACVQ,EAAUC,EAAAC,aAGZX,EAAM,iBAELL,GAAK,aAGJiB,EAAYC,EAAAA,QAAO,KAAOC,OAxBTC,EAwBwBL,EAAAM,KAxBxB,IACpBD,EACHE,SAAQ,CACNC,QAAUC,EAAGJ,EAAEE,SAASC,OAAOC,EAAGC,EAAGL,EAAEE,SAASC,OAAOE,GACvDC,MAAQC,MAAOP,EAAEE,SAASI,KAAKC,MAAOC,OAAQR,EAAEE,SAASI,KAAKE,SAEhElB,WAAU,CACRa,QAAUC,EAAGJ,EAAEV,WAAWa,OAAOC,EAAGC,EAAGL,EAAEV,WAAWa,OAAOE,GAC3DC,KAAI,CAAIC,MAAOP,EAAEV,WAAWgB,KAAKC,MAAOC,OAAQR,EAAEV,WAAWgB,KAAKE,cAR7CR,IAyBjBS,EAAIjB,EAAAkB,IAAG9B,GAAM+B,WAAU,CAC3Bf,UAAWF,EACXO,KAAMJ,EACNe,IAAGjB,EAAAiB,MAQQ,OANbH,EAAKI,KAAMC,IACH,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtC7B,EAAS8B,EACTvB,EAAA0B,IAAAlC,EAAM+B,GAAS,IACdI,EAAAA,QAEU,KACPlC,GACF+B,IAAII,gBAAgBnC,GACpBA,EAAS,MAETwB,EAAKY,MAAK,CACRC,KAAMC,EAAAA,aAAaC,UACnBC,QAAS,4BAMX,MAAAC,EAAe,KACfzC,IACF+B,IAAII,gBAAgBnC,GACpBA,EAAS,uHAOND,8CAIU2C,KAAAnC,EAAAkB,IAAArB,GAAec,OAAOC,QAAIb,GAA1B,KACDqC,IAAApC,EAAAkB,IAAArB,GAAec,OAAOE,QAAId,GAA1B,KACEgB,MAAAf,EAAAkB,IAAArB,GAAeiB,KAAKC,YAAQhB,GAA5B,KACCiB,OAAAhB,EAAAkB,IAAArB,GAAeiB,KAAKE,aAASjB,GAA7B,0CALTmC,sDAJP1C,MAAG6C,0BAFR,uGClEOC,EAAQtC,EAAAuC,WAAApC,EAAA,4EAGP,MAAAhB,EAAmBJ,IACnByD,EAAgBC,EAAAA,iBAAgB,IAAAtC,EAAAuC,gBAElCC,EAAK3C,EAAA4C,MAAA5C,EAAA6C,MAAA,WAEHC,EAAW9C,EAAA+C,QAAA,WAAA,YACG,IADH5C,EAAA6C,MACY7C,EAAA6C,OAAoB,OAAA3D,EAAAmD,EAAcS,kBAASD,QAAS,IAGjFhD,EAAAC,YAAO,KACA,GAAAd,EAAiBG,SACf,OAAAH,EAAiBG,SAAS4D,gBAAiBC,IAC5CA,EAAMT,aAAUvC,EAAAuC,kBAClBC,EAAQQ,EAAMR,MAAKxC,EAAAC,YAAA,IAAA,6DAMCkC,KACnBtC,EAAAoD,KAAAC,EAAA,GAAA,IAAArD,EAAAkB,IAAAyB,GAASlC,GAAMA,EAAKvB,MAAXuB,gHACgCW,IAAAkC,OAAOC,0CAAyBT,wCAJlF,wDFpC+B,IAAMU,YAAwBvE,EAAAA,aAAaC"}