kviewer 0.0.10 → 0.1.0

package/dist/runtime/components/modals/SignatureDrawModal.vue

@@ -1,16 +1,15 @@
 <template>
-  <UModal v-model:open="isOpen" title="Draw Signature" :ui="{ content: 'sm:max-w-lg' }">
+  <UModal v-model:open="isOpen" title="Draw Signature" :ui="{ content: 'sm:max-w-2xl' }">
     <template #body>
       <div class="flex flex-col gap-3">
         <div
-          class="border border-default rounded bg-white relative"
-          :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+          ref="canvasWrapEl"
+          class="border border-default rounded bg-white relative w-full"
+          :style="{ aspectRatio: `${canvasAspect}` }"
         >
           <canvas
             ref="canvasRef"
-            :width="canvasWidth"
-            :height="canvasHeight"
-            class="cursor-crosshair"
+            class="cursor-crosshair block w-full h-full"
             @pointerdown="onPointerDown"
             @pointermove="onPointerMove"
             @pointerup="onPointerUp"
@@ -50,7 +49,7 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from "vue";
+import { ref, watch, nextTick, onBeforeUnmount } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
 const props = defineProps({
   open: { type: Boolean, required: true }
@@ -64,21 +63,51 @@ watch(
     if (v) {
       hasDrawn.value = false;
       await nextTick();
+      syncCanvasSize();
       clearCanvas();
     }
   }
 );
 watch(isOpen, (v) => emit("update:open", v));
-const canvasWidth = defaultOptions.signature.WIDTH;
-const canvasHeight = defaultOptions.signature.HEIGHT;
+const canvasAspect = `${defaultOptions.signature.WIDTH} / ${defaultOptions.signature.HEIGHT}`;
 const signatureColors = defaultOptions.signature.COLORS;
 const canvasRef = ref(null);
+const canvasWrapEl = ref(null);
 const strokeColor = ref(signatureColors[0]);
 const hasDrawn = ref(false);
 let isDrawing = false;
+function syncCanvasSize() {
+  const canvas = canvasRef.value;
+  const wrap = canvasWrapEl.value;
+  if (!canvas || !wrap) return;
+  const cssW = Math.round(wrap.clientWidth);
+  const cssH = Math.round(wrap.clientHeight);
+  if (cssW <= 0 || cssH <= 0) return;
+  const dpr = window.devicePixelRatio || 1;
+  const targetW = Math.round(cssW * dpr);
+  const targetH = Math.round(cssH * dpr);
+  if (canvas.width === targetW && canvas.height === targetH) return;
+  canvas.width = targetW;
+  canvas.height = targetH;
+  const ctx = canvas.getContext("2d");
+  ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+  hasDrawn.value = false;
+}
+let resizeObserver = null;
+watch(canvasWrapEl, (el) => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  if (!el || typeof ResizeObserver === "undefined") return;
+  resizeObserver = new ResizeObserver(() => syncCanvasSize());
+  resizeObserver.observe(el);
+});
+onBeforeUnmount(() => resizeObserver?.disconnect());
 function getCtx() {
   return canvasRef.value?.getContext("2d") ?? null;
 }
+const STROKE_WIDTH = 2.5;
+let lastPoint = null;
+let lastMid = null;
 function onPointerDown(e) {
   isDrawing = true;
   hasDrawn.value = true;
@@ -86,26 +115,52 @@ function onPointerDown(e) {
   if (!ctx) return;
   e.target.setPointerCapture(e.pointerId);
   ctx.strokeStyle = strokeColor.value;
-  ctx.lineWidth = 2;
+  ctx.fillStyle = strokeColor.value;
+  ctx.lineWidth = STROKE_WIDTH;
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
+  const p = { x: e.offsetX, y: e.offsetY };
+  lastPoint = p;
+  lastMid = p;
   ctx.beginPath();
-  ctx.moveTo(e.offsetX, e.offsetY);
+  ctx.arc(p.x, p.y, STROKE_WIDTH / 2, 0, Math.PI * 2);
+  ctx.fill();
 }
 function onPointerMove(e) {
-  if (!isDrawing) return;
+  if (!isDrawing || !lastPoint || !lastMid) return;
   const ctx = getCtx();
   if (!ctx) return;
-  ctx.lineTo(e.offsetX, e.offsetY);
+  const p = { x: e.offsetX, y: e.offsetY };
+  const mid = { x: (lastPoint.x + p.x) / 2, y: (lastPoint.y + p.y) / 2 };
+  ctx.beginPath();
+  ctx.moveTo(lastMid.x, lastMid.y);
+  ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, mid.x, mid.y);
   ctx.stroke();
+  lastPoint = p;
+  lastMid = mid;
 }
 function onPointerUp() {
+  if (isDrawing && lastPoint && lastMid) {
+    const ctx = getCtx();
+    if (ctx) {
+      ctx.beginPath();
+      ctx.moveTo(lastMid.x, lastMid.y);
+      ctx.lineTo(lastPoint.x, lastPoint.y);
+      ctx.stroke();
+    }
+  }
   isDrawing = false;
+  lastPoint = null;
+  lastMid = null;
 }
 function clearCanvas() {
+  const canvas = canvasRef.value;
   const ctx = getCtx();
-  if (!ctx) return;
-  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  if (!canvas || !ctx) return;
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.restore();
   hasDrawn.value = false;
 }
 function submit() {

package/dist/runtime/components/panels/PlacedFieldSidebar.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/panels/PlacedFieldSidebar.vue

@@ -0,0 +1,505 @@
+<template>
+  <!-- Inline sidebar that takes its place in the viewer's flex row.
+       Block-level positioning means it lives strictly inside the page-
+       view section — no fixed-position overlay, so it can never spill
+       under the ViewerBar at the top, and z-index battles with the
+       AnnotationToolbar are moot.
+
+       Always shown while form-edit mode is active so the user has a
+       persistent surface for field properties (and a placeholder hint
+       when nothing is selected yet). -->
+  <aside
+    v-show="state.formEditMode.value"
+    class="kviewer-placed-sidebar relative flex flex-col h-full w-80 shrink-0 border-s border-default bg-elevated overflow-hidden"
+  >
+    <header class="px-4 py-3 border-b border-default shrink-0">
+      <p class="text-highlighted font-semibold truncate">{{ title }}</p>
+      <p v-if="description" class="text-muted text-sm truncate">{{ description }}</p>
+    </header>
+
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div v-if="field" class="flex flex-col gap-4 p-4">
+        <div class="flex flex-col gap-1">
+          <label class="text-xs font-medium text-muted">Field name</label>
+          <UInput
+            v-model="nameDraft"
+            size="sm"
+            spellcheck="false"
+            @blur="commitName"
+            @keydown.enter.prevent="commitName"
+          />
+          <p class="text-xs text-muted">
+            Shared names group radio buttons and bind multiple widgets to the same value.
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <UCheckbox
+            :model-value="field.required"
+            label="Required"
+            @update:model-value="onRequired"
+          />
+          <UCheckbox
+            :model-value="field.readOnly"
+            label="Read-only"
+            @update:model-value="onReadOnly"
+          />
+        </div>
+
+        <template v-if="field.fieldType === 'text'">
+          <div class="flex flex-col gap-2">
+            <UCheckbox
+              :model-value="!!field.multiLine"
+              label="Multi-line"
+              @update:model-value="onMultiLine"
+            />
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-muted">Max length</label>
+              <UInput
+                type="number"
+                :model-value="field.maxLen != null ? String(field.maxLen) : ''"
+                placeholder="No limit"
+                size="sm"
+                min="0"
+                @update:model-value="onMaxLen"
+              />
+            </div>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'checkbox'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Style</label>
+            <USelect
+              :model-value="field.checkboxStyle ?? 'check'"
+              :items="checkboxStyleItems"
+              size="sm"
+              @update:model-value="onCheckboxStyle"
+            />
+            <p class="text-xs text-muted">
+              Glyph drawn when checked. Saved as <code>/MK /CA</code> on export.
+            </p>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'dropdown'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Options</label>
+            <div class="flex flex-col gap-1">
+              <div
+                v-for="(opt, i) in field.options ?? []"
+                :key="i"
+                class="flex items-center gap-1"
+              >
+                <UInput
+                  :model-value="opt.displayValue"
+                  size="sm"
+                  spellcheck="false"
+                  placeholder="Label"
+                  class="flex-1"
+                  @update:model-value="(v) => updateOption(i, v)"
+                />
+                <UButton
+                  icon="i-lucide-x"
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  square
+                  @click="removeOption(i)"
+                />
+              </div>
+            </div>
+            <UButton
+              icon="i-lucide-plus"
+              label="Add option"
+              variant="soft"
+              color="neutral"
+              size="xs"
+              class="mt-1 w-full justify-center"
+              @click="addOption"
+            />
+            <UCheckbox
+              :model-value="field.combo !== false"
+              label="Combo box (collapsible)"
+              class="mt-2"
+              @update:model-value="onCombo"
+            />
+            <UCheckbox
+              :model-value="!!field.editable"
+              label="Allow custom text"
+              @update:model-value="onEditable"
+            />
+            <UCheckbox
+              :model-value="!!field.multiSelect"
+              label="Multi-select"
+              @update:model-value="onMultiSelect"
+            />
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'signature'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Prompt text</label>
+            <UInput
+              v-model="promptDraft"
+              size="sm"
+              spellcheck="false"
+              placeholder="Click to sign"
+              @blur="commitPrompt"
+              @keydown.enter.prevent="commitPrompt"
+            />
+            <p class="text-xs text-muted">
+              Shown on the unsigned widget. Defaults to "Click to sign".
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-medium text-muted">Lock fields after signing</label>
+              <USelect
+                :model-value="field.lockAction ?? 'none'"
+                :items="lockActionItems"
+                size="sm"
+                @update:model-value="onLockAction"
+              />
+              <p class="text-xs text-muted">
+                Once this signature is filled, listed fields become read-only
+                inside the viewer. Not preserved on PDF export.
+              </p>
+            </div>
+
+            <div
+              v-if="field.lockAction === 'include' || field.lockAction === 'exclude'"
+              class="flex flex-col gap-1"
+            >
+              <label class="text-xs font-medium text-muted">
+                {{ field.lockAction === "include" ? "Lock these fields" : "Lock all fields except" }}
+              </label>
+              <div
+                v-if="otherFieldNames.length === 0"
+                class="text-xs text-muted italic"
+              >
+                No other named fields in the document.
+              </div>
+              <div v-else class="flex flex-col gap-1 max-h-48 overflow-y-auto">
+                <UCheckbox
+                  v-for="name in otherFieldNames"
+                  :key="name"
+                  :model-value="(field.lockFieldNames ?? []).includes(name)"
+                  :label="name"
+                  @update:model-value="(v) => toggleLockField(name, v === true)"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template v-if="field.fieldType === 'radio'">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Group</label>
+            <USelect
+              :model-value="field.fieldName"
+              :items="radioGroupItems"
+              size="sm"
+              @update:model-value="onRadioGroup"
+            />
+            <p class="text-xs text-muted">
+              Radios sharing a group act as one — picking one clears the others.
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-muted">Option value</label>
+            <UInput
+              v-model="buttonValueDraft"
+              size="sm"
+              spellcheck="false"
+              @blur="commitButtonValue"
+              @keydown.enter.prevent="commitButtonValue"
+            />
+            <p class="text-xs text-muted">
+              Value stored when this option is selected. Must be unique inside the group.
+            </p>
+          </div>
+        </template>
+
+        <div class="flex flex-col gap-1 text-xs text-muted">
+          <div>Type: <span class="font-medium">{{ field.fieldType }}</span></div>
+          <div>Page: <span class="font-medium">{{ field.pageNumber }}</span></div>
+        </div>
+
+        <UButton
+          color="error"
+          variant="soft"
+          icon="i-lucide-trash-2"
+          block
+          @click="onDelete"
+        >
+          Delete field
+        </UButton>
+      </div>
+      <div v-else class="text-sm text-muted p-4">
+        Select a placed field to edit its properties.
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { CHECKBOX_STYLE_OPTIONS } from "../../annotation/checkbox-styles";
+import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
+const checkboxStyleItems = CHECKBOX_STYLE_OPTIONS;
+const formFields = useFormFields();
+const state = useViewerState();
+const field = computed(() => {
+  const id = formFields.selectedPlacedFieldId.value;
+  if (!id) return null;
+  return formFields.getFieldById(id) ?? null;
+});
+const title = computed(() => {
+  if (!field.value) return "Field properties";
+  return field.value.fieldName;
+});
+const description = computed(() => {
+  if (!field.value) return void 0;
+  return `${labelForType(field.value.fieldType)} on page ${field.value.pageNumber}`;
+});
+function labelForType(t) {
+  switch (t) {
+    case "text":
+      return "Text field";
+    case "checkbox":
+      return "Checkbox";
+    case "radio":
+      return "Radio button";
+    case "signature":
+      return "Signature field";
+    case "dropdown":
+      return "Dropdown";
+    case "button":
+      return "Button";
+    default:
+      return "Field";
+  }
+}
+const nameDraft = ref("");
+const buttonValueDraft = ref("");
+const promptDraft = ref("");
+watch(field, (f) => {
+  nameDraft.value = f?.fieldName ?? "";
+  buttonValueDraft.value = f?.buttonValue ?? "";
+  promptDraft.value = f?.promptText ?? "";
+}, { immediate: true });
+const lockActionItems = [
+  { label: "None", value: "none" },
+  { label: "All other fields", value: "all" },
+  { label: "Selected fields only", value: "include" },
+  { label: "All except selected", value: "exclude" }
+];
+const NEW_GROUP_SENTINEL = "__new_radio_group__";
+const radioGroupItems = computed(() => {
+  const names = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.fieldType === "radio" && d.fieldName) names.add(d.fieldName);
+    }
+  }
+  const sorted = Array.from(names).sort();
+  return [
+    ...sorted.map((n) => ({ label: n, value: n })),
+    { label: "+ New group", value: NEW_GROUP_SENTINEL }
+  ];
+});
+const otherFieldNames = computed(() => {
+  const current = field.value;
+  if (!current) return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.id === current.id) continue;
+      if (!d.fieldName) continue;
+      names.add(d.fieldName);
+    }
+  }
+  return Array.from(names).sort();
+});
+function commitName() {
+  if (!field.value) return;
+  const v = nameDraft.value.trim();
+  if (!v || v === field.value.fieldName) {
+    nameDraft.value = field.value.fieldName;
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, { fieldName: v });
+}
+function commitButtonValue() {
+  if (!field.value) return;
+  const v = buttonValueDraft.value.trim();
+  if (!v || v === field.value.buttonValue) {
+    buttonValueDraft.value = field.value.buttonValue ?? "";
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, { buttonValue: v });
+}
+function commitPrompt() {
+  if (!field.value) return;
+  const v = promptDraft.value.trim();
+  const next = v === "" ? void 0 : v;
+  if (next === field.value.promptText) return;
+  formFields.updatePlacedField(field.value.id, { promptText: next });
+}
+function onLockAction(v) {
+  if (!field.value) return;
+  if (v === "none") {
+    formFields.updatePlacedField(field.value.id, {
+      lockAction: void 0,
+      lockFieldNames: void 0
+    });
+    return;
+  }
+  formFields.updatePlacedField(field.value.id, {
+    lockAction: v,
+    // Initialize an empty list when switching to include/exclude so the
+    // checkbox UI binds against an array immediately.
+    lockFieldNames: field.value.lockFieldNames ?? []
+  });
+}
+function nextFreeRadioGroupName() {
+  const used = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) used.add(d.fieldName);
+  }
+  let n = 1;
+  while (used.has(`Radio_${n}`)) n += 1;
+  return `Radio_${n}`;
+}
+function nextFreeOptionValue(groupName, ignoreId) {
+  const used = /* @__PURE__ */ new Set();
+  for (const defs of formFields.fieldDefinitions.value.values()) {
+    for (const d of defs) {
+      if (d.id === ignoreId) continue;
+      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 onRadioGroup(v) {
+  if (!field.value) return;
+  if (v === field.value.fieldName) return;
+  if (v === NEW_GROUP_SENTINEL) {
+    const name = nextFreeRadioGroupName();
+    formFields.updatePlacedField(field.value.id, {
+      fieldName: name,
+      buttonValue: "Option_1"
+    });
+    return;
+  }
+  const current = field.value.buttonValue ?? "";
+  const collides = (() => {
+    if (!current) return true;
+    for (const defs of formFields.fieldDefinitions.value.values()) {
+      for (const d of defs) {
+        if (d.id === field.value.id) continue;
+        if (d.fieldType === "radio" && d.fieldName === v && d.buttonValue === current) {
+          return true;
+        }
+      }
+    }
+    return false;
+  })();
+  const buttonValue = collides ? nextFreeOptionValue(v, field.value.id) : current;
+  formFields.updatePlacedField(field.value.id, {
+    fieldName: v,
+    buttonValue
+  });
+}
+function toggleLockField(name, checked) {
+  if (!field.value) return;
+  const current = new Set(field.value.lockFieldNames ?? []);
+  if (checked) current.add(name);
+  else current.delete(name);
+  formFields.updatePlacedField(field.value.id, {
+    lockFieldNames: Array.from(current)
+  });
+}
+function onRequired(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { required: v === true });
+}
+function onReadOnly(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { readOnly: v === true });
+}
+function onMultiLine(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { multiLine: v === true });
+}
+function onMaxLen(v) {
+  if (!field.value) return;
+  const n = typeof v === "number" ? v : Number.parseInt(v, 10);
+  const next = Number.isFinite(n) && n > 0 ? n : void 0;
+  formFields.updatePlacedField(field.value.id, { maxLen: next });
+}
+function onDelete() {
+  if (!field.value) return;
+  formFields.removePlacedField(field.value.id);
+}
+function onCheckboxStyle(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { checkboxStyle: v });
+}
+function updateOption(i, displayValue) {
+  if (!field.value) return;
+  const next = (field.value.options ?? []).slice();
+  if (!next[i]) return;
+  next[i] = { exportValue: displayValue, displayValue };
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function addOption() {
+  if (!field.value) return;
+  const existing = field.value.options ?? [];
+  const label = `Option ${existing.length + 1}`;
+  const next = [...existing, { exportValue: label, displayValue: label }];
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function removeOption(i) {
+  if (!field.value) return;
+  const next = (field.value.options ?? []).slice();
+  next.splice(i, 1);
+  formFields.updatePlacedField(field.value.id, { options: next });
+}
+function onCombo(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { combo: v === true });
+}
+function onEditable(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { editable: v === true });
+}
+function onMultiSelect(v) {
+  if (!field.value) return;
+  formFields.updatePlacedField(field.value.id, { multiSelect: v === true });
+}
+function onDocPointerDown(e) {
+  if (!formFields.selectedPlacedFieldId.value) return;
+  const target = e.target;
+  if (!target) return;
+  if (target.closest(".kviewer-form-field")) return;
+  if (target.closest(".kviewer-placed-sidebar")) return;
+  if (target.closest('[role="dialog"]')) return;
+  if (target.closest("[data-reka-popper-content-wrapper]")) return;
+  formFields.selectPlacedField(null);
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("pointerdown", onDocPointerDown, true);
+  onBeforeUnmount(() => {
+    window.removeEventListener("pointerdown", onDocPointerDown, true);
+  });
+}
+</script>

package/dist/runtime/components/panels/PlacedFieldSidebar.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/tools/FormFieldTools.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;