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

package/dist/svelte/index.js

@@ -2,7 +2,7 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { TilingPlugin } from "@embedpdf/plugin-tiling";
 export * from "@embedpdf/plugin-tiling";
-import { useCapability, usePlugin, useCoreState } from "@embedpdf/core/svelte";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/svelte";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 import { untrack } from "svelte";
 const useTilingPlugin = () => usePlugin(TilingPlugin.id);
@@ -11,6 +11,10 @@ var root_1 = $.from_html(`<img alt=""/>`);
 function TileImg($$anchor, $$props) {
   $.push($$props, true);
   const tilingCapability = useTilingCapability();
+  const scope = $.derived(() => {
+    var _a;
+    return ((_a = tilingCapability.provides) == null ? void 0 : _a.forDocument($$props.documentId)) ?? null;
+  });
   let url = $.state("");
   let urlRef = null;
   const tileId = $.derived(() => $$props.tile.id);
@@ -32,14 +36,13 @@ function TileImg($$anchor, $$props) {
     }
   });
   $.user_effect(() => {
-    var _a;
     $.get(tileId);
     const _pageIndex = $$props.pageIndex;
     if (urlRef) return;
-    if (!tilingCapability) return;
+    if (!$.get(scope)) return;
     const plainTile = untrack(() => createPlainTile($$props.tile));
-    const task = (_a = tilingCapability.provides) == null ? void 0 : _a.renderTile({ pageIndex: _pageIndex, tile: plainTile, dpr: $$props.dpr });
-    task == null ? void 0 : task.wait(
+    const task = $.get(scope).renderTile({ pageIndex: _pageIndex, tile: plainTile, dpr: $$props.dpr });
+    task.wait(
       (blob) => {
         const objectUrl = URL.createObjectURL(blob);
         urlRef = objectUrl;
@@ -52,7 +55,7 @@ function TileImg($$anchor, $$props) {
         URL.revokeObjectURL(urlRef);
         urlRef = null;
       } else {
-        task == null ? void 0 : task.abort({
+        task.abort({
           code: PdfErrorCode.Cancelled,
           message: "canceled render task"
         });
@@ -71,22 +74,17 @@ function TileImg($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var img = root_1();
       let styles;
-      $.template_effect(
-        ($0) => {
-          $.set_attribute(img, "src", $.get(url));
-          styles = $.set_style(img, "", styles, $0);
-        },
-        [
-          () => ({
-            position: "absolute",
-            left: `${$.get(tileScreenRect).origin.x * $.get(relativeScale)}px`,
-            top: `${$.get(tileScreenRect).origin.y * $.get(relativeScale)}px`,
-            width: `${$.get(tileScreenRect).size.width * $.get(relativeScale)}px`,
-            height: `${$.get(tileScreenRect).size.height * $.get(relativeScale)}px`,
-            display: "block"
-          })
-        ]
-      );
+      $.template_effect(() => {
+        $.set_attribute(img, "src", $.get(url));
+        styles = $.set_style(img, "", styles, {
+          position: "absolute",
+          left: `${$.get(tileScreenRect).origin.x * $.get(relativeScale)}px`,
+          top: `${$.get(tileScreenRect).origin.y * $.get(relativeScale)}px`,
+          width: `${$.get(tileScreenRect).size.width * $.get(relativeScale)}px`,
+          height: `${$.get(tileScreenRect).size.height * $.get(relativeScale)}px`,
+          display: "block"
+        });
+      });
       $.event("load", img, handleImageLoad);
       $.replay_events(img);
       $.append($$anchor2, img);
@@ -105,26 +103,33 @@ function TilingLayer($$anchor, $$props) {
     "$$slots",
     "$$events",
     "$$legacy",
+    "documentId",
     "pageIndex",
     "scale",
     "class"
   ]);
   const tilingCapability = useTilingCapability();
+  const documentState = useDocumentState(() => $$props.documentId);
   let tiles = $.state($.proxy([]));
-  const core = useCoreState();
+  const actualScale = $.derived(() => {
+    var _a;
+    return $$props.scale !== void 0 ? $$props.scale : ((_a = documentState.current) == null ? void 0 : _a.scale) ?? 1;
+  });
   $.user_effect(() => {
     if (!tilingCapability.provides) return;
-    return tilingCapability.provides.onTileRendering((tilesMap) => {
-      $.set(tiles, tilesMap[$$props.pageIndex] ?? [], true);
+    return tilingCapability.provides.onTileRendering((event) => {
+      if (event.documentId === $$props.documentId) {
+        $.set(tiles, event.tiles[$$props.pageIndex] ?? [], true);
+      }
     });
   });
   var div = root();
   $.attribute_effect(div, () => ({ class: $$props.class, ...restProps }));
-  $.each(div, 21, () => $.get(tiles), (tile) => {
-    var _a, _b;
-    return `${(_b = (_a = core.coreState) == null ? void 0 : _a.document) == null ? void 0 : _b.id}-${tile.id}`;
-  }, ($$anchor2, tile) => {
+  $.each(div, 21, () => $.get(tiles), (tile) => tile.id, ($$anchor2, tile) => {
     TileImg($$anchor2, {
+      get documentId() {
+        return $$props.documentId;
+      },
       get pageIndex() {
         return $$props.pageIndex;
       },
@@ -133,7 +138,7 @@ function TilingLayer($$anchor, $$props) {
       },
       dpr: window.devicePixelRatio,
       get scale() {
-        return $$props.scale;
+        return $.get(actualScale);
       }
     });
   });

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":[],"mappings":"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"}
+{"version":3,"file":"index.js","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":[],"mappings":";;;;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;oCCJpF;;AAeQ,QAAA,mBAAmB,oBAAmB;AAGtC,QAAA;;AAAiB,mCAAiB,aAAjB,mBAA2B,oCAA2B;AAAA,GAAI;AAE7E,MAAA,cAAqB,EAAE;AAEvB,MAAA,SAAwB;AAGtB,QAAA,sCAAuB,EAAE;AACzB,QAAA,4CAA6B,QAAQ;AACrC,QAAA,8CAA+B,UAAU;AACzC,QAAA,sDAAiC,YAAY,CAAA;AAE7C,QAAA,mBAAmB,OAAO;AAAA,OAC3B;AAAA,IACH,UAAQ;AAAA,MACN,UAAU,GAAG,EAAE,SAAS,OAAO,GAAG,GAAG,EAAE,SAAS,OAAO,EAAC;AAAA,MACxD,QAAQ,OAAO,EAAE,SAAS,KAAK,OAAO,QAAQ,EAAE,SAAS,KAAK,OAAM;AAAA;IAEtE,YAAU;AAAA,MACR,UAAU,GAAG,EAAE,WAAW,OAAO,GAAG,GAAG,EAAE,WAAW,OAAO,EAAC;AAAA,MAC5D,MAAI;AAAA,QAAI,OAAO,EAAE,WAAW,KAAK;AAAA,QAAO,QAAQ,EAAE,WAAW,KAAK;AAAA;;;AAKtE,IAAA,YAAO,MAAO;UAEI,MAAM;UAChB,aAAU,QAAA;QAGZ,OAAM;eAEL,KAAK,EAAA;UAGJ,YAAY,QAAO,MAAO,gBAAe,QAAA,IAAA,CAAA;AACzC,UAAA,OAAI,EAAA,IAAG,KAAK,EAAC,WAAU,EAC3B,WAAW,YACX,MAAM,WACN,KAAG,QAAA,IAAA,CAAA;AAEL,SAAK;AAAA,MAAM,CAAA,SAAS;AACZ,cAAA,YAAY,IAAI,gBAAgB,IAAI;AAC1C,iBAAS;AACT,UAAA,IAAA,KAAM,WAAS,IAAA;AAAA,MACjB;AAAA,MAAG;AAAA;AAEU,WAAA,MAAA;AACP,UAAA,QAAQ;AACV,YAAI,gBAAgB,MAAM;AAC1B,iBAAS;AAAA,MACX,OAAO;AACL,aAAK,MAAK;AAAA,UACR,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA;MAEb;AAAA,IACF;AAAA,EACF,CAAC;AAEK,QAAA,kBAAe,MAAS;AACxB,QAAA,QAAQ;AACV,UAAI,gBAAgB,MAAM;AAC1B,eAAS;AAAA,IACX;AAAA,EACF;;;;;;;;0CAKO,GAAG,CAAA;;;UAIO,MAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO,UAAI,aAAa,CAAA;AAAA,UACxC,KAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO,UAAI,aAAa,CAAA;AAAA,UACrC,OAAA,GAAA,EAAA,IAAA,cAAc,EAAC,KAAK,cAAQ,aAAa,CAAA;AAAA,UACxC,QAAA,GAAA,EAAA,IAAA,cAAc,EAAC,KAAK,eAAS,aAAa,CAAA;AAAA;;;2BALnD,eAAe;;;;;gBAJtB,GAAG,EAAA,UAAA,UAAA;AAAA;;;;AAFR;;wCCrFA;;MAmBO,YAAQ,EAAA,WAAA,SAAA;AAAA;;;;;;;;AAGP,QAAA,mBAAmB,oBAAmB;AACtC,QAAA,gBAAgB,iBAAgB,MAAA,QAAA,UAAA;MAElC,QAAK,EAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA;QAEH,cAAW,EAAA,QAAA,MAAA;;AAAA,mBAAA,UACG,SAAS,QAAA,UAAoB,mBAAc,YAAd,mBAAuB,UAAS;AAAA,GAAC;AAGlF,IAAA,YAAO,MAAO;AACP,QAAA,CAAA,iBAAiB,SAAQ;AACvB,WAAA,iBAAiB,SAAS,gBAAe,CAAE,UAAU;UACtD,MAAM,eAAU,QAAA,YAAiB;cACnC,OAAQ,MAAM,MAAK,QAAA,SAAA,KAAA,CAAA,GAAA,IAAA;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;;4DAGyB,UAAS,EAAA;AAC5B,IAAA,KAAA,KAAA,IAAA,MAAA,EAAA,IAAA,KAAK,IAAI,SAAM,KAAK,gBAAX,SAAI;;;;;;;;;;;MAC4B,KAAA,OAAO;AAAA;qBAAyB,WAAW;AAAA;;;;;;AAJ7F;"}

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

@@ -1,11 +1,13 @@
 import { Tile } from '../../lib/index.ts';
 interface Props {
+    documentId: string;
     pageIndex: number;
     tile: Tile;
     scale: number;
     dpr?: number;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     dpr: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-interface Props {
+interface TilingLayerProps {
+    documentId: string;
     pageIndex: number;
-    scale: number;
+    scale?: number;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import('vue').DefineComponent<TilingLayerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TilingLayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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"),t=require("@embedpdf/core/vue"),i=require("@embedpdf/plugin-tiling"),n=()=>t.useCapability(i.TilingPlugin.id),o=["src"],r=e.defineComponent({__name:"tile-img",props:{pageIndex:{},tile:{},scale:{},dpr:{default:()=>"undefined"!=typeof window?window.devicePixelRatio:1}},setup(t){const i=t,{provides:r}=n(),a=e.ref(),d=e.computed((()=>i.scale/i.tile.srcScale));let u,c=null;return e.watch([()=>i.tile.id,r],(([t,n])=>{n&&u!==t&&(c&&(c.abort({code:l.PdfErrorCode.Cancelled,message:"switching tiles"}),c=null),a.value&&(URL.revokeObjectURL(a.value),a.value=void 0),u=t,c=n.renderTile({pageIndex:i.pageIndex,tile:e.toRaw(i.tile),dpr:i.dpr}),c.wait((e=>{a.value=URL.createObjectURL(e),c=null}),l.ignore))}),{immediate:!0}),e.onBeforeUnmount((()=>{c&&c.abort({code:l.PdfErrorCode.Cancelled,message:"unmounting"}),a.value&&URL.revokeObjectURL(a.value)})),(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*d.value+"px",top:l.tile.screenRect.origin.y*d.value+"px",width:l.tile.screenRect.size.width*d.value+"px",height:l.tile.screenRect.size.height*d.value+"px",display:"block"})},null,12,o)):e.createCommentVNode("",!0)}}),a=e.defineComponent({__name:"tiling-layer",props:{pageIndex:{},scale:{}},setup(l){const t=l,i=e.ref([]),{provides:o}=n();let a;return e.onMounted((()=>{o.value&&(a=o.value.onTileRendering((e=>{i.value=e[t.pageIndex]??[]})))})),e.onBeforeUnmount((()=>{null==a||a()})),(l,t)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(l.$attrs)),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(t=>(e.openBlock(),e.createBlock(r,{key:t.id,pageIndex:l.pageIndex,tile:t,scale:l.scale},null,8,["pageIndex","tile","scale"])))),128))],16))}});exports.TileImg=r,exports.TilingLayer=a,exports.useTilingCapability=n,exports.useTilingPlugin=()=>t.usePlugin(i.TilingPlugin.id),Object.keys(i).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>i[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/models"),l=require("@embedpdf/core/vue"),i=require("@embedpdf/plugin-tiling"),o=()=>l.useCapability(i.TilingPlugin.id),n=["src"],r=e.defineComponent({__name:"tile-img",props:{documentId:{},pageIndex:{},tile:{},scale:{},dpr:{default:()=>"undefined"!=typeof window?window.devicePixelRatio:1}},setup(l){const i=l,{provides:r}=o(),d=e.ref(),a=e.computed(()=>i.scale/i.tile.srcScale);let c,u=null;return e.watch([()=>i.tile.id,()=>i.documentId,r],([l,o,n],[r,a])=>{if(!n)return;const s=n.forDocument(o);void 0!==a&&a!==o&&(d.value&&(URL.revokeObjectURL(d.value),d.value=void 0),u&&(u.abort({code:t.PdfErrorCode.Cancelled,message:"switching documents"}),u=null),c=void 0),c===l&&a===o||(u&&(u.abort({code:t.PdfErrorCode.Cancelled,message:"switching tiles"}),u=null),d.value&&(URL.revokeObjectURL(d.value),d.value=void 0),c=l,u=s.renderTile({pageIndex:i.pageIndex,tile:e.toRaw(i.tile),dpr:i.dpr}),u.wait(e=>{d.value=URL.createObjectURL(e),u=null},t.ignore))},{immediate:!0}),e.onBeforeUnmount(()=>{u&&u.abort({code:t.PdfErrorCode.Cancelled,message:"unmounting"}),d.value&&URL.revokeObjectURL(d.value)}),(t,i)=>d.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:d.value,style:e.normalizeStyle({position:"absolute",left:l.tile.screenRect.origin.x*a.value+"px",top:l.tile.screenRect.origin.y*a.value+"px",width:l.tile.screenRect.size.width*a.value+"px",height:l.tile.screenRect.size.height*a.value+"px",display:"block"})},null,12,n)):e.createCommentVNode("",!0)}}),d=e.defineComponent({__name:"tiling-layer",props:{documentId:{},pageIndex:{},scale:{}},setup(t){const i=t,{provides:n}=o(),d=l.useDocumentState(()=>i.documentId),a=e.ref([]),c=e.computed(()=>{var e;return void 0!==i.scale?i.scale:(null==(e=d.value)?void 0:e.scale)??1});return e.watch([n,()=>i.documentId,()=>i.pageIndex],([e,t,l],i,o)=>{if(!e)return void(a.value=[]);o(e.onTileRendering(e=>{e.documentId===t&&(a.value=e.tiles[l]??[])}))},{immediate:!0}),(l,i)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(l.$attrs)),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,l=>(e.openBlock(),e.createBlock(r,{key:l.id,documentId:t.documentId,pageIndex:t.pageIndex,tile:l,scale:c.value},null,8,["documentId","pageIndex","tile","scale"]))),128))],16))}});exports.TileImg=r,exports.TilingLayer=d,exports.useTilingCapability=o,exports.useTilingPlugin=()=>l.usePlugin(i.TilingPlugin.id),Object.keys(i).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>i[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, computed, watch, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\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}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1),\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\nconst url = ref<string>();\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n\n// Track last rendered tile ID to prevent duplicates\nlet lastRenderedId: string | undefined;\nlet currentTask: any = null;\n\nwatch(\n  [() => props.tile.id, tilingCapability],\n  ([tileId, capability]) => {\n    if (!capability) return;\n\n    // Already rendered this exact tile\n    if (lastRenderedId === tileId) return;\n\n    // Cancel previous task if any\n    if (currentTask) {\n      currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching tiles' });\n      currentTask = null;\n    }\n\n    // Clean up old URL\n    if (url.value) {\n      URL.revokeObjectURL(url.value);\n      url.value = undefined;\n    }\n\n    lastRenderedId = tileId;\n\n    currentTask = capability.renderTile({\n      pageIndex: props.pageIndex,\n      tile: toRaw(props.tile),\n      dpr: props.dpr,\n    });\n\n    currentTask.wait((blob: Blob) => {\n      url.value = URL.createObjectURL(blob);\n      currentTask = null;\n    }, ignore);\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  if (currentTask) {\n    currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'unmounting' });\n  }\n  if (url.value) {\n    URL.revokeObjectURL(url.value);\n  }\n});\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"{\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  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\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 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","relScale","computed","scale","tile","srcScale","lastRenderedId","currentTask","vue$1","watch","tileId","capability","abort","code","PdfErrorCode","Cancelled","message","value","URL","revokeObjectURL","renderTile","pageIndex","toRaw","dpr","wait","blob","createObjectURL","ignore","immediate","onBeforeUnmount","_createElementBlock","src","style","_normalizeStyle","screenRect","origin","x","y","size","width","height","tiles","tilingProvides","unsubscribe","onMounted","onTileRendering","tilesMap","_openBlock","openBlock","$attrs","_Fragment","Fragment","_renderList","_createBlock","createBlock","TileImg","key","usePlugin"],"mappings":"0MAMaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,2KCQlF,MAAMC,EAAQC,GAINC,SAAUC,GAAqBP,IACjCQ,EAAMC,EAAAA,MACNC,EAAWC,EAAAA,UAAS,IAAMP,EAAMQ,MAAQR,EAAMS,KAAKC,WAGrD,IAAAC,EACAC,EAAmB,YAEvBC,EAAAC,MACE,CAAC,IAAMd,EAAMS,KAAKV,GAAII,IACtB,EAAEY,EAAQC,MACHA,GAGDL,IAAmBI,IAGnBH,IACUA,EAAAK,MAAM,CAAEC,KAAMC,eAAaC,UAAWC,QAAS,oBAC7CT,EAAA,MAIZR,EAAIkB,QACFC,IAAAC,gBAAgBpB,EAAIkB,OACxBlB,EAAIkB,WAAQ,GAGGX,EAAAI,EAEjBH,EAAcI,EAAWS,WAAW,CAClCC,UAAW1B,EAAM0B,UACjBjB,KAAMkB,EAAAA,MAAM3B,EAAMS,MAClBmB,IAAK5B,EAAM4B,MAGDhB,EAAAiB,MAAMC,IACZ1B,EAAAkB,MAAQC,IAAIQ,gBAAgBD,GAClBlB,EAAA,IAAA,GACboB,UAAM,GAEX,CAAEC,WAAW,IAGfC,EAAAA,iBAAgB,KACVtB,GACUA,EAAAK,MAAM,CAAEC,KAAMC,eAAaC,UAAWC,QAAS,eAEzDjB,EAAIkB,OACFC,IAAAC,gBAAgBpB,EAAIkB,MAAK,WAOvBlB,EAAGkB,qBADXa,EAAAA,mBAWE,MAAA,OATCC,IAAKhC,EAAGkB,MACRe,MAAKC,EAAAA,eAAA,qBAA+C7B,KAAAA,EAAAA,KAAK8B,WAAWC,OAAOC,EAAInC,EAAQgB,MAAnCb,KAAuDA,IAAAA,EAAAA,KAAK8B,WAAWC,OAAOE,EAAIpC,EAAQgB,MAAnCb,KAAyDA,MAAAA,EAAAA,KAAK8B,WAAWI,KAAKC,MAAQtC,EAAQgB,MAArCb,KAA4DA,OAAAA,EAAAA,KAAK8B,WAAWI,KAAKE,OAASvC,EAAQgB,MAAtCb,qJChErO,MAAMT,EAAQC,EAER6C,EAAQzC,EAAYA,IAAA,KAClBH,SAAU6C,GAAmBnD,IAEjC,IAAAoD,SAEJC,EAAAA,WAAU,KACJF,EAAezB,QACjB0B,EAAcD,EAAezB,MAAM4B,iBAAiBC,IAClDL,EAAMxB,MAAQ6B,EAASnD,EAAM0B,YAAc,EAAC,IAC7C,IAILQ,EAAAA,iBAAgB,KACA,MAAAc,GAAAA,GAAA,YAKdI,EAAAC,YAAAlB,EAAAA,mBAQM,4CAROmB,EAAMA,SAAA,kBACjBnB,EAAAA,mBAMEoB,EAAAC,SAAA,KAAAC,EAAAA,WALeX,EAAKxB,OAAbb,kBADTiD,EAAAC,YAMEC,EAAA,CAJCC,IAAKpD,EAAKV,GACV2B,UAAWA,EAASA,UACpBjB,OACAD,MAAOA,EAAKA,4JFnCY,IAAMsD,YAAwBhE,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, computed, watch, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1),\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\nconst url = ref<string>();\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n\n// Track last rendered tile ID to prevent duplicates\nlet lastRenderedId: string | undefined;\nlet currentTask: any = null;\n\nwatch(\n  [() => props.tile.id, () => props.documentId, tilingCapability],\n  ([tileId, docId, capability], [prevTileId, prevDocId]) => {\n    if (!capability) return;\n\n    const scope = capability.forDocument(docId);\n\n    // CRITICAL: Clear image immediately when documentId changes\n    if (prevDocId !== undefined && prevDocId !== docId) {\n      if (url.value) {\n        URL.revokeObjectURL(url.value);\n        url.value = undefined;\n      }\n      if (currentTask) {\n        currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching documents' });\n        currentTask = null;\n      }\n      lastRenderedId = undefined; // Reset so new document tiles render\n    }\n\n    // Already rendered this exact tile (for same document)\n    if (lastRenderedId === tileId && prevDocId === docId) return;\n\n    // Cancel previous task if any\n    if (currentTask) {\n      currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching tiles' });\n      currentTask = null;\n    }\n\n    // Clean up old URL\n    if (url.value) {\n      URL.revokeObjectURL(url.value);\n      url.value = undefined;\n    }\n\n    lastRenderedId = tileId;\n\n    currentTask = scope.renderTile({\n      pageIndex: props.pageIndex,\n      tile: toRaw(props.tile),\n      dpr: props.dpr,\n    });\n\n    currentTask.wait((blob: Blob) => {\n      url.value = URL.createObjectURL(blob);\n      currentTask = null;\n    }, ignore);\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  if (currentTask) {\n    currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'unmounting' });\n  }\n  if (url.value) {\n    URL.revokeObjectURL(url.value);\n  }\n});\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"{\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  />\n</template>\n","<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport type { Tile } from '@embedpdf/plugin-tiling';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface TilingLayerProps {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n}\n\nconst props = defineProps<TilingLayerProps>();\n\nconst { provides: tilingProvides } = useTilingCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst tiles = ref<Tile[]>([]);\n\nconst actualScale = computed(() => {\n  if (props.scale !== undefined) return props.scale;\n  return documentState.value?.scale ?? 1;\n});\n\nwatch(\n  [tilingProvides, () => props.documentId, () => props.pageIndex],\n  ([provides, docId, pageIdx], _, onCleanup) => {\n    if (!provides) {\n      tiles.value = [];\n      return;\n    }\n\n    const unsubscribe = provides.onTileRendering((event) => {\n      if (event.documentId === docId) {\n        tiles.value = event.tiles[pageIdx] ?? [];\n      }\n    });\n\n    onCleanup(unsubscribe);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :documentId=\"documentId\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"actualScale\"\n    />\n  </div>\n</template>\n"],"names":["useTilingCapability","useCapability","TilingPlugin","id","props","__props","provides","tilingCapability","url","ref","relScale","computed","scale","tile","srcScale","lastRenderedId","currentTask","watch","documentId","tileId","docId","capability","prevTileId","prevDocId","scope","forDocument","value","URL","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","renderTile","pageIndex","toRaw","dpr","wait","blob","createObjectURL","ignore","immediate","onBeforeUnmount","_createElementBlock","src","style","_normalizeStyle","left","screenRect","origin","x","top","y","width","size","height","tilingProvides","documentState","useDocumentState","tiles","actualScale","_a","pageIdx","_","onCleanup","onTileRendering","event","_openBlock","$attrs","_Fragment","_renderList","_createBlock","TileImg","key","usePlugin"],"mappings":"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"}

package/dist/vue/index.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, watch, toRaw, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock, normalizeStyle, onMounted, normalizeProps, guardReactiveProps, Fragment, renderList, createBlock } from "vue";
+import { defineComponent, ref, computed, watch, toRaw, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, renderList, createBlock } from "vue";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
-import { useCapability, usePlugin } from "@embedpdf/core/vue";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/vue";
 import { TilingPlugin } from "@embedpdf/plugin-tiling";
 export * from "@embedpdf/plugin-tiling";
 const useTilingPlugin = () => usePlugin(TilingPlugin.id);
@@ -9,6 +9,7 @@ const _hoisted_1 = ["src"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "tile-img",
   props: {
+    documentId: {},
     pageIndex: {},
     tile: {},
     scale: {},
@@ -22,10 +23,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     let lastRenderedId;
     let currentTask = null;
     watch(
-      [() => props.tile.id, tilingCapability],
-      ([tileId, capability]) => {
+      [() => props.tile.id, () => props.documentId, tilingCapability],
+      ([tileId, docId, capability], [prevTileId, prevDocId]) => {
         if (!capability) return;
-        if (lastRenderedId === tileId) return;
+        const scope = capability.forDocument(docId);
+        if (prevDocId !== void 0 && prevDocId !== docId) {
+          if (url.value) {
+            URL.revokeObjectURL(url.value);
+            url.value = void 0;
+          }
+          if (currentTask) {
+            currentTask.abort({ code: PdfErrorCode.Cancelled, message: "switching documents" });
+            currentTask = null;
+          }
+          lastRenderedId = void 0;
+        }
+        if (lastRenderedId === tileId && prevDocId === docId) return;
         if (currentTask) {
           currentTask.abort({ code: PdfErrorCode.Cancelled, message: "switching tiles" });
           currentTask = null;
@@ -35,7 +48,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           url.value = void 0;
         }
         lastRenderedId = tileId;
-        currentTask = capability.renderTile({
+        currentTask = scope.renderTile({
           pageIndex: props.pageIndex,
           tile: toRaw(props.tile),
           dpr: props.dpr
@@ -61,10 +74,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         src: url.value,
         style: normalizeStyle({
           position: "absolute",
-          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`,
+          left: `${__props.tile.screenRect.origin.x * relScale.value}px`,
+          top: `${__props.tile.screenRect.origin.y * relScale.value}px`,
+          width: `${__props.tile.screenRect.size.width * relScale.value}px`,
+          height: `${__props.tile.screenRect.size.height * relScale.value}px`,
           display: "block"
         })
       }, null, 12, _hoisted_1)) : createCommentVNode("", true);
@@ -74,33 +87,46 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tiling-layer",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {}
   },
   setup(__props) {
     const props = __props;
-    const tiles = ref([]);
     const { provides: tilingProvides } = useTilingCapability();
-    let unsubscribe;
-    onMounted(() => {
-      if (tilingProvides.value) {
-        unsubscribe = tilingProvides.value.onTileRendering((tilesMap) => {
-          tiles.value = tilesMap[props.pageIndex] ?? [];
-        });
-      }
-    });
-    onBeforeUnmount(() => {
-      unsubscribe == null ? void 0 : unsubscribe();
+    const documentState = useDocumentState(() => props.documentId);
+    const tiles = ref([]);
+    const actualScale = computed(() => {
+      var _a;
+      if (props.scale !== void 0) return props.scale;
+      return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
     });
+    watch(
+      [tilingProvides, () => props.documentId, () => props.pageIndex],
+      ([provides, docId, pageIdx], _, onCleanup) => {
+        if (!provides) {
+          tiles.value = [];
+          return;
+        }
+        const unsubscribe = provides.onTileRendering((event) => {
+          if (event.documentId === docId) {
+            tiles.value = event.tiles[pageIdx] ?? [];
+          }
+        });
+        onCleanup(unsubscribe);
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(tiles.value, (tile) => {
           return openBlock(), createBlock(_sfc_main$1, {
             key: tile.id,
-            pageIndex: _ctx.pageIndex,
+            documentId: __props.documentId,
+            pageIndex: __props.pageIndex,
             tile,
-            scale: _ctx.scale
-          }, null, 8, ["pageIndex", "tile", "scale"]);
+            scale: actualScale.value
+          }, null, 8, ["documentId", "pageIndex", "tile", "scale"]);
         }), 128))
       ], 16);
     };

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, computed, watch, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\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}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1),\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\nconst url = ref<string>();\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n\n// Track last rendered tile ID to prevent duplicates\nlet lastRenderedId: string | undefined;\nlet currentTask: any = null;\n\nwatch(\n  [() => props.tile.id, tilingCapability],\n  ([tileId, capability]) => {\n    if (!capability) return;\n\n    // Already rendered this exact tile\n    if (lastRenderedId === tileId) return;\n\n    // Cancel previous task if any\n    if (currentTask) {\n      currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching tiles' });\n      currentTask = null;\n    }\n\n    // Clean up old URL\n    if (url.value) {\n      URL.revokeObjectURL(url.value);\n      url.value = undefined;\n    }\n\n    lastRenderedId = tileId;\n\n    currentTask = capability.renderTile({\n      pageIndex: props.pageIndex,\n      tile: toRaw(props.tile),\n      dpr: props.dpr,\n    });\n\n    currentTask.wait((blob: Blob) => {\n      url.value = URL.createObjectURL(blob);\n      currentTask = null;\n    }, ignore);\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  if (currentTask) {\n    currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'unmounting' });\n  }\n  if (url.value) {\n    URL.revokeObjectURL(url.value);\n  }\n});\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"{\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  />\n</template>\n","<script setup lang=\"ts\">\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface Props {\n  pageIndex: number;\n  scale: number;\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 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","$attrs","_Fragment","_renderList","_createBlock","TileImg","pageIndex","scale"],"mappings":";;;;;AAIO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AAErE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;ACQpF,UAAM,QAAQ;AAId,UAAM,EAAE,UAAU,iBAAiB,IAAI,oBAAoB;AAC3D,UAAM,MAAM,IAAY;AACxB,UAAM,WAAW,SAAS,MAAM,MAAM,QAAQ,MAAM,KAAK,QAAQ;AAG7D,QAAA;AACJ,QAAI,cAAmB;AAEvB;AAAA,MACE,CAAC,MAAM,MAAM,KAAK,IAAI,gBAAgB;AAAA,MACtC,CAAC,CAAC,QAAQ,UAAU,MAAM;AACxB,YAAI,CAAC,WAAY;AAGjB,YAAI,mBAAmB,OAAQ;AAG/B,YAAI,aAAa;AACf,sBAAY,MAAM,EAAE,MAAM,aAAa,WAAW,SAAS,mBAAmB;AAChE,wBAAA;AAAA,QAAA;AAIhB,YAAI,IAAI,OAAO;AACT,cAAA,gBAAgB,IAAI,KAAK;AAC7B,cAAI,QAAQ;AAAA,QAAA;AAGG,yBAAA;AAEjB,sBAAc,WAAW,WAAW;AAAA,UAClC,WAAW,MAAM;AAAA,UACjB,MAAM,MAAM,MAAM,IAAI;AAAA,UACtB,KAAK,MAAM;AAAA,QAAA,CACZ;AAEW,oBAAA,KAAK,CAAC,SAAe;AAC3B,cAAA,QAAQ,IAAI,gBAAgB,IAAI;AACtB,wBAAA;AAAA,WACb,MAAM;AAAA,MACX;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AAEA,oBAAgB,MAAM;AACpB,UAAI,aAAa;AACf,oBAAY,MAAM,EAAE,MAAM,aAAa,WAAW,SAAS,cAAc;AAAA,MAAA;AAE3E,UAAI,IAAI,OAAO;AACT,YAAA,gBAAgB,IAAI,KAAK;AAAA,MAAA;AAAA,IAC/B,CACD;;aAKS,IAAG,sBADXA,mBAWE,OAAA;AAAA;QATC,KAAK,IAAG;AAAA,QACR,OAAKC,eAAA;AAAA;UAA+CC,MAAAA,GAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,SAAQ,KAAA;AAAA,UAAoBA,KAAAA,GAAAA,KAAAA,KAAK,WAAW,OAAO,IAAI,SAAQ,KAAA;AAAA,UAAsBA,OAAAA,GAAAA,KAAAA,KAAK,WAAW,KAAK,QAAQ,SAAQ,KAAA;AAAA,UAAuBA,QAAAA,GAAAA,KAAAA,KAAK,WAAW,KAAK,SAAS,SAAQ,KAAA;AAAA;;;;;;;;;;;;;AChE3Q,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,yCAROI,KAAM,MAAA,CAAA,GAAA;AAAA,0BACjBJ,mBAMEK,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, computed, watch, onBeforeUnmount, toRaw } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport type { Tile } from '@embedpdf/plugin-tiling';\nimport { useTilingCapability } from '../hooks';\n\ninterface Props {\n  documentId: string;\n  pageIndex: number;\n  tile: Tile;\n  scale: number;\n  dpr?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  dpr: () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1),\n});\n\nconst { provides: tilingCapability } = useTilingCapability();\nconst url = ref<string>();\nconst relScale = computed(() => props.scale / props.tile.srcScale);\n\n// Track last rendered tile ID to prevent duplicates\nlet lastRenderedId: string | undefined;\nlet currentTask: any = null;\n\nwatch(\n  [() => props.tile.id, () => props.documentId, tilingCapability],\n  ([tileId, docId, capability], [prevTileId, prevDocId]) => {\n    if (!capability) return;\n\n    const scope = capability.forDocument(docId);\n\n    // CRITICAL: Clear image immediately when documentId changes\n    if (prevDocId !== undefined && prevDocId !== docId) {\n      if (url.value) {\n        URL.revokeObjectURL(url.value);\n        url.value = undefined;\n      }\n      if (currentTask) {\n        currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching documents' });\n        currentTask = null;\n      }\n      lastRenderedId = undefined; // Reset so new document tiles render\n    }\n\n    // Already rendered this exact tile (for same document)\n    if (lastRenderedId === tileId && prevDocId === docId) return;\n\n    // Cancel previous task if any\n    if (currentTask) {\n      currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'switching tiles' });\n      currentTask = null;\n    }\n\n    // Clean up old URL\n    if (url.value) {\n      URL.revokeObjectURL(url.value);\n      url.value = undefined;\n    }\n\n    lastRenderedId = tileId;\n\n    currentTask = scope.renderTile({\n      pageIndex: props.pageIndex,\n      tile: toRaw(props.tile),\n      dpr: props.dpr,\n    });\n\n    currentTask.wait((blob: Blob) => {\n      url.value = URL.createObjectURL(blob);\n      currentTask = null;\n    }, ignore);\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  if (currentTask) {\n    currentTask.abort({ code: PdfErrorCode.Cancelled, message: 'unmounting' });\n  }\n  if (url.value) {\n    URL.revokeObjectURL(url.value);\n  }\n});\n</script>\n\n<template>\n  <img\n    v-if=\"url\"\n    :src=\"url\"\n    :style=\"{\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  />\n</template>\n","<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport type { Tile } from '@embedpdf/plugin-tiling';\n\nimport { useTilingCapability } from '../hooks';\nimport TileImg from './tile-img.vue';\n\ninterface TilingLayerProps {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n}\n\nconst props = defineProps<TilingLayerProps>();\n\nconst { provides: tilingProvides } = useTilingCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst tiles = ref<Tile[]>([]);\n\nconst actualScale = computed(() => {\n  if (props.scale !== undefined) return props.scale;\n  return documentState.value?.scale ?? 1;\n});\n\nwatch(\n  [tilingProvides, () => props.documentId, () => props.pageIndex],\n  ([provides, docId, pageIdx], _, onCleanup) => {\n    if (!provides) {\n      tiles.value = [];\n      return;\n    }\n\n    const unsubscribe = provides.onTileRendering((event) => {\n      if (event.documentId === docId) {\n        tiles.value = event.tiles[pageIdx] ?? [];\n      }\n    });\n\n    onCleanup(unsubscribe);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div v-bind=\"$attrs\">\n    <TileImg\n      v-for=\"tile in tiles\"\n      :key=\"tile.id\"\n      :documentId=\"documentId\"\n      :pageIndex=\"pageIndex\"\n      :tile=\"tile\"\n      :scale=\"actualScale\"\n    />\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeStyle","_openBlock","$attrs","_Fragment","_renderList","_createBlock","TileImg"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-tiling",
-  "version": "1.4.1",
+  "version": "2.0.0-next.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -35,16 +35,16 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.4.1"
+    "@embedpdf/models": "2.0.0-next.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.4.1",
+    "@embedpdf/core": "2.0.0-next.0",
     "@embedpdf/build": "1.1.0",
-    "@embedpdf/plugin-scroll": "1.4.1",
-    "@embedpdf/plugin-viewport": "1.4.1",
-    "@embedpdf/plugin-render": "1.4.1"
+    "@embedpdf/plugin-render": "2.0.0-next.0",
+    "@embedpdf/plugin-scroll": "2.0.0-next.0",
+    "@embedpdf/plugin-viewport": "2.0.0-next.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -52,10 +52,10 @@
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/plugin-render": "1.4.1",
-    "@embedpdf/plugin-scroll": "1.4.1",
-    "@embedpdf/plugin-viewport": "1.4.1",
-    "@embedpdf/core": "1.4.1"
+    "@embedpdf/plugin-render": "2.0.0-next.0",
+    "@embedpdf/plugin-viewport": "2.0.0-next.0",
+    "@embedpdf/core": "2.0.0-next.0",
+    "@embedpdf/plugin-scroll": "2.0.0-next.0"
   },
   "files": [
     "dist",