@inkbar/vue 0.10.0 → 0.11.0

package/dist/components/InkViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.js","names":["_sfc_main","InkViewport_vue_vue_type_script_setup_true_lang_default","InkViewport_default"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n *\n * Form fields render in the engine's form layer. A signature field's \"Sign\" opens\n * `InkSignFieldPopover`, and a form script's alert shows in `InkFormAlert`; both are mounted\n * here, so hosts compose nothing for them.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { toolIdsOf } from '../composables/useRegisteredTool'\nimport { injectInkContext } from '../context'\n\nimport InkFormAlert from './InkFormAlert.vue'\nimport InkPage from './InkPage.vue'\nimport InkSignFieldPopover from './InkSignFieldPopover.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkDocument, InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  SignFieldRequest,\n  ToolId,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2 }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** A key per document, so the field menu and its dialog start afresh for each one. */\nconst documentKeys = new WeakMap<InkDocument, number>()\nlet documentKeyCount = 0\nfunction documentKey(doc: InkDocument | null): number {\n  if (!doc) return 0\n  let key = documentKeys.get(doc)\n  if (key === undefined) {\n    key = ++documentKeyCount\n    documentKeys.set(doc, key)\n  }\n  return key\n}\n\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/** The signature field whose menu is open. */\nconst signRequest = shallowRef<SignFieldRequest | null>(null)\n/** The form script's message on show, and how many have been shown. */\nconst alertMessage = shallowRef<string | null>(null)\nconst alertsShown = shallowRef(0)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  ctx.openedToolIds.value = null\n  pages.value = []\n  // Their fields and the document they came from are gone.\n  signRequest.value = null\n  alertMessage.value = null\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  // The tools this viewer registers, from the same inputs; a later `tools` waits for a rebuild.\n  ctx.openedToolIds.value = toolIdsOf(ctx.hostTools.value, ctx.pluginHost.value)\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    // The engine adds the plugins' tools and layers, and decorates through the host, which\n    // reads `decorateAnnotation` first.\n    ...(ctx.pluginHost.value ? { plugins: ctx.pluginHost.value } : {}),\n    // The engine draws the search matches on the pages.\n    ...(ctx.search.value ? { search: ctx.search.value } : {}),\n    // Read through, so the watch below can re-apply a new function without a rebuild.\n    decorateAnnotation: (a) => ctx.decorateAnnotation.value?.(a),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    ...(ctx.formHighlight.value === undefined\n      ? {}\n      : { formHighlight: ctx.formHighlight.value }),\n    // The field's own button again, while its menu is open, closes the menu.\n    onSignField: (req) => {\n      signRequest.value = signRequest.value?.widget === req.widget ? null : req\n    },\n    onFormAction: (a) => ctx.reportFormAction(a),\n    onFormAlert: (message) => {\n      alertMessage.value = message\n      alertsShown.value += 1\n    },\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      // A tool that switches itself (a one-shot tool once used) is reported as a pick.\n      const followTool = (id: ToolId): void => {\n        if (id !== ctx.tool.value) ctx.setTool(id)\n      }\n      stops = [\n        vp.zoom.subscribe(reportZoom),\n        vp.currentPage.subscribe(reportPage),\n        tc.active.subscribe(followTool),\n      ]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  ctx.viewportEl.value = scroll.value\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\n// A new decorateAnnotation re-applies to the mounted annotation elements at once.\nwatch(\n  () => ctx.decorateAnnotation.value,\n  () => engine.value?.redecorate()\n)\n// The tint follows `formHighlight` in place, without a new document.\nwatch(\n  () => ctx.formHighlight.value,\n  (on) => engine.value?.setFormHighlight(on ?? true)\n)\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap and buffer are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch([() => props.gap, () => props.buffer], ([gap, buffer]) =>\n  rebuild({ gap, buffer, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(() => {\n  teardown()\n  if (ctx.viewportEl.value === scroll.value) ctx.viewportEl.value = null\n})\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n    <!-- Keyed by document, so the menu and its dialog start afresh for each one. -->\n    <InkSignFieldPopover\n      :key=\"documentKey(ctx.document.value)\"\n      :request=\"signRequest\"\n      @close=\"signRequest = null\"\n    />\n    <InkFormAlert\n      :message=\"alertMessage\"\n      :shown=\"alertsShown\"\n      :fallback=\"scroll\"\n      @close=\"alertMessage = null\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkViewport.js","names":["_sfc_main","InkViewport_vue_vue_type_script_setup_true_lang_default","InkViewport_default"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n *\n * Form fields render in the engine's form layer. A signature field's \"Sign\" opens\n * `InkSignFieldPopover`, and a form script's alert shows in `InkFormAlert`; both are mounted\n * here, so hosts compose nothing for them.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { toolIdsOf } from '../composables/useRegisteredTool'\nimport { injectInkContext } from '../context'\n\nimport InkFormAlert from './InkFormAlert.vue'\nimport InkPage from './InkPage.vue'\nimport InkSignFieldPopover from './InkSignFieldPopover.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkDocument, InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  SignFieldRequest,\n  ToolId,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n    /** Pinch to zoom the pages. Off leaves the browser's own touch handling alone. */\n    pinchZoom?: boolean\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2, pinchZoom: true }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** A key per document, so the field menu and its dialog start afresh for each one. */\nconst documentKeys = new WeakMap<InkDocument, number>()\nlet documentKeyCount = 0\nfunction documentKey(doc: InkDocument | null): number {\n  if (!doc) return 0\n  let key = documentKeys.get(doc)\n  if (key === undefined) {\n    key = ++documentKeyCount\n    documentKeys.set(doc, key)\n  }\n  return key\n}\n\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/** The signature field whose menu is open. */\nconst signRequest = shallowRef<SignFieldRequest | null>(null)\n/** The form script's message on show, and how many have been shown. */\nconst alertMessage = shallowRef<string | null>(null)\nconst alertsShown = shallowRef(0)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  ctx.openedToolIds.value = null\n  pages.value = []\n  // Their fields and the document they came from are gone.\n  signRequest.value = null\n  alertMessage.value = null\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  // The tools this viewer registers, from the same inputs; a later `tools` waits for a rebuild.\n  ctx.openedToolIds.value = toolIdsOf(ctx.hostTools.value, ctx.pluginHost.value)\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    pinchZoom: props.pinchZoom,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    // The engine adds the plugins' tools and layers, and decorates through the host, which\n    // reads `decorateAnnotation` first.\n    ...(ctx.pluginHost.value ? { plugins: ctx.pluginHost.value } : {}),\n    // The engine draws the search matches on the pages.\n    ...(ctx.search.value ? { search: ctx.search.value } : {}),\n    // Read through, so the watch below can re-apply a new function without a rebuild.\n    decorateAnnotation: (a) => ctx.decorateAnnotation.value?.(a),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    ...(ctx.formHighlight.value === undefined\n      ? {}\n      : { formHighlight: ctx.formHighlight.value }),\n    // The field's own button again, while its menu is open, closes the menu.\n    onSignField: (req) => {\n      signRequest.value = signRequest.value?.widget === req.widget ? null : req\n    },\n    onFormAction: (a) => ctx.reportFormAction(a),\n    onFormAlert: (message) => {\n      alertMessage.value = message\n      alertsShown.value += 1\n    },\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      // A tool that switches itself (a one-shot tool once used) is reported as a pick.\n      const followTool = (id: ToolId): void => {\n        if (id !== ctx.tool.value) ctx.setTool(id)\n      }\n      stops = [\n        vp.zoom.subscribe(reportZoom),\n        vp.currentPage.subscribe(reportPage),\n        tc.active.subscribe(followTool),\n      ]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  ctx.viewportEl.value = scroll.value\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\n// A new decorateAnnotation re-applies to the mounted annotation elements at once.\nwatch(\n  () => ctx.decorateAnnotation.value,\n  () => engine.value?.redecorate()\n)\n// The tint follows `formHighlight` in place, without a new document.\nwatch(\n  () => ctx.formHighlight.value,\n  (on) => engine.value?.setFormHighlight(on ?? true)\n)\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap, buffer and pinch zoom are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch(\n  [() => props.gap, () => props.buffer, () => props.pinchZoom],\n  ([gap, buffer, pinchZoom]) =>\n    rebuild({ gap, buffer, pinchZoom, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(() => {\n  teardown()\n  if (ctx.viewportEl.value === scroll.value) ctx.viewportEl.value = null\n})\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n    <!-- Keyed by document, so the menu and its dialog start afresh for each one. -->\n    <InkSignFieldPopover\n      :key=\"documentKey(ctx.document.value)\"\n      :request=\"signRequest\"\n      @close=\"signRequest = null\"\n    />\n    <InkFormAlert\n      :message=\"alertMessage\"\n      :shown=\"alertsShown\"\n      :fallback=\"scroll\"\n      @close=\"alertMessage = null\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/InkViewport.vue.d.ts

@@ -8,6 +8,8 @@ type __VLS_Props = {
     gap?: number;
     /** Pages kept mounted either side of the visible ones. */
     buffer?: number;
+    /** Pinch to zoom the pages. Off leaves the browser's own touch handling alone. */
+    pinchZoom?: boolean;
 };
 type __VLS_Slots = {
     loading?(): unknown;
@@ -27,6 +29,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     mode: LayoutMode;
     gap: number;
     buffer: number;
+    pinchZoom: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/InkViewport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkViewport.vue"],"names":[],"mappings":"AAgZA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAe,QAAQ,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,KAAK,EACV,UAAU,EAKV,YAAY,EAEb,MAAM,kBAAkB,CAAA;AAGzB,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAA;IAC3C,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,UAAU,CAAC,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAChD,wFAAwF;IACxF,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAA;CACjE,CAAC;AAwaF,QAAA,MAAM,UAAU;;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkViewport.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkViewport.vue"],"names":[],"mappings":"AAqZA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAe,QAAQ,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,KAAK,EACV,UAAU,EAKV,YAAY,EAEb,MAAM,kBAAkB,CAAA;AAGzB,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAA;IAC3C,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,UAAU,CAAC,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAChD,wFAAwF;IACxF,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAA;CACjE,CAAC;AA2aF,QAAA,MAAM,UAAU;;;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkViewport.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,11 @@ var O = ["data-state"], k = {
 		mode: { default: "continuous" },
 		rotation: { default: 0 },
 		gap: { default: 16 },
-		buffer: { default: 2 }
+		buffer: { default: 2 },
+		pinchZoom: {
+			type: Boolean,
+			default: !0
+		}
 	},
 	setup(p) {
 		let N = p, P = w(), F = e(), I = te("scroll"), L = /* @__PURE__ */ new WeakMap(), R = 0;
@@ -56,6 +60,7 @@ var O = ["data-state"], k = {
 				rotation: N.rotation,
 				gap: N.gap,
 				buffer: N.buffer,
+				pinchZoom: N.pinchZoom,
 				tool: F.tool.value,
 				...F.hostTools.value ? { tools: F.hostTools.value } : {},
 				...F.pluginHost.value ? { plugins: F.pluginHost.value } : {},
@@ -124,9 +129,14 @@ var O = ["data-state"], k = {
 		}), T(() => F.tool.value, (e) => {
 			let t = U.value?.tools;
 			t && t.active.get() !== e && t.set(e);
-		}), T(() => N.mode, (e) => U.value?.viewport.setMode(e)), T(() => N.rotation, (e) => U.value?.viewport.setRotation(e)), T([() => N.gap, () => N.buffer], ([e, t]) => $({
+		}), T(() => N.mode, (e) => U.value?.viewport.setMode(e)), T(() => N.rotation, (e) => U.value?.viewport.setRotation(e)), T([
+			() => N.gap,
+			() => N.buffer,
+			() => N.pinchZoom
+		], ([e, t, n]) => $({
 			gap: e,
 			buffer: t,
+			pinchZoom: n,
 			customAnnotations: !!P.annotation
 		})), g(() => {
 			let e = !!P.annotation;

package/dist/components/InkViewport.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_renderSlot","_createTextVNode","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_createBlock","InkPage","_createSlots","_withCtx","_mergeProps","InkSignFieldPopover","_unref","_createVNode","InkFormAlert","InkFormAlert_default","InkPage_default","InkSignFieldPopover_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","InkViewport_vue_vue_type_script_setup_true_lang_default","props","__props","slots","useSlots","ctx","injectInkContext","scroll","useTemplateRef","documentKeys","documentKeyCount","documentKey","doc","key","pages","shallowRef","state","computed","error","engine","signRequest","alertMessage","alertsShown","build","custom","stops","lastReportedZoom","lastReportedPage","teardown","stop","rebuild","e","opts","setup","el","first","toolIdsOf","mountViewer","a","fn","req","message","id","vp","tc","reportZoom","z","reportPage","p","page","err","onMounted","watch","on","t","m","r","gap","buffer","onBeforeUpdate","next","onBeforeUnmount","openBlock","createElementBlock","renderSlot","_ctx","_cache","createTextVNode","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","createBlock","createSlots","withCtx","mergeProps","slotProps","unref","createVNode"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n *\n * Form fields render in the engine's form layer. A signature field's \"Sign\" opens\n * `InkSignFieldPopover`, and a form script's alert shows in `InkFormAlert`; both are mounted\n * here, so hosts compose nothing for them.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { toolIdsOf } from '../composables/useRegisteredTool'\nimport { injectInkContext } from '../context'\n\nimport InkFormAlert from './InkFormAlert.vue'\nimport InkPage from './InkPage.vue'\nimport InkSignFieldPopover from './InkSignFieldPopover.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkDocument, InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  SignFieldRequest,\n  ToolId,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2 }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** A key per document, so the field menu and its dialog start afresh for each one. */\nconst documentKeys = new WeakMap<InkDocument, number>()\nlet documentKeyCount = 0\nfunction documentKey(doc: InkDocument | null): number {\n  if (!doc) return 0\n  let key = documentKeys.get(doc)\n  if (key === undefined) {\n    key = ++documentKeyCount\n    documentKeys.set(doc, key)\n  }\n  return key\n}\n\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/** The signature field whose menu is open. */\nconst signRequest = shallowRef<SignFieldRequest | null>(null)\n/** The form script's message on show, and how many have been shown. */\nconst alertMessage = shallowRef<string | null>(null)\nconst alertsShown = shallowRef(0)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  ctx.openedToolIds.value = null\n  pages.value = []\n  // Their fields and the document they came from are gone.\n  signRequest.value = null\n  alertMessage.value = null\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  // The tools this viewer registers, from the same inputs; a later `tools` waits for a rebuild.\n  ctx.openedToolIds.value = toolIdsOf(ctx.hostTools.value, ctx.pluginHost.value)\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    // The engine adds the plugins' tools and layers, and decorates through the host, which\n    // reads `decorateAnnotation` first.\n    ...(ctx.pluginHost.value ? { plugins: ctx.pluginHost.value } : {}),\n    // The engine draws the search matches on the pages.\n    ...(ctx.search.value ? { search: ctx.search.value } : {}),\n    // Read through, so the watch below can re-apply a new function without a rebuild.\n    decorateAnnotation: (a) => ctx.decorateAnnotation.value?.(a),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    ...(ctx.formHighlight.value === undefined\n      ? {}\n      : { formHighlight: ctx.formHighlight.value }),\n    // The field's own button again, while its menu is open, closes the menu.\n    onSignField: (req) => {\n      signRequest.value = signRequest.value?.widget === req.widget ? null : req\n    },\n    onFormAction: (a) => ctx.reportFormAction(a),\n    onFormAlert: (message) => {\n      alertMessage.value = message\n      alertsShown.value += 1\n    },\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      // A tool that switches itself (a one-shot tool once used) is reported as a pick.\n      const followTool = (id: ToolId): void => {\n        if (id !== ctx.tool.value) ctx.setTool(id)\n      }\n      stops = [\n        vp.zoom.subscribe(reportZoom),\n        vp.currentPage.subscribe(reportPage),\n        tc.active.subscribe(followTool),\n      ]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  ctx.viewportEl.value = scroll.value\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\n// A new decorateAnnotation re-applies to the mounted annotation elements at once.\nwatch(\n  () => ctx.decorateAnnotation.value,\n  () => engine.value?.redecorate()\n)\n// The tint follows `formHighlight` in place, without a new document.\nwatch(\n  () => ctx.formHighlight.value,\n  (on) => engine.value?.setFormHighlight(on ?? true)\n)\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap and buffer are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch([() => props.gap, () => props.buffer], ([gap, buffer]) =>\n  rebuild({ gap, buffer, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(() => {\n  teardown()\n  if (ctx.viewportEl.value === scroll.value) ctx.viewportEl.value = null\n})\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n    <!-- Keyed by document, so the menu and its dialog start afresh for each one. -->\n    <InkSignFieldPopover\n      :key=\"documentKey(ctx.document.value)\"\n      :request=\"signRequest\"\n      @close=\"signRequest = null\"\n    />\n    <InkFormAlert\n      :message=\"alertMessage\"\n      :shown=\"alertsShown\"\n      :fallback=\"scroll\"\n      @close=\"alertMessage = null\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkViewport.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_renderSlot","_createTextVNode","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_createBlock","InkPage","_createSlots","_withCtx","_mergeProps","InkSignFieldPopover","_unref","_createVNode","InkFormAlert","InkFormAlert_default","InkPage_default","InkSignFieldPopover_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","InkViewport_vue_vue_type_script_setup_true_lang_default","props","__props","slots","useSlots","ctx","injectInkContext","scroll","useTemplateRef","documentKeys","documentKeyCount","documentKey","doc","key","pages","shallowRef","state","computed","error","engine","signRequest","alertMessage","alertsShown","build","custom","stops","lastReportedZoom","lastReportedPage","teardown","stop","rebuild","e","opts","setup","el","first","toolIdsOf","mountViewer","a","fn","req","message","id","vp","tc","reportZoom","z","reportPage","p","page","err","onMounted","watch","on","t","m","r","gap","buffer","pinchZoom","onBeforeUpdate","next","onBeforeUnmount","openBlock","createElementBlock","renderSlot","_ctx","_cache","createTextVNode","createElementVNode","toDisplayString","createCommentVNode","Fragment","renderList","createBlock","createSlots","withCtx","mergeProps","slotProps","unref","createVNode"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n *\n * Form fields render in the engine's form layer. A signature field's \"Sign\" opens\n * `InkSignFieldPopover`, and a form script's alert shows in `InkFormAlert`; both are mounted\n * here, so hosts compose nothing for them.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { toolIdsOf } from '../composables/useRegisteredTool'\nimport { injectInkContext } from '../context'\n\nimport InkFormAlert from './InkFormAlert.vue'\nimport InkPage from './InkPage.vue'\nimport InkSignFieldPopover from './InkSignFieldPopover.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkDocument, InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  SignFieldRequest,\n  ToolId,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n    /** Pinch to zoom the pages. Off leaves the browser's own touch handling alone. */\n    pinchZoom?: boolean\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2, pinchZoom: true }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** A key per document, so the field menu and its dialog start afresh for each one. */\nconst documentKeys = new WeakMap<InkDocument, number>()\nlet documentKeyCount = 0\nfunction documentKey(doc: InkDocument | null): number {\n  if (!doc) return 0\n  let key = documentKeys.get(doc)\n  if (key === undefined) {\n    key = ++documentKeyCount\n    documentKeys.set(doc, key)\n  }\n  return key\n}\n\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/** The signature field whose menu is open. */\nconst signRequest = shallowRef<SignFieldRequest | null>(null)\n/** The form script's message on show, and how many have been shown. */\nconst alertMessage = shallowRef<string | null>(null)\nconst alertsShown = shallowRef(0)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  ctx.openedToolIds.value = null\n  pages.value = []\n  // Their fields and the document they came from are gone.\n  signRequest.value = null\n  alertMessage.value = null\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  // The tools this viewer registers, from the same inputs; a later `tools` waits for a rebuild.\n  ctx.openedToolIds.value = toolIdsOf(ctx.hostTools.value, ctx.pluginHost.value)\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    pinchZoom: props.pinchZoom,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    // The engine adds the plugins' tools and layers, and decorates through the host, which\n    // reads `decorateAnnotation` first.\n    ...(ctx.pluginHost.value ? { plugins: ctx.pluginHost.value } : {}),\n    // The engine draws the search matches on the pages.\n    ...(ctx.search.value ? { search: ctx.search.value } : {}),\n    // Read through, so the watch below can re-apply a new function without a rebuild.\n    decorateAnnotation: (a) => ctx.decorateAnnotation.value?.(a),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    ...(ctx.formHighlight.value === undefined\n      ? {}\n      : { formHighlight: ctx.formHighlight.value }),\n    // The field's own button again, while its menu is open, closes the menu.\n    onSignField: (req) => {\n      signRequest.value = signRequest.value?.widget === req.widget ? null : req\n    },\n    onFormAction: (a) => ctx.reportFormAction(a),\n    onFormAlert: (message) => {\n      alertMessage.value = message\n      alertsShown.value += 1\n    },\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      // A tool that switches itself (a one-shot tool once used) is reported as a pick.\n      const followTool = (id: ToolId): void => {\n        if (id !== ctx.tool.value) ctx.setTool(id)\n      }\n      stops = [\n        vp.zoom.subscribe(reportZoom),\n        vp.currentPage.subscribe(reportPage),\n        tc.active.subscribe(followTool),\n      ]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  ctx.viewportEl.value = scroll.value\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\n// A new decorateAnnotation re-applies to the mounted annotation elements at once.\nwatch(\n  () => ctx.decorateAnnotation.value,\n  () => engine.value?.redecorate()\n)\n// The tint follows `formHighlight` in place, without a new document.\nwatch(\n  () => ctx.formHighlight.value,\n  (on) => engine.value?.setFormHighlight(on ?? true)\n)\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap, buffer and pinch zoom are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch(\n  [() => props.gap, () => props.buffer, () => props.pinchZoom],\n  ([gap, buffer, pinchZoom]) =>\n    rebuild({ gap, buffer, pinchZoom, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(() => {\n  teardown()\n  if (ctx.viewportEl.value === scroll.value) ctx.viewportEl.value = null\n})\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n    <!-- Keyed by document, so the menu and its dialog start afresh for each one. -->\n    <InkSignFieldPopover\n      :key=\"documentKey(ctx.document.value)\"\n      :request=\"signRequest\"\n      @close=\"signRequest = null\"\n    />\n    <InkFormAlert\n      :message=\"alertMessage\"\n      :shown=\"alertsShown\"\n      :fallback=\"scroll\"\n      @close=\"alertMessage = null\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/vue",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Vue 3 components and composables for Inkbar, the browser PDF viewer and editor.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",
@@ -24,17 +24,17 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@inkbar/icons": "^0.10.0",
+    "@inkbar/icons": "^0.11.0",
     "reka-ui": "^2.11.0"
   },
   "peerDependencies": {
-    "@inkbar/core": "^0.10.0",
+    "@inkbar/core": "^0.11.0",
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@inkbar/core": "0.10.0",
+    "@inkbar/core": "0.11.0",
     "@inkbar/fixtures": "0.0.0",
-    "@inkbar/theme": "0.10.0",
+    "@inkbar/theme": "0.11.0",
     "@axe-core/playwright": "^4.13.0",
     "@playwright/experimental-ct-vue": "1.62.1",
     "@playwright/test": "1.62.1",