kviewer 0.0.10 → 0.0.11

package/dist/runtime/components/Viewer.vue

@@ -5,7 +5,8 @@
       <ViewerBar />
     </slot>
 
-    <div class="relative flex-1 min-h-0">
+    <div class="flex flex-1 min-h-0">
+      <div class="relative flex-1 min-w-0">
       <div
         ref="scrollContainer"
         class="absolute inset-0 overflow-hidden bg-[#F0F3F5] dark:bg-muted/50"
@@ -133,6 +134,11 @@
       <ClientOnly>
         <FloatingPageIndicator :scroll-container="scrollContainer" />
       </ClientOnly>
+      </div>
+
+      <ClientOnly v-if="!viewerState.readonly.value">
+        <PlacedFieldSidebar />
+      </ClientOnly>
     </div>
 
     <!-- Footer slot: empty by default -->
@@ -180,6 +186,7 @@ import {
 import ViewerBar from "./ViewerBar.vue";
 import PdfPage from "./PdfPage.vue";
 import FreeTextModal from "./modals/FreeTextModal.vue";
+import PlacedFieldSidebar from "./panels/PlacedFieldSidebar.vue";
 import AnnotationToolbar from "./AnnotationToolbar.vue";
 import FloatingPageIndicator from "./FloatingPageIndicator.vue";
 import { providePageSettings } from "../composables/usePageSettings";
@@ -199,6 +206,7 @@ import { createPageProxyCache } from "../composables/usePageProxyCache";
 import { createSearchIndex } from "../composables/useSearchIndex";
 import { createShapeDetection } from "../composables/useShapeDetection";
 import { provideFormFields } from "../composables/useFormFields";
+import { extractCheckboxStyles, extractButtonCaptions } from "../annotation/parsers/extractCheckboxStyles";
 import { isIPad } from "../annotation/engine/input-device";
 import { useInertiaPanzoom } from "../composables/useInertiaPanzoom";
 const props = defineProps({
@@ -212,8 +220,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false, default: false },
   shapeDetection: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: true },
-  freehandGroupingDelay: { type: Number, required: false, default: 1e3 }
+  freehandGroupingDelay: { type: Number, required: false, default: 1e3 },
+  formEditMode: { type: Boolean, required: false, default: void 0 }
 });
+const emit = defineEmits(["update:formEditMode"]);
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn, setDownloadPdfFn } = provideViewerState();
@@ -223,6 +233,20 @@ watchEffect(() => {
 watchEffect(() => {
   viewerState.shapeDetection.value = props.shapeDetection ?? false;
 });
+watch(
+  () => props.formEditMode,
+  (v) => {
+    if (v === void 0) return;
+    if (viewerState.formEditMode.value !== v) viewerState.formEditMode.value = v;
+  },
+  { immediate: true }
+);
+watch(
+  () => viewerState.formEditMode.value,
+  (v) => {
+    if (props.formEditMode !== v) emit("update:formEditMode", v);
+  }
+);
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
 const pageSettings = providePageSettings(viewerRoot);
@@ -368,14 +392,28 @@ async function loadDocument() {
       pdfjs.GlobalWorkerOptions.workerSrc = workerModule.default;
     }
     const source = props.source;
-    const loadingTask = pdfjs.getDocument(
-      source
-    );
+    const baseParams = source instanceof Uint8Array || typeof source === "string" ? { url: typeof source === "string" ? source : void 0, data: source instanceof Uint8Array ? source : void 0 } : { ...source };
+    const docParams = {
+      ...baseParams,
+      standardFontDataUrl: "/_kviewer/standard_fonts/",
+      cMapUrl: "/_kviewer/cmaps/",
+      cMapPacked: true,
+      useSystemFonts: true
+    };
+    const loadingTask = pdfjs.getDocument(docParams);
     const pdfDoc = await loadingTask.promise;
     doc.value = pdfDoc;
     viewerState.doc.value = pdfDoc;
     viewerState.totalPages.value = pdfDoc.numPages;
     proxyCache.setDocument(pdfDoc);
+    pdfDoc.getData().then(async (bytes) => {
+      const [styles, captions] = await Promise.all([
+        extractCheckboxStyles(bytes),
+        extractButtonCaptions(bytes)
+      ]);
+      if (styles.size > 0) formFieldsState.applyCheckboxStyles(styles);
+      if (captions.size > 0) formFieldsState.applyButtonCaptions(captions);
+    }).catch((err) => console.warn("[KViewer] Failed to read MK data from source PDF:", err));
     if (!scrollContainer.value) {
       await nextTick();
     }
@@ -487,11 +525,13 @@ async function exportPdf(options = {}) {
   const pdfData = await doc.value.getData();
   const exportContext = painter.getExportContext();
   const formFieldValues = formFieldsState.getAllFieldValues();
+  const placedFormFieldDefinitions = formFieldsState.getPlacedFields();
   const bytes = await exportAnnotationsToPdf({
     pdfData,
     annotations: exportContext.annotations,
     options: mergedOptions,
     formFieldValues,
+    placedFormFieldDefinitions,
     originalAnnotationIds: exportContext.originalIds,
     modifiedAnnotationIds: exportContext.modifiedIds,
     deletedAnnotationIds: exportContext.deletedIds
@@ -642,6 +682,10 @@ onMounted(() => {
   painter = createAnnotationEngine(viewerState, {
     userName: props.userName,
     onRequestTextInput,
+    onPlaceField: (payload) => {
+      formFieldsState.addPlacedField(payload);
+      viewerState.selectTool("hand");
+    },
     freehandGroupingDelay: props.freehandGroupingDelay,
     // Suspend panzoom gestures while an annotation is being dragged or
     // transformed. Otherwise single-finger pan runs in parallel with the
@@ -670,6 +714,8 @@ onMounted(() => {
     inertiaPanzoom.onChange(() => {
       if (viewerState.selectionRect.value) viewerState.selectionRect.value = null;
       if (!isSinglePageMode.value) virtualization.updateCurrentPageByRect();
+      const z = inertiaPanzoom.getScale();
+      if (z !== viewerState.visualZoom.value) viewerState.visualZoom.value = z;
     });
     nextTick(() => initPanzoom());
     watch(
@@ -684,7 +730,10 @@ onMounted(() => {
       },
       { immediate: true }
     );
-    watch(() => viewerState.scale.value, () => inertiaPanzoom.reset());
+    watch(() => viewerState.scale.value, async () => {
+      await nextTick();
+      inertiaPanzoom.reset();
+    });
     watch(() => viewerState.currentPage.value, () => inertiaPanzoom.reset());
   }
   if (isIPad()) {
@@ -752,7 +801,17 @@ defineExpose({
   exportPdf,
   getKonvaCanvasState,
   getFormFieldValues: () => formFieldsState.getAllFieldValues(),
-  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value)
+  setFormFieldValue: (fieldName, value) => formFieldsState.setFieldValueByName(fieldName, value),
+  /** Reactive form-edit-mode flag — read with `.value`. */
+  formEditMode: viewerState.formEditMode,
+  /** Programmatically enter or leave form-edit mode. */
+  setFormEditMode: (enabled) => viewerState.setFormEditMode(enabled),
+  /** Flip form-edit mode. Returns the new state. */
+  toggleFormEditMode: () => {
+    const next = !viewerState.formEditMode.value;
+    viewerState.setFormEditMode(next);
+    return next;
+  }
 });
 </script>
 

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

@@ -17,6 +17,10 @@ type __VLS_Props = {
     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;
+    /** Whether the viewer is in form-edit mode: every form field renders
+     *  with selection chrome, can be moved/resized, and the property panel
+     *  is shown. Supports v-model via `v-model:form-edit-mode`. */
+    formEditMode?: boolean;
 };
 declare function exportPdf(options?: ExportPdfOptions): Promise<Uint8Array>;
 type ImportMode = 'replace' | 'merge';
@@ -27,11 +31,11 @@ declare function importAnnotations(annotations: IAnnotationStore[], options?: {
     skipped: number;
 }>;
 declare function getKonvaCanvasState(): Record<number, string>;
-declare var __VLS_1: {}, __VLS_40: {};
+declare var __VLS_1: {}, __VLS_51: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    footer?: (props: typeof __VLS_40) => any;
+    footer?: (props: typeof __VLS_51) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getAnnotations: () => IAnnotationStore[];
@@ -40,7 +44,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getKonvaCanvasState: typeof getKonvaCanvasState;
     getFormFieldValues: () => import("../annotation/engine/types.js").FormFieldValue[];
     setFormFieldValue: (fieldName: string, value: string | boolean | string[]) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    /** Reactive form-edit-mode flag — read with `.value`. */
+    formEditMode: import("vue").Ref<boolean, boolean>;
+    /** Programmatically enter or leave form-edit mode. */
+    setFormEditMode: (enabled: boolean) => void;
+    /** Flip form-edit mode. Returns the new state. */
+    toggleFormEditMode: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:formEditMode": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:formEditMode"?: ((value: boolean) => any) | undefined;
+}>, {
     userName: string;
     freehandGroupingDelay: number;
     zoom: number;
@@ -50,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     signatureHandlers: SignatureHandlers;
     viewMode: ViewMode;
     shapeDetection: boolean;
+    formEditMode: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ViewerBar.vue

@@ -5,7 +5,7 @@
       <UPopover>
         <UButton icon="i-lucide-menu" variant="ghost" color="neutral" size="xs" data-testid="viewer-menu" />
         <template #content>
-          <div class="p-1">
+          <div class="p-1 flex flex-col gap-0.5">
             <UButton
               icon="i-lucide-download"
               label="Download"
@@ -16,6 +16,16 @@
               data-testid="viewer-download"
               @click="onDownload"
             />
+            <UButton
+              :icon="state.shapeDetection.value ? 'i-lucide-square-check-big' : 'i-lucide-square-dashed'"
+              :label="state.shapeDetection.value ? 'Disable form field detection' : 'Detect form fields'"
+              :variant="state.shapeDetection.value ? 'soft' : 'ghost'"
+              :color="state.shapeDetection.value ? 'primary' : 'neutral'"
+              size="xs"
+              class="w-full justify-start"
+              data-testid="viewer-toggle-shape-detection"
+              @click="state.shapeDetection.value = !state.shapeDetection.value"
+            />
           </div>
         </template>
       </UPopover>
@@ -30,6 +40,16 @@
 
         <HandTool />
         <MarqueeTool />
+
+        <UButton
+          icon="i-lucide-form-input"
+          :variant="state.formEditMode.value ? 'soft' : 'ghost'"
+          :color="state.formEditMode.value ? 'primary' : 'neutral'"
+          size="xs"
+          :title="state.formEditMode.value ? 'Exit form-edit mode' : 'Enter form-edit mode'"
+          data-testid="form-edit-toggle"
+          @click="state.setFormEditMode(!state.formEditMode.value)"
+        />
       </template>
 
       <div class="ml-auto flex items-center gap-2">
@@ -45,7 +65,8 @@
       </div>
 
       <div class="justify-self-center">
-        <DrawingTools :style-version="styleVersion" />
+        <FormFieldTools v-if="state.formEditMode.value" />
+        <DrawingTools v-else :style-version="styleVersion" />
       </div>
 
       <div class="justify-self-end flex items-center gap-1">
@@ -63,6 +84,7 @@ import ZoomControls from "./tools/ZoomControls.vue";
 import HandTool from "./tools/HandTool.vue";
 import MarqueeTool from "./tools/MarqueeTool.vue";
 import DrawingTools from "./tools/DrawingTools.vue";
+import FormFieldTools from "./tools/FormFieldTools.vue";
 import ActionTools from "./tools/ActionTools.vue";
 import PageInfo from "./tools/PageInfo.vue";
 import SearchTool from "./tools/SearchTool.vue";

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

@@ -12,6 +12,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -19,12 +20,23 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
+const FONT_BORDER_SIZE = 2;
+const LINE_HEIGHT_FACTOR = 1.35;
+const DEFAULT_FIELD_FONT_SIZE = 9;
 const buttonStyle = computed(() => {
   const style = {};
-  if (props.field.fontSize && props.field.fontSize > 0) {
-    style.fontSize = `${props.field.fontSize}px`;
-  }
+  const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : DEFAULT_FIELD_FONT_SIZE;
+  const rect = props.field.rect;
+  const rectHeight = Math.abs(rect[3] - rect[1] - FONT_BORDER_SIZE);
+  const computed2 = Math.min(declared, rectHeight / LINE_HEIGHT_FACTOR);
+  style.fontSize = `${Math.round(10 * computed2) / 10}px`;
+  const fontStyle = decodeFontName(props.field.fontName);
+  style.fontFamily = fontStyle.fontFamily;
+  if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;
+  if (fontStyle.fontStyle !== "normal") style.fontStyle = fontStyle.fontStyle;
   if (props.field.color && props.field.color.length >= 3) {
     style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- Detected shape: custom × icon on transparent background -->
+  <!-- Detected shape: lightweight × icon on transparent background -->
   <div
     v-if="isDetected"
     class="kviewer-form-checkbox kviewer-form-checkbox--detected"
@@ -29,20 +29,30 @@
     </svg>
   </div>
 
-  <!-- Real PDF form field: native checkbox -->
-  <div v-else class="kviewer-form-checkbox">
-    <input
-      type="checkbox"
-      :checked="isChecked"
-      :disabled="isReadOnly"
-      :required="props.field.required"
-      @change="onChange"
-    >
+  <!-- Real PDF form field: render a custom box that draws the matching
+       Unicode glyph for whichever `/MK /CA` style is set (default 'check'
+       included). Native HTML checkboxes can't render cross/diamond/star/etc,
+       and rendering the default check via the same path keeps the look
+       consistent across all styles. -->
+  <div
+    v-else
+    class="kviewer-form-checkbox kviewer-form-checkbox--styled"
+    :class="{ 'kviewer-form-checkbox--checked': isChecked }"
+    role="checkbox"
+    :aria-checked="isChecked"
+    :aria-disabled="isReadOnly"
+    tabindex="0"
+    @click="toggle"
+    @keydown.space.prevent="toggle"
+    @keydown.enter.prevent="toggle"
+  >
+    <span v-if="isChecked" class="kviewer-form-checkbox__glyph">{{ styledGlyph }}</span>
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { CHECKBOX_STYLE_TABLE } from "../../annotation/checkbox-styles";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -51,17 +61,23 @@ const props = defineProps({
 const formFields = useFormFields();
 const state = useViewerState();
 const isDetected = computed(() => props.field.shapeType != null);
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const isChecked = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return fv?.value === true;
 });
+const styledGlyph = computed(() => {
+  const style = props.field.checkboxStyle ?? "check";
+  return CHECKBOX_STYLE_TABLE[style]?.glyph ?? CHECKBOX_STYLE_TABLE.check.glyph;
+});
 function toggle() {
   if (isReadOnly.value) return;
   formFields.setFieldValue(props.field.id, !isChecked.value);
 }
-function onChange(event) {
-  const target = event.target;
-  formFields.setFieldValue(props.field.id, target.checked);
-}
 </script>
+
+<style>
+.kviewer-form-checkbox--styled{align-items:center;background:#fff;border:1px solid #444;cursor:pointer;display:flex;height:100%;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.kviewer-form-checkbox--styled[aria-disabled=true]{cursor:not-allowed;opacity:.6}.kviewer-form-checkbox__glyph{color:#000;font-size:clamp(8px,88cqh,64px);font-variant-emoji:text;line-height:1;pointer-events:none}.kviewer-form-checkbox--styled{container-type:size}
+</style>

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

@@ -74,7 +74,9 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const datalistId = computed(() => `kviewer-datalist-${props.field.id}`);
 const listBoxSize = computed(() => {
   const optCount = props.field.options?.length ?? 0;

package/dist/runtime/components/form-fields/FormFieldWrapper.d.vue.ts

@@ -2,7 +2,18 @@ import type { FormFieldDefinition } from '../../annotation/engine/types.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
     pageHeight: number;
+    scale: number;
+    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
+     *  default user space; the canvas top-left corresponds to PDF
+     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
+    viewOffsetX?: number;
+    viewOffsetY?: number;
+    selected: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,33 +1,65 @@
 <template>
   <div
     class="kviewer-form-field"
+    :class="{
+  'kviewer-form-field--editable': showChrome,
+  'kviewer-form-field--placed': isPlaced,
+  'kviewer-form-field--selected': props.selected
+}"
     :style="positionStyle"
   >
-    <FormTextField v-if="props.field.fieldType === 'text'" :field="props.field" />
-    <FormCheckbox v-else-if="props.field.fieldType === 'checkbox'" :field="props.field" />
-    <FormRadioButton v-else-if="props.field.fieldType === 'radio'" :field="props.field" />
-    <FormDropdown v-else-if="props.field.fieldType === 'dropdown'" :field="props.field" />
-    <FormSignatureField v-else-if="props.field.fieldType === 'signature'" :field="props.field" />
-    <FormButton v-else-if="props.field.fieldType === 'button'" :field="props.field" />
+    <div
+      class="kviewer-form-field__body"
+      :class="{ 'kviewer-form-field__body--locked': isFormEditMode }"
+    >
+      <FormTextField v-if="props.field.fieldType === 'text'" :field="props.field" />
+      <FormCheckbox v-else-if="props.field.fieldType === 'checkbox'" :field="props.field" />
+      <FormRadioButton v-else-if="props.field.fieldType === 'radio'" :field="props.field" />
+      <FormDropdown v-else-if="props.field.fieldType === 'dropdown'" :field="props.field" />
+      <FormSignatureField v-else-if="props.field.fieldType === 'signature'" :field="props.field" />
+      <FormButton v-else-if="props.field.fieldType === 'button'" :field="props.field" />
+    </div>
+
+    <PlacedFieldChrome
+      v-if="showChrome"
+      :field="props.field"
+      :selected="props.selected"
+      :scale="props.scale"
+      :page-height="props.pageHeight"
+      @select="emit('select')"
+    />
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
 import FormTextField from "./FormTextField.vue";
 import FormCheckbox from "./FormCheckbox.vue";
 import FormRadioButton from "./FormRadioButton.vue";
 import FormDropdown from "./FormDropdown.vue";
 import FormSignatureField from "./FormSignatureField.vue";
 import FormButton from "./FormButton.vue";
+import PlacedFieldChrome from "./PlacedFieldChrome.vue";
 const props = defineProps({
   field: { type: Object, required: true },
-  pageHeight: { type: Number, required: true }
+  pageHeight: { type: Number, required: true },
+  scale: { type: Number, required: true },
+  viewOffsetX: { type: Number, required: false },
+  viewOffsetY: { type: Number, required: false },
+  selected: { type: Boolean, required: true }
 });
+const emit = defineEmits(["select"]);
+const state = useViewerState();
+const isPlaced = computed(() => props.field.origin === "placed");
+const isFormEditMode = computed(() => state.formEditMode.value);
+const showChrome = computed(() => isFormEditMode.value);
 const positionStyle = computed(() => {
   const rect = props.field.rect;
-  const left = rect[0];
-  const top = props.pageHeight - rect[3];
+  const vx = props.viewOffsetX ?? 0;
+  const vy = props.viewOffsetY ?? 0;
+  const left = rect[0] - vx;
+  const top = props.pageHeight + vy - rect[3];
   const width = rect[2] - rect[0];
   const height = rect[3] - rect[1];
   return {
@@ -39,3 +71,7 @@ const positionStyle = computed(() => {
   };
 });
 </script>
+
+<style>
+.kviewer-form-field__body{height:100%;width:100%}.kviewer-form-field__body--locked{pointer-events:none}.kviewer-form-field--editable{outline:1px dashed rgba(22,119,255,.45);outline-offset:0}.kviewer-form-field--editable.kviewer-form-field--placed{outline-color:rgba(22,119,255,.75)}.kviewer-form-field--editable.kviewer-form-field--selected{outline:none}
+</style>

package/dist/runtime/components/form-fields/FormFieldWrapper.vue.d.ts

@@ -2,7 +2,18 @@ import type { FormFieldDefinition } from '../../annotation/engine/types.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
     pageHeight: number;
+    scale: number;
+    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
+     *  default user space; the canvas top-left corresponds to PDF
+     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
+    viewOffsetX?: number;
+    viewOffsetY?: number;
+    selected: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -21,7 +21,9 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const isSelected = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   if (!fv) return false;

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

@@ -11,7 +11,7 @@
       alt="Signature"
     >
     <span v-else class="kviewer-form-signature__placeholder">
-      Click to sign
+      {{ props.field.promptText || "Click to sign" }}
     </span>
   </div>
 
@@ -43,6 +43,7 @@ const signatureUrl = computed(() => {
 const hasSigned = computed(() => !!signatureUrl.value);
 async function onClickSign() {
   if (props.field.readOnly || state.readonly.value) return;
+  if (formFields.isFieldLocked(props.field.id)) return;
   if (state.signatures.value.length > 0) {
     const sig = state.signatures.value[0];
     if (sig) {

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

@@ -19,11 +19,13 @@
     :style="fieldStyle"
     class="kviewer-form-input"
     @input="onInput"
+    @scroll="onScroll"
   >
 </template>
 
 <script setup>
 import { computed } from "vue";
+import { decodeFontName } from "../../annotation/font-style";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
@@ -31,18 +33,37 @@ const props = defineProps({
 });
 const formFields = useFormFields();
 const state = useViewerState();
-const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
+const isReadOnly = computed(
+  () => state.readonly.value || props.field.readOnly || formFields.isFieldLocked(props.field.id)
+);
 const currentValue = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return typeof fv?.value === "string" ? fv.value : "";
 });
+const FONT_BORDER_SIZE = 2;
+const LINE_HEIGHT_FACTOR = 1.35;
+const DEFAULT_FIELD_FONT_SIZE = 9;
 const fieldStyle = computed(() => {
   const style = {};
-  if (props.field.fontSize && props.field.fontSize > 0) {
-    style.fontSize = `${props.field.fontSize}px`;
+  const declared = props.field.fontSize && props.field.fontSize > 0 ? props.field.fontSize : DEFAULT_FIELD_FONT_SIZE;
+  const rect = props.field.rect;
+  const rectHeight = Math.abs(rect[3] - rect[1] - FONT_BORDER_SIZE);
+  let computed2;
+  if (props.field.multiLine) {
+    const numberOfLines = Math.max(
+      1,
+      Math.round(rectHeight / (LINE_HEIGHT_FACTOR * declared))
+    );
+    const lineHeight = rectHeight / numberOfLines;
+    computed2 = Math.min(declared, lineHeight / LINE_HEIGHT_FACTOR);
   } else {
-    style.fontSize = "inherit";
+    computed2 = Math.min(declared, rectHeight / LINE_HEIGHT_FACTOR);
   }
+  style.fontSize = `${Math.round(10 * computed2) / 10}px`;
+  const fontStyle = decodeFontName(props.field.fontName);
+  style.fontFamily = fontStyle.fontFamily;
+  if (fontStyle.fontWeight !== "normal") style.fontWeight = fontStyle.fontWeight;
+  if (fontStyle.fontStyle !== "normal") style.fontStyle = fontStyle.fontStyle;
   if (props.field.color && props.field.color.length >= 3) {
     style.color = `rgb(${props.field.color[0]}, ${props.field.color[1]}, ${props.field.color[2]})`;
   }
@@ -54,16 +75,35 @@ const fieldStyle = computed(() => {
     style.textAlign = alignMap[props.field.textAlignment] ?? "left";
   }
   if (props.field.comb && props.field.maxLen && props.field.maxLen > 0) {
-    const rect = props.field.rect;
     const fieldWidth = rect[2] - rect[0];
     const cellWidth = fieldWidth / props.field.maxLen;
-    style.letterSpacing = `${cellWidth - (props.field.fontSize ?? 12) * 0.6}px`;
-    style.fontFamily = "monospace";
+    const charWidth = computed2 * 0.6;
+    style.fontFamily = '"Courier New", Courier, monospace';
+    style.fontWeight = "700";
+    style.textAlign = "left";
+    style.letterSpacing = `${cellWidth - charWidth}px`;
+    style.paddingLeft = `${Math.max(0, (cellWidth - charWidth) / 2)}px`;
+    style.paddingRight = "0";
+    style.paddingTop = "0";
+    style.paddingBottom = "0";
+    style.borderLeftWidth = "0";
+    style.backgroundImage = "linear-gradient(to right, rgba(0, 0, 0, 0.55) 1px, transparent 1px)";
+    style.backgroundSize = `${100 / props.field.maxLen}% 100%`;
+    style.backgroundRepeat = "repeat-x";
+    style.borderTop = "1px solid rgba(0, 0, 0, 0.55)";
+    style.borderBottom = "1px solid rgba(0, 0, 0, 0.55)";
+    style.borderRight = "1px solid rgba(0, 0, 0, 0.55)";
   }
   return style;
 });
 function onInput(event) {
   const target = event.target;
   formFields.setFieldValue(props.field.id, target.value);
+  if (props.field.comb) target.scrollLeft = 0;
+}
+function onScroll(event) {
+  if (!props.field.comb) return;
+  const target = event.target;
+  if (target.scrollLeft !== 0) target.scrollLeft = 0;
 }
 </script>