frontend/latex/output: split auto sync into forward/inverse buttons to control both directions

Author: haraldschilly

src/packages/frontend/components/icon.tsx

@@ -192,7 +192,9 @@ import {
   StopFilled,
   StopOutlined,
   StrikethroughOutlined,
+  SwapLeftOutlined,
   SwapOutlined,
+  SwapRightOutlined,
   SyncOutlined,
   TableOutlined,
   TagFilled,
@@ -599,6 +601,8 @@ const IconSpec = {
   ungroup: { IconFont: "ungroup" },
   "signature-outlined": SignatureOutlined,
   swap: SwapOutlined,
+  "sync-left": SwapLeftOutlined,
+  "sync-right": SwapRightOutlined,
   unlink: { IconFont: "unlink" },
   upload: UploadOutlined,
   user: UserOutlined,

src/packages/frontend/frame-editors/latex-editor/actions.ts

@@ -1413,20 +1413,20 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
   }
 
-  // Check if auto-sync is enabled for any output panel
-  private is_auto_sync_enabled(): boolean {
+  // Check if forward auto-sync (CM → PDF) is enabled for any output panel
+  private is_auto_sync_forward_enabled(): boolean {
     const local_view_state = this.store.get("local_view_state");
     if (!local_view_state) return false;
 
-    // Check all output panels for auto-sync enabled
+    // Check all output panels for forward auto-sync enabled
     for (const [key, value] of local_view_state.entrySeq()) {
       // Only check output panels
       if (this._is_output_panel(key) && value) {
-        const autoSyncEnabled =
+        const autoSyncForward =
           typeof value.get === "function"
-            ? value.get("autoSyncEnabled")
-            : value.autoSyncEnabled;
-        if (autoSyncEnabled) {
+            ? value.get("autoSyncForward")
+            : value.autoSyncForward;
+        if (autoSyncForward) {
           return true;
         }
       }
@@ -1446,7 +1446,7 @@ export class Actions extends BaseActions<LatexEditorState> {
 
   // Handle cursor movement - called by BaseActions.set_cursor_locs
   public handle_cursor_move(locs: any[]): void {
-    if (!this.is_auto_sync_enabled() || locs.length === 0) return;
+    if (!this.is_auto_sync_forward_enabled() || locs.length === 0) return;
 
     // Prevent duplicate sync operations
     if (this.is_auto_sync_in_progress()) return;

src/packages/frontend/frame-editors/latex-editor/output-control-pages.tsx

@@ -15,6 +15,9 @@ import { COLORS } from "@cocalc/util/theme";
 
 import { Actions } from "./actions";
 
+// Tweak it in such a way, that it looks consistent with ./*-sync.tsx left/right arrows
+const CONTROL_BUTTON_PADDING = "0 14px";
+
 const CONTROL_PAGE_STYLE = {
   display: "flex",
   alignItems: "center",
@@ -100,6 +103,7 @@ export function PageNavigationControls({
             icon={<Icon name="arrow-up" />}
             onClick={() => flipPage(-1)}
             disabled={currentPage <= 1}
+            style={{ padding: CONTROL_BUTTON_PADDING }}
           />
         </Tip>
 
@@ -109,6 +113,7 @@ export function PageNavigationControls({
             icon={<Icon name="arrow-down" />}
             onClick={() => flipPage(1)}
             disabled={currentPage >= totalPages}
+            style={{ padding: CONTROL_BUTTON_PADDING }}
           />
         </Tip>
       </Space.Compact>

src/packages/frontend/frame-editors/latex-editor/output-control-sync.tsx

@@ -5,28 +5,44 @@
 
 /*
 Sync Controls Component for LaTeX Editor Output Panel
-Provides auto-sync toggle and manual sync functionality between source and PDF
+Provides auto-sync toggle buttons for bidirectional sync between source and PDF
 */
 
-import { Button, Switch } from "antd";
+import { Space } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { defineMessage, useIntl } from "react-intl";
 
+import { Button as BSButton } from "@cocalc/frontend/antd-bootstrap";
 import { useRedux } from "@cocalc/frontend/app-framework";
 import { HelpIcon, Icon, Tip } from "@cocalc/frontend/components";
-import { labels } from "@cocalc/frontend/i18n";
 
 import { Actions } from "./actions";
 
-export const AUTO_SYNC_TOOLTIP_MSG = defineMessage({
-  id: "editor.latex.pdf_controls.auto_sync.tooltip",
+// Tweak it in such a way, that it looks consistent with ./*-pages.tsx up/down arrows
+const CONTROL_BUTTON_PADDING = "0 8px";
+
+const FORWARD_SYNC_TOOLTIP_MSG = defineMessage({
+  id: "editor.latex.pdf_controls.forward_sync.tooltip",
+  defaultMessage: "Auto-sync from source to PDF: cursor moves scroll the PDF",
+  description:
+    "Tooltip explaining forward auto-sync (CM → PDF) in LaTeX PDF controls",
+});
+
+const INVERSE_SYNC_TOOLTIP_MSG = defineMessage({
+  id: "editor.latex.pdf_controls.inverse_sync.tooltip",
   defaultMessage:
-    "Auto-sync between source and PDF: cursor moves follow PDF scrolling, PDF scrolls to cursor position",
+    "Auto-sync from PDF to source: PDF scrolling moves the cursor",
   description:
-    "Tooltip explaining bidirectional auto-sync functionality in LaTeX PDF controls",
+    "Tooltip explaining inverse auto-sync (PDF → CM) in LaTeX PDF controls",
 });
 
-export const SYNC_HELP_MSG = {
+const SYNC_BUTTON_TOOLTIP_MSG = defineMessage({
+  id: "editor.latex.pdf_controls.sync_button.tooltip",
+  defaultMessage: "One-time inverse sync to the source editor",
+  description: "Tooltip for manual sync button in LaTeX PDF controls",
+});
+
+const SYNC_HELP_MSG = {
   title: defineMessage({
     id: "editor.latex.pdf_controls.sync_help.title",
     defaultMessage: "LaTeX Sync Help",
@@ -37,12 +53,12 @@ export const SYNC_HELP_MSG = {
     defaultMessage: `<p><strong>Manual Mode:</strong></p>
 <ul>
   <li>Use ALT+Return in source document to jump to corresponding PDF location</li>
-  <li>Double-click in PDF for inverse search to source</li>
+  <li>Double-click in PDF or the "Sync" button for inverse search to source</li>
 </ul>
 <p><strong>Automatic Mode:</strong></p>
 <ul>
-  <li>Syncs automatically from cursor changes in source to PDF</li>
-  <li>Moving the PDF viewport moves the cursor in source</li>
+  <li>Forward Sync (→): Syncs automatically from cursor changes in source to PDF</li>
+  <li>Inverse Sync (←): Moving the PDF viewport moves the cursor in source</li>
 </ul>
 <p>This functionality uses SyncTeX to coordinate between LaTeX source and PDF output.</p>`,
     description:
@@ -76,13 +92,17 @@ export function SyncControls({
   const intl = useIntl();
 
   // Auto-sync state (stored in local view state)
-  const storedAutoSyncEnabled =
-    useRedux([actions.name, "local_view_state", id, "autoSyncEnabled"]) ??
-    false; // Default to false
+  const storedAutoSyncForward =
+    useRedux([actions.name, "local_view_state", id, "autoSyncForward"]) ??
+    false;
 
-  const [localAutoSyncEnabled, setLocalAutoSyncEnabled] = useState(
-    storedAutoSyncEnabled,
-  );
+  const storedAutoSyncInverse =
+    useRedux([actions.name, "local_view_state", id, "autoSyncInverse"]) ??
+    false;
+
+  const [autoSyncForward, setAutoSyncForward] = useState(storedAutoSyncForward);
+
+  const [autoSyncInverse, setAutoSyncInverse] = useState(storedAutoSyncInverse);
 
   // Check if auto sync is in progress
   const autoSyncInProgress =
@@ -126,53 +146,73 @@ export function SyncControls({
 
   // Sync state with stored values when they change
   useEffect(() => {
-    setLocalAutoSyncEnabled(storedAutoSyncEnabled);
-  }, [storedAutoSyncEnabled]);
+    setAutoSyncForward(storedAutoSyncForward);
+  }, [storedAutoSyncForward]);
+
+  useEffect(() => {
+    setAutoSyncInverse(storedAutoSyncInverse);
+  }, [storedAutoSyncInverse]);
 
-  // Auto-sync effect when viewport changes and auto-sync is enabled
+  // Auto-sync effect when viewport changes and inverse auto-sync is enabled
   useEffect(() => {
-    if (localAutoSyncEnabled && viewportInfo && !autoSyncInProgress) {
+    if (autoSyncInverse && viewportInfo && !autoSyncInProgress) {
       handleViewportSync(viewportInfo.page, viewportInfo.x, viewportInfo.y);
     }
-  }, [
-    localAutoSyncEnabled,
-    viewportInfo,
-    autoSyncInProgress,
-    handleViewportSync,
-  ]);
-
-  const handleAutoSyncChange = (enabled: boolean) => {
-    setLocalAutoSyncEnabled(enabled);
-    // Save to local view state for persistence
+  }, [autoSyncInverse, viewportInfo, autoSyncInProgress, handleViewportSync]);
+
+  function handleAutoSyncChange(type: "autoSyncForward" | "autoSyncInverse") {
+    const forward = type === "autoSyncForward";
+    const enabled = !(forward ? autoSyncForward : autoSyncInverse);
+    (forward ? setAutoSyncForward : setAutoSyncInverse)(enabled);
     const local_view_state = actions.store.get("local_view_state");
     actions.setState({
-      local_view_state: local_view_state.setIn(
-        [id, "autoSyncEnabled"],
-        enabled,
-      ),
+      local_view_state: local_view_state.setIn([id, type], enabled),
     });
-  };
+  }
 
   return (
     <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
-      {!narrow && <Icon name="exchange" />}
-      <Tip title={intl.formatMessage(AUTO_SYNC_TOOLTIP_MSG)} placement="top">
-        <Switch
-          checked={localAutoSyncEnabled}
-          onChange={handleAutoSyncChange}
-          checkedChildren={intl.formatMessage(labels.on)}
-          unCheckedChildren={intl.formatMessage(labels.off)}
-        />
-      </Tip>
-      <Button
-        type="text"
-        size="small"
-        style={{ fontSize: "13px", padding: "0 4px", height: "auto" }}
-        onClick={handleManualSync}
-        disabled={pageDimensions.length === 0}
-      >
-        Sync
-      </Button>
+      <Space.Compact>
+        <Tip
+          title={intl.formatMessage(INVERSE_SYNC_TOOLTIP_MSG)}
+          placement="top"
+        >
+          <BSButton
+            active={autoSyncInverse}
+            bsSize="xsmall"
+            onClick={() => handleAutoSyncChange("autoSyncInverse")}
+            style={{ padding: CONTROL_BUTTON_PADDING }}
+          >
+            <Icon name="sync-left" />
+          </BSButton>
+        </Tip>
+        <Tip
+          title={intl.formatMessage(FORWARD_SYNC_TOOLTIP_MSG)}
+          placement="top"
+        >
+          <BSButton
+            active={autoSyncForward}
+            bsSize="xsmall"
+            onClick={() => handleAutoSyncChange("autoSyncForward")}
+            style={{ padding: CONTROL_BUTTON_PADDING }}
+          >
+            <Icon name="sync-left" rotate="180" />
+          </BSButton>
+        </Tip>
+        <Tip
+          title={intl.formatMessage(SYNC_BUTTON_TOOLTIP_MSG)}
+          placement="top"
+        >
+          <BSButton
+            bsSize="xsmall"
+            style={{ padding: CONTROL_BUTTON_PADDING }}
+            onClick={handleManualSync}
+            disabled={pageDimensions.length === 0}
+          >
+            Sync
+          </BSButton>
+        </Tip>
+      </Space.Compact>
       {!narrow && (
         <HelpIcon
           title={intl.formatMessage(SYNC_HELP_MSG.title)}

src/packages/frontend/frame-editors/latex-editor/util.ts

@@ -10,8 +10,8 @@ import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { ExecOptsBlocking } from "@cocalc/util/db-schema/projects";
 import { separate_file_extension } from "@cocalc/util/misc";
 import { ExecuteCodeOutputAsync } from "@cocalc/util/types/execute-code";
-import { TIMEOUT_LATEX_JOB_S } from "./constants";
 import { TITLE_BAR_BORDER } from "../frame-tree/style";
+import { TIMEOUT_LATEX_JOB_S } from "./constants";
 
 export const OUTPUT_HEADER_STYLE = {
   display: "flex",

src/packages/frontend/i18n/trans/ar_EG.json

@@ -592,7 +592,10 @@
   "editor.latex.command.print.label": "طباعة مصدر LaTeX",
   "editor.latex.command.print.tooltip": "اطبع الشيفرة المصدرية لهذا المستند. استخدم الطباعة من إطار معاينة PDF لطباعة المستند المُعرض.",
   "editor.latex.pdf_controls.auto_sync.tooltip": "المزامنة التلقائية بين المصدر وPDF: يتحرك المؤشر مع تمرير PDF، يتم تمرير PDF إلى موضع المؤشر",
-  "editor.latex.pdf_controls.sync_help.content": "<p><strong>الوضع اليدوي:</strong></p> <ul> <li>استخدم ALT+Return في المستند المصدر للقفز إلى الموقع المقابل في PDF</li> <li>انقر نقرًا مزدوجًا في PDF للبحث العكسي إلى المصدر</li> </ul> <p><strong>الوضع التلقائي:</strong></p> <ul> <li>يقوم بالمزامنة تلقائيًا من تغييرات المؤشر في المصدر إلى PDF</li> <li>تحريك نافذة عرض PDF يحرك المؤشر في المصدر</li> </ul> <p>تستخدم هذه الوظيفة SyncTeX للتنسيق بين مصدر LaTeX وإخراج PDF.</p>",
+  "editor.latex.pdf_controls.forward_sync.tooltip": "المزامنة التلقائية من المصدر إلى PDF: تحريك المؤشر يحرك ملف PDF",
+  "editor.latex.pdf_controls.inverse_sync.tooltip": "المزامنة التلقائية من PDF إلى المصدر: تحريك التمرير في PDF يحرك المؤشر",
+  "editor.latex.pdf_controls.sync_button.tooltip": "مزامنة عكسية لمرة واحدة إلى محرر المصدر",
+  "editor.latex.pdf_controls.sync_help.content": "<p><strong>الوضع اليدوي:</strong></p> <ul> <li>استخدم ALT+Return في المستند المصدر للقفز إلى الموقع المقابل في PDF</li> <li>انقر نقرًا مزدوجًا في PDF أو على زر \"المزامنة\" للبحث العكسي في المصدر</li> </ul> <p><strong>الوضع التلقائي:</strong></p> <ul> <li>المزامنة الأمامية (→): تقوم بالمزامنة تلقائيًا من تغييرات المؤشر في المصدر إلى PDF</li> <li>المزامنة العكسية (←): تحريك عرض PDF يحرك المؤشر في المصدر</li> </ul> <p>تستخدم هذه الوظيفة SyncTeX للتنسيق بين مصدر LaTeX ومخرجات PDF.</p>",
   "editor.latex.pdf_controls.sync_help.title": "مساعدة مزامنة LaTeX",
   "editor.latex.pdf_embed.title": "PDF - أصلي",
   "editor.latex.pdf_embed.title.short": "PDF (native)",

src/packages/frontend/i18n/trans/de_DE.json

@@ -592,7 +592,10 @@
   "editor.latex.command.print.label": "LaTeX-Code drucken",
   "editor.latex.command.print.tooltip": "Drucken Sie den Quellcode dieses Dokuments. Verwenden Sie Drucken aus dem PDF-Vorschau-Fenster, um das gerenderte Dokument zu drucken.",
   "editor.latex.pdf_controls.auto_sync.tooltip": "Automatische Synchronisation zwischen Quelle und PDF: Der Cursor bewegt sich beim Scrollen im PDF, das PDF scrollt zur Cursorposition",
-  "editor.latex.pdf_controls.sync_help.content": "<p><strong>Manueller Modus:</strong></p> <ul> <li>Verwenden Sie ALT+Return im Quelldokument, um zur entsprechenden PDF-Position zu springen</li> <li>Doppelklicken Sie im PDF für die inverse Suche zur Quelle</li> </ul> <p><strong>Automatischer Modus:</strong></p> <ul> <li>Synchronisiert automatisch von Cursoränderungen in der Quelle zum PDF</li> <li>Das Verschieben des PDF-Viewports bewegt den Cursor in der Quelle</li> </ul> <p>Diese Funktionalität verwendet SyncTeX, um zwischen LaTeX-Quelle und PDF-Ausgabe zu koordinieren.</p>",
+  "editor.latex.pdf_controls.forward_sync.tooltip": "Automatische Synchronisierung vom Quelltext zum PDF: Cursorbewegungen scrollen das PDF",
+  "editor.latex.pdf_controls.inverse_sync.tooltip": "Automatische Synchronisierung von PDF zur Quelle: PDF-Scrollen bewegt den Cursor",
+  "editor.latex.pdf_controls.sync_button.tooltip": "Einmalige inverse Synchronisation mit dem Quell-Editor",
+  "editor.latex.pdf_controls.sync_help.content": "<p><strong>Manueller Modus:</strong></p> <ul> <li>Verwenden Sie ALT+Return im Quelldokument, um zur entsprechenden PDF-Position zu springen</li> <li>Doppelklicken Sie im PDF oder auf die Schaltfläche \"Sync\" für die inverse Suche zur Quelle</li> </ul> <p><strong>Automatischer Modus:</strong></p> <ul> <li>Vorwärtssynchronisierung (→): Synchronisiert automatisch von Cursoränderungen in der Quelle zum PDF</li> <li>Inverse Synchronisierung (←): Verschieben des PDF-Ansichtsbereichs verschiebt den Cursor in der Quelle</li> </ul> <p>Diese Funktionalität verwendet SyncTeX, um zwischen LaTeX-Quelle und PDF-Ausgabe zu koordinieren.</p>",
   "editor.latex.pdf_controls.sync_help.title": "LaTeX-Synchronisierungshilfe",
   "editor.latex.pdf_embed.title": "PDF - Native",
   "editor.latex.pdf_embed.title.short": "PDF (nativ)",

src/packages/frontend/i18n/trans/es_ES.json

@@ -592,7 +592,10 @@
   "editor.latex.command.print.label": "Imprimir fuente LaTeX",
   "editor.latex.command.print.tooltip": "Imprime el código fuente de este documento. Usa Imprimir desde el marco de Vista previa de PDF para imprimir el documento renderizado.",
   "editor.latex.pdf_controls.auto_sync.tooltip": "Auto-sincronización entre la fuente y el PDF: el movimiento del cursor sigue el desplazamiento del PDF, el PDF se desplaza a la posición del cursor",
-  "editor.latex.pdf_controls.sync_help.content": "<p><strong>Modo Manual:</strong></p> <ul> <li>Usa ALT+Return en el documento fuente para saltar a la ubicación correspondiente en el PDF</li> <li>Haz doble clic en el PDF para realizar una búsqueda inversa hacia la fuente</li> </ul> <p><strong>Modo Automático:</strong></p> <ul> <li>Se sincroniza automáticamente desde los cambios de cursor en la fuente al PDF</li> <li>Mover la vista del PDF mueve el cursor en la fuente</li> </ul> <p>Esta funcionalidad utiliza SyncTeX para coordinar entre la fuente LaTeX y la salida en PDF.</p>",
+  "editor.latex.pdf_controls.forward_sync.tooltip": "Auto-sincronización de fuente a PDF: el cursor mueve el desplazamiento del PDF",
+  "editor.latex.pdf_controls.inverse_sync.tooltip": "Sincronización automática de PDF a fuente: el desplazamiento del PDF mueve el cursor",
+  "editor.latex.pdf_controls.sync_button.tooltip": "Sincronización inversa única con el editor de origen",
+  "editor.latex.pdf_controls.sync_help.content": "<p><strong>Modo Manual:</strong></p> <ul> <li>Usa ALT+Return en el documento fuente para saltar a la ubicación correspondiente en el PDF</li> <li>Haz doble clic en el PDF o en el botón \"Sincronizar\" para buscar inversamente en la fuente</li> </ul> <p><strong>Modo Automático:</strong></p> <ul> <li>Sincronización directa (→): Sincroniza automáticamente los cambios de cursor en la fuente al PDF</li> <li>Sincronización inversa (←): Mover la vista del PDF mueve el cursor en la fuente</li> </ul> <p>Esta funcionalidad utiliza SyncTeX para coordinar entre la fuente LaTeX y la salida PDF.</p>",
   "editor.latex.pdf_controls.sync_help.title": "Ayuda de sincronización de LaTeX",
   "editor.latex.pdf_embed.title": "PDF - Nativo",
   "editor.latex.pdf_embed.title.short": "PDF (nativo)",