/* ============================================================ PPT Master - SVG Editor | app.js Vanilla JS, IIFE pattern ============================================================ */ (function () { "use strict"; // ---- i18n ------------------------------------------------------- var MESSAGES = { en: { page_title: "PPT Master - Live Preview", panel_slides: "Slides", panel_annotations: "Annotations", panel_edit_annotate: "Edit / Annotate", placeholder_select_slide: "Select a slide on the left to begin", label_selected_element: "Selected element", empty_selected_element: "Click an element on the slide to select it", btn_select_group: "Select parent group", label_batch_edit: "Batch edit", label_group_edit: "Group edit", section_geometry: "Geometry", section_style: "Style", section_text_style: "Text", section_raw_attrs: "Raw attributes", label_edit_instruction: "Edit instruction", pending_none: "No pending changes", pending_summary: "{edits} direct edit(s), {annotations} annotation page(s) pending", pending_pages: "Pages: {pages}", quick_align: "Align / move", quick_resize: "Resize", quick_replace_image: "Replace image", quick_copy: "Revise copy", quick_relayout: "Relayout area", placeholder_annotation: "Describe how the AI should modify this element...", placeholder_annotation_multi: "Describe how to modify all {count} elements...", btn_add_annotation: "Add annotation", label_annotations_on_slide: "Annotations on this slide", btn_submit_annotations: "Apply changes", btn_exit_preview: "Exit preview", modal_submit: "Submit", modal_cancel: "Cancel", empty_waiting_slides: "Waiting for generated slides...", empty_no_slides: "No slides found", placeholder_live_ready: "Live preview is ready. Generated slides will appear here.", placeholder_slide_writing: "Slide is still being written. Waiting for the next refresh...", empty_annotations: "No annotations yet", tooltip_remove_annotation: "Remove annotation", multi_selected: "{count} elements selected", multi_mixed: "mixed", err_load_slides: "Failed to load slides: ", err_load_slide: "Failed to load slide: ", err_add_annotation: "Failed to add annotation: ", err_remove_annotation: "Failed to remove annotation: ", err_save: "Save failed: ", err_edit: "Edit failed: ", label_direct_edit: "Object attributes (pending until Apply changes)", prop_multiline_hint: "Multi-line — select a single line (tspan) to edit text", edit_saved_hint: "Change staged. Click Apply changes to write it to svg_output.", btn_undo: "Undo", undo_done: "Reverted last staged edit", undo_empty: "No staged edit to undo", overlap_caption: "Overlapping here — pick one", err_empty_svg: "Slide loaded but the canvas is empty. The SVG may be malformed or missing a root

' + escapeHtml(t("pending_summary", { edits: edits, annotations: annotations, })) + '

' + (pages.length ? '

' + escapeHtml(t("pending_pages", { pages: pages.join(", "), })) + '

' : ''); } function markAnnotationChanged(slide) { if (!slide) return; annotationEditSlides[slide] = true; annotationsDirty = true; updatePendingStatus(); } function initAnnotationQuickActions() { if (!annotationQuickActions) return; var actions = [ { key: "quick_align" }, { key: "quick_resize" }, { key: "quick_replace_image" }, { key: "quick_copy" }, { key: "quick_relayout" }, ]; annotationQuickActions.innerHTML = ""; actions.forEach(function (action) { var btn = document.createElement("button"); btn.type = "button"; btn.className = "annotation-quick-chip"; btn.textContent = t(action.key); btn.addEventListener("click", function () { var label = t(action.key); var prefix = (LANG === "zh" || LANG === "ja") ? label + "：" : label + ": "; if (!annotationText.value.trim()) { annotationText.value = prefix; } else if (annotationText.value.indexOf(prefix) === -1) { annotationText.value = prefix + annotationText.value; } annotationText.focus(); annotationText.selectionStart = annotationText.selectionEnd = annotationText.value.length; }); annotationQuickActions.appendChild(btn); }); } // Staged edits live in server memory until "Apply changes"; the server can // still idle-timeout or be killed and drop them. Warn before the tab leaves // so the user remembers to apply (browsers show their own generic prompt). function hasUnsavedWork() { if (annotationsDirty) return true; return Object.keys(editStackCount).some(function (k) { return editStackCount[k] > 0; }); } window.addEventListener("beforeunload", function (e) { if (!hasUnsavedWork()) return undefined; e.preventDefault(); e.returnValue = ""; return ""; }); function readSlideFromLocation() { try { var params = new URLSearchParams(window.location.hash.replace(/^#/, "")); return params.get("slide"); } catch (err) { return null; } } function rememberSlideInLocation(name) { if (!name) return; var params; try { params = new URLSearchParams(window.location.hash.replace(/^#/, "")); } catch (err) { params = new URLSearchParams(); } params.set("slide", name); var url = window.location.pathname + window.location.search + "#" + params.toString(); window.history.replaceState(null, "", url); } function currentSlideIndex() { if (!currentSlide) return -1; return slideNames.indexOf(currentSlide); } function gotoSlideIndex(idx) { if (idx < 0 || idx >= slideNames.length) return; var name = slideNames[idx]; if (name === currentSlide) return; var item = slideListEl.querySelector('.slide-item[data-name="' + cssAttr(name) + '"]'); selectSlide(name, item || undefined); } function cssAttr(value) { return String(value).replace(/"/g, '\\"'); } function updateNavLabel() { if (!navCounterEl) return; var total = slideNames.length; if (total === 0 || !currentSlide) { navCounterEl.textContent = t("nav_empty"); if (navNameEl) navNameEl.textContent = ""; } else { var idx = currentSlideIndex(); navCounterEl.textContent = t("nav_counter", { current: idx + 1, total: total }); if (navNameEl) navNameEl.textContent = currentSlide; } var idx2 = currentSlideIndex(); var hasCurrent = idx2 >= 0; if (navFirstBtn) navFirstBtn.disabled = !hasCurrent || idx2 === 0; if (navPrevBtn) navPrevBtn.disabled = !hasCurrent || idx2 <= 0; if (navNextBtn) navNextBtn.disabled = !hasCurrent || idx2 >= total - 1; if (navLastBtn) navLastBtn.disabled = !hasCurrent || idx2 >= total - 1; } // ================================================================ // 1. loadSlides -- GET /api/slides // ================================================================ function loadSlides() { return fetch("/api/slides") .then(function (res) { return res.json(); }) .then(function (data) { slideListEl.innerHTML = ""; var slides = data.slides || []; slideNames = slides.map(function (s) { return s.name; }); if (slides.length === 0) { var empty = document.createElement("div"); empty.className = "slide-list-empty"; empty.textContent = liveMode ? t("empty_waiting_slides") : t("empty_no_slides"); slideListEl.appendChild(empty); if (!currentSlide) { svgPlaceholder.style.display = "block"; svgPlaceholder.textContent = liveMode ? t("placeholder_live_ready") : t("empty_no_slides"); svgContent.style.display = "none"; } updateNavLabel(); updatePendingStatus(); return; } var currentExists = false; var currentReady = false; var currentMtimeChanged = false; slides.forEach(function (s) { if (s.name === currentSlide) { currentExists = true; currentReady = s.ok !== false; // Compare against the mtime we recorded when we last rendered this slide. var lastSeen = slideMtimes[s.name]; if (lastSeen !== undefined && s.mtime && s.mtime !== lastSeen) { currentMtimeChanged = true; } } // Track every slide's mtime for the next poll (only update non-current here; // currentSlide's mtime is updated by selectSlide so we can detect drift). if (s.name !== currentSlide && s.mtime !== undefined) { slideMtimes[s.name] = s.mtime; } var item = document.createElement("div"); item.className = "slide-item" + (s.name === currentSlide ? " active" : ""); if (s.ok === false) { item.className += " slide-error"; item.title = t("slide_error_tooltip") + (s.error || ""); } item.setAttribute("data-name", s.name); var nameSpan = document.createElement("span"); nameSpan.className = "slide-name"; nameSpan.textContent = s.name; item.appendChild(nameSpan); if (s.annotation_count > 0) { var badge = document.createElement("span"); badge.className = "badge"; badge.textContent = s.annotation_count; item.appendChild(badge); } item.addEventListener("click", function () { selectSlide(s.name, item); }); slideListEl.appendChild(item); }); if (!currentSlide || !currentExists) { var rememberedSlide = readSlideFromLocation(); var targetSlide = rememberedSlide && slideNames.indexOf(rememberedSlide) !== -1 ? rememberedSlide : slides[0].name; selectSlide(targetSlide); } else if (waitingForSlide === currentSlide) { if (currentReady) { selectSlide(currentSlide); } } else if (currentMtimeChanged) { showReloadBanner(currentSlide); } updateNavLabel(); updatePendingStatus(); }) .catch(function (err) { console.error("loadSlides:", err); showError(t("err_load_slides") + err.message); }); } // ================================================================ // 2. selectSlide -- GET /api/slide/{name} // ================================================================ function waitForSlideRewrite(name) { if (!liveMode || name !== currentSlide) return; waitingForSlide = name; svgPlaceholder.style.display = "block"; svgPlaceholder.textContent = t("placeholder_slide_writing"); svgContent.style.display = "none"; } function selectSlide(name, el) { if (!el) { el = slideListEl.querySelector('.slide-item[data-name="' + cssAttr(name) + '"]'); } // Update active class in sidebar document.querySelectorAll(".slide-item").forEach(function (it) { it.classList.remove("active"); }); if (el) el.classList.add("active"); currentSlide = name; waitingForSlide = null; rememberSlideInLocation(name); selectedElementIds.clear(); slideAnnotations = {}; updateNavLabel(); // Reset right panel and rubber band cancelRubberBand(); clearSelection(); // Selecting a slide implicitly dismisses any stale "page updated" banner. hideReloadBanner(); fetch("/api/slide/" + encodeURIComponent(name)) .then(function (res) { return res.json(); }) .then(function (data) { if (name !== currentSlide) return; if (data.error) { console.error("selectSlide:", data.error); showError(t("err_load_slide") + data.error); waitForSlideRewrite(name); return; } // Render SVG svgPlaceholder.style.display = "none"; svgContent.style.display = "block"; svgContent.innerHTML = sanitizeSvg(data.content); // Empty-canvas guard: surface a clear error if the SVG parsed // to nothing renderable (issue #115's silent-blank scenario). var rootSvg = svgContent.querySelector("svg"); // viewBox is the PPT Master canvas authority. Normalize the // preview DOM from it so stale or missing root width/height // cannot shrink the slide. View-layer only — the file on disk // is never touched. if (rootSvg) { var vb = (rootSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/); var vbWidth = Number(vb[2]); var vbHeight = Number(vb[3]); if ( vb.length === 4 && Number.isFinite(vbWidth) && Number.isFinite(vbHeight) && vbWidth > 0 && vbHeight > 0 ) { rootSvg.setAttribute("width", vb[2]); rootSvg.setAttribute("height", vb[3]); } } var hasContent = false; if (rootSvg) { var children = rootSvg.querySelectorAll("*"); for (var i = 0; i < children.length; i++) { var ctag = children[i].tagName.toLowerCase(); if (ctag !== "defs" && ctag !== "style" && ctag !== "title" && ctag !== "desc") { hasContent = true; break; } } } if (!rootSvg || !hasContent) { showError(t("err_empty_svg")); svgPlaceholder.style.display = "block"; svgPlaceholder.textContent = t("err_empty_svg"); svgContent.style.display = "none"; return; } // Non-fatal warnings (e.g. icon inline failures): surface as a // single combined toast so users know why something looks off. if (data.warnings && data.warnings.length > 0) { var names = data.warnings.map(function (w) { return w.icon || "(unknown)"; }).join(", "); showWarning(t("warn_icon_inline", { count: data.warnings.length, names: names, })); } // Record the mtime so the next poll can detect on-disk drift. if (data.mtime !== undefined) { slideMtimes[name] = data.mtime; } // Build annotations map from response (data.annotations || []).forEach(function (a) { slideAnnotations[a.element_id] = a.annotation; }); editStackCount[name] = data.undo_depth || 0; setupSvgInteraction(); refreshAnnotationVisuals(); updateAnnotationList(); updateUndoButton(); updatePendingStatus(); }) .catch(function (err) { if (name !== currentSlide) return; console.error("selectSlide:", err); showError(t("err_load_slide") + err.message); waitForSlideRewrite(name); }); } // ================================================================ // 3. setupSvgInteraction // ================================================================ var SKIP_TAGS = ["defs", "style", "title", "desc"]; function setupSvgInteraction() { var svg = svgContent.querySelector("svg"); if (!svg) return; // Visual class only — selectability is handled by the delegated handler below. // Skipping the per-element addEventListener brings listener-registration time // from O(n) to O(1), which matters on decks with hundreds of elements per slide. var allEls = svg.querySelectorAll("*"); allEls.forEach(function (el) { var tag = el.tagName.toLowerCase(); if (SKIP_TAGS.indexOf(tag) !== -1) return; if (el === svg) return; el.classList.add("svg-selectable"); }); svg.addEventListener("click", function (e) { // Skip the synthetic click that follows a rubber-band drag-release. if (suppressNextSvgClick) { suppressNextSvgClick = false; return; } var target = e.target; // Blank-area click on the svg root → clear selection. if (target === svg) { clearSelection(); return; } // Ignore clicks bubbling out of non-interactive subtrees. if (target.closest && target.closest("defs, style, title, desc")) return; // Backend assign_temp_ids() guarantees every element has an id, so // closest("[id]") will always find a hit. The exclusion of `svg` // itself routes "click outside any real shape" to clearSelection. // Icon placeholders are expanded only for browser preview. If a // click lands on a generated child, edit the disk-backed data-icon // group instead of an inner preview-only node. var picked = e.altKey && target.closest ? target.closest("g[id]") : null; picked = picked || (target.closest && target.closest("[data-icon][id]")) || target.closest("[id]"); if (!picked || picked === svg) { clearSelection(); return; } selectElement(picked, e.ctrlKey || e.metaKey); }); } // ================================================================ // 4. selectElement // ================================================================ function selectElement(elem, addToSelection) { var eid = elem.id; if (!eid) return; if (addToSelection) { // Ctrl+click: toggle this element if (selectedElementIds.has(eid)) { selectedElementIds.delete(eid); elem.classList.remove("svg-selected"); } else { selectedElementIds.add(eid); elem.classList.add("svg-selected"); } } else { // Normal click: clear others, select only this one selectedElementIds.forEach(function (id) { if (id !== eid) { var old = svgContent.querySelector("#" + CSS.escape(id)); if (old) old.classList.remove("svg-selected"); } }); selectedElementIds.clear(); selectedElementIds.add(eid); elem.classList.add("svg-selected"); } updateSelectionPanel(); } // ================================================================ // 5. clearSelection // ================================================================ function clearSelection() { selectedElementIds.forEach(function (id) { var el = svgContent.querySelector("#" + CSS.escape(id)); if (el) el.classList.remove("svg-selected"); }); selectedElementIds.clear(); updateSelectionPanel(); } function updateSelectionPanel() { var propsEl = elementPropsEl; var count = selectedElementIds.size; if (count === 0) { selectedElementEl.classList.add("empty"); selectedElementEl.textContent = t("empty_selected_element"); annotationInput.style.display = "none"; annotationText.value = ""; propsEl.style.display = "none"; propsEl.innerHTML = ""; return; } selectedElementEl.classList.remove("empty"); propsEl.style.display = "block"; if (count === 1) { var eid = selectedElementIds.values().next().value; var el = svgContent.querySelector("#" + CSS.escape(eid)); if (el) { var tag = el.tagName.toLowerCase(); selectedElementEl.innerHTML = '<' + escapeHtml(tag) + '>' + '' + escapeHtml(eid) + ''; propsEl.innerHTML = renderEditableProps(el); attachPropEditors(el); } } else { selectedElementEl.innerHTML = '' + escapeHtml(t("multi_selected", { count: count })) + ''; propsEl.innerHTML = renderMultiSelectSummary(Array.from(selectedElementIds)); attachMultiSelectionEditors(Array.from(selectedElementIds)); } annotationInput.style.display = "block"; annotationText.placeholder = count > 1 ? t("placeholder_annotation_multi", { count: count }) : t("placeholder_annotation"); annotationText.value = count === 1 ? (slideAnnotations[selectedElementIds.values().next().value] || "") : ""; } // ---- Rubber band selection ---- var rubberBandEl = null; var rubberBandStart = null; var rubberBandUsed = false; var suppressNextSvgClick = false; var RUBBER_BAND_THRESHOLD = 5; // ---- Drag-to-move (direct geometry edit on the canvas) ---- // Pressing on an already-selected element drags the whole selection. Frames // only update the preview; one staged edit per element is written on release, // reusing attrsForMove + stageEditRequest (and backend coalescing). var dragStart = null; // {x, y} screen coords at mousedown on a selection var dragMoved = false; // crossed the move threshold this gesture var dragEls = []; // top-level selected elements being moved var dragStartAttrs = {}; // {id: startGeometryAttrs} for drift-free preview function hitSelectedAncestor(target) { // Walk up from the pressed node to the first element already in the // selection, so a press on a selected shape (or its inner preview // children) starts a drag regardless of how it was selected. var svg = svgContent.querySelector("svg"); var node = target; while (node && node !== svg && node.nodeType === 1) { if (node.id && selectedElementIds.has(node.id)) return node; node = node.parentNode; } return null; } function screenDeltaToLocal(el, dxScreen, dyScreen) { // Map a screen-pixel delta into the coordinate space computeRenderBox / // attrsForMove use for THIS element (its getCTM() output space). Using the // element's own getCTM ∘ getScreenCTM⁻¹ is robust to how a browser splits // the viewBox scale between getCTM and getScreenCTM, and naturally accounts // for each element's own group transform (correct under multi-select). var sctm = el.getScreenCTM ? el.getScreenCTM() : null; var ctm = el.getCTM ? el.getCTM() : null; if (!sctm || !ctm) return { x: dxScreen, y: dyScreen }; try { var n = ctm.multiply(sctm.inverse()); // linear part: screen → local delta var lx = n.a * dxScreen + n.c * dyScreen; var ly = n.b * dxScreen + n.d * dyScreen; // Singular CTM → SVGMatrix.inverse() throws, DOMMatrix yields NaN. // Either way, fall back to the raw delta rather than wedge the drag. if (!isFinite(lx) || !isFinite(ly)) return { x: dxScreen, y: dyScreen }; return { x: lx, y: ly }; } catch (err) { return { x: dxScreen, y: dyScreen }; } } function beginDrag() { dragEls = topLevelSelectedElements(Array.from(selectedElementIds)); dragStartAttrs = {}; dragEls.forEach(function (el) { // attrsForMove(el, 0, 0) returns the element's current geometry in the // exact attribute shape a move writes (x/y, cx/cy, … or transform); // restoring it before each frame keeps the preview drift-free. try { dragStartAttrs[el.id] = attrsForMove(el, 0, 0); } catch (err) { dragStartAttrs[el.id] = null; } }); document.body.classList.add("svg-dragging"); } function applyAttrSnapshot(el, sa) { if (!sa) return; applyElementAttrs(el, sa); } var INLINE_GEOMETRY_STYLE_PROPERTIES = { rect: new Set(["x", "y", "width", "height", "rx", "ry"]), circle: new Set(["cx", "cy", "r"]), ellipse: new Set(["cx", "cy", "rx", "ry"]), image: new Set(["x", "y", "width", "height"]), svg: new Set(["x", "y", "width", "height"]), use: new Set(["x", "y", "width", "height"]) }; function stripEditedInlineGeometry(el, attrs) { var style = el.getAttribute("style"); var supported = INLINE_GEOMETRY_STYLE_PROPERTIES[localName(el)]; if (!style || !supported) return; var edited = new Set(Object.keys(attrs || {}).map(function (key) { return String(key).toLowerCase(); }).filter(function (key) { return supported.has(key); })); if (edited.size === 0) return; var retained = []; var changed = false; style.split(";").forEach(function (rawDeclaration) { var declaration = rawDeclaration.trim(); if (!declaration) return; var colon = declaration.indexOf(":"); if (colon < 0) { retained.push(declaration); return; } var name = declaration.slice(0, colon).trim().toLowerCase(); if (edited.has(name)) { changed = true; return; } retained.push(declaration); }); if (!changed) return; if (retained.length > 0) el.setAttribute("style", retained.join("; ")); else el.removeAttribute("style"); } function applyElementAttrs(el, attrs) { stripEditedInlineGeometry(el, attrs); if (localName(el) === "g" && el.hasAttribute("data-icon") && attrs.x !== undefined && attrs.y !== undefined) { // The preview expands into a , but disk still owns // the source . Keep the browser geometry in sync while the staged // edit writes x/y back to the real placeholder instead of persisting a // transform. var m = ownMatrix(el); el.setAttribute("transform", "matrix(" + [ formatCoord(m.a), formatCoord(m.b), formatCoord(m.c), formatCoord(m.d), formatCoord(parseFloat(attrs.x)), formatCoord(parseFloat(attrs.y)) ].join(",") + ")"); el.setAttribute("data-use-x", attrs.x); el.setAttribute("data-use-y", attrs.y); } Object.keys(attrs).forEach(function (k) { if (localName(el) === "g" && el.hasAttribute("data-icon") && (k === "x" || k === "y" || k === "transform")) return; if (attrs[k] === null || attrs[k] === undefined) el.removeAttribute(k); else el.setAttribute(k, attrs[k]); }); } function localName(el) { return el && el.tagName ? el.tagName.toLowerCase() : ""; } function markCommittedAttrs(el, attrs) { if (attrs && attrs.transform === null && localName(el) === "g" && el.hasAttribute("data-icon")) { el.removeAttribute("data-use-has-transform"); } } function payloadForCurrentElementState(el, payload) { if (!payload || !payload.attrs || payload.attrs.transform !== null || localName(el) !== "g" || !el.hasAttribute("data-icon") || el.hasAttribute("data-use-has-transform")) { return payload; } var attrs = Object.assign({}, payload.attrs); delete attrs.transform; return Object.assign({}, payload, { attrs: attrs }); } function restoreDragStart(el) { applyAttrSnapshot(el, dragStartAttrs[el.id]); } function applyMoveLocal(el, dxScreen, dyScreen) { // Each element converts the shared screen delta into its own local space, // so a selection spanning differently-transformed groups still tracks the // pointer. Restore-then-apply keeps every frame relative to the start. restoreDragStart(el); var d = screenDeltaToLocal(el, dxScreen, dyScreen); var attrs; try { attrs = attrsForMove(el, d.x, d.y); } catch (err) { attrs = null; } if (!attrs) return null; applyElementAttrs(el, attrs); return attrs; } function updateDragPreview(dxScreen, dyScreen) { dragEls.forEach(function (el) { applyMoveLocal(el, dxScreen, dyScreen); }); if (dragEls.length === 1) refreshGeoInputs(dragEls[0], elementPropsEl); } function commitDrag(dxScreen, dyScreen) { var single = dragEls.length === 1; dragEls.forEach(function (el) { // Capture the pre-drag snapshot in the closure: endDrag() clears // dragStartAttrs synchronously after this call, before the staging // promise can reject, so the rollback can't rely on the global. var startAttrs = dragStartAttrs[el.id]; var attrs = applyMoveLocal(el, dxScreen, dyScreen); if (!attrs) return; var payload = payloadForMovedElement(el, attrs); stageEditRequest(el.id, payload).then(function () { if (payload.attrs) markCommittedAttrs(el, payload.attrs); if (payload.promote_tspan) { var promoted = promoteTspanDom(el, payload.promote_tspan); if (promoted && single) refreshGeoInputs(promoted, elementPropsEl); } }).catch(function (err) { // Optimistic preview already moved the element; roll it back so the // canvas never shows a move the server never staged. applyAttrSnapshot(el, startAttrs); if (single) refreshGeoInputs(el, elementPropsEl); showError(t("err_edit") + err.message); }); }); } function endDrag() { dragStart = null; dragMoved = false; dragEls = []; dragStartAttrs = {}; document.body.classList.remove("svg-dragging"); } // Per-element nudge staging is serialized: a held arrow key fires many // keydowns, each sending an *absolute* position. Without ordering, the // unlocked backend could coalesce them out of order and leave the staged // value behind the on-screen one. So at most one nudge stage per element is // in flight; extra keypresses only update the preview and the queued target, // and the next send reads the current DOM position (= the latest). var nudgeFlight = {}; // key -> bool: a nudge stage is in flight var nudgeQueued = {}; // key -> {el, single, slide, attrs}: latest target awaiting send var nudgeLastOk = {}; // key -> attrs: last position the server confirmed function nudgeKey(slide, el) { return slide + "|" + el.id; } function sendNudge(key, el, single, slide, payload) { if (!payload) return; payload = payloadForCurrentElementState(el, payload); nudgeFlight[key] = true; stageEditRequest(el.id, payload, slide).then(function () { if (payload.attrs) nudgeLastOk[key] = payload.attrs; if (payload.attrs) markCommittedAttrs(el, payload.attrs); nudgeFlight[key] = false; var q = nudgeQueued[key]; if (q) { delete nudgeQueued[key]; sendNudge(key, q.el, q.single, q.slide, q.payload); } }).catch(function (err) { nudgeFlight[key] = false; delete nudgeQueued[key]; // Re-sync the preview to the last confirmed position so it can't show // a move the server never staged (only meaningful on the live slide). if (payload.promote_tspan && el.__promotionRollback) { var restored = el.__promotionRollback(); if (single && restored) refreshGeoInputs(restored, elementPropsEl); } else if (nudgeLastOk[key] && slide === currentSlide && el.isConnected) { applyAttrSnapshot(el, nudgeLastOk[key]); if (single) refreshGeoInputs(el, elementPropsEl); } showError(t("err_edit") + err.message); }); } function stageNudge(el, single, slide, payload) { var key = nudgeKey(slide, el); if (nudgeFlight[key]) { nudgeQueued[key] = { el: el, single: single, slide: slide, payload: payload }; return; } sendNudge(key, el, single, slide, payload); } function nudgeSelection(dxScreen, dyScreen) { // Keyboard arrow micro-move: same geometry path as drag. The DOM updates // immediately; staging is serialized per element (see sendNudge), and // consecutive same-direction nudges coalesce into one undo step. var els = topLevelSelectedElements(Array.from(selectedElementIds)); if (els.length === 0) return; var slide = currentSlide; var single = els.length === 1; var lastSingleEl = null; els.forEach(function (el) { var key = nudgeKey(slide, el); if (!nudgeFlight[key] && !nudgeQueued[key]) { // Fresh burst: re-capture the pre-move baseline from the current // DOM, so a failed nudge rolls back to *this* burst's start rather // than a stale position left by an earlier drag/edit/undo. try { nudgeLastOk[key] = attrsForMove(el, 0, 0); } catch (err) { delete nudgeLastOk[key]; } } var d = screenDeltaToLocal(el, dxScreen, dyScreen); var attrs; try { attrs = attrsForMove(el, d.x, d.y); } catch (err) { attrs = null; } if (!attrs) return; applyElementAttrs(el, attrs); var payload = payloadForMovedElement(el, attrs); if (payload.promote_tspan) { el = promoteTspanDom(el, payload.promote_tspan) || el; } lastSingleEl = el; stageNudge(el, single, slide, payload); }); if (single && lastSingleEl) refreshGeoInputs(lastSingleEl, elementPropsEl); } // ---- Overlap picker (right-click → list every selectable element here) ---- // Left-click stays a fast "select the topmost" gesture; right-click is the // opt-in disambiguator for stacked elements, so it never pops on normal use. var overlapPickerEl = null; function collectSelectableAt(clientX, clientY) { var svg = svgContent.querySelector("svg"); if (!svg || !document.elementsFromPoint) return []; var out = []; var seen = {}; document.elementsFromPoint(clientX, clientY).forEach(function (node) { if (!svg.contains(node) || node === svg) return; if (node.closest && node.closest("defs, style, title, desc")) return; // Resolve to the disk-backed selectable entity, mirroring the click // handler: prefer an enclosing data-icon group, else nearest id. var picked = (node.closest && node.closest("[data-icon][id]")) || (node.closest && node.closest("[id]")); if (!picked || picked === svg || !picked.id || seen[picked.id]) return; seen[picked.id] = true; out.push(picked); }); return out; // top → bottom in paint order } function closeOverlapPicker() { if (!overlapPickerEl) return; var svg = svgContent.querySelector("svg"); if (svg) { svg.querySelectorAll(".overlap-hover").forEach(function (e) { e.classList.remove("overlap-hover"); }); } overlapPickerEl.remove(); overlapPickerEl = null; } function showOverlapPicker(clientX, clientY, candidates) { closeOverlapPicker(); var menu = document.createElement("div"); menu.id = "overlap-picker"; var cap = document.createElement("div"); cap.className = "overlap-caption"; cap.textContent = t("overlap_caption"); menu.appendChild(cap); candidates.forEach(function (el) { var item = document.createElement("div"); item.className = "overlap-item"; var tag = el.tagName.toLowerCase(); var txt = (tag === "text" || tag === "tspan") ? (el.textContent || "").trim().slice(0, 28) : ""; item.innerHTML = '<' + escapeHtml(tag) + '>' + escapeHtml(el.id) + '' + (txt ? '' + escapeHtml(txt) + '' : ''); item.addEventListener("mouseenter", function () { el.classList.add("overlap-hover"); }); item.addEventListener("mouseleave", function () { el.classList.remove("overlap-hover"); }); item.addEventListener("click", function (ev) { ev.stopPropagation(); selectElement(el, ev.ctrlKey || ev.metaKey); closeOverlapPicker(); }); menu.appendChild(item); }); document.body.appendChild(menu); // Keep the menu inside the viewport. var x = Math.min(clientX, window.innerWidth - menu.offsetWidth - 8); var y = Math.min(clientY, window.innerHeight - menu.offsetHeight - 8); menu.style.left = Math.max(8, x) + "px"; menu.style.top = Math.max(8, y) + "px"; overlapPickerEl = menu; } function initRubberBand() { var overlay = document.getElementById("rubber-band-overlay"); var container = document.getElementById("svg-container"); container.addEventListener("mousedown", function (e) { // Only left mouse button if (e.button !== 0) return; // Pressing on an already-selected element arms a drag of the whole // selection instead of a rubber band. Selecting stays a separate // click, so the background is never dragged by accident. if (hitSelectedAncestor(e.target)) { dragStart = { x: e.clientX, y: e.clientY }; dragMoved = false; return; } // Always start tracking — rubber band only activates when // mousemove exceeds the threshold. This allows clicking on any // element (including SVG background rects) to still trigger // the element's click handler for selection. rubberBandStart = { x: e.clientX, y: e.clientY }; rubberBandUsed = false; }); document.addEventListener("mousemove", function (e) { if (dragStart) { var ddx = e.clientX - dragStart.x; var ddy = e.clientY - dragStart.y; if (!dragMoved && Math.sqrt(ddx * ddx + ddy * ddy) < RUBBER_BAND_THRESHOLD) { return; // below threshold — still a click, let selection stand } if (!dragMoved) { dragMoved = true; beginDrag(); } updateDragPreview(ddx, ddy); return; } if (!rubberBandStart) return; var dx = e.clientX - rubberBandStart.x; var dy = e.clientY - rubberBandStart.y; var dist = Math.sqrt(dx * dx + dy * dy); if (dist < RUBBER_BAND_THRESHOLD) { return; } // Threshold exceeded — this is a drag, not a click if (!rubberBandUsed) { rubberBandUsed = true; overlay.classList.add("active"); } if (!rubberBandEl) { rubberBandEl = document.createElement("div"); rubberBandEl.id = "rubber-band"; document.body.appendChild(rubberBandEl); } var x = Math.min(rubberBandStart.x, e.clientX); var y = Math.min(rubberBandStart.y, e.clientY); var w = Math.abs(dx); var h = Math.abs(dy); rubberBandEl.style.left = x + "px"; rubberBandEl.style.top = y + "px"; rubberBandEl.style.width = w + "px"; rubberBandEl.style.height = h + "px"; }); document.addEventListener("mouseup", function (e) { if (dragStart) { if (dragMoved) { commitDrag(e.clientX - dragStart.x, e.clientY - dragStart.y); // Swallow the click that follows the drag-release so it does // not re-trigger selection on the dropped element. suppressNextSvgClick = true; window.setTimeout(function () { suppressNextSvgClick = false; }, 50); } endDrag(); return; } if (!rubberBandStart) return; overlay.classList.remove("active"); var dx = e.clientX - rubberBandStart.x; var dy = e.clientY - rubberBandStart.y; var dist = Math.sqrt(dx * dx + dy * dy); if (rubberBandEl) { rubberBandEl.remove(); rubberBandEl = null; } // Only process if drag was beyond threshold if (dist >= RUBBER_BAND_THRESHOLD) { var rect = { left: Math.min(rubberBandStart.x, e.clientX), top: Math.min(rubberBandStart.y, e.clientY), right: Math.max(rubberBandStart.x, e.clientX), bottom: Math.max(rubberBandStart.y, e.clientY) }; if (!e.ctrlKey && !e.metaKey) { clearSelection(); } selectByRubberBand(rect); suppressNextSvgClick = true; window.setTimeout(function () { suppressNextSvgClick = false; }, 50); } else { // Below threshold: treat as click on empty space if (!e.ctrlKey && !e.metaKey) { clearSelection(); } } rubberBandStart = null; }); // Right-click → list every selectable element under the pointer, so // stacked/overlapping shapes can be reached without blind cycling. container.addEventListener("contextmenu", function (e) { var svg = svgContent.querySelector("svg"); if (!svg) return; var cands = collectSelectableAt(e.clientX, e.clientY); if (cands.length === 0) return; // nothing here → native menu e.preventDefault(); if (cands.length === 1) { selectElement(cands[0], false); return; } showOverlapPicker(e.clientX, e.clientY, cands); }); // Dismiss the picker on any press outside it (item clicks stop their own // propagation, so this never fires before a selection is made). document.addEventListener("mousedown", function (e) { if (overlapPickerEl && !overlapPickerEl.contains(e.target)) { closeOverlapPicker(); } }); } function cancelRubberBand() { rubberBandStart = null; if (rubberBandEl) { rubberBandEl.remove(); rubberBandEl = null; } var ov = document.getElementById("rubber-band-overlay"); if (ov) ov.classList.remove("active"); suppressNextSvgClick = false; endDrag(); closeOverlapPicker(); } function selectByRubberBand(screenRect) { var svg = svgContent.querySelector("svg"); if (!svg) return; var selectableEls = svg.querySelectorAll(".svg-selectable"); selectableEls.forEach(function (el) { try { var bbox = el.getBBox(); var ctm = el.getScreenCTM(); if (!ctm) return; // Transform bbox corners to screen coordinates var corners = [ { x: bbox.x, y: bbox.y }, { x: bbox.x + bbox.width, y: bbox.y }, { x: bbox.x, y: bbox.y + bbox.height }, { x: bbox.x + bbox.width, y: bbox.y + bbox.height } ]; var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; corners.forEach(function (c) { var sx = c.x * ctm.a + c.y * ctm.c + ctm.e; var sy = c.x * ctm.b + c.y * ctm.d + ctm.f; if (sx < minX) minX = sx; if (sy < minY) minY = sy; if (sx > maxX) maxX = sx; if (sy > maxY) maxY = sy; }); // AABB intersection if (minX < screenRect.right && maxX > screenRect.left && minY < screenRect.bottom && maxY > screenRect.top) { var eid = el.id; if (eid) { selectedElementIds.add(eid); el.classList.add("svg-selected"); } } } catch (err) { // getBBox can throw for elements with no geometry } }); updateSelectionPanel(); } // ================================================================ // Keyboard shortcuts // ================================================================ function initKeyboardShortcuts() { document.addEventListener("keydown", function (e) { // Ctrl+Z / Cmd+Z: drop the last staged edit. Let inputs/selects handle // their own native undo when focused. if ((e.ctrlKey || e.metaKey) && (e.key === "z" || e.key === "Z")) { var ae = document.activeElement; if (ae && (ae === annotationText || ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.tagName === "SELECT")) { return; } e.preventDefault(); runUndo(); return; } // Ctrl+A / Cmd+A: select all elements if ((e.ctrlKey || e.metaKey) && e.key === "a") { // Don't intercept if focus is in textarea if (document.activeElement === annotationText) return; e.preventDefault(); var svg = svgContent.querySelector("svg"); if (!svg) return; svg.querySelectorAll(".svg-selectable").forEach(function (el) { var eid = el.id; if (eid) { selectedElementIds.add(eid); el.classList.add("svg-selected"); } }); updateSelectionPanel(); } // Escape: close the overlap picker first if open, else clear selection. if (e.key === "Escape") { if (document.activeElement === annotationText) return; if (overlapPickerEl) { closeOverlapPicker(); return; } clearSelection(); } // Slide navigation: ArrowLeft/Right + Home/End (skip while typing) if (document.activeElement === annotationText) return; if (e.ctrlKey || e.metaKey || e.altKey) return; // Arrow keys nudge the selection (1px, Shift = 10px) instead of // navigating slides whenever something is selected. if (selectedElementIds.size > 0 && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) { e.preventDefault(); var step = e.shiftKey ? 10 : 1; var nx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0; var ny = e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0; nudgeSelection(nx, ny); return; } if (slideNames.length === 0) return; if (e.key === "ArrowLeft") { e.preventDefault(); gotoSlideIndex(currentSlideIndex() - 1); } else if (e.key === "ArrowRight") { e.preventDefault(); gotoSlideIndex(currentSlideIndex() + 1); } else if (e.key === "Home") { e.preventDefault(); gotoSlideIndex(0); } else if (e.key === "End") { e.preventDefault(); gotoSlideIndex(slideNames.length - 1); } }); } function initSlideNav() { if (navFirstBtn) navFirstBtn.addEventListener("click", function () { gotoSlideIndex(0); }); if (navPrevBtn) navPrevBtn.addEventListener("click", function () { gotoSlideIndex(currentSlideIndex() - 1); }); if (navNextBtn) navNextBtn.addEventListener("click", function () { gotoSlideIndex(currentSlideIndex() + 1); }); if (navLastBtn) navLastBtn.addEventListener("click", function () { gotoSlideIndex(slideNames.length - 1); }); } // ================================================================ // 6. Add annotation -- POST /api/slide/{name}/annotate // ================================================================ btnAddAnnotation.addEventListener("click", function () { if (!currentSlide || selectedElementIds.size === 0) return; var text = annotationText.value.trim(); if (!text) return; var ids = Array.from(selectedElementIds); var promises = ids.map(function (eid) { return fetch("/api/slide/" + encodeURIComponent(currentSlide) + "/annotate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ element_id: eid, annotation: text }) }).then(jsonOrThrow); }); Promise.all(promises) .then(function () { ids.forEach(function (eid) { slideAnnotations[eid] = text; }); markAnnotationChanged(currentSlide); refreshAnnotationVisuals(); updateAnnotationList(); annotationText.value = ""; loadSlides(); }) .catch(function (err) { console.error("addAnnotation:", err); showError(t("err_add_annotation") + err.message); }); }); // ================================================================ // 7. removeAnnotation -- DELETE /api/slide/{name}/annotate/{id} // ================================================================ function removeAnnotation(elementId) { if (!currentSlide) return; fetch("/api/slide/" + encodeURIComponent(currentSlide) + "/annotate/" + encodeURIComponent(elementId), { method: "DELETE" }) .then(function (res) { return res.json(); }) .then(function () { delete slideAnnotations[elementId]; markAnnotationChanged(currentSlide); refreshAnnotationVisuals(); updateAnnotationList(); loadSlides(); }) .catch(function (err) { console.error("removeAnnotation:", err); showError(t("err_remove_annotation") + err.message); }); } // ================================================================ // 8. refreshAnnotationVisuals // ================================================================ function refreshAnnotationVisuals() { // Clear all annotated marks svgContent.querySelectorAll(".svg-annotated").forEach(function (el) { el.classList.remove("svg-annotated"); }); // Apply marks Object.keys(slideAnnotations).forEach(function (eid) { var el = svgContent.querySelector("#" + CSS.escape(eid)); if (el) el.classList.add("svg-annotated"); }); } // ================================================================ // 9. updateAnnotationList // ================================================================ function updateAnnotationList() { annotationsEl.innerHTML = ""; var ids = Object.keys(slideAnnotations); if (ids.length === 0) { annotationsEl.innerHTML = '

' + escapeHtml(t("empty_annotations")) + '

'; return; } ids.forEach(function (eid) { var item = document.createElement("div"); item.className = "annotation-item"; // Try to resolve tag from live SVG var tag = ""; var el = svgContent.querySelector("#" + CSS.escape(eid)); if (el) tag = el.tagName.toLowerCase(); var header = document.createElement("div"); header.className = "ann-header"; var leftSpan = document.createElement("span"); if (tag) { var tagSpan = document.createElement("span"); tagSpan.className = "ann-tag"; tagSpan.textContent = "<" + tag + ">"; leftSpan.appendChild(tagSpan); } var idSpan = document.createElement("span"); idSpan.className = "ann-id"; idSpan.textContent = eid; leftSpan.appendChild(idSpan); header.appendChild(leftSpan); var removeBtn = document.createElement("button"); removeBtn.className = "ann-remove"; removeBtn.innerHTML = "×"; removeBtn.title = t("tooltip_remove_annotation"); removeBtn.addEventListener("click", function () { removeAnnotation(eid); }); header.appendChild(removeBtn); item.appendChild(header); var textDiv = document.createElement("div"); textDiv.className = "ann-text"; textDiv.textContent = slideAnnotations[eid]; item.appendChild(textDiv); annotationsEl.appendChild(item); }); } // ================================================================ // 10. Save all -- two-step: confirm then save // ================================================================ btnSave.addEventListener("click", function () { pendingModalAction = "submit"; modalMessage.textContent = t("modal_confirm_submit") + (hasPendingMatrixEdits() ? t("modal_matrix_transform_note") : ""); modalConfirm.textContent = t("modal_submit"); modalConfirm.style.display = ""; modalCancel.style.display = ""; modalOverlay.style.display = "flex"; }); btnExitPreview.addEventListener("click", function () { pendingModalAction = "exit"; modalMessage.textContent = t("modal_confirm_exit"); modalConfirm.textContent = t("btn_exit_preview"); modalConfirm.style.display = ""; modalCancel.style.display = ""; modalOverlay.style.display = "flex"; }); modalConfirm.addEventListener("click", function () { if (pendingModalAction === "exit") { modalConfirm.style.display = "none"; modalCancel.style.display = "none"; modalMessage.textContent = t("modal_stopping"); fetch("/api/shutdown", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ reason: "exit-preview" }) }) .then(function () { modalMessage.textContent = t("modal_success_exit"); }) .catch(function () { modalMessage.textContent = t("modal_success_exit"); }); return; } // Step 2: save annotations. Service lifetime is controlled only by Exit preview. var hadDirectEdits = pendingDirectEditCount() > 0; var hadAnnotationChanges = pendingAnnotationChangeCount() > 0; modalConfirm.style.display = "none"; modalCancel.style.display = "none"; // Wait for any just-fired direct edits (drag/nudge) to land first, or // save-all could race ahead and leave their edits as a fresh pending set. drainDirectEdits() .then(function () { return fetch("/api/save-all", { method: "POST" }); }) .then(function (res) { return res.json(); }) .then(function (data) { if (data.error) { modalMessage.textContent = t("err_save") + data.error; } else { if (hadDirectEdits && hadAnnotationChanges) { modalMessage.textContent = t("modal_success_mixed"); } else if (hadDirectEdits) { modalMessage.textContent = t("modal_success_direct_only"); } else if (hadAnnotationChanges) { modalMessage.textContent = t("modal_success_annotations_only"); } else { modalMessage.textContent = t("modal_success_submit"); } editStackCount = {}; matrixEditSlides = {}; matrixHintShown = false; savedHintShown = false; annotationsDirty = false; annotationEditSlides = {}; updateUndoButton(); updatePendingStatus(); var activeSlide = currentSlide; loadSlides().then(function () { if (activeSlide) { var item = slideListEl.querySelector('.slide-item[data-name="' + cssAttr(activeSlide) + '"]'); selectSlide(activeSlide, item || undefined); } }); } }) .catch(function (err) { modalMessage.textContent = t("err_save") + err; modalConfirm.style.display = ""; modalCancel.style.display = ""; }); }); modalCancel.addEventListener("click", function () { modalConfirm.textContent = t("modal_submit"); modalOverlay.style.display = "none"; }); // Close modal on overlay click modalOverlay.addEventListener("click", function (e) { if (e.target === modalOverlay) { modalConfirm.textContent = t("modal_submit"); modalOverlay.style.display = "none"; } }); // ================================================================ // Utility // ================================================================ function sanitizeSvg(svgString) { var doc = new DOMParser().parseFromString(svgString, "image/svg+xml"); doc.querySelectorAll("script,foreignObject").forEach(function (el) { el.remove(); }); doc.querySelectorAll("*").forEach(function (el) { Array.from(el.attributes).forEach(function (attr) { if (attr.name.indexOf("on") === 0) el.removeAttribute(attr.name); // Strip dangerous URI protocols from href/xlink:href if (attr.localName === "href" && (/^\s*javascript\s*:/i.test(attr.value) || /^\s*data\s*:/i.test(attr.value))) { el.removeAttributeNode(attr); } }); }); return new XMLSerializer().serializeToString(doc.documentElement); } function showError(msg) { var banner = document.createElement("div"); banner.style.cssText = "position:fixed;top:0;left:0;right:0;padding:10px 16px;background:#ef4444;color:#fff;font-size:13px;text-align:center;z-index:999;cursor:pointer;"; banner.textContent = msg; banner.onclick = function () { banner.remove(); }; document.body.appendChild(banner); setTimeout(function () { banner.remove(); }, 5000); } function showWarning(msg) { // Amber, non-fatal counterpart to showError. Stacks below an existing // error banner because z-index is identical and DOM order wins. var banner = document.createElement("div"); banner.style.cssText = "position:fixed;top:38px;left:0;right:0;padding:8px 16px;background:#f59e0b;color:#1f1300;font-size:12px;text-align:center;z-index:998;cursor:pointer;"; banner.textContent = msg; banner.onclick = function () { banner.remove(); }; document.body.appendChild(banner); setTimeout(function () { banner.remove(); }, 6000); } function showReloadBanner(name) { // Singleton: replace any prior banner so we never stack reloads. hideReloadBanner(); var banner = document.createElement("div"); banner.id = "reload-banner"; banner.style.cssText = "position:fixed;top:0;left:0;right:0;padding:10px 16px;background:#2563eb;color:#fff;font-size:13px;text-align:center;z-index:1000;cursor:pointer;"; banner.textContent = t("reload_banner"); banner.onclick = function () { hideReloadBanner(); // Re-fetch via selectSlide so all post-load logic (annotation merge, // warnings, mtime update) runs the same way as a manual click. var item = slideListEl.querySelector('.slide-item[data-name="' + cssAttr(name) + '"]'); selectSlide(name, item || undefined); }; document.body.appendChild(banner); reloadBannerEl = banner; } function hideReloadBanner() { if (reloadBannerEl) { reloadBannerEl.remove(); reloadBannerEl = null; } } function escapeHtml(str) { var d = document.createElement("div"); d.appendChild(document.createTextNode(str)); return d.innerHTML; } function jsonOrThrow(res) { return res.json().then(function (data) { if (!res.ok || data.error) { throw new Error(data.error || ("Request failed with status " + res.status)); } return data; }); } function loadConfig() { return fetch("/api/config") .then(function (res) { return res.json(); }) .then(function (data) { liveMode = !!data.live; }) .catch(function () { liveMode = false; }); } function startSlidePolling() { if (!liveMode || slidePollTimer) return; slidePollTimer = window.setInterval(function () { loadSlides(); }, 2000); } // ---- Direct-edit undo + save hint -------------------------------- function updateUndoButton() { if (!btnUndo) return; var n = (currentSlide && editStackCount[currentSlide]) || 0; btnUndo.disabled = n === 0; btnUndo.textContent = n > 0 ? (t("btn_undo") + " (" + n + ")") : t("btn_undo"); } function runUndo() { if (!currentSlide || !editStackCount[currentSlide]) return; fetch("/api/slide/" + encodeURIComponent(currentSlide) + "/undo", { method: "POST" }) .then(jsonOrThrow) .then(function (data) { if (data.status === "empty") { editStackCount[currentSlide] = 0; matrixEditSlides[currentSlide] = false; updateUndoButton(); updatePendingStatus(); showWarning(t("undo_empty")); return; } if (data.mtime !== undefined && data.mtime !== null) { slideMtimes[currentSlide] = data.mtime; } // Reload the page so the canvas reflects the reverted SVG; // selectSlide refreshes editStackCount + the undo button. var item = slideListEl.querySelector('.slide-item[data-name="' + cssAttr(currentSlide) + '"]'); selectSlide(currentSlide, item || undefined); updatePendingStatus(); showWarning(t("undo_done")); }) .catch(function (err) { showError(t("err_edit") + err.message); }); } function maybeShowSavedHint() { if (savedHintShown) return; savedHintShown = true; showWarning(t("edit_saved_hint")); } function payloadHasMatrixTransform(payload) { var transform = payload && payload.attrs && payload.attrs.transform; return typeof transform === "string" && /^\s*matrix\s*\(/i.test(transform); } function hasPendingMatrixEdits() { return Object.keys(matrixEditSlides).some(function (name) { return !!matrixEditSlides[name]; }); } function markMatrixTransformEdit(slide) { matrixEditSlides[slide] = true; if (matrixHintShown) return; matrixHintShown = true; showWarning(t("warn_matrix_transform")); } // ================================================================ // Property extraction & rendering // ================================================================ // Editable property panel for a single selected element: computed geometry, // text content where safe, and the element's own SVG attributes. function renderEditableProps(el) { var tag = localName(el); var isGroup = tag === "g"; var html = '

' + escapeHtml(isGroup ? t("label_group_edit") : t("label_direct_edit")) + '

'; var parentGroup = nearestParentGroup(el); if (parentGroup && !isGroup) { html += '

group

' + '

'; } html += '

' + escapeHtml(t("section_geometry")) + '

'; html += ''; // Geometry: position + size in render coords — editable, folded into // the element's transform matrix on commit (works for any element type). try { var rb = computeRenderBox(el); html += ''; html += ''; } catch (e) { /* no geometry */ } html += '

position	' + '' + '' + '
size	' + '' + '' + '

'; var textStyleTargets = textStyleTargetsForSelection(el); // L1: text content + computed text styles. When a textbox/group is // selected, style controls target its descendant text leaves. if (tag === "text" || tag === "tspan" || textStyleTargets.length > 0) { html += '

' + escapeHtml(t("section_text_style")) + '

'; html += ''; if ((tag === "text" || tag === "tspan") && el.querySelector("tspan")) { html += ''; } else if (tag === "text" || tag === "tspan") { html += ''; } if (textStyleTargets.length > 0) { textStyleSpecs(textStyleTargets).forEach(function (spec) { html += ''; }); } html += '

content	' + escapeHtml(t("prop_multiline_hint")) + '
content	' + '' + escapeHtml(el.textContent \|\| "") + '
' + escapeHtml(spec.key) + '	'; html += renderTextStyleControl(spec, textStyleTargets); html += '

'; } html += '

' + escapeHtml(t("section_raw_attrs")) + '

'; html += ''; ownAttributeSpecs(el).forEach(function (spec) { html += ''; }); html += '

' + escapeHtml(spec.key) + '

'; if (!spec.editable) { html += '' + escapeHtml(spec.value) + ''; } else { html += renderAttributeControl(spec); } html += '

'; return html; } function nearestParentGroup(el) { var node = el ? el.parentElement : null; while (node && node !== svgContent) { if (node.tagName && localName(node) === "g" && node.id) return node; node = node.parentElement; } return null; } function ownAttributeSpecs(el) { var specs = []; Array.from(el.attributes).forEach(function (attr) { var key = attr.name; if (key === "class" || key === "data-edit-target" || key === "data-edit-annotation") return; specs.push({ key: key, value: attr.value, editable: isEditableAttributeName(key) }); }); return specs; } function isEditableAttributeName(key) { var k = String(key).toLowerCase(); if (k === "id" || k === "class" || k === "href" || k === "xlink:href") return false; if (k.indexOf("on") === 0) return false; return /^[A-Za-z_][A-Za-z0-9_.:-]*$/.test(key); } function textStyleTargetsForSelection(el) { if (!el) return []; var tag = localName(el); if (tag === "tspan") return el.id ? [el] : []; if (tag === "text") return textStyleLeavesForText(el); var targets = []; el.querySelectorAll("text").forEach(function (textEl) { targets = targets.concat(textStyleLeavesForText(textEl)); }); return uniqueElements(targets); } function textStyleLeavesForText(textEl) { var tspans = Array.from(textEl.querySelectorAll("tspan")).filter(function (tspan) { return !!tspan.id; }); if (tspans.length > 0) return tspans; return textEl.id ? [textEl] : []; } function uniqueElements(elements) { var seen = new Set(); return elements.filter(function (el) { if (!el || !el.id || seen.has(el.id)) return false; seen.add(el.id); return true; }); } function textStyleSpecs(targets) { return [ { key: "fill", type: "color" }, { key: "font-size", type: "text" }, { key: "font-family", type: "text" }, { key: "font-weight", type: "select", options: ["", "normal", "bold", "300", "400", "500", "600", "700", "800"] }, { key: "text-anchor", type: "select", options: ["", "start", "middle", "end"] } ].map(function (spec) { var value = commonAttrValue(targets, spec.key); var copy = Object.assign({}, spec); copy.value = value === null ? "" : value; copy.mixed = value === null; return copy; }); } function renderTextStyleControl(spec, targets) { var targetIds = encodeURIComponent(JSON.stringify(targets.map(function (el) { return el.id; }))); var placeholder = spec.mixed ? t("multi_mixed") : ""; if (spec.type === "color") { return '' + ''; } if (spec.type === "select") { var html = ''; return html; } return ''; } function isColorAttribute(key, value) { var k = String(key).toLowerCase(); if (["fill", "stroke", "color", "stop-color", "flood-color", "lighting-color"].indexOf(k) !== -1) { return isSafeColor(value); } return false; } function renderAttributeControl(spec) { if (isColorAttribute(spec.key, spec.value)) { return '' + ''; } if (spec.value.length > 60 || spec.key === "d" || spec.key === "points" || spec.key === "style") { return ''; } return ''; } // ---- Geometry (position/size) helpers ---------------------------- // Edits fold into the element's own transform matrix so they apply // uniformly regardless of how the element is positioned (x/y, cx/cy, d…). function computeRenderBox(el) { // Local geometry bbox (excludes the element's OWN transform) ... var bbox = el.getBBox(); // ... times the element CTM (includes own + ancestor transforms) = // the on-screen box in the svg root user space (= svg_output coords). var ctm = el.getCTM(); if (!ctm) return { x: bbox.x, y: bbox.y, w: bbox.width, h: bbox.height }; var corners = [ { x: bbox.x, y: bbox.y }, { x: bbox.x + bbox.width, y: bbox.y }, { x: bbox.x, y: bbox.y + bbox.height }, { x: bbox.x + bbox.width, y: bbox.y + bbox.height } ]; var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; corners.forEach(function (p) { var sx = p.x * ctm.a + p.y * ctm.c + ctm.e; var sy = p.x * ctm.b + p.y * ctm.d + ctm.f; minX = Math.min(minX, sx); minY = Math.min(minY, sy); maxX = Math.max(maxX, sx); maxY = Math.max(maxY, sy); }); return { x: minX, y: minY, w: maxX - minX, h: maxY - minY }; } function ownMatrix(el) { var t = el.transform && el.transform.baseVal; if (t && t.numberOfItems) { var c = t.consolidate(); if (c) { var m = c.matrix; return new DOMMatrix([m.a, m.b, m.c, m.d, m.e, m.f]); } } return new DOMMatrix(); } function parentCTM(el) { // parent → svg-root user space; identity when parent is the outer

' + escapeHtml(t("label_batch_edit")) + '

'; if (moveEls.length > 0) { try { var rb = computeElementsBox(moveEls); summary += '

' + escapeHtml(t("section_geometry")) + '

'; summary += '' + '

x / y

' + '' + '' + '

'; } catch (e) { /* no multi geometry */ } } summary += '

' + escapeHtml(t("section_style")) + '

'; summary += ''; batchEditSpecs(moveEls).forEach(function (spec) { summary += ''; }); summary += '

' + escapeHtml(spec.key) + '

'; summary += renderBatchControl(spec); summary += '

'; return summary; } function batchEditSpecs(elements) { var keys = [ { key: "fill", type: "color" }, { key: "stroke", type: "color" }, { key: "opacity", type: "number", min: "0", max: "1", step: "0.05" } ]; if (elements.length > 0 && elements.every(isTextElement)) { keys = keys.concat([ { key: "font-size", type: "text" }, { key: "font-family", type: "text" }, { key: "font-weight", type: "select", options: ["", "normal", "bold", "300", "400", "500", "600", "700", "800"] }, { key: "text-anchor", type: "select", options: ["", "start", "middle", "end"] } ]); } return keys.map(function (spec) { var value = commonAttrValue(elements, spec.key); var copy = Object.assign({}, spec); copy.value = value === null ? "" : value; copy.mixed = value === null; return copy; }); } function isTextElement(el) { var tag = el.tagName.toLowerCase(); return tag === "text" || tag === "tspan"; } function commonAttrValue(elements, key) { if (elements.length === 0) return ""; var first = attrOrComputedValue(elements[0], key); for (var i = 1; i < elements.length; i++) { if (attrOrComputedValue(elements[i], key) !== first) return null; } return first; } function attrOrComputedValue(el, key) { var value = el.getAttribute(key); if (value !== null && value !== "") return normalizeSvgLengthValue(key, value); var style = window.getComputedStyle(el); var map = { "fill": "fill", "stroke": "stroke", "opacity": "opacity", "font-size": "fontSize", "font-family": "fontFamily", "font-weight": "fontWeight", "text-anchor": "textAnchor" }; return normalizeSvgLengthValue(key, (map[key] && style[map[key]]) || ""); } function renderBatchControl(spec) { var placeholder = spec.mixed ? t("multi_mixed") : ""; if (spec.type === "color") { return '' + ''; } if (spec.type === "number") { return ''; } if (spec.type === "select") { var html = ''; return html; } return ''; } function attachMultiSelectionEditors(ids) { var panel = elementPropsEl; var moveEls = topLevelSelectedElements(ids); if (moveEls.length === 0) return; var readGeo = function (k) { var inp = panel.querySelector('.prop-edit-multi-geo[data-geo="' + k + '"]'); return inp ? parseFloat(inp.value) : NaN; }; var commitMove = function () { var rb; try { rb = computeElementsBox(moveEls); } catch (e) { return; } var nx = readGeo("x"), ny = readGeo("y"); if (isNaN(nx) || isNaN(ny)) return; var dx = nx - rb.x, dy = ny - rb.y; if (Math.abs(dx) < 1e-6 && Math.abs(dy) < 1e-6) return; var jobs = []; moveEls.forEach(function (el) { var attrs; try { attrs = attrsForMove(el, dx, dy); } catch (e) { attrs = null; } if (!attrs) return; var payload = payloadForMovedElement(el, attrs); jobs.push(stageEditRequest(el.id, payload).then(function () { if (payload.promote_tspan) promoteTspanDom(el, payload.promote_tspan); else { applyElementAttrs(el, attrs); markCommittedAttrs(el, attrs); } })); }); Promise.all(jobs) .then(function () { updateSelectionPanel(); }) .catch(function (err) { showError(t("err_edit") + err.message); }); }; panel.querySelectorAll(".prop-edit-multi-geo").forEach(function (inp) { inp.addEventListener("change", commitMove); }); panel.querySelectorAll(".prop-edit-batch-color").forEach(function (picker) { var key = picker.getAttribute("data-key"); var text = panel.querySelector('.prop-edit-batch[data-key="' + key + '"]'); picker.addEventListener("input", function () { if (text) text.value = picker.value; }); picker.addEventListener("change", function () { if (text) text.value = picker.value; commitBatchAttr(key, picker.value, moveEls); }); }); panel.querySelectorAll(".prop-edit-batch").forEach(function (input) { input.addEventListener("change", function () { var key = input.getAttribute("data-key"); var value = normalizeEditableAttrValue(key, input.value); if (!value) return; commitBatchAttr(key, value, moveEls); }); }); } function commitBatchAttr(key, value, elements) { value = normalizeEditableAttrValue(key, value); if ((key === "fill" || key === "stroke") && !isSafeColor(value)) { showError(t("err_edit") + key); return; } var jobs = elements.map(function (el) { var attrs = {}; attrs[key] = value; return stageEditRequest(el.id, { attrs: attrs }).then(function () { applyElementAttrs(el, attrs); }); }); Promise.all(jobs) .then(function () { updateSelectionPanel(); }) .catch(function (err) { showError(t("err_edit") + err.message); }); } // ================================================================ // Boot // ================================================================ applyI18n(); initAnnotationQuickActions(); updatePendingStatus(); var langToggleBtn = document.getElementById("btn-lang-toggle"); var langMenu = document.getElementById("lang-menu"); if (langToggleBtn && langMenu) { refreshLangUI(LANG); var setMenuOpen = function (open) { langMenu.hidden = !open; langToggleBtn.setAttribute("aria-expanded", open ? "true" : "false"); if (open) { var sel = langMenu.querySelector("li.selected") || langMenu.querySelector("li[data-lang]"); if (sel) sel.focus(); } }; var chooseLang = function (v) { setMenuOpen(false); langToggleBtn.focus(); if (v) setLang(v); }; langToggleBtn.addEventListener("click", function (e) { e.stopPropagation(); setMenuOpen(langMenu.hidden); }); langToggleBtn.addEventListener("keydown", function (e) { if (e.key === "Escape" && !langMenu.hidden) { e.stopPropagation(); setMenuOpen(false); } else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && langMenu.hidden) { e.preventDefault(); e.stopPropagation(); setMenuOpen(true); } }); langMenu.addEventListener("click", function (e) { e.stopPropagation(); var li = e.target && e.target.closest ? e.target.closest("li[data-lang]") : null; if (li) chooseLang(li.getAttribute("data-lang")); else setMenuOpen(false); }); langMenu.addEventListener("keydown", function (e) { e.stopPropagation(); // keep nudge / slide-nav shortcuts away while the menu is open var items = Array.prototype.slice.call(langMenu.querySelectorAll("li[data-lang]")); var idx = items.indexOf(document.activeElement); if (e.key === "Escape") { setMenuOpen(false); langToggleBtn.focus(); } else if (e.key === "ArrowDown") { e.preventDefault(); (items[idx + 1] || items[0]).focus(); } else if (e.key === "ArrowUp") { e.preventDefault(); (items[idx - 1] || items[items.length - 1]).focus(); } else if (e.key === "Home") { e.preventDefault(); items[0].focus(); } else if (e.key === "End") { e.preventDefault(); items[items.length - 1].focus(); } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); } else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (idx >= 0) chooseLang(items[idx].getAttribute("data-lang")); } }); langToggleBtn.parentElement.addEventListener("focusout", function (e) { if (!langMenu.hidden && !langToggleBtn.parentElement.contains(e.relatedTarget)) setMenuOpen(false); }); document.addEventListener("click", function () { if (!langMenu.hidden) setMenuOpen(false); }); } loadConfig().then(function () { loadSlides(); startSlidePolling(); }); initRubberBand(); initKeyboardShortcuts(); initSlideNav(); if (btnUndo) btnUndo.addEventListener("click", runUndo); })();