Initial commit: FoFreeXit Phase 1 (Viewer) + Phase 2 (Annotate)
PDF viewer (render/search/text-select/thumbnails/outline) and annotation engine (Highlight/Underline/Strikeout/Square/FreeText/Note) over PDFium + lopdf, with Unicode font embedding for Vietnamese text and undo/redo.
This commit is contained in:
Generated
+5726
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
[package]
|
||||
name = "fofreexit-app"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
description = "FoFreeXit desktop app (Tauri shell)"
|
||||
license = "Apache-2.0"
|
||||
|
||||
# Detach from the main crates/* workspace (Tauri uses its own build profiles).
|
||||
[workspace]
|
||||
|
||||
[build-dependencies]
|
||||
tauri-build = { version = "2", features = [] }
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "2", features = [] }
|
||||
tauri-plugin-dialog = "2"
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde_json = "1"
|
||||
base64 = "0.22"
|
||||
image = "0.25"
|
||||
pdfium-render = "0.8"
|
||||
ff-engine = { path = "../../crates/ff-engine" }
|
||||
|
||||
[profile.release]
|
||||
opt-level = "s"
|
||||
lto = true
|
||||
strip = true
|
||||
@@ -0,0 +1,3 @@
|
||||
fn main() {
|
||||
tauri_build::build()
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "Quyền mặc định cho cửa sổ chính.",
|
||||
"windows": ["main"],
|
||||
"permissions": ["core:default", "dialog:default"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"default":{"identifier":"default","description":"Quyền mặc định cho cửa sổ chính.","local":true,"windows":["main"],"permissions":["core:default","dialog:default"]}}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
Binary file not shown.
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,342 @@
|
||||
// Ẩn cửa sổ console trên Windows ở bản release.
|
||||
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||
|
||||
use std::io::Cursor;
|
||||
use std::path::PathBuf;
|
||||
|
||||
use base64::Engine as _;
|
||||
use serde::Serialize;
|
||||
use tauri_plugin_dialog::DialogExt;
|
||||
|
||||
/// Thư mục gốc workspace (app/src-tauri -> ../../).
|
||||
fn workspace_root() -> PathBuf {
|
||||
PathBuf::from(env!("CARGO_MANIFEST_DIR"))
|
||||
.join("..")
|
||||
.join("..")
|
||||
}
|
||||
|
||||
/// Đảm bảo engine tìm thấy pdfium.dll (dev: ở gốc workspace).
|
||||
fn ensure_pdfium_env() {
|
||||
if std::env::var("FOFREEXIT_PDFIUM_PATH").is_err() {
|
||||
std::env::set_var("FOFREEXIT_PDFIUM_PATH", workspace_root());
|
||||
}
|
||||
}
|
||||
|
||||
fn pdfium() -> Result<pdfium_render::prelude::Pdfium, String> {
|
||||
ensure_pdfium_env();
|
||||
ff_engine::bind_pdfium().map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
// ---- Kiểu dữ liệu trả về frontend ----
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct PageMeta {
|
||||
index: u16,
|
||||
width_pt: f32,
|
||||
height_pt: f32,
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct OutlineMeta {
|
||||
title: String,
|
||||
page_index: Option<u16>,
|
||||
level: u32,
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct DocMeta {
|
||||
page_count: u16,
|
||||
pages: Vec<PageMeta>,
|
||||
outline: Vec<OutlineMeta>,
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct RectMeta {
|
||||
left: f32,
|
||||
bottom: f32,
|
||||
right: f32,
|
||||
top: f32,
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct SearchHitMeta {
|
||||
page_index: u16,
|
||||
char_start: usize,
|
||||
char_len: usize,
|
||||
rect: Option<RectMeta>,
|
||||
}
|
||||
|
||||
// ---- Commands ----
|
||||
|
||||
/// Mở tài liệu: trả số trang, kích thước từng trang, và outline.
|
||||
#[tauri::command]
|
||||
fn open_document(path: String) -> Result<DocMeta, String> {
|
||||
let pdfium = pdfium()?;
|
||||
let p = PathBuf::from(&path);
|
||||
|
||||
let dims = ff_engine::page_dims(&pdfium, &p, None).map_err(|e| e.to_string())?;
|
||||
let outline = ff_engine::outline(&pdfium, &p, None).map_err(|e| e.to_string())?;
|
||||
|
||||
Ok(DocMeta {
|
||||
page_count: dims.len() as u16,
|
||||
pages: dims
|
||||
.into_iter()
|
||||
.map(|d| PageMeta {
|
||||
index: d.index,
|
||||
width_pt: d.width_pt,
|
||||
height_pt: d.height_pt,
|
||||
})
|
||||
.collect(),
|
||||
outline: outline
|
||||
.into_iter()
|
||||
.map(|o| OutlineMeta {
|
||||
title: o.title,
|
||||
page_index: o.page_index,
|
||||
level: o.level,
|
||||
})
|
||||
.collect(),
|
||||
})
|
||||
}
|
||||
|
||||
/// Render một trang ra data URL PNG với chiều rộng `width` px.
|
||||
#[tauri::command]
|
||||
fn render_page(path: String, page: u16, width: u32) -> Result<String, String> {
|
||||
let pdfium = pdfium()?;
|
||||
let p = PathBuf::from(&path);
|
||||
let rendered =
|
||||
ff_engine::render::render_page(&pdfium, &p, page, width, None).map_err(|e| e.to_string())?;
|
||||
|
||||
let mut buf = Cursor::new(Vec::new());
|
||||
rendered
|
||||
.image
|
||||
.write_to(&mut buf, image::ImageFormat::Png)
|
||||
.map_err(|e| e.to_string())?;
|
||||
let b64 = base64::engine::general_purpose::STANDARD.encode(buf.get_ref());
|
||||
Ok(format!("data:image/png;base64,{b64}"))
|
||||
}
|
||||
|
||||
/// Tìm chuỗi trong tài liệu.
|
||||
#[tauri::command]
|
||||
fn search_document(
|
||||
path: String,
|
||||
query: String,
|
||||
case_sensitive: bool,
|
||||
) -> Result<Vec<SearchHitMeta>, String> {
|
||||
let pdfium = pdfium()?;
|
||||
let p = PathBuf::from(&path);
|
||||
let hits =
|
||||
ff_engine::search(&pdfium, &p, &query, case_sensitive, None).map_err(|e| e.to_string())?;
|
||||
Ok(hits
|
||||
.into_iter()
|
||||
.map(|h| SearchHitMeta {
|
||||
page_index: h.page_index,
|
||||
char_start: h.char_start,
|
||||
char_len: h.char_len,
|
||||
rect: h.rect.map(|r| RectMeta {
|
||||
left: r.left,
|
||||
bottom: r.bottom,
|
||||
right: r.right,
|
||||
top: r.top,
|
||||
}),
|
||||
})
|
||||
.collect())
|
||||
}
|
||||
|
||||
/// Lấy text của một trang (cho chức năng copy).
|
||||
#[tauri::command]
|
||||
fn page_text(path: String, page: u16) -> Result<String, String> {
|
||||
let pdfium = pdfium()?;
|
||||
let p = PathBuf::from(&path);
|
||||
ff_engine::extract_text(&pdfium, &p, page, None).map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct CharBoxMeta {
|
||||
ch: String,
|
||||
left: f32,
|
||||
bottom: f32,
|
||||
right: f32,
|
||||
top: f32,
|
||||
}
|
||||
|
||||
/// Hộp bao từng ký tự của một trang (dựng text-layer để chọn & copy).
|
||||
#[tauri::command]
|
||||
fn page_text_layer(path: String, page: u16) -> Result<Vec<CharBoxMeta>, String> {
|
||||
let pdfium = pdfium()?;
|
||||
let p = PathBuf::from(&path);
|
||||
let boxes = ff_engine::page_char_boxes(&pdfium, &p, page, None).map_err(|e| e.to_string())?;
|
||||
Ok(boxes
|
||||
.into_iter()
|
||||
.map(|b| CharBoxMeta {
|
||||
ch: b.ch,
|
||||
left: b.left,
|
||||
bottom: b.bottom,
|
||||
right: b.right,
|
||||
top: b.top,
|
||||
})
|
||||
.collect())
|
||||
}
|
||||
|
||||
/// Mở hộp thoại chọn file PDF; trả về đường dẫn đã chọn (hoặc None nếu huỷ).
|
||||
#[tauri::command]
|
||||
fn pick_pdf(app: tauri::AppHandle) -> Option<String> {
|
||||
app.dialog()
|
||||
.file()
|
||||
.add_filter("PDF", &["pdf"])
|
||||
.blocking_pick_file()
|
||||
.map(|fp| fp.to_string())
|
||||
}
|
||||
|
||||
/// Hộp thoại lưu file PDF; trả về đường dẫn (hoặc None nếu huỷ).
|
||||
#[tauri::command]
|
||||
fn pick_save_pdf(app: tauri::AppHandle) -> Option<String> {
|
||||
app.dialog()
|
||||
.file()
|
||||
.add_filter("PDF", &["pdf"])
|
||||
.set_file_name("annotated.pdf")
|
||||
.blocking_save_file()
|
||||
.map(|fp| fp.to_string())
|
||||
}
|
||||
|
||||
/// Hộp chữ nhật đơn giản (1 quad) dùng cho `AnnotSpecDto.quads`.
|
||||
#[derive(serde::Deserialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct RectDto {
|
||||
left: f32,
|
||||
bottom: f32,
|
||||
right: f32,
|
||||
top: f32,
|
||||
}
|
||||
|
||||
/// DTO nhận từ frontend cho một annotation.
|
||||
#[derive(serde::Deserialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
struct AnnotSpecDto {
|
||||
kind: String,
|
||||
page_index: u16,
|
||||
left: f32,
|
||||
bottom: f32,
|
||||
right: f32,
|
||||
top: f32,
|
||||
/// Highlight/Underline/Strikeout theo text nhiều dòng: 1 quad/dòng.
|
||||
/// Rỗng/thiếu → engine suy ra 1 quad duy nhất từ left/bottom/right/top.
|
||||
#[serde(default)]
|
||||
quads: Vec<RectDto>,
|
||||
color: [u8; 4],
|
||||
contents: Option<String>,
|
||||
#[serde(default = "default_font_size")]
|
||||
font_size: f32,
|
||||
#[serde(default)]
|
||||
bold: bool,
|
||||
#[serde(default)]
|
||||
italic: bool,
|
||||
#[serde(default)]
|
||||
underline: bool,
|
||||
}
|
||||
|
||||
fn default_font_size() -> f32 {
|
||||
14.0
|
||||
}
|
||||
|
||||
/// Tạo annotation theo specs rồi lưu sang `output`.
|
||||
#[tauri::command]
|
||||
fn apply_annotations(
|
||||
input: String,
|
||||
output: String,
|
||||
specs: Vec<AnnotSpecDto>,
|
||||
) -> Result<(), String> {
|
||||
use ff_engine::{AnnotKind, AnnotSpec, Rect};
|
||||
let pdfium = pdfium()?;
|
||||
let mut mapped = Vec::with_capacity(specs.len());
|
||||
for s in specs {
|
||||
let kind = match s.kind.as_str() {
|
||||
"highlight" => AnnotKind::Highlight,
|
||||
"underline" => AnnotKind::Underline,
|
||||
"strikeout" => AnnotKind::Strikeout,
|
||||
"square" => AnnotKind::Square,
|
||||
"freetext" => AnnotKind::FreeText,
|
||||
"note" => AnnotKind::Note,
|
||||
other => return Err(format!("loại annotation không hỗ trợ: {other}")),
|
||||
};
|
||||
mapped.push(AnnotSpec {
|
||||
kind,
|
||||
page_index: s.page_index,
|
||||
rect: Rect {
|
||||
left: s.left,
|
||||
bottom: s.bottom,
|
||||
right: s.right,
|
||||
top: s.top,
|
||||
},
|
||||
quads: s
|
||||
.quads
|
||||
.into_iter()
|
||||
.map(|q| Rect { left: q.left, bottom: q.bottom, right: q.right, top: q.top })
|
||||
.collect(),
|
||||
color: s.color,
|
||||
contents: s.contents,
|
||||
font_size: s.font_size,
|
||||
bold: s.bold,
|
||||
italic: s.italic,
|
||||
underline: s.underline,
|
||||
});
|
||||
}
|
||||
ff_engine::apply_annotations(
|
||||
&pdfium,
|
||||
std::path::Path::new(&input),
|
||||
std::path::Path::new(&output),
|
||||
&mapped,
|
||||
)
|
||||
.map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
/// Đường dẫn file PDF mẫu để mở khi khởi động.
|
||||
#[tauri::command]
|
||||
fn default_pdf() -> String {
|
||||
workspace_root()
|
||||
.join("corpus")
|
||||
.join("sample-multipage.pdf")
|
||||
.to_string_lossy()
|
||||
.into_owned()
|
||||
}
|
||||
|
||||
/// File PDF được truyền qua command-line (Explorer gọi `fofreexit-app.exe "C:\...\a.pdf"`
|
||||
/// khi double-click hoặc "Open with FoFreeXit"). `None` nếu mở app trực tiếp (không kèm file).
|
||||
#[tauri::command]
|
||||
fn initial_file() -> Option<String> {
|
||||
let arg = std::env::args().nth(1)?;
|
||||
let path = std::path::PathBuf::from(&arg);
|
||||
let is_pdf = path
|
||||
.extension()
|
||||
.map(|e| e.eq_ignore_ascii_case("pdf"))
|
||||
.unwrap_or(false);
|
||||
if is_pdf && path.exists() {
|
||||
Some(arg)
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
tauri::Builder::default()
|
||||
.plugin(tauri_plugin_dialog::init())
|
||||
.invoke_handler(tauri::generate_handler![
|
||||
open_document,
|
||||
render_page,
|
||||
search_document,
|
||||
page_text,
|
||||
page_text_layer,
|
||||
pick_pdf,
|
||||
pick_save_pdf,
|
||||
apply_annotations,
|
||||
default_pdf,
|
||||
initial_file
|
||||
])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("lỗi khi chạy ứng dụng Tauri");
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "FoFreeXit",
|
||||
"version": "0.1.0",
|
||||
"identifier": "com.fofreexit.app",
|
||||
"build": {
|
||||
"frontendDist": "../src"
|
||||
},
|
||||
"app": {
|
||||
"withGlobalTauri": true,
|
||||
"windows": [
|
||||
{
|
||||
"label": "main",
|
||||
"title": "FoFreeXit — PDF Viewer (Phase 1)",
|
||||
"width": 1100,
|
||||
"height": 850
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
"csp": null
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/icon.ico",
|
||||
"icons/icon.png"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FoFreeXit</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="toolbar">
|
||||
<strong class="brand">FoFreeXit</strong>
|
||||
<span class="phase">Phase 1 · Viewer</span>
|
||||
<button id="openBtn" title="Mở file PDF">📂 Mở</button>
|
||||
<span class="sep"></span>
|
||||
<button id="pagePrev" title="Trang trước (Page Up)">▲</button>
|
||||
<input id="pageInput" class="pagenum" type="text" inputmode="numeric" title="Đến trang…" />
|
||||
<span class="pageof">/ <span id="pageTotal">—</span></span>
|
||||
<button id="pageNext" title="Trang sau (Page Down)">▼</button>
|
||||
<span class="sep"></span>
|
||||
<button id="zoomOut" title="Thu nhỏ (Ctrl+-)">−</button>
|
||||
<select id="zoomSelect" class="zoom" title="Mức zoom"></select>
|
||||
<button id="zoomIn" title="Phóng to (Ctrl++)">+</button>
|
||||
<button id="zoomFit" title="Vừa bề rộng">Vừa rộng</button>
|
||||
<button id="zoomFitPage" title="Vừa trang">Vừa trang</button>
|
||||
<span class="sep"></span>
|
||||
<input id="searchBox" type="search" placeholder="Tìm trong tài liệu… (Ctrl+F)" autofocus />
|
||||
<label class="searchopt" title="Phân biệt hoa/thường"><input id="searchCase" type="checkbox" />Aa</label>
|
||||
<button id="searchPrev" title="Kết quả trước (Shift+Enter)">◀</button>
|
||||
<span id="searchCount" class="searchcount">—</span>
|
||||
<button id="searchNext" title="Kết quả sau (Enter)">▶</button>
|
||||
<span class="sep"></span>
|
||||
<button id="copyPage" title="Copy text trang hiện tại">⧉ Copy</button>
|
||||
<div class="spacer"></div>
|
||||
<span id="status" class="status"></span>
|
||||
</header>
|
||||
|
||||
<div class="annobar">
|
||||
<span class="annolabel">Chú thích:</span>
|
||||
<button class="atool" data-tool="highlight" title="Tô sáng (kéo vùng)">🖍️ Tô sáng</button>
|
||||
<button class="atool" data-tool="underline" title="Gạch chân">U̲ Gạch chân</button>
|
||||
<button class="atool" data-tool="strikeout" title="Gạch ngang">S̶ Gạch ngang</button>
|
||||
<button class="atool" data-tool="square" title="Khung chữ nhật">▭ Khung</button>
|
||||
<button class="atool" data-tool="freetext" title="Hộp văn bản">🅣 Text box</button>
|
||||
<button class="atool" data-tool="note" title="Ghi chú dán">📌 Ghi chú</button>
|
||||
<span class="sep"></span>
|
||||
<button id="annotColorBtn" class="atool" title="Màu chú thích"><span class="sw" id="annotSw"></span> Màu</button>
|
||||
<span class="sep"></span>
|
||||
<button id="undoBtn" title="Hoàn tác (Ctrl+Z)" disabled>↶ Hoàn tác</button>
|
||||
<button id="redoBtn" title="Làm lại (Ctrl+Y)" disabled>↷ Làm lại</button>
|
||||
<span class="spacer"></span>
|
||||
<span id="annotHint" class="status"></span>
|
||||
<button id="saveAnnots" disabled>💾 Lưu chú thích (<span id="annotCount">0</span>)</button>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<aside class="sidebar">
|
||||
<div class="tabs">
|
||||
<button id="tabThumbs" class="tab active">Thumbnails</button>
|
||||
<button id="tabOutline" class="tab">Outline</button>
|
||||
<button id="tabComments" class="tab">Chú thích</button>
|
||||
</div>
|
||||
<div id="thumbs" class="panel thumbs"></div>
|
||||
<div id="outline" class="panel outline hidden"></div>
|
||||
<div id="comments" class="panel comments hidden"></div>
|
||||
</aside>
|
||||
|
||||
<main id="viewport" class="viewport">
|
||||
<div id="pages" class="pages"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1412
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,268 @@
|
||||
:root { color-scheme: dark; --accent: #4d8bff; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
background: #525659;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #323639;
|
||||
border-bottom: 1px solid #1c1f21;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.brand { color: var(--accent); font-size: 16px; }
|
||||
.phase { color: #9aa0a6; font-size: 12px; }
|
||||
.sep { width: 1px; height: 22px; background: #4a4f52; margin: 0 4px; }
|
||||
.spacer { flex: 1; }
|
||||
.status, .pageind, .searchcount, .zoom { color: #9aa0a6; font-size: 12px; }
|
||||
.zoom { min-width: 44px; text-align: center; }
|
||||
.searchcount { min-width: 60px; text-align: center; }
|
||||
.pageof { color: #9aa0a6; font-size: 12px; }
|
||||
.pagenum {
|
||||
width: 42px; text-align: center; background: #1f2224; color: #eee;
|
||||
border: 1px solid #4a4f52; border-radius: 6px; padding: 4px 4px; font-size: 13px;
|
||||
}
|
||||
.searchopt {
|
||||
display: flex; align-items: center; gap: 3px; color: #9aa0a6; font-size: 12px;
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
button {
|
||||
background: #4a4f52;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 9px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
button:hover { background: #595f63; }
|
||||
button:disabled { opacity: .4; cursor: default; }
|
||||
#copyPage { background: var(--accent); }
|
||||
select.zoom {
|
||||
background: #1f2224; color: #eee; border: 1px solid #4a4f52;
|
||||
border-radius: 6px; padding: 4px 4px; font-size: 13px; min-width: 64px;
|
||||
}
|
||||
input[type="search"] {
|
||||
background: #1f2224;
|
||||
color: #eee;
|
||||
border: 1px solid #4a4f52;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
/* Annotation toolbar */
|
||||
.annobar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 12px;
|
||||
background: #2b2f31;
|
||||
border-bottom: 1px solid #1c1f21;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.annolabel { color: #9aa0a6; font-size: 12px; display: flex; align-items: center; gap: 4px; }
|
||||
.atool { background: #3a3f42; }
|
||||
.atool.active { background: var(--accent); box-shadow: 0 0 0 2px rgba(77,139,255,.4); }
|
||||
#saveAnnots { background: #2e7d32; }
|
||||
#saveAnnots:disabled { background: #555; }
|
||||
#annotColor { width: 28px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
|
||||
|
||||
/* Body layout */
|
||||
.body { flex: 1; display: flex; min-height: 0; }
|
||||
|
||||
/* Khi đang chọn công cụ chú thích: tắt chọn text, đổi con trỏ */
|
||||
body.tool-active .textlayer { pointer-events: none; }
|
||||
body.tool-active .page-slot { cursor: crosshair; }
|
||||
/* Highlight/Underline/Strikeout: NGƯỢC LẠI — bám theo text đã CHỌN (như Foxit),
|
||||
nên phải giữ textlayer bắt được chuột để chọn text bình thường. */
|
||||
body.tool-mark .textlayer { pointer-events: auto; }
|
||||
body.tool-mark .page-slot { cursor: text; }
|
||||
|
||||
/* Lớp annotation (preview trước khi lưu) */
|
||||
.annotlayer { position: absolute; inset: 0; pointer-events: none; }
|
||||
.annotlayer .a-hl { position: absolute; background: rgba(255,230,0,.4); }
|
||||
.annotlayer .a-box { position: absolute; border: 1.5px solid; }
|
||||
.annotlayer .a-line { position: absolute; height: 0; border-top: 2px solid; }
|
||||
.annotlayer .a-text {
|
||||
position: absolute; border: 1px dashed; padding: 2px 4px;
|
||||
font-size: 12px; color: #111; background: rgba(255,255,255,.6); overflow: hidden;
|
||||
}
|
||||
.annotlayer .a-note {
|
||||
position: absolute; width: 18px; height: 18px; pointer-events: auto;
|
||||
background: #ffd400; border: 1px solid #b59000; border-radius: 3px;
|
||||
font-size: 12px; text-align: center; line-height: 18px; cursor: help;
|
||||
}
|
||||
|
||||
/* Annotation: chọn & xoá */
|
||||
.a-sel { pointer-events: auto; cursor: pointer; }
|
||||
body.tool-active .annotlayer * { pointer-events: none; }
|
||||
.annotlayer .selected { outline: 2px solid #4d8bff; outline-offset: 1px; }
|
||||
.annotlayer .a-del {
|
||||
position: absolute; right: -10px; top: -10px; width: 18px; height: 18px;
|
||||
background: #e53935; color: #fff; border-radius: 50%; font-size: 11px;
|
||||
line-height: 18px; text-align: center; cursor: pointer; pointer-events: auto;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.4);
|
||||
}
|
||||
.annotlayer .a-line { min-height: 4px; }
|
||||
|
||||
/* Text box editor tại chỗ */
|
||||
.a-editor {
|
||||
position: absolute; pointer-events: auto; background: rgba(255,255,255,.9);
|
||||
border: 1px solid #4d8bff; outline: none; padding: 2px 4px; line-height: 1.25;
|
||||
white-space: pre-wrap; word-break: break-word; box-shadow: 0 2px 10px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* Thanh định dạng nổi */
|
||||
.fmtbar {
|
||||
position: fixed; z-index: 50; display: flex; gap: 3px; align-items: center;
|
||||
background: #2b2f31; border: 1px solid #1c1f21; border-radius: 7px;
|
||||
padding: 4px 6px; box-shadow: 0 4px 16px rgba(0,0,0,.5);
|
||||
}
|
||||
.fmtbar select { background: #1f2224; color: #eee; border: 1px solid #4a4f52; border-radius: 4px; padding: 2px; }
|
||||
.fmtbtn {
|
||||
width: 26px; height: 24px; background: #3a3f42; color: #fff; border: none;
|
||||
border-radius: 4px; cursor: pointer; font-weight: bold; padding: 0;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 2px;
|
||||
}
|
||||
.fmtbtn.on { background: var(--accent); }
|
||||
.fmtbtn .sw, .citem .csw, #annotSw, .np-color .sw, .fmt-color .sw {
|
||||
display: inline-block; width: 12px; height: 12px; border-radius: 2px;
|
||||
border: 1px solid rgba(255,255,255,.5); vertical-align: middle;
|
||||
}
|
||||
#annotSw { width: 14px; height: 14px; }
|
||||
|
||||
/* Note popup */
|
||||
.notepop {
|
||||
position: fixed; z-index: 50; width: 230px; background: #fffbea; color: #222;
|
||||
border: 1px solid #c9b400; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.4);
|
||||
}
|
||||
.np-head { display: flex; justify-content: space-between; align-items: center;
|
||||
background: #ffe600; padding: 4px 8px; font-size: 12px; font-weight: bold; border-radius: 6px 6px 0 0; }
|
||||
.np-close { cursor: pointer; }
|
||||
.np-text { width: 100%; min-height: 90px; border: none; outline: none; resize: vertical;
|
||||
padding: 8px; background: transparent; color: #222; font-family: inherit; font-size: 13px; box-sizing: border-box; }
|
||||
.np-foot { display: flex; justify-content: space-between; padding: 6px 8px; border-top: 1px solid #e0d480; }
|
||||
.np-foot button { background: #eee; color: #333; font-size: 12px; }
|
||||
.np-del { color: #c62828 !important; }
|
||||
|
||||
/* Color popover */
|
||||
.colorpop {
|
||||
position: fixed; z-index: 60; background: #2b2f31; border: 1px solid #1c1f21;
|
||||
border-radius: 7px; padding: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
|
||||
}
|
||||
.cgrid { display: grid; grid-template-columns: repeat(6, 20px); gap: 5px; }
|
||||
.cs { width: 20px; height: 20px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
|
||||
.cs:hover { border-color: #fff; }
|
||||
.cs.cur { border-color: #4d8bff; }
|
||||
.clbl { color: #9aa0a6; font-size: 11px; margin: 8px 0 4px; }
|
||||
.ccustom { display: block; margin-top: 8px; color: #ccc; font-size: 12px; cursor: pointer; }
|
||||
.ccustom input { vertical-align: middle; margin-left: 4px; }
|
||||
|
||||
/* Comments panel */
|
||||
.comments .citem {
|
||||
padding: 6px; border-radius: 5px; cursor: pointer; font-size: 12px;
|
||||
border: 1px solid #3a3f42; margin-bottom: 6px;
|
||||
}
|
||||
.comments .citem:hover { background: #3a3f42; }
|
||||
.comments .citem .ckind { color: var(--accent); font-weight: bold; }
|
||||
.comments .citem .cdel { float: right; color: #e57373; cursor: pointer; }
|
||||
.comments .empty { color: #777; font-size: 12px; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
flex: 0 0 220px;
|
||||
background: #2b2f31;
|
||||
border-right: 1px solid #1c1f21;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.tabs { display: flex; flex: 0 0 auto; }
|
||||
.tab {
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
background: #2b2f31;
|
||||
color: #9aa0a6;
|
||||
padding: 8px;
|
||||
}
|
||||
.tab.active { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
|
||||
.panel { flex: 1; overflow: auto; padding: 8px; }
|
||||
.panel.hidden { display: none; }
|
||||
|
||||
/* Thumbnails */
|
||||
.thumbs { display: flex; flex-direction: column; gap: 10px; align-items: center; }
|
||||
.thumb { cursor: pointer; text-align: center; width: 100%; }
|
||||
.thumb img {
|
||||
width: 130px;
|
||||
background: #fff;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,.5);
|
||||
}
|
||||
.thumb.active img { border-color: var(--accent); }
|
||||
.thumb .n { font-size: 11px; color: #9aa0a6; margin-top: 2px; }
|
||||
|
||||
/* Outline */
|
||||
.outline .oitem {
|
||||
padding: 5px 6px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #d6d9dc;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.outline .oitem:hover { background: #3a3f42; }
|
||||
|
||||
/* Viewer */
|
||||
.viewport { flex: 1; overflow: auto; min-height: 0; }
|
||||
.pages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.page-slot {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 18px rgba(0,0,0,.5);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.page-slot img { display: block; width: 100%; height: 100%; }
|
||||
.page-slot .ph {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #888; font-size: 13px;
|
||||
}
|
||||
.overlay { position: absolute; inset: 0; pointer-events: none; }
|
||||
|
||||
/* Text layer: span trong suốt phủ lên ảnh để chọn & copy text */
|
||||
.textlayer { position: absolute; inset: 0; overflow: hidden; }
|
||||
.textlayer span {
|
||||
position: absolute;
|
||||
color: transparent;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
cursor: text;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.textlayer span::selection { background: rgba(77, 139, 255, .45); }
|
||||
.page-slot img { user-select: none; -webkit-user-drag: none; }
|
||||
.hl {
|
||||
position: absolute;
|
||||
background: rgba(255, 214, 0, .38);
|
||||
outline: 1px solid rgba(255, 184, 0, .9);
|
||||
}
|
||||
.hl.current { background: rgba(255, 138, 0, .55); }
|
||||
Reference in New Issue
Block a user