adminandClaude Fable 5
77ed917913
Trước đây phải bấm nút '✏️ Sửa nội dung' rồi mới double-click được. Giờ: - Đang xem bình thường, đúp chuột vào chữ → hit-test qua edit_list_objects tại điểm đúp (toạ độ PDF qua cssToPdf); có text object → tự vào chế độ Sửa nội dung đúng trang + mở NGAY ô sửa tại đoạn đó (startTextEdit: đoạn nhiều dòng ra textarea reflow, 1 dòng ra ô sửa dòng) - Đúp vùng trống: không làm gì (như Foxit). Đang cầm công cụ chú thích / organize / redact: bỏ qua. Element chú thích (freetext/note/markup) giữ handler đúp riêng của chúng - pickTextAt: ưu tiên box chứa điểm (nới 3pt, chọn box nhỏ nhất khi chồng), fallback box gần nhất trong 12pt; enterEditMode nhận pageIndex tuỳ chọn; editPendingPoint tiêu thụ sau loadEditPage; bỏ selection 1 từ do browser tự bôi khi đúp trên text layer Docs: 13 (E31–E33), README. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HgnbPwSoRGNH7LHsDUmRpk
3517 lines
134 KiB
JavaScript
3517 lines
134 KiB
JavaScript
const { invoke } = window.__TAURI__.core;
|
||
const $ = (id) => document.getElementById(id);
|
||
|
||
const PT_PER_PX = 96 / 72; // 1pt = 1.333px ở zoom 100%
|
||
const DPR = window.devicePixelRatio || 1;
|
||
|
||
const state = {
|
||
path: null,
|
||
pages: [], // [{index,widthPt,heightPt}]
|
||
zoom: 1.0, // 1.0 = 100%
|
||
slots: [], // phần tử DOM theo trang
|
||
visible: new Set(), // trang đang trong vùng nhìn
|
||
current: 0, // trang hiện tại (trên cùng vùng nhìn)
|
||
hits: [], // kết quả tìm kiếm
|
||
hitIdx: -1,
|
||
textLayers: {}, // cache hộp ký tự theo trang
|
||
tool: null, // công cụ chú thích đang chọn
|
||
color: [255, 230, 0], // màu chú thích (RGB)
|
||
annotSpecs: [], // chú thích chưa lưu
|
||
selectedId: null, // annotation đang chọn
|
||
recentColors: [], // màu dùng gần đây
|
||
undoStack: [], // snapshot {annotSpecs,pagePlan} trước mỗi hành động (Ctrl+Z)
|
||
redoStack: [],
|
||
pagePlan: [], // [{kind:'existing'|'blank', source, srcIndex, widthPt, heightPt, rotationDelta, crop}]
|
||
organizeMode: false,
|
||
orgSelected: new Set(), // index trong pagePlan đang chọn (chế độ Tổ chức trang)
|
||
orgAnchor: null, // index neo cho Shift-click chọn dải
|
||
orgThumbs: new Map(), // cache dataURL thumbnail theo "source#srcIndex" (tránh render lại khi chọn/xoay)
|
||
// ----- Phase 4: Sửa nội dung -----
|
||
editMode: false,
|
||
editPage: 0, // trang đang sửa
|
||
editBase: null, // file làm việc hiện tại (mỗi op materialize ra file tạm mới)
|
||
editUndo: [], // stack đường dẫn editBase trước mỗi op
|
||
editRedo: [],
|
||
editObjects: [], // ObjectInfo của editPage (đọc lại từ editBase sau mỗi op)
|
||
editSel: null, // index object đang chọn
|
||
editScale: 1, // px/pt của ảnh stage
|
||
editArm: null, // 'text' | 'image' khi đang chờ click đặt; null = không
|
||
editPendingImage: null, // đường dẫn ảnh chờ đặt (Thêm ảnh)
|
||
editPendingPoint: null, // điểm PDF chờ mở ô sửa (đúp chuột từ viewer thường)
|
||
editColor: [0, 0, 0], // màu chữ áp khi sửa/thêm text
|
||
editTemps: [], // mọi file tạm đã materialize trong phiên sửa (để dọn)
|
||
secMode: false, // thanh Bảo mật (Phase 5) đang mở
|
||
redactMarks: [], // [{page, rect{left,bottom,right,top}}] chờ áp dụng
|
||
formMode: false, // thanh Form (Phase 6) đang mở
|
||
formFields: [], // field đọc từ tài liệu hiện tại
|
||
convMode: false, // thanh Chuyển đổi (Phase 7) đang mở
|
||
};
|
||
const UNDO_LIMIT = 50;
|
||
let annotIdSeq = 1;
|
||
const PRESET_COLORS = [
|
||
[255, 230, 0], [255, 145, 0], [255, 0, 0], [233, 30, 99],
|
||
[156, 39, 176], [63, 81, 181], [33, 150, 243], [0, 188, 212],
|
||
[0, 150, 136], [76, 175, 80], [0, 0, 0], [120, 120, 120],
|
||
];
|
||
|
||
function displaySize(p) {
|
||
return {
|
||
w: Math.round(p.widthPt * PT_PER_PX * state.zoom),
|
||
h: Math.round(p.heightPt * PT_PER_PX * state.zoom),
|
||
};
|
||
}
|
||
|
||
// ---------- Khởi tạo ----------
|
||
|
||
function shortName(path) {
|
||
return path.split(/[\\/]/).pop();
|
||
}
|
||
|
||
async function loadDocument(path) {
|
||
try {
|
||
state.path = path;
|
||
state.textLayers = {};
|
||
state.hits = [];
|
||
state.hitIdx = -1;
|
||
state.current = 0;
|
||
state.annotSpecs = [];
|
||
state.undoStack = [];
|
||
state.redoStack = [];
|
||
state.redactMarks = [];
|
||
updateRedactButtons();
|
||
state.formFields = [];
|
||
updateUndoRedoButtons();
|
||
setTool(null);
|
||
updateAnnotCount();
|
||
buildComments();
|
||
$("searchBox").value = "";
|
||
$("searchCount").textContent = "—";
|
||
|
||
let meta;
|
||
try {
|
||
meta = await invoke("open_document", { path });
|
||
} catch (e) {
|
||
// File hỏng (xref/trailer sai) — tự sửa qua QPDF rồi mở lại (Phase 3).
|
||
const usable = await invoke("ensure_openable", { path, password: null });
|
||
if (usable === path) throw e;
|
||
state.path = usable;
|
||
meta = await invoke("open_document", { path: usable });
|
||
}
|
||
state.pages = meta.pages;
|
||
buildPages();
|
||
buildThumbnails();
|
||
buildOutline(meta.outline);
|
||
$("status").textContent = `${meta.pageCount} trang · ${shortName(path)}`;
|
||
updatePageTotal();
|
||
updateCurrentPage();
|
||
updateZoomLabel();
|
||
|
||
state.pagePlan = await invoke("organize_identity_plan", { path: state.path, password: null }).catch(() => []);
|
||
state.orgSelected = new Set();
|
||
state.orgAnchor = null;
|
||
state.orgThumbs = new Map();
|
||
if (state.organizeMode) buildOrganizeGrid();
|
||
} catch (e) {
|
||
$("status").textContent = "Lỗi mở tài liệu: " + e;
|
||
}
|
||
}
|
||
|
||
async function boot() {
|
||
// Nếu app được mở qua "Open with FoFreeXit" / double-click file PDF trong
|
||
// Explorer, Windows truyền đường dẫn file qua command-line — ưu tiên mở nó.
|
||
const fromExplorer = await invoke("initial_file");
|
||
loadDocument(fromExplorer || (await invoke("default_pdf")));
|
||
}
|
||
|
||
async function openFile() {
|
||
try {
|
||
const path = await invoke("pick_pdf");
|
||
if (path) loadDocument(path);
|
||
} catch (e) {
|
||
$("status").textContent = "Lỗi chọn file: " + e;
|
||
}
|
||
}
|
||
|
||
let pageObserver;
|
||
|
||
function buildPages() {
|
||
const container = $("pages");
|
||
container.innerHTML = "";
|
||
state.slots = [];
|
||
state.visible.clear();
|
||
|
||
for (const p of state.pages) {
|
||
const slot = document.createElement("div");
|
||
slot.className = "page-slot";
|
||
slot.dataset.index = p.index;
|
||
const { w, h } = displaySize(p);
|
||
slot.style.width = w + "px";
|
||
slot.style.height = h + "px";
|
||
|
||
const ph = document.createElement("div");
|
||
ph.className = "ph";
|
||
ph.textContent = `Trang ${p.index + 1}`;
|
||
slot.appendChild(ph);
|
||
|
||
const overlay = document.createElement("div");
|
||
overlay.className = "overlay";
|
||
slot.appendChild(overlay);
|
||
|
||
const annotlayer = document.createElement("div");
|
||
annotlayer.className = "annotlayer";
|
||
slot.appendChild(annotlayer);
|
||
|
||
container.appendChild(slot);
|
||
state.slots[p.index] = slot;
|
||
}
|
||
|
||
if (pageObserver) pageObserver.disconnect();
|
||
pageObserver = new IntersectionObserver(onIntersect, {
|
||
root: $("viewport"),
|
||
rootMargin: "500px 0px",
|
||
threshold: 0.01,
|
||
});
|
||
for (const slot of state.slots) pageObserver.observe(slot);
|
||
$("viewport").scrollTop = 0;
|
||
}
|
||
|
||
function onIntersect(entries) {
|
||
for (const e of entries) {
|
||
const idx = Number(e.target.dataset.index);
|
||
if (e.isIntersecting) {
|
||
state.visible.add(idx);
|
||
renderSlot(idx);
|
||
} else {
|
||
state.visible.delete(idx);
|
||
}
|
||
}
|
||
updateCurrentPage();
|
||
}
|
||
|
||
function zoomKey() {
|
||
return state.zoom.toFixed(3);
|
||
}
|
||
|
||
async function renderSlot(idx) {
|
||
const slot = state.slots[idx];
|
||
if (!slot) return;
|
||
if (slot.dataset.renderedZoom === zoomKey()) return; // đã render ở zoom này
|
||
slot.dataset.renderedZoom = zoomKey();
|
||
|
||
const p = state.pages[idx];
|
||
const renderWidth = Math.round(p.widthPt * PT_PER_PX * state.zoom * DPR);
|
||
try {
|
||
const dataUrl = await invoke("render_page", {
|
||
path: state.path,
|
||
page: idx,
|
||
width: renderWidth,
|
||
});
|
||
let img = slot.querySelector("img");
|
||
if (!img) {
|
||
img = document.createElement("img");
|
||
slot.insertBefore(img, slot.firstChild);
|
||
}
|
||
img.src = dataUrl;
|
||
const ph = slot.querySelector(".ph");
|
||
if (ph) ph.remove();
|
||
buildTextLayer(idx);
|
||
drawAnnotsForPage(idx);
|
||
} catch (e) {
|
||
slot.dataset.renderedZoom = ""; // cho phép thử lại
|
||
$("status").textContent = "Lỗi render trang " + (idx + 1) + ": " + e;
|
||
}
|
||
}
|
||
|
||
// Dựng lớp text trong suốt cho phép chọn & copy text trên ảnh trang.
|
||
async function buildTextLayer(idx) {
|
||
const slot = state.slots[idx];
|
||
if (!slot) return;
|
||
let layer = slot.querySelector(".textlayer");
|
||
if (!layer) {
|
||
layer = document.createElement("div");
|
||
layer.className = "textlayer";
|
||
slot.appendChild(layer);
|
||
}
|
||
let boxes = state.textLayers[idx];
|
||
if (!boxes) {
|
||
try {
|
||
boxes = await invoke("page_text_layer", { path: state.path, page: idx });
|
||
state.textLayers[idx] = boxes;
|
||
} catch {
|
||
return;
|
||
}
|
||
}
|
||
const p = state.pages[idx];
|
||
const scale = PT_PER_PX * state.zoom;
|
||
layer.innerHTML = "";
|
||
const frag = document.createDocumentFragment();
|
||
|
||
// Gom ký tự thành "từ" (mỗi từ = 1 span) để double-click chọn cả từ,
|
||
// kéo/Shift+Click chọn dải, và copy giữ khoảng trắng (chèn text node " ").
|
||
let word = null;
|
||
const flush = () => {
|
||
if (word && word.text) {
|
||
const w = (word.right - word.left) * scale;
|
||
const h = (word.top - word.bottom) * scale;
|
||
const span = document.createElement("span");
|
||
span.textContent = word.text;
|
||
span.style.left = word.left * scale + "px";
|
||
span.style.top = (p.heightPt - word.top) * scale + "px";
|
||
span.style.width = Math.max(w, 1) + "px";
|
||
span.style.height = h + "px";
|
||
span.style.fontSize = h * 0.82 + "px";
|
||
span.style.lineHeight = h + "px";
|
||
frag.appendChild(span);
|
||
}
|
||
word = null;
|
||
};
|
||
|
||
for (const b of boxes) {
|
||
const isWs = !b.ch || /\s/.test(b.ch);
|
||
if (isWs) {
|
||
flush();
|
||
frag.appendChild(document.createTextNode(b.ch && /\n/.test(b.ch) ? "\n" : " "));
|
||
continue;
|
||
}
|
||
const h = b.top - b.bottom;
|
||
if (h <= 0) continue;
|
||
if (word) {
|
||
const sameLine = Math.abs(b.bottom - word.bottom) <= 0.6 * (word.top - word.bottom);
|
||
const gap = b.left - word.right;
|
||
if (!sameLine || gap > 0.3 * (word.top - word.bottom)) {
|
||
flush();
|
||
frag.appendChild(document.createTextNode(" "));
|
||
}
|
||
}
|
||
if (!word) {
|
||
word = { text: b.ch, left: b.left, right: b.right, top: b.top, bottom: b.bottom };
|
||
} else {
|
||
word.text += b.ch;
|
||
word.left = Math.min(word.left, b.left);
|
||
word.right = Math.max(word.right, b.right);
|
||
word.top = Math.max(word.top, b.top);
|
||
word.bottom = Math.min(word.bottom, b.bottom);
|
||
}
|
||
}
|
||
flush();
|
||
layer.appendChild(frag);
|
||
}
|
||
|
||
function updateCurrentPage() {
|
||
const vp = $("viewport");
|
||
const probe = vp.scrollTop + vp.clientHeight * 0.35;
|
||
let cur = 0;
|
||
for (const slot of state.slots) {
|
||
if (!slot) continue;
|
||
if (slot.offsetTop <= probe) cur = Number(slot.dataset.index);
|
||
else break;
|
||
}
|
||
if (cur !== state.current) {
|
||
state.current = cur;
|
||
if (document.activeElement !== $("pageInput")) $("pageInput").value = cur + 1;
|
||
document.querySelectorAll(".thumb").forEach((t) => {
|
||
t.classList.toggle("active", Number(t.dataset.index) === cur);
|
||
});
|
||
}
|
||
}
|
||
|
||
function updatePageTotal() {
|
||
$("pageTotal").textContent = state.pages.length || "—";
|
||
$("pageInput").value = state.pages.length ? state.current + 1 : "";
|
||
}
|
||
|
||
function goToPageInput() {
|
||
const n = parseInt($("pageInput").value, 10);
|
||
if (!Number.isFinite(n)) { $("pageInput").value = state.current + 1; return; }
|
||
const idx = Math.max(0, Math.min(state.pages.length - 1, n - 1));
|
||
goToPage(idx);
|
||
$("pageInput").value = idx + 1;
|
||
}
|
||
|
||
function gotoPrevPage() { goToPage(Math.max(0, state.current - 1)); }
|
||
function gotoNextPage() { goToPage(Math.min(state.pages.length - 1, state.current + 1)); }
|
||
|
||
// ---------- Thumbnails ----------
|
||
|
||
let thumbObserver;
|
||
const THUMB_W = 130;
|
||
|
||
function buildThumbnails() {
|
||
const box = $("thumbs");
|
||
box.innerHTML = "";
|
||
if (thumbObserver) thumbObserver.disconnect();
|
||
// Lazy: chỉ render thumbnail khi cuộn tới (quan trọng với file 1000+ trang).
|
||
thumbObserver = new IntersectionObserver(onThumbIntersect, {
|
||
root: box,
|
||
rootMargin: "400px 0px",
|
||
threshold: 0.01,
|
||
});
|
||
for (const p of state.pages) {
|
||
const el = document.createElement("div");
|
||
el.className = "thumb";
|
||
el.dataset.index = p.index;
|
||
// Giữ chỗ đúng tỉ lệ để placeholder có chiều cao (observer hoạt động đúng).
|
||
const thumbH = Math.round(THUMB_W * (p.heightPt / p.widthPt));
|
||
el.style.minHeight = thumbH + 18 + "px";
|
||
el.innerHTML = `<img alt="t${p.index}" style="height:${thumbH}px"/><div class="n">${p.index + 1}</div>`;
|
||
el.addEventListener("click", () => goToPage(p.index));
|
||
box.appendChild(el);
|
||
thumbObserver.observe(el);
|
||
}
|
||
}
|
||
|
||
function onThumbIntersect(entries) {
|
||
for (const e of entries) {
|
||
if (!e.isIntersecting) continue;
|
||
const el = e.target;
|
||
if (el.dataset.loaded) continue;
|
||
el.dataset.loaded = "1";
|
||
const idx = Number(el.dataset.index);
|
||
invoke("render_page", { path: state.path, page: idx, width: 150 })
|
||
.then((url) => {
|
||
const img = el.querySelector("img");
|
||
img.src = url;
|
||
img.style.height = ""; // trả lại auto theo tỉ lệ
|
||
el.style.minHeight = "";
|
||
})
|
||
.catch(() => { el.dataset.loaded = ""; });
|
||
}
|
||
}
|
||
|
||
// ---------- Outline ----------
|
||
|
||
function buildOutline(items) {
|
||
const box = $("outline");
|
||
box.innerHTML = "";
|
||
if (!items.length) {
|
||
box.innerHTML = `<div class="oitem" style="color:#777">Không có outline</div>`;
|
||
return;
|
||
}
|
||
for (const it of items) {
|
||
const el = document.createElement("div");
|
||
el.className = "oitem";
|
||
el.style.paddingLeft = 6 + it.level * 14 + "px";
|
||
el.textContent = it.title || "(không tiêu đề)";
|
||
if (it.pageIndex != null) {
|
||
el.addEventListener("click", () => goToPage(it.pageIndex));
|
||
} else {
|
||
el.style.color = "#777";
|
||
}
|
||
box.appendChild(el);
|
||
}
|
||
}
|
||
|
||
// ---------- Điều hướng ----------
|
||
|
||
function goToPage(idx) {
|
||
const slot = state.slots[idx];
|
||
if (slot) slot.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
}
|
||
|
||
// ---------- Zoom ----------
|
||
|
||
function setZoom(z) {
|
||
finishEditing();
|
||
closeNotePopup();
|
||
closeColorPopover();
|
||
state.zoom = Math.max(0.25, Math.min(5, z));
|
||
// Phản hồi tức thì & mượt: chỉ đổi kích thước slot → ảnh sẵn có co giãn theo.
|
||
for (const p of state.pages) {
|
||
const slot = state.slots[p.index];
|
||
if (!slot) continue;
|
||
const { w, h } = displaySize(p);
|
||
slot.style.width = w + "px";
|
||
slot.style.height = h + "px";
|
||
}
|
||
// Overlay/annotation rẻ → vẽ lại ngay để bám theo.
|
||
drawHighlightsForVisible();
|
||
for (const idx of state.visible) drawAnnotsForPage(idx);
|
||
updateZoomLabel();
|
||
// Render NÉT bằng PDFium chỉ sau khi ngừng zoom (tránh flood gây lag/crash).
|
||
scheduleSharpRerender();
|
||
}
|
||
|
||
let sharpTimer = null;
|
||
function scheduleSharpRerender() {
|
||
clearTimeout(sharpTimer);
|
||
sharpTimer = setTimeout(() => {
|
||
for (const idx of state.visible) {
|
||
const slot = state.slots[idx];
|
||
if (slot) {
|
||
slot.dataset.renderedZoom = ""; // buộc render lại ở zoom mới
|
||
clearOverlay(slot);
|
||
}
|
||
renderSlot(idx);
|
||
}
|
||
drawHighlightsForVisible();
|
||
for (const idx of state.visible) drawAnnotsForPage(idx);
|
||
}, 180);
|
||
}
|
||
|
||
const ZOOM_PRESETS = [50, 75, 100, 125, 150, 200, 300, 400];
|
||
function buildZoomSelect() {
|
||
const sel = $("zoomSelect");
|
||
sel.innerHTML = "";
|
||
for (const pct of ZOOM_PRESETS) {
|
||
const o = document.createElement("option");
|
||
o.value = pct; o.textContent = pct + "%";
|
||
sel.appendChild(o);
|
||
}
|
||
}
|
||
function updateZoomLabel() {
|
||
const sel = $("zoomSelect");
|
||
const pct = Math.round(state.zoom * 100);
|
||
let custom = sel.querySelector('option[data-custom="1"]');
|
||
const matchesPreset = ZOOM_PRESETS.includes(pct);
|
||
if (matchesPreset) {
|
||
if (custom) custom.remove();
|
||
sel.value = String(pct);
|
||
} else {
|
||
if (!custom) {
|
||
custom = document.createElement("option");
|
||
custom.dataset.custom = "1";
|
||
sel.appendChild(custom);
|
||
}
|
||
custom.value = String(pct);
|
||
custom.textContent = pct + "%";
|
||
sel.value = String(pct);
|
||
}
|
||
}
|
||
|
||
// Zoom giữ nguyên điểm dưới con trỏ chuột (Ctrl + lăn chuột).
|
||
function zoomAtPoint(newZoom, clientX, clientY) {
|
||
const vp = $("viewport");
|
||
const rect = vp.getBoundingClientRect();
|
||
const px = clientX - rect.left;
|
||
const py = clientY - rect.top;
|
||
const cx = vp.scrollLeft + px;
|
||
const cy = vp.scrollTop + py;
|
||
const old = state.zoom;
|
||
setZoom(newZoom);
|
||
const f = state.zoom / old;
|
||
vp.scrollLeft = cx * f - px;
|
||
vp.scrollTop = cy * f - py;
|
||
}
|
||
|
||
function fitWidth() {
|
||
if (!state.pages.length) return;
|
||
const avail = $("viewport").clientWidth - 48;
|
||
const p = state.pages[state.current] || state.pages[0];
|
||
setZoom(avail / (p.widthPt * PT_PER_PX));
|
||
}
|
||
|
||
function fitPage() {
|
||
if (!state.pages.length) return;
|
||
const vp = $("viewport");
|
||
const availW = vp.clientWidth - 48;
|
||
const availH = vp.clientHeight - 48;
|
||
const p = state.pages[state.current] || state.pages[0];
|
||
const zw = availW / (p.widthPt * PT_PER_PX);
|
||
const zh = availH / (p.heightPt * PT_PER_PX);
|
||
setZoom(Math.min(zw, zh));
|
||
}
|
||
|
||
// ---------- Tìm kiếm ----------
|
||
|
||
let searchTimer;
|
||
async function runSearch() {
|
||
const q = $("searchBox").value.trim();
|
||
clearAllHighlights();
|
||
state.hits = [];
|
||
state.hitIdx = -1;
|
||
if (!q) { $("searchCount").textContent = "—"; return; }
|
||
try {
|
||
const hits = await invoke("search_document", {
|
||
path: state.path,
|
||
query: q,
|
||
caseSensitive: $("searchCase").checked,
|
||
});
|
||
state.hits = hits;
|
||
$("searchCount").textContent = hits.length ? `0/${hits.length}` : "0";
|
||
if (hits.length) gotoHit(0);
|
||
drawHighlightsForVisible();
|
||
} catch (e) {
|
||
$("searchCount").textContent = "lỗi";
|
||
$("status").textContent = "Lỗi tìm kiếm: " + e;
|
||
}
|
||
}
|
||
|
||
function gotoHit(i) {
|
||
if (!state.hits.length) return;
|
||
state.hitIdx = (i + state.hits.length) % state.hits.length;
|
||
const hit = state.hits[state.hitIdx];
|
||
$("searchCount").textContent = `${state.hitIdx + 1}/${state.hits.length}`;
|
||
goToPage(hit.pageIndex);
|
||
// chờ cuộn rồi vẽ highlight
|
||
setTimeout(() => { drawHighlightsForVisible(); }, 120);
|
||
}
|
||
|
||
function clearOverlay(slot) {
|
||
const ov = slot.querySelector(".overlay");
|
||
if (ov) ov.innerHTML = "";
|
||
}
|
||
function clearAllHighlights() {
|
||
for (const slot of state.slots) if (slot) clearOverlay(slot);
|
||
}
|
||
|
||
function drawHighlightsForVisible() {
|
||
clearAllHighlights();
|
||
for (const idx of state.visible) drawHighlightsForPage(idx);
|
||
// luôn vẽ trang chứa hit hiện tại
|
||
if (state.hitIdx >= 0) drawHighlightsForPage(state.hits[state.hitIdx].pageIndex);
|
||
}
|
||
|
||
function drawHighlightsForPage(pageIdx) {
|
||
const slot = state.slots[pageIdx];
|
||
if (!slot) return;
|
||
const p = state.pages[pageIdx];
|
||
const ov = slot.querySelector(".overlay");
|
||
if (!ov) return;
|
||
const scale = PT_PER_PX * state.zoom;
|
||
state.hits.forEach((h, i) => {
|
||
if (h.pageIndex !== pageIdx || !h.rect) return;
|
||
const r = h.rect;
|
||
const div = document.createElement("div");
|
||
div.className = "hl" + (i === state.hitIdx ? " current" : "");
|
||
div.style.left = r.left * scale + "px";
|
||
div.style.top = (p.heightPt - r.top) * scale + "px";
|
||
div.style.width = (r.right - r.left) * scale + "px";
|
||
div.style.height = (r.top - r.bottom) * scale + "px";
|
||
ov.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// ---------- Chú thích (annotations) ----------
|
||
|
||
function hexToRgb(hex) {
|
||
const n = parseInt(hex.slice(1), 16);
|
||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
|
||
}
|
||
function rgbCss(c) { return `rgb(${c[0]},${c[1]},${c[2]})`; }
|
||
function escapeHtml(s) {
|
||
return s.replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" }[c]));
|
||
}
|
||
|
||
// Highlight/Underline/Strikeout bám theo TEXT đã chọn (như Foxit), không phải
|
||
// 1 rectangle tự do — khác với Square/FreeText/Note (vẽ/đặt tự do trên trang).
|
||
function isTextMarkupTool(tool) {
|
||
return tool === "highlight" || tool === "underline" || tool === "strikeout";
|
||
}
|
||
|
||
function setTool(tool) {
|
||
state.tool = state.tool === tool ? null : tool;
|
||
document.querySelectorAll(".atool").forEach((b) =>
|
||
b.classList.toggle("active", b.dataset.tool === state.tool)
|
||
);
|
||
document.body.classList.toggle("tool-active", !!state.tool);
|
||
document.body.classList.toggle("tool-mark", isTextMarkupTool(state.tool));
|
||
$("annotHint").textContent = state.tool
|
||
? state.tool === "note"
|
||
? "Bấm lên trang để đặt ghi chú"
|
||
: state.tool === "redact"
|
||
? "Kéo chuột quét vùng cần bôi đen — nội dung sẽ bị XOÁ THẬT khi Áp dụng"
|
||
: isTextMarkupTool(state.tool)
|
||
? "Kéo chọn văn bản trên trang để tô (bấm lại nút để tắt)"
|
||
: "Kéo chuột trên trang để vẽ"
|
||
: "";
|
||
}
|
||
|
||
function updateAnnotCount() {
|
||
$("annotCount").textContent = state.annotSpecs.length;
|
||
$("saveAnnots").disabled = state.annotSpecs.length === 0;
|
||
}
|
||
|
||
// ===== Undo/Redo TOÀN CỤC (Ctrl+Z / Ctrl+Y) =====
|
||
// Snapshot {annotSpecs, pagePlan} trước mỗi hành động thay đổi (tạo/xoá/sửa
|
||
// chú thích, chèn/xoá/xoay/đảo/crop trang...) — đơn giản & an toàn cho quy mô
|
||
// dữ liệu của 1 tài liệu, không cần theo dõi diff từng trường. 1 stack DUY
|
||
// NHẤT cho cả Annotate và Organize → Ctrl+Z hoạt động xuyên cả 2 chế độ.
|
||
function snapshot() {
|
||
return JSON.parse(JSON.stringify({ annotSpecs: state.annotSpecs, pagePlan: state.pagePlan }));
|
||
}
|
||
function pushUndo() {
|
||
state.undoStack.push(snapshot());
|
||
if (state.undoStack.length > UNDO_LIMIT) state.undoStack.shift();
|
||
state.redoStack = [];
|
||
updateUndoRedoButtons();
|
||
}
|
||
function updateUndoRedoButtons() {
|
||
$("undoBtn").disabled = state.undoStack.length === 0;
|
||
$("redoBtn").disabled = state.redoStack.length === 0;
|
||
}
|
||
function redrawAllAnnotPages() {
|
||
for (const slot of state.slots) {
|
||
if (slot) drawAnnotsForPage(Number(slot.dataset.index));
|
||
}
|
||
}
|
||
function applySnapshot(snap) {
|
||
finishEditing();
|
||
closeNotePopup();
|
||
state.annotSpecs = snap.annotSpecs;
|
||
state.pagePlan = snap.pagePlan;
|
||
state.selectedId = null;
|
||
state.orgSelected = new Set();
|
||
redrawAllAnnotPages();
|
||
updateAnnotCount();
|
||
updateUndoRedoButtons();
|
||
buildComments();
|
||
if (state.organizeMode) buildOrganizeGrid();
|
||
}
|
||
function undo() {
|
||
if (!state.undoStack.length) return;
|
||
const prev = state.undoStack.pop();
|
||
state.redoStack.push(snapshot());
|
||
applySnapshot(prev);
|
||
}
|
||
function redo() {
|
||
if (!state.redoStack.length) return;
|
||
const next = state.redoStack.pop();
|
||
state.undoStack.push(snapshot());
|
||
applySnapshot(next);
|
||
}
|
||
|
||
// Vẽ preview toàn bộ chú thích chưa lưu của 1 trang.
|
||
function drawAnnotsForPage(idx) {
|
||
const slot = state.slots[idx];
|
||
if (!slot) return;
|
||
const layer = slot.querySelector(".annotlayer");
|
||
if (!layer) return;
|
||
layer.innerHTML = "";
|
||
const p = state.pages[idx];
|
||
const scale = PT_PER_PX * state.zoom;
|
||
const isMarkup = (k) => k === "highlight" || k === "underline" || k === "strikeout";
|
||
|
||
for (const s of state.annotSpecs) {
|
||
if (s.pageIndex !== idx) continue;
|
||
if (editing && editing.id === s.id) continue; // đang sửa thì bỏ qua preview
|
||
const col = rgbCss(s.color);
|
||
|
||
if (isMarkup(s.kind)) {
|
||
// Mỗi quad (= 1 dòng text đã chọn) vẽ riêng — không phải 1 khối phủ cả
|
||
// khoảng trắng giữa các dòng (đúng như Foxit).
|
||
const quads = s.quads && s.quads.length ? s.quads : [{ left: s.left, bottom: s.bottom, right: s.right, top: s.top }];
|
||
quads.forEach((q, qi) => {
|
||
const left = q.left * scale;
|
||
const top = (p.heightPt - q.top) * scale;
|
||
const w = (q.right - q.left) * scale;
|
||
const h = (q.top - q.bottom) * scale;
|
||
const el = document.createElement("div");
|
||
el.dataset.id = s.id;
|
||
if (s.kind === "highlight") {
|
||
el.className = "a-hl a-sel";
|
||
el.style.background = `rgba(${s.color[0]},${s.color[1]},${s.color[2]},.4)`;
|
||
Object.assign(el.style, { left: left + "px", top: top + "px", width: w + "px", height: h + "px" });
|
||
} else if (s.kind === "underline") {
|
||
el.className = "a-line a-sel";
|
||
el.style.borderTopColor = col;
|
||
Object.assign(el.style, { left: left + "px", top: top + h - 2 + "px", width: w + "px", height: "4px" });
|
||
} else {
|
||
el.className = "a-line a-sel";
|
||
el.style.borderTopColor = col;
|
||
Object.assign(el.style, { left: left + "px", top: top + h / 2 + "px", width: w + "px", height: "4px" });
|
||
}
|
||
el.addEventListener("click", (ev) => { ev.stopPropagation(); selectAnnot(s.id); });
|
||
if (s.id === state.selectedId) {
|
||
el.classList.add("selected");
|
||
if (qi === quads.length - 1) {
|
||
const del = document.createElement("div");
|
||
del.className = "a-del";
|
||
del.textContent = "✕";
|
||
del.title = "Xoá (Delete)";
|
||
del.addEventListener("click", (ev) => { ev.stopPropagation(); deleteSpec(s.id); });
|
||
el.appendChild(del);
|
||
}
|
||
}
|
||
layer.appendChild(el);
|
||
});
|
||
continue;
|
||
}
|
||
|
||
const left = s.left * scale;
|
||
const top = (p.heightPt - s.top) * scale;
|
||
const w = (s.right - s.left) * scale;
|
||
const h = (s.top - s.bottom) * scale;
|
||
const el = document.createElement("div");
|
||
el.dataset.id = s.id;
|
||
if (s.kind === "square") {
|
||
el.className = "a-box a-sel";
|
||
el.style.borderColor = col;
|
||
Object.assign(el.style, { left: left + "px", top: top + "px", width: w + "px", height: h + "px" });
|
||
} else if (s.kind === "freetext") {
|
||
el.className = "a-text a-sel";
|
||
el.style.borderColor = col;
|
||
el.style.color = col;
|
||
el.style.fontSize = (s.fontSize || 14) * scale + "px";
|
||
el.style.fontWeight = s.bold ? "bold" : "normal";
|
||
el.style.fontStyle = s.italic ? "italic" : "normal";
|
||
el.style.textDecoration = s.underline ? "underline" : "none";
|
||
el.textContent = s.contents || "Văn bản…";
|
||
Object.assign(el.style, { left: left + "px", top: top + "px", width: Math.max(w, 40) + "px", minHeight: h + "px" });
|
||
el.addEventListener("dblclick", (ev) => { ev.stopPropagation(); editTextBox(s); });
|
||
} else if (s.kind === "note") {
|
||
el.className = "a-note a-sel";
|
||
el.textContent = "📝";
|
||
el.style.background = `rgb(${s.color[0]},${s.color[1]},${s.color[2]})`;
|
||
Object.assign(el.style, { left: left + "px", top: top + "px" });
|
||
el.addEventListener("click", (ev) => { ev.stopPropagation(); openNotePopup(s); });
|
||
}
|
||
if (s.kind !== "note") {
|
||
el.addEventListener("click", (ev) => { ev.stopPropagation(); selectAnnot(s.id); });
|
||
}
|
||
if (s.id === state.selectedId) {
|
||
el.classList.add("selected");
|
||
const del = document.createElement("div");
|
||
del.className = "a-del";
|
||
del.textContent = "✕";
|
||
del.title = "Xoá (Delete)";
|
||
del.addEventListener("click", (ev) => { ev.stopPropagation(); deleteSpec(s.id); });
|
||
el.appendChild(del);
|
||
}
|
||
layer.appendChild(el);
|
||
}
|
||
|
||
// Đánh dấu redact (Phase 5) — vẽ cùng layer để sống sót qua mọi lần redraw.
|
||
for (const m of state.redactMarks) {
|
||
if (m.page !== idx) continue;
|
||
const el = document.createElement("div");
|
||
el.className = "redact-mark";
|
||
Object.assign(el.style, {
|
||
left: m.rect.left * scale + "px",
|
||
top: (p.heightPt - m.rect.top) * scale + "px",
|
||
width: (m.rect.right - m.rect.left) * scale + "px",
|
||
height: (m.rect.top - m.rect.bottom) * scale + "px",
|
||
});
|
||
el.title = "Bấm để bỏ đánh dấu redact";
|
||
el.addEventListener("click", (ev) => {
|
||
ev.stopPropagation();
|
||
const i = state.redactMarks.indexOf(m);
|
||
if (i >= 0) state.redactMarks.splice(i, 1);
|
||
drawAnnotsForPage(idx);
|
||
updateRedactButtons();
|
||
});
|
||
layer.appendChild(el);
|
||
}
|
||
}
|
||
|
||
function selectAnnot(id) {
|
||
state.selectedId = id;
|
||
finishEditing();
|
||
redrawVisibleAnnots();
|
||
}
|
||
function deselectAnnot() {
|
||
if (state.selectedId == null) return;
|
||
state.selectedId = null;
|
||
redrawVisibleAnnots();
|
||
}
|
||
function redrawVisibleAnnots() {
|
||
for (const idx of state.visible) drawAnnotsForPage(idx);
|
||
}
|
||
function deleteSpec(id) {
|
||
const i = state.annotSpecs.findIndex((s) => s.id === id);
|
||
if (i < 0) return;
|
||
pushUndo();
|
||
const pg = state.annotSpecs[i].pageIndex;
|
||
state.annotSpecs.splice(i, 1);
|
||
if (state.selectedId === id) state.selectedId = null;
|
||
drawAnnotsForPage(pg);
|
||
updateAnnotCount();
|
||
buildComments();
|
||
}
|
||
|
||
function cssToPdf(idx, cssX, cssY) {
|
||
const p = state.pages[idx];
|
||
const scale = PT_PER_PX * state.zoom;
|
||
return { x: cssX / scale, y: p.heightPt - cssY / scale };
|
||
}
|
||
|
||
// ===== Sửa Text box tại chỗ (in-place) + thanh Format =====
|
||
let editing = null; // { id, el, bar }
|
||
|
||
function editTextBox(spec) {
|
||
finishEditing();
|
||
pushUndo(); // ghi lại trạng thái TRƯỚC khi sửa nội dung/định dạng text box
|
||
state.selectedId = null;
|
||
state.tool = null;
|
||
document.querySelectorAll(".atool").forEach((b) => b.classList.remove("active"));
|
||
document.body.classList.remove("tool-active");
|
||
|
||
const slot = state.slots[spec.pageIndex];
|
||
const layer = slot.querySelector(".annotlayer");
|
||
const scale = PT_PER_PX * state.zoom;
|
||
const left = spec.left * scale;
|
||
const top = (state.pages[spec.pageIndex].heightPt - spec.top) * scale;
|
||
const w = Math.max((spec.right - spec.left) * scale, 60);
|
||
const h = Math.max((spec.top - spec.bottom) * scale, 20);
|
||
|
||
const ed = document.createElement("div");
|
||
ed.className = "a-editor";
|
||
ed.contentEditable = "true";
|
||
ed.textContent = spec.contents || "";
|
||
Object.assign(ed.style, {
|
||
left: left + "px", top: top + "px", width: w + "px", minHeight: h + "px",
|
||
color: rgbCss(spec.color),
|
||
fontSize: (spec.fontSize || 14) * scale + "px",
|
||
fontWeight: spec.bold ? "bold" : "normal",
|
||
fontStyle: spec.italic ? "italic" : "normal",
|
||
textDecoration: spec.underline ? "underline" : "none",
|
||
});
|
||
layer.appendChild(ed);
|
||
drawAnnotsForPage(spec.pageIndex); // ẩn preview của spec đang sửa
|
||
|
||
editing = { id: spec.id, el: ed };
|
||
showFmtBar(spec, ed);
|
||
ed.focus();
|
||
// đặt con trỏ cuối
|
||
const sel = window.getSelection();
|
||
sel.selectAllChildren(ed);
|
||
sel.collapseToEnd();
|
||
|
||
ed.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") { e.preventDefault(); finishEditing(); }
|
||
});
|
||
}
|
||
|
||
function finishEditing() {
|
||
if (!editing) return;
|
||
const spec = state.annotSpecs.find((s) => s.id === editing.id);
|
||
const ed = editing.el;
|
||
if (spec && ed) {
|
||
spec.contents = ed.innerText.trim();
|
||
// mở rộng rect theo chiều cao thực tế của editor
|
||
const scale = PT_PER_PX * state.zoom;
|
||
const realH = ed.offsetHeight / scale;
|
||
spec.bottom = spec.top - Math.max(realH, 14);
|
||
}
|
||
if (ed && ed.parentNode) ed.remove();
|
||
if (editing.bar && editing.bar.parentNode) editing.bar.remove();
|
||
const pg = spec ? spec.pageIndex : null;
|
||
editing = null;
|
||
// Xoá text box rỗng (không nhập gì).
|
||
if (spec && spec.kind === "freetext" && !spec.contents) {
|
||
const i = state.annotSpecs.indexOf(spec);
|
||
if (i >= 0) state.annotSpecs.splice(i, 1);
|
||
}
|
||
if (pg != null) drawAnnotsForPage(pg);
|
||
updateAnnotCount();
|
||
buildComments();
|
||
}
|
||
|
||
// Thanh định dạng nổi cho text box (size, B, I, U, màu)
|
||
function showFmtBar(spec, editorEl) {
|
||
const bar = document.createElement("div");
|
||
bar.className = "fmtbar";
|
||
const r = editorEl.getBoundingClientRect();
|
||
bar.style.left = r.left + "px";
|
||
bar.style.top = r.top - 40 + "px";
|
||
|
||
const sizes = [8, 10, 12, 14, 18, 24, 32, 48];
|
||
const sizeSel = document.createElement("select");
|
||
sizeSel.title = "Cỡ chữ";
|
||
for (const s of sizes) {
|
||
const o = document.createElement("option");
|
||
o.value = s; o.textContent = s;
|
||
if (s === (spec.fontSize || 14)) o.selected = true;
|
||
sizeSel.appendChild(o);
|
||
}
|
||
sizeSel.addEventListener("change", () => {
|
||
spec.fontSize = Number(sizeSel.value);
|
||
editorEl.style.fontSize = spec.fontSize * PT_PER_PX * state.zoom + "px";
|
||
editorEl.focus();
|
||
});
|
||
|
||
const mkToggle = (label, prop, cssApply) => {
|
||
const b = document.createElement("button");
|
||
b.textContent = label;
|
||
b.className = "fmtbtn" + (spec[prop] ? " on" : "");
|
||
b.addEventListener("mousedown", (e) => e.preventDefault());
|
||
b.addEventListener("click", () => {
|
||
spec[prop] = !spec[prop];
|
||
b.classList.toggle("on", spec[prop]);
|
||
cssApply(spec[prop]);
|
||
editorEl.focus();
|
||
});
|
||
return b;
|
||
};
|
||
|
||
bar.appendChild(sizeSel);
|
||
bar.appendChild(mkToggle("B", "bold", (on) => editorEl.style.fontWeight = on ? "bold" : "normal"));
|
||
const it = mkToggle("I", "italic", (on) => editorEl.style.fontStyle = on ? "italic" : "normal");
|
||
it.style.fontStyle = "italic";
|
||
bar.appendChild(it);
|
||
const un = mkToggle("U", "underline", (on) => editorEl.style.textDecoration = on ? "underline" : "none");
|
||
un.style.textDecoration = "underline";
|
||
bar.appendChild(un);
|
||
|
||
const colorBtn = document.createElement("button");
|
||
colorBtn.className = "fmtbtn fmt-color";
|
||
colorBtn.innerHTML = `<span class="sw" style="background:${rgbCss(spec.color)}"></span>A`;
|
||
colorBtn.addEventListener("mousedown", (e) => e.preventDefault());
|
||
colorBtn.addEventListener("click", () => {
|
||
openColorPopover(colorBtn, spec.color, (rgb) => {
|
||
spec.color = rgb;
|
||
editorEl.style.color = rgbCss(rgb);
|
||
colorBtn.querySelector(".sw").style.background = rgbCss(rgb);
|
||
editorEl.focus();
|
||
});
|
||
});
|
||
bar.appendChild(colorBtn);
|
||
|
||
document.body.appendChild(bar);
|
||
editing.bar = bar;
|
||
}
|
||
|
||
// ===== Note popup (xem/sửa/đổi màu/xoá) =====
|
||
let notePopupEl = null;
|
||
function openNotePopup(spec) {
|
||
closeNotePopup();
|
||
pushUndo(); // ghi lại trạng thái TRƯỚC khi sửa nội dung/màu ghi chú
|
||
const slot = state.slots[spec.pageIndex];
|
||
const layer = slot.querySelector(".annotlayer");
|
||
const icon = layer.querySelector(`.a-note[data-id="${spec.id}"]`);
|
||
const r = (icon || slot).getBoundingClientRect();
|
||
|
||
const pop = document.createElement("div");
|
||
pop.className = "notepop";
|
||
pop.style.left = r.right + 6 + "px";
|
||
pop.style.top = r.top + "px";
|
||
pop.innerHTML = `
|
||
<div class="np-head"><span>Ghi chú</span><span class="np-close">✕</span></div>
|
||
<textarea class="np-text" placeholder="Nhập nội dung ghi chú…">${escapeHtml(spec.contents || "")}</textarea>
|
||
<div class="np-foot">
|
||
<button class="np-color"><span class="sw" style="background:${rgbCss(spec.color)}"></span>Màu</button>
|
||
<button class="np-del">🗑 Xoá</button>
|
||
</div>`;
|
||
document.body.appendChild(pop);
|
||
notePopupEl = pop;
|
||
|
||
const ta = pop.querySelector(".np-text");
|
||
ta.addEventListener("input", () => {
|
||
spec.contents = ta.value;
|
||
buildComments();
|
||
});
|
||
pop.querySelector(".np-close").addEventListener("click", closeNotePopup);
|
||
pop.querySelector(".np-del").addEventListener("click", () => {
|
||
closeNotePopup();
|
||
deleteSpec(spec.id);
|
||
});
|
||
pop.querySelector(".np-color").addEventListener("click", (e) => {
|
||
openColorPopover(e.currentTarget, spec.color, (rgb) => {
|
||
spec.color = rgb;
|
||
pop.querySelector(".np-color .sw").style.background = rgbCss(rgb);
|
||
drawAnnotsForPage(spec.pageIndex);
|
||
});
|
||
});
|
||
ta.focus();
|
||
}
|
||
function closeNotePopup() {
|
||
if (notePopupEl) { notePopupEl.remove(); notePopupEl = null; }
|
||
}
|
||
|
||
// ===== Color popover (preset + gần đây + tuỳ chọn) =====
|
||
let colorPopEl = null;
|
||
function openColorPopover(anchor, currentRgb, onPick) {
|
||
closeColorPopover();
|
||
const r = anchor.getBoundingClientRect();
|
||
const pop = document.createElement("div");
|
||
pop.className = "colorpop";
|
||
pop.style.left = r.left + "px";
|
||
pop.style.top = r.bottom + 4 + "px";
|
||
|
||
const addSwatch = (rgb, container) => {
|
||
const s = document.createElement("div");
|
||
s.className = "cs";
|
||
s.style.background = rgbCss(rgb);
|
||
if (rgb[0] === currentRgb[0] && rgb[1] === currentRgb[1] && rgb[2] === currentRgb[2]) s.classList.add("cur");
|
||
s.addEventListener("click", () => {
|
||
pushRecentColor(rgb);
|
||
onPick(rgb.slice());
|
||
closeColorPopover();
|
||
});
|
||
container.appendChild(s);
|
||
};
|
||
|
||
const grid = document.createElement("div");
|
||
grid.className = "cgrid";
|
||
for (const c of PRESET_COLORS) addSwatch(c, grid);
|
||
pop.appendChild(grid);
|
||
|
||
if (state.recentColors.length) {
|
||
const lbl = document.createElement("div");
|
||
lbl.className = "clbl"; lbl.textContent = "Gần đây";
|
||
pop.appendChild(lbl);
|
||
const rg = document.createElement("div");
|
||
rg.className = "cgrid";
|
||
for (const c of state.recentColors) addSwatch(c, rg);
|
||
pop.appendChild(rg);
|
||
}
|
||
|
||
const custom = document.createElement("label");
|
||
custom.className = "ccustom";
|
||
custom.innerHTML = `Tuỳ chọn… <input type="color" value="${rgbToHex(currentRgb)}">`;
|
||
custom.querySelector("input").addEventListener("input", (e) => {
|
||
const rgb = hexToRgb(e.target.value);
|
||
pushRecentColor(rgb);
|
||
onPick(rgb);
|
||
});
|
||
custom.querySelector("input").addEventListener("change", closeColorPopover);
|
||
pop.appendChild(custom);
|
||
|
||
document.body.appendChild(pop);
|
||
colorPopEl = pop;
|
||
}
|
||
function closeColorPopover() {
|
||
if (colorPopEl) { colorPopEl.remove(); colorPopEl = null; }
|
||
}
|
||
function pushRecentColor(rgb) {
|
||
state.recentColors = state.recentColors.filter((c) => !(c[0] === rgb[0] && c[1] === rgb[1] && c[2] === rgb[2]));
|
||
state.recentColors.unshift(rgb.slice());
|
||
state.recentColors = state.recentColors.slice(0, 8);
|
||
}
|
||
function rgbToHex(c) {
|
||
return "#" + c.map((v) => v.toString(16).padStart(2, "0")).join("");
|
||
}
|
||
|
||
let drag = null;
|
||
function onPagesMouseDown(e) {
|
||
if (!state.tool) {
|
||
// click vùng trống: bỏ chọn + đóng popup + kết thúc sửa
|
||
if (!e.target.closest(".a-editor")) {
|
||
finishEditing();
|
||
closeNotePopup();
|
||
closeColorPopover();
|
||
if (!e.target.dataset || e.target.dataset.id == null) deselectAnnot();
|
||
}
|
||
return;
|
||
}
|
||
// Highlight/Underline/Strikeout: để trình duyệt tự xử lý chọn text (textlayer
|
||
// pointer-events đã mở qua .tool-mark) — tạo annotation ở mouseup từ Selection.
|
||
if (isTextMarkupTool(state.tool)) return;
|
||
const slot = e.target.closest && e.target.closest(".page-slot");
|
||
if (!slot) return;
|
||
e.preventDefault();
|
||
const r = slot.getBoundingClientRect();
|
||
drag = {
|
||
idx: Number(slot.dataset.index),
|
||
x0: e.clientX - r.left,
|
||
y0: e.clientY - r.top,
|
||
x1: e.clientX - r.left,
|
||
y1: e.clientY - r.top,
|
||
};
|
||
}
|
||
function onPagesMouseMove(e) {
|
||
if (!drag) return;
|
||
const slot = state.slots[drag.idx];
|
||
const r = slot.getBoundingClientRect();
|
||
drag.x1 = e.clientX - r.left;
|
||
drag.y1 = e.clientY - r.top;
|
||
const layer = slot.querySelector(".annotlayer");
|
||
let prev = layer.querySelector(".a-preview");
|
||
if (!prev) {
|
||
prev = document.createElement("div");
|
||
prev.className = "a-hl a-preview";
|
||
layer.appendChild(prev);
|
||
}
|
||
const l = Math.min(drag.x0, drag.x1);
|
||
const t = Math.min(drag.y0, drag.y1);
|
||
prev.style.cssText =
|
||
`left:${l}px;top:${t}px;width:${Math.abs(drag.x1 - drag.x0)}px;height:${Math.abs(drag.y1 - drag.y0)}px;` +
|
||
`background:rgba(${state.color[0]},${state.color[1]},${state.color[2]},.3)`;
|
||
}
|
||
|
||
// Mỗi "từ" trong text layer là 1 <span> định vị tuyệt đối riêng (để bám đúng
|
||
// pixel PDFium) — vì vậy Range.getClientRects() trả về 1 rect/TỪ, không phải
|
||
// 1 rect/DÒNG như với text chảy bình thường. Gộp các rect chồng lấp theo
|
||
// chiều dọc (cùng 1 dòng) thành 1 rect duy nhất, để highlight 1 cụm từ liền
|
||
// mạch chứ không bị đứt từng từ với khoảng trắng hở giữa.
|
||
function mergeRectsIntoLines(rects) {
|
||
const sorted = rects.slice().sort((a, b) => a.top - b.top);
|
||
const lines = [];
|
||
for (const r of sorted) {
|
||
const line = lines.find((l) => {
|
||
const overlap = Math.min(l.bottom, r.bottom) - Math.max(l.top, r.top);
|
||
return overlap > 0.5 * Math.min(l.bottom - l.top, r.bottom - r.top);
|
||
});
|
||
if (line) {
|
||
line.left = Math.min(line.left, r.left);
|
||
line.right = Math.max(line.right, r.right);
|
||
line.top = Math.min(line.top, r.top);
|
||
line.bottom = Math.max(line.bottom, r.bottom);
|
||
} else {
|
||
lines.push({ left: r.left, right: r.right, top: r.top, bottom: r.bottom });
|
||
}
|
||
}
|
||
return lines;
|
||
}
|
||
|
||
// Tạo Highlight/Underline/Strikeout từ vùng TEXT người dùng vừa chọn (Selection
|
||
// API) — bám đúng từng dòng như Foxit, không phải 1 rectangle tự do.
|
||
function createMarkupFromSelection() {
|
||
const sel = window.getSelection();
|
||
if (!sel || sel.isCollapsed || sel.rangeCount === 0) return;
|
||
const range = sel.getRangeAt(0);
|
||
const anchorNode = range.commonAncestorContainer;
|
||
const anchorEl = anchorNode.nodeType === 1 ? anchorNode : anchorNode.parentElement;
|
||
const slot = anchorEl && anchorEl.closest(".page-slot");
|
||
if (!slot) { sel.removeAllRanges(); return; }
|
||
|
||
const idx = Number(slot.dataset.index);
|
||
const slotRect = slot.getBoundingClientRect();
|
||
const rawRects = Array.from(range.getClientRects()).filter((r) => r.width > 0.5 && r.height > 0.5);
|
||
sel.removeAllRanges();
|
||
if (!rawRects.length) return;
|
||
const clientRects = mergeRectsIntoLines(rawRects);
|
||
|
||
const quads = clientRects.map((r) => {
|
||
const a = cssToPdf(idx, r.left - slotRect.left, r.top - slotRect.top);
|
||
const b = cssToPdf(idx, r.right - slotRect.left, r.bottom - slotRect.top);
|
||
return {
|
||
left: Math.min(a.x, b.x), right: Math.max(a.x, b.x),
|
||
bottom: Math.min(a.y, b.y), top: Math.max(a.y, b.y),
|
||
};
|
||
});
|
||
const bounds = quads.reduce(
|
||
(acc, q) => acc ? {
|
||
left: Math.min(acc.left, q.left), right: Math.max(acc.right, q.right),
|
||
bottom: Math.min(acc.bottom, q.bottom), top: Math.max(acc.top, q.top),
|
||
} : { ...q },
|
||
null
|
||
);
|
||
|
||
const spec = {
|
||
id: annotIdSeq++,
|
||
kind: state.tool,
|
||
pageIndex: idx,
|
||
left: bounds.left, bottom: bounds.bottom, right: bounds.right, top: bounds.top,
|
||
quads,
|
||
color: [...state.color],
|
||
contents: "",
|
||
fontSize: 14,
|
||
bold: false,
|
||
italic: false,
|
||
underline: false,
|
||
};
|
||
pushUndo();
|
||
state.annotSpecs.push(spec);
|
||
pushRecentColor(state.color);
|
||
// Giữ tool active để tô tiếp liên tục (như Foxit) — bấm lại nút hoặc Esc để tắt.
|
||
drawAnnotsForPage(idx);
|
||
updateAnnotCount();
|
||
buildComments();
|
||
}
|
||
|
||
function onPagesMouseUp() {
|
||
if (state.tool && isTextMarkupTool(state.tool)) {
|
||
createMarkupFromSelection();
|
||
return;
|
||
}
|
||
if (!drag) return;
|
||
const d = drag;
|
||
drag = null;
|
||
const slot = state.slots[d.idx];
|
||
const prev = slot.querySelector(".a-preview");
|
||
if (prev) prev.remove();
|
||
|
||
const a = cssToPdf(d.idx, d.x0, d.y0);
|
||
const b = cssToPdf(d.idx, d.x1, d.y1);
|
||
const rect = {
|
||
left: Math.min(a.x, b.x),
|
||
right: Math.max(a.x, b.x),
|
||
bottom: Math.min(a.y, b.y),
|
||
top: Math.max(a.y, b.y),
|
||
};
|
||
const tool = state.tool;
|
||
const scale = PT_PER_PX * state.zoom;
|
||
const tiny = rect.right - rect.left < 2 || rect.top - rect.bottom < 2;
|
||
|
||
if (tool === "crop") {
|
||
if (tiny) return;
|
||
openCropDialog(d.idx, rect);
|
||
return;
|
||
}
|
||
if (tool === "redact") {
|
||
if (tiny) return;
|
||
state.redactMarks.push({ page: d.idx, rect });
|
||
drawAnnotsForPage(d.idx);
|
||
updateRedactButtons();
|
||
return; // giữ tool để quét tiếp nhiều vùng (như Foxit Mark for Redaction)
|
||
}
|
||
if (tool === "note") {
|
||
const sz = 18 / scale;
|
||
rect.right = rect.left + sz;
|
||
rect.bottom = rect.top - sz;
|
||
} else if (tool === "freetext") {
|
||
if (tiny) {
|
||
rect.right = rect.left + 160 / scale;
|
||
rect.top = rect.bottom + 24 / scale;
|
||
}
|
||
} else if (tiny) {
|
||
return;
|
||
}
|
||
|
||
const spec = {
|
||
id: annotIdSeq++,
|
||
kind: tool,
|
||
pageIndex: d.idx,
|
||
left: rect.left,
|
||
bottom: rect.bottom,
|
||
right: rect.right,
|
||
top: rect.top,
|
||
color: [...state.color],
|
||
contents: "",
|
||
fontSize: 14,
|
||
bold: false,
|
||
italic: false,
|
||
underline: false,
|
||
};
|
||
pushUndo();
|
||
state.annotSpecs.push(spec);
|
||
pushRecentColor(state.color);
|
||
|
||
// FreeText/Note: gõ ngay → về chế độ chọn (như Foxit). Square: giữ tool active
|
||
// để vẽ tiếp liên tục.
|
||
if (tool === "freetext" || tool === "note") setTool(null);
|
||
drawAnnotsForPage(d.idx);
|
||
updateAnnotCount();
|
||
buildComments();
|
||
|
||
if (tool === "freetext") editTextBox(spec);
|
||
else if (tool === "note") openNotePopup(spec);
|
||
}
|
||
|
||
async function saveAnnots() {
|
||
if (!state.annotSpecs.length) return;
|
||
finishEditing();
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
const specs = state.annotSpecs.map((s) => ({
|
||
kind: s.kind,
|
||
pageIndex: s.pageIndex,
|
||
left: s.left, bottom: s.bottom, right: s.right, top: s.top,
|
||
quads: s.quads || [],
|
||
color: [s.color[0], s.color[1], s.color[2], 255],
|
||
contents: s.contents || null,
|
||
fontSize: s.fontSize || 14,
|
||
bold: !!s.bold,
|
||
italic: !!s.italic,
|
||
underline: !!s.underline,
|
||
}));
|
||
await invoke("apply_annotations", { input: state.path, output: out, specs });
|
||
const n = state.annotSpecs.length;
|
||
state.annotSpecs = [];
|
||
updateAnnotCount();
|
||
$("status").textContent = `Đã lưu ${n} chú thích → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("status").textContent = "Lỗi lưu chú thích: " + e;
|
||
}
|
||
}
|
||
|
||
function buildComments() {
|
||
const box = $("comments");
|
||
box.innerHTML = "";
|
||
if (!state.annotSpecs.length) {
|
||
box.innerHTML = `<div class="empty">Chưa có chú thích chưa lưu. Chọn công cụ ở thanh trên và vẽ lên trang, rồi bấm "Lưu chú thích".</div>`;
|
||
return;
|
||
}
|
||
const labels = {
|
||
highlight: "Tô sáng", underline: "Gạch chân", strikeout: "Gạch ngang",
|
||
square: "Khung", freetext: "Text box", note: "Ghi chú",
|
||
};
|
||
for (const s of state.annotSpecs) {
|
||
const el = document.createElement("div");
|
||
el.className = "citem";
|
||
el.innerHTML =
|
||
`<span class="cdel">✕</span>` +
|
||
`<span class="csw" style="background:${rgbCss(s.color)}"></span>` +
|
||
`<span class="ckind">${labels[s.kind] || s.kind}</span> · trang ${s.pageIndex + 1}` +
|
||
(s.contents ? `<br><span class="ctxt">${escapeHtml(s.contents)}</span>` : "");
|
||
el.addEventListener("click", (ev) => {
|
||
if (ev.target.classList.contains("cdel")) {
|
||
deleteSpec(s.id);
|
||
} else {
|
||
goToPage(s.pageIndex);
|
||
selectAnnot(s.id);
|
||
if (s.kind === "note") openNotePopup(s);
|
||
}
|
||
});
|
||
box.appendChild(el);
|
||
}
|
||
}
|
||
|
||
// ---------- Copy ----------
|
||
|
||
async function copyCurrentPage() {
|
||
try {
|
||
const txt = await invoke("page_text", { path: state.path, page: state.current });
|
||
await navigator.clipboard.writeText(txt);
|
||
$("status").textContent = `Đã copy text trang ${state.current + 1} (${txt.length} ký tự)`;
|
||
} catch (e) {
|
||
$("status").textContent = "Lỗi copy: " + e;
|
||
}
|
||
}
|
||
|
||
// ---------- Phase 3: Tổ chức trang ----------
|
||
|
||
function openModal(title, bodyHtml) {
|
||
$("modalBox").innerHTML = `<h3>${title}</h3>${bodyHtml}`;
|
||
$("modalOverlay").classList.remove("hidden");
|
||
return $("modalBox");
|
||
}
|
||
function closeModal() {
|
||
$("modalOverlay").classList.add("hidden");
|
||
$("modalBox").innerHTML = "";
|
||
}
|
||
|
||
/// Parse "1-3,5" (1-based, kiểu người dùng nhập) → mảng index 0-based hợp lệ.
|
||
function parsePageRange(str, count) {
|
||
const out = [];
|
||
for (const part of str.split(",")) {
|
||
const t = part.trim();
|
||
if (!t) continue;
|
||
const m = t.match(/^(\d+)(?:-(\d+))?$/);
|
||
if (!m) continue;
|
||
const a = Number(m[1]);
|
||
const b = m[2] ? Number(m[2]) : a;
|
||
for (let n = Math.min(a, b); n <= Math.max(a, b); n++) {
|
||
if (n >= 1 && n <= count) out.push(n - 1);
|
||
}
|
||
}
|
||
return out;
|
||
}
|
||
|
||
function enterOrganizeMode() {
|
||
state.organizeMode = true;
|
||
$("annobar").classList.add("hidden");
|
||
$("organizeBar").classList.remove("hidden");
|
||
$("viewport").classList.add("hidden");
|
||
$("organizeGrid").classList.remove("hidden");
|
||
$("sidebar").classList.add("hidden");
|
||
$("organizeModeBtn").classList.add("active");
|
||
setTool(null);
|
||
buildOrganizeGrid();
|
||
}
|
||
function exitOrganizeMode() {
|
||
state.organizeMode = false;
|
||
$("annobar").classList.remove("hidden");
|
||
$("organizeBar").classList.add("hidden");
|
||
$("viewport").classList.remove("hidden");
|
||
$("organizeGrid").classList.add("hidden");
|
||
$("sidebar").classList.remove("hidden");
|
||
$("organizeModeBtn").classList.remove("active");
|
||
}
|
||
function toggleOrganizeMode() {
|
||
if (state.organizeMode) exitOrganizeMode();
|
||
else enterOrganizeMode();
|
||
}
|
||
|
||
function orgSelectCard(i, e) {
|
||
if (e.shiftKey && state.orgAnchor != null) {
|
||
const a = Math.min(state.orgAnchor, i);
|
||
const b = Math.max(state.orgAnchor, i);
|
||
state.orgSelected = new Set();
|
||
for (let k = a; k <= b; k++) state.orgSelected.add(k);
|
||
} else if (e.ctrlKey || e.metaKey) {
|
||
if (state.orgSelected.has(i)) state.orgSelected.delete(i);
|
||
else state.orgSelected.add(i);
|
||
state.orgAnchor = i;
|
||
} else {
|
||
state.orgSelected = new Set([i]);
|
||
state.orgAnchor = i;
|
||
}
|
||
// Chỉ đổi class — KHÔNG dựng lại lưới (tránh render lại toàn bộ thumbnail).
|
||
refreshOrgSelection();
|
||
}
|
||
|
||
// Chỉ cập nhật trạng thái chọn (viền xanh) trên các card hiện có — không đụng
|
||
// tới thumbnail. Tách khỏi buildOrganizeGrid để click chọn không gây render lại.
|
||
function refreshOrgSelection() {
|
||
const cards = $("organizeGrid").children;
|
||
for (let i = 0; i < cards.length; i++) {
|
||
cards[i].classList.toggle("selected", state.orgSelected.has(i));
|
||
}
|
||
}
|
||
|
||
// pagePlan có khác trạng thái gốc của file đang mở không (đã chèn/xoá/đảo/xoay/
|
||
// crop)? Watermark/Header-Footer cần biết để áp đúng lên trạng thái đang xem,
|
||
// không phải file gốc còn trên đĩa (xem materializeBaseInput).
|
||
function planIsDirty() {
|
||
if (state.pagePlan.length !== state.pages.length) return true;
|
||
return state.pagePlan.some((e, i) =>
|
||
e.kind !== "existing" || e.source || e.srcIndex !== i ||
|
||
(e.rotationDelta || 0) !== 0 || e.crop);
|
||
}
|
||
|
||
// Trả về đường dẫn file nên dùng làm "input" cho Watermark/Header-Footer:
|
||
// nếu pagePlan đang giữ nguyên trạng thái gốc → dùng thẳng state.path; nếu
|
||
// đang có thay đổi tổ chức trang chưa lưu (chèn/xoá/đảo/xoay/crop) → dựng tạm
|
||
// 1 file theo ĐÚNG trạng thái đang xem trên lưới (qua organize_materialize,
|
||
// dùng lại build_document đã có) rồi dùng file đó — để watermark/đánh số thấy
|
||
// đúng những gì người dùng đang thấy, không cần ép họ lưu rồi mở lại.
|
||
async function materializeBaseInput() {
|
||
if (!planIsDirty()) return { path: state.path, isTemp: false, pageCount: state.pagePlan.length };
|
||
const path = await invoke("organize_materialize", {
|
||
mainInput: state.path, plan: state.pagePlan, password: null,
|
||
});
|
||
return { path, isTemp: true, pageCount: state.pagePlan.length };
|
||
}
|
||
const MATERIALIZED_NOTE =
|
||
`<p class="status">Đang dùng bản xem trước đã gồm các thay đổi tổ chức trang ` +
|
||
`chưa lưu (chèn/xoá/đảo/xoay/crop) — chưa ghi đè file gốc.</p>`;
|
||
|
||
function orgMovePage(from, to) {
|
||
if (from === to) return;
|
||
pushUndo();
|
||
const [moved] = state.pagePlan.splice(from, 1);
|
||
state.pagePlan.splice(to, 0, moved);
|
||
state.orgSelected = new Set();
|
||
state.orgAnchor = null;
|
||
buildOrganizeGrid();
|
||
}
|
||
|
||
// Khoá cache thumbnail: 1 ảnh render chỉ phụ thuộc nguồn + trang gốc (rotation
|
||
// áp bằng CSS transform, crop chỉ là dấu chấm — đều không cần render lại).
|
||
function orgThumbKey(entry) {
|
||
return `${entry.source || ""}#${entry.srcIndex}`;
|
||
}
|
||
|
||
// Dựng lại toàn bộ lưới (chỉ gọi khi CẤU TRÚC plan đổi: chèn/xoá/đảo). Thumbnail
|
||
// lấy từ cache nếu có; chỉ render trang chưa từng render → click chọn/xoay không
|
||
// còn kéo theo render lại toàn bộ.
|
||
function buildOrganizeGrid() {
|
||
const box = $("organizeGrid");
|
||
box.innerHTML = "";
|
||
state.pagePlan.forEach((entry, i) => {
|
||
const dims = (!entry.source && state.pages[entry.srcIndex])
|
||
? state.pages[entry.srcIndex]
|
||
: { widthPt: entry.widthPt || 612, heightPt: entry.heightPt || 792 };
|
||
const card = document.createElement("div");
|
||
card.className = "org-card" + (state.orgSelected.has(i) ? " selected" : "");
|
||
card.draggable = true;
|
||
card.dataset.index = String(i);
|
||
const wrapH = Math.round(160 * (dims.heightPt / dims.widthPt));
|
||
card.innerHTML =
|
||
`<div class="org-thumb-wrap" style="height:${wrapH}px">` +
|
||
(entry.kind === "blank"
|
||
? `<div style="width:100%;height:100%;background:#fff"></div>`
|
||
: `<img alt="p${i}"/>`) +
|
||
(entry.crop ? `<div class="org-crop-mark"></div>` : "") +
|
||
`</div><div class="org-n">${i + 1}</div>`;
|
||
const img = card.querySelector("img");
|
||
if (img) {
|
||
const rot = entry.rotationDelta || 0;
|
||
if (rot) img.style.transform = `rotate(${rot}deg)`;
|
||
const key = orgThumbKey(entry);
|
||
const cached = state.orgThumbs.get(key);
|
||
if (cached) {
|
||
img.src = cached;
|
||
} else {
|
||
const path = entry.source || state.path;
|
||
invoke("render_page", { path, page: entry.srcIndex, width: 160 })
|
||
.then((url) => { state.orgThumbs.set(key, url); img.src = url; })
|
||
.catch(() => {});
|
||
}
|
||
}
|
||
card.addEventListener("click", (e) => orgSelectCard(i, e));
|
||
card.addEventListener("dragstart", (e) => e.dataTransfer.setData("text/plain", String(i)));
|
||
card.addEventListener("dragover", (e) => { e.preventDefault(); card.classList.add("drag-over"); });
|
||
card.addEventListener("dragleave", () => card.classList.remove("drag-over"));
|
||
card.addEventListener("drop", (e) => {
|
||
e.preventDefault();
|
||
card.classList.remove("drag-over");
|
||
const from = Number(e.dataTransfer.getData("text/plain"));
|
||
orgMovePage(from, i);
|
||
});
|
||
box.appendChild(card);
|
||
});
|
||
$("orgSave").disabled = state.pagePlan.length === 0;
|
||
}
|
||
|
||
function orgDeleteSelected() {
|
||
if (!state.orgSelected.size) { $("organizeHint").textContent = "Chưa chọn trang nào để xoá"; return; }
|
||
if (state.orgSelected.size >= state.pagePlan.length) { $("organizeHint").textContent = "Không thể xoá hết toàn bộ trang"; return; }
|
||
pushUndo();
|
||
state.pagePlan = state.pagePlan.filter((_, i) => !state.orgSelected.has(i));
|
||
state.orgSelected = new Set();
|
||
$("organizeHint").textContent = "";
|
||
buildOrganizeGrid();
|
||
}
|
||
|
||
function orgRotateSelected(delta) {
|
||
if (!state.pagePlan.length) return;
|
||
pushUndo();
|
||
const targets = state.orgSelected.size ? state.orgSelected : new Set(state.pagePlan.map((_, i) => i));
|
||
const cards = $("organizeGrid").children;
|
||
for (const i of targets) {
|
||
const entry = state.pagePlan[i];
|
||
entry.rotationDelta = ((entry.rotationDelta || 0) + delta + 360) % 360;
|
||
// Chỉ xoay ảnh bằng CSS — KHÔNG render lại trang.
|
||
const img = cards[i] && cards[i].querySelector("img");
|
||
if (img) img.style.transform = entry.rotationDelta ? `rotate(${entry.rotationDelta}deg)` : "";
|
||
}
|
||
}
|
||
|
||
async function orgSaveChanges() {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("organize_apply", { mainInput: state.path, plan: state.pagePlan, output: out, password: null });
|
||
$("status").textContent = `Đã lưu thay đổi tổ chức trang → ${shortName(out)}`;
|
||
exitOrganizeMode();
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("organizeHint").textContent = "Lỗi lưu: " + e;
|
||
}
|
||
}
|
||
|
||
function openInsertDialog() {
|
||
const box = openModal("Chèn trang", `
|
||
<div class="radiorow">
|
||
<label><input type="radio" name="insKind" value="blank" checked> Trang trắng</label>
|
||
<label><input type="radio" name="insKind" value="file"> Từ file…</label>
|
||
</div>
|
||
<div id="insBlankOpts">
|
||
<label>Cỡ giấy</label>
|
||
<select id="insPaper">
|
||
<option value="612x792">Letter</option>
|
||
<option value="595x842">A4</option>
|
||
<option value="custom">Tuỳ chọn…</option>
|
||
</select>
|
||
<div class="row" id="insCustomSize" style="display:none">
|
||
<div><label>Rộng (pt)</label><input type="number" id="insW" value="612"></div>
|
||
<div><label>Cao (pt)</label><input type="number" id="insH" value="792"></div>
|
||
</div>
|
||
</div>
|
||
<div id="insFileOpts" style="display:none">
|
||
<label>File nguồn</label>
|
||
<button id="insPickFile" type="button">📂 Chọn file…</button>
|
||
<span id="insFileName" class="status"></span>
|
||
<label>Trang (vd 1-3,5 — rỗng = tất cả)</label>
|
||
<input type="text" id="insRange" placeholder="tất cả">
|
||
</div>
|
||
<label>Vị trí</label>
|
||
<div class="radiorow">
|
||
<label><input type="radio" name="insPos" value="before" ${state.orgSelected.size ? "" : "disabled"}> Trước trang đang chọn</label>
|
||
<label><input type="radio" name="insPos" value="after" ${state.orgSelected.size ? "checked" : "disabled"}> Sau trang đang chọn</label>
|
||
<label><input type="radio" name="insPos" value="end" ${state.orgSelected.size ? "" : "checked"}> Cuối tài liệu</label>
|
||
</div>
|
||
<div class="err" id="insErr"></div>
|
||
<div class="foot"><button id="insCancel">Huỷ</button><button id="insOk" class="primary">Chèn</button></div>
|
||
`);
|
||
let insertFile = null;
|
||
box.querySelectorAll('input[name=insKind]').forEach((r) => r.addEventListener("change", () => {
|
||
const isFile = box.querySelector('input[name=insKind]:checked').value === "file";
|
||
box.querySelector("#insBlankOpts").style.display = isFile ? "none" : "";
|
||
box.querySelector("#insFileOpts").style.display = isFile ? "" : "none";
|
||
}));
|
||
box.querySelector("#insPaper").addEventListener("change", (e) => {
|
||
box.querySelector("#insCustomSize").style.display = e.target.value === "custom" ? "flex" : "none";
|
||
});
|
||
box.querySelector("#insPickFile").addEventListener("click", async () => {
|
||
const p = await invoke("pick_pdf");
|
||
if (p) { insertFile = p; box.querySelector("#insFileName").textContent = shortName(p); }
|
||
});
|
||
box.querySelector("#insCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#insOk").addEventListener("click", async () => {
|
||
const kind = box.querySelector('input[name=insKind]:checked').value;
|
||
const pos = box.querySelector('input[name=insPos]:checked').value;
|
||
let newEntries = [];
|
||
if (kind === "blank") {
|
||
let w = 612, h = 792;
|
||
const paper = box.querySelector("#insPaper").value;
|
||
if (paper === "custom") {
|
||
w = Number(box.querySelector("#insW").value) || 612;
|
||
h = Number(box.querySelector("#insH").value) || 792;
|
||
} else {
|
||
[w, h] = paper.split("x").map(Number);
|
||
}
|
||
newEntries = [{ kind: "blank", widthPt: w, heightPt: h, rotationDelta: 0, crop: null }];
|
||
} else {
|
||
if (!insertFile) { box.querySelector("#insErr").textContent = "Hãy chọn file nguồn."; return; }
|
||
let count;
|
||
try {
|
||
const meta = await invoke("open_document", { path: insertFile });
|
||
count = meta.pageCount;
|
||
} catch (e) {
|
||
box.querySelector("#insErr").textContent = "Không mở được file: " + e;
|
||
return;
|
||
}
|
||
const rangeStr = box.querySelector("#insRange").value.trim();
|
||
const indices = rangeStr ? parsePageRange(rangeStr, count) : Array.from({ length: count }, (_, i) => i);
|
||
if (!indices.length) { box.querySelector("#insErr").textContent = "Phạm vi trang không hợp lệ."; return; }
|
||
newEntries = indices.map((idx) => ({ kind: "existing", source: insertFile, srcIndex: idx, rotationDelta: 0, crop: null }));
|
||
}
|
||
let at = state.pagePlan.length;
|
||
if (pos === "before") at = Math.min(...state.orgSelected);
|
||
else if (pos === "after") at = Math.max(...state.orgSelected) + 1;
|
||
pushUndo();
|
||
state.pagePlan.splice(at, 0, ...newEntries);
|
||
state.orgSelected = new Set();
|
||
buildOrganizeGrid();
|
||
closeModal();
|
||
});
|
||
}
|
||
|
||
function openExtractDialog() {
|
||
if (!state.orgSelected.size) { $("organizeHint").textContent = "Chưa chọn trang nào để trích"; return; }
|
||
const box = openModal("Trích trang", `
|
||
<p>Trích ${state.orgSelected.size} trang đã chọn ra file PDF mới.</p>
|
||
<label><input type="checkbox" id="extDeleteAfter"> Xoá các trang này khỏi tài liệu sau khi trích</label>
|
||
<div class="err" id="extErr"></div>
|
||
<div class="foot"><button id="extCancel">Huỷ</button><button id="extOk" class="primary">Trích…</button></div>
|
||
`);
|
||
box.querySelector("#extCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#extOk").addEventListener("click", async () => {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
const indices = Array.from(state.orgSelected).sort((a, b) => a - b);
|
||
const plan = indices.map((i) => state.pagePlan[i]);
|
||
try {
|
||
await invoke("organize_apply", { mainInput: state.path, plan, output: out, password: null });
|
||
if (box.querySelector("#extDeleteAfter").checked) {
|
||
pushUndo();
|
||
state.pagePlan = state.pagePlan.filter((_, i) => !state.orgSelected.has(i));
|
||
state.orgSelected = new Set();
|
||
buildOrganizeGrid();
|
||
}
|
||
$("organizeHint").textContent = `Đã trích ra ${shortName(out)}`;
|
||
closeModal();
|
||
} catch (e) {
|
||
box.querySelector("#extErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
function openReplaceDialog() {
|
||
if (!state.orgSelected.size) { $("organizeHint").textContent = "Chưa chọn trang nào để thay"; return; }
|
||
const box = openModal("Thay trang", `
|
||
<p>Thay nội dung ${state.orgSelected.size} trang đã chọn bằng trang từ file khác.</p>
|
||
<label>File nguồn</label>
|
||
<button id="repPickFile" type="button">📂 Chọn file…</button>
|
||
<span id="repFileName" class="status"></span>
|
||
<label>Trang nguồn (vd 1-3,5 — rỗng = tất cả)</label>
|
||
<input type="text" id="repRange" placeholder="tất cả">
|
||
<div class="err" id="repErr"></div>
|
||
<div class="foot"><button id="repCancel">Huỷ</button><button id="repOk" class="primary">Thay</button></div>
|
||
`);
|
||
let file = null;
|
||
box.querySelector("#repPickFile").addEventListener("click", async () => {
|
||
const p = await invoke("pick_pdf");
|
||
if (p) { file = p; box.querySelector("#repFileName").textContent = shortName(p); }
|
||
});
|
||
box.querySelector("#repCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#repOk").addEventListener("click", async () => {
|
||
if (!file) { box.querySelector("#repErr").textContent = "Hãy chọn file nguồn."; return; }
|
||
let count;
|
||
try {
|
||
const meta = await invoke("open_document", { path: file });
|
||
count = meta.pageCount;
|
||
} catch (e) {
|
||
box.querySelector("#repErr").textContent = "Không mở được file: " + e;
|
||
return;
|
||
}
|
||
const rangeStr = box.querySelector("#repRange").value.trim();
|
||
const indices = rangeStr ? parsePageRange(rangeStr, count) : Array.from({ length: count }, (_, i) => i);
|
||
if (!indices.length) { box.querySelector("#repErr").textContent = "Phạm vi trang không hợp lệ."; return; }
|
||
const newEntries = indices.map((idx) => ({ kind: "existing", source: file, srcIndex: idx, rotationDelta: 0, crop: null }));
|
||
const sorted = Array.from(state.orgSelected).sort((a, b) => a - b);
|
||
const at = sorted[0];
|
||
pushUndo();
|
||
state.pagePlan = state.pagePlan.filter((_, i) => !state.orgSelected.has(i));
|
||
state.pagePlan.splice(Math.min(at, state.pagePlan.length), 0, ...newEntries);
|
||
state.orgSelected = new Set();
|
||
buildOrganizeGrid();
|
||
closeModal();
|
||
});
|
||
}
|
||
|
||
function openMergeDialog() {
|
||
let files = [];
|
||
const box = openModal("Trộn file PDF", `
|
||
<button id="mrgAdd" type="button">➕ Thêm file…</button>
|
||
<div id="mrgList" style="margin-top:8px;"></div>
|
||
<div class="err" id="mrgErr"></div>
|
||
<div class="foot"><button id="mrgCancel">Huỷ</button><button id="mrgOk" class="primary">Trộn…</button></div>
|
||
`);
|
||
function renderList() {
|
||
box.querySelector("#mrgList").innerHTML = files.map((f, i) =>
|
||
`<div class="row" style="margin-bottom:4px;align-items:center;">` +
|
||
`<span style="flex:3">${i + 1}. ${shortName(f)}</span>` +
|
||
`<button data-up="${i}" type="button" ${i === 0 ? "disabled" : ""}>↑</button>` +
|
||
`<button data-down="${i}" type="button" ${i === files.length - 1 ? "disabled" : ""}>↓</button>` +
|
||
`<button data-rm="${i}" type="button">✕</button></div>`
|
||
).join("");
|
||
}
|
||
box.querySelector("#mrgAdd").addEventListener("click", async () => {
|
||
const p = await invoke("pick_pdf");
|
||
if (p) { files.push(p); renderList(); }
|
||
});
|
||
box.querySelector("#mrgList").addEventListener("click", (e) => {
|
||
const t = e.target;
|
||
if (t.dataset.up != null) {
|
||
const i = Number(t.dataset.up);
|
||
[files[i - 1], files[i]] = [files[i], files[i - 1]];
|
||
renderList();
|
||
} else if (t.dataset.down != null) {
|
||
const i = Number(t.dataset.down);
|
||
[files[i + 1], files[i]] = [files[i], files[i + 1]];
|
||
renderList();
|
||
} else if (t.dataset.rm != null) {
|
||
files.splice(Number(t.dataset.rm), 1);
|
||
renderList();
|
||
}
|
||
});
|
||
box.querySelector("#mrgCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#mrgOk").addEventListener("click", async () => {
|
||
if (files.length < 1) { box.querySelector("#mrgErr").textContent = "Hãy thêm ít nhất 1 file."; return; }
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("organize_merge", { files, output: out });
|
||
$("status").textContent = `Đã trộn ${files.length} file → ${shortName(out)}`;
|
||
closeModal();
|
||
} catch (e) {
|
||
box.querySelector("#mrgErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
renderList();
|
||
}
|
||
|
||
function openSplitDialog() {
|
||
const box = openModal("Tách file PDF", `
|
||
<label>Mỗi file tối đa (số trang)</label>
|
||
<input type="number" id="splitN" value="1" min="1">
|
||
<div class="err" id="splitErr"></div>
|
||
<div class="foot"><button id="splitCancel">Huỷ</button><button id="splitOk" class="primary">Tách…</button></div>
|
||
`);
|
||
box.querySelector("#splitCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#splitOk").addEventListener("click", async () => {
|
||
const n = Math.max(1, Number(box.querySelector("#splitN").value) || 1);
|
||
const outDir = await invoke("pick_dir");
|
||
if (!outDir) return;
|
||
try {
|
||
const base = shortName(state.path).replace(/\.pdf$/i, "");
|
||
const outs = await invoke("organize_split", {
|
||
input: state.path, pagesPerFile: n, outDir, baseName: base, password: null,
|
||
});
|
||
$("status").textContent = `Đã tách thành ${outs.length} file vào ${outDir}`;
|
||
closeModal();
|
||
} catch (e) {
|
||
box.querySelector("#splitErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function openWatermarkDialog() {
|
||
const base = await materializeBaseInput();
|
||
const previewPage = base.isTemp ? (state.orgSelected.size ? Math.min(...state.orgSelected) : 0) : state.current;
|
||
const box = openModal("Watermark", `
|
||
${base.isTemp ? MATERIALIZED_NOTE : ""}
|
||
<label>Nội dung</label>
|
||
<input type="text" id="wmText" value="CONFIDENTIAL">
|
||
<div class="row">
|
||
<div><label>Cỡ chữ</label><input type="number" id="wmSize" value="36"></div>
|
||
<div><label>Màu (r,g,b)</label><input type="text" id="wmColor" value="200,0,0"></div>
|
||
<div><label>Độ mờ (0-255)</label><input type="number" id="wmAlpha" value="120" min="0" max="255"></div>
|
||
</div>
|
||
<div class="row">
|
||
<label><input type="checkbox" id="wmBold"> Đậm</label>
|
||
<label><input type="checkbox" id="wmItalic"> Nghiêng</label>
|
||
</div>
|
||
<label>Góc xoay (độ)</label>
|
||
<input type="number" id="wmRotate" value="45">
|
||
<label>Vị trí</label>
|
||
<div class="anchor9" id="wmAnchor">
|
||
${["top-left", "top-center", "top-right", "middle-left", "center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
|
||
.map((a) => `<button type="button" data-a="${a}" class="${a === "center" ? "cur" : ""}">●</button>`).join("")}
|
||
</div>
|
||
<label>Trang áp dụng (rỗng = tất cả, vd 1-3,5)</label>
|
||
<input type="text" id="wmPages" placeholder="tất cả">
|
||
<div class="foot">
|
||
<button id="wmPreview" type="button">👁 Xem trước</button>
|
||
<button id="wmCancel">Huỷ</button><button id="wmOk" class="primary">Áp dụng</button>
|
||
</div>
|
||
<div class="err" id="wmErr"></div>
|
||
`);
|
||
let anchor = "center";
|
||
box.querySelector("#wmAnchor").addEventListener("click", (e) => {
|
||
const btn = e.target.closest("button[data-a]");
|
||
if (!btn) return;
|
||
anchor = btn.dataset.a;
|
||
box.querySelectorAll("#wmAnchor button").forEach((b) => b.classList.toggle("cur", b === btn));
|
||
});
|
||
function buildSpec() {
|
||
const [r, g, b] = box.querySelector("#wmColor").value.split(",").map((x) => Number(x.trim()) || 0);
|
||
return {
|
||
text: box.querySelector("#wmText").value || "",
|
||
fontSize: Number(box.querySelector("#wmSize").value) || 36,
|
||
color: [r, g, b, Number(box.querySelector("#wmAlpha").value) || 120],
|
||
bold: box.querySelector("#wmBold").checked,
|
||
italic: box.querySelector("#wmItalic").checked,
|
||
rotationDeg: Number(box.querySelector("#wmRotate").value) || 0,
|
||
anchor,
|
||
pages: box.querySelector("#wmPages").value.trim()
|
||
? parsePageRange(box.querySelector("#wmPages").value.trim(), base.pageCount)
|
||
: [],
|
||
};
|
||
}
|
||
box.querySelector("#wmPreview").addEventListener("click", async () => {
|
||
try {
|
||
const url = await invoke("preview_watermark", { input: base.path, page: previewPage, spec: buildSpec(), width: 500 });
|
||
let img = box.querySelector("#wmPreviewImg");
|
||
if (!img) {
|
||
img = document.createElement("img");
|
||
img.id = "wmPreviewImg";
|
||
img.style.maxWidth = "100%";
|
||
img.style.marginTop = "8px";
|
||
box.insertBefore(img, box.querySelector(".foot"));
|
||
}
|
||
img.src = url;
|
||
} catch (e) {
|
||
box.querySelector("#wmErr").textContent = "Lỗi xem trước: " + e;
|
||
}
|
||
});
|
||
box.querySelector("#wmCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#wmOk").addEventListener("click", async () => {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("watermark_add", { input: base.path, spec: buildSpec(), output: out, password: null });
|
||
$("status").textContent = `Đã thêm watermark → ${shortName(out)}`;
|
||
closeModal();
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
box.querySelector("#wmErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function openHeaderFooterDialog() {
|
||
const base = await materializeBaseInput();
|
||
const previewPage = base.isTemp ? (state.orgSelected.size ? Math.min(...state.orgSelected) : 0) : state.current;
|
||
const box = openModal("Header / Footer", `
|
||
${base.isTemp ? MATERIALIZED_NOTE : ""}
|
||
<div class="row">
|
||
<div><label>Trên-trái</label><input type="text" id="hfTL"></div>
|
||
<div><label>Trên-giữa</label><input type="text" id="hfTC"></div>
|
||
<div><label>Trên-phải</label><input type="text" id="hfTR"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div><label>Dưới-trái</label><input type="text" id="hfBL"></div>
|
||
<div><label>Dưới-giữa</label><input type="text" id="hfBC" value="Trang {page}/{total}"></div>
|
||
<div><label>Dưới-phải</label><input type="text" id="hfBR"></div>
|
||
</div>
|
||
<p class="status">Chèn vào ô đang focus:
|
||
<button type="button" data-tok="{page}">{page}</button>
|
||
<button type="button" data-tok="{total}">{total}</button>
|
||
<button type="button" data-tok="{date}">{date}</button>
|
||
</p>
|
||
<div class="row">
|
||
<div><label>Cỡ chữ</label><input type="number" id="hfSize" value="10"></div>
|
||
<div><label>Lề (pt)</label><input type="number" id="hfMargin" value="20"></div>
|
||
<div><label>Màu (r,g,b)</label><input type="text" id="hfColor" value="0,0,0"></div>
|
||
</div>
|
||
<label>Trang áp dụng (rỗng = tất cả)</label>
|
||
<input type="text" id="hfPages" placeholder="tất cả">
|
||
<div class="foot">
|
||
<button id="hfPreview" type="button">👁 Xem trước</button>
|
||
<button id="hfCancel">Huỷ</button><button id="hfOk" class="primary">Áp dụng</button>
|
||
</div>
|
||
<div class="err" id="hfErr"></div>
|
||
`);
|
||
let lastFocused = box.querySelector("#hfBC");
|
||
box.querySelectorAll("input[type=text]").forEach((inp) => inp.addEventListener("focus", () => { lastFocused = inp; }));
|
||
box.querySelectorAll("button[data-tok]").forEach((btn) => btn.addEventListener("click", () => {
|
||
if (lastFocused) { lastFocused.value += btn.dataset.tok; lastFocused.focus(); }
|
||
}));
|
||
function buildSpec() {
|
||
const [r, g, b] = box.querySelector("#hfColor").value.split(",").map((x) => Number(x.trim()) || 0);
|
||
return {
|
||
topLeft: box.querySelector("#hfTL").value,
|
||
topCenter: box.querySelector("#hfTC").value,
|
||
topRight: box.querySelector("#hfTR").value,
|
||
bottomLeft: box.querySelector("#hfBL").value,
|
||
bottomCenter: box.querySelector("#hfBC").value,
|
||
bottomRight: box.querySelector("#hfBR").value,
|
||
fontSize: Number(box.querySelector("#hfSize").value) || 10,
|
||
color: [r, g, b, 255],
|
||
marginPt: Number(box.querySelector("#hfMargin").value) || 20,
|
||
date: new Date().toLocaleDateString("vi-VN"),
|
||
pages: box.querySelector("#hfPages").value.trim()
|
||
? parsePageRange(box.querySelector("#hfPages").value.trim(), base.pageCount)
|
||
: [],
|
||
};
|
||
}
|
||
box.querySelector("#hfPreview").addEventListener("click", async () => {
|
||
try {
|
||
const url = await invoke("preview_header_footer", { input: base.path, page: previewPage, spec: buildSpec(), width: 500 });
|
||
let img = box.querySelector("#hfPreviewImg");
|
||
if (!img) {
|
||
img = document.createElement("img");
|
||
img.id = "hfPreviewImg";
|
||
img.style.maxWidth = "100%";
|
||
img.style.marginTop = "8px";
|
||
box.insertBefore(img, box.querySelector(".foot"));
|
||
}
|
||
img.src = url;
|
||
} catch (e) {
|
||
box.querySelector("#hfErr").textContent = "Lỗi xem trước: " + e;
|
||
}
|
||
});
|
||
box.querySelector("#hfCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#hfOk").addEventListener("click", async () => {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("header_footer_add", { input: base.path, spec: buildSpec(), output: out, password: null });
|
||
$("status").textContent = `Đã thêm header/footer → ${shortName(out)}`;
|
||
closeModal();
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
box.querySelector("#hfErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Crop: tái dùng cơ chế kéo-vẽ hình chữ nhật đã có cho tool "square" — xem
|
||
// nhánh `tool === "crop"` trong onPagesMouseUp. Tìm theo `srcIndex` (không
|
||
// theo vị trí trong pagePlan) vì viewer luôn hiển thị trang theo số trang GỐC
|
||
// của file đang mở, bất kể pagePlan đã bị đảo/chèn/xoá hay chưa.
|
||
function openCropDialog(pageIdx, rectPdf) {
|
||
const p = state.pages[pageIdx];
|
||
const m = {
|
||
left: rectPdf.left,
|
||
bottom: rectPdf.bottom,
|
||
right: p.widthPt - rectPdf.right,
|
||
top: p.heightPt - rectPdf.top,
|
||
};
|
||
const box = openModal("Crop trang", `
|
||
<div class="row">
|
||
<div><label>Trái (pt)</label><input type="number" id="cropL" value="${m.left.toFixed(1)}"></div>
|
||
<div><label>Phải (pt)</label><input type="number" id="cropR" value="${m.right.toFixed(1)}"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div><label>Trên (pt)</label><input type="number" id="cropT" value="${m.top.toFixed(1)}"></div>
|
||
<div><label>Dưới (pt)</label><input type="number" id="cropB" value="${m.bottom.toFixed(1)}"></div>
|
||
</div>
|
||
<div class="radiorow">
|
||
<label><input type="radio" name="cropScope" value="this" checked> Trang này</label>
|
||
<label><input type="radio" name="cropScope" value="all"> Tất cả trang</label>
|
||
</div>
|
||
<p class="status">Áp dụng ngay vào kế hoạch tổ chức trang — vào "🗂 Tổ chức trang" → "💾 Lưu thay đổi" để ghi ra file thật.</p>
|
||
<div class="foot"><button id="cropCancel">Huỷ</button><button id="cropOk" class="primary">Áp dụng</button></div>
|
||
`);
|
||
box.querySelector("#cropCancel").addEventListener("click", () => {
|
||
closeModal();
|
||
drawAnnotsForPage(pageIdx);
|
||
});
|
||
box.querySelector("#cropOk").addEventListener("click", () => {
|
||
const l = Number(box.querySelector("#cropL").value) || 0;
|
||
const r = Number(box.querySelector("#cropR").value) || 0;
|
||
const t = Number(box.querySelector("#cropT").value) || 0;
|
||
const b = Number(box.querySelector("#cropB").value) || 0;
|
||
const scope = box.querySelector('input[name=cropScope]:checked').value;
|
||
pushUndo();
|
||
for (const entry of state.pagePlan) {
|
||
const isThis = !entry.source && entry.srcIndex === pageIdx;
|
||
if (scope === "all" || isThis) {
|
||
const dims = (!entry.source && state.pages[entry.srcIndex]) ? state.pages[entry.srcIndex] : p;
|
||
entry.crop = { left: l, bottom: b, right: dims.widthPt - r, top: dims.heightPt - t };
|
||
}
|
||
}
|
||
closeModal();
|
||
setTool(null);
|
||
drawAnnotsForPage(pageIdx);
|
||
$("status").textContent = "Đã đặt vùng crop — vào Tổ chức trang > Lưu để ghi ra file thật.";
|
||
});
|
||
}
|
||
|
||
// ---------- Phase 4: Sửa nội dung (Edit) ----------
|
||
// Mô hình "materialize tức thì": mỗi thao tác (sửa text / xoá / thêm / di
|
||
// chuyển) được áp NGAY vào 1 file tạm mới (editBase) qua edit_apply, rồi đọc
|
||
// lại object + render ảnh từ file đó. Nhờ vậy: index object luôn khớp ảnh đang
|
||
// hiện (WYSIWYG thật), không phải tự suy đoán; undo = quay lại file tạm trước.
|
||
|
||
const EDIT_STAGE_W = 820; // px bề rộng ảnh trang khi sửa
|
||
|
||
function enterEditMode(pageIndex) {
|
||
if (!state.path) { $("status").textContent = "Hãy mở file trước khi sửa nội dung"; return; }
|
||
if (state.organizeMode) exitOrganizeMode();
|
||
state.editMode = true;
|
||
state.editPage = Number.isInteger(pageIndex) ? pageIndex : state.current;
|
||
state.editBase = state.path;
|
||
state.editUndo = [];
|
||
state.editRedo = [];
|
||
state.editTemps = [];
|
||
state.editSel = null;
|
||
state.editArm = null;
|
||
state.editPendingImage = null;
|
||
$("annobar").classList.add("hidden");
|
||
$("editBar").classList.remove("hidden");
|
||
$("viewport").classList.add("hidden");
|
||
$("editStage").classList.remove("hidden");
|
||
$("sidebar").classList.add("hidden");
|
||
$("editModeBtn").classList.add("active");
|
||
setTool(null);
|
||
loadEditPage();
|
||
}
|
||
// Dọn mọi file làm việc tạm của phiên sửa (backend chỉ xoá đúng ff_edit_*.pdf
|
||
// trong thư mục temp nên gọi thoải mái).
|
||
function cleanupEditTemps() {
|
||
if (state.editTemps.length) {
|
||
invoke("edit_cleanup", { paths: state.editTemps.slice() }).catch(() => {});
|
||
state.editTemps = [];
|
||
}
|
||
}
|
||
|
||
function exitEditMode() {
|
||
cleanupEditTemps();
|
||
state.editMode = false;
|
||
$("annobar").classList.remove("hidden");
|
||
$("editBar").classList.add("hidden");
|
||
$("viewport").classList.remove("hidden");
|
||
$("editStage").classList.add("hidden");
|
||
$("sidebar").classList.remove("hidden");
|
||
$("editModeBtn").classList.remove("active");
|
||
$("editOverlay").innerHTML = "";
|
||
}
|
||
function toggleEditMode() {
|
||
if (state.editMode) exitEditMode();
|
||
else enterEditMode();
|
||
}
|
||
|
||
// Đúp chuột vào CHỮ trên viewer thường (chuẩn Foxit Editor): tự vào chế độ
|
||
// Sửa nội dung đúng trang + mở ngay ô sửa tại đoạn vừa đúp. Đúp vùng trống
|
||
// hoặc đang cầm công cụ chú thích thì không làm gì.
|
||
async function onViewerDblClick(e) {
|
||
if (state.editMode || state.organizeMode || state.tool) return;
|
||
// Chú thích có handler đúp riêng (freetext) hoặc là element tương tác — bỏ qua.
|
||
if (e.target.closest(".a-editor, .a-hl, .a-box, .a-text, .a-note, .redact-mark")) return;
|
||
const slot = e.target.closest(".page-slot");
|
||
if (!slot) return;
|
||
const idx = Number(slot.dataset.index);
|
||
const r = slot.getBoundingClientRect();
|
||
const p = cssToPdf(idx, e.clientX - r.left, e.clientY - r.top);
|
||
|
||
let objs;
|
||
try {
|
||
objs = await invoke("edit_list_objects", { path: state.path, page: idx, password: null });
|
||
} catch (_) {
|
||
return; // trang không đọc được object → giữ nguyên viewer
|
||
}
|
||
if (!pickTextAt(objs, p.x, p.y)) return; // đúp vùng trống: như Foxit, không làm gì
|
||
|
||
// Bỏ selection từ đúp chuột (browser tự bôi 1 từ trong text layer).
|
||
const sel = window.getSelection();
|
||
if (sel) sel.removeAllRanges();
|
||
state.editPendingPoint = { x: p.x, y: p.y };
|
||
enterEditMode(idx);
|
||
}
|
||
|
||
// Đọc lại object + render ảnh trang hiện tại từ editBase, dựng overlay box.
|
||
async function loadEditPage() {
|
||
const p = state.pages[state.editPage];
|
||
state.editScale = EDIT_STAGE_W / p.widthPt;
|
||
try {
|
||
const [url, objs] = await Promise.all([
|
||
invoke("render_page", { path: state.editBase, page: state.editPage, width: EDIT_STAGE_W }),
|
||
invoke("edit_list_objects", { path: state.editBase, page: state.editPage, password: null }),
|
||
]);
|
||
$("editImg").src = url;
|
||
state.editObjects = objs;
|
||
buildEditOverlay();
|
||
$("editHint").textContent = `Trang ${state.editPage + 1} · ${objs.length} đối tượng`;
|
||
} catch (e) {
|
||
$("editHint").textContent = "Lỗi nạp trang sửa: " + e;
|
||
}
|
||
$("edSave").disabled = state.editBase === state.path; // chưa có thay đổi nào
|
||
updateEditUndoButtons();
|
||
|
||
// Đúp chuột từ viewer thường (kiểu Foxit): vào thẳng ô sửa tại điểm đã đúp.
|
||
const pending = state.editPendingPoint;
|
||
if (pending) {
|
||
state.editPendingPoint = null;
|
||
const o = pickTextAt(state.editObjects, pending.x, pending.y);
|
||
if (o) {
|
||
selectEditObject(o.index);
|
||
startTextEdit(o);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Text object dưới điểm (x,y) điểm PDF: ưu tiên box CHỨA điểm (nới 3pt, chọn
|
||
// box nhỏ nhất khi chồng nhau), fallback box gần nhất trong 12pt.
|
||
function pickTextAt(objs, x, y) {
|
||
const texts = objs.filter((o) => o.kind === "text");
|
||
const pad = 3;
|
||
const containing = texts.filter(
|
||
(o) => x >= o.rect.left - pad && x <= o.rect.right + pad && y >= o.rect.bottom - pad && y <= o.rect.top + pad
|
||
);
|
||
if (containing.length) {
|
||
containing.sort(
|
||
(a, b) =>
|
||
(a.rect.right - a.rect.left) * (a.rect.top - a.rect.bottom) -
|
||
(b.rect.right - b.rect.left) * (b.rect.top - b.rect.bottom)
|
||
);
|
||
return containing[0];
|
||
}
|
||
let best = null;
|
||
let bestD = 12;
|
||
for (const o of texts) {
|
||
const dx = Math.max(o.rect.left - x, 0, x - o.rect.right);
|
||
const dy = Math.max(o.rect.bottom - y, 0, y - o.rect.top);
|
||
const d = Math.hypot(dx, dy);
|
||
if (d < bestD) { bestD = d; best = o; }
|
||
}
|
||
return best;
|
||
}
|
||
|
||
function editBoxStyle(rect) {
|
||
const s = state.editScale;
|
||
const p = state.pages[state.editPage];
|
||
return {
|
||
left: rect.left * s + "px",
|
||
top: (p.heightPt - rect.top) * s + "px",
|
||
width: Math.max(2, (rect.right - rect.left) * s) + "px",
|
||
height: Math.max(2, (rect.top - rect.bottom) * s) + "px",
|
||
};
|
||
}
|
||
|
||
function buildEditOverlay() {
|
||
const ov = $("editOverlay");
|
||
ov.innerHTML = "";
|
||
ov.classList.toggle("armed", !!state.editArm);
|
||
const img = $("editImg");
|
||
// Khớp kích thước overlay với ảnh thực tế hiển thị.
|
||
state.editObjects.forEach((o) => {
|
||
if (o.kind === "path" || o.kind === "shading") return; // path/shading: chưa cho chọn ở v1
|
||
const box = document.createElement("div");
|
||
box.className = "edit-box kind-" + o.kind + (state.editSel === o.index ? " selected" : "");
|
||
box.dataset.index = String(o.index);
|
||
Object.assign(box.style, editBoxStyle(o.rect));
|
||
box.title = o.kind === "text" ? (o.text || "") : o.kind;
|
||
box.addEventListener("mousedown", (e) => onEditBoxMouseDown(e, o));
|
||
box.addEventListener("click", (e) => {
|
||
if (state.editArm) return; // đang chờ đặt chữ/ảnh → để click rơi xuống overlay
|
||
e.stopPropagation();
|
||
selectEditObject(o.index);
|
||
});
|
||
if (o.kind === "text") {
|
||
box.addEventListener("dblclick", (e) => { e.stopPropagation(); startTextEdit(o); });
|
||
}
|
||
ov.appendChild(box);
|
||
});
|
||
refreshEditSelection();
|
||
void img;
|
||
}
|
||
|
||
// Cập nhật trạng thái chọn TẠI CHỖ (không dựng lại overlay) — quan trọng để
|
||
// double-click không bị mất element giữa 2 lần click.
|
||
function refreshEditSelection() {
|
||
const ov = $("editOverlay");
|
||
ov.querySelectorAll(".edit-box").forEach((box) => {
|
||
const isSel = Number(box.dataset.index) === state.editSel;
|
||
box.classList.toggle("selected", isSel);
|
||
const existing = box.querySelector(".ed-handle");
|
||
if (isSel && !existing) {
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
const h = document.createElement("div");
|
||
h.className = "ed-handle";
|
||
h.addEventListener("mousedown", (e) => onEditResizeMouseDown(e, o));
|
||
box.appendChild(h);
|
||
} else if (!isSel && existing) {
|
||
existing.remove();
|
||
}
|
||
});
|
||
}
|
||
|
||
function selectEditObject(index) {
|
||
state.editSel = index != null && index >= 0 ? index : null;
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
const isText = o && o.kind === "text";
|
||
const isImage = o && o.kind === "image";
|
||
$("edDelete").disabled = !o;
|
||
$("edReplaceImage").disabled = !isImage;
|
||
$("edFontSize").disabled = !isText;
|
||
$("edColorBtn").disabled = !isText;
|
||
$("edFontFamily").disabled = !isText;
|
||
$("edBold").disabled = !isText;
|
||
$("edItalic").disabled = !isText;
|
||
if (isText) {
|
||
$("edFontSize").value = Math.round(o.font_size || 12);
|
||
if (o.color) { state.editColor = o.color.slice(0, 3); $("edSw").style.background = rgbCss(state.editColor); }
|
||
// Ô font: mặc định "(giữ nguyên: <family gốc>)" — chỉ đổi khi người dùng chọn khác.
|
||
$("edFontFamily").options[0].textContent = o.font_family
|
||
? `(giữ nguyên: ${o.font_family})`
|
||
: "(giữ nguyên)";
|
||
$("edFontFamily").value = "";
|
||
$("edBold").classList.toggle("on", !!o.font_bold);
|
||
$("edItalic").classList.toggle("on", !!o.font_italic);
|
||
const emb = o.font_embedded == null ? "" : o.font_embedded ? " · font nhúng" : " · font hệ thống";
|
||
$("editHint").textContent =
|
||
`${o.font_family || o.font_name || "?"} · ${Math.round(o.font_size || 0)}pt${emb}`;
|
||
} else {
|
||
$("edFontFamily").options[0].textContent = "(giữ nguyên)";
|
||
$("edBold").classList.remove("on");
|
||
$("edItalic").classList.remove("on");
|
||
}
|
||
refreshEditSelection();
|
||
}
|
||
|
||
function updateEditUndoButtons() {
|
||
// Dùng chung 2 nút Hoàn tác/Làm lại toàn cục khi đang ở chế độ sửa.
|
||
if (!state.editMode) return;
|
||
$("undoBtn").disabled = state.editUndo.length === 0;
|
||
$("redoBtn").disabled = state.editRedo.length === 0;
|
||
}
|
||
|
||
// Áp 1 nhóm op (1 thao tác người dùng): lưu editBase cũ vào stack undo,
|
||
// materialize ra file tạm mới, ghi nhận file tạm để dọn khi thoát.
|
||
async function stageEditOps(ops) {
|
||
try {
|
||
const out = await invoke("edit_apply_to_temp", {
|
||
input: state.editBase, page: state.editPage, ops, password: null,
|
||
});
|
||
state.editTemps.push(out);
|
||
state.editUndo.push(state.editBase);
|
||
state.editRedo = [];
|
||
state.editBase = out;
|
||
state.editSel = null;
|
||
selectEditObject(-1);
|
||
await loadEditPage();
|
||
} catch (e) {
|
||
$("editHint").textContent = "Lỗi: " + e;
|
||
}
|
||
}
|
||
|
||
function stageEditOp(op) {
|
||
return stageEditOps([op]);
|
||
}
|
||
|
||
function editUndo() {
|
||
if (!state.editUndo.length) return;
|
||
state.editRedo.push(state.editBase);
|
||
state.editBase = state.editUndo.pop();
|
||
state.editSel = null;
|
||
loadEditPage();
|
||
}
|
||
function editRedo() {
|
||
if (!state.editRedo.length) return;
|
||
state.editUndo.push(state.editBase);
|
||
state.editBase = state.editRedo.pop();
|
||
state.editSel = null;
|
||
loadEditPage();
|
||
}
|
||
|
||
// CSS font-family xấp xỉ cho family PDF (để ô sửa hiển thị đúng dáng chữ).
|
||
function cssFontStack(family) {
|
||
if (!family) return "sans-serif";
|
||
const k = family.toLowerCase();
|
||
const generic = /times|georgia|garamond|palatino|cambria|book|serif/.test(k)
|
||
? "serif"
|
||
: /courier|consolas|mono/.test(k)
|
||
? "monospace"
|
||
: "sans-serif";
|
||
return `"${family}", ${generic}`;
|
||
}
|
||
|
||
// Gom các text run CÙNG DÒNG với `o` (baseline xấp xỉ, liền kề theo chiều
|
||
// ngang) — PDF hay cắt 1 dòng nhìn thấy thành nhiều run; Foxit cho sửa cả
|
||
// dòng nên ta cũng vậy. Trả về mảng run đã xếp trái→phải (luôn chứa `o`).
|
||
function sameLineRuns(o) {
|
||
const fs = o.font_size || 12;
|
||
const tol = Math.max(1.5, fs * 0.25);
|
||
const cands = state.editObjects
|
||
.filter(
|
||
(x) =>
|
||
x.kind === "text" &&
|
||
Math.abs(x.rect.bottom - o.rect.bottom) <= tol &&
|
||
(x.font_size || 12) <= fs * 2.2 &&
|
||
(x.font_size || 12) >= fs / 2.2
|
||
)
|
||
.sort((a, b) => a.rect.left - b.rect.left);
|
||
const i0 = cands.findIndex((x) => x.index === o.index);
|
||
if (i0 < 0) return [o];
|
||
const gapMax = Math.max(fs * 1.2, 6); // hở quá 1.2em coi như cột khác
|
||
const runs = [cands[i0]];
|
||
for (let i = i0 - 1; i >= 0; i--) {
|
||
if (runs[0].rect.left - cands[i].rect.right <= gapMax) runs.unshift(cands[i]);
|
||
else break;
|
||
}
|
||
for (let i = i0 + 1; i < cands.length; i++) {
|
||
if (cands[i].rect.left - runs[runs.length - 1].rect.right <= gapMax) runs.push(cands[i]);
|
||
else break;
|
||
}
|
||
return runs;
|
||
}
|
||
|
||
// Ghép nội dung 1 dòng từ các run: chèn khoảng trắng khi 2 run hở nhau rõ.
|
||
function composeLineText(runs) {
|
||
let s = "";
|
||
for (let i = 0; i < runs.length; i++) {
|
||
const t = runs[i].text || "";
|
||
if (i > 0) {
|
||
const gap = runs[i].rect.left - runs[i - 1].rect.right;
|
||
const em = (runs[i].font_size || 12) * 0.28;
|
||
if (gap > em && !s.endsWith(" ") && !t.startsWith(" ")) s += " ";
|
||
}
|
||
s += t;
|
||
}
|
||
return s;
|
||
}
|
||
|
||
// Gom ĐOẠN VĂN nhiều dòng quanh run `o` (iteration 3): các dòng baseline cách
|
||
// đều (±25%), cỡ chữ tương đồng, giao nhau theo chiều ngang. Trả về mảng dòng
|
||
// trên→dưới, mỗi dòng = mảng run trái→phải.
|
||
function paragraphLines(o) {
|
||
const fs = o.font_size || 12;
|
||
const boundsOf = (runs) => ({
|
||
left: Math.min(...runs.map((r) => r.rect.left)),
|
||
right: Math.max(...runs.map((r) => r.rect.right)),
|
||
bottom: runs[0].rect.bottom,
|
||
});
|
||
const overlaps = (a, b) =>
|
||
Math.min(a.right, b.right) - Math.max(a.left, b.left) >
|
||
0.3 * Math.min(a.right - a.left, b.right - b.left);
|
||
|
||
const base = sameLineRuns(o);
|
||
const used = new Set(base.map((r) => r.index));
|
||
const lines = [base];
|
||
const cands = state.editObjects.filter(
|
||
(x) =>
|
||
x.kind === "text" &&
|
||
!used.has(x.index) &&
|
||
(x.font_size || 12) <= fs * 1.6 &&
|
||
(x.font_size || 12) >= fs / 1.6
|
||
);
|
||
let advance = null; // khoảng baseline đã chốt của đoạn
|
||
|
||
const extend = (dir) => {
|
||
// dir = -1: mở rộng XUỐNG (bottom giảm); +1: mở rộng LÊN.
|
||
for (;;) {
|
||
const edge = dir < 0 ? lines[lines.length - 1] : lines[0];
|
||
const eb = boundsOf(edge);
|
||
let best = null;
|
||
let bestGap = Infinity;
|
||
for (const r of cands) {
|
||
if (used.has(r.index)) continue;
|
||
const gap = dir < 0 ? eb.bottom - r.rect.bottom : r.rect.bottom - eb.bottom;
|
||
if (gap < fs * 0.6 || gap > fs * 2.6) continue; // quá sát/quá xa = không cùng đoạn
|
||
if (advance && (gap < advance * 0.75 || gap > advance * 1.25)) continue;
|
||
const line = sameLineRuns(r);
|
||
if (!overlaps(eb, boundsOf(line))) continue;
|
||
if (gap < bestGap) {
|
||
bestGap = gap;
|
||
best = line;
|
||
}
|
||
}
|
||
if (!best) break;
|
||
best.forEach((r) => used.add(r.index));
|
||
if (dir < 0) lines.push(best);
|
||
else lines.unshift(best);
|
||
if (advance == null) advance = bestGap;
|
||
}
|
||
};
|
||
extend(-1);
|
||
extend(+1);
|
||
return lines;
|
||
}
|
||
|
||
// Double-click: đoạn ≥2 dòng → sửa CẢ ĐOẠN với reflow; 1 dòng → sửa dòng.
|
||
function startTextEdit(o) {
|
||
const lines = paragraphLines(o);
|
||
if (lines.length >= 2) startBlockTextEdit(o, lines);
|
||
else startInlineTextEdit(o);
|
||
}
|
||
|
||
// Sửa cả đoạn "như Word" (Foxit Edit Text): textarea phủ khối, gõ tự chảy
|
||
// dòng; commit → engine reflow (bẻ dòng lại theo bề rộng khối, giữ font).
|
||
function startBlockTextEdit(o, lines) {
|
||
const ov = $("editOverlay");
|
||
const existing = ov.querySelector(".edit-inline");
|
||
if (existing) existing.remove();
|
||
|
||
const allRuns = lines.flat();
|
||
const union = {
|
||
left: Math.min(...allRuns.map((r) => r.rect.left)),
|
||
right: Math.max(...allRuns.map((r) => r.rect.right)),
|
||
bottom: Math.min(...allRuns.map((r) => r.rect.bottom)),
|
||
top: Math.max(...allRuns.map((r) => r.rect.top)),
|
||
};
|
||
// Đoạn = 1 dòng chảy; Enter của người dùng = ngắt cứng.
|
||
const original = lines.map(composeLineText).join(" ");
|
||
|
||
const ta = document.createElement("textarea");
|
||
ta.className = "edit-inline edit-inline-block";
|
||
ta.value = original;
|
||
Object.assign(ta.style, editBoxStyle(union));
|
||
const advPt =
|
||
lines.length > 1
|
||
? lines[0][0].rect.bottom - lines[1][0].rect.bottom
|
||
: (o.font_size || 12) * 1.25;
|
||
const advPx = Math.max(8, advPt * state.editScale);
|
||
// Chừa 2 dòng trống để gõ thêm.
|
||
ta.style.height = parseFloat(ta.style.height) + 2 * advPx + "px";
|
||
ta.style.lineHeight = advPx + "px";
|
||
ta.style.fontSize = Math.max(8, (o.font_size || 12) * state.editScale) + "px";
|
||
ta.style.fontFamily = cssFontStack(o.font_family);
|
||
ta.style.fontWeight = o.font_bold ? "bold" : "normal";
|
||
ta.style.fontStyle = o.font_italic ? "italic" : "normal";
|
||
if (o.color) ta.style.color = rgbCss(o.color);
|
||
ov.appendChild(ta);
|
||
ta.focus();
|
||
ta.setSelectionRange(0, 0);
|
||
$("editHint").textContent =
|
||
"Sửa cả đoạn — Enter: xuống dòng cứng · Ctrl+Enter hoặc bấm ra ngoài: áp dụng · Esc: huỷ";
|
||
|
||
let done = false;
|
||
const commit = (save) => {
|
||
if (done) return;
|
||
done = true;
|
||
const text = ta.value;
|
||
ta.remove();
|
||
if (save && text.trim() && text !== original) {
|
||
stageEditOp({
|
||
op: "reflowText",
|
||
indices: allRuns.map((r) => r.index),
|
||
text,
|
||
});
|
||
} else {
|
||
$("editHint").textContent = "";
|
||
}
|
||
};
|
||
ta.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") { e.preventDefault(); commit(false); }
|
||
else if (e.key === "Enter" && e.ctrlKey) { e.preventDefault(); commit(true); }
|
||
e.stopPropagation();
|
||
});
|
||
ta.addEventListener("blur", () => commit(true));
|
||
}
|
||
|
||
// Sửa text tại chỗ kiểu Foxit: gộp cả dòng, ô sửa hiển thị đúng font/cỡ/màu,
|
||
// Enter/blur commit — engine GIỮ FONT GỐC (chỉ thay khi thiếu glyph).
|
||
function startInlineTextEdit(o) {
|
||
const ov = $("editOverlay");
|
||
const existing = ov.querySelector(".edit-inline");
|
||
if (existing) existing.remove();
|
||
|
||
const runs = sameLineRuns(o);
|
||
const original = composeLineText(runs);
|
||
const union = {
|
||
left: Math.min(...runs.map((r) => r.rect.left)),
|
||
right: Math.max(...runs.map((r) => r.rect.right)),
|
||
bottom: Math.min(...runs.map((r) => r.rect.bottom)),
|
||
top: Math.max(...runs.map((r) => r.rect.top)),
|
||
};
|
||
|
||
const inp = document.createElement("input");
|
||
inp.className = "edit-inline";
|
||
inp.value = original;
|
||
const st = editBoxStyle(union);
|
||
Object.assign(inp.style, st);
|
||
// Chừa chỗ gõ thêm về bên phải (không tràn khung trang).
|
||
const p = state.pages[state.editPage];
|
||
const maxW = (p.widthPt - union.left) * state.editScale - 4;
|
||
inp.style.width = Math.min(maxW, parseFloat(st.width) + 220) + "px";
|
||
// WYSIWYG khi gõ: đúng font/cỡ/màu/kiểu của run đầu.
|
||
inp.style.fontSize = Math.max(8, (o.font_size || 12) * state.editScale) + "px";
|
||
inp.style.fontFamily = cssFontStack(o.font_family);
|
||
inp.style.fontWeight = o.font_bold ? "bold" : "normal";
|
||
inp.style.fontStyle = o.font_italic ? "italic" : "normal";
|
||
if (o.color) inp.style.color = rgbCss(o.color);
|
||
ov.appendChild(inp);
|
||
inp.focus();
|
||
inp.select();
|
||
|
||
let done = false;
|
||
const commit = (save) => {
|
||
if (done) return;
|
||
done = true;
|
||
const text = inp.value;
|
||
inp.remove();
|
||
if (save && text !== original) {
|
||
// Run đầu nhận toàn bộ text mới (giữ font/cỡ/màu gốc — mọi field null),
|
||
// các run còn lại của dòng bị xoá.
|
||
const ops = [
|
||
{
|
||
op: "setText",
|
||
index: runs[0].index,
|
||
text,
|
||
fontSize: null,
|
||
color: null,
|
||
fontFamily: null,
|
||
bold: null,
|
||
italic: null,
|
||
},
|
||
...runs.slice(1).map((r) => ({ op: "delete", index: r.index })),
|
||
];
|
||
stageEditOps(ops);
|
||
}
|
||
};
|
||
inp.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") { e.preventDefault(); commit(true); }
|
||
else if (e.key === "Escape") { e.preventDefault(); commit(false); }
|
||
e.stopPropagation();
|
||
});
|
||
inp.addEventListener("blur", () => commit(true));
|
||
}
|
||
|
||
// Đổi thuộc tính chữ cho run đang chọn. `part` chỉ chứa field muốn đổi —
|
||
// mọi field khác gửi null = GIỮ NGUYÊN (engine không đụng font khi không cần).
|
||
function applyTextPropToSelected(part) {
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
if (!o || o.kind !== "text") return;
|
||
stageEditOp({
|
||
op: "setText",
|
||
index: o.index,
|
||
text: o.text || "",
|
||
fontSize: null,
|
||
color: null,
|
||
fontFamily: null,
|
||
bold: null,
|
||
italic: null,
|
||
...part,
|
||
});
|
||
}
|
||
|
||
function deleteSelectedEditObject() {
|
||
if (state.editSel == null) return;
|
||
stageEditOp({ op: "delete", index: state.editSel });
|
||
}
|
||
|
||
// Click lên trang khi đang "armed" để đặt chữ/ảnh mới.
|
||
function onEditStageClick(e) {
|
||
if (!state.editArm) { selectEditObject(-1); state.editSel = null; buildEditOverlay(); return; }
|
||
const img = $("editImg");
|
||
const r = img.getBoundingClientRect();
|
||
const cssX = e.clientX - r.left;
|
||
const cssY = e.clientY - r.top;
|
||
const p = state.pages[state.editPage];
|
||
const pdfX = cssX / state.editScale;
|
||
const pdfY = p.heightPt - cssY / state.editScale;
|
||
if (state.editArm === "text") {
|
||
state.editArm = null;
|
||
$("edAddText").classList.remove("armed");
|
||
promptAddText(pdfX, pdfY);
|
||
} else if (state.editArm === "image") {
|
||
const path = state.editPendingImage;
|
||
state.editArm = null;
|
||
state.editPendingImage = null;
|
||
$("edAddImage").classList.remove("armed");
|
||
if (path) {
|
||
// Khung mặc định 150×112pt (4:3) — người dùng kéo handle để chỉnh lại.
|
||
stageEditOp({ op: "addImage", x: pdfX, y: pdfY - 112, widthPt: 150, heightPt: 112, imagePath: path });
|
||
}
|
||
}
|
||
$("editOverlay").classList.remove("armed");
|
||
}
|
||
|
||
function promptAddText(pdfX, pdfY) {
|
||
const ov = $("editOverlay");
|
||
const inp = document.createElement("input");
|
||
inp.className = "edit-inline";
|
||
inp.placeholder = "Nhập chữ…";
|
||
const s = state.editScale;
|
||
const p = state.pages[state.editPage];
|
||
const family = $("edFontFamily").value || null; // null = font mặc định
|
||
const size = Number($("edFontSize").value) || 16;
|
||
inp.style.left = pdfX * s + "px";
|
||
inp.style.top = (p.heightPt - pdfY) * s + "px";
|
||
inp.style.minWidth = "120px";
|
||
inp.style.fontSize = Math.max(10, size * s) + "px";
|
||
inp.style.fontFamily = cssFontStack(family);
|
||
inp.style.color = rgbCss(state.editColor);
|
||
ov.appendChild(inp);
|
||
inp.focus();
|
||
let done = false;
|
||
const commit = (save) => {
|
||
if (done) return; done = true;
|
||
const text = inp.value;
|
||
inp.remove();
|
||
if (save && text.trim()) {
|
||
stageEditOp({
|
||
op: "addText", x: pdfX, y: pdfY, text,
|
||
fontSize: size, color: [state.editColor[0], state.editColor[1], state.editColor[2], 255],
|
||
fontFamily: family,
|
||
bold: null, italic: null,
|
||
});
|
||
}
|
||
};
|
||
inp.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") { e.preventDefault(); commit(true); }
|
||
else if (e.key === "Escape") { e.preventDefault(); commit(false); }
|
||
e.stopPropagation();
|
||
});
|
||
inp.addEventListener("blur", () => commit(true));
|
||
}
|
||
|
||
// Kéo để di chuyển object đang chọn — box đi theo con trỏ NGAY (live feedback
|
||
// như Foxit), thả chuột mới commit vào engine.
|
||
function onEditBoxMouseDown(e, o) {
|
||
if (state.editArm) return;
|
||
if (e.target.classList.contains("ed-handle")) return;
|
||
selectEditObject(o.index);
|
||
const box = e.currentTarget;
|
||
const startX = e.clientX, startY = e.clientY;
|
||
const left0 = parseFloat(box.style.left), top0 = parseFloat(box.style.top);
|
||
let moved = false;
|
||
const onMove = (ev) => {
|
||
const dx = ev.clientX - startX, dy = ev.clientY - startY;
|
||
if (!moved && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
|
||
moved = true;
|
||
box.classList.add("dragging");
|
||
}
|
||
if (moved) {
|
||
box.style.left = left0 + dx + "px";
|
||
box.style.top = top0 + dy + "px";
|
||
}
|
||
};
|
||
const onUp = (ev) => {
|
||
window.removeEventListener("mousemove", onMove);
|
||
window.removeEventListener("mouseup", onUp);
|
||
box.classList.remove("dragging");
|
||
if (!moved) return;
|
||
const dx = (ev.clientX - startX) / state.editScale;
|
||
const dy = -(ev.clientY - startY) / state.editScale; // CSS y xuống = PDF y giảm
|
||
stageEditOp({ op: "transform", index: o.index, dx, dy, sx: 1, sy: 1 });
|
||
};
|
||
window.addEventListener("mousemove", onMove);
|
||
window.addEventListener("mouseup", onUp);
|
||
e.preventDefault();
|
||
}
|
||
|
||
// Kéo handle góc dưới-phải để resize — khung đổi kích thước live, thả commit.
|
||
function onEditResizeMouseDown(e, o) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
const box = e.target.parentElement;
|
||
const startX = e.clientX, startY = e.clientY;
|
||
const w0 = (o.rect.right - o.rect.left), h0 = (o.rect.top - o.rect.bottom);
|
||
const cssW0 = parseFloat(box.style.width), cssH0 = parseFloat(box.style.height);
|
||
const onMove = (ev) => {
|
||
box.classList.add("dragging");
|
||
box.style.width = Math.max(4, cssW0 + (ev.clientX - startX)) + "px";
|
||
box.style.height = Math.max(4, cssH0 + (ev.clientY - startY)) + "px";
|
||
};
|
||
const onUp = (ev) => {
|
||
window.removeEventListener("mousemove", onMove);
|
||
window.removeEventListener("mouseup", onUp);
|
||
box.classList.remove("dragging");
|
||
const dwPt = (ev.clientX - startX) / state.editScale;
|
||
const dhPt = (ev.clientY - startY) / state.editScale; // kéo xuống = cao hơn (y giảm ở đáy)
|
||
const sx = Math.max(0.1, (w0 + dwPt) / Math.max(1, w0));
|
||
const sy = Math.max(0.1, (h0 + dhPt) / Math.max(1, h0));
|
||
if (Math.abs(sx - 1) > 0.01 || Math.abs(sy - 1) > 0.01) {
|
||
// Engine scale quanh góc DƯỚI-trái; bù dy để neo góc TRÊN-trái đứng yên
|
||
// (khớp handle góc dưới-phải + preview khi kéo, như Foxit).
|
||
stageEditOp({ op: "transform", index: o.index, dx: 0, dy: -(h0 * (sy - 1)), sx, sy });
|
||
} else {
|
||
loadEditPage(); // trả khung về đúng kích thước cũ
|
||
}
|
||
};
|
||
window.addEventListener("mousemove", onMove);
|
||
window.addEventListener("mouseup", onUp);
|
||
}
|
||
|
||
async function armAddImage() {
|
||
const path = await invoke("pick_image");
|
||
if (!path) return;
|
||
state.editPendingImage = path;
|
||
state.editArm = "image";
|
||
$("edAddImage").classList.add("armed");
|
||
$("editOverlay").classList.add("armed");
|
||
$("editHint").textContent = "Bấm lên trang để đặt ảnh";
|
||
}
|
||
|
||
async function replaceSelectedImage() {
|
||
if (state.editSel == null) return;
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
if (!o || o.kind !== "image") return;
|
||
const path = await invoke("pick_image");
|
||
if (!path) return;
|
||
stageEditOp({ op: "replaceImage", index: o.index, imagePath: path });
|
||
}
|
||
|
||
async function saveEdits() {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
// editBase đã gồm mọi thay đổi của trang đang sửa; ghi ra output (ops rỗng = sao chép/lưu lại).
|
||
await invoke("edit_apply", { input: state.editBase, page: state.editPage, ops: [], output: out, password: null });
|
||
$("status").textContent = `Đã lưu nội dung đã sửa → ${shortName(out)}`;
|
||
exitEditMode();
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("editHint").textContent = "Lỗi lưu: " + e;
|
||
}
|
||
}
|
||
|
||
// ---------- Phase 7: OCR & Chuyển đổi ----------
|
||
|
||
async function toggleConvMode() {
|
||
state.convMode = !state.convMode;
|
||
$("convBar").classList.toggle("hidden", !state.convMode);
|
||
$("convModeBtn").classList.toggle("active", state.convMode);
|
||
if (state.convMode) {
|
||
try {
|
||
const st = await invoke("convert_tools_status");
|
||
const miss = [];
|
||
if (!st.tesseract) miss.push("Tesseract (OCR)");
|
||
if (!st.soffice) miss.push("LibreOffice (Office↔PDF chất lượng cao)");
|
||
$("convHint").textContent = miss.length
|
||
? `Chưa cài: ${miss.join(", ")} — các nút liên quan sẽ báo lỗi kèm hướng dẫn`
|
||
: "";
|
||
$("cvOcr").disabled = !st.tesseract;
|
||
$("cvOffice").disabled = !st.soffice;
|
||
} catch (_) { /* trạng thái chỉ để gợi ý */ }
|
||
} else {
|
||
$("convHint").textContent = "";
|
||
}
|
||
}
|
||
|
||
async function runOcrAction() {
|
||
const lang = $("cvLang").value || "vie+eng";
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
$("convHint").textContent = "Đang OCR… (tài liệu dài có thể mất vài phút)";
|
||
try {
|
||
const n = await invoke("ocr_run", { input: state.path, lang, output: out });
|
||
$("status").textContent = `OCR xong: ${n} từ, đã thêm lớp text ẩn → ${shortName(out)}`;
|
||
$("convHint").textContent = "";
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("convHint").textContent = "Lỗi OCR: " + e;
|
||
}
|
||
}
|
||
|
||
async function exportPngAction() {
|
||
const dir = await invoke("pick_dir");
|
||
if (!dir) return;
|
||
try {
|
||
const files = await invoke("convert_images", { input: state.path, outDir: dir, dpi: 150 });
|
||
$("status").textContent = `Đã xuất ${files.length} ảnh PNG (150 DPI) vào ${dir}`;
|
||
} catch (e) {
|
||
$("convHint").textContent = "Lỗi xuất PNG: " + e;
|
||
}
|
||
}
|
||
|
||
async function exportTxtAction() {
|
||
const base = shortName(state.path).replace(/\.pdf$/i, "");
|
||
const out = await invoke("pick_save_as", { ext: "txt", name: base + ".txt" });
|
||
if (!out) return;
|
||
try {
|
||
await invoke("convert_txt", { input: state.path, output: out });
|
||
$("status").textContent = `Đã xuất text → ${shortName(out)}`;
|
||
} catch (e) {
|
||
$("convHint").textContent = "Lỗi xuất TXT: " + e;
|
||
}
|
||
}
|
||
|
||
async function exportDocxAction() {
|
||
const base = shortName(state.path).replace(/\.pdf$/i, "");
|
||
const out = await invoke("pick_save_as", { ext: "docx", name: base + ".docx" });
|
||
if (!out) return;
|
||
$("convHint").textContent = "Đang chuyển sang Word…";
|
||
try {
|
||
const engine = await invoke("convert_docx", { input: state.path, output: out });
|
||
const note = engine === "libreoffice" ? "LibreOffice (giữ layout tốt)" : "bộ chuyển cơ bản (text + bố cục)";
|
||
$("status").textContent = `Đã xuất Word (${note}) → ${shortName(out)}`;
|
||
$("convHint").textContent = "";
|
||
} catch (e) {
|
||
$("convHint").textContent = "Lỗi xuất Word: " + e;
|
||
}
|
||
}
|
||
|
||
async function officeToPdfAction() {
|
||
const src = await invoke("pick_office_file");
|
||
if (!src) return;
|
||
const dir = await invoke("pick_dir");
|
||
if (!dir) return;
|
||
$("convHint").textContent = "Đang chuyển Office → PDF…";
|
||
try {
|
||
const out = await invoke("office_convert", { input: src, outDir: dir });
|
||
$("status").textContent = `Đã chuyển → ${shortName(out)}`;
|
||
$("convHint").textContent = "";
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("convHint").textContent = "Lỗi Office→PDF (máy cần LibreOffice): " + e;
|
||
}
|
||
}
|
||
|
||
// ---------- Phase 6: Form (AcroForm) ----------
|
||
|
||
function toggleFormMode() {
|
||
state.formMode = !state.formMode;
|
||
$("formBar").classList.toggle("hidden", !state.formMode);
|
||
$("formModeBtn").classList.toggle("active", state.formMode);
|
||
$("formHint").textContent = "";
|
||
if (state.formMode) refreshFormCount();
|
||
}
|
||
|
||
async function refreshFormCount() {
|
||
try {
|
||
const fields = await invoke("form_list", { path: state.path });
|
||
state.formFields = fields;
|
||
$("fmCount").textContent = fields.length;
|
||
$("formHint").textContent = fields.length
|
||
? `${fields.length} field trong tài liệu`
|
||
: "Tài liệu chưa có field form — dùng “Thêm field”.";
|
||
} catch (e) {
|
||
$("formHint").textContent = "Lỗi đọc form: " + e;
|
||
}
|
||
}
|
||
|
||
// Modal liệt kê field + input để điền, nút Lưu.
|
||
async function openFillForm() {
|
||
let fields;
|
||
try {
|
||
fields = await invoke("form_list", { path: state.path });
|
||
} catch (e) {
|
||
$("formHint").textContent = "Lỗi đọc form: " + e;
|
||
return;
|
||
}
|
||
if (!fields.length) {
|
||
openModal("Điền form", `<p class="muted">Tài liệu chưa có field form nào. Hãy dùng “➕ Thêm field”.</p>
|
||
<div class="foot"><button id="ffClose" class="primary">Đóng</button></div>`)
|
||
.querySelector("#ffClose").addEventListener("click", closeModal);
|
||
return;
|
||
}
|
||
const rows = fields
|
||
.map((f, i) => {
|
||
const label = `${escapeHtml(f.name)} <span class="muted">(${f.kind}${f.pageIndex != null ? `, trang ${f.pageIndex + 1}` : ""})</span>`;
|
||
let input;
|
||
if (f.kind === "checkbox" || f.kind === "radio") {
|
||
const on = f.value && f.value !== "Off";
|
||
input = `<input type="checkbox" id="ffv${i}" ${on ? "checked" : ""} ${f.readOnly ? "disabled" : ""}>`;
|
||
} else if ((f.kind === "combo" || f.kind === "list") && f.options.length) {
|
||
const opts = f.options
|
||
.map((o) => `<option ${o === f.value ? "selected" : ""}>${escapeHtml(o)}</option>`)
|
||
.join("");
|
||
input = `<select id="ffv${i}" ${f.readOnly ? "disabled" : ""}><option value=""></option>${opts}</select>`;
|
||
} else {
|
||
input = `<input type="text" id="ffv${i}" value="${escapeHtml(f.value || "")}" ${f.readOnly ? "disabled" : ""}>`;
|
||
}
|
||
return `<tr><td>${label}</td><td>${input}</td></tr>`;
|
||
})
|
||
.join("");
|
||
const box = openModal("Điền form", `
|
||
<table class="form-table"><tbody>${rows}</tbody></table>
|
||
<div class="err" id="ffErr"></div>
|
||
<div class="foot"><button id="ffCancel">Huỷ</button><button id="ffOk" class="primary">Lưu & áp dụng…</button></div>
|
||
`);
|
||
box.querySelector("#ffCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#ffOk").addEventListener("click", async () => {
|
||
const values = fields.map((f, i) => {
|
||
const el = box.querySelector(`#ffv${i}`);
|
||
let value;
|
||
if (f.kind === "checkbox" || f.kind === "radio") value = el.checked ? "on" : "off";
|
||
else value = el.value;
|
||
return { name: f.name, value };
|
||
});
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
const n = await invoke("form_fill", { input: state.path, values, output: out });
|
||
closeModal();
|
||
$("status").textContent = `Đã điền ${n} field → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
box.querySelector("#ffErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
function openCreateFieldDialog() {
|
||
const box = openModal("Thêm field mới", `
|
||
<label>Tên field</label>
|
||
<input type="text" id="nfName" placeholder="hoTen">
|
||
<label>Loại</label>
|
||
<select id="nfKind">
|
||
<option value="text">Text (ô nhập chữ)</option>
|
||
<option value="checkbox">Checkbox</option>
|
||
<option value="combo">Combo box (chọn 1)</option>
|
||
</select>
|
||
<div class="row">
|
||
<div><label>Trang</label><input type="number" id="nfPage" value="1" min="1"></div>
|
||
<div><label>Cỡ (rộng×cao pt)</label><input type="text" id="nfSize" value="200x20"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div><label>Vị trí X (pt)</label><input type="number" id="nfX" value="80"></div>
|
||
<div><label>Vị trí Y từ đáy (pt)</label><input type="number" id="nfY" value="700"></div>
|
||
</div>
|
||
<label id="nfOptLabel" class="hidden">Lựa chọn (cách nhau dấu phẩy)</label>
|
||
<input type="text" id="nfOpts" class="hidden" placeholder="Nam, Nữ, Khác">
|
||
<div class="err" id="nfErr"></div>
|
||
<div class="foot"><button id="nfCancel">Huỷ</button><button id="nfOk" class="primary">Tạo & lưu…</button></div>
|
||
`);
|
||
const kindSel = box.querySelector("#nfKind");
|
||
const toggleOpts = () => {
|
||
const isCombo = kindSel.value === "combo";
|
||
box.querySelector("#nfOptLabel").classList.toggle("hidden", !isCombo);
|
||
box.querySelector("#nfOpts").classList.toggle("hidden", !isCombo);
|
||
};
|
||
kindSel.addEventListener("change", toggleOpts);
|
||
box.querySelector("#nfCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#nfOk").addEventListener("click", async () => {
|
||
const name = box.querySelector("#nfName").value.trim();
|
||
const err = box.querySelector("#nfErr");
|
||
if (!name) { err.textContent = "Cần nhập tên field."; return; }
|
||
const kind = kindSel.value;
|
||
const page = Math.max(1, Number(box.querySelector("#nfPage").value) || 1) - 1;
|
||
const m = box.querySelector("#nfSize").value.match(/^\s*(\d+)\s*[x×]\s*(\d+)\s*$/);
|
||
if (!m) { err.textContent = "Cỡ phải dạng rộng×cao, vd 200x20."; return; }
|
||
const w = Number(m[1]), h = Number(m[2]);
|
||
const x = Number(box.querySelector("#nfX").value) || 0;
|
||
const y = Number(box.querySelector("#nfY").value) || 0;
|
||
const options = kind === "combo"
|
||
? box.querySelector("#nfOpts").value.split(",").map((s) => s.trim()).filter(Boolean)
|
||
: [];
|
||
const field = { name, kind, pageIndex: page, rect: [x, y, x + w, y + h], value: "", options };
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("form_create", { input: state.path, fields: [field], output: out });
|
||
closeModal();
|
||
$("status").textContent = `Đã tạo field “${name}” → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
err.textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function flattenFormAction() {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("form_flatten", { input: state.path, output: out, password: null });
|
||
$("status").textContent = `Đã flatten form → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("formHint").textContent = "Lỗi flatten: " + e;
|
||
}
|
||
}
|
||
|
||
async function exportFormData(kind) {
|
||
const out = await invoke("pick_save_data");
|
||
if (!out) return;
|
||
// Đảm bảo đúng đuôi theo lựa chọn.
|
||
let target = out;
|
||
if (kind === "csv" && !/\.csv$/i.test(target)) target = target.replace(/\.[^.]*$/, "") + ".csv";
|
||
if (kind === "fdf" && !/\.fdf$/i.test(target)) target = target.replace(/\.[^.]*$/, "") + ".fdf";
|
||
try {
|
||
await invoke("form_export", { input: state.path, output: target });
|
||
$("formHint").textContent = `Đã xuất dữ liệu form → ${shortName(target)}`;
|
||
} catch (e) {
|
||
$("formHint").textContent = "Lỗi xuất: " + e;
|
||
}
|
||
}
|
||
|
||
async function importFormFdf() {
|
||
const fdf = await invoke("pick_fdf");
|
||
if (!fdf) return;
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
const n = await invoke("form_import_fdf", { input: state.path, fdf, output: out });
|
||
$("status").textContent = `Đã nhập ${n} field từ FDF → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("formHint").textContent = "Lỗi nhập FDF: " + e;
|
||
}
|
||
}
|
||
|
||
// ---------- Phase 5: Bảo mật (redact / mật khẩu / metadata) ----------
|
||
|
||
function toggleSecMode() {
|
||
state.secMode = !state.secMode;
|
||
$("secBar").classList.toggle("hidden", !state.secMode);
|
||
$("secModeBtn").classList.toggle("active", state.secMode);
|
||
if (!state.secMode && state.tool === "redact") setTool(null);
|
||
$("secHint").textContent = "";
|
||
}
|
||
|
||
function updateRedactButtons() {
|
||
const n = state.redactMarks.length;
|
||
$("redactCount").textContent = n;
|
||
$("secRedactApply").disabled = n === 0;
|
||
$("secRedactClear").disabled = n === 0;
|
||
}
|
||
|
||
function clearRedactMarks() {
|
||
const pages = [...new Set(state.redactMarks.map((m) => m.page))];
|
||
state.redactMarks = [];
|
||
pages.forEach((p) => drawAnnotsForPage(p));
|
||
updateRedactButtons();
|
||
}
|
||
|
||
// Áp dụng redact: XOÁ THẬT nội dung trong các vùng đã đánh dấu → file mới.
|
||
async function applyRedactions() {
|
||
if (!state.redactMarks.length) return;
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
// Gom theo trang: [{page, rects: [[l,b,r,t], ...]}]
|
||
const byPage = new Map();
|
||
for (const m of state.redactMarks) {
|
||
if (!byPage.has(m.page)) byPage.set(m.page, []);
|
||
byPage.get(m.page).push([m.rect.left, m.rect.bottom, m.rect.right, m.rect.top]);
|
||
}
|
||
const areas = [...byPage.entries()].map(([page, rects]) => ({ page, rects }));
|
||
try {
|
||
const n = await invoke("redact_apply", { input: state.path, areas, output: out, password: null });
|
||
clearRedactMarks();
|
||
setTool(null);
|
||
$("status").textContent = `Đã redact (xoá thật) ${n} đối tượng → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("secHint").textContent = "Lỗi redact: " + e;
|
||
}
|
||
}
|
||
|
||
function openEncryptDialog() {
|
||
const box = openModal("Đặt mật khẩu (AES-256)", `
|
||
<label>Mật khẩu mở file (user password)</label>
|
||
<input type="password" id="secPw1" autocomplete="new-password">
|
||
<label>Nhập lại mật khẩu</label>
|
||
<input type="password" id="secPw2" autocomplete="new-password">
|
||
<label>Mật khẩu chủ sở hữu (owner — để trống = dùng mật khẩu mở)</label>
|
||
<input type="password" id="secPwOwner" autocomplete="new-password">
|
||
<label>Quyền hạn khi mở bằng mật khẩu user</label>
|
||
<div class="row">
|
||
<label><input type="checkbox" id="secPermPrint" checked> In</label>
|
||
<label><input type="checkbox" id="secPermModify" checked> Sửa nội dung</label>
|
||
</div>
|
||
<div class="row">
|
||
<label><input type="checkbox" id="secPermExtract" checked> Sao chép text/ảnh</label>
|
||
<label><input type="checkbox" id="secPermAnnotate" checked> Chú thích/điền form</label>
|
||
</div>
|
||
<div class="err" id="secEncErr"></div>
|
||
<div class="foot"><button id="secEncCancel">Huỷ</button><button id="secEncOk" class="primary">Mã hoá…</button></div>
|
||
`);
|
||
box.querySelector("#secEncCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#secEncOk").addEventListener("click", async () => {
|
||
const p1 = box.querySelector("#secPw1").value;
|
||
const p2 = box.querySelector("#secPw2").value;
|
||
const err = box.querySelector("#secEncErr");
|
||
if (!p1) { err.textContent = "Mật khẩu không được để trống."; return; }
|
||
if (p1 !== p2) { err.textContent = "Hai lần nhập không khớp."; return; }
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("security_encrypt", {
|
||
input: state.path,
|
||
output: out,
|
||
userPassword: p1,
|
||
ownerPassword: box.querySelector("#secPwOwner").value,
|
||
allowPrint: box.querySelector("#secPermPrint").checked,
|
||
allowModify: box.querySelector("#secPermModify").checked,
|
||
allowExtract: box.querySelector("#secPermExtract").checked,
|
||
allowAnnotate: box.querySelector("#secPermAnnotate").checked,
|
||
});
|
||
closeModal();
|
||
$("status").textContent = `Đã mã hoá AES-256 → ${shortName(out)}`;
|
||
$("secHint").textContent = "File mã hoá đã lưu riêng — file đang mở giữ nguyên.";
|
||
} catch (e) {
|
||
err.textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
function openDecryptDialog() {
|
||
const box = openModal("Gỡ mật khẩu", `
|
||
<p class="muted">Chọn file PDF đang có mật khẩu, nhập mật khẩu hiện tại, lưu ra bản không mã hoá.</p>
|
||
<label>Mật khẩu hiện tại</label>
|
||
<input type="password" id="secDecPw" autocomplete="current-password">
|
||
<div class="err" id="secDecErr"></div>
|
||
<div class="foot"><button id="secDecCancel">Huỷ</button><button id="secDecOk" class="primary">Chọn file & gỡ…</button></div>
|
||
`);
|
||
box.querySelector("#secDecCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#secDecOk").addEventListener("click", async () => {
|
||
const pw = box.querySelector("#secDecPw").value;
|
||
const err = box.querySelector("#secDecErr");
|
||
if (!pw) { err.textContent = "Cần nhập mật khẩu hiện tại."; return; }
|
||
const inp = await invoke("pick_pdf");
|
||
if (!inp) return;
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("security_decrypt", { input: inp, password: pw, output: out });
|
||
closeModal();
|
||
$("status").textContent = `Đã gỡ mật khẩu → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
err.textContent = "Lỗi (mật khẩu sai?): " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function stripMetadataAction() {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("security_strip_metadata", { input: state.path, output: out });
|
||
$("status").textContent = `Đã xoá metadata (/Info + XMP) → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("secHint").textContent = "Lỗi xoá metadata: " + e;
|
||
}
|
||
}
|
||
|
||
async function optimizeSaveAction() {
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("security_optimize", { input: state.path, output: out });
|
||
$("status").textContent = `Đã lưu tối ưu (nén + dọn rác) → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
} catch (e) {
|
||
$("secHint").textContent = "Lỗi lưu tối ưu: " + e;
|
||
}
|
||
}
|
||
|
||
// --- Chữ ký số (Phase 5 iteration 2) ---
|
||
|
||
function openCreateIdDialog() {
|
||
const box = openModal("Tạo Digital ID tự ký", `
|
||
<p class="muted">Tạo chứng chỉ tự ký (RSA-2048) để ký thử. Nếu có chữ ký của tổ chức phát hành (PFX/PEM) thì dùng thẳng nó ở bước Ký số.</p>
|
||
<label>Tên hiển thị trong chữ ký</label>
|
||
<input type="text" id="idCn" placeholder="Nguyễn Văn A">
|
||
<div class="err" id="idErr"></div>
|
||
<div class="foot"><button id="idCancel">Huỷ</button><button id="idOk" class="primary">Tạo & lưu…</button></div>
|
||
`);
|
||
box.querySelector("#idCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#idOk").addEventListener("click", async () => {
|
||
const cn = box.querySelector("#idCn").value.trim();
|
||
if (!cn) { box.querySelector("#idErr").textContent = "Cần nhập tên."; return; }
|
||
const out = await invoke("pick_save_pem");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("sig_create_id", { commonName: cn, output: out });
|
||
closeModal();
|
||
$("secHint").textContent = `Đã tạo Digital ID → ${shortName(out)} (dùng ở bước Ký số)`;
|
||
} catch (e) {
|
||
box.querySelector("#idErr").textContent = "Lỗi: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
function openSignDialog() {
|
||
const box = openModal("Ký số tài liệu", `
|
||
<label>Tên người ký (hiện trong chữ ký)</label>
|
||
<input type="text" id="sgName" placeholder="Nguyễn Văn A">
|
||
<label>Lý do ký</label>
|
||
<input type="text" id="sgReason" value="Tôi đồng ý với nội dung tài liệu">
|
||
<label>Digital ID (.pem)</label>
|
||
<div class="row">
|
||
<input type="text" id="sgId" readonly placeholder="Chưa chọn — bấm Chọn…">
|
||
<button id="sgPickId">Chọn…</button>
|
||
</div>
|
||
<div class="err" id="sgErr"></div>
|
||
<div class="foot"><button id="sgCancel">Huỷ</button><button id="sgOk" class="primary">Ký & lưu…</button></div>
|
||
`);
|
||
let idPath = null;
|
||
box.querySelector("#sgPickId").addEventListener("click", async () => {
|
||
const p = await invoke("pick_any_file");
|
||
if (p) { idPath = p; box.querySelector("#sgId").value = shortName(p); }
|
||
});
|
||
box.querySelector("#sgCancel").addEventListener("click", closeModal);
|
||
box.querySelector("#sgOk").addEventListener("click", async () => {
|
||
const name = box.querySelector("#sgName").value.trim();
|
||
const reason = box.querySelector("#sgReason").value.trim();
|
||
const err = box.querySelector("#sgErr");
|
||
if (!name) { err.textContent = "Cần nhập tên người ký."; return; }
|
||
if (!idPath) { err.textContent = "Cần chọn Digital ID (.pem)."; return; }
|
||
const out = await invoke("pick_save_pdf");
|
||
if (!out) return;
|
||
try {
|
||
await invoke("sig_sign", { input: state.path, idPem: idPath, reason, signerName: name, output: out });
|
||
closeModal();
|
||
$("status").textContent = `Đã ký số → ${shortName(out)}`;
|
||
loadDocument(out);
|
||
// Tự kiểm tra chữ ký vừa tạo.
|
||
verifySignaturesAction(out);
|
||
} catch (e) {
|
||
err.textContent = "Lỗi ký: " + e;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function verifySignaturesAction(pathOverride) {
|
||
const target = typeof pathOverride === "string" ? pathOverride : state.path;
|
||
let checks;
|
||
try {
|
||
checks = await invoke("sig_verify", { input: target });
|
||
} catch (e) {
|
||
$("secHint").textContent = "Lỗi kiểm tra: " + e;
|
||
return;
|
||
}
|
||
const rows = checks.length
|
||
? checks
|
||
.map((c, i) => {
|
||
const badge = c.valid
|
||
? '<span class="sig-ok">✓ Hợp lệ</span>'
|
||
: '<span class="sig-bad">✗ Không hợp lệ</span>';
|
||
const detail = [];
|
||
if (!c.cryptoValid) detail.push("chữ ký sai");
|
||
if (!c.digestMatches) detail.push("nội dung đã bị sửa");
|
||
if (!c.coversDocument) detail.push("có phần thêm sau khi ký");
|
||
return `<tr><td>${i + 1}</td><td>${(c.signer || "").replace(/</g, "<")}</td><td>${badge}</td>
|
||
<td class="muted">${detail.join("; ")}</td></tr>`;
|
||
})
|
||
.join("")
|
||
: `<tr><td colspan="4" class="muted">Tài liệu chưa có chữ ký số nào.</td></tr>`;
|
||
const box = openModal("Kết quả kiểm tra chữ ký", `
|
||
<table class="sig-table">
|
||
<thead><tr><th>#</th><th>Người ký</th><th>Trạng thái</th><th>Ghi chú</th></tr></thead>
|
||
<tbody>${rows}</tbody>
|
||
</table>
|
||
<div class="foot"><button id="sigClose" class="primary">Đóng</button></div>
|
||
`);
|
||
box.querySelector("#sigClose").addEventListener("click", closeModal);
|
||
}
|
||
|
||
// ---------- Sự kiện ----------
|
||
|
||
$("openBtn").addEventListener("click", openFile);
|
||
$("zoomIn").addEventListener("click", () => setZoom(state.zoom * 1.25));
|
||
$("zoomOut").addEventListener("click", () => setZoom(state.zoom / 1.25));
|
||
$("zoomFit").addEventListener("click", fitWidth);
|
||
$("zoomFitPage").addEventListener("click", fitPage);
|
||
buildZoomSelect();
|
||
$("zoomSelect").addEventListener("change", (e) => setZoom(Number(e.target.value) / 100));
|
||
$("copyPage").addEventListener("click", copyCurrentPage);
|
||
|
||
$("pagePrev").addEventListener("click", gotoPrevPage);
|
||
$("pageNext").addEventListener("click", gotoNextPage);
|
||
$("pageInput").addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") { e.preventDefault(); goToPageInput(); }
|
||
});
|
||
$("pageInput").addEventListener("blur", goToPageInput);
|
||
|
||
$("searchBox").addEventListener("input", () => {
|
||
clearTimeout(searchTimer);
|
||
searchTimer = setTimeout(runSearch, 300);
|
||
});
|
||
$("searchBox").addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") { e.preventDefault(); gotoHit(state.hitIdx + (e.shiftKey ? -1 : 1)); }
|
||
});
|
||
$("searchCase").addEventListener("change", runSearch);
|
||
$("searchNext").addEventListener("click", () => gotoHit(state.hitIdx + 1));
|
||
$("searchPrev").addEventListener("click", () => gotoHit(state.hitIdx - 1));
|
||
$("viewport").addEventListener("scroll", () => {
|
||
updateCurrentPage();
|
||
if (state.hits.length) drawHighlightsForVisible();
|
||
closeColorPopover();
|
||
closeNotePopup();
|
||
finishEditing();
|
||
});
|
||
// Ctrl + lăn chuột: zoom tại vị trí con trỏ.
|
||
// Gộp nhiều nấc lăn trong 1 khung hình (rAF) để mượt, không dồn render.
|
||
let wheelFactor = 1;
|
||
let wheelRAF = 0;
|
||
let wheelX = 0;
|
||
let wheelY = 0;
|
||
$("viewport").addEventListener(
|
||
"wheel",
|
||
(e) => {
|
||
if (!e.ctrlKey) return;
|
||
e.preventDefault();
|
||
wheelFactor *= e.deltaY < 0 ? 1.1 : 1 / 1.1;
|
||
wheelX = e.clientX;
|
||
wheelY = e.clientY;
|
||
if (!wheelRAF) {
|
||
wheelRAF = requestAnimationFrame(() => {
|
||
wheelRAF = 0;
|
||
const f = wheelFactor;
|
||
wheelFactor = 1;
|
||
zoomAtPoint(state.zoom * f, wheelX, wheelY);
|
||
});
|
||
}
|
||
},
|
||
{ passive: false }
|
||
);
|
||
|
||
$("tabThumbs").addEventListener("click", () => switchTab("thumbs"));
|
||
$("tabOutline").addEventListener("click", () => switchTab("outline"));
|
||
$("tabComments").addEventListener("click", () => switchTab("comments"));
|
||
function switchTab(which) {
|
||
for (const [tab, panel] of [["tabThumbs", "thumbs"], ["tabOutline", "outline"], ["tabComments", "comments"]]) {
|
||
const on = panel === which;
|
||
$(tab).classList.toggle("active", on);
|
||
$(panel).classList.toggle("hidden", !on);
|
||
}
|
||
}
|
||
|
||
// Công cụ chú thích
|
||
document.querySelectorAll(".atool").forEach((b) =>
|
||
b.addEventListener("click", () => setTool(b.dataset.tool))
|
||
);
|
||
function refreshColorSwatch() {
|
||
const sw = $("annotSw");
|
||
if (sw) sw.style.background = rgbCss(state.color);
|
||
}
|
||
refreshColorSwatch();
|
||
$("annotColorBtn").addEventListener("click", () => {
|
||
openColorPopover($("annotColorBtn"), state.color, (rgb) => {
|
||
state.color = rgb;
|
||
refreshColorSwatch();
|
||
// áp cho annotation đang chọn (nếu có)
|
||
if (state.selectedId != null) {
|
||
const s = state.annotSpecs.find((x) => x.id === state.selectedId);
|
||
if (s) { pushUndo(); s.color = rgb.slice(); drawAnnotsForPage(s.pageIndex); buildComments(); }
|
||
}
|
||
});
|
||
});
|
||
$("saveAnnots").addEventListener("click", saveAnnots);
|
||
$("undoBtn").addEventListener("click", () => (state.editMode ? editUndo() : undo()));
|
||
$("redoBtn").addEventListener("click", () => (state.editMode ? editRedo() : redo()));
|
||
$("pages").addEventListener("mousedown", onPagesMouseDown);
|
||
$("pages").addEventListener("dblclick", onViewerDblClick);
|
||
window.addEventListener("mousemove", onPagesMouseMove);
|
||
window.addEventListener("mouseup", onPagesMouseUp);
|
||
|
||
$("organizeModeBtn").addEventListener("click", toggleOrganizeMode);
|
||
$("orgInsert").addEventListener("click", openInsertDialog);
|
||
$("orgDelete").addEventListener("click", orgDeleteSelected);
|
||
$("orgRotateL").addEventListener("click", () => orgRotateSelected(-90));
|
||
$("orgRotateR").addEventListener("click", () => orgRotateSelected(90));
|
||
$("orgExtract").addEventListener("click", openExtractDialog);
|
||
$("orgReplace").addEventListener("click", openReplaceDialog);
|
||
$("orgMerge").addEventListener("click", openMergeDialog);
|
||
$("orgSplit").addEventListener("click", openSplitDialog);
|
||
$("orgWatermark").addEventListener("click", openWatermarkDialog);
|
||
$("orgHeaderFooter").addEventListener("click", openHeaderFooterDialog);
|
||
$("orgSave").addEventListener("click", orgSaveChanges);
|
||
$("modalOverlay").addEventListener("click", (e) => {
|
||
if (e.target.id === "modalOverlay") closeModal();
|
||
});
|
||
|
||
// OCR & Chuyển đổi (Phase 7)
|
||
$("convModeBtn").addEventListener("click", toggleConvMode);
|
||
$("cvOcr").addEventListener("click", runOcrAction);
|
||
$("cvPng").addEventListener("click", exportPngAction);
|
||
$("cvTxt").addEventListener("click", exportTxtAction);
|
||
$("cvDocx").addEventListener("click", exportDocxAction);
|
||
$("cvOffice").addEventListener("click", officeToPdfAction);
|
||
|
||
// Form (Phase 6)
|
||
$("formModeBtn").addEventListener("click", toggleFormMode);
|
||
$("fmFill").addEventListener("click", openFillForm);
|
||
$("fmCreate").addEventListener("click", openCreateFieldDialog);
|
||
$("fmFlatten").addEventListener("click", flattenFormAction);
|
||
$("fmExportFdf").addEventListener("click", () => exportFormData("fdf"));
|
||
$("fmExportCsv").addEventListener("click", () => exportFormData("csv"));
|
||
$("fmImportFdf").addEventListener("click", importFormFdf);
|
||
|
||
// Bảo mật (Phase 5)
|
||
$("secModeBtn").addEventListener("click", toggleSecMode);
|
||
$("secRedactApply").addEventListener("click", applyRedactions);
|
||
$("secRedactClear").addEventListener("click", clearRedactMarks);
|
||
$("secEncrypt").addEventListener("click", openEncryptDialog);
|
||
$("secDecrypt").addEventListener("click", openDecryptDialog);
|
||
$("secStripMeta").addEventListener("click", stripMetadataAction);
|
||
$("secOptimize").addEventListener("click", optimizeSaveAction);
|
||
$("secCreateId").addEventListener("click", openCreateIdDialog);
|
||
$("secSign").addEventListener("click", openSignDialog);
|
||
$("secVerify").addEventListener("click", () => verifySignaturesAction());
|
||
|
||
// Sửa nội dung (Phase 4)
|
||
$("editModeBtn").addEventListener("click", toggleEditMode);
|
||
$("edAddText").addEventListener("click", () => {
|
||
state.editArm = state.editArm === "text" ? null : "text";
|
||
$("edAddText").classList.toggle("armed", state.editArm === "text");
|
||
$("editOverlay").classList.toggle("armed", !!state.editArm);
|
||
$("editHint").textContent = state.editArm === "text" ? "Bấm lên trang để đặt chữ" : "";
|
||
});
|
||
$("edAddImage").addEventListener("click", armAddImage);
|
||
$("edDelete").addEventListener("click", deleteSelectedEditObject);
|
||
$("edReplaceImage").addEventListener("click", replaceSelectedImage);
|
||
// Mọi thay đổi thuộc tính chỉ gửi ĐÚNG field đó — engine giữ nguyên font khi
|
||
// không cần thay (chuẩn Foxit: đổi cỡ/màu không được đổi font).
|
||
$("edFontSize").addEventListener("change", () => {
|
||
const size = Number($("edFontSize").value);
|
||
if (size > 0) applyTextPropToSelected({ fontSize: size });
|
||
});
|
||
$("edFontFamily").addEventListener("change", () => {
|
||
const fam = $("edFontFamily").value;
|
||
if (fam) applyTextPropToSelected({ fontFamily: fam });
|
||
});
|
||
$("edBold").addEventListener("click", () => {
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
if (o) applyTextPropToSelected({ bold: !o.font_bold });
|
||
});
|
||
$("edItalic").addEventListener("click", () => {
|
||
const o = state.editObjects.find((x) => x.index === state.editSel);
|
||
if (o) applyTextPropToSelected({ italic: !o.font_italic });
|
||
});
|
||
$("edColorBtn").addEventListener("click", () => {
|
||
openColorPopover($("edColorBtn"), state.editColor, (rgb) => {
|
||
state.editColor = rgb;
|
||
$("edSw").style.background = rgbCss(rgb);
|
||
applyTextPropToSelected({ color: [rgb[0], rgb[1], rgb[2], 255] });
|
||
});
|
||
});
|
||
$("edSave").addEventListener("click", saveEdits);
|
||
$("editOverlay").addEventListener("click", onEditStageClick);
|
||
|
||
// Phím tắt chuẩn của trình xem PDF (Foxit/Adobe): điều hướng trang, zoom,
|
||
// tìm kiếm, xoá/bỏ chọn annotation.
|
||
window.addEventListener("keydown", (e) => {
|
||
const typing = e.target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName);
|
||
|
||
if (e.key === "Escape") {
|
||
if (!$("modalOverlay").classList.contains("hidden")) { closeModal(); return; }
|
||
if (state.editMode && state.editArm) {
|
||
state.editArm = null; state.editPendingImage = null;
|
||
$("edAddText").classList.remove("armed"); $("edAddImage").classList.remove("armed");
|
||
$("editOverlay").classList.remove("armed"); $("editHint").textContent = "";
|
||
return;
|
||
}
|
||
finishEditing(); closeNotePopup(); closeColorPopover(); deselectAnnot(); setTool(null);
|
||
return;
|
||
}
|
||
if ((e.key === "Delete" || e.key === "Backspace") && !typing && state.editMode && state.editSel != null) {
|
||
e.preventDefault();
|
||
deleteSelectedEditObject();
|
||
return;
|
||
}
|
||
if ((e.key === "Delete" || e.key === "Backspace") && !typing && state.organizeMode && state.orgSelected.size) {
|
||
e.preventDefault();
|
||
orgDeleteSelected();
|
||
return;
|
||
}
|
||
if ((e.key === "Delete" || e.key === "Backspace") && !typing && state.selectedId != null) {
|
||
e.preventDefault();
|
||
deleteSpec(state.selectedId);
|
||
return;
|
||
}
|
||
if (e.ctrlKey && (e.key === "f" || e.key === "F")) {
|
||
e.preventDefault();
|
||
$("searchBox").focus();
|
||
$("searchBox").select();
|
||
return;
|
||
}
|
||
if (e.ctrlKey && (e.key === "=" || e.key === "+")) { e.preventDefault(); setZoom(state.zoom * 1.25); return; }
|
||
if (e.ctrlKey && e.key === "-") { e.preventDefault(); setZoom(state.zoom / 1.25); return; }
|
||
if (e.ctrlKey && e.key === "0") { e.preventDefault(); setZoom(1); return; }
|
||
// Ctrl+Z hoàn tác / Ctrl+Y hoặc Ctrl+Shift+Z làm lại — không chặn khi đang gõ
|
||
// trong ô text (để trình duyệt tự xử lý undo cấp ký tự trong contenteditable).
|
||
if (e.ctrlKey && !e.shiftKey && (e.key === "z" || e.key === "Z") && !typing) {
|
||
e.preventDefault();
|
||
if (state.editMode) editUndo(); else undo();
|
||
return;
|
||
}
|
||
if (e.ctrlKey && (e.key === "y" || e.key === "Y" || (e.shiftKey && (e.key === "z" || e.key === "Z"))) && !typing) {
|
||
e.preventDefault();
|
||
if (state.editMode) editRedo(); else redo();
|
||
return;
|
||
}
|
||
if (typing) return;
|
||
if (e.key === "PageDown") { e.preventDefault(); gotoNextPage(); return; }
|
||
if (e.key === "PageUp") { e.preventDefault(); gotoPrevPage(); return; }
|
||
if (e.key === "Home") { e.preventDefault(); goToPage(0); return; }
|
||
if (e.key === "End") { e.preventDefault(); goToPage(state.pages.length - 1); return; }
|
||
});
|
||
|
||
window.addEventListener("DOMContentLoaded", boot);
|