kviewer 0.0.9 → 0.0.11

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

@@ -1,5 +1,5 @@
-import { type ShallowRef } from 'vue';
-import type { DetectedShape, FormFieldDefinition, FormFieldValue } from '../annotation/engine/types.js';
+import { type Ref, type ShallowRef } from 'vue';
+import type { CheckboxStyle, DetectedShape, FormFieldDefinition, FormFieldValue, PlaceFieldPayload } from '../annotation/engine/types.js';
 export interface FormFieldsState {
     /** Field definitions grouped by page number */
     fieldDefinitions: ShallowRef<Map<number, FormFieldDefinition[]>>;
@@ -21,6 +21,33 @@ export interface FormFieldsState {
     resetValues: () => void;
     /** Create synthetic checkbox form fields from detected shapes */
     registerDetectedCheckboxes: (pageNumber: number, shapes: DetectedShape[], scale: number, pageHeight: number) => void;
+    /** Add a user-placed form field (from the placement tool). Returns the created def. */
+    addPlacedField: (payload: PlaceFieldPayload) => FormFieldDefinition;
+    /** Update a placed field's rect, name, or flags. */
+    updatePlacedField: (id: string, patch: Partial<FormFieldDefinition>) => void;
+    /** Remove a placed field and its value. */
+    removePlacedField: (id: string) => void;
+    /** All user-placed field definitions (used by export). */
+    getPlacedFields: () => FormFieldDefinition[];
+    /** Look up a field definition by id (any origin). */
+    getFieldById: (id: string) => FormFieldDefinition | undefined;
+    /** Id of the currently selected placed field (null if none). */
+    selectedPlacedFieldId: Ref<string | null>;
+    /** Select or deselect a placed field. Pass null to deselect. */
+    selectPlacedField: (id: string | null) => void;
+    /** Apply checkbox-style hints (extracted from `/MK /CA` in the source PDF)
+     *  to existing parsed checkbox defs and store the map for any defs
+     *  parsed afterwards. Keyed by checkbox fieldName. */
+    applyCheckboxStyles: (styles: Map<string, CheckboxStyle>) => void;
+    /** Apply push-button captions (extracted from `/MK /CA` in the source
+     *  PDF) to existing parsed button defs and store the map for any defs
+     *  parsed afterwards. Keyed by button fieldName. */
+    applyButtonCaptions: (captions: Map<string, string>) => void;
+    /** Whether this field is locked by another (signed) signature field's
+     *  lock rule. Reactive to both definitions and values, so a UI computed
+     *  that calls this re-runs when any signature is signed or its lock
+     *  rule changes. */
+    isFieldLocked: (fieldId: string) => boolean;
     /** Clear all values and definitions (for document change) */
     reset: () => void;
 }

package/dist/runtime/composables/useFormFields.js

@@ -1,18 +1,92 @@
 import {
   shallowRef,
+  ref,
   triggerRef,
   provide,
   inject
 } from "vue";
 import { parseFormFields } from "../annotation/parsers/parseFormFields.js";
+import { generateUUID } from "../annotation/engine/utils.js";
 const FORM_FIELDS_KEY = Symbol("kviewer-form-fields");
 export function provideFormFields() {
   const fieldDefinitions = shallowRef(/* @__PURE__ */ new Map());
   const fieldValues = shallowRef(/* @__PURE__ */ new Map());
+  const selectedPlacedFieldId = ref(null);
+  function selectPlacedField(id) {
+    selectedPlacedFieldId.value = id;
+  }
+  function getFieldById(id) {
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.id === id) return d;
+      }
+    }
+    return void 0;
+  }
+  let checkboxStyleMap = null;
+  let buttonCaptionMap = null;
+  function applyCheckboxStyles(styles) {
+    checkboxStyleMap = styles;
+    let changed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      let pageChanged = false;
+      const next = defs.map((d) => {
+        if (d.fieldType !== "checkbox" || d.origin !== "parsed") return d;
+        const style = styles.get(d.fieldName);
+        if (!style) return d;
+        if (d.originalCheckboxStyle) return d;
+        pageChanged = true;
+        return { ...d, checkboxStyle: d.checkboxStyle ?? style, originalCheckboxStyle: style };
+      });
+      if (pageChanged) {
+        fieldDefinitions.value.set(page, next);
+        changed = true;
+      }
+    }
+    if (changed) triggerRef(fieldDefinitions);
+  }
+  function applyButtonCaptions(captions) {
+    buttonCaptionMap = captions;
+    let changed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      let pageChanged = false;
+      const next = defs.map((d) => {
+        if (d.fieldType !== "button" || d.origin !== "parsed") return d;
+        const caption = captions.get(d.fieldName);
+        if (!caption) return d;
+        if (d.buttonLabel === caption) return d;
+        pageChanged = true;
+        return { ...d, buttonLabel: caption };
+      });
+      if (pageChanged) {
+        fieldDefinitions.value.set(page, next);
+        changed = true;
+      }
+    }
+    if (changed) triggerRef(fieldDefinitions);
+  }
   function parsePageFields(pageNumber, rawAnnotations) {
     if (fieldDefinitions.value.has(pageNumber)) return;
     const defs = parseFormFields(rawAnnotations, pageNumber);
     if (defs.length === 0) return;
+    if (checkboxStyleMap) {
+      for (const def of defs) {
+        if (def.fieldType === "checkbox" && !def.checkboxStyle) {
+          const style = checkboxStyleMap.get(def.fieldName);
+          if (style) {
+            def.checkboxStyle = style;
+            def.originalCheckboxStyle = style;
+          }
+        }
+      }
+    }
+    if (buttonCaptionMap) {
+      for (const def of defs) {
+        if (def.fieldType !== "button") continue;
+        const caption = buttonCaptionMap.get(def.fieldName);
+        if (caption) def.buttonLabel = caption;
+      }
+    }
     fieldDefinitions.value.set(pageNumber, defs);
     triggerRef(fieldDefinitions);
     for (const def of defs) {
@@ -30,11 +104,19 @@ export function provideFormFields() {
     const existing = fieldValues.value.get(fieldId);
     if (!existing) return;
     existing.value = value;
-    if (existing.fieldType === "radio" && typeof value === "string" && value !== "") {
-      const fieldName = existing.fieldName;
-      for (const [id, fv] of fieldValues.value.entries()) {
-        if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === "radio") {
-          fv.value = "";
+    const { fieldName, fieldType } = existing;
+    if (fieldName) {
+      if (fieldType === "radio" && typeof value === "string" && value !== "") {
+        for (const [id, fv] of fieldValues.value.entries()) {
+          if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === "radio") {
+            fv.value = "";
+          }
+        }
+      } else if (fieldType !== "radio") {
+        for (const [id, fv] of fieldValues.value.entries()) {
+          if (id !== fieldId && fv.fieldName === fieldName && fv.fieldType === fieldType) {
+            fv.value = value;
+          }
         }
       }
     }
@@ -97,6 +179,7 @@ export function provideFormFields() {
         rect: [pdfX1, pdfY1, pdfX2, pdfY2],
         readOnly: false,
         required: false,
+        origin: "detected",
         exportValue: "Yes",
         defaultValue: "Off",
         shapeType: s.shapeType
@@ -115,6 +198,164 @@ export function provideFormFields() {
     }
     triggerRef(fieldValues);
   }
+  function nextPlacedFieldName(fieldType) {
+    const base = fieldType === "text" ? "Text" : fieldType === "checkbox" ? "Checkbox" : fieldType === "signature" ? "Signature" : fieldType === "dropdown" ? "Dropdown" : fieldType === "radio" ? "Radio" : "Field";
+    const existing = /* @__PURE__ */ new Set();
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) existing.add(d.fieldName);
+    }
+    let n = 1;
+    while (existing.has(`${base}_${n}`)) n += 1;
+    return `${base}_${n}`;
+  }
+  function placedDefaultValue(fieldType) {
+    if (fieldType === "checkbox") return false;
+    return "";
+  }
+  function addPlacedField(payload) {
+    const id = `placed-${generateUUID()}`;
+    let fieldName;
+    if (payload.fieldType === "radio" && selectedPlacedFieldId.value) {
+      const sel = getFieldById(selectedPlacedFieldId.value);
+      fieldName = sel && sel.fieldType === "radio" ? sel.fieldName : nextPlacedFieldName(payload.fieldType);
+    } else {
+      fieldName = nextPlacedFieldName(payload.fieldType);
+    }
+    const def = {
+      id,
+      pageNumber: payload.pageNumber,
+      fieldType: payload.fieldType,
+      fieldName,
+      rect: [...payload.rectPdf],
+      readOnly: false,
+      required: false,
+      origin: "placed"
+    };
+    if (payload.fieldType === "radio") {
+      def.buttonValue = nextRadioOptionValue(fieldName);
+    }
+    if (payload.fieldType === "checkbox") {
+      def.checkboxStyle = "check";
+    }
+    if (payload.fieldType === "dropdown") {
+      def.combo = true;
+      def.options = [{ exportValue: "Option 1", displayValue: "Option 1" }];
+    }
+    const existingDefs = fieldDefinitions.value.get(payload.pageNumber) ?? [];
+    fieldDefinitions.value.set(payload.pageNumber, [...existingDefs, def]);
+    triggerRef(fieldDefinitions);
+    fieldValues.value.set(id, {
+      fieldId: id,
+      fieldName: def.fieldName,
+      fieldType: def.fieldType,
+      value: placedDefaultValue(def.fieldType)
+    });
+    triggerRef(fieldValues);
+    if (payload.fieldType === "radio") {
+      selectedPlacedFieldId.value = id;
+    }
+    return def;
+  }
+  function nextRadioOptionValue(groupName) {
+    const used = /* @__PURE__ */ new Set();
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.fieldType === "radio" && d.fieldName === groupName && d.buttonValue) {
+          used.add(d.buttonValue);
+        }
+      }
+    }
+    let n = 1;
+    while (used.has(`Option_${n}`)) n += 1;
+    return `Option_${n}`;
+  }
+  function updatePlacedField(id, patch) {
+    let found;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      const idx = defs.findIndex((d) => d.id === id);
+      if (idx === -1) continue;
+      const existing = defs[idx];
+      const next = { ...existing, ...patch, id: existing.id };
+      const nextDefs = defs.slice();
+      nextDefs[idx] = next;
+      fieldDefinitions.value.set(page, nextDefs);
+      found = next;
+      break;
+    }
+    if (!found) return;
+    triggerRef(fieldDefinitions);
+    const fv = fieldValues.value.get(id);
+    if (fv && (fv.fieldName !== found.fieldName || fv.fieldType !== found.fieldType)) {
+      fv.fieldName = found.fieldName;
+      fv.fieldType = found.fieldType;
+      triggerRef(fieldValues);
+    }
+  }
+  function removePlacedField(id) {
+    let removed = false;
+    for (const [page, defs] of fieldDefinitions.value.entries()) {
+      const idx = defs.findIndex((d) => d.id === id);
+      if (idx === -1) continue;
+      const nextDefs = defs.slice();
+      nextDefs.splice(idx, 1);
+      if (nextDefs.length === 0) {
+        fieldDefinitions.value.delete(page);
+      } else {
+        fieldDefinitions.value.set(page, nextDefs);
+      }
+      removed = true;
+      break;
+    }
+    if (!removed) return;
+    triggerRef(fieldDefinitions);
+    if (fieldValues.value.delete(id)) {
+      triggerRef(fieldValues);
+    }
+    if (selectedPlacedFieldId.value === id) {
+      selectedPlacedFieldId.value = null;
+    }
+  }
+  function getPlacedFields() {
+    const out = [];
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.origin === "placed" || d.origin === "detected") {
+          out.push(d);
+          continue;
+        }
+        const rectMoved = d.originalRect && rectChanged(d.rect, d.originalRect);
+        const styleChanged = d.fieldType === "checkbox" && (d.checkboxStyle ?? "check") !== (d.originalCheckboxStyle ?? "check");
+        if (rectMoved || styleChanged) {
+          out.push(d);
+        }
+      }
+    }
+    return out;
+  }
+  function rectChanged(a, b) {
+    for (let i = 0; i < 4; i++) {
+      if (Math.abs((a[i] ?? 0) - (b[i] ?? 0)) > 0.01) return true;
+    }
+    return false;
+  }
+  function isFieldLocked(fieldId) {
+    const target = getFieldById(fieldId);
+    if (!target) return false;
+    for (const defs of fieldDefinitions.value.values()) {
+      for (const sig of defs) {
+        if (sig.fieldType !== "signature") continue;
+        if (!sig.lockAction) continue;
+        if (sig.id === fieldId) continue;
+        const fv = fieldValues.value.get(sig.id);
+        if (!fv || typeof fv.value !== "string" || fv.value === "") continue;
+        if (sig.lockAction === "all") return true;
+        const list = sig.lockFieldNames ?? [];
+        if (sig.lockAction === "include" && list.includes(target.fieldName)) return true;
+        if (sig.lockAction === "exclude" && !list.includes(target.fieldName)) return true;
+      }
+    }
+    return false;
+  }
   function resetValues() {
     for (const [, defs] of fieldDefinitions.value.entries()) {
       for (const def of defs) {
@@ -129,6 +370,9 @@ export function provideFormFields() {
   function reset() {
     fieldDefinitions.value = /* @__PURE__ */ new Map();
     fieldValues.value = /* @__PURE__ */ new Map();
+    selectedPlacedFieldId.value = null;
+    checkboxStyleMap = null;
+    buttonCaptionMap = null;
     triggerRef(fieldDefinitions);
     triggerRef(fieldValues);
   }
@@ -142,6 +386,16 @@ export function provideFormFields() {
     getAllFieldValues,
     setFieldValueByName,
     registerDetectedCheckboxes,
+    addPlacedField,
+    updatePlacedField,
+    removePlacedField,
+    getPlacedFields,
+    getFieldById,
+    selectedPlacedFieldId,
+    selectPlacedField,
+    applyCheckboxStyles,
+    applyButtonCaptions,
+    isFieldLocked,
     resetValues,
     reset
   };

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

@@ -0,0 +1,40 @@
+export interface InertiaPanzoomOptions {
+    minScale?: number;
+    maxScale?: number;
+    /** Minimum pointer movement (px) before axis direction is committed. */
+    axisLockThreshold?: number;
+    /** Vertical must exceed horizontal by this ratio to lock to Y-axis. */
+    axisLockRatio?: number;
+}
+export interface ScrollToElementOptions {
+    /** Vertical alignment within the viewport. Default: 'start'. */
+    block?: 'start' | 'center';
+    /** Animate to the target with inertia, or snap instantly. Default: true. */
+    animate?: boolean;
+}
+export interface Transform {
+    scale: number;
+    tx: number;
+    ty: number;
+}
+export interface InertiaPanzoomHandle {
+    /** Bind gesture handlers to the given element (its parent becomes the viewport). */
+    attach: (target: HTMLElement) => void;
+    /** Remove handlers and clear inline styles. */
+    detach: () => void;
+    /** Reset transform and cancel any in-flight momentum. */
+    reset: () => void;
+    /** Cancel in-flight momentum without changing transform. */
+    stop: () => void;
+    getScale: () => number;
+    getTransform: () => Transform;
+    /** Animate the view so `elem` is at the top (or center) of the viewport. */
+    scrollToElement: (elem: HTMLElement, opts?: ScrollToElementOptions) => void;
+    /** Pan by a delta in viewport pixels (clamped to bounds). */
+    scrollBy: (dx: number, dy: number) => void;
+    /** Enable/disable pan+pinch gestures (wheel/scrollbar/keyboard still work). */
+    setGesturesEnabled: (enabled: boolean) => void;
+    /** Subscribe to transform updates. Returns an unsubscribe function. */
+    onChange: (cb: (t: Transform) => void) => () => void;
+}
+export declare function useInertiaPanzoom(options?: InertiaPanzoomOptions): InertiaPanzoomHandle;