kviewer 0.0.8 → 0.0.10

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/tools/ActionTools.vue

@@ -18,11 +18,9 @@
       :disabled="!state.history.canRedo.value"
       @click="state.history.redo"
     />
-    <UButton
-      icon="i-lucide-eraser"
-      :variant="state.activeTool.value === 'eraser' ? 'soft' : 'ghost'"
-      color="neutral"
-      size="sm"
+    <ToolButton
+      :tool="{ name: 'Eraser', icon: 'i-lucide-eraser' }"
+      :active="state.activeTool.value === 'eraser'"
       data-testid="action-eraser"
       @click="state.selectTool('eraser')"
     />
@@ -31,5 +29,6 @@
 
 <script setup>
 import { useViewerState } from "../../composables/useViewerState";
+import ToolButton from "../ToolButton.vue";
 const state = useViewerState();
 </script>

package/dist/runtime/components/tools/DrawingTools.vue

@@ -18,7 +18,7 @@
       @click="state.selectTool(AnnotationType.FREETEXT)"
     />
     <StampPicker />
-    <SignaturePicker />
+    <SignaturePicker v-if="state.signatureHandlers" />
     <ToolButton
       :tool="getDef(AnnotationType.RECTANGLE)"
       :active="state.activeTool.value === AnnotationType.RECTANGLE"

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

@@ -4,4 +4,6 @@ export declare function createAnnotationEngine(viewerState: ViewerState, options
     userName?: string;
     onRequestTextInput: PainterCallbacks['onRequestTextInput'];
     onRequestDeleteConfirm?: PainterCallbacks['onRequestDeleteConfirm'];
+    freehandGroupingDelay?: number;
+    setExternalGesturesEnabled?: (enabled: boolean) => void;
 }): Painter;

package/dist/runtime/composables/useAnnotationEngine.js

@@ -21,6 +21,8 @@ export function createAnnotationEngine(viewerState, options) {
         if (annotationStore.type === AnnotationType.FREETEXT) {
           viewerState.painter.value?.selectAnnotation(annotationStore.id);
         }
+      } else {
+        viewerState.history.rebaseline();
       }
     },
     onStoreDelete: (id) => {
@@ -64,7 +66,9 @@ export function createAnnotationEngine(viewerState, options) {
     userName: options.userName ?? "User",
     callbacks,
     getStylusModeEnabled: () => viewerState.stylusMode.value,
-    getReadonly: () => viewerState.readonly.value
+    getReadonly: () => viewerState.readonly.value,
+    freehandGroupingDelay: options.freehandGroupingDelay,
+    setExternalGesturesEnabled: options.setExternalGesturesEnabled
   });
   viewerState.painter.value = painter;
   return painter;

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

@@ -6,6 +6,7 @@ export interface AnnotationHistory {
     undo: () => void;
     redo: () => void;
     reset: () => void;
+    rebaseline: () => void;
     canUndo: ComputedRef<boolean>;
     canRedo: ComputedRef<boolean>;
 }

package/dist/runtime/composables/useAnnotationHistory.js

@@ -6,15 +6,19 @@ function cloneAnnotations(map) {
 export function createAnnotationHistory(annotations, painter) {
   const undoStack = ref([]);
   const redoStack = ref([]);
+  let baseline = cloneAnnotations(annotations.value);
   const canUndo = computed(() => undoStack.value.length > 0);
   const canRedo = computed(() => redoStack.value.length > 0);
   function commit() {
-    const snapshot = cloneAnnotations(annotations.value);
-    undoStack.value.push(snapshot);
+    undoStack.value.push(baseline);
     if (undoStack.value.length > MAX_HISTORY) {
       undoStack.value.shift();
     }
     redoStack.value = [];
+    baseline = cloneAnnotations(annotations.value);
+  }
+  function rebaseline() {
+    baseline = cloneAnnotations(annotations.value);
   }
   function restoreSnapshot(target) {
     const p = painter.value;
@@ -53,6 +57,7 @@ export function createAnnotationHistory(annotations, painter) {
     redoStack.value.push(currentSnapshot);
     const target = undoStack.value.pop();
     restoreSnapshot(target);
+    baseline = cloneAnnotations(annotations.value);
   }
   function redo() {
     if (!canRedo.value) return;
@@ -60,10 +65,12 @@ export function createAnnotationHistory(annotations, painter) {
     undoStack.value.push(currentSnapshot);
     const target = redoStack.value.pop();
     restoreSnapshot(target);
+    baseline = cloneAnnotations(annotations.value);
   }
   function reset() {
     undoStack.value = [];
     redoStack.value = [];
+    baseline = cloneAnnotations(annotations.value);
   }
-  return { commit, undo, redo, reset, canUndo, canRedo };
+  return { commit, undo, redo, reset, rebaseline, canUndo, canRedo };
 }

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

@@ -0,0 +1,40 @@
+export interface InertiaPanzoomOptions {
+    minScale?: number;
+    maxScale?: number;
+    /** Minimum pointer movement (px) before axis direction is committed. */
+    axisLockThreshold?: number;
+    /** Vertical must exceed horizontal by this ratio to lock to Y-axis. */
+    axisLockRatio?: number;
+}
+export interface ScrollToElementOptions {
+    /** Vertical alignment within the viewport. Default: 'start'. */
+    block?: 'start' | 'center';
+    /** Animate to the target with inertia, or snap instantly. Default: true. */
+    animate?: boolean;
+}
+export interface Transform {
+    scale: number;
+    tx: number;
+    ty: number;
+}
+export interface InertiaPanzoomHandle {
+    /** Bind gesture handlers to the given element (its parent becomes the viewport). */
+    attach: (target: HTMLElement) => void;
+    /** Remove handlers and clear inline styles. */
+    detach: () => void;
+    /** Reset transform and cancel any in-flight momentum. */
+    reset: () => void;
+    /** Cancel in-flight momentum without changing transform. */
+    stop: () => void;
+    getScale: () => number;
+    getTransform: () => Transform;
+    /** Animate the view so `elem` is at the top (or center) of the viewport. */
+    scrollToElement: (elem: HTMLElement, opts?: ScrollToElementOptions) => void;
+    /** Pan by a delta in viewport pixels (clamped to bounds). */
+    scrollBy: (dx: number, dy: number) => void;
+    /** Enable/disable pan+pinch gestures (wheel/scrollbar/keyboard still work). */
+    setGesturesEnabled: (enabled: boolean) => void;
+    /** Subscribe to transform updates. Returns an unsubscribe function. */
+    onChange: (cb: (t: Transform) => void) => () => void;
+}
+export declare function useInertiaPanzoom(options?: InertiaPanzoomOptions): InertiaPanzoomHandle;