kviewer 0.0.9 → 0.0.10

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "kviewer",
   "configKey": "kviewer",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/annotation/engine/editor/editor.d.ts

@@ -64,9 +64,12 @@ export declare abstract class Editor {
     addSerializedGroupToLayer(konvaStage: Konva.Stage, konvaString: string): void;
     deleteGroup(id: string, konvaStage: Konva.Stage): void;
     updateStyle(annotationStore: IAnnotationStore, style: IAnnotationStyle): void;
-    static Timer: {
-        [pageNumber: number]: number;
-    };
+    static Timer: Map<number, {
+        id: number;
+        callback: (pageNumber: number) => void;
+    }>;
     static TimerClear(pageNumber: number): void;
     static TimerStart(pageNumber: number, callback: (pageNumber: number) => void, delay?: number): void;
+    /** Immediately execute and clear all pending timers (e.g. before export). */
+    static flushAllTimers(): void;
 }

package/dist/runtime/annotation/engine/editor/editor.js

@@ -231,18 +231,31 @@ export class Editor {
   updateStyle(annotationStore, style) {
     this.changeStyle(annotationStore, style);
   }
-  static Timer = {};
+  static Timer = /* @__PURE__ */ new Map();
   static TimerClear(pageNumber) {
-    const timer = Editor.Timer[pageNumber];
-    if (timer) {
-      window.clearTimeout(timer);
+    const entry = Editor.Timer.get(pageNumber);
+    if (entry) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
     }
   }
   static TimerStart(pageNumber, callback, delay = 1e3) {
-    Editor.Timer[pageNumber] = window.setTimeout(() => {
-      if (typeof callback === "function") {
-        callback(pageNumber);
-      }
-    }, delay);
+    Editor.Timer.set(pageNumber, {
+      callback,
+      id: window.setTimeout(() => {
+        Editor.Timer.delete(pageNumber);
+        if (typeof callback === "function") {
+          callback(pageNumber);
+        }
+      }, delay)
+    });
+  }
+  /** Immediately execute and clear all pending timers (e.g. before export). */
+  static flushAllTimers() {
+    for (const [pageNumber, entry] of Editor.Timer) {
+      window.clearTimeout(entry.id);
+      Editor.Timer.delete(pageNumber);
+      entry.callback(pageNumber);
+    }
   }
 }

package/dist/runtime/annotation/engine/editor/selector.d.ts

@@ -13,6 +13,13 @@ export interface ISelectorOptions {
     onFreeTextDoubleClick?: (id: string) => void;
     /** When provided and returns true, only pen/mouse input can interact. */
     getStylusModeEnabled?: () => boolean;
+    /**
+     * Toggle external gesture handlers (e.g. panzoom) off while an annotation
+     * is being dragged/transformed. Without this, on mobile the panzoom
+     * single-finger pan runs in parallel with Konva's shape drag and both
+     * CSS transforms compete every frame, causing visible lag.
+     */
+    setExternalGesturesEnabled?: (enabled: boolean) => void;
 }
 export declare class Selector {
     readonly onSelected: (id: string, isClick: boolean, clientRect: IRect) => void;
@@ -23,6 +30,7 @@ export declare class Selector {
     private onRequestDeleteConfirm?;
     private onFreeTextDoubleClick?;
     private getStylusModeEnabled?;
+    private setExternalGesturesEnabled?;
     private transformerStore;
     private getAnnotationStore;
     private konvaCanvasStore;
@@ -32,7 +40,7 @@ export declare class Selector {
     private marqueeRect;
     private marqueeStartPos;
     private marqueeStage;
-    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, }: ISelectorOptions);
+    constructor({ konvaCanvasStore, getAnnotationStore, onDelete, onSelected, onMultiSelected, onCancel, onChanged, onRequestDeleteConfirm, onFreeTextDoubleClick, getStylusModeEnabled, setExternalGesturesEnabled, }: ISelectorOptions);
     /** Returns true if this event should be rejected (finger touch in stylus mode). */
     private isStylusRejected;
     private handleKeyDown;

package/dist/runtime/annotation/engine/editor/selector.js

@@ -12,6 +12,7 @@ export class Selector {
   onRequestDeleteConfirm;
   onFreeTextDoubleClick;
   getStylusModeEnabled;
+  setExternalGesturesEnabled;
   transformerStore = /* @__PURE__ */ new Map();
   getAnnotationStore;
   konvaCanvasStore;
@@ -31,7 +32,8 @@ export class Selector {
     onChanged,
     onRequestDeleteConfirm,
     onFreeTextDoubleClick,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    setExternalGesturesEnabled
   }) {
     this.konvaCanvasStore = konvaCanvasStore;
     this.getAnnotationStore = getAnnotationStore;
@@ -43,6 +45,7 @@ export class Selector {
     this.onRequestDeleteConfirm = onRequestDeleteConfirm;
     this.onFreeTextDoubleClick = onFreeTextDoubleClick;
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.setExternalGesturesEnabled = setExternalGesturesEnabled;
     this.handleKeyDown = this.handleKeyDown.bind(this);
     window.addEventListener("keydown", this.handleKeyDown);
   }
@@ -188,6 +191,7 @@ export class Selector {
     const transformer = new Konva.Transformer({
       resizeEnabled: rawAnnotationStore.resizable,
       rotateEnabled: false,
+      enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right"],
       borderStrokeWidth: defaultOptions.chooseSetting.STROKEWIDTH,
       borderStroke: defaultOptions.chooseSetting.COLOR,
       anchorFill: defaultOptions.chooseSetting.COLOR,
@@ -223,7 +227,34 @@ export class Selector {
     }
     transformer.off("transformend");
     transformer.off("transformstart");
+    let dragLayer = null;
+    const moveToDragLayer = () => {
+      if (dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      dragLayer = new Konva.Layer();
+      konvaStage.add(dragLayer);
+      group.moveTo(dragLayer);
+      transformer.moveTo(dragLayer);
+      bg.batchDraw();
+      dragLayer.batchDraw();
+    };
+    const restoreFromDragLayer = () => {
+      if (!dragLayer) return;
+      const bg = this.getBackgroundLayer(konvaStage);
+      group.moveTo(bg);
+      transformer.moveTo(bg);
+      dragLayer.destroy();
+      dragLayer = null;
+      bg.batchDraw();
+    };
+    transformer.on("transformstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
+      this.onCancel();
+    });
     transformer.on("transformend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -232,13 +263,22 @@ export class Selector {
         transformer.getClientRect()
       );
     });
-    transformer.on("transformstart", () => {
-      this.onCancel();
-    });
+    let dragStartRect = null;
+    let dragAnchorPos = null;
     transformer.on("dragstart", () => {
+      this.setExternalGesturesEnabled?.(false);
+      moveToDragLayer();
       this.onCancel();
+      const boxes = transformer.nodes().map((node) => node.getClientRect());
+      dragStartRect = this.getTotalBox(boxes);
+      const firstNode = transformer.nodes()[0];
+      dragAnchorPos = firstNode ? firstNode.getAbsolutePosition() : null;
     });
     transformer.on("dragend", () => {
+      this.setExternalGesturesEnabled?.(true);
+      restoreFromDragLayer();
+      dragStartRect = null;
+      dragAnchorPos = null;
       this.onChanged(
         group.id(),
         group.toJSON(),
@@ -248,29 +288,32 @@ export class Selector {
       );
     });
     transformer.on("dragmove", () => {
-      const boxes = transformer.nodes().map((node) => node.getClientRect());
-      const box = this.getTotalBox(boxes);
-      transformer.nodes().forEach((shape) => {
-        const absPos = shape.getAbsolutePosition();
-        const offsetX = box.x - absPos.x;
-        const offsetY = box.y - absPos.y;
-        const halfWidth = box.width / 2;
-        const halfHeight = box.height / 2;
-        const newAbsPos = { ...absPos };
-        if (box.x + halfWidth < 0) {
-          newAbsPos.x = -offsetX - halfWidth;
-        }
-        if (box.y + halfHeight < 0) {
-          newAbsPos.y = -offsetY - halfHeight;
-        }
-        if (box.x + halfWidth > konvaStage.width()) {
-          newAbsPos.x = konvaStage.width() - halfWidth - offsetX;
-        }
-        if (box.y + halfHeight > konvaStage.height()) {
-          newAbsPos.y = konvaStage.height() - halfHeight - offsetY;
-        }
-        shape.setAbsolutePosition(newAbsPos);
-      });
+      if (!dragStartRect || !dragAnchorPos) return;
+      const nodes = transformer.nodes();
+      const firstNode = nodes[0];
+      if (!firstNode) return;
+      const currentPos = firstNode.getAbsolutePosition();
+      const dx = currentPos.x - dragAnchorPos.x;
+      const dy = currentPos.y - dragAnchorPos.y;
+      const boxX = dragStartRect.x + dx;
+      const boxY = dragStartRect.y + dy;
+      const halfWidth = dragStartRect.width / 2;
+      const halfHeight = dragStartRect.height / 2;
+      const stageW = konvaStage.width();
+      const stageH = konvaStage.height();
+      let clampDx = 0;
+      let clampDy = 0;
+      if (boxX + halfWidth < 0) clampDx = -(boxX + halfWidth);
+      else if (boxX + halfWidth > stageW) clampDx = stageW - (boxX + halfWidth);
+      if (boxY + halfHeight < 0) clampDy = -(boxY + halfHeight);
+      else if (boxY + halfHeight > stageH) clampDy = stageH - (boxY + halfHeight);
+      if (clampDx !== 0 || clampDy !== 0) {
+        nodes.forEach((shape) => {
+          const pos = shape.getAbsolutePosition();
+          shape.setAbsolutePosition({ x: pos.x + clampDx, y: pos.y + clampDy });
+        });
+        dragAnchorPos = firstNode.getAbsolutePosition();
+      }
     });
     transformer.nodes([group]);
     this.getBackgroundLayer(konvaStage).add(transformer);
@@ -507,12 +550,11 @@ export class Selector {
           this.transformerStore.set("__multi__", transformer);
           nodes.forEach((node) => {
             node.on("dragstart.marquee", () => {
+              this.setExternalGesturesEnabled?.(false);
               this.onCancel();
             });
-            node.on("dragmove.marquee", () => {
-              this.onMultiSelected(matchedIds, transformer.getClientRect());
-            });
             node.on("dragend.marquee", () => {
+              this.setExternalGesturesEnabled?.(true);
               this.onMultiSelected(matchedIds, transformer.getClientRect());
             });
           });

package/dist/runtime/annotation/engine/painter.d.ts

@@ -33,12 +33,13 @@ export declare class Painter {
     private getStylusModeEnabled?;
     private getReadonly?;
     private freehandGroupingDelay;
-    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, }: {
+    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, freehandGroupingDelay, setExternalGesturesEnabled, }: {
         userName: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
         getReadonly?: () => boolean;
         freehandGroupingDelay?: number;
+        setExternalGesturesEnabled?: (enabled: boolean) => void;
     });
     private editFreeText;
     private bindGlobalEvents;

package/dist/runtime/annotation/engine/painter.js

@@ -10,6 +10,7 @@ import {
   PAINTER_PAINTING_TYPE
 } from "./const.js";
 import { hideCursorPreview } from "./cursor-preview.js";
+import { Editor } from "./editor/editor.js";
 import { EditorCircle } from "./tools/circle.js";
 import { EditorFreeHand } from "./tools/freehand.js";
 import { EditorFreeHighlight } from "./tools/free-highlight.js";
@@ -23,6 +24,10 @@ import { EditorArrow } from "./tools/arrow.js";
 import { EditorCloud } from "./tools/cloud.js";
 import { Selector } from "./editor/selector.js";
 import { Store } from "./store.js";
+import { isIPad } from "./input-device.js";
+if (typeof window !== "undefined" && isIPad()) {
+  Konva.pixelRatio = 1;
+}
 export class Painter {
   userName;
   konvaCanvasStore = /* @__PURE__ */ new Map();
@@ -40,7 +45,8 @@ export class Painter {
     callbacks,
     getStylusModeEnabled,
     getReadonly,
-    freehandGroupingDelay
+    freehandGroupingDelay,
+    setExternalGesturesEnabled
   }) {
     this.userName = userName;
     this.callbacks = callbacks;
@@ -86,7 +92,8 @@ export class Painter {
       onFreeTextDoubleClick: (id) => {
         void this.editFreeText(id);
       },
-      getStylusModeEnabled: this.getStylusModeEnabled
+      getStylusModeEnabled: this.getStylusModeEnabled,
+      setExternalGesturesEnabled
     });
     this.bindGlobalEvents();
   }
@@ -138,7 +145,9 @@ export class Painter {
   }
   applyStylusTouchAction(stage) {
     stage.preventDefault(false);
-    Konva.pixelRatio = 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "pan-x pan-y";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -147,7 +156,9 @@ export class Painter {
   }
   removeStylusTouchAction(stage) {
     stage.preventDefault(true);
-    Konva.pixelRatio = window.devicePixelRatio || 1;
+    if (!isIPad()) {
+      Konva.pixelRatio = window.devicePixelRatio || 1;
+    }
     const content = stage.content;
     if (content) content.style.touchAction = "";
     stage.container().querySelectorAll("canvas").forEach((c) => {
@@ -551,6 +562,7 @@ export class Painter {
     return this.store.annotations;
   }
   getExportContext() {
+    Editor.flushAllTimers();
     const originalIds = this.store.originalIds;
     const modifiedIds = this.store.modifiedOriginals;
     const changedAnnotations = this.store.annotations.filter(

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

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: number;
 };
-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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/PdfPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="kviewer-page"
+    class="kviewer-page shadow-lg"
     :style="{
   position: 'relative',
   width: cssWidth + 'px',
@@ -63,7 +63,8 @@ const PDFJS_ANNOTATION_MODE_DISABLE = 0;
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   pageMeta: { type: Object, required: true },
-  scale: { type: Number, required: true }
+  scale: { type: Number, required: true },
+  renderQuality: { type: Number, required: false, default: 1 }
 });
 const canvasRef = ref(null);
 const textLayerRef = ref(null);
@@ -141,7 +142,14 @@ watch(
     }
   }
 );
-async function renderCanvas() {
+watch(
+  () => props.renderQuality,
+  async () => {
+    if (!pageProxy.value) return;
+    await renderCanvas({ doubleBuffer: true });
+  }
+);
+async function renderCanvas(opts) {
   const canvas = canvasRef.value;
   const proxy = pageProxy.value;
   if (!canvas || !proxy) return;
@@ -150,23 +158,48 @@ async function renderCanvas() {
     currentRenderTask = null;
   }
   const dpr = window.devicePixelRatio || 1;
+  const quality = props.renderQuality ?? 1;
   const viewport = proxy.getViewport({
-    scale: props.scale * dpr
+    scale: props.scale * quality * dpr
   });
-  canvas.width = viewport.width;
-  canvas.height = viewport.height;
-  try {
-    currentRenderTask = proxy.render({
-      canvasContext: canvas.getContext("2d"),
-      viewport,
-      annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
-    });
-    await currentRenderTask.promise;
-  } catch (e) {
-    if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
-    throw e;
-  } finally {
-    currentRenderTask = null;
+  if (opts?.doubleBuffer) {
+    const tmp = document.createElement("canvas");
+    tmp.width = viewport.width;
+    tmp.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: tmp.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      canvas.getContext("2d").drawImage(tmp, 0, 0);
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+      tmp.width = 0;
+      tmp.height = 0;
+    }
+  } else {
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    try {
+      currentRenderTask = proxy.render({
+        canvasContext: canvas.getContext("2d"),
+        viewport,
+        annotationMode: PDFJS_ANNOTATION_MODE_DISABLE
+      });
+      await currentRenderTask.promise;
+    } catch (e) {
+      if (e instanceof Error && e.message?.includes("Rendering cancelled")) return;
+      throw e;
+    } finally {
+      currentRenderTask = null;
+    }
   }
 }
 function initKonva() {

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

@@ -3,7 +3,12 @@ type __VLS_Props = {
     pageNumber: number;
     pageMeta: PageMeta;
     scale: number;
+    /** Canvas internal resolution multiplier (CSS size unchanged).
+     *  Used by panzoom to sharpen the PDF when visually zoomed in. */
+    renderQuality?: number;
 };
-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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    renderQuality: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };

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

@@ -1,6 +1,8 @@
-import type { IAnnotationType } from '../annotation/engine/types.js';
 type __VLS_Props = {
-    tool: IAnnotationType | undefined;
+    tool: {
+        name: string;
+        icon?: string;
+    } | undefined;
     active: boolean;
     indicatorColor?: string;
 };