kviewer 0.0.8 → 0.0.9

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { ExportPdfOptions } from '../dist/runtime/public-types.js';
+export { ExportPdfOptions, SignatureData, SignatureHandlers, ViewMode } from '../dist/runtime/public-types.js';
 
 interface ModuleOptions {
     /**

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "kviewer",
   "configKey": "kviewer",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/annotation/engine/editor/editor.d.ts

@@ -10,6 +10,8 @@ export interface IEditorOptions {
     onChange: (id: string, updates: Partial<IAnnotationStore>) => void;
     /** When provided and returns true, only pen/mouse input can draw. */
     getStylusModeEnabled?: () => boolean;
+    /** Delay in ms before consecutive freehand strokes are finalized as a single annotation. */
+    freehandGroupingDelay?: number;
 }
 export interface IShapeGroup {
     id: string;
@@ -30,8 +32,9 @@ export declare abstract class Editor {
     shapeGroupStore: Map<string, IShapeGroup>;
     currentShapeGroup: IShapeGroup | null;
     protected getStylusModeEnabled?: () => boolean;
+    protected freehandGroupingDelay: number;
     static MinSize: number;
-    constructor({ userName, konvaStage, pageNumber, annotation, onAdd, editorType, onChange, getStylusModeEnabled, }: IEditorOptions & {
+    constructor({ userName, konvaStage, pageNumber, annotation, onAdd, editorType, onChange, getStylusModeEnabled, freehandGroupingDelay, }: IEditorOptions & {
         editorType: AnnotationType;
     });
     private dispatchAddEvent;
@@ -65,5 +68,5 @@ export declare abstract class Editor {
         [pageNumber: number]: number;
     };
     static TimerClear(pageNumber: number): void;
-    static TimerStart(pageNumber: number, callback: (pageNumber: number) => void): void;
+    static TimerStart(pageNumber: number, callback: (pageNumber: number) => void, delay?: number): void;
 }

package/dist/runtime/annotation/engine/editor/editor.js

@@ -14,6 +14,7 @@ export class Editor {
   shapeGroupStore = /* @__PURE__ */ new Map();
   currentShapeGroup;
   getStylusModeEnabled;
+  freehandGroupingDelay;
   static MinSize = 8;
   constructor({
     userName,
@@ -23,7 +24,8 @@ export class Editor {
     onAdd,
     editorType,
     onChange,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    freehandGroupingDelay
   }) {
     this.userName = userName;
     this.id = `${pageNumber}_${editorType}`;
@@ -36,6 +38,7 @@ export class Editor {
     this.onChange = onChange || (() => {
     });
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.freehandGroupingDelay = freehandGroupingDelay ?? 1e3;
     this.disableEditMode();
     this.enableEditMode();
   }
@@ -235,11 +238,11 @@ export class Editor {
       window.clearTimeout(timer);
     }
   }
-  static TimerStart(pageNumber, callback) {
+  static TimerStart(pageNumber, callback, delay = 1e3) {
     Editor.Timer[pageNumber] = window.setTimeout(() => {
       if (typeof callback === "function") {
         callback(pageNumber);
       }
-    }, 1e3);
+    }, delay);
   }
 }

package/dist/runtime/annotation/engine/editor/selector.d.ts

@@ -66,6 +66,17 @@ export declare class Selector {
     activateMarquee(pageNumber: number): void;
     private bindMarqueeEvents;
     private rectsIntersect;
+    /**
+     * Check whether a line segment intersects an axis-aligned rectangle
+     * (expanded by `tolerance` on each side to match the visual eraser width).
+     * Uses Liang-Barsky line clipping.
+     */
+    private segmentIntersectsRect;
+    /**
+     * Check whether any segment of an eraser path intersects a rectangle.
+     * Points is a flat array [x0, y0, x1, y1, ...] in page-space coordinates.
+     */
+    private eraserPathIntersectsRect;
     activateEraser(pageNumber: number): void;
     private eraserLine;
     private eraserStage;

package/dist/runtime/annotation/engine/editor/selector.js

@@ -526,6 +526,60 @@ export class Selector {
   rectsIntersect(a, b) {
     return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
   }
+  /**
+   * Check whether a line segment intersects an axis-aligned rectangle
+   * (expanded by `tolerance` on each side to match the visual eraser width).
+   * Uses Liang-Barsky line clipping.
+   */
+  segmentIntersectsRect(x1, y1, x2, y2, rect, tolerance) {
+    const left = rect.x - tolerance;
+    const top = rect.y - tolerance;
+    const right = rect.x + rect.width + tolerance;
+    const bottom = rect.y + rect.height + tolerance;
+    let tMin = 0;
+    let tMax = 1;
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const edges = [
+      { p: -dx, q: x1 - left },
+      { p: dx, q: right - x1 },
+      { p: -dy, q: y1 - top },
+      { p: dy, q: bottom - y1 }
+    ];
+    for (const { p, q } of edges) {
+      if (p === 0) {
+        if (q < 0) return false;
+      } else {
+        const t = q / p;
+        if (p < 0) {
+          tMin = Math.max(tMin, t);
+        } else {
+          tMax = Math.min(tMax, t);
+        }
+        if (tMin > tMax) return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Check whether any segment of an eraser path intersects a rectangle.
+   * Points is a flat array [x0, y0, x1, y1, ...] in page-space coordinates.
+   */
+  eraserPathIntersectsRect(points, rect, tolerance) {
+    for (let i = 0; i + 3 < points.length; i += 2) {
+      if (this.segmentIntersectsRect(
+        points[i],
+        points[i + 1],
+        points[i + 2],
+        points[i + 3],
+        rect,
+        tolerance
+      )) {
+        return true;
+      }
+    }
+    return false;
+  }
   activateEraser(pageNumber) {
     const konvaCanvas = this.konvaCanvasStore.get(pageNumber);
     if (!konvaCanvas) return;
@@ -569,17 +623,20 @@ export class Selector {
     konvaStage.on("mouseup touchend", (e) => {
       if (!this.eraserLine || !this.eraserStage) return;
       if (this.isStylusRejected(e.evt)) return;
-      const eraserRect = this.eraserLine.getClientRect();
+      const points = this.eraserLine.points();
       this.eraserLine.destroy();
       this.eraserLine = null;
-      if (eraserRect.width < 3 && eraserRect.height < 3) {
+      if (points.length < 4) {
         this.eraserStage = null;
         return;
       }
+      const scale = this.eraserStage.scaleX() ?? 1;
+      const screenPoints = points.map((v) => v * scale);
+      const tolerance = 6;
       const groups = this.getPageShapeGroups(this.eraserStage);
       const toDelete = [];
       groups.forEach((group) => {
-        if (this.rectsIntersect(eraserRect, group.getClientRect())) {
+        if (this.eraserPathIntersectsRect(screenPoints, group.getClientRect(), tolerance)) {
           toDelete.push(group.id());
         }
       });

package/dist/runtime/annotation/engine/painter.d.ts

@@ -32,11 +32,13 @@ export declare class Painter {
     private callbacks;
     private getStylusModeEnabled?;
     private getReadonly?;
-    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, }: {
+    private freehandGroupingDelay;
+    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, }: {
         userName: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
         getReadonly?: () => boolean;
+        freehandGroupingDelay?: number;
     });
     private editFreeText;
     private bindGlobalEvents;

package/dist/runtime/annotation/engine/painter.js

@@ -34,16 +34,19 @@ export class Painter {
   callbacks;
   getStylusModeEnabled;
   getReadonly;
+  freehandGroupingDelay;
   constructor({
     userName,
     callbacks,
     getStylusModeEnabled,
-    getReadonly
+    getReadonly,
+    freehandGroupingDelay
   }) {
     this.userName = userName;
     this.callbacks = callbacks;
     this.getStylusModeEnabled = getStylusModeEnabled;
     this.getReadonly = getReadonly;
+    this.freehandGroupingDelay = freehandGroupingDelay ?? 1e3;
     this.store = new Store();
     this.selector = new Selector({
       konvaCanvasStore: this.konvaCanvasStore,
@@ -244,7 +247,8 @@ export class Painter {
       onChange: (id, updates) => {
         this.updateStore(id, updates);
       },
-      getStylusModeEnabled: this.getStylusModeEnabled
+      getStylusModeEnabled: this.getStylusModeEnabled,
+      freehandGroupingDelay: this.freehandGroupingDelay
     };
     let editor = null;
     switch (annotation.type) {

package/dist/runtime/annotation/engine/tools/freehand.js

@@ -86,7 +86,7 @@ export class EditorFreeHand extends Editor {
           }
         });
         this.currentShapeGroup = null;
-      });
+      }, this.freehandGroupingDelay);
       return;
     }
     Editor.TimerStart(this.pageNumber, () => {
@@ -98,7 +98,7 @@ export class EditorFreeHand extends Editor {
         }
       });
       this.currentShapeGroup = null;
-    });
+    }, this.freehandGroupingDelay);
     this.line = null;
   }
   /**

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

@@ -185,7 +185,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);
@@ -609,7 +610,8 @@ function onGlobalKeydown(event) {
 onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
-    onRequestTextInput
+    onRequestTextInput,
+    freehandGroupingDelay: props.freehandGroupingDelay
   });
   viewerState.selectTool(viewerState.activeTool.value);
   if (props.stamps) viewerState.stamps.value = props.stamps;
@@ -674,6 +676,15 @@ 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);

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>

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

@@ -18,7 +18,7 @@
       @click="state.selectTool(AnnotationType.FREETEXT)"
     />
     <StampPicker />
-    <SignaturePicker />
+    <SignaturePicker v-if="state.signatureHandlers" />
     <ToolButton
       :tool="getDef(AnnotationType.RECTANGLE)"
       :active="state.activeTool.value === AnnotationType.RECTANGLE"

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

@@ -4,4 +4,5 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     userName?: string;
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
+    freehandGroupingDelay?: number;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -64,7 +64,8 @@ export function createAnnotationEngine(viewerState, options) {
     userName: options.userName ?? "User",
     callbacks,
     getStylusModeEnabled: () => viewerState.stylusMode.value,
-    getReadonly: () => viewerState.readonly.value
+    getReadonly: () => viewerState.readonly.value,
+    freehandGroupingDelay: options.freehandGroupingDelay
   });
   viewerState.painter.value = painter;
   return painter;

package/dist/runtime/public-types.d.ts

@@ -1,2 +1,4 @@
 export type { ExportPdfOptions } from './annotation/pdf-export/export.js';
 export type { ViewerTabItem, AddTabOptions } from './components/ViewerTabs.vue.js';
+export type { SignatureData, SignatureHandlers } from './annotation/engine/types.js';
+export type { ViewMode } from './composables/viewMode.js';

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type ExportPdfOptions } from '../dist/runtime/public-types.js'
+export { type ExportPdfOptions, type SignatureData, type SignatureHandlers, type ViewMode } from '../dist/runtime/public-types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",