kviewer 0.0.10 → 0.0.11

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.js

@@ -425,6 +425,9 @@ export function useInertiaPanzoom(options = {}) {
         pinchStart = null;
         panStart = null;
         setWillChangeActive(false);
+        const b = getBounds();
+        tx = Math.max(b.minX, Math.min(b.maxX, tx));
+        ty = Math.max(b.minY, Math.min(b.maxY, ty));
         apply();
       },
       stop: () => {

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

@@ -4,6 +4,12 @@ export interface PageMeta {
     pageNumber: number;
     width: number;
     height: number;
+    /** PDF user-space origin of the page's visible area (`view[0]`, `view[1]`).
+     *  Almost always (0, 0); non-zero for PDFs whose MediaBox has been
+     *  shifted. Annotations in `/Rect` are in default user space, so any
+     *  layer drawn at the canvas top-left must subtract this origin. */
+    viewOffsetX: number;
+    viewOffsetY: number;
 }
 export interface PageVirtualization {
     pageMetas: ShallowRef<PageMeta[]>;

package/dist/runtime/composables/usePageVirtualization.js

@@ -120,10 +120,16 @@ export function createPageVirtualization() {
   async function fetchPageDimensions(doc, pageNumber) {
     const proxy = await doc.getPage(pageNumber);
     const view = proxy.view;
+    const vx = view[0] ?? 0;
+    const vy = view[1] ?? 0;
+    const vw = view[2] ?? 0;
+    const vh = view[3] ?? 0;
     return {
       pageNumber,
-      width: view[2] - view[0],
-      height: view[3] - view[1]
+      width: vw - vx,
+      height: vh - vy,
+      viewOffsetX: vx,
+      viewOffsetY: vy
     };
   }
   async function init(doc, root) {
@@ -139,7 +145,9 @@ export function createPageVirtualization() {
         metas.push({
           pageNumber: i,
           width: firstMeta.width,
-          height: firstMeta.height
+          height: firstMeta.height,
+          viewOffsetX: firstMeta.viewOffsetX,
+          viewOffsetY: firstMeta.viewOffsetY
         });
       }
     }

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

@@ -57,6 +57,9 @@ export interface ViewerState {
     history: AnnotationHistory;
     readonly: Ref<boolean>;
     shapeDetection: Ref<boolean>;
+    visualZoom: Ref<number>;
+    formEditMode: Ref<boolean>;
+    setFormEditMode: (enabled: boolean) => void;
 }
 export interface ViewerStateProvider {
     state: ViewerState;

package/dist/runtime/composables/useViewerState.js

@@ -65,7 +65,22 @@ export function provideViewerState() {
   }
   const readonly = ref(false);
   const shapeDetectionEnabled = ref(false);
+  const visualZoom = ref(1);
   const stylusMode = ref(false);
+  const formEditMode = ref(false);
+  function isFormFieldTool(t) {
+    return typeof t === "number" && (t === AnnotationType.FORM_TEXT || t === AnnotationType.FORM_CHECKBOX || t === AnnotationType.FORM_RADIO || t === AnnotationType.FORM_SIGNATURE);
+  }
+  function setFormEditMode(enabled) {
+    if (formEditMode.value === enabled) return;
+    formEditMode.value = enabled;
+    const t = activeTool.value;
+    if (enabled) {
+      if (typeof t === "number" && !isFormFieldTool(t)) selectTool("hand");
+    } else {
+      if (isFormFieldTool(t)) selectTool("hand");
+    }
+  }
   function setStylusMode(enabled) {
     stylusMode.value = enabled;
     if (painter.value) {
@@ -95,6 +110,9 @@ export function provideViewerState() {
   }
   function selectTool(tool, dataTransfer) {
     if (readonly.value && tool !== "hand") return;
+    if (isFormFieldTool(tool) && !formEditMode.value) {
+      formEditMode.value = true;
+    }
     activeTool.value = tool;
     selectedAnnotation.value = null;
     selectedAnnotations.value = [];
@@ -181,7 +199,10 @@ export function provideViewerState() {
     downloadPdf,
     history,
     readonly,
-    shapeDetection: shapeDetectionEnabled
+    shapeDetection: shapeDetectionEnabled,
+    visualZoom,
+    formEditMode,
+    setFormEditMode
   };
   provide(VIEWER_STATE_KEY, state);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev": "npm run dev:prepare && portless kviewer nuxt dev playground",
     "dev:build": "nuxt build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",