Compare commits
No commits in common. "7e0262e4fe3418f744a4d1e608ffe11e714db190" and "c9a597ea826770503d2ec2a9dbb13635328f5e4b" have entirely different histories.
7e0262e4fe
...
c9a597ea82
8 changed files with 55 additions and 196 deletions
|
@ -116,23 +116,10 @@ Button {
|
|||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: !hidden
|
||||
font.pixelSize: 14
|
||||
text: ""
|
||||
text: historyAction.getHTMLString().replace(/\$\{tag_color\}/g, clr)
|
||||
textFormat: Text.RichText
|
||||
clip: true
|
||||
wrapMode: Text.WordWrap
|
||||
|
||||
Component.onCompleted: function() {
|
||||
// Render HTML, might be string, but could also be a promise
|
||||
const html = historyAction.getHTMLString()
|
||||
if(typeof html === "string") {
|
||||
label.text = html.replace(/\$\{tag_color\}/g, clr)
|
||||
} else {
|
||||
// Promise! We need to way to wait for it to be completed.
|
||||
html.then(rendered => {
|
||||
label.text = rendered.replace(/\$\{tag_color\}/g, clr)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
|
@ -100,26 +100,10 @@ Item {
|
|||
anchors.left: parent.left
|
||||
visible: Modules.Latex.enabled
|
||||
property double depth: Screen.devicePixelRatio
|
||||
source: ""
|
||||
width: 0/depth
|
||||
height: 0/depth
|
||||
|
||||
Component.onCompleted: function() {
|
||||
if(Modules.Latex.enabled) {
|
||||
const args = [obj.getLatexString(), depth*(parent.font.pixelSize+2), parent.color]
|
||||
const prerendered = Modules.Latex.findPrerendered(...args)
|
||||
if(prerendered !== null) {
|
||||
source = prerendered.source
|
||||
width = prerendered.width/depth
|
||||
height = prerendered.height/depth
|
||||
} else
|
||||
Modules.Latex.requestAsyncRender(...args).then(info => {
|
||||
source = info.source
|
||||
width = info.width/depth
|
||||
height = info.height/depth
|
||||
})
|
||||
}
|
||||
}
|
||||
property var ltxInfo: visible ? Latex.render(obj.getLatexString(), depth*(parent.font.pixelSize+2), parent.color).split(",") : ["","0","0"]
|
||||
source: visible ? ltxInfo[0] : ""
|
||||
width: parseInt(ltxInfo[1])/depth
|
||||
height: parseInt(ltxInfo[2])/depth
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
import {Module} from "./modules.mjs"
|
||||
import {textsup} from "./utils.mjs"
|
||||
import {Expression} from "./mathlib.mjs"
|
||||
import Latex from "./math/latex.mjs"
|
||||
|
||||
|
||||
class CanvasAPI extends Module {
|
||||
|
@ -169,8 +168,6 @@ class CanvasAPI extends Module {
|
|||
obj.draw(this)
|
||||
} catch(e) {
|
||||
// Drawing throws an error. Generally, it's due to a new modification (or the opening of a file)
|
||||
console.error(e)
|
||||
console.log(e.stack)
|
||||
this._drawingErrorDialog.showDialog(objType, obj.name, e.message)
|
||||
Modules.History.undo()
|
||||
}
|
||||
|
@ -455,25 +452,24 @@ class CanvasAPI extends Module {
|
|||
* Renders latex markup ltxText to an image and loads it. Returns a dictionary with three values: source, width and height.
|
||||
* @param {string} ltxText
|
||||
* @param {string} color
|
||||
* @param {function(LatexRenderResult|{width: number, height: number, source: string})} callback
|
||||
* @param {function({width: number, height: number, source: string})} callback
|
||||
*/
|
||||
renderLatexImage(ltxText, color, callback) {
|
||||
const onRendered = (imgData) => {
|
||||
if(!this._canvas.isImageLoaded(imgData.source) && !this._canvas.isImageLoading(imgData.source)){
|
||||
let [ltxSrc, ltxWidth, ltxHeight] = Latex.render(ltxText, this.textsize, color).split(",")
|
||||
let imgData = {
|
||||
"source": ltxSrc,
|
||||
"width": parseFloat(ltxWidth),
|
||||
"height": parseFloat(ltxHeight)
|
||||
};
|
||||
if(!this._canvas.isImageLoaded(ltxSrc) && !this._canvas.isImageLoading(ltxSrc)){
|
||||
// Wait until the image is loaded to callback.
|
||||
this._canvas.loadImage(imgData.source)
|
||||
this._canvas.imageLoaders[imgData.source] = [callback, imgData]
|
||||
this._canvas.loadImage(ltxSrc)
|
||||
this._canvas.imageLoaders[ltxSrc] = [callback, imgData]
|
||||
} else {
|
||||
// Callback directly
|
||||
callback(imgData)
|
||||
}
|
||||
}
|
||||
const prerendered = Latex.findPrerendered(ltxText, this.textsize, color)
|
||||
if(prerendered !== null)
|
||||
onRendered(prerendered)
|
||||
else
|
||||
Latex.requestAsyncRender(ltxText, this.textsize, color).then(onRendered)
|
||||
}
|
||||
|
||||
//
|
||||
// Context methods
|
||||
|
|
|
@ -109,28 +109,24 @@ export class Action {
|
|||
* Renders a LaTeX-formatted string to an image and wraps it in an HTML tag in a string.
|
||||
*
|
||||
* @param {string} latexString - Source string of the latex.
|
||||
* @returns {Promise<string>}
|
||||
* @returns {string}
|
||||
*/
|
||||
renderLatexAsHtml(latexString) {
|
||||
if(!Latex.enabled)
|
||||
throw new Error("Cannot render an item as LaTeX when LaTeX is disabled.")
|
||||
return new Promise(resolve => {
|
||||
let imgDepth = Modules.History.imageDepth
|
||||
Latex.requestAsyncRender(
|
||||
let [src, width, height] = Latex.render(
|
||||
latexString,
|
||||
imgDepth * (Modules.History.fontSize + 2),
|
||||
Modules.History.themeTextColor
|
||||
).then((imgData) => {
|
||||
const { source, width, height } = imgData
|
||||
resolve(`<img src="${source}" width="${width/imgDepth}" height="${height/imgDepth}" style="vertical-align: middle"/>`)
|
||||
})
|
||||
})
|
||||
).split(",")
|
||||
return `<img src="${src}" width="${parseInt(width)/imgDepth}" height="${parseInt(height)/imgDepth}" style="vertical-align: middle"/>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a string with the HTML-formatted description of the action.
|
||||
*
|
||||
* @returns {string|Promise<string>}
|
||||
* @returns {string}
|
||||
*/
|
||||
getHTMLString() {
|
||||
return this.getReadableString()
|
||||
|
|
|
@ -85,9 +85,8 @@ export default class EditedProperty extends Action {
|
|||
}
|
||||
|
||||
setReadableValues() {
|
||||
this.prevString = ""
|
||||
this.nextString = ""
|
||||
this._renderPromises = []
|
||||
this.prevString = "";
|
||||
this.nextString = "";
|
||||
if(this.propertyType instanceof Object) {
|
||||
switch(this.propertyType.type) {
|
||||
case "Enum":
|
||||
|
@ -119,11 +118,8 @@ export default class EditedProperty extends Action {
|
|||
this.prevHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+this.prevString+' </tt>'
|
||||
this.nextHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+this.nextString+' </tt>'
|
||||
if(Latex.enabled && typeof this.propertyType == 'object' && this.propertyType.type === "Expression") {
|
||||
// Store promises so that querying can wait for them to finish.
|
||||
this._renderPromises = [
|
||||
this.renderLatexAsHtml(this.previousValue.latexMarkup).then(prev => this.prevHTML = prev),
|
||||
this.renderLatexAsHtml(this.newValue.latexMarkup).then(next => this.nextHTML = prev)
|
||||
]
|
||||
this.prevHTML= this.renderLatexAsHtml(this.previousValue.latexMarkup)
|
||||
this.nextHTML= this.renderLatexAsHtml(this.newValue.latexMarkup)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -135,21 +131,10 @@ export default class EditedProperty extends Action {
|
|||
}
|
||||
|
||||
getHTMLString() {
|
||||
return new Promise(resolve => {
|
||||
const translation = qsTr('%1 of %2 changed from %3 to %4.')
|
||||
return qsTr('%1 of %2 changed from %3 to %4.')
|
||||
.arg(this.targetPropertyReadable)
|
||||
.arg('<b style="font-size: 15px;"> ' + this.targetName + ' </b>')
|
||||
// Check if we need to wait for LaTeX HTML to be rendered.
|
||||
if(this.prevHTML !== undefined && this.nextHTML !== undefined)
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
else
|
||||
Promise.all(this._renderPromises).then((rendered) => {
|
||||
// Rendered are (potentially) two HTML strings which are defined during rendering
|
||||
this.prevHTML = this.prevHTML ?? rendered[0]
|
||||
this.nextHTML = this.prevHTML ?? rendered[1]
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
})
|
||||
})
|
||||
|
||||
.arg(this.prevHTML)
|
||||
.arg(this.nextHTML)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,15 +61,10 @@ export default class EditedPosition extends Action {
|
|||
setReadableValues() {
|
||||
this.prevString = `(${this.previousXValue.toString()},${this.previousYValue.toString()})`
|
||||
this.nextString = `(${this.newXValue.toString()},${this.newYValue.toString()})`
|
||||
this._renderPromises = []
|
||||
// Render as LaTeX
|
||||
if(Latex.enabled) {
|
||||
const prevMarkup = `\\left(${this.previousXValue.latexMarkup},${this.previousYValue.latexMarkup}\\right)`
|
||||
const nextMarkup = `\\left(${this.newXValue.latexMarkup},${this.newYValue.latexMarkup}\\right)`
|
||||
this._renderPromises = [ // Will be taken in promise.all
|
||||
this.renderLatexAsHtml(prevMarkup),
|
||||
this.renderLatexAsHtml(nextMarkup)
|
||||
]
|
||||
this.prevHTML = this.renderLatexAsHtml(`\\left(${this.previousXValue.latexMarkup},${this.previousYValue.latexMarkup}\\right)`)
|
||||
this.nextHTML = this.renderLatexAsHtml(`\\left(${this.newXValue.latexMarkup},${this.newYValue.latexMarkup}\\right)`)
|
||||
} else {
|
||||
this.prevHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+escapeHTML(this.prevString)+' </tt>'
|
||||
this.nextHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+escapeHTML(this.nextString)+' </tt>'
|
||||
|
@ -90,20 +85,9 @@ export default class EditedPosition extends Action {
|
|||
}
|
||||
|
||||
getHTMLString() {
|
||||
return new Promise(resolve => {
|
||||
const translation = qsTr('Position of %1 set from %2 to %3.')
|
||||
return qsTr('Position of %1 set from %2 to %3.')
|
||||
.arg('<b style="font-size: 15px;"> ' + this.targetName + ' </b>')
|
||||
// Check if we need to wait for LaTeX HTML to be rendered.
|
||||
if(this.prevHTML !== undefined && this.nextHTML !== undefined)
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
else
|
||||
Promise.all(this._renderPromises).then((rendered) => {
|
||||
// Rendered are (potentially) two HTML strings which are defined during rendering
|
||||
this.prevHTML = this.prevHTML ?? rendered[0]
|
||||
this.nextHTML = this.prevHTML ?? rendered[1]
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
})
|
||||
})
|
||||
|
||||
.arg(this.prevHTML)
|
||||
.arg(this.nextHTML)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -39,20 +39,6 @@ const equivalchars = ["\\alpha","\\beta","\\gamma","\\delta","\\epsilon","\\zeta
|
|||
"{}_{4}","{}_{5}","{}_{6}","{}_{7}","{}_{8}","{}_{9}","{}_{0}",
|
||||
"\\pi", "\\infty"]
|
||||
|
||||
/**
|
||||
* Class containing the result of a LaTeX render.
|
||||
*
|
||||
* @property {string} source - Exported PNG file
|
||||
* @property {number} width
|
||||
* @property {number} height
|
||||
*/
|
||||
class LatexRenderResult {
|
||||
constructor(source, width, height) {
|
||||
this.source = source
|
||||
this.width = parseFloat(width)
|
||||
this.height = parseFloat(height)
|
||||
}
|
||||
}
|
||||
|
||||
class LatexAPI extends Module {
|
||||
constructor() {
|
||||
|
@ -64,50 +50,11 @@ class LatexAPI extends Module {
|
|||
* true if latex has been enabled by the user, false otherwise.
|
||||
*/
|
||||
this.enabled = Helper.getSettingBool("enable_latex")
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepares and renders a latex string into a png file.
|
||||
*
|
||||
* @param {string} markup - LaTeX markup to render.
|
||||
* @param {number} fontSize - Font size (in pt) to render.
|
||||
* @param {color} color - Color of the text to render.
|
||||
* @returns {LatexRenderResult}
|
||||
* Mirror method for Python object.
|
||||
* @type {function(string, number, string): string}.
|
||||
*/
|
||||
renderSync(markup, fontSize, color) {
|
||||
let args = Latex.render(markup, fontSize, color).split(",")
|
||||
return new LatexRenderResult(...args)
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the given markup (with given font size and color) has already been
|
||||
* rendered, and if so, returns its data. Otherwise, returns null.
|
||||
*
|
||||
* @param {string} markup - LaTeX markup to render.
|
||||
* @param {number} fontSize - Font size (in pt) to render.
|
||||
* @param {color} color - Color of the text to render.
|
||||
* @returns {LatexRenderResult|null}
|
||||
*/
|
||||
findPrerendered(markup, fontSize, color) {
|
||||
const data = Latex.findPrerendered(markup, fontSize, color)
|
||||
let ret = null
|
||||
if(data !== "")
|
||||
ret = new LatexRenderResult(...data.split(","))
|
||||
return ret
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepares and renders a latex string into a png file asynchronously.
|
||||
*
|
||||
* @param {string} markup - LaTeX markup to render.
|
||||
* @param {number} fontSize - Font size (in pt) to render.
|
||||
* @param {color} color - Color of the text to render.
|
||||
* @returns {Promize<LatexRenderResult>}
|
||||
*/
|
||||
requestAsyncRender(markup, fontSize, color) {
|
||||
return new Promise(resolve => {
|
||||
resolve(this.renderSync(markup, fontSize, color))
|
||||
})
|
||||
this.render = Latex.render
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -93,12 +93,14 @@ class Latex(QObject):
|
|||
valid_install = False # Should have sent an error message if failed to render
|
||||
return valid_install
|
||||
|
||||
|
||||
@Slot(str, float, QColor, result=str)
|
||||
def render(self, latex_markup: str, font_size: float, color: QColor) -> str:
|
||||
"""
|
||||
Prepares and renders a latex string into a png file.
|
||||
"""
|
||||
markup_hash, export_path = self.create_export_path(latex_markup, font_size, color)
|
||||
markup_hash = "render" + str(hash(latex_markup))
|
||||
export_path = path.join(self.tempdir.name, f'{markup_hash}_{int(font_size)}_{color.rgb()}')
|
||||
if self.latexSupported and not path.exists(export_path + ".png"):
|
||||
print("Rendering", latex_markup, export_path)
|
||||
# Generating file
|
||||
|
@ -120,28 +122,6 @@ class Latex(QObject):
|
|||
# Small hack, not very optimized since we load the image twice, but you can't pass a QImage to QML and expect it to be loaded
|
||||
return f'{export_path}.png,{img.width()},{img.height()}'
|
||||
|
||||
@Slot(str, float, QColor, result=str)
|
||||
def findPrerendered(self, latex_markup: str, font_size: float, color: QColor):
|
||||
"""
|
||||
Finds a prerendered image and returns its data if possible, and an empty string if not.
|
||||
"""
|
||||
markup_hash, export_path = self.create_export_path(latex_markup, font_size, color)
|
||||
data = ""
|
||||
if path.exists(export_path + ".png"):
|
||||
img = QImage(export_path)
|
||||
data = f'{export_path}.png,{img.width()},{img.height()}'
|
||||
return data
|
||||
|
||||
|
||||
def create_export_path(self, latex_markup: str, font_size: float, color: QColor):
|
||||
"""
|
||||
Standardizes export path for renders.
|
||||
"""
|
||||
markup_hash = "render" + str(hash(latex_markup))
|
||||
export_path = path.join(self.tempdir.name, f'{markup_hash}_{int(font_size)}_{color.rgb()}')
|
||||
return markup_hash, export_path
|
||||
|
||||
|
||||
def create_latex_doc(self, export_path: str, latex_markup: str):
|
||||
"""
|
||||
Creates a temporary latex document with base file_hash as file name and a given expression markup latex_markup.
|
||||
|
|
Loading…
Reference in a new issue