chamomind/eCourt-note
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

คลุมข้อความได้ทุก tool ที่ไม่ได้วาด: comment/textbox/stamp ลากคลุมได้ selection สีฟ้าเหมือน tool เลือกข้อความ (ปล่อยเมาส์จากการลากไม่วางรายการ)

Browse source 
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2026-09-11 17:41:58 +07:00
parent ca74fb1843
commit 9e5083dae1
2 changed files with 30 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/pdf/PDFViewer.tsx
View file

@ -136,6 +136,17 @@ type Tool =
| "textbox"
| "stamp";
/** tool ที่ลากคลุมข้อความใน textLayer ได้ (ตัวที่ textLayer ยังรับ pointer อยู่) —
* ทั้งหมดซ่อน native selection แล้ววาดของเราเองแทน: highlight = preview มาร์กสด,
* select/comment/textbox/stamp = selection สีฟ้าสะอาด (กรองแนวเส้นทางลาก) */
const TEXT_SELECTION_TOOLS = new Set<Tool>([
"select",
"highlight",
"comment",
"textbox",
"stamp",
]);
type Composer = {
pageIndex: number;
position: Point; // % ของหน้า
@ -1940,9 +1951,10 @@ export default function PDFViewer({
// tool highlight — ฟัง selectionchange ระหว่างลากเพื่อวาด preview มาร์กสด ๆ
// (แสดงเส้น/สีตามรูปแบบที่ตั้งไว้ทันที ไม่ต้องรอปล่อยเมาส์)
// tool เลือกข้อความ — ใช้กลไกเดียวกันแต่วาดเป็น selection สีฟ้าสะอาด ๆ (ไม่สร้างไฮไลต์)
// tool ที่เหลือของ TEXT_SELECTION_TOOLS (select/comment/textbox/stamp) — ใช้กลไก
// เดียวกันแต่วาดเป็น selection สีฟ้าสะอาด ๆ (ไม่สร้างไฮไลต์ ไม่วางรายการ)
useEffect(() => {
if (tool !== "highlight" && tool !== "select") {
if (!TEXT_SELECTION_TOOLS.has(tool)) {
setLiveMark(null);
setSelectPreview(null);
return;
@ -2003,7 +2015,7 @@ export default function PDFViewer({
// (เทียบข้อความดิบ + ความกว้างหน้า — ต่างจากตอน mouseup = selection/zoom เปลี่ยน
// ไปแล้ว กลับไปใช้ rect ของ range เองทั้งหมด) เรียงตามตำแหน่งบนจอแล้วล้างขยะ
useEffect(() => {
if (tool !== "highlight" && tool !== "select") return;
if (!TEXT_SELECTION_TOOLS.has(tool)) return;
const onCopy = (e: ClipboardEvent) => {
const selection = window.getSelection();
if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
@ -2119,6 +2131,11 @@ export default function PDFViewer({
pageIndex: number,
pageEl: HTMLElement,
) {
// ปล่อยเมาส์จากการลากคลุมข้อความ (comment/textbox/stamp ก็คลุมได้) ไม่ถือเป็นคลิก —
// selection ยังค้างตอน click ยิง ให้ผ่านไปเฉย ๆ เหมือน tool เลือกข้อความ ไม่เปิด
// composer/วางตรายาง (คลิกล้วน ๆ selection ถูกยุบตั้งแต่ mousedown จึงไม่โดน guard นี้)
const selection = window.getSelection();
if (selection && !selection.isCollapsed) return;
if (bookmarkComposer) setBookmarkComposer(null); // คลิกหน้า = ปิด popup bookmark (N2)
// คลิกลงหน้า = เลิกเลือก annotation ก่อนทุก tool — แผงเครื่องมือของกรอบ selection
// ต้องปิดเมื่อคลิกไปสร้างรายการใหม่ (comment/textbox/stamp เดิม return ก่อนถึง
@ -2322,9 +2339,10 @@ export default function PDFViewer({
return (
<div className="flex min-h-screen">
{/* tool highlight/select — ซ่อนสี selection ของเบราว์เซอร์ ให้เห็นแต่ preview
มาร์ก/selection สีฟ้าของเรา (กรองแนวเส้นทางลากแล้ว สะอาดกว่า native) */}
{(tool === "highlight" || tool === "select") && (
{/* tool คลุมข้อความได้ (TEXT_SELECTION_TOOLS) — ซ่อนสี selection ของเบราว์เซอร์
ให้เห็นแต่ preview มาร์ก/selection สีฟ้าของเรา (กรองแนวเส้นทางลากแล้ว
สะอาดกว่า native) */}
{TEXT_SELECTION_TOOLS.has(tool) && (
<style>{`.textLayer span::selection, .textLayer br::selection { background: transparent; }`}</style>
)}
{/* UX review 2026-09-09: backdrop กันคลิกทะลุใต้ sidebar overlay (เฉพาะ < xl)
@ -3067,14 +3085,14 @@ export default function PDFViewer({
onMouseUp={() => handleMouseUpOnPage(i)}
onClick={(e) => handlePageClick(e, i, e.currentTarget)}
onMouseDown={(e) => {
// จุดเริ่มเส้นทางลากของ tool highlight/select (กรอง selection rects)
if (tool !== "highlight" && tool !== "select") return;
// จุดเริ่มเส้นทางลากของ tool คลุมข้อความ (กรอง selection rects)
if (!TEXT_SELECTION_TOOLS.has(tool)) return;
selDragStartRef.current = { x: e.clientX, y: e.clientY };
selDragEndRef.current = { x: e.clientX, y: e.clientY };
}}
onMouseMove={(e) => {
// ตำแหน่งเมาส์ล่าสุดระหว่างลากค้างปุ่ม (buttons=1)
if ((tool === "highlight" || tool === "select") && e.buttons === 1) {
if (TEXT_SELECTION_TOOLS.has(tool) && e.buttons === 1) {
selDragEndRef.current = { x: e.clientX, y: e.clientY };
}
handlePageHoverMove(e, i);