kviewer 0.1.1 → 0.2.0

package/dist/runtime/annotation/pdf-import/utils.d.ts

@@ -1,6 +1,7 @@
 import Konva from 'konva';
 import { type AnnotationType, type IAnnotationComment, type IAnnotationStore, type PdfjsAnnotationSubtype } from '../engine/types.js';
 import { type RawPdfAnnotation } from './types.js';
+import { type PageTransform } from './transform.js';
 type Rect = {
     x: number;
     y: number;
@@ -17,8 +18,8 @@ export declare function getAnnotationText(annotation: RawPdfAnnotation): string;
 export declare function getFreeTextContent(annotation: RawPdfAnnotation): string;
 export declare function getAnnotationDate(annotation: RawPdfAnnotation): string;
 export declare function getComments(annotation: RawPdfAnnotation, allAnnotations: RawPdfAnnotation[]): IAnnotationComment[];
-export declare function rectFromPdfRect(input: unknown, pageHeight: number): Rect | null;
-export declare function pointFromPdfPoint(input: unknown, pageHeight: number): {
+export declare function rectFromPdfRect(input: unknown, transform: PageTransform): Rect | null;
+export declare function pointFromPdfPoint(input: unknown, transform: PageTransform): {
     x: number;
     y: number;
 } | null;
@@ -26,9 +27,9 @@ export declare function localPointFromPdfPoint(input: unknown): {
     x: number;
     y: number;
 } | null;
-export declare function rectFromQuadPoints(input: unknown, pageHeight: number): Rect | null;
-export declare function pointsFromInkList(input: unknown, pageHeight: number): number[];
-export declare function linePointsFromCoordinates(input: unknown, pageHeight: number): number[] | null;
+export declare function rectFromQuadPoints(input: unknown, transform: PageTransform): Rect | null;
+export declare function pointsFromInkList(input: unknown, transform: PageTransform): number[];
+export declare function linePointsFromCoordinates(input: unknown, transform: PageTransform): number[] | null;
 export declare function normalizedStrokeWidth(annotation: RawPdfAnnotation, fallback?: number, options?: StrokeWidthOptions): number;
 export declare function dashedBorder(annotation: RawPdfAnnotation): number[];
 export declare function hasArrowEnding(value: unknown): boolean;

package/dist/runtime/annotation/pdf-import/utils.js

@@ -14,6 +14,10 @@ import {
   isRawPdfAnnotation,
   isString
 } from "./types.js";
+import {
+  convertPdfPointToCanvas,
+  convertPdfRectToCanvas
+} from "./transform.js";
 const UNKNOWN_USER = "Unknown user";
 function clampColor(value) {
   if (!Number.isFinite(value)) return 0;
@@ -108,23 +112,18 @@ export function getComments(annotation, allAnnotations) {
   }
   return comments;
 }
-export function rectFromPdfRect(input, pageHeight) {
+export function rectFromPdfRect(input, transform) {
   if (!Array.isArray(input) || input.length < 4) return null;
   const [x1, y1, x2, y2] = input;
   if (!isNumber(x1) || !isNumber(y1) || !isNumber(x2) || !isNumber(y2)) return null;
-  return {
-    x: x1,
-    y: pageHeight - y2,
-    width: x2 - x1,
-    height: y2 - y1
-  };
+  return convertPdfRectToCanvas(transform, [x1, y1, x2, y2]);
 }
-export function pointFromPdfPoint(input, pageHeight) {
+export function pointFromPdfPoint(input, transform) {
   const pair = toNumericTuple(input, 2);
-  if (pair) return { x: pair[0], y: pageHeight - pair[1] };
+  if (pair) return convertPdfPointToCanvas(transform, pair[0], pair[1]);
   const point = asPoint(input);
   if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
-  return { x: point.x, y: pageHeight - point.y };
+  return convertPdfPointToCanvas(transform, point.x, point.y);
 }
 export function localPointFromPdfPoint(input) {
   const pair = toNumericTuple(input, 2);
@@ -133,55 +132,71 @@ export function localPointFromPdfPoint(input) {
   if (!point || !isNumber(point.x) || !isNumber(point.y)) return null;
   return { x: point.x, y: point.y };
 }
-export function rectFromQuadPoints(input, pageHeight) {
+function rawPdfPoint(input) {
+  const pair = toNumericTuple(input, 2);
+  if (pair) return [pair[0], pair[1]];
+  const point = asPoint(input);
+  if (point && isNumber(point.x) && isNumber(point.y)) return [point.x, point.y];
+  return null;
+}
+export function rectFromQuadPoints(input, transform) {
+  let raw = null;
   const numeric = toCoordinateList(input);
   if (numeric && numeric.length >= 8) {
-    const p02 = pointFromPdfPoint([numeric[0], numeric[1]], pageHeight);
-    const p12 = pointFromPdfPoint([numeric[2], numeric[3]], pageHeight);
-    const p32 = pointFromPdfPoint([numeric[6], numeric[7]], pageHeight);
-    if (!p02 || !p12 || !p32) return null;
-    return {
-      x: p02.x,
-      y: p02.y,
-      width: p12.x - p02.x,
-      height: p12.y - p32.y
-    };
+    raw = [
+      [numeric[0], numeric[1]],
+      [numeric[2], numeric[3]],
+      [numeric[4], numeric[5]],
+      [numeric[6], numeric[7]]
+    ];
+  } else if (Array.isArray(input) && input.length >= 4) {
+    const collected = [];
+    for (let i = 0; i < 4; i++) {
+      const p = rawPdfPoint(input[i]);
+      if (!p) return null;
+      collected.push(p);
+    }
+    raw = collected;
   }
-  if (!Array.isArray(input) || input.length < 4) return null;
-  const p0 = pointFromPdfPoint(input[0], pageHeight);
-  const p1 = pointFromPdfPoint(input[1], pageHeight);
-  const p3 = pointFromPdfPoint(input[3], pageHeight);
-  if (!p0 || !p1 || !p3) return null;
-  return {
-    x: p0.x,
-    y: p0.y,
-    width: p1.x - p0.x,
-    height: p1.y - p3.y
-  };
+  if (!raw) return null;
+  const xs = [];
+  const ys = [];
+  for (const [rx, ry] of raw) {
+    const p = convertPdfPointToCanvas(transform, rx, ry);
+    xs.push(p.x);
+    ys.push(p.y);
+  }
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-export function pointsFromInkList(input, pageHeight) {
+export function pointsFromInkList(input, transform) {
   const numeric = toCoordinateList(input);
   if (numeric) {
     const points2 = [];
     for (let index = 0; index + 1 < numeric.length; index += 2) {
-      points2.push(numeric[index], pageHeight - numeric[index + 1]);
+      const p = convertPdfPointToCanvas(transform, numeric[index], numeric[index + 1]);
+      points2.push(p.x, p.y);
     }
     return points2;
   }
   if (!Array.isArray(input)) return [];
   const points = [];
   for (const item of input) {
-    const converted = pointFromPdfPoint(item, pageHeight);
+    const converted = pointFromPdfPoint(item, transform);
     if (!converted) continue;
     points.push(converted.x, converted.y);
   }
   return points;
 }
-export function linePointsFromCoordinates(input, pageHeight) {
+export function linePointsFromCoordinates(input, transform) {
   const tuple = toNumericTuple(input, 4);
   if (!tuple) return null;
-  const [x, y, x1, y1] = tuple;
-  return [x, pageHeight - y, x1, pageHeight - y1];
+  const a = convertPdfPointToCanvas(transform, tuple[0], tuple[1]);
+  const b = convertPdfPointToCanvas(transform, tuple[2], tuple[3]);
+  return [a.x, a.y, b.x, b.y];
 }
 export function normalizedStrokeWidth(annotation, fallback = 1, options = {}) {
   const borderStyle = asBorderStyle(annotation.borderStyle);

package/dist/runtime/components/AnnotationToolbar.vue

@@ -44,6 +44,17 @@
         {{ state.selectedAnnotations.value.length }} selected
       </span>
 
+      <!-- Edit text (free text only) -->
+      <button
+        v-if="isFreeText"
+        class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
+        title="Edit text"
+        data-testid="annotation-edit-text"
+        @click="onEditText"
+      >
+        <UIcon name="i-lucide-pencil" class="text-sm text-muted" />
+      </button>
+
       <!-- Delete -->
       <button
         class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-default cursor-pointer"
@@ -114,6 +125,11 @@ function onFontSizeChange(value) {
   ann.fontSize = fontSize;
   state.selectedAnnotation.value = { ...ann };
 }
+function onEditText() {
+  const ann = state.selectedAnnotation.value;
+  if (!ann || !state.painter.value) return;
+  void state.painter.value.editFreeText(ann.id);
+}
 function onDelete() {
   if (isMultiSelect.value) {
     const ids = state.selectedAnnotations.value.map((a) => a.id);

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

@@ -1,15 +1,12 @@
+import type { PageTransform } from '../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     pageNumber: number;
     scale: number;
-    pageWidth: number;
-    pageHeight: number;
+    /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
+     *  origin — the single source of truth for mapping `/Rect` to canvas. */
+    pageTransform: PageTransform;
     pointerEvents: string;
     zIndex: number;
-    /** PDF user-space origin offsets (`view[0]`, `view[1]`). Forwarded to
-     *  FormFieldWrapper so /Rect coordinates can be mapped to canvas space
-     *  when the page's MediaBox is not at (0, 0). */
-    viewOffsetX?: number;
-    viewOffsetY?: 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 _default: typeof __VLS_export;

package/dist/runtime/components/FormFieldLayer.vue

@@ -6,8 +6,8 @@
   position: 'absolute',
   top: 0,
   left: 0,
-  width: props.pageWidth + 'px',
-  height: props.pageHeight + 'px',
+  width: props.pageTransform.width + 'px',
+  height: props.pageTransform.height + 'px',
   transform: `scale(${props.scale})`,
   transformOrigin: '0 0',
   zIndex: props.zIndex,
@@ -22,10 +22,8 @@
       v-for="field in fields"
       :key="field.id"
       :field="field"
-      :page-height="props.pageHeight"
+      :page-transform="props.pageTransform"
       :scale="props.scale"
-      :view-offset-x="props.viewOffsetX ?? 0"
-      :view-offset-y="props.viewOffsetY ?? 0"
       :selected="selectedFieldId === field.id"
       @select="formFields.selectPlacedField(field.id)"
     />
@@ -41,12 +39,9 @@ import FormFieldWrapper from "./form-fields/FormFieldWrapper.vue";
 const props = defineProps({
   pageNumber: { type: Number, required: true },
   scale: { type: Number, required: true },
-  pageWidth: { type: Number, required: true },
-  pageHeight: { type: Number, required: true },
+  pageTransform: { type: Object, required: true },
   pointerEvents: { type: String, required: true },
-  zIndex: { type: Number, required: true },
-  viewOffsetX: { type: Number, required: false },
-  viewOffsetY: { type: Number, required: false }
+  zIndex: { type: Number, required: true }
 });
 const formFields = useFormFields();
 const state = useViewerState();

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

@@ -1,15 +1,12 @@
+import type { PageTransform } from '../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     pageNumber: number;
     scale: number;
-    pageWidth: number;
-    pageHeight: number;
+    /** Carries displayed width/height plus the page's `/Rotate` and MediaBox
+     *  origin — the single source of truth for mapping `/Rect` to canvas. */
+    pageTransform: PageTransform;
     pointerEvents: string;
     zIndex: number;
-    /** PDF user-space origin offsets (`view[0]`, `view[1]`). Forwarded to
-     *  FormFieldWrapper so /Rect coordinates can be mapped to canvas space
-     *  when the page's MediaBox is not at (0, 0). */
-    viewOffsetX?: number;
-    viewOffsetY?: 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 _default: typeof __VLS_export;

package/dist/runtime/components/PdfPage.vue

@@ -29,10 +29,7 @@
     <FormFieldLayer
       :page-number="props.pageNumber"
       :scale="props.scale"
-      :page-width="baseWidth"
-      :page-height="baseHeight"
-      :view-offset-x="viewOffsetX"
-      :view-offset-y="viewOffsetY"
+      :page-transform="props.pageMeta"
       :pointer-events="formFieldPointerEvents"
       :z-index="formFieldZIndex"
     />
@@ -86,8 +83,6 @@ let currentRenderTask = null;
 let textLayer = null;
 const baseWidth = props.pageMeta.width;
 const baseHeight = props.pageMeta.height;
-const viewOffsetX = props.pageMeta.viewOffsetX ?? 0;
-const viewOffsetY = props.pageMeta.viewOffsetY ?? 0;
 const cssWidth = computed(() => baseWidth * props.scale);
 const cssHeight = computed(() => baseHeight * props.scale);
 const isAnnotating = computed(() => {

package/dist/runtime/components/form-fields/FormFieldWrapper.d.vue.ts

@@ -1,13 +1,12 @@
 import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+import { type PageTransform } from '../../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
-    pageHeight: number;
+    /** Coord transform for this page. `/Rect` is in unrotated user space; the
+     *  transform applies the page's `/Rotate` and the MediaBox origin so the
+     *  field lands at the right canvas position regardless of page rotation. */
+    pageTransform: PageTransform;
     scale: number;
-    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
-     *  default user space; the canvas top-left corresponds to PDF
-     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
     selected: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

package/dist/runtime/components/form-fields/FormFieldWrapper.vue

@@ -26,7 +26,7 @@
       :field="props.field"
       :selected="props.selected"
       :scale="props.scale"
-      :page-height="props.pageHeight"
+      :page-height="props.pageTransform.height"
       @select="emit('select')"
     />
   </div>
@@ -34,6 +34,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { convertPdfRectToCanvas } from "../../annotation/pdf-import/transform";
 import { useViewerState } from "../../composables/useViewerState";
 import { useFormFields } from "../../composables/useFormFields";
 import FormTextField from "./FormTextField.vue";
@@ -45,10 +46,8 @@ import FormButton from "./FormButton.vue";
 import PlacedFieldChrome from "./PlacedFieldChrome.vue";
 const props = defineProps({
   field: { type: Object, required: true },
-  pageHeight: { type: Number, required: true },
+  pageTransform: { type: Object, required: true },
   scale: { type: Number, required: true },
-  viewOffsetX: { type: Number, required: false },
-  viewOffsetY: { type: Number, required: false },
   selected: { type: Boolean, required: true }
 });
 const emit = defineEmits(["select"]);
@@ -64,18 +63,13 @@ const chromeColor = computed(() => {
 });
 const positionStyle = computed(() => {
   const rect = props.field.rect;
-  const vx = props.viewOffsetX ?? 0;
-  const vy = props.viewOffsetY ?? 0;
-  const left = rect[0] - vx;
-  const top = props.pageHeight + vy - rect[3];
-  const width = rect[2] - rect[0];
-  const height = rect[3] - rect[1];
+  const r = convertPdfRectToCanvas(props.pageTransform, [rect[0], rect[1], rect[2], rect[3]]);
   return {
     position: "absolute",
-    left: `${left}px`,
-    top: `${top}px`,
-    width: `${width}px`,
-    height: `${height}px`
+    left: `${r.x}px`,
+    top: `${r.y}px`,
+    width: `${r.width}px`,
+    height: `${r.height}px`
   };
 });
 </script>

package/dist/runtime/components/form-fields/FormFieldWrapper.vue.d.ts

@@ -1,13 +1,12 @@
 import type { FormFieldDefinition } from '../../annotation/engine/types.js';
+import { type PageTransform } from '../../annotation/pdf-import/transform.js';
 type __VLS_Props = {
     field: FormFieldDefinition;
-    pageHeight: number;
+    /** Coord transform for this page. `/Rect` is in unrotated user space; the
+     *  transform applies the page's `/Rotate` and the MediaBox origin so the
+     *  field lands at the right canvas position regardless of page rotation. */
+    pageTransform: PageTransform;
     scale: number;
-    /** PDF user-space origin (view[0], view[1]). /Rect coords are in
-     *  default user space; the canvas top-left corresponds to PDF
-     *  (viewOffsetX, viewOffsetY + pageHeight), so we have to subtract. */
-    viewOffsetX?: number;
-    viewOffsetY?: number;
     selected: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -2,8 +2,14 @@ import { type ShallowRef, type ComputedRef, type Ref } from 'vue';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 export interface PageMeta {
     pageNumber: number;
+    /** Displayed page width — already accounts for the page's intrinsic
+     *  `/Rotate`, so width/height are swapped for 90°/270° pages. */
     width: number;
     height: number;
+    /** The page's intrinsic `/Rotate` value, normalized to 0 | 90 | 180 | 270.
+     *  `getViewport()` bakes this in by default; annotation layers that map
+     *  unrotated `/Rect` coordinates need it to apply the same rotation. */
+    rotation: number;
     /** PDF user-space origin of the page's visible area (`view[0]`, `view[1]`).
      *  Almost always (0, 0); non-zero for PDFs whose MediaBox has been
      *  shifted. Annotations in `/Rect` are in default user space, so any

package/dist/runtime/composables/usePageVirtualization.js

@@ -124,10 +124,15 @@ export function createPageVirtualization() {
     const vy = view[1] ?? 0;
     const vw = view[2] ?? 0;
     const vh = view[3] ?? 0;
+    const w = vw - vx;
+    const h = vh - vy;
+    const rotation = (proxy.rotate % 360 + 360) % 360;
+    const swap = rotation % 180 !== 0;
     return {
       pageNumber,
-      width: vw - vx,
-      height: vh - vy,
+      width: swap ? h : w,
+      height: swap ? w : h,
+      rotation,
       viewOffsetX: vx,
       viewOffsetY: vy
     };
@@ -146,6 +151,7 @@ export function createPageVirtualization() {
           pageNumber: i,
           width: firstMeta.width,
           height: firstMeta.height,
+          rotation: firstMeta.rotation,
           viewOffsetX: firstMeta.viewOffsetX,
           viewOffsetY: firstMeta.viewOffsetY
         });

package/dist/runtime/style.css

@@ -0,0 +1 @@
+@source "./components/**/*.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",
@@ -8,10 +8,12 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
+      "style": "./dist/runtime/style.css",
       "import": "./dist/module.mjs"
     }
   },
   "main": "./dist/module.mjs",
+  "style": "./dist/runtime/style.css",
   "typesVersions": {
     "*": {
       ".": [
@@ -40,21 +42,21 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@iconify-json/lucide": "^1.2.101",
     "@nuxt/kit": "^4.4.2",
+    "@nuxt/ui": "^4.6.0",
     "konva": "^10.2.3",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.6.205",
     "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.101",
     "@nuxt/devtools": "^3.2.4",
     "@nuxt/eslint": "1.15.2",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@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",