Compare commits
No commits in common. "0aef3ff028d94a023d7faf02f03e76b29553245a" and "f7b5a8488ddfd78d8af95d949eff652356df4901" have entirely different histories.
0aef3ff028
...
f7b5a8488d
9 changed files with 116 additions and 322 deletions
File diff suppressed because one or more lines are too long
|
|
@ -14,7 +14,7 @@ import {
|
|||
type PDFPage,
|
||||
type PDFRef,
|
||||
} from "pdf-lib";
|
||||
import { and, asc, eq, inArray } from "drizzle-orm";
|
||||
import { asc, eq, inArray } from "drizzle-orm";
|
||||
|
||||
import { db } from "@/db";
|
||||
import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
|
||||
|
|
@ -274,21 +274,9 @@ export async function GET(req: Request) {
|
|||
.from(annotations)
|
||||
.where(eq(annotations.fileId, fileId))
|
||||
.orderBy(asc(annotations.createdAt));
|
||||
// F4: export ตาม filter รายคนที่กำลังดู (?user=<userId> จาก sidebar — ไม่ส่ง = ทั้งหมด)
|
||||
// REDACTION ติดไปเสมอแม้กรองคนอื่น (D4 — กล่องดำหายไป = เนื้อหาที่ปิดกั้นกลับมาอ่านได้)
|
||||
const userParam = url.searchParams.get("user");
|
||||
const filteredRows = userParam
|
||||
? rows.filter((r) => r.userId === userParam || r.type === "REDACTION")
|
||||
: rows;
|
||||
// ชื่อผู้ใช้เติมท้ายชื่อไฟล์ (mirror ในตาราง — ไม่รับ text จาก client) — กรองแล้ว
|
||||
// ผู้นั้นยังไม่มีรายการเลย = ใช้ userId ตรง ๆ
|
||||
const filterName = userParam
|
||||
? (rows.find((r) => r.userId === userParam && r.userName)?.userName ??
|
||||
userParam)
|
||||
: null;
|
||||
// sort แยกตามชนิดก่อนวาด (stable ภายในชนิดด้วย createdAt) — กัน REDACTION เก่าโดน
|
||||
// HIGHLIGHT/DRAW ที่สร้างทีหลังทับจนข้อความง้ำกลับมาอ่านได้ (D4)
|
||||
const dtos = filteredRows
|
||||
const dtos = rows
|
||||
.map(toAnnotationDTO)
|
||||
.sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
|
||||
|
||||
|
|
@ -646,16 +634,10 @@ export async function GET(req: Request) {
|
|||
|
||||
// bookmarks → PDF outline (แผง Bookmarks ของ reader กดกระโดดไปหน้า + yOffset)
|
||||
// เรียงตามลำดับหน้าเหมือน sidebar (byPageOrder ของ N5: หน้า → ตำแหน่งบนหน้า → เวลาสร้าง)
|
||||
// กรองตามรายคนเหมือน annotation (คำขอผู้ใช้ 2026-09-22) — หัวข้อแม่โดนกรองแต่ลูกยังอยู่
|
||||
// ลูกขึ้น root (buildOutline จัดการ parent หายเคสนี้อยู่แล้ว)
|
||||
const bookmarkRows = await db
|
||||
.select()
|
||||
.from(bookmarks)
|
||||
.where(
|
||||
userParam
|
||||
? and(eq(bookmarks.fileId, fileId), eq(bookmarks.userId, userParam))
|
||||
: eq(bookmarks.fileId, fileId),
|
||||
)
|
||||
.where(eq(bookmarks.fileId, fileId))
|
||||
.orderBy(
|
||||
asc(bookmarks.pageIndex),
|
||||
asc(bookmarks.yOffset),
|
||||
|
|
@ -664,9 +646,7 @@ export async function GET(req: Request) {
|
|||
buildOutline(doc, bookmarkRows);
|
||||
|
||||
const out = await doc.save();
|
||||
const filename = encodeRFC5987(
|
||||
`${file.title}-annotated${filterName ? `-${filterName}` : ""}.pdf`,
|
||||
);
|
||||
const filename = encodeRFC5987(`${file.title}-annotated.pdf`);
|
||||
return new Response(new Uint8Array(out), {
|
||||
headers: {
|
||||
"content-type": "application/pdf",
|
||||
|
|
|
|||
|
|
@ -166,28 +166,6 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ─── ยกเว้น chevron หุบ/กางของต้นไม้ bookmark (bug report 2026-09-22) ──────
|
||||
คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้างเท่าไอคอน 14px เท่ากับ spacer
|
||||
(w-3.5) ของแถวลูกเสมอ — ถ้าปล่อย min-width 32px ดันไอคอน bookmark ของ
|
||||
หัวข้อแม่ไปชนแนวพอดีกับของหัวข้อลูก (indent 16px/ระดับโดนกิน) ลำดับ
|
||||
ชั้นมองไม่เห็น และ root มีลูก (chevron) กับไม่มีลูก (spacer) ก็เพี้ยน
|
||||
ไม่ตรงแนวกันเอง — จึงคงขนาดจริง 14px แล้วขยาย hit area ด้วย ::after
|
||||
แบบเดียวกับ sel-handle (จิ้มสบาย 32px เท่าเดิม โดยไม่จอง layout) */
|
||||
aside[data-sidebar] button.bm-toggle {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
aside[data-sidebar] button.bm-toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
/* ขยาย hit รอบไอคอน 14px เป็น 32px (±9px) โดยไม่กว้างขึ้นจริง */
|
||||
inset: -0.5625rem;
|
||||
}
|
||||
|
||||
/* M6: ตัด double-tap zoom ของ browser เมื่อแตะปุ่มรัว ๆ (ยัง pinch ได้ตามปกติ —
|
||||
handle ของกรอบ selection เป็น div + touch-none อยู่แล้ว ไม่โดน rule นี้) */
|
||||
button,
|
||||
|
|
@ -269,16 +247,6 @@ html {
|
|||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
/* 2026-09-22: <main> ของ viewer เป็น scroll container เดียวของหน้า (แนวตั้ง +
|
||||
แนวนอน — ซูมจนหน้ากว้างเกินจอแล้วปัดเลื่อนดูส่วนที่เกินได้) — จำกัด gesture
|
||||
สัมผัสให้เป็นการแพนของกรอบนี้เท่านั้น ไม่ปล่อยให้ browser pinch-zoom/double-tap
|
||||
zoom ทั้งหน้าเว็บ (อาการซูมแล้ว header/sidebar โต้ตามไปด้วย); ปุ่มซูม ± เป็น
|
||||
ทางเลือก single-pointer ตาม WCAG 2.5.1 — ต้องอยู่ก่อน .pdf-custom-select
|
||||
เพื่อให้โหมดมาร์กข้อความ (touch-action:none) ยังชนะตอนเปิดใช้ */
|
||||
.pdf-scroll-main {
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
/* custom selection ของ tool highlight บนจอสัมผัส (hooks/useCustomSelection) —
|
||||
ปิด native selection/callout ของ OS และยึด gesture ลากเป็นของเราทั้งหมด
|
||||
(touch-action:none กัน browser ยึดไปเป็น scroll → pointercancel)
|
||||
|
|
|
|||
|
|
@ -210,6 +210,11 @@ function normalizeBookmarkTitle(s: string): string {
|
|||
: t;
|
||||
}
|
||||
|
||||
/** ความสูง sticky header ของ viewer — ใช้เว้นระยะเวลาเลื่อนหน้าไม่ให้เป้าหมายถูก header บัง */
|
||||
function viewerHeaderHeight(): number {
|
||||
return document.querySelector("header")?.offsetHeight ?? 0;
|
||||
}
|
||||
|
||||
/** ความกว้างจริงของเมนู dropdown ของ tool (w-60) กับ popup bookmark (w-72) —
|
||||
* ใช้ clamp ตำแหน่ง fixed ให้อยู่ในจอ (C1) */
|
||||
const TOOL_MENU_W = 240;
|
||||
|
|
@ -225,14 +230,13 @@ function fixedMenuPos(rect: DOMRect, menuW: number): { left: number; top: number
|
|||
};
|
||||
}
|
||||
|
||||
/** เลื่อน scroll container ของเอกสาร (<main> — ตัวเลื่อนเดียวของ viewer) ให้ตำแหน่ง
|
||||
* contentTop (px จากบนสุดของเนื้อหาใน container) ไปอยู่แถวบนสุดของพื้นที่มองเห็น —
|
||||
* header อยู่นอกกรอบ scroll อยู่แล้ว จึงเว้นแค่ช่องว่าง 40px ให้รายการไม่ติดขอบบนเกินไป */
|
||||
/** เลื่อนหน้าต่างให้ตำแหน่ง absolute (px จากบนสุดของ document) ไปอยู่ใต้ sticky header
|
||||
* (เว้นระยะห่างจาก toolbar 40px ให้รายการไม่ติดแถบเครื่องมือเกินไป) */
|
||||
const SCROLL_BELOW_HEADER_GAP = 40;
|
||||
|
||||
function scrollToBelowHeader(main: HTMLElement | null, contentTop: number): void {
|
||||
main?.scrollTo({
|
||||
top: Math.max(0, contentTop - SCROLL_BELOW_HEADER_GAP),
|
||||
function scrollToBelowHeader(absoluteTop: number): void {
|
||||
window.scrollTo({
|
||||
top: Math.max(0, absoluteTop - viewerHeaderHeight() - SCROLL_BELOW_HEADER_GAP),
|
||||
// L7 (UX audit 2026-09-16): เคารพ prefers-reduced-motion — คู่กับ rule ใน globals.css
|
||||
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
? "auto"
|
||||
|
|
@ -240,13 +244,6 @@ function scrollToBelowHeader(main: HTMLElement | null, contentTop: number): void
|
|||
});
|
||||
}
|
||||
|
||||
/** แปลง client Y (getBoundingClientRect().top) → พิกัดแนวตั้งในเนื้อหาของ scroll
|
||||
* container ของเอกสาร — แทนสูตร r.top + window.scrollY ยุคที่ window เป็นตัวเลื่อน
|
||||
* (app shell สูงจอควบ lock การ scroll ของ document ไว้ ทุกอย่างเลื่อนใน <main>) */
|
||||
function contentTopInScroll(main: HTMLElement, clientTop: number): number {
|
||||
return clientTop - main.getBoundingClientRect().top + main.scrollTop;
|
||||
}
|
||||
|
||||
/** path เส้นขยุกขยิกยาว w px — ใช้ใน highlight-layer สำหรับ style "squiggle" */
|
||||
function squigglePath(w: number): string {
|
||||
let d = "M0 2.5";
|
||||
|
|
@ -364,28 +361,18 @@ function selectionTextWithin(kept: DOMRect[], range: Range): string {
|
|||
* ผู้ใช้ศาลไม่คุ้นไอคอนล้วน โดยเฉพาะจอสัมผัสที่ hover อ่าน title ไม่ได้ — แทน span
|
||||
* ชื่อ tool-active ของ H3 ที่ถอดออก) */
|
||||
const TOOLS: { key: Tool; label: string; text: string; Icon: LucideIcon }[] = [
|
||||
{ key: "select", label: "เลือก", text: "เลือก", Icon: MousePointer2 },
|
||||
{ key: "select", label: "เลือกข้อความ", text: "เลือกข้อความ", Icon: MousePointer2 },
|
||||
{ key: "pan", label: "เลื่อนหน้า (pan)", text: "เลื่อนหน้า", Icon: Hand },
|
||||
{ key: "highlight", label: "มาร์กข้อความ (H)", text: "มาร์กข้อความ", Icon: Highlighter },
|
||||
{ key: "draw", label: "วาดเส้น (D)", text: "วาดเส้น", Icon: Pencil },
|
||||
{ key: "comment", label: "วางคอมเมนต์ (C)", text: "วางคอมเมนต์", Icon: MessageSquarePlus },
|
||||
{ key: "shape", label: "รูปทรง", text: "รูปทรง", Icon: Shapes },
|
||||
{ key: "erase", label: "ยางลบ (เส้น/รูปทรง/ตรายางของตัวเอง)", text: "ยางลบ", Icon: Eraser },
|
||||
{ key: "erase", label: "ยางลบ (ลบด้วยการลาก)", text: "ยางลบ", Icon: Eraser },
|
||||
{ key: "redact", label: "ปิดพราง (redaction)", text: "ปิดพราง", Icon: EyeOff },
|
||||
{ key: "textbox", label: "กล่องข้อความ", text: "กล่องข้อความ", Icon: Type },
|
||||
{ key: "stamp", label: "ตรายาง (stamp)", text: "ตรายาง", Icon: Stamp },
|
||||
];
|
||||
|
||||
/** แบนเนอร์แนะนำวิธีใช้ tool ที่วางของด้วยคลิกบนหน้า (UX audit 2026-09-22): เดิมเลือก tool
|
||||
* แล้วจอนิ่ง ไม่มีอะไรบอกขั้นต่อไป (hint เดิมอยู่แค่ empty state ของ sidebar ที่หายทันที
|
||||
* ที่มีรายการ) — แสดงตลอดตอน tool active ให้ทำหน้าที่ mode indicator ไปพร้อมกัน
|
||||
* (เงื่อนไข tool เดี่ยว ๆ จึงไม่มีวันซ้อนกับแบนเนอร์ M3/M6/H2 ข้างบน) */
|
||||
const PLACE_TOOL_HINTS: Partial<Record<Tool, string>> = {
|
||||
comment: "โหมดวางคอมเมนต์: คลิก (แตะ) ตำแหน่งบนหน้าเพื่อวางกล่องคอมเมนต์",
|
||||
textbox: "โหมดกล่องข้อความ: คลิก (แตะ) ตำแหน่งบนหน้าเพื่อวางกล่อง แล้วพิมพ์ข้อความ",
|
||||
stamp: "โหมดตรายาง: คลิก (แตะ) ตำแหน่งบนหน้าเพื่อประทับตรายาง",
|
||||
};
|
||||
|
||||
/** UX review 2026-09-14 M4: focus ring ตอน keyboard focus — ทั้งโปรเจกต์ไม่เคยมี focus-visible
|
||||
* ปุ่ม toolbar จึงกลายเป็นกด Tab แล้วไม่รู้ focus อยู่ปุ่มไหน
|
||||
* ring เต็มสี + ring-offset คั่นขาว 1px ให้เห็นชัดแม้บนปุ่ม active ที่พื้น primary เอง
|
||||
|
|
@ -393,16 +380,6 @@ const PLACE_TOOL_HINTS: Partial<Record<Tool, string>> = {
|
|||
const FOCUS_RING_CLS =
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:z-10";
|
||||
|
||||
/** สเกลที่ทำให้หน้ากระดาษพอดีความกว้างของ main (ตัด padding px-4 ซ้าย-ขวา = 32px — สูตร
|
||||
* เดิมของ effect fit-width ตอนโหลด ย้ายมาเป็น helper ใช้ร่วมกับปุ่ม % ที่ header ด้วย
|
||||
* (UX audit 2026-09-22: ผู้ใช้ซูมดูรายละเอียดแล้วไม่มีทางกลับมาดูทั้งหน้า) — คิดจากความ
|
||||
* กว้าง main ปัจจุบันทุกครั้งเพราะ sidebar/จออาจเปลี่ยนไปแล้ว; ยังไม่รู้ขนาดหน้า = null */
|
||||
function fitWidthScale(mainW: number | undefined, pageW: number | undefined): number | null {
|
||||
const avail = (mainW ?? 0) - 32;
|
||||
if (!avail || !pageW) return null;
|
||||
return pageW > avail ? clamp(Math.floor((avail / pageW) * 100) / 100, 0.5, 1) : 1;
|
||||
}
|
||||
|
||||
/** ชนิดที่สร้างเสร็จแล้วเลือกรายการใหม่ให้อัตโนมัติ (กรอบ selection + sidebar ไฮไลต์)
|
||||
* ทุกชนิดยกเว้น COMMENT — เปิด composer พิมพ์ก่อนบันทึก และคลิก pin = เลือกอยู่แล้ว */
|
||||
const AUTO_SELECT_TYPES = new Set<AnnotationType>([
|
||||
|
|
@ -526,7 +503,7 @@ function ReplyBox({
|
|||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[11px] font-medium text-slate-600">
|
||||
{r.userName}
|
||||
<span className="ml-1 font-normal text-slate-500" suppressHydrationWarning>
|
||||
<span className="ml-1 font-normal text-slate-400" suppressHydrationWarning>
|
||||
{formatThaiDate(r.createdAt, true)}
|
||||
</span>
|
||||
</p>
|
||||
|
|
@ -648,7 +625,7 @@ function PdfPage({
|
|||
/** live preview มาร์กระหว่างลากคลุมด้วย tool highlight (null = ไม่มี) */
|
||||
liveMark: { pageIndex: number; rects: Rect[] } | null;
|
||||
liveMarkStyle: { color: string; style: HighlightStyle; opacity?: number };
|
||||
/** selection สีฟ้าสะอาด ๆ ของ tool เลือก — กรองแนวเส้นทางลากเหมือน liveMark
|
||||
/** selection สีฟ้าสะอาด ๆ ของ tool เลือกข้อความ — กรองแนวเส้นทางลากเหมือน liveMark
|
||||
* แต่ไม่สร้างไฮไลต์ (ซ่อนสี selection ของเบราว์เซอร์ วาดเองแทน) */
|
||||
selectPreview: { pageIndex: number; rects: Rect[] } | null;
|
||||
/** ความกว้างหน้าแรกที่ scale 1 — แปลง px↔% ของ fontSize ในแผง selection */
|
||||
|
|
@ -912,7 +889,7 @@ function PdfPage({
|
|||
liveMarkStyle.opacity,
|
||||
),
|
||||
)}
|
||||
{/* selection สีฟ้าของ tool เลือก — กรองแนวเส้นทางลากแล้ว วาดเองแทน
|
||||
{/* selection สีฟ้าของ tool เลือกข้อความ — กรองแนวเส้นทางลากแล้ว วาดเองแทน
|
||||
สี selection ของเบราว์เซอร์ (ไม่สร้างไฮไลต์) */}
|
||||
{selectPreview &&
|
||||
selectPreview.pageIndex === pageNumber - 1 &&
|
||||
|
|
@ -1104,7 +1081,7 @@ function PdfPage({
|
|||
{a.data.message}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-1 text-[11px] text-slate-500" suppressHydrationWarning>
|
||||
<p className="mt-1 text-[11px] text-slate-400" suppressHydrationWarning>
|
||||
{formatThaiDate(a.createdAt, true)}
|
||||
</p>
|
||||
{/* F10/A5: toggle จัดการแล้ว — ใครก็ได้ (D6) */}
|
||||
|
|
@ -1231,7 +1208,7 @@ export default function PDFViewer({
|
|||
const [currentPage, setCurrentPage] = useState(0);
|
||||
// tool highlight — live preview มาร์กตามรูปแบบ/สีที่ตั้งไว้ ระหว่างลากคลุมข้อความ
|
||||
const [liveMark, setLiveMark] = useState<{ pageIndex: number; rects: Rect[] } | null>(null);
|
||||
// tool เลือก — selection สีฟ้าสะอาด ๆ (กรองแนวเส้นทางลากแล้ว ไม่สร้างไฮไลต์)
|
||||
// tool เลือกข้อความ — selection สีฟ้าสะอาด ๆ (กรองแนวเส้นทางลากแล้ว ไม่สร้างไฮไลต์)
|
||||
const [selectPreview, setSelectPreview] = useState<{ pageIndex: number; rects: Rect[] } | null>(null);
|
||||
const [composer, setComposer] = useState<Composer | null>(null);
|
||||
const [draft, setDraft] = useState("");
|
||||
|
|
@ -1322,15 +1299,11 @@ export default function PDFViewer({
|
|||
return Array.from(seen, ([userId, userName]) => ({ userId, userName }));
|
||||
}, [optimisticAnnotations, user]);
|
||||
|
||||
// F4: กรองฝั่ง client ล้วน — ไม่แตะข้อมูลใน DB (A3) — REDACTION คงไว้เสมอแม้
|
||||
// กรองดูของคนอื่น (D4 สูตรเดียวกับ export: กล่องดำหายจากจอ = เนื้อหาที่ปิดกั้น
|
||||
// กลับมาอ่านได้ และจอจะไม่ตรงกับไฟล์ export ที่คงกล่องไว้)
|
||||
// F4: กรองฝั่ง client ล้วน — ไม่แตะข้อมูลใน DB (A3)
|
||||
const visibleAnnotations = useMemo(() => {
|
||||
if (userFilter === "all") return optimisticAnnotations;
|
||||
const target = userFilter === "mine" ? user?.userId : userFilter;
|
||||
return optimisticAnnotations.filter(
|
||||
(a) => a.userId === target || a.type === "REDACTION",
|
||||
);
|
||||
return optimisticAnnotations.filter((a) => a.userId === target);
|
||||
}, [optimisticAnnotations, userFilter, user]);
|
||||
|
||||
// FIX-8: bbox (หน่วย %) ของรายการที่ hover ตรวจได้ — เดิน paths
|
||||
|
|
@ -1472,20 +1445,6 @@ export default function PDFViewer({
|
|||
);
|
||||
}, []);
|
||||
|
||||
// PDF สแกนล้วน — ซ่อน tool มาร์กข้อความเหมือนไฟล์ภาพ (คำขอผู้ใช้ 2026-09-22):
|
||||
// "ทุกหน้าที่ render แล้วไม่มี span เลย" โดย entry ของ pageSpanCount สะสมต่อหน้า
|
||||
// และไม่ถูกลบตอน virtualization unmount (รีเซ็ตเฉพาะตอนสลับไฟล์) จึงเป็น latch
|
||||
// ธรรมชาติ — เคยเจอหน้าที่มีข้อความแม้หน้าเดียว ไฟล์นี้ถือว่ามีข้อความ ปุ่มกลับ
|
||||
// มาและไม่หายอีก (ไฟล์ผสมที่สแกนนำหน้า: ซ่อนช่วงแรก โผล่ครั้งเดียวเมื่อถึงหน้า
|
||||
// ข้อความ — ดีกว่าปุ่มโผล่-หายตามหน้าที่กำลังเปิดดู)
|
||||
const scannedOnly =
|
||||
Object.keys(pageSpanCount).length > 0 && Object.values(pageSpanCount).every((n) => n === 0);
|
||||
// ระหว่างอยู่ tool มาร์กข้อความแล้วผลว่าเป็นไฟล์สแกน (เช่น กด H ตอนหน้าแรกยัง
|
||||
// ไม่ render) — กลับเครื่องมือเลือกให้ ไม่ค้างเป็น tool ที่ปุ่มหายไปแล้ว
|
||||
useEffect(() => {
|
||||
if (scannedOnly) setTool((prev) => (prev === "highlight" ? "select" : prev));
|
||||
}, [scannedOnly]);
|
||||
|
||||
// F8: Export PDF — ดาวน์โหลดเงียบ ๆ ในแท็บเดิม (เดิม window.open _blank จะแวบแท็บใหม่
|
||||
// และ error พา viewer ไปโผล่แท็บนั้น): fetch เป็น blob แล้วกด <a download> โดยรับชื่อ
|
||||
// ไฟล์จาก Content-Disposition ของ route (รองรับภาษาไทยผ่าน filename*) — พัง = toast ในหน้า
|
||||
|
|
@ -1494,19 +1453,7 @@ export default function PDFViewer({
|
|||
setExporting(true);
|
||||
setExportError(null);
|
||||
try {
|
||||
// F4: export ตาม filter รายคนที่กำลังดู ("mine" resolve เป็น userId จริงก่อนส่ง —
|
||||
// route กรองฝั่ง server + เติมชื่อผู้ใช้ท้ายชื่อไฟล์, REDACTION ติดไปเสมอ)
|
||||
const filterUser =
|
||||
userFilter === "all"
|
||||
? null
|
||||
: userFilter === "mine"
|
||||
? (user?.userId ?? null)
|
||||
: userFilter;
|
||||
const res = await fetch(
|
||||
withBasePath(
|
||||
`/api/annotations/export?fileId=${file.id}${filterUser ? `&user=${encodeURIComponent(filterUser)}` : ""}`,
|
||||
),
|
||||
);
|
||||
const res = await fetch(withBasePath(`/api/annotations/export?fileId=${file.id}`));
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => "");
|
||||
throw new Error(text || `HTTP ${res.status}`);
|
||||
|
|
@ -1553,10 +1500,6 @@ export default function PDFViewer({
|
|||
if (fileKindFromUrl(file.pdfUrl) === "image") {
|
||||
setDoc(null);
|
||||
setPdfjs(null);
|
||||
// สลับจากไฟล์ PDF ที่ tool มาร์กข้อความ active อยู่มาเป็นไฟล์ภาพ (dynamic param
|
||||
// เปลี่ยน = Next reuse component เดิม ไม่ reset state): tool นี้ถูกซ่อนบนไฟล์
|
||||
// ภาพ ต้องกลับไปเครื่องมือเลือก ไม่งั้นค้างเป็น tool ที่กดไม่ได้
|
||||
setTool((prev) => (prev === "highlight" ? "select" : prev));
|
||||
const objectUrls: string[] = [];
|
||||
// URL จริงที่ browser ใช้โหลดไฟล์ (fetch/img.src ตรง — ต้องเติม basePath เอง)
|
||||
const fileUrl = withBasePath(file.pdfUrl);
|
||||
|
|
@ -1642,8 +1585,6 @@ export default function PDFViewer({
|
|||
}, [file.id, file.pdfUrl]);
|
||||
|
||||
const pageWrapRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
// scroll container ของเอกสาร (<main>) — ตัวเลื่อนเดียวของ viewer (sidebar/header นิ่ง)
|
||||
const mainRef = useRef<HTMLElement>(null);
|
||||
|
||||
// Page Virtualization: render เฉพาะหน้าใน viewport ± 1 หน้า (invariant #10)
|
||||
const [renderPages, setRenderPages] = useState<Set<number>>(new Set([0]));
|
||||
|
|
@ -1668,8 +1609,7 @@ export default function PDFViewer({
|
|||
}
|
||||
setRenderPages(next);
|
||||
},
|
||||
// root = scroll container ของเอกสาร ไม่ใช่ viewport (window ไม่ scroll แล้ว)
|
||||
{ root: mainRef.current, rootMargin: "100% 0px" },
|
||||
{ rootMargin: "100% 0px" },
|
||||
);
|
||||
for (const el of pageWrapRefs.current) {
|
||||
if (el) io.observe(el);
|
||||
|
|
@ -1681,18 +1621,14 @@ export default function PDFViewer({
|
|||
useEffect(() => {
|
||||
if (pageSizes.length === 0) return;
|
||||
const onScroll = () => {
|
||||
const main = mainRef.current;
|
||||
if (!main) return;
|
||||
const mr = main.getBoundingClientRect();
|
||||
// กึ่งกลางจอ (client) แปลงเป็นพิกัดในเนื้อหาของ <main> เพื่อเทียบกับ midpoint หน้า
|
||||
const center = main.scrollTop + (window.innerHeight / 2 - mr.top);
|
||||
const center = window.scrollY + window.innerHeight / 2;
|
||||
let best = 0;
|
||||
let bestDist = Infinity;
|
||||
for (let i = 0; i < pageWrapRefs.current.length; i++) {
|
||||
const el = pageWrapRefs.current[i];
|
||||
if (!el) continue;
|
||||
const r = el.getBoundingClientRect();
|
||||
const mid = contentTopInScroll(main, r.top + r.height / 2);
|
||||
const mid = r.top + window.scrollY + r.height / 2;
|
||||
const d = Math.abs(mid - center);
|
||||
if (d < bestDist) {
|
||||
bestDist = d;
|
||||
|
|
@ -1702,8 +1638,8 @@ export default function PDFViewer({
|
|||
setCurrentPage(best);
|
||||
};
|
||||
onScroll();
|
||||
mainRef.current?.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => mainRef.current?.removeEventListener("scroll", onScroll);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, [pageSizes]);
|
||||
|
||||
// F12/C4: deep link `?page=N` (1-based) และ/หรือ `?ann=<uuid>` — อ่าน
|
||||
|
|
@ -1729,9 +1665,8 @@ export default function PDFViewer({
|
|||
if (targetPage === null && Number.isInteger(pageParam) && pageParam >= 1) {
|
||||
targetPage = Math.min(pageParam - 1, pageSizes.length - 1);
|
||||
const el = pageWrapRefs.current[targetPage];
|
||||
const main = mainRef.current;
|
||||
if (el && main) {
|
||||
scrollToBelowHeader(main, contentTopInScroll(main, el.getBoundingClientRect().top));
|
||||
if (el) {
|
||||
scrollToBelowHeader(el.getBoundingClientRect().top + window.scrollY);
|
||||
}
|
||||
}
|
||||
}, [pageSizes, annotations]);
|
||||
|
|
@ -1739,12 +1674,16 @@ export default function PDFViewer({
|
|||
// จอเล็ก: หน้ากระดาษ (scale 1) กว้างกว่าพื้นที่แสดงผล → ย่อให้พอดีความกว้าง
|
||||
// ครั้งเดียวตอนโหลดเท่านั้น (ผู้ใช้ซูมเองหลังจากนี้แล้วไม่ถูกแทนที่) —
|
||||
// อิงความกว้างหน้าแรกเหมือน basePageWidth และตัด padding px-4 ซ้าย-ขวาของ main ออก
|
||||
const mainRef = useRef<HTMLElement>(null);
|
||||
const fitWidthDoneRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (pageSizes.length === 0 || fitWidthDoneRef.current) return;
|
||||
fitWidthDoneRef.current = true;
|
||||
const s = fitWidthScale(mainRef.current?.clientWidth, pageSizes[0].width);
|
||||
if (s !== null && s !== 1) setScale(s);
|
||||
const avail = (mainRef.current?.clientWidth ?? 0) - 32;
|
||||
const pageW = pageSizes[0].width;
|
||||
if (avail > 0 && pageW > avail) {
|
||||
setScale(clamp(Math.floor((avail / pageW) * 100) / 100, 0.5, 1));
|
||||
}
|
||||
}, [pageSizes]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -2253,14 +2192,14 @@ export default function PDFViewer({
|
|||
/** ตำแหน่งที่กำลังดู: หน้าปัจจุบัน + จุดกึ่งกลางจอเป็น % ของความสูงหน้า */
|
||||
function currentViewPosition() {
|
||||
const el = pageWrapRefs.current[currentPage];
|
||||
const main = mainRef.current;
|
||||
if (!el || !main) return null;
|
||||
if (!el) return null;
|
||||
const r = el.getBoundingClientRect();
|
||||
// นิยาม yOffset แบบเดียวกับพิกัด annotation: "จุดจริงบนหน้า" — ใช้ขอบบนของ
|
||||
// แถบมองเห็นของ scroll container (+gap เท่ากับตอนกดผ่าน scrollToBelowHeader)
|
||||
// ตอนกด bookmark จุดนี้จะกลับมาอยู่ตำแหน่งเดิมพอดี ไม่ใช่กึ่งกลางจอแบบเดิม
|
||||
const viewTop = main.scrollTop + SCROLL_BELOW_HEADER_GAP;
|
||||
const pageTop = contentTopInScroll(main, r.top);
|
||||
// แถบมองเห็นใต้ header (+gap เท่ากับตอนกดผ่าน scrollToBelowHeader) ตอนกด
|
||||
// bookmark จุดนี้จะกลับมาอยู่ตำแหน่งเดิมพอดี ไม่ใช่กึ่งกลางจอแบบเดิม
|
||||
const viewTop =
|
||||
window.scrollY + viewerHeaderHeight() + SCROLL_BELOW_HEADER_GAP;
|
||||
const pageTop = r.top + window.scrollY;
|
||||
return {
|
||||
pageIndex: currentPage,
|
||||
yOffset: clamp(((viewTop - pageTop) / r.height) * 100, 0, 100),
|
||||
|
|
@ -2692,7 +2631,7 @@ export default function PDFViewer({
|
|||
pageEl: HTMLElement,
|
||||
) {
|
||||
// ปล่อยเมาส์จากการลากคลุมข้อความ (comment/textbox/stamp ก็คลุมได้) ไม่ถือเป็นคลิก —
|
||||
// selection ยังค้างตอน click ยิง ให้ผ่านไปเฉย ๆ เหมือน tool เลือก ไม่เปิด
|
||||
// selection ยังค้างตอน click ยิง ให้ผ่านไปเฉย ๆ เหมือน tool เลือกข้อความ ไม่เปิด
|
||||
// composer/วางตรายาง (คลิกล้วน ๆ selection ถูกยุบตั้งแต่ mousedown จึงไม่โดน guard นี้)
|
||||
const selection = window.getSelection();
|
||||
if (selection && !selection.isCollapsed) return;
|
||||
|
|
@ -2769,14 +2708,13 @@ export default function PDFViewer({
|
|||
// เห็นเป้าหมายทันที ไม่ต้องปิดเองก่อน (deep link ผ่าน goToAnnotation ก็เช่นกัน)
|
||||
if (!window.matchMedia("(min-width: 1024px)").matches) setSidebarOpen(false);
|
||||
const el = pageWrapRefs.current[b.pageIndex];
|
||||
const main = mainRef.current;
|
||||
if (!el || !main) return;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const pageTop = contentTopInScroll(main, r.top);
|
||||
// ดันจุด yOffset กลับมาชิดขอบบนของพื้นที่มองเห็น — pattern เดียวกับ goToAnnotation
|
||||
const pageTop = r.top + window.scrollY;
|
||||
// ดันจุด yOffset กลับมาชิดใต้ sticky header — pattern เดียวกับ goToAnnotation
|
||||
// ที่ดันขอบบน bbox (yOffset เก็บจาก "ขอบบนของสิ่งที่ดูอยู่" ตอนสร้าง กดแล้วจึงได้
|
||||
// มุมมองเดิมพอดี ไม่ต้องชดเชยครึ่งจอ)
|
||||
scrollToBelowHeader(main, pageTop + (r.height * b.yOffset) / 100);
|
||||
scrollToBelowHeader(pageTop + (r.height * b.yOffset) / 100);
|
||||
}
|
||||
|
||||
function goToAnnotation(a: AnnotationDTO) {
|
||||
|
|
@ -2789,11 +2727,10 @@ export default function PDFViewer({
|
|||
setPreviewData(null);
|
||||
setOpenPinId(null); // กระโดดไปเลือกรายการอื่น = ปิด popover ของ pin เดิมทิ้ง
|
||||
const el = pageWrapRefs.current[a.pageIndex];
|
||||
const main = mainRef.current;
|
||||
if (!el || !main) return;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const boxPct = annotationBBox(a, { width: 100, height: 100 });
|
||||
scrollToBelowHeader(main, contentTopInScroll(main, r.top) + (r.height * boxPct.y) / 100);
|
||||
scrollToBelowHeader(r.top + window.scrollY + (r.height * boxPct.y) / 100);
|
||||
}
|
||||
|
||||
/** คลิก comment pin = เปิด popover + เลือกรายการ (F1) */
|
||||
|
|
@ -2862,9 +2799,6 @@ export default function PDFViewer({
|
|||
}
|
||||
|
||||
function switchTool(t: Tool) {
|
||||
// ไฟล์ภาพ/ไฟล์สแกนล้วน: มาร์กข้อความใช้ไม่ได้ (ไม่มีข้อความให้คลุม) — ปุ่มถูกซ่อน
|
||||
// ไปแล้ว เหลือทางเข้า tool นี้คือคีย์ลัด H จึงกันตรงนี้ให้จบ (สลับ tool อื่นไม่กระทบ)
|
||||
if (t === "highlight" && hideHighlightTool) return;
|
||||
setTool(t);
|
||||
// M4: ปิดเมนูเพราะเปลี่ยน tool — คลิกที่ตามมาต้องไม่กลายเป็นการวางรายการ (เฉพาะเมื่อ
|
||||
// มีเมนูเปิดจริง: คลิกปุ่ม tool เดี่ยวไม่มีเมนูให้ปิด ไม่ต้อง mark กันกลืนคลิกแรก)
|
||||
|
|
@ -2898,21 +2832,13 @@ export default function PDFViewer({
|
|||
* placeholder ทุกหน้ามีขนาดจริงจึงคำนวณ absolute scroll ได้เสมอ) */
|
||||
function goToPage(pageIndex: number) {
|
||||
const el = pageWrapRefs.current[pageIndex];
|
||||
const main = mainRef.current;
|
||||
if (!el || !main) return;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
scrollToBelowHeader(main, contentTopInScroll(main, r.top));
|
||||
scrollToBelowHeader(r.top + window.scrollY);
|
||||
}
|
||||
|
||||
// ─── Render ────────────────────────────────────────────────────────────────
|
||||
|
||||
// N3 ไฟล์ภาพ + PDF สแกนล้วน (คำขอผู้ใช้ 2026-09-22): ไม่มีข้อความให้คลุม — ซ่อน tool
|
||||
// มาร์กข้อความ (ไฮไลต์/เส้นใต้/ขีดฆ่า/ขยุกขยิก) ทั้งปุ่มและเมนูรูปแบบ — กันเข้าทาง
|
||||
// คีย์ลัด H ที่ switchTool และ reset tool ที่ค้างอยู่ (effect ของแต่ละกรณี)
|
||||
const isImageFile = fileKindFromUrl(file.pdfUrl) === "image";
|
||||
const hideHighlightTool = isImageFile || scannedOnly;
|
||||
const visibleTools = hideHighlightTool ? TOOLS.filter((t) => t.key !== "highlight") : TOOLS;
|
||||
|
||||
// ค่าปากกาปัจจุบันรวมเป็นก้อนเดียว — ใช้ทั้ง live preview และตอนบันทึกเส้นใหม่
|
||||
const drawStyle = {
|
||||
color: drawColor,
|
||||
|
|
@ -2934,10 +2860,7 @@ export default function PDFViewer({
|
|||
const basePageWidth = pageSizes[0]?.width ?? 595;
|
||||
|
||||
return (
|
||||
// 2026-09-22: app shell สูงจอเดียว (dvh กันปัญหา URL bar ของจอสัมผัส) —
|
||||
// ตัวเลื่อนเดียวของหน้าคือ <main> ของเอกสาร sidebar/header อยู่กับที่
|
||||
// ไม่หนีไปกับ scroll/zoom ตามคำขอผู้ใช้ (เดิมเลื่อนที่ window ทั้งหน้า)
|
||||
<div className="flex h-dvh overflow-hidden">
|
||||
<div className="flex min-h-screen">
|
||||
{/* tool คลุมข้อความได้ (TEXT_SELECTION_TOOLS) — ซ่อนสี selection ของเบราว์เซอร์
|
||||
ให้เห็นแต่ preview มาร์ก/selection สีฟ้าของเรา (กรองแนวเส้นทางลากแล้ว
|
||||
สะอาดกว่า native) */}
|
||||
|
|
@ -2953,13 +2876,12 @@ export default function PDFViewer({
|
|||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{/* lg+ = แยกคอลัมน์เต็มความสูง shell (เปิดแล้ว content ขยับไปข้าง ๆ ไม่บังกัน)
|
||||
{/* lg+ = sticky แยกคอลัมน์ (เปิดแล้ว content ขยับไปข้าง ๆ ไม่บังกัน)
|
||||
/ < lg = overlay เลื่อนเข้า-ออก กว้างเป็นสัดส่วนของจอกว้างกว่า 288px
|
||||
(ปิดบน desktop ใช้ lg:hidden ออกจาก flow → main เต็มจอ; top-0 จำเป็น
|
||||
ตอน max-lg:fixed ยึดขอบบนจอ) */}
|
||||
(ปิดบน desktop ใช้ lg:hidden ออกจาก flow → main เต็มจอ) */}
|
||||
<aside
|
||||
data-sidebar=""
|
||||
className={`top-0 flex h-full w-72 flex-col shrink-0 border-r border-slate-200 bg-white max-lg:fixed max-lg:left-0 max-lg:z-50 max-lg:w-[75vw] max-lg:max-w-72 max-lg:transition-transform max-lg:duration-200 ${
|
||||
className={`sticky top-0 flex h-screen w-72 flex-col shrink-0 border-r border-slate-200 bg-white max-lg:fixed max-lg:left-0 max-lg:z-50 max-lg:w-[75vw] max-lg:max-w-72 max-lg:transition-transform max-lg:duration-200 ${
|
||||
sidebarOpen
|
||||
? "max-lg:translate-x-0"
|
||||
: "max-lg:pointer-events-none max-lg:-translate-x-full lg:hidden"
|
||||
|
|
@ -3002,7 +2924,7 @@ export default function PDFViewer({
|
|||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="flex h-full min-w-0 flex-1 flex-col">
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* แยกเป็นสองแถว: บน = ชื่อไฟล์ + ตัวเลื่อนหน้า/ซูม (กลาง) + หน้าสรุป,
|
||||
ล่าง = แถบ tool + undo/redo + bookmark/export (ชิดขวา) */}
|
||||
<header className="sticky top-0 z-40 border-b border-slate-200 bg-white">
|
||||
|
|
@ -3059,20 +2981,9 @@ export default function PDFViewer({
|
|||
>
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</button>
|
||||
{/* UX audit 2026-09-22: ตัวเลข % เป็นปุ่มกลับไป fit-width — PDF viewer ที่
|
||||
ผู้ใช้เคยใช้ทุกตัวมี affordance รีเซ็ตซูม คิดจากความกว้าง main ปัจจุบัน */}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="ซูมพอดีความกว้างหน้า"
|
||||
title="ซูมพอดีความกว้างหน้า"
|
||||
className={`w-12 py-2 text-center text-xs tabular-nums text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
|
||||
onClick={() => {
|
||||
const s = fitWidthScale(mainRef.current?.clientWidth, pageSizes[0]?.width);
|
||||
if (s !== null) setScale(s);
|
||||
}}
|
||||
>
|
||||
<span className="w-12 text-center text-xs tabular-nums">
|
||||
{Math.round(scale * 100)}%
|
||||
</button>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="ซูมเข้า"
|
||||
|
|
@ -3117,8 +3028,8 @@ export default function PDFViewer({
|
|||
UX review 2026-09-09: บน desktop ปุ่ม wrap ภายในกรอบได้ / M5 2026-09-14:
|
||||
จอแคบเป็นแถวเดียว ไหลตามแถบทั้งแถวที่เลื่อนแนวนอน */}
|
||||
<div className="flex max-lg:shrink-0 flex-wrap gap-0.5 rounded-lg border border-slate-300 max-lg:flex-nowrap">
|
||||
{visibleTools.map(({ key, label, text, Icon }, i) => {
|
||||
const corner = i === 0 ? "rounded-l-lg" : i === visibleTools.length - 1 ? "rounded-r-lg" : "";
|
||||
{TOOLS.map(({ key, label, text, Icon }, i) => {
|
||||
const corner = i === 0 ? "rounded-l-lg" : i === TOOLS.length - 1 ? "rounded-r-lg" : "";
|
||||
const activeCls = `${
|
||||
tool === key ? "bg-primary text-white" : "text-slate-500 hover:bg-slate-100"
|
||||
} ${FOCUS_RING_CLS}`;
|
||||
|
|
@ -3179,12 +3090,7 @@ export default function PDFViewer({
|
|||
? "bg-slate-100 text-slate-900"
|
||||
: "text-slate-600 hover:bg-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setHighlightStyle(sKey);
|
||||
// แถวเดี่ยวเลือกจบ = ปิดเมนูทันที แต่ห้ามผ่าน markMenuClosed
|
||||
// (guard กลืน tap 300ms — แตะหน้าครั้งถัดไปต้องใช้ได้ทันที)
|
||||
setHighlightMenuOpen(false);
|
||||
}}
|
||||
onClick={() => setHighlightStyle(sKey)}
|
||||
>
|
||||
<SIcon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="flex-1">{sLabel}</span>
|
||||
|
|
@ -3268,13 +3174,10 @@ export default function PDFViewer({
|
|||
}`}
|
||||
onClick={() => {
|
||||
setDrawPen(p);
|
||||
// เลือก pen = รีเซ็ตค่ากลับเป็น preset ของ pen นั้น
|
||||
// เลือก pen = รีเซ็ตค่ากลับเป็น preset ของ pen นั้น (เมนูเปิดค้างให้ปรับต่อ)
|
||||
setDrawColor(DRAW_PENS[p].color);
|
||||
setDrawWidthPct(DRAW_PENS[p].strokeWidthPct);
|
||||
setDrawOpacityPct(DRAW_PENS[p].opacity * 100);
|
||||
// แถวเดี่ยวเลือกจบ = ปิดเมนูทันที แต่ห้ามผ่าน markMenuClosed
|
||||
// (guard กลืน tap 300ms — แถวปรับค่าสี/ความหนา/ความทึบยังเปิดค้างให้ปรับต่อ)
|
||||
setDrawMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
<PenIcon className="h-3.5 w-3.5 shrink-0" />
|
||||
|
|
@ -3370,12 +3273,7 @@ export default function PDFViewer({
|
|||
? "bg-slate-100 text-slate-900"
|
||||
: "text-slate-600 hover:bg-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setShapeKind(kind);
|
||||
// แถวเดี่ยวเลือกจบ = ปิดเมนูทันที แต่ห้ามผ่าน markMenuClosed
|
||||
// (guard กลืน tap 300ms — แถวปรับค่าสี/ความหนายังเปิดค้างให้ปรับต่อ)
|
||||
setShapeMenuOpen(false);
|
||||
}}
|
||||
onClick={() => setShapeKind(kind)}
|
||||
>
|
||||
<KindIcon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="flex-1">{kindLabel}</span>
|
||||
|
|
@ -3455,12 +3353,7 @@ export default function PDFViewer({
|
|||
? "bg-slate-100 text-slate-900"
|
||||
: "text-slate-600 hover:bg-slate-100"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setStampPreset(preset);
|
||||
// แถวเดี่ยวเลือกจบ = ปิดเมนูทันที แต่ห้ามผ่าน markMenuClosed
|
||||
// (guard กลืน tap 300ms — แถวปรับค่าสี/ขนาดยังเปิดค้างให้ปรับต่อ)
|
||||
setStampMenuOpen(false);
|
||||
}}
|
||||
onClick={() => setStampPreset(preset)}
|
||||
>
|
||||
<span className="flex-1">{preset}</span>
|
||||
{stampPreset === preset && <Check className="h-3.5 w-3.5 shrink-0" />}
|
||||
|
|
@ -3742,7 +3635,7 @@ export default function PDFViewer({
|
|||
placeholder="โน้ต (ไม่บังคับ)"
|
||||
className="mt-1.5 w-full resize-none rounded-md border border-slate-300 px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-slate-400"
|
||||
/>
|
||||
<p className="mt-1.5 text-[11px] text-slate-500">วางที่</p>
|
||||
<p className="mt-1.5 text-[11px] text-slate-400">วางที่</p>
|
||||
<Select
|
||||
value={bookmarkComposer.parentId ?? ""}
|
||||
onChange={(e) =>
|
||||
|
|
@ -3816,7 +3709,7 @@ export default function PDFViewer({
|
|||
|
||||
<main
|
||||
ref={mainRef}
|
||||
className="pdf-scroll-main min-h-0 flex-1 space-y-4 overflow-auto overscroll-contain px-4 py-4"
|
||||
className="space-y-4 px-4 py-4"
|
||||
style={{
|
||||
cursor:
|
||||
tool === "pan"
|
||||
|
|
@ -3825,9 +3718,7 @@ export default function PDFViewer({
|
|||
: "grab"
|
||||
: tool === "erase"
|
||||
? ERASER_CURSOR
|
||||
: tool === "comment" || tool === "textbox" || tool === "stamp"
|
||||
? "crosshair" // tool วางของ — บอกว่าคลิกวางได้ (desktop อย่างเดียว จอสัมผัสไม่มี cursor)
|
||||
: undefined,
|
||||
: undefined,
|
||||
}}
|
||||
onPointerDown={(e) => {
|
||||
if (tool !== "pan" || e.button !== 0) return;
|
||||
|
|
@ -3838,7 +3729,7 @@ export default function PDFViewer({
|
|||
onPointerMove={(e) => {
|
||||
const p = panRef.current;
|
||||
if (!p) return;
|
||||
mainRef.current?.scrollBy(p.x - e.clientX, p.y - e.clientY);
|
||||
window.scrollBy(p.x - e.clientX, p.y - e.clientY);
|
||||
panRef.current = { x: e.clientX, y: e.clientY };
|
||||
}}
|
||||
onPointerUp={() => {
|
||||
|
|
@ -3850,10 +3741,12 @@ export default function PDFViewer({
|
|||
setGrabbing(false);
|
||||
}}
|
||||
>
|
||||
{/* M6: hint ไฟล์สแกน — เดิมโชว์ตอน tool highlight บนหน้าที่ไม่มีข้อความ ตอนนี้
|
||||
ไฟล์สแกนล้วน (scannedOnly) ซ่อนปุ่ม+reset tool ไปแล้ว แถบจึงเหลือเป็น
|
||||
defensive ช่วง transition สั้น ๆ เท่านั้น (คดีศาลมี PDF สแกนเยอะ) */}
|
||||
{tool === "highlight" && scannedOnly && (
|
||||
{/* M6: hint ไฟล์สแกน — ทุกหน้าที่ render แล้วไม่มี span เลย (virtualization เห็นเฉพาะ
|
||||
หน้าใกล้ viewport — ไฟล์ผสมหน้าสแกน/หน้า text จึงพูดแบบระดับ "หน้าที่เปิดดู" เท่านั้น)
|
||||
โชว์เฉพาะตอน tool highlight เพื่อไม่รบกวน tool อื่น — คดีศาลมี PDF สแกนเยอะ */}
|
||||
{tool === "highlight" &&
|
||||
Object.keys(pageSpanCount).length > 0 &&
|
||||
Object.values(pageSpanCount).every((n) => n === 0) && (
|
||||
<p className="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
|
||||
หน้าที่เปิดดูเป็นภาพสแกน ไม่มีข้อความให้คลุมไฮไลต์ — ใช้การวาดเส้นหรือกล่องข้อความแทนได้
|
||||
</p>
|
||||
|
|
@ -3871,24 +3764,10 @@ export default function PDFViewer({
|
|||
= แอปค้าง" (แสดง 3 ครั้งแรกต่อ session) */}
|
||||
{tool === "highlight" && coarseTouch && coarseHlHintVisible && (
|
||||
<p className="mb-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs leading-relaxed text-slate-600">
|
||||
โหมดมาร์กข้อความ: ลากบนหน้าเพื่อคลุมข้อความ ลากชิดขอบจอเพื่อเลื่อนหน้า
|
||||
โหมดมาร์กข้อความ: ลากบนหน้าเพื่อคลุมข้อความ ลากชิดขอบบน/ล่างจอเพื่อเลื่อนหน้า
|
||||
หรือสลับเป็นเครื่องมืออื่นเพื่อปัดเลื่อนตามปกติ
|
||||
</p>
|
||||
)}
|
||||
{PLACE_TOOL_HINTS[tool] && (
|
||||
<p className="mb-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs leading-relaxed text-slate-600">
|
||||
{PLACE_TOOL_HINTS[tool]}
|
||||
</p>
|
||||
)}
|
||||
{/* UX audit 2026-09-22: ยางลบลบได้เฉพาะเส้น/รูปทรง/ตรายางของตัวเอง (สเปก F6 เดิม
|
||||
ไม่ขยายตรรกะ) — เดิมลากผ่านไฮไลต์/รายการของผู้อื่นแล้วเงียบเปล่า ผู้ใช้สรุป
|
||||
ว่าแอปไม่ทำงาน จึงบอกขอบเขตตรง ๆ ตอนใช้ tool */}
|
||||
{tool === "erase" && (
|
||||
<p className="mb-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs leading-relaxed text-slate-600">
|
||||
ยางลบลบได้เฉพาะเส้น รูปทรง และตรายางของตัวเองเท่านั้น — ไฮไลต์และรายการอื่น ๆ
|
||||
(รวมของผู้อื่นทุกชนิด) ให้ใช้เครื่องมือ "เลือก" คลิกรายการแล้วกดปุ่มลบ
|
||||
</p>
|
||||
)}
|
||||
{pageSizes.length === 0 ? (
|
||||
loadError ? (
|
||||
<div className="flex h-[70vh] items-center justify-center px-6">
|
||||
|
|
@ -3897,7 +3776,7 @@ export default function PDFViewer({
|
|||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-[70vh] items-center justify-center text-sm text-slate-500">
|
||||
<div className="flex h-[70vh] items-center justify-center text-sm text-slate-400">
|
||||
กำลังโหลดเอกสาร…
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import { Check, ChevronDown, ChevronUp, Highlighter, Strikethrough, Underline }
|
|||
|
||||
import type { HighlightStyle } from "@/db/schema";
|
||||
|
||||
import { colorName } from "@/utils/annotation-display";
|
||||
|
||||
// ตัวควบคุมที่ใช้ร่วมระหว่าง dropdown บนปุ่ม tool (PDFViewer) กับแผงเครื่องมือ
|
||||
// บนกรอบ selection (AnnotationSelectionLayer) — หน้าตา/พฤติกรรมเดียวกันทั้งสองที่
|
||||
|
||||
|
|
@ -55,8 +53,8 @@ export function ColorSwatches({ value, onChange }: { value: string; onChange: (c
|
|||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
aria-label={`เลือกสี ${colorName(c)}`}
|
||||
title={colorName(c)}
|
||||
aria-label={`เลือกสี ${c}`}
|
||||
title={c}
|
||||
className={`aspect-square max-w-8 w-full justify-self-center rounded-full border border-slate-300 transition ${FOCUS_RING_CLS} ${
|
||||
value === c ? "ring-2 ring-primary ring-offset-1" : "hover:scale-110"
|
||||
}`}
|
||||
|
|
|
|||
|
|
@ -374,14 +374,13 @@ export default function AnnotationSidebar({
|
|||
}
|
||||
|
||||
/** ผลการค้นหา F14 หลังกรองตามเจ้าของหมายเหตุ (F4) ฝั่ง client — searchAnnotations
|
||||
* ไม่รับ userId และห้ามแต้ server action: สูตรเดียวกันกับ visibleAnnotations ของ
|
||||
* PDFViewer (รวม REDACTION ของทุกคนไว้เสมอ — D4) — เปลี่ยนตัวกรองหลังค้นแล้ว
|
||||
* ผลกรองทันทีไม่ต้องค้นใหม่ */
|
||||
* ไม่รับ userId และห้ามแต้ server action: สูตรเดียวกับ visibleAnnotations ของ
|
||||
* PDFViewer — เปลี่ยนตัวกรองหลังค้นแล้ว ผลกรองทันทีไม่ต้องค้นใหม่ */
|
||||
const visibleSearchResults = useMemo(() => {
|
||||
if (searchResults === null) return null;
|
||||
if (userFilter === "all") return searchResults;
|
||||
const target = userFilter === "mine" ? userId : userFilter;
|
||||
return searchResults.filter((a) => a.userId === target || a.type === "REDACTION");
|
||||
return searchResults.filter((a) => a.userId === target);
|
||||
}, [searchResults, userFilter, userId]);
|
||||
|
||||
// ─── F19/A7: ประวัติ/กู้คืน — dialog ต่อรายการ (แสดงเฉพาะรายการของตัวเอง) ─────
|
||||
|
|
@ -436,25 +435,9 @@ export default function AnnotationSidebar({
|
|||
const pendingItems = annotations.filter((a) => a.type !== "COMMENT" || !a.resolved);
|
||||
const resolvedItems = annotations.filter((a) => a.type === "COMMENT" && a.resolved);
|
||||
|
||||
// F4: bookmarks ที่แสดง กรองตามเจ้าของหมายเหตุเหมือน annotation (คำขอผู้ใช้
|
||||
// 2026-09-22 ให้ตรงกับ export ที่กรอง PDF outline ตามผู้บันทึก) — หัวข้อแม่โดนกรอง
|
||||
// แต่ลูกยังอยู่ ลูกขึ้น root (พฤติกรรมเดียวกับ buildOutline ของ export) — ใช้เฉพาะจุด
|
||||
// แสดงผล (ต้นไม้/กลุ่มหน้า/ตัวเลขแท็บ): popup ย้ายหัวข้อ (movableTo) กับ bookmarkById
|
||||
// ยังเห็นต้นไม้เต็ม ย้ายไปใต้หัวข้อของคนอื่นได้ตามเดิม
|
||||
const keptBookmarks =
|
||||
userFilter === "all"
|
||||
? bookmarks
|
||||
: bookmarks.filter(
|
||||
(b) => b.userId === (userFilter === "mine" ? userId : userFilter),
|
||||
);
|
||||
const keptIds = new Set(keptBookmarks.map((b) => b.id));
|
||||
const visibleBookmarks = keptBookmarks.map((b) =>
|
||||
b.parentId && !keptIds.has(b.parentId) ? { ...b, parentId: null } : b,
|
||||
);
|
||||
|
||||
// มุมมอง "ตามหน้า": จัดกลุ่มตามหน้า เรียงน้อย→มาก — bookmark เอาเฉพาะ root
|
||||
// (sub ดูในต้นไม้ "ตามหัวข้อ") / annotation เก็บลำดับเดิมตามเวลาสร้าง
|
||||
const bmRootPages = groupByPage(visibleBookmarks.filter((b) => !b.parentId).sort(byPageOrder));
|
||||
const bmRootPages = groupByPage(bookmarks.filter((b) => !b.parentId).sort(byPageOrder));
|
||||
const annPages = groupByPage(annotations);
|
||||
|
||||
// F12/C4: คัดลอก deep link ไปยัง annotation นี้ (?page= + ?ann=)
|
||||
|
|
@ -732,7 +715,7 @@ export default function AnnotationSidebar({
|
|||
}
|
||||
|
||||
const renderBookmarkNode = (b: BookmarkDTO, depth: number) => {
|
||||
const children = visibleBookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder);
|
||||
const children = bookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder);
|
||||
const hasChildren = children.length > 0;
|
||||
const collapsed = collapsedIds.has(b.id);
|
||||
const editing = editBookmark?.id === b.id;
|
||||
|
|
@ -825,14 +808,10 @@ export default function AnnotationSidebar({
|
|||
) : (
|
||||
<div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-slate-100 ${pad}`}>
|
||||
{hasChildren ? (
|
||||
// bm-toggle: คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้าง 14px เท่า spacer
|
||||
// ของแถวลูกเสมอ — บนจอสัมผัส rule coarse ที่ขยายปุ่มเป็น 32px จะดันไอคอน
|
||||
// ของแม่ไปชนแนวของลูก (indent 16px หาย) จึงยกเว้นผ่าน class + hit area
|
||||
// ขยายด้วย ::after แทน (ดู globals.css)
|
||||
<button
|
||||
type="button"
|
||||
aria-label={collapsed ? `กางหัวข้อ ${b.title}` : `หุบหัวข้อ ${b.title}`}
|
||||
className={`shrink-0 bm-toggle text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
|
||||
className={`shrink-0 text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
|
||||
onClick={() => toggleCollapsed(b.id)}
|
||||
>
|
||||
{collapsed ? (
|
||||
|
|
@ -1044,7 +1023,7 @@ export default function AnnotationSidebar({
|
|||
<div role="tablist" aria-label="รายการในแผงข้าง" className="flex shrink-0 border-b border-slate-200">
|
||||
{(
|
||||
[
|
||||
["bookmarks", `Bookmark (${visibleBookmarks.length})`],
|
||||
["bookmarks", `Bookmark (${bookmarks.length})`],
|
||||
["annotations", `Annotation (${annotations.length})`],
|
||||
] as const
|
||||
).map(([key, label]) => (
|
||||
|
|
@ -1335,10 +1314,6 @@ export default function AnnotationSidebar({
|
|||
<p className="p-4 text-center text-xs text-slate-500">
|
||||
ยังไม่มีที่คั่นหน้า — กดปุ่มคั่นหน้าบนแถบเครื่องมือเพื่อเพิ่ม
|
||||
</p>
|
||||
) : visibleBookmarks.length === 0 ? (
|
||||
<p className="p-4 text-center text-xs text-slate-500">
|
||||
ไม่มีที่คั่นหน้าของเจ้าของหมายเหตุที่เลือก
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
{/* สลับมุมมองแท็บนี้: ต้นไม้หัวข้อ ↔ root แยกตามหน้า */}
|
||||
|
|
@ -1366,7 +1341,7 @@ export default function AnnotationSidebar({
|
|||
{!collapsed && (
|
||||
<ul className="space-y-0.5">
|
||||
{roots.map((b) => {
|
||||
const childCount = visibleBookmarks.filter(
|
||||
const childCount = bookmarks.filter(
|
||||
(x) => x.parentId === b.id,
|
||||
).length;
|
||||
return (
|
||||
|
|
@ -1409,7 +1384,7 @@ export default function AnnotationSidebar({
|
|||
) : (
|
||||
<ul className="space-y-0.5">
|
||||
{/* N2: root = หมุดหัวข้อใหญ่ เรียงตามลำดับหน้า (N5) — sub render ซ้อนใต้ผ่าน renderBookmarkNode */}
|
||||
{visibleBookmarks
|
||||
{bookmarks
|
||||
.filter((b) => !b.parentId)
|
||||
.sort(byPageOrder)
|
||||
.map((b) => renderBookmarkNode(b, 1))}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ Index: `(file_id)`
|
|||
- **REDACTION บนจอ:** วาดบน InkLayer เป็น `<rect>` fill `#000` (z-3 อยู่เหนือ textLayer → บังข้อความจริงบนจอ); ปุ่ม tool แยกจาก shape
|
||||
- **Export:** `app/api/annotations/export/route.ts` (GET `?fileId=`) — dep ใหม่ `pdf-lib` + `@pdf-lib/fontkit`:
|
||||
1. อ่านข้อมูลไฟล์จาก DB → อ่าน PDF ต้นฉบับจาก `path.join(process.cwd(), "public", pdfUrl)` — **อ่านอย่างเดียว ห้ามเขียนทับ** (invariant #1) + guard path ต้อง resolve อยู่ใน `public/` กัน path traversal
|
||||
2. โหลด annotations ทั้งหมด (ทุก user) → วาดลง `PDFDocument` ต่อหน้าด้วยพิกัด % × ขนาดจริงของหน้านั้น (`page.getSize()` + แปลงตาม `page.getRotation()` กรณี /Rotate 90/180/270) — เพิ่มพารามิเตอร์ `&user=<userId>` (2026-09-22): export ตาม filter รายคน F4 ที่กำลังดู ("mine" resolve เป็น userId ฝั่ง client ก่อนส่ง) — กรองเฉพาะ annotation ของ userId นั้น **ยกเว้น REDACTION ติดไปเสมอ** (D4) และเติมชื่อผู้ใช้ (จาก `user_name` ที่ mirror ในตาราง) ท้ายชื่อไฟล์ `…-annotated-<ชื่อ>.pdf`; bookmarks outline กรองตามผู้บันทึกด้วย (คำขอผู้ใช้ 2026-09-22) — หัวข้อแม่โดนกรองแต่ลูกยังอยู่ ลูกขึ้น root
|
||||
2. โหลด annotations ทั้งหมด (ทุก user) → วาดลง `PDFDocument` ต่อหน้าด้วยพิกัด % × ขนาดจริงของหน้านั้น (`page.getSize()` + แปลงตาม `page.getRotation()` กรณี /Rotate 90/180/270)
|
||||
3. ลำดับวาดต่อหน้า: HIGHLIGHT rect (fill alpha ~0.35) → DRAW polyline (strokeWidth % → pt) → SHAPE → REDACTION **ดำทึบ #000 ทับจริง** → TEXTBOX/STAMP ถ้าทำแล้ว (F17/F18)
|
||||
4. COMMENT = **sticky note จริงของ PDF** (annotation dict `/Subtype /Text` — คลิกหมุดที่ reader แล้วเปิด popup อ่าน): `/Contents` = message + replies ต่อท้ายทีละบรรทัด (`— ชื่อ: ข้อความ`, F9), `/T` = ผู้เขียน, `/C` สีเหลืองเดียวกับหมุดบนจอ, `/M` เวลาแก้ไขล่าสุด, `/F 4` (Print); ไม่วาดข้อความ flatten ทับหน้ากระดาษ (annotation object อยู่เหนือ content เสมอ ไม่โดนกลบ) — และ `note` ของ annotation ชนิดอื่น (N1 ทุกชนิดยกเว้น COMMENT) ได้ sticky note เล็กแนบมุมขวาบนของ bbox ของรายการนั้น (Chrome/Edge hover แสดง tooltip จาก `/Contents`, Acrobat คลิกเปิด popup)
|
||||
5. Bookmarks (N2) → **PDF outline** (แผง Bookmarks ของ reader กดกระโดดได้): ต่อ `/Outlines` dict เอง (pdf-lib ไม่มี API ระดับสูง) — โครงสร้างตาม `parent_id` เรียงตาม `createdAt` เหมือน sidebar, `/Title` เป็น PDFHexString (ภาษาไทยได้), `/Dest [pageRef /XYZ x y null]` จาก pageIndex + yOffset (แปลงผ่าน `displayToPdfPoint`) ใช้ตำแหน่ง yOffset **เป๊ะ ๆ** — yOffset ของ bookmark มีนิยามเป็น "จุดจริงบนหน้า" เหมือนพิกัด annotation (เก็บจากขอบบนของแถบมองเห็นใต้ header ตอนสร้าง และกดในเว็บแล้วจุดถูกดันกลับมาชิดใต้ header ผ่าน `scrollToBelowHeader` แบบเดียวกับ `goToAnnotation`) ซึ่งตรงกับพฤติกรรม `/XYZ` ของ PDF ที่วางจุดยึดติดขอบบน viewport โดยไม่ต้องชดเชย, เชื่อม First/Last/Prev/Next ครบ และ Count เป็นบวก = แผงเปิดทั้งหมดตอนเปิดไฟล์
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const MOVE_THRESHOLD_PX = 8;
|
|||
/** อ่าน caret จากจุด y ตรงนิ้วเลื่อนขึ้น 12px — นิ้วบังข้อความที่กำลังเลือก
|
||||
* (เฉพาะ pointerType touch; เมาส์/สไตลัสชี้แม่นอยู่แล้ว) */
|
||||
const FINGER_OFFSET_PX = 12;
|
||||
/** นิ้วอยู่ใกล้ขอบของพื้นที่เอกสาร (ทั้ง 4 ด้าน) แค่นี้ = auto-scroll ต่อ (rAF loop) */
|
||||
/** นิ้วอยู่ใกล้ขอบบน/ล่างของ viewport แค่นี้ = auto-scroll ต่อ (rAF loop) */
|
||||
const AUTOSCROLL_MARGIN_PX = 60;
|
||||
const AUTOSCROLL_MAX_SPEED_PX = 12;
|
||||
|
||||
|
|
@ -503,39 +503,35 @@ export function useCustomSelection({
|
|||
});
|
||||
};
|
||||
|
||||
/** auto-scroll ระหว่างลากค้างใกล้ขอบจอ — rAF loop เลื่อน scroll container ของ
|
||||
* เอกสาร (el = <main> ตัวเลื่อนเดียวของ viewer, ทั้งแกนตั้งและแกนนอนกรณี
|
||||
* ซูมจนหน้ากว้างเกินจอ) แล้วคำนวณ preview ใหม่ (จุดนิ้วเดิมชี้ข้อความใหม่หลัง
|
||||
* scroll) จบเองเมื่อเลิกลาก — ขอบวัดจากกรอบของ el เอง (ใต้ header) ไม่ใช่
|
||||
* ขอบจอ เพราะส่วนบนถูก header บังอยู่ */
|
||||
/** auto-scroll ระหว่างลากค้างใกล้ขอบจอ — rAF loop เลื่อน window แล้วคำนวณ preview
|
||||
* ใหม่ (จุดนิ้วเดิมชี้ข้อความใหม่หลัง scroll) จบเองเมื่อเลิกลาก */
|
||||
const startAutoScroll = () => {
|
||||
if (scrollRafRef.current !== null) return;
|
||||
const step = () => {
|
||||
scrollRafRef.current = null;
|
||||
const d = dragRef.current;
|
||||
if (!d?.active) return;
|
||||
const br = el.getBoundingClientRect();
|
||||
const speed = (into: number) =>
|
||||
Math.max(
|
||||
const vh = window.innerHeight;
|
||||
let dy = 0;
|
||||
if (d.curPt.y < AUTOSCROLL_MARGIN_PX) {
|
||||
dy = -Math.max(
|
||||
1,
|
||||
Math.ceil(
|
||||
(into / AUTOSCROLL_MARGIN_PX) * AUTOSCROLL_MAX_SPEED_PX,
|
||||
((AUTOSCROLL_MARGIN_PX - d.curPt.y) / AUTOSCROLL_MARGIN_PX) *
|
||||
AUTOSCROLL_MAX_SPEED_PX,
|
||||
),
|
||||
);
|
||||
} else if (d.curPt.y > vh - AUTOSCROLL_MARGIN_PX) {
|
||||
dy = Math.max(
|
||||
1,
|
||||
Math.ceil(
|
||||
((d.curPt.y - (vh - AUTOSCROLL_MARGIN_PX)) / AUTOSCROLL_MARGIN_PX) *
|
||||
AUTOSCROLL_MAX_SPEED_PX,
|
||||
),
|
||||
);
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
if (d.curPt.x < br.left + AUTOSCROLL_MARGIN_PX) {
|
||||
dx = -speed(br.left + AUTOSCROLL_MARGIN_PX - d.curPt.x);
|
||||
} else if (d.curPt.x > br.right - AUTOSCROLL_MARGIN_PX) {
|
||||
dx = speed(d.curPt.x - (br.right - AUTOSCROLL_MARGIN_PX));
|
||||
}
|
||||
if (d.curPt.y < br.top + AUTOSCROLL_MARGIN_PX) {
|
||||
dy = -speed(br.top + AUTOSCROLL_MARGIN_PX - d.curPt.y);
|
||||
} else if (d.curPt.y > br.bottom - AUTOSCROLL_MARGIN_PX) {
|
||||
dy = speed(d.curPt.y - (br.bottom - AUTOSCROLL_MARGIN_PX));
|
||||
}
|
||||
if (dx !== 0 || dy !== 0) {
|
||||
el.scrollBy(dx, dy);
|
||||
if (dy !== 0) {
|
||||
window.scrollBy(0, dy);
|
||||
schedulePreview();
|
||||
}
|
||||
scrollRafRef.current = requestAnimationFrame(step);
|
||||
|
|
|
|||
|
|
@ -172,8 +172,7 @@ const COLOR_NAMES: Record<string, string> = {
|
|||
"#b91c1c": "แดงเข้ม",
|
||||
};
|
||||
|
||||
/** export ให้ ToolControls ใช้ทำ aria-label/title ของปุ่มสีเป็นชื่อไทยด้วย (UX audit 2026-09-22) */
|
||||
export function colorName(c: string): string {
|
||||
function colorName(c: string): string {
|
||||
return COLOR_NAMES[c.toLowerCase()] ?? c;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue