kviewer 0.0.8 → 0.0.10

package/dist/runtime/components/ToolButton.d.vue.ts

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };

package/dist/runtime/components/ToolButton.vue.d.ts

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };

package/dist/runtime/components/Viewer.d.vue.ts

@@ -15,6 +15,8 @@ type __VLS_Props = {
     shapeDetection?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
+    /** Delay in ms before consecutive freehand strokes are finalized as a single annotation. Set to 0 to disable grouping. Default: 1000. */
+    freehandGroupingDelay?: number;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -40,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     userName: string;
+    freehandGroupingDelay: number;
     zoom: number;
     readonly: boolean;
     active: boolean;

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"
-          >
-            <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"
+            class="panzoom-viewport"
           >
             <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 },
@@ -185,7 +211,8 @@ const props = defineProps({
   zoom: { type: Number, required: false, default: 1 },
   readonly: { type: Boolean, required: false, default: false },
   shapeDetection: { type: Boolean, required: false, default: false },
-  active: { type: Boolean, required: false, default: true }
+  active: { type: Boolean, required: false, default: true },
+  freehandGroupingDelay: { type: Number, required: false, default: 1e3 }
 });
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
@@ -203,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();
@@ -240,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) {
@@ -296,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,
@@ -341,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) {
@@ -377,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({
@@ -480,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";
@@ -609,7 +641,13 @@ function onGlobalKeydown(event) {
 onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
-    onRequestTextInput
+    onRequestTextInput,
+    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;
@@ -628,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);
@@ -674,13 +724,19 @@ watch(
     viewerState.stamps.value = newStamps ?? [];
   }
 );
+watch(
+  () => props.signatureHandlers,
+  (newHandlers) => {
+    viewerState.signatureHandlers = newHandlers ?? null;
+    if (newHandlers) {
+      viewerState.loadSignatures();
+    }
+  }
+);
 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();
@@ -699,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/Viewer.vue.d.ts

@@ -15,6 +15,8 @@ type __VLS_Props = {
     shapeDetection?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
+    /** Delay in ms before consecutive freehand strokes are finalized as a single annotation. Set to 0 to disable grouping. Default: 1000. */
+    freehandGroupingDelay?: number;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -40,6 +42,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     userName: string;
+    freehandGroupingDelay: number;
     zoom: number;
     readonly: boolean;
     active: boolean;

package/dist/runtime/components/form-fields/FormSignatureField.vue

@@ -14,17 +14,27 @@
       Click to sign
     </span>
   </div>
+
+  <ClientOnly>
+    <SignatureDrawModal
+      v-model:open="drawModalOpen"
+      @submit="onDrawSubmit"
+      @cancel="drawModalOpen = false"
+    />
+  </ClientOnly>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
+import SignatureDrawModal from "../modals/SignatureDrawModal.vue";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
 const state = useViewerState();
+const drawModalOpen = ref(false);
 const signatureUrl = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   if (!fv || typeof fv.value !== "string" || fv.value === "") return null;
@@ -50,5 +60,17 @@ async function onClickSign() {
       }
     }
   }
+  drawModalOpen.value = true;
+}
+async function onDrawSubmit(imageUrl) {
+  drawModalOpen.value = false;
+  if (state.signatureHandlers) {
+    const saved = await state.saveSignature(imageUrl);
+    if (saved) {
+      formFields.setFieldValue(props.field.id, saved.imageUrl);
+      return;
+    }
+  }
+  formFields.setFieldValue(props.field.id, imageUrl);
 }
 </script>