kviewer 0.0.9 → 0.0.11

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

@@ -7,10 +7,10 @@
     <template #body>
       <div class="flex flex-col gap-3">
         <UTextarea
+          ref="textareaRef"
           v-model="inputValue"
           placeholder="Start typing..."
           :rows="3"
-          autofocus
         />
         <div class="flex items-center justify-between">
           <div class="flex gap-1">
@@ -22,6 +22,7 @@
   c === currentColor ? 'border-white ring-2 ring-blue-500' : 'border-transparent'
 "
               :style="{ backgroundColor: c }"
+              @pointerdown="onPreserveFocus"
               @click="currentColor = c"
             />
           </div>
@@ -39,14 +40,19 @@
         <UButton variant="ghost" color="neutral" @click="cancel">
           Cancel
         </UButton>
-        <UButton :disabled="!inputValue.trim()" @click="submit">OK</UButton>
+        <UButton
+          :disabled="!inputValue.trim()"
+          @click="submit"
+        >
+          OK
+        </UButton>
       </div>
     </template>
   </UModal>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, nextTick } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
 const props = defineProps({
   open: { type: Boolean, required: true },
@@ -55,6 +61,20 @@ const props = defineProps({
   initialText: { type: String, required: false }
 });
 const emit = defineEmits(["update:open", "submit", "cancel"]);
+const textareaRef = ref(null);
+function focusTextarea() {
+  const instance = textareaRef.value;
+  if (!instance) return;
+  const el = instance.inputRef ?? instance.$el?.querySelector?.("textarea") ?? instance;
+  if (el && typeof el.focus === "function") {
+    el.focus();
+    const len = el.value?.length ?? 0;
+    try {
+      el.setSelectionRange(len, len);
+    } catch {
+    }
+  }
+}
 const isOpen = ref(props.open);
 watch(
   () => props.open,
@@ -64,6 +84,7 @@ watch(
       inputValue.value = props.initialText ?? "";
       currentColor.value = props.defaultColor;
       currentFontSize.value = String(props.defaultFontSize);
+      nextTick(() => requestAnimationFrame(() => focusTextarea()));
     }
   }
 );
@@ -86,4 +107,7 @@ function submit() {
 function cancel() {
   emit("cancel");
 }
+function onPreserveFocus(e) {
+  if (e.pointerType === "mouse") e.preventDefault();
+}
 </script>

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;