From ca74fb1843942f031b19ccedc9dcb2faf1adfd45 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Fri, 11 Sep 2026 17:41:22 +0700 Subject: [PATCH] =?UTF-8?q?TEXTBOX=20=E0=B8=81=E0=B8=A5=E0=B9=88=E0=B8=AD?= =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B8=A7=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=84?= =?UTF-8?q?=E0=B8=87=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B9=84=E0=B8=95?= =?UTF-8?q?=E0=B8=A5=E0=B9=8C=20Smallpdf:=20=E0=B8=84=E0=B8=A5=E0=B8=B4?= =?UTF-8?q?=E0=B8=81=E0=B9=80=E0=B8=94=E0=B8=B5=E0=B8=A2=E0=B8=A7=E0=B9=84?= =?UTF-8?q?=E0=B8=94=E0=B9=89=E0=B8=81=E0=B8=A5=E0=B9=88=E0=B8=AD=E0=B8=87?= =?UTF-8?q?=2030%=20+=20=E0=B8=A5=E0=B8=B2=E0=B8=81=E0=B8=82=E0=B8=AD?= =?UTF-8?q?=E0=B8=9A=E0=B8=8B=E0=B9=89=E0=B8=B2=E0=B8=A2/=E0=B8=82?= =?UTF-8?q?=E0=B8=A7=E0=B8=B2=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=84?= =?UTF-8?q?=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=81=E0=B8=A7=E0=B9=89=E0=B8=B2?= =?UTF-8?q?=E0=B8=87=20(=E0=B8=9F=E0=B8=AD=E0=B8=99=E0=B8=95=E0=B9=8C?= =?UTF-8?q?=E0=B8=84=E0=B8=87=E0=B8=82=E0=B8=99=E0=B8=B2=E0=B8=94=20?= =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1?= =?UTF-8?q?=20wrap=20=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Code --- .claude/rules/data-layer.md | 2 +- app/actions/annotations.ts | 8 ++ app/api/annotations/export/route.ts | 30 +++++-- components/pdf/AnnotationSelectionLayer.tsx | 63 +++++++++++--- components/pdf/PDFViewer.tsx | 35 ++++++-- components/pdf/TextboxStampLayer.tsx | 22 +++-- db/schema.ts | 5 +- docs/PLAN-FEAT.md | 1 + tests/utils/geometry.test.ts | 95 +++++++++++++++++++++ utils/geometry.ts | 28 ++++-- 10 files changed, 248 insertions(+), 41 deletions(-) diff --git a/.claude/rules/data-layer.md b/.claude/rules/data-layer.md index 40e6e04..aefeff4 100644 --- a/.claude/rules/data-layer.md +++ b/.claude/rules/data-layer.md @@ -7,7 +7,7 @@ paths: # Data Layer Rules (รายละเอียด: docs/PLAN.md §3, §4) - โครงสร้างตาราง/enum/JSONB union อ้าง §3 — หลังแก้ `db/schema.ts` ต้องรัน `/sync-db` -- Enum/union ขยายตาม PLAN-FEAT.md §1 ทีละ task — ตอนนี้เพิ่มแล้ว: `SHAPE` + `ShapeData` (rect/ellipse เก็บ `rect` bbox, line/arrow เก็บ `from`/`to` ตาม D3), `REDACTION` + `RedactionData` (`{ rect }` — ดำทึบ ไม่มีสีให้เปลี่ยน), `TEXTBOX` + `TextboxData` (F17 — `{ position, text, color, fontSize, bold?, opacity?, align?, segments? }` position เป็นมุมซ้ายบน, fontSize = % ของ width; bold/opacity(0–1)/align('left'|'center'|'right') เป็น optional ไม่มี = ตัวปกติ/ทึบเต็ม/ชิดซ้าย — bold ตอน export ต้องมี `public/fonts/Sarabun-Bold.ttf` ไม่งั้น fallback เป็น Regular; `segments?` = ตัวหนาเฉพาะส่วน (rich text — editor เป็น contentEditable + Ctrl/Cmd+B, เก็บเฉพาะเมื่อมี bold run) โดย field `text` เก็บข้อความรวม (concat) เสมอเพื่อค้นหา F14/preview sidebar และ export ใช้ `wrapStyledText` วาดแบบ run ผสม), `STAMP` + `StampData` (F18 — `{ label, position, scale, color? }` scale = ความกว้างกรอบเป็น % ของ width, color optional ไม่มี = `STAMP_COLOR`), `DrawData.widths?` (F7 pressure, optional ยาวเท่า paths; `Point` define ที่ `db/schema.ts` แล้ว re-export จาก `utils/coordinates.ts`), `DrawData.pen?` ('pencil' | 'highlighter' — optional ไม่มี = pencil; ค่า preset ต่อ pen อยู่ที่ `DRAW_PENS` ใน `utils/annotation-display.ts`), `DrawData.opacity?` (0–1 optional — เส้นใหม่เก็บชัดเสมอ แถวเดิม fallback ตาม preset ของ pen ผ่าน `effectiveDrawOpacity`), `HighlightData.style?` ('highlight' | 'underline' | 'strikethrough' | 'squiggle' — optional ไม่มี = ไฮไลต์ทึบตามเดิม; เลือกจาก popup หลังคลุมดำ), `HighlightData.opacity?` (0–1 optional ไม่มี = ทึบเต็ม — ตั้งจาก dropdown ของ tool highlight ตอนสร้าง + แผง selection แก้ได้หลังสร้าง; export: ไฮไลต์ทึบคูณเข้าค่าเดิม 0.35 ส่วนเส้นทุกแบบใช้ตรง ๆ) — เพิ่ม type ใหม่ทุกครั้งต้องเติม case ใน `validateAnnotationData` ครบถ้วน (invariant #8) +- Enum/union ขยายตาม PLAN-FEAT.md §1 ทีละ task — ตอนนี้เพิ่มแล้ว: `SHAPE` + `ShapeData` (rect/ellipse เก็บ `rect` bbox, line/arrow เก็บ `from`/`to` ตาม D3), `REDACTION` + `RedactionData` (`{ rect }` — ดำทึบ ไม่มีสีให้เปลี่ยน), `TEXTBOX` + `TextboxData` (F17 — `{ position, text, color, fontSize, bold?, opacity?, align?, segments?, width? }` position เป็น**มุมซ้ายบนของกล่องเสมอ** (align จัดข้อความในกล่องอย่างเดียวแบบ Smallpdf — กล่องไม่ขยับ), fontSize = % ของ width; bold/opacity(0–1)/align('left'|'center'|'right')/width (กล่องกว้างคงที่ % ของ width — สไตล์ Smallpdf: มี = กล่องกว้างคงที่ลากขอบปรับได้, ไม่มี = shrink-to-fit แถวเดิม) เป็น optional ไม่มี = ตัวปกติ/ทึบเต็ม/ชิดซ้าย/หุ้มข้อความ — bold ตอน export ต้องมี `public/fonts/Sarabun-Bold.ttf` ไม่งั้น fallback เป็น Regular; `segments?` = ตัวหนาเฉพาะส่วน (rich text — editor เป็น contentEditable + Ctrl/Cmd+B, เก็บเฉพาะเมื่อมี bold run) โดย field `text` เก็บข้อความรวม (concat) เสมอเพื่อค้นหา F14/preview sidebar และ export ใช้ `wrapStyledText` วาดแบบ run ผสม), `STAMP` + `StampData` (F18 — `{ label, position, scale, color? }` scale = ความกว้างกรอบเป็น % ของ width, color optional ไม่มี = `STAMP_COLOR`), `DrawData.widths?` (F7 pressure, optional ยาวเท่า paths; `Point` define ที่ `db/schema.ts` แล้ว re-export จาก `utils/coordinates.ts`), `DrawData.pen?` ('pencil' | 'highlighter' — optional ไม่มี = pencil; ค่า preset ต่อ pen อยู่ที่ `DRAW_PENS` ใน `utils/annotation-display.ts`), `DrawData.opacity?` (0–1 optional — เส้นใหม่เก็บชัดเสมอ แถวเดิม fallback ตาม preset ของ pen ผ่าน `effectiveDrawOpacity`), `HighlightData.style?` ('highlight' | 'underline' | 'strikethrough' | 'squiggle' — optional ไม่มี = ไฮไลต์ทึบตามเดิม; เลือกจาก popup หลังคลุมดำ), `HighlightData.opacity?` (0–1 optional ไม่มี = ทึบเต็ม — ตั้งจาก dropdown ของ tool highlight ตอนสร้าง + แผง selection แก้ได้หลังสร้าง; export: ไฮไลต์ทึบคูณเข้าค่าเดิม 0.35 ส่วนเส้นทุกแบบใช้ตรง ๆ) — เพิ่ม type ใหม่ทุกครั้งต้องเติม case ใน `validateAnnotationData` ครบถ้วน (invariant #8) - column `data` ใช้ `$type()` (discriminated union ตาม enum `type`) — ห้าม `any` หรือ object type กว้าง — `note?: string` (โน้ตคำอธิบายของรายการ เช่น เหตุผลที่วาด — PLAN-FEAT.md §7 N1) มีในทุกชนิด**ยกเว้น COMMENT** (มี `message` ทำหน้าที่นี้อยู่แล้ว) — validator `vNote` trim แล้ว ค่าว่าง = ไม่มีโน้ต; อ่านค่าผ่าน `annotationNote()` ใน `utils/annotation-display.ts` เท่านั้น (sidebar/สรุป/CSV ใช้ร่วม) - DTO (`AnnotationDTO`, `BookmarkDTO`): timestamp เป็น **ISO string** เสมอ ผ่าน mapper `toDTO` — ห้ามส่ง `Date` object ข้าม server→client - Server Actions: validate input ก่อนทุกครั้ง (type ถูกต้อง, ฟิลด์ครบ, `pageIndex ≥ 0`) ก่อนแตะ DB; เขียนด้วย `DATABASE_URL` ตรง ๆ + **publish event ผ่าน `lib/annotate-events.ts` หลังเขียนสำเร็จ** + **`revalidatePath` หน้า viewer+summary ของ fileId นั้น** (helper `revalidateFilePages` ในไฟล์เดียวกัน — invalidate Router Cache ฝั่ง client เพราะ `force-dynamic` ปิดแค่ฝั่ง server: ไม่งั้นกด back แล้วเข้าไฟล์ใหม่ได้ initial data เก่าจนต้อง hard refresh; action ใหม่ที่เขียน DB ต้องเรียกทุกครั้งเช่นเดียวกับ publish event) diff --git a/app/actions/annotations.ts b/app/actions/annotations.ts index 267405b..78da8ea 100644 --- a/app/actions/annotations.ts +++ b/app/actions/annotations.ts @@ -309,6 +309,13 @@ function validateAnnotationData(type: AnnotationType, v: unknown): AnnotationDat } } const textboxNote = vNote(d.note); + // width (กล่องกว้างคงที่) เป็น optional — ไม่มี = shrink-to-fit ตามเดิม (แถวเดิม) + if ( + d.width !== undefined && + (typeof d.width !== "number" || !Number.isFinite(d.width) || d.width <= 0) + ) { + fieldError("data.width", "เป็นตัวเลข > 0"); + } return { position, text, @@ -318,6 +325,7 @@ function validateAnnotationData(type: AnnotationType, v: unknown): AnnotationDat ...(d.opacity !== undefined ? { opacity: d.opacity } : {}), ...(d.align !== undefined ? { align: d.align } : {}), ...(d.segments !== undefined ? { segments: d.segments } : {}), + ...(d.width !== undefined ? { width: d.width } : {}), ...(textboxNote !== undefined ? { note: textboxNote } : {}), } satisfies TextboxData; } diff --git a/app/api/annotations/export/route.ts b/app/api/annotations/export/route.ts index 47464d8..df98efc 100644 --- a/app/api/annotations/export/route.ts +++ b/app/api/annotations/export/route.ts @@ -33,7 +33,7 @@ import { } from "@/utils/pdf-export"; import type { Rect } from "@/db/schema"; import { toPx, type Point, type Size } from "@/utils/coordinates"; -import { STAMP_HEIGHT_RATIO, TEXTBOX_MAX_WIDTH_PCT } from "@/utils/geometry"; +import { STAMP_HEIGHT_RATIO, textboxMaxWidthPct } from "@/utils/geometry"; import { STAMP_COLOR, effectiveDrawOpacity, stampFitFontSize } from "@/utils/annotation-display"; // Export PDF ฝัง annotation (F8/C1 — PLAN-FEAT.md §3) @@ -340,7 +340,14 @@ export async function GET(req: Request) { const { r, g, b } = hexToRgb01(d.color); if (thaiFont) { const fontSize = Math.max(thickness(d.fontSize), 4); - const maxWidth = px(TEXTBOX_MAX_WIDTH_PCT, display.width); + // clamp ขอบขวาแบบเดียวกับบนจอ (textboxMaxWidthPct) — ไม่งั้นกล่อง + // ที่ position.x สูง (ครึ่งขวาของหน้า) ข้อความทุกบรรทัดทะลุขอบหน้ากระดาษ + // กล่อง width คงที่ (ถ้ามี) wrap ที่ความกว้างนั้น (บีบด้วย cap เหมือน render จอ) + const capPct = textboxMaxWidthPct(d.position.x); + const maxWidth = Math.max( + px(Math.min(d.width ?? capPct, capPct), display.width), + 10, + ); // run ต่อสไตล์: segments (ตัวหนาเฉพาะส่วน) หรือทั้งกล่องตาม d.bold const runs: StyledRun[] = d.segments?.length ? d.segments.map((s) => ({ text: s.text, bold: !!(s.bold || d.bold) })) @@ -349,16 +356,25 @@ export async function GET(req: Request) { const widthOf = (s: string, bold: boolean) => fontFor(bold).widthOfTextAtSize(s, fontSize); const lines = wrapStyledText(runs, maxWidth, widthOf); - // จัดแนวในกล่องกว้าง maxWidth — เลื่อน x ต่อบรรทัดตามความกว้างจริงของบรรทัดนั้น + // กล่องห้อยจากมุมซ้ายบน (pos) เหมือน render จอ — align จัดบรรทัด*ใน*กล่องอย่างเดียว + // (แบบ Smallpdf กล่องไม่ขยับ): กล่อง width คงที่กว้างเต็ม maxWidth ตามที่กำหนด + // ส่วนแถวเดิม shrink-to-fit กว้างเท่าบรรทัดยาวสุด (ไม่เกิน maxWidth) const align = d.align ?? "left"; + const lineWOf = (lineRuns: StyledRun[]) => + lineRuns.reduce((sum, rn) => sum + widthOf(rn.text, rn.bold), 0); + const boxW = + d.width !== undefined + ? maxWidth + : Math.max(Math.min(...lines.map(lineWOf), maxWidth), 1); + const boxLeft = pos.x; lines.forEach((lineRuns, i) => { - const lineW = lineRuns.reduce((sum, rn) => sum + widthOf(rn.text, rn.bold), 0); + const lineW = lineWOf(lineRuns); let x = align === "center" - ? pos.x + (maxWidth - lineW) / 2 + ? boxLeft + (boxW - lineW) / 2 : align === "right" - ? pos.x + (maxWidth - lineW) - : pos.x; + ? boxLeft + (boxW - lineW) + : boxLeft; for (const rn of lineRuns) { page.drawText(rn.text, { x, diff --git a/components/pdf/AnnotationSelectionLayer.tsx b/components/pdf/AnnotationSelectionLayer.tsx index 455a1b6..f9af5ba 100644 --- a/components/pdf/AnnotationSelectionLayer.tsx +++ b/components/pdf/AnnotationSelectionLayer.tsx @@ -6,7 +6,7 @@ import { useState, type PointerEvent as ReactPointerEvent, } from "react"; -import { AlignCenter, AlignLeft, AlignRight, BookmarkPlus, Bold, Trash2 } from "lucide-react"; +import { AlignCenter, AlignLeft, AlignRight, BookmarkPlus, Trash2 } from "lucide-react"; import type { AnnotationData, @@ -16,6 +16,7 @@ import type { TextboxData, } from "@/db/schema"; import { + TEXTBOX_MAX_WIDTH_PCT, annotationBBox, scaleAnnotationData, translateAnnotationData, @@ -37,7 +38,8 @@ const MIN_BOX_PCT = 0.5; // bbox เล็กสุด (% ของหน้า) const EPS = 1e-6; type DragState = { - mode: "move" | "scale"; + // wleft/wright = TEXTBOX กว้างคงที่: ลากขอบซ้าย/ขวาปรับความกว้าง (ฟอนต์คงขนาด) + mode: "move" | "scale" | "wleft" | "wright"; /** ตำแหน่ง pointer ตอนเริ่มลาก (% ของหน้า) */ startPct: Point; /** data ก่อนเริ่มลาก — ต้นทางของการคำนวณทุก move (ไม่สะสมจาก preview) */ @@ -118,7 +120,7 @@ export default function AnnotationSelectionLayer({ function beginDrag( e: ReactPointerEvent, - mode: "move" | "scale", + mode: "move" | "scale" | "wleft" | "wright", anchorPct: Point, ) { if (!editable || e.button !== 0) return; @@ -155,6 +157,36 @@ export default function AnnotationSelectionLayer({ 100 - st.origBoxPct.y - st.origBoxPct.height, ); next = translateAnnotationData(st.origData, dx, dy); + } else if (st.mode === "wleft" || st.mode === "wright") { + // TEXTBOX กว้างคงที่ — ขอบที่จับขยับ อีกขอบตายตัว (position = มุมซ้ายบนเสมอ: + // ลากขอบซ้าย = เลื่อนกล่อง+เปลี่ยนกว้าง, ลากขอบขวา = เปลี่ยนกว้างอย่างเดียว) + // ฟอนต์คงขนาด ข้อความ wrap ใหม่ ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ + const d = st.origData; + if (!("fontSize" in d)) { + next = d; + } else { + const MIN_W = 2; // % ของหน้า — กล่องแคบสุดที่ยังใช้ได้จริง + const right = st.origBoxPct.x + st.origBoxPct.width; + let left = st.origBoxPct.x; + let w = st.origBoxPct.width; + if (st.mode === "wright") { + const r = clamp( + cur.x, + st.origBoxPct.x + MIN_W, + Math.min(100, st.origBoxPct.x + TEXTBOX_MAX_WIDTH_PCT), + ); + w = r - st.origBoxPct.x; + } else { + const l = clamp( + cur.x, + Math.max(0, right - TEXTBOX_MAX_WIDTH_PCT), + right - MIN_W, + ); + left = l; + w = right - l; + } + next = { ...d, width: w, position: { ...d.position, x: left } }; + } } else if ("scale" in st.origData) { // STAMP — สัดส่วนกว้าง:สูงตายตัว (สูง = STAMP_HEIGHT_RATIO × กว้าง) แยกสเกล // สองแกนไม่ได้ จึงใช้ตัวคูณ uniform เดียว: เฉลี่ยอัตราส่วนของ pointer สองแกน @@ -288,6 +320,9 @@ export default function AnnotationSelectionLayer({ const stampData = "label" in annotation.data ? annotation.data : null; const textboxData: TextboxData | null = "fontSize" in annotation.data ? annotation.data : null; + // TEXTBOX กว้างคงที่ (มี width) — ขอบซ้าย/ขวาเป็น handle ปรับความกว้างแทนการย้าย + // และซ่อนมุม (scale ไม่มีความหมายกับกล่องกว้างคงที่) — ย้ายกล่องใช้ขอบบน/ล่าง + const isFixedTextbox = textboxData?.width !== undefined; // มุมทั้ง 4 — ตำแหน่งวางเป็น px, anchor มุมตรงข้ามเป็น % ตรง ๆ จาก boxPct // (พิกัด % คำนวณผ่าน utils/coordinates เท่านั้น — invariant #2) @@ -393,7 +428,7 @@ export default function AnnotationSelectionLayer({ onPointerCancel={cancelDrag} />
beginDrag(e, "move", { x: 0, y: 0 })} + onPointerDown={(e) => + beginDrag(e, isFixedTextbox ? "wleft" : "move", { x: 0, y: 0 }) + } onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={cancelDrag} />
beginDrag(e, "move", { x: 0, y: 0 })} + onPointerDown={(e) => + beginDrag(e, isFixedTextbox ? "wright" : "move", { x: 0, y: 0 }) + } onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={cancelDrag} /> - {/* มุมทั้ง 4 — ลาก = scale รอบ anchor มุมตรงข้าม */} - {corners.map((c) => ( + {/* มุมทั้ง 4 — ลาก = scale รอบ anchor มุมตรงข้าม (TEXTBOX กว้างคงที่ไม่มีมุม — + ปรับความกว้างที่ขอบซ้าย/ขวาแทน ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ) */} + {!isFixedTextbox && corners.map((c) => (
commitTextboxPatch({ bold: !textboxData.bold })} > - + {/* B ทึบ — เหมือน dropdown ของ tool (ตัวควบคุมชุดเดียวกัน) */} + + B + diff --git a/components/pdf/PDFViewer.tsx b/components/pdf/PDFViewer.tsx index 263a7e4..a05a395 100644 --- a/components/pdf/PDFViewer.tsx +++ b/components/pdf/PDFViewer.tsx @@ -16,7 +16,6 @@ import { AlignLeft, AlignRight, ArrowRight, - Bold, BookmarkPlus, Brush, Check, @@ -106,7 +105,13 @@ import { type Size, } from "@/utils/coordinates"; import { getLocalUser, type LocalUser } from "@/utils/user"; -import { annotationBBox, hitTestPath, hitTestShape } from "@/utils/geometry"; +import { + TEXTBOX_DEFAULT_WIDTH_PCT, + annotationBBox, + hitTestPath, + hitTestShape, + textboxMaxWidthPct, +} from "@/utils/geometry"; import InkLayer, { type InkRedaction, type InkShape, type InkStroke } from "./InkLayer"; import TextboxStampLayer, { type InkStamp, type InkTextbox } from "./TextboxStampLayer"; import AnnotationSelectionLayer from "./AnnotationSelectionLayer"; @@ -573,6 +578,8 @@ function PdfPage({ bold: boolean; opacity: number; align: "left" | "center" | "right"; + /** ความกว้างกล่อง default (สไตล์ Smallpdf — คลิกเดียวได้กล่อง ลากขอบขยายทีหลัง) */ + widthPct: number; }; /** live preview มาร์กระหว่างลากคลุมด้วย tool highlight (null = ไม่มี) */ liveMark: { pageIndex: number; rects: Rect[] } | null; @@ -874,6 +881,7 @@ function PdfPage({ bold: textboxStyle.bold, opacity: textboxStyle.opacity, align: textboxStyle.align, + widthPct: textboxStyle.widthPct, } : null } @@ -2112,6 +2120,15 @@ export default function PDFViewer({ pageEl: HTMLElement, ) { if (bookmarkComposer) setBookmarkComposer(null); // คลิกหน้า = ปิด popup bookmark (N2) + // คลิกลงหน้า = เลิกเลือก annotation ก่อนทุก tool — แผงเครื่องมือของกรอบ selection + // ต้องปิดเมื่อคลิกไปสร้างรายการใหม่ (comment/textbox/stamp เดิม return ก่อนถึง + // logic เลิกเลือกท้ายฟังก์ชัน แผงจึงค้างเปิด) — คลิกบนตัว annotation เองถูก + // stopPropagation ที่ layer ของมันแล้ว ส่วน tool select/highlight ตั้ง selectedId + // ตาม hit-test ทีหลังจุดนี้เหมือนเดิม พฤติกรรมจึงเท่าเดิม + if (selectedId !== null) { + setSelectedId(null); + setPreviewData(null); + } if (tool === "comment" && user) { const position = getPointerPercent(e, pageEl); setComposer({ pageIndex, position, x: e.clientX, y: e.clientY }); @@ -2150,11 +2167,6 @@ export default function PDFViewer({ } } } - // คลิกพื้นที่ว่างของหน้า (tool select/draw) → เลิกเลือก annotation - if (selectedId !== null) { - setSelectedId(null); - setPreviewData(null); - } } async function handleComposerSave() { @@ -2253,6 +2265,9 @@ export default function PDFViewer({ ...(textboxBold ? { bold: true } : {}), opacity: textboxOpacityPct / 100, align: textboxAlign, + // กล่องกว้างคงที่ (สไตล์ Smallpdf) — บีบด้วยพื้นที่จริงถึงขอบขวาตอนสร้าง + // ให้ตรงกับที่ editor แสดง (maxWidth ของ CSS clamp ให้อยู่แล้วระหว่างพิมพ์) + width: Math.min(TEXTBOX_DEFAULT_WIDTH_PCT, textboxMaxWidthPct(c.position.x)), ...(hasBold ? { segments } : {}), }); } @@ -2299,6 +2314,7 @@ export default function PDFViewer({ bold: textboxBold, opacity: textboxOpacityPct / 100, align: textboxAlign, + widthPct: TEXTBOX_DEFAULT_WIDTH_PCT, }; // ความกว้างหน้าแรกที่ scale 1 (≈ pt ของ PDF) — ใช้แปลงหน่วย fontSize ระหว่าง % (ที่เก็บใน DB) // กับ px ที่แสดงใน UI (fallback 595 = ความกว้าง A4 ก่อนเอกสารโหลด) @@ -2801,7 +2817,10 @@ export default function PDFViewer({ }`} onClick={() => setTextboxBold((o) => !o)} > - + {/* B ทึบ — แทน icon Bold แบบเส้นขอบ (lucide ไม่มีรูปทึบ) */} + + B + diff --git a/components/pdf/TextboxStampLayer.tsx b/components/pdf/TextboxStampLayer.tsx index c118433..4634326 100644 --- a/components/pdf/TextboxStampLayer.tsx +++ b/components/pdf/TextboxStampLayer.tsx @@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef } from "react"; import type { StampData, TextboxData, TextboxSegment } from "@/db/schema"; import { toPx, type Point, type Size } from "@/utils/coordinates"; -import { STAMP_HEIGHT_RATIO, TEXTBOX_MAX_WIDTH_PCT } from "@/utils/geometry"; +import { STAMP_HEIGHT_RATIO, textboxMaxWidthPct } from "@/utils/geometry"; import { STAMP_COLOR, stampFitFontSize } from "@/utils/annotation-display"; // TEXTBOX + STAMP overlay (F17/B2, F18/B5) — HTML overlay (z-4 กลุ่มเดียวกับ comment pins) @@ -83,6 +83,7 @@ function TextboxEditor({ bold, opacity, align, + widthPct, enabled, initialText, initialSegments, @@ -97,6 +98,8 @@ function TextboxEditor({ bold?: boolean; opacity?: number; align?: "left" | "center" | "right"; + /** ความกว้างกล่องคงที่ % (กล่องใหม่/กล่องที่มี width) — ไม่มี = shrink-to-fit (แถวเดิม) */ + widthPct?: number; /** container ของ layer เป็น pointer-events:none — editor ต้องเปิด auto เองเมื่อใช้งานได้ */ enabled: boolean; initialText: string; @@ -140,9 +143,11 @@ function TextboxEditor({ style={{ left: toPx(position.x, size.width), top: toPx(position.y, size.height), - // กล่องพอดีข้อความ (shrink-to-fit ของ absolute) — เริ่มเล็กตอนกดคลิกครั้งแรก - // แล้วขยายตามที่พิมพ์ ตัดบรรทัดเมื่อยาวเกิน 50% ของความกว้างหน้าเหมือนที่ render จริง - maxWidth: `${TEXTBOX_MAX_WIDTH_PCT}%`, + // มี widthPct = กล่องกว้างคงที่ (สไตล์ Smallpdf — ข้อความ wrap ในกล่อง) + // ไม่มี = shrink-to-fit หุ้มข้อความขยายตามที่พิมพ์ (แถวเดิม) + // maxWidth บีบตามพื้นที่จริงถึงขอบขวา (ไม่ล้นกระดาษ) + ...(widthPct !== undefined ? { width: `${widthPct}%` } : null), + maxWidth: `${textboxMaxWidthPct(position.x)}%`, minWidth: "1em", opacity: opacity ?? 1, pointerEvents: enabled ? "auto" : "none", @@ -230,6 +235,8 @@ export default function TextboxStampLayer({ bold?: boolean; opacity?: number; align?: "left" | "center" | "right"; + /** ความกว้างกล่อง default % (กล่องใหม่เป็นกล่องกว้างคงที่เสมอ) */ + widthPct?: number; } | null; onCommitComposer: (text: string, segments?: TextboxSegment[]) => void; onCancelComposer: () => void; @@ -249,6 +256,7 @@ export default function TextboxStampLayer({ bold={t.data.bold} opacity={t.data.opacity} align={t.data.align} + widthPct={t.data.width} enabled={enabled} initialText={t.data.text} initialSegments={t.data.segments} @@ -263,7 +271,10 @@ export default function TextboxStampLayer({ style={{ left: toPx(t.data.position.x, size.width), top: toPx(t.data.position.y, size.height), - maxWidth: `${TEXTBOX_MAX_WIDTH_PCT}%`, + // กล่อง width คงที่ (ถ้ามี) กว้างตามที่กำหนด — align จัดข้อความ*ใน*กล่องอย่างเดียว + // (แบบ Smallpdf กล่องไม่ขยับ) · maxWidth บีบตามพื้นที่ถึงขอบขวาเหมือนเดิม + ...(t.data.width !== undefined ? { width: `${t.data.width}%` } : null), + maxWidth: `${textboxMaxWidthPct(t.data.position.x)}%`, fontSize: toPx(t.data.fontSize, size.width), lineHeight: 1.5, color: t.data.color, @@ -302,6 +313,7 @@ export default function TextboxStampLayer({ bold={composer.bold} opacity={composer.opacity} align={composer.align} + widthPct={composer.widthPct} enabled={enabled} initialText="" onSave={onCommitComposer} diff --git a/db/schema.ts b/db/schema.ts index 3e9fed7..89245b0 100644 --- a/db/schema.ts +++ b/db/schema.ts @@ -96,11 +96,14 @@ export type TextboxData = { bold?: boolean; /** ความทึบ 0–1 (optional) — กล่องที่สร้างหลังมีตัวปรับเก็บชัดเสมอ แถวเดิม = 1 */ opacity?: number; - /** จัดแนวในกล่อง (optional) — ไม่มี = left */ + /** จัดแนวข้อความในกล่อง (optional) — ไม่มี = left · กล่องไม่ขยับ ขยับแค่ข้อความข้างใน (แบบ Smallpdf) */ align?: "left" | "center" | "right"; /** ข้อความแบ่งช่วงตัวหนา/ปกติ (optional) — มีเฉพาะเมื่อมีบางส่วนเป็นตัวหนา; * field `text` ยังเก็บข้อความรวม (concat) เสมอเพื่อค้นหา F14/preview sidebar */ segments?: TextboxSegment[]; + /** ความกว้างกล่องคงที่ % ของความกว้างหน้า (optional — สไตล์ Smallpdf/Acrobat: ลากขอบ + * ปรับความกว้าง ข้อความ wrap ตาม) — ไม่มี = กล่อง shrink-to-fit หุ้มข้อความ (แถวเดิม) */ + width?: number; /** โน้ตคำอธิบายของรายการนี้ (optional) */ note?: string; }; diff --git a/docs/PLAN-FEAT.md b/docs/PLAN-FEAT.md index 6455c07..cfbe34d 100644 --- a/docs/PLAN-FEAT.md +++ b/docs/PLAN-FEAT.md @@ -48,6 +48,7 @@ type StampData = { label: string; position: Point; scale: number }; - `strokeWidth` ของ SHAPE เป็น % ของความกว้างหน้าเหมือน DRAW; ทุกพิกัด (rect/from/to/position) เป็น % ของขนาดหน้า (invariant #2) - E1 (F7) เพิ่ม field **optional** `widths?: number[]` ใน `DrawData` (ความหนาต่อจุด, % ของ width — ไว้รองรับ pressure) +- F17 (B2) ภายหลังเพิ่ม `bold?/opacity?/align?/segments?/width?` ใน `TextboxData` — `position` เป็น**มุมซ้ายบนของกล่องเสมอ** (`align` จัดข้อความ*ใน*กล่องอย่างเดียวแบบ Smallpdf กล่องไม่ขยับ): กล่องกว้างคงที่เมื่อมี `width` (คลิกเดียวได้กล่อง default 30% ลากขอบซ้าย/ขวาปรับความกว้าง ข้อความ wrap ตาม ฟอนต์คงขนาด) ไม่มี `width` = shrink-to-fit หุ้มข้อความ (แถวเดิม) — ความกว้างสูงสุดคำนวณด้วย `textboxMaxWidthPct` (cap 50% ของหน้าและบีบตามพื้นที่จริงถึงขอบขวา — กันข้อความล้นกระดาษ) ใช้สูตรเดียวกันทั้ง render จอ / bbox กรอบ selection / export PDF ### Column เพิ่มในตาราง `annotations` (F10) diff --git a/tests/utils/geometry.test.ts b/tests/utils/geometry.test.ts index 74416fd..bb2b6f9 100644 --- a/tests/utils/geometry.test.ts +++ b/tests/utils/geometry.test.ts @@ -6,6 +6,7 @@ import { hitTestPath, hitTestShape, scaleAnnotationData, + textboxMaxWidthPct, translateAnnotationData, } from "@/utils/geometry"; @@ -132,6 +133,100 @@ describe("annotationBBox", () => { expect(bbox.height).toBeCloseTo(6); // 2 บรรทัด × 3 }); + it("TEXTBOX: กล่องใกล้ขอบขวา → bbox ถูก clamp ไม่ยื่นเกินขอบหน้า (เหมือนที่ render บีบ)", () => { + const bbox = annotationBBox( + { + type: "TEXTBOX", + data: { position: { x: 95, y: 50 }, text: "x".repeat(60), color: "#000", fontSize: 2 }, + }, + S, + ); + expect(bbox.x).toBe(95); + expect(bbox.width).toBe(5); // ค่าประมาณกว้าง 50 แต่เหลือพื้นที่แค่ 100 − 95 → clamp ที่ 5 + }); + + it("TEXTBOX: align ไม่ขยับกล่อง — position เป็นมุมซ้ายบนเสมอ (ขยับแค่ข้อความข้างใน)", () => { + for (const align of ["left", "center", "right"] as const) { + const bbox = annotationBBox( + { + type: "TEXTBOX", + data: { + position: { x: 30, y: 20 }, + text: "x".repeat(60), + color: "#000", + fontSize: 2, + align, + }, + }, + S, + ); + expect(bbox.x).toBe(30); // ขอบซ้ายกล่อง = position.x ทุก align + expect(bbox.width).toBe(50); // cap เดิม min(50, 100−30=70) + } + }); + + it("textboxMaxWidthPct: ความกว้างสูงสุด = พื้นที่จริงถึงขอบขวา (cap 50%)", () => { + expect(textboxMaxWidthPct(30)).toBe(50); // กลางหน้า → เต็ม cap + expect(textboxMaxWidthPct(95)).toBe(5); // ใกล้ขอบขวา → เหลือพื้นที่จริง + expect(textboxMaxWidthPct(100)).toBe(1); // ติดขอบเป๊ะ → ขั้นต่ำ 1% + }); + + it("TEXTBOX: กล่อง width คงที่ — กว้างตามที่กำหนดแม้ข้อความสั้น (สไตล์ Smallpdf)", () => { + const bbox = annotationBBox( + { + type: "TEXTBOX", + data: { + position: { x: 20, y: 20 }, + text: "x".repeat(10), // กว้างแค่ 12 < 30 → กล่องยังกว้าง 30 + color: "#000", + fontSize: 2, + width: 30, + }, + }, + S, + ); + expect(bbox.x).toBe(20); + expect(bbox.width).toBe(30); + expect(bbox.height).toBeCloseTo(3); // ยัง 1 บรรทัด + }); + + it("TEXTBOX: width ใหญ่กว่าพื้นที่ถึงขอบขวา → บีบเหลือพื้นที่จริง", () => { + const bbox = annotationBBox( + { + type: "TEXTBOX", + data: { + position: { x: 80, y: 20 }, + text: "x".repeat(10), + color: "#000", + fontSize: 2, + width: 40, + }, + }, + S, + ); + expect(bbox.x).toBe(80); + expect(bbox.width).toBe(20); // min(40, 100−80) + }); + + it("TEXTBOX: width คงที่ + align ใดก็ตาม → กล่องอยู่ที่มุมซ้ายบนเสมอ", () => { + const bbox = annotationBBox( + { + type: "TEXTBOX", + data: { + position: { x: 50, y: 20 }, + text: "x".repeat(10), + color: "#000", + fontSize: 2, + align: "right", + width: 30, + }, + }, + S, + ); + expect(bbox.x).toBe(50); + expect(bbox.width).toBe(30); + }); + it("TEXTBOX: ข้อความว่าง → กว้าง fallback เท่าตัวอักษรเดียว สูง 1 บรรทัด", () => { const bbox = annotationBBox( { diff --git a/utils/geometry.ts b/utils/geometry.ts index 56db47a..23129c0 100644 --- a/utils/geometry.ts +++ b/utils/geometry.ts @@ -20,9 +20,18 @@ export const COMMENT_PIN_BOX_PCT = 4; // render จริงกว้างสุด 50% ของหน้าแล้ว wrap อัตโนมัติ — bbox ประมาณจากตัวอักษร // กว้าง ~0.6 × fontSize ต่อตัว บรรทัดสูง 1.5 × fontSize (ค่าประมาณพอสำหรับกรอบ selection) export const TEXTBOX_MAX_WIDTH_PCT = 50; +export const TEXTBOX_DEFAULT_WIDTH_PCT = 30; // กล่องที่สร้างใหม่ (คลิกเดียว) กว้างเท่านี้ก่อนลากขยาย export const TEXTBOX_CHAR_W = 0.6; export const TEXTBOX_LINE_H = 1.5; +/** ความกว้างสูงสุดของกล่องข้อความ (% ของความกว้างหน้า) จากขอบซ้าย (position.x = มุมซ้ายบน + * เสมอ — align จัดข้อความ*ใน*กล่องอย่างเดียวแบบ Smallpdf กล่องไม่ขยับ) — บีบให้กล่อง + * ไม่ล้นขอบขวาของหน้ากระดาษ ใช้ร่วมกันทั้ง render จอ, bbox กรอบ selection และ export PDF + * ติดขอบขวาเป๊ะ (x=100) เหลือกว้างขั้นต่ำ 1% กันกล่องพังเป็นศูนย์ */ +export function textboxMaxWidthPct(leftX: number): number { + return Math.min(TEXTBOX_MAX_WIDTH_PCT, Math.max(100 - clamp(leftX, 0, 100), 1)); +} + // STAMP (F18/B5 — §5): กรอบตรายางกว้าง = scale% ของความกว้างหน้า สูง = 0.4 เท่าของความกว้าง // (สูตรเดียวกันทั้ง render บนจอ, bbox ของ selection และการวาดใน export) export const STAMP_HEIGHT_RATIO = 0.4; @@ -81,24 +90,25 @@ export function annotationBBox(a: AnnotationLike, size: Size): Rect { return rectToPx(d.rect, size); } if ("fontSize" in d) { - // TEXTBOX — ประมาณจากข้อความ (position เป็นมุมซ้ายบนของกล่อง) + // TEXTBOX — position เป็นมุมซ้ายบนของกล่องเสมอ (align จัดข้อความในกล่องอย่างเดียว); + // กล่องมี width คงที่ (ถ้ามี — สไตล์ Smallpdf) ไม่มี = shrink-to-fit ประมาณจากตัวอักษร const fontSizePx = toPx(d.fontSize, size.width); const charW = fontSizePx * TEXTBOX_CHAR_W; const lineH = fontSizePx * TEXTBOX_LINE_H; - const maxW = toPx(TEXTBOX_MAX_WIDTH_PCT, size.width); + // ความกว้างสูงสุดถึงขอบขวาหน้า — กล่อง width คงที่ก็ถูกบีบด้วยค่านี้เหมือน render + const capPct = textboxMaxWidthPct(d.position.x); + const wrapPx = toPx(Math.min(d.width ?? capPct, capPct), size.width); + const wrapW = Math.max(wrapPx, charW); // กันหารศูนย์เมื่อกล่องติดขอบขวาเป๊ะ let widest = 0; let lines = 0; for (const raw of d.text.split(/\r?\n/)) { widest = Math.max(widest, raw.length * charW); - lines += Math.max(1, Math.ceil((raw.length * charW) / maxW)); + lines += Math.max(1, Math.ceil((raw.length * charW) / wrapW)); } + // กล่อง width คงที่กว้างตามที่กำหนด (บีบด้วย cap) — แถวเดิม shrink-to-fit ตามบรรทัดยาวสุด + const width = (d.width !== undefined ? wrapPx : Math.min(widest, wrapPx)) || charW; const p = pointToPx(d.position, size); - return { - x: p.x, - y: p.y, - width: Math.min(widest, maxW) || charW, - height: Math.max(lines, 1) * lineH, - }; + return { x: p.x, y: p.y, width, height: Math.max(lines, 1) * lineH }; } if ("scale" in d) { // STAMP — กรอบจริงตามสูตร render (position เป็นมุมซ้ายบน)