6fd3a1515f
- โหลด PDF ผ่าน /api/pdf?fileId= ที่สร้าง ToUnicode CMap ใหม่บนสำเนาในหน่วยความจำ จาก ActualText ใน marked content (lib/pdf-actual-text.ts + unit tests) — แก้ ฟอนต์ไทยที่ cmap เพี้ยน (คำสั่งศาล) ให้ textLayer select/copy/ค้นหา/ชื่อ bookmark ถูกต้องตั้งแต่ต้น ไฟล์ใน public/ ไม่ถูกแตะ (invariant #1) — PDF ปกติได้ bytes เดิม ไม่มี cost และ fail แล้ว PDFViewer fallback fetch ไฟล์ดิบเอง - ข้อความจาก selection ห้าม selection.toString() ตรง ๆ: ใช้ selectionTextWithin เดินทีละอักษร เรียงตามตำแหน่งบนจอ (จัดการ Thai combining marks + ctrl ขยะ) ปิดท้ายด้วย sanitizePdfText ก่อนเก็บ DB/ชื่อ bookmark/คลิปบอร์ด (มี tests) - mergeRectsByLine ใช้ median ความสูง rect คำนวณเกณฑ์บรรทัดแทนค่าคงที่ - Server Actions ทุกตัวที่เขียน DB เรียก revalidateFilePages (revalidatePath หน้า viewer+summary) คู่กับ publish event — แก้กด back แล้วเข้าไฟล์ใหม่ได้ RSC payload เก่าจาก Router Cache ฝั่ง client จนต้อง hard refresh - คีย์ลัด DEL/Backspace ลบ annotation ที่เลือกอยู่ (ของตัวเองเท่านั้น ข้ามเมื่อ focus อยู่ใน input/textarea/select/contenteditable) - STAMP: ย่อฟอนต์ label ให้อยู่บรรทัดเดียวพอดีกรอบทั้งบนจอ (canvas measure) และ export PDF (stampFitFontSize แชร์กัน) + เพิ่ม handle ปรับขนาดตรายางในแผง selection (uniform scale + clamp รายแกน) - sync invariant/กติกา: CLAUDE.md #4, rules/*.md, PLAN-FEAT.md (F3) Co-Authored-By: Claude Code <noreply@anthropic.com>
90 lines
4 KiB
TypeScript
90 lines
4 KiB
TypeScript
import type { Point, Rect } from "@/db/schema";
|
||
|
||
// พิกัดทุกอย่างที่เก็บลง DB เป็น % ของขนาดหน้า PDF (PLAN.md §2, CLAUDE.md invariant #2)
|
||
// ทิศทางแปลง: px → % = ÷size×100, % → px = ×size÷100 — ผ่านไฟล์นี้เท่านั้น
|
||
// Point/Rect define ที่ db/schema.ts (PLAN-FEAT.md §1) แล้ว re-export ที่นี่
|
||
|
||
export type { Rect, Point };
|
||
|
||
export type Size = { width: number; height: number };
|
||
|
||
export const toPercent = (px: number, size: number): number => (px / size) * 100;
|
||
|
||
export const toPx = (percent: number, size: number): number => (percent / 100) * size;
|
||
|
||
export const clamp = (value: number, min: number, max: number): number =>
|
||
Math.min(Math.max(value, min), max);
|
||
|
||
export const pointToPercent = (p: Point, size: Size): Point => ({
|
||
x: toPercent(p.x, size.width),
|
||
y: toPercent(p.y, size.height),
|
||
});
|
||
|
||
export const pointToPx = (p: Point, size: Size): Point => ({
|
||
x: toPx(p.x, size.width),
|
||
y: toPx(p.y, size.height),
|
||
});
|
||
|
||
export const rectToPercent = (r: Rect, size: Size): Rect => ({
|
||
x: toPercent(r.x, size.width),
|
||
y: toPercent(r.y, size.height),
|
||
width: toPercent(r.width, size.width),
|
||
height: toPercent(r.height, size.height),
|
||
});
|
||
|
||
export const rectToPx = (r: Rect, size: Size): Rect => ({
|
||
x: toPx(r.x, size.width),
|
||
y: toPx(r.y, size.height),
|
||
width: toPx(r.width, size.width),
|
||
height: toPx(r.height, size.height),
|
||
});
|
||
|
||
export const pathToPercent = (path: Point[], size: Size): Point[] =>
|
||
path.map((p) => pointToPercent(p, size));
|
||
|
||
export const pathToPx = (path: Point[], size: Size): Point[] =>
|
||
path.map((p) => pointToPx(p, size));
|
||
|
||
/** พิกัด pointer จาก event เทียบ page element → % (clamp 0–100 เสมอ) */
|
||
export function getPointerPercent(
|
||
e: { clientX: number; clientY: number },
|
||
pageEl: HTMLElement,
|
||
): Point {
|
||
const rect = pageEl.getBoundingClientRect();
|
||
return {
|
||
x: clamp(toPercent(e.clientX - rect.left, rect.width), 0, 100),
|
||
y: clamp(toPercent(e.clientY - rect.top, rect.height), 0, 100),
|
||
};
|
||
}
|
||
|
||
/**
|
||
* รวบ rects ที่อยู่บรรทัดเดียวกัน (แนวตั้ง overlap กัน = y/height ใกล้กัน)
|
||
* เหลือ 1 rect ต่อบรรทัด โดย union แกน x ให้ครอบข้อความเดิมทั้งบรรทัด
|
||
* เรียกทุกครั้งก่อนบันทึก HIGHLIGHT ลง DB กัน JSONB บวม
|
||
*/
|
||
export function mergeRectsByLine(rects: Rect[]): Rect[] {
|
||
const sorted = [...rects].sort((a, b) => a.y - b.y || a.x - b.x);
|
||
const merged: Rect[] = [];
|
||
for (const r of sorted) {
|
||
const last = merged[merged.length - 1];
|
||
if (!last) {
|
||
merged.push({ ...r });
|
||
continue;
|
||
}
|
||
// บรรทัดเดียวกัน = ซ้อนแนวตั้งกัน "เกินครึ่ง" ของความสูงที่เตี้ยกว่า — กล่อง span
|
||
// ของ textLayer สูงตาม font metrics (ฟอนต์ไทยมีสระบน/ล่าง) จึงชนกันเล็กน้อยระหว่าง
|
||
// บรรทัดที่ leading แน่นได้ ต้องไม่ถือเป็นบรรทัดเดียวกัน ไม่งั้นมาร์กเกิน/เด้งไปบรรทัดอื่น
|
||
const overlap = Math.min(last.y + last.height, r.y + r.height) - Math.max(last.y, r.y);
|
||
if (overlap > Math.min(last.height, r.height) / 2) {
|
||
// ขยายกรอบเดิมให้ครอบ rect นี้ด้วย
|
||
const right = Math.max(last.x + last.width, r.x + r.width);
|
||
last.x = Math.min(last.x, r.x);
|
||
last.width = right - last.x;
|
||
const bottom = Math.max(last.y + last.height, r.y + r.height);
|
||
last.height = bottom - last.y;
|
||
} else {
|
||
merged.push({ ...r });
|
||
}
|
||
}
|
||
return merged;
|
||
}
|