@@ -682,6 +721,11 @@ document.addEventListener("DOMContentLoaded", () => {
const idInput = document.getElementById("layout-word-id");
const textInput = document.getElementById("layout-word-text");
const fontSizeInput = document.getElementById("layout-word-font-size");
+ const fontFamilyInput = document.getElementById("layout-word-font-family");
+ const fontWeightInput = document.getElementById("layout-word-font-weight");
+ const fontStyleInput = document.getElementById("layout-word-font-style");
+ const letterSpacingInput = document.getElementById("layout-word-letter-spacing");
+ const textColorInput = document.getElementById("layout-word-text-color");
const x1Input = document.getElementById("layout-x1");
const y1Input = document.getElementById("layout-y1");
const x2Input = document.getElementById("layout-x2");
@@ -691,6 +735,11 @@ document.addEventListener("DOMContentLoaded", () => {
const popoverTextInput = document.getElementById("layout-popover-text");
const popoverFontSizeInput = document.getElementById("layout-popover-font-size");
+ const applyStyleWordBtn = document.getElementById("layout-apply-style-word");
+ const applyStyleLineBtn = document.getElementById("layout-apply-style-line");
+ const applyStylePageBtn = document.getElementById("layout-apply-style-page");
+ const resetStyleWordBtn = document.getElementById("layout-reset-style-word");
+
const HANDLE_SIZE_PX = 14;
const HANDLE_HIT_PX = 26;
const SNAP_THRESHOLD_PX = 10;
@@ -707,6 +756,48 @@ document.addEventListener("DOMContentLoaded", () => {
if (statusEl) statusEl.textContent = msg;
}
+ function ensureStyle(word) {
+ word.inferred_style = word.inferred_style || {};
+ word.override_style = word.override_style || {};
+ word.resolved_style = word.resolved_style || {};
+ word.manual_flags = word.manual_flags || {};
+ }
+
+ function resolveStyle(word) {
+ const defaults = {
+ font_family: "Helvetica",
+ font_postscript_name: null,
+ font_weight: 400,
+ font_style: "normal",
+ font_stretch: "normal",
+ font_size: 10,
+ line_height: null,
+ letter_spacing: 0,
+ word_spacing: 0,
+ text_color: "#000000",
+ opacity: 1,
+ render_mode: "fill",
+ text_align: "left",
+ };
+ word.resolved_style = {
+ ...defaults,
+ ...(word.inferred_style || {}),
+ ...(word.override_style || {}),
+ };
+ }
+
+ function getSelectedWord() {
+ return words.find(w => String(w.id) === String(selectedId)) || null;
+ }
+
+ function applyStyleToWord(word, stylePatch) {
+ if (!word) return;
+ ensureStyle(word);
+ Object.assign(word.override_style, stylePatch);
+ word.manual_flags.style_edited = true;
+ resolveStyle(word);
+ }
+
let pages = [];
try {
pages = JSON.parse(dataTag.textContent || "[]");
@@ -788,6 +879,13 @@ document.addEventListener("DOMContentLoaded", () => {
function syncFontInputs(value) {
const v = Number.isFinite(Number(value)) ? Number(value) : "";
if (fontSizeInput) fontSizeInput.value = v;
+ ensureStyle(word);
+ resolveStyle(word);
+ if (fontFamilyInput) fontFamilyInput.value = word.resolved_style?.font_family || "Helvetica";
+ if (fontWeightInput) fontWeightInput.value = String(word.resolved_style?.font_weight || 400);
+ if (fontStyleInput) fontStyleInput.value = word.resolved_style?.font_style || "normal";
+ if (letterSpacingInput) letterSpacingInput.value = String(word.resolved_style?.letter_spacing || 0);
+ if (textColorInput) textColorInput.value = word.resolved_style?.text_color || "#000000";
if (popoverFontSizeInput) popoverFontSizeInput.value = v;
}
@@ -1632,6 +1730,65 @@ document.addEventListener("DOMContentLoaded", () => {
if (image.complete) initialRender();
else image.addEventListener("load", initialRender, { once: true });
window.addEventListener("resize", renderCanvas);
+
+ function collectStylePatchFromInputs() {
+ return {
+ font_family: (fontFamilyInput?.value || "Helvetica").trim() || "Helvetica",
+ font_size: Number(fontSizeInput?.value || 10),
+ font_weight: Number(fontWeightInput?.value || 400),
+ font_style: fontStyleInput?.value || "normal",
+ letter_spacing: Number(letterSpacingInput?.value || 0),
+ text_color: textColorInput?.value || "#000000",
+ };
+ }
+
+ if (applyStyleWordBtn) {
+ applyStyleWordBtn.addEventListener("click", function () {
+ const word = getSelectedWord();
+ if (!word) return;
+ applyStyleToWord(word, collectStylePatchFromInputs());
+ pushHistoryState("style-word");
+ redraw();
+ });
+ }
+
+ if (applyStyleLineBtn) {
+ applyStyleLineBtn.addEventListener("click", function () {
+ const word = getSelectedWord();
+ if (!word) return;
+ const y = ((word.bbox || [0,0,0,0])[1] + (word.bbox || [0,0,0,0])[3]) / 2;
+ const patch = collectStylePatchFromInputs();
+ for (const w of words) {
+ const bbox = w.bbox || [0,0,0,0];
+ const wy = (bbox[1] + bbox[3]) / 2;
+ if (Math.abs(wy - y) <= 12) applyStyleToWord(w, patch);
+ }
+ pushHistoryState("style-line");
+ redraw();
+ });
+ }
+
+ if (applyStylePageBtn) {
+ applyStylePageBtn.addEventListener("click", function () {
+ const patch = collectStylePatchFromInputs();
+ for (const w of words) applyStyleToWord(w, patch);
+ pushHistoryState("style-page");
+ redraw();
+ });
+ }
+
+ if (resetStyleWordBtn) {
+ resetStyleWordBtn.addEventListener("click", function () {
+ const word = getSelectedWord();
+ if (!word) return;
+ ensureStyle(word);
+ word.override_style = {};
+ word.manual_flags.style_edited = false;
+ resolveStyle(word);
+ pushHistoryState("style-reset");
+ redraw();
+ });
+ }
})();
{% else %}