Adding loading screen for rendering LaTeX formula when threaded setting is enabled.

common/src/history/common.mjs

@@ -95,11 +95,15 @@ export class Action {
         if(!Latex.enabled)
             throw new Error("Cannot render an item as LaTeX when LaTeX is disabled.")
         const imgDepth = History.imageDepth
-        const { source, width, height } = await Latex.requestAsyncRender(
+        const renderArguments = [
             latexString,
             imgDepth * (History.fontSize + 2),
             History.themeTextColor
-        )
+        ]
+        let render = Latex.findPrerendered(...renderArguments)
+        if(render === null)
+            render = await Latex.requestAsyncRender(...renderArguments)
+        const { source, width, height } = render
         return `<img src="${source}" width="${width / imgDepth}" height="${height / imgDepth}" style="vertical-align: middle"/>`
     }
 

common/src/module/canvas.mjs

@@ -25,7 +25,10 @@ import Objects from "./objects.mjs"
 import History from "./history.mjs"
 import Settings from "./settings.mjs"
 
+
 class CanvasAPI extends Module {
+    
+    
     /** @type {CanvasInterface} */
     #canvas = null
     /** @type {CanvasRenderingContext2D} */

common/src/module/latex.mjs

@@ -17,6 +17,7 @@
  */
 
 import { Module } from "./common.mjs"
+import { BaseEvent } from "../events.mjs"
 import * as Instruction from "../lib/expr-eval/instruction.mjs"
 import { escapeValue } from "../lib/expr-eval/expression.mjs"
 import { HelperInterface, LatexInterface } from "./interface.mjs"
@@ -44,6 +45,28 @@ const equivalchars = ["\\pi", "\\infty",
     "{}_{4}", "{}_{5}", "{}_{6}", "{}_{7}", "{}_{8}", "{}_{9}", "{}_{0}",
 ]
 
+
+
+
+class AsyncRenderStartedEvent extends BaseEvent {
+    constructor(markup, fontSize, color) {
+        super("async-render-started")
+        this.markup = markup
+        this.fontSize = fontSize
+        this.color = color
+    }
+}
+
+
+class AsyncRenderFinishedEvent extends BaseEvent {
+    constructor(markup, fontSize, color) {
+        super("async-render-finished")
+        this.markup = markup
+        this.fontSize = fontSize
+        this.color = color
+    }
+}
+
 /**
  * Class containing the result of a LaTeX render.
  *
@@ -60,6 +83,8 @@ class LatexRenderResult {
 }
 
 class LatexAPI extends Module {
+    static emits = ["async-render-started", "async-render-finished"]
+    
     /** @type {LatexInterface} */
     #latex = null
 
@@ -113,10 +138,14 @@ class LatexAPI extends Module {
     async requestAsyncRender(markup, fontSize, color) {
         if(!this.initialized) throw new Error("Attempting requestAsyncRender before initialize!")
         let render
-        if(this.#latex.supportsAsyncRender)
+        if(this.#latex.supportsAsyncRender) {
+            console.trace()
+            this.emit(new AsyncRenderStartedEvent(markup, fontSize, color))
             render = await this.#latex.renderAsync(markup, fontSize, color)
-        else
+            this.emit(new AsyncRenderFinishedEvent(markup, fontSize, color))
+        } else {
             render = this.#latex.renderSync(markup, fontSize, color)
+        }
         const args = render.split(",")
         return new LatexRenderResult(...args)
     }

common/src/preferences/general.mjs

@@ -47,8 +47,8 @@ class EnableLatex extends BoolSetting {
 }
 
 const ENABLE_LATEX_ASYNC = new BoolSetting(
-    qsTranslate("general", "Enable asynchronous LaTeX renderer"),
-    "enable_latex_async",
+    qsTranslate("general", "Enable threaded LaTeX renderer (experimental)"),
+    "enable_latex_threaded",
     "new"
 )