stamp-editor: ตรายางพิมพ์เอง+จัดบรรทัดแบบถอยหลัง+มุมเอียง, editor กล่องข้อความ contentEditable + แก้ตาม code review 2026-09-29 ครบ 5 ข้อ — (1) STAMP คำพิมพ์เอง (D7): dropdown ของ tool stamp เป็น 2 หน้า — preset + แถว "กำหนดเอง…" (stampCustomMode reset ทุกครั้งที่เปิดเมนู) เปิด popup แก้ข้อความ/สี/ขนาด พร้อม preview ตรายาง live ตามสัดส่วนจริง (ความกว้างหน้าแรก × scale%) ใช้สูตร/ฟอนต์/measure ตัวเดียวกับ render จริง, คำพิมพ์ live ไป stampPreset เดียวกับ preset, Enter/ปุ่ม "ใช้ตรายางนี้" = ปิดเมนูแบบเลือกค่าจบ, ปุ่ม tool แสดง "กำหนดเอง" แทนคำเต็ม + แก้คำตรายางที่วางแล้วผ่านปุ่ม "แก้ไขข้อความ" ในแผง selection (StampEditor textarea ใน TextboxStampLayer ใช้ editingId/commitEdit ร่วมกับ TEXTBOX, จำกัด STAMP_MAX_LABEL_CHARS=50 ที่ UI — validator ยังยอม MAX_TEXT_CHARS ตามเจตนา) (2) จัดบรรทัดแบบถอยหลัง (คำขอผู้ใช้รอบสอง): สูตรย้ายรวมที่ utils/geometry.ts — stampLayout: คำสั้น 1 บรรทัดฟอนต์เต็ม, คำยาวพอดี ๆ ย่อฟอนต์ให้อยู่บรรทัดเดียวก่อน (stampFitFontSize เชิงเส้น) จนถึง floor 10% ของความกว้างกรอบ ("ตรวจสอบแล้ว" ย่อ ~25% = บรรทัดเดียว), ยาวเกิน floor กลับไปฟอนต์ใหญ่แล้ว wrapStampLabel ≤3 บรรทัด (×0.92/รอบ เกินบรรทัดยอมแลกกับฟอนต์อ่านออก), stampBoxHeight ให้ 1 บรรทัด = 0.4w เป๊ะเหมือนเดิม — ทุกมิติเป็นสัดส่วนของ w จำนวนบรรทัดจึงไม่ขึ้นกับ scale — constants + ฟังก์ชัน re-export จาก utils/annotation-display.ts ให้ import เดิมทุกจุด + measureStampText (canvas bold system-ui คืน 0 ตอน SSR) เป็น measure ของ render/preview/hit-test/eraser ทั้งฝั่ง client (annotationBBox รับ optional measure — ให้ความสูงกรอบตรง render จริง แก้ขอบล่างกรอบเกินตรายาง) ส่วนฝั่ง server (validator/export sticky note/describeAnnotationChange) ใช้ stampLayoutEstimate ความกว้างต่ออักษร 0.58 (3) มุมเอียง StampData.rotation? (−180..180 หมุนรอบกลางกรอบ): ช่อง "มุมเอียง" ในแผง selection (patch stampRotation, 0° = ถอด field) + จุดจับหมุนวงกลมเหนือขอบบน (mode rotate — atan2 delta รอบกลางกรอบ + snap ทวีคูณ 15° ≤4°), กรอบ selection+handles หมุนด้วย CSS transform ที่ origin เป็นพิกัดใน element ผ่าน rotOn() (ใส่พิกัด page แล้ว div แต่ละตัวหมุนคนละจุดจนกรอบไม่ตรงตัวตรายาง — bug 2026-09-28), annotationBBox คืน AABB ของกรอบหมุน (stampRect/rotatedRectAABB/rotatePoint — anchor handle scale เป็นมุมหลังหมุนบนจอ และ k คำนวณใน frame ของกรอบ), clampStampIntoPage เลื่อน position กลับเข้าหน้าตอนตั้งมุม (validator ตรวจ AABB ไม่ติดลบ ไม่ใช่ position ตรง ๆ — position มุมก่อนหมุนติดลบได้เมื่อกรอบจริงยังในหน้า), StampEditor แสดงตรง 0° พิมพ์ง่าย ปิดแล้วกลับไปเอียงค่าเดิม, export ใช้ pdf-lib rotate: degrees(−θ) + เลื่อน anchor ไปมุมล่างซ้ายหลังหมุน (pdf-lib หมุนรอบ anchor ไม่ใช่ center) + per-line baseline หมุนรอบกลางกรอบตรง CSS rotate ทุกองศา (4) TextboxEditor เป็น contentEditable WYSIWYG แทน textarea (ตัวหนาเฉพาะส่วน Ctrl/Cmd+B + Enter = insertLineBreak ไม่แตก div, paste เป็น plain text): utils/textbox-editor.ts ใหม่ — segmentsToHtml (escape & < > ก่อนใส่ dangerouslySetInnerHTML + <b> + <br>) และ serializeEditor (DOM → text รวม + segments แยกตัวหนา: ขึ้นบรรทัดจากทั้ง <br> และ <div>/<p> ที่ browser สร้าง — push \n ก่อนเข้า block ไม่ใช่หลังจบ block ไม่งั้น "abc<div>def</div>" ของ Chrome กลายเป็น "abcdef", dedupe <br>+block ติดกัน, trimEnd ตัดจาก segments ให้ตรง text กัน <br> ปิดท้ายของ browser ทิ้ง \n ค้างใน DB) — แยกเป็น pure DOM util ให้ unit test กับ jsdom ได้ (tests/utils/textbox-editor.test.ts ใหม่ 16 เคส ตาม pattern useCustomSelection-dom) (5) คิว update ต่อ id ใน PDFViewer (updateChainRef + pendingDataBaseRef): update ทุกตัวของ id เดียวกันเข้าคิวเดียวกัน base คำนวณตอนถึงตาคิวจาก data ล่าสุดที่คิวก่อนหน้าบันทึกไว้ — จอสัมผัส blur-commit ข้อความแล้วแตะสี/ขนาดต่อทันที คอมมิต full object จาก base เก่าจะทับค่าที่เพิ่งเปลี่ยน (code review 2026-09-28 รอบสอง) — ตัวควบคุมเล็กของแผง/editor commit เป็น AnnotationPatch ผสานผ่าน applyAnnotationPatch (color/strokeWidth/highlightStyle/highlightOpacity/stampScale/stampRotation/textbox/textboxText/label) (6) describeAnnotationChange: STAMP แสดง "มุมเอียง" และข้าม geometry เมื่อ label/มุมเปลี่ยน (geometry ต่างเป็นผลพลองของการจัดวาง แบบเดียวกับ TEXTBOX ที่ข้ามปรับขนาดเมื่อข้อความเปลี่ยน) (7) แก้ตาม code review 2026-09-29 ครบ: (a) patch stampScale/label ของตรายางเอียงเรียก clampStampIntoPage เหมือน stampRotation — เดิมขยาย/แก้ข้อความที่ชิดขอบแล้ว AABB ยื่นติดลบ update โดน validator ปฏิเสธเด้งกลับทั้งที่บนจอกรอบยังอยู่ในหน้า (b) validator STAMP ผ่อน tolerance ให้ AABB ติดลบได้ ≤2% ของหน้า กลืนความคลาด measure จริงของ browser กับ stampLayoutEstimate ฝั่ง server (ฟอนต์ต่อเครื่องทำให้จำนวนบรรทัด/AABB คลาด — ค่าที่บนจอพอดีเป๊ะต้องไม่ถูกปฏิเสธ) (c) applyUpdate: applyAnnotation เข้า try เดียวกับ action ให้ resolve() ใน finally ครอบทั้ง callback — เดิม dispatcher โยน sync แล้ว promise ไม่ settle ตลอดกาลจนคิวของ id นั้นตายถาวร + enqueueUpdate เปลี่ยน then(cleanup, cleanup) กัน unhandled rejection (d) catch ของ applyUpdate ล้าง pendingDataBaseRef — เดิม action กลางคิวล้มแล้ว update ถัดไปผสาน base ที่ไม่เคยติด DB จน commit การเปลี่ยนที่ล้มไปด้วย และ undo กู้สถานะที่ไม่มีอยู่จริง (e) ถอด as StampData cast 2 จุดใน AnnotationSelectionLayer — ย้าย stampData ที่ narrow ด้วย "label" in ขึ้นใช้แทนให้ type guard ทำงาน (f) export sticky note ของ STAMP ส่ง measure เดียวกับตอนวาดกรอบ (thaiFont.widthOfTextAtSize) ให้มุมเกาะตรงกรอบจริงไม่ใช่ estimate (8) InkLayer eraser ของ stamp ส่ง measureStampText ให้ bbox ตรง render จริง (9) docs sync ครบ: PLAN-FEAT.md D7/F18 + CLAUDE.md + rules/coordinates.md (patch เปลี่ยนขนาดกรอบเอียงต้อง clamp + tolerance validator 2%) + rules/pdf-viewer.md — ผ่าน code review (ไม่มี bug ระดับต้องแก้) + tsc + vitest 193/193 (คำขอผู้ใช้ 2026-09-28/29)

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-29 09:56:00 +07:00 · 2026-09-29 09:56:00 +07:00 · 651e354cad
commit 651e354cad
parent 45e60330b8
17 changed files with 1699 additions and 332 deletions
--- a/utils/annotation-display.ts
+++ b/utils/annotation-display.ts
@ -68,28 +68,40 @@ export const STAMP_PRESETS: readonly string[] = [
  "ตรวจสอบแล้ว",
  "สำคัญ",
 ];
+/** ความยาวคำตรายางสูงสุดที่ช่องกรอกของ UI ยอมรับ (preset + คำที่พิมพ์เอง) —
+ *  validator ของ action ยอมถึง MAX_TEXT_CHARS แต่ตรายางเป็นข้อความบรรทัดเดียวที่
+ *  stampFitFontSize ย่อให้พอดีกรอบเสมอ ยาวเกินระดับนี้ฟอนต์เล็กจนอ่านไม่ออก */
+export const STAMP_MAX_LABEL_CHARS = 50;
+/** ฟอนต์ตรายางบนจอ — ตั้งชัดทั้งตอนวัด (canvas measure) และตอน render เพื่อให้ความกว้าง
+ *  ที่ stampFitFontSize คำนวณตรงกับที่แสดงจริง (ตัวหนา 700 เหมือน class font-bold) —
+ *  ใช้ร่วมทั้ง render (TextboxStampLayer) และ preview ในเมนูของ tool (PDFViewer) */
+export const STAMP_FONT_STACK = "system-ui, sans-serif";
+// สูตรจัดวางข้อความตรายาง (constants + stampFitFontSize + wrap/layout หลายบรรทัด)
+// ย้ายไป utils/geometry.ts แล้ว (ใช้ร่วมกับ annotationBBox) — re-export ให้ import
+// เดิมที่อ้างจากไฟล์นี้ไม่ต้องแก้
+export {
+  STAMP_FONT_RATIO,
+  STAMP_TEXT_WIDTH_RATIO,
+  stampFitFontSize,
+  stampLayout,
+  stampBoxHeight,
+  wrapStampLabel,
+} from "@/utils/geometry";
 /** ความกว้างกรอบตรายางเริ่มต้น (% ของความกว้างหน้า) */
 export const STAMP_DEFAULT_SCALE_PCT = 18;
 /** สีตรายาง (ขอบ + ตัวอักษร) — ใช้ทั้ง render บนจอและ export */
 export const STAMP_COLOR = "#b91c1c";
-/** ขนาดตัวอักษรในตรายาง = สัดส่วนของความกว้างกรอบ (ค่าสูงสุด — ย่อลงเมื่อข้อความยาวเกินกรอบ) */
-export const STAMP_FONT_RATIO = 0.22;
-/** ความกว้างข้อความสูงสุดที่ยอมให้ = สัดส่วนของกรอบ (เว้นระยะจากขอบใน) */
-export const STAMP_TEXT_WIDTH_RATIO = 0.9;

-/** ขนาดตัวอักษรตรายางที่ label อยู่บรรทัดเดียว — เริ่มที่ STAMP_FONT_RATIO แล้วย่อตาม
- *  สัดส่วนที่ข้อความล้น (measure ผูกกับเชิงเส้นกับขนาดฟอนต์ วัดครั้งเดียวพอ) — measure เป็น
- *  ความกว้างจริงของฝั่งนั้น ๆ: จอ = canvas measureText, export = font.widthOfTextAtSize
- *  (หากไม่ย่อ label ยาวอย่าง "ตรวจสอบแล้ว" จะ wrap 2 บรรทัดและล้นความสูงกรอบถูกตัดหาย) */
-export function stampFitFontSize(
-  label: string,
-  boxWidth: number,
-  measure: (text: string, fontSize: number) => number,
-): number {
-  const base = boxWidth * STAMP_FONT_RATIO;
-  const textW = measure(label, base);
-  const maxW = boxWidth * STAMP_TEXT_WIDTH_RATIO;
-  return textW <= maxW ? base : (base * maxW) / textW;
+let stampMeasureCtx: CanvasRenderingContext2D | null = null;
+
+/** วัดความกว้างข้อความตรายางด้วย canvas บนจอ (measure ของ stampFitFontSize เมื่อ render/
+ *  preview บนหน้าเว็บ) — ไม่มี document (SSR) คืน 0 ให้ใช้ขนาด base ตรง ๆ */
+export function measureStampText(text: string, fontSize: number): number {
+  if (typeof document === "undefined") return 0;
+  stampMeasureCtx ??= document.createElement("canvas").getContext("2d");
+  if (!stampMeasureCtx) return 0;
+  stampMeasureCtx.font = `bold ${fontSize}px ${STAMP_FONT_STACK}`;
+  return stampMeasureCtx.measureText(text).width;
 }

 // คลาสอักขระขยะที่ปนมากับข้อความสกัดจาก textLayer ของ PDF ไทยบางไฟล์ (สร้างแบบ
@ -378,8 +390,9 @@ export function describeAnnotationChange(
      if (!textChanged || g === "ย้ายตำแหน่ง") changes.push(g);
    }
  } else if ("scale" in prev && "scale" in next) {
-    // STAMP — ข้อความ/สี (fallback STAMP_COLOR)/ขนาด + ย้าย/ขยาย
-    if (prev.label !== next.label) {
+    // STAMP — ข้อความ/สี (fallback STAMP_COLOR)/ขนาด/มุมเอียง + ย้าย/ขยาย
+    const labelChanged = prev.label !== next.label;
+    if (labelChanged) {
      changes.push(
        `ข้อความตรายาง: "${shortChangeText(prev.label)}" → "${shortChangeText(next.label)}"`,
      );
@ -390,7 +403,17 @@ export function describeAnnotationChange(
    if (prev.scale !== next.scale) {
      changes.push(`ขนาด: ${numLabel(prev.scale)}% → ${numLabel(next.scale)}%`);
    }
-    changes.push(...geometryChangeLabels(type, prev, next));
+    const pr = prev.rotation ?? 0;
+    const nr = next.rotation ?? 0;
+    if (pr !== nr) changes.push(`มุมเอียง: ${pr}° → ${nr}°`);
+    // ตำแหน่ง/ขนาด — เมื่อข้อความหรือมุมเอียงเปลี่ยน geometry ที่ต่างเป็นผลพลองของ
+    // การจัดวางทั้งหมด (label ยาว → กรอบสูงตามจำนวนบรรทัด, หมุน → AABB ขยายสมมาตร
+    // รอบ center ทั้งตำแหน่ง+ขนาด ขณะที่กรอบจริงอยู่ที่เดิม) จึงไม่แสดง geometry เลย
+    // — ส่วนขยาย/ย้ายจริงเป็น action แยกที่เทียบโดยไม่มี label/มุมเปลี่ยน (แบบ
+    // TEXTBOX ที่ข้าม "ปรับขนาด" เมื่อข้อความเปลี่ยน — code review 2026-09-28)
+    if (!labelChanged && pr === nr) {
+      changes.push(...geometryChangeLabels(type, prev, next));
+    }
  }
  return changes;
 }
--- a/utils/geometry.ts
+++ b/utils/geometry.ts
@ -1,4 +1,4 @@
-import type { AnnotationData, AnnotationType, ShapeData } from "@/db/schema";
+import type { AnnotationData, AnnotationType, ShapeData, StampData } from "@/db/schema";
 import {
  clamp,
  pointToPx,
@ -60,9 +60,182 @@ 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)
+// STAMP (F18/B5 — §5): กรอบตรายางกว้าง = scale% ของความกว้างหน้า — สูตรจัดวางข้อความทั้งชุด
+// (บรรทัด/ฟอนต์/ความสูงกรอบ) อยู่ที่นี่ใช้ร่วมทั้ง render บนจอ, preview ในเมนู, bbox ของ
+// selection และการวาดใน export — utils/annotation-display.ts re-export ตัวที่เดิมอยู่ที่นั่น
+/** ความสูงกรอบตรายางขั้นต่ำ (คำสั้น 1 บรรทัดคงสัดส่วนหน้าตาเดิม) — สัดส่วนของความกว้างกรอบ */
 export const STAMP_HEIGHT_RATIO = 0.4;
+/** ขนาดตัวอักษรในตรายาง = สัดส่วนของความกว้างกรอบ (ค่าสูงสุด — ย่อลงเมื่อข้อความยาว) */
+export const STAMP_FONT_RATIO = 0.22;
+/** ความกว้างข้อความสูงสุดที่ยอมให้ต่อบรรทัด = สัดส่วนของกรอบ (เว้นระยะจากขอบใน) */
+export const STAMP_TEXT_WIDTH_RATIO = 0.9;
+/** จำนวนบรรทัดสูงสุดของข้อความตรายาง (2026-09-28) — เกินกว่านี้ย่อฟอนต์ต่อจนเข้าเกณฑ์ */
+export const STAMP_MAX_LINES = 3;
+/** เพดานล่างของฟอนต์ (สัดส่วนของความกว้างกรอบ) — ต่ำกว่านี้อ่านไม่ออก ยอมให้บรรทัดเกินแทน */
+export const STAMP_FONT_FLOOR_RATIO = 0.1;
+/** ความกว้างเฉลี่ยต่ออักษร (สัดส่วนของฟอนต์) — measure ประมาณเมื่อไม่มี measure จริง (bbox) */
+const STAMP_CHAR_W = 0.58;
+
+/** ขนาดตัวอักษรตรายางที่ label อยู่บรรทัดเดียว — เริ่มที่ STAMP_FONT_RATIO แล้วย่อตาม
+ *  สัดส่วนที่ข้อความล้น (measure ผูกกับเชิงเส้นกับขนาดฟอนต์ วัดครั้งเดียวพอ) — measure เป็น
+ *  ความกว้างจริงของฝั่งนั้น ๆ: จอ = canvas measureText, export = font.widthOfTextAtSize */
+export function stampFitFontSize(
+  label: string,
+  boxWidth: number,
+  measure: (text: string, fontSize: number) => number,
+): number {
+  const base = boxWidth * STAMP_FONT_RATIO;
+  const textW = measure(label, base);
+  const maxW = boxWidth * STAMP_TEXT_WIDTH_RATIO;
+  return textW <= maxW ? base : (base * maxW) / textW;
+}
+
+/** ผลการจัดวางข้อความตรายางในกรอบ — บรรทัดที่ตัดแล้ว + ขนาดฟอนต์ + lineHeight */
+export type StampLayout = { lines: string[]; fontSize: number; lineHeight: number };
+
+/** ตัด label เป็นบรรทัด ๆ กว้างไม่เกิน maxWidth — เว้นคำที่ช่องว่าง ส่วนคำเดี่ยวยาวเกิน
+ *  (ไทยไม่มีช่องว่างคั่น) ตัดที่ตัวอักษรตรง ๆ */
+export function wrapStampLabel(
+  label: string,
+  fontSize: number,
+  maxWidth: number,
+  measure: (text: string, fontSize: number) => number,
+): string[] {
+  const lines: string[] = [];
+  let cur = "";
+  for (const word of label.split(/\s+/)) {
+    if (!word) continue;
+    // คำเดี่ยวยาวเกินบรรทัด — ตัดที่อักษร
+    if (measure(word, fontSize) > maxWidth) {
+      for (const ch of word) {
+        if (cur && measure(cur + ch, fontSize) > maxWidth) {
+          lines.push(cur);
+          cur = "";
+        }
+        cur += ch;
+      }
+      continue;
+    }
+    const candidate = cur ? `${cur} ${word}` : word;
+    if (measure(candidate, fontSize) <= maxWidth) cur = candidate;
+    else {
+      lines.push(cur);
+      cur = word;
+    }
+  }
+  if (cur) lines.push(cur);
+  return lines.length ? lines : [""];
+}
+
+/** จัดวางข้อความตรายางในกรอบกว้าง boxWidth (2026-09-28): คำสั้น = บรรทัดเดียวฟอนต์เต็ม
+ *  (พฤติกรรมเดิม) — คำยาวพอดี ๆ = **ย่อฟอนต์ให้อยู่บรรทัดเดียวก่อน** ลงได้จนถึง
+ *  STAMP_FONT_FLOOR_RATIO (คำอย่าง "ตรวจสอบแล้ว" ย่อ ~25% ก็พอ จะได้บรรทัดเดียว
+ *  กลับคืน ไม่ตก 2 บรรทัด — คำขอผู้ใช้ 2026-09-28 รอบสอง) — คำยาวจนย่อถึง floor แล้ว
+ *  ยังไม่พอ = กลับไปที่ฟอนต์ใหญ่แล้ว wrap หลายบรรทัด (ไม่เกิน STAMP_MAX_LINES) ให้
+ *  ฟอนต์ใหญ่กว่าการย่อบรรทัดเดียวจนแทบอ่านไม่ออก — ไล่ขนาดฟอนต์จากใหญ่ไปเล็ก
+ *  (×0.92 ต่อรอบ) จนจำนวนบรรทัดเข้าเกณฑ์ หรือถึงเพดานล่าง (ยอมให้เกินบรรทัด
+ *  แลกกับฟอนต์ที่ยังอ่านออก) */
+export function stampLayout(
+  label: string,
+  boxWidth: number,
+  measure: (text: string, fontSize: number) => number,
+): StampLayout {
+  const base = boxWidth * STAMP_FONT_RATIO;
+  const maxW = boxWidth * STAMP_TEXT_WIDTH_RATIO;
+  const floor = boxWidth * STAMP_FONT_FLOOR_RATIO;
+  const single = stampFitFontSize(label, boxWidth, measure);
+  // ย่อฟอนต์เป็นบรรทัดเดียวได้โดยไม่ต่ำกว่า floor → บรรทัดเดียว (เจตนาเดิมของ
+  // F18 "ยาวอย่าง 'ตรวจสอบแล้ว' ไม่ wrap" — การ wrap ที่ฟอนต์เต็มทันทีทำคำพอดี ๆ
+  // ตกบรรทัดโดยไม่จำเป็น) — single ≤ base เสมอ (stampFitFontSize คืน base เมื่อ
+  // พอดี หรือ base×maxW/textW < base เมื่อล้น) จึงใช้ตรง ๆ ได้
+  if (single >= floor) return { lines: [label], fontSize: single, lineHeight: 1.2 };
+  // ย่อจนต่ำกว่า floor = อ่านไม่ออก — ฟอนต์กลับไปใหญ่แล้ว wrap หลายบรรทัดแทน
+  let fontSize = base;
+  let lines = wrapStampLabel(label, fontSize, maxW, measure);
+  while (lines.length > STAMP_MAX_LINES && fontSize * 0.92 >= floor) {
+    fontSize *= 0.92;
+    lines = wrapStampLabel(label, fontSize, maxW, measure);
+  }
+  return { lines, fontSize, lineHeight: 1.2 };
+}
+
+/** ความสูงกรอบตรายางจาก layout — ข้อความหลายบรรทัดสูงขึ้นตามจำนวนบรรทัด (พื้นที่ว่าง
+ *  บน+ล่างรวม 13.6% ของความกว้าง = 0.4w เดิม − ข้อความ 1 บรรทัดที่ฟอนต์เต็ม ทำให้คำ
+ *  สั้น 1 บรรทัดสูง 0.4w เป๊ะเหมือนก่อนมีการ wrap) แต่ไม่ต่ำกว่า STAMP_HEIGHT_RATIO */
+export function stampBoxHeight(layout: StampLayout, boxWidth: number): number {
+  const textH = layout.lines.length * layout.fontSize * layout.lineHeight;
+  return Math.max(boxWidth * STAMP_HEIGHT_RATIO, textH + boxWidth * 0.136);
+}
+
+/** จัดวางข้อความตรายางแบบไม่ต้องมี measure จริง (ใช้ความกว้างเฉลี่ยต่ออักษร) — สำหรับ
+ *  annotationBBox/hit-test ที่เป็น pure function รันได้ทั้งฝั่ง server — ผลใกล้เคียง
+ *  ของจริงพอสำหรับการชี้เลือก (จอจริงวัดด้วย measureStampText ของ annotation-display) */
+export function stampLayoutEstimate(label: string, boxWidth: number): StampLayout {
+  return stampLayout(label, boxWidth, (text, fs) => text.length * fs * STAMP_CHAR_W);
+}
+
+/** กรอบตรายาง (ก่อนหมุน) + มุมเอียง หน่วย px ตาม size — single source ให้ทั้ง
+ *  annotationBBox (ครอบเป็น AABB ของกรอบหมุนแล้ว) และกรอบ selection ที่วาดกรอบ
+ *  หมุนจริง (ต้องการกรอบเดิม + มุมแยกกันจึงใช้ CSS transform หมุนรอบกลาง) */
+export function stampRect(
+  d: Pick<StampData, "label" | "position" | "scale" | "rotation">,
+  size: Size,
+  measure?: (text: string, fontSize: number) => number,
+): Rect & { rotation: number } {
+  const w = toPx(d.scale, size.width);
+  const p = pointToPx(d.position, size);
+  const lay = measure ? stampLayout(d.label, w, measure) : stampLayoutEstimate(d.label, w);
+  return {
+    x: p.x,
+    y: p.y,
+    width: w,
+    height: stampBoxHeight(lay, w),
+    rotation: d.rotation ?? 0,
+  };
+}
+
+/** หมุนจุดรอบ center ด้วยองศา (บวก = ตามเข็มนาฬิกา ตาม CSS rotate) — ใช้แปลงพิกัด
+ *  มุมกรอบตรายางเอียง (anchor ของ handle scale) และแปลง pointer เข้า frame ของกรอบ
+ *  (ส่ง deg เป็นลบ = ย้อนหมุน) — หน่วยใดก็ได้ตรงกันทั้งคู่ (% หรือ px) */
+export function rotatePoint(p: Point, center: Point, deg: number): Point {
+  if (!deg) return p;
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = p.x - center.x;
+  const dy = p.y - center.y;
+  return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
+}
+
+/** เลื่อน position ของตรายาง (%, มุมกรอบ*ก่อนหมุน*) แค่น้อยที่สุดให้ AABB ของกรอบ
+ *  หมุนแล้วกลับเข้า 0–100 ทุกด้าน — ใช้ตอนตั้งมุมเอียงใหม่ (patch/ลากหมุน): หมุนที่
+ *  ตำแหน่งชิดขอบแล้วกรอบอาจยื่นเกินขอบหน้า ต้องดึงกลับทันที ไม่ใช่รอให้เด้งตอน
+ *  ลากครั้งถัดไป (code review 2026-09-28) — rotation = 0 กลางหน้า = ไม่ขยับ */
+export function clampStampIntoPage(
+  d: Pick<StampData, "label" | "position" | "scale" | "rotation">,
+): Point {
+  const aabb = rotatedRectAABB(stampRect(d, { width: 100, height: 100 }));
+  const dx =
+    aabb.x < 0 ? -aabb.x : aabb.x + aabb.width > 100 ? 100 - (aabb.x + aabb.width) : 0;
+  const dy =
+    aabb.y < 0 ? -aabb.y : aabb.y + aabb.height > 100 ? 100 - (aabb.y + aabb.height) : 0;
+  return { x: d.position.x + dx, y: d.position.y + dy };
+}
+
+/** AABB (กรอบตรงแกน) ของ rect หลังหมุน `rotation` องศารอบ**กลางกรอบ** — สำหรับ
+ *  hit-test/tooltip/clamp ของตรายางเอียง: กรอบจริงเอียง AABB จึงกว้าง/สูงกว่ากรอบ
+ *  เดิม (ที่ 45° ใหญ่สุด = แนวทะเลียบ) — จุดที่อยู่ใน AABB แต่นอกกรอบเอียง = โดน
+ *  เผื่อไว้ ยอมรับได้เพราะ handle ลากก็ใช้พื้นที่รอบกรอบอยู่แล้ว */
+export function rotatedRectAABB(r: Rect & { rotation: number }): Rect {
+  const rad = (r.rotation * Math.PI) / 180;
+  const cos = Math.abs(Math.cos(rad));
+  const sin = Math.abs(Math.sin(rad));
+  const w = r.width * cos + r.height * sin;
+  const h = r.width * sin + r.height * cos;
+  const cx = r.x + r.width / 2;
+  const cy = r.y + r.height / 2;
+  return { x: cx - w / 2, y: cy - h / 2, width: w, height: h };
+}

 type AnnotationLike = { type: AnnotationType; data: AnnotationData };

@ -73,7 +246,15 @@ type AnnotationLike = { type: AnnotationType; data: AnnotationData };
 * - COMMENT: กล่องสี่เหลี่ยมขนาด COMMENT_PIN_BOX_PCT (% ของความกว้างหน้า) รอบ position
 * เคล็ดลับ: ส่ง size={width:100, height:100} เพื่อให้ผลลัพธ์เป็น "%" โดยตรง
 */
-export function annotationBBox(a: AnnotationLike, size: Size): Rect {
+export function annotationBBox(
+  a: AnnotationLike,
+  size: Size,
+  /** measure ความกว้างข้อความตรายาง — ไม่ส่ง = ประมาณด้วย STAMP_CHAR_W (stampLayoutEstimate,
+   *  รันได้ฝั่ง server) · ฝั่ง client (กรอบ selection, hit-test, tooltip, eraser) ต้องส่ง
+   *  measureStampText ให้สูงกรอบตรงกับที่ StampItem render จริง — ประมาณแล้วจำนวนบรรทัด
+   *  คลาดตามฟอนต์ของแต่ละเครื่อง จนขอบล่างกรอบเกิน/สั้นกว่าตรายาง (bug 2026-09-28) */
+  measure?: (text: string, fontSize: number) => number,
+): Rect {
  const d = a.data;
  // union ไม่ได้ discriminate โดย field ใน data เอง → แยกตาม key เฉพาะของแต่ละ variant
  if ("rects" in d) {
@ -139,10 +320,13 @@ export function annotationBBox(a: AnnotationLike, size: Size): Rect {
    return { x: p.x, y: p.y, width, height: Math.max(lines, 1) * lineH };
  }
  if ("scale" in d) {
-    // STAMP — กรอบจริงตามสูตร render (position เป็นมุมซ้ายบน)
-    const w = toPx(d.scale, size.width);
-    const p = pointToPx(d.position, size);
-    return { x: p.x, y: p.y, width: w, height: w * STAMP_HEIGHT_RATIO };
+    // STAMP — กรอบจริงตามสูตร render (position เป็นมุมซ้ายบน) หมุนรอบกลางกรอบตาม
+    // rotation (ไม่มี = 0°) — คืน AABB ของกรอบหมุนแล้ว (hit-test/tooltip/clamp เป็น
+    // แกนตรง ส่วนกรอบ selection ใช้ stampRect วาดกรอบหมุนจริง)
+    const r = stampRect(d, size, measure);
+    return r.rotation
+      ? rotatedRectAABB(r)
+      : { x: r.x, y: r.y, width: r.width, height: r.height };
  }
  const p = pointToPx(d.position, size);
  // กล่องรอบ pin อิง % ของความกว้างหน้า — สอดคล้องทั้ง render (px) และ space %
--- a/utils/textbox-editor.ts
+++ b/utils/textbox-editor.ts
@ -0,0 +1,68 @@
+import type { TextboxSegment } from "@/db/schema";
+
+// แปลงข้อความ/segments ของกล่องข้อความ (TEXTBOX F17) ไป–กลับระหว่าง model ใน DB
+// กับ DOM ของ contentEditable ใน TextboxEditor (components/pdf/TextboxStampLayer.tsx)
+// — แยกเป็น pure DOM util (ไม่แตะ React) เพื่อ unit test กับ jsdom ได้ตาม pattern
+// tests/hooks/useCustomSelection-dom.test.ts (2026-09-28)
+
+/** แปลงข้อความ/segments → HTML สำหรับ contentEditable (escape + <b> + <br>) */
+export function segmentsToHtml(text: string, segments?: TextboxSegment[]): string {
+  const esc = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const runs = segments?.length ? segments : [{ text }];
+  return runs
+    .map((s) => (s.bold ? `<b>${esc(s.text)}</b>` : esc(s.text)))
+    .join("")
+    .replace(/\n/g, "<br>");
+}
+
+/** อ่าน DOM ของ contentEditable กลับเป็น text รวม + segments แยกตามตัวหนา/ปกติ
+ *  - ขึ้นบรรทัดใหม่มาจาก 2 แหล่ง: <br> (Enter ถูกดักเป็น insertLineBreak — <br> ล้วน)
+ *    และ <div>/<p> ที่ browser สร้างเอง (paste/โหมดแก้ไขของ browser อื่น) — เจอ
+ *    block ใหม่ให้ push "\n" *ก่อน* เข้า block จากตำแหน่งข้อความที่ไปก่อนหน้า:
+ *    push หลังจบ block แบบเดิมจะตกขอบทั้งรอยต่อ text→div แรก ("abc<div>def</div>"
+ *    ของ Chrome กลายเป็น "abcdef") และ block ตัวสุดท้ายของก้อน
+ *  - whitespace ท้ายทั้งก้อนถูกตัดออกทั้ง text และ segments ให้ตรงกัน (browser เติม
+ *    <br> ปิดท้ายให้ contentEditable จนได้ "\n" ค้างใน DB) */
+export function serializeEditor(root: HTMLElement): {
+  text: string;
+  segments: TextboxSegment[];
+} {
+  const segs: TextboxSegment[] = [];
+  const push = (text: string, bold: boolean) => {
+    if (!text) return;
+    const last = segs[segs.length - 1];
+    if (last && !!last.bold === bold) last.text += text;
+    else segs.push({ text, ...(bold ? { bold: true } : {}) });
+  };
+  const walk = (node: Node, bold: boolean) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      push(node.nodeValue ?? "", bold);
+    } else if (node.nodeName === "BR") {
+      push("\n", bold);
+    } else {
+      const b = bold || node.nodeName === "B" || node.nodeName === "STRONG";
+      if (
+        /^(DIV|P)$/.test(node.nodeName) &&
+        segs.length > 0 &&
+        !segs[segs.length - 1].text.endsWith("\n")
+      ) {
+        push("\n", b);
+      }
+      node.childNodes.forEach((c) => walk(c, b));
+    }
+  };
+  walk(root, false);
+  const joined = segs.map((s) => s.text).join("");
+  let cut = joined.length - joined.trimEnd().length;
+  for (let i = segs.length - 1; i >= 0 && cut > 0; i--) {
+    if (segs[i].text.length <= cut) {
+      cut -= segs[i].text.length;
+      segs.splice(i, 1);
+    } else {
+      segs[i].text = segs[i].text.slice(0, segs[i].text.length - cut);
+      cut = 0;
+    }
+  }
+  return { text: joined.trimEnd(), segments: segs };
+}