kviewer 0.3.0 → 0.3.1

package/dist/module.json

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

package/dist/module.mjs

@@ -72,6 +72,15 @@ const module$1 = defineNuxtModule({
     const require_ = createRequire(import.meta.url);
     const pdfjsDir = dirname(require_.resolve("pdfjs-dist/package.json"));
     nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.externals ||= {};
+      nitroConfig.externals.inline ||= [];
+      if (Array.isArray(nitroConfig.externals.inline)) {
+        for (const dependency of ["unhead", "consola"]) {
+          if (!nitroConfig.externals.inline.includes(dependency)) {
+            nitroConfig.externals.inline.push(dependency);
+          }
+        }
+      }
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push(
         {

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

@@ -44,6 +44,7 @@ export declare const defaultOptions: {
         STROKE_WIDTH: number;
         OPACITY: number;
         MAX_CURSOR_SIZE: number;
+        MAX_PLACEMENT_SIZE: number;
         MAX_UPLOAD_IMAGE_SIZE: number;
         LOAD_PDF_ANNOTATION: boolean;
         DB_CLICK_DELETE: boolean;

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

@@ -74,6 +74,10 @@ export const defaultOptions = {
     STROKE_WIDTH: 2,
     OPACITY: 1,
     MAX_CURSOR_SIZE: 96,
+    // Bound for stamps/signatures placed without explicit dimensions. Shared
+    // by the placement path and the cursor preview so the ghost cannot drift
+    // from what actually lands on the page.
+    MAX_PLACEMENT_SIZE: 120,
     MAX_UPLOAD_IMAGE_SIZE: 800,
     LOAD_PDF_ANNOTATION: true,
     DB_CLICK_DELETE: false

package/dist/runtime/annotation/engine/cursor-preview.d.ts

@@ -1,2 +1,15 @@
-export declare function showCursorPreview(imageUrl: string, size?: number): void;
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+/**
+ * Bumped whenever the preview is torn down or replaced. Callers that size the
+ * preview asynchronously capture it first and bail if it moved, so a slow
+ * measurement cannot resurrect a ghost for a tool the user already left.
+ */
+export declare function cursorPreviewToken(): number;
+/** Synchronous hit for an already-measured image, so repeat picks don't flash. */
+export declare function peekImageSize(imageUrl: string): ImageSize | null;
+export declare function measureImage(imageUrl: string): Promise<ImageSize | null>;
+export declare function showCursorPreview(imageUrl: string, width?: number, height?: number): void;
 export declare function hideCursorPreview(): void;

package/dist/runtime/annotation/engine/cursor-preview.js

@@ -4,6 +4,32 @@ const PADDING = 6;
 const CROSSHAIR_SIZE = 12;
 let previewEl = null;
 let mouseMoveHandler = null;
+let previewToken = 0;
+const naturalSizeCache = /* @__PURE__ */ new Map();
+export function cursorPreviewToken() {
+  return previewToken;
+}
+export function peekImageSize(imageUrl) {
+  return naturalSizeCache.get(imageUrl) ?? null;
+}
+export function measureImage(imageUrl) {
+  const cached = naturalSizeCache.get(imageUrl);
+  if (cached) return Promise.resolve(cached);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.addEventListener("load", () => {
+      const size = { width: img.naturalWidth, height: img.naturalHeight };
+      if (!size.width || !size.height) {
+        resolve(null);
+        return;
+      }
+      naturalSizeCache.set(imageUrl, size);
+      resolve(size);
+    });
+    img.addEventListener("error", () => resolve(null));
+    img.src = imageUrl;
+  });
+}
 function isOverPage(e) {
   const target = e.target;
   if (!target) return false;
@@ -21,16 +47,15 @@ function onMouseMove(e) {
     document.body.style.cursor = "";
   }
 }
-export function showCursorPreview(imageUrl, size = 80) {
+export function showCursorPreview(imageUrl, width = 80, height = width) {
   hideCursorPreview();
-  const outerSize = size + PADDING * 2;
   previewEl = document.createElement("div");
   Object.assign(previewEl.style, {
     position: "fixed",
     zIndex: "9999",
     pointerEvents: "none",
-    width: `${outerSize}px`,
-    height: `${outerSize}px`,
+    width: `${width + PADDING * 2}px`,
+    height: `${height + PADDING * 2}px`,
     transform: "translate(-50%, -50%)",
     border: `2px solid ${PRIMARY_COLOR}`,
     borderRadius: "3px",
@@ -41,8 +66,8 @@ export function showCursorPreview(imageUrl, size = 80) {
   const img = document.createElement("img");
   img.src = imageUrl;
   Object.assign(img.style, {
-    width: `${size}px`,
-    height: `${size}px`,
+    width: `${width}px`,
+    height: `${height}px`,
     objectFit: "contain",
     display: "block",
     pointerEvents: "none"
@@ -76,6 +101,7 @@ export function showCursorPreview(imageUrl, size = 80) {
   document.addEventListener("mousemove", mouseMoveHandler);
 }
 export function hideCursorPreview() {
+  previewToken++;
   if (previewEl) {
     previewEl.remove();
     previewEl = null;

package/dist/runtime/annotation/engine/tools/signature.js

@@ -1,9 +1,14 @@
 import Konva from "konva";
 import { AnnotationType } from "../types.js";
-import { resizeImage } from "../utils.js";
 import { Editor } from "../editor/editor.js";
 import { defaultOptions } from "../config.js";
-import { showCursorPreview } from "../cursor-preview.js";
+import {
+  cursorPreviewToken,
+  measureImage,
+  peekImageSize,
+  showCursorPreview
+} from "../cursor-preview.js";
+import { cursorPreviewSize, placementSize } from "../../utils/placement_size.js";
 export class EditorSignature extends Editor {
   signatureUrl;
   signatureImage;
@@ -15,7 +20,23 @@ export class EditorSignature extends Editor {
     }
   }
   createCursorImg() {
-    showCursorPreview(this.signatureUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+    const scale = this.konvaStage?.scale()?.x ?? 1;
+    const max = defaultOptions.setting.MAX_PLACEMENT_SIZE;
+    const cached = cursorPreviewSize(null, peekImageSize(this.signatureUrl), max, scale);
+    if (cached) {
+      showCursorPreview(this.signatureUrl, cached.width, cached.height);
+      return;
+    }
+    const token = cursorPreviewToken();
+    void measureImage(this.signatureUrl).then((natural) => {
+      if (cursorPreviewToken() !== token) return;
+      const size = cursorPreviewSize(null, natural, max, scale);
+      if (size) {
+        showCursorPreview(this.signatureUrl, size.width, size.height);
+      } else {
+        showCursorPreview(this.signatureUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+      }
+    });
   }
   mouseDownHandler(e) {
     if (e.currentTarget !== this.konvaStage) return;
@@ -25,7 +46,11 @@ export class EditorSignature extends Editor {
     const pos = this.konvaStage.getRelativePointerPosition();
     Konva.Image.fromURL(this.signatureUrl, async (image) => {
       const { width: width_rec, height: height_rec } = image.getClientRect();
-      const { newWidth, newHeight } = resizeImage(width_rec, height_rec, 120);
+      const { width: newWidth, height: newHeight } = placementSize(
+        null,
+        { width: width_rec, height: height_rec },
+        defaultOptions.setting.MAX_PLACEMENT_SIZE
+      ) ?? { width: width_rec, height: height_rec };
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.signatureImage = image;
       this.signatureImage.setAttrs({

package/dist/runtime/annotation/engine/tools/stamp.d.ts

@@ -8,6 +8,7 @@ export declare class EditorStamp extends Editor {
     private stampWidth;
     private stampHeight;
     constructor(editorOptions: IEditorOptions, defaultStampUrl: string | null);
+    private get explicitSize();
     private createCursorImg;
     /**
      * True when an identical stamp (same source image) already sits under the

package/dist/runtime/annotation/engine/tools/stamp.js

@@ -1,9 +1,17 @@
 import Konva from "konva";
 import { AnnotationType } from "../types.js";
-import { resizeImage } from "../utils.js";
 import { Editor } from "../editor/editor.js";
 import { defaultOptions } from "../config.js";
-import { showCursorPreview } from "../cursor-preview.js";
+import {
+  cursorPreviewToken,
+  measureImage,
+  peekImageSize,
+  showCursorPreview
+} from "../cursor-preview.js";
+import {
+  cursorPreviewSize,
+  placementSize
+} from "../../utils/placement_size.js";
 export class EditorStamp extends Editor {
   stampUrl;
   stampImage;
@@ -16,10 +24,32 @@ export class EditorStamp extends Editor {
       this.createCursorImg();
     }
   }
+  get explicitSize() {
+    return { width: this.stampWidth ?? 0, height: this.stampHeight ?? 0 };
+  }
   createCursorImg() {
-    const baseSize = this.stampWidth ?? this.stampHeight ?? defaultOptions.setting.MAX_CURSOR_SIZE;
     const scale = this.konvaStage?.scale()?.x ?? 1;
-    showCursorPreview(this.stampUrl, Math.round(baseSize * scale));
+    const max = defaultOptions.setting.MAX_PLACEMENT_SIZE;
+    const immediate = cursorPreviewSize(
+      this.explicitSize,
+      peekImageSize(this.stampUrl),
+      max,
+      scale
+    );
+    if (immediate) {
+      showCursorPreview(this.stampUrl, immediate.width, immediate.height);
+      return;
+    }
+    const token = cursorPreviewToken();
+    void measureImage(this.stampUrl).then((natural) => {
+      if (cursorPreviewToken() !== token) return;
+      const size = cursorPreviewSize(this.explicitSize, natural, max, scale);
+      if (size) {
+        showCursorPreview(this.stampUrl, size.width, size.height);
+      } else {
+        showCursorPreview(this.stampUrl, defaultOptions.setting.MAX_CURSOR_SIZE);
+      }
+    });
   }
   /**
    * True when an identical stamp (same source image) already sits under the
@@ -47,21 +77,18 @@ export class EditorStamp extends Editor {
     if (e.currentTarget !== this.konvaStage) return;
     const pos = this.konvaStage.getRelativePointerPosition();
     if (!pos) return;
-    const estimatedSize = this.stampWidth ?? this.stampHeight ?? 120;
+    const estimatedSize = this.stampWidth ?? this.stampHeight ?? defaultOptions.setting.MAX_PLACEMENT_SIZE;
     if (this.hasIdenticalStampNear(pos, estimatedSize)) return;
     this.stampImage = null;
     this.currentShapeGroup = this.createShapeGroup();
     this.getBgLayer().add(this.currentShapeGroup.konvaGroup);
     Konva.Image.fromURL(this.stampUrl, async (image) => {
-      let newWidth;
-      let newHeight;
-      if (this.stampWidth && this.stampHeight) {
-        newWidth = this.stampWidth;
-        newHeight = this.stampHeight;
-      } else {
-        const { width: width_rec, height: height_rec } = image.getClientRect();
-        ({ newWidth, newHeight } = resizeImage(width_rec, height_rec, 120));
-      }
+      const { width: width_rec, height: height_rec } = image.getClientRect();
+      const { width: newWidth, height: newHeight } = placementSize(
+        this.explicitSize,
+        { width: width_rec, height: height_rec },
+        defaultOptions.setting.MAX_PLACEMENT_SIZE
+      ) ?? { width: width_rec, height: height_rec };
       const crosshair = { x: newWidth / 2, y: newHeight / 2 };
       this.stampImage = image;
       this.stampImage.setAttrs({

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

@@ -7,10 +7,7 @@ export declare function generateUUID(): string;
 export declare function setCssCustomProperty(propertyName: string, value: string): void;
 export declare function removeCssCustomProperty(propertyName: string): void;
 export declare function base64ToImageBitmap(base64: string): Promise<ImageBitmap>;
-export declare function resizeImage(width: number, height: number, max: number): {
-    newWidth: number;
-    newHeight: number;
-};
+export { resizeImage } from '../utils/placement_size.js';
 export declare function convertToRGB(array: number[], index?: number): string;
 export declare function formatTimestamp(timestamp: number): string;
 export declare function formatPDFDate(dateString: string | null, full?: boolean): string;

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

@@ -67,16 +67,7 @@ export async function base64ToImageBitmap(base64) {
   const blob = new Blob([bytes], { type: "image/png" });
   return await createImageBitmap(blob);
 }
-export function resizeImage(width, height, max) {
-  if (width <= max && height <= max) {
-    return { newWidth: width, newHeight: height };
-  }
-  const scaleFactor = Math.min(max / width, max / height);
-  return {
-    newWidth: width * scaleFactor,
-    newHeight: height * scaleFactor
-  };
-}
+export { resizeImage } from "../utils/placement_size.js";
 export function convertToRGB(array, index = 0) {
   if (index < 0 || index * 3 + 2 >= array.length) {
     throw new Error("Index out of bounds");

package/dist/runtime/annotation/utils/placement_size.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Sizing rules shared by stamp/signature placement and the drag cursor
+ * preview. They live apart from the engine so both paths derive their size
+ * from one implementation — the ghost drifting from what actually lands on
+ * the page was a real bug, not a hypothetical one.
+ */
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+/** Aspect-preserving downscale. Never upscales. */
+export declare function resizeImage(width: number, height: number, max: number): {
+    newWidth: number;
+    newHeight: number;
+};
+/**
+ * The size an annotation will occupy in stage-content units once placed.
+ * Explicit dimensions (a stamp carrying width/height metadata) win outright;
+ * otherwise the image's own aspect ratio is bounded by `max`.
+ */
+export declare function placementSize(explicit: Partial<ImageSize> | null, natural: ImageSize | null, max: number): ImageSize | null;
+/**
+ * The same size expressed in CSS pixels, for the cursor ghost. The Konva stage
+ * scale is what converts content units to what the user actually sees, so a
+ * ghost that ignores it is wrong at every zoom level but 100%.
+ */
+export declare function cursorPreviewSize(explicit: Partial<ImageSize> | null, natural: ImageSize | null, max: number, scale: number): ImageSize | null;

package/dist/runtime/annotation/utils/placement_size.js

@@ -0,0 +1,26 @@
+export function resizeImage(width, height, max) {
+  if (width <= max && height <= max) {
+    return { newWidth: width, newHeight: height };
+  }
+  const scaleFactor = Math.min(max / width, max / height);
+  return {
+    newWidth: width * scaleFactor,
+    newHeight: height * scaleFactor
+  };
+}
+export function placementSize(explicit, natural, max) {
+  if (explicit?.width && explicit?.height) {
+    return { width: explicit.width, height: explicit.height };
+  }
+  if (!natural?.width || !natural?.height) return null;
+  const { newWidth, newHeight } = resizeImage(natural.width, natural.height, max);
+  return { width: newWidth, height: newHeight };
+}
+export function cursorPreviewSize(explicit, natural, max, scale) {
+  const size = placementSize(explicit, natural, max);
+  if (!size) return null;
+  return {
+    width: Math.round(size.width * scale),
+    height: Math.round(size.height * scale)
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",