kviewer 0.0.10 → 0.0.11

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

@@ -0,0 +1,16 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+    selected: boolean;
+    /** CSS pixels per PDF unit for the current page. */
+    scale: number;
+    /** PDF-space page height (kept for parity; unused here). */
+    pageHeight: number;
+};
+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/PlacedFieldChrome.vue

@@ -0,0 +1,131 @@
+<template>
+  <!-- The whole chrome is the interactive surface in form-edit mode:
+       click to select, drag anywhere to move, plus a label bar above and
+       eight resize handles when selected. -->
+  <div
+    ref="rootEl"
+    class="kviewer-placed-chrome"
+    :class="{ 'kviewer-placed-chrome--selected': selected }"
+    :style="{ '--kvw-handle-zoom': handleZoom }"
+    @pointerdown.stop="onChromePointerDown"
+    @click.stop
+  >
+    <div
+      v-if="selected"
+      class="kviewer-placed-chrome__grip"
+      :title="field.fieldName"
+    >
+      <UIcon name="i-lucide-grip-vertical" class="kviewer-placed-chrome__grip-dots" />
+      <span class="kviewer-placed-chrome__grip-label">{{ field.fieldName }}</span>
+    </div>
+
+    <template v-if="selected">
+      <div
+        v-for="h in handles"
+        :key="h.name"
+        class="kviewer-placed-chrome__handle"
+        :class="`kviewer-placed-chrome__handle--${h.name}`"
+        :style="{ cursor: h.cursor }"
+        @pointerdown.stop="(e) => onHandlePointerDown(e, h.name)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
+const rootEl = ref(null);
+const viewerState = useViewerState();
+const handleZoom = computed(() => {
+  const totalZoom = (props.scale || 1) * (viewerState.visualZoom.value || 1);
+  return Math.max(0.4, 1 / totalZoom).toFixed(3);
+});
+const props = defineProps({
+  field: { type: Object, required: true },
+  selected: { type: Boolean, required: true },
+  scale: { type: Number, required: true },
+  pageHeight: { type: Number, required: true }
+});
+const emit = defineEmits(["select"]);
+const formFields = useFormFields();
+const handles = [
+  { name: "n", cursor: "ns-resize" },
+  { name: "s", cursor: "ns-resize" },
+  { name: "e", cursor: "ew-resize" },
+  { name: "w", cursor: "ew-resize" },
+  { name: "ne", cursor: "nesw-resize" },
+  { name: "nw", cursor: "nwse-resize" },
+  { name: "se", cursor: "nwse-resize" },
+  { name: "sw", cursor: "nesw-resize" }
+];
+function effectiveScale() {
+  const el = rootEl.value;
+  if (!el) return props.scale;
+  const rect = el.getBoundingClientRect();
+  const pdfWidth = props.field.rect[2] - props.field.rect[0];
+  if (pdfWidth <= 0 || rect.width <= 0) return props.scale;
+  return rect.width / pdfWidth;
+}
+const DRAG_THRESHOLD_PX = 3;
+function onChromePointerDown(e) {
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startRect = [...props.field.rect];
+  const s = effectiveScale();
+  let dragging = false;
+  const onMove = (ev) => {
+    if (!dragging) {
+      const adx = Math.abs(ev.clientX - startX);
+      const ady = Math.abs(ev.clientY - startY);
+      if (adx < DRAG_THRESHOLD_PX && ady < DRAG_THRESHOLD_PX) return;
+      dragging = true;
+    }
+    const dx = (ev.clientX - startX) / s;
+    const dy = (ev.clientY - startY) / s;
+    const pdfDy = -dy;
+    const next = [
+      startRect[0] + dx,
+      startRect[1] + pdfDy,
+      startRect[2] + dx,
+      startRect[3] + pdfDy
+    ];
+    formFields.updatePlacedField(props.field.id, { rect: next });
+  };
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    if (!dragging) emit("select");
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+function onHandlePointerDown(e, name) {
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const [sx1, sy1, sx2, sy2] = props.field.rect;
+  const s = effectiveScale();
+  const onMove = (ev) => {
+    const dx = (ev.clientX - startX) / s;
+    const dy = (ev.clientY - startY) / s;
+    const pdfDy = -dy;
+    let x1 = sx1, y1 = sy1, x2 = sx2, y2 = sy2;
+    if (name.includes("n")) y2 = Math.max(y1 + 4, sy2 + pdfDy);
+    if (name.includes("s")) y1 = Math.min(y2 - 4, sy1 + pdfDy);
+    if (name.includes("e")) x2 = Math.max(x1 + 4, sx2 + dx);
+    if (name.includes("w")) x1 = Math.min(x2 - 4, sx1 + dx);
+    formFields.updatePlacedField(props.field.id, { rect: [x1, y1, x2, y2] });
+  };
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+</script>
+
+<style>
+.kviewer-placed-chrome{cursor:move;inset:0;pointer-events:auto;position:absolute;touch-action:none}.kviewer-placed-chrome--selected{outline:1.5px dashed #1677ff;outline-offset:0}.kviewer-placed-chrome__grip{align-items:center;background:rgba(22,119,255,.15);border:1px solid rgba(22,119,255,.4);border-radius:calc(3px*var(--kvw-handle-zoom, 1));bottom:calc(100% + 3px*var(--kvw-handle-zoom, 1));color:#1677ff;cursor:move;display:flex;font-size:calc(9px*var(--kvw-handle-zoom, 1));gap:calc(3px*var(--kvw-handle-zoom, 1));height:calc(16px*var(--kvw-handle-zoom, 1));left:0;line-height:1;overflow:hidden;padding:0 calc(6px*var(--kvw-handle-zoom, 1)) 0 calc(2px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kviewer-placed-chrome__grip-dots{color:#1677ff;flex:0 0 auto;height:calc(10px*var(--kvw-handle-zoom, 1));width:calc(10px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__grip-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kviewer-placed-chrome__handle{background:#fff;border:1px solid #1677ff;border-radius:2px;height:calc(8px*var(--kvw-handle-zoom, 1));pointer-events:auto;position:absolute;touch-action:none;width:calc(8px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle:before{content:"";inset:calc(-8px*var(--kvw-handle-zoom, 1));position:absolute}.kviewer-placed-chrome__handle--n{left:50%;top:calc(-4px*var(--kvw-handle-zoom, 1));transform:translateX(-50%)}.kviewer-placed-chrome__handle--s{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:50%;transform:translateX(-50%)}.kviewer-placed-chrome__handle--e{right:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--w{left:calc(-4px*var(--kvw-handle-zoom, 1));top:50%;transform:translateY(-50%)}.kviewer-placed-chrome__handle--ne{right:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--nw{left:calc(-4px*var(--kvw-handle-zoom, 1));top:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--se{bottom:calc(-4px*var(--kvw-handle-zoom, 1));right:calc(-4px*var(--kvw-handle-zoom, 1))}.kviewer-placed-chrome__handle--sw{bottom:calc(-4px*var(--kvw-handle-zoom, 1));left:calc(-4px*var(--kvw-handle-zoom, 1))}
+</style>

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

@@ -0,0 +1,16 @@
+import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+type __VLS_Props = {
+    field: FormFieldDefinition;
+    selected: boolean;
+    /** CSS pixels per PDF unit for the current page. */
+    scale: number;
+    /** PDF-space page height (kept for parity; unused here). */
+    pageHeight: number;
+};
+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/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;