kviewer 0.0.9 → 0.0.10

package/dist/runtime/components/Viewer.vue

@@ -8,8 +8,8 @@
     <div class="relative flex-1 min-h-0">
       <div
         ref="scrollContainer"
-        class="absolute inset-0 overflow-auto bg-muted/50"
-        :class="{ 'overflow-hidden': isSinglePageMode }"
+        class="absolute inset-0 overflow-hidden bg-[#F0F3F5] dark:bg-muted/50"
+        style="overscroll-behavior: none"
         data-testid="viewer-scroll"
       >
         <!-- Error state -->
@@ -39,24 +39,29 @@
         </div>
 
         <ClientOnly v-else>
-          <!-- Single-page-at-a-time mode -->
+          <!-- Single-page mode with panzoom for pinch-to-zoom -->
           <div
             v-if="isSinglePageMode && singlePageMeta"
-            class="flex flex-col items-center py-4"
-            :style="{ minHeight: '100%' }"
+            class="panzoom-viewport"
           >
             <div
-              :ref="(el) => onPageRef(singlePageMeta.pageNumber, el)"
-              :style="pageSlotStyle(singlePageMeta)"
-              class="kviewer-page-slot"
+              ref="zoomWrapper"
+              class="flex flex-col items-center justify-center p-4"
+              :style="{ minHeight: '100%' }"
             >
-              <div :style="pageRotationStyle(singlePageMeta)">
-                <PdfPage
-                  :key="singlePageMeta.pageNumber"
-                  :page-number="singlePageMeta.pageNumber"
-                  :page-meta="singlePageMeta"
-                  :scale="pageScale"
-                />
+              <div
+                :ref="(el) => onPageRef(singlePageMeta.pageNumber, el)"
+                :style="pageSlotStyle(singlePageMeta)"
+                class="kviewer-page-slot"
+              >
+                <div :style="pageRotationStyle(singlePageMeta)">
+                  <PdfPage
+                    :key="singlePageMeta.pageNumber"
+                    :page-number="singlePageMeta.pageNumber"
+                    :page-meta="singlePageMeta"
+                    :scale="pageScale"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -64,38 +69,14 @@
           <!-- Continuous scroll — single-page layout -->
           <div
             v-else-if="pageSettings.layoutMode.value === 'single'"
-            class="flex flex-col items-center gap-4 py-4"
+            class="panzoom-viewport"
           >
             <div
-              v-for="meta in pageMetas"
-              :key="meta.pageNumber"
-              :ref="(el) => onPageRef(meta.pageNumber, el)"
-              :style="pageSlotStyle(meta)"
-              class="kviewer-page-slot"
-            >
-              <div :style="pageRotationStyle(meta)">
-                <PdfPage
-                  v-if="isPageRendered(meta.pageNumber)"
-                  :page-number="meta.pageNumber"
-                  :page-meta="meta"
-                  :scale="pageScale"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- Continuous scroll — two-page (side-by-side) layout -->
-          <div
-            v-else
-            class="flex flex-col items-center gap-4 py-4"
-          >
-            <div
-              v-for="(pair, index) in pagedPairs"
-              :key="index"
-              class="flex gap-4"
+              ref="zoomWrapper"
+              class="flex flex-col gap-4 p-4"
             >
               <div
-                v-for="meta in pair"
+                v-for="meta in pageMetas"
                 :key="meta.pageNumber"
                 :ref="(el) => onPageRef(meta.pageNumber, el)"
                 :style="pageSlotStyle(meta)"
@@ -112,6 +93,40 @@
               </div>
             </div>
           </div>
+
+          <!-- Continuous scroll — two-page (side-by-side) layout -->
+          <div
+            v-else
+            class="panzoom-viewport"
+          >
+            <div
+              ref="zoomWrapper"
+              class="flex flex-col gap-4 p-4"
+            >
+              <div
+                v-for="(pair, index) in pagedPairs"
+                :key="index"
+                class="flex gap-4"
+              >
+                <div
+                  v-for="meta in pair"
+                  :key="meta.pageNumber"
+                  :ref="(el) => onPageRef(meta.pageNumber, el)"
+                  :style="pageSlotStyle(meta)"
+                  class="kviewer-page-slot"
+                >
+                  <div :style="pageRotationStyle(meta)">
+                    <PdfPage
+                      v-if="isPageRendered(meta.pageNumber)"
+                      :page-number="meta.pageNumber"
+                      :page-meta="meta"
+                      :scale="pageScale"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </ClientOnly>
       </div>
 
@@ -136,6 +151,16 @@
         @submit="onFreeTextSubmit"
         @cancel="onFreeTextCancel"
       />
+      <!-- iOS focus bridge: focused synchronously in the tap handler so the
+           keyboard pops up; modal textarea takes over on mount without
+           closing the keyboard. -->
+      <input
+        ref="iosFocusBridge"
+        type="text"
+        aria-hidden="true"
+        tabindex="-1"
+        class="ios-focus-bridge"
+      >
     </ClientOnly>
   </div>
 </template>
@@ -174,7 +199,8 @@ import { createPageProxyCache } from "../composables/usePageProxyCache";
 import { createSearchIndex } from "../composables/useSearchIndex";
 import { createShapeDetection } from "../composables/useShapeDetection";
 import { provideFormFields } from "../composables/useFormFields";
-import { isIPad, getTouchDistance, getTouchCenter, clampScale } from "../annotation/engine/input-device";
+import { isIPad } from "../annotation/engine/input-device";
+import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 const props = defineProps({
   source: { type: null, required: true },
   textLayer: { type: Boolean, required: false },
@@ -204,8 +230,12 @@ const virtualization = createPageVirtualization();
 setScrollToPageFn((pageNumber) => {
   if (isSinglePageMode.value) {
     viewerState.currentPage.value = pageNumber;
-  } else {
-    virtualization.scrollToPage(pageNumber);
+    return;
+  }
+  const el = virtualization.getPageElement(pageNumber);
+  if (el) {
+    inertiaPanzoom.scrollToElement(el, { block: "start" });
+    viewerState.currentPage.value = pageNumber;
   }
 });
 const proxyCache = createPageProxyCache();
@@ -241,6 +271,8 @@ const isRotatedSideways = computed(() => {
   const r = pageSettings.rotation.value;
   return r === 90 || r === 270;
 });
+const zoomWrapper = ref(null);
+const inertiaPanzoom = useInertiaPanzoom({ minScale: 0.5, maxScale: 4 });
 function pageSlotStyle(meta) {
   const s = pageScale.value;
   if (isRotatedSideways.value) {
@@ -297,8 +329,10 @@ const pagedPairs = computed(() => {
 });
 const freeTextModalOpen = ref(false);
 const freeTextDefaults = ref({ color: "#ff0000", fontSize: 18 });
+const iosFocusBridge = ref(null);
 let freeTextResolve = null;
 function onRequestTextInput(opts) {
+  iosFocusBridge.value?.focus({ preventScroll: true });
   return new Promise((resolve) => {
     freeTextDefaults.value = {
       color: opts.defaultColor,
@@ -342,6 +376,12 @@ async function loadDocument() {
     viewerState.doc.value = pdfDoc;
     viewerState.totalPages.value = pdfDoc.numPages;
     proxyCache.setDocument(pdfDoc);
+    if (!scrollContainer.value) {
+      await nextTick();
+    }
+    if (!scrollContainer.value) {
+      throw new Error("Scroll container not available");
+    }
     await virtualization.init(pdfDoc, scrollContainer.value);
     const metas = virtualization.pageMetas.value;
     if (metas.length > 0) {
@@ -378,7 +418,17 @@ async function loadDocument() {
       );
     }
     viewerSearch.setScrollToPage((pageNumber) => {
-      virtualization.scrollToPage(pageNumber);
+      if (isSinglePageMode.value) {
+        viewerState.currentPage.value = pageNumber;
+        return;
+      }
+      const el = virtualization.getPageElement(pageNumber);
+      if (el) inertiaPanzoom.scrollToElement(el, { block: "start" });
+    });
+    viewerSearch.setScrollToElement((el) => {
+      if (!isSinglePageMode.value) {
+        inertiaPanzoom.scrollToElement(el, { block: "center" });
+      }
     });
     searchIndex.buildIndex(pdfDoc).then(() => {
       viewerSearch.setSearchIndex({
@@ -481,116 +531,97 @@ async function importAnnotations(annotations, options) {
 function getKonvaCanvasState() {
   return painter?.getCanvasState() ?? {};
 }
-let pinchActive = false;
-let pinchStartDistance = 0;
-let pinchStartScale = 1;
-let pinchCurrentRatio = 1;
-let pinchOriginX = 0;
-let pinchOriginY = 0;
-let pinchStartViewportX = 0;
-let pinchStartViewportY = 0;
-let pinchCurrentViewportX = 0;
-let pinchCurrentViewportY = 0;
-function getPinchTarget() {
-  return scrollContainer.value?.firstElementChild;
-}
-function onPinchTouchStart(e) {
-  if (!viewerState.stylusMode.value) return;
-  if (e.touches.length === 2) {
-    const sc = scrollContainer.value;
-    const scRect = sc.getBoundingClientRect();
-    const center = getTouchCenter(e.touches[0], e.touches[1]);
-    pinchActive = true;
-    pinchStartDistance = getTouchDistance(e.touches[0], e.touches[1]);
-    pinchStartScale = viewerState.scale.value;
-    pinchCurrentRatio = 1;
-    pinchStartViewportX = center.x - scRect.left;
-    pinchStartViewportY = center.y - scRect.top;
-    pinchCurrentViewportX = pinchStartViewportX;
-    pinchCurrentViewportY = pinchStartViewportY;
-    pinchOriginX = pinchStartViewportX + sc.scrollLeft;
-    pinchOriginY = pinchStartViewportY + sc.scrollTop;
-    const target = getPinchTarget();
-    if (target) {
-      target.style.transformOrigin = `${pinchOriginX}px ${pinchOriginY}px`;
-      target.style.willChange = "transform";
-    }
-  }
-}
-function onPinchTouchMove(e) {
-  if (!viewerState.stylusMode.value || !pinchActive || e.touches.length < 2) return;
-  e.preventDefault();
-  const sc = scrollContainer.value;
-  if (!sc) return;
-  const scRect = sc.getBoundingClientRect();
-  const currentDistance = getTouchDistance(e.touches[0], e.touches[1]);
-  pinchCurrentRatio = currentDistance / pinchStartDistance;
-  const clamped = clampScale(pinchStartScale * pinchCurrentRatio);
-  pinchCurrentRatio = clamped / pinchStartScale;
-  const center = getTouchCenter(e.touches[0], e.touches[1]);
-  pinchCurrentViewportX = center.x - scRect.left;
-  pinchCurrentViewportY = center.y - scRect.top;
-  const target = getPinchTarget();
-  if (target) target.style.transform = `scale(${pinchCurrentRatio})`;
-  sc.scrollLeft = pinchOriginX * pinchCurrentRatio - pinchCurrentViewportX;
-  sc.scrollTop = pinchOriginY * pinchCurrentRatio - pinchCurrentViewportY;
-}
-function onPinchTouchEnd(e) {
-  if (e.touches.length < 2 && pinchActive) {
-    pinchActive = false;
-    const target = getPinchTarget();
-    if (target) {
-      target.style.transform = "";
-      target.style.willChange = "";
-    }
-    const finalScale = clampScale(pinchStartScale * pinchCurrentRatio);
-    if (Math.abs(finalScale - pinchStartScale) > 0.01) {
-      const layoutRatio = finalScale / pinchStartScale;
-      const newScrollLeft = pinchOriginX * layoutRatio - pinchCurrentViewportX;
-      const newScrollTop = pinchOriginY * layoutRatio - pinchCurrentViewportY;
-      viewerState.setScale(finalScale);
-      nextTick(() => {
-        const sc = scrollContainer.value;
-        if (sc) {
-          sc.scrollLeft = newScrollLeft;
-          sc.scrollTop = newScrollTop;
-        }
-      });
-    }
-    pinchCurrentRatio = 1;
-  }
+function initPanzoom() {
+  inertiaPanzoom.detach();
+  if (!zoomWrapper.value) return;
+  inertiaPanzoom.attach(zoomWrapper.value);
 }
 let wheelCooldown = false;
-function onSinglePageWheel(event) {
-  if (!isSinglePageMode.value) return;
-  event.preventDefault();
-  if (wheelCooldown) return;
-  wheelCooldown = true;
-  setTimeout(() => {
-    wheelCooldown = false;
-  }, 300);
-  const total = viewerState.totalPages.value;
-  const cur = viewerState.currentPage.value;
-  if (event.deltaY > 0 && cur < total) {
-    viewerState.currentPage.value = cur + 1;
-  } else if (event.deltaY < 0 && cur > 1) {
-    viewerState.currentPage.value = cur - 1;
-  }
-}
-function onGlobalKeydown(event) {
-  if (!props.active) return;
+function onWheel(event) {
+  if (event.ctrlKey || event.metaKey) return;
   if (isSinglePageMode.value) {
+    event.preventDefault();
+    if (wheelCooldown) return;
+    wheelCooldown = true;
+    setTimeout(() => {
+      wheelCooldown = false;
+    }, 300);
     const total = viewerState.totalPages.value;
     const cur = viewerState.currentPage.value;
-    if ((event.key === "ArrowDown" || event.key === "PageDown") && cur < total) {
-      event.preventDefault();
+    if (event.deltaY > 0 && cur < total) {
       viewerState.currentPage.value = cur + 1;
-      return;
-    }
-    if ((event.key === "ArrowUp" || event.key === "PageUp") && cur > 1) {
-      event.preventDefault();
+    } else if (event.deltaY < 0 && cur > 1) {
       viewerState.currentPage.value = cur - 1;
-      return;
+    }
+    return;
+  }
+  event.preventDefault();
+  const dx = event.shiftKey ? event.deltaY : event.deltaX;
+  const dy = event.shiftKey ? 0 : event.deltaY;
+  inertiaPanzoom.scrollBy(dx, dy);
+}
+function isTextInputTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+}
+function onGlobalKeydown(event) {
+  if (!props.active) return;
+  const typing = isTextInputTarget(event.target);
+  if (!typing) {
+    if (isSinglePageMode.value) {
+      const total = viewerState.totalPages.value;
+      const cur = viewerState.currentPage.value;
+      if ((event.key === "ArrowDown" || event.key === "PageDown") && cur < total) {
+        event.preventDefault();
+        viewerState.currentPage.value = cur + 1;
+        return;
+      }
+      if ((event.key === "ArrowUp" || event.key === "PageUp") && cur > 1) {
+        event.preventDefault();
+        viewerState.currentPage.value = cur - 1;
+        return;
+      }
+    } else {
+      const vh = scrollContainer.value?.clientHeight ?? 600;
+      const arrowStep = 40;
+      const pageStep = Math.max(100, vh * 0.9);
+      const BIG = 1e9;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, arrowStep);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -arrowStep);
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(arrowStep, 0);
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(-arrowStep, 0);
+          return;
+        case "PageDown":
+        case " ":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, pageStep);
+          return;
+        case "PageUp":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -pageStep);
+          return;
+        case "Home":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, -BIG);
+          return;
+        case "End":
+          event.preventDefault();
+          inertiaPanzoom.scrollBy(0, BIG);
+          return;
+      }
     }
   }
   const isFindShortcut = (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "f";
@@ -611,7 +642,12 @@ onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
     onRequestTextInput,
-    freehandGroupingDelay: props.freehandGroupingDelay
+    freehandGroupingDelay: props.freehandGroupingDelay,
+    // Suspend panzoom gestures while an annotation is being dragged or
+    // transformed. Otherwise single-finger pan runs in parallel with the
+    // Konva shape drag on mobile and the two CSS transforms fight every
+    // frame, making text drag feel laggy.
+    setExternalGesturesEnabled: (enabled) => inertiaPanzoom.setGesturesEnabled(enabled)
   });
   viewerState.selectTool(viewerState.activeTool.value);
   if (props.stamps) viewerState.stamps.value = props.stamps;
@@ -630,14 +666,26 @@ onMounted(() => {
       }
     });
     resizeObserver.observe(scrollContainer.value);
-    scrollContainer.value.addEventListener("scroll", () => {
-      viewerState.selectionRect.value = null;
-    }, { passive: true });
-    scrollContainer.value.addEventListener("wheel", onSinglePageWheel, { passive: false });
-    scrollContainer.value.addEventListener("touchstart", onPinchTouchStart, { passive: true });
-    scrollContainer.value.addEventListener("touchmove", onPinchTouchMove, { passive: false });
-    scrollContainer.value.addEventListener("touchend", onPinchTouchEnd, { passive: true });
-    scrollContainer.value.addEventListener("touchcancel", onPinchTouchEnd, { passive: true });
+    scrollContainer.value.addEventListener("wheel", onWheel, { passive: false });
+    inertiaPanzoom.onChange(() => {
+      if (viewerState.selectionRect.value) viewerState.selectionRect.value = null;
+      if (!isSinglePageMode.value) virtualization.updateCurrentPageByRect();
+    });
+    nextTick(() => initPanzoom());
+    watch(
+      [isSinglePageMode, () => pageSettings.layoutMode.value],
+      () => nextTick(() => initPanzoom())
+    );
+    watch(
+      [() => viewerState.activeTool.value, () => viewerState.stylusMode.value],
+      ([tool, stylusMode]) => {
+        const enable = stylusMode || tool === "hand";
+        inertiaPanzoom.setGesturesEnabled(enable);
+      },
+      { immediate: true }
+    );
+    watch(() => viewerState.scale.value, () => inertiaPanzoom.reset());
+    watch(() => viewerState.currentPage.value, () => inertiaPanzoom.reset());
   }
   if (isIPad()) {
     viewerState.setStylusMode(true);
@@ -687,11 +735,8 @@ watch(
 );
 onBeforeUnmount(() => {
   window.removeEventListener("keydown", onGlobalKeydown);
-  scrollContainer.value?.removeEventListener("wheel", onSinglePageWheel);
-  scrollContainer.value?.removeEventListener("touchstart", onPinchTouchStart);
-  scrollContainer.value?.removeEventListener("touchmove", onPinchTouchMove);
-  scrollContainer.value?.removeEventListener("touchend", onPinchTouchEnd);
-  scrollContainer.value?.removeEventListener("touchcancel", onPinchTouchEnd);
+  scrollContainer.value?.removeEventListener("wheel", onWheel);
+  inertiaPanzoom.detach();
   resizeObserver?.disconnect();
   viewerSearch.reset();
   shapeDetectionCache.clearAllShapeCache();
@@ -710,3 +755,7 @@ defineExpose({
   setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value)
 });
 </script>
+
+<style scoped>
+.kviewer-page-slot{margin-left:auto;margin-right:auto}.panzoom-viewport{height:100%;overflow:hidden;position:relative;width:100%}.ios-focus-bridge{border:0;font-size:16px;height:1px;left:0;opacity:0;padding:0;pointer-events:none;position:fixed;top:0;width:1px;z-index:-1}
+</style>

package/dist/runtime/components/modals/FreeTextModal.vue

@@ -7,10 +7,10 @@
     <template #body>
       <div class="flex flex-col gap-3">
         <UTextarea
+          ref="textareaRef"
           v-model="inputValue"
           placeholder="Start typing..."
           :rows="3"
-          autofocus
         />
         <div class="flex items-center justify-between">
           <div class="flex gap-1">
@@ -22,6 +22,7 @@
   c === currentColor ? 'border-white ring-2 ring-blue-500' : 'border-transparent'
 "
               :style="{ backgroundColor: c }"
+              @pointerdown="onPreserveFocus"
               @click="currentColor = c"
             />
           </div>
@@ -39,14 +40,19 @@
         <UButton variant="ghost" color="neutral" @click="cancel">
           Cancel
         </UButton>
-        <UButton :disabled="!inputValue.trim()" @click="submit">OK</UButton>
+        <UButton
+          :disabled="!inputValue.trim()"
+          @click="submit"
+        >
+          OK
+        </UButton>
       </div>
     </template>
   </UModal>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, nextTick } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
 const props = defineProps({
   open: { type: Boolean, required: true },
@@ -55,6 +61,20 @@ const props = defineProps({
   initialText: { type: String, required: false }
 });
 const emit = defineEmits(["update:open", "submit", "cancel"]);
+const textareaRef = ref(null);
+function focusTextarea() {
+  const instance = textareaRef.value;
+  if (!instance) return;
+  const el = instance.inputRef ?? instance.$el?.querySelector?.("textarea") ?? instance;
+  if (el && typeof el.focus === "function") {
+    el.focus();
+    const len = el.value?.length ?? 0;
+    try {
+      el.setSelectionRange(len, len);
+    } catch {
+    }
+  }
+}
 const isOpen = ref(props.open);
 watch(
   () => props.open,
@@ -64,6 +84,7 @@ watch(
       inputValue.value = props.initialText ?? "";
       currentColor.value = props.defaultColor;
       currentFontSize.value = String(props.defaultFontSize);
+      nextTick(() => requestAnimationFrame(() => focusTextarea()));
     }
   }
 );
@@ -86,4 +107,7 @@ function submit() {
 function cancel() {
   emit("cancel");
 }
+function onPreserveFocus(e) {
+  if (e.pointerType === "mouse") e.preventDefault();
+}
 </script>

package/dist/runtime/components/tools/ActionTools.vue

@@ -18,11 +18,9 @@
       :disabled="!state.history.canRedo.value"
       @click="state.history.redo"
     />
-    <UButton
-      icon="i-lucide-eraser"
-      :variant="state.activeTool.value === 'eraser' ? 'soft' : 'ghost'"
-      color="neutral"
-      size="sm"
+    <ToolButton
+      :tool="{ name: 'Eraser', icon: 'i-lucide-eraser' }"
+      :active="state.activeTool.value === 'eraser'"
       data-testid="action-eraser"
       @click="state.selectTool('eraser')"
     />
@@ -31,5 +29,6 @@
 
 <script setup>
 import { useViewerState } from "../../composables/useViewerState";
+import ToolButton from "../ToolButton.vue";
 const state = useViewerState();
 </script>

package/dist/runtime/composables/useAnnotationEngine.d.ts

@@ -5,4 +5,5 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
     freehandGroupingDelay?: number;
+    setExternalGesturesEnabled?: (enabled: boolean) => void;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -21,6 +21,8 @@ export function createAnnotationEngine(viewerState, options) {
         if (annotationStore.type === AnnotationType.FREETEXT) {
           viewerState.painter.value?.selectAnnotation(annotationStore.id);
         }
+      } else {
+        viewerState.history.rebaseline();
       }
     },
     onStoreDelete: (id) => {
@@ -65,7 +67,8 @@ export function createAnnotationEngine(viewerState, options) {
     callbacks,
     getStylusModeEnabled: () => viewerState.stylusMode.value,
     getReadonly: () => viewerState.readonly.value,
-    freehandGroupingDelay: options.freehandGroupingDelay
+    freehandGroupingDelay: options.freehandGroupingDelay,
+    setExternalGesturesEnabled: options.setExternalGesturesEnabled
   });
   viewerState.painter.value = painter;
   return painter;

package/dist/runtime/composables/useAnnotationHistory.d.ts

@@ -6,6 +6,7 @@ export interface AnnotationHistory {
     undo: () => void;
     redo: () => void;
     reset: () => void;
+    rebaseline: () => void;
     canUndo: ComputedRef<boolean>;
     canRedo: ComputedRef<boolean>;
 }

package/dist/runtime/composables/useAnnotationHistory.js

@@ -6,15 +6,19 @@ function cloneAnnotations(map) {
 export function createAnnotationHistory(annotations, painter) {
   const undoStack = ref([]);
   const redoStack = ref([]);
+  let baseline = cloneAnnotations(annotations.value);
   const canUndo = computed(() => undoStack.value.length > 0);
   const canRedo = computed(() => redoStack.value.length > 0);
   function commit() {
-    const snapshot = cloneAnnotations(annotations.value);
-    undoStack.value.push(snapshot);
+    undoStack.value.push(baseline);
     if (undoStack.value.length > MAX_HISTORY) {
       undoStack.value.shift();
     }
     redoStack.value = [];
+    baseline = cloneAnnotations(annotations.value);
+  }
+  function rebaseline() {
+    baseline = cloneAnnotations(annotations.value);
   }
   function restoreSnapshot(target) {
     const p = painter.value;
@@ -53,6 +57,7 @@ export function createAnnotationHistory(annotations, painter) {
     redoStack.value.push(currentSnapshot);
     const target = undoStack.value.pop();
     restoreSnapshot(target);
+    baseline = cloneAnnotations(annotations.value);
   }
   function redo() {
     if (!canRedo.value) return;
@@ -60,10 +65,12 @@ export function createAnnotationHistory(annotations, painter) {
     undoStack.value.push(currentSnapshot);
     const target = redoStack.value.pop();
     restoreSnapshot(target);
+    baseline = cloneAnnotations(annotations.value);
   }
   function reset() {
     undoStack.value = [];
     redoStack.value = [];
+    baseline = cloneAnnotations(annotations.value);
   }
-  return { commit, undo, redo, reset, canUndo, canRedo };
+  return { commit, undo, redo, reset, rebaseline, canUndo, canRedo };
 }