kviewer 0.1.1 → 0.2.0

package/README.md

@@ -34,12 +34,24 @@ Add it to your `nuxt.config.ts`:
 ```ts
 export default defineNuxtConfig({
   modules: ['kviewer'],
+  css: ['~/assets/css/main.css'],
   kviewer: {
     prefix: 'K', // component prefix (default)
   },
 })
 ```
 
+KViewer's UI is built on [Nuxt UI](https://ui.nuxt.com) + Tailwind CSS. Create the main stylesheet with three imports:
+
+```css
+/* assets/css/main.css */
+@import 'tailwindcss';
+@import '@nuxt/ui';
+@import 'kviewer';
+```
+
+`@nuxt/ui` is installed and registered automatically — you don't add it to `modules`, and there's no `@source` path to maintain. The `@import 'kviewer'` line registers KViewer's components as a Tailwind source.
+
 ## Basic Usage
 
 ```vue

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
-import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, extendViteConfig, addPlugin, addComponentsDir, addImports } from '@nuxt/kit';
 export { KVIEWER_EMBED_PROTOCOL_VERSION, KViewerEmbedClient, useKViewerEmbedBridge } from '../dist/runtime/public-types.js';
 
 const module$1 = defineNuxtModule({
@@ -13,8 +13,32 @@ const module$1 = defineNuxtModule({
     prefix: "K",
     minRenderPixelRatio: 2
   },
-  setup(options, nuxt) {
+  // Declare @nuxt/ui as a hard dependency so Nuxt resolves it as a
+  // top-level module before our setup() runs. We can NOT just call
+  // installModule('@nuxt/ui') from setup(): Nuxt UI declares its own
+  // transitive deps (@nuxt/icon, @nuxtjs/color-mode, @nuxtjs/mdc, …)
+  // via the same `moduleDependencies` hook, and that hook only fires
+  // for modules resolved at the top level — not for ones installed
+  // from inside another module's setup. Going through this hook gives
+  // us the same chain Nuxt UI gets when the consumer lists it in their
+  // own `modules` array, while still freeing them from having to. The
+  // consumer's own '@nuxt/ui' entry (and any options under nuxt.ui)
+  // remains authoritative because Nuxt deduplicates modules by name.
+  moduleDependencies: {
+    "@nuxt/ui": {}
+  },
+  async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    extendViteConfig((config) => {
+      config.optimizeDeps ||= {};
+      config.optimizeDeps.include ||= [];
+      config.optimizeDeps.include.push(
+        "konva",
+        "pdf-lib",
+        "pdfjs-dist/legacy/build/pdf.mjs",
+        "pdfjs-dist/web/pdf_viewer.mjs"
+      );
+    }, { client: true, server: false });
     nuxt.options.runtimeConfig.public.kviewer = {
       ...nuxt.options.runtimeConfig.public.kviewer,
       minRenderPixelRatio: options.minRenderPixelRatio ?? 2

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

@@ -37,7 +37,7 @@ export declare const defaultOptions: {
     };
     setting: {
         COLOR: string | undefined;
-        FONT_SIZE: number | undefined;
+        FONT_SIZE: number;
         HIGHLIGHT_COLOR: string | undefined;
         STRIKEOUT_COLOR: string | undefined;
         UNDERLINE_COLOR: string | undefined;

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

@@ -16,7 +16,7 @@ const colors = [
   "#7828a4",
   "#ff00ff"
 ];
-const fontSizes = [14, 16, 18, 20, 22, 24];
+const fontSizes = [8, 10, 12, 14, 16, 18, 20, 22, 24];
 export const defaultOptions = {
   colors,
   fontSize: fontSizes,
@@ -67,7 +67,7 @@ export const defaultOptions = {
   },
   setting: {
     COLOR: colors[0],
-    FONT_SIZE: fontSizes[2],
+    FONT_SIZE: 18,
     HIGHLIGHT_COLOR: colors[3],
     STRIKEOUT_COLOR: colors[1],
     UNDERLINE_COLOR: colors[7],

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

@@ -48,7 +48,7 @@ export declare class Painter {
         freehandGroupingDelay?: number;
         setExternalGesturesEnabled?: (enabled: boolean) => void;
     });
-    private editFreeText;
+    editFreeText(id: string): Promise<void>;
     private bindGlobalEvents;
     private globalKeyUpHandler;
     private createKonvaStage;

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

@@ -1,4 +1,5 @@
 import { PDFHexString } from 'pdf-lib';
+import { type PageTransform } from '../pdf-import/transform.js';
 export declare function getRGB(color: string): number[];
 export declare function rgbToPdfColor(input: string | undefined): [number, number, number];
 export declare function isElementInDOM(element: HTMLElement): boolean;
@@ -19,7 +20,7 @@ export declare function convertKonvaRectToPdfRect(konvaRect: {
     y: number;
     width: number;
     height: number;
-}, pageHeight: number): [number, number, number, number];
+}, pageTransform: PageTransform): [number, number, number, number];
 export declare function stringToPDFHexString(input: string): PDFHexString;
 export declare function getTimestampString(date?: Date): string;
 export declare function normalizeColor(input: string): string;

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

@@ -1,5 +1,6 @@
 import Konva from "konva";
 import { PDFHexString } from "pdf-lib";
+import { convertCanvasRectToPdf } from "../pdf-import/transform.js";
 export function getRGB(color) {
   if (color.startsWith("#")) {
     const colorRGB = Number.parseInt(color.slice(1), 16);
@@ -149,13 +150,8 @@ export function getPDFDateTimestamp(dateString) {
   const date = new Date(Date.UTC(year, month, day, hour, minute, second));
   return date.getTime() - tzOffset * 60 * 1e3;
 }
-export function convertKonvaRectToPdfRect(konvaRect, pageHeight) {
-  const { x, y, width, height } = konvaRect;
-  const pdfX1 = x;
-  const pdfY1 = pageHeight - y - height;
-  const pdfX2 = pdfX1 + width;
-  const pdfY2 = pdfY1 + height;
-  return [pdfX1, pdfY1, pdfX2, pdfY2];
+export function convertKonvaRectToPdfRect(konvaRect, pageTransform) {
+  return convertCanvasRectToPdf(pageTransform, konvaRect);
 }
 export function stringToPDFHexString(input) {
   const bom = [254, 255];

package/dist/runtime/annotation/pdf-export/export.js

@@ -1,5 +1,6 @@
-import { PDFArray, PDFDict, PDFDocument, PDFName, PDFRef, PDFString } from "pdf-lib";
+import { degrees, PDFArray, PDFDict, PDFDocument, PDFName, PDFRef, PDFString } from "pdf-lib";
 import { PdfjsAnnotationType } from "../engine/types.js";
+import { pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { writeFormFieldsToPdf } from "./export-form-fields.js";
 import { CircleParser } from "./parse_circle.js";
 import { FreeTextParser } from "./parse_freetext.js";
@@ -144,41 +145,94 @@ async function embedDataUrlImage(pdfDoc, dataUrl) {
   }
   return pdfDoc.embedPng(base64);
 }
+function loadImagesForNode(node) {
+  if (typeof window === "undefined") return [];
+  const findFn = node.find;
+  if (typeof findFn !== "function") return [];
+  const images = findFn.call(node, "Image");
+  const tasks = [];
+  for (const img of images) {
+    if (img.image()) continue;
+    const src = img.getAttr("base64");
+    if (typeof src !== "string" || src.length === 0) continue;
+    tasks.push(new Promise((resolve) => {
+      const el = new window.Image();
+      el.crossOrigin = "anonymous";
+      el.onload = () => {
+        img.image(el);
+        resolve();
+      };
+      el.onerror = () => {
+        resolve();
+      };
+      el.src = src;
+    }));
+  }
+  return tasks;
+}
 async function flattenPageAnnotations(pdfDoc, page, annotations) {
   if (annotations.length === 0) return;
   if (typeof window === "undefined" || typeof document === "undefined") {
     throw new TypeError("Flatten export requires a browser environment");
   }
   const Konva = (await import("konva")).default;
-  const width = Math.floor(page.getWidth());
-  const height = Math.floor(page.getHeight());
+  const pageTransform = pageTransformFromPdfLibPage(page);
+  const stageWidth = Math.max(1, Math.floor(pageTransform.width));
+  const stageHeight = Math.max(1, Math.floor(pageTransform.height));
   const stage = new Konva.Stage({
     container: document.createElement("div"),
-    width,
-    height,
+    width: stageWidth,
+    height: stageHeight,
     listening: false
   });
   const layer = new Konva.Layer({ listening: false });
   stage.add(layer);
+  const imageLoaders = [];
   for (const annotation of annotations) {
     try {
       const node = Konva.Node.create(annotation.konvaString);
       if (node instanceof Konva.Node) {
         layer.add(node);
+        imageLoaders.push(...loadImagesForNode(node));
       }
     } catch {
       console.warn(`Unable to flatten annotation ${annotation.id}; skipping`);
     }
   }
+  await Promise.all(imageLoaders);
   layer.draw();
   const dataUrl = stage.toDataURL({ pixelRatio: 2 });
   stage.destroy();
   const image = await embedDataUrlImage(pdfDoc, dataUrl);
+  const W_u = page.getWidth();
+  const H_u = page.getHeight();
+  const dispW = pageTransform.width;
+  const dispH = pageTransform.height;
+  let drawX = 0;
+  let drawY = 0;
+  switch (pageTransform.rotation) {
+    case 90:
+      drawX = W_u;
+      drawY = 0;
+      break;
+    case 180:
+      drawX = W_u;
+      drawY = H_u;
+      break;
+    case 270:
+      drawX = 0;
+      drawY = H_u;
+      break;
+    default:
+      drawX = 0;
+      drawY = 0;
+  }
   page.drawImage(image, {
-    x: 0,
-    y: 0,
-    width: page.getWidth(),
-    height: page.getHeight()
+    x: drawX,
+    y: drawY,
+    width: dispW,
+    height: dispH,
+    rotate: degrees(pageTransform.rotation)
   });
 }
 function groupByPage(annotations) {

package/dist/runtime/annotation/pdf-export/parse_circle.js

@@ -1,5 +1,6 @@
 import { PDFName, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 import { computeBoundsFromKonvaString } from "./parse_utils.js";
 const UNKNOWN_USER = "Unknown user";
@@ -7,9 +8,9 @@ export class CircleParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     const bounds = computeBoundsFromKonvaString(annotation.konvaString);
-    const rect = convertKonvaRectToPdfRect(bounds ?? annotation.konvaClientRect, pageHeight);
+    const rect = convertKonvaRectToPdfRect(bounds ?? annotation.konvaClientRect, pageTransform);
     const mainAnn = context.obj({
       Type: PDFName.of("Annot"),
       Subtype: PDFName.of("Circle"),

package/dist/runtime/annotation/pdf-export/parse_freetext.js

@@ -1,6 +1,8 @@
 import { PDFName, PDFNumber, PDFRawStream, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { convertCanvasRectToPdf, pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
+import { formAppearanceMatrix } from "./parse_utils.js";
 const UNKNOWN_USER = "Unknown user";
 function formatPdfNumber(value) {
   if (!Number.isFinite(value)) return "0";
@@ -18,7 +20,7 @@ export class FreeTextParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     let konvaGroup;
     try {
       konvaGroup = JSON.parse(annotation.konvaString);
@@ -47,18 +49,20 @@ export class FreeTextParser extends AnnotationParser {
     const longestLine = lines.reduce((max, line) => Math.max(max, line.length), 0);
     const textWidthFromNode = textNode?.width ? textNode.width * scaleX : longestLine * estimatedCharWidth;
     const textWidth = Math.max(1, textWidthFromNode);
-    const pdfX1 = nodeX;
-    const pdfY1 = pageHeight - nodeY - textHeight;
-    const pdfX2 = pdfX1 + textWidth;
-    const pdfY2 = pageHeight - nodeY;
+    const [pdfX1, pdfY1, pdfX2, pdfY2] = convertCanvasRectToPdf(pageTransform, {
+      x: nodeX,
+      y: nodeY,
+      width: textWidth,
+      height: textHeight
+    });
     const rect = [
       PDFNumber.of(pdfX1),
       PDFNumber.of(pdfY1),
       PDFNumber.of(pdfX2),
       PDFNumber.of(pdfY2)
     ];
-    const appearanceWidth = Math.max(1, pdfX2 - pdfX1);
-    const appearanceHeight = Math.max(1, pdfY2 - pdfY1);
+    const appearanceWidth = Math.max(1, textWidth);
+    const appearanceHeight = Math.max(1, textHeight);
     const commands = ["q"];
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i] ?? "";
@@ -89,11 +93,17 @@ export class FreeTextParser extends AnnotationParser {
       Encoding: PDFName.of("WinAnsiEncoding")
     });
     const fontRef = context.register(fontDict);
+    const appearanceMatrix = formAppearanceMatrix(
+      pageTransform.rotation,
+      appearanceWidth,
+      appearanceHeight
+    );
     const appearanceStream = PDFRawStream.of(
       context.obj({
         Type: PDFName.of("XObject"),
         Subtype: PDFName.of("Form"),
         BBox: context.obj([0, 0, appearanceWidth, appearanceHeight]),
+        Matrix: context.obj(appearanceMatrix.map((n) => PDFNumber.of(n))),
         Resources: context.obj({
           Font: context.obj({ Helvetica: fontRef })
         })
@@ -125,7 +135,7 @@ export class FreeTextParser extends AnnotationParser {
       const replyAnn = context.obj({
         Type: PDFName.of("Annot"),
         Subtype: PDFName.of("Text"),
-        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageHeight),
+        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageTransform),
         Contents: stringToPDFHexString(comment.content),
         T: stringToPDFHexString(comment.title || UNKNOWN_USER),
         M: PDFString.of(comment.date || ""),

package/dist/runtime/annotation/pdf-export/parse_highlight.js

@@ -1,5 +1,10 @@
 import { PDFName, PDFNumber, PDFRawStream, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import {
+  convertCanvasPointToPdf,
+  convertCanvasRectToPdf,
+  pageTransformFromPdfLibPage
+} from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 const UNKNOWN_USER = "Unknown user";
 function formatPdfNumber(value) {
@@ -21,18 +26,14 @@ function parseHighlightRects(konvaString) {
     return { x, y, width, height };
   }).filter((rect) => rect.width > 0 && rect.height > 0);
 }
-function buildQuadPoints(rects, pageHeight) {
+function buildQuadPoints(rects, t) {
   const quadPoints = [];
-  for (const rect of rects) {
-    const x = rect.x;
-    const y = rect.y;
-    const width = rect.width;
-    const height = rect.height;
-    const x1 = x;
-    const y1 = pageHeight - y;
-    const x2 = x + width;
-    const y2 = pageHeight - (y + height);
-    quadPoints.push(x1, y1, x2, y1, x1, y2, x2, y2);
+  for (const r of rects) {
+    const tl = convertCanvasPointToPdf(t, r.x, r.y);
+    const tr = convertCanvasPointToPdf(t, r.x + r.width, r.y);
+    const bl = convertCanvasPointToPdf(t, r.x, r.y + r.height);
+    const br = convertCanvasPointToPdf(t, r.x + r.width, r.y + r.height);
+    quadPoints.push(tl.x, tl.y, tr.x, tr.y, bl.x, bl.y, br.x, br.y);
   }
   return quadPoints;
 }
@@ -40,7 +41,7 @@ export class HighlightParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     let highlightRects = [];
     try {
       highlightRects = parseHighlightRects(annotation.konvaString);
@@ -55,21 +56,18 @@ export class HighlightParser extends AnnotationParser {
         height: annotation.konvaClientRect.height
       }];
     }
-    const quadPoints = buildQuadPoints(highlightRects, pageHeight);
+    const quadPoints = buildQuadPoints(highlightRects, pageTransform);
     const color = rgbToPdfColor(annotation.color || void 0);
+    const userRects = highlightRects.map((hr) => convertCanvasRectToPdf(pageTransform, hr));
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
     let maxY = -Infinity;
-    for (const hr of highlightRects) {
-      const pdfLeft = hr.x;
-      const pdfBottom = pageHeight - hr.y - hr.height;
-      const pdfRight = hr.x + hr.width;
-      const pdfTop = pageHeight - hr.y;
-      if (pdfLeft < minX) minX = pdfLeft;
-      if (pdfBottom < minY) minY = pdfBottom;
-      if (pdfRight > maxX) maxX = pdfRight;
-      if (pdfTop > maxY) maxY = pdfTop;
+    for (const [ux1, uy1, ux2, uy2] of userRects) {
+      if (ux1 < minX) minX = ux1;
+      if (uy1 < minY) minY = uy1;
+      if (ux2 > maxX) maxX = ux2;
+      if (uy2 > maxY) maxY = uy2;
     }
     const x1 = minX;
     const y1 = minY;
@@ -84,13 +82,13 @@ export class HighlightParser extends AnnotationParser {
       "/GS1 gs",
       `${formatPdfNumber(r)} ${formatPdfNumber(g)} ${formatPdfNumber(b)} rg`
     ];
-    for (const highlightRect of highlightRects) {
-      const pageX = highlightRect.x;
-      const pageY = pageHeight - highlightRect.y - highlightRect.height;
-      const localX = pageX - x1;
-      const localY = pageY - y1;
+    for (const [ux1, uy1, ux2, uy2] of userRects) {
+      const localX = ux1 - x1;
+      const localY = uy1 - y1;
+      const w = ux2 - ux1;
+      const h = uy2 - uy1;
       commands.push(
-        `${formatPdfNumber(localX)} ${formatPdfNumber(localY)} ${formatPdfNumber(highlightRect.width)} ${formatPdfNumber(highlightRect.height)} re`,
+        `${formatPdfNumber(localX)} ${formatPdfNumber(localY)} ${formatPdfNumber(w)} ${formatPdfNumber(h)} re`,
         "f"
       );
     }
@@ -133,7 +131,7 @@ export class HighlightParser extends AnnotationParser {
       const replyAnn = context.obj({
         Type: PDFName.of("Annot"),
         Subtype: PDFName.of("Text"),
-        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageHeight),
+        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageTransform),
         Contents: stringToPDFHexString(comment.content),
         T: stringToPDFHexString(comment.title || UNKNOWN_USER),
         M: PDFString.of(comment.date || ""),

package/dist/runtime/annotation/pdf-export/parse_ink.js

@@ -1,5 +1,6 @@
 import { PDFName, PDFNumber, PDFRawStream, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { convertCanvasPointToPdf, pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 const UNKNOWN_USER = "Unknown user";
 function formatPdfNumber(value) {
@@ -10,7 +11,7 @@ export class InkParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     let konvaGroup;
     try {
       konvaGroup = JSON.parse(annotation.konvaString);
@@ -31,7 +32,8 @@ export class InkParser extends AnnotationParser {
       for (let i = 0; i < points.length; i += 2) {
         const x = groupX + points[i] * scaleX;
         const y = groupY + points[i + 1] * scaleY;
-        transformedPoints.push(x, pageHeight - y);
+        const u = convertCanvasPointToPdf(pageTransform, x, y);
+        transformedPoints.push(u.x, u.y);
       }
       transformedPaths.push(transformedPoints);
     }
@@ -136,7 +138,7 @@ export class InkParser extends AnnotationParser {
       const replyAnn = context.obj({
         Type: PDFName.of("Annot"),
         Subtype: PDFName.of("Text"),
-        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageHeight),
+        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageTransform),
         Contents: stringToPDFHexString(comment.content),
         T: stringToPDFHexString(comment.title || UNKNOWN_USER),
         M: PDFString.of(comment.date || ""),

package/dist/runtime/annotation/pdf-export/parse_line.js

@@ -1,5 +1,6 @@
 import { PDFName, PDFNumber, PDFRawStream, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { convertCanvasPointToPdf, pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 const UNKNOWN_USER = "Unknown user";
 function formatPdfNumber(value) {
@@ -10,7 +11,7 @@ export class LineParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     const konvaGroup = JSON.parse(annotation.konvaString);
     const lines = (konvaGroup.children ?? []).filter((item) => item.className === "Arrow");
     const groupX = konvaGroup.attrs?.x || 0;
@@ -25,7 +26,8 @@ export class LineParser extends AnnotationParser {
       for (let i = 0; i < points.length; i += 2) {
         const x = groupX + (points[i] ?? 0) * scaleX;
         const y = groupY + (points[i + 1] ?? 0) * scaleY;
-        transformedPoints.push(x, pageHeight - y);
+        const u = convertCanvasPointToPdf(pageTransform, x, y);
+        transformedPoints.push(u.x, u.y);
       }
       transformedPaths.push(transformedPoints);
     }
@@ -174,7 +176,7 @@ export class LineParser extends AnnotationParser {
       const replyAnn = context.obj({
         Type: PDFName.of("Annot"),
         Subtype: PDFName.of("Text"),
-        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageHeight),
+        Rect: convertKonvaRectToPdfRect(annotation.konvaClientRect, pageTransform),
         Contents: stringToPDFHexString(comment.content),
         T: stringToPDFHexString(comment.title || UNKNOWN_USER),
         M: PDFString.of(comment.date || ""),

package/dist/runtime/annotation/pdf-export/parse_polyline.js

@@ -1,5 +1,6 @@
 import { PDFName, PDFNumber, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { convertCanvasPointToPdf, pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 import { computeBoundsFromKonvaString } from "./parse_utils.js";
 const UNKNOWN_USER = "Unknown user";
@@ -29,7 +30,7 @@ export class PolylineParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     const konvaGroup = JSON.parse(annotation.konvaString);
     const lines = (konvaGroup.children ?? []).filter((item) => item.className === "Path");
     const groupX = konvaGroup.attrs?.x || 0;
@@ -43,7 +44,8 @@ export class PolylineParser extends AnnotationParser {
         for (let i = 0; i < points.length; i += 2) {
           const x = groupX + points[i] * scaleX;
           const y = groupY + points[i + 1] * scaleY;
-          transformedPoints.push(x, pageHeight - y);
+          const u = convertCanvasPointToPdf(pageTransform, x, y);
+          transformedPoints.push(u.x, u.y);
         }
         return context.obj(transformedPoints);
       })
@@ -62,7 +64,7 @@ export class PolylineParser extends AnnotationParser {
       Subtype: PDFName.of("Ink"),
       // Compute Rect from konvaString so it reflects the current position
       // even when konvaClientRect is stale after a move/resize.
-      Rect: convertKonvaRectToPdfRect(computeBoundsFromKonvaString(annotation.konvaString) ?? annotation.konvaClientRect, pageHeight),
+      Rect: convertKonvaRectToPdfRect(computeBoundsFromKonvaString(annotation.konvaString) ?? annotation.konvaClientRect, pageTransform),
       InkList: inkList,
       C: context.obj([PDFNumber.of(r), PDFNumber.of(g), PDFNumber.of(b)]),
       T: stringToPDFHexString(annotation.title || UNKNOWN_USER),
@@ -79,7 +81,7 @@ export class PolylineParser extends AnnotationParser {
       const replyAnn = context.obj({
         Type: PDFName.of("Annot"),
         Subtype: PDFName.of("Text"),
-        Rect: convertKonvaRectToPdfRect(computeBoundsFromKonvaString(annotation.konvaString) ?? annotation.konvaClientRect, pageHeight),
+        Rect: convertKonvaRectToPdfRect(computeBoundsFromKonvaString(annotation.konvaString) ?? annotation.konvaClientRect, pageTransform),
         Contents: stringToPDFHexString(comment.content),
         T: stringToPDFHexString(comment.title || UNKNOWN_USER),
         M: PDFString.of(comment.date || ""),

package/dist/runtime/annotation/pdf-export/parse_square.js

@@ -1,5 +1,6 @@
 import { PDFName, PDFString } from "pdf-lib";
 import { convertKonvaRectToPdfRect, rgbToPdfColor, stringToPDFHexString } from "../engine/utils.js";
+import { pageTransformFromPdfLibPage } from "../pdf-import/transform.js";
 import { AnnotationParser } from "./parse.js";
 import { computeBoundsFromKonvaString } from "./parse_utils.js";
 const UNKNOWN_USER = "Unknown user";
@@ -7,9 +8,9 @@ export class SquareParser extends AnnotationParser {
   async parse() {
     const { annotation, page, pdfDoc } = this;
     const context = pdfDoc.context;
-    const pageHeight = page.getHeight();
+    const pageTransform = pageTransformFromPdfLibPage(page);
     const bounds = computeBoundsFromKonvaString(annotation.konvaString);
-    const rect = convertKonvaRectToPdfRect(bounds ?? annotation.konvaClientRect, pageHeight);
+    const rect = convertKonvaRectToPdfRect(bounds ?? annotation.konvaClientRect, pageTransform);
     const mainAnn = context.obj({
       Type: PDFName.of("Annot"),
       Subtype: PDFName.of("Square"),