kviewer 0.0.4 → 0.0.6

package/dist/runtime/composables/useShapeDetection.js

@@ -0,0 +1,235 @@
+import { provide, inject } from "vue";
+import {
+  pdfRectToViewport,
+  isCheckboxLikePdf,
+  isCheckboxLikeWidget,
+  makeShape,
+  SYMBOL_CHARS
+} from "./shape-detection-utils.js";
+const SHAPE_DETECTION_KEY = Symbol("kviewer-shape-detection");
+let opsPromise = null;
+function getOPS() {
+  if (!opsPromise) {
+    opsPromise = import("pdfjs-dist/legacy/build/pdf.mjs").then(
+      (pdfjs) => pdfjs.OPS
+    );
+  }
+  return opsPromise;
+}
+async function detectAnnotationShapes(pageNumber, pdfPage, viewport) {
+  const shapes = [];
+  const annotations = await pdfPage.getAnnotations({ intent: "display" });
+  for (const annot of annotations) {
+    if (!annot.rect) continue;
+    const isWidget = annot.fieldType === "Btn" || annot.subtype === "Widget" || annot.subtype === "Square" || annot.subtype === "Circle";
+    if (!isWidget) continue;
+    const [x1, y1, x2, y2] = annot.rect;
+    const { left, top, w, h } = pdfRectToViewport(viewport, x1, y1, x2, y2);
+    if (!isCheckboxLikeWidget(w, h)) continue;
+    shapes.push(
+      makeShape(
+        annot.id || `annot_p${pageNumber}_${shapes.length}`,
+        left,
+        top,
+        w,
+        h
+      )
+    );
+  }
+  return shapes;
+}
+async function detectGraphicalShapes(pageNumber, pdfPage, viewport) {
+  const shapes = [];
+  try {
+    const opList = await pdfPage.getOperatorList();
+    const OPS = await getOPS();
+    let pathStarted = false;
+    let currentPath = [];
+    let pathBBox = null;
+    const addShape = (x, y, w, h, type) => {
+      const aw = Math.abs(w);
+      const ah = Math.abs(h);
+      if (!isCheckboxLikePdf(aw, ah)) return;
+      const { left, top, w: vw, h: vh } = pdfRectToViewport(viewport, x, y, x + w, y + h);
+      shapes.push(makeShape(`gfx_p${pageNumber}_${shapes.length}`, left, top, vw, vh, type));
+    };
+    const checkPathBBox = (type) => {
+      if (!pathBBox) return;
+      const w = pathBBox.maxX - pathBBox.minX;
+      const h = pathBBox.maxY - pathBBox.minY;
+      if (!isCheckboxLikePdf(w, h)) return;
+      const { left, top, w: vw, h: vh } = pdfRectToViewport(
+        viewport,
+        pathBBox.minX,
+        pathBBox.minY,
+        pathBBox.maxX,
+        pathBBox.maxY
+      );
+      shapes.push(makeShape(`gfx_p${pageNumber}_${shapes.length}`, left, top, vw, vh, type));
+    };
+    const expandBBox = (x, y) => {
+      if (!pathBBox) {
+        pathBBox = { minX: x, maxX: x, minY: y, maxY: y };
+      } else {
+        pathBBox.minX = Math.min(pathBBox.minX, x);
+        pathBBox.maxX = Math.max(pathBBox.maxX, x);
+        pathBBox.minY = Math.min(pathBBox.minY, y);
+        pathBBox.maxY = Math.max(pathBBox.maxY, y);
+      }
+    };
+    for (let i = 0; i < opList.fnArray.length; i++) {
+      const fn = opList.fnArray[i];
+      const args = opList.argsArray[i];
+      if (fn === OPS.rectangle) {
+        const [x, y, w, h] = args;
+        addShape(x, y, w, h, "rectangle");
+      } else if (fn === OPS.constructPath) {
+        if (args[2] && args[2].length === 4) {
+          const bbox = args[2];
+          const bw = bbox[2] - bbox[0];
+          const bh = bbox[3] - bbox[1];
+          addShape(bbox[0], bbox[1], bw, bh, "rectangle");
+        } else if (Array.isArray(args[0])) {
+          const ops = args[0];
+          const coords = args[1];
+          if (!ops || !coords) continue;
+          currentPath = [];
+          pathBBox = null;
+          let ci = 0;
+          for (let oi = 0; oi < ops.length; oi++) {
+            const op = ops[oi];
+            if (op === OPS.moveTo) {
+              const x = coords[ci++];
+              const y = coords[ci++];
+              currentPath.push([x, y]);
+              expandBBox(x, y);
+            } else if (op === OPS.lineTo) {
+              const x = coords[ci++];
+              const y = coords[ci++];
+              currentPath.push([x, y]);
+              expandBBox(x, y);
+            } else if (op === OPS.rectangle) {
+              const x = coords[ci++];
+              const y = coords[ci++];
+              const w = coords[ci++];
+              const h = coords[ci++];
+              addShape(x, y, w, h, "rectangle");
+            } else if (op === OPS.curveTo) {
+              ci += 6;
+            } else if (op === OPS.curveTo2) {
+              ci += 4;
+            } else if (op === OPS.curveTo3) {
+              ci += 4;
+            }
+          }
+          if (pathBBox && currentPath.length >= 4) {
+            checkPathBBox(currentPath.length > 8 ? "circle" : "rectangle");
+          }
+          pathStarted = true;
+        }
+      } else if (fn === OPS.moveTo) {
+        pathStarted = true;
+        currentPath = [[args[0], args[1]]];
+        pathBBox = null;
+        expandBBox(args[0], args[1]);
+      } else if (fn === OPS.lineTo && pathStarted) {
+        currentPath.push([args[0], args[1]]);
+        expandBBox(args[0], args[1]);
+      } else if (pathStarted && (fn === OPS.stroke || fn === OPS.fill || fn === OPS.eoFill || fn === OPS.fillStroke)) {
+        if ((currentPath.length === 5 || currentPath.length > 8) && pathBBox) {
+          checkPathBBox(currentPath.length > 8 ? "circle" : "rectangle");
+        }
+        pathStarted = false;
+        currentPath = [];
+        pathBBox = null;
+      }
+    }
+  } catch (err) {
+    console.error("[ShapeDetection] Graphical detection error:", err);
+  }
+  return shapes;
+}
+async function detectIconFontShapes(pageNumber, pdfPage, viewport) {
+  const shapes = [];
+  try {
+    const textContent = await pdfPage.getTextContent();
+    for (const item of textContent.items) {
+      if (!("str" in item) || !item.str || !("transform" in item) || !item.transform) continue;
+      const char = item.str;
+      const code = char.charCodeAt(0);
+      const isSymbol = SYMBOL_CHARS.has(char);
+      const isBox = code >= 9472 && code <= 9599;
+      const isGeo = code >= 9632 && code <= 9727;
+      const isPUA = code >= 57344 && code <= 63743;
+      if (!isSymbol && !isBox && !isGeo && !isPUA) continue;
+      const t = item.transform;
+      const w = item.width || Math.abs(t[0]);
+      const h = item.height || Math.abs(t[3]);
+      const x = t[4];
+      const y = t[5];
+      const minSize = isPUA ? 12 : 5;
+      if (w < minSize || w > 40 || h < minSize || h > 40) continue;
+      if (isPUA) {
+        const ratio = w / h;
+        if (ratio < 0.8 || ratio > 1.25) continue;
+      }
+      const { left, top, w: vw, h: vh } = pdfRectToViewport(viewport, x, y, x + w, y + h);
+      const type = isPUA ? "circle" : void 0;
+      shapes.push(makeShape(`icon_p${pageNumber}_${shapes.length}`, left, top, vw, vh, type));
+    }
+  } catch (err) {
+    console.error("[ShapeDetection] Icon-font detection error:", err);
+  }
+  return shapes;
+}
+export function createShapeDetection() {
+  const shapeCache = /* @__PURE__ */ new Map();
+  async function preprocessShapesForPage(pageNumber, pdfPage, viewport) {
+    try {
+      const [annotShapes, gfxShapes, iconShapes] = await Promise.all([
+        detectAnnotationShapes(pageNumber, pdfPage, viewport),
+        detectGraphicalShapes(pageNumber, pdfPage, viewport),
+        detectIconFontShapes(pageNumber, pdfPage, viewport)
+      ]);
+      const shapes = [...annotShapes, ...gfxShapes, ...iconShapes];
+      shapeCache.set(pageNumber, shapes);
+      if (import.meta.dev) {
+        console.debug(
+          `[ShapeDetection] Page ${pageNumber}: ${shapes.length} shapes (${annotShapes.length} annot, ${gfxShapes.length} gfx, ${iconShapes.length} icon)`
+        );
+      }
+      return shapes;
+    } catch (err) {
+      console.error("[ShapeDetection] preprocessShapesForPage error:", err);
+      shapeCache.set(pageNumber, []);
+      return [];
+    }
+  }
+  function findShapeAtPoint(pageNumber, x, y) {
+    const shapes = shapeCache.get(pageNumber) || [];
+    return shapes.find(
+      (s) => x >= s.rect.x && x <= s.rect.x + s.rect.w && y >= s.rect.y && y <= s.rect.y + s.rect.h
+    ) || null;
+  }
+  function clearShapeCache(pageNumber) {
+    shapeCache.delete(pageNumber);
+  }
+  function clearAllShapeCache() {
+    shapeCache.clear();
+  }
+  const detection = {
+    preprocessShapesForPage,
+    findShapeAtPoint,
+    clearShapeCache,
+    clearAllShapeCache
+  };
+  provide(SHAPE_DETECTION_KEY, detection);
+  return detection;
+}
+export function useShapeDetection() {
+  const detection = inject(SHAPE_DETECTION_KEY);
+  if (!detection) {
+    throw new Error("useShapeDetection() must be used inside a <KViewer> component");
+  }
+  return detection;
+}

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

@@ -26,6 +26,7 @@ export interface ViewerState {
     currentPage: Ref<number>;
     totalPages: Ref<number>;
     isLoading: Ref<boolean>;
+    error: Ref<string | null>;
     activeTool: Ref<ActiveTool>;
     doc: ShallowRef<PDFDocumentProxy | null>;
     annotations: ShallowRef<Map<string, IAnnotationStore>>;
@@ -52,12 +53,15 @@ export interface ViewerState {
     stylusMode: Ref<boolean>;
     setStylusMode: (enabled: boolean) => void;
     scrollToPage: (pageNumber: number) => void;
+    downloadPdf: () => Promise<void>;
     history: AnnotationHistory;
     readonly: Ref<boolean>;
+    shapeDetection: Ref<boolean>;
 }
 export interface ViewerStateProvider {
     state: ViewerState;
     setScrollToPageFn: (fn: (pageNumber: number) => void) => void;
+    setDownloadPdfFn: (fn: () => Promise<void>) => void;
 }
 export declare function provideViewerState(): ViewerStateProvider;
 export declare function useViewerState(): ViewerState;

package/dist/runtime/composables/useViewerState.js

@@ -20,6 +20,7 @@ export function provideViewerState() {
   const currentPage = ref(1);
   const totalPages = ref(0);
   const isLoading = ref(false);
+  const error = ref(null);
   const activeTool = ref("hand");
   const doc = shallowRef(null);
   const annotations = shallowRef(/* @__PURE__ */ new Map());
@@ -63,6 +64,7 @@ export function provideViewerState() {
     }
   }
   const readonly = ref(false);
+  const shapeDetectionEnabled = ref(false);
   const stylusMode = ref(false);
   function setStylusMode(enabled) {
     stylusMode.value = enabled;
@@ -128,9 +130,13 @@ export function provideViewerState() {
     return painter.value?.getData() ?? [];
   }
   let _scrollToPageFn = null;
+  let _downloadPdfFn = null;
   function scrollToPage(pageNumber) {
     _scrollToPageFn?.(pageNumber);
   }
+  async function downloadPdf() {
+    await _downloadPdfFn?.();
+  }
   const history = createAnnotationHistory(annotations, painter);
   const state = {
     scale,
@@ -145,6 +151,7 @@ export function provideViewerState() {
     currentPage,
     totalPages,
     isLoading,
+    error,
     activeTool,
     doc,
     annotations,
@@ -171,14 +178,19 @@ export function provideViewerState() {
     stylusMode,
     setStylusMode,
     scrollToPage,
+    downloadPdf,
     history,
-    readonly
+    readonly,
+    shapeDetection: shapeDetectionEnabled
   };
   provide(VIEWER_STATE_KEY, state);
   return {
     state,
     setScrollToPageFn(fn) {
       _scrollToPageFn = fn;
+    },
+    setDownloadPdfFn(fn) {
+      _downloadPdfFn = fn;
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -23,7 +23,8 @@
     "dist"
   ],
   "workspaces": [
-    "playground"
+    "playground",
+    "docs"
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
@@ -32,9 +33,11 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
-    "test": "vitest run",
+    "test": "vitest run --exclude '**/e2e/**'",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@nuxt/kit": "^4.4.2",
@@ -52,13 +55,33 @@
     "@nuxt/schema": "^4.4.2",
     "@nuxt/test-utils": "^4.0.0",
     "@nuxt/ui": "4.6.0",
+    "@playwright/test": "^1.59.1",
     "@types/node": "latest",
+    "canvas": "^3.2.3",
     "changelogen": "^0.6.2",
     "eslint": "^10.1.0",
     "nuxt": "^4.4.2",
+    "path2d": "^0.3.1",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
     "typescript": "~6.0.2",
     "vitest": "^4.1.1",
     "vue-tsc": "^3.2.6"
   },
-  "packageManager": "pnpm@10.33.0"
+  "packageManager": "pnpm@10.33.0",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "canvas",
+      "@parcel/watcher",
+      "better-sqlite3",
+      "esbuild",
+      "sharp",
+      "vue-demi",
+      "unrs-resolver"
+    ],
+    "overrides": {
+      "vue": "^3.5.32",
+      "vue-router": "^5.0.4"
+    }
+  }
 }